การเชื่อมโยงเว็บเพจ (link)

บทนำ
การเชื่อมโยงหน้าเว็บเพ็จ คือการกำหนดส่วนของข้อความ รูปภาพ หรือสัญลักษณ์ ไว้เป็นจุดเชื่อมโยงเพื่อเชื่อมโยง (Link) ไปยังเอกสาร ที่อยู่ในตำแหน่งอื่น ๆ เช่น หน้าเดียวกัน หน้าอื่น ๆเว็บเพ็จหรือเว็บไซด์อื่น ๆ การเชื่อมโยงหน้าเว็บเพ็จได้นั้นจะต้องมีการกำหนดจุดที่ใช้ เชื่อมโยงซึ่งอาจจะเป็นรูปภาพหรือสัญลักษณ์ก็ได้ นอกจากนี้จะต้องมีการกำหนดเป้าหมาย (Target) ปลายทางที่ต้องการเชื่อมโยงไปถึงซึ่งจะอยู่ ตำแหน่งใดจะต้องกำหนดโดยผู้เขียนโปรแกรม เอกสาร HTML สามารถเชื่อมโยง (LINK) ไปยังตำแหน่งต่าง ๆ ได้ เพื่ออำนวยความสะดวกในการใช้งาน ทำให้ค้นหาข้อมูลได้ง่าย เราสามารถ เชื่อมโยงไปยังเอกสารที่อยู่หน้าเดียวกัน เอกสารที่อยู่คนละหน้า ไปยังเว็บเพ็จหรือเว็บไซด์อื่น ๆ ข้อดีของการเชื่อมโยงคือทำให้เราไม่ต้องเลื่อนหน้า เอกสารบ่อย ๆ เมื่อสนใจข้อมูลหัวข้อใดก็ทำการคลิกที่ตำแหน่ง Hyperlink ก็สามารถเชื่อมโยงไปยังหัวข้อที่ต้องการได้
การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ          
 1. การเชื่อมโยงระหว่างเว็บเพจ       
<a href"ไฟล์เว็บเพจ">...สิ่งที่จะลิงค์...</a>            
2. การเชื่อมโยงนอกเว็บไซต          
<a href="URL">...สิ่งที่จะลิงค์...</a>          
 3. การเชื่อมโยงภายในหน้าเว็บเพจ   
<a name"กำหนดชื่อปลายทาง"></a>   และ    <a href"#ชื่อปลายทาง">..สิ่งที่จะลิงค์...</a>          
 4. การเชื่อมโยงแบบอีเมล            
<a href"mailto: E-mail address ที่ต้องการส่งถึง">..สิ่งที่จะลิงค์...</a>
ในการเชื่อมโยง (ลิงค์) เราสามารถที่จะลิงค์โดยใช้รูปภาพ หรือข้อความก็ได้ โดยเมื่อรูปภาพหรือข้อความถูกลิงค์ เมื่อเราทดสอบ ผ่านเว็บบราวเซอร์ สัญลักษณ์เมาส์ของเราจะเปลี่ยนจากภาพลูกศร เป็นภาพมือแทน เมื่อเมาส์ถูกเลื่อนไปอยู่บริเวณที่เราได้ลิงค์ไว้



รูปแบบการเชื่อมโยงระหว่างเว็บเพจ
<html>  <head><title> ....การเชื่อมโยงระหว่างเว็บเพจ....</title></head>       
<body>         
         <a href="index.html">คลิ๊กที่นี้เพื่อกลับไปหน้าแรก</a><p> <!--ลิงค์โดยใช้ข้อความ ->       
         <a href="index.html"><imgsrc="home.gif"></a> <!--ลิงค์โดยใช้รูปภาพ ->       
</body>   </html>
รูปแบบการเชื่อมโยงนอกเว็บไซต์
<html>  
<head>
<title> ....การเชื่อมโยงนอกเว็บไซต์....</title>
</head>       
<body>               <!--ลิงค์โดยใช้ข้อความ ->               
<a href="http://www.nextstepdev.com">ลิงค์มาที่เว็บไซต์ Nextstepdev.com</a><p>               
<!--ลิงค์โดยใช้รูปภาพ ->               
<a href="http://www.nextstepdev.com"><imgsrc="nextstpdev.gif"></a>       
</body>   
</html>
การเชื่อมโยงภายในหน้าเว็บเพจ
<html>  
<head>  
<title> ....การเชื่อมโยงภายในหน้าเว็บเพจ โดยคลิ๊กที่ด้านล่าง แล้วเลื่อนขึ้นมาด้านบน....
</title>  
</head>       
<body>          <!--กำหนดชื่อปลายทาง เขียนโค้ดส่วนนี้ไว้บริเวณด้านบนของเพจ->         
<a name="top"></a>
          <!--ช่วงระหว่างนี้ต้องมีข้อมูลเยอะ ๆ เกินหนึ่งหน้าเพจสกรีนจึงจะเห็นผลการทำงาน->          
          <!--ลิงค์โดยใช้ข้อความ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->         
<a href="#top">Go to Top</a><p>          
<!--ลิงค์โดยใช้รูปภาพ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->          
<a href="#top"><imgsrc="top.gif"></a>        
</body>   
</html>

การเชื่อมโยงแบบอีเมล์
<html>  
<head>
<title> ....การเชื่อมโยงแบบอีเมล์....</title>
</head>       
<body>               <!--ลิงค์โดยใช้ข้อความ ->               
<a href="mailto:mail@domain.com">ลิงค์เมล์ส่งเมล์ไปที่ mail@domain.com</a><p>               
<!--ลิงค์โดยใช้รูปภาพ ->               
<a href="mailto:mail@domain.com"><imgsrc="contact.gif"></a>       
</body>   
</html>
รูปแบบคำสั่ง
<body text            =  สีข้อความปกติ
Link                       =  สีที่เป็นจุดเชื่อมโยง
Vlink                     =  สีที่เป็นจุดเชื่อมโยงที่เคยถูกคลิกใช้งานแล้ว
Alink                     =  สีที่เป็นจุดเชื่อมโยงที่กำลังถูกเรียกใช้งาน>

ตัวอย่าง
สรุปประเภทของการเชื่อมโยง
1. การเชื่อมโยงแบบข้อความ
2. การเชื่อมโยงโดยใช้รูปภาพหรือสัญญลักษณ์
<a href =ชื่อเว็บไซด์ปลายทาง><imgsrc="=ชื่อรูป.นามสกุล" alt="อธิบาย"></A>
3. การเชื่อมโยงภายในเว็บเพ็จเดียวกัน
<a href ="#ปลายทาง">ข้อความ</a><BR>
<a name="ชื่อปลายทางที่จะเชื่อมโยง">ข้อความ</a>
4. การเชื่อมโยงไปยังเว็บเพ็จอื่น
5. การเชื่อมโยงไปยังเว็บไซด์อื่น
6. การเชื่อมโยงไปยัง E-mail