Link (Tautan) HTML


Link ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik dari halaman ke halaman.


Link HTML - Hyperlink

Link HTML adalah hyperlink.

Anda dapat mengklik link dan pindah ke dokumen lain.

Saat Anda menggerakkan mouse ke arah link, panah mouse akan berubah menjadi tangan kecil.

Catatan: Link tidak harus berupa teks. Link bisa berupa gambar atau elemen HTML lainnya.


Link HTML - Sintaks

Tag <a> HTML mendefinisikan hyperlink yang memiliki sintaks berikut: 

<a href="url">teks link</a>

Atribut terpenting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.

Teks link adalah bagian yang akan terlihat oleh pembaca.

Mengklik teks link, akan mengirim pembaca ke alamat URL yang ditentukan.


Contoh

Contoh ini menunjukkan cara membuat link ke ianzune.com:

<a href="https://www.ianzune.com/">Kunjungi Ian Zune</a>

Secara default, link akan muncul seperti berikut di semua browser:

  • Link yang belum dikunjungi digarisbawahi dan berwarna biru
  • Link yang dikunjungi digarisbawahi dan berwarna ungu
  • Link aktif digarisbawahi dan berwarna merah

Tips: Link tentu saja dapat diberi style dengan CSS, untuk membuat style yang berbeda


Link HTML - Atribut target

Secara default, halaman yang dilink-kan akan ditampilkan di jendela browser saat ini. Untuk mengubahnya, Anda harus menentukan target lain untuk link tersebut.

Atribut target menentukan tempat untuk membuka dokumen terkait.

Atribut target dapat memiliki salah satu dari nilai berikut:

  • _self - Default. Membuka dokumen di jendela/tab yang sama seperti yang diklik
  • _blank - Membuka dokumen di jendela atau tab baru
  • _parent - Membuka dokumen dalam bingkai induk
  • _top - Membuka dokumen di seluruh badan jendela


Contoh

Gunakan target="_ blank" untuk membuka dokumen yang dilink-kan di jendela atau tab browser baru: 

<a href="https://www.ianzune.com/" target="_blank">Kunjungi Ian Zune</a>

URL Mutlak vs. URL Relatif

Kedua contoh di atas menggunakan URL absolut (alamat web lengkap) di atribut href.

Link lokal (Link ke halaman dalam situs web yang sama) ditentukan dengan URL relatif (tanpa bagian "https: // www").


Contoh

<h2>URL Mutlak</h2>
<p><a href="https://www.ianzune.com/">Ian Zune</a> </p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>URL Relatif</h2>
<p> <a href="html_images.asp">Gambar HTML</a></p>
<p> <a href="/css/default.asp">Tutorial CSS</a></p>

Link HTML - Gambar sebagai Link

Untuk menggunakan gambar sebagai link, cukup letakkan tag <img> di dalam tag <a>.


Contoh

<a href="default.asp">
<img src="smiley.gif" alt="Tutorial HTML" style="width: 50px; height: 50px;">
</a>

Link ke Alamat Email

Gunakan mailto: di dalam atribut href untuk membuat link yang membuka aplikasi email pengguna (untuk memungkinkan mereka mengirim email baru).


Contoh

<a href="mailto:someone@example.com">Kirim email</a>

Tombol sebagai Link

Untuk menggunakan tombol HTML sebagai link, Anda harus menambahkan beberapa kode JavaScript.

JavaScript memungkinkan Anda untuk menentukan apa yang terjadi pada acara tertentu, seperti mengklik tombol.


Contoh

<button onclick="document.location='default.asp'">Tutorial HTML</button>

Judul Link

Atribut title menentukan informasi tambahan tentang suatu elemen. Informasi ini paling sering ditampilkan sebagai teks tooltip saat mouse bergerak di atas elemen.


Contoh

<a href="https://www.ianzune.com/html/" title="Buka website Ian Zune">Kunjungi Tutorial Web saya </a>

Lanjutan tentang URL Mutlak dan URL Relatif

Gunakan URL lengkap untuk menautkan ke halaman web:

<a href="https://www.ianzune.com/html/default.asp">Tutorial HTML</a>

Link ke halaman yang terletak di folder html di situs web saat ini:

<a href="/html/default.asp">Tutorial HTML</a>

Link ke halaman yang terletak di folder yang sama dengan halaman saat ini: 

<a href="default.asp">Tutorial HTML</a>

Ringkasan

  • Gunakan elemen <a> untuk menentukan link
  • Gunakan atribut href untuk menentukan alamat link
  • Gunakan atribut target untuk menentukan tempat untuk membuka dokumen terkait
  • Gunakan elemen <img> (di dalam <a>) untuk menggunakan gambar sebagai link
  • Gunakan skema mailto: di dalam atribut href untuk membuat link yang membuka aplikasi email pengguna

Sumber referensi: w3schools

Komentar

Posting Komentar