📊 Modul 4: Tabel & Formulir

Belajar Membuat Jadwal dan Kotak Isian

HTML CSS Data

1. 🎯 Tujuan Belajar

Setelah selesai membaca modul ini, adik-adik bisa:

2. 🧸 Penjelasan Materi (Bahasa Bayi)

A. Membuat Tabel (<table>)

Pernah lihat Jadwal Pelajaran yang ditempel di dinding kelas? Atau lihat Papan Skor saat nonton sepak bola? Itu namanya Tabel.

Di HTML, kita butuh 3 teman untuk bikin tabel:

  • <table> → Ini adalah Papan Besar-nya.
  • <tr> (Table Row) → Ini adalah Baris-nya (garis mendatar).
  • <td> (Table Data) → Ini adalah Kotak Kecil-nya (tempat menulis).
  • <th> (Table Header) → Ini adalah Kotak Judul (tebal & di atas).
🏫 Analogi: <table> itu seperti buku tulis kotak-kotak. <tr> itu baris garisnya. <td> itu kotak kecil tempat menulis angka.

B. Membuat Formulir (<form>)

Pernah isi Kertas Absen atau Kuesioner Ulang Tahun? Di website, kita bisa bikin kertas isian seperti itu.

Alat-alat bikin formulir:

  • <form> → Bungkus utamanya.
  • <label> → Petunjuk soal (Misal: "Siapa Namamu?").
  • <input> → Kotak kosong untuk mengetik.
  • <button> → Tombol untuk mengirim.

3. 🎮 Demo Interaktif

📊 Coba Buat Tabel & Formulir

Klik tombol untuk melihat contoh langsung di bawah ini!

4. 🛠️ Langkah-langkah Belajar

Pertemuan 1: Membuat Jadwal Pelajaran

1

Membuat Kerangka Tabel

Ingat urutannya: Table → Baris (tr) → Kotak (td/th).

<table border="1">
    <tr>
        <th>Hari</th>
        <th>Mapel</th>
    </tr>
    <tr>
        <td>Senin</td>
        <td>Matematika</td>
    </tr>
</table>

border="1" supaya ada garis pinggirnya.

2

Menghias Tabel dengan CSS

table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
    padding: 10px;
}
th {
    background-color: #4ecdc4;
    color: white;
}

Pertemuan 2: Membuat Formulir Kontak

1

Membuat Kotak Isian

<form>
    <label>Nama:</label><br>
    <input type="text"><br><br>

    <label>Pesan:</label><br>
    <textarea></textarea><br><br>

    <button>Kirim</button>
</form>

<br> adalah kode untuk Enter (Baris Baru).

2

Menghias Formulir

input, textarea {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
}
button {
    background-color: #ff6b6b;
    color: white;
    padding: 10px 20px;
}
Catatan Penting: Tombol "Kirim" di HTML hanya tampilan saja. Untuk benar-benar mengirim email, butuh bahasa pemrograman lain (seperti PHP) yang akan dipelajari nanti.

5. 📝 Penilaian

6. 💡 Pesan untuk Guru / Orang Tua

Tabel itu Rumit: Struktur tabel sering membuat bingung pemula. Gunakan analogi "Ibu Kota" (Table), "Provinsi" (tr), dan "Kabupaten" (td).

Aksesibilitas: Tekankan pentingnya <label>. Tanpa label, orang yang menggunakan pembaca layar tidak akan tahu kotak itu untuk apa.

7. 🎁 Lembar Contekan Kode

📚 Cheat Sheet Tabel & Form

Kode Tabel:
<table>
  <tr><th>Judul</th></tr>
  <tr><td>Isi</td></tr>
</table>
Kode Formulir:
<form>
  <label>Nama:</label>
  <input type="text">
  <button>Kirim</button>
</form>
CSS Cantik:
input { border-radius: 5px; }
button { background: green; color: white; }

🎉 Luar Biasa!

Website kamu sekarang sudah lengkap:
1️⃣ HTML (Kerangka) ✅
2️⃣ CSS (Hiasan) ✅
3️⃣ Media (Foto & Daftar) ✅
4️⃣ Data (Tabel & Form) ✅

Siap lanjut ke JavaScript di Modul 5? 🚀