คุณสามารถพบลิงก์ได้ในเกือบทุกหน้าเว็บ ลิงก์อนุญาตให้ผู้ใช้คลิกจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง
html links คือ hyperlink
คุณสามารถคลิกที่ลิงก์เพื่อไปสู่หน้าเว็บเพจอื่นๆได้
เมื่อคุณเลื่อนเมาส์ไปบนลิงก์ ลูกศรของเมาส์จะเปลี่ยนเป็นรูปมือเล็กๆ
หมายเหตุ:ลิงก์ไม่จำเป็นต้องเป็นข้อความ ลิงค์สามารถเป็นรูปภาพหรือองค์ประกอบ HTML อื่น ๆ !
ไวยากรณ์ของ html link
แท็ก HTML <a> กำหนดการเชื่อมโยงหลายมิติ มีไวยากรณ์ดังต่อไปนี้:
<a href="url">link text</a>
แอตทริบิวต์ที่สำคัญที่สุดของ <a>
ข้อความลิงค์เป็นส่วนที่ผู้อ่านจะมองเห็นได้
การคลิกที่ข้อความลิงก์จะส่งผู้อ่านไปยังที่อยู่ URL ที่ระบุ
ตัวอย่าง
ตัวอย่างนี้แสดงวิธีสร้างลิงก์ไปยัง hostatom.com :
<!DOCTYPE html>
<html>
<body>
<h1>HTML Links</h1>
<p><a href="https://www.hostatom.com/">เยี่ยมชมเว็บไซต์ของเรา hostatom.com</a></p>
</body>
</html>

ในตัวอย่างจะเป็นลิงก์แบบนี้ เยี่ยมชมเว็บไซต์ของเรา hostatom.com
ตามค่าเริ่มต้น หน้าที่เชื่อมโยงจะแสดงในหน้าต่างเบราว์เซอร์ปัจจุบัน หากต้องการเปลี่ยนแปลง คุณต้องระบุเป้าหมายอื่นสำหรับการลิงก์
แอตทริบิวต์ target ระบุตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
แอตทริบิวต์ target สามารถมีค่าใดค่าหนึ่งต่อไปนี้:
- _self ค่าเริ่มต้น ลิงก์เปิดเอกสารในหน้าต่าง/แท็บเดียวกับที่มีการคลิก
- _blank ลิงก์เปิดเอกสารในหน้าต่างใหม่หรือแท็บ
- _parent ลิงก์เปิดเอกสารในกรอบหลัก
- _top ลิงก์เปิดเอกสารแบบเต็มตัวของหน้าต่าง
ตัวอย่าง
ในตัวอย่างจะใช้ target=”_blank” เพื่อเปิดเอกสารที่ลิงก์ในหน้าต่างหรือแท็บเบราว์เซอร์ใหม่:
<!DOCTYPE html>
<html>
<body>
<h2>การกำหนด target Attribute</h2>
<a href="https://www.hostatom.com/" target="_blank">ไปหน้าเว็บ hostatom</a>
<p>ถ้าใช้ target="_blank" ลิงก์จะเปิดขึ้นในหน้าต่างหรือแท็บเบราว์เซอร์ใหม่</p>
</body>
</html>

Absolute URLs vs. Relative URLs
absolute url คือการระบุที่อยู่ของหน้าเว็บที่เป็น url เต็มๆของหน้าเว็บเพจนั้นๆ จะต้องมาพร้อมกับ http://www.
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.hostatom.com/">hostatom</a></p>
<p><a href="https://www.google.com/">Google</a></p>

relative url คือการชี้ไปยังที่อยู่ของไฟล์จากหน้าเว็บปัจจุบัน
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
</body>
</html>

สังเกตได้จากตัวอย่างจะเห็นว่าเป็นการชี้ไปยังที่อยู่ไฟล์ โดยไม่ต้องที่อยู่แบบ http://www.
การใช้รูปภาพเป็นลิงก์
หากต้องการใช้รูปภาพเป็นลิงก์ ให้ใส่ <img> แท็กภายใน<a>แท็ก:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>การทำลิงก์ในรูป</h2>
<p>หากกดที่รูปยิ้มก็สามารถไปยังหน้าที่ลิงก์ได้เลย</p>
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
</body>
</html>

การลิงก์ Email Address
ใช้ mailto:ภายใน href แอตทริบิวต์เพื่อสร้างลิงก์ที่เปิดโปรแกรมอีเมลของผู้ใช้ (เพื่อให้ส่งอีเมลใหม่ได้):
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h2>การลิงก์ Email Address</h2>
<p>หากต้องการสร้างลิงก์ที่เปิดในโปรแกรมอีเมลของผู้ใช้ (เพื่อให้ส่งอีเมลใหม่ได้) ให้ใช้ mailto: ภายในแอตทริบิวต์ href:</p>
<p><a href="mailto:someone@example.com">Send email</a></p>
</body>
</html>

