Program Dasar-Dasar Pembuatan Website untuk Siswa SMP

Aksarahisa

Saya Asep Rumana, Saya senang menulis tentang cara meningkatkan pengetahuan, keterampilan, bakat, dan potensi diri secara keseluruhan untuk mencapai tujuan hidup dan kesuksesan, baik dalam kehidupan pribadi maupun profesional. Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Jika ada saran dan kritik mengenai blog ini, silakan bisa anda sampaikan lewat Formulir Kontak.
Terima kasih.

Facebook

Tujuan Umum: Memberikan pemahaman dasar tentang cara kerja web dan membekali siswa dengan keterampilan dasar untuk membuat halaman web sederhana dan menarik.

Durasi: Idealnya 8–12 sesi (2 jam per sesi) atau disesuaikan dengan kurikulum sekolah.

1. Modul Pengantar: Mengenal Dunia Web (Sesi 1-2) 🚀

Topik	Pokok Bahasan & Aktivitas	Hasil Pembelajaran
A. Bagaimana Web Bekerja?	Penjelasan sederhana: Apa itu Internet, Website, Browser, Server, dan URL.	Siswa dapat menjelaskan perbedaan Internet dan Web serta peran Browser dan Server.
B. Tools dan Lingkungan Kerja	Pengenalan Code Editor sederhana (misalnya VS Code atau editor online seperti CodePen/Glitch) dan cara menyimpannya.	Siswa siap menulis kode pertamanya.
C. Dasar HTML	Peran HTML (HyperText Markup Language) sebagai kerangka. Struktur dasar (`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`).	Siswa dapat membuat dokumen HTML sederhana dan menyimpannya.
D. Tag Penting Pertama	Mengenal heading (`<h1>` - `<h6>`), paragraf (`<p>`), dan line break (`<br>`).	Siswa dapat menyusun teks pada halaman web.

2. Modul HTML: Struktur dan Konten (Sesi 3-4) 🧱

Topik	Pokok Bahasan & Aktivitas	Hasil Pembelajaran
A. Tautan (Link) Penting	Tag `<a>` dan atribut `href`. Membuat link internal dan eksternal.	Siswa dapat menghubungkan halaman web dan menuju ke situs lain.
B. Memasukkan Gambar	Tag `<img>` dan atribut `src` serta `alt`. Praktik mencari dan memasukkan gambar yang tepat.	Siswa dapat menampilkan gambar di halaman web.
C. Daftar (List)	Membuat daftar berurutan (`<ol>`) dan tidak berurutan (`<ul>`).	Siswa dapat mengatur informasi dalam format daftar.
Proyek Mini: Membuat halaman web "Tentang Saya" (Biodata Sederhana) dengan judul, paragraf, link, dan gambar.

3. Modul CSS: Estetika dan Desain (Sesi 5-7) 🎨

Topik	Pokok Bahasan & Aktivitas	Hasil Pembelajaran
A. Mengenal CSS	Peran CSS (Cascading Style Sheets) sebagai "penata rias" halaman web. Tiga cara penulisan CSS (fokus pada Internal dan External).	Siswa memahami kenapa tampilan web bisa berwarna-warni dan rapi.
B. Selektor Dasar	Menggunakan selektor elemen (misalnya `h1`, `p`) untuk menata.	Siswa dapat menargetkan elemen tertentu untuk ditata.
C. Properti CSS Esensial	Mengubah warna teks (`color`), warna latar belakang (`background-color`), dan ukuran teks (`font-size`).	Siswa dapat mengubah tampilan dasar halaman web.
D. Mengatur Teks dan Box	Mengatur jenis huruf (`font-family`), perataan teks (`text-align`). Konsep sederhana Box Model (fokus pada margin dan padding).	Siswa dapat memberi ruang dan mengatur tampilan blok elemen.
Proyek Mini: Mengubah halaman "Tentang Saya" menjadi menarik dan bergaya menggunakan CSS (warna, font, dan tata letak sederhana).

4. Modul Publikasi dan Konten Interaktif Sederhana (Sesi 8-10) 💡

Topik	Pokok Bahasan & Aktivitas	Hasil Pembelajaran
A. Praktik Membuat Menu Navigasi	Menggabungkan list (`<ul>`) dan link (`<a>`) untuk membuat menu sederhana.	Siswa dapat membuat navigasi dasar untuk multi-halaman.
*B. Dasar Responsiveness* (Bonus/Lanjutan)**	Memperkenalkan konsep tampilan yang menyesuaikan di HP dan komputer (menggunakan viewport meta tag).	Siswa menghargai desain yang baik di berbagai perangkat.
*C. Hosting* Sederhana**	Cara mempublikasikan website agar bisa dilihat orang lain (misalnya menggunakan GitHub Pages atau platform online seperti Glitch/Netlify).	Siswa dapat memamerkan karyanya secara online.
D. Pengenalan Javascript (Opsional/Lanjutan)	Pengenalan fungsi JavaScript (interaksi). Contoh: Mengubah konten dengan tombol (onClick event sederhana).	Siswa memahami bahwa ada bahasa pemrograman untuk membuat web interaktif.

5. Proyek Akhir: Website Sekolah/Hobi (Sesi 11-12) 🏆

Tugas: Setiap siswa (individu/kelompok kecil) merancang dan membuat website sederhana 3 halaman tentang topik yang mereka sukai (Hobi, Tim Olahraga, Komunitas Sekolah, dll.)

Kriteria Penilaian:

Struktur HTML yang bersih dan lengkap.
Desain CSS yang estetis dan rapi.
Memiliki navigasi yang berfungsi antar halaman.
Dipublikasikan online.

💡 Tips Tambahan untuk Siswa SMP

Gunakan Analogi: Jelaskan HTML sebagai tulang, CSS sebagai kulit dan pakaian, dan JavaScript sebagai otak atau otot yang membuat bergerak.
Fokus pada Output Visual: Siswa SMP lebih cepat termotivasi jika mereka segera melihat hasil dari kodenya (misalnya, warna berubah, gambar muncul).
Aktivitas Gamifikasi: Selingi sesi dengan tantangan koding kecil atau "Debugging Games" untuk menemukan kesalahan pada kode.
Sumber Daya yang Ramah Anak: Arahkan ke tutorial atau referensi yang bahasanya sederhana dan visual (misalnya W3Schools yang disederhanakan).
Dorong Kreativitas: Beri kebebasan penuh dalam memilih warna dan konten (selama masih dalam batas wajar) agar mereka merasa memiliki proyek tersebut.