Tutorial Menggunakan HTML5, CSS3 dan Bootstrap: Membuat Halaman Web dengan Menggunakan HTML5, CSS3 dan Bootstrap

Di halaman blog ini saya akan menjelaskan bagaimana cara membuat halaman web dengan menggunakan HTML5, CSS3 dan Bootstrap. Nah, berikut ini langkah-langkahnya :

HTML 5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML.

Tag atau <> di tulis secara berpasangan sebagai tanda pembuka dan penutup dari elemen HTML

Contoh : Pembuka <body>

Penutup </body>

Dasar yang memebentuk suatu HTML

<!DOCTYPE html>

DOCTYPE adalah suatu deklerasi yang digunakan untuk mengidentifikasi jenis dokumen HTML yang digunakan.

<html> dan </html>
Tag ini diigunakan untuk menandai awal dan akhir dari suatu file HTML.

<head> dan </head>

Di dalam bagian head dimuat tag TITLE untuk memberikan judul pada halaman web, head juga memuat tag META untuk menentukan informasi tertentu dalam dokumen HTML.

<body> dan </body>

Isi dari sebuah dokumen biasanya mengenaik informasi yang akan di sampaikan.

Tuliskan tag-tag ini kedalam notepad:

Tag Head : <head></head>

Tag Body : <body></body>

Tag body merupakan inti dari halaman web. Karena dalam tag ini biasanya berisikan mengenai informasi yang akan diberika pemilik halaman web kepada para penggunanya. Informasi yang ada di dalam Tag body diawali dan diakhiri dengan tag <article></article>.

Halaman body ini bisa berisikan pragraf, list ataupun tabel. Ini adalah cara untuk memasuka informasi tersebut.

header> </header>: Di dalam tag ini di berikan tag <h1>Berbagai Elemen HTML5</h1> di tujukan untuk memuat julul artikel. <h1></h1> menandakan ukuran terbesar pada judul artikel dan untuk ukuran terkecil dengan menggunakan <h6></h6>.
<p> dan </p> : tag ini digunakan untuk memsukkan sebuah paragraph.
<ol><li>Ini adalah list pertama</li></ol> : tag ini digunakan untuk memberikan list dalam bentuk angka.
<ul><li>Ini adalah list bullet pertama</li><ul> : tag ini digunakan untuk memberikan list dalam bentuk bullet.

Nah.. ini adalah hasil dari halaman web yang kita buat :

CSS3

CSS3 adalah komponen yang mengatur tampilan halaman web dengan terstruktur. CSS3 dapat mengatur ukuran, jenis text, warna pada teks dsb. Dengan adanya CSS3 kita dapat menampilkan halaman web dengan lebih menarik.

Langkah-langkah menggunakan CSS3

Tuliskan tag <style type="text/css"> di dalam tag head
Lalu, tentukan pada bagian tag body yang akan di berikan warna, atau undeline dll. Contoh :

dari elemen tersebut akan menghasilkan tampilan halaman web, untuk tag <h1>Menggunakan CSS dalam HTML</h1>

untuk tag <blockquote></blockquote>

Bootstrap

Bootstrap merupakan framework CSS yang memudahkan kita dalam merancang halaman web, dengan memberikan tampilan yang mudah dan rapih juga dapat memodifikasi tampilan dasar HTM.

Masukan kode pada tag head