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 bab 2 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
Bikin Link HTML
Sintaks Link:
1
|
<a href="/caramembuatwebsite/url">Teks
Link</a>
|
Perhatikan, tag
HTML 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
1
2
|
<a href="http://khiiedtachi-situsku.blogspot.com">Pengen
belajar bikin web
sambil
Praktek. Klik di sini aja!</a>
|
Kode tersebut akan ditampilkan
seperti ini. Sok atuh dicoba klik biar kerasa.
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 site kursus-online.com pada sebuah jendela baru:
1
2
3
|
<a href="http://khiiedtachi-situsku.blogspot.com"
target="_blank">
Pengen belajar bikin web sambil Praktek. Klik di sini aja!</a>
|
Attribute
name
Saat kita menggunakan atribut name,
maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam
sebuah halaman HTML.
Nama anchor tidak akan nampak di
mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor:
1
|
<a name="label">Apapun</a>
|
Nah, link yang menuju ke halaman itu
bikinnya gini:
1
|
<a href="#label">Apapun</a>
|
Perhatikan tanda # yang
mendefinisikan nama anchor
Contoh:
Sebuah anchor dalam dokumen HTML:
1
|
<a name="top">Ini bagian
paling atas</a>
|
Sebuah link yang merujuk ke bagian
paling atas dalam dokumen yang sama:
1
|
<a href="#top">Kembali
ke atas</a>
|
Sebuah link yang menuju ke sebuah
anchor di halaman web lain:
1
2
|
<a href="http://khiiedtachi-situsku.blogspot.com">
Kembali
ke halaman utama paling atas</a>
|
Nah, kalau mau lihat bagaimana
sebuah link anchor bekerja, klik Kembali ke atas ini 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://khiiedtachi-situsku.blogspot.com/mambo”,
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://khiiedtachi-situsku.blogspot.com/mambo”
Nah, dengan menambahkan garis miring
di akhir sub folder, 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.
Nah, itu adalah materi belajar HTML mengenai link.
Nah, itu adalah materi belajar HTML mengenai link.
0 Komentar untuk "Belajar HTML "