ชื่อลิงค์
แอตทริบิวต์ title ระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ ข้อมูลส่วนใหญ่มักแสดงเป็นข้อความคำแนะนำเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ
<!DOCTYPE html>
<html>
<body>
<h2>ชื่อลิงค์</h2>
<p>แอตทริบิวต์ title ระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ ข้อมูลส่วนใหญ่มักแสดงเป็นข้อความคำแนะนำเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ.</p>
<a href="https://www.hostatom.com/" title="ไปยังหน้าหลักของ hostatom">เยี่ยมชมเว็บ hostatom</a>
</body>
</html>

สรุปบท
- ใช้<a>องค์ประกอบเพื่อกำหนดลิงค์
- ใช้hrefแอตทริบิวต์เพื่อกำหนดลิงค์แอดเดรส
- ใช้targetแอตทริบิวต์เพื่อกำหนดตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
- ใช้<img>องค์ประกอบ (ภายใน<a>) เพื่อใช้รูปภาพเป็นลิงค์
- ใช้mailto:รูปแบบภายใน href แอตทริบิวต์เพื่อสร้างลิงก์ที่เปิดโปรแกรมอีเมลของผู้ใช้
สีของลิงก์ HTML
ตามค่าเริ่มต้น ลิงก์จะปรากฏดังนี้ (ในทุกเบราว์เซอร์):
- ลิงก์ที่ไม่ได้เข้าชมจะถูกขีดเส้นใต้และเป็นสีน้ำเงิน
- ลิงก์ที่เยี่ยมชมจะถูกขีดเส้นใต้และเป็นสีม่วง
- ลิงก์ที่ใช้งานอยู่จะถูกขีดเส้นใต้และเป็นสีแดง
คุณสามารถเปลี่ยนสีสถานะของลิงก์ได้โดยใช้ CSS:
ตัวอย่าง
ลิงก์ที่ไม่ได้เข้าชมจะเป็นสีเขียวโดยไม่มีขีดเส้นใต้ ลิงค์ที่เยี่ยมชมจะเป็นสีชมพูโดยไม่มีการขีดเส้นใต้ ลิงค์ที่ใช้งานจะเป็นสีเหลืองและขีดเส้นใต้ นอกจากนี้ เมื่อวางเมาส์เหนือลิงก์ (a:hover) ลิงก์จะกลายเป็นสีแดงและขีดเส้นใต้:
<!DOCTYPE html>
<html>
<head>
<style>
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>
</head>
<body>
<h2>สีของลิงก์</h2>
<p>คุณสามารถเปลี่ยนสีเริ่มต้นของลิงก์ได้</p>
<a href="https://www.hostatom.com/" target="_blank">hostatom</a>
</body>
</html>

ปุ่มลิงค์
ลิงก์ยังสามารถจัดรูปแบบเป็นปุ่มได้โดยใช้ CSS:
ตัวอย่าง

การสร้างบุ๊กมาร์กใน HTML
เราสามารถใช้ลิงก์ HTML เพื่อสร้างบุ๊กมาร์ก เพื่อให้ผู้อ่านข้ามไปยังส่วนต่างๆ ของหน้าเว็บได้ ซึ่งมีประโยชน์เวลาหน้าเว็บมีความยาวมาก
เมื่อคลิกลิงก์ หน้าจะเลื่อนลงหรือขึ้นไปยังตำแหน่งที่มีบุ๊กมาร์ก
ตัวอย่าง
ขั้นแรก ใช้idแอตทริบิวต์เพื่อสร้างบุ๊กมาร์ก:
<h2 id="C4">Chapter 4</h2>
จากนั้น เพิ่มลิงก์ไปยังบุ๊กมาร์ก (“ข้ามไปที่บทที่ 4”) จากภายในหน้าเดียวกัน:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>

เมื้อกดที่ลิงก์ Chapter 4 หรือ Chapter 10 ลิงก์ก็จะพาไปที่หัวข้อนั้นๆที่ทำการลิงก์ไว้
สรุปบท
- ใช้
id
แอตทริบิวต์ (id=” value “) เพื่อกำหนดบุ๊กมาร์กในหน้า - ใช้
href
แอตทริบิวต์ (href=”# value “) เพื่อเชื่อมโยงไปยังบุ๊กมาร์ก