ลิงก์ (Links) พบได้ในเกือบทุกหน้าเว็บ ช่วยให้ผู้ใช้สามารถ คลิกเพื่อไปยังหน้าอื่น ๆ ได้อย่างสะดวก
HTML Links คืออะไร?
HTML links เรียกว่า Hyperlinks
สามารถคลิกที่ลิงก์เพื่อเปิดหน้าอื่นได้ทันที
เมื่อเอาเมาส์ชี้ที่ลิงก์ เคอร์เซอร์จะเปลี่ยนเป็นรูปมือ
โครงสร้างของลิงก์
<a> ใช้สำหรับกำหนดลิงก์ มีรูปแบบดังนี้:
<a href="url">link text</a>
อธิบาย :href ระบุปลายทางของลิงก์
link text ส่วนข้อความที่ผู้ใช้เห็นและสามารถคลิกได้
href
<a href="https://www.hostatom.com/">เยี่ยมชมเว็บไซต์ของเรา hostatom.com</a>
ลักษณะเริ่มต้นของลิงก์ในเบราว์เซอร์ทั่วไป
- 🔵 ลิงก์ที่ยังไม่ถูกคลิก สีน้ำเงิน + ขีดเส้นใต้
- 🟣 ลิงก์ที่เคยคลิกแล้ว สีม่วง + ขีดเส้นใต้
- 🔴 ลิงก์ที่กำลังคลิก สีแดง + ขีดเส้นใต้
สามารถใช้ CSS เพื่อเปลี่ยนสีหรือสไตล์ของลิงก์ได้
การใช้ target attribute
โดยค่าเริ่มต้น ลิงก์จะเปิดใน หน้าเดิม
หากต้องการเปิดในหน้าต่างหรือแท็บใหม่ ให้ใช้ target attribute
| ค่า | การทำงาน |
|---|---|
_self | เปิดในหน้าปัจจุบัน (ค่าเริ่มต้น) |
_blank | เปิดในแท็บหรือหน้าต่างใหม่ |
_parent | เปิดในเฟรมแม่ |
_top | เปิดในหน้าต่างหลักสุด |
<a href="https://www.hostatom.com/" target="_blank">ไปหน้าเว็บ hostatom</a>
Absolute URLs vs. Relative URLs
- Absolute URL ลิงก์แบบเต็ม (ไปยังเว็บไซต์ภายนอก)
- Relative URL ลิงก์ภายในเว็บเดียวกัน (ไม่ต้องมี https:// นำหน้า)
<h2>Absolute URLs</h2>
<p><a href="https://www.hostatom.com/">hostatom</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="viewport.html">ตัวอย่าง HTML Viewport</a></p>
<p><a href="/html/styles.css">CSS</a></p>
ใช้รูปภาพเป็นลิงก์
เพียงนำ <img> ไปไว้ภายใน <a>
<a href="https://www.hostatom.com/" target="_blank">
<img src="images/smiley.gif" alt="hostatom" style="width:42px;height:42px;">
</a>
ลิงก์ไปยังอีเมล
mailto: ภายใน href เพื่อเปิดโปรแกรมอีเมลของผู้ใช้
<a href="mailto:someone@example.com">Send email</a>
ใช้ปุ่มเป็นลิงก์
<button onclick="document.location='https://www.hostatom.com/'">hostatom</button>
เพิ่มคำอธิบายลิงก์
title
ใช้แสดงคำอธิบายลิงก์ เมื่อเอาเมาส์ชี้บนลิงก์
<a href="https://www.hostatom.com/"
title="ไปยังหน้าหลักของ hostatom">
เยี่ยมชมเว็บ hostatom
</a>
เปลี่ยนสีลิงก์ด้วย CSS
ลักษณะเริ่มต้นของลิงก์ในเบราว์เซอร์ทั่วไป
- 🔵 ลิงก์ที่ยังไม่ถูกคลิก สีน้ำเงิน + ขีดเส้นใต้
- 🟣 ลิงก์ที่เคยคลิกแล้ว สีม่วง + ขีดเส้นใต้
- 🔴 ลิงก์ที่กำลังคลิก สีแดง + ขีดเส้นใต้
สามารถใช้ CSS เพื่อเปลี่ยนสีหรือสไตล์ของลิงก์ได้
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
สร้างลิงก์ให้เหมือนปุ่ม
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
<a href="https://www.hostatom.com/" target="_blank">กดลิงก์ที่นี่</a>
สร้าง Bookmark ใน HTML
HTML Bookmark หรือ Anchor Link ช่วยให้ผู้ใช้คลิกเพื่อไปยังส่วนต่าง ๆ ของหน้าเว็บได้อย่างรวดเร็ว โดยกำหนด id ให้กับจุดหมาย และเครื่องหมาย # ใน href เพื่อเชื่อมโยงลิงก์ไปยัง id นั้นโดยตรง
- สร้างตำแหน่ง bookmark ด้วย
id - สร้างลิงก์ที่ชี้ไปยัง
idนั้น
<!-- กำหนดตำแหน่งปลายทาง -->
<h2 id="C4">Chapter 4</h2>
<!-- สร้างลิงก์เชื่อมไปยังตำแหน่งนั้น -->
<a href="#C4">Jump to Chapter 4</a>
หากต้องการข้ามไปยัง bookmark ในหน้าอื่น:
<a href="page.html#C5">Jump to Chapter 5</a>
สรุป
- ใช้
<a>เพื่อสร้างลิงก์ - ใช้
hrefระบุที่อยู่ปลายทาง - ใช้
targetระบุว่าจะเปิดที่ไหน - ใส่
<img>ใน<a>เพื่อทำให้รูปภาพเป็นลิงก์ - ใช้
mailto:สร้างลิงก์อีเมล - ใช้
titleเพิ่ม tooltip - ใช้
CSSตกแต่งสีและรูปแบบของลิงก์ - ใช้
idและhref="#id"เพื่อสร้าง bookmark ภายในหน้า