ดาวโหลดเอกสาร [DOC] [PDF]
การเชื่อมโยง (link)
เป็นที่ทราบกันดีอยู่แล้ว ในเว็บไซต์หนึ่ง ๆ จะมีหน้าเพจมากกว่าหนึ่งหน้า อย่างเช่นจากหน้าโฮมเพจก็สามารถเลือกเพื่อเข้าไปดูข้อมูลในหน้าอื่น ๆ ได้ ซึงเรียกว่าการเชื่อมโยงเว็บเพจ หรือ การลิงค์ ซึ่งก่อนทำการลิงค์หน้าเว็บเพจ ต้องมีเว็บเพจอย่างน้อย 2 หน้าขึ้นไปและ ยังมีการเชื่อมโยงอีกหลายรูปแบบ ซึ่งการเชื่อมโยงกันนี้เอง ทำให้เกิดเป็นเครือข่ายอินเตอร์เน็ต สามารถเข้าไปหาข้อมูล ต่าง ๆ ได้ ไม่ว่าข้อมูลนั้นจะอยู่อีกฝั่งของซีกโลกก็ตาม
การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ
1. การเชื่อมโยงระหว่างเว็บเพจ
<a href="ไฟล์เว็บเพจ">
...สิ่งที่จะลิงค์...
</a>
2. การเชื่อมโยงนอกเว็บไซต์
<a href="URL">
...สิ่งที่จะลิงค์...
</a>
3. การเชื่อมโยงภายในหน้าเว็บเพจ
<a name="กำหนดชื่อปลายทาง">
</a> และ
<a href="#ชื่อปลายทาง">
..สิ่งที่จะลิงค์...
</a>
4. การเชื่อมโยงแบบอีเมล์
<a href="mailto: E-mail address ที่ต้องการส่งถึง">
..สิ่งที่จะลิงค์...
</a>
ในการเชื่อมโยง (link) สามารถที่จะลิงค์โดยใช้รูปภาพ หรือข้อความก็ได้ โดยเมื่อรูปภาพหรือข้อความถูกลิงค์ เมื่อทดสอบ ผ่านเว็บบราวเซอร์ สัญลักษณ์เมาส์จะเปลี่ยนจากภาพลูกศร เป็นภาพมือแทน เมื่อเมาส์ถูกเลื่อนไปอยู่บริเวณที่ได้ลิงค์ไว้
การเชื่อมโยงระหว่างเว็บเพจ
ตัวอย่างที่ 1 รูปแบบการเชื่อมโยงระหว่างเว็บเพจ
<html>
<head><title>
....การเชื่อมโยงระหว่างเว็บเพจ....
</title></head>
<body>
<a href="index.html">
เลือกที่นี้เพื่อกลับไปหน้าแรก
</a><p>
<a href="index.html">
<img src="pic\home.jpg">
</a>
</body>
</html>
แสดงผลตัวอย่างที่ 1
การเชื่อมโยงนอกเว็บไซต์
ตัวอย่างที่ 2 รูปแบบการเชื่อมโยงนอกเว็บไซต์
<html>
<head><title>
....การเชื่อมโยงนอกเว็บไซต์....
</title></head>
<body>
<a href="http://www.chauatwit.ac.th">
โรงเรียนชะอวดวิทยาคาร
</a><p>
<a href="http://www.chauatwit.ac.th">
<img src="pic\logo.jpg">
</a>
</body>
</html>
แสดงผลตัวอย่างที่ 2
v
การเชื่อมโยงภายในหน้าเว็บเพจ
;
สำหรับเว็บบางเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยสามารถแบ่งตามหัวข้อย่อย ๆ ก็ได้ ซึ่งสามารถจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ สามารถทำลิงค์ ให้เลือกเพื่อ go to top ได้อย่างรวดเร็ว คงเคยจะเห็นกันมาบ้างแล้ว
ตัวอย่างที่ 3 การเชื่อมโยงภายในหน้าเว็บเพจ
<html>
<head>
<title>
....การเชื่อมโยงภายในหน้าเว็บเพจ
</title>
</head>
<body>
<a name="top"></a>
<img src="pic/02.jpg" width="400" height="267" border="0" alt=""><br>
<img src="pic/03.jpg" width="400" height="267" border="0" alt=""><br>
<a href="#top">
Go to Top
</a><p>
<a href="#top">
<img src="pic/top.jpg"width="50" height="50">
</a>
</body>
</html>
แสดงผลตัวอย่างที่ 3
การเชื่อมโยงแบบอีเมล์
สำหรับการเชื่อมโยงแบบนี้ จะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมลไปผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในคำสั่งสำหรับลิงค์ การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานเลือกที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมลตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่คำสั่งลิงค์ปรากฏอยู่
ตัวอย่างที่ 4 การเชื่อมโยงแบบอีเมล์
<html>
<head><title>
....การเชื่อมโยงแบบอีเมล์....
</title></head>
<body>
<a href="mailto:kruaew101@gmail.com">
ลิงค์เมล์ส่งเมล์ไปที่ kruaew101@gmail.com
</a><p>
<a href="mailto:kruaew101@gmail.com ">
<img src=" pic\mail.jpg">
</a>
</body>
</html>
แสดงผลตัวอย่างที่ 4
การใช้คำสั่งกำหนดตัวเชื่อมโยงไฟล์เสียง
การเชื่อมโยงโดยเป็นการใส่เพลงโดยการกำหนดตัวเชื่อม ในช่องว่าง ๆให้ใส่ตำแหน่งไฟล์เสียง ลงไป ส่วนตรง "คำอธิบาย" ให้ใส่ข้อความที่สื่อความหมายให้รู้ว่า ตัวเชื่อมนี้ เป็นไฟล์เพลง เช่น "เพลงแสนสนุก"
<A HREF="ชื่อไฟล์.นามสกุล">
คำอธิบาย
</A>
ตัวอย่างที่ 5 การใช้คำสั่งกำหนดตัวเชื่อมไฟล์เสียง
<html>
<head> <title>
การใช้คำสั่งกำหนดตัวเชื่อมไฟล์เสียง
</title><head>
<body>
<A HREF="song.mp3">
เลือกเพื่อเชื่อมไปยังเพลงนี้
</a>
</body>
</html>
การเชื่อมโยงเพื่อเปิดเอกสารอื่น ๆ
การลิงค์เอกสารอื่น ๆ เช่นการลิงค์ไฟล์ .pdf หรือ filename.doc และสำหรับเอกสารที่ต้องการให้ดาวน์โหลด สามารถเตรียมไฟล์เป็นไฟล์สกุล .zip เวลาดาวน์โหลด บราวเซอร์จะได้เรียกให้มีการบันทึกไฟล์อัตโนมัติ
ตัวอย่างที่ 6 การเชื่อมโยงเอกสารอื่น ๆ
<html>
<head><title>
....การเชื่อมโยงเอกสารอื่น ๆ....
</title></head>
<body>
<a href="work.pdf">
เอกสารอ่านเพิ่มเติม
</a><p>
</body>
</html>
แสดงผลตัวอย่างที่ 6