HTML 03: Membuat Link dan Navigasi Antarhalaman

Link menghubungkan satu halaman dengan halaman lain. Tanpa link, setiap dokumen web akan berdiri sendiri dan sulit dijelajahi.

Tujuan Belajar

• Memahami atribut href.
• Membedakan URL absolut dan relatif.
• Membuat anchor ke bagian tertentu.
• Menulis teks link yang jelas.

1. Bentuk Dasar Link

Tag <a> disebut anchor. Atribut href berisi tujuan. Teks di antara tag pembuka dan penutup menjadi bagian yang dapat diklik.

Gunakan teks yang menjelaskan tujuan. “Baca panduan HTML” lebih baik daripada “klik di sini”.

2. Link Absolut dan Relatif

URL absolut memuat alamat lengkap dan biasanya menuju situs lain.

URL relatif digunakan untuk halaman dalam project yang sama.

Jika file saat ini berada di dalam folder dan ingin naik satu tingkat, gunakan ../.

3. Membuka Tab Baru dengan Aman

Gunakan target="_blank" hanya jika memang bermanfaat. rel="noopener noreferrer" mencegah halaman baru memperoleh akses yang tidak diperlukan ke halaman asal.

4. Melompat ke Bagian Halaman

Beri elemen tujuan sebuah id, kemudian tulis href dengan tanda #.

Setiap id harus unik dalam satu halaman.

5. Email dan Telepon

Link tersebut membuka aplikasi email atau telepon pengguna. Jangan menjanjikan bahwa semua perangkat akan membuka aplikasi yang sama.

Kesalahan Umum

• Lupa menulis https:// pada link eksternal.
• Menggunakan path lokal komputer seperti C:\gambar\halaman.html.
• Memakai href="#" untuk tombol yang sebenarnya tidak melakukan navigasi.
• Memberikan id yang sama kepada beberapa elemen.

Latihan

Buat navigasi berisi Beranda, Tentang, dan Kontak. Tambahkan satu link eksternal yang dibuka di tab baru serta anchor menuju bagian Kontak.

Rangkuman

Gunakan URL absolut untuk situs lain dan URL relatif untuk project sendiri. Tulis tujuan link dengan jelas, gunakan id unik untuk anchor, dan tambahkan atribut keamanan saat membuka tab baru.