Relative Paths Dasar
Belajar membaca href dan src yang menunjuk ke file lain di project HTML kecil.
Tujuan belajar
- Memahami href dan src sebagai penunjuk ke halaman atau file
- Membaca relative path sederhana seperti about.html dan images/logo.png
- Memakai relative path pada link dan gambar di halaman HTML kecil
Isi lesson
8 blok- 1.Href dan src menunjuk ke lokasiBelum selesaiWajib
- 2.Relative path dibaca dari posisi file saat iniBelum selesaiWajib
- 3.Contoh project kecil dan HTML-nyaBelum selesaiWajib
- 4.Coba bandingkan href dan srcBelum selesaiWajib
- 5.Path harus cocok dengan nama file dan folderBelum selesaiWajib
- 6.Cek pemahamanBelum selesaiWajib
- 7.Coding practiceBelum selesaiWajib
- 8.RingkasanBelum selesaiWajib
Href dan src menunjuk ke lokasi
WajibDi lesson sebelumnya, kamu memakai href pada link dan src pada gambar. Sekarang kamu melihat nilai di dalam href dan src. Nilai itu sering berupa path, yaitu petunjuk lokasi file atau halaman. Kamu belum perlu masuk ke teori filesystem yang dalam. Fokus dulu pada contoh project kecil.
Bagian ini memengaruhi progres lesson.
Relative path dibaca dari posisi file saat ini
WajibRelative path adalah path yang dibaca dari posisi file HTML yang sedang kamu tulis. Jika index.html dan about.html berada di folder yang sama, link bisa memakai href="about.html". Jika gambar berada di folder images, img bisa memakai src="images/logo.png" atau src="./images/logo.png". Tanda ./ berarti mulai dari folder saat ini.
Bagian ini memengaruhi progres lesson.
Contoh project kecil dan HTML-nya
Wajibproject-belajar/
index.html
about.html
images/
logo.png
<!-- di dalam index.html -->
<a href="about.html">Tentang saya</a>
<img src="images/logo.png" alt="Logo project belajar" />about.html berada sejajar dengan index.html, jadi href cukup menulis about.html. logo.png berada di dalam folder images, jadi src menulis images/logo.png.
Bagian ini memengaruhi progres lesson.
Coba bandingkan href dan src
WajibPerhatikan dua nilai ini: href="about.html" dan src="images/logo.png". Nilai pertama menunjuk ke file yang sejajar dengan index.html. Nilai kedua masuk dulu ke folder images, lalu mencari file logo.png. Kalau nama folder atau file tidak cocok, link bisa salah tujuan atau gambar tidak tampil.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibPath harus cocok dengan nama file dan folder
Kesalahan yang sering terjadi adalah menulis src="image/logo.png" padahal folder aslinya bernama images, atau menulis About.html padahal file sebenarnya about.html. Di banyak environment, perbedaan huruf besar dan kecil bisa membuat path tidak cocok.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Jika index.html dan about.html berada di folder yang sama, href mana yang paling sederhana untuk menuju about.html?
Progres lesson naik setelah jawaban benar.
Coding practice
WajibDibuka di workspace khususLatihan relative path
Latihan memakai href dan src untuk mengarah ke file di project kecil.
Tujuan awal: Bayangkan index.html berada sejajar dengan about.html.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Gunakan href untuk tujuan link dan src untuk lokasi gambar atau file media.
- Gunakan about.html jika file tujuan sejajar dengan index.html.
- Gunakan images/logo.png atau ./images/logo.png jika file berada di folder images.
- Cek nama folder dan file dengan teliti karena path yang tidak cocok membuat link atau gambar gagal bekerja.
- Berikutnya, kamu akan mengecek kesiapan HTML Basics lewat checkpoint module.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Href dan src menunjuk ke lokasi.