Gambar digital sudah menjadi elemen penting pada HTML. Seperti
yang kita ketahui, jarang sekali kita menemukan suatu halaman HTML yang tidak
terdapat gambar didalamnya. Untuk memasukkan gambar pada HTML cukuplah
sederhana, yaitu dengan memanfaatkan fungsi tag image. Pada artikel kali ini
kita akan mencoba mempelajari tentang tag image sehingga dengan penggunaannya
gambar dapat ditampilkan pada tampilan html kita.
Atribut src dalam tag <img>
Atribut
src adalah singkatan dari source, merupakan atribut yang berisi alamat dari
gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.
Untuk
contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan
sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan
halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
Pada
contoh dibawah ini saya menggunakan sebuah gambar luar angkasa yang terdapat
didrive D:// yang berada dalam satu folder dengan halaman HTML saat ini.
Contoh
penggunaan tag <img>:
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan
Tag Image</title>
</head>
<body>
<h1>Belajar
Tag Gambar</h1>
<img
src="space-photography-universe-wallpapers-wallwuzz-hd-wallpaper-21175.jpg"
width="240" />
</body>
</html>
hasilnya..
Perhatikan
bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan
/>.
*Hati-hati
dengan penulisan atribut src, sering gambar gagal tampil karena kita salah
ketik atribut src menjadi “scr”.
Atribut alt dalam tag <img>
Tag
image juga memiliki atribut penting lainnya, yaitu alt. Atribut alt adalah
singkatan dari alternative description, dimana alt digunakan untuk keterangan
dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web
broser telah disetting untuk tidak menampilkan gambar.
Contoh
penggunaan atribut alt pada tag <img>:
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan
Tag Image</title>
</head>
<body>
<h1>Belajar
Tag Gambar</h1>
<img
alt="luar angkasa" src="space-photography-universe-wallpapers-wallwuzz-hd-wallpaper-21175.jpg"
/>
</body>
</html>
Atribut
alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja
google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google
‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam
atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.
Atribut width dan height dalam tag <img>
Atribut
lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan,
yaitu width dan height.
Contoh
penggunaan atribut width dan height pada tag <img>:
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan
Tag Image</title>
</head>
<body>
<h1>Belajar
Tag Gambar</h1>
<img
src=""space-photography-universe-wallpapers-wallwuzz-hd-wallpaper-21175.jpg"
" height="200" width="100" />
</body>
</html>
hasilnya....
Namun
pada penggunaan tag image diatas, gambar akan terlihat tidak proporsional, hal ini
karena penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan
nilai yang kita tetapkan.
Untuk
mempertahankan proporsi gambar, namun tetap membuat gambar menjadi besar/kecil,
cantumkan hanya salah satu atribut saja (width saja atau height saja, namun
tidak keduanya). Misalkan jika kita menetapkan atribut width=300px (tanpa
mencantumkan height), maka web browser akan menampilkan gambar dengan lebar
300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap
proporsional (seperti gambar paling atas).
semoga bermanfaat...
dikutip dari http://www.duniailkom.com/ dengan perubahan seperlunya.
ConversionConversion EmoticonEmoticon