Cara Menyajikan Dan Jenis Jenis Hyperlink Di Web

Hyperlink Text yakni suatu metode yang dipakai dalam HTML untuk menciptakan hubungan antar halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di internet hampir sanggup dipastikan mempunyai link. Secara umum, fungsi link yakni untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi atau isu yang tersimpan dalam situs web bersangkutan.

Secara default (normal) link akan ditandai dengan teks berwarna biru yang mempunyai garis bawah. Namun, kita sanggup mengubah warna dan gaya link sesuai dengan kebutuhan dan impian kita melalui pembuatan aba-aba CSS (Cascading Style Sheets) kalau kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan menjelma gambar tangan dengan satu jari yang sedang menunjuk.

A. Mengenal Tag <a> (anchor)

Untuk menciptakan suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML yakni sebagai berikut :

<a href="DokumenLain">Teks Link</a>

Atribut HREF dalam tag <a> berfungsi untuk memilih dokumen atau halaman mana yang akan dipanggil ketika link tersebut di klik atau dipilih oleh pengunjung web. Contoh :

<a href=”http://www.mikirbae.com”>Mikirbae</a><br />
<a href=”http://www.mikirbae.com/p/blog-page.html”>Hubungi Kami</a><br />
<a href=”http://www.mikirbae.com/p/privacy-policy.html”>Privacy Policy</a>

Maka balasannya yakni sebagai berikut :
Mikirbae
Hubungi Kami
Privacy Policy

Pada referensi diatas adab tiga buah link dengan teks : Mikirbae, Hubungi kami, dan Privacy Policy. Ketika pengunjung melaksanakan klik terhadap link pertama <a href="http://www.mikirbae.com">Mikirbae</a>, web browser akan menampilkan halaman awal blog ini. Begitu juga dengan link kedua (Hubungi Kami) dan ketiga (Privacy Policy),

Beberapa hal yang perlu diperhatikan dalam proteksi nama dokumen web, supaya link sanggup berfungsi dengan baik antara lain penamaan file dengan abjad kecil semua dan jangan ada spasi serta hindari non-karakter alphabet.

B. Jenis – Jenis Link dalam HTML

HTML membedakan ketiga jenis link diatas menurut lokasi atau alamat dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak pada nilai atribut HREF-nya saja.

1. Link Absolut

Link Absolut yakni link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, kalau tema atau isi dari situs web yang kita buat yakni pemrograman HTML, maka kita sanggup menciptakan link ke situs web lain yang mempunyai tema yang sama atau relevan. 

Tujuannya yakni supaya pengunjung sanggup memperoleh isu lebih perihal tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita. Contoh : <a href=http://www.w3.org/>W3</a> Pada referensi diatas, tujuan link yang dibentuk akan mengarah ke situs web http://www.w3.org/.

2. Link Relatif

Link Relatif yakni link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya (jika ada). Perhatikan referensi aba-aba berikut :

<a href=”kontak.html”>Kontak</a>

<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler Sahara</a>

Tidak perlu menulis alamat secara lengkap alasannya yakni server web akan mencari file kontak.html dan sahara.jpg di computer yang sama. kalau halaman utama dari situs web yang akan kita buat yakni index. html, maka file kontak. html harus di tempatkan di dalam direktori yang sama dengan file index.html ; sedangkan sahara.jpg harus berada di dalam direktori images\jeep. Jika digambarkan, struktur di rektori dan file-nya akan tampak sebagai berikut :

3. Menjadikan Gambar sebagai Link

Selain link berupa teks, gambar juga sanggup dijadikan sebagai link. Konsepnya bekerjsama sama saja dengan link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai link dengan tag <img>. Link yang berupa teks: <a href=”dokumenlain”>teks link</a>

Contoh Link Gambar :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfRW55LKBugMBevN-wkpafngI588DIKVxg5djWRZuHYaqm2ZOyMQb-R873yGesNP9nUgEiOBGHL-b1t9986pkacKwbyRXrizAc1vlBY8BnBxMX_V1h_-rKsby7wAoJWJduDjJ3lbSE4AE/s1600/wrangler.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggcHlHEtyiDyLGquUD74V6x_5fSyQx1ScJHQafOowVhDmp-di_kIdrjHopI7fP1O_DMBouWSINrcfQikszpyu0Q3jCVqMX3J2xjNRn3P1ri17p5D9T1fzeesbFJzTL5gAQY4qivR6fbJOh/s1600/wrangler1.jpg" /></a>

Latihan Membuat Link Berupa gambar

Klik gambar dibawah ini untuk melihat isu detail:



Link yang berupa gambar: <a href=”dokumenlain”><img src=”NamaFileGambar” /></a> Contoh : <a href=”detail-sahara.html”><img src=”images/jeep/saharal.jpg” /></a>

Pada referensi di atas kita menyebabkan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detailsahara.html.