Bab 03: Menyusun Struktur Folder & File Website

Sebelum mulai menulis kode HTML, ada satu fondasi penting yang sering diabaikan pemula, yaitu struktur folder dan file di website. Padahal, jika disusun sejak awal sangat berpengaruh pada kemudahan pengembangan, perawatan proyek, dan skalabilitas website. Tanpa susunan folder yang jelas, file HTML, CSS, JavaScript, dan aset lain akan cepat berantakan, menyulitkan saat mencari file, memperbaiki bug, atau menambahkan fitur baru seiring berkembangnya proyek.

Pada bagian ini, kamu akan mempelajari cara menyusun struktur folder dan file di website yang rapi dan profesional, lengkap dengan fungsi tiap folder dan contoh file dasar yang bisa langsung dipakai. Materi ini masih satu alur dengan pembahasan di halaman induk Belajar HTML untuk Pemula sehingga sangat cocok dipelajari sebelum masuk ke tahap styling dan interaktivitas. Dengan struktur yang tertata sejak awal, proses ngoding jadi lebih terorganisir, efisien, dan minim kesalahan kebiasaan kecil yang selalu diterapkan developer profesional.

Kenapa Struktur Folder Penting

Struktur folder adalah fondasi dari sebuah website. Walaupun tidak terlihat langsung oleh pengunjung, struktur ini sangat menentukan bagaimana website dikembangkan, dirawat, dan dikembangkan kembali di masa depan.

Bagi pemula, struktur folder sering dianggap sepele karena fokus utama masih pada “bikin halaman tampil dulu”. Padahal, tanpa struktur yang jelas, proyek website akan cepat menjadi sulit dikelola seiring bertambahnya file dan fitur.

Berikut beberapa alasan utama kenapa struktur folder yang rapi itu penting:

1. Memudahkan Pengelolaan File

Dengan struktur folder yang jelas, setiap jenis file memiliki tempatnya masing-masing. File HTML, CSS, gambar, dan JavaScript tidak tercampur dalam satu folder. Hasilnya:

• File lebih mudah ditemukan
• Waktu pengembangan lebih efisien
• Resiko salah edit file bisa diminimalkan

Ini sangat terasa ketika proyek mulai berkembang dan tidak lagi hanya terdiri dari satu atau dua file.

2. Membantu Proses Belajar yang Lebih Terstruktur

Struktur folder yang rapi membantu pemula memahami hubungan antar file dalam sebuah website. Kamu bisa melihat dengan jelas:

• File HTML sebagai kerangka halaman
• File CSS sebagai pengatur tampilan
• File lain sebagai pendukung

Dengan susunan yang teratur, konsep dasar web development akan lebih mudah dipahami secara visual dan logis.

3. Mempermudah Perawatan dan Pengembangan

Website jarang berhenti di versi pertama. Biasanya akan ada:perbaikan tampilanpenambahan halamanpenyesuaian fiturStruktur folder yang baik membuat perubahan tersebut lebih aman dilakukan tanpa merusak bagian lain dari website. Ini juga memudahkan jika suatu saat proyek dikerjakan ulang atau dilanjutkan oleh orang lain.

4. Membiasakan Standar Kerja Profesional

Developer profesional hampir selalu menggunakan struktur folder yang konsisten. Dengan membiasakan diri sejak awal:

• Kamu lebih siap masuk ke proyek yang lebih besar
• Lebih mudah beradaptasi dengan framework atau CMS
• Workflow terasa lebih rapi dan terkontrol

Struktur folder bukan hanya soal kerapian, tapi juga soal kebiasaan kerja yang baik.

5. Mengurangi Kesalahan Teknis

Struktur yang berantakan sering memicu kesalahan seperti:

• File CSS tidak terbaca
• Path gambar salah
• File lama tertimpa file baru

Dengan struktur yang jelas, risiko kesalahan seperti ini bisa dikurangi sejak awal.

Struktur Folder Dasar Website

Sebelum bikin folder, kita harus ngerti dulu apa saja yang biasanya ada di proyek website. Struktur dasar ini bisa disesuaikan sesuai kebutuhan, tapi ada beberapa folder yang hampir selalu ada di semua proyek HTML:

Struktur standar website sederhana:

my-website/
│
├─ index.html
├─ about.html
├─ contact.html
├─ css/
│   └─ style.css
├─ js/
│   └─ script.js
├─ images/
│   └─ logo.png
└─ assets/
    └─ fonts/

