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

Tag <img>: Menyisipkan Gambar Pada HTML

Previous Page

HTML element tag <img> (image) merupakan tag HTML digunakan untuk menyisipkan suatu gambar ke dalam suatu halaman HTML. HTML element tag <img> berfungsi sebagai kontainer bagi suatu sumber daya gambar yang merujuk pada suatu URL dengan isi data file gambar. HTML elemen tag ini tidak sepenuhnya memasukkan suatu file gambar secara langsung ke dalam halaman HTML, namun yang dilakukan adalah dengan perujukan file gambar melalui atribut URL. Jika file gambar yang dirujuk berhasil ditemukan, maka dokumen HTML akan menampilkan gambar tersebut. Namun jika tidak ditemukan maka gambar tidak akan ditampilkan.

HTML element tag <img> adalah element dengan penulisan self close yang penulisannya dilakukan melalui tag pembuka <img> dan tidak membutuhkan tag penutup.

Atribut penting yang harus disertakan adalah atribut "SRC" yang merupakan kepanjangan dari source atau 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 di mana gambar tersebut berada.

Penataan ukuran gambar pada tag tag <img> dilakukan dengan menyertakan atribut WIDTH (lebar) dan 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

HTML element tag <img> memiliki beberapa atribut yang digunakan untuk menampilkan gambar image dan juga menata tampilannya.

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 penggunaan HTML element tag <img> :

HTML

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag IMG</title>
</head>
<body>
   <h1>Latihan Menggunakan HTML Element Tag IMG</h1>
   <img src="ikan-paus.png" alt="gambar ikan paus" width="330px"/>
</body>
</html>

Jika dijalankan akan menghasilkan tampilan :

html element tag img

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 :

CSS

1
2
3
img{
   display : inline-block;
}

facebooktwitterwhatapplinkedinpinterest

Previous Page

Tutorial HTML

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami