Membuat Gambar Berlink

“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 

About Bambang Herlandi 218 Articles
Seorang Blogger yang sehari-hari bekerja dan mengajar sebagai guru desain grafis, juga sebagai IT Freelance dan Web & Graphic Designer serta penghobi Photography.

3 Comments on Membuat Gambar Berlink

Tinggalkan Balasan

%d blogger menyukai ini: