HTML | BAB 8 Membuat Tautan

 


Menambahkan tautan eksternal dengan tag <a>

Tautan eksternal digunakan untuk menghubungkan halaman web dengan halaman web lain di luar domain yang sama. Untuk menambahkan tautan eksternal, kita menggunakan tag HTML <a>. Berikut adalah contoh penggunaannya:

<a href="https://www.google.com">Klik disini untuk mengunjungi Google</a>
contoh output :
Klik disini untuk mengunjungi Google

Di dalam tag <a>, kita menggunakan atribut href untuk menentukan URL dari halaman web yang ingin kita tautkan. Di contoh di atas, kita menggunakan URL "https://www.google.com". Selanjutnya, di antara tag pembuka dan penutup <a>, kita dapat menambahkan teks atau gambar yang akan menjadi tautan tersebut. Pada contoh di atas, teks "Klik disini untuk mengunjungi Google" akan menjadi tautan yang dapat diklik oleh pengguna.

Menambahkan tautan internal dengan tag <a>

Tautan internal atau tautan internal dengan tag <a> digunakan untuk menghubungkan halaman web dengan bagian lain di halaman yang sama. Hal ini berguna ketika kita memiliki halaman web yang panjang dan ingin membuat navigasi yang memungkinkan pengguna langsung melompat ke bagian tertentu di halaman tersebut. Berikut adalah contoh penggunaannya:

  <h2>Daftar Isi</h2>
    <ul>
      <li><a href="#section1">Bagian 1</a></li>
      <li><a href="#section2">Bagian 2</a></li>
      <li><a href="#section3">Bagian 3</a></li>
    </ul>
  
    
      <h2 id="section1">Bagian 1</h2>
    <p>Isi bagian 1...</p>
    
    <h2 id="section2">Bagian 2</h2>
    <p>Isi bagian 2...</p>
    
    <h2 id="section3">Bagian 3</h2>
    <p>Isi bagian 3...</p>
  
contoh output :

Bagian 1

isi bagian 1

Bagian 2

isi bagian 2

Bagian 3

isi bagian 3

Pada contoh di atas, kita menggunakan tag <h2> untuk judul setiap bagian dan menambahkan atribut id pada setiap tag <h2>. Atribut id ini akan digunakan sebagai target tautan internal. Dalam tag <a>, kita menggunakan atribut href dan menambahkan tanda "#" diikuti dengan id target. Misalnya, tautan "Bagian 1" akan menuju ke bagian dengan id "section1". Dengan demikian, pengguna dapat mengklik tautan "Bagian 1" untuk langsung melompat ke bagian yang diinginkan di halaman web tersebut.