Tutorial HTML Lanjutan: Cara Membuat Internal Link ke Bagian Lain Dokumen (atribut id)
Halo kawan-kawan,
Pada tutorial sebelumnya tentang cara membuat link ke halaman lain (baik link dengan alamat absolut maupun alamat relatif), kita juga bisa membuat link ke bagian lain dari dokumen yang sama. Dalam Tutorial HTML Lanjutan kali ini kita akan mempelajari Cara Membuat Internal Link ke Bagian Lain Dokumen dengan menggunakan atribut id.
Mengenal Atribut id dalam HTML
Atribut id adalah atribut yang bisa diberikan kepada tag apapun di dalam HTML. Atribut id bisa diibaratkan sebagai ‘identitas’ dari sebuah tag. Di dalam sebuah halaman, tidak boleh ada atribut id yang sama, namun setiap tag tidak harus memiliki atribut id. Berikut adalah contoh penulisan atribut id dalam beberapa tag HTML:
<p id="paragraf1"> </p>
<a id="situs1" href="http://nusantaracoding.blogspot.co.id/">Situs Nusantara Coding</a>
<img id="nusantara_coding" src="Nusantara Coding.png" />
<div id="footer"></div>
Atribut id kebanyakan digunakan untuk pengkodean dengan CSS atau pemograman JavaScript, dan atribut ini tidak akan berpengaruh apa-apa kedalam tampilan text HTML.
Cara Membuat Link ke Bagian Lain Dokumen HTML
Selain digunakan di dalam CSS dan JavaScript, atribut id juga digunakan di dalam HTML sebagai ‘penanda’ bagian dari halaman web.
Untuk melihat fungsi atribut id ini, kawan-kawan silakan membuka teks editor dan jalankan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Atribut id di Nusantara Coding</title>
</head>
<body>
<h3 id="judul1">Saya sedang belajar HTML di Nusantara Coding</h3>
<p id="paragraf1">Pada bagian kali ini, Kita akan focus untuk membahas Cara Membuat Internal Link ke Bagian Lain Dokumen (atribut id).</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>
Hasil Code:
Klicklah Tulisan “Kembali ke judul pertama” atau tulisan “Kembali ke paragraf pertama” dan lihatlah apa yang terjadi.
Sayat agar link ni bekerja adalah:
- atribut href pada tag a menggunakan tanda pagar # untuk berpindah ke bagian lain halaman.
- di bagian lain halaman, harus ada tag yang memiliki atribut id yang sama dengan nilai pada link yang sudah dibuat.
- pada contoh diatas, nilai link adalah <a href="#paragraf1"> maka atribut idnya harus bernilai id=”paragraf1”
Selain digunakan untuk pindah ke bagian lain pada halaman yang sama, kita juga bisa membuat link untuk halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu. Untuk keperluan ini, kita hanya tinggal menambahkan tanda pagar di akhir atribut href, seperti contoh berikut ini:
<a href="halaman_lain.html#paragraf1">Link ke paragraf pertama halaman lain</a>
Jika digabungkan dengan alamat absolut, kita bisa memandu pengunjung situs ke bagian tertentu situs lain, dengan syarat pada bagian tersebut memiliki tag id.