Kamis, 13 Maret 2014
Kamis, Maret 13, 2014

Membuat Hyperlink dengan gambar

Membuat Hyperlink dengan gambar 

Assalamualaikum wr wb, semangat pagi sahabat blogger. Kali ini admin ingin berbagi bagaimana cara membuat hyperlink karena hyperlink dalam suatu website merupakan komponen yang sangat penting di dalam sebuah blog atau website. Sebab dengan adanya link atau hyperlink, pengunjung sebuah blog dapat dengan mudah mengakses dan menjelajahi seluruh website dengan cepat.


Selain link yang menggunakan teks, link pun bisa menggunakan foto atau gambar yang membuat tampilannya menjadi lebih menarik dan efektif.

Berikut di bawah ini adalah cara penulisan atau pembuatan link dengan gambar yang menggunakan metode HTML:


Tag Link

<a href='url tujuan'>Teks atau Gambar</a>
  • <a> adalah tag HTML yang berfungsi untuk mendefinisikan sebuah link.
  • href adalah atribut (informasi tambahan) dari tag a untuk url/alamat yang akan dituju dari link.
  • Value dari href harus diberi tanda kutip.

contoh:
<a href='http://amikom.ac.id/'>STMIK AMIKOM Yogyakarta</a>

Hasil:


Tag Gambar/Images

<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'>
  • Tag <img> adalah tag HTML untuk mendefinisikan sebuah gambar.
  • Atribut src adalah sumber/url dari gambar.
  • Atribut alt adalah untuk memberikan nama alternatif gambar. Apabila gambar tidak bisa ditampilkan, maka yang muncul adalah nama alternatifnya.
  • Atribut height dan width adalah untuk mengatur ukuran gambar.

contoh:
<img src='http://www.4shared.com/download/V5OfT9syba/amikom.jpg' alt='STMIK AMIKOM Yogyakarta' width=400' height='100'/>

Hasil:
 STMIK AMIKOM Yogyakarta


Digabungkan menjadi link gambar

<a href='http://amikom.ac.id/'>
<img src='http://www.4shared.com/download/V5OfT9syba/amikom.jpg' alt='STMIK AMIKOM Yogyakarta' width='400'  height='100'/>
</a>
Tag <img> harus diapit oleh tag <a> dimana tag penutup harus dikasih garis miring, seperti: </a>

Hasil:

 STMIK AMIKOM Yogyakarta
Klik pada gambar di atas untuk berpindah ke halaman web yang dituju.

Mungkin cukup sekian bagaimana Cara Membuat Hyperlink dengan Gambar, semoga dapat membantu dan mudah dimengerti. Wassalamualaikum wr wb.

4 comments:

 
Online casino