We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Sebuah situs terdiri dari banyak file, seperti konten teks, kode, stylesheet, konten media, dan lain-lain. Ketika Anda sedang membuat sebuah situs, Anda perlu merangkai file-file ini menjadi sebuah struktur yang sesuai pada komputermu, memastikan file-file tersebut dapat saling terhubung antara satu dengan yang lain, dan memastikan bahwa semua konten sudah benar sebelum akhirnya Anda mengunggah semua file ke sebuah server. Bagian ini akan membahas isu-isu yang Anda perlu ketahui sehingga Anda dapat membuat struktur file yang sesuai untuk situs Anda.

Dimanakah situs Anda berada pada komputer Anda?

Ketika Anda sedang mengerjakan sebuah situs secara lokal pada komputer pribadi Anda, Anda harus menyimpan semua file yang terkait pada satu folder yang sesuai dengan struktur situs yang sudah diunggah ke server. Folder ini dapat Anda simpan dimanapun sesuka Anda, tetapi Anda harus meletakkannya di suatu tempat yang mudah untuk ditemukan, seperti pada Desktop, pada folder Home, atau pada folder dasar dari hard drive Anda.

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

Catatan untuk pengaturan huruf kapital dan penggunaan spasi

Anda akan menyadari bahwa pada artikel ini, kami akan meminta Anda untuk menamai folder dan file dalam huruf kecil tanpa spasi. Hal ini dikarenakan:

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

Jawaban singkatnya adalah Anda sebaiknya menggunakan tanda hubung (-) untuk nama file Anda. Mesin pencari Google memerlakukan tanda hubung sebagai pemisah kata, namun ia tidak memerlakukan underscore sebagai hal yang sama. Atas dasar hal tersebut, sebaiknya Anda membiasakan diri untuk menulis nama folder dan file dengan huruf kecil, tanpa spasi, dan dengan kata-kataa yang dipisahkan oleh tanda hubung, kecuali apabila Anda tahu apa yang Anda lakukan. Hal ini dapat menghindari Anda dari beberapa masalah ke depannya.

Bagaimana struktur yang harus Anda gunakan untuk website Anda?

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

  1. index.html: File ini secara umum berisi halaman beranda, yaitu gambar dan teks yang orang dapat lihat saat pertama kali membuka website Anda. Dengan menggunakan pengedit teks, buatlah 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 situs Anda. 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 fungsionalitas interaktif pada situs Anda. Buatlah folder bernama scripts di dalam folder test-site.

Catatan: Pada komputer Windows, Anda mungkin mengalami kesulitan saat melihat nama file, karena Windows memiliki opsi Hide extensions for known file types yang aktif secara default. Umumnya, Anda 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 Anda, Anda dapat melakukan pencarian di web.

Jalur/Path file

Agar file-file dapat berkomunikasi antara satu dengan yang lainnya, Anda 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 Anda?" 

  1. Salin gambar yang Anda 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 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 web browser Anda (double-click file). Anda akan melihat halaman web barumu menampilkan gambar Anda!

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 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 mengombinasikan aturan-aturan tersebut sesuai kebutuhanmu, seperti ../subdirectory/another-subdirectory/my-image.jpg.

Untuk sekarang, itulah semua yang Anda perlu untuk 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 Anda sedang mengembangkan situs Anda di Windows, Anda tetap dapat menggunakan garis miring di kode Anda.

Apa lagi yang harus dilakukan?

Begitulah untuk saat ini. Struktur folder Anda 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: galuhsahid, BPiVcarD, vdanny
Terakhir diperbarui oleh: galuhsahid,