Berkas, folder, dan path

Bayangkan kamu minta ojek online menjemput temanmu, tapi alamatnya cuma kamu tulis: “rumah warna hijau”. Ojeknya pasti muter-muter. Alamat harus jelas: jalan apa, nomor berapa.

Komputer juga begitu. Nanti di halaman webmu ada gambar, ada berkas gaya, ada berkas lain. Setiap kali kamu memanggilnya, kamu harus menulis alamatnya dengan benar. Salah sedikit saja, browser nyasar. Pelajaran ini isinya cuma satu: cara menulis alamat itu.

Berkas dan folder

Semua yang kamu simpan di komputer adalah berkasFileSatu "lembar" data yang disimpan di komputer atau HP — bisa berisi tulisan, gambar, suara, atau kode.Penjelasan lengkap →: dokumen, foto, lagu, dan tentu saja index.html buatanmu. Berkas-berkas itu dikelompokkan ke dalam folderFolderMap untuk menyimpan file supaya rapi. Folder bisa berisi file dan folder lain.Penjelasan lengkap → supaya rapi, sama seperti kamu menaruh kertas ke dalam map.

Folder boleh berisi folder lagi. Jadi bentuknya seperti pohon yang bercabang. Satu proyek web biasanya satu folder besar yang isinya begini:

proyek/
├── index.html
├── logo.svg
└── gambar/
    ├── kucing.svg
    └── hewan/
        └── ikan.svg

Cara bacanya: di dalam folder proyek ada dua berkas (index.html dan logo.svg) dan satu folder gambar. Di dalam gambar ada berkas kucing.svg dan satu folder lagi, hewan, yang isinya ikan.svg.

Perhatikan bagian belakang nama berkas: .html, .svg. Itu ekstensi, penanda jenis berkas.

Ekstensi itu bagian dari nama. kucing.svg dan kucing.png adalah dua berkas berbeda.

Path: alamat berkas

Alamat sebuah berkas punya nama resmi: pathPath (alamat berkas)Tulisan yang menunjukkan di folder mana sebuah berkas berada, misalnya gambar/kucing.svg.Penjelasan lengkap →. Isinya urutan folder yang harus dilewati, dipisah garis miring /, diakhiri nama berkasnya.

“Tempat kamu berdiri” itu adalah folder tempat berkas yang menulis alamat itu berada. Kalau kamu menulis alamat di dalam index.html, kamu berdiri di folder index.html. Alamat yang dihitung dari posisi sendiri seperti ini disebut path relatif.

Dengan pohon folder di atas, dan kamu berdiri di index.html:

Gampang, kan? Sekarang kebalikannya. Bagaimana kalau yang menulis alamat ada di dalam folder, dan tujuannya ada di folder atasnya?

Untuk naik satu tingkat, pakai dua titik: ../. Misalnya berkasmu gambar/hewan/ikan.svg ingin memanggil logo.svg. Dari folder hewan, kamu naik ke gambar (../), naik lagi ke proyek (../), baru ambil logo.svg:

../../logo.svg

Tiap ../ berarti “naik satu folder”. Ingat ini baik-baik, di pelajaran 9 kamu akan ketemu persis kasus ini.

Dua jenis alamat lain, sekilas

Selain path relatif, ada dua bentuk yang sering kamu temui:

• Path absolut yang diawali /, misalnya /gambar/kucing.svg. Artinya “mulai dari folder paling atas situs”, bukan dari posisimu. Untuk sekarang, kita belum pakai.
• Alamat web lengkap yang diawali https://, misalnya https://contoh.com/foto.jpg. Ini menunjuk ke berkas di internet (kamu sudah kenal bentuknya sebagai URLURLAlamat lengkap sebuah halaman web, misalnya https://namamu.netlify.app.Penjelasan lengkap →).

Di kelas ini kita pakai path relatif saja. Itu yang paling sering dipakai, dan paling aman.

Aturan nama berkas

Alamat hanya benar kalau namanya sama persis. Biasakan lima aturan ini:

1. Huruf kecil semua. Server tempat webmu nanti online biasanya membedakan huruf besar dan kecil (case-sensitiveCase sensitiveMembedakan huruf besar dan huruf kecil, jadi total dan Total dianggap dua nama yang berbeda.Penjelasan lengkap →). Foto.jpg dan foto.jpg dianggap berkas lain.
2. Tanpa spasi. Ganti spasi dengan tanda hubung: foto-liburan.jpg, bukan foto liburan.jpg.
3. Pakai huruf, angka, dan tanda hubung saja. Hindari tanda aneh seperti &, #, atau (.
4. Jangan lupa ekstensi saat menulis alamat.
5. Satu halaman utama bernama index.html. Server mencari nama itu lebih dulu.

Coba sendiri: panggil tiga berkas

Di bawah ini ada folder proyek seperti pohon tadi. Klik nama berkas di daftar untuk melihat isinya. Gambar hanya bisa dilihat, sedangkan index.html bisa kamu ubah.

Untuk latihan ini kita pakai satu tag baru, <img>, yang memasang gambar. Tag itu dijelaskan lengkap di pelajaran berikutnya. Sekarang cukup tiru polanya:

<img src="logo.svg" alt="Logo ungu">

Yang kamu ganti hanyalah isi src, yaitu alamat berkasnya. Tugasmu: ikuti tiga komentar TODO di index.html, panggil logo.svg, kucing.svg, dan ikan.svg dengan alamat yang benar. Lalu lihat kotak Cek alamat berkas di bawah hasilnya. Hijau berarti ketemu, merah berarti nyasar (dan ada sarannya).

Setelah benar, iseng-iseng rusakkan: ganti gambar/kucing.svg jadi Gambar/kucing.svg, atau hapus hewan/ dari alamat ikan. Baca saran yang muncul. Itu cara terbaik paham path.

Mau melihat alamat itu berjalan secara beranimasi? Lihat versi animasinya.

Kesalahan umum

Browser tidak pernah memberi peringatan kalau alamat salah. Ia diam dan menampilkan gambar rusak. Jadi kebiasaan mengecek ejaan alamat itu harus ada di kepalamu.