ความหมายและความสำคัญ
HTML ย่อมาจาก Hyper Text Markup Language คือภาษาคอมพิวเตอร์ (บางที่จัดเป็นแค่คำสั่งทางคอมพิวเตอร์) ที่ใช้ในการแสดงผลของเอกสารบนเว็บไซต์ หรือที่เราเรียกกันว่าเว็บเพจ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้ หรือที่เรียกว่า HTML Application
HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยสามารถใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus, Visual Studio Code หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น DreamWeaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ส่วนการเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม web browser ในการแสดงผล
เว็บเพจ (Web Page) หมายถึง เอกสารที่ประกอบไปด้วยข้อมูลที่เป็นอักษร เสียง และภาพต่างๆ ที่บรรจุในแฟ้มเอกสารแต่ละหน้าของเวิลด์ไวด์เว็บ (WWW) ที่เปิดอ่านจากโปรแกรม Web Browser
โฮมเพจ (HomePage) หมายถึง เว็บเพจหน้าแรกของเว็บไซต์ ข้อกำหนดที่เป็นมาตรฐานต้องมีชื่อไฟล์ว่า index.html หรือ index.htm
เว็บไซต์ (Website) หมายถึง ตำแหน่งที่อยู่ของเว็บเพจบนระบบอินเทอร์เน็ต ตัวอย่าง เช่น เว็บไซด์ของมหาวิทยาลัยนเรศวร ตำแหน่งที่อยู่ของเว็บ คือ www.nu.ac.th เป็นต้น
Web Browser หมายถึง โปรแกรมใช้ในการแสดงผลภาษา HTML ให้แสดงในรูป World Wide Web ของอินเทอร์เน็ต เช่น Chromium, Google Chrome, Microsoft Edge, Opera, Brave, Mozilla Firefox, Safari, Mi Browser และ Samsung Internet เป็นต้น
หลักการและขั้นตอนวิธีการวิเคราะห์ปัญหา
เมื่อพูดถึงการสร้างเว็บไซต์ หลายคนอาจนึกถึงแต่การใช้โปรแกรม Photoshop เพื่อออกแบบ สร้างภาพกราฟิกสำหรับตกแต่ง และใช้โปรแกรมสร้างเว็บไซต์อย่าง Dreamweaver เพื่อจัดหน้าเว็บเพจ แต่ความจริงแล้วงานดังกล่าวเป็นเพียงส่วนหนึ่งของกระบวนการพัฒนาเว็บไซต์ทั้งหมดเท่านั้น เพราะหากคุณต้องการเว็บไซต์ที่ตรงกับวัตถุประสงค์และประสบความสำเร็จ ก็จำเป็นจะต้องมีการเตรียมการที่ดี ทำงานอย่างเป็นขั้นตอน ตลอดจนพิจารณาถึงปัจจัยต่างๆที่เกี่ยวข้องอย่างรอบด้าน เช่นเดียวกับการพัฒนาโครงการประเภทอื่นๆ
การสร้างเว็บไซต์ที่มีคุณภาพมีองค์ประกอบที่เกี่ยวข้องอยู่มากมาย ซึ่งเราจะต้องหาข้อมูล วิเคราะห์ และตัดสินใจก่อนที่จะถึงขั้นลงมือทำจริง ซึ่งหลักการในการวิเคราะห์และพัฒนาเว็บไซต์ดังนี้
กำหนดเป้าหมายและวางแผน
ในการพัฒนาเว็บไซต์เราควรกำหนดเป้าหมาย และวางแผนไว้ล่วงหน้า เพื่อให้การทำงานในขั้นต่อๆไปมีแนวทางที่ชัดเจน เรื่องหลักๆที่เราควรทำในขั้นตอนนี้ประกอบด้วย
– กำหนดวัตถุประสงค์ของเว็บไซต์ เพื่อให้เห็นภาพที่ชัดเจนว่าเว็บไซต์นี้ต้องการนำเสนอหรือต้องการให้เกิดผลอะไร เช่น เป็นเว็บไซต์สำหรับให้ข้อมูลหรือขายสินค้า ซึ่งวัตถุประสงค์นี้จะเป็นตัวกำหนดรายละเอียดอื่นๆที่จะตามมา เช่นโครงสร้างของเว็บไซต์ รวมถึงลักษณะหน้าตา และสีสันของเว็บเพจ
– กำหนดกลุ่มผู้ชมเป้าหมาย เพื่อจะได้รู้ว่าผู้ชมหลักของเราคือใคร และออกแบบเว็บไซต์ให้ตอบสนองความต้องการหรือโดนใจผู้ชมกลุ่มนั้นให้มากที่สุด ไม่ว่าจะเป็นการเลือกเนื้อหา โทนสี กราฟิก เทคโนโลยีที่นำมาสนับสนุน และอื่นๆ
– เตรียมแหล่งข้อมูล เนื้อหาหรือข้อมูลคือสาระที่แท้จริงของเว็บไซต์ เราต้องรู้ว่าข้อมูลที่จำเป็นต้องใช้จะมาจากแหล่งใดได้บ้าง เช่น ถ้าเป็นเว็บเพื่อการศึกษา ใครที่จะเป็นผู้ให้ข้อมูล หรือถ้าเป็นเว็บข่าวสาร ข่าวสารนั้นจะมาจากแหล่งใด มีลิขสิทธิ์หรือไม่
– เตรียมทักษะหรือบุคลากร การสร้างเว็บไซต์ต้องอาศัยทักษะหลายๆด้าน เช่น ในการเตรียมเนื้อหา ออกแบบกราฟิก เขียนโปรแกรม และการดูแลเว็บเซิร์ฟเวอร์ เป็นต้น ซึ่งถ้าเป็นเว็บไซต์ขนาดใหญ่อาจจะต้องใช้บุคลากรเป็นจำนวนมาก แต่สำหรับเว็บไซต์เล็กๆ ที่ต้องดูแลเพียงคนเดียว เราก็จะต้องศึกษาหาความรู้ในเรื่องนั้นๆเพื่อเตรียมพร้อมเอาไว้
– เตรียมทรัพยากรต่างๆที่จำเป็น เช่น โปรแกรมสำหรับสร้างเว็บไซต์ โปรแกรมสำหรับสร้างกราฟิก ภาพเคลื่อนไหว และมัลติมิเดีย โปรแกรมอื่นๆที่ต้องใช้ การจดทะเบียนโดเมนเนม ตลอดจนการเตรียมหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting)
วิเคราะห์และจัดโครงสร้างข้อมูล
ขั้นตอนนี้จะเป็นการนำข้อมูลต่างๆที่รวบรวมได้จากขั้นแรก ไม่ว่าจะเป็น วัตถุประสงค์ของเว็บไซต์ คุณลักษณะ ข้อจำกัดของกลุ่มผู้ชมเป้าหมาย รวมทั้งเนื้อหาหลักของเว็บไซต์ นำมาประเมิน วิเคราะห์ และจัดระบบ เพื่อให้ได้โครงสร้างข้อมูล และข้อกำหนด ซึ่งจะใช้เป็นกรอบสำหรับการออกแบบและดำเนินการในขั้นต่อๆไป ผลที่ได้รับจากขั้นนี้ควรประกอบไปด้วย
– แผนผังโครงสร้างของเว็บไซต์ ลำดับการนำเสนอ สารบัญ หรือผังงาน
– ระบบนำทางหรือเนวิเกชั่น (navigation) ซึ่งผู้ชมจะใช้สำหรับเปิดเข้าไปยังส่วนต่างๆของเว็บไซต์ ตัวอย่างเช่น โครงสร้างและรูปแบบของเมนู
– องค์ประกอบต่างๆที่จะนำมาใช้ในเว็บเพจมีอะไรบ้าง เช่น รูปภาพและภาพกราฟิก, เสียง, วีดีโอ, มัลติมีเดีย, แบบฟอร์ม ฯลฯ อะไรบ้างที่บราวเซอร์ของผู้ชมสนับสนุน และอะไรบ้างที่ต้องอาศัยโปรแกรมเสริม
– ข้อกำหนดเกี่ยวกับลักษณะหน้าตาและรูปแบบของเว็บเพจ
– ข้อกำหนดของโปรแกรมภาษาสคริปต์หรือเว็บแอพพลิเคชั่น และฐานข้อมูลที่ใช้ในเว็บไซต์
– คุณสมบัติของเว็บเซิร์ฟเวอร์ รวมถึงข้อจำกัด และบริการเสริมต่างๆที่มีให้
ออกแบบเว็บเพจและเตรียมข้อมูล
เป็นขั้นตอนการออกแบบเค้าโครงหน้าตา และลักษณะด้านกราฟิกของหน้าเว็บเพจ เพื่อให้ผู้ชมเกิดอารมณ์ความรับรู้ต่อเว็บเพจตามที่เราต้องการ ดังนั้นผู้ที่ทำหน้าที่นี้จึงควรมีความสามารถทางด้านศิลปะพอสมควร โปรแกรมที่เหมาะจะใช้ในการออกแบบคือ Adobe Photoshop หรือ Macromedia Fireworks ซี่งผลที่ได้จะประกอบด้วยไฟล์กราฟิกต่างๆ ที่ใช้บนเว็บเพจ เช่น โลโก้, ภาพพื้นหลัง, ปุ่มเมนู, ไอคอนที่เป็นหัวคอลัมน์ และแบนเนอร์โฆษณา
การออกแบบเว็บเพจยังรวมไปถึงการกำหนดสีสัน และรูปแบบของส่วนประกอบต่างๆที่ไม่ใช่ภาพกราฟิก เช่น ฟอนต์ ขนาด และสีข้อความ สีพื้นบริเวณที่ว่าง สีและลวดลายของเส้นกรอบ เป็นต้น นอกจากนี้องค์ประกอบเสริมอื่นๆของเว็บเพจก็ต้องถูกเตรียมไว้ด้วย เช่น ภาพเคลื่อนไหว Flash และโปรแกรม JavaScript ที่ใช้โต้ตอบกับผู้ชม หรือเล่นเอฟเฟ็คต์ต่างๆ
ในส่วนของเนื้อหา ขั้นตอนนี้จะเป็นการนำเนื้อหาที่เลือกไว้มาปรับแก้ และตรวจทานความถูกต้อง เพื่อให้พร้อมสำหรับจะนำไปใส่เว็บเพจแต่ละหน้าในขั้นตอนถัดไป
ลงมือสร้างและทดสอบ
เป็นขั้นตอนที่เว็บเพจจะถูกสร้างขึ้นมาจริงทีละหน้าๆ โดยอาศัยเค้าโครง และองค์ประกอบกราฟิกตามที่ออกแบบไว้ เนื้อหาต่างๆจะถูกนำมาใส่และจัดรูปแบบ ลิ้งค์และระบบนำทางถูกสร้าง องค์ประกอบเสริมต่างๆถูกวางเข้าที่ อย่างไรก็ตาม เมื่อลงมือสร้างเว็บเพจจริงเราอาจพบว่าสิ่งที่ออกแบบไว้แล้ว บางอย่างไม่เหมาะสม หรือควรได้รับการปรับแต่ง ก็สามารถทำได้ โปรแกรมที่ใช้ในขั้นตอนนี้ก็คือโปรแกรมสำหรับสร้างเว็บไซต์ เช่น Macromedia Dreamweaver
เว็บไซต์ที่สร้างขึ้นมาควรได้รับการทดสอบก่อนที่จะนำออกเผยแพร่ ไม่ว่าจะเป็นความถูกต้องของเนื้อหา การทำงานของลิงค์และระบบนำทาง ตรวจหาความผิดพลาดของโปรแกรมสคริปต์และฐานข้อมูล นอกจากนี้ก็ควรทดสอบโดยใช้สภาพแวดล้อมที่เหมือนกับของกลุ่มผู้ชมเป้าหมาย เช่น เวอร์ชั่นของบราวเซอร์ ความละเอียดของจอภาพและความเร็วที่เชื่อมต่อกับอินเตอร์เน็ต เพื่อดูว่าผู้ชมเป้าหมายสามารถชมเว็บไซต์ได้อย่างสมบูรณ์และมีประสิทธิภาพหรือไม่
เผยแพร่และส่งเสริมให้เป็นที่รู้จัก
โดยทั่วไปการนำเว็บไซต์ขึ้นเผยแพร่บนอินเตอร์เน็ตจะทำด้วยการอัพโหลดไฟล์ทั้งหมด คือ HTML และไฟล์อื่นๆที่เกี่ยวข้อง ขึ้นไปเก็บบนเซิร์ฟเวอร์ที่เราเปิดบริการไว้ การอัพโหลดเว็บไซต์ หรือบางครั้งเรียกว่า “พับลิช (Public)” อาจทำด้วยโปรแกรมสร้างเว็บไซต์เอง ซึ่งมีคุณสมบัตินี้ในตัว หรืออาจจะใช้โปรแกรมยูทิลิตี้ (Utility) ประเภท FTP เช่น CuteFTP, FileZilla, WS_FTP หรือใช้เครื่องมืออื่นบนเว็บเซิร์ฟเวอร์ก็ได้
หลังจากนั้นเว็บไซต์ควรได้รับการทดสอบอีกครั้ง เพื่อตรวจหาปัญหาบางอย่างที่ไม่สามารถทดสอบบนเครื่องคอมพิวเตอร์ของเราได้ เช่น การลิ้งค์ของเว็บเพจกับเว็บไซต์อื่น และการทำงานของโปรแกรมสคริปต์กับฐานข้อมูล ซึ่งอาจทำไม่ได้บนเครื่องของเรา หรือบนเว็บเซิร์ฟเวอร์อาจมีสภาพแวดล้อมที่ต่างออกไป
เว็บไซต์ที่ประสบความสำเร็จ นอกจากต้องมีเนื้อหาที่ดี มีการวางโครงสร้างและการออกแบบที่เหมาะสมแล้ว ยังต้องได้รับการโฆษณา และส่งเสริมให้เป็นที่รู้จักในกลุ่มผู้ชมเป้าหมายหรือในวงกว้างออกไปอีกด้วย การส่งเสริมนี้มีกลยุทธ์ที่ทำได้หลายวิธี ซึ่งไม่จำเป็นต้องใช้งบประมาณจำนวนมากเสมอไป โดยสามารถทำได้ตั้งแต่แบบง่ายๆ คือการแลกเปลี่ยนลิงค์หรือแบนเนอร์ ประกาศบนเว็บบอร์ดสาธารณะ การส่งอีเมล์ เพิ่มข้อมูลในเสิร์ชเอ็นจิ้น (Search Engine) หรือเว็บไดเร็กทอรี่ เรื่อยไปจนถึงแบบที่ต้องใช้งบประมาณมากขึ้น เช่น การจัดงานเปิดตัว การลงโฆษณาบนเว็บไซต์อื่น ในสิ่งพิมพ์ หรือในวิทยุโทรทัศน์ เป็นต้น
ดูแลและปรับปรุงอย่างต่อเนื่อง
เว็บไซต์ที่เผยแพร่ออกไปแล้วเราไม่ควรทิ้งขว้าง แต่ควรดูแลโดยตลอด ซึ่งหน้าที่นี้ครอบคลุมหลายเรื่อง ตั้งแต่การตรวจสอบเว็บเซิร์ฟเวอร์ว่าไม่หยุดทำงานบ่อยๆ ลิงค์ที่เชื่อมโยงไปภายนอกยังคงใช้ได้หรือไม่ (เนื่องจากเว็บไซต์นั้นอาจถูกปิด) คอยตอบคำถามที่มีผู้ฝากไว้บนเว็บเพจ ถ้าเป็นเว็บข่าวสารก็ต้องปรับปรุงข้อมูลให้ทันสมัยอยู่ตลอดเวลา ถ้ามีการใช้ฐานข้อมูลก็ต้องแบ็คอัพข้อมูลอย่างสม่ำเสมอ
นอกจากนั้นเราควรตรวจสอบสถิติของการเข้าชมเป็นระยะๆ ซึ่งเป็นบริการเสริมที่เว็บเซิร์ฟเวอร์มักมีให้ เช่น จำนวนผู้ชม สถิติว่าเว็บเพจใดมีผู้เข้าชมมากหรือเป็นที่นิยม
หลังจากที่เว็บไซต์ได้รับการเผยแพร่ไประยะหนึ่ง เราควรปรับปรุงเพื่อให้ผู้ชมรู้สึกว่ามีความเปลี่ยนแปลง มีความสดใหม่ ทันสมัย โดยอาจนำข้อมูลสถิติที่รวบรวมไว้มาพิจารณาประกอบด้วย การเปลี่ยนแปลงทำได้ทั้งในส่วนของเนื้อหา โครงสร้างเว็บไซต์ การออกแบบหน้าตา และการนำเทคโนโลยีใหม่ๆเข้ามาเสริม
ความรู้เบื้องต้นก่อนการสร้างเว็บเพจ
รูปแบบโครงสร้างของเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ สามารถทำได้หลายแบบ ขึ้นอยู่กับลักษณะของข้อมูล ความถนัดของผู้ออกแบบ ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้
1. โครงสร้างของเว็บไซต์แบบเรียงตามลำดับ (Sequential Structure)
เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราว ตามลำดับ เช่น การเรียงลำดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงค์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดำเนินเรื่องในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลัง เป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ทำให้เสียเวลา ในการเข้าสู่เนื้อหา
2. โครงสร้างของเว็บไซต์แบบลำดับขั้น (Hierarchical Structure)
เป็นโครงสร้างที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็นส่วนต่างๆ และมีรายละเอียดย่อย ๆ ในแต่ละส่วนลดหลั่นกันมาในลักษณะแนวคิดเดียวกับ แผนภูมิองค์กร จึงเป็นการง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหา ลักษณะเด่นคือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลงล่าง
3. โครงสร้างของเว็บไซต์แบบตาราง (Grid Structure)
โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยง ซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ เช่น ในการศึกษาข้อมูลประวัติศาสตร์ สมัยสุโขทัย อยุธยา ธนบุรี และรัตนโกสินทร์ โดยในแต่ละสมัยแบ่งเป็นหัวข้อย่อยเหมือนกันคือ การปกครอง ศาสนา วัฒนธรรม และภาษา ในขณะที่ผู้ใช้กำลังศึกษาข้อมูลทางประวัติศาสตร์เกี่ยวกับ การปกครองในสมัยอยุธยา ผู้ใช้อาจศึกษาหัวข้อศาสนาเป็นหัวข้อต่อไปก็ได้ หรือจะข้ามไปดูหัวข้อการปกครองในสมัยรัตนโกสินทร์ก่อนก็ได้เพื่อเปรียบเทียบลักษณะข้อมูลที่เกิดขึ้นคนละสมัย
4. โครงสร้างเว็บไซต์แบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วยตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหาภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้
