Link bukan hal yang aneh untuk semua website.Link dalam html merupaka hyperlink, yaitu sebuah teks atau gambar yang dapat diklik untuk berpindah ke halaman lain.
Link dalam html menggunakan tag <a>, sintaks:
<a href="url">teks link</a>
Contoh:
<a href="http://www.cctvarea.com/">Visit
CCTV Area</a>
Atribut href berfungsi untuk menyimpan URL tujuan link (http://www.cctvarea.com/)
Jika kita menggunakan source local, atau dari server sendiri kita dapat langsung menuliskan nama file nya.
Contoh:
<a href="index.html">Home</a>
Pada sub folder:
<a href="content/kontak.html">Contact Us</a>
Pada folder diluar/diatas halaman web yang bersangkutan:
<a href="../index.html">Home</a>
Url tidak akan terlihat pada halaman web, yang akan tampil adalah bagian "teks link" (Visit CCTV Area)
Link Style
Warna teks link biasanya berbeda dari warna teks biasa, default warna tanpa style khusus adalah biru. Warna link yang belum dikunjungi dan sudah dikunjungi juga umumnya berbeda. Warna lain yang dapat berbeda adalah saat mouse pointer mengarah pada link tersebut dan jika link yang bersangkutan adalah halaman web aktif.Kita dapat mengubah warna-warna dari default dengan menggunakan style, seperti contoh berikut:
<html>
<head>
<title>Hyperlink</title>
<style>
a:link {color:#FF0000; background-color:transparent; text-decoration:none}
a:visited {color:#FF9900; background-color:transparent; text-decoration:none}
a:hover {color:#00CC00; background-color:transparent; text-decoration:underline}
a:active {color:#9900CC; background-color:transparent; text-decoration:underline}
</style>
</head>
<body>
<p>
<a href="http://www.cctvarea.com/index.htm">Link: Belum dikunjungi</a>
<br/>
<a href="http://www.cctvarea.com/">Visited: Sudah dikunjungi</a>
<br/>
<a href="http://www.cctvarea.com/contact.htm">Hover: Diarahkan mouse pointer</a>
<br/>
<a href="index.html">Active: jika diklik</a>
</p>
</body>
</html>
<head>
<title>Hyperlink</title>
<style>
a:link {color:#FF0000; background-color:transparent; text-decoration:none}
a:visited {color:#FF9900; background-color:transparent; text-decoration:none}
a:hover {color:#00CC00; background-color:transparent; text-decoration:underline}
a:active {color:#9900CC; background-color:transparent; text-decoration:underline}
</style>
</head>
<body>
<p>
<a href="http://www.cctvarea.com/index.htm">Link: Belum dikunjungi</a>
<br/>
<a href="http://www.cctvarea.com/">Visited: Sudah dikunjungi</a>
<br/>
<a href="http://www.cctvarea.com/contact.htm">Hover: Diarahkan mouse pointer</a>
<br/>
<a href="index.html">Active: jika diklik</a>
</p>
</body>
</html>
Atribut ini menentukan dimana halaman link akan dibuka. Nilai atribut target yang dapat digunakan yaitu:
_blank :membuka link pada window/tab baru.
_self :membuka link di tempat dia diklik (nilai default)
_parent :membuka link pada frame di atas frame tempat link tersebut berada.
_top :membuka link di window sepenuhnya
framename:membuka link di frame tertentu berdasarkan nama frame
Link Atribut ID
Kita juga dapat menggunakan tag <a> untuk mengarah ke elemen dengan id tertentu pada suatu halaman web. Ini biasa nya digunakan pada halaman web yang isinya banyak dan panjang. Kita bisa membuat semacam daftar isi untuk melihat sub judul tertentu.
Sebagai contoh kita mempunyai sub judul "link style":
<h2 id="sub1">Link Style</h2>
Link untuk mengarah ke sub judul tersebut:
<a href="#sub1">Sub Judul ke-2</a>
Kita juga dapat mengarahkan ke id tertentu di halaman berbeda dengan menulis lengkap url nya:
<a href="http://rani-irsan.blogspot.com/2015/03/html-link.html#sub1">Sub Judul ke-2</a>
Berikut ini contoh link id yang dapat dicoba pada halaman web ini:
Sub Judul ke-2
Click here if you like this article.
0 Comments