Navigasi Antarhalaman

Dua halaman sudah terhubung; berkas ketiga tinggal mengikuti pola yang sama. Fokus bagian ini bukan markup baru, melainkan disiplin yang belum pernah seberat ini: menu yang sama harus berdiri identik di tiga berkas, lengkap dengan penanda halaman aktif yang berpindah mengikuti pembaca.

Berkas Ketiga: Halaman Tips #

Buat src/tips.html dengan pola kerangka beranda: head berisi title “Tips Perjalanan — Jelajah Bandung” beserta deskripsi versinya sendiri, header berisi logo yang sama, lalu main dibuka dengan h1 Tips Perjalanan dan satu paragraf pengantar. Section-section tips-nya kita isi pada Bagian 5 — sekarang kita rapikan bagian yang menempel di ketiga berkas: menu navigasinya.

Menu yang Sama di Tiga Berkas #

Menu pada beranda kita jadikan acuan:

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

Salin blok itu ke destinasi.html, lalu geser penandanya:

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

Dan sekali lagi ke tips.html:

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

Mari kita bedah baris demi baris:

1. Struktur identik (baris 1-7 pada ketiga blok): label item, urutannya, dan aria-label sama persis — pengunjung mempelajari menu sekali, lalu bergerak tanpa berpikir. Hanya dua hal yang berbeda antarberkas, dan keduanya disengaja.
2. aria-current="page" yang berpindah (baris 3): di destinasi.html menempel pada item Destinasi, di tips.html pada item Tips Perjalanan. Atribut ini menyatakan “inilah halaman sekarang” dan langsung dikenali pembaca layar — materi chapter Navigasi Antarhalaman yang kini kita pakai pada situs dengan tiga halaman betulan.
3. Beranda tanpa penanda: menu tidak memuat tautan beranda, maka tidak ada yang perlu ditandai di index.html. Situs nyata lazim menautkan logo ke beranda; proyek ini membiarkan logo sebagai teks polos agar fokus pembaca tetap pada menu.
4. Tautan “Kontak” menyesuaikan lokasi (baris 5): di beranda nilainya #kontak — targetnya satu halaman. Di dua berkas lain nilainya index.html#kontak — fragment menyeberang berkas, persis pola tautan kartu destinasi pada Bagian 2. Nilainya berbeda, tujuannya sama; menulis #kontak di destinasi.html akan mencari id kontak di halaman itu dan tidak menemukannya.
5. Dua tautan sisanya tidak berubah (baris 3-4): destinasi.html dan tips.html ditulis sama di ketiga berkas — semua berkas bertetangga di satu folder, jadi nama berkas sudah cukup sebagai alamat.

Menyalin Nav Secara Manual #

Kita menempelkan menu dengan tangan: salin dari satu berkas, tempel ke dua lainnya, geser aria-current. Sederhana untuk tiga halaman, tetapi biayanya tumbuh mengikuti jumlah berkas:

Hasil pada Browser #

Buka ketiga berkas bergantian dari satu folder. Menu bekerja dari mana pun: “Destinasi” dan “Tips Perjalanan” memuat halamannya, “Kontak” membawa pengunjung kembali ke bagian kontak beranda. Pembaca layar mengumumkan item bertanda aria-current sebagai halaman saat ini, dan penandanya memang berpindah sesuai berkas yang dibuka.

Karena demo hanya satu potongan berkas, ketiga menu berikut ditampilkan berdampingan sebagai ringkasan tiga halaman — bandingkan strukturnya yang identik dan letak penanda aktifnya yang berpindah:

Pada demo, tautan antarhalaman dimatikan (nilainya diganti #) dan penanda aria-current diberi latar berwarna agar terlihat — pada berkas sungguhan penanda itu tidak punya tampilan bawaan, ia hanya diumumkan pembaca layar.

Ringkasan Bagian 4 #

• Menu konsisten berarti struktur, label, dan urutan yang sama di semua berkas — perbedaan hanya penanda aktif dan alamat tautan Kontak.
• aria-current="page" berpindah mengikuti halaman; beranda tidak bertanda karena menu tidak menaut berandanya sendiri.
• #kontak di beranda menjadi index.html#kontak di dua berkas lain — fragment menyesuaikan lokasi berkas.
• Nav disalin manual: satu perubahan menu berarti tiga suntingan; templating kelak menghapus pekerjaan ini.

Bagian terakhir mengisi halaman tips dengan saran perjalanan dan referensi, lalu menutup seluruh situs dengan footer.