RENCANA PELAKSANAAN PEMBELAJARAN (RPP)

1. Identitas

Komponen	Keterangan
Nama Sekolah	SMK Salafiyah
Mata Pelajaran	Pemprograman Web Dasar
Kategori Mapel	Produktif
Kelas	X
Tema Pokok	Web Design Foundation
Alokasi Waktu	5 Pertemuan × 6 JP × 45 menit = 30 JP

2. Tujuan Pembelajaran

1. Menjelaskan konsep arsitektur web — Murid memahami alur pengiriman data dari browser ke server agar mereka tahu bahwa web bukan sihir, melainkan sistem yang logis.
2. Membuat form dan tabel HTML — Murid mampu menyusun kerangka data, yang penting untuk membuat sistem pendataan sederhana di desa atau warung.
3. Menerapkan sintaks CSS — Murid dapat menghias tampilan web agar menarik, sehingga mereka mampu mengubah tampilan teks membosankan menjadi visual yang nyaman dipandang.
4. Mengimplementasikan CSS Box Model — Murid mengatur jarak dan ruang elemen agar rapi, layaknya menata barang di etalase toko agar pembeli merasa nyaman.
5. Debugging dengan Developer Tools — Murid mampu memperbaiki kesalahan kode secara mandiri, melatih ketelitian dan daya juang saat menghadapi masalah teknis.

Profil Pelajar Pancasila

• Mandiri: Murid mencoba mencari solusi atas error pada kodenya sendiri melalui bantuan fitur inspeksi browser sebelum bertanya.
• Gotong Royong: Murid melakukan tutor sebaya, di mana yang lebih paham membantu teman yang kesulitan tanpa merasa lebih pintar.
• Kreatif: Murid memodifikasi desain web dengan warna dan tata letak sesuai selera pribadi setelah memahami konsep dasarnya.

3. Pemahaman Bermakna & Pertanyaan Pemantik

Pemahaman Bermakna: Membuat website itu seperti membangun rumah; HTML adalah kerangka bata dan kayu yang kokoh, sedangkan CSS adalah cat dan hiasan yang membuatnya indah. Jika kerangkanya tidak lurus (salah kode), maka rumahnya akan miring, dan kita harus tahu di mana letak bata yang perlu diperbaiki agar rumah tersebut nyaman dihuni oleh pengunjung (user).

1. Kalau kalian ingin mengirim surat ke teman, apa saja yang harus ditulis di amplopnya agar sampai?
2. Jika kalian menata barang di warung, kenapa harus ada jarak antar barang agar tidak terlihat sesak?
3. Apa yang terjadi jika kita membangun rumah tanpa mengikuti ukuran yang benar, apakah dindingnya bisa berdiri tegak?

4. Desain Pembelajaran & Bahan Ajar

Model: Project Based Learning (PjBL) — agar murid belajar melalui pengalaman nyata membangun sesuatu yang bisa mereka lihat dan banggakan.

Metode:

• Demonstrasi: Guru menunjukkan langkah kecil untuk meminimalkan beban kognitif.
• Tutor Sebaya: Membangun rasa percaya diri murid melalui kolaborasi teman sebaya.

Alat & Bahan:

• Laptop/PC dengan browser Chrome/Edge.
• Aplikasi Editor Kode (VS Code atau Notepad++).
• Lembar kerja (Cheat Sheet) sintaks HTML/CSS dalam bahasa sederhana.
• Proyektor untuk demonstrasi visual.
• Kartu tantangan (berisi masalah kode yang harus diperbaiki).

Strategi Diferensiasi:

• Murid Tertinggal: Diberikan template kode yang sudah jadi (tinggal mengisi teks) dan pendampingan khusus oleh tutor sebaya.
• Murid Cepat: Diberikan tantangan tambahan untuk membuat animasi sederhana atau layout responsif.
• Murid dengan hambatan: Penggunaan font ukuran besar pada editor dan kontras warna layar yang disesuaikan.

5. Langkah-langkah Pembelajaran

Pertemuan 1: Mengenal Arsitektur Web

