การใช้งานลิงก์ Links ใน HTML

ลิงก์ Link หรือ Hyperlink คือ url ของหน้าเว็บเพจใด ๆ ที่เราคลิกแล้วจะนำเราเข้าไปสู่หน้าเว็บเพจนั้น ๆ ได้ อาจอยู่ในรูปแบบของข้อความหรือรูปภาพ หรืออื่น ๆ

การใช้งานลิงก์ใน HTML สามารถใช้ได้โดยใช้แท็ก <a> โดยมีรูปแบบดังนี้

<a href="url">link text</a>
  • href คือแอททริบิวต์สำหรับกำหนด url ปลายทางที่ต้องการให้ลิงก์ไป
  • link text คือ ข้อความ (หรือรูปภาพ หรืออื่นๆ) ที่ต้องการให้แสดงผลกำกับลิงก์

ตัวอย่างการใช้งานแท็ก <a>

<a href="https://www.dcrub.com/">ดีครับดอทคอม</a> 

ถ้าเป็นการสร้างลิงก์ไปยังหน้าอื่น ๆ ในเว็บเพจเดียวกัน สามารถทำได้โดยไม่ต้องระบุ url แบบเต็ม ให้ระบุแบบ relative URL ก็ได้ เช่น

<a href="/category/website/wordpress">การสร้างเวบไซต์ด้วย WordPress</a>

Target Attribute

Target Attribute คือแอททริบิวต์ที่ระบุว่า จะให้เปิดลิงก์ไปที่ไหน เช่น เปิดในหน้าเดิม เปิดในหน้าใหม่ เป็นต้น ซึ่งค่าที่สามารถระบุให้กับ Target Attribute ได้ มีดังนี้

  • _blank เปิดลิงก์ไปที่หน้าต่างใหม่หรือแท็บใหม่
  • _self เปิดลิงก์ในหน้าต่างเดิมหรือแท็บเดิม (เป็นค่าตั้งต้น)
  • _parent เปิดลิงก์ในหน้าต่างระดับแม่ (Parent)
  • _top เปิดลิงก์ในหน้าต่างระดับบนสุด
  • framename เปิดลิงก์ในเฟรมที่ระบุ หากไม่มีเฟรมที่ระบุจะเปิดในหน้าต่างใหม่
<a href="https://www.dcrub.com/" target="_blank">ดีครับดอทคอม</a>
<a href="https://www.dcrub.com/" target="_self">ดีครับดอทคอม</a> 
<a href="https://www.dcrub.com/" target="_parent">ดีครับดอทคอม</a> 
<a href="https://www.dcrub.com/" target="_top">ดีครับดอทคอม</a> 

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

เราสามารถใช้รูปภาพมาทำเป็นลิงก์ก็ได้เช่นกัน โดยครอบแท็ก <img> ด้วยแท็ก <a></a> ดังตัวอย่าง

<a href="https://www.dcrub.com/python-string-expandtabs-method">
    <img src="https://www.dcrub.com/wp-content/uploads/2020/02/Python-String-expandtabs-Method.jpg" alt="expandtabs() method">
</a> 

การใช้งานปุ่มกดเป็นลิงก์

เราสามารถทำปุ่มกด (Button) เป็นลิงก์ได้ โดยการเพิ่มโค้ด javascript เข้าไป ดังตัวอย่าง

<button onclick="document.location = 'webpage.html'">Link Text</button> 

Link Title

แอททริบิวต์ title ใช้สำหรับกำหนดข้อมูลบางอย่างเกี่ยวกับลิงก์ ซึ่งข้อมูลส่วนนี้จะแสดงในรูปแบบของ tooltip text เมื่อเอาเมาส์ไปวางเหนือลิงก์ มีตัวอย่างการใช้งานดังนี้

<a href="https://www.dcrub.com/" title="ไปที่หน้าเว็บ ดีครับดอทคอม">ดีครับดอทคอม</a>