HTML Images
contoh
contoh
<! DOCTYPE html>
<html>
<body>
<h2> Spektakuler Pegunungan </ h2>
<img src = "pic_mountain.jpg" alt = "Mountain View" style = "width: 304px; height: 228px">
</ body>
</ html>
Catatan Selalu tentukan ukuran gambar. Jika ukuran tidak diketahui, halaman akan berkedip sementara beban gambar.
HTML Images Sintaks
Dalam HTML, gambar didefinisikan dengan tag <img>.
<Img> tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
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-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.
Pembaca layar yang digunakan oleh orang-orang yang buta, tunanetra, atau ketidakmampuan belajar.
Catatan Layar pembaca dapat membaca atribut alt.
Image Size - 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">
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>
Catatan Di W3Schools kami lebih memilih untuk menggunakan atribut style.
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.w3schools.com/images/w3schools_green.jpg">
Cobalah Sendiri »
Gambar animasi
Standar GIF memungkinkan gambar animasi:
contoh
<img src = "programming.gif" alt = "Man Computer" 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>
Catatan 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">
<Nama peta = "planetmap">
<daerah bentuk = "rect" coords = "0,0,82,126" alt = "Sun" href = "sun.htm">
<daerah bentuk = "lingkaran" coords = "90,58,3" alt = "Mercury" href = "mercur.htm">
<daerah bentuk = "lingkaran" coords = "124,58,8" alt = "Venus" href = "venus.htm">
</ peta>
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>
Tidak ada komentar:
Posting Komentar