Halaman ketiga masih berupa kerangka ber-menu; bagian penutup ini mengisinya dengan section tips dan tautan referensi, lalu menutup situs dengan footer. Tersisa satu tugas khas situs multi-halaman: memeriksa setiap tautan yang kita pasang sejak Bagian 1, di tiga berkas sekaligus.

Section-Section Tips #

Lengkapi main pada tips.html dengan tiga section tips. Potongan berikut sama persis dengan baris 22-49 berkas final — pengantarnya kita tulis pada Bagian 4, section-nya menyusul sekarang:

html 
    <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>

Mari kita bedah baris demi baris:

  1. h1 dan pengantar (baris 1-2): pola pembuka yang sama dengan halaman destinasi — judul halaman lalu satu paragraf yang menjanjikan isi.
  2. Section ber-h2 dan ul (baris 3-22): tiap section satu topik persiapan; butirnya ul karena urutan saran bebas ditukar. Satu butir satu saran — pengunjung memindai, bukan membaca berurutan.
  3. time di dalam kalimat (baris 18): jam 16.00 bertanda time datetime="16:00" meski berada di tengah saran — time tidak harus menjadi baris informasi tersendiri seperti jam buka destinasi; ia cukup melapisi teks berwaktu di mana pun.
  4. Section naratif (baris 23-28): dua paragraf tanpa daftar — section tidak wajib berisi ul; heading h2 tetap menjaga bagiannya mudah ditemukan.

Referensi dengan Teks Tautan yang Jelas #

Section terakhir mengarahkan pengunjung ke sumber lanjutan. Potongan berikut sama persis dengan baris 50-59 berkas final:

html 
    <!-- 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>

Bedah potongan ini:

  1. ul tiga tautan (baris 5-9): daftar referensi — setiap butir satu tautan, teksnya menyebut sumber dan isinya.
  2. Link text yang berdiri sendiri (baris 6-8): “Jadwal kereta api menuju Stasiun Bandung” dipahami tanpa membaca kalimat sekitarnya — pembaca layar yang melompat dari tautan ke tautan mendengar tujuan setiap tautan secara utuh, inti chapter Link Text yang Jelas. Teks semacam “klik di sini” tidak mengatakan apa-apa bila didengar terpisah.
  3. target="_blank" dan rel="noopener" (baris 6-8): tautan eksternal dibuka di tab baru — konsisten dengan tautan peta pada Bagian 3; satu kebiasaan untuk satu jenis tautan.

Ketiga halaman ditutup blok yang sama. Potongan berikut sama persis dengan baris 62-67 tips.html:

html 
  <footer>
    <address>
      <a href="mailto:[email protected]">[email protected]</a>
    </address>
    <p><small>© <time datetime="2026">2026</time> Jelajah Bandung.</small></p>
  </footer>

Bedah potongan penutup ini:

  1. address footer (baris 2-4): identitas situs — alamat email redaksi sebagai kanal kontak utama. address kini hadir di dua peran: alamat fisik destinasi di Bagian 3 dan identitas pemilik situs di sini; keduanya sah karena maknanya memang kontak bagi konteksnya.
  2. Hak cipta bertanda time (baris 5): tahun dibungkus time datetime="2026", small menandai baris keterangan ringkas — penutup yang sama menempel di dua berkas lain, menandai situs yang konsisten sampai baris terakhir.

Uji Menyeluruh Tiga Halaman #

Satu tautan rusak bisa bersembunyi di berkas mana pun, maka ujinya menyusuri semuanya. Jalankan putaran penuh dari index.html:

  • Klik ketiga item menu di ketiga halaman — sembilan klik, sembilan perpindahan yang benar.
  • Klik tautan ajakan dan ketiga kartu destinasi dari beranda — setiap kartu mendarat pada bagiannya.
  • Klik tiga tautan peta dan tiga tautan referensi — tab baru terbuka, halaman panduan tetap tinggal.
  • Periksa judul tab tiap halaman — semuanya unik.
  • Ketuk tautan telepon dari ponsel bila ada — aplikasi panggilan menyiapkan nomor redaksi.

Inilah halaman ketiga yang baru selesai — coba klik ketiga tautan referensinya, masing-masing terbuka di tab baru:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) karena demo hanya satu potongan berkas — unduh ketiga berkasnya untuk navigasi sungguhan; tautan mailto: biasanya juga ditahan browser di dalam iframe.

Ringkasan Bagian 5 #

  • Section tips menampung saran dalam ul maupun paragraf; time bisa melapisi jam di tengah kalimat.
  • Tautan referensi memakai link text yang berdiri sendiri, dibuka di tab baru seperti tautan peta.
  • Footer identik di tiga berkas; uji akhir menyusuri semua tautan dan memvalidasi ketiganya.

Proyek selesai. Berkas lengkap dapat diunduh dari halaman overview proyek.