การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป By Juthawut Chantharamalee Suan Dusit Rajabhat University (Computer Science)

บทที่ 8 การเชื่อมโยงเว็บเพจ (Link) บทที่ 2 Suan Dusit Rajabhat University (Computer Science)

บทนำ ไฮเปอร์ลิงก์ (Hyperlink) หรือที่เรียกว่า “ลิงก์” เป็นการเชื่อมโยงเว็บไซต์บน อินเตอร์เน็ต จากจุดหนึ่งโยงไปยังอีกจุดหนึ่ง หรือเชื่อมต่อเข้าสู่อีเมลล์ของ Webmaster เพื่อติดต่อสื่อสารกัน การเชื่อมโยงในลักษณะนี้นับว่ามีประโยชน์อย่าง มาก เนื่องจากทำให้ผู้เข้าชม สามารถเข้าถึงข้อมูลและเนื้อหาทุกหน้าเว็บเพจภายในเว็บไซต์ ของเราได้ Suan Dusit Rajabhat University (Computer Science)

ส่วนประกอบของไฮเปอร์ลิงก์ เว็บเพจหรือเว็บไซต์ โดยส่วนมากลิงก์บนเว็บเพจจะใช้สำหรับเปิดไปยังหน้าเว็บเพจอื่นภายใน เว็บไซต์เดียวกัน หรือเปิดไปยังหน้าเว็บไซต์อื่น ไฟล์เอกสารอื่นๆ สามารถลิงก์ไปยังเนื้อหาหรือข้อมูลต่างๆ บนอินเตอร์เน็ตได้ หากรู้ ตำแหน่งที่อยู่ โดยวิธีการทำงานของเบราเซอร์ จะขึ้นอยู่กับประเภทของไฟล์เหล่านั้น คำสั่งส่งอีเมลล์ คือการสั่งให้เปิดโปรแกรมอีเมลล์บนเครื่องคอมพิวเตอร์ของผู้ชม เพื่อ เตรียมเขียนข้อความส่งอีเมลล์ การรันโปรกแกรมจาวาสคริปต์ สำหรับใช้ในการโต้ตอบบนเว็บเพจ การปิดวินโดวเบราเซอร์ การเปิดลิงก็เป็นวินโดว์ใหม่ แบบป๊อบอัพ Suan Dusit Rajabhat University (Computer Science)

ส่วนประกอบของไฮเปอร์ลิงก์ ในการทำงานของไฮเปอร์ลิงก์มีส่วนประกอบดังนี้ ต้นทาง (Source Anchor) หมายถึง ส่วนประกอบบนเว็บที่เป็นจะลิงก์ ซึ่งเมื่อเลื่อ เมาส์ไปชี้พอยเตอร์จะเปลี่ยนเป็นรูปมือ และเมื่อคลิกเลือกหน้าเว็บหรือข้อมูลปลายทางจะ ปรากฏขึ้นมา ซึ่งอาจเป็นข้อความหรือรูปภาพก็ได้ ปลายทาง (Destination Anchor) หมายถึง เนื้อหาข้อมูลต่างๆ ไม่ว่าจะเป็น ข้อความหรือรูปภาพ ซึ่งถูกเรียกให้ปรากฏขึ้นมาเมื่อมีผู้ชมคลิกที่ลิงก์ต้นทาง ซึ่งลิงก์ ปลายทางแบ่งได้เป็นหลายรูปแบบ ดังนี้ ตำแหน่งเฉพาะบนเว็บเพจ คือการสั่งให้เบราเซอร์เปิดเว็บเพจพร้อมทั้งเลื่อนไปยังตำแหน่งที่ ระบุไว้โดยทันที Suan Dusit Rajabhat University (Computer Science)

