HTML Links

Bab 1: Fondasi World Wide Web

Hyperlink (atau biasa disebut Link) adalah esensi dari internet. Tanpa link, website hanya akan menjadi dokumen digital yang terisolasi. Link memungkinkan pengguna berpindah dari satu halaman ke halaman lain, atau dari satu website ke website lain, hanya dengan satu klik.

Dalam HTML, link didefinisikan menggunakan tag <a> (singkatan dari Anchor). Tag ini membutuhkan atribut href (Hypertext Reference) untuk menentukan tujuan link.

Bab 2: Membuka Link di Tab Baru (Target)

Secara default, link akan terbuka di jendela/tab yang sama (menimpa halaman saat ini). Jika Anda ingin link terbuka di tab baru agar pengunjung tidak meninggalkan website Anda, gunakan atribut target="_blank".

<a href="https://google.com" target="_blank">Buka Google (Tab Baru)</a>
<br>
<a href="https://codivay.com">Buka CODIVAY (Tab Sama)</a>

Bab 3: Absolute vs Relative URL

Memahami perbedaan jalur (path) link sangat krusial, terutama saat membangun struktur folder website.

1. Absolute URL

Alamat web lengkap yang menyertakan protokol (https://) dan domain. Digunakan untuk menghubungkan ke website lain.

2. Relative URL

Alamat lokal yang relatif terhadap posisi file saat ini. Digunakan untuk navigasi internal dalam satu website (misal: dari Home ke About).

• href="about.html" (File ada di folder yang sama)
• href="images/logo.png" (Masuk ke folder images)
• href="../index.html" (Naik satu level folder)

Bab 4: Gambar Sebagai Link

Link tidak harus berupa teks. Anda bisa membungkus gambar <img> dengan tag <a> untuk membuat gambar tersebut bisa diklik.

<a href="https://codivay.com">
  <img src="button.png" alt="Tombol Klik" width="100">
</a>

Bab 5: Link Email & Telepon

HTML menyediakan protokol khusus untuk membuka aplikasi email atau panggilan telepon secara otomatis.

• mailto: Membuka aplikasi email default user.
• tel: Membuka aplikasi telepon (sangat berguna di mobile).

<a href="mailto:admin@codivay.com">Kirim Email</a>
<a href="tel:+6281234567890">Hubungi Kami</a>

Bab 6: Atribut Title (Tooltip)

Atribut title memberikan informasi tambahan tentang link tersebut. Teks ini akan muncul sebagai kotak kecil (tooltip) saat pengguna mengarahkan mouse (hover) di atas link.

<a href="https://codivay.com" title="Tutorial Koding Terlengkap">
  Belajar Coding
</a>

⚡ Proyek Kilat: Dashboard Link

Misi Anda adalah membuat daftar link yang berfungsi sebagai navigasi sederhana. Gunakan berbagai jenis link yang sudah dipelajari.

Pusat Dokumentasi Developer

Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini: