February 12, 2012

HTML: โครงสร้างเว็บ, ลิงก์ และรูปภาพ

รูปแบบโครงสร้างของเว็บหนึ่งๆ จะมีหน้าตาเหมือนกับโครงสร้าง directory บนระบบ Unix สิ่งที่แตกต่างอยู่บ้าง คือสำหรับเว็บจะมีหน้าที่เป็นตัวแทนประจำ directory ที่ชื่อว่า index.html อยู่ (หรืออาจเป็น index.php ก็ได้ เมื่อเขียนเว็บแบบไดนามิก) ซึ่งถ้าเราเข้าไปยัง directory นั้นๆ โดยไม่ระบุไฟล์ มันจะไปเรียกหน้า index นี้มาให้

รูปแบบการระบุ path เพื่อทำการเชื่อมโยงไปยังไฟล์ต่างๆ ภายในเว็บของเราเอง ก็ทำได้ 2 วิธีดังนี้
  • absolute path ระบุตั้งแต่ root directory / ไปจนถึงไฟล์ที่ต้องการค้นหา
  • relative path จะระบุสำหรับตำแหน่ง directory ที่เราอยู่
สำหรับการเชื่อมโยงออกไปยังเว็บภายนอก ต้องขึ้นต้นด้วย domain name/IP address เว็บนั้นๆ แล้วตามด้วย absolute path เสมอครับ



สมมติว่าโครงสร้างเว็บ mysite.com เป็นดังนี้

ถ้าเราอยู่ที่หน้า php.html แล้วต้องการลิงก์ไปยังหน้า about.html เราอาจมองว่ามันมีตำแหน่งคือ ../about.html หรือ /about.html หรือ http://mysite.com/about.html ก็ได้

สำหรับการสร้างลิงก์ไปยังเว็บนั้น จะมีวิธีการเขียน tag ต่างจากตอนก่อนๆ ตรงที่ต้องเพิ่ม attribute เข้าไปคือ

ส่วนการนำรูปภาพมาแสดง ก็ทำการเปลี่ยน tag และชื่อ attribute เป็น



อนึ่ง tag a ยังสามารถวางตำแหน่งในเอกสาร เพื่อให้เราจะโดดไปยังจุดต่างๆ ได้อย่างรวดเร็วคือ

เวลาจะเรียกใช้ ก็เพิ่ม #name ต่อท้ายชื่อ path นั่นเอง เช่นถ้า #jumppoint อยู่ในหน้า index.html

No comments:

Post a Comment