1

การสร้างเว็บเพจ
เว็บไซต์ (Website) และเว็บเพจ (Webpage)
เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึง เอกสารหนึ่ง
หน้ า การใช้ เ ว็ บ ก็ คื อ การเปิ ด อ่ า นหรื อ เปิ ด ใช้ เ ว็ บ แต่ ล ะหน้ า นั่ น เอง เว็ บ เพจอาจสร้ า งขึ้ น ด้ ว ย
ภาษาคอมพิวเตอร์ เช่น HTML, ASP, PHP, JAVA ฯลฯ
เมื่ อ น าเว็ บ เพจหลาย ๆ หน้ า มารวมกั น และระบุ อ ยู่ ใ นอิ น เตอร์ เ น็ ต หรื อ ยู อ าร์ แ อล
(Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า เว็บไซต์ (Web Site)
เมื่ อ เปิ ด เว็ บ ไซต์ ขึ้ น มา จ ะพ บกั บ หน้ า แร กของ เว็ บ ไ ซต์ ซึ่ ง เรี ย กว่ า โฮ มเ พ จ
(Homepage) ซึ่งเป็นหน้าที่สาคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็ บเพจและเว็บไซต์ อื่น ๆ
สรุปเว็บเพจ เว็บไซต์ และโฮมเพจ

เว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ ใช้ สาหรับ เปิด เว็บ เพจหรื อ รับส่งข้ อ มู ล
ตามที่เครื่องลูก ข่ายร้ องขอเมื่ อเราเปิ ดเข้าสู่ อิน เตอร์ เน็ ต เว็บเบราเซอร์ที่ ได้ รับ ความนิย มปัจ จุ บั น มี
หลายโปรแกรม เช่ น Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google
Chrome

เว็บเซิฟเวอร์ (Web server) คือ เครื่องคอมพิวเตอร์ ที่ทาหน้า ที่ให้บริ การข้อ มูล ใน www
ซึ่งเก็บ Web page และโปรแกรมจัดการบริการ เมื่อผู้ใช้ต้องการดู Web page ที่อยู่ในเครื่อง Server
ก็จะใช้ Web browser เรียกขอข้อมูลโดยระบุที่อยู่ของข้อมูลในลัก ษณะที่เรีย กว่า URL
 2

อัพโหลด (Upload) คือ การส่งข้อมูลจากเครื่ อ งของเราไปยั ง Web Server เมื่อเราสร้า ง Web

page แต่ละหน้าแล้ว ต้องส่งข้อ มู ล ไปเก็ บไว้ ที่ Web Server ที่เป็นเครื่อ งคอมพิว เตอร์ ที่ ให้ บ ริ ก าร
ข้อมูล www โดยอาศัยโปรแกรม FTP.

Search engine เป็นเครื่องมือหรือโปรแกรมในการค้น หาเว็ บต่างๆ โดยมีการเก็บ รายชื่อ

เว็บไซต์ และข้อมูลที่เกี่ยวข้องต่างๆ ของเว็บไซต์ และนามาจัดเก็บไว้ใน server เพื่อให้สามารถค้น หา
และแสดงผลได้ ส ะดวกรวดเร็ ว เช่ น google.com, yahoo.com, bing.com, altavista.com,
sanook.com เป็นต้น

หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์สามารถแบ่ง ออกเป็นขั้ นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้ เ ริ่ มต้ น
ใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์
- การวางแผน
การวางแผนนับว่ามีความสาคัญมากในการสร้างเว็บไซต์ เพื่อให้การทางานในขั้นตอนต่าง ๆ มีแนวทาง
ที่ชัดเจนและสามารถปฏิบัติได้ตามที่ตั้งเป้าไว้ ซึ่งประกอบด้วย
- การกาหนดเนื้อหาและจุ ดประสงค์ข องเว็บ ไซต์
การกาหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะสร้าง นับเป็นสิ่งสาคัญอย่างมากในการเริ่มต้นสร้ า ง
เว็บไซต์เลยที เ ดียว เพื่อให้เห็นภาพว่าเราต้ องการน าเสนอข้อมูลแบบใด เช่น เว็บไซต์เพื่อ ให้ ข้ อ มู ล
ข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกาหนดจุดประสงค์ของเว็บ ไซต์ ไ ด้
แล้ว เงื่อนไขเหล่านี้จะเป็นตัวกาหนดโครง สร้างรูปแบบรวมถึงหน้าตา และสีเว็บไซต์ของเราด้วย
- การกาหนดกลุ่มเป้าหมาย
เพื่อให้การสร้างและออกแบบเว็บไวต์ได้รั บความนิย ม การกาหนดกลุ่มเป้าหมายในการเข้าชมเว็ บ ไซต์
ก็นับว่ามีส่วนสาคัญไม่ น้อย เช่น เว็บไซต์สาหรับเยาวชน นักเรียน นักศึกษาในการค้นหาข้อ มูล หรือ
เว็บไซต์สาหรับบุคคลทั่วไปที่เข้าไปใช้บริการต่าง ๆ เป็นต้น
- การเตรียมข้อมูล
เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้องทราบว่าข้อมูลข่าวสาร
ต่าง ๆ สามารถนามาจากแหล่งใดบ้าง เช่น การคิดนาเสนอข้อมูลด้วยตั วเอง หรือนาข้อมูลที่น่าสนใจ
มาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีน เว็บไซต์ และที่สาคัญ ขออนุญาตเจ้าของบทความก่อนเพื่ อ
ป้องกันเรื่องลิขสิทธิ์ด้วย
 3

- การเตรียมสิ่งต่าง ๆ ที่จาเป็น
ในการออกแบบเว็ บ ไซต์ ต้ อ งอาศั ย ความสามารถต่ า ง ๆ เช่ น โปรแกรมส าหรั บ สร้ า ง เว็ บ ไซต์
ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็น
ต้น

- การจัดโครงสร้างข้อมูล
เมื่อได้ข้อมูล ต่าง ๆ เช่น กาหนดเนื้อหาและจุ ดประสงค์ข องเว็ บไซต์ การกาหนดกลุ่มเป้า หมาย การ
เตรียมข้อมูล การเตรียมสิ่งต่าง ๆ ที่จาเป็นจากขั้นแรกเรียบร้อยแล้ว ในขั้นตอนนี้ เราจะจัดระบบเพื่ อ
ใช้เป็นกรอบสาหรับการออกแบบและดาเนินการในขั้นตอนต่ อไป ซึ่งมีรายละเอียด ดังนี้
• โครงสร้างและสารบัญของเว็บไซต์
• การใช้ ร ะบบน าผู้ เ ข้าชมไปยัง ส่ว นต่า ง ๆ ภายในเว็ บไซต์ หรื อที่ เ ราเรี ยกว่ าระบบนา
ทาง (Navigation)
• องค์ประกอบที่ต้องนามาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ
• การกาหนดรูปแบบและลักษณะของเว็บเพจ
• การกาหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นามาใช้ในเว็บไซต์
• การบริการเสริมต่าง ๆ
• การออกแบบเว็บไซต์
นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้ า เว็ บ
เพจโดย โปรแกรมที่ เหมาะสมในการออกแบบคื อ Photoshop หรือ Fireworks ซึ่งจะช่วยใน การ
สร้ า งเค้ า โครงของหน้ าเว็ บ และองค์ ประกอบต่ า ง ๆ เช่ น ชื่ อ เว็ บ ไซต์ โลโก้ รู ป ไอคอน ปุ่ มไอคอน
ภาพเคลื่อนไหว แบนเนอร์โฆษณา เป็นต้น
ในการออกแบบเว็บไซต์นั้นยัง ต้องคานึงถึ งสีสันและรู ปแบบของส่ วนประกอบต่าง ๆ ที่ไม่ใ ช่
ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้นกรอบเพื่อ ความสวยงา ม
และดึงดูด ผู้เยี่ยมชมด้วย
 4
รูปแบบของเว็บไซต์
1. Static Website
หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html .
เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกาหนดไว้
Static Website เหมาะกับเว็บไซต์ที่ มีขนาดไม่ใ หญ่ จานวนหน้าเว็บเพจไม่ มาก .ไม่มีก าร
เปลี่ยนแปลงข้อมูลบ่อยๆ และไม่มีการติดต่อฐานข้อมูล..
2. Dynamic Website
หมายถึง เว็บไซต์ที่หน้าเว็บ เพจสามารถเปลี่ย นแปลงข้ อ มูล เองได้ โดยไม่ต้องเขีย นแต่ ล ะ
หน้าเว็บเพจเอง เช่น กระดานข่าว (WebBoard), ระบบสืบค้นข้อมูล
เว็บไซต์รูปแบบนี้จะถู กสร้างด้วยภาษา Script แบบ Server Side Script .เช่น PHP, ASP,
ASP.Net, JSP และอื่นๆ ไฟล์เอกสารที่ได้จ ะมี นามสกุล .php, .asp เป็นต้น และมักจะมีการติ ด ต่ อ
กับฐานข้อมูลเพื่ อบัน ทึก ข้อ มูล ลงในฐานข้ อมู ล หรือนาข้อมูลจากฐานข้อ มูล ขึ้น มาแสดงผลเป็ น หน้ า
เว็บเพจ
ส่วนประกอบของหน้าเว็บเพจ
เราสามารถจาแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้

1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุ ด ของหน้า เว็บ เพจ เป็นส่วนที่แสดงชื่ อ เว็บไซต์ โล

โก้ แบนเนอร์ โฆษณาลิงก์สาหรับข้ามไปยังหน้าเว็บอื่น
 5

2. ส่วนเนื้อหา (Page Body) อยู่บริเวณตอนกลางของหน้าเว็บ เพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายใน

หน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น

3. ส่วนท้าย (Page Footer) อยู่บริเวณด้านล่างสุดของหน้าเว็บ เพจ ส่วนมากใช้สาหรับลิงก์ข้อ ความ

สั้นๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็ บไซต์ อีเมลแอดเดรสของผู้ดู แลเว็ บไซต์ สาหรั บติ ด ต่อ กั บ ทาง
เว็บไซต์
 6

สรุปส่วนประกอบของหน้าเว็บเพจ

การออกแบบเว็บไซต์
แนวคิดในการออกแบบ
- ดูจากเว็บไซต์ อื่น เพื่ อเป็ นตั ว อย่า ง การดูจากเว็ บ ไซต์ อื่น บนอิ นเตอร์ เ น็ต เพื่ อ ศึ กษาเป็ น
ตั ว อย่ า งนั้ น นั บ เป็ น วิ ธี ก ารที่ ง่ า ยที่ สุ ด แต่ ก็ ค วรน าไปประยุ ก ต์ ใ ช้ ใ ห้ เ หมาะสมกั บ เนื้ อ หา แล ะ
กลุ่มเป้าหมายของเราด้วย
- ศึกษาจากสื่อสิ่งพิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในที่นี้ ได้แก่ แมกกาซีน โปสเตอร์โฆษณา
โบรชัวร์ หรือหนังสือบางเล่มที่มีรูปแบบและจุด ดึงดู ดความสนใจ สามารถนามาประยุกต์ใช้ในเว็ บ ไซต์
ของเราได้เช่นกัน

การกาหนดขนาดของเว็บเพจ
ขนาดของเว็บไซต์ที่นิยมในปัจจุบันมี 2 ขนาด คือ
1. ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดที่สามารถใช้ได้ กับหน้าจอทุ กขนา ดใน
ปัจจุบันเป็นขนาดของการออกแบบเว็ บไซต์ที่ ใ ช้ในอดี ต เนื่องจากอดีต ขนาดของจอคอมพิ ว เตอร์ มี
ขนาดเล็ก
2. ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบั น เนื่องจากผู้ใช้ นิ ย ม
ใช้จอคอมพิวเตอร์ขนาดใหญ่ขึ้นเนื่องมาจากราคาจอคอมพิว เตอร์ที่ถู กลง
รูปแบบการออกแบบเว็บไซต์
เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่ มากนัก ซึ่งการออกแบบหน้าตาเว็บไซต์
ส่วนใหญ่จะมองดูอ งค์ป ระกอบขององค์ กร หน่วยงาน หรือเนื้อหาเรื่ อ งที่ นาเสนอเป็น หลั ก ซึ่งการ
ออกแบบหน้าตของเว็บไซต์มีอยู่ 3 แบบ คือ
 7
1. การออกแบบเว็บไซต์ที่ เน้น การนาเสนอเนื้ อหา
เป็นการออกแบบเว็บไซต์ที่เน้นการนาเสนอเนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบ
ตารางเป็นหลัก มีการออกแบบหน้าตารูปแบบง่าย เช่น มีเมนูสารบัญ และเนื้อหา
2. การออกแบบเว็บไซต์ที่ เน้นภาพกราฟิก
เป็นการออกแบบเว็ บไซต์ ที่เน้ นภาพกราฟิก ที่ส วยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop
สาหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บนาน
3.การออกแบบเว็บไซต์ที่มี ทั้งภาพและเนื้อ หา
เป็ น การออกแบบเว็ บ ที่ นิ ยมในปั จจุ บัน ซึ่ ง ประกอบด้ ว ยข้อ ความ รู ป ภาพ โดยมี ก ารจัด
องค์ประกอบต่าง ๆ เพื่อให้เว็บน่าสนใจ
การออกแบบโครงสร้างเว็บ ไซต์
การออกแบบโครงสร้า งเว็ บไซต์ คือ การวางแผนการจั ดล าดั บ เนื้ อหาสาระของเว็ บ ไซต์
ออกเป็นหมวดหมู่ เพื่อจัดทาเป็นโครงสร้างในการจั ดวางหน้าเว็ บเพจทั้ งหมด เปรียบเสมือนแผนที่ ที่
ทาให้เห็นโครงสร้างทั้ งหมดของเว็บไซต์ ช่วยในนักออกแบบเว็บ ไซต์ไ ม่ใ ห้หลงทาง การจัดโครงสร้ า ง
ของเว็บไซต์ มีจุดมุ่งหมายสาคัญ คือ การที่จะทาให้ผู้เข้า เยี่ ยมชม สามารถค้นหาข้อมูล ในเว็ บเพจ ได้
อย่างเป็นระบบ ซึ่งถือว่าเป็นขั้นตอนที่ส าคั ญ ที่สามารถสร้างความสาเร็จ ให้ กับ ผู้ที่ ทาหน้า ที่ใ น การ
ออกแบบและพั ฒ นาเว็ บไซต์ (Webmaster) การออกแบบโครงสร้า งหรื อจั ด ระเบี ย บของข้อ มูลที่
ชัดเจน แยกย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพั นธ์กันและให้อยู่ในมาตรฐานเดีย วกัน จะช่วยให้น่า
ใช้งานและง่าย ต่อการเข้าอ่านเนื้อหาของผู้ใช้เว็บไซต์
หลักในการออกแบบโครงสร้างเว็ บไซต์ ควรพิจารณาดังนี้
1. กาหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์นี้ทาเพื่ออะไร
2. ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใดที่ผู้สร้างต้อ งการสื่อสาร ข้อมูลอะไร
ที่พวกเขาต้องการโดยขั้นตอนนี้ควรปฏิบัติควบคู่ไปกับขั้นตอนที่หนึ่ง
3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจั ด
โครงสร้างหรือจัดระเบี ยบข้ อ มูลที่ ชัด เจน การที่เนื้อหามี ความต่อเนื่องไปไม่สิ้น สุดหรือ กระจายมาก
เกิ น ไป อาจท าให้เ กิ ด ความสั บ สนต่ อ ผู้ใ ช้ ได้ ฉะนั้ น จึง ควรออกแบบให้มีลั ก ษณะที่ ชัด เจนแยกย่อย
ออกเป็ น ส่ ว นต่ า ง ๆ จั ด หมวดหมู่ ใ นเรื่ อ งที่ สั มพั น ธ์ กั น รวมทั้ ง อาจมี ก ารแสดงให้ ผู้ ใ ช้ เ ห็ น แผนที่
โครงสร้างเพื่อป้องกันความสับสนได้
4. กาหนดรายละเอียดให้กับโครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ตั้งไว้ โดยตั้งเกณฑ์ ใ น
การใช้ เช่น ผู้ใช้ควรทาอะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยง มากน้อยเพียงใด
5. หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้ อผิด พลาดและทาการแก้ ไ ข
ปรับปรุง แล้วจึงนาเข้าสู่เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
องค์ประกอบที่ดีของการออกแบบเว็บไซต์
 8

1. โครงสร้างที่ชัดเจน ผู้ออกแบบเว็บไซต์ควรจั ดโครงสร้า งหรือจั ดระเบียบของข้ อ มูลที่ชั ดเจน แยก

ย่อยเนื้อหาออกเป็นส่วนต่าง ๆ ที่สัมพันธ์กันและให้อ ยู่ในมาตรฐานเดีย วกัน จะช่วยให้น่าใช้งานและ
ง่าย ต่อการอ่านเนื้อหาของผู้ใช้
2. การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยให้ ผู้ใช้รู้สึกสบายใจต่อการอ่ า น
และสามารถทาความเข้าใจกับ เนื้อ หาได้อ ย่างเต็ มที่ โดยไม่ต้องมาเสี ยเวลาอยู่กั บการทาความเข้ า ใจ
การใช้งานที่สับสนด้วยเหตุนี้ผู้ออกแบบจึงควรกาหนดปุ่มการใช้งานที่ชัด เจน เหมาะสม โดยเฉพาะปุ่ ม
ควบคุมเส้นทางการเข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอยหลัง หากเป็นเว็บไซต์ที่มีเ ว็ บ
เพจจานวนมาก ควรจะจัดทาแผนผังของเว็ บไซต์ (Site Map) ที่ช่วยให้ผู้ใช้ทราบว่า ตอนนี้อยู่ ณ จุด
ใด หรือเครื่องมือสืบค้น (Search Engine) ที่ช่วยในการค้นหาหน้าที่ที่ต้องการ
3. การเชื่ อ มโยงที่ ดี ลั ก ษณะไฮเปอร์ เ ท็ก ซ์ ที่ ใ ช้ใ นการเชื่ อ มโยง ควรอยู่ ใ นรู ปแบบที่เป็น
มาตรฐาน ทั่วไปและต้องระวั งเรื่ องของตาแหน่ งในการเชื่อ มโยง การที่จานวนการเชื่อมโยงมา กและ
กระจั ด กระจายอยู่ทั่ วไปในหน้าอาจก่อ ให้ เกิ ด ความสั บสน นอกจากนี้ค าที่ ใ ช้ส าหรับ การเชื่ อ มโยง
จะต้องเข้าใจง่ายมีความชัด เจนและไม่สั้นจนเกินไป นอกจากนี้ในแต่ละเว็บเพจที่สร้างขึ้น มาควรมี จุด
เชื่อมโยงกลับ มายั งหน้าแรกของเว็ บ ไซต์ ที่กาลั งใช้ งานอยู่ ด้ วย ทั้งนี้เผื่อว่าผู้ ใช้ เ กิด หลงทาง และไม่
ทราบว่าจะทาอย่างต่อไปดีจะได้มีหนทางกลับมาสู่จุดเริ่ มต้นใหม่ ระวังอย่าให้มีหน้าที่ไม่มีก ารเชื่อ มโยง
(Orphan Page) เพราะจะทาให้ผู้ใช้ไม่รู้จะทาอย่างไรต่อไป
4. ความเหมาะสมในหน้าจอ เนื้อหาที่นาเสนอในแต่ละหน้าจอควรสั้น กระชับ และทันสมั ย
หลีกเลี่ยงการใช้หน้าจอที่มีลักษณะการเลื่อนขึ้นลง (Scrolling) แต่ถ้าจาเป็นต้องมี ควรจะให้ข้อมูล ที่ มี
ความสาคัญอยู่บริเวณด้านบนสุดของหน้าจอ หลีกเลี่ยงการใช้กราฟิกด้านบนของหน้าจอ เพราะถึงแม้
จะดูสวยงาม แต่จะทาให้ผู้ใช้เสียเวลาในการได้รับข้อมูลที่ ต้องการ แต่หากต้องมีการใช้ภาพประกอบก็
ควรใช้ เ ฉพาะที่ มี ค วา มสั ม พั น ธ์ กั บ เนื้ อ หา เท่ า นั้ น นอกจากนี้ ก ารใช้ รู ป ภาพเพื่ อ เป็ น พื้ น ห ลั ง
(Background) ไม่ควรเน้นสีสันที่ฉูดฉาดมากนัก เพราะอาจจะไปลดความเด่นชัดของเนื้อหาลง ควรใช้
ภาพที่มีสีอ่อน ๆ ไม่สว่างจนเกินไปรวมไปถึ งการใช้เ ทคนิ คต่า ง ๆ เช่น ภาพเคลื่อนไหว หรือตัวอัก ษร
วิ่ง (Marquees) ซึ่งอาจจะเกิดการรบกวนการอ่านได้ ควรใช้เฉพาะที่จาเป็ นจริง ๆ เท่านั้นตัวอักษรที่
นามาแสดงบนจอภาพควรเลือกขนาดที่อ่านง่าย ไม่มีสีสันและลวดลายมากเกินไป
5. ความรวดเร็ว ความรวดเร็วเป็น สิ่ง สาคัญประการหนึ่ง ที่ส่ งผลต่ อการเรียนรู้ ผู้ใช้จะเกิ ด
อาการเบื่อหน่ายและหมดความสนใจกับ เว็บ ที่ใช้เ วลาในการแสดงผลนาน สาเหตุสาคัญที่จะทาให้ก าร
แสดงผลนานคือการใช้ภาพกราฟิกหรือภาพเคลื่อนไหว ซึ่งแม้ว่าจะช่วยดึงดูดความสนใจได้ ดี ฉะนั้นใน
การออกแบบจึงควรหลีกเลี่ ยงการใช้ภาพขนาดใหญ่ หรือภาพเคลื่อนไหวที่ไ ม่จาเป็น และพยายามใช้
กราฟิกแทนตัวอักษรธรรมดาให้น้อยที่สุด โดยไม่ควรใช้มากเกินกว่า 2 – 3 บรรทัดในแต่ละหน้าจอ
 9
โครงสร้างของเว็บไซต์
1. เว็บที่มีโครงสร้างแบบเรียงลาดั บ (Sequential Structure)

เป็นโครงสร้า งแบบธรรมดาที่ ใช้ กัน มากที่สุ ดเนื่อ งจากง่ายต่ อการจั ดระบบข้ อ มูล ข้อมู ล ที่
นิยม จัดด้วยโครงสร้า งแบบนี้ มักเป็ นข้ อ มูล ที่ มีลั กษณะเป็น เรื่อ งราวตามลาดั บของเวลา เช่น การ
เรียงลาดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ ที่ มี
ขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation)
ภายในเว็บจะเป็นการดาเนินเรื่องในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลั ก ใน
การกาหนดทิศทาง ข้อเสียของโครงสร้า งระบบนี้ คือ ผู้ใช้ไม่สามารถกาหนดทิ ศทางการเข้าสู่ เ นื้ อ หา
ของตนเองได้ ทาให้เสียเวลาเข้าสู่เนื้อ

