เชื่อมต่อเอกสารของเราด้วย hyperlink

HTML

hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์

เรามาลองสร้าง hyperlink กันง่ายๆดู

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.สร้าง hyperlink
    ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ

        1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง



    รูปแบบของ hyperlink ภายใน directory เดียวกัน

<a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

    รูปแบบของ hyperlink จาก directory ที่สูงกว่า

<a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

    รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น

<a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

        1.2. ลิงค์กับเว็บภายนอก

    รูปแบบของ hyperlink กับเว็บภายนอก

<a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a>

    2.สร้าง hyperlink ด้วยรูปภาพ
    ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ

    รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ

<a href='หน้าที่ต้องการเชื่อมโยง'> <img border = '0' src ='ที่อยู่ภาพ/ชื่อภาพ'> </a>

    3.สร้าง hyperlink ในหน้าเดียวกัน
    ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>

    รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน

    สร้างจุดที่ต้องการจะลิงค์ไป

<a name='ชื่อจุดลิงค์'> </a>

    สร้างลิงค์

<a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </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)