Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <a>: Membuat Link Dengan Gambar

previous Previous Page

Tag <a> atau anchor digunakan untuk membuat suatu hyperlink. Di dalam tag <a> dapat disisipi elemen <img> atau gambar untuk memudahkan pengguna dalam memahami link lebih cepat dari pada menggunakan teks sebagai link antar halaman.

Sebuah gambar atau image dapat difungsikan menjadi sebuah link yang menghubungkan halaman satu dengan halaman lainnya. Penggunaan sebuah link dengan gambar akan memudahkan pengguna mengenali halaman yang akan dituju dari pada menggunakan teks keterangan. Gambar tersebut merupakan pengganti teks pada link yang akan dituju.

Untuk membuat link dengan gambar, anda harus memastikan bahwa gambar yang diberikan link berada pada folder yang sama dengan halaman HTML. Anda dapat menggunakan url absolute, jika gambar tersebut berada di folder yang berbeda. Nama file dan ekstensi file gambar tersebut ditempatkan di dalam atribut src.

Contoh Kode Sederhana

Contoh kode sederhana link menggunakan gambar untuk menuju tautan google.com :

1.  <a href="http://www.google.com" title="Menuju halaman google">
2.     <img src="google_logo.png" alt="google logo" width="80" border=0>
3.  </a>

Akan menghasilkan tampilan :

google logo

Tag <a> memiliki berbagai atribut khusus yang dapat digunakan sesuai dengan peruntukkannya yang dapat dilihat pada tag <a> antar halaman.

Berikut ini contoh penggunaan tag <a> dengan gambar pada halaman HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag a dengan menyisipkan gambar</title>
6.     <style>
7.     img{vertical-align:text-bottom;}
8.     </style>
9.  </head>
10. <body>
11.    <h1>Latihan membuat link dengan gambar</h1>
12.    <p> Menuju halaman google.com
13.    <a href="http://www.google.com" title="Menuju halaman google">
14.      <img src="google_logo.png" alt="google logo" width="80" border=0>
15.    </a>
16.    </p>
17.    <p>Menuju halaman yandex.com
18.      <a href="http://www.yandex.com" title="Menuju halaman yandex">
19.         <img src="yandex_logo.png" alt="yandex logo" width="80" border=0>
20.      </a>
21.    </p>
22.    <p>Menuju halaman youtube.com
23.      <a href="http://www.youtube.com" title="Menuju halaman youtube">
24.         <img src="youtube_logo.jpg" alt="youtube logo" width="80" border=0>
25.      </a>
26.    </p>
27. </body>
28. </html>
29. 

Jika dijalankan akan menghasilnya tampilan seperti berikut :

tag a link dengan gambar html

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML