Image, ImageMap dan Multimedia
Pengantar
Selain tulisan, web dapat memuat gambar, animasi, grafik, audio, dan video. Untuk gambar, Format yang biasanya digunakan antara lain : GIF (Graphic Interchange Format), PNG (Portable Network Graphics) dan JPEG (Joint Photographic Experts Group).Element Gambar HTML
- Gambar didefinisikan menggunakan tag <img>.
<img src = "url" alt = "some_text" style = "width:width;height:height;">
- Termasuk empty element, sehingga bisa juga ditulis dengan <img/>
-
Attribut:
- src: nama file gambar (lengkap dengan Url jika merupakan gambar eksternal, relative path jika merupakan gambar pada website yang sama).
- alt: teks alternatif jika gambar tidak dapat ditampilkan (karena koneksi lambat atau kesalahan pada atribut src).
- Style: dapat mengatur lebar (width), tinggi (height) gambar, mengatur peletakkan gambar ke kiri atau ke kanan (float), garis pinggir (border).
Tag <figure> dan <figcaption>
- <figure> digunakan bersamaan dengan <figcaption> untuk menandai diagram, ilustrasi, atau foto.
- <figcaption> mendefinisikan caption (judul) untuk untuk tag <figure> biasa diletakan dibawah gambar yang menjadi figure.
Tag <picture> dan <source>
- Tag <picture> untuk menambah fleksibilitas ketika menampilkan gambar yang dapat terdiri dari berbagai tag <source>
- Tag <source> untuk mereferensikan berbagai sumber gambar.
*note: srcset dan src berisi url dimana file disimpan
Ketika browser di zoom
Untuk lebih jelasnya silahkan zoom gambar dibawah ini untuk melihat perubahan dengan menekan tombol Ctrl + Scroll Up
Image Map
Merupakan gambar dengan area yang dapat diklik dan menampilkan halaman lainnya.Jenis - jenis image map :
- Polygon
- Rectangle
- Circle
![]() |
| Source : https://www.techadvisor.co.uk/feature/pc-components/amd-vs-intel-3528212/ |
Video dan Audio
Tag yang digunakan :- Tag <video> memutar video dengan format : MP4, WebM dan Ogg.
- Tag <audio> memutar audio dengan format : MP3, Wav dan Ogg.
- Tag <source> mendefinisikan berbagai sumber media untuk diputar pada tag <video> dan <audio>.
contoh detail :
[Lanjutkan ke Table]







0 komentar:
Posting Komentar