Hyperlink HTML
Hyperlink digunakan untuk menghubungkan antar
dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a)
kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut.
Berikut kita akan membuat suatu Hyperlink ke suatu alamat url:
<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/" target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>
Preview
Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan
gambar tersebut berada pada folder yang sama dengan dokumen html anda
dan harus tahu nama dan ektensinya, kemudian ganti ke atribut yang
bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif,
maka :
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>
Img merupakan atribut untuk suatu image (gambar), border adalah garis
yang mengelilingi sisi image, width dan height merupakan lebar dan
tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar
tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar,
tambahkan dengan atribut align="…", left= kiri, center= tengah dan
right= kanan.
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>
Sekarang
coba geser mouse anda ke gambar di atas, jangan di-klik, perhatikan
akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini
disebut dengan screen tips, cara membuatnya adalah menambahkan title
pada tag anchor (a) sehingga menjadi:
<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>
Agar cepat mengakses internet kita boleh mengatur browser untuk tidak
menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan
teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif
teks maka hanya akan dilambangkan dengan lambang x.
<a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>
Dalam contoh ini src atau source yaitu contoh.jpg sengaja dihapus agar alt-nya ditampilkan, maka hasilnya adalah:
Baca juga Update dari
Hyperlink HTML ini di Tutorial HTML.
