หน่วยที่ 2 โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C

หนว่ ยการเรียนร้ทู ่ี 2 Hyper Text Markup Language โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C 3 ชวั่ โมง

โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C หนว่ ยการ เรยี นร้ทู ี่ 2 โครงสรา้ งของการ เขยี น HTML ตาม มาตรฐาน W3C 1. โครงสรา้ งของการเขยี น HTML 2. มาตรฐาน W3C 1.1 ภาษา HTML 1.2 ววิ ัฒนาการของภาษา HTML 2.1 ความหมายและทมี่ าของ W3C 1.3 โครงสรา้ งของภาษา HTML 1.4 แทก็ คาส่งั ภาษา HTML 2.2 หน้าทข่ี อง W3C กับ 1.5 ขอ้ กาหนดในการเขียนแท็ก มาตรฐานของเว็บไซต์ 1.6 แอททริบวิ ส์ (Attribute) 2.3 ประโยชนข์ องการทาเวบ็ ตาม 1.7 เริ่มสรา้ งเว็บเพจดว้ ย HTML มาตรฐาน W3C 2.4 การตรวจสอบเวบ็ เพจตาม มาตรฐาน W3C 2901-2006 การพัฒนาเว็บด้วยภาษาเอชทีเอม็ แอล 63

โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C หนว่ ยการ เรยี นรทู้ ่ี 2 1. โครงสร้างของการเขยี น HTML 2. มาตรฐาน W3C ภาษา HTML (HYPER TEXT MARKUP LANGUAGE) เป็นภาษาหน่ึงท่ีใช้ในการ สร้างเว็บเพจ โดยเป็นภาษาที่มีโครงสร้าง มีรูปแบบท่ีชัดเจน มีกระบวนการทางานที่เป็นข้ันตอน เขา้ ใจงา่ ย จึงเหมาะทจี่ ะเป็นภาษาพื้นฐานในการสร้างเว็บเพจ อีกท้ังภาษา HTML เป็นภาษาที่ได้รับ การกาหนดมาตรฐานจาก W3C ซง่ึ เปน็ องคก์ รสากลท่ีทาหน้าท่ีกาหนด และดูแลกระบวนการทางาน ของการตดิ ตอ่ สอ่ื สารขอ้ มูลผา่ นทาง WWW เพ่ือให้มีความรู้ ความเข้าใจ มีทักษะ และมีความสนใจใฝ่รู้เก่ียวกับโครงสร้างของ การเขยี น HTML ตามมาตรฐาน W3C และสามารถนาไปใช้ประโยชนใ์ นการพฒั นาชิน้ งานได้ 1. บอกความหมายของ HTML ได้ 2. บอกววิ ัฒนาการของภาษา HTML ได้ 3. เขียนโครงสรา้ งของภาษา HTML ได้ 4. บอกความหมายของแท็กคาสงั่ ได้ 5. บอกข้อกาหนดของแท็กคาส่งั ได้ 6. อธิบายความหมายของแอททรบิ วิ สไ์ ด้ 7. เขียนแทก็ คาสง่ั ภาษา HTML ในการสร้างเวบ็ เพจเบอื้ งตน้ ได้ 8. บอกความหมายและทม่ี าของ W3C ได้ 9. บอกมาตรฐานของ W3C ที่เกย่ี วกบั HTML ได้ 10. บอกประโยชน์ของการทาเวบ็ ตามมาตรฐาน W3C ได้ 11. อธิบายขัน้ ตอนการตรวจสอบเวบ็ ของ W3C ได้ 12. มคี วามสนใจใฝ่ร้เู กย่ี วกบั โครงสรา้ งของภาษา HTML ตามมาตรฐาน W3C 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 64

โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C 1. โครงสร้างของการเขยี น HTML 1.1 ภาษา HTML 1.2 ววิ ฒั นาการของภาษา HTML 1.3 โครงสร้างของภาษา HTML 1.4 แทก็ คาสั่งภาษา HTML 1.5 ขอ้ กาหนดในการเขียนแท็ก 1.6 แอททรบิ วิ ส์ (Attribute) 1.7 เรม่ิ สรา้ งเวบ็ เพจดว้ ย HTML 2. มาตรฐาน W3C 2.1 ความหมายและทม่ี าของ W3C 2.2 หนา้ ที่ของ W3C กบั มาตรฐานของเว็บไซต์ 2.3 ประโยชนข์ องการทาเวบ็ ตามมาตรฐาน W3C 2.4 การตรวจสอบเวบ็ เพจตามมาตรฐาน W3C 2901-2006 การพฒั นาเว็บด้วยภาษาเอชทีเอม็ แอล 65

โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C หนว่ ยการ เรยี นรู้ที่ 2 ภาษา HTML (Hyper Text Markup Language) เป็นภาษาหน่ึงท่ีใช้ในการสร้าง เว็บเพจ โดยเปน็ ภาษาทมี่ โี ครงสรา้ ง มรี ปู แบบท่ชี ดั เจน มกี ระบวนการทางานที่เป็นข้ันตอน เข้าใจง่าย จึงเหมาะทีจ่ ะเป็นภาษาพน้ื ฐานในการสรา้ งเว็บเพจ อีกท้ังภาษา HTML เป็นภาษาที่ได้รับการกาหนด มาตรฐานจาก W3C ซ่ึงเป็นองค์กรสากลท่ีทาหน้าที่กาหนด และดูแลกระบวนการทางานของการ ตดิ ตอ่ สื่อสารขอ้ มูลผ่านทาง WWW เพ่ือให้มีความรู้ ความเขา้ ใจ มที ักษะ และเจตคติท่ีดีเกย่ี วกับโครงสร้างของการเขียน HTML ตามมาตรฐาน W3C และสามารถนาไปใช้ประโยชนใ์ นการพฒั นาชิ้นงานได้ 1. บอกความหมายของ HTML ได้ 2. บอกวิวฒั นาการของภาษา HTML ได้ 3. เขยี นโครงสร้างของภาษา HTML ได้ 4. บอกความหมายของแท็กคาส่ังได้ 5. บอกข้อกาหนดของแท็กคาสัง่ ได้ 6. อธิบายความหมายของแอททริบวิ ต์ได้ 7. เขียนแท็กคาส่งั ภาษา HTML ในการสรา้ งเวบ็ เพจเบือ้ งตน้ ได้ 8. บอกความหมายและทม่ี าของ W3C ได้ 9. บอกมาตรฐานของ W3C ที่เกีย่ วกับ HTML ได้ 10. บอกประโยชน์ของการทาเว็บตามมาตรฐาน W3C ได้ 11. อธบิ ายขั้นตอนการตรวจสอบเวบ็ ของ W3C ได้ 12. มคี วามสนใจใฝ่รเู้ ก่ยี วกับโครงสร้างของภาษา HTML ตามมาตรฐาน W3C 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล 66

โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C 1. โครงสรา้ งของการเขยี น HTML 1.1 ภาษา HTML 1.2 วิวฒั นาการของภาษา HTML 1.3 โครงสรา้ งของภาษา HTML 1.4 แท็กคาสัง่ ภาษา HTML 1.5 ข้อกาหนดในการเขียนแทก็ คาสง่ั ภาษา HTML 1.6 แอททริบวิ ต์ (Attribute) 1.7 เร่มิ สร้างเวบ็ ดว้ ย HTML 2. มาตรฐาน W3C 2.1 ความหมายและท่มี าของ W3C 2.2 หนา้ ที่ของ W3C กับมาตรฐานของเวบ็ ไซต์ 2.3 ประโยชน์ของการทาเวบ็ ตามมาตรฐาน W3C 2.4 การตรวจสอบเวบ็ เพจตามมาตรฐาน W3C 2901-2006 การพัฒนาเว็บด้วยภาษาเอชทีเอม็ แอล 67

โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C หนว่ ยการ เรียนรทู้ ่ี 2 1. โครงสรา้ งการเขยี น HTML HTML หรือ (Hyper Text Markup Language) คอื ภาษาคอมพิวเตอร์รูปแบบหนึ่ง ทีม่ โี ครงสร้างการเขียนคาสั่งของภาษาโดยอาศัยตัวกากับที่เรียกว่า แท็ก (Tag) ควบคุมการแสดงผล โดยแสดงผ่านโปรแกรมเว็บเบราว์เซอร์และสามารถแสดงข้อมูลได้หลายรูปแบบ เช่น ข้อความ, รูปภาพ, ภาพเคล่ือนไหว, เสียง แท็กอาจจะมีส่วนขยายท่ีเรียกว่า แอททริบิวต์ (Attribute) สาหรับ ระบุเงอ่ื นไขของคาสัง่ ท่ีเปน็ รปู แบบเฉพาะ หรือควบคุมการแสดงผลของเวบ็ เพจ HTML เป็นภาษาหลักท่ีใช้ในการสร้างไฟล์เอกสารเว็บเพจ โดยมีแนวคิดจากการ สร้างเอกสารที่สามารถเช่ือมโยงกับข้อมูลต่าง ๆ ได้ เรียกว่า เอกสารไฮเปอร์เท็กซ์ ( Hypertext Document) ซ่ึงพัฒนามาจากภาษา SGML (Standard Generalized Markup Language) ในปี ค.ศ. 1990 โดย Tim Berners-Lee ภาษา HTML ได้รับการพัฒนาและถูกนาไปใช้อย่างแพร่หลาย ผา่ นระบบ World Wide Web : WWW โดยมรี ุ่น (version) ของภาษา HTML รนุ่ ต่าง ๆ ดงั น้ี 1.2.1 HTML 1.0 เกิดข้ึนในปี ค.ศ. 1993 พัฒนาโดย Tim Berners-Lee และ Dave Raggett ได้กาหนดให้เอกสาร HTML ท่ีพัฒนาขึ้นจากการเขียนด้วยมาตรฐานใด ๆ ก็ต้องให้ เอกสารทส่ี ร้างนนั้ สามารถอา่ นได้ 1.2.2 HTML 2.0 เกิดข้นึ ในปี ค.ศ. 1995 พัฒนาโดย IETF (Internet Engineering Task Force) ซึง่ มุ่งใหเ้ อกสาร HTML สามารถเปิดแสดงผลกับเวบ็ เบราวเ์ ซอร์ทใ่ี ช้งานทั่วไปได้ 1.2.3 HTML 3.0 เกิดขึ้นในปี ค.ศ. 1995 โดยมีการพัฒนาความสามารถของภาษา HTML ใหเ้ พม่ิ ขน้ึ โดยสามารถทางานเกยี่ วกับตาราง การปรับข้อความล้อมรอบภาพ และยังสามารถ ให้เว็บเบราวเ์ ซอรย์ อ้ นกลบั ไปเปิดหนา้ เวบ็ เพจก่อนหน้าทเ่ี คยเปดิ มากอ่ นได้ 1.2.4 HTML 3.2 เกิดขึ้นในปี ค.ศ. 1996 ได้เพิ่ม Element และ Attribute ที่ สามารถทางานร่วมกับหลาย ๆ เว็บเบราวเ์ ซอรไ์ ด้มากข้ึน 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 68

โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C 1.2.5 HTML 4.0 เกิดขึ้นในปี ค.ศ. 1997 ได้มีการพัฒนามาตรฐานของภาษา HTML โดยองค์กรกลางที่ช่ือว่า W3C (World Wide Web Consortium) เพื่อพัฒนาเทคโนโลยี WWW โดยไดเ้ พมิ่ ประสิทธภิ าพในการทางานด้วย Style Sheet, Frame และเทคนิคพิเศษ เช่น การ ฝงั ออบเจค็ ของโปรแกรมเสริมเพื่อแสดงภาพและเสียง การสร้างฟอร์ม และการใช้งานร่วมกับภาษา Script อืน่ 1.2.6 HTML 5.0 ในปัจจุบัน W3C ได้พัฒนาภาษา HTML โดยใช้มาตรฐานของ ISO (International Organization for Standardization) ให้มีการทางานที่หลากหลายมากกว่ารุ่น อื่นแต่ HTML 5 ก็ยังเป็นรุ่นที่ไม่สมบรู ณ์แบบทเี ดยี ว สาเหตจุ ากหนว่ ยงานหลัก 2 หน่วยงานคือ W3C มหี นา้ ที่รบั ผดิ ชอบการพฒั นาเทคโนโลยี HTML อยา่ งเป็นทางการ เกิดความล่าช้าในการพัฒนา จึงทา ใหต้ ัวแทนของบริษัทไอทียักษ์ใหญ่ เชน่ แอปเปิล โอเปร่า มอซซิลลา ได้จับมือกันเป็นกลุ่ม WHATWG (Web Hypertext Application Technology Working Group) พัฒนาสเป็ค (Speck) ของ HTML5 ออกมา ทาง WHATWG ตอ้ งการให้มาตรฐาน HTML 5 มีการเปลี่ยนแปลงได้อย่างสม่าเสมอ ไม่ตายตัว ซ่ึงสามารถเปล่ียนแปลงตามสถานการณ์ และความต้องการทางด้านเทคโนโลยี ต่างกับ W3C ทต่ี ้องการพฒั นามาตรฐาน HTML 5 ใหม้ คี วามสาเรจ็ กอ่ น แม้ว่า HTML 5 ยังไม่สมบูรณ์ แต่ผู้ท่ี พัฒนาอุปกรณ์ต่าง ๆ พร้อมท้ังโปรแกรมเว็บเบราว์เซอร์ต่าง ๆ ก็เร่ิมท่ีจะมาสนับสนุนการใช้งาน HTML 5 กันมากขึน้ โดย HTML5 มีข้อดีคอื 1.2.6.1 สามารถรองรับอุปกรณ์รุ่นใหม่ ๆ ท่ีออกมาในตลาดไอที ไม่ว่าจะ เปน็ เครอ่ื งคอมพวิ เตอร์สว่ นบุคคล คอมพวิ เตอร์โน๊ตบุ๊ค สมารท์ โฟน แทบ็ เลต็ 1.2.6.2 สามารถที่จะแสดงภาพ เสียง และส่ือกราฟิกแอนนิเมชั่นต่าง ๆ โดยไม่ตอ้ งมีซอฟแวร์อ่ืนเพิ่ม 1.2.6.3 ทาให้ผ้ทู พ่ี ัฒนาโปรแกรมต่าง ๆ พัฒนาไดง้ ่ายข้ึนโดยการพัฒนาจะ เหมอื นกับการพัฒนาโปรแกรมต่าง ๆ ท่ใี ชง้ านกนั อยทู่ ่ัวไป ใหม้ ีประสทิ ธิภาพมากยง่ิ ขนึ้ การเขียนเว็บเพจด้วยภาษา HTML น้ันเป็นการเขียนคาสั่งเพื่อให้แสดงข้อมูลใน รูปแบบของเว็บเพจ โดยข้อมูลที่แสดงมีหลายรูปแบบทั้ง ข้อความ ภาพ ภาพเคลื่อนไหว และเสียง โดยรปู แบบคาสั่งของภาษา HTML จะเขยี นใน Tag คาส่ังทีอ่ ยู่ภายในเครอ่ื งหมาย < > เร่ิมต้นและจบ รูปแบบคาสั่งด้วย Tag <HTML>…</HTML> การป้อน Tag คาสั่งในภาษา HTML จะไม่คานึงถึง รปู แบบการพิมพต์ ัวอกั ษรตวั พมิ พ์เลก็ หรือตัวพิมพ์ใหญ่ (Case Sensitive) แต่จะมีรูปแบบโครงสร้าง ของ Tag คาสั่งท่ีเป็นแบบแผน ดังนั้นรูปแบบคาสั่งต้องถูกต้อง โดยเอกสาร HTML จะประกอบด้วย ส่วนประกอบ 2 ส่วน ดังนี้ 2901-2006 การพัฒนาเว็บด้วยภาษาเอชทีเอ็มแอล 69

โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C 1.3.1 ส่วนหัวเรื่องเอกสารเว็บ (Head Section) เป็นส่วนท่ีอธิบายเกี่ยวกับข้อมูล เฉพาะของหน้าเว็บ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ช่ือผู้จัดทาเว็บ (Author), คีย์เวิร์ดสาหรับการ คน้ หา (Keyword) โดยมี Tag สาคัญ คอื <HEAD> <TITLE>ขอ้ ความอธิบายชอ่ื เรื่องของเวบ็ เพจ</TITLE> <META HTTP-EQUIV=“Content-Type” CONTENT=\"text/html; charset=UTF-8\"> <META NAME=\"Author\" CONTENT=\"ชือ่ ผู้พัฒนาเวบ็ \"> <META NAME=\"Keywords\" CONTENT=\"ข้อความ 1, ขอ้ ความ 2, …\"> </HEAD> 1.3.2 สว่ นเนื้อหาในเอกสารเวบ็ (Body Section) เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึง่ การแสดงผลจะต้องใช้ Tag จานวนมาก ข้ึนอยู่กบั ลกั ษณะของขอ้ มลู เชน่ ข้อความ, รูปภาพ, เสียง, วดี ิโอ หรือไฟล์ต่าง ๆ การปอ้ นคาสง่ั ในส่วนน้ี ไม่มขี ้อจากัด สามารถป้อน Tag คาส่ังติดกัน หรือพิมพ์ คาส่ัง 1 บรรทัดต่อ 1 คาสั่งก็ได้ แต่ควรจะจัดรูปแบบที่อ่านง่าย เช่น การทาย่อหน้าในชุดคาส่ังท่ี เก่ียวข้องกัน โดยป้อนคาสั่งท้ังหมดภายใน Tag <BODY> … </BODY> สามารถแบ่งกลุ่มคาส่ังได้ ดงั ตอ่ ไปน้ี 1.3.2.1 กลุม่ คาสงั่ ทเ่ี กีย่ วกบั การจัดย่อหน้า (Paragraph) 1.3.2.2 กลมุ่ คาสั่งในการจัดแต่ง และควบคุมรปู แบบตัวอักษร (Font) 1.3.2.3 กลมุ่ คาสั่งในการทารายการเอกสาร หรือ (List) 1.3.2.4 กล่มุ คาส่ังเกี่ยวกบั การเช่ือมโยง หรือ (Link) 1.3.2.5 กลุม่ คาสง่ั เกย่ี วกับการจัดการรปู ภาพ (Image) 1.3.2.6 กลุม่ คาสั่งเกี่ยวกบั การจัดการตาราง หรือ (Table) 1.3.2.7 กลุ่มคาส่งั เกย่ี วกับการจัดการเฟรม (Frame) 1.3.2.8 กลมุ่ คาสง่ั อ่นื ๆ ในการสรา้ งเวบ็ เพจ ตัวอยา่ งโครงสรา้ งของภาษา HTML เป็นรูปแบบคาสั่งท่ีมีมาตรฐานแน่นอน ในการสร้างเอกสารเว็บ เพจด้วยภาษา HTML ทุกครง้ั ต้องอยใู่ นรปู แบบโครงสรา้ ง ดังตอ่ ไปนี้ 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 70

โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C ตัวอย่างที่ 2.1 โครงสรา้ งภาษา HTML <html> <head> <tag คาสัง่ ในชุดคาสัง่ ของ head section> </head> <body> <tag คาสัง่ ในชดุ คาสง่ั ของ body section> </body> </html> แท็ก (Tag) เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคาส่ัง หรือ การลงรหัสคาสั่ง HTML ภายในเคร่ืองหมาย less-than bracket (<) และ greater-than bracket (>) โดยท่ี Tag HTML แบ่งได้ 2 ลกั ษณะ คือ 1.4.1 Tag เดีย่ ว เปน็ แท็กทไ่ี ม่ต้องมกี ารปิดรหสั เชน่ <P>, <BR> 1.4.2 Tag คู่ หรือ Tag เปิด/ปิด เป็นแท็กท่ีประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครอื่ งหมาย slash (/) นาหนา้ คาสง่ั ในแท็กนน้ั ๆ เช่น <B>…</B> ภาษา HTML เปน็ ภาษาท่มี ีการพัฒนามาอย่างต่อเนื่อง และมีการกาหนดมาตรฐาน ของโครงสร้างภาษาเพื่อความง่าย และสะดวกในการเขียนคาสั่ง จึงมีการกาหนดรูปแบบของคาสั่งใน ภาษาดังนี้ 1.5.1 ขอ้ ความท่ใี ช้เปน็ Title ไม่ควรพิมพเ์ กิน 64 ตวั อักษร, ไมต่ ้องใสล่ กั ษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี และควรใช้เฉพาะภาษาอังกฤษ ท่ีมีความหมายครอบคลุมถึงเน้ือหาของ เอกสารเวบ็ และมคี าสาคัญที่ช่วยในการคน้ หา เรยี กวา่ “คาค้น” (Keyword) 1.5.2 การแสดงผลจาก Tag Title บนเว็บเบราว์เซอร์จะปรากฏข้อความท่ีกากับ ด้วย Tag Title ในส่วนบนสดุ ของกรอบหนา้ ต่าง เหมือน Title Bar ของ Window 1.5.3 แท็ก META จะไม่ปรากฏผลบนเว็บเบราว์เซอร์ แต่จะเป็นส่วนสาคัญในการ ทาคลังบัญชีเว็บสาหรับผู้ให้บริการ การสืบค้นเว็บ (Search Engine) และค่าอ่ืน ๆ ของการแปล ความหมาย 2901-2006 การพัฒนาเว็บดว้ ยภาษาเอชทีเอ็มแอล 71

