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:
Ekstensi gambar seperti : JPG, JPEG, GIF, PNG, BMP, dan lain sebagainya.
Contoh penulisannya :
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 :
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 :
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 :
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.
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.
Post a Comment