พัฒนาเว็บไซต์ด้วย HTML5

HTML5 Uniform Resource Locator (URL)

Uniform Resource Locator (URL) เป็นที่อยู่หรือที่ตั้งของทรัพยากรต่างๆ บนอินเทอร์เน็ต ซึ่งใช้ในการอ้างอิงไฟล์ รูปภาพ เอกสาร หรือข้อมูลต่างๆ ที่ถูกเก็บไว้บนเซิร์ฟเวอร์ โดยใน HTML5 URL เป็นสิ่งสำคัญในการเชื่อมโยงระหว่างหน้าเว็บ และการเข้าถึงทรัพยากรจากแหล่งภายนอก

โครงสร้างของ URL

URL มีโครงสร้างพื้นฐานตามรูปแบบนี้

scheme://[username:password@]host[:port]/path[?query][#fragment]
  • scheme: โปรโตคอลหรือวิธีการสื่อสาร เช่น http, https, ftp
  • username(ไม่บังคับ): ข้อมูลการล็อกอินที่ใช้ระบุผู้ใช้งาน
  • host: ชื่อโดเมนหรือ IP ของเซิร์ฟเวอร์ เช่น www.example.com
  • port (ไม่บังคับ): พอร์ตของเซิร์ฟเวอร์ เช่น :80 สำหรับ HTTP หรือ :443 สำหรับ HTTPS
  • path: เส้นทางไปยังทรัพยากรบนเซิร์ฟเวอร์ เช่น /images/logo.png
  • query (ไม่บังคับ): ข้อมูลเพิ่มเติมที่ส่งผ่าน URL เช่น ?id=123&search=abc
  • fragment (ไม่บังคับ): ชิ้นส่วนในเอกสารที่ต้องการเข้าถึง เช่น #section1

ประเภทของ URL ที่ใช้งานได้ใน HTML5

Absolute URL (URL แบบเต็ม)

เป็น URL ที่ระบุที่อยู่ของทรัพยากรทั้งหมด ซึ่งสามารถเข้าถึงได้จากทุกที่ในอินเทอร์เน็ต

ตัวอย่าง

HTML
<a href="https://www.example.com/page.html">Visit Example</a>

ในตัวอย่างนี้ https://www.example.com/page.html เป็นที่อยู่เต็มที่เชื่อมโยงไปยังหน้าเว็บ page.html บนเซิร์ฟเวอร์ example.com

Relative URL (URL แบบสัมพัทธ์)

เป็น URL ที่อ้างอิงทรัพยากรจากตำแหน่งปัจจุบันของไฟล์บนเซิร์ฟเวอร์ โดยไม่ต้องระบุโดเมนเต็ม

ตัวอย่าง

HTML
<a href="/images/logo.png">View Logo</a>

ในตัวอย่างนี้ URL /images/logo.png อ้างอิงไฟล์รูปภาพที่อยู่ในโฟลเดอร์ images โดยไม่ต้องระบุชื่อโดเมนหรือโปรโตคอล

Data URL

ใช้สำหรับฝังข้อมูลโดยตรงใน HTML โดยไม่ต้องอ้างอิงไฟล์ภายนอก เช่น ไฟล์รูปภาพหรือเอกสาร

ตัวอย่าง

HTML
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCA..." alt="Image">

ในตัวอย่างนี้ ข้อมูลภาพจะถูกฝังไว้ใน HTML โดยใช้การเข้ารหัสแบบ Base64 ซึ่งจะช่วยลดการเชื่อมโยงไปยังไฟล์ภายนอก แต่ทำให้ขนาดไฟล์ HTML ใหญ่ขึ้น

Protocol-relative URL

เป็นการอ้างอิง URL โดยไม่ระบุโปรโตคอล เช่น http หรือ https จะช่วยให้สามารถปรับโปรโตคอลตามการเชื่อมต่อปัจจุบันได้

ตัวอย่าง

HTML
<a href="//www.example.com">Visit Example</a>

ในตัวอย่างนี้ ระบบจะใช้โปรโตคอลตามที่เว็บไซต์ถูกโหลด เช่น ถ้าเปิดด้วย HTTPS ก็จะใช้ https://www.example.com

การประยุกต์ใช้งาน

  • การใช้ Absolute URL เหมาะสำหรับการเชื่อมโยงไปยังเว็บไซต์ภายนอก หรือเมื่อเราต้องการระบุที่อยู่ชัดเจนไม่ว่าจะอยู่ในหน้าหรือเซิร์ฟเวอร์ใด
  • Relative URL ใช้สำหรับการเชื่อมโยงภายในเว็บไซต์เดียวกัน ซึ่งจะช่วยลดความยุ่งยากในการอ้างอิงโดเมนและทำให้โครงสร้างเว็บไซต์ยืดหยุ่น
  • Data URL เหมาะสำหรับการฝังข้อมูลที่มีขนาดเล็ก เช่น ไอคอน หรือรูปภาพขนาดเล็กที่ไม่ต้องการโหลดจากภายนอก
  • Protocol-relative URL จะช่วยให้การเชื่อมโยงทำงานได้ไม่ว่าจะใช้โปรโตคอลใด (HTTP หรือ HTTPS) ซึ่งสำคัญมากสำหรับการเชื่อมต่อที่มีการรักษาความปลอดภัย

URL จึงเป็นองค์ประกอบสำคัญในการออกแบบหน้าเว็บที่สอดคล้องกับมาตรฐานของ HTML5

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