Link คือ Hyperlink ที่สามารถใช้เพื่อเชื่อมโยงกับไฟล์ หรือเนื้อหาอื่นๆ ทั้งภายในและภายนอกไฟล์ ซึ่ง link ไม่จำเป็นต้องเป็นแค่ข้อความธรรม เพราะ link สามารถเป็นได้หลากหลาย ตัวอย่างเช่น link รูปภาพ
ไวยากรณ์
<a href="URL">Link name</a>
element <a> มีคุณสมบัติที่สำคัญอย่าง 1 ที่ขาดไม่ได้หากต้องการเชื่อมโยงกับไฟล์อื่นนั่นคือ href แล้วตามด้วย ที่อยู่ของไฟล์ที่ต้องการเชื่อมโยง
ค่าเริ่มต้นของ link ในทุกเบราว์เซอร์มีดังนี้
- ลิงค์ที่ยังไม่ได้ไป หรือดำเนินการใดๆก็จะมีสีน้ำเงินและขีดเส้นใต้
- ลิงค์ที่ไปแล้วก็จะเปลี่ยนเป็นสีม่วงและขีดเส้นใต้
- ลิงค์ที่กำลังใช้งานจะเป็นสีแดงและขีดเส้นใต้
ตัวอย่างที่ 1 link แบบปกติ
<html> <body> <a href="https://www.narasak.com/บทที่-3-html/">บทเรียน HTML</a> </body> </html>
ไฟล์ที่ 1 test_link.html
ซึ่งการเปิดลิงค์ปลายทาง (Target Link) นั้นสามารถเปิดได้หลากหลายวิธี เช่น เปิดในแท็บปัจจุบัน หรือแท็บอื่น เป็นต้น
Target Link (ลิงค์ปลายทาง)
ค่าเริ่มต้นในการคลิกลิงค์จะทำให้ แสดงผลที่แท็บเบราว์เซอร์ปัจจุบัน ซึ่งแน่นอนว่าสามารถเปลี่ยนได้ ดังต่อไปนี้
- _self เป็นค่าเริ่มต้น ซึ่งจะแสดงในแท็บปัจจุบัน
- _blank แสดงผลในแท็บใหม่
- _parent เปิดในเฟรมหลัก
- _top เปิดเอกสารแบบเต็มหน้า
ตัวอย่างที่ 2 target_link
<html> <body> <a href="https://www.narasak.com/บทที่-3-html/">Target Link ค่าเริ่มต้น _self</a><br> <a href="https://www.narasak.com/บทที่-3-html/" target="_blank">_blank</a><br> <a href="https://www.narasak.com/บทที่-3-html/" target="_parent">_parent</a><br> <a href="https://www.narasak.com/บทที่-3-html/" target="_top">_top</a> </body> </html>
ไฟล์ที่ 2 target_link.html
Link Bookmarks
link bookmarks มีประโยชน์สารมารถเชื่อมโยงไปยังปลายที่ต้องการได้เจาะจงลึกมายิ่งขึ้น ยกตัวอย่างเกี่ยวกับการเดินทางเช่น “สมมติถ้าเราต้องการเดินทางไปเที่ยวที่ต่างจังหวัดโดยรถประจำทางเราก็สามารถระบุจังหวัดที่ต้องการไป และสามารถลงที่หมู่บ้าน ตำบล หรืออำเภอไหนก็ได้ตามที่เราต้องการ” เป็นต้น ซึ่งจะเป็นประโยชน์มากหากข้อมูลในเพจมีเยอะ
ตัวอย่างที่ 3 ใช้ไอดีในการระบุ (ภายในไฟล์)
<html> <body> <a href="#H06">Go</a> <h1 id="H01">H01</h1> <p id="P01">P01</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <hr> <h1 id="H02">H02</h1> <p id="P02">P02</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <hr> <h1 id="H03">H03</h1> <p id="P03">P03</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <hr> <h1 id="H04">H04</h1> <p id="P04">P04</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <hr> <h1 id="H05">H05</h1> <p id="P05">P05</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <hr> <h1 id="H06">H06</h1> <p id="P06">P06</p> <a href="#H01">ฺBack</a> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <hr> <h1 id="H07">H07</h1> <p id="P07">P07</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> </body> </html>
ไฟล์ที่ 3 test_bookmark.html
จากไฟล์ที่ 3 เป็นการสร้างบุ๊คมาร์คเพื่อกลับไปกลับมาระหว่าง element id เท่ากับ H01 และ H06
ตัวอย่างที่ 4 สร้างบุ๊คมาร์คเพื่อลิงค์ไปยังไฟล์ที่ 3 test_bookmark.html
<html> <body> <a href="test_bookmark.html#H04">Go</a> </body> </html>
ไฟล์ที่ 4 link_test_bookmark.html
อธิบายไฟล์ที่ 4 เป็นการสร้างลิงค์เพื่อเชื่อมโยงไปยังไฟล์ test_bookmark.html และบุ๊มาร์คไว้ที่ element ที่ id เท่ากับ H04