HTML Hyperlink

by

Link atau tautan adalah fitur di HTML yang memungkinkan untu berpindah dari satu halaman ke halaman lain. Link didefinisikan dengan element <a>.

Untuk membuat hyperlink sangat mudah, berikut format dasarnya:

<a href="#">Teks</a>

Tanda # diganti dengan URL atau alamat situs yang ingin kamu tuju. Ada 2 jenis link yang perlu kamu ketahui, yaitu:

Definisi link absolut adalah link yang memiliki alamat tujuan pasti / eksak. Contoh:

Contoh absolute hyperlink: <a href="https://halamansatu.biz/">Website Puntadewa.my.id Klik Disini</a>

Hasilnya adalah:

Contoh absolute hyperlink: Website Puntadewa.my.id Klik Disini

Jadi, href diisi dengan URL panjang yang lengkap mulai dari https.

Definisi link relatif adalah link yang domain utamanya masih sama dengan domain sebelumnya. Atau link dengan URL tujuan tanpa domain utama. Contoh:

Contoh relatif link: <a href="halaman.html">Website Puntadewa.my.id</a>

Maka hasilnya adalah:

Contoh relatif link: Website Puntadewa.my.id

Maka link tersebut akan mengarah ke alamat situs: https://halamansatu.biz/html/hyperlink/halaman.html

Mengapa jadi seperti itu? Karena artikel ini beralamatkan: https://halamansatu.biz/html/hyperlink/ sehingga jika kita hanya menulis halaman.html maka link akan mengikuti domain utama ditambah kata halaman.html.

Contoh relatif link yang lain:

<a href="folder/halaman.html">Relatif link 1</a>
<a href="../folder/halaman.html">Relatif link 1</a>
<a href="../halaman.html">Relatif link 1</a>

Menentukan Target Link HTML

Ada atribut di <a> yang harus kamu pahami, yaitu target. Atribut ini memberikan opsi ketika link di klik akan mengarah kemana: tab baru, tab sama.

Nilai atau value dari target adalah:

  • _self di klik masih di tab / jendela yang sama
  • _blank di klik akan mengarah ke tab yang baru

Contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Paragraf HTML</title>
</head>
<body>
	<a target="_self" href="https://halamansatu.biz/koding">Link tab sama</a><br>
	<a target="_blank" href="https://halamansatu.biz/koding/ebook">Link tab beda</a>
</body>
</html>

Hasilnya yaitu:

Link tab sama
Link tab beda

Itu tadi adalah tutorial membuat hyperlink di HTML. Biar lebih keren kita bisa mengatur dengan css.

Semoga tutorial singkat ini mudah dimengerti ya.

Leave a Comment