Belajar HTML (Bagian Keempat)

Lanjutan dari Belajar HTML (Bagian Ketiga)

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.

Bikin Link HTML
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. Kita 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 web site SMK Muhammadiyah 11 Sibuluan Tapanuli Tengah, yaitu smkm11.disdiktapteng.com

<a href="http://smkm11.disdiktapteng.com/">Web SMK Muhammadiyah 11 Sibuluan Tapanuli Tengah. Klik di sini aja!</a>

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 SMK Muhammadiyah 11 Sibuluan Tapanuli Tengah di jendela yang sama, kode ini akan membuka web site SMK Muhammadiyah 11 Sibuluan Tapanuli Tengah pada sebuah jendela baru:

<a href="http://smkm11.disdiktapteng.com/" target="_blank"> Web SMK Muhammadiyah 11 Sibuluan Tapanuli Tengah. Klik di sini aja!</a>

Bedakan antara atribut href dan atribut target dengan mengklik link keduanya.

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 saja. Cara membuat sebuah anchor:

<a name="label">Apapun</a>

Nah, link yang menuju ke halaman itu bikinnya gini :

<a href="#label">Apapun</a>

Perhatikan tanda # yang mendefinisikan nama anchor

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://smkm11.disdiktapteng.com#top">Kembali ke halaman utama paling atas</a>

Catatan penting dan tips yang pastinya akan berguna buat kita
Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita. Jika link kita bentuknya seperti ini:
href="http://anebego.blogspot.com/2010/10/belajar-html-bagian-keempat.html", maka kita 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://anebego.blogspot.com/2010/10/belajar-html-bagian-keempat.html". Nah, dengan menambahkan garis miring di akhir sub folde, kita sudah menghemat resource di server. Kita 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.


Bersambung