Pada postingan artikel kali ini, saya akan memberikan tutorial bagaimana cara membuat halaman web HTML5 dengan menggunakan "notepad++", berikut adalah sekilas tampilan aplikasi yang akan kita gunakan :
Langkah-langkah :
Untuk membuat sebuah halaman web berupa dokumen html, maka, script yang pertama kita masukkan adalah :
<!doctype html>
lalu diikuti oleh script berikut :
<html>
<head>
<title></title>
<meta name="Author" content=""/>
<meta name="Keyword" content="" />
</head>
<body>
<header>
</header>
<article>
</article>
<footer>
</footer>
</body>
</html>
Script tersebut kita isi atau tambahkan sesuai perintah, sebagai contoh yang akan kita isi adalah sebagai berikut :
<!doctype html>
<html>
<head>
<title>Dokumen HTML Index</title>
<meta name="Author" content="Novriz Guntur Pratama" />
<meta name="Keyword" content="HTML, Web, HTML5" />
</head>
<body>
<header>
<h1>Dokumen HTML Novriz Guntur Pratama</h1>
</header>
<article>
<p>Ini adalah isi dari paragraf pertama dokumen HTML5, HTML5 adalah generasi kelima dari standar HTML.</p>
<p>Dokumen web ini dibuat dengan menggunakan software notepad++. Notepad++ adalah softwae untuk menulis dokumen teks ASCII.</p>
<p>Dokumen web html adalah standard de facto untuk menampilkan informasi di World Wide Web.</p>
</article>
<footer>
<p>Copyrights 2014 - Novriz Guntur Pratama</p>
</footer>
</body>
</html>
Keterangan :
"<h1></h1>" digunakan untuk mengatur ukuran huruf header yang akan kita gunakan
"<p></p>" digunakan untuk pemakaian paragraf tulisan"
Berikut adalah tampilan notepad++ yang telah dimasukkan script beserta elemen-elemennya. Pengguna dapat mengubah elemen isi sesuai yang diinginkan, contohnya penggunaan nama dan elemen paragraf.
Setelah selesai pengkodingan, file disimpan dengan format nama ".html" . misalkan "index.html". Kemudian save/simpan. format file yang disimpan akan muncul sebagai media browser (seperti firefox) yang jika kita buka akan menampilkan halaman web sederhana seperti gambar berikut.
Nah, sekarang kita telah membuat sebuah halaman web html5 sederhana. untuk mempercantik atau memperindah halaman web kita agar lebih menarik, pengguna dapat menggunakan CSS3.CSS (Cascading Style Sheet) adalah salah satu bahasa pemrograman web untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Dengan cara memasukkan script berikut :
<style type="text/css">
</style>
tepatnya diletakkan pada bagian setelah script <meta name="Keywords" content="" />
Langkah selanjutnya adalah memasukkan perintah css seperti mengganti warna font, warna backround, dan penggunaan blockquotes.
untuk penggunaan warna font, kita dapat menggunakan istilah "class" agar font yang diinginkan sesuai dengan perintah warna pada css.
Tampilan halaman web dari hasil coding diatas adalah sebagai berikut
Bootsrap
Langkah selanjutnya adalah menggunakan
bootsrap. Bootstrap adalah sebuah framework utama yang berguna untuk membangun desain halaman web, serta memudahkan pengguna dalam hal akses CSS
dan JS siap pakai. Kompilasi CSS dan JS BootStrap berguna untuk
menangani berbagai fungsi dan animasi dalam halaman web
. Untuk mendapatkan bootstrap, pengguna dapat mengunduhnya secara gratis dengan mendownload pada link berikut ini
Klik
Setelah diunduh silakan ekstrak file.zip tersebut sehingga anda akan mendapatkan folder “bootstrap” dan berisi tiga folder yaitu "css, font, dan js". Kemudian letakkan folder bootstrap tersebut ke tempat proyek desain web.
masukkan script 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>
untuk 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="./autobot2.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>
catatan : lokasi penyimpanan gambar untuk icon harus sama dengan lokasi folder bootstrap!
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>
tampilan pada notepad++ adalah sebagai berikut :
hasil dari
coding diatas adalah sebagai berikut :
Sekian dari sekilas informasi dan pengetahuan tentang cara membuat html, css, dan penggunaan bootsrap yang dapat saya sampaikan kepada pembaca, lebih kurang saya mohon maaf, dan saya ucapkan terima kasih.
Nama : Novriz Guntur Pratama
NPM : 1306390406
Kelas : A
Sumber referensi :
http://www.ngulikweb.com
http://jayaweb.com
