MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Berurusan dengan fail

Sebuah laman web merangkumi banyak fail: kandungan teks, kod, stylesheet, kandungan media, dan sebagainya. Apabila anda membangunkan sebuah laman web, anda perlu menghimpunkan fail-fail ini dalam struktur yang wajar di komputer anda, pastikan fail-fail ini dapat berhubung antara satu sama lain, dan menjadikan kandungan anda nampak betul, sebelum anda akhirnya memuat naik ke pelayan. Berurusan dengan fail membincangkan beberapa isu yang anda patut peka supaya anda boleh menetapkan struktur fail yang wajar untuk laman web anda.

Di manakah laman web anda patut berada di dalam komputer anda?

Apabila anda mengerjakan laman web anda di  komputer anda sendiri, anda perlu menyimpan fail-fail yang berkaitan di dalam folder tunggal yang mirip dengan struktur fail untuk laman web yang diterbitkan di pelayan. Folder ini boleh berada di mana sahaja anda suka, tetapi anda patut letaknya di tempat yang anda mudah untuk menjumpainya, mungkin di Desktop anda, dalam folder Home, atau di root pemacu keras anda.

  1. Pilih tempat untuk menyimpan projek-projek laman web anda. Di sini, cipta sebuah folder baru yang dinamakan  web-projects (atau serupa). Di sinilah kesemua projek-projek laman web anda akan berada.
  2. Di dalam folder pertama ini, cipta folder lain untuk menyimpan laman web pertama anda. Namakannya test-site (atau sesuatu yang lebih imaginatif).

Catatan tentang casing dan spacing

Anda akan perasan bahawa sepanjang artikel ini, kami meminta anda untuk menamakan folder-folder dan fail-fail sepenuhnya dalam huruf kecil tanpa jarak, Ini kerana:

  1. Kebanyakan komputer, terutamanya pelayan web, adalah case-sensitive. Sebagai contoh, jika anda meletakkan sebuah imej di laman web anda di test-site/MyImage.jpg, dan dalam fail yang lain anda cuba untuk memanggil imej tersebut sebagai test-site/myimage.jpg, ia mungkin tidak berfungsi.
  2. Pelayar-pelayar web, pelayan-pelayan web, dan bahasa-bahasa pengaturcaraan tidak mengendalikan ruang dengan konsisten. Sebagai contoh, jika anda menggunakan ruang di dalam nama fail, sesetengah sistem mungkin akan menganggap nama fail tersebut sebagai dua nama. Sesetengah pelayan akan menggantikan ruang tersebut di dalam nama fail anda dengan "%20"(kod karakter untuk ruang dalam URI), merosakkan kesemua pautan anda. Lebih baik untuk mengasingkan perkataan dengan tanda sempang atau garis bawah: my-file.html atau my_file.html.

Untuk sebab-sebab ini, ia adalah sangat baik untuk menjadikan tabiat menulis nama-nama folder dan fail dalam huruf kecil tanpa ruang, sekurang-kurangnya sehingga anda tahu apa yang anda buat. Dengan cara tersebut anda akan kurang terlibat dengan masalah.

Apakah struktur yang patut dimiliki laman web anda?

Seterusnya, mari lihat struktur apa yang laman web kita patut ada. Benda asas utama yang kita akan ada dalam apa-apa projek laman web yang kita cipta adalah fail index HTML dan folder-folder untuk menyimpan imej-imej, fail-fail style, dan fail-fail script. Mari kita cipta ini sekarang:

  1. index.html: Secara umumnya fail ini mengandungi kandungan halaman utama, iaitu teks dan imej-imej yang dilihat orang apabila mereka mula-mula pergi ke laman anda. Dengan menggunakan editor teks anda, cipta fail baru dinamakan index.html dan simpan ia di dalam folder test-site anda.
  2. folder images: Folder ini akan mengandungi kesemua imej yang anda gunakan di laman anda. Cipta sebuah folder dinamakan images, di dalam folder test-site anda.
  3. folder styles: Folder ini akan mengandungi kod CSS yang digunakan untuk mengayakan kandungan anda (sebagai contoh, menetapkan teks dan warna-warna latar belakang). Cipta sebuah folder dinamakan styles, di dalam folder test-site anda.
  4. folder scripts: Folder ini akan mengandungi kesemua kod JavaScript yang digunakan untuk menambah fungsi interaktif ke dalam laman anda (cth. button yang memuatkan data apabila diklik). Cipta sebuah folder dinamakan scripts, di dalam folder test-site anda.

