Links di HTML: Cara Membuat dan Sintaknya

Link atau tautan merupakan elemen HTML yang berfungsi untuk menghubungan suatu halaman web ke halaman lain.

Links di HTML – Hyperlink

Link HTML adalah hyperlink.

Kita dapat mengklik link dan melompat ke dokumen atau halaman web lain lain.

Saat kita ingin menggerakkan mouse ke atas link, biasanya panah mouse akan berubah menjadi tangan kecil.

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

Links di HTML – Sintaks

Tag <a>di HTML mendefinisikan hyperlink. Seperti berikut:

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

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

Teks link adalah bagian yang akan terlihat oleh user.

Ketika di klik teks link, maka link akan mengirim user ke alamat URL yang ditentukan.

Contoh :
Contoh ini menunjukkan cara membuat tautan ke dosenit.com:

<a href="https://www.dosenit.com/">Visit DosenIT.com!</a>

Secara default, tautan akan muncul seperti berikut ini di semua browser:

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

Link di HTML – Atribut target

Secara default, halaman yang ditautkan akan ditampilkan di jendela browser saat ini. Untuk mengubahnya, kita harus menentukan target lain untuk tautan 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 di bingkai induk
• _top – Membuka dokumen di seluruh badan jendela

Contoh :

Gunakan target = “_ blank” untuk membuka dokumen yang ditautkan di jendela atau tab browser baru:

<a href="https://www.dosenit.com/" target="_blank">Visit DosenIT.com!</a>

URL Absolut vs. URL Relatif

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

Link 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.dosenit.com/">DosenIT</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>

Link di HTML – Link Gambar

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

Contoh :

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

Link ke Alamat Email

Gunakan mailto: di dalam atribut href untuk membuat tautan yang membuka program email pengguna (untuk memungkinkan mereka mengirim email baru):

Contoh :

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

Tombol sebagai Link

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

JavaScript memungkinkan kita untuk menuliskan fungsi tertentu, seperti mengklik tombol:

Contoh :

<button >

Title Link

Atribut title digunakan untuk menambahkan informasi suatu elemen. Informasi ini paling sering ditampilkan sebagai teks keterangan saat mouse bergerak di atas elemen.

Contoh :

<a href="https://www.dosenit.com/html/" title="BAB HTML">Visit our HTML Tutorial</a>

Lanjutan URL Absolut dan URL Relatif

Contoh
Gunakan URL lengkap untuk menautkan ke halaman web:

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

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

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

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

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

Ringkasan

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