ลิงก์ 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>