Gambar JPG
Gambar GIF
Gambar PNG
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> Cobalah sendiri " Selalu menentukan lebar dan tinggi dari suatu gambar. Jika lebar dan tinggi yang tidak ditentukan, halaman akan berkedip sementara beban gambar.
Gambar HTML Sintaks
Dalam HTML, gambar didefinisikan dengan <img> tag.
The <img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
The src atribut menentukan URL (web address) dari gambar:
<img src=" url " alt=" some_text ">The alt Atribut
The alt atribut menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.
The alt atribut menyediakan informasi alternatif untuk gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam src atribut, atau jika pengguna menggunakan pembaca layar).
Jika browser tidak dapat menemukan gambar, maka akan muncul alt teks:
Contoh
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Cobalah sendiri " The alt atribut diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
Pembaca Layar HTML
Sebuah pembaca layar adalah sebuah program perangkat lunak yang dapat membaca apa yang ditampilkan pada layar.
pembaca layar berguna untuk orang-orang yang buta, tunanetra, atau belajar cacat.
Pembaca layar dapat membaca alt atribut.
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan style atribut untuk menentukan lebar dan tinggi dari suatu gambar.
Nilai-nilai yang ditentukan dalam pixel (use px after the value) :
Atau, Anda dapat menggunakan width dan height atribut. Di sini, nilai-nilai yang ditentukan dalam pixel secara default:
Lebar dan Tinggi atau Style?
Kedua lebar, tinggi, dan atribut gaya berlaku dalam standar HTML5 terbaru.
Kami menyarankan Anda menggunakan style atribut. Ini mencegah gaya lembar dari mengubah ukuran asli 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> Cobalah sendiri " Gambar di Folder lain
Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar dalam folder yang sama sebagai halaman web.
Namun, itu adalah umum untuk menyimpan gambar dalam sub-folder. Anda kemudian harus menyertakan nama folder dalam src atribut:
Contoh
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> Cobalah sendiri " Gambar di Server lain
Beberapa situs web menyimpan gambar mereka di server gambar.
Sebenarnya, Anda dapat mengakses gambar dari alamat web di dunia:
Gambar animasi
Standar GIF memungkinkan gambar animasi:
Contoh
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;"> Cobalah sendiri " Perhatikan bahwa sintaks memasukkan gambar animasi tidak berbeda dari gambar non-animasi.
Menggunakan Gambar sebagai sebuah Link
Untuk menggunakan gambar sebagai link, hanya sarang <img> tag di dalam <a> tag:
Contoh
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> Cobalah sendiri " Menambahkan "border:0;" untuk mencegah IE9 (and earlier) dari menampilkan perbatasan di sekitar gambar.
gambar Mengambang
Menggunakan properti CSS mengapung untuk membiarkan mengambang gambar.
Gambar bisa mengapung ke kanan atau ke kiri dari teks:
Contoh
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> Cobalah sendiri " gambar Maps
Gunakan <map> tag untuk mendefinisikan gambar-peta. Gambar-peta adalah gambar dengan area yang dapat diklik.
The name atribut <map> tag dikaitkan dengan <img> 's atribut usemap dan menciptakan hubungan antara gambar dan peta.
The <map> tag berisi sejumlah <area> tag, yang mendefinisikan daerah yang dapat diklik pada gambar-peta:
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> Cobalah sendiri " Bab Ringkasan
- Gunakan HTML <img> elemen untuk mendefinisikan gambar
- Gunakan HTML src atribut untuk menentukan URL gambar
- Gunakan HTML alt atribut untuk mendefinisikan teks alternatif untuk gambar, jika tidak dapat ditampilkan
- Gunakan HTML width dan height atribut untuk menentukan ukuran gambar
- Gunakan CSS width dan height properti untuk menentukan ukuran gambar (alternatively)
- Gunakan CSS float properti untuk membiarkan float image
- Gunakan HTML <map> elemen untuk mendefinisikan gambar-peta
- Gunakan HTML <area> elemen untuk menentukan daerah-daerah yang dapat diklik pada gambar-peta
- Gunakan HTML <img> elemen 's usemap atribut untuk menunjuk ke gambar-peta
Memuat gambar membutuhkan waktu. gambar besar dapat memperlambat halaman Anda. Gunakan gambar dengan hati-hati.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 » Latihan 6»
HTML Gambar Tag
| Menandai | Deskripsi |
|---|---|
| <img> | Mendefinisikan gambar |
| <map> | Mendefinisikan sebuah image-map |
| <area> | Mendefinisikan sebuah area yang dapat diklik di dalam gambar-peta |