Mengenal HTML Boilerplate

Halo teman-teman!

Kali ini, kita akan belajar tentang HTML Boilerplate, yaitu kerangka dasar yang menjadi struktur utama file HTML. Ibarat menulis surat, HTML Boilerplate ini seperti format standar: ada bagian pembuka, isi, dan penutup. Yuk, kita bahas langkah demi langkah!

Apa Itu HTML Boilerplate?

HTML Boilerplate adalah template awal yang digunakan untuk setiap file HTML. Ini memastikan bahwa kode HTML kita punya struktur yang rapi dan standar, sehingga browser bisa membaca dan menampilkan website kita dengan benar.

Komponen Dasar HTML Boilerplate

HTML Boilerplate terdiri dari beberapa bagian penting:

1. Deklarasi Doctype

Baris pertama di setiap file HTML adalah deklarasi Doctype. Ini memberi tahu browser bahwa kita menggunakan HTML5. Formatnya seperti ini:

<!DOCTYPE html>

2. Elemen `<html>`

Semua elemen HTML ada di dalam elemen <html>. Ini adalah akar dari dokumen HTML. Kita juga bisa menambahkan atribut lang untuk menunjukkan bahasa utama situs. Misalnya, jika situs dalam bahasa Indonesia:

<html lang="id">

3. Elemen `<head>`

Bagian ini berisi informasi tentang website yang tidak terlihat langsung oleh pengguna. Contohnya:

<meta charset="UTF-8">: Menentukan karakter yang digunakan. UTF-8 mendukung banyak karakter, termasuk emoji.

<title>: Menentukan judul website yang tampil di tab browser.

<head>
  <meta charset="UTF-8">
  <title>Website Saya</title>
</head>

4. Elemen `<body>`

Semua konten website, seperti teks, gambar, dan link, diletakkan di dalam elemen <body>. Misalnya:

<body>
  <h1>Halo Dunia!</h1>
  <p>Selamat datang di website saya.</p>
</body>

Struktur Lengkap HTML Boilerplate

Berikut adalah contoh lengkap HTML Boilerplate:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Saya</title>
</head>
<body>
  <h1>Halo Dunia!</h1>
  <p>Selamat datang di website saya.</p>
</body>
</html>

Tips Penting: Shortcut Boilerplate di VS Code

Kamu tidak perlu mengetik semuanya secara manual setiap kali membuat file HTML baru. Di VS Code, cukup:

Buat file baru dengan ekstensi .html.
Ketik tanda seru ! lalu tekan Enter.
VS Code akan otomatis men-generate HTML Boilerplate untukmu!

Latihan: Membuat Burger dengan HTML

Sekarang, saatnya berlatih! Bayangkan kita membuat sebuah burger, tapi dalam bentuk HTML. Gunakan elemen HTML untuk mewakili bagian-bagian burger:

Contoh:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Burger Saya</title>
</head>
<body>
  <div class="burger">
    <div class="bun-top">Roti Atas</div>
    <div class="lettuce">Selada</div>
    <div class="meat">Daging</div>
    <div class="bun-bottom">Roti Bawah</div>
  </div>
</body>
</html>

Coba buat burger versimu sendiri! Tambahkan elemen seperti keju, tomat, atau saus, dan pastikan menggunakan indentasi yang rapi agar kodenya mudah dibaca.

Kesimpulan

HTML Boilerplate adalah fondasi setiap website. Dengan memahami strukturnya, kamu sudah siap membangun halaman web yang lebih kompleks. Jangan lupa latihan membuat burger HTML-mu sendiri, ya!

Selanjutnya, kita akan belajar tentang nesting dan bagaimana menjaga kode tetap rapi dengan indentasi yang baik. Sampai jumpa di pelajaran berikutnya!