2. เว็บที่มีโครงสร้างแบบลาดับขั้น (Hierarchical Structure)

เป็นวิธีที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่ มีความซับซ้อ นของข้อ มูล โดยแบ่งเนื้อหา

ออกเป็นส่วนต่า งๆ และมีรายละเอีย ดย่ อยๆ ในแต่ละส่วนลดหลั่ นกั นมาในลัก ษณะแนวคิด เดี ย วกั บ
แผนภูมิองค์กร จึงเป็นการง่ายต่อการทาความเข้าใจกับโครงสร้างของเนื้อหาในเว็บลั กษณะนี้ ลักษณะ
เด่นเฉพาะของ เว็บประเภทนี้คือการมีจุดเริ่มต้นที่จุ ดร่วมจุ ดเดี ยว นั่นคือ โฮมเพจ (Homepage) และ
เชื่อมโยงไปสู่เนื้อหา ในลักษณะเป็นลาดับจากบนลงล่าง
3. เว็บที่มีโครงสร้างแบบตาราง (Grid Structure)

โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืด หยุ่ น

ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกัน และกันระหว่างเนื้อหาแต่ล ะส่วน เหมาะแก่
การแสดงให้เห็น ความสั มพัน ธ์กั นของเนื้ อหา การเข้าสู่เนื้อหาของผู้ใ ช้จ ะไม่ เป็ นลั กษณะเชิ งเส้ น ตรง
เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้
 10

