<H2> Gambar Gunung</ h2><img src = "pic_mountain.jpg" alt = "Mountain View" style = "width: 304px; height: 228px;">
</ Body></ Html>Catatan Selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi tidak ditentukan, halaman akan berkedip saat gambar dimuat.
Sintaks Gambar HTML
Dalam HTML, gambar didefinisikan dengan tag <img>.
Tag <img> kosong, hanya berisi atribut saja, dan tidak memiliki tag penutup.
Atribut src menentukan URL (alamat web) gambar:<img src = "url" alt = "some_text">
Atribut alt
Atribut alt menentukan teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan.
Atribut alt menyediakan informasi alternatif untuk gambar jika pengguna karena beberapa alasan tidak dapat melihatnya (karena koneksi lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).
Jika browser tidak dapat menemukan gambar, maka akan muncul teks alt:Contoh<img src = "wrongname.gif" alt = "Ikon HTML5" style = "width: 128px; height: 128px;">
Atribut alt diperlukan. Sebuah halaman web tidak akan memvalidasi dengan benar tanpa itu.
Pembaca Layar HTML
Pembaca layar adalah program perangkat lunak yang bisa membaca apa yang ditampilkan di layar.
Pembaca layar berguna bagi orang-orang yang buta, tuna netra, atau belajar cacat.Catatan Pembaca layar bisa membaca atribut alt.
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan atribut gaya untuk menentukan lebar dan tinggi gambar.
Nilai ditentukan dalam piksel (gunakan px setelah nilainya):Contoh<Img src = "html5.gif" alt = "Ikon HTML5" style = "width: 128px; height: 128px;">
Sebagai alternatif, Anda bisa menggunakan atribut lebar dan tinggi. Di sini, nilai ditentukan dalam piksel secara default:Contoh<Img src = "html5.gif" alt = "Ikon HTML5" width = "128" height = "128">Lebar dan Tinggi atau Gaya?
Baik atribut lebar, tinggi, dan gaya berlaku dalam standar HTML5 terbaru.
Sebaiknya gunakan atribut style. Ini mencegah lembaran gaya mengubah ukuran gambar asli:Contoh<! DOCTYPE html><Html><Head><Style>Img {
Lebar: 100%;}</ Style></ Head><Body>
<Img src = "html5.gif" alt = "Ikon HTML5" style = "width: 128px; height: 128px;"><Img src = "html5.gif" alt = "Ikon HTML5" width = "128" height = "128">
</ Body></ Html>
Gambar di Folder Lain
Jika tidak ditentukan, browser mengharapkan untuk menemukan gambar dalam folder yang sama dengan halaman web.
Namun, biasanya menyimpan gambar di sub-folder. Anda kemudian harus menyertakan nama folder di atribut src:Contoh<Img src = "/ images / html5.gif" alt = "Ikon HTML5" style = "width: 128px; height: 128px;">
Gambar di Server Lain
Beberapa situs web menyimpan gambar mereka di server gambar.
Sebenarnya, Anda bisa mengakses gambar dari alamat web manapun di dunia:Contoh<Img src = "http://www.w3schools.com/images/w3schools_green.jpg" alt = "W3Schools.com">
Gambar animasi
Standar GIF memungkinkan gambar animasi:Contoh<Img src = "programming.gif" alt = "Manusia Komputer" style = "width: 48px; height: 48px;">
Perhatikan bahwa sintaks memasukkan gambar animasi tidak berbeda dengan gambar non-animasi.Menggunakan Image sebagai Link
Untuk menggunakan gambar sebagai link, cukup sembunyikan tag <img> di dalam tag <a>:Contoh<a href="default.asp">
<Img src = "smiley.gif" alt = "tutorial HTML" style = "width: 42px; height: 42px; border: 0;"></a>Catatan Tambahkan "border: 0;" Untuk mencegah IE9 (dan sebelumnya) menampilkan perbatasan di sekitar gambar.Gambar terapung
Gunakan properti float CSS untuk membiarkan gambar melayang.
Gambar bisa melayang ke kanan atau di sebelah kiri teks:Contoh<P><Img src = "smiley.gif" alt = "Wajah tersenyum" style = "float: right; width: 42px; height: 42px;">Gambar akan melayang di sebelah kanan teks.</ P>
<P><Img src = "smiley.gif" alt = "Wajah tersenyum" style = "float: left; width: 42px; height: 42px;">Gambar akan melayang di sebelah kiri teks.</ P>Peta Gambar
Gunakan tag <map> untuk menentukan peta gambar. Peta gambar adalah gambar dengan area yang dapat diklik.
Atribut nama tag <map> dikaitkan dengan atribut usemap <img> dan menciptakan hubungan antara gambar dan peta.
Tag <map> berisi sejumlah tag <area>, yang mendefinisikan area yang dapat diklik dalam peta gambar:Contoh<img src = "planets.gif" alt = "Planet" usemap = "# planetmap" style = "width: 145px; height: 126px;">
<map name = "planetmap">
<shape 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>
Ringkasan Bab
Gunakan elemen HTML <img> untuk menentukan gambar
Gunakan atribut HTML src untuk menentukan URL gambar
Gunakan atribut HTML alt untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan
Gunakan atribut lebar dan tinggi HTML untuk menentukan ukuran gambar
Gunakan properti lebar dan tinggi CSS untuk menentukan ukuran gambar (alternatifnya)
Gunakan properti float CSS untuk membiarkan gambar melayang
Gunakan elemen HTML <map> untuk menentukan peta gambar
Gunakan elemen HTML <area> untuk menentukan area yang dapat diklik dalam peta gambar
Gunakan atribut usemap elemen HTML <img> untuk menunjuk ke peta gambar
Catatan Memuat gambar membutuhkan waktu. Gambar besar bisa memperlambat halaman Anda. Gunakan gambar dengan hati-hati.
Uji Diri dengan Latihan!
HTML Image Tags
Deskripsi Tag
<img> Mendefinisikan sebuah gambar
<map> Mendefinisikan peta gambar
<Area> Mendefinisikan area yang dapat diklik di dalam peta gambar
Out Of Topic Show Konversi KodeHide Konversi Kode