Section ini menyusun materi secara bertahap: kerjakan Chapter dari urutan teratas agar setiap konsep baru selalu berpijak pada konsep sebelumnya. Setiap Chapter menyertakan contoh kode yang telah diuji dan dapat Anda ikuti langsung di editor.

# Menampilkan Gambar

Tampilkan gambar dengan elemen img: atribut src dan alt, format umum, ukuran intrinsik, serta atribut width dan height.

Buka → # Atribut alt

Tulis atribut alt yang bermanfaat: teks pengganti gambar, gambar dekoratif dengan alt kosong, dan gambar fungsional.

Buka → # Responsive Images

Sajikan satu gambar untuk semua layar dengan srcset dan sizes: browser memilih file yang paling sesuai kondisinya.

Buka → # Picture dan Source

Gunakan elemen picture dan source untuk art direction serta fallback format gambar modern ke format klasik.

Buka → # Audio

Sematkan audio dengan elemen audio: controls, loop, preload, format MP3 dan OGG, serta beberapa sumber alternatif.

Buka → # Video

Sematkan video dengan elemen video: controls, poster, autoplay yang berpasangan dengan muted, dan pemilihan sumber.

Buka → # Captions dan Subtitles

Tambahkan teks pita pada media dengan elemen track dan format WebVTT agar video ramah bagi semua pengunjung.

Buka → # Media Fallbacks

Susun media dengan fallback berlapis: source bertipe, teks cadangan, onerror pada img, dan alt sebagai pengganti.

Buka →