Membuat HTML Link pada Gambar

Masih dalam suasana belajar HTML, kali ini Mr.Gng akan sedikit sharing cara membuat gambar menjadi link di HTML. Kode HTML Link selain dalam bentuk teks, ternyata link juga bisa dalam bentuk gambar yang sering digunakan sebagai iklan sebuah perusahaan atau produk. Link gambar dalam html yang kita harus tahu terlebih dahulu adalah kode html untuk menyisipkan gambar dalam HTML pada halaman web html. Tapi di sini kita akan belajar beberapa atribut html dalam membuat link pada gambar.

Oke kita lihat dulu kode sederhana membuat gambar menjadi link dalam html berikut :

<html>
<body>
<a href=”http://seputarti.com”><img src=”http://seputarti.com/logo.png”></a>
<h2>
Belajar membuat html link  gambar.
</h2>
</body>
</html>

Nah bisa kita lihat, tag html <img src> dimana terletak diantara tag <a> atau hiperlink. Jadi intinya kita membuat kode html menyisipkan gambar yang di bungkus dengan tag <a> hiperlink. ketika gambar di klik maka akan menuju ke link seputarti.com. Nah, kita harus memastikan alamat gambar secara benar. Untuk  format gambar sebagai link dalam html bisa .jpg, .gif, .bmp, . tif , .png . . , Dan lainnya .  Dan berikut beberapa atribut tambahan dalam membuat gambar menjadi link di html dan pengaturannya :

<html>
<body>
<a href=”http://seputarti.com/” target=”_blank”>
<img src =”http://seputarti.com/logo.png” height = “40” width =”100″ border = “2” style=”border-style:dotted; float:right;” >
</a>
<h2>Belajar html link gambar</h2>
</body>
</html>

Hasilnya:

membuat link gambar di html

Nah lhoh…banyak banget gan atributnya gan? he… tenang aja ini mudah dipahami gan. Berikut penjelasan atribut tag <img> di html untuk membuat link gambar dalam HTML:

  • target=”_blank” yaitu jika link gambar HTML kita klik maka akan membuka jendela baru sesuai tujuan alamat pada link gambar tersebut yaitu seputarti.com. jika tidak diberikan atribut target=”” akan membuka alamat link pada halaman yang sama.
  • height=”90″ yaitu memberi nilai untuk ukuran tinggi gambar yang diberikan link tersebut sebesar 90pixel.
  • width=”35″ yaitu memberikan nilai sebesar 35pixel pada gambar link.
  • border=”2″ yaitu memberikan garis tepi pada link gambar dengan tebal 2. semakin besar nilai semakin tebal garis tepinya.
  • style = “border -style : double; float:right;” yaitu menyisipkan kode css dalam html dengan atribut border-style sebagai bentuk/style garis tepi dengan jenis yang berbeda-beda(double,ridge,dotted,dashed,dll) dan untuk atribut float yaitu untuk menentukan letak gambar (left,right,top,bottom)

Oke, itu tadi sharing saya cara HTML link pada gambar. Intinya membuat gambar menjadi link pada halaman HTML. Mudah bukan, semoga bermanfaat.

About Ganang Julianto 252 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

12 Comments

Leave a Reply

Your email address will not be published.


*