Kegiatan Awal (15 menit)

1. [3 mnt] Guru menyapa hangat: "Halo semuanya, hari ini kita akan belajar bagaimana internet mengirim pesan ke HP kalian!"
2. [5 mnt] Murid menceritakan pengalaman membuka web favorit di HP.
3. [5 mnt] Guru bertanya: "Kalau kalian ketik alamat di browser, siapa yang sebenarnya mengirim gambarnya ke sini?"
4. [2 mnt] Guru menjelaskan tujuan: memahami alur Client-Server.

Kegiatan Inti (90 menit)

1. [10 mnt] Guru mendemonstrasikan analogi: Browser = Pembeli, Server = Warung.
2. [10 mnt] Murid membuka browser dan mengetik URL.
3. [10 mnt] Guru menunjukkan "Inspect Element" di browser.
4. [15 mnt] Tutor sebaya: Murid A menjelaskan cara buka Inspect, Murid B mencoba.
5. [10 mnt] Murid mencoba mengubah teks di web orang lain lewat Inspect.
6. [15 mnt] Murid mencatat alur Client-Server di buku.
7. [10 mnt] Tutor sebaya: Saling memeriksa catatan alur.
8. [10 mnt] Guru mengapresiasi keberanian murid mencoba fitur baru.

Kegiatan Penutup (15 menit)

1. [5 mnt] Guru bertanya: "Apa yang terjadi kalau servernya mati?"
2. [3 mnt] Murid menjawab dengan analogi warung tutup.
3. [5 mnt] Guru: "Kalian sudah hebat, semua sudah bisa buka Inspect hari ini."
4. [2 mnt] Preview: "Minggu depan kita akan mulai menulis kode!"

Pertemuan 2: Membuat Form dan Tabel

Kegiatan Awal (15 menit)

1. [3 mnt] Guru membuka kelas: "Pernah daftar sekolah lewat web? Nah, hari ini kita buat form-nya!"
2. [5 mnt] Murid mendiskusikan apa saja yang ada di formulir pendaftaran.
3. [5 mnt] Guru bertanya: "Bagaimana cara komputer tahu mana nama dan mana alamat?"
4. [2 mnt] Guru menjelaskan struktur tabel dan form.

Kegiatan Inti (90 menit)

1. [10 mnt] Guru mendemonstrasikan tag `` dan ``.
   [10 mnt] Murid mengetik kode `
   ` sederhana.
   [10 mnt] Guru membantu murid yang salah tutup tag.
   [15 mnt] Tutor sebaya: Membantu teman merapikan baris tabel.
   [10 mnt] Murid menambahkan kolom nama dan hobi.
   [15 mnt] Murid membuat form pendaftaran sederhana.
   [10 mnt] Tutor sebaya: Cek apakah form bisa diketik.
   [10 mnt] Guru menampilkan karya terbaik di proyektor.

   Kegiatan Penutup (15 menit)

   1. [5 mnt] Guru bertanya: "Kenapa form butuh tombol kirim?"
   2. [3 mnt] Murid menjawab untuk mengirim data.
   3. [5 mnt] Guru: "Pelan-pelan saja, yang penting kodenya benar."
   4. [2 mnt] Preview: "Besok kita kasih warna supaya cantik!"

   Pertemuan 3: CSS Dasar (Inline, Internal, External)

   Kegiatan Awal (15 menit)

   1. [3 mnt] Guru: "Web kita masih hitam putih, ayo kita beri warna!"
   2. [5 mnt] Murid memilih warna favorit untuk digunakan.
   3. [5 mnt] Guru bertanya: "Apa bedanya cat rumah kalau langsung di tembok vs pakai stiker?"
   4. [2 mnt] Guru menjelaskan 3 cara CSS.

   Kegiatan Inti (90 menit)

   1. [10 mnt] Guru mendemonstrasikan Inline CSS.
   2. [10 mnt] Murid mencoba mewarnai teks.
   3. [10 mnt] Guru menjelaskan Internal CSS (di dalam `