Hyperlink Text adalah suatu metode yang digunakan dalam HTML untuk membuat hubungan antar halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link adalah untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi atau informasi yang tersimpan dalam situs web bersangkutan.
Secara default (normal) link akan ditandai dengan teks berwarna biru yang memiliki garis bawah. Namun, kita dapat mengubah warna dan gaya link sesuai dengan kebutuhan dan keinginan kita melalui pembuatan kode CSS (Cascading Style Sheets) jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang menunjuk.
A. Mengenal Tag <a> (anchor)
Untuk membuat 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 adalah sebagai berikut :
<a href="DokumenLain">Teks Link</a>
Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau halaman mana yang akan dipanggil saat 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 hasilnya adalah sebagai berikut :
Mikirbae
Hubungi Kami
Privacy Policy
Pada contoh diatas adat tiga buah link dengan teks : Mikirbae, Hubungi kami, dan Privacy Policy. Ketika pengunjung melakukan 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 pemberian nama dokumen web, agar link dapat berfungsi dengan baik antara lain penamaan file dengan huruf kecil semua dan jangan ada spasi serta hindari non-karakter alphabet.
B. Jenis – Jenis Link dalam HTML
HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak pada nilai atribut HREF-nya saja.
1. Link Absolut
Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi dari situs web yang kita buat adalah pemrograman HTML, maka kita dapat membuat link ke situs web lain yang memiliki tema yang sama atau relevan.
Tujuannya adalah agar pengunjung bisa memperoleh informasi lebih tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita. Contoh : <a href=http://www.w3.org/>W3</a> Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web http://www.w3.org/.
2. Link Relatif
Link Relatif adalah 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 contoh kode 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 karena server web akan mencari file kontak.html dan sahara.jpg di computer yang sama. jika halaman utama dari situs web yang akan kita buat adalah 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 :
Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya 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/AVvXsEgmQLqgdBsDuPKiSiqIKpLWAlhQK55SnJRrwfzxsiwLyHt_x3-zdqlAN4AHDV99TbZsovpxloJi1-nwGOQA2MlyEadzRV1c-2RZtylMhj0bBvTB8eQ4Gj7_1ePZyMhykaSjhQdic_NKjXRl/s1600/wrangler.jpg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6_GjviC9RUVzlr5FwwDy3vDa4Ghz-tR6jD1jfii7QDeGA1FiXCs6YkZt8SHmUdbkAV881aNDEpnP1HpiMTbigbpzg0ArWLxTWA2KIdFTQw9hj1v1SnimTheQVL2k8d4Wj6RzcbuF-rtcX/s1600/wrangler1.jpg" /></a>
Latihan Membuat Link Berupa gambar
Klik gambar dibawah ini untuk melihat informasi 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 contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detailsahara.html.
![]()
0 komentar:
Post a Comment
Mohon tidak memasukan link aktif.