ในการจั ด ระบบโครงสร้ างแบบนี้ เนื้ อ หาที่น ามาใช้ แ ต่ล ะส่ ว นควรมี ลั ก ษณะที่ เ หมื อ นกัน และ
สามารถใช้รูปแบบร่วมกัน หลักการออกแบบคือนาหัวข้อทั้งหมดมาบรรจุ ลงในที่เ ดียวกัน ซึ่งโดยทั่ ว ไป
จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงในลักษณะเดี ยวกับ โครงสร้างของเว็บ เมื่อผู้ใช้คลิก เลื อ ก
หัวข้อใด ก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page) ที่แสดงรายละเอียดของหั วข้อนั้น ๆ และภายในหน้ า
นั้น ก็จะมีการเชื่อมโยงไปยั งหน้ารายละเอีย ดของหั วข้อ อื่นที่ เป็น เรื่อ งเดียวกัน นอกจากนี้ยังสามารถ
นา โครงสร้างแบบเรียงลาดับและแบบลาดับขั้น มาใช้ร่ว มกันได้อีก ด้วย ถึงแม้โครงสร้างแบบนี้ อาจจะ
สร้างความยุ่งยากในการเข้าใจได้ และอาจเกิดปัญหาการคงค้า ง ของหัวข้อ (Cognitive Overhead)
ได้ แต่จะเป็นประโยชน์ที่สุดเมื่อผู้ใช้ไ ด้เข้าใจถึง ความสัมพันธ์ ระหว่างเนื้อหา ในส่วนของการออกแบบ
จาเป็นจะต้อ งมีก ารวางแผนที่ ดี เนื่องจากมี การเชื่อ มโยงที่เ กิ ดขึ้ น ได้หลายทิศทาง นอกจากนี้ ก าร
ปรับปรุงแก้ไขอาจเกิดความยุ่งยากเมื่อต้องเพิ่มเนื้อหาในภายหลัง
4. เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)

