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

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

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>

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


ไม่มีความคิดเห็น:

แสดงความคิดเห็น