|
Sebuah link adalah
sebuah alamat yang merujuk ke dokumen atau alamat lainnya di Internet. Menurut
saya sebenarnya konsep link inilah yang akhirnya benar-benar membuat web menjadi
sangat bermanfaat dan akhirnya menjadi sangat besar seperti sekarang ini. Orang
sangat mudah merujuk ke referensi lain yang semuanya tersedia online.
Hyperlinks, Anchors, dan Links
Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber
informasi lain di Internet. Hyperlink biasanya merujuk ke sebuah halaman HTML,
sebuah gambar, file suara, movie, dll.
Sedangkan anchor (bahasa
Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan
hyperlink dalam sebuah dokumen.
Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di
dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab2 tadi dengan
bantuan anchor.
Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.
Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a>
merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut
merujuk ke sebuah alamat di dalam dokumen.
Sintaks Link:
| <a href="url">Teks Link</a> |
Tag pembuka berisi atribut link tersebut.
Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke
pengunjung
Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari
sebuah gambar atau elemen HTML lainnya.
Atribut href
Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang
kita buat.
Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web site
yang saya kelola juga yaitu wildan.biz :
<a href="http://www.wildan.biz/">Pengen belajar bikin web sambil
Praktek. Klik di sini aja!</a> |
Hasil code diatas adalah seperti ini
Pengen belajar bikin web sambil
Praktek. Klik di sini aja!
Atribut target
Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju
itu akan dibuka di mana. Kita bisa membukanya di halaman utama ini langsung atau
membukanya di halaman baru saat seorang pengunjung mengklik link yang kita
sediakan.
Berbeda dengan kode sebelumnya yang membuka web site kursus-online.com di
jendela yang sama, kode ini akan membuka web wildan.biz pada sebuah jendela baru
:
<a target="_blank" href="http://www.wildan.biz/">
Pengen belajar bikin web sambil Praktek. Klik di sini aja!</a>
|
Hasil code diatas akan membuka
jendela baru seperti ini
Pengen belajar bikin web sambil
Praktek. Klik di sini aja!
Attribute name
Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah
nama anchor yang berada di dalam sebuah halan HTML.
Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan
pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor:
|
<a name="label">Apapun</a> |
Nah, link yang menuju ke halaman itu
bikinnya gini:
|
<a href="#label">Apapun</a> |
Contoh:
Sebuah anchor dalam dokumen HTML:
|
<a name="top">Ini bagian paling atas</a> |
Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:
|
<a href="#top"> Kembali ke atas</a> |
Sebuah link yang menuju ke sebuah anchor di halaman web lain:
|
<a href="http://www.wildan.biz#top">
Kembali ke halaman utama paling atas</a> |
Nah, kalau mau lihat bagaimana sebuah link anchor bekerja,
klik di sini
untuk menuju ke bagian paling atas dari halaman ini.
Catatan penting dan tips yang pastinya akan berguna buat kamu
Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.
Jika link kita bentuknya seperti ini:
href="http://www.ngelitik.com/play", maka kamu akan membuat 2 buah
permintaan http ke server, karena server akan menambahkan garis miring dan
membuat alamat yang kita minta tadi menjadi seperti ini: href="http://www.ngelitik.com/play/"
Nah, dengan menambahkan garis miring di akhir sub folde, kita sudah menghemat
resource di server.
Kamu bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen
yang panjang.
Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara
otomatis akan menuju ke bagian paling atas dari dokumen. Tanpa error.
|
