Tutorial HTML <img>
Element
img mempunyai definisi sebagai element file media berupa image atau gambar.
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 srcAttribute 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 :
|
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
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<img>, mempunyai nilai default :img {
display: inline-block;
}