เอกสารเชื่อมโยง hypertext จะอยู่ในรูปของภาพเคลื่อนไหวเท่านั้น

เชื่อมโยงหน้าเดียวกัน  เชื่อมโยงไปเว็บเพจหน้าอื่น  เชื่อมโยงไปเว็บไซต์ี่อื่น  เชื่อมโยงด้วยรูปภาพ  
เชื่อมโยงไปยังไฟล์ต่าง ๆ  เชื่อมโยงไปอีเมล์ (E-mail)  กำหนดสีของลิงค์

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

1. การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน
2. การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น
3. การเชื่อมโยงข้อมูลไปเว็บไซต์อื่น

รูปแบบคำสั่งการสร้างลิงค์

1. การเชื่อมโยงข้อมูลภายในเว็บเพจหน้าเดียวกัน   

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

รูปแบบของแท็ก HTML
                                          <a name=“jump”>…</a> (สร้างจุดปลายทางชื่อ jump)
                                          <a href=“#jump”>…</a> (เชื่อมโยงไปจุดปลายทางชื่อ jump)
ค่าที่กำหนดให้ใช้          ชื่อจุดหมายปลายทาง ที่ไม่ซ้ำชื่ออื่นที่อยู่ในหน้าเว็บเดียวกัน

ตัวอย่างการใช้งาน

ผลลัพธ์ที่ได้

ลองทำดู : คลิก download ไฟล์ ดังภาพ

2. การเชื่อมโยงไปเว็บเพจอื่นภายในเว็บไซต์เดียวกัน   

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

รูปแบบของแท็ก HTML     href=“ชื่อเว็บเพจที่ต้องการเชื่อมโยง”>เรื่องที่จะเป็นจุดเชื่อมโยง</a>
ค่าที่กำหนดให้ใช้               ชื่อเว็บเพจที่เชื่อมโยงจะเป็นชื่อภาษาอังกฤษ.html

ตัวอย่างการเชื่อมโยงเว็บเพจกับหน้าอื่น

ผลลัพธ์ที่ได้

ลองทำดู : คลิก download ไฟล์ ดังภาพ

ทำความเข้าใจ

               การเชื่อมโยงเว็บเพจแบบ Relative Path Names ซึ่งเป็นวิธีที่ใช้ในการอ้างอิงไฟล์เว็บเพจ ไฟล์เอกสาร ไฟล์ให้ดาวน์โหลดที่เก็บในเว็บไซต์เดียวกัน

               การเชื่อมโยงเว็บเพจไปยังเว็บเพจในไดเรกทอรีเดียวกันจะสามารถเชื่อมโยงโดยใช้แท็ก <a href…> โดยพิมพ์ชื่อเว็บเพจที่ต้องการลงไปได้เลย เช่น

             ถ้าหากต้องการเชื่อมโยงเว็บเพจไปยังไดเรกทอรีที่ต่ำกว่า เราสามารถใช้ <a href…> แล้วอ้างอิงตำแหน่งของเว็บปลาย
ทาง ตั้งแต่เริ่มต้นจนถึงปลายทาง

โดยเราจะใส่ชื่อไดเรกทอรีและคั่นด้วยเครื่องหมาย “/” ตามด้วยไฟล์ที่เราต้องการเชื่อมโยง หากมีหลายชั้น
เราก็ต้องกำหนดไดเรกทอรีให้ครบ หากอ้างอิงไม่ครบหรือระบุผิดจะทำให้ทำงานผิดพลาด

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

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

ในการอ้างอิงไดเร็กทอรี่ที่เหนือกว่า เราจะใช้เครื่องหมาย .. ในการอ้างอิง ตามตัวอย่างด้านบน จะสังเกตเห็นว่า
ถ้าอยู่เหนือกว่า 1 ระดับ เราก็จะใช้เครื่องหมาย .. 1 ครั้ง แต่ถ้าเหนือกว่า 2 ระดับ เราก็จะใช้เครื่องหมาย .. 2 ครั้งด้วยกัน

                การใช้วิธีการอ้างอิงตำแหน่งเว็บเพจแบบ Relative Path Name จะทำให้เราไม่ต้องเปลี่ยนตำแหน่งของเว็บเพจที่เรา
อ้างถึง ในโค้ด HTML เมื่อต้องการย้ายที่อยู่ของเว็บไซต์ไปยังไดเร็กทอรี่ที่ต่างๆ  ซึ่งต่างจากการระบุตำแหน่งเว็บเพ็จ
แบบเจาะจง ซึ่งถ้าย้ายไดเร็กทอรี่ของเว็บไซต์จะต้องทำการเปลี่ยนแปลงโค้ด HTML ด้วยเสมอ เช่น

การอ้างอิงแบบเจาะจง เวลาเราเปลี่ยนที่อยู่ของเว็บไซต์ เช่น เปลี่ยนไดเร็กทอรี่ หรือนำเว็บไปฝากไว้ที่เครื่องเซิร์ฟเวอร์ ซึ่งเป็นคอมพิวเตอร์เครื่องอื่น เช่นต้องนำเว็บไปเก็บไว้ใน ไดเร็กทอรี่ “C:\www” เท่านั้น เราก็ต้องกลับไปแก้ไขโค้ด HTML  ทุกๆ หน้าที่ระบุการอ้างอิงแบบเจาะจงให้อ้างอิงไปที่ไดเร็กทอรี่ “C:\www” แทน

               เปรียบเทียบกับการอ้างอิงจากตำแหน่งกันและกัน (Relative Path) เราไม่ต้องแก้ไขใดๆขอเพียงอย่าย้ายตำแหน่ง
