Links

Link (จุดเชื่อมโยง) เป็นคำหรือกลุ่มของคำหรือรูปภาพที่เมื่อเราคลิกลงไปมันจะเชื่อมต่อไปยังเอกสารอื่นหรือเอกสารเดิมแต่ไปในที่ๆเราต้องการ link element นี้เราจะใช้ <a> ย่อมาจาก anchor ซึ่งเราจะต้องใส่ตัวแปร href ด้วย ย่อมาจาก hypertext reference เพราะเราต้องกำหนดว่าเราจะเชื่อมต่อเอกสารของเราจากไหนไปไหน หน้าตาจะเป็นแบบนี้

<a href="http://www.yoururl.com">Link text</a>

การเปิดหน้า webpage ใหม่

บางทีเราอยากจะเปิดหน้าเวบค้างไว้แล้วสามารถเลือกได้ว่าจะเปิดหน้าเวบใหม่หรือจะใช้หน้าเวบเดิม เราจะใช้ตัวแปรที่ชื่อ target

ถ้าเราจะใช้ตัวแปร target นี้ เราต้องคำนึงถึงว่าผู้ใช้อาจจะไม่ชอบที่ต้องเปิดหน้าใหม่อยู่เสมอ การที่เราสามารถเลือกได้ว่าจะเปิดหน้าเวบใหม่หรือจะใช้หน้าเวบเดิม โดยการคลิกขวา จะเขียนโค้ดได้ดังนี้

<a href="http://www.yoururl.com" target="_blank">This is my link</a>

การเชื่อมโยงไปยังจุดที่ต้องการ

ถ้าเราต้องการเชื่อมโยงเอกสารไปยังจุดที่ต้องการ เราสามารถทำได้ 2 แบบ แบบแรกคือ การกำหนดชื่อให้กับจุดเชื่อม ดังนี้

<a name="question-2">This</a> is the answer to the second question

เราเรียกวิธีนี้ว่า fragment identifier (ตัวระบุจุดเชื่อมโยง) มันจะกำหนดให้กับเอกสาร anchor element จะทำหน้าที่กำหนดสถานที่ที่จะเชื่อมโยง fragment identifier จะทำหน้าที่เชื่อมโยงไป

<a href="#question-2">See the answer to question 2</a>

# คือการบอกว่านี่คือ fragment identifier นะ แล้วจะทำให้เบราเซอร์รู้ว่า question-2 จะ link ไปไหน

HTML5 แนะนำว่าควรจะใช้ตัวแปร id แทน ตัวแปร name ถ้ามันมีอยู่แล้ว ถ้าไม่มี anchor element จะเขียนอีกแบบนึง

นี่คือตัวอย่างการใช้ id

<p id="my-note">This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a>

ถ้าไม่มี id ใน paragraph element แต่เราต้องการที่จะเชื่อมโยงไปยังส่วนแรกของเอกสาร HTML5 แนะนำว่าควรจะทำดังนี้

<p><a name="my-note" />This is my first section, with a unique id</p>
<p>This is just a section – no id’s or anything here</p>

<a href="#my-note">Go to the first section</a>

จากตัวอย่างข้างต้น เราจะเห็นได้ว่า เราสามารถใช้ anchor element แทนได้ถ้าไม่มี id และเขียนปิด tag แรกได้เลย