my-website/
│
├─ index.html
├─ about.html
├─ contact.html
├─ css/
│   └─ style.css
├─ js/
│   └─ script.js
├─ images/
│   └─ logo.png
└─ assets/
    └─ fonts/

Penjelasan:

• index.html → Halaman utama.
• css/ → Folder khusus stylesheet.
• js/ → Folder untuk file JavaScript.
• images/ → Tempat menyimpan gambar.
• assets/ → Bisa dipakai untuk font, icon, atau file tambahan lain.

Membuat Folder dan File

Sekarang kita masuk tahap eksekusi. Folder tanpa file sama saja kayak lemari kosong. Kita bakal bikin folder dan file sesuai struktur dasar tadi, supaya semua siap dipakai buat coding. Proses ini gampang, tapi kalau asal bikin bisa bikin folder berantakan.

Praktek:

1. Membuat folder di Windows:
   • Klik kanan → New → Folder → beri nama sesuai struktur (css, js, images, dll).
2. Membuat file HTML & CSS:
   • Klik kanan → New → Text Document → rename jadi index.html atau style.css.
3. Membuat folder di Mac/Linux:
   • Gunakan terminal:

mkdir my-website
cd my-website
mkdir css js images assets
touch index.html css/style.css js/script.js

mkdir my-website
cd my-website
mkdir css js images assets
touch index.html css/style.css js/script.js

Penjelasan:

• mkdir → membuat folder baru
• cd → pindah ke folder
• touch → membuat file baru

Penamaan File & Best Practice

Nama file itu kayak nama karakter di game RPG harus jelas, gampang diingat, dan konsisten. Jangan cuma asal file1.html atau baru.css, nanti nyari link bisa nyasar. Kita bakal bahas aturan main supaya penamaan file profesional dan gampang dikelola.

Tips Penamaan:

• Gunakan huruf kecil semua.
• Gunakan tanda – untuk spasi: about-us.html, bukan About Us.html.
• Jangan pakai karakter aneh (@, #, !)
• Buat folder terpisah sesuai tipe file: CSS di css/, JS di js/, gambar di images/.

Contoh Struktur Proyek HTML

Sekarang kita gabungkan semua teori jadi contoh nyata. Struktur proyek ini bakal bikin hidupmu lebih mudah pas ngoding, testing, dan nanti saat deploy ke hosting. Kita buat proyek sederhana tapi rapi, siap dikembangkan jadi website nyata.

Contoh Struktur & File:

my-website/
├─ index.html
├─ about.html
├─ contact.html
├─ css/
│   └─ style.css
├─ js/
│   └─ script.js
├─ images/
│   └─ banner.jpg
└─ assets/
    └─ fonts/

my-website/
├─ index.html
├─ about.html
├─ contact.html
├─ css/
│   └─ style.css
├─ js/
│   └─ script.js
├─ images/
│   └─ banner.jpg
└─ assets/
    └─ fonts/

Contoh isi index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
    </header>
    <p>Ini contoh halaman HTML dengan struktur folder yang rapi.</p>
    <script src="js/script.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
    </header>
    <p>Ini contoh halaman HTML dengan struktur folder yang rapi.</p>
    <script src="js/script.js"></script>
</body>
</html>

Penjelasan:

• <link rel=”stylesheet” href=”css/style.css”> → menghubungkan CSS dari folder css.<script src=”js/script.js”>
• </script> → menambahkan file JavaScript dari folder js.

Tips & Trik Supaya Folder Rapi

Biar proyek nggak cepat berantakan, ada beberapa trik yang bisa dipakai. Ini tips sederhana tapi ampuh supaya semua file mudah dicari dan gampang dikembangkan.

Tips Praktis:

• Gunakan struktur konsisten untuk semua proyek.
• Pisahkan file berdasarkan tipe.
• Hindari folder terlalu dalam (deep nesting).
• Backup secara rutin.
• Pakai version control (Git) untuk project lebih kompleks.

Struktur folder dan file adalah pondasi penting sebelum coding lebih jauh. Dengan folder rapi, penamaan file jelas, dan praktik standar yang konsisten, ngoding jadi lebih mudah, cepat, dan menyenangkan. Struktur yang baik memudahkan maintenance, kolaborasi, dan mempersiapkan proyekmu untuk tahap berikutnya. Ingat, website yang berantakan dari awal akan bikin stres, sedangkan proyek yang rapi bikin mood coding selalu on!

Cek daftar isi belajar HTML untuk pemula

Lanjut Bab 04: Membuat Struktur Dasar di HTML