โครงสร้างประเภทนี้จะมีความยืด หยุ่นมากที่สุ ด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึ ง กั น

ได้หมด เป็นการสร้างรูปแบบการเข้า สู่เนื้ อหาที่เ ป็น อิสระ ผู้ใช้สามารถกาหนดวิธี การเข้าสู่ เนื้ อ หา ได้
ด้ ว ย ตนเอง การเชื่ อ มโยงเนื้ อ หาแต่ ล ะหน้ า อาศั ย การโยงใยข้ อ ความที่ มีมโนทั ศ น์ ( Concept)
เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์ เท็ กซ์หรื อไฮเปอร์มีเ ดีย โครงสร้างลักษณะนี้จั ด เป็ น
รู ป แบบที่ ไม่ มีโ ครงสร้ า งที่ แน่ นนอนตายตั ว (Unstructured) นอกจากนี้ ก ารเชื่ อ มโยงไม่ ไ ด้ จากัด
เฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้
ลักษณะการเชื่ อ มโยงในเว็ บนั้น นอกเหนือจากการใช้ ไฮเปอร์ เท็ กซ์ หรื อไฮเปอร์ มีเ ดีย กับ
ข้อความที่มีมโนทั ศน์ (Concept) เหมือนกันของแต่ ล ะหน้า แล้ ว ยังสามารถใช้ลักษณะการเชื่อ มโยง
จากรายการที่ รวบรวมชื่ อ หรื อ หัว ข้อ ของเนื้ อหาแต่ ละหน้ าไว้ ซึ่ ง รายการนี้ จะปรากฏอยู่บ ริเ วณใด
บริเวณหนึ่งในหน้าจอ ผู้ใช้สามารถคลิกที่หัวข้อใดหัวข้อ หนึ่งในรายการเพื่ อเลือ กที่จ ะเข้าไปสู่หน้ า ใดๆ
ก็ ไ ด้ ต ามความต้ อ งการ ข้ อ ดี ข องรูป แบบนี้ คื อ ง่า ยต่ อ ผู้ใ ช้ ในการท่ อ งเที่ ยวบนเว็ บ โดยผู้ ใช้ส ามารถ
กาหนดทิศทาง การเข้าสู่เนื้อหาได้ด้วยตนเอง แต่ข้อเสียคือถ้ามีการเพิ่ มเนื้ อหาใหม่ ๆ อยู่เสมอจะเป็ น
การยากในการ ปรับปรุง นอกจากนี้การเชื่อมโยงระหว่างข้อ มูลที่ มีมากมายนั้น อาจทาให้ ผู้ใช้ เกิ ด การ
สับสนและ เกิดปัญหาการคงค้างของหัวข้อ (Cognitive Overhead) ได้
องค์ประกอบของการออกแบบเว็บไซต์
1. ความเรียบง่าย (Simplicity)
 11

