Pada kesempatan ini saya akan mencoba menjelaskan secara sederhana bagaimana cara membuat
website dengan menggunakan HTML5, CSS3, dan Bootstrap.
Langkah pertama yang perlu dilakukan adalah dengan menggunakan aplikasi
Notepad++.
Untuk dapat menggunakan
Notepad++,sebelumnya kita harus mendownload terlebih dahulu, dan dibawah ini adalah website untuk mendownloadnya :
http://notepad-plus-plus.org/download/v6.7.3.html
Langkah 1 : Membuat Web Sederhana Dengan Menggunakan HTML5
Setelah kita memiliki aplikasi
Notepad++, kita dapat mengisi dengan tags kedalamnya dan kita juga perlu mengetahui beberapa fungsi dari tags-tags HTML yang akan kita isi sesuai dengan kebutuhan kita, berikut beberapa contohnya :
1.
<!doctype html>
Tags ini merupakan elemen pertama kali yang kita tulis kedalam
Notepad++. Dan fungsi dari tags ini adalah untuk mendefinisikan informasi tipe dokumen.
2.
<html> </html>
Tags ini merupakan elemen kedua yang kita tulis, tags ini berfungsi untuk mendefinisikan root dari suatu dokumen HTML.Setelah kita menuliskan elemen kedalam tags ini kita harus menutup kembali tags tersebut, </html>.
3.
<head> </head>
Tags ini befungsi untuk memberikan informasi terhadap web yang akan kita buat nantinya, contohnya sebagai berikut.
<head>
<title>Dokumen HTML Index</title>
<meta name="Author" content="Baskoro" />
<meta name="keyword" content="HTML, WEB, HTML5" />
</head>
Contoh diatas adalah sedikit gambaran apa saja yang terdapat didalam tagas head. Dan kita dapat memodifikasi sesuai dengan kebutuhan.
4.
<title> </title>
Seperti pada contoh diatas, didalam tags ini berisikan judul untuk dokumen HTML yang akan kita buat. Jadi, dapat dikatakan tags
Title terdapat didalam elemen tags
Head.
5.
<body> </body>
Tags ini mendefinisikan ini dokumen HTML,berfungsi untuk menampilkan isi suatu
dokumen yang akan ditampilkan ke dalam
web browser. Isi dokumen tersebut dapat berupa teks, gambar, link, animasi, dll.
6.
<hr> </hr>
Tags ini berfungsi untuk membuat garis horisontal pada web
7.
<h1> to <h6>
Tags ini bersfungsiuntuk menunjukkan awal dari suatu header/judul pada
dokumen HTML tersebut.
Nah,itu adalah beberapa contoh tags yang sangat penting untuk kita isi elemen-elemen apa saja yang dapat kita masukkan kedalam
HTML dengan menngunakan
Notepad++.
Sekarang saya akan memberikan contoh sederhana dari HTML5.
<!doctype html>
<html>
<head>
<title>Dokumen HTML Index</title>
<meta name="Author" content="Baskoro Rizky" />
<meta name="Keywords" content="HTML,WEB,HTML5"/>
</head>
<body>
<header>
<center><h1>Dokumen HTML, Baskoro Rizky</h1></center>
</header><hr>
<nav>
<a href="index.html" title="klik disini untuk ke halaman depan">Kembali ke Beranda</a>
<a href="http//kaskus.co.id" target="blank">Google</a>
</nav>
<article>
<p>Ini adalah isi dari paragraf pertama dokumen HTML5.
HTML5 adalah generasi ke-5 dari standar HTML.</p>
<p>DOkumen Web ini dibuat dengan menggunakan software
Notepad++. Notepad++ adalah software untuk menulis
dokumen teks ASCII</p>
<p>Dokumen Web HTML adalah standar de facto untuk
menampilkan informasi di World Wide Web.</p>
</article>
<footer>
<p>Copyrights 2014-Baskoro Rizky</p>
</footer>
</body>
</html>
Setelah melakukan pengkodngan ke dalam Tags, jangan lupa untuk menyimpan file dengan format ".html", misalnya seperti "Web.html".Berikut adalah contoh dasar web, yang telah ditulis kedalam tags-tags HTML di
Notepad++.
Langkah 2 : Membuat Web dengan menggunakan CSS3
Setelah kita mempelajari dasar membuat Web menggunakan HTML5 sekarang kita akan mempelajari bagaimana menggunakan aplikasi CSS3.Untuk itu, saya akan memberikan sedikit gambaran tentang CSS3. CSS (Cascading Style Sheets) adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan tata letak sebuah halaman web. CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML.
Keuntungan menggunakan CSS :
-Untuk mengatur dan memperindah tampilan web (lebih rapi).
-Lebih praktis dan menghemat penggunaan tag yang berulang-ulang.
-Bisa digunakan pada website atau webpage yang lain, misalnya website kita - mempunyai 5 halaman (webpage), maka kita tidak perlu membuat pengaturan tampilan atau menulis ulang code-code untuk mengatur tata letak tampilan pada masing-masing halaman/page sebanyak lima kali. Kita bisa memanfaatkan code yang sudah ada dengan memanggil tag CSS yang dibuat pada file terpisah (file.css).
Untuk dapat menggunakan CSS3, biasanya kita harus menyertakan script. Berikut adalah contoh script yang dapat kita masukkan kedalam Tags.
<!doctype html>
<html>
<head>
<title>Menggunakan CSS</title>
<meta name="Keyword" content="HTML, CSS" />
<meta name="Author" content="Baskoro Rizky"/>
<style type="text/css">
</style>
Seperti contoh diatas, kita harus memasukkan script tersebut didalam Tags
"<head> </head>"
Dan berikut ini adalah contoh tags-tags yang menggunakan script CSS.
<!doctype html>
<html>
<head>
<title>Menggunakan CSS</title>
<meta name="Keyword" content="HTML, CSS" />
<meta name="Author" content="Baskoro Rizky"/>
<style type="text/css">
body{background-color: grey;}
blockquote {
font-style: italic;
border-bottom: 2px solid black;
}
h1 {
font-family: Arial;
text-align: Center;
color: red;
}
p {
font-family: Arial;
}
.kuning {
background-color: yellow;
font-size: 120%;
}
</style>
</head>
<body>
<header>
<h1>Menggunakan CSS dalam HTML</h1>
</header>
<article>
<p>Ada 2 macam cara umum dalam menggunakan CSS
dalam HTML, yang pertama adalah dengan metode
tegabung langsung dengan dokumen HTML,
yang kedua dengan melalui link ke file CSS.</p>
<blockquote>
Cara pertama dengan menggunakan tag elemen STYLE
pada bagian HEAD dokumen HTML.
</blockquote>
<p>Contoh syntax CSS adalah sebagai berikut:</p>
<code>h1 ( font-family: Arial;)</code>
<p>Indonesia merupakan negara yang berbentuk Republik, negara ini merdeka pada tangal 17 Agustus 1945. Terdiri dari ribuan kepulauan dan merupakan negara maritim terbesar didunia. Negara ini memiliki banyak sumber daya alam yang melimpah di tiap Pulau-pulau nya.
Contohnya seperti : emas, tembaga, nikel, minyak, dan masih banyak lagi. Namun, bangsa ini belum mampu mengolah sumber daya alamnya sendiri</p>
<blockquote class="kuning">Hal ini disebabkan oleh kurangnya pengetahuan dan teknologi yang
mumpuni, karena belum didukung secara maksimal oleh pemerintah. </blockquote>
<p>Saat ini, Jumlah penduduk yang sangat besar, hampir mencapai angka
250juta orang, tapi belum sepenuhnya dapat mengelola sumber daya alam yang begitu
melimpah di negaranya sendiri.</p>
<blockquote class="kuning">Hal ini sangat mengkhawatirkan, karena persaingan global semakin ketat, dan menuntut tiap individu mampu menggunakan teknologi dengan sangat
baik. Untuk itu, diperlukan berbagai dukungan pemerintah untuk mengembangkan kemampuan
masyarakatnya.</blockquote>
</article>
</article>
</body>
</html>
Fungsi CSS disini adalah untuk mengganti warna pada font, background, dan kita
mengenal penggunaan
blockquotes. Untuk mengganti warna pada font, kita akan
menggunakan istilah "class" fungsinya adalah untuk merubah warna seperti yang kita inginkan.
Kemudian, saya akan menampilkan contoh web dari hasil coding pada contoh diatas.
Langkah 3 : Membuat web dengan menggunakan Bootstrap
Sekarang kita akan mencoba mendesain sebuah web dengan menggunakan aplikasi yang dinamakan Bootstrap. Berikut ini, saya akan coba menjelaskan apa itu Bootstrap.
Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.
Menggunakan Bootstrap
Langkah-langkah yang dibutuhkan untuk menggunakan Bootstrap pada website yang akan kita kembangkan sangatlah sederhana. Sederhananya, penggunaan Bootstrap dapat dicapai dengan tiga langkah singkat, yaitu:
-Download Bootstrap pada website resminya.
-Lakukan ekstraksi file zip hasil download, dan
-masukkan CSS Bootstrap pada file HTML anda.
Untuk dapat mendownload bootsrtap kita dapat mengunjungi Website :
http://getbootstrap.com/getting-started/#download
Setelah mendownload bootstrap kita dapat mengekstrak file.zip tersebut, sehingga
akan muncul folder dengan tampilan berikut ini :
Kita mengetahui cara mendownload dan menggunakan Bootstrap, kita akan mencoba untuk membuat coding pada
Notepad++.
Dan contoh sederhananya adalah sebagai berikut
<!doctype html>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<style type="text/css">
.tersembunyi {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('.tombol-jquery').click( function() {
$('.tersembunyi').slideDown(1000);
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#">Homepage</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Gosip</a></li>
</ul>
</nav>
<header>
<h3>Dokumen Web menggunakan Bootstrap</h3>
<div class="jumbotron">
<h1><img src="./Madrid.jpg" />Selamat Datang!</h1>
<p>Dokumen Web ini dibuat dengan menggunakan
framework Bootstrap!
</p>
<p><a href="#" class="btn btn-primary tombol-jquery">Munculkan Section</a></p>
</div>
</header>
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#">Homepage</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Gosip</a></li>
</ul>
</nav>
<section class="row tersembunyi">
<section class="col-md-4">
<h3><i class="glyphicon glyphicon-globe"></i>News!</h3>
<ul>
<li>Judul Berita 1</li>
<li>Judul Berita 2</li>
<li>Judul Berita 3</li>
<li>Judul Berita 4</li>
<li>Judul Berita 5</li>
</ul>
<a href="#" class="btn btn-primary">Berita lainnya...</a>
</section>
<section class="col-md-4">
<h3><i class="glyphicon glyphicon-folder-open"></i>Article!</h3>
<ul>
<li>Judul Artikel 1</li>
<li>Judul Artikel 2</li>
<li>Judul Artikel 3</li>
<li>Judul Artikel 4</li>
<li>Judul Artikel 5</li>
</ul>
<a href="#" class="btn btn-primary">Artikel lainnya...</a>
</section>
<section class="col-md-4">
<h3><i class="glyphicon glyphicon-heart"></i>Gosip!</h3>
<ul>
<li>Judul Gosip 1</li>
<li>Judul Gosip 2</li>
<li>Judul Gosip 3</li>
<li>Judul Gosip 4</li>
<li>Judul Gosip 5</li>
</ul>
<a href="#" class="btn btn-primary">Gosip lainnya...</a>
</section>
</section>
<footer>
</footer>
</body>
</html>
Masukkan Tags berikut tepat berada dibawah script
"<title> </title>" :
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
Mntuk menambahkan jumbotron dan menambahkan icon pada halaman web bisa menggunakan script berikut, dan diletakkan pada bagian
"<header> </header>" :
<h3>Dokumen Web menggunakan Bootstrap</h3>
<div class="jumbotron">
<h1><img src="./Madrid.jpg" /> Selamat Datang!</h1>
<p>Dokumen web ini dibuat menggunakan
framework Bootstrap!
</p>
<p><a href="#" class="btn btn-primary tombol-jquery">Munculkan Section</a></p>
</div>
catatan : lokasi penyimpanan gambar untuk icon harus sama dengan lokasi folder Bootstrap. Dan besarnya tidak melebihi
Untuk menambahkan tampilan menu gunakan script berikut pada bagian body setelah header :
<nav class="navbar navbar-default navbar-fixed-top">
<ul class="nav navbar-nav">
<li><a href="#">Homepage</a></li>
<li><a href="#">Berita</a></li>
<li><a href="#">Artkel</a></li>
<li><a href="#">Gosip</a></li>
</ul>
</nav>
Pakai script berikut untuk membuat menu artikel menjadi tersembunyi, tetapi dengan mengklik tombol
"munculkan section", menu artikel menampilkan daftar :
<style type="text/css">
.tersembunyi {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('.tombol-jquery').click( function() {
$('.tersembunyi').slideDown(1000);
});
});
</script>
Sekian penjelasan sederhana mengenai pembuatan Website dengan menggunakan aplikasi software HTML5, CSS3, dan Bootstrap. Semoga bermanfaat untuk teman-
teman. Mohon maaf apabila banyak kekurangan dan kata-kata yang mungkin sama.
Terimakasih.
Nama : Baskoro Rizky R
NPM : 1306470496
Kelas : A
http://www.jeanotnahasan.com
http://blogedek.blogspot.com
http://bertzzie.com
