Cara Membuat Link Menggunakan Gambar atau Foto

Goxis - Link 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://www.goxis.blogspot.com/'>Goxis Tutorial</a>

Hasil:

Otodidakers Tutorial

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.comicbookdaily.com/wp-content/uploads/2010/09/click.jpg' alt='Click Me!' width=100' height='100'>

Hasil:

Digabungkan menjadi link gambar

<a href='http://otodidakers-tutor.blogspot.com/'>

<img src='http://www.comicbookdaily.com/wp-content/uploads/2010/09/click.jpg' alt='Click Me!' width='100' height='100'>

</a>

Tag <img> harus diapit oleh tag <a> dimana tag penutup harus dikasih garis miring, seperti: </a>

Hasil:

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

Mungkin cukup sekian bagaimana cara membuat link menggunakan gambar atau foto, semoga dapat membantu dan mudah dimengerti.