การ เชื่อม โยง ข้อมูล ภายใน เอกสาร เดียวกัน ใช้ สัญลักษณ์ ใน ข้อ ใด

การเชื่อมโยงหน้าเว็บเพจ คือการกำหนดส่วนของข้อความที่ต้องการ หรือรูปภาพที่ได้เลือกไว้เพื่อเป็นจุดเชื่อมโยงไปยังเนื้อหาจุดอื่น ๆ ซึ่งเนื้อหาที่เชื่อมโยงไปนั้นอาจจะอยู่ภายในหน้าเดียวกันหรืออยู่คนละหน้าก็ได้ หรืออาจอยู่คนละเว็บไซต์ก็ได้ การเชื่อมโยงหน้าเว็บเพจจะประกอบด้วยส่วนประกอบ สำคัญ 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>
การสร้างการเชื่อมโยงในหน้าเว็บเพจเดียวกัน 
<hr>
<a href=”#link1″>1.หลักการสร้างเว็บเพจ</a> 
<a href=”#link2″>2.การจัดรูปแบบตัวอักษร</a> 
<a href=”#link3″>3.การใช้งานรูปภาพบนเว็บเพจ</a> 
<hr>
<a name=”link1″>หลักการสร้างเว็บเพจ</a>
 
………………………
………………………
<a name=”link2″>การจัดรูปแบบตัวอักษร</a>
 
………………………
………………………
<a name=”link3″>การใช้งานรูปภาพบนเว็บเพจ</a>
 
………………………
………………………
</body>
</html>

—————————————————————

2. การเชื่อมโยงไปยังหน้าเว็บเพจอื่น ๆ คือ การเชื่อมโยงไปยังจุดเชื่อมโยงที่อยู่คนละหน้าเว็บเพจกัน มีรูปแบบการใช้งานดังนี้

<a href=”ชื่อไฟล์เว็บเพจ.นามสกุล”>…ข้อความที่ปรากฎบนหน้าเว็บเพจ…</a>

ตัวอย่างการเขียนโปรแกรมเชื่อมโยงไปหน้าเว็บเพจอื่น (ต้องมีเว็บเพจที่สร้างไว้แล้ว มากกว่า 1 หน้าและถูกจัดเก็บไว้ที่เดี่ยวกัน)

<html>
<head>
<title>การสร้างการเชื่อมโยง (Link) </title>
</head>
<body>
การสร้างการเชื่อมโยงในหน้าเว็บคนละหน้า 
<hr>
<a href=”page1.html”>1.หลักการสร้างเว็บเพจ (page1.html) </a> 
<a href=”page2.html”>2.การจัดรูปแบบตัวอักษร (page2.html) </a> 
<a href=”page3.html”>3.การใช้งานรูปภาพบนเว็บเพจ (page3.html)</a> 
<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>
การสร้างการเชื่อมโยงไปยังเว็บไซต์อื่น ๆ โดยใช้รูปภาพ 
<hr>
<a href=”http://www.su.ac.th”><img src=”comp4.gif”></a>

เป็นการนำรูปภาพมาเป็นชุดเชื่อมโยงไปยังเว็บไซต์ ม.ศิลปากร 
<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 
<hr>
<a href=”mailto:”>ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>

—————————————————————

การกำหนดสีของจุดเชื่อมโยงหรือลิงค์

การ สร้างการเชื่อมโยง โดยปกติเมื่อนำเมาส์ไปชี้ที่จุดเชื่อมโยง นอกจากสัญลักษณ์ของเมาส์จะเปลี่ยนเป็นรูปมือแล้วข้อความที่เป็นจุดเชื่อมโยง หรือลิงค์ ยังมีขีดเส้นใต้หรือบางครั้งก็มีสีที่แตกต่างออกไปจากข้อความปกติและเมื่อ คลิกเมาส์เข้าไปแล้วข้อความที่เป็นลิงค์ที่เราเคยคลิกไปแล้วก็อาจเปลี่ยน เป็นอีกสีหนึ่งได้เพื่อให้เกิดความแตกต่างจากข้อความปกติและเป็นการบอก ให้ทราบว่าได้เคยคลิกไปที่จุดเชื่อมโยงใดแล้วบ้าง ซึ่งผู้สร้างเว็บเพจสามารถ กำหนดสีของจุดเชื่อมโยงได้เองดังนี้
1.สีของชุดเชื่อมโยงหรือลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink) ใช้แอททริบิวต์ link
2.สีของชุดเชื่อมโยงหรือลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink) ใช้แอททริบิวต์ vlink
3.สีของชุดเชื่อมโยงหรือลิงค์ตอนที่ถูกคลิก (Active Link) ใช้แอททริบิวต์ alink

<body link=”ค่าสี” vlink=”ค่าสี” alink=”ค่าสี”>

ตัวอย่างการกำหนดสีชุดเชื่อมโยงหรือลิงค์

—————————————————————