tRikSonic
Tema

HTML img Tag

Terakhir diperbarui : 24 Mei 2018 - 17.31

Tutorial HTML <img>

Element img mempunyai definisi sebagai element file media berupa image atau gambar.
background html

Contoh HTML <img>

<img alt="HTML Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png" title="HTML Tutorial" />
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<img alt="HTML Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png" title="HTML Tutorial" />

</body>
</html>
Dalam penggunaannya pada html, ada beberapa attibute yang bisa digunakan. Namun, ada dua attribut yang wajib disisipkan pada element <img> yaitu : attribut alt dan src

Attribute HTML <img>

alt Nilai atribut ini adalah : teks menentukan sebagai alternative teks, jika sebuah gambar gagal diload, maka akan digantikan oleh attribute ini yaitu sebuah teks. attribut ini sangat dianjurkan oleh pakar SEO.
crossorigin Nilai atribut ini adalah :
  1. anonymous
  2. use-credentials
menggunakan gambar dari pihak ketiga dan digunakan di dalam element <canvas>
height Nilai atribut ini adalah : pixels menentukan tinggi dari sebuah image atau gambar
ismap Nilai atribut ini adalah : ismap menentukan titik koordinat sebuah gambar yang digunakan pada server
longdesc Nilai atribut ini adalah : URL menentukan URL yang digunakan sebagai penjelasan atau rincian tambahan dari sebuah image gambar
src Nilai atribut ini adalah : URL menentukan url dari sebuah image atau gambar
usemap Nilai atribut ini adalah : #mapname menentukan gambar sebagai client side peta gambar yang menggunakan titik koordinat (image atau gambar yang sudah ditentukan titik koordinat nya, akan bisa diklik oleh user dan menampilkan bagian yang diklik tersebut)
width Nilai atribut ini adalah : Angka (pixels) menentukan ukuran lebar dari sebuah image atau gambar

Global Attributes:

Element <img> mencakup Global Attributes HTML.

Event Attributes:

Element <img> mencakup Event Attributes HTML.

Browser Support :

Desktop

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <img>, mempunyai nilai default :
img { 
    display: inline-block;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.