HTML IMAGES
Contoh Codingan :
Kode HTML di bawah ini menggunakan tag <img> untuk menyematkan gambar pada halaman web. Gambar yang disematkan memiliki path (alamat) "img_chania.jpg" dan teks alternatif "Flowers in Chania".
<img src="img_chania.jpg" alt="Flowers in Chania">
Syntax Gambar HTML
Tag HTML <img> digunakan untuk menyematkan gambar dalam halaman web.
Gambar sebenarnya tidak dimasukkan secara teknis ke dalam halaman web; gambar dihubungkan ke halaman web. Tag <img> membuat ruang penampung untuk gambar yang dirujuk.
Tag <img> bersifat kosong, hanya berisi atribut, dan tidak memiliki tag penutup.
Tag <img> memiliki dua atribut yang wajib:
src - Menentukan path (alamat) gambar
alt - Menentukan teks alternatif untuk gambar
Syntax HTML untuk menyematkan gambar dengan tag `<img>`
Contoh Codigan :
<img src="url" alt="alternatetext">
Penjelasan atribut:
* src`: Menentukan path atau URL gambar.
* alt`: Menentukan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat atau untuk keperluan aksesibilitas.
Width and Height, atau Style?
Atribut width, height, dan style semuanya valid dalam HTML.
Namun, kami menyarankan untuk menggunakan atribut style. Ini mencegah lembar gaya (style sheets) 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>
Ringkasan Bab
Gunakan elemen HTML <img> untuk mendefinisikan gambar
Gunakan atribut HTML src untuk mendefinisikan URL gambar
Gunakan atribut HTML alt untuk mendefinisikan teks alternatif untuk gambar, jika tidak dapat ditampilkan
Gunakan atribut HTML width dan height atau properti CSS width dan height untuk mendefinisikan ukuran gambar
Gunakan properti CSS float untuk membuat gambar mengambang ke kiri atau kanan
Peta Gambar (Image Maps)
Tag HTML <map> digunakan untuk mendefinisikan peta gambar. Sebuah peta gambar adalah gambar dengan area yang dapat diklik. Area tersebut didefinisikan dengan satu atau lebih tag <area>.
Contoh:
html
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Tambahkan area yang dapat diklik.
Area yang dapat diklik didefinisikan menggunakan elemen <area>.
Bentuk (Shape)
Anda harus mendefinisikan bentuk dari area yang dapat diklik, dan Anda dapat memilih salah satu dari nilai-nilai berikut:
- `rect` - mendefinisikan wilayah berbentuk persegi panjang.
- `circle` - mendefinisikan wilayah berbentuk lingkaran.
- `poly` - mendefinisikan wilayah berbentuk poligon.
- `default` - mendefinisikan wilayah seluruhnya.
Anda juga harus mendefinisikan beberapa koordinat untuk menempatkan area yang dapat diklik pada gambar.
Shape="rect"
Koordinat untuk `shape="rect"` datang dalam pasangan, satu untuk sumbu x dan satu untuk sumbu y.
Jadi, koordinat 34,44 terletak 34 piksel dari margin kiri dan 44 piksel dari atas.
Ringkasan Bab
- Gunakan elemen HTML `<map>` untuk mendefinisikan peta gambar.
- Gunakan elemen HTML `<area>` untuk mendefinisikan area yang dapat diklik dalam peta gambar.
- Gunakan atribut HTML `usemap` dari elemen `<img>` untuk menunjuk ke peta gambar.
HTML Tag Gambar
Tag Description
<img> Mendefinisikan gambar
<map> Mendefinisikan peta gambar
<area> Mendefinisikan area yang dapat diklik di dalam peta gambar
<picture> Mendefinisikan wadah untuk beberapa sumber daya gambar
Latar Belakang Gambar pada Elemen HTML
Untuk menambahkan gambar latar belakang pada elemen HTML, gunakan atribut style HTML dan properti CSS background-image.
Tambahkan gambar latar belakang pada elemen HTML:
Contoh
```html
<p style="background-image: url('img_girl.jpg');">
```
Anda juga dapat menentukan gambar latar belakang dalam elemen `<style>`, di bagian `<head>`:
Contoh:
```html
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
```
Latar Belakang pada Halaman
Jika Anda ingin seluruh halaman memiliki gambar latar belakang, Anda harus menentukan gambar latar belakang pada elemen `<body>`:
Contoh:
```html
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
```
Pengulangan Latar Belakang
Jika gambar latar belakang lebih kecil dari elemen, gambar tersebut akan diulang, secara horizontal dan vertikal, hingga mencapai ujung elemen:
Contoh
```html
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
```
Untuk menghindari pengulangan gambar latar belakang, atur properti background-repeat menjadi no-repeat:
Contoh
```html
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
```
Penutup Latar Belakang
Jika Anda ingin gambar latar belakang mencakup seluruh elemen, Anda dapat menetapkan properti background-size menjadi cover. Juga, untuk memastikan seluruh elemen selalu tercakup, atur properti background-attachment menjadi fixed:
```html
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
```
Peregangan Latar Belakang
Jika Anda ingin gambar latar belakang merentang untuk menyesuaikan seluruh elemen, Anda dapat menetapkan properti background-size menjadi 100% 100%:
```html
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
```
Elemen HTML `<picture>`
Elemen HTML `<picture>` memungkinkan Anda menampilkan gambar yang berbeda untuk perangkat atau ukuran layar yang berbeda.
Elemen HTML `<picture>`
Elemen HTML `<picture>` memberikan fleksibilitas lebih kepada pengembang web dalam menentukan sumber daya gambar.
Elemen `<picture>` berisi satu atau lebih elemen `<source>`, masing-masing merujuk pada gambar yang berbeda melalui atribut srcset. Dengan cara ini, browser dapat memilih gambar yang paling sesuai dengan tampilan dan/atau perangkat saat ini.
Setiap elemen `<source>` memiliki atribut media yang menentukan kapan gambar tersebut paling sesuai.
Contoh
```html
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
```
Kapan Menggunakan Elemen Picture
Ada dua tujuan utama untuk elemen `<picture>`:
1. Bandwidth
Jika Anda memiliki layar atau perangkat kecil, tidak perlu memuat file gambar besar. Browser akan menggunakan elemen `<source>` pertama dengan nilai atribut yang cocok dan mengabaikan elemen-elemen berikutnya.
2. Dukungan Format
Beberapa browser atau perangkat mungkin tidak mendukung semua format gambar. Dengan menggunakan elemen `<picture>`, Anda dapat menambahkan gambar dari semua format, dan browser akan menggunakan format pertama yang dikenali, mengabaikan elemen-elemen berikutnya.
Contoh
Browser akan menggunakan format gambar pertama yang dikenali:
```html
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
```