Bagian 2: Gambar dan Deskripsi

Kartu katalog dari Bagian 1 masih berupa nama dan satu kalimat. Pembeli umumnya menentukan pilihan dari gambar, deskripsi yang bermakna, dan harga yang jelas. Bagian ini melengkapi setiap kartu dengan ketiganya, ditambah satu atribut kecil yang menandai kategori produk. Semua konsepnya berasal dari section Images dan Media serta Lists; kini kita memakainya berulang kali dalam satu halaman.

Memilih Elemen untuk Setiap Isi Kartu #

Pemilihan elemen mengikuti makna kontennya, bukan tampilannya:

Isi kartu	Elemen yang dipakai	Alasan
Gambar produk	`img` dengan `alt`, `width`, `height`	Gambar bermakna bagi pembaca layar dan ruangnya disiapkan sejak awal
Deskripsi produk	`p`	Satu paragraf teks biasa di bawah nama produk
Berat dan harga	`dl` dengan `dt` dan `dd`	Pasangan istilah dan penjelasnya paling tepat untuk label-nilai
Penanda kategori	atribut `data-kategori` pada `li`	Nilai kustom yang dibaca JavaScript pada Bagian 4

Teks alt ditulis deskriptif, bukan sekadar nama file: ilustrasi kemasan kopi dijelaskan apa adanya karena gambar itulah yang tampil. Bila gambar gagal dimuat, teks alt menggantikannya di layar. Pasangan width dan height memberi tahu ukuran tampil gambar sehingga browser menyiapkan ruangnya sejak awal; kartu di bawahnya tidak bergeser ketika gambar selesai dimuat.

Melengkapi Setiap Kartu Produk #

File berikut menggantikan katalog.html dengan kartu yang lengkap. Simpan sebagai katalog-lengkap.html:

html
katalog-lengkap.html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Katalog produk Toko Aroma: kopi dan teh pilihan dengan harga yang jelas.">
  <title>Katalog Produk Toko Aroma</title>
</head>
<body>
  <header>
    <h1>Toko Aroma</h1>
    <p>Kopi dan teh pilihan, dikirim langsung dari Bandung</p>
  </header>
  <main>
    <ul class="katalog">
      <li class="kartu" data-kategori="kopi">
        <img src="../assets/kopi.svg" alt="Ilustrasi kemasan kopi Toko Aroma" width="120" height="120">
        <h2>Kopi Arabika Gayo</h2>
        <p>Biji kopi single origin dari dataran tinggi Gayo, Aceh. Dipanggang sedang dengan aroma floral dan keasaman ringan.</p>
        <dl>
          <dt>Berat</dt>
          <dd>200 gram</dd>
          <dt>Harga</dt>
          <dd>Rp85.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="kopi">
        <img src="../assets/kopi.svg" alt="Ilustrasi kemasan kopi Toko Aroma" width="120" height="120">
        <h2>Kopi Robusta Lampung</h2>
        <p>Biji kopi robusta dari Lampung dengan rasa pekat dan sentuhan cokelat gelap. Cocok untuk kopi susu gula aren.</p>
        <dl>
          <dt>Berat</dt>
          <dd>200 gram</dd>
          <dt>Harga</dt>
          <dd>Rp60.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="teh">
        <img src="../assets/teh.svg" alt="Ilustrasi gelas teh Toko Aroma" width="120" height="120">
        <h2>Teh Hijau Pegunungan</h2>
        <p>Daun teh hijau dari kebun di Jawa Barat. Diseduh dengan air bersuhu 80 derajat agar rasanya tetap segar.</p>
        <dl>
          <dt>Berat</dt>
          <dd>100 gram</dd>
          <dt>Harga</dt>
          <dd>Rp35.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="teh">
        <img src="../assets/teh.svg" alt="Ilustrasi gelas teh Toko Aroma" width="120" height="120">
        <h2>Teh Melati</h2>
        <p>Teh hijau yang dikeringkan bersama bunga melati sehingga aromanya wangi alami. Pas disantap sore hari.</p>
        <dl>
          <dt>Berat</dt>
          <dd>100 gram</dd>
          <dt>Harga</dt>
          <dd>Rp30.000</dd>
        </dl>
      </li>
    </ul>
  </main>
  <footer>
    <p>&copy; 2025 Toko Aroma</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text
