Struktur File dan Folder

Selama proyek hanya berisi satu index.html, struktur folder nyaris tidak terasa. Begitu website Kedai Kopi Siti bertambah halaman menu, kontak, dan tentang — plus stylesheet, skrip, dan lusinan foto — struktur yang dipilih di hari pertama menentukan betapa mudahnya menemukan berkas tiga bulan kemudian. Struktur bukan soal selera; ia adalah kesepakatan kecil dengan diri sendiri di masa depan.

Chapter ini menetapkan pola dasar proyek multi-halaman: semua halaman sejajar di root, berkas pendukung dipisah per jenis ke dalam css/, js/, dan assets/. Kita juga menetapkan aturan penamaan file supaya setiap nama tampil rapi saat menjadi URL.

Pola Dasar Proyek #

Aturannya sederhana: root proyek hanya berisi halaman HTML dan folder per jenis berkas. Browser sebenarnya tidak peduli kita menaruh berkas di mana, tetapi manusia yang membuka proyek — dan tool yang memindainya — sangat peduli. Nama index.html punya posisi istimewa: server otomatis menyajikannya ketika URL tidak menyebut nama berkas, misalnya kedai-kopi-siti/menu/ dijawab dengan menu/index.html.

Berikut struktur lengkap proyek Kedai Kopi Siti:

kedai-kopi-siti/
├── index.html
├── menu.html
├── kontak.html
├── tentang.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── assets/
    ├── logo.png
    └── menu/
        └── kopi-susu.jpg

Mari kita bedah baris-per-baris:

1. index.html (baris 2): halaman depan; alamat proyek tanpa nama berkas otomatis jatuh ke sini.
2. menu.html, kontak.html, tentang.html (baris 3-5): halaman-halaman sejajar di root — tidak ada yang “lebih dalam” dari yang lain, jadi semua rujukan antarhalaman sama pendeknya.
3. css/ (baris 6-7): satu rumah untuk seluruh stylesheet; dipanggil dengan href="css/style.css".
4. js/ (baris 8-9): skrip JavaScript, terpisah dari CSS supaya tiap folder punya satu jenis isi.
5. assets/ (baris 10-13): gambar dan media; subfolder per tema seperti menu/ masih wajar selama hanya satu-dua tingkat. Sebagian proyek memakai nama img/ — keduanya sama sahnya, yang penting konsisten.

Penamaan File #

Aturan penamaan: kebab-case (huruf kecil semua, kata dipisah tanda hubung), tanpa spasi, tanpa karakter aneh seperti ?, &, atau petik. Alasannya mekanis: nama file menjadi bagian URL, dan spasi otomatis diubah browser menjadi %20 — tampilan yang sudah tidak kita kendalikan lagi. Materi lengkapnya ada di chapter Absolute dan Relative URL, Section Links dan Navigasi.

Pola menu/index.html di baris terakhir layak dijelaskan: jika suatu saat halaman menu bertambah subhalaman, folder menu/ dengan index.html di dalamnya membuat struktur tumbuh tanpa memindahkan halaman lain.

Menata Sejak Awal #

Migrasi struktur belakangan itu mahal. Memindahkan satu folder gambar berarti memperbarui setiap src di setiap halaman; melupakan satu saja, gambar tampil pecah — jenis galat yang kita bedah di Section Validasi dan Debugging. Menata dengan benar sejak file kedua dibuat membuat biaya itu tidak pernah muncul.

Mulailah setiap proyek dengan kerangka folder di atas, lalu isi menyusul. Chapter berikutnya melatih kebiasaan nomor dua: menjadikan semantic elements sebagai default setiap kali jari kita mau menulis div.