Anatomi hyperlink
Salah satu kelebihan dokumen HTML
adalah memiliki kemampuan untuk saling terkait dengan dokumen lain. Link
(sebutan singkat dari 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.
Dalam keadaan default (normal), suatu link
akan ditandari dengan teks berwarna biru yang memiliki garis bawah. Meskipun
demikian, kita dapat mengubah warna dan gaya link sesuai dengan kebutuhan dan
keinginan kita melalui pembuatan kode CSS.jika kita mengarahkan kursor ke suatu
link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan
satu jari yang sedang menunjuk, seperti yang ditunjukkan oleh gambar di bawah
ini
.
Konsep atau cara kerja link dalam HTML
dapat diilustrasikan melalui gambar berikut :
Gambar 15.1. Konsep atau cara kerja
link dalam HTML
Pada gambar diatas, masing-masing
halaman memiliki keterkaitan satu sama lain. Artinya, masing-masing halaman
tersebut dapat dipanggil atau ditampilkan dari halaman manapun. Hal ini bisa
terjadi jika setiap halaman di atas memiliki link.
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 :
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=”index.html”>Home</a><br />
<a href=”about.html”>Tentang
Kami</a><br />
<a
href=”contact.html”>Kontak</a>
Pada contoh diatas kita membuat tiga
buah link dengan teks : Home, Tentang kami, dan kontak.
Ketika pengunjung melakukan klik terhadap link pertama (home), web
browser akan menampilkan dokumen yang disimpan dalam file index.html. Begitu
juga dengan link kedua (Tentang Kami) dan ketiga (Kontak), setiap
di klik akan menjadikan web browser menampilkan dokumen yang terdapat pada file
about.html
dan contact.html.
Berikut ini ada beberapa hal yang
perlu diperhatikan dalam pemberian nama dokumen web, agar link dapat berfungsi
dengan baik :
·
Penamaan file dengan huruf kecil semua
·
Jangan ada spasi serta hindari non-karakter alphabet
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
ditulis lengkap seperti berikut :
<a href=http://www.situskita.com/kontak.html>Kontak</a>
<a href=http://www.situskita.com/images/jeep/sahara.jpg> Lihat Foto Jeep Wrangler Sahara</a>
|
Kita
tidak perlu menulis alamat secara lengkap karena server web akan mencari file
kantak.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 :
Link ke Bagian Dokumen tertentu
Materi ini dibahas pada Artikel Membuat Link ke Bagian Dokumen HTML
Menjadikan Gambar sebagai Link
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>
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 detail-sahara.html.
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon