HTML5 การระบุ File Path

ใน HTML5 การใช้งาน File Path หมายถึงการระบุเส้นทางไฟล์ที่ใช้ในการเรียกทรัพยากรต่าง ๆ เช่น ไฟล์รูปภาพ, ไฟล์ CSS, ไฟล์ JavaScript หรือแม้กระทั่งไฟล์ HTML อื่น ๆ เพื่อแสดงผลในเว็บไซต์ โดยเส้นทางของไฟล์ที่ใช้นั้นสามารถระบุได้หลายรูปแบบตามตำแหน่งที่อยู่ของไฟล์ และลักษณะการเรียกใช้ ดังนี้

ประเภทของ File Path ใน HTML5

1. Absolute Path (เส้นทางแบบเต็ม)
2. Relative Path (เส้นทางแบบสัมพัทธ์)
3. Root-relative Path (เส้นทางจากโฟลเดอร์หลัก)
4. Protocol-relative Path (เส้นทางตามโปรโตคอลที่กำหนด)

Absolute Path (เส้นทางแบบเต็ม)

เส้นทางแบบ Absolute จะเป็นการระบุเส้นทางแบบเต็มของไฟล์ที่ต้องการเรียกใช้ โดยมักจะเริ่มด้วยชื่อโดเมน เช่น https://www.dcrub.com หรือเส้นทางที่อ้างอิงจากตำแหน่งที่อยู่ของไฟล์ในระบบ

ตัวอย่าง

<img src="https://www.dcrub.com/images/logo.png" alt="Logo">

ในตัวอย่างนี้ จะใช้ URL ที่สมบูรณ์ในการอ้างถึงไฟล์รูปภาพ ซึ่งไฟล์รูปภาพนี้สามารถเรียกดูได้ไม่ว่าหน้าเว็บจะอยู่ที่ไหนในเว็บไซต์

Relative Path (เส้นทางแบบสัมพัทธ์)

เส้นทางแบบ Relative Path จะใช้ในการอ้างอิงไฟล์โดยอิงจากตำแหน่งของไฟล์ HTML ที่กำลังใช้งานอยู่ เส้นทางสัมพัทธ์จะไม่ใช้ชื่อโดเมน แต่จะเริ่มต้นจากตำแหน่งที่สัมพันธ์กัน เช่น ไฟล์ที่อยู่ในโฟลเดอร์เดียวกันหรืออยู่ภายในโฟลเดอร์ย่อย

ตัวอย่าง

<img src="images/logo.png" alt="Logo">

ในตัวอย่างนี้ ไฟล์รูปภาพ logo.png อยู่ในโฟลเดอร์ย่อยชื่อ images ที่อยู่ในโฟลเดอร์เดียวกันกับไฟล์ HTML ที่ใช้งานอยู่

Root-relative Path (เส้นทางจากโฟลเดอร์หลัก)

Root-relative Path จะเริ่มต้นด้วยเครื่องหมาย / ซึ่งหมายถึงโฟลเดอร์หลักของเว็บไซต์ หรือที่เรียกว่า “Document Root” ไฟล์ทั้งหมดจะถูกอ้างอิงจากจุดเริ่มต้นของโฟลเดอร์หลักนี้ ไม่ว่าจะอยู่ในโฟลเดอร์ใดก็ตาม

ตัวอย่าง

<img src="/images/logo.png" alt="Logo">

ในตัวอย่างนี้จะเรียกไฟล์ logo.png ที่อยู่ในโฟลเดอร์ images ซึ่งอ้างอิงจากโฟลเดอร์หลักของเว็บไซต์

Protocol-relative Path (เส้นทางตามโปรโตคอลที่กำหนด)

เส้นทางแบบนี้จะใช้เพื่อหลีกเลี่ยงการกำหนดโปรโตคอล (http หรือ https) โดยตรง แต่จะใช้ // แทน เมื่อเว็บเพจถูกโหลดผ่านโปรโตคอลใด เช่น https:// หรือ http://, เส้นทางจะถูกกำหนดอัตโนมัติตามโปรโตคอลที่ใช้

ตัวอย่าง

<img src="//www.dcrub.com/images/logo.png" alt="Logo">

ในตัวอย่างนี้ ระบบจะเลือกใช้โปรโตคอลที่ใช้อยู่ เช่น หากหน้าเว็บใช้ HTTPS ก็จะเรียกไฟล์รูปภาพจาก https://www.dcrub.com/images/logo.png โดยอัตโนมัติ

การประยุกต์ใช้ในสถานการณ์ต่าง ๆ

การอ้างอิงไฟล์ในโฟลเดอร์เดียวกัน

<img src="logo.png" alt="Logo">

การอ้างอิงไฟล์ในโฟลเดอร์ย่อย

<img src="images/logo.png" alt="Logo">

การอ้างอิงไฟล์ที่อยู่ในโฟลเดอร์ข้างนอก (ออกจากโฟลเดอร์ปัจจุบัน)

<img src="../images/logo.png" alt="Logo">

การอ้างอิงไฟล์ CSS และ JavaScript

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

เส้นทางไฟล์เหล่านี้สามารถใช้งานเพื่อเรียกทรัพยากรต่าง ๆ ได้ตามตำแหน่งที่ไฟล์นั้น ๆ ถูกจัดเก็บในโครงสร้างของโปรเจกต์