โครงสรา้ งของการเขยี น HTML ตามมาตรฐาน W3C 1.5.4 การพิมพ์ชุดคาสั่งของภาษา HTML สามารถพิมพ์ได้ท้ังตัวพิมพ์เล็ก ตัวพิมพ์ ใหญ่ หรือพิมพ์ผสมท้ังสองชนิด การย่อหน้า เว้นบรรทัด หรือช่องว่าง สามารถกระทาได้โดยอิสระ เวบ็ เบราวเ์ ซอรจ์ ะไม่สนใจเกี่ยวกับระยะช่องว่าง การเว้นบรรทดั หรือการยอ่ หนา้ 1.5.6 การบันทึกไฟล์เอกสารเว็บเพจ ให้พิมพ์ส่วนขยาย หรือนามสกุลไฟล์ คือ .html เว็บเพจหน้าหลัก หรือ โฮมเพจ ควรต้ังช่ือว่า index.html แอททริบิวต์ (Attributes) เป็นส่วนขยายความสามารถของแท็กคาส่ังในภาษา HTML โดยจะตอ้ งใส่ไว้ในเคร่ืองหมาย < > ของแท็กเปิดเท่านั้น แท็กคาสั่ง HTML จะมีแอททริบิวต์ แตกตา่ งกันไปและมจี านวนของแอททริบิวต์ไม่เท่ากัน การระบุแอททริบิวต์ท่ีมากกว่า 1 แอททริบิวต์ ใหใ้ ชช้ ่องวา่ งเปน็ ตัวค่ัน เชน่ แอททริบวิ ตข์ องแทก็ คาสงั่ การจัดย่อหน้า หรือพารากราฟ (Paragraph) คือ <P> ประกอบด้วย Attribute ALIGN=\"Left/Right/Center/Justify\" สามารถเขียนคาส่ังได้ดังน้ี <P ALIGN=\"Left\">การกาหนดคุณสมบัตขิ องคาส่งั </P> หรือ <P ALIGN=\"Right\">ตวั อยา่ งการจดั ย่อหน้าชดิ ทางขวาของจอภาพ</P> ส่ิงแรกในการการสร้างเว็บเพจ คือ ร่างเนื้อหาและจัดแบ่งข้อมูลออกเป็นส่วน ๆ แยกเป็นหน้า ๆ โดยขนาดของข้อมูลแต่ละหน้าไม่ควรมากเกินไป เพราะจะทาให้ผู้เข้าชมเว็บต้องใช้ แถบเล่ือน (Scroll Bar) เพื่อเลื่อนดูข้อมูลด้านล่าง นอกจากน้ีไฟล์ HTML ท่ีสร้างข้ึนจะมีขนาดใหญ่ เกินไปใช้เวลาในการเปิดหน้าเว็บเพจนาน เพราะจะต้องดาวน์โหลดไฟล์ข้ามระบบเครือข่ายนานไป ดว้ ย ซึง่ อาจทาใหผ้ ู้เข้าเว็บเพจไม่สะดวกในการใช้งาน เมื่อร่างเน้ือหาและกาหนดรูปแบบเอกสารตาม หลักการออกแบบเว็บเพจได้แล้ว ก็สามารถเขียนคาส่ังต่าง ๆ ภายใต้โครงสร้างภาษา HTML ได้ดัง ตวั อยา่ งต่อไปน้ี ตวั อยา่ งท่ี 2.2 เรม่ิ ตน้ แท็กคาสง่ั ภาษา HTML <html> <head> <title>Begin test file HTML</title> </head> <body> Name : Duangrudee Senruang Nickname : Kung </body> </html> 2901-2006 การพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล 72

โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C 1.7.1 แทก็ คาส่งั เรมิ่ ต้นภาษา HTML เป็นแท็กคาสั่งเปิด-ปิด ใช้ในการเริ่มต้นภาษา HTML โดยแท็ก <HTML> เป็นคาสั่งเริ่มต้นในการเขียนโปรแกรม และแท็ก </HTML> เป็นการ ส้ินสุดโปรแกรม HTML คาส่ังน้ีจะไม่แสดงผลในโปรแกรมเว็บเบราว์เซอร์ แต่ต้องเขียนเพ่ือให้เกิด ความเปน็ ระบบของงาน และเพือ่ จะใหร้ ้วู ่าเอกสารนี้เป็นเอกสารของภาษา HTML 1.7.2 สว่ นหัวของโปรแกรม <HEAD>…..</HEAD> เป็นคาสั่งที่ใช้กาหนดข้อความ ในสว่ นทเ่ี ปน็ ชอ่ื เร่อื งของไฟล์เอกสาร HTML และภายในคาสง่ั <HEAD>.....</HEAD> จะมีคาส่ังย่อย อีกคาสงั่ หนึ่งคอื <TITLE>.....</TITLE> 1.7.3 กาหนดข้อความสว่ นหวั ของโปรแกรม หรอื ไทเทิลบาร์ <TITLE>….</TITLE> แทก็ คาสง่ั <TITLE> เปน็ คาส่ังท่แี สดงชอื่ ของเอกสาร หรือช่อื เรื่องของไฟล์ HTML ซ่ึงข้อความภายใน คาส่ังจะปรากฏหรือแสดงผลในส่วนของไทเทิลบาร์ (Title Bar) ของโปรแกรมเว็บเบราว์เซอร์ แต่จะ ไม่แสดงในสว่ นของการแสดงผลในโปรแกรมเวบ็ เบราว์เซอร์ 1.7.4 ส่วนเนื้อหาของโปรแกรม <BODY>…..</BODY> คาสั่งนี้เป็นส่วนสาคัญใน การแสดงผลบนเว็บเบราว์เซอร์ ซึ่งจะประกอบไปด้วยตัวอักษร, รูปภาพ, กราฟิกต่าง ๆ ท่ีมีข้อมูลใน หัวขอ้ หรือเน้อื หาที่สอดคล้องเกยี่ วเน่ืองกนั 2. มาตรฐาน W3C W3C ย่อมาจากคาว่า World Wide Web Consortium เป็นองค์กรระหว่าง ประเทศทีท่ างานด้านการพัฒนาเทคโนโลยี และจัดระบบมาตรฐานท่ีใช้งานบนเวิลด์ไวด์เว็บ (www) หรือ W3 โดยมีจุดมุ่งหมายท่ีจะเป็นแกนนาด้านการพัฒนาโปรโตคอล และวิธีการใช้งานสาหรับ เวิลด์ไวด์เว็บท้ังหมด W3C ก่อต้ังข้ึนมาในปี ค.ศ. 1994 โดยนายทิม เบิร์นเนอร์ ลี (Tim Berners Lee) ซึ่งมอี งค์กรสมาชกิ มากมายมากกวา่ 450 องค์กร ที่รู้จักกันดี เช่น Apple, Google, Microsoft, Sun Microsystems เป็นต้น W3C ประกอบด้วย 3 สถาบันได้แก่ MIT ในสหรัฐอเมริกา, INRIA ใน ยุโรป และ Keio University ในญ่ีปุ่น นอกจากนี้ W3C ยังมีบริการทางการศึกษา การพัฒนา ซอฟตแ์ วร์ และเปิดให้ใช้ฟอร์มในการปรกึ ษาเก่ียวกบั เรือ่ งเว็บอกี ดว้ ย ภาพท่ี 2.1 แสดงสัญลักษณข์ ององค์กร W3C (World Wide Web Consortium) ทมี่ า : validator.w3.org. สัญลักษณ์ของ W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เขา้ ถึง ไดจ้ าก : http://validator.w3.org. 2901-2006 การพัฒนาเว็บด้วยภาษาเอชทีเอม็ แอล 73

โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C W3C เป็นองค์กรสากลผู้ควบคุมมาตรฐาน ความถูกต้องของการใช้ภาษา HTML, XHTML, CSS เเละภาษาอื่น ๆ ท่ีผู้พัฒนาหรือโปรแกรมเมอร์ใช้เขียนเว็บไซต์ โดยมีหน้าท่ีตรวจสอบ เว็บไซตท์ ่เี ขียนวา่ มีความถูกต้องเป็นไปตามมาตรฐานการใช้งานหรือไม่ ประโยชน์ของเขียนเว็บไซต์ที่ ได้มาตรฐานของ W3C เปรียบเสมือนว่าเว็บไซต์นั้น ไม่มีข้อบกพร่องในการท่ีจะใช้โปรแกรมสืบค้น (Search Engine) และเป็นการยกระดับมาตรฐานของการเขียนเว็บไซต์ด้วย W3C ได้กาหนด มาตรฐานของภาษาท่ีใชใ้ นการเขยี นหรือพัฒนาเวบ็ เพจไวด้ งั นี้ 2.2.1 HTML 4.0 – Hyper Text Markup Language 2.2.2 XML 1.0 – Extensible Markup Language 2.2.3 XHTML 1.0, 1.1 และ Modularization 2.2.4 CSS – Cascading Style Sheets 2.2.5 DOM 1 – Document Object Model Level 1 การจัดทาเว็บเพจที่ได้มาตรฐานตามข้อกาหนดของ W3C มีประโยชน์ต่อผู้พัฒนา เว็บเพจดา้ นตา่ ง ๆ ดังน้ี 2.3.1 ประโยชน์ต่อซอฟต์แวร์ หรือเคร่ืองจักรอานวยความสะดวกให้โปรแกรม สืบค้น (Search Engine) สามารถค้นหาและทาการจัดเรียง (Index) ข้อมูลในเว็บได้ง่ายและมี ประสิทธิภาพ โปรแกรมเว็บเบราว์เซอร์ทุกชนิดเข้าใจโครงสร้างเอกสารเว็บ แม้ว่าจะไม่เข้าใจ เทคโนโลยีมาตรฐานใหม่ แต่สามารถแสดงผลได้ สามารถตรวจสอบความถูกต้องของเอกสาร (validate) ดว้ ยเครื่องมอื ท่ีมีอย่บู นอินเทอร์เน็ต ช่วยให้การค้นหาข้อผิดพลาดในเว็บง่ายข้ึน สามารถ แปลงไฟลเ์ วบ็ เพจ เป็นไฟล์เอกสารแบบอ่ืนได้ ทาให้เอกสารนั้นมีประโยชน์ในการใช้งานหลากหลาย มากข้นึ 2.3.2 ประโยชน์ต่อผู้ใช้ สามารถใช้โปรแกรมเว็บเบราว์เซอร์อื่น ๆ ที่แตกต่างกัน แสดงผลของหนา้ เวบ็ เพจได้ เพ่อื ไมใ่ หก้ ารแสดงผลเกดิ ความผดิ พลาดเมือ่ ผู้ใช้เข้าชมเว็บไซต์ 2.3.3 ความมีเสถียรภาพ สามารถรองรับเทคโนโลยีใหม่ ๆ ท่ีจะเข้ามาแทน และ สามารถแสดงผลลพั ธ์ผา่ นทางโปรแกรมเว็บเบราว์เซอร์ในลักษณะท่ีผู้ใช้พอใจ หากมีนักพัฒนาเว็บคน ใหม่มาสานต่องานภายหลงั ผู้พฒั นาเวบ็ สามารถที่จะเขา้ ใจถงึ โครงสรา้ งของหน้าเอกสารไดง้ า่ ยข้ึน หากต้องการให้เว็บเป็น Web Standard ผ้พู ัฒนาเวบ็ ต้องมีการตรวจสอบแท็กคาสั่ง หรือ โคด้ (Code) ท่เี ขียนว่าถกู ต้องหรอื ไม่ ถ้าไม่ถูกตอ้ งตรวจสอบว่าผิดอย่างไร จุดไหนบ้าง การเป็น 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 74

