Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <img>: Menyisipkan Gambar Pada HTML

Previous Page

Elemen <img> atau kepanjangan dari image pada HTML digunakan untuk menyisipkan suatu gambar ke dalam halaman dokumen HTML. Elemen ini ditetapkan dengan tag <img>. Elemen <img> berfungsi sebagai wadah / kontainer bagi suatu gambar, dimana elemen ini akan merujuk pada suatu URL yang berisi data file gambar. Elemen <img> tidak sepenuhnya memasukkan suatu file gambar secara langsung ke dalam halaman HTML, namun hanya akan melakukan perujukan terhadap file gambar melalui atribut URL. Jika file gambar yang dirujuk ditemukan, maka dokumen HTML akan menampilkan gambar tersebut, jika tidak ditemukan maka tidak ada gambar yang akan ditampilkan.

Elemen <img> merupakan elemen dengan penulisan self close, jadi penulisan elemen ini hanya ditulis dengan tag <img> tanpa tag penutup.

Atribut yang penting dan harus disertakan adalah atribut "src" kepanjangan dari source / sumber. Atribut ini digunakan untuk melakukan rujukan terhadap file gambar yang akan disisipkan pada halaman HTML. File gambar tersebut harus berada di dalam folder yang sama dengan file HTML-nya, jika berada di luar folder maka perlu dilakukan penunjukkan secara langsung melalui metode penulisan URL dimana gambar tersebut berada.

Atribut yang biasa digunakan untuk menata ukuran gambar adalah atribut width (lebar) dan atribut height (tinggi). Untuk mendapatkan gambar yang proporsional, cukup dituliskan salah satu atribut saja. Misalnya jika dituliskan width="600" tanpa atribut height, maka atribut height oleh browser akan dijadikan auto-height menyesuaikan dengan rasio perbandingan lebar dan tinggi gambar normal. Jika kedua atribut dituliskan semuanya tanpa mempertimbangkan rasio perbandingan gambar, akan mendapatkan gambar yang terkesan "gepeng" atau tidak proporsional.

Atribut Khusus

Atribut khusus pada elemen <img> meliputi :

  • src
    Menetapkan URL lokasi gambar berada. Nilai : URL
  • alt
    Menetapkan teks aternatif jika gambar gagal ditampilkan. Nilai : teks
  • width
    Menentukan lebar gambar Nilai : angka (pixel)
  • height
    Menetapkan tinggi gambar. Nilai : angka (pixel)
  • ismap
    Menetapkan gambar tersebut bagian dari gambar peta pada sisi server (server-side map). Jika user melakukan klik pada gambar, maka koordinat x dan y pada gambar akan dikirim ke server. Nilai : ismap
  • usemap
    Menetapkan gambar tersebut bagian dari gambar peta pada sisi pengguna (client-side map). Atribut ini berkaitan dengan tag <map>, di mana tag tersebut merupakan detail dari gambar. Nilai : #nama_map
  • crossorigin
    Mengijinkan pihak ketiga menggunakan gambar yang dapat digunakan di dalam elemen <canvas>. Nilai : anonymous

Berikut ini contoh penggunaan <img> pada halaman HTML :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag img HTML</title>
6.  </head>
7.  <body>
8.     <h1>Latihan menggunakan tag img HTML</h1>
9.     <img src="taucon_bird.jpg" alt="gambar burung taucon" />
10. </body>
11. </html>

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :

tag img html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<img>yayayayaya

Global Attributes :

Tag <img> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <img> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <img> pada HTML :

img{
display:inline-block;
}

facebooktwittergoogle pluswhatapplinkedinpinterest

Previous Page

Daftar Isi HTML