Panduan Tugas Pemrograman Web

📋 Petunjuk Pengerjaan:

Buka Visual Studio Code atau kode editor pilihan Anda.
Buka folder tugas minggu lalu bernama task1 pada komputer Anda.
Buka folder tersebut di VS Code (File → Open Folder).
Buat file style.css terlebih dahulu.
Buat 5 file .html sesuai daftar di bawah ini.

📂 Struktur Direktori Folder tugas-html

📁 tugas-html/
├── 📄 index.html       (Halaman Utama / Beranda)
├── 📄 identitas.html   (Halaman Profil & Biodata Siswa)
├── 📄 form.html        (Halaman Form Formulir Input)
├── 📄 table.html       (Halaman Tabel Data)
├── 📄 boxcss.html      (Halaman Latihan Box Flexbox Responsif)
└── 🎨 style.css        (File Styling CSS Utama)

📌 PENTING: Semua file .html WAJIB terhubung ke style.css dengan menyisipkan tag berikut di dalam <head>:
<link rel="stylesheet" href="style.css">

⚙️ Komponen Utama yang Harus Ada di style.css:

Reset CSS: Menghapus margin dan padding default browser (* { margin:0; padding:0; box-sizing:border-box; }).
Flexbox Layout Body: Memastikan footer selalu menempel di dasar layar.
Navbar Sticky: Menu navigasi tetap di posisi atas saat gulir halaman (position: sticky; top: 0;).
Footer Sticky: Mendorong footer otomatis ke bagian paling bawah (margin-top: auto;).
Styling Komponen: Tabel, form, tombol, dan layout box responsif flexbox.

📝 Potongan Kode CSS Utama (style.css)

/* 1. Reset Dasar CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Kunci Utama Layout Footer Sticky */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    flex: 1; /* Mengisi sisa ruang kosong halaman */
    padding: 2rem;
}

📄 HTML & CSS Navbar Sticky

<!-- 1. Tempelkan struktur HTML Navbar ini tepat di bagian awal <body> kelima file HTML -->
<nav class="navbar">
    <a href="index.html" class="logo">🏠 Tugas</a>
    <div class="nav-links">
        <a href="index.html" class="active">Beranda</a>
        <a href="identitas.html">Identitas</a>
        <a href="form.html">Form</a>
        <a href="table.html">Tabel</a>
        <a href="boxcss.html">Box CSS</a>
    </div>
</nav>

/* 2. Tambahkan CSS Navbar Sticky berikut di style.css */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #1a2e3a;
    padding: 0.8rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #b8dbd7;
}
.nav-links a.active {
    background: #b8dbd7;
    color: #1a2e3a;
}

📄 HTML & CSS Footer Sticky

<!-- 1. Letakkan Footer di luar .container, tepat sebelum penutup </body> -->
<footer class="footer">
    © 2026 <strong>Tugas HTML & CSS</strong> · 
    Dibuat oleh [Nama Siswa] · 
    <a href="#">Kembali ke Atas</a>
</footer>

/* 2. Aturan CSS Footer Sticky pada style.css */
html, body { 
    height: 100%; 
}
body { 
    display: flex; 
    flex-direction: column; 
}
.container { 
    flex: 1; /* Mendorong footer ke paling bawah halaman */
}
.footer { 
    margin-top: auto; 
    background: #1a2e3a;
    color: #ffffff;
    text-align: center;
    padding: 1rem;
}

📄 HTML & CSS Box Responsif

<!-- Struktur HTML untuk halaman boxcss.html -->
<div class="box-container">
    <div class="box box-1">Box 1</div>
    <div class="box box-2">Box 2</div>
</div>
<div class="box-full">Box Full Lebar</div>

/* CSS Box Responsif pada style.css */
.box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.box {
    flex: 1 1 calc(50% - 1.5rem);
    min-width: 200px;
    padding: 2.5rem;
    background: #8fc5bf;
    color: #fff;
    text-align: center;
    border-radius: 12px;
}
.box-full {
    flex: 1 1 100%;
    background: #b8dbd7;
    padding: 2.5rem;
    color: #1f4a46;
    text-align: center;
    border-radius: 12px;
    margin-top: 1.5rem;
}
/* Media Query untuk Layar Kecil (< 768px) */
@media (max-width: 768px) {
    .box { flex: 1 1 100%; }
}

✓ Checklist Kelengkapan Tugas Siswa:

✅ 5 file HTML (index.html, identitas.html, form.html, table.html, boxcss.html)
✅ 1 file CSS utama (style.css)
✅ Semua file HTML terhubung ke style.css
✅ Navbar sticky berada di bagian atas halaman
✅ Menu aktif navbar ditandai dengan class="active"
✅ Footer sticky berada di paling bawah halaman
✅ File boxcss.html memiliki 2 box sejajar pada layar lebar
✅ Box berpindah posisi turun ke bawah pada layar kecil (< 768px)
✅ Memiliki 1 box full lebar (100%) di bagian bawah
✅ Tampilan responsif dengan Flexbox & Media Query

📤 Pengumpulan Tugas

Setelah seluruh tugas selesai, silakan unggah hasil pekerjaan melalui Google Drive berikut.

📁 Buka Folder Pengumpulan Tugas

📌 Ketentuan Unggah

📦 Gabungkan seluruh 6 file menjadi 1 file .ZIP.
📄 Isi file ZIP:
- index.html
- identitas.html
- form.html
- table.html
- boxcss.html
- style.css
📝 Nama file ZIP menggunakan format:
presensi_nama.zip
✅ Contoh: 01_Ahmad.zip
⬆️ Unggah file ZIP ke folder Google Drive melalui tombol di atas.

🎉 Selamat mengerjakan! Pastikan seluruh file dapat dibuka dengan baik sebelum dikompres menjadi file ZIP. Jika ada kendala atau pertanyaan seputar sintaks kode, jangan ragu untuk bertanya kepada guru.

Panduan Tugas Pemrograman Web

Langkah 1: Persiapan Awal & Struktur Proyek

📋 Petunjuk Pengerjaan:

Langkah 2: Pengaturan File style.css

⚙️ Komponen Utama yang Harus Ada di style.css:

Langkah 3: Menambahkan Navbar Sticky

Langkah 4: Menambahkan Footer Sticky

Langkah 5: Tampilan Box Responsif di boxcss.html

Langkah 6: Evaluasi & Checklist Tugas

✓ Checklist Kelengkapan Tugas Siswa:

📤 Pengumpulan Tugas

📌 Ketentuan Unggah