Tujuan dan ruang lingkup
Jobsheet ini menyusun antarmuka SIMPUS-Mini menggunakan HTML semantik. Berkas aplikasi Jobsheet 1 tidak memuat stylesheet eksternal; tampilannya mengikuti gaya bawaan browser. Perubahan tema CSS yang diterapkan kemudian hanya berlaku pada Jobsheet 2–6.
Fokus belajar: hierarki dokumen, tautan relatif, tabel data, dan form HTML. Contoh data di halaman ditulis langsung di HTML dan tidak tersimpan ke database.
Peta berkas
index.html— beranda SIMPUS-Mini, navigasi, ringkasan buku/anggota/peminjaman, dan footer.buku/list.html— tabel koleksi buku beserta kolom informasi dan aksi yang dicontohkan.buku/tambah.html— form HTML untuk memasukkan informasi buku.anggota/list.html— tabel anggota perpustakaan.anggota/tambah.html— form untuk data anggota.laporan/— lima laporan praktikum per halaman yang merangkum hasil Jobsheet 1.
Mengenali struktur halaman
Dokumen menggunakan deklarasi <!DOCTYPE html>, elemen akar <html lang="id">, metadata dalam <head>, dan konten yang dapat dibaca dalam <body>. Bagian layar dibagi memakai <header> untuk identitas dan navigasi, <main> untuk konten utama, <section> untuk kelompok topik, <article> untuk unit mandiri, dan <footer> untuk informasi penutup.
Tautan di dalam aplikasi menggunakan path relatif, misalnya ../index.html dari subfolder kembali ke halaman utama. Pola ini menjaga navigasi tetap berfungsi pada subhalaman.
Tabel dan formulir
Daftar menggunakan <table> dengan kelompok kepala tabel dan isi tabel. Setiap baris data berada di <tr>, judul kolom menggunakan <th>, dan nilai memakai <td>. Elemen tabel dipakai untuk data tabular, bukan untuk menyusun layout halaman.
Form tambah buku/anggota berisi label dan kontrol input yang sesuai tipe informasinya. Pasangkan for pada label dengan id kontrol agar nama field tetap dapat diakses melalui klik label dan pembaca layar. HTML Jobsheet 1 adalah demonstrasi antarmuka; tanpa endpoint backend, pengiriman form tidak membuat perubahan persisten.
Alur penggunaan dan pengujian
- Buka beranda, lalu gunakan tautan navigasi menuju daftar buku atau anggota.
- Buka halaman tambah untuk memeriksa label, tipe input, dan alur tab keyboard.
- Uji semua tautan pada halaman di root dan dari subfolder.
- Pastikan halaman tetap terbaca saat diperbesar dan ketika lebar layar dipersempit.
Jobsheet 1 tidak memiliki file CSS maupun JavaScript. Karena itu menu dan data merupakan struktur statis, bukan kontrol interaktif yang menyimpan perubahan.