Browser menampilkan empat kartu bertumpuk ke bawah:
  - Gambar ilustrasi di atas setiap kartu
  - Nama produk dan deskripsi dua kalimat di bawahnya
  - Di dasar kartu bertumpuk label "Berat", nilainya, label "Harga", dan harganya

Mari kita bedah kartu pertama; tiga kartu lain mengulang pola yang sama:

Baris 16: li berclass kartu membuka kartu pertama; atribut data-kategori="kopi" menandai kategorinya.
Baris 17: img menampilkan ../assets/kopi.svg; alt menjelaskan gambar, sedangkan width dan height 120 menetapkan ukuran tampilnya.
Baris 18-19: h2 dan p memuat nama serta deskripsi produk.
Baris 20-25: dl membungkus dua pasangan istilah; dt menuliskan label “Berat” dan “Harga”, sedangkan dd menampung nilainya.
Baris 27-59: tiga kartu lain mengulang pola di atas; produk teh membawa data-kategori="teh" dan gambar ../assets/teh.svg.

Pemeriksaan Hasil Tahap Ini #

Buka katalog-lengkap.html di browser; keempat gambar ilustrasi harus tampil di atas nama produk.
Perkecil lebar jendela browser dan amati: gambar tetap tampil proporsional karena width dan height terisi.
Jalankan tests/cek-struktur.html, lalu centang butir-butir kartu yang telah dipenuhi.

Keempat kartu kini utuh isinya, tetapi tampilannya masih mengikuti gaya bawaan browser. Bagian berikutnya menatanya dengan stylesheet milik proyek.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

html
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Katalog produk Toko Aroma: kopi dan teh pilihan dengan harga yang jelas.">
  <title>Katalog Produk Toko Aroma</title>
</head>
<body>
  <header>
    <h1>Toko Aroma</h1>
    <p>Kopi dan teh pilihan, dikirim langsung dari Bandung</p>
  </header>
  <main>
    <ul class="katalog">
      <li class="kartu" data-kategori="kopi">
        <img src="../assets/kopi.svg" alt="Ilustrasi kemasan kopi Toko Aroma" width="120" height="120">
        <h2>Kopi Arabika Gayo</h2>
        <p>Biji kopi single origin dari dataran tinggi Gayo, Aceh. Dipanggang sedang dengan aroma floral dan keasaman ringan.</p>
        <dl>
          <dt>Berat</dt>
          <dd>200 gram</dd>
          <dt>Harga</dt>
          <dd>Rp85.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="kopi">
        <img src="../assets/kopi.svg" alt="Ilustrasi kemasan kopi Toko Aroma" width="120" height="120">
        <h2>Kopi Robusta Lampung</h2>
        <p>Biji kopi robusta dari Lampung dengan rasa pekat dan sentuhan cokelat gelap. Cocok untuk kopi susu gula aren.</p>
        <dl>
          <dt>Berat</dt>
          <dd>200 gram</dd>
          <dt>Harga</dt>
          <dd>Rp60.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="teh">
        <img src="../assets/teh.svg" alt="Ilustrasi gelas teh Toko Aroma" width="120" height="120">
        <h2>Teh Hijau Pegunungan</h2>
        <p>Daun teh hijau dari kebun di Jawa Barat. Diseduh dengan air bersuhu 80 derajat agar rasanya tetap segar.</p>
        <dl>
          <dt>Berat</dt>
          <dd>100 gram</dd>
          <dt>Harga</dt>
          <dd>Rp35.000</dd>
        </dl>
      </li>
      <li class="kartu" data-kategori="teh">
        <img src="../assets/teh.svg" alt="Ilustrasi gelas teh Toko Aroma" width="120" height="120">
        <h2>Teh Melati</h2>
        <p>Teh hijau yang dikeringkan bersama bunga melati sehingga aromanya wangi alami. Pas disantap sore hari.</p>
        <dl>
          <dt>Berat</dt>
          <dd>100 gram</dd>
          <dt>Harga</dt>
          <dd>Rp30.000</dd>
        </dl>
      </li>
    </ul>
  </main>
  <footer>
    <p>&copy; 2025 Toko Aroma</p>
  </footer>
</body>
</html>