home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีลิงก์หน้าเว็บด้วย Relative URL ใน HTML

Relative URL ใช้สำหรับลิงก์ไปยังหน้าอื่นในเว็บไซต์เดียวกัน ไม่ต้องระบุ domain เต็ม

รูปแบบ Relative URL

รูปแบบความหมายตัวอย่าง
/aboutจาก root ของ domainhttps://example.com/about
about.htmlในโฟลเดอร์เดียวกันhttps://example.com/folder/about.html
../about.htmlย้อนกลับ 1 โฟลเดอร์https://example.com/about.html
../images/photo.jpgย้อน 1 โฟลเดอร์ เข้า images-
./contact.htmlโฟลเดอร์ปัจจุบัน (ชัดเจน)-

Attribute ของ <a> tag

Attributeคำอธิบาย
hrefURL ปลายทาง (จำเป็น)
relความสัมพันธ์: nofollow, external, author, bookmark
targetเป้าหมาย: _self, _blank, _parent, _top
titleTooltip เมื่อ hover
downloadบังคับดาวน์โหลด

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <title>HTML Relative URLs</title>
</head>
<body>
  <p>
    Our <a href="/about/about_team.htm">Team</a> comprises of programmers, writers, and analysts.
  </p>
  <nav>
    <a href="/products">Products</a> |
    <a href="/services">Services</a> |
    <a href="/contact">Contact</a>
  </nav>
</body>
</html>

ข้อดีของ Relative URL

  • ย้าย domain/host ง่าย (ไม่ต้องแก้โค้ด)
  • โค้ดสั้น อ่านง่าย
  • ทำงานได้ทั้ง localhost และ production