Tutorial Belajar HTML

Cara Membuat Internal Link dalam halaman HTML dengan atribut id

Written by adies

Cara Membuat Internal Link dalam halaman HTML dengan atribut id
Pada tutorial html dasar kita telah membahas tentang cara membuat link dengan tag a, dalam tutorial tersebut kita telah membuat link dengan absolute dan juga relatif, saya juga ada menyinggung sedikit tentang link bagian, tapi saya tidak menjelaskan lebih jauh tentang link tersebut oleh karena itu dalam tutorial ini saya akan menjelaskan tentang link bagian dalam dokument html memakai atribut id.
Link bagian ini bisa disebut juga sebagai interntal link. Link bagian ini dibuat berdasarkan atribut id. Link bagian ini adalah link dalam satu documen dan ketika link diklik maka akan mengarah ke bagian halaman yang memiliki id sesuai dengan id dalam link tersebut.

Atribut id dalam HTML

Atribut id adalah identitas dari sebuah tag. Id ini bisa dipakai ke tag apapun, dalam sebuah halaman, tidak boleh ada atribut id yang sama, namun setiap tag tidak harus memiliki atribut id.

Contoh link ke bagian lain dalam documen html

Berikutnya adalah contoh untuk membuat link dalam satu dokumen html

<html>
<body>
<p>
<p><a href="#C2">Klik untuk merujuk pada bab 2 </a></p>
<p><a href="#C4">Klik untuk merujuk pada bab 4 </a></p>
<p><a href="#C6">Klik untuk merujuk pada bab 6</a></p>
</p>
<p>
<h2>Bab 1</h2>
<p>Bab 1 berisi mengenai Pendahuluan</p>
<a name="C2"><h2>Bab 2</h2></a>
<p>Bab 2 berisi mengenai Landasan Teori</p>
<h2>Bab 3</h2>
<p>Bab 3 berisi mengenai Analisis</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>
<a name="C4"><h2>Bab 4</h2></a>
<p>Bab 4 berisi mengenai Perancangan</p>
<h2>Bab 5</h2>
<p>Bab 5 berisi mengenai Implementasi</p>
<a name="C6"><h2>Bab 6</h2></a>
<p>Bab 6 berisi mengenai Kesimpulan dan Saran</p>
</body>
</html>

Dari contoh diatas bisa kita lihat pada bagian href=”#C2″ ketika diklik jendela web browser akan berpindah ke bagian id C2, disini saya membuat <a name=”C2″> sebagai nama dari C2. Supaya ketika link diklik akan mengarah ke bagian name ini.

Agar berjalan normal, silakan di download dulu code html nya kemudian jalankan dengan klik 2x pada file yang telah di download.
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="halamansatu.html#paragraf2">Link ke paragraf kedua halaman satu</a>  
Syarat dari link tersebut supaya berfungsi adalah di bagian lain halaman, harus ada tag yang memiliki atribut id=”paragraf2”.
Sampai disini kita sudah bisa membuat link yang dapat mengarahkan jendela browser ke bagian tertentu dalam satu halaman website.
Cara ini sangat berguna untuk membuat daftar isi content atau table of content, ketika judul daftar isi di klik kita bisa langsung menuju ke pembahasannya.

About the author

adies

Ada Komentar?

×