Hyperlink atau tautan dalam HTML digunakan untuk menghubungkan satu halaman web dengan halaman web lain atau dengan sumber daya tertentu, seperti gambar, file, atau alamat email. Hyperlink dibuat menggunakan elemen <a> (anchor). Berikut adalah penjelasan lengkap tentang cara membuat dan menggunakan hyperlink.
Membuat Tautan #
Elemen <a> digunakan untuk membuat hyperlink. Elemen ini memiliki atribut href yang digunakan untuk menentukan URL tujuan dari tautan tersebut.
<a href="https://www.example.com">Kunjungi Example</a>Penjelasan:
<a>: Tag pembuka untuk elemen hyperlink.href: Atribut yang berisi URL tujuan tautan.https://www.example.com: URL tujuan tautan.Kunjungi Example: Teks yang akan ditampilkan sebagai tautan di halaman web.</a>: Tag penutup untuk elemen hyperlink.
Atribut Tambahan pada Hyperlink #
Selain atribut href, elemen <a> dapat memiliki beberapa atribut tambahan untuk mengatur perilaku dan tampilan tautan.
Atribut target #
Atribut target digunakan untuk menentukan di mana dokumen yang ditautkan akan dibuka. Nilai umum untuk atribut target adalah:
_blank: Membuka tautan di tab atau jendela baru._self: Membuka tautan di tab atau jendela yang sama (nilai default)._parent: Membuka tautan di frame induk (jika dokumen berada dalam frame)._top: Membuka tautan di seluruh jendela browser, menghapus semua frame.
<a href="https://www.example.com" target="_blank">Kunjungi Example di Tab Baru</a>Atribut title #
Atribut title digunakan untuk memberikan informasi tambahan tentang tautan. Informasi ini akan ditampilkan sebagai tooltip ketika pengguna mengarahkan kursor ke tautan.
<a href="https://www.example.com" title="Kunjungi situs Example">Kunjungi Example</a>Atribut rel #
Atribut rel digunakan untuk menentukan hubungan antara dokumen saat ini dengan dokumen tujuan. Contoh nilai rel yang umum digunakan:
noopener: Mencegah halaman yang ditautkan dari mengakses objekwindow.opener.noreferrer: Mencegah pengiriman informasi referensi ke halaman tujuan.
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Kunjungi Example</a>Jenis Tautan #
Tautan ke Halaman Web Lain: Tautan yang mengarah ke halaman web lain di internet.
<a href="https://www.example.com">Kunjungi Example</a>Tautan ke Halaman yang Sama: Tautan yang mengarah ke bagian lain dari halaman yang sama menggunakan anchor (#).
<a href="#bagian1">Pergi ke Bagian 1</a>
<h2 id="bagian1">Bagian 1</h2>
<p>Ini adalah konten dari Bagian 1.</p>Tautan ke Alamat Email: Tautan yang membuka klien email dengan alamat yang telah ditentukan.
<a href="mailto:email@example.com">Kirim Email</a>Tautan ke File atau Dokumen: Tautan yang mengunduh atau membuka file atau dokumen tertentu.
<a href="dokumen.pdf" download>Unduh Dokumen</a>Tautan Telepon: Tautan yang membuka aplikasi telepon dengan nomor yang telah ditentukan (berguna untuk perangkat seluler).
<a href="tel:+628123456789">Hubungi Kami</a>Contoh Hyperlink Lengkap #
Berikut adalah contoh penggunaan berbagai jenis hyperlink dalam sebuah halaman HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Hyperlink</title>
</head>
<body>
<h1>Contoh Hyperlink</h1>
<p><a href="https://www.example.com">Kunjungi Example</a></p>
<p><a href="https://www.example.com" target="_blank">Kunjungi Example di Tab Baru</a></p>
<p><a href="#bagian1">Pergi ke Bagian 1</a></p>
<p><a href="mailto:email@example.com">Kirim Email</a></p>
<p><a href="dokumen.pdf" download>Unduh Dokumen</a></p>
<p><a href="tel:+628123456789">Hubungi Kami</a></p>
<h2 id="bagian1">Bagian 1</h2>
<p>Ini adalah konten dari Bagian 1.</p>
</body>
</html>Dengan menggunakan elemen dan atribut ini, Anda dapat membuat hyperlink yang efektif dan fungsional di halaman web Anda. Jika ada pertanyaan lebih lanjut atau bagian yang perlu diperjelas, jangan ragu untuk bertanya.
