HTML Links

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

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: