HTML Images

Contoh

GIF Images

JPG Images

PNG Images

<!DOCTYPE html>
<html>

<body>
 <h2>Spectacular Mountains</h2>
 <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>

</html>

Keterangan : Selalu tentukan ukuran gambar. Jika ukuran tidak diketahui, halaman akan berkedip sementara beban gambar.

HTML Images Sintaks

Dalam HTML, gambar didefinisikan dengan <img> tag.
<Img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
The src atribut mendefinisikan url (alamat web) dari gambar:

<img src="url" alt="some_text">

Alt Atribut

The alt atribut menentukan sebuah teks alternatif untuk gambar, jika tidak dapat ditampilkan.
Nilai atribut alt harus menjelaskan gambar dengan kata-kata:

Contoh

<img src="html5.gif" alt="The official HTML5 Icon">

Keterangan : Atribut alt diperlukan . Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.

Layar Pembaca HTML

Layar pembaca adalah program perangkat lunak yang dapat membaca apa yang ditampilkan di layar.

Digunakan di web, pembaca layar dapat "mereproduksi" HTML sebagai teks-to-speech, ikon suara, atau output braille.

Pembaca layar yang digunakan oleh orang-orang yang buta, tunanetra, atau ketidakmampuan belajar.

Image Size - Lebar dan Tinggi

Anda dapat menggunakan gaya atribut untuk menentukan lebar dan tinggi dari suatu gambar.
Nilai-nilai yang ditentukan dalam pixel (px digunakan setelah nilai):

Contoh

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

Atau, Anda dapat menggunakan lebar dan tinggi atribut .

Nilai-nilai yang ditentukan dalam pixel (tanpa px setelah nilai):

Contoh

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Lebar dan Tinggi atau Style?

Kedua lebar, tinggi, dan atribut gaya, berlaku dalam standar HTML5 terbaru.
Kami menyarankan Anda menggunakan atribut style. Ini mencegah gaya lembar mengubah ukuran default gambar:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
  img { width:100%; }
</style>
</head>

<body>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>

</html>

Gambar di Folder lain

Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar di folder yang sama dengan halaman web.

Namun, itu adalah umum di web, untuk menyimpan gambar dalam sub-folder, dan merujuk ke folder dalam nama gambar:

Contoh

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">

Jika browser tidak dapat menemukan gambar, maka akan muncul ikon broken link:

Contoh

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px">

Gambar di Server lain

Beberapa situs web menyimpan gambar mereka di server gambar.
Sebenarnya, Anda dapat mengakses gambar dari alamat web di dunia:

Contoh

<img src="http://www.johanandyagasi.blogspot.com/images/w3schools_green.jpg">

Gambar animasi

Standar GIF memungkinkan gambar animasi:

Contoh

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px">

Perhatikan bahwa sintaks memasukkan gambar animasi tidak berbeda dari gambar non-animasi.

Menggunakan gambar sebagai link yang

Hal ini umum untuk menggunakan gambar sebagai link:

Contoh

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

Gambar Maps

Untuk gambar, Anda dapat membuat peta gambar, dengan daerah yang dapat diklik:

Contoh

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Gambar Mengambang

Anda dapat membiarkan mengambang gambar ke kiri atau kanan paragraf:

Contoh

<p>
  <img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px">
  A paragraph with an image. The image floats to the left of the text.
</p>