HTML Links

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

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

html links คือ hyperlink

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

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

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

แท็ก 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>

ไปหน้าเว็บ hostatom

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 “) เพื่อเชื่อมโยงไปยังบุ๊กมาร์ก
< บทเรียนก่อนหน้า
บทเรียนถัดไป >