เอกสารประกอบการสอน รายวิชาหลักการออกแบบเว็บ

96 2.4 ผู้เรียนแบ่งกลุ่มร่วมกนั วเิ คราะห์เปรียบเทยี บเน้ือหา ก่อนผู้สอนจะสรุปและ ยกตัวอย่างเปรียบเทยี บ 2.5 มอบหมายให้ผู้เรียนค้นหาเพ่ิมเตมิ สือ่ การเรียนการสอน 1. เอกสารประกอบการสอน 2. ส่อื อเิ ลก็ ทรอนกิ ส์ 3. หนังสอื ตารา เอกสารทเ่ี ก่ยี วข้อง การวดั ผลและประเมนิ ผล 1. สงั เกตการตอบคาถามและต้งั คาถามของผู้เรียนในระหว่างการบรรยาย อภิปราย และซกั ถาม 2. สงั เกตความต้งั ใจในการติดตามเน้อื หาบทเรยี น 3. สงั เกตการให้ความร่วมมอื ในการอภปิ รายกลุ่ม 4. สงั เกตการให้ความร่วมมอื ในการศกึ ษาโดยลาพัง

97 บทที่ 4 การวางแผนเว็บไซต์ การออกแบบเวบ็ ไซต์ท่มี ปี ระสทิ ธภิ าพน้ันจาเป็นต้องมีการวางแผนเวบ็ ไซต์ท่ชี ัดเจน เน่ื อ งจ าก ก าร พั ฒน า เว็บ ไ ซ ต์ใ น ปั จจุ บั น มี ความซั บ ซ้ อ น แล ะ ป ร ะ ก อ บ ไ ป ด้ วย ทีมงา น ผู้ออกแบบเวบ็ ไซต์หลายสว่ น ผู้ออกแบบเวบ็ ไซต์จึงจาเป็นต้องทราบถึงกระบวนการพัฒนา เวบ็ ไซต์ การกาหนดคุณลักษณะของเวบ็ ไซต์ สถาปัตยกรรมสารสนเทศ การสร้างและ ทดสอบเวบ็ ไซต์ การเผยแพร่เวบ็ ไซต์ การตดิ ตาม การประเมนิ และการบารงุ รักษาเวบ็ ไซต์ กระบวนการพฒั นาเว็บไซต์ การวางแผนเวบ็ ไซต์ (Web site planning) คือ การวางแผนการพัฒนาเวบ็ ไซต์ท่ี ครอบคลมุ ทุกข้นั ตอน โดยมีความซับซ้อนและมีกระบวนการแยกย่อยอีกมากมายข้นึ อยู่กบั ความต้องการ (Requirement) หรือ ความซบั ซ้อน (Complexity) ของเวบ็ ไซต์ ในการวิเคราะห์และออกแบบเวบ็ ไซต์ ควรทราบความต้องการของผู้ออกแบบเวบ็ หรือผู้ท่ตี ้องการส่งสารสนเทศไปยังผู้ใช้เวบ็ ว่าต้องการนาเสนอเวบ็ ไปในทศิ ทางใด เช่น มี การบริการผ่านทางเวบ็ ไซต์ มีการขายสินค้าผ่านทางเว็บไซต์ มีการสร้างเครือข่ายสังคม ออนไลน์ (Social Network) ต้องการจูงใจลูกค้าใหม่ๆ การเยียวยาลูกค้าเก่า หรือ ต้องการ เผยแพร่ข้อมูลโดยเฉพาะ (Disseminate information) เป็นต้น ปัจจุบันการวางแผนเว็บไซต์มีความซับซ้อนและมีทมี งานผู้พัฒนาหลายส่วน โดย ทมี งานจะต้องประชุมและระดมความคิดในการเลือกตัวแบบ (Model) หรือ กรอบการ พัฒนา (Framework) เวบ็ ไซต์ เพ่ือท่จี ะนามาใช้เป็นแบบแผนในการดาเนินงานการพัฒนา เวบ็ ไซต์ให้มีประสทิ ธิภาพและตรงตามเป้ าหมายท่ีวางไว้ โดยบทน้ีจะนาเสนอตัวแบบการ พัฒนาเวบ็ ไซต์ 2 ตัวแบบ คือ กระบวนการพัฒนาเวบ็ ไซต์ (The Site Development Process) ตามแนวคิดของ Patrick J. Lynch และ Sarah Horton และ วงจรชีวิตโครงการ พัฒนาเวบ็ ไซต์ (Web development project lifecycle) ตามแนวคดิ ของ Joel Sklar ดังน้ี

98 1. กระบวนการพัฒนาเวบ็ ไซต์ (The Site Development Process) ตามแนวคิดของ Patrick J. Lynch และ Sarah Horton1 โดยมีการกล่าวถึงการพัฒนาเวบ็ ไซต์ขนาดใหญ่ท่ี จะต้องให้ความสนใจเก่ียวกบั กระบวนการพัฒนา เน่ืองจากกระบวนการพัฒนาน้ันจะต้องมี ความชดั เจนในด้านเป้ าหมาย แนวคิด งบประมาณ ทมี งาน และการประชาสมั พันธ์ เวบ็ ไซต์ ท่ีขาดการพิจารณาเป้ าหมายและกระบวนการท่ีดีน้ัน จะนาไปสู่การเป็ นเว็บไซต์กาพร้า (Orphan site) ซ่ึงจะไม่มีผู้สนใจและขาดผู้สนับสนุนและขาดทรัพยากร นอกจากน้ีเวบ็ ไซต์ กาพร้าจะนาไปส่ภู าพลักษณท์ ไ่ี ม่ดขี ององคก์ รด้วย กระบวนการพัฒนาเวบ็ ไซต์ (The Site Development Process) ตามแนวคิดของ Patrick J. Lynch และ Sarah Horton ประกอบไปด้วย 6 ข้นั ตอน ดังน้ี 1.1 การนิยามและการวางแผนเวบ็ ไซต์ (Site definition and planning) 1.2 สถาปัตยกรรมสารสนเทศ (Information architecture) 1.3 การออกแบบเวบ็ ไซต์ (Site design) 1.4 การสร้างเวบ็ ไซต์ (Site construction) 1.5 การทาการตลาดให้แก่เวบ็ ไซต์ (Site marketing) 1.6 การตดิ ตาม การประเมนิ และการบารุงรักษาเวบ็ ไซต์ (Tracking Evaluation and Maintenance) 2. วงจรชีวิตโครงการพัฒนาเวบ็ ไซต์ (Web development project lifecycle) ตาม แนวคิดของ Joel Sklar2 ประกอบไปด้วย 7 ข้นั ตอน ดังน้ี 2.1 การศึกษาความต้องการและระบุขอบเขตของเวบ็ ไซต์ (Requirements and specifications) 2.2 การออกแบบสารสนเทศท่ีจะถ่ายทอด และการทาอนุกรมวิธาน (Information design and taxonomy creation) 2.3 การออกแบบกราฟิ กและการสร้างแบบของเวบ็ ไซต์ (Graphic design and page template creation) 2.4 การสร้างเว็บไซต์และพัฒนาเน้ือหา (Construction and content development) 2.5 ทดสอบคุณภาพของเวบ็ ไซต์และวดั ความพึงพอใจของผู้ใช้เบ้ืองต้นก่อนการ เผยแพร่จริง (Quality assurance and user testing) 1 The Site Development Process http://webstyleguide.com/wsg3/1-process/7-development- process.html 2 Principles of Web Design, Sixth Edition http://www.joelsklar.com/pwd6/chapter3.html

99 2.6 การเผยแพร่เวบ็ ไซตแ์ ละการประชาสมั พันธ์ (Publishing and promotion) 2.7 การบารุงรักษาเว็บไซต์ให้ สามารถทางานได้อย่างถูกต้อง ( Ongoing maintenance) ภาพที่ 4.1 แสดงวงจรชวี ติ โครงการพัฒนาเวบ็ ไซต์ (Web development project lifecycle) ตามแนวคดิ ของ Joel Sklar ทม่ี า: http://www.joelsklar.com/pwd6/chapter3.html จากตัวแบบพัฒนาเว็บไซต์ท้ัง 2 แบบท่ีได้กล่าวไป ยังมีกระบวนการพัฒนา เวบ็ ไซต์รูปแบบอ่ืนๆ อีกมากมาย ข้ึนอยู่กับขนาดของโครงการ งบประมาณ ความรู้ความ เข้าใจของทมี ผู้พัฒนาเวบ็ ไซต์ และ ระยะเวลาในการพัฒนาเวบ็ ไซต์ การกาหนดคุณลกั ษณะของเว็บไซต์ การกาหนดคุณลักษณะของเว็บไซต์ (Website specification) เป็นข้ันตอนแรก ของกระบวนการพัฒนาเว็บไซต์ โดยข้ันตอนน้ีเป็ นการกาหนดเป้ าหมาย (Goals) และ วัตถุประสงค์ (Objectives) ของเวบ็ ไซต์ท่จี ะพัฒนา เพ่ือนามาใช้ในการวางกรอบ กาหนด งบประมาณและทรัพยากรท่จี าเป็นในการพัฒนาเวบ็ ไซต์

100 การวางกรอบการพัฒนาจะต้องกาหนดขอบเขตของเน้ือหา (Scope of the site content) งบประมาณ (Budget) เทคโนโลยีท่จี าเป็ นต้องใช้ (Technology support required) ความคาดหวังของผู้ใช้เวบ็ (Users’ expectations) และระยะเวลาในการ ดาเนินการ โดยอาจมีการกาหนดรายการตรวจสอบดังน้ี 1. ด้านการผลติ (Production) 1.1 ใคร คือ ทีมผู้ผลิต และทีมผู้ผลิตเป็ นทมี ภายในองค์กร (In-house people) หรือเป็นทมี ผู้ผลิตว่าจ้างจากภายนอก (Outsource contractors) หรือเป็นทมี แบบ ผสมผสานท้งั ภายในและภายนอก (Mixed) 1.2 ใคร คือ ผู้ประสานงานกับทมี ผู้ผลิตท่วี ่าจ้างจากภายนอก (Liaison to outside contractors) 1.3 ใครเป็นผู้จัดการกระบวนการ (Process manager) ของโครงการพัฒนา เวบ็ ไซต์ 1.4 ใคร คือ ผู้เช่ียวชาญและรับผดิ ชอบด้านเน้ือหาภายในเวบ็ ไซต์ (Primary content experts) 1.5 ในระยะยาว ใคร คือ ผู้ดูแลเวบ็ ไซต์ (Webmaster) หรือ ผู้แก้ไขเว็บ (Web editor) 1.6 การระบุเป้ าหมายของเน้ือหา (Identifying the content goal) เป็นการ พิจารณาท่สี าคัญท่จี ะกาหนดรูปแบบการนาเสนอเวบ็ ไซต์ ดังน้ี 1.6.1 เวบ็ ไซต์ท่มี ีเน้ือหาป้ ายประกาศ (Billboard) เป็นเวบ็ ไซต์ท่เี น้น การโฆษณาประชาสัมพันธ์แบบทิศทางเดียว (Simplex communication) ไม่เน้นการ ปฏสิ มั พันธอ์ ่นื ๆ กบั ผู้เข้าชมเวบ็ ไซต์ 1.6.2 เวบ็ ไซต์ท่เี น้นการเผยแพร่เน้ือหา (Publishing) เป็นเวบ็ ไซตท์ ่เี น้น ระบบการจัดการเน้ือหา (Content management system: CMS) เช่น เวบ็ ไซต์นาเสนอข่าว เวบ็ ไซตใ์ ห้บริการพจนานุกรมออนไลน์ เป็นต้น 1.6.3 เวบ็ ไซต์ท่มี ีลักษณะเป็นเวบ็ ทา่ (Portal web) เป็นการรวบรวม ข่าวสาร และการบริการต่างๆ ไว้มากมาย 1.6.4 เวบ็ ไซต์ท่มี ีลักษณะสงั คมออนไลน์ (Social networking) เป็นการ แลกเปล่ยี นข้อมลู ข่าวสาร ภาพ ความคิดเหน็ และมกี ารเช่อื มโยงผู้คนเข้าไว้ด้วยกนั 1.6.5 เวบ็ ไซต์ท่มี ีลักษณะเชิงพาณิชย์ (e-Commerce) เป็นเวบ็ ไซต์ท่ี เน้นการนาเสนอสนิ ค้าและบริการ โดยมรี ะบบการชาระเงนิ และการบริการหลงั การขาย

101 2. ด้านเทคโนโลยีทใ่ี ช้ (Technology) 2.1 ระบุระบบปฏิบัติการ (Operating system: OS) เช่น ไมโครซอฟต์ วินโดวส์ (Windows) แมค็ อินทอช (Macintosh) ยูนิกส์ (Unix) ลินุกซ์ (Linux) เป็นต้น และระบุเวบ็ เบราเซอร์ (Web browser) เช่น ไฟร์ฟ็ อกซ์ (Mozilla firefox) อินเทอร์เนต็ เอก็ ซพลอเลอร์ (Internet explorer: IE) ไมโครซอฟต์เอจด์ (Microsoft edge) โครม (Google chrome) ซาฟารี (Safari) โอเปร่า (Opera) เป็นต้น รวมถึงรุ่นข้นั ต่าของเวบ็ เบรา เซอร์ท่ีจาเป็ นท่ีจะสนับสนุนการทางานของเว็บไซต์ท่ีพัฒนาได้ (Minimum version supported) 2.2 ระบุอัตราการรับและส่งข้อมูล (Bandwidth) เฉล่ียของผู้เข้าเย่ียมชม เวบ็ ไซต์ เพ่ือนาไปใช้ในการออกแบบเวบ็ ให้มีเน้ือหา ภาพ หรือวิดีโอ ท่เี หมาะสาหรับอตั รา การรับและส่งข้อมูลของผู้เข้าเย่ียมชมเวบ็ ไซต์ นอกจากน้ีควรระบุว่าเป็นผู้ใช้ภายในองค์กร (Internal audience) หรือ ผู้ใช้ภายนอกองค์กร (Largely external audience) ซ่ึงทาให้ทราบ ถงึ ความสามารถในการควบคุมอตั ราการรับและส่งข้อมลู ในระดบั ใด เทคโนโลยีท่มี ผี ลต่ออตั ราการรับและสง่ ข้อมูล เช่น อเี ธอร์เนต็ (Ethernet 10 Mbps) อีเธอร์เนต็ แบบเร็ว (Fast Ethernet 100 Mbps) ไอเอสดีเอน็ (Integrated service digital network: ISDN) หรือ ดเี อสแอล (Digital subscriber line: DSL) เป็นต้น 2.3 ระบุคุณสมบัติด้านเทคนิคท่จี าเป็ นเพ่ือสนับสนุนเวบ็ ไซต์ให้สามารถ ทางานแบบพลวัตรได้ (Dynamic) เช่น ภาษาจาวาสคริปต์ (Java script) จาวาแอพ็ เพลต็ (Java applets) ซอฟต์แวร์ต่อประสาน (Plug-in) หรือ มีการใช้เทคโนโลยีการรักษาความ ปลอดภยั ภายในเวบ็ ไซต์ (Special security) เป็นต้น 2.4 ระบุช่องทางการส่ือสารส่วนบุคคล เช่น ส่ือสารผ่านทางอีเมลล์ ห้อง สนทนา (Chat room) กระดานสนทนา (Forums) แผนกช่วยเหลอื (Helps desk) หรือ ทาง โทรศัพท์ เป็นต้น 2.5 ระบุถึงการใช้ประโยชน์จากระบบฐานข้อมูล (Database system) เช่น มี การใช้ระบบฐานข้อมูลสาหรับการลอ็ คอิน (Log in) การทาแบบสอบถามออนไลน์ (Questionnaire) การค้นคืนข้อมลู บุคลากร สนิ ค้า หรือบริการจากฐานข้อมูล เป็นต้น 2.6 ระบุเน้ือหาท่มี ีลักษณะเป็นวิดีโอ หรือ เสยี ง เน่ืองจากจะต้องเตรียมใน สว่ นของซอฟต์แวร์หรือเทคโนโลยที ่ชี ่วยให้สามารถแสดงผลได้ถูกต้องบนเวบ็ ไซต์ 3. ด้านแม่ข่ายเวบ็ (Web server support) เป็นการระบุถึงแหล่งท่เี กบ็ เวบ็ ไซต์ท่ี พัฒนาข้นึ เช่น มีการจัดเกบ็ ไว้กับแม่ข่ายเวบ็ ภายในองค์กร (In-house web server) หรือ ฝากเวบ็ ไซต์ไว้กบั ผู้ให้บริการแม่ข่ายเวบ็ (Web hosting) ซ่ึงทมี ผู้พัฒนาเวบ็ ไซต์ควรเลือก

102 แหล่งท่เี หมาะสมกับเทคโนโลยีท่ีจะใช้บนเว็บไซต์ เน้ือท่ีท่ีอนุญาตให้ใช้ (Disk space limitations) การรองรับผู้ใช้จานวนมาก (Statistics on users and site traffic) งบประมาณท่ี มี ความสะดวกในการเข้าไปดูแลรักษาเวบ็ ไซต์ เสถียรภาพทางด้านระบบ (Adequate capacity to meet site traffic demands) และความปลอดภยั 4. การระบุงบประมาณ (Budgeting) อาจประกอบไปด้วย 4.1 ค่าใช้จ้างบุคลากร เช่น ค่าจ้างทีมพัฒนาเฉพาะส่วน ค่าจ้างทมี พัฒนา ประเภทระยะยาว ค่าจ้างผู้ดูแลระบบฐานข้อมูล ค่าจ้างผู้ปรับปรุงเน้ือหาของเวบ็ ไซต์ เป็นต้น 4.2 ค่าอปุ กรณ์ประเภทฮาร์แวร์ ซอฟต์แวร์ และบริการ เช่น ค่าอุปกรณ์เคร่ือง แม่ข่าย ค่าคอมพิวเตอร์ ค่าเช่าบริการเวบ็ แม่ข่าย ค่าบริการสญั ญาณอนิ เทอร์เนต็ เป็นต้น 4.3 ค่าฝึกอบรมบุคลากร เช่น มีการส่งพนักงานไปอบรมเพ่ิมเติมเก่ียวกับ เทคโนโลยีเวบ็ ใหม่ๆ การตลาดออนไลน์ การทาเวบ็ ไซต์ให้เหมาะสมในการค้นหา (Search engine optimization: SEO) หรือ มีการจ้างวทิ ยากรท่เี ช่ียวชาญมาอบรมให้แก่บุคลากร เป็น ต้น 4.4 ค่าจ้างบุคลากรภายนอก เช่น ค้าจ้างท่ปี รึกษา หรือ ค่าจ้างเหมาจ่ายใน การพัฒนา เป็นต้น การกาหนดคุณลักษณะของเว็บไซต์ อาจใช้ แผนภูมิกลุ่มความคิด (Affinity diagram) ในการแลกเปล่ียนความคิดเหน็ จัดกลุ่มความคิด (Organizing concept) และ รวบรวมข้อมูลต่างๆ ทจ่ี าเป็น ทาให้ทมี งานเหน็ ภาพรวมของโครงการพัฒนาเวบ็ โดยการใช้ งานแผนภมู ิกลุ่มความคิด (Affinity diagram) มีข้นั ตอนดงั น้ี 1) รวบรวมสมาชิกและทมี งานท้งั หมด หรือ อาจจัดกลุ่มย่อยๆ ตามลกั ษณะ ความรับผดิ ชอบ 2) ช้แี จงวัตถุประสงคข์ องโครงการพัฒนาเวบ็ ให้สมาชิกทราบ 3) เร่ิมระดมความคิด โดยการให้สมาชิกเขียนวิธีการ เทคนิค เน้ือหา ท่ี เก่ยี วข้องกบั วตั ถุประสงค์ทไ่ี ด้ช้ีแจงลงในกระดาษแผ่นเลก็ ๆ และติดบอร์ด หรือวางบนโตะ๊ ท่ี สมาชิกทกุ คนสามารถมองเหน็ ร่วมกนั ได้ 4) สมาชิกหรือหัวหน้าทมี ปรับสามารถปรับตาแหน่ง จัดเรียง หรือจัดกลุ่ม ของกระดาษ เพ่ือสะดวกต่อการทาความเข้าใจ 5) สามารถปรับแก้ข้อความ เน้ือหา ภายในกระดาษได้ตามความเหมาะสม 6) ระยะเวลาในการระดมความคิดน้ีข้นึ อยู่กบั ข้อตกลงของทมี งาน 7) สดุ ท้ายควรได้ข้อสรุป และรายงานผลให้สมาชกิ ทราบ

103 ภาพที่ 4.2 แสดงแผนภมู กิ ลุ่มความคดิ (Affinity diagram) ท่มี า: http://www.extractable.com/insights/affinity-diagrams-adding-color-to-fuzzy-data สถาปัตยกรรมสารสนเทศ สถาปัตยกรรมสารสนเทศ (Information architecture) เป็นการวางแผนเก่ียวกับ รายละเอียดของเน้ือหาท่จี ะนาเสนอบนเวบ็ ไซต์ รวมถึงการจัดระเบียบโครงร่างบนเวบ็ ไซต์ ท้งั หมด โดยเน้ือหาท่จี ะนาเสนอบนเวบ็ ไซต์ อาจหมายถึง ข้อความ การนาทางบนเวบ็ ไซต์ ภาพ วิดีทศั น์ เสยี ง การจัดโครงร่าง (Layout) การกาหนดจุดหยุดเน้ือหา (Breakpoint) การทาอนุกรมวิธาน (Taxonomy) และส่วนต่อประสานต่างๆ ท่ผี ู้ใช้จะสามารถรับรู้ได้ด้วย สายตาและการได้ยิน การออกแบบสถาปัตยกรรมสารสนเทศของเวบ็ ไซตท์ ด่ี ีจะนาไปสตู่ ้นแบบเวบ็ ท่ดี ดี ้วย ดังน้ันต้นแบบเวบ็ ควรจะประกอบไปด้วยภาพกราฟิ กท่แี สดงการออกแบบเวบ็ โดยละเอียด มีการกาหนดขนาดท่ชี ัดเจน การออกแบบฐานข้อมูล การออกแบบการนาทาง โดยต้นแบบ เวบ็ น้ีจะถูกส่งต่อไปยังข้นั ตอนการสร้างเวบ็ ไซต์จริง (Site construction) เม่ือดาเนินการ ข้นั ตอนการออกแบบแล้วควรมีการรายงานผลดงั น้ี 1) การระบุรายละเอยี ดการออกแบบเวบ็ ไซต์ เช่น ออกแบบสาหรับการนาเสนอข่าว ประจาวันประกอบไปด้วย หัวข้อข่าว เน้ือหาข่าว ภาพ วันท่ี เวลา เป็นต้น 2) การระบุเคร่ืองมือท่ใี ช้ในการอธบิ ายเน้ือหา เช่น ผงั เวบ็ ไซต์ (Site maps) การ อธบิ ายเน้ือหาด้วยภาพขนาดย่อ (Thumbnail) สารบญั (Tables of contents) เป็นต้น 3) ผลการทดสอบและการสาธิตระหว่างผู้ใช้ กับ โครงร่างแบบเว็บ (Web wireframe) หรือ ต้นแบบ (Prototype)