หมายถึง การจากัดองค์ป ระกอบเสริ มให้ เหลื อเฉพาะองค์ ประกอบหลั ก กล่าวคือในการสื่ อ สาร

เนื้อหากับผู้ใช้นั้น เราต้องเลือกเสนอสิ่ งที่ เราต้ องการนาเสนอจริ ง ๆ ออกมาในส่วนของกราฟิ ก สีสัน
ตัวอักษรและภาพเคลื่ อนไหว ต้องเลือกให้พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสร้ า ง
ความค าราญต่ อ ผู้ ใ ช้ ตั ว อย่ า งเว็ บ ไซต์ ที่ ไ ด้ รั บ การออกแบบที่ ดี ได้ แ ก่ เว็ บ ไซต์ ข องบริ ษั ท ใหญ่ ๆ
อย่างเช่น Apple Adobe Microsoft หรือ Kokia ที่มีการออกแบบเว็ บไซต์ใ นรูป แบบที่เ รียบง่าย ไม่
ซับซ้อน และใช้งานอย่างสะดวก
2. ความสม่าเสมอ ( Consistency)
หมายถึ ง การสร้ า งความสม่ าเสมอให้ เ กิ ด ขึ้น ตลอดทั้ ง เว็ บ ไซต์ โดยอาจเลื อ กใช้รู ปแบบ
เดี ย วกั น ตลอดทั้ ง เว็ บ ไซต์ ก็ ไ ด้ เพราะถ้ า หากว่ า แต่ ล ะหน้ าในเว็บ ไซต์ นั้ นมี ค วามแตกต่ างกั น มาก
จนเกินไป อาจทาให้ผู้ใช้เกิดความสับ สนและไม่แ น่ใจว่ากาลัง อยู่ใ นเว็บ ไซต์เ ดิ มหรื อไม่ เพราะฉะนั้ น
การออกแบบเว็บไซต์ในแต่ล ะหน้าควรที่จ ะมีรู ปแบบ สไตล์ของกราฟิก ระบบเนวิเกชั่น (Navigation)
และโทนสีที่มีความคล้ายคลึงกันตลอดทั้ง เว็บไซต์
3. ความเป็นเอกลักษณ์ (Identity)
ในการออกแบบเว็บ ไซต์ ต้ องค านึง ถึ ง ลัก ษณะขององค์ ก รเป็น หลัก เนื่ อ งจากเว็ บไซต์จะ
สะท้อนถึงเอกลักษณ์ และลัก ษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผ ล
ต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่ เรากลั บ
เลือกสีสันและกราฟิก มากมาย อาจทาให้ผู้ใช้คิดว่าเป็นเว็บ ไซต์ ของสวนสนุก ซึ่ง ส่งผลต่ อความเชื่ อ ถื อ
ขององค์กรได้
4. เนื้อหา (Useful Content)
ถือเป็นสิ่งสาคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูร ณ์และได้รับ การปรับปรุง พั ฒ นา
ให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและเนื้ อหาที่ผู้ใช้ ต้องการให้ถู กต้อ งและสมบูร ณ์ เนื้อหาที่
สาคัญที่สุดคือเนื้อหาที่ ที มผู้ พัฒนาสร้างสรรค์ ขึ้น มาเอง และไม่ไปซ้ากับเว็ บอื่น เพราะจะถือเป็ น สิ่ ง ที่
ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็นเว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ท ราบ
ว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่จาเป็นต้องกลับมาใช้งานลิงค์เหล่านั้นอีก
5. ระบบเนวิเกชั่น (User-Friendly Navigation)
เป็นส่วนประกอบที่ มีค วามสาคั ญต่ อ เว็ บไซต์ มาก เพราะจะช่ วยไม่ ใ ห้ผู้ ใช้ เกิ ด ความสั บ สน
ระหว่างดูเว็บไซต์ ระบบเนวิเกชั่นจึงเปรียบเสมือนป้ายบอกทาง ดังนั้นการออกแบบเนวิเกชั่น จึงควร
ให้เข้าใจง่าย ใช้งานได้สะดวก ถ้ามีการใช้กราฟิกก็ควรสื่อความหมาย ตาแหน่งของการวางเนวิเกชั่ น ก็
ควรวางให้ส ม่าเสมอ เช่น อยู่ตาแหน่งบนสุด ของทุก หน้า เป็น ต้น ซึ่งถ้าจะให้ดี เ มื่อ มี เนวิ เกชั่น ที่ เ ป็ น
กราฟิกก็ควรเพิ่มระบบเนวิ เกชั่นที่ เป็นตั วอัก ษรไว้ส่ วนล่างด้ วย เพื่อช่วยอานวยความสะดวกให้กั บ ผู้ ใ ช้
ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบราเซอร์
6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)
 12

