Link sering dijumpai di hampir setiap halaman web. Link memperbolehkan
users untuk meng-kliknya dari halaman ke halaman.
HTML Links-Hyperlinks
HTML links adalah hyperlinks
Sebuah hyperlink adalah text atau gambar yang dapat kamu
klik, dan membawamu ke dokumen lain.
HTML Links-Syntax
Di dalam HTML, links didefinisikan dengan tag <a>:
<a href=”url”>link text</a>
Contoh:
Atribut href tersebut membawamu ke alamat (http://www.w3schools.com/html/)
Link text merupakan bagian yang tampak.
Klik link text, kemudian kamu akan menuju alamat yang dituju
link tersebut.
Link text tidak harus teks, bisa juga menggunakan HTML
image, atau elemen HTML lainnya.
Local Links
Contoh tadi menggunakan URL absolut (alamat web full)
Local link (link ke website yang sama) dituliskan dengan URL
relatif (tanpa http://www....).
Contoh:
HTML Links-Warna dan Icon
Ketika kamu memindahkan kursor ke sebuah link, dua hal
biasanya terjadi:
- Tanda panah mouse akan berubah menjadi tangan kecil
- Warna link dari elemen link akan berubah
Dan link akan muncul seperti ini di semua browser:
- Link yang belum dikunjugi berwarna biru dan bergaris bawah
- Link yang telah dikunjungi bergaris bawah dan berwarna ungu
- Link yang aktif akan bergaris bawah dan berwarna merah
Kamu dapat menggantinya dengan kode berikut:
<!DOCTYPE
html>
<html>
<head>
<style>
a:link {
color:#000000;
background-color:transparent;
text-decoration:none;
}
a:visited {
color:#000000;
background-color:transparent;
text-decoration:none;
}
a:hover {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
}
a:active {
color:#ff0000;
background-color:transparent;
text-decoration:underline;
}
</style>
</head>
<body>
<p>You
can change the default colors of links</p>
<a
href="html_images.asp" target="_blank">HTML
Images</a>
</body>
</html>
Target Attribute
Atribut target menetapkan dimana tempat membuka dokumen.
Contoh berikut ini akan membuka link dokumen di jendela
browser baru atau di tab baru:
Target
|
Deskripsi
|
_blank
|
Membuka dokumen link di jendela atau tab baru
|
_self
|
Membuka link di jendela yang sama
|
_parent
|
Membuka link di parent frame
|
_top
|
Membuka links secara penuh
|
framename
|
Membuka dokumen di frame yang telah diberi nama
|
Contoh:
Gambar sebagai Link
Berikut ini cara menggunakan gambar sebagai link
Border:0 ditambahkan untuk mencegah IE9 menunjukkan border
di sekitar gambar.
Chapter Summary
Gunakan <a> untuk menetapkan link
Gunakan atribut href untuk menentukan alamat link
Gunakan atribut target untuk menentukan dimana akan membuka
link dokumen
Gunakan elemen HTML <img> (disamping <a>) untuk
menggunakan gambar sebagai link
Gunakan atribut id (id=”value”) untuk menampilkan bookmark
pada halaman
Gunakan atribut href (href=”#value”) untuk memberi alamat
bookmark
Sumber: w3schools.com
0 komentar:
Posting Komentar