ไฮเปอร์ลิงค์หมายถึงอะไร
?
ไฮเปอร์ลิงค์ (Hyperlink) เป็นตำแหน่งที่ใช้เชื่อมโยงข้อมูลจากที่หนึ่งไปอีกที่หนึ่ง
ซึ่งจุดที่ใช้สร้างเป็นไฮเปอร์ลิงค์นั้นอาจจะใช้ข้อความหรือรูปภาพก็ได้
Link
ลิงค์สามารถแยกเป็นประเภทใหญ่ๆ ได้สองประเภทคือการลิงค์แบบ
Absolute
Link : เป็นลิงค์ที่ต้องอ้างอิงข้ามระหว่างโดเมน เช่นการลิงค์ไปยังเวบไซท์อื่น
และจะต้องระบุชื่อโดเมนทั้งหมด เช่น ทำการลิงค์ไปที่ Hotmail ต้องระบุคือ
http://www.hotmail.com
ถึงจะสามารถลิงค์ได้
Relative
: เป็นการลิงค์ภายในเวบของเราเอง จะอยู่ในโฟลเดอร์เดียวกัน การลิงค์ไม่ยากมากนัก
การทำลิงค์สามารถที่จะทำ
ได้หลายวิธีและสามารถที่จะลิงค์ไปยังหน้าอื่นหรือหน้าเดียวกันก็ทำได้วิธีการทำลิงค์
มีหลายวิธี ด้วยกันแล้วแต่ความถนัดของ ผู้ใช้แต่ละคน แต่ในที่นี้จะขอนแนะนำตั้งแต่วิธีที่ง่ายที่สุดจนไปถึงวิธีที่ซับซ้อน
การทำลิงค์ข้อความ
เป็นการลิงค์ที่ง่ายและไม่ยุ่งยากก่อนที่จะทำการลิงค์จำเป็นต้องสร้างไฟล์ที่เป็นเป้าหมายที่จะทำการลิงค์
ให้ทำดังนี้
กด
F8 เพื่อเรียก Site ให้สร้างไฟล์ขึ้นใหม่ดังนี้ index.html , address_book.html
, my_picture.html

หลังจากที่ได้สร้างไฟล์เรียบร้อยแล้วให้เริ่มทำงานที่หน้า
index.html โดยการดับเบิ้ลคลิกที่ไฟล์ index
จากนั้นจะมาเริ่มต้นที่หน้า
Document index.html ให้ทำการพิมพ์ข้อความว่า Address Book และ My Pictureล

ขั้นตอนต่อไปเป็นขั้นตอนการลิงค์ทำได้โดยการป้ายทับข้อความ
Address Book จากนั้นให้มาที่ Porperties inspector ในช่องลิงค์ให้คลิกที่สัญลักษณ์รูปโฟลเดอร์ดังรูปด้านล่าง
จากนั้นจะมี
Dialog box ให้เลือกไฟล์ address_book.htm จากนั้นคลิก Select

ต่อมาให้การเลือกข้อความ
My Picture ให้พร้อมที่จะทำการลิงค์ ให้เริ่มทำการลิงค์เหมือนกับข้อความแรกแต่ให้เลือกไฟล์ใน
Dialog box เป็น my_picture.htm จากนั้นคลิก
Select
หลังจากเลือกไฟล์แล้วให้ทดสอบการโดยการกด
F12 เป็นการดูผ่าน Browser ทดลองคลิกที่ลิงค์ที่ได้ทำไว้
หลังจากคลิกที่
Address Book ทาง Browser จะเปิดหน้าเพจขึ้นใหม่เป็นหน้าเพจของ address_book.htm
จะสังเกตได้จากช่อง Address

การทำลิงค์สามารถพิมพ์เข้าโดยตรงในกรณีที่เราสามารถจำชื่อได้
โดยพิมพ์ในช่อง Link

หรืออีกวิธีหนึ่งจัดว่าเป็นวิธีที่แน่นอนไม่ผิดพลาดในการลิงค์
แต่เราต้องเปิด Site Local Folder และย่อ Window
ของทั้งสองให้เล็กสามารถมองเห็นได้ทั้งสองหน้าต่าง
จากนั้นทำการคลิกที่
Point to file ค้างแล้วลากมายังชื่อไฟล์ใน Local Folder ที่ต้องการลิงค์
แต่วิธีดังกล่าวจะใช้เนื้อที่ในการทำงานมากและมีข้อจำกัดสำหรับหน้าจอที่เล็กเนื้อที่ในการทำงานก็จะน้อยลงไปด้วย
แต่แนะนำให้ใช้วิธีแรกดีเพราะสะดวกและไม่เกิดการผิดพลาด
การลิงค์ไปยังเวบไซต์อื่น
เราสามารถที่จะทำเวบของเราเป็นเวบบริการหรือรวมลิงค์ให้ผู้อื่นสามารถไปยังเวบไซท์อื่นได้อีกด้วยเพื่อเป็นความหลากหลาย
ในเวบของเรา และยังสะดวกกับเจ้าของเวบเองอีกด้วยโดยไม่ต้องพิมพ์ URL เข้าไปใหม่
แต่สามารถคลิกที่เวบของตัวเองก็ สามารถไปยังเวบ ที่ต้องการได้ เราอาจจะทำลิงค์เฉพาะเวบที่เราใช้บ่อยๆ
เช่น เช็คเมล์ ส่งเพจ และอื่นๆ
ขั้นตอนการทำลิงค์
ให้เปิดไฟล์
index.html พร้อมที่จะทำงาน
พิมพ์ข้อความลงไปดังนี้
Hotmail
Yahoo
Pantip

จากนั้นให้ป้ายทับข้อความ
Hotmail ให้ทำงาน
มาที่
Properties inspector
ในช่อง
Link ให้พิมพ์ URL เข้าไปคือ http://www.hotmail.com

ส่วน
Yahoo และ Pantip ให้ทำขั้นตอนเดียวกันโดยเปลี่ยนลิงค์ไปที่ http://www.yahoo.com
และ http://www.pantip.com
ทดสอบโดยการกด
F12 แต่ยังไม่ต้องคลิกใน Browser เพราะเรายังไม่ได้ทำการต่อเชื่อมอินเตอร์เน็ต
ให้ทดสอบโดยการ เอาเมาส์มาวางทับข้อความโดยไม่ต้องคลิก จากนั้นให้สังเกตจาก
Task bar ด้านล่างจะระบุที่ไปถ้าทำการคลิก แต่ถ้าได้ทำการ ต่อเชื่อมอินเตอร์เน็ตก็สามารถคลิกได้เลย

|