การเชื่อมโยงหน้าเว็บเพจ คือการกำหนดส่วนของข้อความที่ต้องการ หรือรูปภาพที่ได้เลือกไว้เพื่อเป็นจุดเชื่อมโยงไปยังเนื้อหาจุดอื่น ๆ ซึ่งเนื้อหาที่เชื่อมโยงไปนั้นอาจจะอยู่ภายในหน้าเดียวกันหรืออยู่คนละหน้าก็ได้ หรืออาจอยู่คนละเว็บไซต์ก็ได้ การเชื่อมโยงหน้าเว็บเพจจะประกอบด้วยส่วนประกอบ สำคัญ 2 ส่วน คือ
1. จุดที่ใช้สำหรับเชื่อมโยง (Link) เป็นส่วนที่ใช้เป็นจุดเชื่อมโยงไปยังเป้าหมายปลายทางอาจเป็นรูปภาพหรือข้อความก็ได้
2. เป้าหมาย (Target) เป็นส่วนปลายทางหรือจุดที่ต้องการให้เชื่อมโยงมาถึง จะอยู่ส่วนใดของเอกสารก็ได้แล้วแต่ผู้เขียนโปรแกรมกำหนด
—————————————————————
การสร้างการเชื่อมโยงสามารถทำได้หลายวิธีดังนี้
1.การเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน
2.การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ
3.การเชื่อมโยงไปยังเว็บไซต์อื่น ๆ
4.การเชื่อมโยงไปยังแฟ้มข้อมูลประเภทต่าง ๆ
5.การเชื่อมโยงเพื่อส่งจดหมายอิเล็กทรอนิกส์
1.การเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน
ใช้ในกรณีที่เราต้องการให้มีจุดเชื่อมโยงในหน้าเดียวกัน เมื่อคลิกเมาส์ที่จุดเชื่อมโยงแล้วมีการเลื่อนตำแหน่งขึ้นหรือลงไปจากตำแหน่งเดิม สามารถสร้างการเชื่อมโยงได้ดังนี้
1.1 สร้างการเชื่อมโยงด้วยแอททริบิวต์ href ดังต่อไปนี้
<a href=”#ชื่อจุดเชื่อมโยง”>….ข้อความที่ปรากฎบนหน้าเว็บเพจ….</a>
ข้อสังเกต ในขั้นตอนของการสร้างการเชื่อมโยง หน้าชื่อจุดเชื่อมโยงต้องมีเครื่องหมาย #
1.2 สร้างจุดเชื่อมโยงในหน้าเว็บเพจด้วยแอททริบิวต์ name ดังต่อไปนี้ : <a name=”ชื่อจุดเชื่อมโยง”>ข้อความที่ปรากฎบนหน้าเว็บเพจในบรรทัดแรกของข้อมูลนั่นๆ</a>
<a name=”ชื่อจุดเชื่อมโยง”>ข้อความที่ปรากฎบนหน้าเว็บเพจในบรรทัดแรกของข้อมูลนั่นๆ</a>
ข้อสังเกต ในขั้นตอนของการสร้างจุดเชื่อมโยง ชื่อจุดเชื่อมโยงไม่ต้องมีเครื่องหมาย #
หมายเหตุชื่อจุดเชื่อมโยงนักเรียนสามารถตั้งขึ้นมาเองเป็นอักษรภาษาอังกฤษ และห้ามซ้ำกันในหน้าเว็บเพจเดียวกัน
ตัวอย่างการสร้างการเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงในหน้าเว็บเพจเดียวกัน <br>
<hr>
<a href=”#link1″>1.หลักการสร้างเว็บเพจ</a><br>
<a href=”#link2″>2.การจัดรูปแบบตัวอักษร</a><br>
<a href=”#link3″>3.การใช้งานรูปภาพบนเว็บเพจ</a><br>
<hr>
<a name=”link1″>หลักการสร้างเว็บเพจ</a>
<br>
………………………<p>
………………………<p>
<a name=”link2″>การจัดรูปแบบตัวอักษร</a>
<br>
………………………<p>
………………………<p>
<a name=”link3″>การใช้งานรูปภาพบนเว็บเพจ</a>
<br>
………………………<p>
………………………<p>
</body>
</html>
—————————————————————
2. การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ คือ การเชื่อมโยงไปยังจุดเชื่อมโยงที่อยู่คนละหน้าเว็บเพจกัน มีรูปแบบการใช้งานดังนี้
<a href=”ชื่อไฟล์เว็บเพจ.นามสกุล”>…ข้อความที่ปรากฎบนหน้าเว็บเพจ…</a>
ตัวอย่างการเขียนโปรแกรมเชื่อมโยงไปหน้าเว็บเพจอื่น (ต้องมีเว็บเพจที่สร้างไว้แล้ว มากกว่า 1 หน้าและถูกจัดเก็บไว้ที่เดี่ยวกัน)
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงในหน้าเว็บคนละหน้า <br>
<hr>
<a href=”page1.html”>1.หลักการสร้างเว็บเพจ (page1.html) </a><br>
<a href=”page2.html”>2.การจัดรูปแบบตัวอักษร
(page2.html) </a><br>
<a href=”page3.html”>3.การใช้งานรูปภาพบนเว็บเพจ (page3.html)</a><br>
<hr>
</body>
</html>
—————————————————————
3. การเชื่อมโยงไปยังเว็บไชต์อื่น ๆ เราสามารถสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ ได้ โดยใช้แท็กดังต่อไปนี้
<a href=”URL หรือที่อยู่ของเว็บไวต์ที่ต้องการ”>ข้อความที่ปรากฎบนหน้าเว็บเพจ</a>
ดัง ที่เราจะเห็นในเว็บไซต์ต่างๆที่มีการเชื่อมโยงไปยังมหาวิทยาลัยต่างๆ เป็นต้นนักเรียนมาทดลองทำตามตัวอย่างด้านล่างดูในตัวอย่างนั้นจะทำการเชื่อม โยง ไปยังมหาวิทยาลัย 4 แห่งด้วยกัน คือ
1.มหาวิทยาลัยศิลปากร โดยที่ URL คือ
//www.su.ac.th
2.มหาวิทยาลัยเกษตรศาสตร์ โดยที่ URL คือ //www.ku.ac.th
3.มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง โดยที่ URL คือ //www.mcru.ac.th
4.มหาวิทยาลัยราชภัฏเพชรบุรี โดยที่ URL คือ //www.pbru.ac.th
ตัวอย่างการสร้างการเชื่อมโยงไปยังเว็บไชต์อื่น ๆ
—————————————————————
เพิ่มเติม การนำรูปภาพมาเป็นชุดเชื่อมโยงสามารถนำรูปภาพมาเป็นจุดเชื่อมโยงได้ เพียงแค่เปลี่ยนข้อความที่ปรากฎบนหน้าเว็บเพจเป็นแท็กที่ใช้แสดงรูปภาพแทนดังนี้
ตัวอย่างการสร้างการเชื่อมโยงไปยังเว็บไซต์ต่าง ๆ โดยใช้รูปภาพ
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ โดยใช้รูปภาพ <br>
<hr>
<a href=”//www.su.ac.th”><img src=”comp4.gif”></a><br>
เป็นการนำรูปภาพมาเป็นชุดเชื่อมโยงไปยังเว็บไซต์ ม.ศิลปากร <br>
<hr>
</body>
</html>
—————————————————————
4.การเชื่อมโยงไปยังไฟล์อื่น ๆ ที่ไม่ใช่เอกสาร HTML
นักเรียนจะเห็นจากบางเว็บไซต์มีการการลิงค์เพื่อให้ทำการ Download ข้อมูลต่าง ๆ เช่น ไฟล์รูปภาพ, ไฟล์โปรแกรม , ไฟล์ซิป (.zip) และไฟล์เสียง เป็นต้น การสร้างชุดเชื่อมโยงหรือลิงค์ก็คล้ายกับวิธีที่กล่าวมาเพียงแต่ว่าถ้าหาก ไฟล์จุดหมายปลายทางเป็นไฟล์ประเภทใดเบราว์เซอร์ก็จะทำงาน ให้สอดคล้องกับไฟล์ ประเภทนั้น เช่น หากไฟล์จุดหมายปลายทางที่สร้างลิงค์ไว้เป็นรูปภาพ เบราว์เซอร์ก็จะเปิดรูป ภาพนั้นให้ดู แต่ถ้าเป็นไฟล์ ประเภทอื่น นัักเรียนก็จะพบหน้าจอ ของการดาวน์โหลด (Download) รูปแบบคำสั่งหรือแท็กที่ใช้เป็นดังนี้้
<a href=”ชื่อไฟล์.นามสกุล”>ข้อความที่ปรากฎบนหน้าเว็บเพจ</a>
ตัวอย่างการสร้างการเชื่อมโยงไปยังไฟล์อื่น ๆ ที่ไม่ใช่ ไฟล์ HTML
—————————————————————
5.การเชื่อมโยงเพื่อส่งจดหมายอิเล็กทรอนิกส์ (E-mail)
นักเรียนสามารถให้ผู้เข้าชมเว็บของเราสามารถติดต่อสื่อสารเราได้ อาจเป็นการส่งคำติชมการสร้างเว็บ หรือการแจ้งข่าวสารให้ผู้สร้างเว็บเพจทราบ เป็นการสื่อสาร แบบ 2 ทาง (Two-way Communication) สามารถทำได้ดังนี้
<a href=”mailto:ชื่ออีเมล์แอดเดรส”> ข้อความลิงค์ที่ปรากฎบนหน้าเว็บเพจ </a>
ตัวอย่างการสร้างการเชื่อมโยงเพื่อส่ง E-mail
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) เพื่อส่ง E-mail </title>
</head>
<body>
การสร้างการเชื่อมโยงเพื่อส่ง E-mail <br>
<hr>
<a href=”mailto:”>ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>
—————————————————————
การกำหนดสีของจุดเชื่อมโยงหรือลิงค์
การ สร้างการเชื่อมโยง โดยปกติเมื่อนำเมาส์ไปชี้ที่จุดเชื่อมโยง นอกจากสัญลักษณ์ของเมาส์จะเปลี่ยนเป็นรูปมือแล้วข้อความที่เป็นจุดเชื่อมโยง หรือลิงค์ ยังมีขีดเส้นใต้หรือบางครั้งก็มีสีที่แตกต่างออกไปจากข้อความปกติและเมื่อ คลิกเมาส์เข้าไปแล้วข้อความที่เป็นลิงค์ที่เราเคยคลิกไปแล้วก็อาจเปลี่ยน เป็นอีกสีหนึ่งได้เพื่อให้เกิดความแตกต่างจากข้อความปกติและเป็นการบอก
ให้ทราบว่าได้เคยคลิกไปที่จุดเชื่อมโยงใดแล้วบ้าง ซึ่งผู้สร้างเว็บเพจสามารถ กำหนดสีของจุดเชื่อมโยงได้เองดังนี้
1.สีของชุดเชื่อมโยงหรือลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink) ใช้แอททริบิวต์ link
2.สีของชุดเชื่อมโยงหรือลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink) ใช้แอททริบิวต์ vlink
3.สีของชุดเชื่อมโยงหรือลิงค์ตอนที่ถูกคลิก (Active Link) ใช้แอททริบิวต์ alink
<body link=”ค่าสี” vlink=”ค่าสี” alink=”ค่าสี”>
ตัวอย่างการกำหนดสีชุดเชื่อมโยงหรือลิงค์
—————————————————————