Tutorial HTML Lanjutan: Cara Membuat Internal Link di HTML

Halo gan. Di postingan sebelumnya, kita sudah membahas cara membuat description list di HTML.

Sekarang kita sudah tau kalau ada 3 jenis list di HTML. Ada ordered list, unordered list, dan description list.

Masing-masing punya cara yang berbeda dalam membuatnya. Ordered dan unordered list punya cara yang hampir sama. Sedangkan description list sangat berbeda dengan ordered dan unordered list.

Kali ini, kita akan bahas cara membuat internal link di HTML. Pernah juga kita bahas cara membuat link di HTML, postingannya ada di sini: Tutorial HTML untuk Pemula: Membuat Link di HTML.

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.

membuat internal link di html

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 link ke bagian lain dokumen HTML

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?


Maka akan seperti ini jadinya.

cara membuat link di html

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.

membuat internal link di html

Dan, kalau kita klik heading bawah tersebut. Web browser akan berpindah kembali. Url web browsernya juga ikut berubah.

membuat internal link

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.



0 Komentar untuk "Tutorial HTML Lanjutan: Cara Membuat Internal Link di HTML"