รูปแบบลิงก์ต่างๆ บนอินเตอร์เน็ต ลิงก์นับว่าเป็นส่วนสำคัญของหน้าเว็บเพจ โดยในปัจจุบันได้มีลิงก์ในรูปแบบต่างๆ มากมาย ซึ่งสามารถแบ่งได้ดังนี้ ลิงก์ข้อความ หมายถึง ลิงก์ที่ใช้ข้อความเป็นจุดเชื่อมโยงไปยังตำแหน่งปลายทาง ซึ่ง ปกติจะใช้สีให้ แตกต่างจากข้อความปกติหรือมีการขีดเส้นใต้ข้อความนั้นๆ Suan Dusit Rajabhat University (Computer Science)

รูปแบบลิงก์ต่างๆ บนอินเตอร์เน็ต Suan Dusit Rajabhat University (Computer Science)

รูปแบบลิงก์ต่างๆ บนอินเตอร์เน็ต ลิงก์รูปภาพ หมายถึง ลิงก์ที่ใช้รูปภาพเป็นจุดเชื่อมโยง โดยเมื่อนำเมาส์ไปวางบนรูปภาพ เคอร์เซอร์ของเมาส์จะเปลี่ยนเป็นรูปมือ Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ ในการลิงก์ข้อความนั้นสามารถทำได้ 2 วิธี คือ วิธีที่ 1 การลิงก์ข้อความไปยังหน้าเว็บเพจอื่นในเว็บไซต์เดียวกัน มีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ TIP กำหนดตำแหน่งปลายทางของหน้าเว็บเพจ (Target) Link คลิกเลือกไฟล์ที่คุณต้องการ link ไป (กรณีไฟล์ที่ต้องการลิงค์ไปอยู่ใน site เดียวกัน) หรือ พิมพ์ URL ของไฟล์ลงไป กรณีถ้าไฟล์อยู่ต่าง site กัน Border ให้เรากำหนดค่าเป็น 0 เสีย ไม่เช่นนั้นจะปรากฏกรอบของ link ขึ้นโดย อัตโนมัติที่รูปภาพซึ่งเป็นลิงค์ (แต่ถ้าคุณต้องการกรอบนั้นก็ปล่อยว่างไว้ไม่ต้องกรอก เลขอะไรทั้งสิ้น) Target กำหนด Browser ที่จะมารองรับไฟล์ที่เชื่อมโยงไปนั้น โดยมีความหมาย ดังนี้ >>> Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ blank ให้ทำการเปิด Browser ใหม่ สำหรับไฟล์ที่เชื่อมโยงไป _self ให้เปิดไฟล์ที่เชื่อมโยงไปกับ Browser ที่เรียกใช้ไฟล์นั้น _ top ให้ทำการเปิดไฟล์ที่เชื่อมโยงไปกับ Browser ปัจจุบันและทำการลบ Frame ออกทั้งหมด หากใช้ร่วมกับเฟรม _self ให้ผลคล้ายกับ _top จากนั้นให้บันทึกเว็บเพจแล้วกดปุ่ม F12 เพื่อเรียกดูผ่านเบราเซอร์ ทดสอบโดยการ คลิกที่ลิงก์ จากนั้นก็จะเชื่อมโยงไปยังหน้าเว็บเพจที่กำหนด Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ วิธีที่ 2 การลิงก์ข้อความไปยังส่วนต่างๆ ในหน้าเว็บเพจเดียวกัน มีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ข้อความ Suan Dusit Rajabhat University (Computer Science)

การสร้างลิงก์ด้วยรูปถาพ การสร้างลิงก์ด้วยรูปภาพนับเป็นการเพิ่มความน่าสนใจกับลิงก์ในหน้าเว็บเพจ โดยมีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

การลิงก์ไปยังเว็บไซต์อื่น เป็นการสร้างลิงก์ไปยังเว็บไซต์หรือแหล่งข้อมูลภายนอกเว็บไซต์ของเรา ซึ่งมีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

The End Unit 8 Suan Dusit Rajabhat University (Computer Science)