Tugas Kelompok: Web Design HTML & CSS

KKA • Kelas 9 • Kelompok 3–4 Siswa • Google Docs / Microsoft Word

⬇ Download Panduan (PDF)

Versi lengkap panduan ini juga tersedia dalam format PDF.

🎯 Tujuan Pembelajaran

  1. Mempraktikkan pembuatan struktur dasar halaman web menggunakan HTML (Heading, Paragraf, Gambar, List, Link).
  2. Mempercantik tampilan visual web menggunakan CSS (Warna, Font, Background, dan Ukuran Teks).
  3. Melatih kerja sama tim, pembagian peran, dan kolaborasi penyusunan dokumen digital secara real-time.

🏷️ Fitur & Tag HTML/CSS yang Wajib Ada

#Elemen / TagFungsi dalam Web
1<!DOCTYPE html>, <html>, <head>, <body>Kerangka dan struktur dasar dokumen HTML5
2<h1>Judul utama halaman web
3<p>Paragraf penjelas atau deskripsi konten
4<img src="..." alt="...">Gambar pendukung atau produk
5<ul> / <ol> dan <li>Daftar/list item (katalog, menu, atau fitur)
6<a href="...">Tautan/link menuju halaman luar
7CSS PropertiesMengatur color, background-color, font-family, dan font-size

🎨 4 Pilihan Tema Tugas

Setiap kelompok wajib memilih satu dari empat tema berikut:

🛒

Toko Online Sederhana

Katalog produk untuk toko online impian (sepatu, boba/kopi, merchandise game, toko buku).

Wajib: nama toko (h1), foto produk (img), deskripsi toko (p), daftar produk & harga (ul/li), link kontak pemesanan (a).
🎮

Galeri & Review Game / Hobi

Halaman ulasan atau panduan mengenai game favorit, klub olahraga, atau hobi populer kelompok.

Wajib: judul game/hobi (h1), banner/screenshot (img), ringkasan gameplay/sejarah (p), daftar karakter/perlengkapan (ul/li), link trailer resmi (a).
🐾

Kampanye Edukasi / Pelestarian Satwa

Halaman edukasi publik untuk peduli lingkungan, satwa terancam punah, atau gaya hidup zero waste.

Wajib: judul kampanye (h1), foto satwa/maskot (img), fakta penting (p), daftar tindakan nyata (ul/li), link organisasi pelestarian alam (a).
🍽️

Menu Restoran / Cafe Digital

Halaman menu interaktif untuk kafe, bakery, atau rumah makan tematik.

Wajib: nama kafe/restoran (h1), foto makanan/suasana (img), konsep kafe (p), daftar menu & harga (ul/li), link lokasi Google Maps (a).

👥 Alur Kerja & Pembagian Peran Kelompok

1
HTML Structure & MediaMenulis struktur utama (<!DOCTYPE html> hingga <body>) dan menyusun tag gambar (<img>) serta tautan (<a>).
2
HTML Content CreatorMenyusun isi paragraf deskripsi (<p>) dan membuat daftar/list (<ul>, <li>).
3
CSS DesignerMenulis aturan styling CSS (kombinasi color, background-color, font-family, dan font-size).
4
Editor & Tester (Opsional)Mengecek kerapian kode dan melakukan uji coba (run) kode di browser/editor.

⌨️ Petunjuk Teknis Penulisan Kode di Google Docs / Word

Penting untuk siswa: pengolah kata sering mengubah tanda petik dan kapitalisasi secara otomatis. Ikuti langkah berikut agar kode HTML/CSS tidak error:

  1. Matikan Smart Quotes — di Google Docs, buka menu Tools > Preferences > hilangkan centang pada Smart quotes (agar tanda petik " tetap lurus).
  2. Gunakan Font Monospace — ubah jenis font untuk baris kode menjadi Courier New atau Consolas.
  3. Gunakan Tabel Kode — buat tabel 1x1 untuk menempatkan kode agar terlihat rapi seperti code editor.

📋 Contoh Format Lembar Kerja Kelompok

Salin format di bawah ini ke dalam dokumen kelompok:

Nama Kelompok:  
Kelas:  
Tema yang Dipilih:  

Anggota Kelompok & Peran:
1. Nama Siswa 1 (Peran: Structure & Media)
2. Nama Siswa 2 (Peran: Content Creator)
3. Nama Siswa 3 (Peran: CSS Designer)

💻 Contoh Kode HTML & CSS (index.html)

<!DOCTYPE html> <html> <head> <title>Toko Boba Ceria</title> <style> /* Kode CSS diletakkan di sini */ body { background-color: #FEEFDD; font-family: Arial, sans-serif; } h1 { color: #78350F; } p { font-size: 16px; color: #451A03; } </style> </head> <body> <h1>Toko Boba Ceria</h1> <img src="https://via.placeholder.com/300x150" alt="Foto Boba Ceria"> <p>Selamat datang di Toko Boba Ceria! Kami menyajikan minuman boba segar dengan berbagai varian rasa kekinian.</p> <p>Menu Favorit Kami:</p> <ul> <li>Brown Sugar Milk Tea - Rp 18.000</li> <li>Matcha Latté Boba - Rp 20.000</li> <li>Taro Cheese Cream - Rp 22.000</li> </ul> <a href="https://instagram.com">Pesan via Instagram Kami</a> </body> </html>

📝 Rubrik Penilaian

KriteriaBobotDeskripsi
Kelengkapan HTML35%Menggunakan seluruh tag wajib (h1, p, img, ul/li, a).
Penerapan CSS35%Mengubah warna teks, background, jenis font, dan ukuran font secara harmoni.
Kreativitas & Konten15%Kejelasan informasi, kerapian susunan, dan penyesuaian dengan tema.
Kolaborasi Tim15%Pembagian peran terisi jelas dan terdapat riwayat kontribusi anggota.
← Kembali