Belajar HTML membuat hyperlink dengan HTML mudah

Tahu apa yang dimaksud dengan Hyperlink? Kalau kamu berjelajah di dunia internet mungkin sering kamu temui dengan hal yang satu ini.

Ketika kita sedang mengunjungi sebuah halaman web kita mungkin mengklik sesuatu pada halaman tersebut yang kemudian terjadi loading pada browser.

Lalu terbukalah sebuah halaman web baru ketika kita melakukan tindakan itu tadi.

Apa itu link atau hyperlink?

Link merupakan kependekan dari istilah hyperlink. Link inilah yang mengarahkan kita dari halaman web yang satu ke halaman web lainnya.

Ibaratkan kita mempunyai sebuah halaman web yang didalamnya mempunyai sebuah link. Maka link tersebut yang dapat menghubungkan halaman web yang satu terhubung ke halaman web lainnya.

ilustrasi berpindah halaman dengan mengklik hyperlink

Jadi dengan adanya hyperlink kita dapat berpindah-pindah halaman web dengan mudah tanpa harus mengetikan kembali alamat url/address ke kotak url browser.

Ya tentunya pasti ribet bangetkan hehe.

Bagaimana cara membuat hyperlink website?

Pada html sangat mudah kok untuk implementasi Hyperlink ini. Kita hanya menggunakan elemen tag <a> yang memiliki atribut href.

Di atribut href ini nantinya kita tuliskan alamat url web yang akan kita kunjungi.

Apa saja struktur untuk membuat hyperlink?

untuk struktur membuat link ini sendiri kita hanya harus mengetahui beberapa hal berikut

1. Dimulai dengan tag <a>

2. Didalam tag <a> kita masukan atribut href. Contoh href="index.html"

3. index.html merupakan alamat url yang akan dituju

4. Akhiri dengan akhiran tag </a>

5. Untuk nama dari link tersebut dapat kita ketikan home diantara tag <a href="index.html> dan tag </a>. Contoh <a href="index.html>home</a>.

Dalam membuat hyperlink juga ada terdapat dua istilah, apa itu?

1. Internal linking

Internal linking atau yang biasa kita sebut internal link merupakan sebuah hyperlink yang mengarahkan kita untuk berpindah halaman web, akan tetapi halaman web tersebut berada satu folder dengan halaman kita saat ini.

Misalnya dalam satu folder tersebut terdapat file home.html dan about.html, dan saat ini kita sedang membuka file home.html didalam browser.

Ketika kita akan berpindah ke about.html maka browser akan membuka halaman about.html tadi saat kita mengklik hyperlink yang mengarahkan kita kehalaman about tersebut.

Agar lebih jelas berikut contoh penulisan internal link

<a href="about.html">about</a>

2. Eksternal linking

Biasa disebut eksternal link adalah link yang mengarahkan kita ke halaman web luar. Artinya halaman tersebut tidak berada dalam satu folder dengan halaman yang saat ini kita buka di browser.

Eksternal link ini merupakan alamat url dari web lain yang akan kita tuju.

Untuk penulisan atau implementasinya agak sedikit berbeda dengan internal link. Berikut contohnya

<a href="https://www.wikipedia.org">Wikipedia</a>

Dapat kita lihat eksternal link diatas mengarah ke halaman web dari situs wikipedia.

Dari dua cara diatas merupakan cara membuat hyperlink yang umum orang lain lakukan serta kedua cara diatas dapat membuat halaman web yang sebelumnya kita buka dapat tertutup kembali.

Itu diakibatkan ketika kita melakukan aksi klik pada halaman website maka yang terjadi browser akan membuka halaman baru dan kemudian halaman yang sebelumnya telah kita buka akan ditutup langsung oleh browser.

Lalu bagaimana agar halaman yang sebelumnya itu tidak tertutup dan tetap terbuka serta halaman yang kita tuju selanjutnya membuat tab baru pada browser?

Cara membuka link menjadi tab baru

Berikut caranya, kita dapat membuka halaman web di tab baru dengan menggunakan atribut target dengan nilai _blank didalamnya.

Contohnya

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

contoh link diatas saat terjadi aksi klik maka browser akan otomatis membuat tab baru sehingga halaman web yang sebelumnya dikunjungi tidak akan tertutup otomatis oleh browser.