HTML Links

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

คุณสามารถพบลิงก์ได้ในเกือบทุกหน้าเว็บ ลิงก์อนุญาตให้ผู้ใช้คลิกจากหน้าหนึ่งไปยังอีกหน้าหนึ่ง

HTML Links คือ Hyperlink

คุณสามารถคลิกที่ลิงก์เพื่อไปสู่หน้าเว็บเพจอื่นๆ ได้

เมื่อคุณเลื่อนเมาส์ไปบนลิงก์ ลูกศรของเมาส์จะเปลี่ยนเป็นรูปมือเล็กๆ

หมายเหตุ: ลิงก์ไม่จำเป็นต้องเป็นข้อความ ลิงก์สามารถเป็นรูปภาพหรือองค์ประกอบ HTML อื่นๆ !

Tag HTML <a> กำหนดการเชื่อมโยงหลายมิติ มีไวยากรณ์ดังต่อไปนี้:

<a href="url">link text</a>

Attribute ที่สำคัญที่สุดของ <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

ตามค่าเริ่มต้น หน้าที่เชื่อมโยงจะแสดงในหน้าต่างเบราว์เซอร์ปัจจุบัน หากต้องการเปลี่ยนแปลง คุณต้องระบุเป้าหมายอื่นสำหรับการลิงก์

Attribute target ระบุตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง

Attribute 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>
ลองดูสิ ❱

ไปหน้าเว็บ hostatom

Absolute URLs vs. Relative URLs

Absolute URL คือการระบุที่อยู่ของหน้าเว็บที่เป็น URL เต็มๆ ของหน้าเว็บเพจนั้นๆ จะต้องมาพร้อมกับ https://www

Relative URL คือการชี้ไปยังที่อยู่ของไฟล์จากหน้าเว็บปัจจุบัน โดยไม่ต้องมีที่อยู่แบบ https://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>

<h2>Relative URLs</h2>
<p><a href="viewport.html">ตัวอย่าง HTML Viewport</a></p>
<p><a href="/html/styles.css">CSS</a></p>

</body>
</html>
ลองดูสิ ❱

การใช้รูปภาพเป็นลิงก์

หากต้องการใช้รูปภาพเป็นลิงก์ ให้ใส่ Tag <img> ภายใน Tag <a> :

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>การทำลิงก์ในรูป</h2>

<p>หากกดที่รูปยิ้มก็สามารถไปยังหน้าที่ลิงก์ได้เลย</p>

<a href="https://www.hostatom.com/" target="_blank"><img src="smiley.gif" alt="hostatom" style="width:42px;height:42px;"></a>

</body>
</html>
ลองดูสิ ❱

การลิงก์ Email Address

ใช้ mailto: ภายใน href แอตทริบิวต์เพื่อสร้างลิงก์ที่เปิดโปรแกรมอีเมลของผู้ใช้ (เพื่อให้ส่งอีเมลใหม่ได้):

ตัวอย่าง 

<!DOCTYPE html>
<html>
<body>

<h2>การลิงก์ Email Address</h2>

<p>หากต้องการสร้างลิงก์ที่เปิดในโปรแกรมอีเมลของผู้ใช้ (เพื่อให้ส่งอีเมลใหม่ได้) ให้ใช้ mailto: ภายใน Attribute href:</p>

<p><a href="mailto:someone@example.com">Send email</a></p>

</body>
</html>
ลองดูสิ ❱

ชื่อลิงก์

Attribute title ระบุข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ ข้อมูลส่วนใหญ่มักแสดงเป็นข้อความคำแนะนำเมื่อเลื่อนเมาส์ไปเหนือองค์ประกอบ

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
ลองดูสิ ❱

สรุป

  • ใช้ <a> องค์ประกอบเพื่อกำหนดลิงก์
  • ใช้ href Attribute เพื่อกำหนดลิงก์แอดเดรส
  • ใช้ target Attribute เพื่อกำหนดตำแหน่งที่จะเปิดเอกสารที่เชื่อมโยง
  • ใช้ <img> องค์ประกอบ (ภายใน <a> ) เพื่อใช้รูปภาพเป็นลิงก์
  • ใช้ mailto: รูปแบบภายใน href Attribute เพื่อสร้างลิงก์ที่เปิดโปรแกรมอีเมลของผู้ใช้

สีของลิงก์ 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:

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>

<h2>ลิงก์แบบปุ่มกด</h2>
<p>ลิงก์ที่มีลักษณะเป็นปุ่ม:</p>
<a href="https://www.hostatom.com/" target="_blank">กดลิงก์ที่นี่</a>

</body>
</html>
ลองดูสิ ❱

การสร้างบุ๊กมาร์กใน 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 Attribute (id=”value“) เพื่อกำหนดบุ๊กมาร์กในหน้า
  • ใช้ href Attribute (href=”#value“) เพื่อเชื่อมโยงไปยังบุ๊กมาร์ก
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