Teks kedua resep sudah lengkap, kini giliran yang membuat pembaca lapar: foto hidangan. Pada bagian ini kita menyisipkan foto tiap resep sebagai figure — gambar dan keterangannya diikat menjadi satu unit — lengkap dengan alt deskriptif, ukuran intrinsik, dan figcaption.

Foto Resep Pertama #

Sisipkan blok berikut di dalam article Nasi Goreng Kampung, tepat setelah h2 judulnya dan sebelum heading Bahan:

html 
<figure>
  <img
    src="assets/resep-nasi-goreng.svg"
    alt="Piring nasi goreng kecokelatan dengan telur mata sapi dan irisan cabai merah"
    width="800"
    height="600">
  <figcaption>Nasi Goreng Kampung — menu sarapan favorit keluarga akhir pekan.</figcaption>
</figure>

Mari kita bedah baris demi baris:

  1. figure (baris 1): unit konten mandiri — gambar dan keterangan di dalamnya menjadi satu kesatuan yang bisa dipindah ke posisi mana pun tanpa lepas dari keterangannya (rujuk chapter Figure dan Figcaption).
  2. Atribut dipecah per baris (baris 2-6): baris <img> dengan empat atribut sekaligus melebihi batas keterbacaan, jadi tiap atribut mendapat barisnya sendiri dengan urutan tetap: src, alt, width, height.
  3. alt yang mendeskripsikan (baris 4): foto makanan menjawab pertanyaan “apa yang terlihat” — piring, warna nasi yang kecokelatan, telur mata sapi, irisan cabai. Bukan nama berkas, bukan pula “gambar makanan” yang tidak mengatakan apa-apa.
  4. figcaption (baris 7): keterangan yang TAMPIL untuk semua pembaca — nama hidangan plus konteksnya. Isinya sengaja berbeda dari alt: alt menggantikan gambar bagi yang tidak melihatnya, figcaption menambah informasi bagi yang melihatnya.
  5. width dan height (baris 5-6): ukuran intrinsik berkas — browser menyiapkan kotak berperbandingan 800:600 sejak membaca HTML, sehingga konten di bawahnya tidak melompat saat foto termuat (rujuk chapter Intrinsic Width dan Height).

Pembagian tugas alt dan figcaption perlu ditegaskan karena paling sering tertukar: pembaca layar membacakan alt saat melewati gambar, lalu membaca figcaption sebagai teks biasa. Isi yang sama persis di keduanya membuat pengguna tersebut mendengar kalimat yang sama dua kali.

Foto Resep Kedua #

Pola yang sama untuk Pisang Goreng Crispy, tepat setelah h2-nya:

html 
<figure>
  <img
    src="assets/resep-pisang-goreng.svg"
    alt="Tumpukan pisang goreng kuning keemasan dengan balutan tepung yang renyah"
    width="800"
    height="600">
  <figcaption>Pisang Goreng Crispy — teman minum teh di sore hari.</figcaption>
</figure>

Hasil pada Browser #

Dengan foto tersedia: gambar tampil selebar 800 piksel di bawah judul resep, disusul keterangan yang menjorok — pasangan yang tampak seperti majalah masak. Tanpa foto: muncul kotak gagal termuat berisi teks alt, dan keterangan tetap tampil di bawahnya. Ukuran halaman tidak bergeser sedikit pun karena kotak 800×600 sudah disiapkan sejak awal.

Inilah keadaan halaman pada akhir Bagian 4 — setiap resep kini dibuka foto hidangan dan keterangannya:

Pada demo, dua foto hidangan diganti placeholder SVG berukuran sama agar tampilannya langsung terlihat — pada berkas sungguhan, foto termuat dari folder assets/ dengan pasangan figure dan figcaption yang sama persis.

Ringkasan Bagian 4 #

  • Foto hidangan dibungkus figure agar keterangannya ikut berpindah.
  • alt mendeskripsikan yang terlihat bagi yang tidak melihat; figcaption menambah konteks bagi semua pembaca — keduanya tidak boleh salin-menyalin.
  • width/height intrinsik mencegah lompatan tata letak saat foto termuat.
  • Foto disediakan pembaca di folder assets/; nilai src menyesuaikan nama berkas milik masing-masing.

Bagian terakhir melengkapi informasi ringkas tiap resep: porsi, waktu, dan tingkat kesulitan.