หน่วยที่ 6
- 2. เว็บเพจ จำนวนนับล้ำนหน้ำที่พบในอินเทอร์เน็ต จะไม่มีประโยชน์เลยหำกกำรเชื่อมโยงถึงโดยกำรลิงก์ ซึ่งเป็นสิ่งที่ช่วยให้ผู้ใช้
สำมำรถท่องอินเทอร์เน็ตได้โดยกำรคลิก เพื่อไปสู่หน้ำเว็บเพจต่ำงๆ กำรใช้ลิงก์นี้เอง ทำให้เว็บเพจแตกต่ำงจำกเอกสำรธรรมดำ
เพรำะมันทำให้เนื้อหำในเว็บเพจสำมำรถตอบสนองผู้ใช้ได้โดยที่ผู้ใช้ไม่ต้องอ่ำนเนื้อหำทั้งหมดในเว็บแต่ละหน้ำ แต่สำมำรถคลิก
เพื่อเปิดดุเฉพำะเว็บเพจที่สนใจ ในบทนี้จะกล่ำวถึงกำรสร้ำงลิงก์ รูปแบบต่ำงๆ เพื่อเชื่อมโยงข้อมูลในเว็บเพจเข้ำด้วยกัน
- 3. การสร้างลิงก์ <a>
ลิงก์สำมำรถเชื่อมโยงข้อมูลได้3 วิธี คือ
.กำรเชื่อมโยงข้อมูลภำยในหน้ำเว็บเพจเดียวกัน
.กำรเชื่อมโยงข้อมูลในหน้ำเว็บเพจหน้ำอื่น
.กำรเชื่อมโยงข้อมูลในหน้ำเว็บไซต์อื่น
การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน
หำกเรำมีข้อมูลภำยในเว็บเดียวกันที่ต้องกำรเชื่อมโยง โดยเมื่อมีกำรคลิกที่ลิงก์ให้เลื่อนขึ้นบนหรือลงล่ำงไปที่ตำแหน่งข้อมูลนั้น
อยู่ ให้เรำใช้คำสั่ง
การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น แต่ยังอยู่ภายในเว็บไซต์เดียวกัน
เรำสำมำรถเชื่อมโยงเว็บเพจของเรำกับเว็บเพจที่อยู่หน้ำอื่นที่อยู่ในเว็บไซตทเดียวกัน เช่น ถ้ำเรำมีเว็บเพจอยู่ 4 หน้ำที่ต้องกำร
ให้มีกำรเชื่อมโยงถึงกัน
การเชื่อมโยงข้อมูลในเว็บไซต์อื่น
เรำสำมำรถเชื่อมโยงข้อมูลกับเว็บไซต์อื่นได้โดยกำรระบุ URL ของเว็บเพจที่เรำต้องกำรแท็ก
<a href…>
- 5. ทาความเข้าใจกับ Relative Path Names
ในตัวอย่ำงกำหนดให้เว็บเพจ home.thml เป็นเว็บเพจเริ่มต้น หำกเรำต้องกำรเชื่อมโยงจำกเว็บเพจเริ่มต้นไปยังเว็บเพจ
maya.html ซึ่งเป็นเว็บเพจที่อยู่ในไดเรกทอรีเดียวกัน
สำมำรถเชื่อมโยงได้โดยใช้แท็ก <a href…> โดยพิมพ์ชื่อของเว็บเพจที่ต้องกำรได้เลย เช่น
ถ้ำหำกเรำต้องกำรเชื่อมโยงจำกเว็บเพจเริ่มต้นไปยัง
เว็บเพจที่อยู่ในไดเรกทอรีที่ต่ำกว่ำในที่นี้คือ maya.html ดังรูป
เรำสำมำรถใช้แท็ก <a href…> แล้วอ้ำงอิงตำแหน่งของ
เว็บเพจปลำยทำงจำกเว็บเพจเริ่มต้นได้เช่น
- 10. การทา lmage map
ในหัวข้อที่ผ่ำนมำเรำใช้ภำพมำทำเป็นลิงก์ซึ่งผลลัพธ์คือพื้นที่ทั้งภำพจะเป็นลิงก์ทั้งหมด แต่กำรกำหนดพื้นที่ในภำพบำงส่วน หรือ
ทั้งหมดมำทำเป็นลิงก์
โดยปกติ ภำพหนึ่งจะสำมำรถเชื่อมโยงไปได้แค่ที่เดียวเท่ำนั้น แต่กำรใช้สร้ำงพื้นที่ย่อยเรียกว่ำ จะทำให้ภำพสำมำรถลิงก์ไปยัง
หลำยๆ ที่ขึ้นอยู่กับผู้ใช้คลิกลิงก์ไปพื้นที่ใด
ขั้นที่ 1 กำหนดพื้นที่บนรูปเพื่อให้ทำลิงก์ <ara>
ขั้นที่ 2 กำรกำหนดแม็พ <map>
แม็พ ก็คือกำรกำหนดพื้นที่หลำยๆ พื้นที่ไว้ภำยในแม็พ เพื่อจะนำไปใช้กับรูปภำพได้สะดวก โดยรูปภำพเมื่อติดต่อกับแม็พ ก็
จะได้กำหนดพื้นที่ทั้งหมดที่อยู่ในแม็พนั้นไป
ขั้นที่ 3 นำแม็พ map มำใช้งำนกับรุป
เมื่อเรำกำหนดพื้นที่ที่จะนำมำทำเป็นลิงก์เรียบร้อยแล้ว จำกนั้นสร้ำงแท็ก ของพื้นที่ทังหมด สุดท้ำยนำแม็พที่สร้ำงไว้ลงในรูป
- 11. สร้างลิงก์แบบ Rollover
ในส่วนนี้เรำจะสร้ำงลิงก์ให้กับรูปภำพ ดดยที่จะเพิ่มลุกเล่นให้กับภำพ ดดยเมื่อใดก็ตำมโดยเมื่อใดก้ตำมที่เรำนำเมำส์ไปวำงที่
รูป ภำพก็จะเปลี่ยนไปเป็นอีกรูปหนึ่ง และเมื่อใดก้ตำมที่เรำนำเมำส์ออกจำกรูป ภำพนั้นก็จะกลับเป็นรูปเดิม เหตุกำรณ์เช่นนี้เรำ
เรียกว่ำ Rollover และขั้นตอนกำรทำงำนตรงนี้ก็ง่ำยมำก คือเรำต้องเตรียมรูปภำพให้พร้อมในกำรทำงำน 2 รูป และที่สำคัญต้อง
เขียนคำสั่งของScript เพิ่มเติม ซึ่งสิ่งที่เรำจะเขียน หรือคำสั่งตอบสองเหตุกำรณ์โดยที่คำสั่งเหล่ำนี้สำมำรถแท็กไปกับ html ได้เลย
ส่วนวีกำรทำงำนของคำสั่งตอบสนองเหตุกำรณ์ก็คือ คำสั่งเหล่ำนี้จะทำงำนได้ก็ต้องเกิดเหตุกำรณ์ใดเหตุกำรณ์หนึ่งที่ผู้ใช้ได้ทำ
กับเครื่องคอมพิวเตอร์ของเรำ
ตอนนี้เรำรู้แล้วจะใช้เหตุกำรณ์เป็นตัวกระตุ้นให้คำสั่งเขียนนั้นเริ่มกำรทำงำน ทีนี่เรำมำดูในส่วนของคำสั่ง
ซึ่งส่วนของคำสั่งมีผู้กระทำตำมคำสั่งในที่นี้รูปภำพจะเป็นตัวถุกระทำ ดังนั้นเรำจึงต้องตั้งชื่อให้กับรุปภำพนั้นก่อน
โดยใช้แอตทริบิวต์ มีกำรทำงำนดังนี้
