MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Terjemahan ini belum lengkap. Mohon bantu menerjemahkan artikel ini dari Bahasa Inggris.

Sebuah website terdiri dari banyak file seperti: konten teks, kode, stylesheet, konten media, dan lain-lainnya. Ketika kamu akan membuat sebuah website, kamu perlu menggabungkan file-file ini menjadi struktur yang sesuai pada komputermu, pastikan file tersebut dapat saling terhubung antara satu dengan yang lain, dan mendapatkan semua konten dengan benar, sebelum akhirnya kamu mengunggah semua file ke sebuah server.

Dimana kamu menyimpan website pada komputermu?

Ketika kamu sedang mengerjakan sebuah website secara lokal pada komputer pribadimu, kamu harus menyimpan semua file yang terkait pada satu folder yang sesuai dengan struktur website yang sudah diunggah pada server. Folder ini dapat kamu simpan dimanapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah kamu temukan, mungkin pada Desktop, pada folder Home,  atau pada folder dasar dari hard drivemu.

  1. Pilih tempat untuk menyimpan projek websitemu. Buatlah sebuah folder dengan nama web-projects (atau yang serupa). Di sinilah proyek-proyek website kamu disimpan. 
  2. Di dalam folder sebelumnya, buatlah lagi satu folder untuk menyimpan website pertamamu. Beri nama test-site (atau nama imajinatif lainnya).

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

Kamu akan menyadari pada artikel ini, kami memintamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini disebabkan:

  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif pada huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada website seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan menggunakan gambar tersebut sebagai berikut test-site/gambarsaya.jpg, maka hal tersebut tidak akan bekerja. 
  2. Browser, web server dan bahasa pemrograman tidak menangani spasi secara konsisten. Contohnya. jika kamu menggunakan spasi pada nama filemu, beberapa sistem akan memperlakukannya sebagai dua nama file. Beberapa server akan mengganti spasi pada nama filemu dengan "%20" (kode karakter untuk spasi pada URI), merusak semua tautanmu. Alangkah lebih baik untuk memisahkan kata menggunakan garis (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.

Jawaban singkatnya kamu dapat menggunakan tanda penghubung untuk nama filemu. Google memperlakukan tanda penghubung sebagai pemisah kata, tetapi tidak memperlakukan underscore seperti itu. Untuk beberapa alasan, cara ini adalah yang terbaik untuk membiasakan menulis nama folder dan nama file dalam huruf kecil tanpa spasi dan menggunakan garis penghubung sebagai pemisah kata, kecuali sampai kamu mengetahui apa yang kamu lakukan. Hal ini dapat menghindarimu dari beberapa masalah ke depannya.

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

Berikutnya, coba lihat struktur website percobaan kami. Hal yang paling sering kamu temukan pada proyek website adalah membuat file indeks HTML dan folder yang berisi gambar, file CSS, dan file skrip. Ayo buat sekarang juga:

  1. index.html: File ini secara umum berisi halaman beranda, dimana gambar dan teks yang orang dapat lihat saat pertama kali membuka websitemu. Menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
  2. folder images: Folder ini akan berisi semua gambar yang akan digunakan pada websitemu. Buatlah sebuah folder bernama images di dalam folder test-site
  3. folder styles: Folder ini berisi kode CSS yang digunakan untuk kontenmu (contoh: pengaturan teks dan warna latar belakang). Buatlah folder bernama styles di dalam folder test-site.
  4. folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsional yang lebih interaktif pada website. Buatlah folder bernama scripts di dalam folder test-site.

Catatan: Pada komputer Windows, kamu mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types menyala secara default. Umumnya, kamu dapat mematikannya dengan masuk ke Windows Explorer, pilih Folder options..., hilangkan centang pada kotak cek Hide extensions for known file types, lalu klik OK. Untuk informasi spesifik mengenai versi Windows kamu, coba cari di web!

Jalur/Path file

Untuk membuat file-file dapat berkomunikasi antara satu dengan yang lainnya, kamu harus menyediakan sebuah path file — umumnya sebuah rute sehingga satu file dapat mengetahui dimana lokasi file yang lainnya. Untuk mendemonstrasikannya, kita akan memasukkan sedikit HTML ke dalam file index.html, dan membuatnya menampilkan gambar yang kamu pilih pada artikel "Akan terlihat seperti apa website anda?" 

  1. Salin gambar yang kamu pilih sebelumnya ke folder image
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti yang ditunjukkan. Jangan khawatirkan maksud dari semuanya untuk saat ini — kita akan melihat struktur lebih detilnya di seri berikut.
    <!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 kode HTML yang menyisipkan gambar ke dalam halaman. Kita perlu memberitahu HTML dimana letak gambar tersebut. Gambar berada pada folder images, dimana sejajar dengan file index.html. Untuk menelusuri struktur file dari index.html ke gambar kita, jalur file yang kita butuhkan adalah images/your-image-filename. Sebagai contoh, gambar kami namai  firefox-icon.png, jadi jalur filenya menjadi images/firefox-icon.png.
  4. Sisipkan jalur file tersebut ke dalam kode HTML kamu di antara tanda petik pada kode src="".
  5. Simpan file HTML, kemudian buka halaman tersebut pada web browsermu (double-click file). Kamu akan melihat halaman web barumu menampilkan gambarmu!

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

Beberapa aturan umum untuk jalur file:

  • Untuk menghubungkan ke file target pada direktori yang sama dengan HTML yang terkait, cukup gunakan filename seperti my-image.jpg.
  • Untuk menghubungkan sebuah file ke subdirektori, tuliskan nama direktori pada awal jalur file dengan tambahan tanda garis miring (/) seperti subdirectory/my-image.jpg.
  • Untuk menghubungkan file target pada direktori sebelum file HTML yang terkait, tuliskan dua titik (..). Sebagai contoh, jika index.html berada di dalam subfolder test-site dan my-image.jpg berada pada folder test-site, kamu harus menghubungkan my-image.jpg dengan index.html menggunakan ../my-image.jpg.
  • Kamu dapat mengkombinasikan aturan-aturan tersebut sesuai kebutuhanmu, seperti ../subdirectory/another-subdirectory/my-image.jpg.

Untuk sekarang, itu semua yang kamu butuh ketahui.

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak bermasalah pada HTML — bahkan jika kamu sedang mengembangkan websitemu di Windows, kamu tetap dapat menggunakan garis miring di kodemu.

Apa lagi yang harus dilakukan?

Begitulah untuk saat ini. Struktur folder kamu seharusnya terlihat 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 Kontributor

 Kontributor untuk laman ini: vdanny
 Terakhir diperbarui oleh: vdanny,