Di postingan sebelumnya, kita sudah membahas cara membuat deskripsi HTML. Sekarang, kita akan bahas cara membuat link internal di HTML. Berikut pembahasan selengkapnya yang disajikan oleh AneIqbal.
Ohiya, sebagai informasi tambahan, link internal ini berbeda dengan link yang sudah pernah kita bahas di postingan cara membuat link di HTML. So, pastikan Anda menyimak panduan berikut sampai akhir supaya bisa memahaminya secara utuh.
Apa itu internal link?
Internal link adalah sebuah link atau perujuk yang menuju ke bagian lain di halaman yang sama maupun berbeda. Intinya adalah merujuk ke bagian lain dari halaman web.
Itulah pengertian dari internal link HTML. Setelah mengetahuinya, selanjutnya yaitu bagaimana cara membuatnya.
Atribut id pada tag HTML
Sebelum membuat internal link di HTML, kita perlu tau dulu atribut id di HTML. Atribut id bisa digunakan pada tag HTML apapun.
Atribut id ini bisa dibilang sebagai identitas dari tag yang ditempeli atribut id. Karena, tidak boleh ada id yang sama dalam setiap tag HTML.
Setiap tag tidak harus ditempeli dengan atribut id. Setiap tag boleh memiliki lebih dari 1 id. 1 id hanya boleh menempel pada 1 tag.
1 tag lebih dari 1 id:
<p id="satu dua tiga empat">Ini adalah paragraf</p>
1 tag 1 id:
<p id="lima">Ini juga paragraf</p>
Biasanya, atribut id digunakan untuk membantu pengkodean CSS dan Javascript. Atribut id ini tidak akan memberikan efek tampilan apa-apa di browser HTML.
Cara membuat internal link
Untuk membuat link ke bagian lain di satu dokumen HTML, kita gunakan atribut id. Selain sebagai pembantu pengkodean CSS dan Javascript, atribut id juga bisa berfungsi sebagai ‘penanda’ bagian dari halaman web.
Misalnya, kita punya 2 heading level h1 yang letaknya berjauhan, satu di bagian atas dan satunya lagi di bagian bawah halaman web.
Kita bisa memberikan internal link di antara kedua heading tersebut supaya dapat berpindah bagian dengan cepat.
Tambahkan atribut id di masing-masing heading h1. Id inilah yang akan digunakan sebagai reference atau penunjuk atau link ke bagian lain yang ditandai dengan tanda pagar (#).
Seperti ini kodenya:
<a href="#bawah"> <h1 id="atas">Ini heading h1 atas</h1> </a> <a href="#atas"> <h1 id="bawah">Ini heading h1 bawah</h1> </a>
Mari kita coba praktikkan. Buat file internal-link.html.
<!DOCTYPE html>
<html>
<head>
<title>Membuat internal link di HTML</title>
</head>
<body>
<a href="#bawah">
<h1 id="atas">Ini heading h1 atas</h1>
</a>
<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/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#atas">
<h1 id="bawah">Ini heading h1 bawah</h1>
</a>
</body>
</html>
Sudah?
Coba jalankan file tersebut.
Maka akan seperti ini jadinya.
Kalau kita klik heading atas tersebut, web browser akan berpindah ke heading bawah. Karena merujuk ke bagian halaman web lain, akan ada penambahan #bawah di url web browsernya.
Sesuai dengan yang kita masukkan di atribut href pada tag <a> di atas. Perhatikan lingkaran merah.
Dan kalau kita klik heading bawah tersebut. Web browser akan berpindah kembali. Url web browsernya juga ikut berubah.
Selain di satu halaman web, kita juga dapat membuat internal link ke halaman web lain. Caranya adalah dengan merujuk ke file halaman lain plus atribut id-nya.
Seperti ini contohnya:
<a href="halaman-lain.html#tengah">Ini akan merujuk ke halaman web lain di bagian tengahnya</a>
Begitulah cara membuat internal link di HTML. Internal link ini berguna juga untuk membantu pengunjung saat mengunjungi web berpindah ke bagian lain secara cepat.
Next, kita akan bahas perbedaan block element dan inline element di HTML.
