Selamat datang kembali di seri belajar HTML dari dasar! Setelah pada level sebelumnya Anda berhasil berkenalan dengan struktur dasar dokumen HTML, kini saatnya kita naik tingkat ke LEVEL 2.
Di level ini, kita akan fokus mempelajari elemen yang membuat internet benar-benar interaktif: Link dan Navigasi Website. Tanpa link, website hanyalah kumpulan halaman terisolasi yang membosankan.
Mengenal Tag <a> (Anchor)
Dalam HTML, tautan atau link dibuat menggunakan tag <a> (singkatan dari anchor). Tag ini memerlukan sebuah atribut utama bernama href (hypertext reference), yang berfungsi untuk menentukan ke mana tujuan link tersebut akan membawa pengguna.
Contoh dasar penulisan tag <a>:
<a href="https://www.google.com">Kunjungi Google</a>
Catatan Penting: Selalu pastikan Anda menyertakan protokol yang lengkap (seperti
https://) pada URL eksternal agar link dapat berfungsi dengan sempurna.
3 Jenis Link Utama dalam HTML
Sebelum kita membangun website multi-halaman, mari kenali tiga jenis link yang wajib Anda kuasai:
1. External Link (Tautan Luar)
External link digunakan untuk menghubungkan halaman website Anda ke website lain di internet. Biasanya, tautan ini dibuka di tab baru agar pengunjung tidak meninggalkan website kita. Kita bisa menggunakan atribut target="_blank" dan rel="noopener noreferrer".
<a href="https://wikipedia.org" target="_blank">Baca Ensiklopedia (Buka di Tab Baru)</a>
2. Internal Link (Tautan Internal)
Internal link adalah tautan yang menghubungkan satu halaman ke halaman lain di dalam domain website Anda sendiri. Ini adalah fondasi dari navigasi situs web.
<a href="tentang.html">Tentang Kami</a>
3. Anchor Link (Tautan Jangkar)
Anchor link digunakan untuk melompat ke bagian atau elemen tertentu di dalam halaman yang sama. Ini sangat berguna untuk halaman artikel yang panjang.
Caranya adalah dengan memberikan atribut id pada elemen tujuan, lalu memanggilnya menggunakan tanda pagar (#) pada href:
<!-- Tombol Navigasi -->
<a href="#kontak">Loncat ke Bagian Kontak</a>
<!-- Bagian Tujuan -->
<h2 id="kontak">Hubungi Kami</h2>
<p>Email: info@websiteanda.com</p>
Praktik: Membuat Website dengan Beberapa Halaman
Sekarang, mari kita praktikkan semua teori di atas dengan membuat proyek kecil: website sederhana berisikan 3 halaman (Beranda, Tentang, dan Kontak) yang saling terhubung.
Langkah 1: Buat Halaman Beranda (index.html)
Buat file pertama Anda dengan nama index.html (halaman utama website):
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Beranda - Website Saya</title>
</head>
<body>
<!-- Navigasi Website -->
<nav>
<a href="index.html">Beranda</a> |
<a href="tentang.html">Tentang</a> |
<a href="kontak.html">Kontak</a>
</nav>
<h1>Selamat Datang di Website Saya!</h1>
<p>Ini adalah halaman utama dari latihan HTML Level 2.</p>
</body>
</html>
Langkah 2: Buat Halaman Tentang (tentang.html)
Buat file kedua di folder yang sama:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tentang - Website Saya</title>
</head>
<body>
<nav>
<a href="index.html">Beranda</a> |
<a href="tentang.html">Tentang</a> |
<a href="kontak.html">Kontak</a>
</nav>
<h1>Tentang Saya</h1>
<p>Saya adalah seorang pengembang web pemula yang sedang belajar HTML.</p>
</body>
</html>
Langkah 3: Buat Halaman Kontak (kontak.html)
Buat file ketiga untuk halaman kontak:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kontak - Website Saya</title>
</head>
<body>
<nav>
<a href="index.html">Beranda</a> |
<a href="tentang.html">Tentang</a> |
<a href="kontak.html">Kontak</a>
</nav>
<h1>Hubungi Kami</h1>
<p>Silakan kirim pesan melalui email ke admin@websiteanda.com.</p>
</body>
</html>
Simpan ketiga file tersebut di dalam satu folder yang sama. Buka file index.html di browser Anda, dan cobalah klik menu navigasi yang telah dibuat. Anda sekarang berhasil membuat website multi-halaman berbasis HTML murni!
Kesimpulan
Memahami cara kerja tag <a>, membedakan jenis-jenis link, serta merancang navigasi antar halaman adalah keterampilan dasar yang wajib dikuasai oleh setiap calon web developer. Teruslah berlatih, eksperimen dengan kode di atas, dan nantikan tutorial LEVEL 3 berikutnya!