ลั ก ษณะที่ น่ า สนใจของเว็ บ ไซต์ นั้ น ขึ้ น อยู่ กั บความชอบส่ ว นบุ ค คลเป็ นส าคั ญ แต่ โ ดยรวมแล้วก็
สามารถสรุปได้ว่าเว็บไซต์ที่น่าสนใจนั้นส่วนประกอบต่างๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบูร ณ์ ไ ม่
มี ร อยหรื อ ขอบขั้ นบั น ได้ ใ ห้เ ห็ น ชนิ ด ตั ว อั กษร อ่า นง่ ายสบายตา มี ก ารเลื อกใช้โ ทนสี ที่เ ข้ ากั นอย่าง
สวยงาม เป็นต้น
7. ความสะดวกของการใช้ในสภาพต่างๆ (Compatibility)
การใช้ ง านของเว็ บ ไซต์ นั้ น ไม่ ค วร มี ข อบจ ากั ด กล่ า วคื อ ต้ อ งสามารถใช้ ง านได้ ดี ใ น
สภาพแวดล้อมที่หลากหลาย ไม่มีการบังคับให้ผู้ ใช้ ต้อ งติ ดตั้ งโปรแกรมอื่นใดเพิ่ มเติ ม นอกเหนือจาก
เว็บบราวเซอร์ ควรเป็นเว็บ ที่ แสดงผลได้ดี ใ นทุ กระบบปฏิบั ติ การ สามารถแสดงผลได้ ในทุ ก ควา ม
ละเอี ย ดหน้ า จอ ซึ่ ง หากเป็ น เว็ บ ไซต์ ที่ มีผู้ ใ ช้ บ ริ ก ารมากและกลุ่ มเป้ า หมายหลากหลายควรให้
ความสาคัญกับเรื่องนี้ให้มาก
8. ความคงที่ในการออกแบบ (Design Stability)
ถ้าต้องการให้ผู้ใช้งานรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสาคัญ กั บ
การออกแบบเว็บไซต์เป็นอย่างมาก ต้องออกแบบวางแผนและเรียบเรีย งเนื้ อหาอย่างรอบคอบ ถ้าเว็บ
ที่จัดทาขึ้นอย่างลวก ๆ ไม่มีมาตรฐานการออกแบบและระบบการจัด การข้อมูล ถ้ามีปัญหามากขึ้นอาจ
ส่งผลให้เกิดปัญหาและทาให้ผู้ใช้หมดความเชื่อถือ
9. ความคงที่ของการทางาน (Function Stability)
ระบบการทางานต่า ง ๆ ในเว็บไซต์ค วรมี ความถูก ต้ องแน่น อน ซึ่งต้องได้รับ การออกแบบ
สร้างสรรค์และตรวจสอบอยู่เ สมอ ตัวอย่าง เช่น ลิงค์ต่างๆ ในเว็บไซต์ ต้องตรวจสอบว่ายัง สา มารถ
ลิงค์ข้อมูลได้ถู กต้ องหรือ ไม่ เพราะเว็บไซต์อื่น อาจมีการเปลี่ยนแปลงได้ ตลอดเวลา ปัญหาที่เกิด จาก
ลิงค์ ก็คือ ลิงค์ขาด ซึ่งพบได้บ่อยเป็นปัญหาที่สร้างความราคาญกับผู้ใช้เป็นอย่างมาก
ขั้นตอนการสร้างเว็บไซต์
ขั้นตอนที่ 1 การวางแผนการจัดทาเว็บไซต์
เป็ น ขั้ น ตอนแรกของการออกแบบเว็ บ เนื่ อ งจากเราต้ อ งก าหนดชื่ อ เรื่ อ ง เนื้ อ หา และ
รายละเอียดของเว็บที่เราจะจัดทาเพื่อให้ เห็นมุ มมองคร่าว ๆ ก่อนจะลงมือสร้างเว็บไซต์ นอกจากนี้เรา
ยังต้องทาการแบ่งเนื้ อหาเป็น หมวดหมู่ต่า ง ๆ ตามลาดับก่อน-หลัง เพื่อให้ง่ายต่อการจั ดทาโคร งร่ า ง
ของเว็บ
 13