104 4) ผลการตรวจสอบทางภาษา (Proofread) อักษร และถ้อยคาท่ใี ช้ในเว็บไซต์ โดยเฉพาะคาทใ่ี ช้ในการนาทางบนเวบ็ 5) ผลการตรวจสอบกราฟิ ก เช่น โลโก้ (Logo) ป่ ุม (Buttons) พ้ืนหลัง (Background) สีอักษร (Foreground) ส่วนของหัวเวบ็ ไซต์ (Header) ส่วนด้านล่าง เวบ็ ไซต์ (Footer) เป็นต้น 6) ต้นแบบท่มี ีลักษณะเป็นแผนภาพเร่ืองราว (Storyboard) หรือภาพประกอบ คาอธบิ าย (Illustration) 7) การออกแบบฐานข้อมูล อาจใช้แผนภาพอีอาร์ในการนาเสนอ (Entity- relationship diagram: E-R) 8) การออกแบบโปรแกรมสาหรับให้บริการต่างๆ อาจนาเสนอในลักษณะของ ผงั การไหล (Flow chart) ทีมงานท่ีมีหน้าท่ีรับผิดชอบด้านสถาปัตยกรรมสารสนเทศ ควรทราบถึง ขอบเขตและลักษณะของเน้อื หาท้งั หมดเพ่ือนาไปใช้ในการกาหนดโครงร่างของเวบ็ ไซต์ ให้เหมาะสมและสนองต่อความต้องการของผู้ใช้เวบ็ ไซต์ได้ โดยทมี งามควรสร้างแบบ ของเวบ็ ไซต์ข้ึน เพ่ือทดสอบและประเมินผลการนาทางบนเวบ็ ไซต์ (Site navigation) และส่วนต่อประสานผู้ใช้ (User interface: UI) ก่อนการลงมือสร้างเวบ็ ไซต์จริง ซ่ึงการ สร้างแบบของเว็บไซต์น้ีอาจเป็นโครงร่างแบบ (Wireframe) รูปจาลอง (Mock-up) หรือ ต้นแบบ (Prototype) กไ็ ด้ตามงบประมาณและเวลาท่มี ี โดยการสร้างแบบของ เวบ็ ไซต์มคี วามแตกต่างกนั ดังน้ี 1. โครงร่างแบบ (Wireframe) คือ การนาเสนอโครงร่างแบบคร่าวๆ โดยเน้น ไปท่โี ครงสร้างและองค์ประกอบพ้ืนฐานของเวบ็ ไซต์ท่ตี ้องการส่อื สาร โดยเคร่ืองมือท่ี ใช้ในการกาหนดโครงร่างแบบ เช่น Axure (https://www.axure.com/) และ UXPin (https://www.uxpin.com/)

105 ภาพท่ี 4.3 แสดงตวั อย่างโครงร่างแบบ (Wireframe) โดยใช้โปรแกรม Axure 2. รูปจาลอง (Mock-up) คือ การนาโครงร่างแบบมาปรับปรุงให้มคี วามชดั เจนมาก ข้นึ โดยมีการกาหนดตัวอย่างเน้ือหา ภาพ สี ท่ใี กล้เคียงเวบ็ ไซต์ท่เี สร็จสมบูรณ์ เพ่ือทาให้ ทมี ผู้ออกแบบพิจารณาร่วมกนั ได้อย่างชดั เจนย่งิ ข้นึ 3. ต้นแบบ (Prototype) คือ การสร้างเวบ็ ตามรูปจาลอง (Mock-up) ท่อี อกแบบ โดยต้นแบบจะเน้นการสร้างภาษาเอชทีเอ็มแอล และสไตล์ชีทสาหรับการควบคุมการ แสดงผลท้ังหมด ต้นแบบท่ีสร้างข้ึนน้ีเปรียบเสมือนหน้ากากท่ีเสร็จสมบูรณ์ เม่ือนาไป เช่ือมต่อประสานกบั ระบบฐานข้อมูลหรือการโปรแกรมภาษาต่างๆ กจ็ ะเป็นเวบ็ ท่สี มบูรณ์ ท้งั น้ีต้นแบบอาจเป็นเวบ็ ไซต์ท่เี สรจ็ สมบูรณ์หรือไม่สมบูรณ์กข็ ้ึนอยู่กับข้อตกลงของแต่ละ โครงการ ดังน้ัน ต้นแบบ (Prototype) จึงเป็นการออกแบบท่ใี ช้เวลาในการสร้างนานกว่า โครงร่างแบบ (Wireframe) และ รูปจาลอง (Mock-up)

106 ภาพท่ี 4.4 แสดงการเปรียบเทยี บโครงร่างแบบ (Wireframe) กบั รปู จาลอง (Mock-up) ทม่ี า: https://brainhub.eu/blog/difference-between-wireframe-Mock-up-prototype/ ขอ้ กาหนดในการจดั การไฟลข์ อ้ มูลและทีอ่ ยู่ ในการออกแบบเวบ็ ไซต์ควรมีการระบุข้อกาหนดในการจัดการไฟล์ข้อมูลและท่อี ยู่ ของทรัพยากรเน้ือหาต่างๆ ของเวบ็ ไซต์ เพ่ือให้เกิดความเป็นระเบียบเรียบร้อย สะดวกต่อ การค้นหา และปรับปรุงส่วนประกอบของเวบ็ ไซต์ รวมถึงการเช่ือมโยงไฟล์ต่างๆ ได้อย่าง ถูกต้องและมีประสทิ ธภิ าพ 1. ข้อกาหนดการต้ังช่ือไฟล์ (Naming files) คือ การกาหนดช่ือไฟล์ของทรัพยากร ต่างๆ ท่เี ช่อื มโยงกบั เวบ็ ไซต์ เช่น ไฟล์ภาพ ไฟล์เอกสาร รวมถึงไฟล์โปรแกรมและเวบ็ ไซต์ ด้วย การกาหนดช่ือไฟล์มีความสาคัญเป็ นอย่างย่ิง เน่ืองจากความหลากหลายของ ระบบปฏบิ ัติการ (Operating system: OS) หากต้ังช่ือไฟล์โดยไม่เป็นไปตามข้อกาหนดใน บางระบบปฏิบัติการอาจไม่มีการทางานหรืออาจมีการเช่ือมโยงไฟล์ผิดพลาดได้ ดังน้ัน ผู้ออกแบบเวบ็ ไซต์จึงควรทราบข้อกาหนดท่สี าคัญในการกาหนดช่ือไฟล์ทรัพยากรท่เี ป็ น มาตรฐานสากล คือ ISO-9660 (https://www.iso.org/standard/17505.html) โดยช่ือ ไฟล์ท่ตี ้ังตามข้อกาหนด ISO-9660 สามารถทางานได้บนทกุ ระบบปฏบิ ัตกิ าร

107 ตารางท่ี 4.1 แสดงการเปรียบเทยี บข้อกาหนดการต้ังช่อื ไฟล์จาแนกตามระบบปฏบิ ตั ิการ ระบบปฏิบตั ิการ ขอ้ กาหนด มาตรฐาน ISO-  ช่ือไฟล์ประกอบไปด้วยอักขระจานวน 8 ตัว และสามารถ 9660 ตามด้วยลาดับอกั ษรหรือตวั เลข  นามสกุลของไฟล์มีขนาด 3 อกั ขระ  ช่อื ไฟลส์ ามารถเป็นตัวอกั ษร ตวั เลข และเคร่ืองหมาย _ ได้  ตวั อย่างเช่น document.pdf receipt_1.doc receipt_2.doc ระบบปฏิบตั ิการ  ช่อื ไฟล์ประกอบไปด้วยอกั ขระจานวน 255 ตัว วินโดวส์  สามารถใช้ อักขระพิเศษต่างๆ ในช่ือไฟล์ได้ ยกเว้ น เคร่ืองหมาย \\/*\"<>|:? ระบบปฏิบตั ิการ  ช่อื ไฟล์ประกอบไปด้วยอกั ขระจานวน 255 ตัว แมค็ อินทอช  สามารถใช้ อักขระพิเศษต่างๆ ในช่ือไฟล์ได้ ยกเว้ น เคร่ืองหมาย : (Colon) ระบบปฏิบตั ิการยู  ช่อื ไฟลป์ ระกอบไปด้วยอักขระจานวน 255 ตัว นกิ ส์  สามารถใช้ อักขระพิเศษต่างๆ ในช่ือไฟล์ได้ ยกเว้ น เคร่ืองหมาย / และ เว้นว่าง (Space) 1.1 การแยกแยะตัวพิมพ์ (Case-sensitive) ในการต้ังช่ือไฟล์และท่อี ยู่น้ัน ในบาง ระบบปฏิบัติการตัวพิมพ์ใหญ่และตัวพิมพ์เลก็ มีความแตกต่างกัน เช่น LOGO.jpg และ logo.jpg ถือว่าเป็นคนละไฟล์กนั โดยเฉพาะระบบปฏบิ ัติการยูนิกส์ (UNIX) ดังน้ันการต้ัง ช่ือไฟล์หรือช่ือแฟ้ มทอ่ี ยู่บนเวบ็ ควรคานึงถึงการแยกแยะตัวพิมพ์ โดยแนะนาให้ใช้ตัวพิมพ์ เลก็ ท้งั หมด เพ่ือการเช่ือมโยงไฟลท์ ถ่ี ูกต้อง 1.2 อักขระต้องห้าม (Character exceptions) คือ อกั ขระท่ถี ูกยกเว้นในการนามา ต้งั ช่อื ไฟล์ เช่น \\ / * \" < > | : ? และ ช่องว่าง 1.3 การต้ังนามสกุลไฟล์ (File extensions) คือ การกาหนดนามสกุลของเอกสาร ต่างๆ ให้สอดคล้องกับประเภทไฟล์ ไฟล์เว็บท่ีทางานบนเว็บเบราเซอร์ควรมีนามสกุล เอชทีเอม็ แอล (.HTML) หรือ เอชทเี อม็ (.HTM) ไฟล์โปรแกรมท่ที างานบนแม่ข่าย กาหนดนามสกุลตามภาษาน้ันๆ เช่น พีเอชพี (.PHP) เอเอสพี (.ASP) เป็นต้น ไฟล์ภาพเจ เพก็ (Joint photographic experts group) ใช้นามสกุลเจเพก็ (.JPEG) หรือ เจพีจี (.JPG)

108 1.4 การกาหนดแนวทางการต้ังช่ือไฟล์ (File-naming guidelines) เป็นวิธกี าร หน่ึงในการวางแผนเวบ็ ไซต์ เพ่ือให้ทีมงานต้ังช่ือไฟล์และตาแหน่งเป็ นไปตามแนวทางท่ี กาหนด เกดิ ความสอดคล้องกนั และลดความผดิ พลาดในการเช่อื มโยงไฟล์ โดยแนวทางอาจ มลี ักษณะดังน้ี 1) ห้ามใช้ช่องว่างในการต้ังช่ือไฟล์ ควรใช้เคร่ืองหมายขีดเส้นใต้แทน (Underscore) เช่น my web.html ควรปรับเป็น my_web.html เป็นต้น 2) หลกี เล่ยี งการใช้อกั ขระพิเศษ ควรใช้เฉพาะตวั อกั ษร ตวั เลข และขดี เส้นใต้ เทา่ น้ัน 3) การต้ังช่อื ไฟล์และแฟ้ มข้อมูลต่างๆ ควรใช้ตัวพิพม์เลก็ ทง้ั หมด 4) ขนาดของช่ือไฟล์และแฟ้ มข้อมูลควรกาหนดตามมาตรฐาน ISO-9660 หรือ กาหนดตามระบบปฏบิ ัตกิ ารทใ่ี ช้ 1.5 การกาหนดหน้าเวบ็ โดยปริยาย (Default main page) คอื การกาหนดช่ือเวบ็ เพจหลัก เช่น index.html หรือ home.html เป็นต้น 2. การกาหนดตาแหน่งของทรัพยากรเวบ็ (Uniform resource locator: URL) การกาหนดตาแหน่งของทรัพยากรเวบ็ หรือ ยูอาร์แอล (URL) มี 2 ลักษณะ ดังน้ ี 2.1 การกาหนดแบบเตม็ (Complete URL) คอื การกาหนดยูอาร์แอลเพ่ือเข้าถึง จากท่ใี ดบนโลกกไ็ ด้ ซ่ึงจาเป็นต้องระบุสว่ นประกอบของยูอาร์แอลให้ครบถ้วน ดงั น้ี ตารางท่ี 4.2 แสดงการจาแนกตาแหน่งของยูอาร์แอลแบบเตม็ โปรโตคอล ชื่อโดเมน เสน้ ทาง ชื่อไฟล์ (Protocol) (Domain Name) (Path) (File Name) http:// www.yoursite.ac.th /elearning/webdesign/ index.html 2.2 การกาหนดแบบบางส่วน (Partial URL) คือ การกาหนดยูอาร์แอลท่ใี ช้ สาหรับการเข้าถึงภายในแหล่งจดั เกบ็ เดียวกนั เทา่ น้ัน โดยจะประกอบไปด้วยเส้นทางและช่ือ ไฟล์

109 ตารางท่ี 4.3 แสดงการจาแนกตาแหน่งของยูอาร์แอลแบบบางส่วน เสน้ ทาง ชื่อไฟล์ (Path) (File Name) /elearning/webdesign/ index.html การต้งั ช่อื เส้นทางหรือช่อื ไฟลจ์ าเป็นต้องคานึงถึงความเป็นมติ รต่อผ้ใู ช้ (URL Friendly) ด้วย เน่ืองจากผ้ใู ช้ในปัจจุบันมีทกั ษะการร้ดู ิจทิ ลั (Digital literacy) ดังน้ันหาก เส้นทางหรือช่อื ไฟล์มีความเป็นมิตรต่อผู้ใช้ เม่อื ผู้ใช้ได้เหน็ URL แล้ว ผู้ใช้จะทราบทนั ทวี ่า เวบ็ ไซตป์ ลายทางของ URL น้ันจะมีข้อมูลหรือสารสนเทศอะไร เป็นต้น 3. การกาหนดโครงสร้างไดเรก็ ทอร่ี (Directory structure) เป็นการออกแบบและ กาหนดโครงสร้างการจัดเกบ็ ของทรัพยากรเวบ็ ซ่ึงเป็นส่งิ ท่นี ักออกแบบเวบ็ ไซต์จะต้องให้ ความสาคัญ เน่ืองจากการพัฒนาเวบ็ ไซต์น้ันจะประกอบไปด้วยไฟล์ทรัพยากรเวบ็ จานวน มาก เช่น ไฟล์ HTML CSS ไฟล์ภาพ ไฟล์โปรแกรมต่างๆ ดังน้ันการออกแบบโครงสร้าง การจัดเกบ็ ทรัพยากรเวบ็ ท่เี หมาะสม จะช่วยให้ทมี งานหรือตัวนักพัฒนาเวบ็ สามารถเข้าถึง ไฟล์ทรัพยากรต่างๆ ได้อย่างรวดเรว็ และแสดงผลบนเวบ็ เบราเซอร์ได้อย่างถูกต้อง โดยการ กาหนดโครงสร้างไดเรก็ ทอร่ีควรคานึงดังน้ี 3.1 ควรจัดกลุ่มลักษณะของไฟล์ทรัพยากรเวบ็ เช่น สร้างแฟ้ มข้อมูลสาหรับ จดั เกบ็ ภาพโดยต้งั ช่ือแฟ้ มข้อมูล image หรือ picture เป็นต้น หรือ สร้างแฟ้ มข้อมูลสาหรับ จัดเกบ็ ไฟล์สไตล์ชีท (CSS) ซ่ึงนักออกแบบและพัฒนาเวบ็ ส่วนใหญ่จะใช้ช่ือแฟ้ มข้อมูลว่า inc หรือมาจากคาว่า include ทแ่ี ปลว่า ไฟล์ทน่ี ามาใช้ประกอบในเวบ็ ไซต์

110 ภาพท่ี 4.5 แสดงการออกแบบไดเรก็ ทอร่ีทส่ี นับสนุนการประกอบไฟล์ (Include) ทม่ี า: http://webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html 3.2 โครงสร้างของไดเรก็ ทอร่ีทอ่ี อกแบบข้นึ ห้ามต้ังช่ือแฟ้ มหรือช่ือไฟล์ข้อมูลท่มี ี ช่องว่าง (Space) เน่ืองจากอาจเกิดความผิดพลาดในการเข้าถึงหรือเช่ือมโยงข้อมูลผ่านยู อาร์แอล (URL) 3.3 ออกแบบโครงสร้างไดเรก็ ทอร่ีให้สอดคล้องกบั การแสดงผลบนเวบ็ ไซต์ โดย เวบ็ ไซตห์ น่ึงๆ อาจประกอบไปด้วยหน้าจอย่อยๆ หรือ ส่วนย่อยๆ หลายสว่ น ดงั น้ัน การจัด กลุ่มประเภทของเน้ือหาหรือกลุ่มของหน้าจอย่อยๆ จะเป็นประโยชน์ในการบริหารจัดการ ทรัพยากรเวบ็ ไซต์ได้อย่างดี

111 ภาพท่ี 4.6 แสดงการออกแบบไดเรก็ ทอร่ีท่สี อดคล้องกบั การแสดงผลบนเวบ็ ไซต์ ท่มี า: http://webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html การสรา้ งและทดสอบเว็บไซต์ 1. การสร้างเวบ็ ไซต์ (Site construction) เป็นข้ันตอนท่สี าคัญมาก โดยในข้นั ตอนน้ี ผู้ผลติ จะพบกบั ข้อมลู การออกแบบและเน้ือหาท่รี ับมาจากข้ันตอนการออกแบบเวบ็ ไซต์ ซ่ึง จะต้องทาการสร้างเว็บไซต์ให้เป็ นไปตามท่ีได้ออกแบบไว้ แต่ท้ังน้ีในระหว่างการสร้าง เว็บไซต์ อาจพบการปรับเปล่ียนการออกแบบอยู่เสมอ เน่ืองจากเทคโนโลยีท่ีพัฒนา ตลอดเวลา หรือ การได้เรียนร้สู ่งิ ใหม่ๆ ในระหว่างการสร้างเวบ็ ไซต์ ดังน้ัน ผู้ท่มี ีหน้าท่สี ร้าง เวบ็ ไซตแ์ ละผู้ท่อี อกแบบเวบ็ ไซต์จะต้องมีการติดต่อประสานกนั อยู่เร่ือยๆ เพ่ือปรับเปล่ียน เวบ็ ไซตใ์ ห้เหมาะสมทส่ี ดุ เม่อื การสร้างเวบ็ ไซต์เสรจ็ สมบูรณ์ จะต้องนาเวบ็ ไซต์ท่พี ัฒนาข้ึนน้ีไปทาการทดสอบ จากผู้ใช้ภายนอก หรือ ผู้ท่ไี ม่ได้เป็นส่วนหน่ึงของทมี ผู้ผลิต ท่ียินดีจะวิจารณ์และรายงาน ข้อผดิ พลาดให้แก่ทมี ผู้ผลิตเวบ็ ได้ ผู้ใช้ทอ่ี ยู่ภายนอกอาจสงั เกตเหน็ จุดบกพร่องบางจุดท่ที มี พัฒนามองข้าม หลังจากทป่ี รับแก้เวบ็ ไซต์ตามคาแนะนาของผู้ใช้และทดสอบอย่างระเอยี ดแล้ว ควร นาเวบ็ ไซต์เผยแพร่บนเครือข่ายอนิ เทอร์เนต็ เพ่ือทดสอบกบั กล่มุ ผู้ใช้ท่มี ีขนาดใหญ่ข้นึ โดย เม่อื ดาเนินการข้นั ตอนการสร้างเวบ็ ไซต์แล้วควรมกี ารรายงานผลดงั น้ี

112 1) เวบ็ ไซตท์ เ่ี สรจ็ สมบูรณ์ทุกหน้า 2) โครงสร้างการนาทางท่สี มบูรณ์ 3) เปิ ดให้ใช้การบริการต่างๆ อยู่บนเวบ็ ไซต์ 4) ผลการตรวจสอบการเช่อื มโยงหน้าเวบ็ ไซตต์ ่างๆ 5) ผลการตรวจสอบความถูกต้องในการค้นคนื ข้อมลู จากระบบฐานข้อมลู 6) ผลการตรวจสอบความเป็นระเบียบของชุดคาส่งั เช่น ภาษาเอชทเี อม็ แอล ภาษาจาวาสคริปต์ เป็นต้น เพ่ือความสะดวกในการแก้ไขและปรับปรุงภายหลงั 7) ผลการตรวจสอบความถูกต้องชุดคาส่ังภาษาเอชทเี อม็ แอล และสไตล์ชีท (CSS) โดยภาษาเอชทเี อม็ แอลตรวจสอบท่ีเวบ็ ไซต์ http://validator.w3.org/ และสไตล์ ชีทตรวจสอบทเ่ี วบ็ ไซต์ http://jigsaw.w3.org/css-validator/ 8) รวบรวมและจัดเกบ็ สว่ นประกอบท้งั หมดของเวบ็ ไว้ในท่ปี ลอดภยั 2. การทดสอบคุณภาพของเวบ็ ไซต์และวัดความพึงพอใจของผู้ใช้เบ้ืองต้นก่อนการ เผยแพร่จริง (Quality assurance and user testing) เป็นข้นั ตอนท่ใี ช้ในการทดสอบคุณภาพ ของเวบ็ ไซต์ โดยมีหลกั การทดสอบ ดงั น้ี 1) การทดสอบบนเวบ็ เบราเซอร์ท่หี ลากหลาย (Various tests for cross- browser) 2) การทดสอบบนอุปกรณ์ เช่น สมาร์ทโฟน คอมพิวเตอร์พีซี แทบ็ เบล็ต (Device compatibility) 3) การทดสอบว่าผู้ใช้สามารถเข้าถึงเว็บไซต์ได้หรือไม่ เกิดปัญหาเก่ียวกับ เครือข่ายอนิ เทอร์เนต็ หรือไม่ (Connectivity at different bandwidths) เช่น การใช้สายแลน (LAN) การเช่ือมต่อด้วยสญั ญาณไร้สาย (Wireless LAN) การใช้สญั ญาเซลูล่า (Cellular) เป็ นต้ น 4) การทดสอบการเช่ือมโยงด้วยไฮเปอร์ลิงค์มีความถูกต้องหรือไม่ สามารถ เช่ือมไปยังแหล่งข้อมลู ท่ถี ูกต้องหรือไม่ 5) การทดสอบการป้ อนข้อมูลและการแสดงผลข้อมลู รวมถงึ การคานวนต่างๆ มี ความถูกต้องเหมาะสมหรือไม่ หรือเกดิ การประวิงเวลา (Delay) หรือไม่ 6) การทดสอบความเข้าใจของผู้ใช้เก่ียวกับการจาแนกเมนูเพ่ือประเมินว่าผู้ใช้ เกดิ ความสบั สนของเมนูหรือไม่

113 การเผยแพร่เว็บไซต์ การเผยแพร่เวบ็ ไซต์และการทาการตลาดให้แก่เวบ็ ไซต์ (Publishing and Site marketing) เป็นข้นั ตอนในการนาเวบ็ ไซต์ออนไลน์จริง โดยในข้ันตอนน้ีจะต้องมีการเฝ้ า ระวังและติดตามเวบ็ ไซต์อย่างสม่าเสมอ นอกจากน้ีจะต้องใส่ใจเก่ยี วกบั หัวข้อดังต่อไปน้ี 1) การเลือกใช้คา ช่อื และทอ่ี ยู่เวบ็ ไซต์ (Web Site Address: URL) 2) การโฆษณาเวบ็ ไซตใ์ นส่อื สง่ิ พิมพ์และไม่ตพี ิมพ์ 3) การลงทะเบียนกบั จกั กลค้นหา (Search Engine) เพ่ือทาให้เป็นท่รี ้จู ัก 4) การกระจายเวบ็ ไซต์ให้เป็นทร่ี ู้จกั (Distributing press releases) การทาการตลาดให้แก่เว็บไซต์ (Site marketing) คือการทาให้เว็บไซต์ท่ีได้ พัฒนาข้ึนเป็ นท่ีรู้จัก เน่ืองจากเป้ าหมายของการเผยแพร่เว็บไซต์เพ่ือเป็ นการขยายช่อง ทางการติดต่อระหว่างองค์กรกับผู้ใช้เว็บ ดังน้ัน การประชาสัมพันธ์เว็บไซต์จึงเป็ นอีก ข้นั ตอนทท่ี มี ผู้พัฒนาเวบ็ ในปัจจุบนั ให้ความสาคัญเป็นอย่างมาก นอกจากการประชาสมั พันธแ์ ล้ว การทาเวบ็ ไซต์ให้เหมาะสมในการค้นหา (Search engine optimization: SEO) กเ็ ป็นอีกช่องทางท่จี ะทาให้ผู้ใช้พบเจอเวบ็ ไซต์ในเสริ ์ชเอน จินหรือจักกลค้นหา (Search engine) เช่น กูเก้ลิ (Google) ยาฮู (Yahoo) ไป่ ตู้ (Baidu) ของประเทศจีน ยานเดกซ์ (Yandex) ของประเทศรัสเซีย เป็ นต้น นอกจากน้ีการทา การตลาดให้แก่เวบ็ ไซต์ในรูปแบบของการค้นหาแล้วอาจใช้ URL ของเวบ็ ไซต์เผยแพร่ตาม แหล่งต่อไปน้ ี 1) แผ่นป้ ายโฆษณา (Print advertisements) และส่อื ส่งิ พิมพ์ต่างๆ 2) การประชาสัมพันธ์ผ่านวิทยุและโทรทัศน์ (Radio and television advertisements) 3) มีการประชาสัมพันธ์ในจุดท่ีผู้คนพลุกพล่าน (High-traffic areas) เช่น ห้องสมุดประชาชน ห้องสมุดโรงเรียนและมหาวิทยาลัย หรือสถานท่ที ่มี ีความเหมาะสมกับ เวบ็ ไซต์ เป็นต้น 4) การส่งเมลล์รณรงค์ให้เข้าใช้เวบ็ (Direct mail campaigns) 5) การใส่ URL ของเวบ็ ไซต์บนนามบตั ร (Business card) 6) การพิมพ์ URL ของเวบ็ ไซต์บนอปุ กรณ์เคร่ืองเขยี น 7) การพิมพ์ URL ของเวบ็ ไซต์บนคู่มอื ผลิตภณั ฑ์ หรือใบรับประกนั สนิ ค้า

114 การติดตาม การประเมิน และการบารุงรกั ษาเว็บไซต์ การติดตาม การประเมิน และการบารุงรักษาเวบ็ ไซต์ (Tracking Evaluation and Maintenance) การติดตาม (Tracking) เป็นการติดตามการเข้าใช้เวบ็ ไซต์ของผู้ใช้ เพ่ือทา ให้ทราบว่าผู้ใช้มีการปฏสิ มั พันธก์ ับเวบ็ ไซต์ท่ไี ด้ออกแบบและพัฒนาข้ึนน้ีอย่างไร โดยอาจ เป็นการติดตามจากไฟล์ข้อมูลจราจร (Logs file) บนแม่ข่ายเวบ็ หรือใช้เคร่ืองมือในการ ติดตาม เช่น การวิเคราะห์เวบ็ ไซต์ของบริษัทกูเก้ลิ (Google analytics) และนามาวิเคราะห์ เม่อื ทาการวเิ คราะห์แล้วจะทาให้ทราบว่า หน้าเวบ็ ไซตใ์ ดท่มี ีผู้ใช้จานวนมาก และมรี ะยะเวลา ในการอยู่ภายในหน้าเว็บไซต์น้ันเท่าใด หรือ หน้าเว็บไซต์ใดท่ีผู้ใช้คลิกผ่านไปยังหน้า เวบ็ ไซตอ์ ่นื ซ่ึงข้อมูลเหล่าน้ีจะนาไปสกู่ ารประเมินและการบารุงรักษาเวบ็ ไซตต์ ่อไป การบารุงรักษาเว็บไซต์ให้ สามารถทางานได้อย่างถูกต้องและเหมาะสมตาม สภาวการณ์ต่อไป (Ongoing maintenance) เป็นข้นั ตอนท่เี ฝ้ าระวังและติดตามเวบ็ ไซต์ให้ สามารถทางานได้อย่างถูกต้องและเหมาะสม หากเวบ็ ไซต์มีข้อผิดพลาดจะต้องทาการแก้ไข หรือทเ่ี รียกว่า การบารงุ รักษาให้เวบ็ ไซต์ (Maintenance) นอกจากน้ีหากจะมกี ารร้ือปรับปรุง ใหญ่ (Reengineering) หรือ มีความต้องการท่มี ากข้ึน (Needs) จะต้องเร่ิมวงจรโครงการ เวบ็ ไซตใ์ หม่ เพ่ือทาการวิเคราะห์และพัฒนาได้อย่างตรงเป้ าประสงคใ์ หม่ให้มากทส่ี ดุ ภาพที่ 4.7 แสดงตัวอย่างของหน้าจอการวเิ คราะห์เวบ็ ไซตข์ องบริษัทกูเก้ลิ (Google analytics) ทม่ี า: https://www.google.co.th/intl/th_ALL/analytics/index.html

115 สรุป ในการออกแบบเวบ็ ไซต์ท่ีมีประสิทธิภาพน้ันจาเป็ นต้องมีการวางแผนเว็บไซต์ท่ี ชัดเจน เน่ืองจากการพัฒนาเวบ็ ไซต์ในปัจจุบันมีความซับซ้อนและประกอบไปด้วยทมี งาน ผู้ออกแบบเวบ็ ไซต์หลายสว่ น ผู้ออกแบบเวบ็ ไซต์จึงจาเป็นต้องทราบถึงกระบวนการพัฒนา เวบ็ ไซต์ โดยวงจรชีวิตโครงการพัฒนาเวบ็ ไซต์ (Web development project lifecycle) ตาม แนวคิดของ Joel Sklar ประกอบไปด้วย 7 ข้นั ตอนท่สี าคัญ 1) การศึกษาความต้องการและ ระบุขอบเขตของเวบ็ ไซต์ (Requirements and specifications) 2) การออกแบบสารสนเทศ ท่จี ะถ่ายทอด และการทาอนุกรมวิธาน (Information design and taxonomy creation) 3) การออกแบบกราฟิ กและการสร้างแบบของเวบ็ ไซต์ (Graphic design and page template creation) 4) การสร้างเว็บไซต์และพัฒนาเน้ือหา (Construction and content development) 5) ทดสอบคุณภาพของเวบ็ ไซต์และวัดความพึงพอใจของผู้ใช้เบ้ืองต้นก่อน การเผยแพร่จริง (Quality assurance and user testing) 6) การเผยแพร่เวบ็ ไซต์และการ ประชาสมั พันธ์ (Publishing and promotion) และ 7) การบารุงรักษาเวบ็ ไซต์ให้สามารถ ทางานได้อย่างถูกต้อง (Ongoing maintenance) นอกจากน้ีหากจะมีการร้ือปรับปรุงใหญ่ (Reengineering) หรือ มีความต้องการทม่ี ากข้นึ (Needs) จะต้องเร่ิมวงจรโครงการเวบ็ ไซต์ ใหม่ เพ่ือทาการวิเคราะห์และพัฒนาได้อย่างตรงเป้ าประสงค์ใหม่ให้มากท่ีสุดเพ่ือสร้าง ประสบการณ์ผู้ใช้ได้อย่างมีประสทิ ธภิ าพสงู สดุ คาถามทา้ ยบท 1. จงอธบิ ายความหมายของคาว่า การวางแผนเวบ็ ไซต์ (Web site planning) 2. จงเปรียบเทยี บกระบวนการพัฒนาเวบ็ ไซต์ (The Site Development Process) ตาม แนวคิดของ Patrick J. Lynch และ Sarah Horton กบั แนวคดิ ของ Joel Sklar 3. จงอธิบายการกาหนดคุณลักษณะของเว็บไซต์ด้านการผลิต พร้อมยกตัวอย่างท่ี เก่ยี วกบั เวบ็ ไซตพ์ าณชิ ยอ์ เิ ลก็ ทรอนิกส์ 4. จงอธบิ ายการกาหนดคุณลักษณะของเวบ็ ไซต์ด้านเทคโนโลยีท่ใี ช้ พร้อมยกตัวอย่าง ทเ่ี ก่ยี วกบั เวบ็ ไซตพ์ าณชิ ย์อเิ ลก็ ทรอนิกส์ 5. จงอธิบายการกาหนดคุณลักษณะของเว็บไซต์ด้านแม่ข่ายเว็บ (Web server support) พร้อมยกตัวอย่างท่เี ก่ยี วกบั เวบ็ ไซต์พาณิชยอ์ เิ ลก็ ทรอนิกส์ 6. จงอธบิ ายการกาหนดคุณลักษณะของเวบ็ ไซต์ด้านงบประมาณ (Budgeting) พร้อม ยกตัวอย่างทเ่ี ก่ยี วกบั เวบ็ ไซตพ์ าณชิ ยอ์ เิ ลก็ ทรอนิกส์

116 7. จงอธบิ ายความสาคัญของสถาปัตยกรรมสารสนเทศ (Information architecture) ท่ี มีต่อการออกแบบเวบ็ ไซต์ 8. จงเปรียบเทยี บความแตกต่างระหว่างโครงร่างแบบ (Wireframe) รูปจาลอง (Mock-up) และ ต้นแบบ (Prototype) 9. จงอธบิ ายความแตกต่างระหว่าง การกาหนดแบบเตม็ (Complete URL) และ การ กาหนดแบบบางส่วน (Partial URL) 10.จงอธบิ ายเก่ยี วกบั การสร้างและทดสอบเวบ็ ไซต์ พร้อมยกตัวอย่างท่เี ก่ียวกับเวบ็ ไซต์ พาณชิ ยอ์ เิ ลก็ ทรอนิกส์

117 เอกสารอา้ งอิง ISO 9660:1988 (2015). Information processing -- Volume and file structure of CD-ROM for information interchange. URL https://www.iso.org/standard/ 17505.html Joel Sklar. (2014). Principles of Web Design, Sixth Edition. Cengage Learning Asia. Murugesan, S. et al. \"Web Engineering: A new Discipline for Development of Web- Based Systems\", WebEngineering2000, LNCS2016, pp. 3-13, 2001. Nielsen, Jakob; Tahir, Marie. (2001), Homepage Usability: 50 Websites Deconstructed, New Riders Publishing. Thomas A. Powell.(2003) Web Design: The Complete Reference. McGraw-Hill Publishing Company Limited.

118

119 แผนบริหารการสอนประจาบทที่ 5 หวั ขอ้ เน้ ือหา โครงสร้างภาษาเอชทเี อม็ แอล การสร้างและแสดงผลเอกสารเอชทเี อม็ แอล การกากบั ด้วยภาษาเอชทเี อม็ แอลพ้ืนฐาน การจดั รูปแบบ การกากบั ภาพและมเี ดยี ไฮเปอร์ลงิ ค์ ไดเรก็ ทอร่ี ลิสท์ ตาราง ฉลากข้อมลู เวบ็ วตั ถุประสงคเ์ ชิงพฤติกรรมหวั ขอ้ เน้ ือหา 1. อธบิ ายโครงสร้างภาษาเอชทเี อม็ แอลได้ 2. อธบิ ายการสร้างและแสดงผลเอกสารเอชทเี อม็ แอลได้ 3. อธบิ ายการกากบั ด้วยภาษาเอชทเี อม็ แอลพ้ืนฐานได้ 4. อธบิ ายการการจัดรูปแบบตัวอกั ษรได้ 5. อธบิ ายการกากบั ภาพและมีเดยี ได้ 6. อธบิ ายการกากบั ไฮเปอร์ลิงค์ได้ 7. อธบิ ายการกาหนดไดเรก็ ทอร่ีได้ 8. อธบิ ายการกากบั ลิสทไ์ ด้ 9. อธบิ ายการกากบั ตารางได้ 10. อธบิ ายการกากบั ฉลากข้อมูลเวบ็ ได้ วิธีและกิจกรรมการเรียนการสอน 1. วิธีสอน 1.1 วิธสี อนแบบบรรยาย 1.2 วิธสี อนแบบอภปิ ราย

120 1.3 วธิ สี อนแบบการศกึ ษาโดยลาพัง 2. กิจกรรมการเรียนการสอน 2.1 ผู้สอนบรรยายสรปุ เน้อื หา 2.2 ให้ผู้เรียนศึกษาเน้ือหาจากเอกสารประกอบการสอน 2.3 ผู้เรียนร่วมอภปิ รายการออกแบบเวบ็ ไซตล์ กั ษณะต่าง ๆ ทใ่ี ช้ใน ชีวิตประจาวนั 2.4 ผู้เรียนแบ่งกลุ่มร่วมกนั วเิ คราะห์เปรียบเทยี บเน้ือหา ก่อนผู้สอนจะสรุปและ ยกตัวอย่างเปรียบเทยี บ 2.5 มอบหมายให้ผู้เรียนค้นหาเพ่ิมเตมิ สือ่ การเรียนการสอน 1. เอกสารประกอบการสอน 2. ส่อื อเิ ลก็ ทรอนกิ ส์ 3. หนังสอื ตารา เอกสารทเ่ี ก่ยี วข้อง การวดั ผลและประเมินผล 1. สงั เกตการตอบคาถามและต้งั คาถามของผู้เรียนในระหว่างการบรรยาย อภิปราย และซกั ถาม 2. สงั เกตความต้งั ใจในการติดตามเน้อื หาบทเรียน 3. สงั เกตการให้ความร่วมมอื ในการอภิปรายกลุ่ม 4. สงั เกตการให้ความร่วมมือในการศกึ ษาโดยลาพัง

121 บทที่ 5 ภาษาเอชทีเอ็มแอล ในการออกแบบเวบ็ ไซตผ์ ู้ออกแบบจาเป็นต้องมีความรู้เก่ยี วกับภาษาเอชทเี อม็ แอล เน่ืองจากเป็นภาษามาตรฐานทใ่ี ช้ในการแสดงผลข้อมูลบนเวบ็ เบราเซอร์ โดยภาษาเอชทเี อม็ แอล มาจากคาว่า ไฮเปอร์เทก็ ซ์มาร์คอัพ (Hyper Text Markup Language: HTML) เป็น ภาษาประเภทกากับเน้ือหา ถูกพัฒนามาจากภาษาเอสจีเอม็ แอล (Standard Generalized Markup Language: SGML) และภาษาเอชทเี อม็ แอลไดรับการข้ึนทะเบียนเป็นภาษา มาตรฐาน ISO8879:1986 (Standard Generalized Markup Language: SGML, https://www.iso.org/standard/16387.html) จากองค์การระหว่างประเทศว่าด้วยการ มาตรฐาน (International Standard Organization: ISO) ภาษาเอชทเี อม็ แอลเน้นการกาหนดโครงสร้างหลักหน้าเวบ็ มากกว่าการกาหนด รูปแบบการแสดงผล โดยการกาหนดรูปแบบการแสดงผลจะเรียกว่า การกาหนดสไตล์ (Style) ปัจจุบันภาษามาตรฐานท่ใี ช้ในการกาหนดสไตล์ คือ สไตล์ชีท (Cascading Style Sheet: CSS) ซ่ึงภาษาเอชทเี อม็ แอลสามารถทางานร่วมกบั สไตล์ชีทได้อย่างมีประสทิ ธภิ าพ ดังน้ัน ผู้ออกแบบเวบ็ ไซต์ท่มี ีความรู้ ความเข้าใจและทกั ษะในการใช้ภาษาเอชทเี อม็ แอลกจ็ ะ สามารถออกแบบและพัฒนาเวบ็ ไซต์ได้หลากหลายและมีประสทิ ธิภาพสงู โครงสรา้ งภาษาเอชทีเอ็มแอล ภาษาเอชทเี อม็ แอล (Hypertext Markup Language: HTML) มีลักษณะเป็ น ข้อตกลงทางตัวอักษรท่เี รียกว่า ภาษา (Language) ส่วนคาว่ามาร์คอัพ (Markup) มี ความหมายว่าครอบ คลุมหรือกากับ และไฮเปอร์เทก็ ซ์ (Hypertext) คือ การใช้ข้อความ หรือประโยคธรรมดา เช่น การใชสญั ลักษณก์ ารใช้ตวั อกั ษร A-Z ทว่ั ไป นามาประกอบกันให้ เกดิ ความหมาย และทาให้ข้อความพ้ืนฐานเหล่าน้ันสามารถเช่ือมโยงกับทรัพยากรอ่นื ๆ ได้ โดยใช้วิธีการเรียกไฟล์หรือท่อี ยู่อ่ืนได้ ซ่ึงบางคร้ังจะเรียกไฮเปอร์เทก็ ซ์ (Hypertext) ว่า “ข้อความหลายมติ ิ” ภาษาเอชทเี อม็ แอลมีลกั ษณะเป็นอกั ษรธรรมดา (Plain Text) ทใ่ี ช้ในการครอบหรอื คลุมข้อมูลต่างๆ เพ่ือทาให้เกิดการเช่ือมโยง หรือ แสดงผลทรัพยากรข้อมูลต่างๆ ได้ โดย ปัจจุบันผู้ท่ที าหน้าท่แี ปลภาษาเอชทเี อมแ็ อล คือ ตัวเรียกค้นเวบ็ (Web Browser) เช่น โครม (Chrome) ไมโครซอฟต์เอดจ์ (Microsoft Edge) โอเปร่า (Opera) และ ไฟฟ็ อกซ์

122 (FireFox) เป็นต้น ซ่ึงกระบวนการแปลภาษาเอชทเี อม็ แอลให้แสดงผลเกดิ เป็นภาพหรือ โครงร่างบนเบราเซอร์ เรียกว่า การแปล หรือ การฉาบข้อมูลใหม่ (Rendering) ทาให้ผู้ใช้ ทว่ั ไปเหน็ การแสดงผลเป็นภาพ ข้อความ ภาพเคล่อื นไหว ตาราง ท่เี ข้าใจได้ง่าย การใช้ภาษาเอชทีเอ็มแอลจะต้องเป็ นไปตามวากยสัมพันธ์ (Syntax) ของภาษา เน่ืองจากเวบ็ เบราเซอร์จะทาการฉาบข้อมูลตามมาตรฐานภาษาเอชทเี อม็ แอล มาตรฐานของ ภาษาเอชทเี อม็ แอลในปัจจุบันถูกพัฒนาเป็นรุ่นท่ี 5 เรียกว่า เอชทเี อม็ แอลไฟว์ (HTML5) โดยข้ อมูลมาตรฐานภาษาเอชทีเอ็มแอลไฟว์สามารถ เข้ าศึกษาได้ ท่ีเว็บไซต์ http://www.w3.org/TR/html5/ 1. โครงสร้างของอลี ิเม้นท์ Tag Attribute Attribute Affected Name Name Value Content <a href = “http://www.web.com”> AtLtriibuntek </a> Closing Opening Tag Tag Element ภาพท่ี 5.1 แสดงโครงสร้างของอลี ิเม้นท์ 1.1 ป้ ายช่ือ (Tag name) คือ ป้ ายคาส่ังท่ีเป็นไปตามมาตรฐานของภาษา เอชทเี อม็ แอล โดยป้ ายคาส่งั ประกอบไปด้วยเคร่ืองหมาย < (Left-angle bracket) และ > (Right-angle bracket) รูปแบบของคาส่งั เอชทเี อม็ แอล ในการระบุป้ ายช่อื <ป้ ายช่อื > … </ป้ ายช่อื > ตวั อย่าง การระบุป้ ายช่อื คาสง่ั เอชทเี อม็ แอล <h1>…</h1> <p>…</p> 1.2 ช่อื คุณลกั ษณะ (Attribute name) หรือเรียกว่า แอต็ ทริบวิ ท์ คือ คุณลักษณะ เพ่ิมเติมของป้ ายช่ือ ซ่ึงคุณลักษณะเพ่ิมเติมท่ีสามารถนามาใช้ได้น้ันข้ึนอยู่กับป้ ายช่ือท่ี

123 นามาใช้ เช่น คุณลักษณะ href ท่ใี ช้ในการเช่ือมโยง จะมีในป้ ายช่ือ a แต่จะไม่มีในป้ ายช่ือ h1 เป็นต้น 1.3 ค่าลักษณะ (Attribute value) คอื ค่าข้อมูลทถ่ี ูกกาหนดเป็นลกั ษณะ เช่น color= “black” หมายถึง มกี ารกาหนดค่าสดี าให้แกล่ กั ษณะ รปู แบบของคาส่งั เอชทเี อม็ แอล ในการกาหนดคุณลกั ษณะ <ป้ ายช่อื ช่อื คุณลกั ษณะ= “ค่าคุณลักษณะ”> … </ป้ าย ช่อื > ตวั อย่าง การระบุคุณลกั ษณะและค่าลกั ษณะ <font color=“red”>…</h1> <img src=“logo.jpg”> 1.4 เน้ือหาทถ่ี ูกกากบั (Affected content) คือ เน้อื หาท่ถี ูกครอบด้วยป้ าย ซ่งึ ทา ให้เน้ือหาดังกล่าวได้รับผลกระทบและถูกปรับเปล่ยี นไปตามป้ ายช่อื และคุณลกั ษณะต่างๆ รปู แบบของคาสง่ั เอชทเี อม็ แอล ในการกากบั เน้ือหา <ป้ ายช่อื ช่อื คณุ ลกั ษณะ= “ค่าคุณลกั ษณะ”> เน้ือหาท่ถี ูกกากบั </ป้ ายช่อื > ตัวอย่าง การกากบั เน้ือหา <font color=“red”> HELLO WORLD </font> <p> Principle of Web Design </p> 1.5 ป้ ายเปิ ด (Opening tag) หรือทเ่ี รียกกนั ว่า แทก็ เปิ ด คอื ป้ ายช่อื ทป่ี ระกอบ ไปด้วย ช่อื ป้ าย และคณุ ลักษณะ 1.6 ป้ ายปิ ด (Closing tag) หรือท่เี รียกกันว่า แทก็ ปิ ด คือ การแสดงถึงขอบเขต ท่สี ่งผลต่อเน้ือหาหรือท่เี รียกว่าการครอบ (Markup) โดยป้ ายปิ ดเป็นป้ ายคาส่ังท่ปี ระกอบ ไปด้วย < (Left-angle bracket) / (Forward slash) และ > (Right-angle bracket) 1.7 อลี ิเมนท์ (Element) คือ ช่ือเรียกส่วนประกอบท้งั หมดท่ปี ระกอบไปด้วย ป้ ายเปิ ด คุณลักษณะ เน้ือหา และป้ ายปิ ด ซ่ึงอีลิเม้นท์ คือส่วนประกอบหน่ึงๆ ภายในเวบ็ เพจน่ันเอง 1.8 อีลิเม้นทซ์ ้อน (Nested element) คือ อีลิเม้นทท์ ่ปี ระกอบไปด้วยป้ ายเปิ ด และป้ ายปิ ด เช่น <a> </a> หรือ <h1> </h1> เพ่ือแสดงขอบเขตของการครอบ ซ่งึ การครอบ

124 น้ีทาให้อลี ิเม้นทเ์ กดิ การซ้อนกนั ได้ เช่น <a><h1> </h1></a> โดยจะต้องเรียงการซ้อนให้ ถูกต้องตามลาดับด้วยมิเช่นน้ันการแสดงผลจะผิดเพ้ียนไป และ อีลิเม้นท์ว่าง (Empty element) คือ อลี ิเม้นทท์ ่มี ีเฉพาะป้ ายเปิ ดเท่าน้ัน ไม่มีการแสดงขอบเขต เช่น <br> คือการ ข้นึ บรรทดั ใหม่ <hr> คือการตีเส้นในแนวนอน หรือ <img src=“”> คือการแทรกภาพ เป็น ต้น 2. โครงสร้างของเวบ็ เพจ โครงสร้างของเวบ็ เพจหน่ึงๆ ประกอบไปด้วยอลี เิ ม้นทท์ ส่ี าคัญดังน้ี 2.1 อลี ิเม้นทเ์ อชทเี อม็ แอล เป็นอีลิเม้นทท์ ่กี าหนดขอบเขตของภาษาเอชทเี อม็ แอลในเอกสาร รูปแบบของอลี เิ ม้นทเ์ อชทเี อม็ แอลมดี ังน้ี <html> … </html> 2.2 อีลิเม้นทห์ ัว (Head) เป็นอลี ิเม้นทส์ าคัญในการกาหนดสไตล์และนิยามเวบ็ เพจ โดยอลี เิ ม้นทห์ ัวจะอยู่ภายใต้อลี ิมเม้นทเ์ อชทเี อม็ แอล รปู แบบของอลี ิเม้นทห์ ัวมีดงั น้ี <html> <head> … </head> </html> 2.3 อีลิเม้นทช์ ่ือเวบ็ (Title) เป็นอลี ิเม้นทท์ ่อี ยู่ภายใต้อลี ิเม้นทห์ ัว โดยอีลิเม้นท์ ช่อื เวบ็ จะทาให้เวบ็ เบราเซอร์แสดงช่อื เวบ็ บนแถบช่อื เบราเซอร์ได้ (Title bar) รูปแบบของอลี เิ ม้นทช์ ่อื เวบ็ มีดังน้ี <html> <head> <title> … </title> <head> </html>

125 2.4 อีลิเม้นทร์ ่าง (Body) เป็นอลี ิเม้นทท์ ่มี ีขอบเขตกว้างเน่ืองจากเป็นส่วนท่ี สามารถกาหนดอีลิเม้นทอ์ ่ืนๆ ท่ตี ้องการแสดงผลบนหน้าเวบ็ เบราเซอร์ โดยมีลักษณะ คือ <body> </body> และอลี เิ ม้นทร์ ่างจะอยู่ภายใต้อลี ิมเม้นทเ์ อชทเี อม็ แอล รูปแบบของอลี เิ ม้นทร์ ่างมีดงั น้ี <html> <body> … </body> </html> ภาพท่ี 5.2 แสดงโครงสร้างของเวบ็ เพจ

126 การสรา้ งและแสดงผลเอกสารเอชทีเอ็มแอล ในการสร้างไฟล์เอกสารเอชทีเอม็ แอลน้ัน สามารถสร้างได้จากซอฟต์แวร์แก้ไข ข้อความ (Text editor) ท่วั ไป เช่น โน้ตแพด (Notepad) จนถึงซอฟต์แวร์แก้ไขภาษา เอชทเี อม็ แอลโดยเฉพาะ เช่น อดี ิทพลัส (Editplus) แบรก็ เกต็ (Brackets.io) หรือ ดรีมวี เวอร์ (Dreamweaver) เป็นต้น ซ่ึงการใช้ซอฟต์แวร์แก้ไขภาษาเอชทเี อม็ แอลโดยเฉพาะจะ ช่วยให้การเขยี นภาษาเอชทเี อม็ แอลมคี วามสะดวกข้นึ เน่ืองจากซอฟต์แวร์จะมีการกาหนดสี ของคาส่งั ทาให้สะดวกต่อการตรวจสอบมากย่ิงข้ึน ในเอกสารฉบับน้ีจะนาเสนอการสร้าง ไฟล์เอกสารเอชทีเอม็ แอลด้วยซอฟต์แวร์ช่ือว่า แบร็กเกต็ โดยสามารถดาวน์โหลดได้ท่ี http://brackets.io/ ซ่ึงนักออกแบบและพัฒนาเวบ็ ส่วนใหญ่นิยมใช้ในการสร้างไฟลเ์ อกสาร เอชทเี อม็ แอลและสไตลช์ ีท โดยข้นั ตอนในการสร้างและแสดงผลมีดงั น้ี 1. เปิ ดซอฟต์แวร์แบรก็ เกต็ โดยจะปรากฎพ้ืนทส่ี าหรับการเขยี นคาสง่ั ภาพท่ี 5.3 แสดงพ้ืนทเ่ี ขยี นคาสง่ั ของซอฟต์แวร์แบรก็ เกต็ 2. ทาการบนั ทกึ ไฟล์ โดยกาหนดนามสกุลเป็น .html เพ่ือให้ซอฟตแ์ วร์แสดงสขี อง ป้ ายช่อื คาส่งั เอชทเี อม็ แอลได้ถกู ต้อง

127 ภาพท่ี 5.4 แสดงการกาหนดนามสกุล .html 3. ทาการเขียนคาส่งั เอชทเี อม็ แอล โดยส่วนของป้ ายช่ือจะถูกกาหนดเป็นสนี ้าเงิน และส่วนของเน้ือหาจะถูกกาหนดเป็นสดี า เม่ือทาการเขียนคาส่งั แล้วให้ทาการบันทกึ ไฟล์ เพ่ือนาไปแสดงผลบนเวบ็ เบราเซอร์ ภาพท่ี 5.5 แสดงการเขยี นคาสง่ั เอชทเี อม็ แอล 4. การแสดงผลคาส่ังเอชทเี อม็ แอลบนเวบ็ เบราเซอร์ โดยการเข้าถึงไฟล์เอกสาร เอชทเี อม็ แอลและดับเบ้ิลคลิก จากน้ันเวบ็ เบราเซอร์จะทาการแปลภาษาเอชทเี อม็ แอลและ ฉาบข้อมูลบนหน้าจอ

128 ภาพท่ี 5.6 แสดงการแปลภาษาเอชทเี อม็ แอลและฉาบข้อมูลบนเวบ็ เบราเซอร์ การกากบั ดว้ ยภาษาเอชทีเอ็มแอลพ้ นื ฐาน 1. การกากบั หัวเร่อื ง (Heading) คาสง่ั ทใ่ี ช้ในการกากบั ข้อความให้เป็นหัวเร่ืองมรี ูปแบบ ดังน้ี <hn> HELLO WORLD </hn> โดย h คือ ป้ ายช่ือท่กี ากบั ข้อความให้เป็นหัวเร่อื ง n คือ ลาดับความสาคัญของหัวเร่ือง ค่าของ n เป็นไปได้ต้ังแต่ 1-6 โดยท่ี 1 หมายถงึ หัวเร่ืองมีความสาคญั มาก (Most important) ตัวอักษรจึงมีขนาดใหญ่ท่สี ดุ และ 6 หมายถึง หัวเร่ืองท่มี ีความสาคัญน้อยท่สี ดุ (Least important) ตัวอกั ษรจึงมีขนาดเลก็ ท่สี ดุ ตวั อย่าง การกากบั ข้อความให้เป็นหัวเร่อื ง <html> <head> <title> หวั เรอื่ ง (Heading) </title> </head> <body> <h1>หลักการออกแบบเวบ็ </h1> <h2>หลกั การออกแบบเวบ็ </h2> <h3>หลกั การออกแบบเว็บ</h3> <h4>หลักการออกแบบเวบ็ </h4> <h5>หลักการออกแบบเวบ็ </h5> <h6>หลกั การออกแบบเว็บ</h6> </body> </html>

129 2. การกากบั ย่อหน้า (Paragraph) คาส่งั ย่อหน้ามปี ระโยชน์ในการกาหนดขอบเขตให้แก่ข้อความหรือบทความ มี รูปแบบ ดังน้ี <p> ขอ้ ความ </p> ตวั อย่าง การกากบั ย่อหน้าให้แก่ข้อความ <html> <head> <title> ย่อหนา้ (Paragraph) </title> </head> <body> <h2>ความหมายของโฮมเพจ</h2> <p>โฮมเพจ (Home Page) คือ หนา้ เวบ็ ทปี่ รากฎในหนา้ แรกของเวบ็ ไซต์ </p> <h2>ความหมายของเว็บไซต์</h2> <p>เวบ็ ไซต์ (Web Site) คือ หนา้ เวบ็ ทั้งหมดท่ถี ูกจดั เก็บไว้ด้วยกัน </p> </body> </html> 3. การกากบั ข้นึ บรรทดั ใหม่ (Single line break) ในเอกสารเอชทเี อม็ แอล ข้อความต่างๆ จะปรากฎต่อเน่ืองไปเร่ือยๆ โดยการ แยกข้อความออกจากกนั และข้นึ บรรทดั ใหม่ในเอกสารเอชทเี อม็ แอล มีรูปแบบ ดงั น้ี <br> ตวั อย่าง การกากบั ข้นึ บรรทดั ใหม่ <html> <head> <title> การข้ึนบรรทดั ใหม่ (Single break line)

130 </title> </head> <body> โฮมเพจ (Home Page) คอื หน้าเวบ็ ท่ี ปรากฎในหนา้ แรกของเว็บไซต์ <br> เว็บไซต์ (Web Site) คอื หนา้ เวบ็ ทั้งหมดท่ถี กู จัดเกบ็ ไว้ด้วยกนั </body> </html> 4. การกากบั เส้นแบ่งความ (Thematic break) หน้าเวบ็ เพจทน่ี าเสนอบทความอาจมีการแบ่งส่วนของบทความเพ่ือให้ผู้อ่านเกิด ความสะดวก โดยการแบ่งบทความออกจากกนั นิยมใช้การตีเส้นแบ่งความ ซ่ึงมีลักษณะเป็น เส้นพาดในแนวนอน <hr> ป้ าย <hr> ในภาษาเอชทเี อม็ แอลรุ่นท่ี 4 หมายถึงการตีเส้น (Horizontal rule) แต่ในเอชทเี อม็ แอลร่นุ ท่ี 5 (ร่นุ ปัจจุบนั ) หมายถงึ การแบ่งใจความ (Thematic break) ตวั อย่าง การกากบั เส้นแบ่งความ <html> <head> <title> การแบง่ ใจความ (Thematic break) </title> </head> <body> <h2>ความหมายของโฮมเพจ</h2> <p>โฮมเพจ (Home Page) คือ หน้าเว็บที่ปรากฎในหนา้ แรกของ เว็บไซต์ </p> <hr> <h2>ความหมายของเวบ็ ไซต์</h2> <p>เว็บไซต์ (Web Site) คือ หนา้ เวบ็ ท้งั หมดทถ่ี กู จดั เกบ็ ไวด้ ว้ ยกนั </p> </body> </html>

131 5. การกากบั คาอธบิ าย (Comment) เอกสารเอชทเี อม็ แอลสามารถระบุคาอธบิ ายในเอกสารได้ โดยเวบ็ เบราเซอร์จะ ไม่แสดงข้อความทอ่ี ยู่ในป้ ายคาอธบิ าย โดยป้ ายคาอธบิ ายมรี ูปแบบดังน้ี <!-- comment --> ตัวอย่าง การกากบั คาอธบิ าย <html> <head> <title> การกาหนดคาอธิบาย (Comment) </title> </head> <body> <!-- แกไ้ ขลา่ สดุ วนั ที่ 8 มนี าคม 2560 --> <h1>หลักการออกแบบเวบ็ </h1> </body> </html> 6. การกากบั ฉลากอกั ขระ (Meta for charset) กลุ่มของอักขระ (Character set: charset) คือ กลุ่มของอักขระท่เี วบ็ เบราเซอร์ร องรับ โดยในภาษาเอชทีเอ็มแอลรุ่นท่ี 5 จะสนับสนุนยูทีเอฟแปด (Unicode Transformation Format-8: UTF-8) ซ่ึงรองรับอกั ขระในหลายภาษา รวมถึงภาษาไทย ภาพท่ี 5.7 แสดงหน้าเวบ็ เพจท่ไี ม่มกี ารกากบั ฉลากอกั ขระ

132 ยูทเี อฟแปด (UTF-8) เป็นมาตรฐานกลุ่มอกั ขระท่เี พียงพอสาหรับการแสดงผล ข้อมลู อเี มลลแ์ ละเวบ็ เพจต่างๆ บนเวบ็ เบราเซอร์ รูปแบบการกากบั ฉลาก (Meta) กล่มุ อกั ขระมาตรฐาน UTF-8 <html> <head> <meta charset=\"UTF-8\"> </head> </html> ตัวอย่าง การกากบั ฉลาก (Meta) กล่มุ อกั ขระมาตรฐาน UTF-8 <html> <head> <meta charset=\"UTF-8\"> <title> การกาหนด Charset </title> </head> <body> <h1>หลักการออกแบบเวบ็ </h1> </body> </html> การจดั รูปแบบ 1. การกากบั ตวั ย่อ (Abbreviation) ในภาษาเอชทเี อม็ แอลมีป้ ายสาหรับการกากบั ตวั ย่อ ทาให้ผู้อ่านเวบ็ ไซต์สามารถ เหน็ คาเตม็ ได้โดยการนาเมาสช์ ้ีไปท่ตี วั ย่อน้ันๆ กจ็ ะปรากฎคาเตม็ ข้นึ มา รปู แบบในการกากบั ตัวย่อ มดี ังน้ี <abbr title=\"คาเต็ม\"> คายอ่ ท่ีแสดงบนเว็บเบราเซอร์ </abbr>

133 ตวั อย่าง การกากบั ตวั ย่อและคาเตม็ <html> <head> <title> การกาหนดตวั ย่อ (Abbr) </title> </head> <body> ภาษา <abbr title=\"Hyper Text Markup Language\">HTML</abbr> คือ ภาษาที่ใชใ้ นการแสดงเน้อื หาและโครงสร้างของเวบ็ ไซต์ </body> </html> 2. การกากบั ตัวหนา (Bold) มีรูปแบบในการกากบั ตวั หนาดงั น้ี <b> ข้อความ </b> ตัวอย่าง การกากบั ตัวย่อและคาเตม็ <html> <head> <meta charset=\"UTF-8\"> </head> <body> HTML <b>HTML</b> </body> </html> 3. การกากบั ทศิ ทางข้อความ (Bi-Directional Override) ปกติแล้วทศิ ทางของข้อความจะเรียงจากซ้ายไปขวา แต่สามารถกาหนดทศิ ทางให้ เร่ิมจากขวาไปซ้ายได้ โดยการใช้ป้ าย <bdo> และกาหนดคุณลักษณะ (Attribute) dir (Direction) ให้มคี ่า rtl (Right to left)

134 รปู แบบในการกากบั ทศิ ทางจากขวาไปซ้ายดงั น้ี <bdo dir=“rtl”> ขอ้ ความ </bdo> ตัวอย่าง การกากบั ทศิ ทางข้อความจากขวาไปซ้าย <html> <head> <meta charset=\"UTF-8\"> </head> <body> Hyper Text Markup Language <br> <bdo dir=\"rtl\">Hyper Text Markup Language </bdo> </body> </html> 4. การกากบั ประเภทอกั ษร (Text) ประเภทของตวั อกั ษรท่มี คี วามแตกต่างกันกส็ ามารถส่อื ความหมายท่แี ตกต่างกัน ด้วย เช่น ประเภทของตัวอกั ษรทว่ั ไปกบั ตวั อกั ษรท่เี ป็นคาสง่ั โปรแกรมคอมพิวเตอร์ เป็นต้น ดังน้ันในภาษาเอชทเี อม็ แอลจงึ รองรับการแสดงผลรูปแบบอกั ษรท่แี ตกต่างกนั ดังน้ี 4.1 อกั ษรท่ถี ูกเน้นยา้ (Emphasized text) รูปแบบการกากบั อกั ษรท่ถี ูกเน้นยา้ <em> ขอ้ ความ </em> 4.2 อกั ษรทส่ี าคัญ (Strong text) รูปแบบการกากบั อกั ษรท่สี าคญั <strong> ขอ้ ความ </strong>

135 4.3 อกั ษรทส่ี าคัญน้อย (Smaller text) รูปแบบการกากบั อกั ษรทส่ี าคญั น้อย <small> ขอ้ ความ </small> 4.4 อกั ษรประเภทคาส่งั โปรแกรมคอมพิวเตอร์ (Computer code) ประกอบไป ด้วยป้ าย 3 ความหมาย คอื <code> <samp> และ <kbd> รปู แบบการกากบั อกั ษรประเภทคาสง่ั โปรแกรมคอมพิวเตอร์ <kbd> ข้อความ </kbd> ตวั อย่าง การกากบั ประเภทอกั ษร <html> <head> <meta charset=\"UTF-8\"> </head> <body> NORMAL: WEB DESIGN<br> <em>WEB DESIGN</em><br> <strong>WEB DESIGN</strong><br> <small>WEB DESIGN</small><br> <code>CODE: print(\"Hello World\");</code><br> <samp>SAMP: Hello World</samp><br> <kbd>KBD: alt+Shift</kbd><br> </body> </html> 5. การกากบั แบบอกั ษร (Font) การกาหนดแบบอักษรในภาษาเอชทเี อม็ แอลสามารถกากับด้วยป้ ายช่ือ <font> </font> และปรับแต่งลักษณะได้จากแอต็ ทริบิวท์ เช่น สี (color) ขนาด (size) สกุลอักษร (face) เป็นต้น ซ่ึงในมาตรฐานของภาษาเอชทเี อม็ แอลรุ่นท่ี 5 ไม่สนับสนุนการใช้ป้ ายช่ือ <font> และสนับสนุนให้ใช้สไตลช์ ที (CSS) ในการกาหนดแบบอกั ษรแทน แต่เวบ็ เบราเซอร์

136 กย็ งั สามารถแปลป้ ายช่อื <font> ได้อย่างถูกต้อง เน่ืองจากจาเป็นต้องรอบรับเวบ็ ไซต์ในอดีต ท่ใี ช้ป้ ายช่อื <font> ด้วย รปู แบบในการกากบั แบบอกั ษรมีดงั น้ี <font size=\"…\" color=\"…\" face=\"…\">ขอ้ ความ</font> ตวั อย่าง การกากบั แบบอกั ษร <html> <head> <meta charset=\"UTF-8\"> </head> <body> <p><font size=\"1\" color=\"red\"> Web Design</font></p> <p><font size=\"4\" face=\"serif\"> Web Design</font></p> <p><font size=\"6\" face=\"verdana\"> Web Design</font></p> </body> </html> 6. การกากบั ตวั เอยี ง (Italic) มรี ปู แบบในการกากบั ตวั เอยี งดังน้ี <i> ขอ้ ความ </i> ตวั อย่าง การกากบั ตัวเอยี ง <html> <head> <meta charset=\"UTF-8\"> </head> <body> HTML <i>HTML</i> </body> </html>

137 7. การกากบั มาร์ค (Mark) การกากับมาร์คข้อความ มีลักษณะคล้ายการทาไฮไลท์ (Highlight) โดยมี วตั ถุประสงคเ์ พ่ือทาให้ข้อความมลี ักษณะเด่นข้นึ รูปแบบในกากบั มาร์คดงั น้ี <mark> ข้อความ </mark> ตัวอย่าง การกากบั มาร์ค <html> <head> <meta charset=\"UTF-8\"> </head> <body> HTML <mark>HTML</mark> </body> </html> 8. การกากบั รปู แบบตามทจ่ี ดั ไว้กอ่ นหน้า (Preformatted text) ในการนาเสนอข้อความหรือเน้ือหาน้ัน หากต้องการนาเสนอข้อความท่มี ีรูปแบบ ตามท่ไี ด้จัดไว้ก่อนหน้า ควรใช้ป้ ายช่ือ <pre>…</pre> เพ่ือลดการระบุป้ ายช่ืออ่นื ๆ โดยไม่ จาเป็ น รูปแบบในกากบั รปู แบบตามท่จี ดั ไว้กอ่ นหน้า <pre> ขอ้ ความ </pre>

138 ตวั อย่าง การกากบั รูปแบบตามทจ่ี ัดไว้กอ่ นหน้า <html> <head> <meta charset=\"UTF-8\"> </head> <body> <p>Principle of Web Design</p> <pre> Principle of Web Design</pre> </body> </html> 9. การกากบั คาพดู (Quotation) การกากบั คาพูดจะมลี กั ษณะเป็นข้อความท่อี ยู่ภายใต้เคร่ืองหมายอญั ประกาศคู่ “” (Double quotation) รปู แบบในการกากบั คาพดู <q> ข้อความ </q> ตวั อย่าง การแสดงผลรปู แบบตามทไ่ี ด้จดั ไว้ก่อนหน้า <html> <head> <meta charset=\"UTF-8\"> </head> <body> HTML อ่านว่า <q> Hyper Text Markup Language </q> </body> </html> 10. การกากบั ขดี ทบั ตวั อกั ษร (Delete text) การกากบั ขดั ทบั ตัวอกั ษรในอดีตใช้ป้ ายช่ือ <strike> แต่ในเอชทเี อม็ แอลรุ่นท่ี 5 กาหนดให้ใช้ป้ ายช่อื <del> แทน

139 รปู แบบในการกากบั ขดี ทบั ตัวอกั ษร <del> ขอ้ ความ </del> ตวั อย่าง การกากบั ขดี ทบั ตวั อกั ษร <html> <head> <meta charset=\"UTF-8\"> </head> <body> Animal: Lion <del>Lavender</del> Cat Dog </body> </html> 11. การกากบั เส้นใต้อกั ษร (Underline text) รปู แบบในการกากบั เส้นใต้อกั ษร <u> ขอ้ ความ </u> ตวั อย่าง การกากบั เส้นใต้อกั ษร <html> <head> <meta charset=\"UTF-8\"> </head> <body> HTML <u>HTML</u> </body> </html>

140 12. การกากบั ตัวยก (Superscripted text) และตวั ห้อย (Subscripted text) รูปแบบในการกากบั ตัวยก ^{ข้อความ} รปู แบบในการกากบั ตัวห้อย _{ขอ้ ความ} ตวั อย่าง การกากบั ตัวยกและตวั ห้อย <html> <head> <meta charset=\"UTF-8\"> </head> <body> ข้อความ^{ตวั ยก} <br> ขอ้ ความ_{ตัวหอ้ ย} </body> </html> การกากบั ภาพและมีเดีย 1. การกากบั ภาพ (Image) รูปแบบการกากบั ภาพด้วยภาษาเอชทเี อม็ แอล <img src=“…” alt=“…” width=“…” height=“…” > โดยสามารถกาหนดคุณลกั ษณะ (Attribute) ให้แก่อลี เิ ม้นทไ์ อเอม็ จไี ด้ดงั น้ี 1.1 src คอื แหล่งท่จี ัดเกบ็ ภาพ โดยมีลกั ษณะเป็นยูอาร์แอล (Uniform resource locator: URL) แบ่งออกเป็น 2 ประเภท

141 1.1.1 ยูอาร์แอลสมั บูรณ์ (Absolute URL) คือ การอ้างถึงท่อี ยู่ของภาพ ด้ วยยู อ าร์ แอลแบ บ เต็ม และวิธีก ารน้ี เน้ น ก าร อ้ างถึงจาก เว็บ ไซต์อ่ืน ๆ เช่ น http://www.example.co.th/picture.jpg เป็นต้น ตัวอย่ างการกากับคุณลัก ษณะให้ แก่อีลิเม้ นท์ไอเอ็มจีโดยใช้ ยู อาร์แอล สมั บูรณ์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"https://c1.static flickr.com/1/133/ 397190113_0973e 9a27e_b.jpg\"> </body> </html> 1.1.2 ยูอาร์แอลสมั พัทธ์ (Relative URL) คือ การอ้างถึงท่อี ยู่ภาพภายใน เวบ็ ไซต์หรือแม่ข่ายเวบ็ เดียวกัน (Directory) โดยยูอาร์แอลสัมพัทธ์มีลักษณะส้นั กว่ายูอาร์ แอลสมั บูรณ์ เช่น picture.jpg หรือ folder/picture.jpg เป็นต้น ตัวอย่ างการกากับคุณลักษณะให้ แก่อีลิเม้ นท์ไอเอ็มจีโดยใช้ ยู อาร์แอล สมั พัทธ์ <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"ducks.jpg\"> </body> </html>

142 1.2 alt หรือ Alternate คอื การกากบั ข้อความสารองให้แก่รูปภาพ กรณีทภ่ี าพไม่ สามารถแสดงผลได้จะปรากฎเป็ นข้อความสารองแทน และกรณีผู้พิการทางการมองเห็น อาจใช้โปรแกรมสาหรับอ่านข้อความสารองเพ่ือให้ผู้พิการรับข้อมูลทางการได้ยนิ ตัวอย่างการกากบั คุณลักษณะข้อความสารองให้แก่อลี เิ ม้นทไ์ อเอม็ จี <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"image/ducks.jpg\" alt=\"Mallard Ducks in Flight\"> </body> </html> 1.3 width คอื ความกว้าง และ height คอื ความสงู ของภาพ โดยการกากบั ขนาด ด้วยความสงู และความกว้างมี 2 หน่วยคอื 1.3.1 การกากับขนาดแบบคงท่ี (Fixed) คือการกากบั โดยใช้หน่วยพิกเซลล์ (Pixel) เช่น width=“50px” หมายถงึ ขนาดภาพกว้าง 50 พิกเซลล์ 1.3.2 การกากบั แบบยืดหยุ่น (Flexible) คือการกากับโดยใช้หน่วยร้อยละ (Percentage) เช่น width=“50%” หมายถึง ขนาดภาพกว้างคร่ึงหน่ึงของหน้าจอเวบ็ เบรา เซอร์ในแนวนอน ตวั อย่างการกากบั คุณลกั ษณะความกว้างและความสงู ให้แก่อลี เิ ม้นทไ์ อเอม็ จี <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"ducks.jpg\" width=\"50px\"> <img src=\"ducks.jpg\" width=\"50%\"> </body> </html>

143 2. การกากบั แผนทีร่ ูปภาพ แผนทข่ี องรปู ภาพ คอื การกากบั ไฮเปอร์ลิงค์บนภาพ โดยมีการทางานร่วมกับระ ว่างป้ ายช่ือ 3 ชนิด คือ <img> <map> และ <area> โดยป้ ายช่ือ <img> จะต้องระบุแอต็ ทริ บวิ ท์ usemap เพ่ือนาแผนทม่ี าใช้ทาบบนรูปภาพ การกากับแผนท่รี ูปภาพเหมาะสาหรับการ กากบั ขนาดภาพแบบคงท่ี (Fixed) ด้วยหน่วยพิกเซลล์ (Pixel) รูปแบบการกากบั แอต็ ทริบิวท์ usemap รปู ภาพ <img src=\"…\" usemap=\"#ช่ือแผนท่รี ปู ภาพ\"> การกากบั ป้ ายช่อื <map> จะต้องกากบั แอต็ ทริบิวท์ name หรือ ช่ือแผนทร่ี ปู ภาพ ทาให้ป้ ายช่อื <img> เรียกแผนทร่ี ูปภาพเพ่ือนามาทาบบนรปู ภาพได้ รูปแบบการกากบั ป้ ายช่อื <map> และแอต็ ทริบวิ ท์ name <map name=\"ช่ือแผนท่รี ปู ภาพ\">…</map> เม่ือกากับป้ ายช่ือ <map> แล้ว จะต้องกากับป้ ายช่ือ <area> เพ่ือระบุตาแหน่ง บริเวณบนภาพ เรียกว่า การกากับพิกัด (Coordinates) การกากับพิกดั น้ัน มี 3 ลักษณะ ดังน้ ี 2.1 กากบั พิกดั พ้ืนท่สี ่เี หล่ียม (Rectangle) ประกอบไปด้วยกาหนดค่าแอต็ ทริ บวิ ทด์ ังน้ี 2.1.1 แอต็ ทริบวิ ทร์ ปู ร่าง (shape) เทา่ กบั rect 2.1.2 แอต็ ทริบิวทพ์ ิกัด (coords) เป็นตัวเลข จานวน 4 ค่า เรียงตามพิกัด ซ้าย (Left) บน (Top) ขวา (Right) และล่าง (Bottom) 2.1.3 แอต็ ทริบวิ ทเ์ ช่อื มโยง (href) คอื ยูอาร์แอลทต่ี ้องการเช่ือมโยง 2.1.4 แอต็ ทริบิวทช์ ่อื สารอง (alt) คอื ช่อื สารองของพิกดั

144 ภาพท่ี 5.7 แสดงพิกดั พ้ืนทส่ี ่เี หล่ียม รปู แบบการกากบั พิกดั พ้ืนท่สี ่เี หล่ียม <map name=\"…\"> <area shape=\"rect\" coords=\"ซ้าย,บน,ขวา,ล่าง\" href=\"…\" alt=\"…\"> </map> ตวั อย่างการกากบั พิกดั พ้ืนทส่ี ่เี หล่ยี ม <html> <head> <meta charset=\"UTF-8\"> </head> <body> <img src=\"ontable.jpg\" usemap=\"#table\"> <map name=\"table\"> <area shape=\"rect\" coords=\"318,70,466,282\" href=\"notebook.html\" alt=\"a black notebook\"> </map> </body> </html>

145 2.2 กากับพิกัดพ้ืนท่วี งกลม (Circle) ประกอบไปด้วยกาหนดค่าแอต็ ทริบิวท์ ดงั น้ี 2.2.1 แอต็ ทริบิวทร์ ปู ร่าง (shape) เทา่ กบั circle 2.2.2 แอต็ ทริบิวทพ์ ิกดั (coords) เป็นตัวเลข จานวน 3 ค่า เรียงตามพิกดั ซ้าย (Left) บน (Top) และรัศมี (Radius) 2.2.3 แอต็ ทริบิวทเ์ ช่อื มโยง (href) คือ ยูอาร์แอลท่ตี ้องการเช่ือมโยง 2.2.4 แอต็ ทริบวิ ทช์ ่อื สารอง (alt) คือ ช่อื สารองของพิกดั ภาพท่ี 5.8 แสดงพิกดั พ้ืนทว่ี งกลม รูปแบบการกากบั พิกดั พ้ืนทว่ี งกลม <map name=\"…\"> <area shape=\"circle\" coords=\"ซา้ ย,บน,รศั ม\"ี href=\"…\" alt=\"…\"> </map>