แอตทริบิวต์ href
href คุณลักษณะเป็นหนึ่งในคุณลักษณะที่สำคัญที่สุดใน HTML
href ใช้สำหรับระบุ URL สำหรับ:
- ไฮเปอร์ลิงก์ (เรียกอีกอย่างว่า “ลิงก์”)
- หรือสำหรับการนำเข้าทรัพยากรภายนอก เช่น สไตล์และสคริปต์
กรณีการใช้งานทั่วไปสำหรับ href คือการเพิ่มลิงค์ภายในหรือภายนอก (URL) ในองค์ประกอบสมอ <a> :
<a href="link-path">Click</a>ลิงก์ภายในที่มี href
มาสร้างลิงค์ที่นำผู้ใช้ไปยังหน้าแรกเมื่อคุณคลิกที่มัน
เราจะเรียกมันว่าบ้าน
ขั้นแรก เรากำหนดองค์ประกอบสมอ:
<a>Home</a>
ตอนนี้เพื่อสร้าง <a> องค์ประกอบในไฮเปอร์ลิงก์ เราเพิ่ม href แอตทริบิวต์:
<a href>Home</a>
และกำหนดค่า "/" . ให้ :
<a href="/">Home</a>วิธีแสดงผลในเบราว์เซอร์:
หน้าแรก
เพื่อการวัดผลที่ดี เรามาแยกตัวอย่างองค์ประกอบสมอออกจากกัน:
<a>เป็นแท็กเปิดสมอ</a>เป็นแท็กปิดสมอHomeเป็นเนื้อหา (ส่วนเดียวที่มองเห็นได้ในเบราว์เซอร์)hrefเป็นแอตทริบิวต์ ชื่อ=เป็นผู้ดำเนินการมอบหมาย"/"เป็นแอตทริบิวต์ ค่า
ในเว็บไซต์นี้ องค์ประกอบจุดยึดที่แน่นอนนี้กำลังปิดโลโก้ TechStacker ที่มุมซ้ายบนของส่วนหัว (หากคุณคลิก คุณจะไปที่หน้าแรก)
คุณมักจะเห็นตัวอย่างโค้ดที่แน่นอนนี้ซึ่งใช้ในแถบนำทางของเว็บไซต์ <nav>...</nav> .
สมมติว่าเว็บไซต์ของคุณมีทั้งหมด 3 หน้า เช่น หน้าแรก เกี่ยวกับ ติดต่อ และคุณต้องการสร้าง ภายใน ลิงก์สำหรับพวกเขา
อันดับแรก ควรตั้งชื่อเอกสาร HTML ของแต่ละหน้าดังนี้:
- หน้าแรกควรเป็น
index.html - เกี่ยวกับ ควรเป็น
about.html - ผู้ติดต่อควรเป็น
contact.html
จากนั้นคุณกำหนดเส้นทางเพจที่เกี่ยวข้อง (URL) สำหรับแต่ละเอกสารดังนี้:
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
ตอนนี้คุณสามารถห่อแต่ละองค์ประกอบสมอภายใน <nav> องค์ประกอบ:
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>ตอนนี้คุณมีองค์ประกอบการนำทางที่คุณสามารถใส่ใน ส่วนหัว ส่วนท้าย หรือ แถบด้านข้าง บนเว็บไซต์ของคุณ
ลิงก์ภายนอกที่มี href
หากคุณต้องการเชื่อมโยงไปยังเว็บไซต์อื่นที่ไม่ใช่ของคุณเอง ให้ใช้ ภายนอก รูปแบบลิงก์ โดยที่คุณระบุเส้นทางที่แน่นอน:
<a href="https://www.youtube.com">Link to YouTube.com</a>ฉันจะใช้โอกาสนี้ในการลิงก์ไปยังช่อง YouTube ของตัวเอง:
ลิงก์ไปยังช่อง YouTube ของฉัน (TechStacker)
