Tugas Kelompok

Panduan Pengerjaan
Halaman Web Statis

Starter Kit · HTML/CSS · Submission via Git
Program Studi Informatika — UNTAN
Mata Kuliah Pemrograman Web
Semester Genap 2025/2026

Apa Tugas Ini?

Overview
Deskripsi Tugas

Setiap kelompok membuat satu halaman web statis bertema bebas menggunakan HTML & CSS. Halaman dikerjakan di dalam starter kit yang disediakan dosen, lalu dikumpulkan melalui Pull Request di GitHub.

📁

Starter Kit

Template siap pakai dengan layout, navigasi, dan footer sudah dibuat. Kelompok hanya mengisi konten.

✏️

Area Edit

Satu area terbatas di dalam HTML yang boleh diubah: #assignment-body

🔀

Submit via Git

Push ke branch kelompok, buat Pull Request, dosen review & merge. Tidak ada upload file manual.

02 / 12

Struktur Starter Kit

File Tree
web-tugas-kelompok/ │ ├── assets/ │ └── global/ │ ├── hero.webp ← gambar hero │ ├── logo.png ← logo UNTAN │ └── footer.png ← ornamen footer │ ├── groups/ │ ├── group-01/ │ │ ├── index.html ← EDIT DI SINI │ │ └── style.css ← styling tambahan │ ├── group-02/ ... │ └── group-05/ ... │ ├── package.json ├── .gitignore └── README.md

Aturan Folder

  • Setiap kelompok hanya boleh menyentuh folder groups/group-XX/ miliknya
  • Folder assets/global/ adalah milik bersama — jangan diubah
  • File di luar groups/ (package.json, README) — jangan diubah
  • Boleh menambah gambar sendiri di dalam folder kelompok
⚠️

Mengapa dibatasi?

5 kelompok bekerja di repo yang sama. Jika semua mengedit file yang sama, akan terjadi konflik yang sulit diselesaikan.

03 / 12

Tampilan Halaman & Area Edit

Visual Guide
groups/group-02/index.html
Informatika UNTAN — Static Assignment
▶ HALAMAN STATIS
Judul Halaman Group 02
Kelompok 02 · 2026
Header Image
✏️ #assignment-body — Area Edit Kelompok
Tulis konten di sini ↓
CATATAN TUGAS Ubah hanya area #assignment-body

Yang Sudah Tersedia (Jangan Diubah)

  • Navigasi bar atas dengan nama mata kuliah
  • Section hero dengan gambar latar
  • Header halaman dengan badge & judul
  • Meta info (kelompok, tahun)
  • Placeholder cover image
  • Sidebar "Catatan Tugas"
  • Footer dengan logo & ornamen
✅

Yang Kelompok Kerjakan

Hanya isi div <div id="assignment-body"> dengan konten HTML bertema pilihan kelompok.

04 / 12

Elemen HTML yang Bisa Dipakai

HTML Reference
<!-- Judul dan teks --> <h2>Judul Utama</h2> <h3>Sub-judul</h3> <p>Paragraf konten...</p> <!-- List --> <ul> <li>Item satu</li> <li>Item dua</li> </ul> <!-- Gambar --> <img src="./foto.jpg" alt="Keterangan"> <!-- Kutipan --> <blockquote>Kutipan penting</blockquote> <!-- Tabel --> <table> <tr><th>Kolom 1</th><th>Kolom 2</th></tr> <tr><td>Data</td><td>Data</td></tr> </table>

Semua sudah punya styling CSS

Class .article-body di style.css sudah menyediakan tampilan untuk elemen-elemen ini. Tidak perlu menulis CSS dari nol.

h2, h3, h4 p ul / ol / li img blockquote table code a (link) strong / em
🎨

CSS Tambahan

Ingin tampilan yang lebih custom? Tambahkan di groups/group-XX/style.css. Jangan mengubah CSS milik kelompok lain.

05 / 12

Contoh Konten Lengkap

Contoh Pengerjaan
<!-- START: BAGIAN YANG DIEDIT KELOMPOK --> <h2>Kecerdasan Buatan di Era Modern</h2> <p>Kecerdasan buatan (AI) telah mengubah cara kita bekerja dalam dekade terakhir...</p> <h3>Aplikasi AI di Kehidupan Sehari-hari</h3> <ul> <li>Asisten virtual (Siri, Google Assistant)</li> <li>Rekomendasi konten di media sosial</li> <li>Deteksi wajah di kamera smartphone</li> </ul> <blockquote> "AI is the new electricity." — Andrew Ng </blockquote> <img src="./gambar-ai.jpg" alt="Ilustrasi AI"> <!-- END: BAGIAN YANG DIEDIT KELOMPOK -->

Ide Tema Halaman

💻

Teknologi & Inovasi

🌏

Budaya & Pariwisata

📚

Pendidikan

🌿

Lingkungan Hidup

⚠️

Jangan gunakan JavaScript

Tugas ini fokus pada HTML & CSS murni. Script tag tidak akan dinilai dan tidak diperlukan.

06 / 12

Menjalankan di Komputer Lokal

Dev Server

Cara 1 — Buka Langsung (Paling Mudah)

1

