Link atau Hypertext berfungsi sabagai penghunbung terhadap web atau dokument lain.
Untuk membuat link di HTML, kita dapat menggunakan element dengan tag <a>. tag ini kependekan dari achor (jangkar). element link <a> akan memenggil halaman lain jika terjadi peristiwa klik pada element link tersebut.
Tag <a> memiliki atribut default yang harus selalau ada yakni atribut href (Hypertext Refrence).
Contoh penggunaan Element dengan tag <a> sebagai berikut:
Contoh
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://zenvhtml.blogspot.com/2018/10/pengenalan-html.html" >belajar HTML</a>
</body>
</html>
Preview
Coba anda klik teks google di atas, maka anda akan di arahkan ke halaman google.
Secara garis besar, di HTML link di bagi menjadi tiga menurut penulisan alamat di atribut href yakni absolute link, relative link dan Internal link.
Absolite Link di HTML
Absolute link atau bisa juga di sebut Exstrnal Link adalah link yang di tujukan untuk memanggil halaman web atau dokument HTML yang beradi di internet . alamat yang di tuliskan dalam atribut href harus lengkap seperti contoh di atas.
Relative link di HTML
Relatif link adalah element link dengan tag <a> yang di gunakan untuk memanggil dokument yang berada di dalam memori komputer. perbedaan antara Absolute link dengan Relative link dari cara penulisan alamat yang di cantumkan dalam atribut href.
contoh alamat relative link sebagai berikut:
Contoh alamat Relative link di HTML
Dokument1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="dokumen2.html" >Dokument 2</a>
</body>
</html>
Contoh di atas artinya link di fungsikan memanggil dokument2.html yang berada di memori penyimpanan komputer kita dan berada di folder yang sama dengan dokument1.html
Contoh alamat Relative link di HTML
Dokument1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="forder1/dokumen2.html" >Dokument 2</a>
</body>
</html>
</div>
Contoh di atas artinya link di fungsikan memanggil dokument2.html yang berada di memori penyimpanan komputer kita dan file Dokument2.html letakya lebih dalam dari Dokument1.html. jelasnya, kita harus menuliskan nama folder yang menampung file yang akan di panggil.
Contoh alamat Relative link di HTML
Dokument1.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="./dokumen2.html" >Dokument 2</a>
</body>
</html>
Contoh di atas artinya link di fungsikan memanggil dokument2.html yang berada di memori penyimpanan komputer kita dan file Dokument2.html berada di dalam folder terluar dari file Dokument1.html. disini kita tidak perlu menuliskan
nama folder yang menampungnya, cukup kita tambahkan notasi titik (.) di awal sebelum tanda Slash (/).
Internal Link di HTML
Internal link di gunakan untuk memanggil bagian-bagian tertentu di dalam dokument html untuk di tampilkan. Internal link cocok untuk dokument atau web yang memiliki artikel yang panjang dan memiliki banyak sub title.
dengan adanya Internal link di dalam web atau dokument HTML, akan mempermudah pembaca saat melompati bagian bagian tertentu.
contoh Internal link di HTML:
Contoh Internal link di HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p> ini merupakan paragraf satu</p>
<a href="#paragraf2" >go to paragraf dua</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="paragraf2" >Ini merupakan paragraf 2</p>
</body>
</html>
Preview
Perhatikan <a href="#paragraf2" >go to paragraf dua</a> value atribut herf adalah id yang yang di panggil oleh element link tersebut, dan id #paragraf2 di miliki oleh tag <p> di paragraf ke dua.
Atribut Target di tag <a>
Atribut ini di gunakan untuk menentukan apakah web atau dokument yang di panggil terbuka di jendela baru browser atau menimpa halaman yang sebelumnya. secara dafault, dokument yang di panggil dengan tag <a> akan menimpa halaman yang sebelumnya. namaun dengan atribut target="..." kita dapat menentukan dua opsi tersebut.
contoh:
Contoh penggunaan atribut target di tag HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="dokumen2.html" target="_blank" >Dokument 2</a>
</body>
</html>
Preview
Contoh di atas jika link di Klik maka Dokument2.html akan terbuka di jendela baru di aplikasi web browser kita.