Mengenal Hyperlink pada HTML

Kalian pasti pernah mengunjungi sebuah website, dan mengklik menu pada navigasi atas lalu berpindah ke halaman lain. Atau juga bisa kalian mengklik teks dengan warna biru lalu berpindah pada website lain. Kalau kalian belum tahu, itulah yang dinamakan hyperlink. Pada kali ini, mimin akan bahas nih, lets Check this out!

Hyperlink atau yang biasa kita sebut link adalah perantara penghubung antara laman satu dengan yang lain. Ketika kita memencet atau meng-klik sebuah teks yang biasanya berwana biru, kita pasti akan diarahkan ke  tab baru yang membuka laman lain dari website tersebut, atau justru mengarahkan kita pada website lain yang masih terkait. Contoh saja kalian klik ini maka kalian akan diarahkan pada website Wikpedia. Atau jika kalian klik ini, kalian akan diarahkan kembali ke laman awal yang mana masih bagian dari website ini. Lebih kurangnya, begitulah cara kerjanya. Lalu, bagaimana cara membuatnya?

Format Hyperlink

Tag utama yang akan kita gunakan yakni tag <a> yang akan kita berikan atribut wajib yakni href. Atribut itu yang nantinya akan kita isi tujuan kita atau laman yang akan kita tujukan. Lalu diantara tag, kita bisa isi teks sesuka kita yang berperan sebagai perantaranya. Jadi, format penulisannya yakni :

<a href=”tujuan”>Teks<a>

Misal kita menulis sintaks seperti ini :

<a href=”https://id.wikipedia.org/wiki/Halaman_Utama”>Link<a>

Kita akan diarahkan pada website wikipedia dari teks yang kita klik tersebut. Untuk lebih jelasnya, kamu siapkan text editor kamu, mari mulai ngoding hehe.

 

Jenis-Jenis Hyperlink

Adapun jenis-jenis link yang sering digunakan adalah :

1.Absolute Address

Absolute address yakni link yang digunakan untuk menghubungkan sebuah laman pada laman lain atau website lain dengan menuliskan URL lengkapnya. Absolute address memerlukan koneksi internet untuk mengakses ke halaman yang kita tuju. Contoh pengaplikasiannya :

Seperti yang kalian lihat, ketika teks tersebut di-klik akan mengarahkan kita pada laman yang telah kita tujukan asalkan URL yang kita masukkan benar dan terdapat koneksi internet.

2.Relative Address

Relative address tak jauh berbeda dengan sebelumnya, namun relative address digunakan untuk menghubungkan antar file dari satu laman yang sama. Relative address tak memerlukan koneksi internet untuk mengaksesnya. Contoh pengaplikasiannya:

Saat ditampilkan pada peramban, begitulah hasil outputnya. Kedua file saling terhubung yang membuat kita tidak perlu membuka satu per-satu file. Cukup klik salah satunya, dan kalian bisa mengunjungi yang lainnya.

 

3.Link to Section

Nah yang ketiga, kita akan mengaplikasikan bagaimana bila link berada pada 1 file yang sama. Disini kita akan menambahkan atribut name. Namun, atribut ini tidak akan dikombinasikan dengan href. Lebih jelasnya sih, coba amati gambar di bawah :

Gampangnya sih, name itu untuk menandai bagian mana yang akan kita tuju dalam sebuah file tersebut. Sementara href yang akan bertugas mengarahkan. Sengaja mimin kasih tag <br> agar efeknya akan terlihat jelas nanti. Jika kalian buka, hasilnya akan seperti di bawah :

Link akan mengarahkan kalian ke bagian yang kalian tuju dalam satu file yang sama tersebut.

 

Mungkin itu tadi tentang hyperlink yang bisa mimin terangkan, tetap semangat belajar ya! Jumpa lagi di artikel mendatang!