HTML element tag <a> atau anchor adalah tag HTML yang digunakan untuk membuat suatu hyperlink. HTML element tag <a> biasanya digunakan di dalam proses perpindahan antar halaman. Tampilan tag <a> secara default dalam bentuk teks dengan keterangan halaman yang akan dijadikan sebagai tujuan. Namun penggunaan teks pada tag <a> sering ditiadakan dan digantikan dengan tampilan hyperlink dalam bentuk gambar yang lebih menarik.
Suatu data gambar (image) dapat dijadikan sebagai pengganti suatu link untuk menghubungkan satu halaman dengan halaman lainnya. Hal ini akan memudahkan pengguna dalam mengenali halaman tujuan jika dibandingkan dengan menggunakan link dalam bentuk teks keterangan.
Penerapan data gambar (image) sebagai pengganti teks dilakukan dengan menyisipkan HTML element tag <img> (image) di dalam element tag <a>. Namun harus dipastikan terlebih dahulu lokasi file gambar tersebut agar berada di dalam folder yang sama dengan halaman aktif HTML-nya. Anda dapat menggunakan URL absolute, jika file gambar berada pada folder yang berbeda. Nama file dan ekstensi file gambar tersebut dapat ditempatkan di dalam atribut SRC.
Contoh Kode Sederhana
Contoh kode sederhana link dengan menggunakan gambar untuk menuju tautan halaman google.com :
HTML
1
2
3
<a href="http://www.google.com" title="Menuju halaman google">
<img src="google_logo.png" alt="google logo" width="80" border=0>
</a>
Akan menghasilkan tampilan :
HTML element tag <a> memiliki berbagai atribut khusus yang berfungsi untuk mengatur tampilan, menentukan tujuan tautan dan perilaku halaman saat muncul pada browser. Silahkan kunjungi tautan tag <a> antar halaman untuk melihat atribut khusus pada element tag <a>.
Berikut contoh penggunaan hyperlink element tag <a> dengan gambar :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag A</title>
<style>
img{vertical-align:text-bottom;}
</style>
</head>
<body>
<h1>Latihan Membuat HyperLink Dengan Gambar (IMG)</h1>
<p> Menuju halaman google.com
<a href="http://www.google.com" title="Menuju halaman google">
<img src="google_logo.png" alt="google logo" width="80" border=0>
</a>
</p>
<p>Menuju halaman yahoo.com
<a href="http://www.yahoo.com" title="Menuju halaman yahoo">
<img src="yahoo.png" alt="yahoo logo" width="80" border=0>
</a>
</p>
<p>Menuju halaman facebook.com
<a href="http://www.facebook.com" title="Menuju halaman facebook">
<img src="facebook_logo.png" alt="facebook logo" width="80" border=0>
</a>
</p>
</body>
</html>
Jika dijalankan akan menghasilkan tampilan :
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
Previous Page
