HTML Hyperlinks(Links) การใช้ลิ้งค์ หรือจุดเชื่อมโยง

Hyperlinks หรือ Links หรือ ลิ้ง หรือ จุดเชื่อมโยง ก็คือ คำ หรือกลุ่มคำ หรือรูปภาพ ที่สามารถคลิกแล้ว สามารถไปทำงานในหน้าเอกสารอื่น หรือส่วนใหม่ในหน้าเอกสารเดิม

ถ้าคุณไม่ได้กำหนดลักษณะ css ให้กับลิ้งค์ เมื่อคุณเอาเมาส์ไปชี้ไว้เหนือลิ้งค์ เมาส์จะเปลี่ยนเป็นรูปมือชี้ แต่ลักษะเหล่านี้สามารถเปลี่ยนได้ ตัวอย่างเช่น

ลิ้งที่ไม่ได้กำหนดลักษระเมาส์ไว้ ถ้ากำหนดลักษณะใส่จะเป็น ลิ้งที่กำหนดลักษณะเมาส์เป็นแบบ help
***การกำหนดลักษณะเมาส์จะอยู่ในหมวด CSS นะครับ ในที่นี้ผมไม่ขออธิบายไว้นะครับ***

เรามาดู tag กับ Syntax ในการใส่ลิ้งกันก่อนดีกว่า
- tag ในภาษา html ที่ใช้ในการลิ้ง ก็คือแท็ก ย่อมาจาก Anchor ซึ่งแปรว่า สมอเรือ หรือทอดสมอ
- Syntax ในการใช้แท็ก คือ Link text

วิธีในการสร้างลิ้งค์ มีอยู่ 2 วิธี คือ
1. สร้างลิ้งค์ไปยังเอกสารอื่น
2. สร้างลิ้งค์ในเอกสารเดียวกัน

วิธีการสร้างลิ้งค์ไปยังเอกสารอื่น
เอกสารอื่น นี่อาจจะหมายถึงอะไรก็ได้ ไม่ว่าจะเป็น เอกสาร html, เอกสาร php เอกสาร Word, เอกสาร Excel หรือแม่กระทั่ง รูปภาพ หรือโปรแกรมต่าง ๆ เรามาดูตัวอย่างกันเลยครับ

ตัวอย่างที่ 1
โค้ด : ลิ้งค์ไปยังเอกสาร html
ผลลัพธ์ : ลิ้งค์ไปยังเอกสาร html
อธิบาย : เราใช้แท็ก a ในการสร้างลิ้งค์ และมีแอททริบิว คือ href ย่อมาจาก hypertext reference ที่ใช้ในการอ้างอิงถึงสิ่งที่จะลิ้งไป ในที่นี้เราใส่เป็น URL ซึ่งก็คือ http://www.doesystem.com/51/HTML/1.html เมื่อคลิกลิ้งค์แล้ว จะกระโดนไปหน้าที่อ้างอิงถึง

ตัวอย่างที่ 2
โค้ด : ลิ้งค์ไปยังเอกสาร php
ผลลัพธ์ : ลิ้งค์ไปยังเอกสาร php
อธิบาย : ใช้แท็กเหมือนข้างบน ต่างกันตรง URL ที่เป็น .php

ตัวอย่างที่ 3
โค้ด : ลิ้งค์ไปยังเอกสาร php
ผลลัพธ์ : ลิ้งค์ไปยังเอกสาร php
อธิบาย : ในที่มี URL เราไม่ได้ใส่เป็น http แต่เราใส่เป็น ../index.php ซึ่งใช้งานได้ และกระโดดไปที่หน้า index.php ได้เหมือนกัน เครื่องหมาย ../ ก็คือการย้อนกลับไปที่ไดเร็ทรอรี่ก่อนหน้าหนึ่งชั้น หากเราต้องการย้อนไปสองชั้นก็ให้ใส่สองที เช่น ../../ แล้วตามด้วยการชื่อไฟล์ที่ต้องการเรียก

ตัวอย่างที่ 4
โค้ด : ลิ้งค์ไปยังรูปภาพ
ผลลัพธ์ : ลิ้งค์ไปยังรูปภาพ
อธิบาย : ในที่นี้ก็ระบุ URL เป็น URL ของรูปภาพ

ตัวอย่างที่ 5
โค้ด : ลิ้งค์ไปยัง e-mail
ผลลัพธ์ : ลิ้งค์ไปยัง e-mail
อธิบาย : ในที่นี้ก็ระบุ URL เป็น e-mail ของเมล์ที่ต้องการส่ง ต้องมีคำว่า mailto: ข้างหน้าด้วย

