หน่วยการเรียนรู้ที่ 5 การเชื่อมโยงข้อมูล

- เข้าถึงข้อมูลได้สะดวกขึ้นและรวดเร็ว

สมรรถนะประจำหน่วย

แสดงความรู้เกี่ยวกับการเชื่อมโยงข้อมูล

จุดประสงค์การเรียนรู้

๑. อธิบายการเชื่อมโยงข้อมูลบนหน้าเว็บเพจในรูปแบบต่างๆ ได้

๒. สร้างการเชื่อมโยงข้อมูลในหน้าเว็บเพจเดียวกันได้

๓. สร้างการเชื่อมโยงข้อมูลภายในเว็บไซต์เดียวกันได้

๔. สร้างการเชื่อมโยงข้อมูลไปยังเว็บไซต์อื่นได้

๕. สร้างการเชื่อมโยงข้อมูลในการดาวน์โหลดไฟล์ต่างๆ ได้

๖. สร้างการเชื่อมโยงข้อมูลในการติดต่อผ่านทางอีเมลได้

๗. สร้างการเชื่อมโยงข้อมูลด้วยเทคนิค Map Link ได้

เนื้อหาสาระการเรียนรู้

1. การสร้างตารางในเว็บเพจ

2. การเลือกตาราง

3. การปรับขนาดของตาราง

4. การจัดการกับตำแหน่งของตาราง

5. การจัดการกับเส้นขอบของตาราง

6. การจัดการเกี่ยวกับสีของตาราง

๗. การกำหนดรูปภาพเป็นพื้นหลังของตาราง

๘. การจัดการเซลล์ในตาราง


การเชื่อมโยงเว็บเพจ

การสร้างลิงค์จะทำให้เอกสารเว็บเพจธรรมดากลายเป็นเว็บเพจที่ประกอบด้วยเนื้อหาที่น่าสนใจโดยผ่านการคลิกเลือกดูเนื้อหาในแต่ละหน้าที่น่าสนใจ

การสร้างลิงค์

ลิงค์สามารถเชื่อมโยงข้อมูลได้ วิธี คือ

  • การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน

  • การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น

  • การเชื่อมโยงข้อมูลไปเว็บไซต์อื่น

1. การเชื่อมโยงข้อมูลภายในเว็บเพจเดียวกัน

คือ การเชื่อมโยงข้อมูลในหน้าเว็บเพจเดียวกัน โดยการคลิกลิงค์เพื่อเลื่อนขึ้นหรือลง หรือไปตำแหน่งที่ต้องการภายในหน้าเดียวกัน

รูปแบบของแท็ก HTML

<a href=“jump”>…</a> (สร้างจุดปลายทางชื่อ jump)

<a href=“#jump”>…</a> (เชื่อมโยงไปจุดปลายทางชื่อ jump)

ค่าที่กำหนดให้ใช้ ชื่อจุดหมายปลายทาง ที่ไม่ซ้ำชื่ออื่นที่อยู่ในหน้าเว็บเดียวกัน

ตัวอย่างการใช้งาน

<html>

<head>

<title>การเชื่อมโยงเว็บเพจหน้าเดียวกัน</title>

</head>

<body>

<b>รายชื่อเว็บไซต์ที่น่าสนใจ</b>

<!—กำหนด Link กระโดดไปยังจุดเชื่อมต่อต่าง ๆ ในเว็บเพจ—><br />

<a href=”#computer”>เว็บไซต์เกี่ยวกับคอมพิวเตอร์</a><br />

<a href=”#graphic”>เว็บไซต์เกี่ยวกับงานกราฟิก</a><br />

<a href=”#travel”>เว็บไซต์เกี่ยวกับท่องเที่ยว</a><br />

<hr>

<!—กำหนดจุดเชื่อม—>

<a name=”computer”>เว็บไซต์เกี่ยวกับคอมพิวเตอร์</a><br />

<a name=”graphic”>เว็บไซต์เกี่ยวกับงานกราฟิก</a><br />

<a name=”travel”>เว็บไซต์เกี่ยวกับท่องเที่ยว</a><br />

</body>

</html>

2. การเชื่อมโยงข้อมูลไปยังเว็บเพจอื่นภายในเว็บไซต์เดียวกัน

คือ การเชื่อมโยงข้อมูลไปยังหน้าเว็บเพจอื่นที่อยู่เว็บไซต์เดียวกัน เพื่อให้สามารถเลือกดูเนื้อหาตามลิงค์ของเรื่องที่ต้องการเยี่ยมชม

รูปแบบของแท็ก HTML

<a href=“ชื่อเว็บเพจที่ต้องการเชื่อมโยง”>เรื่องที่จะเป็นจุดเชื่อมโยง</a>

ค่าที่กำหนดให้ใช้ ชื่อเว็บเพจที่เชื่อมโยงจะเป็นชื่อภาษาอังกฤษ.html

ตัวอย่างการเชื่อมโยงเว็บเพจกับหน้าอื่น


ตัวอย่างการเขียนคำสั่งเชื่อมโยงเว็บเพจไปยังเว็บเพจอื่น

<html>

<head>

<title>ตัวอย่างการเชื่อมโยงเว็บเพจไปยังเว็บเพจหน้าอื่น</title>

</head>

<body>

…

<a href=“tulip.html”>งานสวนทิวลิปนนท์</a>

…

<a href=“tanwa.html”>งานธันวาพฤกษชาติ</a>

…

</body>

</html>

ทำความเข้าใจ

  • การเชื่อมโยงเว็บเพจแบบ Relative Path Names ซึ่งเป็นวิธีที่ใช้ในการอ้างอิงไฟล์เว็บเพจ ไฟล์เอกสาร ไฟล์ให้ดาวน์โหลดที่เก็บในเว็บไซต์เดียวกัน

  • การเชื่อมโยงเว็บเพจไปยังเว็บเพจอื่นในไดเรกทอรีเดียวกันจะสามารถเชื่อมโยงโดยใช้แท็ก <a href…> โดยพิมพ์ชื่อเว็บเพจที่ต้องการลงไป

เช่น<a href=“history.html”>ประวัติของโรงเรียน</a>

  • หากต้องการเชื่อมโยงเว็บเพจไปยังไดเรกทอรีที่ต่ำกว่า เราสามารถใช้ <a href…> แล้วอ้างอิงตำแหน่งของเว็บปลายทางตั้งแต่เริ่มต้นจนถึงปลายทาง

<a href=“person/thai.html”>กลุ่มสาระการเรียนรู้ภาษาไทย</a>

โดยเราจะใส่ชื่อไดเรกทอรีและคั่นด้วยเครื่องหมาย “/” ตามด้วยไฟล์ที่เราต้องการเชื่อมโยง หากมีหลายชั้นเราก็ต้องกำหนดไดเรกทอรีให้ครบ หากอ้างอิงไม่ครบหรือระบุผิดจะทำให้ทำงานผิดพลาด

  • หากต้องการเชื่อมโยงเว็บเพจไปยังปลายทางที่อยู่ในไดเรกทอรีที่อยู่เหนือกว่า 1 ระดับจะมีวิธีการกำหนดคือ <a href=“../person.html”>บุคลากรของโรงเรียน</a>

  • หากต้องการเชื่อมโยงเว็บเพจไปยังปลายทางที่อยู่ในไดเรกทอรีที่อยู่เหนือกว่า 2 ระดับจะมีวิธีการกำหนดคือ <a href=“../../person.html”>บุคลากรของโรงเรียน</a>

3. การเชื่อมโยงข้อมูลไปยังเว็บไซต์ที่อื่น

คือ การเชื่อมโยงข้อมูลไปยังหน้าเว็บไซต์ที่เกี่ยวข้องหรือน่าสนใจ โดยวิธีการระบุ URL ของเว็บไซต์นั้นในแท็ก <a href…>

รูปแบบการใช้งาน

รูปแบบ <a href= “URL ของเว็บไซต์ที่ต้องการเชื่อมโยง”>ข้อความที่จะเชื่อมโยง</a>

เช่น <a href=http://www.swt.ac.th>โรงเรียนเสริมงามวิทยาคม</a>

ตัวอย่างการใช้งาน

<html>

<head>

<title>การเชื่อมโยงข้อมูลไปยังเว็บไซต์</title>

<body>

<b>เว็บไซต์ที่น่าสนใจ</b><br />

<a href=”http://www.google.com”>google</a><br />

<a href=”http://www.sanook.com”>sanook</a><br />

<a href=”http://www.pantip.com”>pantip</a><br />

</body>

</html>

ผลลัพธ์ที่ได้



4. การเชื่อมโยงด้วยรูปภาพ

การใช้รูปภาพเป็นจุดเชื่อมโยง เป็นการทำให้เว็บเพจน่าสนใจและสามารถใช้แทนข้อความธรรมดาได้

รูปแบบของแท็ก <img src= “ตำแหน่งของรูปภาพ/รูปภาพที่ใช้”>

ค่าที่กำหนดให้ใช้ ชื่อรูปภาพที่ใช้เป็นสัญลักษณ์ในการเชื่อมโยง

