Sekiranya di panduan HTML Mendasar kita telah mempelajari cara membuat link ke halaman lain (bagus link dengan tempat tinggal absolut maupun tempat tinggal relatif), kita pun dapat membangun link ke bagian lain dari dokumen yang sama. Pada Panduan HTML Lanjutan kali ini kita akan mempelajari Cara Membuat Internal Link ke Bagian Lain Dokumen dengan menggunakan atribut id.
Mengenal Atribut id pada HTML
Atribut id yakni atribut yang dapat diberikan kepada tag apapun di pada HTML. Atribut id dapat diibaratkan selaku ‘identitas’ dari sebuah tag. Di pada sebuah halaman, tak boleh ada atribut id yang sama, namun setiap tag tak mesti mempunyai atribut id. Berikut yakni contoh penulisan atribut id pada beberapa tag HTML:
|
1 |
<p id=paragraf1> </p><br/><a id=situs1 href=http://www.duniailkom.com>Situs Dunia Ilkom</a><br/><img id=gambar_koala src=koala.jpg /><br/><div id=footer></div> |
Atribut id kebanyakan digunakan bagi pengkodean dengan CSS atau pemograman JavaScript, dan atribut ini tak akan berpengaruh apa-apa kedalam tampilan text HTML.
Cara Merancang Link ke Bagian Lain Dokumen HTML
Selain digunakan di pada CSS dan JavaScript, atribut id pun digunakan di pada HTML selaku ‘penanda’ bagian dari halaman web.
Apabila paragraf pertama-tama dari halaman kita mempunyai id=”paragraf1”, karenanya kita dapat membangun link yang akan ‘memindahkan’ jendela web browser ke bagian “paragraf1”, dengan menuliskan:
|
1 |
<a href=#paragraf1>Kembali ke paragraf pertama-tama</a> |
Sekiranya bagian tersebut dijalankan, web browser akan menampilkannya seperti link ‘normal’, namun ketika user men-klik kalimat link tersebut, ia akan dipindahkan ke bagian halaman yang mempunyai id=”paragraf1”. Perhatikan bahwa di pada tag <a>, kita menggunakan tanda pagar “#” bagi berpindah ke bagian lain halaman.
Syarat dari link tersebut dapat berfungsi yakni di bagian lain halaman, mesti ada tag yang mempunyai atribut id=”paragraf1”.
Selain digunakan bagi pindah ke bagian lain di halaman yang sama, kita pun dapat membangun link bagi halaman lain, dan sekaligus memindahkan tampilan ke bagian tertentu. Bagi kebutuhan ini, kita hanya tinggal menambahkan tanda pagar di ahir atribut href, seperti contoh berikut ini:
|
1 |
<a href=halaman_lain.html#paragraf1>Link ke paragraf pertama-tama halaman lain</a> |
Sekiranya digabungkan dengan tempat tinggal absolut, kita dapat memandu pengunjung situs ke bagian tertentu situs lain, dengan syarat di bagian tersebut mempunyai tag id.
Selaku contoh, berikut yakni kode HTML cara membangun link ke bagian lain dokumen HTML:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar HTML di Source Code Program</title><br/></head><br/><br/><body><br/><h3 id=judul1>Saya sedang belajar HTML di Source Code Program.com</h3><br/><p id=paragraf1>HTML yakni singkatan dari Hypertext Markup Language. <br/>Disebut hypertext karena di pada HTML sebuah text biasanya dapat <br/>berfungsi lain, kita dapat membuatnya menjadi link yang dapat <br/>berpindah dari satu halaman ke halaman lainnya dengan <br/>hanya meng-klik text tersebut.</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/><a href=#judul1>Kembali ke judul pertama-tama</a><br/><br /><br/><a href=#paragraf1>Kembali ke paragraf pertama-tama</a><br/></body><br/><br/></html> |
Pada contoh diatas, saya sengaja membangun banyak tag <br /> agar halaman web menjadi panjang, dan kita dapat melihat efek ketika men-klik link bagi kembali ke paragraf pertama-tama halaman web.
Sumber https://www.duniailkom.com/
