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.
<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.
Tidak ada komentar:
Posting Komentar