Cara Membuat Page Anchor (internal link) - Pada belajar HTML dasar sebelumnya kita sudah membahas tentang cara membuat link di HTML (entah itu link yang berupa absolut atau relatif). Sekarang kita akan membuat link yang menuju halaman itu sendiri bukan ke halaman lain yang disebut page anchor dengan menggunakan atribut id.
Apa itu Atribut id ?
Sebelum masuk lebih dalam, terlebih dahulu kita perlu mengenal apa itu atribut id?
Atribut id ini bisa kita gunakan ke dalam tag HTML apa pun atau bisa di analogikan sebagai identitas dari sebuah tag.
Dalam menggunakan atribut id pada HTML, kita tidak boleh menggunakan atribut id yang sama dan juga setiap tag tidak harus memiliki atribut id juga.
Sebagai contoh, lihat kode di bawah ini :
<p id="paragraf1"> </p>
<a id="website" href="https://www.paltycox.com">Website paltycox</a>
<img id="gambar_kucing" src="kucing.jpg" />
<div id="footer"></div>
Atribut id keseringan digunakan ketika menggunakan CSS untuk menghias sebuah halaman website atau pada saat pengkodean JavaScript untuk membuat website lebih interaktif.
Cara Membuat Page Anchor
Atribut id tidak hanya digunakan pada CSS atau JavaScript, tetapi digunakan juga pada HTML sebagai penanda didalam sebuah halaman website.
Jika paragraf pertama kita memiliki nilai atribut id="paragraf1", maka kita juga bisa membuat link untuk memindahkan jendela web browser ke paragraf1 tersebut.
Langsung saja kita praktikkan, ketik kode dibawah ini dan gunakan logika untuk memahaminya, simpan sebagai pageanchor.html.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Koding HTML di paltycox</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar koding HTML secara gratis di paltycox.com</h3>
<p id="paragraf1">HTML adalah singkatan dari Hypertext Markup Language.
Disebut hypertext karena di dalam HTML sebuah text biasa dapat
berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya dengan
hanya meng-klik text tersebut.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="#judul1">Kembali ke judul pertama</a>
<br />
<a href="#paragraf1">Kembali ke paragraf pertama</a>
</body>
</html>
Hasilnya :
Dalam contoh kasus diatas, saya sengaja membuat banyak tag <br> agar halaman web terlihat panjang, dan supaya kita bisa melihat efek ketika men-klik link untuk kembali ke paragraf pertama halaman web.
