Belajar HTML Part 19: HTML File Paths

HTML File Paths


HTML File Paths menggambarkan lokasi file dalam struktur folder situs web.

HTML File Paths digunakan saat menghubungkan ke file eksternal seperti:
     1. Halaman web
     2. Gambar
     3. Style sheets
     4. JavaScripts

HTML File Paths absolut


HTML File Paths absolut dapat dipanggil dengan URL lengkap ke file internet:
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

Contoh Code:

<!DOCTYPE html>
<html>
<body>
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain" style="width:300px">
</body>
</html>

Tag <img> dan atribut src dan alt dijelaskan di bab tentang Gambar HTML.

HTML File Paths Relatif


HTML File Paths relatif mengarah ke file yang relatif ke halaman saat ini.

Dalam contoh ini HTML File Paths menunjuk ke file dalam folder gambar yang terletak di root web saat ini:
<img src="/images/picture.jpg" alt="Mountain">

Dalam contoh ini HTML File Paths menunjuk ke file dalam folder gambar yang terletak di folder saat ini:
<img src="images/picture.jpg" alt="Mountain">

Dalam contoh ini path file menunjuk ke file dalam folder gambar yang berada di folder satu tingkat di atas folder saat ini:
<img src="../images/picture.jpg" alt="Mountain">

Path Description
<img src="picture.jpg"> picture.jpg terletak di folder yang sama dengan halaman saat ini
<img src="images/picture.jpg"> picture.jpg terletak di folder gambar di folder saat ini
<img src="/images/picture.jpg"> picture.jpg terletak di folder gambar di root web saat ini
<img src="../picture.jpg"> picture.jpg terletak di folder satu tingkat atas dari folder saat ini


Praktek terbaik


Ini adalah praktik terbaik untuk menggunakan HTML File Paths relatif (jika mungkin).

Bila menggunakan HTML File Paths relatif, halaman web Anda tidak akan terikat pada URL dasar Anda saat ini. Semua tautan akan bekerja di komputer Anda sendiri (localhost) serta domain publik Anda saat ini dan domain publik masa depan Anda.


Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2