Embedded Files
การเชื่อมโยงเว็บ(ลิ้งค์)
การเชื่อมโยงเว็บ(ลิ้งค์)
การเชื่อมโยง (ลิงค์)
เป็นที่ทราบกันดีอยู่แล้วนะค่ะ ในเว็บไซต์หนึ่ง ๆ จะมีหน้าเพจมากกว่าหนึ่งหน้า อย่างเช่นจากหน้าโฮมเพจก็สามารถคลิกเพื่อเข้าไปดูข้อมูลในหน้าอื่น ๆ ได้ ซึงเราเรียกว่าการเชื่อมโยงเว็บเพจ หรือ การลิงค์ ซึ่งก่อนที่เราจะทำการลิงค์หน้าเว็บเพจ เราจะต้องมีเว็บเพจอย่างน้อย 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>
ในการเชื่อมโยง (ลิงค์) เราสามารถที่จะลิงค์โดยใช้รูปภาพ หรือข้อความก็ได้ โดยเมืื่่อรูปภาพหรือข้อความถูกลิงค์ เมื่อเราทดสอบ ผ่านเว็บบราวเซอร์ สัญลักษณ์เมาส์ของเราจะเปลี่ยนจากภาพลูกศร เป็นภาพมือแทน เมื่อเมาส์ถูกเลื่อนไปอยู่บริเวณที่เราได้ลิงค์ไว้
รูปแบบการเชื่อมโยงระหว่างเว็บเพจ
<html>
<head><title> ....การเชื่อมโยงระหว่างเว็บเพจ....</title></head>
<body>
<a href="index.html">คลิ๊กที่นี้เพื่อกลับไปหน้าแรก</a><p> <!--ลิงค์โดยใช้ข้อความ ->
<a href="index.html"><img src="home.gif"></a> <!--ลิงค์โดยใช้รูปภาพ ->
</body>
</html>
รูปแบบการเชื่อมโยงนอกเว็บไซต์
<html>
<head><title> ....การเชื่อมโยงนอกเว็บไซต์....</title></head>
<body>
<!--ลิงค์โดยใช้ข้อความ ->
<a href="http://www.nextstepdev.com">ลิงค์มาที่เว็บไซต์ Nextstepdev.com</a><p>
<!--ลิงค์โดยใช้รูปภาพ ->
<a href="http://www.nextstepdev.com"><img src="nextstpdev.gif"></a>
</body>
</html>
การเชื่อมโยงภายในหน้าเว็บเพจ
สำหรับเว็บบ้างเว็บที่มีข้อมูลในแต่ละหน้าเยอะ ๆ ต้องเลื่อนลงไปด้านล่างมาก ๆ ซึ่ง วิธีการแก้ไขปัญหาเหล่านี้ ก็คือการเพิ่มลิงค์เพื่อลิงค์เอกสารในหน้านั้น โดยเราอาจแบ่งตามหัวข้อย่อย ๆ ก็ได้ค่ะ (เหมือนการลิงค์ในหน้านี้ค่ะ) ซึ่งอาจจะมองว่าเป็นในลักษณะของเมนูย่อยก็ได้ค่ะ นอกจากนี้ ก็สามารถใช้ในกรณีที่ลงไปดูข้อมูลด้านล่างแล้วอยากจะเลื่อนมาที่ด้านบนของเว็บ ในส่วนท้ายเพจ เราก็อาจทำลิงค์ ให้คลิ๊กเพื่อ go to top ได้อย่างรวดเร็วค่ะ คงเคยจะเห็นกันมาบ้างแล้วนะค่ะ (ก็เหมือนการลิงค์ในหน้านี้อีกน่ะแหละค่ะ)
<html>
<head>
<title> ....การเชื่อมโยงภายในหน้าเว็บเพจ โดยคลิ๊กที่ด้านล่าง แล้วเลื่อนขึ้นมาด้านบน....</title>
</head>
<body>
<!--กำหนดชื่อปลายทาง เขียนโค้ดส่วนนี้ไว้บริเวณด้านบนของเพจ->
<a name="top"></a>
<!--ช่วงระหว่างนี้ต้องมีข้อมูลเยอะ ๆ เกินหนึ่งหน้าเพจสกรีนจึงจะเห็นผลการทำงาน->
<!--ลิงค์โดยใช้ข้อความ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
<a href="#top">Go to Top</a><p>
<!--ลิงค์โดยใช้รูปภาพ เขียนโค้ดส่วนนี้ไว้บริเวณด้านล่างของเพจ ->
<a href="#top"><img src="top.gif"></a>
</body>
</html>
การเชื่อมโยงแบบอีเมล์
สำหรับการเชื่อมโยงแบบนี้ มักจะเห็นบ่อยในเว็บเพจซึ่งเป็นส่วนลิงค์สำหรับให้ผู้เยี่ยมชมส่งเมล์มายังผู้ดูแลเว็บไซต์ โดยใช้ E-mail ตามที่ผู้เขียนเว็บได้ระบุไว้ในแท็กสำหรับลิงค์ การลิงค์แบบนี้นั้นเมื่อผู้ใช้งานคลิ๊กที่ลิงค์ จะมีการเชื่อมโยงไปยังโปรแกรม Microsofe outlook ซึ่งเป็นโปรแกรมสำหรับส่งเมล์ตัวหนึ่ง โดยที่ช่อง address To (ปลายทาง) จะปรากฏ E-mail Address ที่ระบุไว้ที่แท็กลิงค์ปรากฏอยู่
<html>
<head><title> ....การเชื่อมโยงแบบอีเมล์....</title></head>
<body>
<!--ลิงค์โดยใช้ข้อความ ->
<a href="mailto:mail@domain.com">ลิงค์เมล์ส่งเมล์ไปที่ mail@domain.com</a><p>
<!--ลิงค์โดยใช้รูปภาพ ->
<a href="mailto:mail@domain.com"><img src="contact.gif"></a>
</body>
</html>
สอนสร้างเว็ป HTML แบบ Frame พื้นฐาน
สอนสร้างเว็ป HTML แบบ Frame พื้นฐาน
แบ่งหน้าจอโดยใช้ Frame
แบ่งหน้าจอโดยใช้ Frame
HTML
HTML
ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame
เรามาลองสร้าง Frame กันง่ายๆดู
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
frame ในแนวตั้งซึ่งจะเปิดเว็บเพจถึง 3 ไฟล์ในหน้าเดียวกันโดยเราจะแบ่งขนาดของ frame เป็น % หรือเป็น (px) pixel ก็ได้
รูปแบบของ frame แนวตั้ง
<html>
<frameset cols=ขนาดเฟรม1,ขนาดเฟรม2>
<frame src='เว็บเพจ1'>
<frame src='เว็บเพจ2'>
</frameset>
</html>
การแบ่งแบบแนวนอน ก็สามารถทำได้เช่นเดียวกัน ซึ่งแบ่งเป็น % หรือ px (pixel) ก็ได้เช่นกัน ซึ่งเราจะใช้ rows (แถว) แทน cols (หลัก)
รูปแบบของ frame แนวนอน
<html>
<frameset rows=ขนาดเฟรม1,ขนาดเฟรม2>
<frame src='เว็บเพจ1'>
<frame src='เว็บเพจ2'>
</frameset>
</html>
ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนตามที่เราเขียนขึ้นมา
<html>
<noframes>
<body> คำเตือน </body>
</noframes>
</html>
4.ลองเอา frame แนวตั้งและแนวนอนมารวมกัน
ในตัวอย่างนี้จะนำเอา frame แนวตั้งและแนวนอนมารวมกัน ซึ่งเป็นการซ้อนกันของ frame นั่นเอง
frame ในตัวอย่างที่ผ่านมานั้นจะสังเกตุได้ว่าสามารถเปลี่ยนขนาดได้ตามใจของเรา แต่ถ้าเราไม่ต้องการให้ผู้ใช้เปลี่ยนขนาดเราต้องใช้คำสั่ง noresize ซึ่งเป็น Attributes มาช่วย
6.การใช้ link ให้สัมพันธ์กันใน frame
ข้อดีของ frame ที่จะเห็นได้ก็คือ ใช้ในการทำเมนู ดังในตัวอย่างนั่นเองซึ่งจะต้องใช้ ไฟล์ 2 ไฟล์ ดังนี้
1.ไฟล์ที่ใช้จัด frame ดังในตัวอย่างซึ่งจะเห็นว่าเราได้ใส่ชื่อ(name) ให้กับ frame ที่เราสร้างขึ้นมาด้วย
2. ไฟล์ที่ใช้ทำเป็น link ของเราซึ่งมีคำสั่ง target='frame' หมายความว่าให้แสดงผลใน frame ที่มีชื่อว่า frame2 นั่นเอง มี soure code ดังนี้
<html>
<body>
เว็บไซต์ที่น่าสนใจ
<a href="http://www.hellomyweb.com" target="frame2">
hellomyweb</a>
<a href="http://www.w3schools.com" target="frame2">
w3schools </a>
</body>
</html>
7. การใช้ link ให้ปิด frame ทั้งหมด
ในตัวอย่างนี้จะเป็นการสร้าง link ให้ทำลาย frame ทั้งหมด ซึ่งเราจะใช้คำสั่ง target ซึ่งมีรายละเอียดดังนี้
1.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน
2.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่
3.target='_self' เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน
เป็น frame รูปแบบหนึ่ง นิยมใช้ในส่วนที่เป็นโฆษณา เนื่องจากทำให้เราสะดวกไม่ต้องมาแก้ที่หน้าหลักแต่แก้ที่หน้าที่เป็นโฆษณาได้เลย ซึ่งเราอาจเอาให้หน้าที่เป็นโฆษณาให้ลูกค้าแก้ไขโดยไม่ต้องยุ่งกับหน้าหลักของเรา
** เราจะใช้ Frameset ใน <body> </body> ไม่ได้ยกเว้นกรณีของ <noframes>
Report abuse