Nota: Dalam komputer Windows, anda mungkin menghadapi masalah melihat nama-nama fail kerana Windows mempunyai satu pilihan yang menjengkelkan dinamakan Hide extensions for known file types yang dihidupkan secara default. Secara umumnya, anda boleh mematikannya dengan pergi ke Windows Explorer, memilih pilihan Folder options..., menyahtik pada kotak pilihan Hide extensions for known file types, kemudian klik OK. Untuk maklumat spesifik merangkumi versi Windows anda, lakukan carian Yahoo!

Path fail

Untuk membuat fail-fail berhubung antara satu sama lain, anda perlu menyediakan path antara mereka — secara asasnya sebuah route supaya satu fail tahu di mana fail yang satu lagi. Untuk mendemonstrasikan ini, kita akan memasukkan sedikit HTML ke dalam fail index.html, dan membuatkan ia memaparkan imej yang anda pilih di dalam artikel "Bagaimanakah laman web anda akan kelihatan?"

  1. Salin imej yang anda pilih sebelum ini ke dalam folder images anda.
  2. Buka fail index.html anda, dan masukkan kod di bawah ke dalam fail yang ditunjukkan. Jangan risau tentang apa semua maksud ini buat masa sekarang — kita akan lihat dengan lebih terperinci pada strukturnya nanti dalam siri tersebut.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. Baris <img src="" alt="My test image"> adalah kod HTML yang memasukkan sebuah gambar ke dalam laman tersebut. Kita perlu beritahu HTML di mana gambar tersebut. Imej tersebut berada dalam direktori images , yang mana dalam direktori sama seperti index.html. Untuk menelusuri struktur fail daripada index.html kepada imej kita, path fail yang kita perlukan adalah images/nama-failimej-anda. Sebagai contoh, imej kita dinamakan firefox-icon.png, jadi path fail adalah images/firefox-icon.png.
  4. Masukkan path fail ke dalam kod HTML di antara tanda petikan berganda kod src="".
  5. Save fail HTML anda, kemudian muatkannya di pelayar web anda (klik dua kali fail tersebut). Anda patut boleh lihat halaman web baru anda memaparkan imej anda!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Beberapa peraturan umum untuk path fail:

  • Untuk menghubungkan fail sasaran di dalam direktori yang sama dengan fail HTML yang memanggilnya, cuma guna nama fail, cth. imej-saya.jpg.
  • Untuk merujuk fail di dalam subdirektori, tulis nama direktori tersebut di hadapan path, tambahan tanda palang ke hadapan, cth. subdirektori/imej-saya.jpg.
  • Untuk menghubungkan fail sasaran di dalam direktori di atas fail HTML yang memanggil, tulis dua titik. Jadi sebagai contoh, jika index.html berada dalam subfolder test-site dan imej-saya.png berada dalam test-site, anda boleh merujuk imej-saya.png daripada index.html menggunakan ../imej-saya.png.  
  • Anda boleh menggabungkan ini sebanyak mungkin yang anda suka, sebagai contoh ../subdirektori/subdirektori-lain/imej-saya.png.

Buat masa ini, ini adalah antara kesemua yang anda perlu tahu.

Nota: Sistem fail Windows cenderung untuk menggunakan garis palang terbalik, bukannya garis palang ke hadapan, cth. C:\windows. Ini tidak penting  — walaupun anda membangunkan laman web anda dengan Windows, anda masih perlu menggunakan garis palang ke hadapan di dalam kod anda.

Apakah lagi yang perlu diselesaikan?

Cukup lah buat masa ini. Struktur folder anda patut kelihatan seperti ini:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Tag Dokumen dan Penyumbang

 Penyumbang untuk halaman ini: arerifx
 Terakhir dikemaskini oleh: arerifx,