1. จุดที่ใช้สำหรับเชื่อมโยง (Link) เป็นส่วนที่ใช้เป็นจุดเชื่อมโยงไปยังเป้าหมายปลายทางอาจเป็นรูปภาพหรือข้อความก็ได้
2. เป้าหมาย (Target) เป็นส่วนปลายทางหรือจุดที่ต้องการให้เชื่อมโยงมาถึง จะอยู่ส่วนใดของเอกสารก็ได้แล้วแต่ผู้เขียนโปรแกรมกำหนด
---------------------------------------------------------------
การสร้างการเชื่อมโยงสามารถทำได้หลายวิธีดังนี้
1.การเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน
2.การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ
3.การเชื่อมโยงไปยังเว็บไซต์อื่น ๆ
4.การเชื่อมโยงไปยังแฟ้มข้อมูลประเภทต่าง ๆ
5.การเชื่อมโยงเพื่อส่งจดหมายอิเล็กทรอนิกส์
2.การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ
3.การเชื่อมโยงไปยังเว็บไซต์อื่น ๆ
4.การเชื่อมโยงไปยังแฟ้มข้อมูลประเภทต่าง ๆ
5.การเชื่อมโยงเพื่อส่งจดหมายอิเล็กทรอนิกส์
1.การเชื่อมโยงภายในหน้าเว็บเพจเดียวกัน ใช้ในกรณีที่เราต้องการให้มีจุดเชื่อมโยงในหน้าเดียวกัน เมื่อคลิกเมาส์ที่จุดเชื่อมโยงแล้วมีการเลื่อนตำแหน่งขึ้นหรือลงไปจากตำแหน่งเดิม สามารถสร้างการเชื่อมโยงได้ดังนี้
1.1 สร้างการเชื่อมโยงด้วยแอททริบิวต์ href ดังต่อไปนี้
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. การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ คือ การเชื่อมโยงไปยังจุดเชื่อมโยงที่อยู่คนละหน้าเว็บเพจกัน มีรูปแบบการใช้งานดังนี้
ตัวอย่างการเขียนโปรแกรมเชื่อมโยงไปหน้าเว็บเพจอื่น (ต้องมีเว็บเพจที่สร้างไว้แล้ว มากกว่า 1 หน้าและถูกจัดเก็บไว้ที่เดี่ยวกัน)
<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
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
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> |
ไม่มีความคิดเห็น:
แสดงความคิดเห็น