Example
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>
Coba Sendiri »
Selalu tentukan ukuran gambar. Jika ukuran tidak diketahui, halaman akan
berkedip sedangkan beban gambar.
________________________________________
HTML Images
Sintaks
Dalam HTML, gambar didefinisikan dengan tag <img>.
<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
Atribut alt menentukan sebuah teks alternatif untuk gambar, jika tidak dapat
ditampilkan.
Nilai atribut alt harus menjelaskan gambar dengan kata:
contoh
<img src = "html5.gif" alt = "The HTML5
Icon resmi">
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.
Layar pembaca digunakan oleh orang-orang yang buta, tunanetra, atau
ketidakmampuan belajar.
Layar pembaca dapat membaca atribut alt.
________________________________________
Ukuran Gambar -
Lebar dan Tinggi
Anda dapat menggunakan atribut style 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">
Coba Sendiri »
Atau, Anda dapat menggunakan lebar dan tinggi atribut.
Nilai-nilai yang ditentukan dalam piksel (tanpa px setelah nilai):
contoh
<img src = "html5.gif" alt = "HTML5
Icon" width = "128" height = "128">
Coba Sendiri »
________________________________________
Lebar dan Tinggi
atau Style?
Baik lebar, tinggi, dan atribut gaya, berlaku dalam
standar HTML5 terbaru.
Kami sarankan Anda menggunakan atribut style. Ini mencegah gaya lembar untuk
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>
Coba Sendiri »
Di W3Schools kami lebih suka menggunakan atribut style.
________________________________________
Gambar dalam
Folder lain
Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar dalam 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">
Coba Sendiri »
Jika browser tidak dapat menemukan gambar, maka akan muncul icon broken link:
contoh
<img src = "wrongname.gif" alt = "HTML5
Icon" style = "width: 128px; height: 128px">
Coba Sendiri »
________________________________________
Gambar di Server
lain
Beberapa situs web menyimpan gambar mereka di server
gambar.
Sebenarnya, Anda dapat mengakses gambar dari alamat web di seluruh dunia:
contoh
<img src =
"http://www.w3schools.com/images/w3schools_green.jpg">
Coba Sendiri »
________________________________________
pindah Images
Standar GIF memungkinkan gambar bergerak:
contoh
<img src = "programming.gif" alt = "Man
Computer" style = "width: 48px; height: 48px">
Coba Sendiri »
Perhatikan bahwa sintaks memasukkan gambar bergerak tidak berbeda dari gambar
non-bergerak.
________________________________________
Menggunakan Image sebagai sebuah Link
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>
Coba Sendiri »
Kami telah menambahkan border: 0 untuk mencegah IE9 (dan sebelumnya)
dari menampilkan perbatasan di sekitar gambar.
________________________________________
gambar Maps
Untuk gambar, Anda dapat membuat peta gambar, dengan
daerah yang dapat diklik:
contoh
<img src = "planets.gif" alt =
"Planet" usemap = "# planetmap" style = "width: 145px;
height: 126px">
<name peta = "planetmap">
<daerah shape = "rect" coords =
"0,0,82,126" alt = "Sun" href = "sun.htm">
<daerah shape = "lingkaran" coords =
"90,58,3" alt = "Mercury" href = "mercur.htm">
<daerah shape = "lingkaran" coords =
"124,58,8" alt = "Venus" href = "venus.htm">
</ peta>
Coba Sendiri »
________________________________________
gambar Mengambang
Anda dapat membiarkan mengambang gambar ke kiri atau kanan paragraf:
contoh
<p>
<img src = "smiley.gif" alt = "wajah
Smiley" style = "float: left; width: 42px; height: 42px">
Sebuah paragraf dengan gambar. Gambar mengapung di sebelah kiri
teks.
</ p>
Coba Sendiri »
________________________________________
Bab Ringkasan
• Gunakan HTML <img> untuk mendefinisikan gambar
• Gunakan atribut HTML src untuk menentukan nama file gambar
• Gunakan atribut alt HTML untuk menentukan teks alternatif
• Gunakan lebar HTML dan tinggi atribut untuk menentukan ukuran gambar
• Gunakan lebar CSS dan tinggi properti untuk menentukan ukuran gambar
(alternatif)
• Gunakan properti CSS mengapung untuk mendefinisikan image mengambang
• Gunakan atribut CSS usemap untuk menunjuk ke peta gambar
• Gunakan HTML <peta> elemen untuk mendefinisikan peta gambar
• Gunakan HTML <daerah> elemen untuk mendefinisikan area peta gambar
Memuat gambar membutuhkan waktu. Gambar besar dapat memperlambat halaman
Anda. Gunakan gambar dengan hati-hati.