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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สร้างลิงก์

Source Code
<a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a>

4. เปิด browser ใหม่เมื่อคลิกที่ลิงก์
การสร้าง link ให้เปิด browser ใหม่เราจะใช้ Attributes โดยพิมพ์ target="_blank" ใน a tag

เปิด browser ใหม่เมื่อคลิกที่ลิงค์

Source Code
<a href="เป้าหมาย" target="_blank">ตัวอักษรที่ใช้แสดง</a>