CSS · Bab 9

Proyek CSS: Menata Halaman Lengkap

Menata halaman katalog dan kontak Perpustakaan Pelita dengan variabel warna, navigasi flexbox, kartu grid, dua breakpoint, dan transisi hover, hampir tanpa konsep baru, lalu memublikasikannya.

Bab ini hampir tidak memperkenalkan konsep baru: beberapa properti kecil yang belum dibahas dijelaskan satu per satu di 9.3. Selebihnya, yang sudah dipelajari dipakai untuk menata halaman katalog dan kontak Perpustakaan Pelita menjadi rapi dan responsif. Susunan halamannya mengikuti proyek di Bab HTML 8 (katalog, tabel, dan form kontak), dan markup lengkapnya sudah disertakan di bab ini, jadi kamu tidak membutuhkan berkas dari bab lain.

9.1 Rencana Gaya

Rencana tata letaknya mobile-first:

• Di bawah 600px: semua bertumpuk satu kolom, kartu buku mengisi lebar sebisanya.
• 600px ke atas: nama perpustakaan di kiri, navigasi di kanan.
• 900px ke atas: jarak lebih lega, Ketersediaan Buku dan Kontak berdampingan di bawah Katalog.

9.2 Struktur Berkas

Di proyekmu, simpan CSS di berkas terpisah style.css, di folder yang sama dengan index.html, lalu pasang di <head>:

<link rel="stylesheet" href="style.css">

Markup di bagian 9.3 mengikuti susunan halaman Bab HTML 8, ditambah tiga pembungkus untuk penataan: class lebar pada bagian Katalog, <div class="daftar-buku"> di sekeliling kartu buku, dan <div class="gulir-tabel"> di sekeliling tabel. Menambah class dan pembungkus seperti ini adalah hal biasa saat menata halaman.

9.3 Halaman Lengkap

Isi <style> di playground ini adalah isi style.css, dan sisanya adalah isi <body>. Jalankan, lalu ubah lebar jendela browser. Yang berubah sebenarnya lebar kotak preview, seperti dijelaskan di paragraf berikut.

Seperti di Bab 8, media query di playground mengikuti lebar kotak preview, bukan lebar jendela atau layarmu. Kotak preview biasanya lebih sempit daripada jendela, jadi tata letak 900px mungkin tidak pernah muncul di sana. Untuk melihat ketiga tata letak (di bawah 600px, 600px ke atas, dan 900px ke atas), salin kode ini ke index.html dan style.css di komputermu lalu buka di browser. Dua hal di dalam kode ini hanya cocok untuk playground: /favicon.svg hanya ada di situs ini (di berkasmu ganti dengan gambar/…), dan action="/kontak" baru berarti setelah ada server (di playground ini tombol “Kirim pesan” tidak melakukan apa pun).

Beberapa hal yang perlu diperhatikan dari kode di atas:

• Media query 900px melakukan tiga hal: nilai --jarak diperlebar (semua jarak yang memakai var(--jarak) ikut melebar), main berpindah ke dua kolom, dan .lebar (Katalog) direntangkan melintasi kedua kolom lewat grid-column: 1 / -1.
• :focus diberi gaya yang sama jelasnya dengan :hover, supaya pengguna keyboard juga melihat umpan baliknya.
• minmax(0, …) pada main memberi kolom lebar minimum 0, sehingga kolom boleh lebih sempit daripada tabel di dalamnya. Tanpa itu, kolom ikut melebar mengikuti tabel dan seluruh halaman bergulir ke samping, padahal gulirnya seharusnya hanya terjadi di dalam .gulir-tabel.
• Kartu buku tidak memakai media query sama sekali. auto-fit dan minmax() sudah menyesuaikan jumlah kolom.
• Beberapa properti kecil belum dibahas di bab sebelumnya:
  • font: inherit pada input, select, textarea, dan button: kontrol form biasanya tidak mewarisi huruf dari body, jadi nilai ini menyamakannya.
  • cursor: pointer pada button: mengubah kursor menjadi tangan agar terasa bisa diklik.
  • outline-offset: 2px pada :focus: memberi jarak antara isian dan garis tanda fokusnya supaya lebih terlihat.
  • border-collapse: collapse pada table: menyatukan garis tepi sel yang bersebelahan menjadi satu garis.
  • minmax(0, …): lihat butir tentang main di atas.

9.4 Memeriksa Hasil

Buka halaman di browser (bukan di playground), lalu periksa dengan DevTools. Langkah di bawah memakai DevTools Chrome, dan nama panel atau tombolnya bisa berbeda di browser lain:

1. Aktifkan mode perangkat (device toolbar) dan uji lebar 360px, 768px, dan 1280px. Di semua lebar tidak boleh ada gulir horizontal pada halaman.
2. Tekan Tab berulang kali dari atas halaman. Setiap tautan, isian, dan tombol harus menampilkan tanda fokus yang terlihat.
3. Klik kotak warna di panel Styles untuk melihat rasio kontras teksnya, bila DevTools-mu menampilkannya.
4. Inspect kartu buku, lalu cari lencana grid di panel Elements untuk menampilkan garis kolomnya (tampilannya bergantung pada browser dan versinya).
5. Matikan satu deklarasi di panel Styles (kotak centang) untuk memahami perannya, lalu nyalakan lagi.

9.5 Publikasikan Hasilmu

Halaman ini kini terdiri atas index.html, style.css, dan folder gambar/ (bila memakai foto sendiri). Semuanya berkas statis, jadi bisa ditayangkan di layanan hosting statis, misalnya GitHub Pages atau Cloudflare Pages.

1. Letakkan index.html dan style.css di tingkat paling atas folder proyek.
2. Pastikan alamat CSS dan gambar relatif: href="style.css" dan src="gambar/…", bukan diawali /.
3. Ikuti panduan resmi layanan pilihanmu untuk mengunggah folder itu, lalu buka alamat publik yang diberikan.
4. Samakan huruf besar dan kecil di setiap alamat dengan nama berkasnya. Server hosting umumnya membedakan Style.css dan style.css, walaupun di komputermu keduanya bisa tetap terbuka.
5. Uji alamat itu di ponsel sungguhan. Bila tampilan tidak berubah setelah kamu memperbarui style.css, muat ulang paksa (hard reload; pintasannya berbeda di tiap browser dan sistem) karena browser bisa masih memakai berkas lama di cache.

Seperti di Bab HTML 8, form kontak belum bisa memproses kiriman di hosting statis. Interaksi di browser dipelajari di topik JavaScript, dan pengolahan data di server dipelajari di topik Laravel.

9.6 Ringkasan

• Proyek ini memakai ulang teknik dari bab 2 sampai 8 hampir tanpa konsep baru.
• Variabel CSS membuat warna dan jarak diatur dari satu tempat, termasuk dari dalam media query.
• Flexbox untuk navigasi, grid untuk kartu dan tata letak bagian.
• Mobile-first dengan dua breakpoint, 600px dan 900px.
• Hasilnya situs statis yang bisa dipublikasikan ke hosting statis dengan alamat relatif.