Tutorial HTML: Menambahkan Hyperlink

Hyperlink (link) atau tautan merupakan hal yang paling signifikan fungsinya dalam website. Link akan menghubungkan satu halaman dengan halaman lainnya.

Apa itu Link ?

Link atau Hyperlink merupakan penaut antara satu halaman dengan halaman lain secara redirect. Link ini bisa berupka teks, gambar, kalimat, dan sebagainya. Dengan mengklik link maka halaman akan secara otomatis dialihkan ke alamat link tujuan. Link biasanya ditandai dengan berubahnya mouse menjadi tangan penunjuk saat mouse berada diatasnya.

Sintaks Link

Bentuk penulisan link ditandai dengan tag <a> atau lebih dikenal dengan tag anchor. Umumnya link atau anchor akan diikuti oleh atribut href yang berisi halaman tujuan. Namun, bisa juga tidak untuk kondisi tertentu. Sementara, untuk bagian yang bisa diklik adalah bagian yang berada dielemen link tersebut.

<a href="Alamat Tujuan">Text Tampilan</a>

Sebagai contoh,

<!DOCTYPE html>
<html>
<head>
<title>Belajar Link</title>
</head>
<body>
<h1>Hari ini saya belajar link</h1>
<a href="http://azharisaputra.com/">Mari Belajar !</a>
</body>
</html>

Hasilnya

HTML Dasar : Hyperlink

Attribut Target Pada Link

Selain atribut href, salah satu atribut lainnya adalah target. Atribut target ini dipergunakan untuk mendeskripsikan dimana halaman link akan dibuka. Ada 4 nilai dari atribut target ini.
– _blank : Membuka halaman link di tab baru
– _self : Membuka halaman link di tab yang sama (dipakai default)
– _parent : Membuka halaman link di frame parentnya
– _top : Membuka halaman link pada full body dari window
– kustom : Membuka halaman ke frame kustom

Contoh,

<a href="http://azharisaputra.com/" target="_blank">_blank</a>
<a href="http://azharisaputra.com/" target="_self">_self</a>
<a href="http://azharisaputra.com/" target="_parent">_parent</a>
<a href="http://azharisaputra.com/" target="_top">_top</a>

Silahkan klik link masing masing, dan lihat perbedaannya.

HTML Link Path

Bagian terpenting lainnya adalah penggunaan path dari halaman tujuan. Pemberian path yang salah bisa menyebabkan halaman tidak bisa dibuka alias page not found. Jadi, hal ini menjadi tugas tersendiri bagi kita nantinya.

Ada beberapa penulisan path dalam link dan html,

1. Absolute Path

Absolute path merupakan penulisan dengan menggunakan alamat lengkap, biasanya diawali oleh protokol http atau https. Contoh google berada dengan domain tersendiri, yakni https://google.com.

<a href="https://google.com">Absolute path</a>

2. Relative Current Web

Ditujukan untuk link yang berada dalam satu web yang sama, alias dalam satu domain name. Contoh, halaman example.html berada pada folder p domain web yang sama. Atrinya akan ada sturktur folder seperti ini,

- domain
 - p
  - example.html
 - other-folder
  - next-folder-again
   - Anda disini

Jadi, metode path akan dimulai dari domain, kemudian dilanjutkan ke p dan example.html

<a href="/p/example.html">On Same Web</a>

3. Relative Current Folder

Ditujukan untuk halaman atau file yang berada dalam satu folder yang sama. Contoh, kita punya about.html pada folder p. Maka strukturnya seharusnya.

- domain
 - folder1
  - folder1_folder
   - about.html
  - Anda disini
<a href="folder1_folder/about.html">On Same Folder</a>

4. One Level Path

Bagian ini untuk menunjukkan halaman yang berada satu level diatas halaman link kita. Contoh, kita punya halaman contact.html yang posisinya berada dalam folder p yang path nya berada satu level diatas kita sekarang. Maka strukturnya, harusnya sebagai berikut

- domain
 - folder1
  - folder1_folder
   - contact.html
   - folder1_foldder2
    - Anda disini
<a href="../folder1_folder/contact.html">One Level</a>

Note: Domain, folder, dan file dalam perumpaan diatas saya harap anda membuatnya terlebih dahulu agar tidak ada kesalahan saat percobaan.

Kesimpulan

Keberadaan link begitu dominan dalam web, disamping pembuatannya yang begitu mudah. Tedapat juga beberapa atribut yang seharusnya terdapat pada link, sepeti href dan target. Sedangkan target puya beberapa point nilai pula. Nah, pemaksimalan link link saat web online bisa juga mendongkrap popularitas web kita.

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com