Struktur Panduan

Tiga berkas menunggu kita, dan semuanya dibangun dari beranda. Pada bagian ini kita menulis kerangka src/index.html — head lengkap, header berisi logo dan menu, serta section sambutan — sekaligus mengambil keputusan paling berpengaruh pada proyek ini: konten mana yang layak berhalaman sendiri.

Head dan Header Halaman Utama #

Ketik baris berikut sebagai awal src/index.html — sama persis dengan baris 1-20 berkas final, dan pola head-nya diulang dengan judul berbeda pada dua halaman lain:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jelajah Bandung — Panduan Wisata Kota Kembang</title>
  <meta name="description" content="Panduan wisata Bandung dari tim lokal Jelajah Bandung: tiga destinasi populer, tips perjalanan, dan kontak redaksi.">
</head>
<body>
  <!-- Kepala situs: logo dan navigasi utama -->
  <header>
    <p><strong>Jelajah Bandung</strong> — panduan wisata lokal</p>
    <nav aria-label="Navigasi utama">
      <ul>
        <li><a href="destinasi.html">Destinasi</a></li>
        <li><a href="tips.html">Tips Perjalanan</a></li>
        <li><a href="#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>

Mari kita bedah baris demi baris:

1. title unik (baris 6): “Jelajah Bandung — Panduan Wisata Kota Kembang”. Setiap halaman proyek ini memakai judul tab berbeda — tiga tab bernama sama hanya membebani pengunjung yang memilih dari riwayat browser.
2. meta description (baris 7): ringkasan isi beranda — halaman destinasi dan tips kelak membawa versi ringkasan mereka sendiri.
3. Logo teks, bukan heading (baris 12): nama situs dan tagline dibungkus p dengan penekanan strong — pola yang sama dipakai katalog resep. Satu-satunya h1 disimpan untuk judul isi di dalam main.
4. nav bernama (baris 13-19): aria-label="Navigasi utama" memberi nama wilayah bagi pembaca layar; isinya ul tiga tautan.
5. Dua tautan relatif (baris 15-16): destinasi.html dan tips.html ditulis tanpa domain dan tanpa folder. Ketiga berkas bertetangga di satu folder, jadi browser melengkapinya dengan lokasi halaman saat ini — persis mekanisme URL relatif dokumen dari chapter Absolute dan Relative URL.
6. Satu tautan fragment (baris 17): #kontak menunjuk section kontak yang baru kita pasang pada Bagian 3 — tautan boleh ditulis lebih dulu, targetnya menyusul.

Section Sambutan #

Setelah header, main dibuka dengan section pertama — sambutan singkat yang menyampaikan janji situs dan satu tautan ajakan:

    <!-- Sambutan pembuka -->
    <section id="sambutan">
      <h1>Selamat Datang di Jelajah Bandung</h1>
      <p>Bandung menyimpan banyak pilihan untuk akhir pekan: kawah gunung yang sejuk di utara, danau kawah pucat di selatan, dan jalan bersejarah tepat di pusat kota. Panduan ringkas ini disusun tim lokal yang menjelajah ketiga arah itu berulang kali.</p>
      <p><a href="destinasi.html">Lihat daftar destinasi lengkap</a></p>
    </section>

Bedah potongan ini:

1. section ber-id (baris 1): wadah sambutan diberi id="sambutan" sebagai penanda struktural — pola yang kita pertahankan di seluruh proyek.
2. h1 tunggal (baris 2): satu h1 per halaman; dua halaman lain mengikuti aturan yang sama dengan judulnya masing-masing.
3. Tautan ajakan (baris 4): “Lihat daftar destinasi lengkap” — teksnya menyebut tujuan, bukan perintah kosong seperti “klik di sini”; kebiasaan chapter Link Text yang Jelas kita rawat sejak baris pertama.

Satu Halaman atau Tiga? #

Katalog resep cukup satu berkas karena seluruh isinya satu topik yang digulir berurutan. Panduan wisata kita berbeda, dan keputusan memecahnya bisa dibaca dari tabel berikut:

Konsekuensinya harus kita terima: menu yang sama kelak disalin ke ketiga berkas, dan setiap perubahan menu berarti tiga kali penyuntingan — dibahas tuntas pada Bagian 4.

Hasil pada Browser #

Judul tab menampilkan “Jelajah Bandung — Panduan Wisata Kota Kembang”. Di halaman tampak nama situs, tagline, tiga tautan, dan sambutan ber-h1. Klik “Destinasi” — browser melaporkan berkas tidak ditemukan karena destinasi.html memang belum ditulis; itu penanda lanjutan, bukan galat kita.

Inilah keadaan beranda pada akhir Bagian 1:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) karena demo hanya satu potongan berkas, dan tautan “Kontak” belum melompat ke mana pun — section kontaknya baru dibuat pada Bagian 3; buka berkas hasil unduhan sendiri untuk perilaku tautan yang sesungguhnya.

Ringkasan Bagian 1 #

• Kerangka beranda berdiri: head lengkap dengan title unik, header berisi logo teks dan menu, section sambutan ber-h1 tunggal.
• Tautan antarhalaman ditulis relatif — cukup nama berkas karena ketiganya bertetangga.
• Tiga halaman dipilih karena topik dan kebiasaan baca pengunjung berbeda, bukan karena kontennya panjang.

Bagian berikutnya mengisi beranda dengan tiga kartu destinasi dan membuat halaman daftar yang menjadi tujuan tautannya.