ขั้นตอนที่ 2 การกาหนดโครงสร้างของเว็บ
เป็นขั้นตอนในการกาหนดผัง ของเว็บ เพื่อให้ทราบองค์ประกอบทั้งหมดของเว็บ ตัวอย่างดั ง
รูป

ข้อสังเกต
1. หน้าแรกของเว็ บ หรือโฮมเพจ จะต้องชื่อ index ส่วนนามสกุล ให้ ใส่ ตามลั กษณะของ
ภาษาที่ใช้ในการสร้างเว็บ
2. การตั้งชื่อเว็บ เพจแต่ล ะหน้าเวลาให้ กาหนดชื่อ เป็นภาษาอัง กฤษตามด้ ว ยนามสกุ ล ของ
ภาษาที่เราสร้างเว็บ เช่น index.html, gallery.html, contact.html เป็นต้น
ขั้นตอนที่ 3 การกาหนดการเชื่อมโยงเว็บเพจ
การกาหนดการเชื่อมเว็บ เพจ เป็นการกาหนดความสั มพั นธ์ข องการเชื่อ มโยงในแต่ล ะหน้ า
เว็บเพื่อให้สามารถกลับไปกลับ มาระหว่างหน้าต่าง ๆ ได้ โดยแต่ละไฟล์จะมีความสั มพันธ์กัน ตัวอย่าง
ดังรูป

ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์
1. การสร้างโฟลเดอร์
การสร้างโฟลเดอร์ใ ห้ส ร้า งเป็น ชื่ อหน่ วยงาน / เรื่องนั้นๆ ควรใช้ตัวอั ก ษร ภาษาอั ง กฤษ
ตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9
 14

