เว็บไซต์หน้าเดียว คุณรู้จักไหม
แค่ชื่อหัวเรื่อง อาจทำให้หลายๆ คนคิดมากไปว่า เป็นไปได้หรือที่เว็บไซต์ของเราจะมีหน้าเดียว และจะมีประโยชน์อะไร แต่เชื่อเหอะ เป็นไปได้อย่างแน่นอน เพราะปัจจุบันก็มีหลายๆ เว็บที่ทำแบบนี้ (แต่คุณอาจยังไม่เคยเห็นก็ได้) เว็บไซต์หน้าเดียวหรือ Single Page website เหมาะสำหรับเว็บที่มีจำนวนหน้าไม่มากนัก ประมาณ 3-6 หน้า อย่าเพิ่งงง น่ะครับว่า ตกลงจะหน้าเดียวหรือหลายหน้า เอาเป็นว่า บทความนี้จะมาแนะำนำเพื่อนๆ ให้รู้จัก และลองทำดู
เว็บไซต์หน้าเดียว หมายถึง เว็บที่มีเพจหน้าเดียว แต่มีหลายหน้าจอ (เลื่อนลงไปด้านล่าง หรืออาจเลื่อนไปทางซ้าย/ขวามือ)
ตัวอย่างเว็บไซต์หน้าเดียว
จากตัวอย่างเว็บไซต์ข้างต้น คงพอให้เพื่อนๆ เข้าใจได้ในระดับหนึ่งแล้วน่ะครับว่า เว็บไซต์หน้าเดียวหมายถึงอะไร สรุปง่ายๆ ก็คือเว็บที่สามารถเลื่อนหน้าในยังตำแหน่งต่างๆ ของหน้านั้นๆ ได้ ?(ขึ้้น หรือ ลง) ใครสนใจสามารถลองทำเว็บประเภทนี้ดูได้ครับ ด้วยคำสั่งลิงค์ในหน้าเดียวด้วยภาษา HTML
คำสั่ง HTML ที่เกี่ยวข้องลิงค์ในหน้าเดียวกัน
คำอธิบาย Single page website
- <a name = “contact-us”>ติดต่อเรา</a>
การกำหนดชื่อตำแหน่งของ หน้า จากตัวอย่างด้านบน คือ สีฟ้า คือชื่อตำแหน่ง? - <a href = “#contact-us”>Contact Us</a>
สร้้างลิงค์กลับไปยังตำแหน่ง หน้า นั้นๆ?จากตัวอย่างด้านบน ?เมื่อคลิกลิงค์ ชื่อ ติดต่อเรา หน้าจอจะเลื่อนลงมาที่ำตำแหน่งของสีฟ้าที่ชื่อ “ติดต่อเรา” โดยอัตโนมัติ
ด้วยคำสั่งของ HTML ข้างต้น เราก็สามารถสร้างลิงค์จากด้านบน คลิกลงมาด้านล่างได้แล้วครับ ?แต่ถ้าใครต้องการให้คลิกกลับไปยังด้านบนสุดได้ ก็สามารถสร้าง ตำแหน่งของ ลิงค์อยู่ด้านบน เช่น go top เป็นต้น และสร้างลิงค์กด ไปยังหน้าบน