Header Ads

Cara Menyisipkan Gambar pada Halaman HTML

Untuk menyisipkan Gambar , digunakan tag <img> dengan atribut src.
Atribut src adalah singkatan dari source, adalah alamat dari gambar yang akan ditampilkan.
Berikut adalah susunan sederhananya, gunakan tag berikut:
<img src="URL_GAMBAR"/>

Ekstensi gambar seperti : JPG, JPEG, GIF, PNG, BMP, dan lain sebagainya.

Contoh penulisannya :
<img src="URL_LINK_GAMBAR.jpg"/>

Hasilnya akan tampil gambar di dalam  browser. Dibawah ini contoh gambar yang saya tampilkan.



Untuk gambar dari web lain jangan lupa membubuhkan http://URL_TUJUAN, kemudian untuk penggunaan garis pinggir gunakan atribut border="2", angka 2 adalah ukuran pixel border yang diinginkan.

Contoh penulisannya :
<img src="http://www.contohdomain.com/images/Gambar.jpg" border="2"/>

Hasilnya akan tampil gambar di dalam  browser.



Anda juga dapat menentukan ukuran panjang dan lebar gambar dengan atribut width="ukuran" dan weight="ukuran" (ukuran yaitu angka dalam ukuran pixel), misalkan:
Contoh penulisannya :
<img src="http://LINK_GAMBAR.jpg" border="2" width="200" height="150"/>

Hasilnya akan tampil gambar di dalam  browser.




Anda juga dapat menjadikan gambar menjadi sebuah link, dengan tag <a> yang telah saya bahas sebelumnya, contoh penulisannya seperti ini :
<a href="URL_LINK_TUJUAN" target="_blank">
<img src="LINK_GAMBAR.jpg" border="2" width="200" height="150"/>
<a> 

LOKASI GAMBAR INTERNAL
Jika lokasi gambar terdapat pada folder web anda sendiri, misalkan susunan folder dan file html anda seperti di bawah ini:
File html :
folder/index.html
Lokasi gambar :
folder/images/gambar.jpg

Maka anda dapat menggunakan url gambar seperti ini "./images/gambar.jpg".
Keterangan :

"./"     = folder yang sama (atau bisa juga tanpa dot slash ini, misal src="gambar.jpg")
"../"    = 1 folder lebih atas
"../../" = 2 folder lebih atas (berlaku seterusnya ../../../../dst.)
"/"      = folder teratas

Anda harus melihat posisi file html yang digunakan dalam menampilkan gambar tersebut terhadap lokasi gambar tujuan.

Silahkan mencoba dan bereksperimen.

Tidak ada komentar

Diberdayakan oleh Blogger.