การใช้งานลิงก์ 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>
