HTML File Path มีเพื่อใช้ระบุตำแหน่งของไฟล์ที่เก็บไว้ในโฟลเดอร์ของเว็บไซต์
ตัวอย่าง File Path
| Path | คำอธิบาย |
|---|---|
| <img src=”picture.jpg”> | ตำแหน่งของไฟล์ “picture.jpg” นี้จะอยู่ในโฟลเดอร์เดียวกันกับหน้าเพจปัจจุบัน |
| <img src=”images/picture.jpg”> | ตำแหน่งของไฟล์ “picture.jpg” นี้อยู่ในโฟลเดอร์ images ซึ่งโฟลเดอร์ imange นี้อยู่ในโฟลเดอร์ปัจจุบัน |
| <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/images/starfish.jpg" 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>
