Belajar Path File di HTML

Halo teman-teman!

Pada artikel kali ini, kita akan belajar tentang konsep baru yang penting untuk pemrograman web, yaitu file paths. Kalau sebelumnya kita sudah belajar tentang elemen gambar di HTML, kali ini kita akan memahami cara mengatur lokasi file gambar (atau file lainnya) agar bisa ditampilkan di website. Yuk, langsung mulai!

Apa Itu File Path?

Bayangkan kamu ingin menunjukkan lokasi spesifik suatu tempat ke temanmu. Misalnya, “Pergi ke Jakarta, masuk ke daerah Menteng, lalu cari Jalan Kebon Sirih.” Nah, komputer juga butuh cara untuk menemukan lokasi file, seperti gambar, dokumen, atau halaman HTML lainnya. Inilah yang disebut file path.

File path bisa diartikan sebagai “alamat” file atau folder di komputer kamu. Ada dua jenis file path yang sering digunakan:

1. Absolute Path
   Alamat lengkap file yang dimulai dari “akar” (root) komputer. Misalnya:

   • Windows: C:\Project\Images\kucing.png
   • Mac: /Users/NamaUser/Project/Images/kucing.png

2. Relative Path
   Alamat file yang relatif terhadap lokasi file tempat kamu menulis kode. Misalnya:

   • Dari file index.html ke gambar kucing.png di folder yang sama: ./kucing.png
   • Kalau gambarnya ada di folder lain: ./Images/kucing.png

Kenapa Harus Paham File Path?

Dalam web development, kita sering menggunakan relative path karena:

• Lebih fleksibel: Kalau folder dipindahkan, file path ini tetap valid.
• Lebih sederhana: Tidak perlu mengetik alamat lengkapnya.

Karakter Khusus di Relative Path

Ada beberapa simbol penting yang membantu kamu menavigasi file path:

1. ./
   Artinya: “Di folder ini.”
   Contoh: ./kucing.png untuk file kucing.png di folder yang sama.

2. ../
   Artinya: “Naik satu folder.”
   Contoh: Kalau file kucing.png ada di folder lain: ../Images/kucing.png.

Latihan: Menampilkan Gambar Hewan

Kamu punya folder dengan struktur seperti ini:

- Folder0
  - index.html
  - rabbit.png
  - Folder3
    - cat.png
- Folder1
  - fish.png
  - Folder2
    - bird.png
- dog.png

Tantangan: Tampilkan semua gambar hewan (rabbit, cat, dog, fish, bird) di halaman HTML! Berikut langkah-langkahnya:

1. Rabbit
   Rabbit ada di folder yang sama dengan index.html. Jadi path-nya:

   <img src="./rabbit.png" alt="rabbit">
   

2. Cat
   Cat ada di dalam Folder3. Jadi path-nya:

   <img src="./Folder3/cat.png" alt="cat">
   

3. Dog
   Dog ada di luar folder Folder0. Kita perlu naik satu level:

   <img src="../dog.png" alt="dog">
   

4. Fish
   Fish ada di Folder1, satu level di atas dan masuk ke folder tersebut:

   <img src="../Folder1/fish.png" alt="fish">
   

5. Bird
   Bird ada di dalam Folder2, yang berada di dalam Folder1. Path-nya:

   <img src="../Folder1/Folder2/bird.png" alt="bird">
   

Tips untuk Pemula

• Gunakan Preview di teks editor seperti VS Code untuk memeriksa apakah gambar tampil.
• Kalau gambar tidak muncul, cek ulang path-nya dan perhatikan folder tempat file HTML kamu berada.
• Selalu tambahkan atribut alt untuk memberi deskripsi gambar.

Kesimpulan:
Sekarang kamu sudah tahu cara menggunakan file paths untuk menampilkan file di HTML. Di pelajaran berikutnya, kita akan belajar cara menggunakan path ini untuk membuat website dengan banyak halaman. Jadi, jangan lewatkan ya!

Selamat mencoba!

Baca juga