การเชื่อมโยงหน้าเว็บเพจ คือการกำหนดส่วนของข้อความที่ต้องการ หรือรูปภาพที่ได้เลือกไว้เพื่อเป็นจุดเชื่อมโยงไปยังเนื้อหาจุดอื่น ๆ ซึ่งเนื้อหาที่เชื่อมโยงไปนั้นอาจจะอยู่ภายในหน้าเดียวกันหรืออยู่คนละหน้าก็ได้ หรืออาจอยู่คนละเว็บไซต์ก็ได้ การเชื่อมโยงหน้าเว็บเพจจะประกอบด้วยส่วนประกอบ สำคัญ 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 คือ http://www.su.ac.th
2.มหาวิทยาลัยเกษตรศาสตร์ โดยที่ URL คือ http://www.ku.ac.th
3.มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง โดยที่ URL คือ http://www.mcru.ac.th
4.มหาวิทยาลัยราชภัฏเพชรบุรี โดยที่ URL คือ http://www.pbru.ac.th
ตัวอย่างการสร้างการเชื่อมโยงไปยังเว็บไชต์อื่น ๆ
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ <br>
<hr>
<a href="http://www.su.ac.th">1.มหาวิทยาลัยศิลปากร </a><br>
<a href="http://www.ku.ac.th">2.มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">3.มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">4.มหาวิทยาลัยราชภัฏเพชรบุรี</a><br>
<hr>
</body>
</html>
|
---------------------------------------------------------------
เพิ่มเติม การนำรูปภาพมาเป็นชุดเชื่อมโยง สามารถนำรูปภาพมาเป็นจุดเชื่อมโยงได้ เพียงแค่เปลี่ยนข้อความที่ปรากฎบนหน้าเว็บเพจเป็นแท็กที่ใช้แสดงรูปภาพแทนดังนี้
<a href="http://www.su.ac.th"><img src="sea.jpg"></a>
|
ตัวอย่างการสร้างการเชื่อมโยงไปยังเว็บไซต์ต่าง ๆ โดยใช้รูปภาพ
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ โดยใช้รูปภาพ <br>
<hr>
<a href="http://www.su.ac.th"><img src="comp4.gif"></a><br>
เป็นการนำรูปภาพมาเป็นชุดเชื่อมโยงไปยังเว็บไซต์ ม.ศิลปากร <br>
<hr>
</body>
</html>
|
---------------------------------------------------------------
4.การเชื่อมโยงไปยังไฟล์อื่น ๆ ที่ไม่ใช่เอกสาร HTML
นักเรียนจะเห็นจากบางเว็บไซต์มีการการลิงค์เพื่อให้ทำการ Download ข้อมูลต่าง ๆ เช่น ไฟล์รูปภาพ, ไฟล์โปรแกรม , ไฟล์ซิป (.zip) และไฟล์เสียง เป็นต้น การสร้างชุดเชื่อมโยงหรือลิงค์ก็คล้ายกับวิธีที่กล่าวมาเพียงแต่ว่าถ้าหาก ไฟล์จุดหมายปลายทางเป็นไฟล์ประเภทใดเบราว์เซอร์ก็จะทำงาน ให้สอดคล้องกับไฟล์ ประเภทนั้น เช่น หากไฟล์จุดหมายปลายทางที่สร้างลิงค์ไว้เป็นรูปภาพ เบราว์เซอร์ก็จะเปิดรูป ภาพนั้นให้ดู แต่ถ้าเป็นไฟล์ ประเภทอื่น นัักเรียนก็จะพบหน้าจอ ของการดาวน์โหลด (Download) รูปแบบคำสั่งหรือแท็กที่ใช้เป็นดังนี้้
<a href="ชื่อไฟล์.นามสกุล">ข้อความที่ปรากฎบนหน้าเว็บเพจ</a>
|
ตัวอย่างการสร้างการเชื่อมโยงไปยังไฟล์อื่น ๆ ที่ไม่ใช่ ไฟล์ HTML
<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg และเว็บไซต์อื่นๆ <br>
<hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เป็นการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg <br>
<a href="mydoc1.doc">ไฟล์เอกสาร</a>เป็นการเชื่อมโยงไปยังไฟล์เอกสาร mydoc1.doc<br>
<a href="http://www.ku.ac.th">มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">มหาวิทยาลัยราชภัฏเพชรบุรี</a><br>
<hr>
</body>
</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:webmaster@thaimail.com">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>
|
---------------------------------------------------------------
การกำหนดสีของจุดเชื่อมโยงหรือลิงค์
การสร้างการเชื่อมโยง โดยปกติเมื่อนำเมาส์ไปชี้ที่จุดเชื่อมโยง นอกจากสัญลักษณ์ของเมาส์จะเปลี่ยนเป็นรูปมือแล้วข้อความที่เป็นจุดเชื่อมโยง หรือลิงค์ ยังมีขีดเส้นใต้หรือบางครั้งก็มีสีที่แตกต่างออกไปจากข้อความปกติและเมื่อ คลิกเมาส์เข้าไปแล้วข้อความที่เป็นลิงค์ที่เราเคยคลิกไปแล้วก็อาจเปลี่ยน เป็นอีกสีหนึ่งได้เพื่อให้เกิดความแตกต่างจากข้อความปกติและเป็นการบอก ให้ทราบว่าได้เคยคลิกไปที่จุดเชื่อมโยงใดแล้วบ้าง ซึ่งผู้สร้างเว็บเพจสามารถ กำหนดสีของจุดเชื่อมโยงได้เองดังนี้
1.สีของชุดเชื่อมโยงหรือลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink) ใช้แอททริบิวต์ link
2.สีของชุดเชื่อมโยงหรือลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink) ใช้แอททริบิวต์ vlink
3.สีของชุดเชื่อมโยงหรือลิงค์ตอนที่ถูกคลิก (Active Link) ใช้แอททริบิวต์ alink
<body link="ค่าสี" vlink="ค่าสี" alink="ค่าสี">
|
ตัวอย่างการกำหนดสีชุดเชื่อมโยงหรือลิงค์
<html>
<head>
<title>การกำหนดสีชุดเชื่อมโยง (Link)</title>
</head>
<body link="green" vlink="blue" alink="red">
การกำหนดสีชุดเชื่อมโยง โดยที่ <br>
1.ลิงค์ที่ยังไม่เคยถูกคลิกจะเป็นสีเขียว (link) <br>
2.ลิงค์ที่เคยถูกคลิกไปแล้วจะเป็นสีน้ำเงิน (vlink) <br>
3.ลิงค์ที่กำลังถูกคลิกจะเป็นสีแดง (alink) <br>
<hr>
<a href="sea.jpg">ภาพสวย ๆ</a> เป็นการเชื่อมโยงไปยังไฟล์รูปภาพชื่อ sea.jpg <br>
<a href="mydoc1.doc">ไฟล์เอกสาร</a>เป็นการเชื่อมโยงไปยังไฟล์เอกสาร mydoc1.doc<br>
<a href="http://www.ku.ac.th">มหาวิทยาลัยเกษตรศาสตร์ </a><br>
<a href="http://www.mcru.ac.th">มหาวิทยาลัยราชภัฎหมู่บ้านจอมบึง</a><br>
<a href="http://www.pbru.ac.th">มหาวิทยาลัยราชภัฏเพชรบุรี</a><br>
<hr>
<a href="mailto:webmaster@thaimail.com">ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>
|
