Jobsheet 2 — Styling dan CSS Box Model

Tujuan dan hasil

Jobsheet 2 memisahkan tampilan dari struktur HTML dengan satu stylesheet yang dipakai ulang oleh beranda, daftar, dan form.

Pembaruan hanya menyentuh assets/style.css. Tidak ada perubahan pada teks halaman, tautan, contoh data, atau fitur.

Peta berkas

• index.html — beranda dan ringkasan statistik.
• buku/list.html — daftar buku dalam tabel.
• buku/tambah.html — form tambah buku.
• anggota/list.html — tabel data anggota.
• anggota/tambah.html — form tambah anggota.
• assets/style.css — aturan visual bersama untuk seluruh halaman.
• laporan/ — laporan praktikum untuk CSS dan halaman terkait.

Konsep CSS yang digunakan

• Box sizing dan box model: box-sizing, padding, border, margin, dan ukuran komponen.
• Selektor elemen dan turunan: aturan umum untuk body, header, navigasi, tabel, form, tombol, dan footer.
• Flexbox: menyusun judul/header dan menu secara horizontal serta menyesuaikannya saat ruang menyempit.
• Grid: menata kartu ringkasan menjadi beberapa kolom yang dapat berubah menurut lebar layar.
• Keadaan interaksi: :hover pada tombol/link dan :focus pada kontrol form.

Bahasa visual yang diterapkan

Latar krem lembut dan bidang kartu putih/rose memberi hirarki tanpa mengubah struktur DOM. Header dan navigasi dibuat lebih halus, konten utama dibaca dalam panel bersudut membulat, statistik tampil sebagai kartu, sementara tabel dan form mendapat border, jarak, dan keadaan fokus/hover yang konsisten. Aturan responsif tetap mengikuti stylesheet Jobsheet 2.

Perubahan digabungkan langsung ke deklarasi selektor CSS yang sudah ada. Tidak ada stylesheet tema kedua, blok tema terpisah, atau @import.

Alur aplikasi dan batas fitur

Menu menghubungkan beranda, daftar, dan form buku/anggota. Isi daftar dan statistik merupakan contoh statis dalam HTML. Tombol aksi yang terlihat tidak terhubung ke penyimpanan server pada Jobsheet 2; memuat ulang halaman mengembalikan isi awal.

Pemeriksaan

1. Buka semua lima halaman HTML dan pastikan assets/style.css terpasang dari root maupun subfolder.
2. Periksa header, kartu ringkasan, tabel, form, tombol, dan footer pada layar lebar.
3. Persempit layar untuk memeriksa wrapping navigasi dan konten.
4. Gunakan keyboard untuk memastikan fokus input terlihat.