2. การตั้งชื่อไฟล์
การตั้งชื่อไฟล์ให้ตั้งชื่อและนามสกุลไฟล์เป็น ตัวอัก ษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับ
ตัวเลข 0-9 หรือเครื่องมือขี ดลบ/ขี ดล่า ง และตั้งชื่อไฟล์ ให้ ตรงกับ เรื่อ งนั้น ๆ เช่น gallery.html คือ
ภาพบรรยากาศ, contact.html คือ ติดต่อเรา เป็นต้น
ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์

ส่วนประกอบของเว็บไซต์ที่ดี
โครงสร้างของเว็บไซต์โดยจะมีส่วนหลัก ๆอยู่ด้วยกันทั้งหมด 3 ส่วนหลัก ๆ ดังนี้
1. ส่วนหัวของหน้า (Page Header)
เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สาคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึง ดู ด
ผู้ ช มให้ ติ ด ตามเนื้ อ หาภายในเว็ บ ไซต์ มั ก ใส่ ภ าพกราฟิ ก เพื่ อ สร้ า งความประทั บ ใจ ส่ ว นใหญ่
ประกอบด้วย
- โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ค วรมี เป็นตัวแทนของเว็บไซต์ ได้ เป็น อย่างดี และยังทาให้
เว็บน่าเชื่อถือ
- ชื่อเว็บไซต์ (Name)
- เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์
2. ส่วนของเนื้อหา (Page Body)
เป็ น ส่ ว นที่ อ ยู่ ต อนกลางของหน้ า ใช้ แ สดงข้ อ มู ล เนื้ อ หาของเว็ บ ไซต์ ซึ่ ง ประกอบด้ ว ย
ข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ ใ น
ส่วนนี้ด้วย
สาหรับส่วนเนื้อหาควรแสดงใจความสาคั ญที่เป็น หัวเรื่ องไว้ บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบ
ตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ
3. ส่วนท้ายของหน้า (Page Footer)
เป็นส่วนที่อยู่ด้านล่า งสุ ดของหน้า มักวางระบบนาทางที่ เ ป็นลิ งค์ ข้อ ความง่าย ๆ และอาจ
แสดงข้อมูลเพิ่มเติมเกี่ยวกั บเนื้อหาภายในเว็บ ไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์,
 15

วิธีการติดต่อ กับ ผู้ดู แลเว็บ ไซต์, คาแนะนาการใช้ เว็ บ ไซต์ เป็นต้น โดยปกติส่วนหัว และส่ว นท้ า ยมั ก
แสดงเหมือนกันในทุกหน้าของเว็บเพจ
ขั้นตอนที่ 6 การสร้างเว็บเพจ
เมื่อจัดวางองค์ประกอบของเว็บแต่ละหน้าแล้ว ต่อไปคือขั้นตอนการเขียนเว็บด้วยโปรแกรม
ภาษา HTML เพื่อกาหนดให้แ ต่ล ะหน้า เว็ บ เพจนาเสนอข้อ ความ รูปภาพ วีดีโอ และเสียง ให้อยู่ใ น
รูปแบบการที่ต้องการ
ขั้นตอนที่ 7 การลงทะเบียนขอพื้นที่เว็บ ไซต์
เมื่อทาการออกแบบและสร้างเว็บไซต์เ สร็จแล้ว ขั้นตอนต่อไป คือ การเผยแพร่เว็บไซต์สู่โ ลก
ของอินเทอร์เน็ตให้คนอื่นเข้ามาเยี่ย มชม วิธีการ คือ การนาเว็บไซต์ไปฝากกับผู้ให้บริการพื้นที่เว็ บ ไซต์
ทั้งแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่เว็บไซต์ฟรี

ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์
เมื่อเราทาการสมัครบริการพื้นที่ฝากเว็บแล้ว ขั้นตอนต่อไป คือการอัพโหลดไฟล์เว็บไซต์ ข อง
เราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็ บซึ่ง อาจจะทาการอั พโหลดผ่านเว็บบราวเซอร์เ ว็บที่ใ ห้บ ริ ก าร
หรือการอัพโหลดด้วยโปรแกรม เช่น CuteFTP, Filezilla, WS_FTP เป็นต้น เพื่อให้ผู้คนได้เ ข้า เยี่ ย ม
ชมโดยสามารถดูในเว็บไซต์ของเราผ่านเครือข่ายอินเทอร์เน็ ต
ขั้นตอนที่ 9 การเรียกดูเว็บไซต์
เมื่อเราทาการอัพโหลดไฟล์ เว็บ ไซต์ ของเราขึ้น บนเว็บไซต์ ที่ให้ บริการพื้นที่ ฝากเว็บแล้ว เรา
สามารถเปิ ด ดู เ ว็ บ ไซต์ ข องเราผ่ า นโปรแกรมเว็ บ บราวเซอร์ เช่ น Internet Explorer, Mozilla
Firefox, Google Chrome เป็นต้น โดยการพิมพ์ที่อยู่เว็บไซต์ตรง Address Bar
 16
เว็บเพจตัวอย่างที่ยอดเยี่ยม
 17
บรรณานุกรม
นายพรชัย สงอนปราง. (ม.ป.ป). หน่วยที่ 1 พื้นฐานการสร้างเว็ปไซต์. สืบค้นเมื่อ วันที่ 15 กรกฎาคม 2565,
เข้าถึงได้จาก หน่วยที่ 1 พื ้นฐานการสร้ างเว็บไซต์ - E-LearningKruJames (google.com)

Thaiall.com.//(๑๑ มีนาคม ๒๔๔๓).//ตัวอย่างเว็บเพจ (Web page) ที่ยอดเยี่ยม./

http://www.thaiall.com/learn/htmsam.htm