การเชื่อมโยงหน้าเว็บเพจ  คือการกำหนดส่วนของข้อความที่ต้องการ  หรือรูปภาพที่ได้เลือกไว้เพื่อเป็นจุดเชื่อมโยงไปยังเนื้อหาจุดอื่น ๆ   ซึ่งเนื้อหาที่เชื่อมโยงไปนั้นอาจจะอยู่ภายในหน้าเดียวกันหรืออยู่คนละหน้าก็ได้  หรืออาจอยู่คนละเว็บไซต์ก็ได้   การเชื่อมโยงหน้าเว็บเพจจะประกอบด้วยส่วนประกอบ สำคัญ 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&gt;
<a href=”http://www.pbru.ac.th”>4.มหาวิทยาลัยราชภัฏเพชรบุรี</a><br&gt;
<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&gt;
<a href=”http://www.pbru.ac.th”>มหาวิทยาลัยราชภัฏเพชรบุรี</a><br&gt;
<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&gt;
<a href=”http://www.pbru.ac.th”>มหาวิทยาลัยราชภัฏเพชรบุรี</a><br&gt;
<hr>
<a href=”mailto:webmaster@thaimail.com”>ส่งความเห็นไปยังผู้ดูแลระบบ</a>
<hr>
</body>
</html>

 

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

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s