Cara Menyajikan Dan Jenis Jenis Hyperlink Di Web

Hyperlink Text yaitu suatu metode yang dipakai dalam HTML untuk menciptakan korelasi antar halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di internet hampir sanggup dipastikan mempunyai link. Secara umum, fungsi link yaitu 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 instruksi CSS (Cascading Style Sheets) bila kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan bermetamorfosis 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 yaitu 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 karenanya yaitu sebagai berikut :
Mikirbae
Hubungi Kami
Privacy Policy

Pada teladan diatas susila 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 sumbangan nama dokumen web, semoga link sanggup berfungsi dengan baik antara lain penamaan file dengan aksara 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 yaitu link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, bila tema atau isi dari situs web yang kita buat yaitu pemrograman HTML, maka kita sanggup menciptakan link ke situs web lain yang mempunyai tema yang sama atau relevan. 

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

2. Link Relatif

Link Relatif yaitu 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 teladan instruksi 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 server web akan mencari file kontak.html dan sahara.jpg di computer yang sama. bila halaman utama dari situs web yang akan kita buat yaitu 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 sesungguhnya 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/AVvXsEjbiqbiCynHzAGlonCugep_Wi8pVraPaAo45XUvmbXNa04kvM4GITq-dSK-AC40jH8xRaS8BXYqvuMa6OpeVzt7pxJvkt7xdfGMERloryoeQGalC2qP5dPtnCXp6rZ1rKknC2ozcUBzcDD8/s1600/wrangler.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjpIXHO2Bn0c2iFo2XD_tdOuPK5AO5AuYsow6THbCCpGvTvFElRQAFQbR7tdeq7pWutB-5yQhWJU61sY7ac14NNsSGtidEx7_sEyW3E1Qok4NNmLduyzegA4Az5f2KI8sXhFBde_nYZzB/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 teladan di atas kita menyebabkan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detailsahara.html.