Suatu website terdiri atas banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika kamu sedang membuat sebuah website, kamu perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut saling terhubung antara satu dengan lainnya, dan memastikan semua konten sudah benar sebelum akhirnya kamu unggah mereka ke suatu server. Bagian ini akan membahas isu-isu yang perlu kamu ketahui sehingga kamu dapat membuat struktur file yang sesuai untuk website kamu.

Di mana website kamu berada dalam komputermu?

Ketika kamu sedang mengerjakan satu website lokal pada komputer pribadimu, kamu harus menyimpan semua file terkait pada satu folder sesuai dengan struktur website yang diunggah ke server. Folder ini dapat kamu simpan di manapun sesukamu, tetapi kamu harus meletakkannya di suatu tempat yang mudah ditemukan, seperti Desktop, pada folder Home, atau pada folder root dari hard drive kamu.

  1. Pilih tempat untuk menyimpan proyek-proyek websitemu. Buatlah sebuah folder dengan nama web-projects (atau nama lain yang serupa). Di sinilah proyek-proyek websitemu akan disimpan. 
  2. Di dalam folder sebelumnya, buat lagi satu folder untuk menyimpan website pertamamu. Berilah nama test-site (atau nama lainnya yang lebih menarik).

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

Kamu akan menyadari bahwa di artikel ini, kami akan meminta kamu untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini karena:

  1. Banyak komputer, terutama web server, bersifat case-sensitive (sensitif terhadap huruf kapital dan kecil). Sebagai contoh, jika kamu meletakkan gambar pada situs seperti test-site/GambarSaya.jpg, dan kemudian pada file lain kamu akan memanggil gambar tersebut dengan  test-site/gambarsaya.jpg, maka kemungkinan hal tersebut tidak akan berhasil. 
  2. Peramban, 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) sehingga akan merusak semua tautanmu. Akan lebih baik bila kamu memisahkan kata-kata menggunakan tanda hubung (-), dibandingkan underscore (_): file-saya.html vs. file_saya.html.

Jawaban singkatnya adalah kamu sebaiknya menggunakan tanda hubung (-) untuk nama file mu. Mesin pencari Google memperlakukan tanda hubung sebagai pemisah kata, namun ia tidak memperlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya kamu membiasakan diri menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kata yang dipisahkan oleh tanda hubung, kecuali bila kamu tahu apa yang kamu lakukan. Hal ini dapat membantumu terhindar dari masalah ke depan.

Bagaimana struktur yang harus kamu gunakan untuk websitemu?

Berikutnya, mari kita lihat struktur seperti apa yang diperlukan oleh website percobaan kita. Hal yang paling sering kamu temukan pada proyek website apapun yang kita buat adalah sebuah file indeks HTML dan folder untuk menyimpan gambar, file CSS, dan file script. Ayo buat sekarang juga:

  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang bisa dilihat orang saat pertama kali membuka websitemu. Dengan menggunakan pengedit teks, buat sebuah file baru bernama index.html dan simpan di dalam folder test-site.
  2. Folder images: Folder ini 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). Buat folder bernama styles di dalam folder test-site.
  4. Folder scripts: Folder ini berisi semua kode JavaScript yang digunakan untuk menambah fungsionalitas interaktif pada websitemu. Buat 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 yang aktif 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 Windowsmu, kamu dapat melakukan pencarian di web.

Jalur/Path file

Agar file-file dapat berkomunikasi antara satu dengan lainnya, kamu harus menyediakan sebuah path file — sebuah rute sehingga satu file dapat mengetahui di mana 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 kamu?" 

  1. Salin gambar yang kamu pilih sebelumnya ke folder image.
  2. Buka file index.html, dan tambahkan kode berikut ke dalam file sama seperti di bawah. Abaikan 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 di mana letak gambar tersebut. Gambar berada pada folder images yang 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 tersebut kami namai  firefox-icon.png, sehingga jalur file-nya 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 peramban webmu (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 nama file seperti my-image.jpg.
  • Untuk menghubungkan sebuah file ke sebuah 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 terkait, tulis 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 mengombinasikan aturan-aturan tersebut sesuai kebutuhanmu, seperti ../subdirectory/another-subdirectory/my-image.jpg.

Untuk sekarang, itulah semua yang perlu kamu ketahui.

Catatan: Sistem file pada Windows biasanya menggunakan garis miring terbalik (\), bukan garis miring (/), contohnya C:\windows. Hal ini tidak masalah 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 foldermu 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

 

 

Dalam modul ini

Tag Dokumen dan Kontributor

Kontributor untuk laman ini: thickkoezz, mdnwebdocs-bot, galuhsahid, BPiVcarD, vdanny
Terakhir diperbarui oleh: thickkoezz,