โครงสรา้ งของการเขียน HTML ตามมาตรฐาน W3C Web Standard ซึ่งเป็นเวบ็ ตามมาตรฐานกลางช่วยให้ Browser ต่าง ๆ ท่ีใช้สาหรับการเปิดหน้าเว็บ สามารถแสดงผลได้ตรงตามมาตรฐาน ส่งผลให้โค้ดหน้าเว็บชุดเดียวกัน สามารถแสดงผลได้อย่าง ถูกต้องในทุก ๆ Browser ผู้พัฒนาสามารถเรียกใช้เว็บเพจสาหรับการตรวจสอบได้จาก https://validator.w3.org โดยขั้นตอนการตรวจสอบเว็บเพจตามมาตรฐาน W3C แบ่งเป็น 3 ข้นั ตอนดงั น้ี 2.4.1 ตรวจสอบโดย URI ผู้พฒั นาเว็บสามารถป้อน URI ในชอ่ งที่อยู่เว็บไซต์ ภาพที่ 2.2 แสดงการตรวจสอบโดย URI ของ W3C ท่มี า : validator.w3.org. การตรวจสอบเวบ็ ตามมาตรฐาน W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เขา้ ถึงไดจ้ าก : https://validator.w3.org/unicorn/?ucn_lang =th#validate-by-uri+task_conformance. 2.4.2 ตรวจสอบโดยอัพโหลดไฟล์ ผู้พัฒนาเว็บสามารถเลือกที่อยู่ของไฟล์ได้ในช่อง Choose File ภาพที่ 2.3 แสดงการตรวจสอบโดยอัพโหลดไฟล์ ของ W3C 75 2901-2006 การพัฒนาเวบ็ ดว้ ยภาษาเอชทีเอม็ แอล

โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C ท่มี า : validator.w3.org. การตรวจสอบเวบ็ ตามมาตรฐาน W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถึงไดจ้ าก : https://validator.w3.org/unicorn/?ucn_lang =th#validate-by-uri+task_conformance. 2.4.3 ตรวจสอบโดยการกรอกเอกสารโดยตรง ผู้พฒั นาเวบ็ สามารถใส่แท็กคาส่ังของ ภาษา HTML ท่ตี ้องการตรวจสอบมาตรฐานไดใ้ นชอ่ งใสเ่ อกสารทต่ี ้องการตรวจสอบตามภาพ ภาพท่ี 2.4 แสดงการตรวจสอบโดยการกรอกเอกสารโดยตรง ของ W3C ทม่ี า : validator.w3.org. การตรวจสอบเวบ็ ตามมาตรฐาน W3C. [ออนไลน]์ . [30 สงิ หาคม 2559]. เขา้ ถงึ ได้จาก : https://validator.w3.org/unicorn/?ucn_lang=th #validate-by-uri+task_conformance. การตรวจสอบหน้าเว็บและรายงานข้อผิดพลาด หรือความถูกต้อง สามารถ ดาเนนิ การดังน้ี เรียกใช้เว็บเพจตาม URL นี้ http://validator.w3.org/ เม่ือเปิดหน้าเว็บเพจแล้วจะ ใหผ้ ู้พฒั นาเว็บกรอก URL เวบ็ เพจของตนเอง กรอก URL ในช่อง Address แล้วกด submit ระบบก็ จะรายงานผลออกมา โดยการตรวจสอบจะตรวจเช็คเป็น URL ไม่ได้เช็คท้ังเว็บไซต์ ดังตัวอย่างการ ตรวจสอบเว็บเพจ meewebfree.com เมอ่ื ผ่านมาตรฐานของ W3C จะแสดงผลดังนี้ 2901-2006 การพัฒนาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 76

โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C ภาพท่ี 2.5 แสดงการตรวจสอบเว็บเพจของ http://meewebfree.com/ ทม่ี า : validator.w3.org. การตรวจสอบเวบ็ ตามมาตรฐาน W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถงึ ได้จาก : http://meewebfree.com/site/general-web- technic/308-validator-website-web-standard-w3c. หากมขี ้อผิดพลาดของคาสง่ั ท่ีไมต่ รงตามมาตรฐานของ W3C จะปรากฏหน้าเวบ็ เพจดงั ต่อไปน้ี ภาพท่ี 2.6 แสดงข้อผดิ พลาดของเว็บเพจ http://meewebfree.com/ ทม่ี า : validator.w3.org. การตรวจสอบเวบ็ ตามมาตรฐาน W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถงึ ไดจ้ าก : http://meewebfree.com/site/general-web- technic/308-validator-website-web-standard-w3c. 2901-2006 การพฒั นาเว็บด้วยภาษาเอชทีเอ็มแอล 77

