HTML Links ก็คือการเชื่อมโยงจากหน้าเว็บเราไปยังที่ต่างๆ ซึ่งเรียกว่า Hyperlinks หรือทำการเชื่อมโยง (link) ภายในเอกสารของเราเองหรือเรียกว่า Anchors ซึ่งการสร้างลิงค์ของเอกสาร HTML ทั้งสองแบบนั้นจะสร้างโดยแท็ก <a> เหมือนกัน
ผลัพธ์ที่ได้คือ  Attribute "id" เป็นการกำหนดว่าส่วนเนื้อหานี้มีชื่อว่า "label" ถ้าเราต้องการลิงค์มายังเนื้อหานี้เราจะต้องทำการอ้างอิงชื่อ "label" <a name="#mindphp.com">ไปที่หัวข้อ 1</a> เมื่อเราคลิกที่ลิงค์ "ไปที่หัวข้อ 1" มันก็จะทำการลิงค์ไปยังเนื้อหา "หัวข้อ 1" ส่วนนี้เรียกว่าลิงค์ ภายใน การใช้ attribute "name" เป็นการกำหนดชื่อให้กับ anchor เมื่อเราต้องการลิงค์ภายในเอกสารนั้น ๆ เช่น
เป็นการกำหนดว่าส่วนเนื้อหานี้มีชื่อว่า "label" ถ้าเราต้องการลิงค์มายังเนื้อหานี้เราจะต้องทำการอ้างอิงชื่อ "label"
เมื่อเราคลิกที่ลิงค์ "Link to label" มันก็จะทำการลิงค์ไปยังเนื้อหา "Any content" ลิงก์ Link หรือ Hyperlink คือ url ของหน้าเว็บเพจใด ๆ ที่เราคลิกแล้วจะนำเราเข้าไปสู่หน้าเว็บเพจนั้น ๆ ได้ อาจอยู่ในรูปแบบของข้อความหรือรูปภาพ หรืออื่น ๆ การใช้งานลิงก์ใน HTML สามารถใช้ได้โดยใช้แท็ก <a> โดยมีรูปแบบดังนี้ <a href=”url“>link text</a>
ตัวอย่างการใช้งานแท็ก <a> <a href="https://www.dcrub.com/">ดีครับดอทคอม</a> ถ้าเป็นการสร้างลิงก์ไปยังหน้าอื่น ๆ ในเว็บเพจเดียวกัน สามารถทำได้โดยไม่ต้องระบุ url แบบเต็ม ให้ระบุแบบ relative URL ก็ได้ เช่น <a href="/category/website/wordpress">การสร้างเวบไซต์ด้วย WordPress</a> Target AttributeTarget Attribute คือแอททริบิวต์ที่ระบุว่า จะให้เปิดลิงก์ไปที่ไหน เช่น เปิดในหน้าเดิม เปิดในหน้าใหม่ เป็นต้น ซึ่งค่าที่สามารถระบุให้กับ Target Attribute ได้ มีดังนี้
<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> Post navigation |
คำสั่งของ tag ใดใช้สำหรับ link ไปยัง homepage หน้าอื่น ๆ
ลิขสิทธิ์ © 2024 berikutyang Inc.
