แค่ชื่อหัวเรื่อง อาจทำให้หลายๆ คนคิดมากไปว่า เป็นไปได้หรือที่เว็บไซต์ของเราจะมีหน้าเดียว และจะมีประโยชน์อะไร แต่เชื่อเหอะ เป็นไปได้อย่างแน่นอน เพราะปัจจุบันก็มีหลายๆ เว็บที่ทำแบบนี้ (แต่คุณอาจยังไม่เคยเห็นก็ได้) เว็บไซต์หน้าเดียวหรือ Single Page website เหมาะสำหรับเว็บที่มีจำนวนหน้าไม่มากนัก ประมาณ 3-6 หน้า อย่าเพิ่งงง น่ะครับว่า ตกลงจะหน้าเดียวหรือหลายหน้า เอาเป็นว่า บทความนี้จะมาแนะำนำเพื่อนๆ ให้รู้จัก และลองทำดู

เว็บไซต์หน้าเดียว หมายถึง เว็บที่มีเพจหน้าเดียว แต่มีหลายหน้าจอ (เลื่อนลงไปด้านล่าง หรืออาจเลื่อนไปทางซ้าย/ขวามือ)

ตัวอย่างเว็บไซต์หน้าเดียว

• https://www.valentinefavre.com/
• https://grindspaces.com/
• https://rodesk.nl/

จากตัวอย่างเว็บไซต์ข้างต้น คงพอให้เพื่อนๆ เข้าใจได้ในระดับหนึ่งแล้วน่ะครับว่า เว็บไซต์หน้าเดียวหมายถึงอะไร สรุปง่ายๆ ก็คือเว็บที่สามารถเลื่อนหน้าในยังตำแหน่งต่างๆ ของหน้านั้นๆ ได้ ?(ขึ้้น หรือ ลง) ใครสนใจสามารถลองทำเว็บประเภทนี้ดูได้ครับ ด้วยคำสั่งลิงค์ในหน้าเดียวด้วยภาษา HTML

คำสั่ง HTML ที่เกี่ยวข้องลิงค์ในหน้าเดียวกัน

คำอธิบาย Single page website

• <a name = “contact-us”>ติดต่อเรา</a>
  การกำหนดชื่อตำแหน่งของ หน้า จากตัวอย่างด้านบน คือ สีฟ้า คือชื่อตำแหน่ง?
• <a href = “#contact-us”>Contact Us</a>
  สร้้างลิงค์กลับไปยังตำแหน่ง หน้า นั้นๆ?จากตัวอย่างด้านบน ?เมื่อคลิกลิงค์ ชื่อ ติดต่อเรา หน้าจอจะเลื่อนลงมาที่ำตำแหน่งของสีฟ้าที่ชื่อ “ติดต่อเรา” โดยอัตโนมัติ

ด้วยคำสั่งของ HTML ข้างต้น เราก็สามารถสร้างลิงค์จากด้านบน คลิกลงมาด้านล่างได้แล้วครับ ?แต่ถ้าใครต้องการให้คลิกกลับไปยังด้านบนสุดได้ ก็สามารถสร้าง ตำแหน่งของ ลิงค์อยู่ด้านบน เช่น go top เป็นต้น และสร้างลิงค์กด ไปยังหน้าบน