🖼️ Modul 3: Foto & Daftar

Belajar Memasang Gambar dan Membuat List

HTML CSS Media

1. 🎯 Tujuan Belajar

Setelah selesai membaca modul ini, adik-adik bisa:

2. 🧸 Penjelasan Materi (Bahasa Bayi)

A. Memasang Foto (<img>)

Ingat waktu kita menempel foto di buku tempelan (scrapbook)? Di website, kita juga bisa menempel foto!

Rumus Rahasia Foto:

<img src="alamat_foto" width="ukuran">
  • src (Source) → Ini seperti alamat rumah foto.
  • width → Untuk meminta komputer mengecilkan atau membesarkan foto.
  • alt → Ini seperti kita membisikkan deskripsi foto. Kalau fotonya rusak, komputer akan menulis teks ini!
📷 Analogi: Tag <img> itu spesial, tidak punya pasangan tutup. Cukup satu kali tulis, seperti stiker yang sekali tempel!

B. Membuat Daftar (List)

Kadang kita butuh membuat daftar, seperti Daftar Belanja atau Juara Lomba.

Dua jenis daftar:

  • <ul> (Unordered List) → Daftar pakai titik bulat (•). Cocok untuk daftar makanan, hobi.
  • <ol> (Ordered List) → Daftar pakai angka (1, 2, 3). Cocok untuk juara 1, 2, 3 atau langkah-langkah.
  • <li> (List Item) → Ini adalah setiap items di dalam daftar.
🛒 Analogi: <ul> itu seperti keranjang belanja (urutan tidak penting). <ol> itu seperti podium juara (urutan sangat penting!).

3. 🎮 Demo Interaktif

🖼️ Coba Pasang Foto & Buat Daftar

Klik tombol untuk melihat contoh langsung!

4. 🛠️ Langkah-langkah Belajar

Pertemuan 1: Memasang Foto Profil

1

Menemukan Tempat untuk Foto

Cari bagian <body>. Biasanya kita taruh foto di bawah judul <h1>.

2

Menulis Kode Foto

<h1>Halo, Saya Budi!</h1>

<!-- Ini kode fotonya -->
<img src="foto-saya.jpg" width="200" alt="Foto wajah Budi">

Catatan: Kalau tidak punya file foto, bisa pakai link dari internet!

<img src="https://placekitten.com/200/200" 
     width="200" alt="Kucing lucu">
3

Menghias Foto dengan CSS

img {
    border: 5px solid white;
    border-radius: 100px; /* Bikin foto jadi bulat! */
}

border-radius itu seperti mengikir sudut tajam supaya jadi melengkung.

Pertemuan 2: Membuat Daftar Kesukaan

1

Daftar Makanan (Pakai Titik)

<h2>Makanan Kesukaanku</h2>
<ul>
    <li>Nasi Goreng</li>
    <li>Es Krim</li>
    <li>Ayam Goreng</li>
</ul>
2

Daftar Langkah (Pakai Angka)

<h2>Cara Bangun Tidur</h2>
<ol>
    <li>Buka Mata</li>
    <li>Matikan Alarm</li>
    <li>Langsung Mandi</li>
</ol>

Karena kita pakai <ol>, komputer otomatis memberi angka 1, 2, 3!

3

Menghias Daftar dengan CSS

ul, ol {
    font-size: 18px;
    line-height: 1.5;
}

li {
    margin-bottom: 10px;
}
⚠️ Masalah Foto Rusak: Ini hal paling umum! Biasanya karena nama file salah (misal Foto.jpg vs foto.jpg). Komputer itu sensitif, huruf besar dan kecil itu beda!

5. 📝 Penilaian

6. 💡 Pesan untuk Guru / Orang Tua

Hak Cipta: Jika mengambil gambar dari internet, ajarkan sederhana: "Ambil gambar yang boleh dipakai gratis saja."

Tag Bersarang (Nesting): Jelaskan bahwa <li> itu seperti anak kecil yang harus selalu digandeng induknya (<ul> atau <ol>). Tidak boleh jalan sendirian.

7. 🎁 Lembar Contekan Kode

📚 Cheat Sheet Foto & List

Kode Foto:
<img src="nama-gambar.jpg" width="200" alt="keterangan">
Daftar Titik (Belanja):
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
Daftar Angka (Juara):
<ol>
  <li>Juara 1</li>
  <li>Juara 2</li>
</ol>
CSS Foto Bulat:
img { border-radius: 100px; }

🎉 Selamat!

Website kamu sekarang sudah seperti majalah kecil:
1️⃣ Ada Fotonya ✅
2️⃣ Ada Tulisannya ✅
3️⃣ Ada Daftarnya ✅

Siap lanjut ke Tabel & Formulir di Modul 4? 📊