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
▶ 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

Kriteria | Bobot | Indikator
--- | --- | ---
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

Nilai | Kriteria
--- | ---
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