Halaman-halaman web bisa saling terhubung berkat link (url), disebut tag <a> dalam HTML. Tanpa link, halaman web seperti berdiri sendiri. Google bisa mengindeks halaman-halaman web sehingga bisa memberikan informasi terbaik dan beragam berkat link. Jika tidak ada tag <a>, bisa jadi Google tidak akan pernah berfungsi lagi sebagai mesin pencari.
Tag <a> mempunyai beberapa atribut, yang sering digunakan yaitu href, target, class, title dan penggunaan link untuk kirim email. Atribut href harus ada dalam setiap link, sedangkan target, class, dan title hanya atribut tambahan, boleh dipakai atau jika ditinggalkan juga tidak mengapa. Perhatikan contoh berikut:
<a href="home.html" target="_blank" class="navlink" title="Home">Menu ke Home</a>
Kode di atas memiliki arti bahwa ketika di klik Menu ke Home, maka akan menuju ke home.html dengan jendela baru (tab baru), tag <a> menggunakan css dengan nama class navlink, kemudian jika diarahkan pointer ke Menu ke Home, maka akan muncul tooltip "Home". Jika dilihat dari alurnya, maka kita pertama membuat file index.html, dilanjutkan dengan file home.html. Dari index.html di buat link ke home.html.
index.html
<!doctype html>
<html>
<head>
<title>File home.html</title>
<style type="text/css">
.navlink:link,.navlink:visited{
color:#078090;}
.navlink:hover{color:#A7440E;}
</style>
</head>
<body>
<h3>Halo, ini adalah halaman indeks html</h3>
<a href="home.html" target="_blank" class="navlink" title="Home">Menu ke Home</a>
</body>
</html>
home.html
<!doctype html>
<html>
<head>
<title>Ini file home.html</title>
</head>
<body>
<h1>Halo, saya file home.html, di-link-kan dari index.html</h1>
<a href="index.html">Kembali ke index.html</a>
</body>
</html>
Catatan: Selain merujuk ke halaman lokal (satu foler) misalnya contoh di atas ke home.html, link juga bisa merujuk ke halaman internet. Misalnya; <a href="http://tipspengetahuan.com">Link ke Tipspengetahuan.com</a>. Khusus ke internet, tentu membutuhkan koneksi jika ingin menguji cobanya.
***
Penggunaan link untuk kirim email
Tag <a> juga bisa digunakan untuk mengirimkan email dengan perintah mailto. Jika Anda menggunakan sistem operasi Windows, maka default aplikasi untuk pengirim email tersebut yaitu Microsoft Outlook. Jadi jangan heran jika diklik "Kirim Email", maka aplikasi Outlook otomatis akan terbuka. Penulisan kode HTML-nya seperti berikut:
email.html
<!doctype html>
<html>
<head>
<title>Kirim Email</title>
</head>
<body>
<a href="mailto:tipsdanpengetahuan@gmail.com">Kirim email ke tipspengetahuan.com</a>
</body>
</html>
Link dengan ikon (gambar)
Anda juga bisa menjadikan gambar sebagai link (url), artinya jika diklik gambar tersebut maka akan menuju halaman lain. Formatnya sama, masih tetap menggunakan tag <a>, tetapi kini gambar tersebut menjadi objek link, yang perlu Anda persiapkan hanya sebuah ikon (gambar) bernama home.png, dan letakkan tepat satu folder dengan index.html. Tinggal modifikasi saja dari contoh di atas, yaitu file index.html, pada bagian tag <body> menjadi seperti berikut:
<body>
<h3>Halo, ini adalah halaman indeks html</h3>
<a href="home.html" target="_blank" class="navlink" title="Home">
<img src="home.png" alt="Logo home" />
</a>
</body>
^Baca juga: Membuat informasi umum web dengan tag <head>.
This comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteterima kasih ilmu Belajar HTML
ReplyDelete