Proyek-proyek sebelumnya berdiri dalam satu berkas: profil penulis maupun katalog resep sama-sama utuh di dalam satu index.html. Situs web sungguhan jarang sependek itu — pengunjung berpindah dari beranda ke halaman daftar, lalu ke halaman detail, dengan menu yang sama menyambut di setiap halaman. Pada proyek ini kita membangun situs multi-halaman pertama kita: panduan wisata Jelajah Bandung, tiga berkas HTML yang saling terhubung dan tinggal di satu folder.

Proyek ini melatih keterampilan yang baru muncul begitu halaman lebih dari satu: menu navigasi yang sama ditempelkan ke setiap berkas dan ditandai aria-current pada halaman aktif, tautan relatif yang berpindah antarberkas, fragment yang menyeberang halaman (destinasi.html#kawah-putih), informasi lokasi dengan address, jam buka dengan time, serta tautan eksternal yang aman dengan target="_blank" dan rel="noopener". Kebiasaan lama tetap dipakai: elemen semantik header, main, footer, gambar dengan alt deskriptif, dan title unik untuk tiap halaman.

Perilaku yang Diharapkan #

Sebelum menulis kode, mari kita tetapkan dulu hasil akhirnya — kali ini untuk tiga halaman sekaligus. Semua halaman saling terhubung lewat dua jalur: menu di bagian atas dan tautan isi di dalam halaman.

  • Menu di bagian atas ketiga halaman memuat tiga item yang sama: Destinasi, Tips Perjalanan, dan Kontak. Satu klik memindahkan pengunjung antarberkas — “Destinasi” memuat destinasi.html, “Tips Perjalanan” memuat tips.html, dan “Kontak” kembali ke bagian kontak di index.html.
  • Halaman utama menyambut pengunjung dengan pengantar singkat, lalu tiga kartu destinasi. Tautan “Detail destinasi Kawah Putih” memuat destinasi.html lalu langsung menggulir ke bagian Kawah Putih — fragment menyeberang berkas, bukan sekadar berpindah halaman.
  • Halaman destinasi merinci ketiga tempat itu: deskripsi, alamat dalam address, jam buka dalam time, dan tautan peta yang terbuka di tab baru.
  • Halaman tips memuat saran perjalanan dalam beberapa section, daftar tautan referensi, dan footer yang sama dengan dua halaman lainnya.

Untuk melihatnya, unduh ketiga berkas ke satu folder yang sama, lalu buka index.html di browser — tanpa server, tanpa alat tambahan. Tautan relatif hanya berfungsi bila ketiga berkas bertetangga; rincian gambarnya menyusul di bawah.

Struktur Berkas #

Ketiga halaman tinggal di satu folder, berdampingan dengan folder gambar:

text 
panduan-wisata/
├── index.html
├── destinasi.html
├── tips.html
└── assets/
    ├── tangkuban-perahu.svg
    ├── kawah-putih.svg
    └── jalan-braga.svg

Karena semua berkas berada di folder yang sama, tautan antarhalaman cukup ditulis nama berkasnya — destinasi.html — dan browser melengkapinya dengan lokasi halaman saat ini. Folder assets/ menyimpan gambar ketiga kartu destinasi; ketiganya dirujuk dari index.html dengan jalur assets/nama-gambar.svg.

Tahapan Pengerjaan #

Proyek dikerjakan dalam lima bagian berurutan. Setiap bagian menghasilkan halaman yang dapat langsung diperiksa di browser:

  1. Struktur Panduan — menyusun kerangka halaman utama: head lengkap, header dengan logo dan menu tautan relatif, serta section sambutan; termasuk keputusan kapan sebuah konten layak berhalaman sendiri.
  2. Daftar Destinasi — membangun kartu destinasi sebagai article ber-heading, lalu menghubungkannya ke halaman daftar lewat fragment antarhalaman.
  3. Informasi Lokasi — melengkapi tiap destinasi dengan address, tautan tel:, jam buka ber-time, dan tautan peta eksternal yang aman.
  4. Navigasi Antarhalaman — menempelkan menu yang sama ke tiga berkas, menandai halaman aktif dengan aria-current, dan menimbang konsekuensi pemeliharaannya.
  5. Referensi dan Tautan — menutup proyek dengan section tips, daftar tautan referensi berteks jelas, footer beralamat, dan uji menyeluruh.

Mulailah dari Bagian 1 dan ikuti urutannya — setiap bagian dibangun di atas struktur bagian sebelumnya, dan potongan kode pada tiap bagian sama persis dengan bagiannya pada berkas final.

Kode Sumber Lengkap #

Ketiga berkas berikut memuat keseluruhan hasil lima bagian di atas. Gunakan tombol unduh pada header tiap code block untuk menyimpannya, lalu letakkan ketiganya di satu folder yang sama:

index.html — halaman utama, 66 baris: sambutan, tiga kartu destinasi, dan kontak redaksi.

html 
<!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>
  <main>
    <!-- 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>
    <!-- Kartu destinasi populer -->
    <section id="destinasi-populer">
      <article>
        <h2>Tangkuban Perahu</h2>
        <img src="assets/tangkuban-perahu.svg" alt="Kawah Ratu di puncak Tangkuban Perahu dilihat dari tepian jalur pengunjung" width="800" height="600">
        <p>Gunung berapi setinggi 2.084 meter di kawasan Lembang, sekitar 25 kilometer di utara pusat kota.</p>
        <p><a href="destinasi.html#tangkuban-perahu">Detail destinasi Tangkuban Perahu</a></p>
      </article>
      <article>
        <h2>Kawah Putih</h2>
        <img src="assets/kawah-putih.svg" alt="Danau kawah berwarna pucat kebiruan dikelilingi tebing berpasir" width="800" height="600">
        <p>Danau kawah pucat kebiruan di kawasan Ciwidey, sekitar dua jam berkendara dari pusat kota ke arah selatan.</p>
        <p><a href="destinasi.html#kawah-putih">Detail destinasi Kawah Putih</a></p>
      </article>
      <article>
        <h2>Jalan Braga</h2>
        <img src="assets/jalan-braga.svg" alt="Jalan berlapis paving dengan deretan gedung bersejarah di kedua sisinya" width="800" height="600">
        <p>Jalan bersejarah di pusat kota; deretan gedung kuno di kedua sisinya kini berisi kedai kopi, galeri, dan toko suvenir.</p>
        <p><a href="destinasi.html#jalan-braga">Detail destinasi Jalan Braga</a></p>
      </article>
    </section>
    <!-- Kontak redaksi -->
    <section id="kontak">
      <h2>Kontak</h2>
      <address>
        <p>Redaksi Jelajah Bandung<br>Jalan Braga No. 10, Bandung 40111</p>
        <p>Telepon: <a href="tel:+62221234567">(022) 123-4567</a></p>
      </address>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <a href="mailto:[email protected]">[email protected]</a>
    </address>
    <p><small>© <time datetime="2026">2026</time> Jelajah Bandung.</small></p>
  </footer>
</body>
</html>

Beranda yang dijanjikan bagian Perilaku yang Diharapkan bisa dilihat langsung di sini:

Pada demo, tiga gambar kartu diganti placeholder SVG dan seluruh tautan antarhalaman dimatikan (nilainya diganti #) karena demo hanya satu potongan berkas — unduh ketiga berkasnya ke satu folder untuk navigasi sungguhan; tautan mailto: dan tel: biasanya juga ditahan browser di dalam iframe.

destinasi.html — halaman daftar, 70 baris: tiga destinasi lengkap dengan alamat, jam buka, dan tautan peta.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Destinasi — Jelajah Bandung</title>
  <meta name="description" content="Daftar destinasi wisata Jelajah Bandung: Tangkuban Perahu, Kawah Putih, dan Jalan Braga lengkap dengan alamat, jam buka, dan peta lokasi.">
</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" aria-current="page">Destinasi</a></li>
        <li><a href="tips.html">Tips Perjalanan</a></li>
        <li><a href="index.html#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Daftar Destinasi</h1>
    <p>Tiga destinasi berikut adalah pilihan redaksi untuk kunjungan pertama Anda ke Bandung. Setiap destinasi dilengkapi alamat, jam buka, dan tautan peta lokasi.</p>
    <p>Beranda merangkum ketiganya dalam kartu singkat; dari sana, tautan detail melompat langsung ke bagian destinasi terkait di halaman ini.</p>
    <!-- Destinasi: Tangkuban Perahu -->
    <article id="tangkuban-perahu">
      <h2>Tangkuban Perahu</h2>
      <p>Gunung berapi setinggi 2.084 meter di kawasan Lembang, sekitar 25 kilometer di utara pusat kota. Kendaraan dapat langsung menuju bibir kawah utama, Kawah Ratu.</p>
      <p>Sepanjang jalur pengunjung tersedia kios suvenir dan jagung bakar. Suhu di puncak bisa turun di bawah 15 derajat Celsius, jadi siapkan jaket.</p>
      <p>Akses: sekitar 45 menit berkendara dari Stasiun Bandung melalui Jalan Setiabudi.</p>
      <address>
        Jalan Raya Tangkuban Perahu, Cikahuripan, Lembang, Kabupaten Bandung Barat
      </address>
      <p>Jam buka: setiap hari <time datetime="07:00">07.00</time>–<time datetime="17:00">17.00</time> WIB.</p>
      <p><a href="https://maps.example.com/tangkuban-perahu" target="_blank" rel="noopener">Buka peta lokasi Tangkuban Perahu</a></p>
    </article>
    <!-- Destinasi: Kawah Putih -->
    <article id="kawah-putih">
      <h2>Kawah Putih</h2>
      <p>Danau kawah berwarna pucat kebiruan di kawasan perkebunan Ciwidey, sekitar 50 kilometer di selatan Bandung. Warna airnya berubah-ubah mengikuti kondisi kawah.</p>
      <p>Jalur berkendara berkelok dengan pemandangan kebun teh; sebagian pengunjung berangkat subuh agar tiba sebelum kabut pagi menipis.</p>
      <p>Akses: sekitar dua jam berkendara dari pusat kota melalui Jalan Soekarno Hatta.</p>
      <address>
        Jalan Raya Kawah Putih, Sugihmukti, Pasirjambu, Kabupaten Bandung
      </address>
      <p>Jam buka: setiap hari <time datetime="07:00">07.00</time>–<time datetime="16:00">16.00</time> WIB.</p>
      <p><a href="https://maps.example.com/kawah-putih" target="_blank" rel="noopener">Buka peta lokasi Kawah Putih</a></p>
    </article>
    <!-- Destinasi: Jalan Braga -->
    <article id="jalan-braga">
      <h2>Jalan Braga</h2>
      <p>Jalan bersejarah di pusat kota yang menjadi etalase Bandung sejak awal abad ke-20. Deretan gedung kuno di kedua sisinya kini berisi kedai kopi, galeri, dan toko suvenir.</p>
      <p>Area jalan dapat dinikmati kapan pun; sore hingga malam adalah waktu paling hidup, saat lampu gedung mulai menyala dan pejalan kaki memenuhi trotoar.</p>
      <p>Akses: sekitar 10 menit jalan kaki dari Stasiun Bandung ke arah barat.</p>
      <address>
        Jalan Braga, Kelurahan Sumur Bandung, Kota Bandung
      </address>
      <p>Jam buka: area jalan terbuka 24 jam; ruko dan galeri umumnya <time datetime="10:00">10.00</time>–<time datetime="21:00">21.00</time> WIB.</p>
      <p><a href="https://maps.example.com/jalan-braga" target="_blank" rel="noopener">Buka peta lokasi Jalan Braga</a></p>
    </article>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <a href="mailto:[email protected]">[email protected]</a>
    </address>
    <p><small>© <time datetime="2026">2026</time> Jelajah Bandung.</small></p>
  </footer>
</body>
</html>

tips.html — halaman tips, 69 baris: saran perjalanan, referensi lanjutan, dan footer.

html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tips Perjalanan — Jelajah Bandung</title>
  <meta name="description" content="Tips perjalanan ke Bandung dari redaksi Jelajah Bandung: persiapan sebelum berangkat, kebiasaan saat berkunjung, waktu terbaik, dan referensi lanjutan.">
</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" aria-current="page">Tips Perjalanan</a></li>
        <li><a href="index.html#kontak">Kontak</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Tips Perjalanan</h1>
    <p>Tips berikut disarikan dari pengalaman redaksi menemani pembaca menjelajah Bandung dan sekitarnya.</p>
    <!-- Tips: sebelum berangkat -->
    <section id="sebelum-berangkat">
      <h2>Sebelum Berangkat</h2>
      <ul>
        <li>Periksa prakiraan cuaca Bandung dan Lembang; suhu pagi di pegunungan jauh lebih rendah.</li>
        <li>Bawa jaket tipis dan payung kecil — cuaca kota bisa berubah cepat.</li>
        <li>Pesan tiket kereta atau bus akhir pekan paling lambat tiga hari sebelumnya.</li>
        <li>Unduh peta luring untuk jalur Lembang dan Ciwidey.</li>
      </ul>
    </section>
    <!-- Tips: saat berkunjung -->
    <section id="saat-berkunjung">
      <h2>Saat Berkunjung</h2>
      <ul>
        <li>Berangkat pagi untuk Tangkuban Perahu dan Kawah Putih agar terhindar dari antrean parkir.</li>
        <li>Sisakan sore untuk Jalan Braga; suasana jalan paling hidup setelah <time datetime="16:00">16.00</time> WIB.</li>
        <li>Cicipi satu menu khas per kedai, bukan semua menu di satu kedai.</li>
        <li>Simpan tautan peta tiap destinasi dari halaman Daftar Destinasi sebelum berangkat.</li>
      </ul>
    </section>
    <!-- Tips: waktu terbaik -->
    <section id="waktu-terbaik">
      <h2>Waktu Terbaik Berkunjung</h2>
      <p>Musim kemarau antara Juni dan September menawarkan langit paling cerah untuk melihat kawah; akhir pekan ramai, hari kerja lebih tenang.</p>
      <p>Pada musim hujan, kabut pagi di Kawah Putih justru tebal dan fotogenik — asalkan jalur berkendara diperiksa terlebih dulu.</p>
    </section>
    <!-- Referensi lanjutan -->
    <section id="referensi">
      <h2>Referensi Lanjutan</h2>
      <p>Untuk informasi resmi dan jadwal terkini, kunjungi sumber berikut:</p>
      <ul>
        <li><a href="https://www.example.com/pariwisata-bandung" target="_blank" rel="noopener">Portal informasi pariwisata resmi kawasan Bandung</a></li>
        <li><a href="https://www.example.com/jadwal-kereta" target="_blank" rel="noopener">Jadwal kereta api menuju Stasiun Bandung</a></li>
        <li><a href="https://www.example.com/cuaca-bandung" target="_blank" rel="noopener">Prakiraan cuaca Bandung dan sekitarnya</a></li>
      </ul>
    </section>
  </main>
  <!-- Kaki situs -->
  <footer>
    <address>
      <a href="mailto:[email protected]">[email protected]</a>
    </address>
    <p><small>© <time datetime="2026">2026</time> Jelajah Bandung.</small></p>
  </footer>
</body>
</html>

Penjelasan singkat per blok besar, dari atas ke bawah:

index.html — halaman utama #

  1. Blok head (baris 1-8): doctype, lang="id", charset, viewport, title, dan meta description — metadata minimum halaman modern.
  2. Blok header (baris 10-20): logo teks dan tagline dalam satu paragraf, lalu nav berisi tiga tautan — dua tautan relatif antarhalaman dan satu fragment ke bagian kontak halaman ini.
  3. Section sambutan (baris 22-27): h1 tunggal seluruh halaman, paragraf pengantar, dan satu tautan ajakan menuju halaman destinasi.
  4. Section kartu destinasi (baris 28-48): tiga article — masing-masing berisi h2, gambar dengan alt, satu paragraf ringkasan, dan tautan detail ke destinasi.html#id.
  5. Section kontak (baris 49-56): address berisi alamat redaksi dan tautan tel:; id="kontak" menjadikannya sasaran tautan Kontak dari dua halaman lain.
  6. Blok footer (baris 57-66): address email situs dan baris hak cipta dengan time — blok yang sama menutup ketiga halaman.

destinasi.html — halaman daftar #

  1. Blok head (baris 1-8): pola head yang sama dengan judul dan deskripsi berbeda — tiap halaman punya title unik.
  2. Blok header (baris 10-20): logo dan menu yang sama persis dengan beranda; tautan “Destinasi” kini bertanda aria-current="page", dan “Kontak” berubah menjadi index.html#kontak karena targetnya berpindah berkas.
  3. Pengantar (baris 21-24): h1 halaman dan dua paragraf pembuka di dalam main.
  4. Tiga article destinasi (baris 25-60): tiap destinasi ber-id anchor, h2, dua paragraf deskripsi, paragraf akses, address, jam buka time, dan tautan peta eksternal target="_blank" rel="noopener".
  5. Blok footer (baris 61-70): salinan footer beranda — identik menandai situs yang konsisten.

tips.html — halaman tips #

  1. Blok head (baris 1-8): title dan meta description khas halaman tips.
  2. Blok header (baris 10-20): menu yang sama; penanda aria-current="page" kini menempel pada tautan “Tips Perjalanan”.
  3. Isi halaman (baris 21-59): h1 dan pengantar, dua section tips ber-ul, satu section naratif, lalu section referensi berisi tiga tautan eksternal dengan teks deskriptif.
  4. Blok footer (baris 60-69): footer yang sama untuk ketiga kalinya.

Lima bagian berikut membedah ketiga berkas tahap demi tahap. Setiap part menampilkan potongan yang identik dengan bagiannya pada berkas di atas, sehingga hasil mengetik ulang kita bisa cocok diperiksa baris demi baris.

# Struktur Panduan

Siapkan kerangka panduan wisata dengan header, nav, dan main.

Buka → # Daftar Destinasi

Susun daftar destinasi memakai section, article, dan heading berurutan.

Buka → # Informasi Lokasi

Cantumkan alamat dan jam buka dengan elemen address dan time.

Buka → # Navigasi Antarhalaman

Bangun menu navigasi yang sama di setiap halaman panduan.

Buka → # Referensi dan Tautan

Tautkan sumber resmi dan artikel terkait dengan link text yang jelas.

Buka →