HTML 5
- Langkah pertama pada komputer anda disarankan memiliki aplikasi bernama Notepad++ seperti di gambar dan saya tandai dengan cursor :
Setelah itu buka File dan New document
- pertama untuk membuat halaman web dimulai dengan mengetikkan <!doctype html> ini adalah format untuk memulai pembuatan halaman web setelah itu Klik Enter dan mengetikkan tag <html> dan penutupmya di bawah </html> , setelah itu mengetikkan tag bagian <head> dan penutupnya </head> di dalam tag <head> kita isi dengan tag tag seperti contoh di bawah ini :
<head>
<title>Dokumen HTML Index</title>
<meta name="Author" content="NAMA" />
<meta name="keywords" content="HTML, HTML5, Belajar" />
</head>
lalu buat tag bagian <body> setelah <head>
buat tag <body> dan penutupnya </body> lalu didalam tag body ini buat tag tag yang memiliki fungsi tertentu seperti <header> , <article> ,<h1>, <p> dan <footer> seperti contoh di bawah ini :
<body>
<header><h1>Dokumen HTML Index Nama</h1></header>
<article>
<p>ini adalah dokumen HTML Index Nama , dibuat dengan HTML 5, menggunakan software notepad ++</p>
</article>
<footer>
<p>Copyrights 2014 - Prasena Giritungga</p>
</footer>
</body>
ini adalah contoh gambar lengkapnya dengan posisi tag kalian bisa check dan di coba :
setelah selesai dibuat save file dengan format...contoh : INDEX.html dan setelah itu bisa di check hasilnya :) ;)
CSS 3
- berikutnya adalah tutorial penggunaan CSS setelah kita buat HTML......CSS itu adalah Cascading Style Sheet yang berarti kumpulan kode-kode yang berurutan & saling berhubungan untuk mengatur tampilan suatu halaman HTML.
pertama untuk awal pembuatan css masih pada software notepad++ lalu pada bagian <head> kita tambahkan tag baru yaitu tag <style>
<head>
<title>Dokumen HTML Index</title>
<meta name="Author" content="NAMA" />
<meta name="keywords" content="HTML, HTML5, Belajar" />
<style type="text/css'>
</style>
</head>
<title>Dokumen HTML Index</title>
<meta name="Author" content="NAMA" />
<meta name="keywords" content="HTML, HTML5, Belajar" />
<style type="text/css'>
</style>
</head>
- berikutnya seperti contoh html pada bagian tag <body> saya akan menggunakan tag-tag seperti <header> , <article>, <footer> dan pada kali ini saya juga akan menggunakan tag baru bernama <blockquote> tag ini untuk membuat bentuk/format sebuah paragraf quote yang fungsinya agar text tertata rapi seperti di gambar :
- setelah blockquote dibuat atau informasi penting lainnya telah ditulis di bagian <body> saya akan mengedit atau mengubah bagian <blockquote> dengan italic sehingga teks atau informasi tertulis berbentuk miring seperti di contoh gambar :
- pada bagian style ini sebetulnya digunakan untuk meng edit informasi yang tertulis pada bagian body sehingga lebih menarik,pada kali ini saya hanya memberikan contoh kecil dengan mengubah font style nya saja
ini contoh full kerangka buatan saya :
setelah semua selesai jangan lupa untuk di save dalam format html seperti contoh sebelumnya
Okay selamat mencoba :);)
Bootsrap
bootsrap itu adalah salah satu framework yang mudah digunakan untuk membuat layout sebuah halaman website cara menggunakan nya
pertama kita harus mendownload terlebih dahulu bootsrapnya di getbootsrap setelah di download letakkan file bootsrap bergabung dengan file html yang tadi kita buat lalu jangan lupa di ekstrak zip bootsrapnya setelah itu dalam pembuatannya masukkan link file bootsrap ke dalam tag bagian <head> dan pada bagian akhir javascript tag <body>
seperti pada gambar :
dengan menggunakan bootsrap memudahkan kita untuk mendesign web yang ingin kita buat dengan model kesukaan kita
inilah sedikit informasi tutorial bootsrap semoga bermanfaat dan silahkan mencoba :):)
Sumber Referensi :
http://tutorit.wordpress.com/2014/04/30/tutorial-bootstrap-cara-menggunakan-bootstrap/
http://www.ilmuwebsite.com/dasar-dasar-membuat-sebuah-web-html
http://www.maskolis.com/2011/03/belajar-dan-memahami-dasar-dasar-code.html
Prasena Giritungga Putra /1306471196/MID B 2013
