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

Relative File Paths
Relative File Path จะชี้ไปยังไฟล์ที่เกี่ยวข้องกับหน้าเพจปัจจุบัน จากตัวอย่างด้านล่างนี้ File Path จะชี้ไปยังโฟลเดอร์ Image ที่อยู่ใน Root ของเว็บปัจจุบัน
<!DOCTYPE html>
<html>
<body>
<h2>การใช้ Relative File Path</h2>
<img src="/images/starfish.jpg" alt="starfish" style="width:300px">
</body>
</html>

ภาพด้านล่างนี้จะเป็นตัวอย่างตัวอย่างของ File Path ที่ชี้ไปยังโฟลเดอร์ Image ที่อยู๋ในโฟลเดอร์ปัจจุบัน
<!DOCTYPE html>
<html>
<body>
<h2>การใช้ Relative File Path</h2>
<img src="images/starfish.jpg" alt="starfish" style="width:300px">
</body>
</html>

จากตัวอย่างด้านล่าง File Path จะชี้ไปยังโฟลเดอร์ Image ที่อยู่ในโฟลเดอร์อีกโฟลเดอร์นึง
<!DOCTYPE html>
<html>
<body>
<h2>การใช้ Relative File Path</h2>
<img src="../images/starfish.jpg" alt="starfish" style="width:300px">
</body>
</html>
