loading...

HTML Dasar: Hyperlink

Hyperlink (link / weblink) merupakan sebuah koneksi dari sumber web ke sumber lain. Jadi link ini merupakan suatu komponen yang sangat penting dalam dunia web. Link dalam HTML dibuat dengan tag a atau singkatan dari anchor (jangkar). Filosofi jangkar tersebut yang mengilhami keterhubungan sebuah web dengan sumber yang dikehendaki. Ok langsung saja, let's code!

Pertamaexternal link

Menghubungkan ke halaman web atau platform diluar dari sistem yang kita buat. Misal kita akan menghubungkan sebuah halaman web ke Instagram:

<p>Klik <a href="https://instagram.com/bro_irham">disini</a> untuk mengetahui instagram saya.</p> 

Keduainternal link/ relative url

Menghubungkan ke halaman web yang ada didalam domain atau sistem kita. Misal kita akan menghubungkan sebuah halaman satu ke halaman lainnya secara bolak-balik dalam satu folder maupun diluar folder.

#Satu folder

<!-- Kedua halaman dalam satu folder -->
<h1>Halaman pertama</h1>
<a href="halaman2.html">Menuju ke halaman 2</a>
 
<!-- Halaman2 dalam "folder" lain -->
<h1>Halaman pertama</h1>
<a href="folder/halaman2.html">Menuju ke halaman 2</a>

 #Beda folder

<!-- halaman2 disimpan di folder user -->
<h1>Halaman pertama</h1>
<a href="../user/halaman2.html">Menuju ke halaman 2</a>
 
<!-- halaman1 disimpan di folder admin -->
<h1>Halaman kedua</h1>
<a href="../admin/halaman1.html">Kembali ke halaman 1</a>

Ketigapage anchor

Page anchor merupakan bagian tertentu dalam sebuah halaman. Jadi ketika link di tekan maka akan menuju ke bagian tertentu dalam suatu halaman yang sama. Konsep ini biasa sering dipakai dalam landing page untuk mempermudah navigasi dalam navbar. Kali ini kita buat dengan konsep page anchor sederhana. Misal dalam sebuah halaman terbagi menjadi tiga bagian, kita buat daftar bagian menggunakan tag list dan untuk penanda masing-masing bagian menggunakan id.  

<!DOCTYPE html>
<html>
<head>
<title>HTML Dasar: Hyperlink</title>
</head>
<body>
<h1>Silahkan klik link berikut:</h1>
<ul>
<li><a href="#bagian1">Ke bagian 1</a></li>
<li><a href="#bagian2">Ke bagian 2</a></li>
<li><a href="#bagian3">Ke bagian 3</a></li>
</ul>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian2">Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian3">Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html> 

Oh ya, jangan lupa tanda # dalam penulisan value pada link agar terkoneksi dengan id tujuan. Mari terus berlatih dan mencoba hal-hal baru seputar pemrograman web. Semangat! 



0 Comments

Leave a comment