Satu situs jarang berdiri di atas satu berkas HTML saja. Kedai Siti butuh beranda, halaman tentang, dan halaman menu — dan pengunjung berpindah di antara ketiganya lewat link. Chapter ini adalah latihan praktis pertama teori URL sebelumnya: merakit situs mini tiga halaman yang saling terhubung, lengkap dengan navigasi bolak-balik dan link text yang layak dibaca.

Menyiapkan Tiga Halaman #

Kita mulai dari struktur proyek yang sederhana — tiga berkas dalam satu folder:

text 
kedai/
├── index.html
├── tentang.html
└── menu.html

Karena ketiganya sefolder, semua link cukup memakai URL relatif paling pendek: nama berkasnya saja. Isi index.html:

html index.html 
<h1>Kedai Kopi Siti</h1>
<p>Kopi kecil dari Bandung, diseduh dengan sabar sejak 2019.</p>
<p><a href="tentang.html">Baca cerita di balik kedai</a> atau
<a href="menu.html">lihat menu lengkap</a>.</p>

Isi tentang.html yang menaut kembali ke beranda:

html tentang.html 
<h1>Tentang Kedai Kopi Siti</h1>
<p>Siti membuka kedai ini bersama dua teman kuliah, berawal dari satu
mesin seduh bekas dan enam kursi kayu.</p>
<p><a href="index.html">Kembali ke beranda</a> ·
<a href="menu.html">Lihat menu lengkap</a></p>

Hasil Render untuk index.html: dua teks link tampil di akhir paragraf, dan satu klik pada “Baca cerita di balik kedai” memuat tentang.html di tab yang sama. Mari kita telaah:

  1. href="tentang.html" pada index.html: menuju berkas sefolder — browser menggabungkannya dengan alamat beranda menjadi kedai/tentang.html.
  2. href="index.html" pada tentang.html: navigasi balik — pengunjung tidak perlu menekan tombol kembali browser; pola dua arah ini membuat halaman terasa satu kesatuan situs.
  3. Teks pemisah ·: berada di luar kedua elemen a, jadi tidak menjadi area klik — hanya isi masing-masing a yang bisa ditekan pengunjung.

Link Text yang Bekerja Sendiri #

Link antarhalaman paling sering gagal bukan pada tekniknya, melainkan pada isi teksnya. Bandingkan dua penulisan menuju berkas yang sama:

html 
<!-- Kurang informatif -->
<p><a href="menu.html">Klik di sini</a> untuk melihat menu.</p>

<!-- Jelas meski dibaca terpisah dari kalimatnya -->
<p><a href="menu.html">Lihat menu lengkap kedai</a>.</p>

Teks “klik di sini” hanya bermakna jika kalimat sekitarnya ikut terbaca; teks “Lihat menu lengkap kedai” tetap dipahami meski muncul sendirian — misalnya pada daftar hasil pencarian atau saat dibacakan pembaca layar yang melompat antarlink. Aturan praktisnya: bayangkan link itu dipotong dari halamannya lalu dibacakan tanpa konteks — kalau tujuannya masih bisa ditebak, teksnya sudah tepat.

Ringkasan #

  • Link antarhalaman satu situs memakai URL relatif; berkas sefolder cukup ditulis namanya.
  • Setiap halaman menaut kembali ke halaman lain supaya navigasi berjalan dua arah.
  • Link text harus berdiri sendiri tanpa bergantung pada kalimat sekitarnya.
  • Link tanpa target membuka halaman di tab yang sama.

Halaman yang panjang menimbulkan kebutuhan lain: melompat ke bagian tertentu tanpa memuat ulang apa pun — tugas untuk fragment identifier.