บทที่ 7
การเชื่อมโยงเว็บเพจ
การเชื่อมโยงเว็บเพจ
7.1 การเชื่อมโยงเว็บเพจ
หลังจากที่เราจัดตั้งเว็บไซต์และทําการสร้างเว็บเพจขึ้นหลาย ๆ เว็บเพจแล้ว เราจึง ท่าการเชื่อมโยงเว็บเพจเหล่านั้นเข้าด้วยกัน เพื่อให้ผู้เข้าชมสามารถเข้าถึงหน้าเว็บเพจ ได้อย่างสะดวกและต่อเนื่อง ซึ่งการเชื่อมโยงเว็บเพจหรือที่เรียกสั้น ๆ ว่า การลิงค์ (Link จะเป็นการกําหนดส่วนของข้อความหรือรูปภาพที่เราเลือกเพื่อเชื่อมโยงไปยังเนื้อความอื่น ๆ เนื้อความนั้นอาจจะอยู่ในเว็บเพจเดียวกัน หรือคนละเว็บเพจ หรือคนละเว็บไซต์ก็ได้
7.2 ส่วนประกอบของการเชื่อมโยง
การเชื่อมโยงนั้น จะต้องประกอบด้วยส่วนสําคัญ 2 ส่วน คือ 1. จุดเชื่อมโยง (Link)
1จุดเชื่อมโยง(Link).เป็นส่วนของเอกสารที่จะใช้เป็นจุดเชื่อมโยงไปยังส่วนอื่น ๆ ซึ่งส่วนของเอกสารที่จะใช้เป็น
จุดเชื่อมโยงนี้อาจเป็นข้อความหรือรูปภาพก็ได้
2. เป้าหมาย (Target) เป็นส่วนที่เรากําหนดให้มีการเชื่อมโยงไปถึงเมื่อมีการคลิกที่จุดเชื่อมโยงนั้น ซึ่งเป้าหมายนี้ อาจอยู่ในเว็บเพจเดียวกัน คนละเว็บเพจ หรือเป็นเครื่องให้บริการต่าง ๆ ในอินเทอร์เน็ตก็ได้
Link
Target
จุดเชื่อมโยง(Link) คือ จุดเชื่อมโยงไปยังเนื้อความอื่น ๆ
เป้าหมาย Taget) คือ จุดหมายที่ต้องการเชื่อมโยงไปถึง
7.3 การสร้างจุดเชื่อมโยง
เราสามารถสร้างจุดเชื่อมโยงได้ 2 แบบด้วยกัน คือ
1. จุดเชื่อมโยงที่เป็นข้อความ (Text Link)
2. จุดเชื่อมโยงที่เป็นรูปภาพ (Graphic Link)
ซึ่งการสร้างจุดเชื่อมโยงนี้จะกระทําได้โดยการใส่จุดเชื่อมโยงนั้นซึ่งอาจเป็นข้อความหรือ รูปภาพไว้ระหว่างแท็ก
<a>...</a> (เรียกว่า Anchor Tag อ่านว่า แองเคอร์)
7.3.1 การสร้างจุดเชื่อมโยงให้กับข้อความ (Text Link)
เป็นการกําหนดให้ข้อความใด ๆ ในเอกสารเป็นจุดเชื่อมโยง ซึ่งจุดเชื่อมโยงที่ได้นี้จะเรียกว่า Hypertext link
รูปแบบ
<a href = URL> ข้อความจุดเชื่อมโยง </a>
href หมายถึง Hypertext Reference เป็นการบอกให้รู้ว่าข้อความนี้มีการเชื่อมโยง ไปยังตําแหน่ง URL ที่กําหนด
URL หมายถึง Uniform Resource Location เป็นการระบุตําแหน่งของเป้าหมาย ที่จะเชื่อมไปถึง ซึ่งการระบุ URL นี้จะกระทําได้ 2 แบบตัวยกันคือ
- Absolute URL เป็นการระบุตําแหน่ง URL แบบสมบูรณ์ ในรูปแบบ โพรโทคอละเชื่อโฮส.โดเมน/ชื่อไฟล์ : มักใช้เมื่อเป้าหมายอยู่ในเว็บไซต์อื่น เช่น href="http://www.softpressbook.com"
- Relative URL เป็นการระบตําแหน่งของไฟล์เอกสารโดยอ้างอิงจากเอกสารที่กําลัง ใช้งานอยู่ จะใช้ในกรณีที่เชื่อมโยงไปยังเอกสารที่อยู่ในเว็บไซต์เดียวกัน เช่น href="recipes/index.html"
7.3.2 การสร้างจุดเชื่อมโยงให้กับรูปภาw (Graphic Link)
เป็นการกําหนดให้รูปภาพใด ๆ ที่ต้องการใช้เป็นจุดเชื่อมโยง
รูปแบบ
<a href = URL> <img src = "ชื่อไฟล์รูปภาพ"> </a>
<!DOCTYPE html>
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
<a href="http://www.softpressbook.com"> <img src="logosoft.gif'sch <br>
<a href="http://www.softpressbook.com > สํานักพิมพ์ซอฟท์เพรส/a>
</body>
</html>
7.4 ลักษณะการเชื่อมโยงไปยังตําแหน่งต่าง ๆ
เราสามารถกําหนดการเชื่อมการกําหนดการเชื่อมโยงไปยังตําแหน่งต่าง ๆ ได้หลายแบบด้วยกัน คือ
1.การเชื่อมโยงภายในเว็บเพจเดียวกัน
2.การเชื่อมโยงไปยังเว็บเพจอื่นในเว็บไซต์เดียวกัน
3.การเชื่อมโยงไปยังเว็บไซต์อื่น
4.การเชื่อมโยงไปยังอีเมล (Email link)
5.การเชื่อมโยงไปยังไฟล์ดาวน์โหลด
7.4.1 การเชื่อมโยงภายในเว็บเพจเดียวกัน
การเชื่อมโยงลักษณะนี้ จะมีการจัดวาง จุดเชื่อมโยงและเป้าหมายอยู่ภายในเว็บเพจเดียวกัน
Link
Target
กําหนดเป้าหมาย
<a name = "ชื่อเป้าหมาย"> ข้อความที่ต้องการแสดง <a >
ชื่อเป้าหมาย (Target) เป็นชื่อของตําแหน่งจุดเชื่อมโยงที่ตั้งไว้ข้างต้น เป็นจุดหมายที่
ต้องการเชื่อมโยงไปถึง
กําหนดจุดเชื่อมโยง
<a href = “ยชื่อจุดเชื่อมโยง”> ข้อความที่เป็นจุดเชื่อมโยง <a>
ชื่อจุดเชื่อมโยง (Link) เป็นชื่อของตําแหน่งในเอกสาร ที่ใช้เป็นจุดเช ื่อมโยงไปยัง
เนื้อความอื่นๆ ต้องนําหน้าด้วยเครื่องหมาย #
7.4.2 การเชื่อมโยงไปยังเว็บเพจอื่น
เป็นการเชื่อมโยงไปยังไฟล์เว็บเพจอื่นที่อยู่ใน
เว็บไซต์เดียวก ัน
Link
รูปแบบ
<a href = ชื่อไฟล์ .html> ข้อความจุดเชื่อมโยง </a>
Target
7.4.3 การเชื่อมโยง
การเชื่อมโยงไปยังเว็บไซต์ที่ทําหนด เป็นการเชื่อมโยงไปยังเว็บไซต์ต่าง ๆ ในอินเทอร์เน็ต
Link
URL ในอินเทอร์เน็ต
รูปแบบ
<a href = URL> ข้อความจุตเชื่อมโยง </a>
URL หมายถึง Uniform Resource Location ซึ่งเป็นรูปแบบมาตรฐานที่เป็นแหล่ง บริการหรือแหล่งที่จะขอใช้บริการอินเทอร์เน็ต โดยเขียนในรูปแบบ
โพรโทคอละปเชื่อโฮส.โดเมน/ชื่อไฟล์
ตัวอย่างเช่น
http://www.softpressbook.com http://www.thairath.co.th/newspaper http://facebook.com/sittichai,prasanwong
เป็นต้น
7.4.4 การเชื่อมโยงไปยังอีเมล
การเชื่อมโยงลักษณะนี้จะเป็นการเปิดโปรแกรมเขียนอีเมลเพื่อให้ผู้ชมส่งข่าวสารมาหาเรา
ได้โดยสะดวก
รูปแบบ
<a href = "mailto:ที่อยู่อีเมล”> ข้อความจุดเชื่อมโยง </a>
ที่อยู่อีเมล หรือ Email address เป็นตําแหน่งที่อยู่อีเมลที่ต้องการส่งอีเมลไปถึง
โดยเขียนอยู่ในรูปแบบ
ชื่อ@ที่อยู่
เมื่อ ชื่อ เป็นชื่อผู้ใช้บริการอีเมล
@ อ่านว่า แอท แปลว่า อยู่ที่
ที่อยู่ เป็นชื่อเครื่องให้บริการอีเมลที่ผู้ใช้นั้นเป็นสมาชิกอยู่
ตัวอย่างเช่น
หมายถึง ผู้ใช้บริการอีเมลชื่อ sit99 อยู่ที่ hotmail.com
ตัวอย่างการเชื่อมโยงไปยังอีเมล
ในที่นี้ให้เปิดไฟล์ HW5-1.htmlขึ้นมา แล้วจะทําการเพิ่มหัวข้อ “ติดต่อเราเพื่อสร้างการ เชื่อมโยงไปยังอีเมลของเรา ซึ่งเมื่อคลิกเมาส์ที่ข้อความนี้จะเปิดโปรแกรมเขียนอีเมล โดยผู้รับคือที่อยู่อีเมลที่เรากําหนด
<ul>
<li> ข่าวเด็ดๆ </li><br>
</li> บันเทิงเริงรมย์ </li> <br>
<li> รักการอ่าน </li> <br>
| <li><a href="mailto:sitt99@hotmail.com > ติดต่อเรา</a> </li>
</ul>
7.4.5 การเชื่อมโยงไปยังไฟล์ดาวโหลด
นอกจากการเชื่อมโยงไป.. เชื่อมโยงไปยังไฟลชน
ขายเร็วมโยงไปยังโฟล์ดาวน์โหล เวลาการเชื่อมโยงไปยังหน้าเว็บเพจอื่นที่เป็นไฟล์ htrol แล้ว เรายังสามารถกําหนดการ
เปยังไฟล์ชนิดอื่น เช่น ไฟล์รูปภาพ, ไฟล์เอกสารของโปรแกรม Ofice, ไฟล์บีบอัด, หนังสือแบบ pdf, พผมลองเตย เป็นต้น เพื่อเปิดดูข้อมูลหรือดาวน์โหลดมาเก็บไว้ในเครื่อง โปรแกรมเว็บเบราว์เซอร์จะทํางานตามชนิดของไฟล์นั้น ๆ ดังนี้
1.ถ้าเป็นไฟล์รูปภาพ เว็บเบราว์เซอร์จะเปิดได้เองทันทีโดยอัตโนมัติ
2.ถ้าเป็นไฟล์ชนิดอื่น ๆ จะปรากฎหน้าต่างให้ดาวน์โหลดไฟล์
ซึ่งเราอาจเลือก Openเพื่อเปิดดู หรือเลือก Save เพื่อบันทึกไฟล์นั้นเก็บลงในเครื่องของเรา เพื่อเปิดดูในภายหลังก็ได้ ซึ่งการเปิดไฟล์เหล่านี้ในเครื่องเราจะต้องมีโปรแกรมที่ใช้เปิดไฟล์ ชนิดนั้นอยู่ด้วย
การสร้างการเชื่อมโยงไปยังไฟล์ดาวน์โหลดนี้ จะมีรูปแบบดังนี้
รูปแบบ
<a href = “ชื่อไฟล์ดาวน์โหลด> ข้อความจุดเชื่อมโยง </a>
โดยที่
ชื่อไฟล์ดาวน์โหลด
จะเป็นไฟล์ที่ต้องการให้ไปดาวน์โหติด ซึ่งต้องระมแหล่งที่เก็บ และชนิดของไฟด้วย ตัวอยางเช่น 1
http://www.softnessbook.ccontot t pof http://www.padกรรsgoo.ccorn00848943 ng
7.5 การทําหนดส์ให้กับจุดเชื่อมโยง
โดยทั่วไปเว็บเบราว์เซอร์จะแสดงจุดเชื่อมโยงด้วยสีฟ้า และเมื่อมีการคลิกที่จุดเชื่อมโยง แล้วจะถูกแสดงด้วยสีม่วงแทน แต่เราสามารถกําหนดสีให้กับจุดเชื่อมโยงที่เราสร้างขึ้นได้ใน
รูปแบบ
<body แท็กการกําหนดสี = ชื่อสีมาตรฐาน
หรือ
<body แท็กการกําหนดสี = #RRGGBB>
โดยที่
แท็กการกําหนดสี เป็นการกําหนดส่วนที่ต้องการจะกําหนดสี ซึ่งอาจเป็น
link เป็นการกําหนดสีข้อความที่เป็นจุดเชื่อมโยง แต่ยังไม่ได้ทําการ คลิกเพื่อ ไปยังเป้าหมาย
vlink เป็นการกําหนดสีข้อความที่เป็นจุดเชื่อมโยง และได้ทําการคลิก เพื่อไปยัง เป้าหมายมาแล้ว (Visited link)
alink เป็นการกําหนดสีข้อความที่เป็นจุดเชื่อมโยง และกําลังไปยัง
เป้าหมายอยู่ขณะนั้น (Active link)
ชื่อสีมาตรฐาน และ #RRGGBB
เป็นชื่อสมาตรฐานหรือรหัสสีที่ต้องการกําหนดให้กับ แท็กการกําหนดสี
ตัวอย่างการกําหนดสีให้กับจุดเชื่อมโยง ลองเพิ่มคําสั่งต่อไปนี้ลงในไฟสี link5 html
<body link="green" vlink="blue" alink="red">