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

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

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

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

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

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

l1

  • หน้าแรกของเว็บเพจ หรือ โฮมเพจ จะมีเนื้อหา 2 เรื่อง คือ งานสวนทิวลิปนนท์ จะลิงค์ไปยังหน้า tulip.htmlและ งานธันวาพฤกษชาติ ครั้งที่ 11จะลิงค์ไปยังหน้า tanwa.html
  • หน้าเว็บเพจงานสวนทิวลิปนนท์ จะลิงค์กลับมาที่แรกของเว็บ คือ index.htmlและ งานธันวาพฤกษชาติ จะลิงค์กลับมาที่แรกของเว็บ คือ index.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

เราสามารถเปิด URL ในเว็บบราวเซอร์ใหม่ โดยใช้คำสั่งว่า target=“_blank” ลงไปหลัง URL

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

 

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

 

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

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

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

l2

 

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

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

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

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

<html>
<head>
<title>การเชื่อมโยงเว็บไซต์ด้วยรูปภาพ</title>
<body>
<a href=”mailto:piyadanai_w@hotmail.com”>ติดต่อผู้จัดทำ</a>
</body>
</html>

10

 

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

<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>

11

Advertisements

ใส่ความเห็น

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 /  เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ 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 /  เปลี่ยนแปลง )

w

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: