Gambar dapat meningkatkan desain dan tampilan halaman web.
Contoh
<img src="pic_trulli.jpg" alt="Italian Trulli">
Contoh
<img src="img_girl.jpg" alt="Girl in a jacket">
Contoh
<img src="img_chania.jpg" alt="Flowers in Chania">
Gambar HTML Sintaks
Dalam HTML, gambar didefinisikan dengan
<img>tag.
The
<img>tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.
The
srcatribut menentukan URL (alamat web) dari gambar:
<img src="url">
Alt Atribut
The
altatribut menyediakan teks alternatif untuk gambar, jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar).
Nilai dari
altatribut harus menjelaskan gambar:Contoh
<img src="img_chania.jpg" alt="Flowers in Chania">
Jika browser tidak dapat menemukan gambar, maka akan muncul nilai dari
alt atribut:Contoh
<img src="wrongname.gif" alt="Flowers in Chania">
Ukuran Gambar - Lebar dan Tinggi
Anda dapat menggunakan
styleatribut untuk menentukan lebar dan tinggi dari suatu gambar.Contoh
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Atau, Anda dapat menggunakan
widthdan heightatribut:Contoh
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The
widthdan heightatribut selalu mendefinisikan lebar dan tinggi gambar dalam piksel.
Catatan: Selalu menentukan lebar dan tinggi dari suatu gambar. Jika lebar dan tinggi yang tidak ditentukan, halaman mungkin berkedip sedangkan beban gambar.
Lebar dan Tinggi, atau Style?
The
width, heightdan styleatribut yang valid dalam HTML.
Namun, kami sarankan menggunakan
styleatribut. Ini mencegah gaya lembar mengubah ukuran gambar:Contoh
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;}</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
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
srcatribut:Contoh
<img src="/images/html5.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="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Gambar animasi
HTML memungkinkan animasi GIF:
Contoh
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Gambar sebagai sebuah Link
Untuk menggunakan gambar sebagai link, menempatkan
<img>tag di dalam <a> tag:Contoh
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Catatan:
border:0; ditambahkan untuk mencegah IE9 (dan sebelumnya) dari menampilkan perbatasan di sekitar gambar (ketika gambar adalah link).gambar Mengambang
Gunakan CSS
floatproperti untuk membiarkan gambar float ke kanan atau ke kiri 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>
Pembaca Layar HTML
Sebuah pembaca layar adalah program perangkat lunak yang membaca kode HTML, mengkonversi teks, dan memungkinkan pengguna untuk "mendengarkan" untuk konten. pembaca layar yang berguna untuk orang-orang yang tunanetra atau pembelajaran dinonaktifkan.
Bab Ringkasan
- Gunakan HTML
<img>elemen untuk mendefinisikan gambar - Gunakan HTML
srcatribut untuk menentukan URL gambar - Gunakan HTML
altatribut untuk mendefinisikan teks alternatif untuk gambar, jika tidak dapat ditampilkan - Gunakan HTML
widthdanheightatribut untuk menentukan ukuran gambar - Gunakan CSS
widthdanheightsifat untuk menentukan ukuran gambar (alternatif) - Gunakan CSS
floatproperti untuk membiarkan float image
Memuat gambar membutuhkan waktu. gambar besar dapat memperlambat halaman Anda. Gunakan gambar dengan hati-hati.
Latihan HTML
HTML Gambar Tag
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image-map |
| <area> | Defines a clickable area inside an image-map |
| <picture> | Defines a container for multiple image resources |
Tidak ada komentar:
Posting Komentar