HTML File Path ใช้สำหรับ ระบุตำแหน่งของไฟล์ ที่เก็บอยู่ภายในโฟลเดอร์ของเว็บไซต์ เช่น ภาพ, ไฟล์ CSS, หรือ JavaScript
File Path Examples
| Path | คำอธิบาย |
|---|---|
| <img src="picture.jpg"> | ตำแหน่งของไฟล์ “picture.jpg” นี้จะอยู่ในโฟลเดอร์เดียวกับหน้าเว็บปัจจุบัน |
| <img src="images/picture.jpg"> | ตำแหน่งของไฟล์ “picture.jpg” นี้อยู่ในโฟลเดอร์ Images ซึ่งโฟลเดอร์นี้อยู่ในโฟลเดอร์เว็บปัจจุบัน |
| <img src="/images/picture.jpg"> | ตำแหน่งของไฟล์ “picture.jpg” นี้อยู่ในโฟลเดอร์ Images ซึ่งอยู่ใน Root ของเว็บปัจจุบัน |
| <img src="../picture.jpg"> | ตำแหน่งของไฟล์ “picture.jpg” นี้อยู่ในโฟลเดอร์ถัดขึ้นไปจากโฟลเดอร์นี้ ซึ่งโฟลเดอร์นี้อยู่ภายในโฟลเดอร์เว็บปัจจุบัน |
HTML File Paths
File Path ใช้เพื่ออธิบายตำแหน่งของไฟล์ในโครงสร้างของเว็บไซต์ โดยมักถูกใช้ในการเชื่อมต่อไฟล์ภายนอก เช่น
- Web Pages
- Images
- Style Sheets (CSS)
- JavaScripts
Absolute File Paths
Absolute Path คือ URL แบบเต็มของไฟล์ เหมาะสำหรับการอ้างถึงไฟล์ที่อยู่บนเว็บไซต์อื่น
<img src="https://kb.hostatom.com/lesson/html/images/starfish.webp" alt="starfish" style="width:300px">
Relative File Paths
Relative Path คือ การอ้างตำแหน่งไฟล์โดยอิงจาก ตำแหน่งของหน้าเว็บปัจจุบัน และไม่ใส่ชื่อเว็บไซต์ เพราะถือว่าไฟล์นั้นอยู่ในเว็บเดียวกัน
โฟลเดอร์หลัก (Root Directory) ของเว็บไซต์
<img src="/images/starfish.jpg" alt="starfish" style="width:300px">
โฟลเดอร์ย่อยในตำแหน่งเดียวกับไฟล์ HTML
<img src="images/starfish.jpg" alt="starfish" style="width:300px">
ย้อนกลับขึ้นไป 1 ชั้นจากโฟลเดอร์ปัจจุบัน
<img src="../images/starfish.jpg" alt="starfish" style="width:300px">