Tujuan Belajar
Setelah pelajaran ini, kamu akan bisa:
- Membuat link ke halaman lain dengan tag
<a> - Membedakan link internal (ke halaman di website-mu) dan eksternal (ke website lain)
- Membuka link di tab baru
- Membuat link ke bagian tertentu di halaman yang sama
Materi Singkat
Kata "HyperText" dalam HTML merujuk pada kemampuan teks untuk terhubung ke teks lain — inilah yang membuat web menjadi "web" (jaring). Tanpa link, setiap halaman web adalah pulau terpencil. Dengan link, semua halaman terhubung.
Tag <a> dan Atribut href
Tag <a> (anchor = jangkar) adalah cara membuat link. Atribut terpentingnya adalah href (hypertext reference) yang berisi tujuan link.
<a href="https://google.com">Kunjungi Google</a>Teks di antara <a> dan </a> adalah yang diklik pengguna.
Link Eksternal vs Internal
Link eksternal — menuju website lain, gunakan URL lengkap:
<a href="https://wikipedia.org">Wikipedia</a>Link internal — menuju halaman lain di website-mu sendiri:
<a href="tentang.html">Tentang Saya</a>
<a href="kontak.html">Hubungi Saya</a>Buka di Tab Baru
Tambahkan atribut target="_blank" agar link terbuka di tab baru. Ini biasa dipakai untuk link eksternal agar pengguna tidak meninggalkan website-mu.
<a href="https://google.com" target="_blank">Buka Google di tab baru</a>Link ke Bagian Halaman (Anchor)
Kamu bisa membuat link yang langsung "lompat" ke bagian tertentu di halaman yang sama. Caranya:
- Beri
idpada elemen tujuan - Buat link dengan
href="#nama-id"
<!-- Di bagian atas halaman -->
<a href="#kontak">Ke bagian Kontak</a>
<!-- Di bagian bawah halaman -->
<h2 id="kontak">Kontak Saya</h2>
<p>Email: budi@email.com</p>Contoh Kode
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Halaman dengan Link</title>
</head>
<body>
<h1>Navigasi Sederhana</h1>
<!-- Navigasi ke bagian dalam halaman ini -->
<nav>
<a href="#tentang">Tentang</a> |
<a href="#hobi">Hobi</a> |
<a href="#kontak">Kontak</a>
</nav>
<h2 id="tentang">Tentang Saya</h2>
<p>Saya sedang belajar membuat website dengan HTML.</p>
<h2 id="hobi">Hobi Saya</h2>
<p>Saya suka membaca dan
<a href="https://wikipedia.org" target="_blank">mencari informasi di Wikipedia</a>.
</p>
<h2 id="kontak">Kontak Saya</h2>
<p>Kunjungi
<a href="https://github.com" target="_blank">GitHub saya</a>
untuk melihat proyek-proyekku.
</p>
</body>
</html>Tugas Kecil
- Buat file
profil.htmlyang berisi:- Navigasi sederhana dengan 3 link anchor (#tentang, #keahlian, #favorit)
- Bagian "Tentang Saya" dengan satu paragraf
- Bagian "Keahlian Saya" dengan unordered list
- Bagian "Website Favorit" dengan list berisi minimal 3 link eksternal ke websitemu, masing-masing dibuka di tab baru