Tautan HTML
Tautan ditemukan di hampir semua halaman web. Tautan memungkinkan pengguna mengeklik jalan mereka dari halaman ke halaman.
Tautan HTML - Hyperlink
Tautan HTML adalah hyperlink.
Anda dapat mengklik tautan dan melompat ke dokumen lain.
Saat Anda menggerakkan mouse di atas tautan, panah mouse akan berubah menjadi tangan kecil.
Catatan: Tautan tidak harus berupa teks. Tautan dapat berupa gambar atau elemen HTML lainnya!
Tautan HTML - Sintaks
Tag HTML <a>mendefinisikan hyperlink. Ini memiliki sintaks berikut:
<a href="url">link text</a>
Atribut terpenting dari <a> elemen adalah
hrefatribut, yang menunjukkan tujuan tautan.
Teks tautan adalah bagian yang akan terlihat oleh pembaca.
Mengklik teks tautan, akan mengirim pembaca ke alamat URL yang ditentukan.
Contoh
Contoh ini menunjukkan cara membuat tautan ke W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Secara default, tautan akan muncul sebagai berikut di semua browser:
- Tautan yang belum dikunjungi digarisbawahi dan berwarna biru
- Tautan yang dikunjungi digarisbawahi dan berwarna ungu
- Tautan aktif digarisbawahi dan merah
Tip: Tautan tentu saja dapat ditata dengan CSS, untuk mendapatkan tampilan lain!
Tautan HTML - Atribut Target
Secara default, halaman tertaut akan ditampilkan di jendela browser saat ini. Untuk mengubah ini, Anda harus menentukan target lain untuk tautan tersebut.
Atribut targetmenentukan tempat untuk membuka dokumen tertaut.
Atribut targetdapat memiliki salah satu dari nilai berikut:
_self- Bawaan. Membuka dokumen di jendela/tab yang sama dengan yang diklik_blank- Membuka dokumen di jendela atau tab baru_parent- Membuka dokumen di bingkai induk_top- Membuka dokumen di seluruh badan jendela
Contoh
Gunakan target="_blank" untuk membuka dokumen tertaut di jendela atau tab browser baru:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
URL Absolut vs. URL Relatif
Kedua contoh di atas menggunakan URL absolut (alamat web lengkap) dalam hrefatribut.
Tautan lokal (tautan ke halaman dalam situs web yang sama) ditentukan dengan URL relatif (tanpa bagian "https://www"):
Contoh
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Tautan HTML - Gunakan Gambar sebagai Tautan
Untuk menggunakan gambar sebagai tautan, cukup letakkan <img>
tag di dalam <a>tag:
Contoh
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Tautan ke Alamat Email
Gunakan
mailto:di dalam
hrefatribut untuk membuat tautan yang membuka program email pengguna (agar mereka mengirim email baru):
Contoh
<a href="mailto:[email protected]">Send email</a>
Tombol sebagai Tautan
Untuk menggunakan tombol HTML sebagai tautan, Anda harus menambahkan beberapa kode JavaScript.
JavaScript memungkinkan Anda untuk menentukan apa yang terjadi pada peristiwa tertentu, seperti mengklik tombol:
Contoh
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Tip: Pelajari lebih lanjut tentang JavaScript di Tutorial JavaScript kami .
Tautan Judul
Atribut titlemenentukan informasi tambahan tentang suatu elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip ketika mouse bergerak di atas elemen.
Contoh
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Lebih lanjut tentang URL Absolut dan URL Relatif
Contoh
Gunakan URL lengkap untuk menautkan ke halaman web:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Contoh
Tautan ke halaman yang terletak di folder html di situs web saat ini:
<a href="/html/default.asp">HTML tutorial</a>
Contoh
Tautan ke halaman yang terletak di folder yang sama dengan halaman saat ini:
<a href="default.asp">HTML tutorial</a>
Anda dapat membaca lebih lanjut tentang jalur file di bab Jalur File HTML .
Ringkasan Bab
- Gunakan
<a>elemen untuk menentukan tautan - Gunakan
hrefatribut untuk menentukan alamat tautan - Gunakan
targetatribut untuk menentukan tempat membuka dokumen tertaut - Gunakan
<img>elemen (di dalam<a>) untuk menggunakan gambar sebagai tautan - Gunakan
mailto:skema di dalamhrefatribut untuk membuat tautan yang membuka program email pengguna
Tag Tautan HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Untuk daftar lengkap semua tag HTML yang tersedia, kunjungi Referensi Tag HTML kami .