“Bagaimana sih cara membuat gambar yang bisa di klik trus nyambung ke website tertentu????”
Pertanyaan seperti ini sering saya terima dari teman2 dan siswa saya yang sedang membangun website atau blog.
Maka untuk membuat gambar yang dapat di-link-kan ke url tertentu, maka caranya adalah
A. Langkah Pertama: Ketahui dulu HTML code yang digunakan untuk menampilkan gambar dan membuat link.
1. HTML code untuk menampilkan gambar:
|
<img src=”alamat url dari gambar yang akan ditampilkan” width=”lebar gambar” height=”tinggi gambar” border=”0” alt=”keterangan gambar” /> |
Contoh:
|
<img src=”http://www.google.co.id/intl/id_id/images/logo.gif” width=”281” height=”110” border=”0” alt=”Logo Google” /> |
Keterangan:
HTML code di atas akan menghasilkan gambar logo Google yang diambil dari alamat url http://www.google.co.id/intl/id_id/images/logo.gif dengan lebar 281 pixel dan tinggi 110 pixel.
2. HTML code untuk membuat link
|
<a href=”alamat url link” target=”_blank” title=”Keterangan Link”> … </a> |
Contoh:
|
<a href=”http://www.google.co.id” target=”_blank” title=”Google”>Google</a> |
Keterangan:
HTML code di atas akan menghasilkan tulisan Google yang apabila diklik dapat nge-link ke alamat url http://www.google.co.id
B. Langkah Kedua: Menggabungkan HTML code untuk menampilkan gambar dan membuat link.
Untuk dapat menggabungkan HTML code di atas maka caranya adalah buat susunan HTML codenya menjadi seperti di bawah ini:
|
<a href=”http://www.google.co.id” target=”_blank” title=”Google”><img src=”http://www.google.co.id/intl/id_id/images/logo.gif” width=”281” height=”110” border=”0” alt=”Logo Google” /></a> |
Selamat mencoba,
Bambang Herlandi
3 Komentar
Thx bang buat infonya…
Tpi ada saran nih kotak komennya tulisannya gelap bgt..
trims juga atas saranx…
maklumlah lg sibuk, jdx blum sempat utak-atik lg 😀
Mntab banget mas tutorialnnya. Buat pembaca jd paham :))
Thanks for share