โครงสร้างของการเขยี น HTML ตามมาตรฐาน W3C โดยหน้าเวบ็ เพจของ W3C จะแจ้งรายละเอยี ดขอ้ ผิดพลาดให้ผพู้ ัฒนาเว็บทราบดงั ตัวอย่าง ภาพที่ 2.7 แสดงข้อผิดพลาดของการตรวจสอบเว็บเพจ ทีม่ า : validator.w3.org. การตรวจสอบเวบ็ ตามมาตรฐาน W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เข้าถึงไดจ้ าก : http://meewebfree.com/site/general-web- technic/308-validator-website-web-standard-w3c. เม่ือผู้พัฒนาเว็บทาการแก้ไขตามท่ีหน้าเว็บเพจของ W3C แจ้งแล้ว เว็บเพจของ ผู้พัฒนาก็จะผ่านการตรวจสอบเป็นเว็บมาตรฐานตามเงื่อนไขของ W3C และอานวยความสะดวก ใหก้ ับการแสดงผลของเว็บเบราวเ์ ซอรใ์ นการแสดงผลหนา้ เวบ็ เพจ การสรา้ งเวบ็ เพจที่ดีและน่าสนใจเป็นกระบวนการที่ทาให้เว็บเพจที่พัฒนาขึ้นได้รับ ความนิยมจากผู้เข้าชมเว็บ ภาษา HTML เป็นภาษาหนึ่งในการพัฒนาเว็บเพจโดยมีโครงสร้างที่เป็น มาตรฐานสากลมีองค์กร W3C เป็นผู้กาหนดรูปแบบในการใช้ภาษา มีการพัฒนารูปแบบภาษาอย่าง ต่อเน่ือง ทาให้เว็บเพจท่ีถูกพัฒนาสามารถถูกเรียกใช้จากเว็บเเบราว์เซอร์ได้ทุกรูปแบบ ทุก ระบบปฏิบัติการ และยังเป็นภาษาท่ีมีโครงสร้าง มีรูปแบบของภาษาไม่ซับซ้อนผู้พัฒนาเว็บเพจ สามารถใช้งานง่ายจงึ เหมาะกบั การเรียนรู้เกีย่ วกับการสรา้ งเวบ็ เพจเป็นอยา่ งยิ่ง 2901-2006 การพฒั นาเวบ็ ดว้ ยภาษาเอชทีเอ็มแอล 78

โครงสร้างของการเขียน HTML ตามมาตรฐาน W3C กังวาน อศั วไชยวศิน และ อรพิน ประวตั ิบริสุทธ์ิ. คู่มือสรา้ งเว็บไซต์ด้วย HTML5 CSS3 & JavaScript ฉบบั สมบรู ณ์. กรุงเทพฯ : โปรวชิ ่ัน, 2556. จารุนนั ท์ เรืองกจิ วณชิ กุล. การสร้างเว็บไซต์. กรุงเทพฯ : ศูนยส์ ่งเสริมวชิ าการ, 2558. ประชา พฤกษ์ประเสริฐ. การโปรแกรมเว็บดว้ ยภาษา HTML. กรุงเทพฯ : บริษทั ซัคเซส มีเดยี จากดั , 2550. พรชยั ทองอินทร์. การสร้างเวบ็ ไซต์. กรุงเทพฯ : แมค็ เอ็ดดเู คช่ัน, 2558. วภิ าวี ณ นิมติ ร. การสรา้ งเว็บไซต์. นนทบรุ ี : บ.ศนู ยห์ นงั สือ เมืองไทย จากัด, 2557. bloggang.com. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถงึ ไดจ้ าก : http://www.bloggang.com. codingbasic.com. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เข้าถึงได้จาก : http://www.codingbasic.com/html.html. comsystemshop.com. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เขา้ ถงึ ไดจ้ าก : http://www.comsystemshop.com. dupracha.ac.th. การสรา้ งเว็บเพจด้วยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เขา้ ถงึ ไดจ้ าก : http://dupracha.ac.th/courses/html/. emo-yumi.blogspot.com. การสร้างเว็บเพจด้วยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เขา้ ถงึ ได้จาก : http://emo-yumi.blogspot.com. google.com. การสรา้ งเว็บเพจดว้ ยภาษา HTML. [ออนไลน์]. [15 สงิ หาคม 2559]. เข้าถึง ได้จาก : https://sites.google.com/site/30881tonnum/home/page2. it-guides.com. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สงิ หาคม 2559]. เขา้ ถึง ไดจ้ าก : http://www.it-guides.com. kmitl.ac.th. การสร้างเวบ็ เพจดว้ ยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เขา้ ถงึ ได้จาก : http://www.kmitl.ac.th. kroobannok.com. การสร้างเว็บเพจด้วยภาษา HTML. [ออนไลน]์ . [15 สิงหาคม 2559]. เข้าถงึ ไดจ้ าก : http://www.kroobannok.com. validator.w3.org. การตรวจสอบเว็บตามมาตรฐาน W3C. [ออนไลน]์ . [30 สิงหาคม 2559]. เขา้ ถงึ ได้จาก : http://meewebfree.com/site/general-web-technic/308-validator- website-web-standard-w3c. 2901-2006 การพฒั นาเวบ็ ด้วยภาษาเอชทีเอ็มแอล 79