ตัวอย่างการเชื่อมโยงเว็บไซต์ด้วยรูปภาพ

<html>

<head>

<title>การเชื่อมโยงเว็บไซต์ด้วยรูปภาพ</title>

<body>

<b>เว็บไซต์ที่น่าสนใจ</b><br />

<a href=”http://www.google.com”><img src=”pic/google.jpg” /></a><br />

<a href=”http://www.sanook.com”><img src=”pic/sanook.jpg” /></a><br />

<a href=”http://www.pantip.com”><img src=”pic/pantip.jpg” /></a><br />

</body>

</html>


5. การเชื่อมโยงไปยังไฟล์ต่าง ๆ

เป็นการเชื่อมโยงไปยังไฟล์ต่าง ๆ เช่น ไฟล์รูปภาพ, ไฟล์วีดีโอ, ไฟล์โปรแกรม, ไฟล์เสียง, ไฟล์ .zip, และไฟล์มัลติมีเดีย ซึ่งการเชื่อมโยงจะเหมือนการลิงค์แบบธรรมดา เพียงแต่ระบุปลายทางไปยังไฟล์นั้น ๆ โดยและระบุนามสกุล หากเป็นไฟล์รูปภาพจะแสดงอัตโนมัติ แต่ถ้าเป็นไฟล์อื่น ๆ จะขึ้นหน้าจอให้เราบันทึกและดาวน์โหลดเอกสาร

รูปแบบ <a href=“ชื่อโฟลเดอร์ หรือไดเรกทอรี/ชื่อไฟล์ที่ต้องการลิงค์”>ข้อความที่จะเชื่อมโยง</a>


6. การเชื่อมโยงไปอีเมล์ (E-mail)

ใช้ในกรณีที่ต้องการให้คนอื่นติดต่อเรา โดยให้สร้างลิงค์ชี้ไปยังอีเมล์แอดเดรสของเรา เมื่อผู้ใช้คลิกที่ลิงค์จะส่งไปยังอีเมล์ของเราโดยอัตโนมัติ

รูปแบบ <a href=“mailto: ชื่อ E-mail Adree”>ข้อความที่เป็นลิงค์</a>

ตัวอย่างการลิงค์ไปยังไฟล์ต่าง ๆ

<html>

<head>

<title>การเชื่อมโยงเว็บไซต์ด้วยรูปภาพ</title>

<body>

<a href=”mailto:piyadanai_w@hotmail.com”>ติดต่อผู้จัดทำ</a>

</body>

</html>


นอกจากนี้เรายังสามารถลิงค์ไปยังบริการต่าง ๆ ได้ เช่น การโอนย้ายไฟล์ โดยใช้คำสั่ง

<a href=ftp://ที่อยู่ของ Address ที่ต้องการลิงค์>


7. การกำหนดสีของลิงค์

ปกติหากเราไม่กำหนดค่าสีของลิงค์ ค่าปกติคือสีน้ำเงินและมีเส้นใต้ การเปลี่ยนสีลิงค์เป็นการเปลี่ยนสีสันของลิงค์ให้มีสีต่าง ๆ เพื่อให้สังเกตง่าย ๆ ซึ่งสีของลิงค์จะมีสถานะต่าง ๆ แตกต่างกัน ดังนี้

  • สีของลิงค์ที่ยังไม่เคยถูกคลิก (Hyperlink)

  • สีของลิงค์ที่เคยถูกคลิกไปแล้ว (Visited Hyperlink)

  • สีของลิงค์ตอนที่ถูกคลิก (Active Link)

เพื่อป้องกันไม่ให้สีของลิงค์กลืนสีฉากหลัง เราสามารถกำหนดสีของลิงค์ในสถานะต่าง ๆ ได้ ดังนี้

รูปแบบแท็ก HTML และ XHTML

<body link=“สี/รหัสสี” vlink=“สี/รหัสสี” alink=“สี/รหัสสี”>

ตัวอย่างการกำหนดสีของลิงค์

<html>

<head>

<title>ตัวอย่างการเชื่อมโยงเว็บเพจไปยังเว็บเพจหน้าอื่น</title>

</head>

<body link=”green” vlink=”blue” alink=”red”>

<a href=“tulip.html”>งานสวนทิวลิปนนท์</a><br />

<a href=“tanwa.html”>งานธันวาพฤกษชาติ</a>

</body>

</html>


อ้างอิง

  • รูปภาพจากอิดิเตอร์ Notepad

  • รูปภาพประกอบสืบค้นจากอินเทอร์เน็ต

  • การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา พฤกษ์ประเสริฐ สำนักพิมพ์ซิมพลิฟาย