HTML Dasar
HTML Menengah
HTML Mahir
HTML Referensi
HTML Contoh
HTML Resources

HTML Gambar


HTML Image

  • Tag <img> digunakan untuk menampilkan gambar pada dokumen HTML.
  • Tag <img> termasuk salah satu dari empty element, maksudnya memiliki attribut tetapi tidak memiliki tag penutup.
  • Browser menampilkan gambar anda berdasarkan letak tag <img> di dokumen HTML anda.

Syntax dari HTML image

<img src='url'/>

Penjelasan :
  • <img> adalah tag pembuka.
  • src adalah attribut yang digunakan sebagai informasi darimana url letak gambar yang akan ditampilkan tersimpan.

Codingku HTML Editori
<!DOCTYPE html>

<html>

<body>

<img src="http://codingku.com/html/sample/street-fighter-4.jpg" />

</body>

</html>
Coba sendiri »


Attribut alt  pada HTML image


Attribut alt digunakan untuk menggantikan gambar dengan pesan teks bila gambar tidak bisa ditampilkan.
<img src="http://codingku.com/html/sample/street-fighter.jpg" alt="Gambar Ryu" />

Gambar Ryu

* tulisan keluar di browser firefox dan tidak keluar di chrome.

Menentukan tinggi dan panjang gambar


Untuk menentukan lebar dan panjang sebuah gambar maka perlu ditambahkan attribut width dan height pada tag img

<img src="http://codingku.com/html/sample/street-fighter.jpg" width="400" height="300" />

Sebuah kebiasan yang baik bila kita menentukan dari awal besar image dengan menuliskan attribut width dan height-nya sebab dengan begitu space/ruang kosong untuk image sudah diketahui dulu oleh browser. Bila browser tidak mengetahui ukuran dari image maka ketika sebuah halaman dibuka akan kita lihat sebuah layout yang berubah-ubah menunggu load dari image selesai.

Sebaiknya penggunaan gambar diminimalkan sebab file gambar/image biasanya merupakan file yang berukuran besar sehingga akan membuat lambat akses terhadap website anda. 


Situs ini masih dalam versi beta, artinya masih dalam proses pengembangan baik dari segi bug maupun isi yg kurang lengkap. Silahkan melihat-lihat yang sudah ada sementara ini, tiap hari kami akan berusaha untuk melengkapi kekurangannya...