Modul ini dikerjakan pada satu proyek utuh, dan topik ini menetapkan proyeknya. Proyek yang dipilih adalah situs informasi perpustakaan komunitas dengan tiga halaman dan satu formulir keanggotaan, lengkap dengan kriteria pemilihannya, daftar kebutuhan per halaman, dan ukuran keberhasilannya. Topik arsitektur konten, pembangunan halaman, serta validasi dan audit bekerja berdasarkan rencana yang ditetapkan pada topik ini. Rencana yang jelas membuat keputusan teknis pada bagian-bagian berikutnya berangkat dari kebutuhan konten, bukan dari perkiraan.
Kriteria proyek latihan yang tepat#
Proyek penutup jalur HTML sebaiknya informasional, multihalaman, memuat formulir, dan memuat media. Keempat kriteria itu dipilih karena masing-masing memaksa satu kelompok kemampuan HTML benar-benar dipakai pada kasus nyata, bukan hanya pada potongan lepas. Tabel berikut merangkum keterkaitannya.
| Kriteria | Kemampuan HTML yang dilatih |
|---|---|
| Informasional | Konten teks, judul berjenjang, daftar, tabel, kutipan |
| Multihalaman | Tautan relatif antarberkas dan struktur yang berulang |
| Memuat formulir | form, tipe input, label, fieldset, atribut validasi |
| Memuat media | img dengan teks alt, figure, figcaption, dimensi |
Kriteria informasional menyaring jenis proyeknya. Situs informasi menyajikan isi untuk dibaca, sehingga seluruh kebutuhannya dapat dipenuhi HTML murni tanpa server, basis data, maupun skrip sisi server. Proyek yang bergantung pada transaksi, misalnya toko daring atau aplikasi pesan antar, menuntut teknologi di luar lingkup jalur ini dan justru menyisakan bagian yang tidak dapat diselesaikan.
Kriteria multihalaman melatih disiplin yang tidak muncul pada halaman tunggal, yaitu konsistensi. Header, navigasi, dan footer ditulis berulang pada setiap berkas, sehingga perubahan kecil pada salah satunya harus dikerjakan di semua tempat dengan teliti. Kriteria formulir dan media melengkapi cakupan proyek, karena keduanya menampung kelompok elemen yang paling sering keliru ditulis, mulai dari asosiasi label sampai teks alt yang kosong.
Proyek terpilih: situs perpustakaan komunitas#
Proyek yang digunakan sepanjang modul ini adalah situs informasi perpustakaan komunitas. Perpustakaan komunitas adalah layanan baca gratis yang dikelola warga, umumnya di ruang bersama seperti balai warga atau aula sekolah, dengan koleksi yang dipinjamkan tanpa tujuan komersial. Ranah tersebut netral dan non-komersial, isinya realistis untuk ditulis, dan kebutuhan situsnya cukup kecil untuk diselesaikan dengan tiga halaman.
Situsnya terdiri atas tiga halaman. Halaman Beranda memperkenalkan perpustakaan, menampilkan pengumuman terbaru, dan menyajikan jam buka dalam tabel. Halaman Koleksi menyajikan daftar koleksi utama beserta status peminjamannya dalam tabel. Halaman Kontak memuat alamat, cara menghubungi pengurus, dan formulir pendaftaran anggota baru. Formulir keanggotaan ditempatkan pada halaman Kontak dan bukan pada halaman tersendiri, sehingga situs tetap tiga halaman sekaligus tetap satu fokus per halaman.
Diagram berikut memetakan kedudukan ketiga halaman dan formulir keanggotaan di dalam situs.
Ketiga halaman berbagi kerangka yang sama, yaitu header berisi nama perpustakaan, nav berisi tiga tautan, dan footer. Kerangka yang sama membuat pengguna tidak perlu mempelajari ulang tata letak pada setiap halaman, dan bagi penulisnya, kerangka itu menjadi templat yang disalin ke setiap halaman dengan isi yang diganti. Nama fiktif yang digunakan sepanjang modul adalah Perpustakaan Komunitas Baca, dan seluruh isi contohnya dapat diganti bebas dengan data sendiri.
Daftar kebutuhan per halaman#
Kebutuhan per halaman ditetapkan sebelum markup ditulis, karena daftar ini menjadi acuan pemeriksaan pada topik validasi dan audit. Daftar kebutuhannya dirinci sebagai berikut.
| Halaman | Kebutuhan konten | Elemen kunci |
|---|---|---|
| Beranda | Pengenalan perpustakaan, satu kutipan anggota, gambar sampul, jam buka | article, aside, figure, blockquote, tabel dengan caption |
| Koleksi | Daftar koleksi utama, status koleksi, ketentuan peminjaman | tabel dengan th scope, strong, daftar |
| Kontak | Alamat dan jam layanan, formulir keanggotaan | address, form, fieldset, legend, label |
Pada Beranda, pengenalan ditulis di dalam article, sedangkan jam buka ditempatkan di dalam aside karena isinya pelengkap yang berdiri sendiri. Pada Koleksi, tabel menjadi bagian utama halaman, dan seluruh sel kepalanya ditandai th beratribut scope. Pada Kontak, formulir keanggotaan menampung nama, alamat surel, nomor telepon, jenis keanggotaan, pesan tambahan, dan persetujuan peraturan, sehingga hampir semua tipe kontrol formulir dari jalur ini terpakai sekali lagi.
Bukti penyelesaian jalur#
Proyek ini sekaligus menjadi bukti bahwa jalur HTML telah diselesaikan, dan buktinya dinyatakan dalam empat kelompok kemampuan. Struktur terbukti apabila setiap halaman memuat landmark lengkap berupa header, nav, main, dan footer dengan satu hierarki judul yang rapi. Formulir terbukti apabila setiap kontrol berlabel dengan label yang berasosiasi benar, pengelompokannya menggunakan fieldset dan legend, dan aturan dasarnya ditegakkan dengan atribut validasi. Media terbukti apabila setiap gambar memiliki teks alt yang bermakna, berdimensi, dan dibungkus figure apabila konteksnya perlu dijelaskan. Metadata terbukti apabila setiap halaman memiliki charset, viewport, title, meta description, atribut lang, dan favicon.
| Bukti | Terpenuhi bila | Topik sumber |
|---|---|---|
| Struktur | landmark lengkap dan hierarki judul rapi di semua halaman | Semantik HTML5 |
| Formulir | label berasosiasi, kelompok terlegenda, validasi aktif | Formulir dan Masukan |
| Media | alt, dimensi, dan figure tepat guna | Halaman Pertama, Media |
| Metadata | charset, viewport, title, description, lang, favicon | Head, Metadata, dan SEO |
Daftar itu juga menetapkan batas modul. Pemilihan warna, tata letak visual, dan kinerja pemuatan bukan bagian dari bukti ini, karena seluruhnya berada di luar lingkup HTML. Pada topik validasi dan audit, alat pemeriksa memang membaca halaman jauh lebih dalam daripada markup saja, tetapi temuan yang diperbaiki di modul ini tetap sebatas yang disebabkan markup.
Kesalahan umum#
Memilih proyek yang menuntut teknologi di luar HTML. Proyek berbasis akun pengguna, pembayaran, atau data yang tersimpan di server tidak dapat diselesaikan dengan berkas HTML statis, sehingga sebagian kebutuhannya selamanya tertunda. Pilih proyek informasional yang seluruh kebutuhannya dapat dipenuhi markup.
Menetapkan daftar kebutuhan terlalu longgar. Kebutuhan yang ditulis “ada formulir” tanpa rincian kontrolnya membuat pemeriksaan akhir menjadi tidak terukur. Rincikan kebutuhan sampai tingkat elemen, seperti pada tabel kebutuhan di atas, agar setiap butir dapat dinyatakan terpenuhi atau belum.
Menambah halaman tanpa kebutuhan yang mendukungnya. Setiap halaman baru berarti satu kerangka lagi yang konsistensinya harus dijaga pada saat dibangun dan diaudit. Tiga halaman dengan formulir yang lengkap melatih lebih banyak kemampuan daripada enam halaman yang isinya dangkal.
Ringkasan#
- Proyek penutup jalur HTML dipilih dengan kriteria informasional, multihalaman, memuat formulir, dan memuat media, sehingga seluruh kelompok kemampuan jalur ini terpakai.
- Proyek terpilih adalah situs perpustakaan komunitas dengan tiga halaman, yaitu Beranda, Koleksi, dan Kontak, beserta formulir keanggotaan pada halaman Kontak.
- Kebutuhan per halaman ditetapkan sampai tingkat elemen dan menjadi acuan pembangunan sekaligus lembar audit pada topik penutup.
- Bukti penyelesaian jalur dinyatakan dalam empat kelompok, yaitu struktur, formulir, media, dan metadata.
Referensi#
- HTML Living Standard — WHATWG — Spesifikasi resmi HTML yang menjadi acuan seluruh elemen pada proyek ini.
- Learn HTML — MDN Web Docs — Kurikulum struktur HTML yang menjadi dasar kelompok kemampuan proyek.
- Learn HTML — web.dev — Kursus HTML resmi Google yang mencakup struktur, formulir, dan media.