ไดเร็กทอรี่ที่เก็บเว็บเพจ หรือเปลี่ยนลำดับชั้นไดเร็กทอรี่ เท่านี้เราก็จะสามารถใช้การเชื่อมโยงบนเครื่องอื่นได้เหมือนที่ทดสอบ
ในเครื่องของเราเอง

 3. การเชื่อมโยงข้อมูลไปยังเว็บไซต์ี่อื่น   

           คือ การเชื่อมโยงข้อมูลไปยังหน้าเว็บไซต์ที่เกี่ยวข้องหรือน่าสนใจ โดยวิธีการระบุ URL ของเว็บไซต์นั้นในแท็ก <a href…>

รูปแบบการใช้งาน
                รูปแบบ     <a href= “URL ของเว็บไซต์ที่ต้องการเชื่อมโยง”>ข้อความที่จะเชื่อมโยง</a>
                 เช่น          <a href=http://www.pw.ac.th>โรงเรียนปทุมวิไล</a>

                 การใส่ URL ที่ถูกต้อง สามารถเขียนดังนี้ เช่น  http://www.pw.ac.th   ไม่ใช่  www.pw.ac.th

ตัวอย่างการใช้งาน

ผลลัพธ์ที่ได้

ลองทำดู : คลิก download ไฟล์ ดังภาพ

                     เราสามารถเปิด URL ในแท็บใหม่หรือหน้าต่างใหม่โดยใช้คำสั่งว่า target=“_blank” ลงไปหลัง URL เช่น

ผลลัพธ์ที่ได้

4. การเชื่อมโยงด้วยรูปภาพ   

เพื่อทำให้เว็บเพจดูน่าสนใจขึ้น เราสามารถใช้รูปภาพเป็นจุดเชื่อมโยง แทนข้อความธรรมดาได้

               รูปแบบของแท็ก             <img src= “ชื่อภาพ.นามสกุลภาพ”>
               ค่าที่กำหนดให้ใช้          ชื่อรูปภาพที่ใช้เป็นสัญลักษณ์ในการเชื่อมโยง

ตัวอย่างการเชื่อมโยงเว็บไซต์ด้วยรูปภาพ

ผลลัพธ์ที่ได้

5. การเชื่อมโยงไปยังไฟล์ต่าง ๆ   

เป็นการเชื่อมโยงไปยังไฟล์ต่าง ๆ  เช่น ไฟล์รูปภาพ, ไฟล์วีดีโอ, ไฟล์โปรแกรม, ไฟล์เสียง, ไฟล์ .zip,  และไฟล์มัลติมีเดีย ซึ่งการเชื่อมโยงจะเหมือนการลิงค์แบบธรรมดา เพียงแต่ระบุปลายทางไปยังไฟล์นั้น ๆ และระบุนามสกุล หากเป็นไฟล์รูปภาพ
จะแสดงอัตโนมัติ แต่ถ้าเป็นไฟล์อื่น ๆ จะขึ้นหน้าจอให้เราบันทึกและดาวน์โหลดเอกสารก่อน

               รูปแบบ   <a href=“ชื่อไฟล์ที่ต้องการลิงค์”>ข้อความที่จะเชื่อมโยง</a>
                              <a href=“ชื่อโฟลเดอร์ /ชื่อไฟล์ที่ต้องการลิงค์”>ข้อความที่จะเชื่อมโยง</a>

ตัวอย่างการลิงค์ไปยังไฟล์อื่นๆ

ผลลัพธ์ที่ได้

ลองทำดู : คลิก download ไฟล์ ดังภาพ

6. การเชื่อมโยงไปอีเมล์ (E-mail)   

ใช้ในกรณีที่ต้องการให้คนอื่นติดต่อเรา โดยให้สร้างลิงค์ชี้ไปยังอีเมล์แอดเดรสของเรา เมื่อผู้ใช้คลิกที่ลิงค์จะส่ง
ไปยังอีเมล์ของเราโดยอัตโนมัติ

                    รูปแบบ  <a href=“mailto: ชื่อ E-mail Adree”>ข้อความที่เป็นลิงค์</a>

ตัวอย่างการเชื่อมโยงไปอีเมล์ (E-mail)

ผลลัพธ์ที่ได้

7. การกำหนดสีของลิงค์  

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

• สีของลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink)
• สีของลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink)
• สีของลิงค์ตอนที่ถูกคลิก (Active Link)

เพื่อป้องกันไม่ให้สีของลิงค์กลืนสีฉากหลัง เราสามารถกำหนดสีของลิงค์ในสถานะต่าง ๆ ได้ ดังนี้

             รูปแบบแท็ก HTML      <body link=“สี/รหัสสี” vlink=“สี/รหัสสี” alink=“สี/รหัสสี”>

ตัวอย่างการกำหนดสีของลิงค์