LINK HTML
1. Menciptakan LINK
HTML menyediakan tag <a> (atau disebut anchor) untuk mendefinisikan sebuah link. Dalam implementasinya, pembuatan link memerlukan atribut href yang menyatakan lokasi tujuan. Lokasi ini bisa berupa alamat lengkap (absolut) atau singkat (relatif).
Contoh:
<!--link1.html-->
<html>
<head>
<title>demo link</title>
</head>
<body>
<a href="link2.html">Klik di sini</a>
</body>
</html>
Langkah selanjutnya, buat halaman kedua (link2.html) yang nantinya akan dikaitkan.
<!--link2.html-->
<html>
<head>
<title>demo link</title>
</head>
<body>
Untuk kembali ke halaman pertama
<a href="link1.html">Klik di sini</a>
</body>
</html>
2. Atribut LINK
Elemen anchor menyediakan sejumlah atribut guna mendukung fungsionalitasnya. Dua di antaranya yang kerap digunakan adalah target dan title. Atribut target digunakan untuk mengatur apakah link akan di buka di window yang sama (default) atau di window (atau tab) baru. Di sisi lain, title berfungsi untuk menampilkan teks manakala kursor mouse berada di atas link.
Contoh:
<!--atributlink.html-->
<html>
<head>
<title>demo atribut link</title>
</head>
<body>
<a href="link2.html" target="_blank" title="Title link">Klik di sini</a>
</body>
</html>
3. LINK Internal
Elemen anchor juga memungkinkan kita untuk melakukan navigasi di dalam satu dokumen (layaknya bookmark). Untuk mengimplementasikan hal ini, kita memerlukan atribut id.
Langkah pertama untuk mengimplementasikan link internal adalah dengan mendefinisikan lokasi di atribut href yang diberi prefiks #. Langkah berikutnya adalah menetapkan nilai atribut id di blok yang akan dituju, di mana nilainya sama dengan href namun tanpa prefiks #. Untuk lebih jelasnya, perhatikan dokumen berikut:
Contoh:
<!--link internal.html-->
<html>
<head>
<title>demo link internal</title>
</head>
<body>
Menu
<ul>
<li><a href="#pendahuluan">Pendahuluan</a></li>
<li><a href="#pembahasan">Pembahasan</a></li>
<li><a href="#kesimpulan">Kesimpulan</a></li>
</ul>
<h3 id="pendahuluan">Pendahuluan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<h3 id="pembahasan">Pembahasan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
<h3 id="kesimpulan">Kesimpulan</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</body>
</html>
4. LINK Email
Link tak hanya sebatas pada dokumen, tetapi juga bisa dimanfaatkan untuk menunjuk ke suatu alamat email. Adapun dalam implementasinya, kita tinggal mengubah alamat URL dengan alamat email—yang terlebih dahulu diberi prefiks mailto.
Contoh:
<!--linkemail.html-->
<html>
<head>
<title>demo link email</title>
</head>
<body>
<a href="mailto:ainun_1203@yahoo.com" > ainun </a>
</body>
</html>
5 LINK Gambar
Link tidak hanya direpresentasikan dalam bentuk teks, tetapi juga bisa berupa gambar. Langkah pembuatan link gambar pun sangat sederhana, cukup mengapit tag <img> di antara tag <a>.
Contoh:
<!--linkgambar.html-->
<html>
<head>
<title>demo link gambar</title>
</head>
<body>
<a href="http://google.co.id" title="Search with Google"><img src="google.jpg" border="0"/>
</a>
</body>
</html>
No comments:
Post a Comment