Membuat Folder Proyek

Halaman pertama kita bisa dibuat dari satu file HTML saja, tetapi proyek nyata selalu tumbuh: muncul halaman kedua, file CSS, file JavaScript, dan gambar pendukung. Menata folder sejak awal jauh lebih mudah daripada merapikan tumpukan berkas yang sudah terlanjur bercampur. Chapter ini merancang struktur folder standar yang juga dipakai pengembang profesional.

Struktur Folder Standar #

Struktur berikut memakai satu folder root bernama website-pertama:

website-pertama/
├── index.html
├── tentang.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── assets/
    └── foto-profil.jpg

Peran tiap bagian:

1. Folder root (website-pertama/) — wadah seluruh proyek; namanya bebas asalkan mengikuti aturan penamaan pada bagian akhir chapter ini.
2. index.html di akar folder — halaman depan proyek; penempatan di akar membuat rujukan dari dan ke file tersebut paling pendek.
3. css/ — khusus file stylesheet seperti style.css.
4. js/ — khusus file skrip seperti script.js.
5. assets/ — khusus berkas pendukung seperti gambar dan ikon.

Alasan Menata Sejak Awal #

Tiga alasan praktis mendorong kebiasaan ini:

• Mudah ditemukan — saat mencari sebuah gambar, kita tahu pasti lokasinya di folder assets/.
• Tautan tetap pendek dan stabil — dari index.html, file CSS dirujuk sebagai css/style.css; rujukan tersebut tidak berubah ketika proyek bertambah halaman.
• Kebiasaan yang terbawa — struktur serupa dipakai di proyek profesional, jadi kita berlatih pola kerja yang sama sejak awal.

Membuat Folder dari Terminal #

Kedua cara berikut menghasilkan struktur yang sama. Dari terminal:

mkdir -p website-pertama/css website-pertama/js website-pertama/assets
cd website-pertama

Opsi -p membuat folder induk sekaligus bila belum ada, sehingga satu perintah cukup untuk membangun tiga subfolder bertingkat. Pengguna yang lebih nyaman dengan antarmuka grafis dapat membuat folder yang sama lewat File Explorer atau Finder — hasil akhirnya identik.

Aturan Penamaan: Kebab-case #

Konvensi penamaan file dan folder pada proyek web: huruf kecil semua, tanpa spasi, pemisah berupa tanda hubung — misalnya galeri-foto.html. Konvensi tersebut lazim disebut kebab-case.

Alasannya, spasi pada nama berkas berpotensi merepotkan: nama berkas dengan spasi harus dienkode (menjadi %20) ketika ditulis sebagai alamat atau tautan, sehingga tautan lebih rawan salah tulis. Huruf kapital juga dihindari karena beberapa sistem membedakan besar kecil huruf pada nama file.

Folder sudah berdiri namun isinya masih kosong. Chapter berikutnya mengisi folder root dengan file pertama: index.html.