▶️1. Home Page ▶️คือหน้าแรกของเว็บไซต์ เป็นศูนย์รวมทางด้านข้อมูลคร่าวๆ ขององค์กรทั้งหมดโดยรวม เพื่อนำเสนอว่า องค์กรนั้นๆ มีสินค้า และบริการอะไรบ้าง และมีประวัติความเป็นมาขององค์กรอย่างไร เป็นต้น Show
▶️2. Web Page ▶️เป็นหน้ารายละเอียดย่อยๆของเว็บไซต์ ซึ่งแสดงรายละเอียดตามหมวดหมู่ ซึ่งในหนึ่งเว็บไซต์อาจมีจำนวน Web Page แตกต่างกันไป ทั้งนี้ขึ้นอยู่กับปริมาณข้อมูลที่องค์กรต้องการนำเสนอ หากเปรียบเทียบกับหนังสือแล้ว จะเห็นได้ว่า Homepage ได้แก่ปกหนังสือ และ Web Page คือหน้ารายละเอียดด้านในของหนังสือแต่ละแผ่น เป็นต้น ▶️3. Domain ▶️เป็นชื่อเว็บไซต์ หรือที่อยู่ของเว็บที่ให้บุคคลอื่นๆ ได้เข้าถึงเว็บไซต์ได้ง่ายขึ้น ซึ่ง Domain มีความหลากหลายของสกุล Domain ทั้งนี้ขึ้นอยู่กับความต้องการการใช้งาน และสถานะขององค์กร เป็นต้น ยกตัวอย่างเช่น เว็บไซต์จองโรงแรม Agoda ใช้ชื่อ Domain คือ www.agoda.com เป็นต้น ▶️4. Hosting ▶️เป็นพื้นที่สำหรับเก็บข้อมูลบนเว็บไซต์ทั้งหมด ซึ่งเว็บไซต์ใดจะใช้พื้นที่ปริมาณมากน้อยแค่ไหน ก็ขึ้นอยู่กับจำนวนข้อมูลของเว็บไซต์ทั้งหมด อาทิเช่น รายละเอียดสินค้าและบริการ รูปภาพ ข้อมูลติดต่อ ประวัติองค์กร บทความความรู้ต่างๆ เป็นต้น หลักการในการออกแบบโครงสร้างเว็บไซต์ โดยส่วนมากจะออกแบบโดยพิจารณาจากวัตถุประสงค์ในการสร้างเว็บไซต์ ประเภทเว็บไซต์ ขนาดของข้อมูลที่จะนำเสนอ รวมถึงการจัดวางองค์ประกอบต่างๆ เพื่อให้เหมาะกับการใช้งานกับผู้ใช้ให้มากที่สุด โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้ สรุป Web Page คือหน้า HTML 1 หน้า Website คือการนำ Web Page หลายๆ หน้ามารวมกัน Homepage คือหน้าหลักของเว็บไซต์ มีทั้งเมนู และเนื้อหา 4. ส่วนประกอบของเว็บเพจส่วนประกอบของหน้าเว็บเพจ แบ่งออกเป็น 3 ส่วนหลัก ๆ คือ4.1 ส่วนหัวของหน้า (Page Header)เป็นส่วนที่อยู่บนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า ส่วนใหญ่ประกอบด้วย
4.2 ส่วนของเนื้อหา (Page Body)เป็นส่วนที่อยู่ตรงกลางของหน้าเพจ ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ อาจมีเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วยสำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ4.3 ส่วนท้ายของหน้า (Page Footer)เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ ส่วนมากเอาไว้แสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น ที่อยู่ เบอร์โทรศัพท์ โลโก้ แผนที่ ข้อความแสดงลิขสิทธิ์ คำแนะนำการใช้เว็บไซต์ เป็นต้น5. การออกแบบเว็บไซต์การออกแบบเว็บไซต์ในปัจจุบันมีความหลากหลายมากขึ้น การออกแบบเว็บไซต์ก็ขึ้นอยู่กับวัตถุประสงค์ในการสร้างของแต่ละองค์กรบริษัท ในสมัยก่อนการออกแบบเว็บไซต์มีข้อจำกัดหลายอย่างที่ทำให้นักออกแบบต้องปวดหัวไปตามๆ กัน เช่น การออกแบบสื่อวิดีโอที่ต้องนำมาใช้งานบนเว็บไซต์ เป็นต้นซึ่งเมื่อก่อนไม่มี Library อย่าง jQuery มาให้เราใช้เหมือนปัจจุบัน นักออกแบบจะต้องใช้ Program ที่ชื่อ Macromedia Flash เพื่อสร้างวิดีโอมาใช้ในงานเว็บเท่านั้น ปัจจุบันมีเครื่องมือมากมายที่เราสามารถนำมาเป็นหนึ่งในองค์ประกอบต่างๆ ที่ใช้ในทำเว็บไซต์ให้มีสวยงาม เพิ่มลูกเล่นในการนำเสนอ ซึ่งเราจะมาแนะนำในบทความต่อๆ ไป แต่ครั้งนี้เราจะมาแนะนำหลักสำคัญในการออกแบบหน้าเว็บไซต์ต้องคำนึงถึงองค์ประกอบสำคัญอะไรบ้าง
6. เครื่องมือหรือโปรแกรมที่ใช้ในการเขียนโค้ดNotepadถ้าใครที่ใช้ Windows จะมีโปรแกรมที่ชื่อว่า Notepad เป็นโปรแกรมพื้นฐาน ใช้สำหรับเขียนภาษา HTML หรือภาษาอื่นๆ ได้ ข้อเสียของ Notepad คือคำสั่งหรือการเขียนโค้ดต่างๆ จะต้องเขียนขึ้นเองเท่านั้น เพราะไม่มีฟังก์ชั่นอะไรให้เลือกใช้เลยVisual Studio CodeVisual Studio Code เป็นโปรแกรม Text Editor ยอดนิยมที่พัฒนาขึ้นจากโปรเจค Open-source โดย Microsoft เป็น Text Editors ตัวหนึ่งที่เราใช้ประจำเพราะใช้งานง่าย สะดวก มีฟังก์ชั่นให้เลือกใช้เยอะ รองรับการเขียนได้หลายภาษา โดยโปรแกรมนี้เป็นโปรแกรมที่เราแนะนำให้ใช้ในการเรียนเขียนเว็บไซต์ไปด้วยกัน เพราะสามารถ Download มาใช้งานได้ฟรีSublime TextSublime Text เป็น Text Editor ที่มีความสามารถสูงที่ใช้ในการเขียนโค้ด สนับสนุนการใช้งานได้หลายภาษา เหมาะกับผู้ที่เริ่มการเขียนโค้ดได้เลย เพราะเว็บ Editor ที่ทำงานได้เร็ว รวมถึงมีฟังก์ชั่นอื่นๆ ให้ใช้ได้หลากหลายเช่นเดียวกัน สามารถ Download มาใช้งานได้ฟรีAdobe DreamweaverAdobe Dreamweaver หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมที่ช่วยในการสร้างเว็บไซต์ เหมาะสมสำหรับมือใหม่ที่ต้องการเรียนรู้และเริ่มต้นทำเว็บไซต์ เพราะเป็นโปรแกรมที่มีเครื่องมืออำนวยความสะดวกในการสร้างเว็บไซต์ที่ง่ายสรุปสำหรับบทความนี้ เราได้เรียนรู้เรื่องของโครงสร้างของเว็บไซต์ โดยสามารถสรุปได้เป็นหัวข้อดังนี้
และสำหรับใครที่ยังไม่ได้อ่านบทความก่อนหน้าของเรา อย่าลืมไปอ่านด้วยนะ เว็บไซต์ คืออะไร สิ่งที่ต้องรู้ก่อนเริ่มทำเว็บไซต์ด้วยตัวเอง |