การเชื่อมโยงเว็บเพจด้วยลิงก์ (Link)
การเชื่อมโยงข้อมูลในภาษา HTML เป็นการกำหนดตำแหน่งการติดต่อกันระหว่างข้อมูลที่เป็นหน้าปัจจุบันไปยังเป้าหมาย โดยเป้าหมายนั้น ๆ อาจอยู่ในเอกสารหน้าเว็บเพจเดียวกัน หรือเป็นการเชื่อมโยงไปยังไฟล์เอกสารอื่น เว็บเพจหรือเว็บไซต์อื่น โดยจุดเชื่อมโยงสามารถใช้ข้อความหรือภาพกำหนดให้เป็นตำแหน่งของจุดเชื่อมโยงได้ แต่ข้อความที่ถูกกำหนดให้เป็นจุดเชื่อมโยงจะแสดงผลในหน้าเว็บเพจเป็นตัวอักษรที่มีสีแตกต่างจากตัวอักษรทั่วไป และอาจมีการขีดเส้นใต้ข้อความ เมื่อเลื่อนเมาส์ไปชี้ที่ข้อความซึ่งมีการเชื่อมโยงรูปแบบของตัวชี้เมาส์จะเปลี่ยนจากสัญลักษณ์ลูกศรเป็นรูปมือแทน และที่แถบที่แสดงสถานะด้านล่างจะแสดงถึงตำแหน่งของจุดหมายปลายทางที่ข้อความเชื่อมโยงไปถึง
การเชื่อมโยงข้อมูลในภาษา HTML
การเชื่อมโยงข้อมูลในภาษา HTML หมายถึง การกำหนดส่วนของข้อความหรือรูปภาพที่ต้องการในหน้าเว็บเพจ เพื่อกำหนดเป็นจุดเชื่อมโยงไปยังเนื้อหาจุดอื่น ๆ ในหน้าเว็บเพจเดียวกัน, หน้าเว็บเพจอื่นในเว็บไซต์เดียวกัน ไฟล์เอกสารอื่นหรือเว็บไซต์อื่น ๆ
การเชื่อมโยงหน้าเว็บเพจจะต้องมีการกำหนดจุดที่ใช้สำหรับเชื่อมโยง (Link) เป็นส่วนที่ใช้เป็นจุดเชื่อมโยงไปยังเป้าหมายปลายทาง ซึ่งจุดเชื่อมโยงอาจจะเป็นรูปภาพ สัญลักษณ์ หรือข้อความก็ได้นอกจากนี้จะต้องมีการกำหนดเป้าหมาย (Target) เป็นส่วนปลายทาง หรือจุดที่ต้องการ ให้เชื่อมโยงถึงจะอยู่ส่วนใดของเอกสารเว็บเพจขึ้นอยู่ที่ผู้พัฒนาเว็บจะกำหนด
การเชื่อมโยงข้อมูลในเอกสารเดียวกัน
การเชื่อมโยงข้อมูลภายในหน้าเอกสารเดียวกัน คือ การกำหนดตำแหน่งจุดเชื่อมโยงไว้ในหน้าเอกสารเว็บ โดยเอกสารมีเนื้อหาจำนวนมากความยาวของหน้าเอกสารเกินความยาวของการแสดงผลในหนึ่งหน้าจอ สามารถกำหนดจุดในการเชื่อมโยงเป็นข้อความหรือรูปภาพได้ ขั้นตอนการสร้างการเชื่อมโยงหน้าชื่อของจุดเชื่อมโยงต้องมีเครื่องหมาย # โดยมีรูปแบบแท็กคำสั่งสร้างการเชื่อมโยงดังนี้
รูปแบบคำสั่ง <a name="ข้อความที่ต้องการทำการเชื่อมโยง"></a>
<a href="#ชื่อจุดเชื่อมโยง"> ข้อความที่ปรากฏบนหน้าเว็บเพจ </a>
<!doctype html>
<html>
<head> <title>การเชื่อมโยงภายในหน้าเว็บเพจ</title> </head>
<body> <a name="top"></a>
<!--ข้อมูลที่แสดงบนหน้าเว็บเพจ มีความยาวเกินหนึ่งหน้าเว็บเพจ->
<!--ลิงก์โดยใช้ข้อความ เขียนแท็กคำสั่งนี้ไว้บริเวณด้านล่างของเว็บเพจ->
<a href="#top">เลื่อนหน้าขึ้น</a>
</body> </html>
<!doctype html>
<html>
<head><title>การเชื่อมโยงภายในหน้าเว็บเพจ</title></head>
<body><a name="top"></a>
<!--ข้อมูลที่แสดงบนหน้าเว็บเพจ มีความยาวเกินหนึ่งหน้าเว็บเพจ->
<!--ลิงก์โดยใช้รูปภาพ เขียนแท็กคำสั่งนี้ไว้บริเวณด้านล่างของเว็บเพจ->
<a href="#top"><img src="top.gif"></a>
</body></html>
การเชื่อมโยงข้อมูลไปยังเอกสารเว็บเพจอื่น
ใช้ในกรณีที่สร้างเว็บเพจไว้หลาย ๆ ไฟล์และมีการบันทึกไฟล์เว็บเพจซึ่งกำหนดส่วนขยายหรือนามสกุล .HTML ไว้ การเชื่อมโยงเป็นวิธีการสำคัญในการกำหนดการติดต่อระหว่างเอกสารเว็บเพจแต่ละไฟล์ ซึ่งเมื่อมีเว็บเพจจำนวนมากหลาย ๆ หน้า มีเนื้อหาที่เกี่ยวเนื่องกันจะเรียกไฟล์ เอกสารทั้งหมดว่าเว็บไซต์ โดยหน้าแรกของเว็บไซต์ หรือโฮมเพจควรตั้งชื่อไฟล์ว่า index.html และ ทำการสร้างการเชื่อมโยงไปยังเว็บเพจหน้าต่าง ๆ เช่น page1.html, page2.html เป็นต้น สามารถสร้างการเชื่อมโยงไปยังไฟล์ต่าง ๆ ด้วยการใช้แอททริบิวต์ href ดังต่อไปนี้
<!DOCTYPE HTML>
<html>
<head> <title>การสร้างการเชื่อมโยง (Link) </title> </head>
<body> การเชื่อมโยงข้อมูลไปยังเอกสารเว็บเพจอื่น <br> <hr>
<a href="create.html">1.หลักการสร้างเว็บเพจ</a><br>
<a href="format.html">2.การจัดรูปแบบตัวอักษร</a><br>
<a href="picture.html">3.การใช้งานรูปภาพบนเว็บเพจ</a><br>
</body>
</html>
การเชื่อมโยงเอกสารไปยังหน้าเว็บเพจอื่นสามารถกำหนดจุดเชื่อมโยงด้วยภาพได้ เช่นเดียวกับการเชื่อมโยงแบบกำหนดข้อความเป็นจุดเชื่อมโยง โดยเปลี่ยนจากข้อความเชื่อมโยงเป็นการแทรกแท็กคำสั่งการใส่ภาพ แล้วกำหนดชื่อไฟล์ภาพพร้อมด้วยส่วนขยายดังนี้
<!DOCTYPE HTML>
<html> <head> <title>การสร้างการเชื่อมโยง (Link)</title> </head>
<body> การเชื่อมโยงข้อมูลไปยังเอกสารเว็บเพจอื่น <br> <hr>
<a href="create.html"><img src="pic1.gif"></a><br>
<a href="format.html"><img src="pic2.gif"></a><br>
</body> </html>
การเชื่อมโยงข้อมูลไปยังเว็บไซต์อื่น
เป็นการเชื่อมโยงข้อมูลจากจุดเชื่อมโยงไปยังเว็บไซต์อื่น โดยการเชื่อมโยงสามารถใช้ทั้งข้อความ และรูปภาพเป็นจุดเชื่อมโยงได้
รูปแบบคำสั่ง <a href="URL">ข้อความจุดเชื่อมโยง</a>
<!DOCTYPE HTML>
<html> <head> <title>การสร้างการเชื่อมโยง (Link)</title> </head>
<body> การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ <br><hr>
<a href="http://www.srtc.ac.th">1.วิทยาลัยเทคนิคสุราษฎร์ธานี</a><br>
<a href="http://www.svc.ac.th">2.วิทยาลัยอาชีวศึกษาสุราษฎร์ธานี</a><br>
<a href="http://www.cicc.ac.th">3.วิทยาลัยการอาชีพไชยา</a><br>
<a href="http://www.wcc.ac.th">4.วิทยาลัยการอาชีพเวียงสระ</a><br><hr>
</body> </html>
กระบวนการนำภาพมาสร้างเป็นจุดเชื่อมโยงสามารถนำรูปภาพมาเป็นจุดเชื่อมโยงไปยังเป้าหมายต่าง ๆ ได้แบบเดียวกับการใช้ข้อความเป็นจุดเชื่อมโยง เพียงแค่เปลี่ยนข้อความที่ปรากฎบนหน้าเว็บเพจเป็นแท็กคำสั่งที่ใช้แสดงรูปภาพและระบุที่อยู่ของไฟล์ภาพ ชื่อไฟล์.ส่วนขยาย ให้ถูกต้องครบถ้วน ดังนี้
<!DOCTYPE HTML>
<html>
<head><title>การสร้างการเชื่อมโยง (Link) </title></head>
<body> <p>กดรูปภาพเพื่อลิงก์</p>
<a href=" http://www.srtc.ac.th"><img src="cat.jpg"></a>
</body> </html>
การเชื่อมโยงไปยังไฟล์อื่นที่ไม่ใช่เอกสาร HTML
การกำหนดจุดเชื่อมโยงสามารถเชื่อมโยงข้อมูลจากหน้าเว็บเพจปัจจุบันที่ใช้งานอยู่ไปยังไฟล์ข้อมูลต่าง ๆ เช่น ไฟล์รูปภาพ, ไฟล์โปรแกรม, ไฟล์ซิป (.zip) และไฟล์เสียง เป็นต้น โดยโปรแกรมเว็บบราวเซอร์จะทำงานให้สอดคล้องกับไฟล์ประเภทนั้น เช่น หากไฟล์จุดหมายปลายทางที่ สร้างลิงก์ไว้เป็นรูปภาพ บราวเซอร์ก็จะเปิดรูปภาพขึ้นมา แต่ถ้าเป็นไฟล์ประเภทอื่นเว็บบราวเซอร์ก็จะแสดงหน้าจอของการดาวน์โหลด (Download) เพื่อให้ผู้ใช้งานคลิกแสดงผลอีกครั้ง โดยมีรูปแบบคำสั่งดังนี้
รูปแบบคำสั่ง <a href="ชื่อไฟล์.นามสกุล">ข้อความที่ปรากฎบนหน้าเว็บเพจ</a>
ตัวอย่างการเชื่อมโยงไปยังไฟล์อื่น เช่น ต้องการสร้างการเชื่อมโยงไปยังไฟล์รูปภาพ
ชื่อ sea.jpg และไฟล์เอกสารชื่อ mydoc1.doc ทำได้ดังนี้
<a href="sea.jpg">ภาพสวย ๆ</a>
<a href="mydoc1.doc">ไฟล์เอกสาร</a>
<!DOCTYPE HTML>
<html>
<head> <title>การสร้างการเชื่อมโยง (Link) </title> </head>
<body>การสร้างการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg และเว็บไซต์อื่นๆ <br> <hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เป็นการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg <br>
<a href="mydoc1.docx">ไฟล์เอกสาร</a>เป็นการเชื่อมโยงไปยังไฟล์เอกสาร
mydoc1.docx<br>
</body></html>
การเชื่อมโยงเพื่อส่งจดหมายอิเล็กทรอนิกส์ (e-mail)
การกำหนดจุดเชื่อมโยงให้ไปยังจดหมายอิเล็กทรอนิกส์ (e-mail) เป็นกระบวนการหนึ่งที่สามารถเชื่อมโยงการติดต่อสื่อสารระหว่างผู้พัฒนาเว็บกับผู้ใช้งานเว็บ โดยส่วนใหญ่จะมีการกำหนดตำแหน่งของที่อยู่และอีเมล์ในการติดต่อกลับไว้ที่ส่วนท้ายของหน้าเว็บเพจ (footer) มีรูปแบบคำสั่งดังนี้
รูปแบบคำสั่ง <a href="mailto:ชื่ออีเมล์แอดเดรส">ข้อความลิงก์บนหน้าเว็บเพจ</a>
ตัวอย่าง ต้องการส่งอีเมล์ไปให้ผู้ดูแลเว็บไซต์ไทยเมล์ดอทคอม (thaimail.com) ซึ่งมีอีเมล์แอดเดรส
(e-mail address) คือ webmaster@thaimail.com สามารถใช้แท็กคำสั่งดังนี้
<a href="mailto:webmaster@thaimail.com">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<!DOCTYPE HTML>
<html>
<head> <title>การสร้างการเชื่อมโยง (Link) เพื่อส่ง E-mail</title> </head>
<body> การสร้างการเชื่อมโยงเพื่อส่ง E-mail <br>
<a href="mailto:duangrung@gmail.com">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
</body> </html>