A.1 Identitas Modul
| Komponen | Detail |
|---|
| Nama Penyusun | (isi nama guru) |
| Institusi | SMK Bina Rahayu |
| Mata Pelajaran | Pemrograman Web |
| Kelas / Semester | XI PPLG / 1 (Ganjil) |
| Fase | F |
| Elemen / Topik | HTML/CSS & CSS Framework — Pendalaman HTML5 |
| Alokasi Waktu | 1 Pertemuan × 5 JP (225 menit) |
| Tahun Pelajaran | 2025/2026 |
| Kode Modul | PW-F-01 |
A.2 Kompetensi Awal
Peserta didik telah menguasai:
- Struktur dasar HTML (
<!DOCTYPE html>, <head>, <body>) dari kelas X.
- Elemen teks dan blok: heading, paragraf, list, link, gambar.
- Penggunaan CSS dasar: selector, box model, warna, ukuran font.
- Konsep form sederhana:
<input type="text">, <button>.
- Pemahaman dasar tentang browser sebagai interpreter HTML.
A.3 Dimensi Profil Lulusan
| Dimensi | Implementasi Konkret dalam Modul Ini |
|---|
| Penalaran Kritis | Menganalisis perbedaan elemen semantik vs non-semantik dan mengevaluasi dampak pemilihan elemen terhadap aksesibilitas dan SEO halaman web. |
| Kreativitas | Merancang dan membangun halaman web profil dengan struktur semantik yang orisinal, memilih elemen yang tepat untuk setiap bagian konten. |
| Kolaborasi | Bekerja dalam kelompok saat sesi peer-review kode, memberikan umpan balik konstruktif atas ketepatan penggunaan elemen semantik teman. |
| Kemandirian | Menyelesaikan tantangan kode secara mandiri, membaca dokumentasi MDN, dan melakukan debugging tanpa bergantung penuh pada guru. |
| Komunikasi | Mempresentasikan dan menjelaskan keputusan struktural halaman web yang dibuatnya di depan kelompok dengan alasan yang jelas. |
A.4 Sarana dan Prasarana
| No | Sarana | Keterangan |
|---|
| 1 | Lab Komputer / Laptop | Minimal 1 unit per peserta didik |
| 2 | Koneksi Internet | Untuk mengakses MDN, validator W3C |
| 3 | VS Code + ekstensi Live Server | Editor kode utama |
| 4 | Browser (Chrome/Firefox) | Untuk uji tampilan dan DevTools |
| 5 | Proyektor / Layar | Demo live coding guru |
| 6 | Kartu Elemen HTML5 (Lampiran 5) | 24 kartu cetak untuk aktivitas klasifikasi |
| 7 | LKPD Pendalaman HTML5 (Lampiran 1) | 1 lembar per peserta didik |
| 8 | Infografis Semantik HTML5 (Lampiran 6) | Cetak A3 / tayangkan di proyektor |
A.5 Target Peserta Didik
| Kategori | Jumlah Estimasi | Strategi |
|---|
| Reguler | ~70% | Skenario utama, tugas standar |
| Pencapaian Tinggi | ~15% | Tantangan aksesibilitas ARIA + validasi W3C |
| Kesulitan Belajar | ~15% | Template HTML terpandu, pendampingan kelompok kecil |
A.6 Model Pembelajaran
| Komponen | Pilihan |
|---|
| Pendekatan | Konstruktivisme — siswa membangun pemahaman melalui eksplorasi dan praktik |
| Model | Discovery Learning — mengamati, menanya, mencoba, mengolah, menyajikan |
| Metode | Live coding, card sorting (kartu elemen), peer review kode, praktik terpandu |