|
ไอที |
HTML |
89755
HTML Hyperlinks(Links) การใช้ลิ้งค์ หรือจุดเชื่อมโยง
Hyperlinks หรือ Links หรือ ลิ้ง หรือ จุดเชื่อมโยง ก็คือ คำ หรือกลุ่มคำ หรือรูปภาพ ที่สามารถคลิกแล้ว สามารถไปทำงานในหน้าเอกสารอื่น หรือส่วนใหม่ในหน้าเอกสารเดิม
ถ้าคุณไม่ได้กำหนดลักษณะ css ให้กับลิ้งค์ เมื่อคุณเอาเมาส์ไปชี้ไว้เหนือลิ้งค์ เมาส์จะเปลี่ยนเป็นรูปมือชี้ แต่ลักษะเหล่านี้สามารถเปลี่ยนได้ ตัวอย่างเช่น
ลิ้งที่ไม่ได้กำหนดลักษระเมาส์ไว้ ถ้ากำหนดลักษณะใส่จะเป็น ลิ้งที่กำหนดลักษณะเมาส์เป็นแบบ help
***การกำหนดลักษณะเมาส์จะอยู่ในหมวด CSS นะครับ ในที่นี้ผมไม่ขออธิบายไว้นะครับ***
เรามาดู tag กับ Syntax ในการใส่ลิ้งกันก่อนดีกว่า
- tag ในภาษา html ที่ใช้ในการลิ้ง ก็คือแท็ก <a> ย่อมาจาก Anchor ซึ่งแปรว่า สมอเรือ หรือทอดสมอ
- Syntax ในการใช้แท็ก คือ <a href="url">Link text</a>
วิธีในการสร้างลิ้งค์ มีอยู่ 2 วิธี คือ
1. สร้างลิ้งค์ไปยังเอกสารอื่น
2. สร้างลิ้งค์ในเอกสารเดียวกัน
วิธีการสร้างลิ้งค์ไปยังเอกสารอื่น
เอกสารอื่น นี่อาจจะหมายถึงอะไรก็ได้ ไม่ว่าจะเป็น เอกสาร html, เอกสาร php เอกสาร Word, เอกสาร Excel หรือแม่กระทั่ง รูปภาพ หรือโปรแกรมต่าง ๆ เรามาดูตัวอย่างกันเลยครับ
ตัวอย่างที่ 1
โค้ด : <a href="http://www.doesystem.com/51/HTML/1.html">ลิ้งค์ไปยังเอกสาร html</a>
ผลลัพธ์ : ลิ้งค์ไปยังเอกสาร html
อธิบาย : เราใช้แท็ก a ในการสร้างลิ้งค์ และมีแอททริบิว คือ href ย่อมาจาก hypertext reference ที่ใช้ในการอ้างอิงถึงสิ่งที่จะลิ้งไป ในที่นี้เราใส่เป็น URL ซึ่งก็คือ http://www.doesystem.com/51/HTML/1.html เมื่อคลิกลิ้งค์แล้ว จะกระโดนไปหน้าที่อ้างอิงถึง
ตัวอย่างที่ 2
โค้ด : <a href="http://www.doesystem.com/index.php">ลิ้งค์ไปยังเอกสาร php</a>
ผลลัพธ์ : ลิ้งค์ไปยังเอกสาร php
อธิบาย : ใช้แท็กเหมือนข้างบน ต่างกันตรง URL ที่เป็น .php
ตัวอย่างที่ 3
โค้ด : <a href="../index.php">ลิ้งค์ไปยังเอกสาร php</a>
ผลลัพธ์ : ลิ้งค์ไปยังเอกสาร php
อธิบาย : ในที่มี URL เราไม่ได้ใส่เป็น http แต่เราใส่เป็น ../index.php ซึ่งใช้งานได้ และกระโดดไปที่หน้า index.php ได้เหมือนกัน เครื่องหมาย ../ ก็คือการย้อนกลับไปที่ไดเร็ทรอรี่ก่อนหน้าหนึ่งชั้น หากเราต้องการย้อนไปสองชั้นก็ให้ใส่สองที เช่น ../../ แล้วตามด้วยการชื่อไฟล์ที่ต้องการเรียก
ตัวอย่างที่ 4
โค้ด : <a href="http://www.doesystem.com/Doesystem/pic/admin.jpg">ลิ้งค์ไปยังรูปภาพ</a>
ผลลัพธ์ : ลิ้งค์ไปยังรูปภาพ
อธิบาย : ในที่นี้ก็ระบุ URL เป็น URL ของรูปภาพ
ตัวอย่างที่ 5
โค้ด : <a href="mailto:[email protected]">ลิ้งค์ไปยัง e-mail</a>
ผลลัพธ์ : ลิ้งค์ไปยัง e-mail
อธิบาย : ในที่นี้ก็ระบุ URL เป็น e-mail ของเมล์ที่ต้องการส่ง ต้องมีคำว่า mailto: ข้างหน้าด้วย
วิธีการสร้างลิ้งค์ในเอกสารเดียวกัน
การสร้างลิ้งค์ในเอกสารเดียวกันก็แบ่งออกเป็น 2 แบบด้วยกัน คือ แบบมีแอททริบิวเนม กับ ไม่มีแอททริบิวเนม
แบบไม่มีมีแอททริบิวเนม
แบบไม่มีแอททริบิวเนม ก็เหมือน ๆ กับตัวอย่างที่ผ่านมา เวลาจะลิ้งอยุ่ที่หน้าเดิม ก็เขียนได้เป็น ดังนี้
ตัวอย่างที่ 6
โค้ด : <a href="">ลิ้งค์อยู่ในเอกสารเดียวกัน</a>
ผลลัพธ์ : ลิ้งค์อยู่ในเอกสารเดียวกัน
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ไม่ใส่ URL อะไรเลย
ตัวอย่างที่ 7
โค้ด : <a href="HTML-Hyperlinks(Links)-การใช้ลิ้งค์-หรือจุดเชื่อมโยง.htm">ลิ้งค์อยู่ในเอกสารเดียวกัน</a>
ผลลัพธ์ : ลิ้งค์อยู่ในเอกสารเดียวกัน
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ใส่ชื่อ URL เดียวกับชื่อของเอกสาร ทำให้ลิ้งไปที่หน้าเดิม
แบบมีแอททริบิวเนม
ลิ้งแบบนี้ มีไว้สำหรับ ลิ้งไปหัวข้อย่อยในหน้าเอกสารเดียวกัน เพราะบางทีเอกสารที่มีขนาดสูงเกินไป ทำให้ต้องเลื่อนลงมาอ่านยาก จึงทำเป็นลิ้งค์หัวข้อย่อยให้คลิก
ตัวอย่างที่ 8
โค้ด : <a href="HTML-Hyperlinks(Links)-การใช้ลิ้งค์-หรือจุดเชื่อมโยง.htm">ลิ้งค์อยู่ในเอกสารเดียวกัน</a>
ผลลัพธ์ : ลิ้งค์อยู่ในเอกสารเดียวกัน
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ใส่ชื่อ URL เดียวกับชื่อของเอกสาร ทำให้ลิ้งไปที่หน้าเดิม
ตัวอย่างที่ 9
โค้ด : <a href="#01">ลิ้งค์ไปยังตัวอย่างที่ 1</a>
ผลลัพธ์ : ลิ้งค์ไปยังตัวอย่างที่ 1
อธิบาย : ลิ้งที่อยู่ในเอกสารเดียวกัน แบบวิธีนี้ก็คือ ใส่ชื่อ URL ที่ขึ้นต้นด้วยเครื่องหมาย # และตามด้วยชื่อที่ตั้งไว้ ซึ่งในที่นี้ผมตั้งชื่อเป็น 01 จึงได้ใส่ URL เป็น #01 และในหัวข้อตัวอย่างที่ 1 ผมได้เขียนโค้เป็นดังนี้ <a name="01">ตัวอย่างที่ 1</a>
ตัวอย่างที่ 10
โค้ด : <a href="#02">ลิ้งค์ไปยังตัวอย่างที่ 3</a>
ผลลัพธ์ : ลิ้งค์ไปยังตัวอย่างที่ 3
อธิบาย : ลิ้งนี้ก็เหมือนลิ้งตัวอย่างที่แล้ว ซึ่งผมได้ตั้งชื่อหัวข้อ ตัวอย่างที่ 3 โดยใช้แท็ก a ว่า <a name="02">ตัวอย่างที่ 3</a>
Attribute target เป้าหมายในการลิ้งค์
ตัวย่างที่ผ่านมา เวลาลิ้งค์จะลิ้งอยู่ที่บราวเซอร์เดิม แท็บเดิม แต่ในหลาย ๆ เว็บบางลิ้งอาจจะลิ้ง โดยเปิดบราวเซอร์ใหม่ อาจจะเปิดแท็บใหม่ โค้ดที่ใช้ในการกำหนดนั้นก็ แอททริบิว target ในแท็ก a
โดยในแอททริบิว target จะมีค่าอยู่ด้วยกัน 4 ค่า นั่นก็คือ
1. target="_blank"
ตัวอย่างโค้ด : <a href="" target="_blank">_blank link
เอาต์พุตที่ได้ : _blank link
อธิบาย _blank : เปิดเอกสารในหน้าต่างใหม่ หรือแท็บใหม่ (Opens the linked document in a new window or tab)
2. target="_parent"
ตัวอย่างโค้ด : <a href="" 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"
ตัวอย่างโค้ด : <a href="" target="_self">_self link
เอาต์พุตที่ได้ : _self link
อธิบาย _self : เปิดเอกสารในเฟรมหลัก (Opens the linked document in the parent frame)
4. target="_top"
ตัวอย่างโค้ด : <a href="" target="_top">_top link
เอาต์พุตที่ได้ : _top link
อธิบาย _top : เปิดเอกสารในส่วน body ของวินโดว(Opens the linked document in the full body of the window)