Buka File Explorer

Masuk ke folder groups/group-XX/

2

Double-click index.html

Browser akan membuka halaman. Refresh setiap kali ada perubahan.

⚡

Cara 2 — Live Server (Lebih Nyaman)

Install ekstensi Live Server di VS Code → klik kanan index.html → "Open with Live Server". Halaman auto-refresh saat file disimpan.

Cara 3 — Vite Dev Server (Opsional)

Jika Node.js sudah terinstall, bisa pakai dev server yang lebih canggih:

# Install dependensi (sekali saja) npm install # Jalankan dev server npm run dev # Browser buka otomatis di http://localhost:5173 # Build untuk deploy npm run build
07 / 12

Workflow Pengerjaan Tugas

Step by Step
1

Clone Starter Kit

git clone <URL-repo-dari-dosen> — unduh ke komputer masing-masing

2

Buat Branch Kelompok

git checkout -b group-02 — satu branch per kelompok, jangan berbagi branch

3

Edit & Commit Berkala

Edit groups/group-02/index.html → git add . → git commit -m "feat(group-02): …" — lakukan minimal 3 kali commit

4

Push ke GitHub

git push origin group-02 — kirim branch ke remote repository

5

Buat Pull Request di GitHub

Buka GitHub → pilih branch → klik "Compare & pull request" → isi nama kelompok, anggota, deskripsi konten → submit

08 / 12

Aturan & Larangan

Penting!

✅ Yang BOLEH Dilakukan

  • Edit konten di dalam #assignment-body
  • Menambah class CSS baru di style.css kelompok sendiri
  • Menambah gambar di folder groups/group-XX/
  • Mengubah judul di tag <title> dan <h1> hero
  • Mengubah teks meta (nama kelompok, tahun)

❌ Yang TIDAK BOLEH Dilakukan

  • Mengubah path asset global (../../assets/global/…)
  • Menyentuh file kelompok lain
  • Mengubah layout HTML di luar #assignment-body
  • Push langsung ke branch main
  • Mengubah package.json, .gitignore, README.md
  • Menambahkan tag <script>
🚫

Konsekuensi Pelanggaran

PR yang mengubah file di luar scope kelompok akan ditolak dan diminta diperbaiki sebelum dinilai.

09 / 12

Tips Kolaborasi Kelompok

Teamwork
🗂️

Bagi Bagian Konten

Bagi halaman menjadi beberapa seksi. Setiap anggota mengerjakan seksi yang berbeda agar tidak saling tindih.

💬

Komunikasi Aktif

Beritahu tim sebelum push. Kalau ada yang sedang edit, tunggu sampai selesai dan di-commit dulu.

📝

Commit Sering

Lebih baik commit kecil-kecil daripada satu commit besar di akhir. Lebih mudah di-review dan di-rollback.

🔄

Pull Sebelum Push

Selalu git pull sebelum mulai kerja agar versi lokal kamu selalu up-to-date.

👁️

Review Sesama

Sebelum submit PR, minta satu anggota lain untuk membaca ulang HTML yang dibuat. Empat mata lebih baik dari dua.

📋

Gunakan Issue

Catat tugas yang masih belum selesai sebagai GitHub Issue. Assign ke anggota yang bertanggung jawab.

10 / 12

Kriteria Penilaian

Assessment Rubric
KriteriaBobotIndikator
Kualitas Konten 35% Informatif, terstruktur, relevan dengan tema
Penggunaan HTML 25% Variatif (heading, list, tabel, gambar, quote)
Commit & Pesan 20% Min. 3 commit, pesan bermakna & konvensional
Pull Request 20% Deskripsi lengkap: nama anggota, ringkasan, link preview

Skala Penilaian

NilaiKriteria
A (85–100) Konten lengkap, HTML bervariasi, commit > 5, PR rapi
B (70–84) Konten cukup, HTML memadai, commit ≥ 3
C (55–69) Konten minim, commit < 3, PR kurang lengkap
D (<55) Tidak mengikuti aturan scope / tidak submit PR
📅

Deadline

PR harus disubmit sebelum pertemuan berikutnya. Keterlambatan mengurangi nilai.

11 / 12

Checklist Sebelum Submit

Final Check

Cek Konten

  • Semua edit ada di dalam #assignment-body
  • Minimal gunakan: h2/h3, p, dan satu elemen list atau tabel
  • Gambar menggunakan path relatif (bukan URL eksternal asing)
  • Tidak ada tag <script>
  • Halaman tampil normal saat dibuka di browser

Cek Git

  • Minimal 3 commit dengan pesan yang berbeda dan bermakna
  • Bekerja di branch group-XX, bukan main
  • git status menunjukkan "nothing to commit" sebelum push

Cek Pull Request

  • PR dari branch group-XX ke main
  • Judul PR: "[Kelompok 02] Tugas Halaman Statis"
  • Deskripsi memuat nama semua anggota
  • Deskripsi memuat ringkasan tema konten
  • PR hanya mengubah file di groups/group-XX/
🎉

Selamat Mengerjakan!

Gunakan materi materi-git.html sebagai referensi perintah Git. Tanya dosen jika ada kendala teknis.

12 / 12