วิธีการสร้างลิ้งค์ในเอกสารเดียวกัน
การสร้างลิ้งค์ในเอกสารเดียวกันก็แบ่งออกเป็น 2 แบบด้วยกัน คือ แบบมีแอททริบิวเนม กับ ไม่มีแอททริบิวเนม

แบบไม่มีมีแอททริบิวเนม
แบบไม่มีแอททริบิวเนม ก็เหมือน ๆ กับตัวอย่างที่ผ่านมา เวลาจะลิ้งอยุ่ที่หน้าเดิม ก็เขียนได้เป็น ดังนี้

ตัวอย่างที่ 6
โค้ด : ลิ้งค์อยู่ในเอกสารเดียวกัน
ผลลัพธ์ : ลิ้งค์อยู่ในเอกสารเดียวกัน
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ไม่ใส่ URL อะไรเลย

ตัวอย่างที่ 7
โค้ด : ลิ้งค์อยู่ในเอกสารเดียวกัน
ผลลัพธ์ : ลิ้งค์อยู่ในเอกสารเดียวกัน
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ใส่ชื่อ URL เดียวกับชื่อของเอกสาร ทำให้ลิ้งไปที่หน้าเดิม

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

ตัวอย่างที่ 8
โค้ด : ลิ้งค์อยู่ในเอกสารเดียวกัน
ผลลัพธ์ : ลิ้งค์อยู่ในเอกสารเดียวกัน
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ใส่ชื่อ URL เดียวกับชื่อของเอกสาร ทำให้ลิ้งไปที่หน้าเดิม

ตัวอย่างที่ 9
โค้ด : ลิ้งค์ไปยังตัวอย่างที่ 1
ผลลัพธ์ : ลิ้งค์ไปยังตัวอย่างที่ 1
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ใส่ชื่อ URL ที่ขึ้นต้นด้วยเครื่องหมาย # และตามด้วยชื่อที่ตั้งไว้ ซึ่งในที่นี้ผมตั้งชื่อเป็น 01 จึงได้ใส่ URL เป็น #01 และในหัวข้อตัวอย่างที่ 1 ผมได้เขียนโค้เป็นดังนี้ ตัวอย่างที่ 1

ตัวอย่างที่ 10
โค้ด : ลิ้งค์ไปยังตัวอย่างที่ 3
ผลลัพธ์ : ลิ้งค์ไปยังตัวอย่างที่ 3
อธิบาย : ลิ้งนี้ก็เหมือนลิ้งตัวอย่างที่แล้ว ซึ่งผมได้ตั้งชื่อหัวข้อ ตัวอย่างที่ 3 โดยใช้แท็ก a ว่า ตัวอย่างที่ 3

Attribute target เป้าหมายในการลิ้งค์

ตัวย่างที่ผ่านมา เวลาลิ้งค์จะลิ้งอยู่ที่บราวเซอร์เดิม แท็บเดิม แต่ในหลาย ๆ เว็บบางลิ้งอาจจะลิ้ง โดยเปิดบราวเซอร์ใหม่ อาจจะเปิดแท็บใหม่ โค้ดที่ใช้ในการกำหนดนั้นก็ แอททริบิว target ในแท็ก a

โดยในแอททริบิว target จะมีค่าอยู่ด้วยกัน 4 ค่า นั่นก็คือ

1. target="_blank"
ตัวอย่างโค้ด : _blank link
เอาต์พุตที่ได้ : _blank link
อธิบาย _blank : เปิดเอกสารในหน้าต่างใหม่ หรือแท็บใหม่ (Opens the linked document in a new window or tab)

2. target="_parent"
ตัวอย่างโค้ด : _parent link
เอาต์พุตที่ได้ : _parent link
อธิบาย _parent : เปิดเอกสารในเฟรมเดียวกับที่ลิ้งค์ถูกคลิก ค่านี้จะเป็นค่าเริ่มต้น(Opens the linked document in the same frame as it was clicked (this is default))

3. target="_self"
ตัวอย่างโค้ด : _self link
เอาต์พุตที่ได้ : _self link
อธิบาย _self : เปิดเอกสารในเฟรมหลัก (Opens the linked document in the parent frame)

4. target="_top"
ตัวอย่างโค้ด : _top link
เอาต์พุตที่ได้ : _top link
อธิบาย _top : เปิดเอกสารในส่วน body ของวินโดว(Opens the linked document in the full body of the window)