มาตรฐาน W3C
Validation
การเอาใจใส่ มาตรฐาน W3C เพื่อได้มาซึ่ง ไอเจ้า W3C ถามว่าเอาไปทำอะไร ทำเพื่ออะไร ??
ไม่บอกหรอก ขอถามกลับ แล้วคุณจะ นั่งปรับแต่ง web ให้ถูกหลัก SEO เพื่ออะไรละ ??
มาบอกทำไมนิ อ่านแล้วจะไปตรวจสอบที่ไหนละ ??
ก็ไปตรวจสอบ web นี้ http://validator.w3.org/ มันจะมีให้ใส่ url ก็ใส่ไป
มันจะแจ้งมาว่า web เรามัน error กี่จุดก็ดูที่มันฟ้องแล้วแก้ไปตามนั้น
เอาละมาเรียนรู้การแก้ไขไอตรงที่มันบอกว่าผิด กัน มันฟ้องไรก็ดูตามนั้น
คำฟ้อง : Missing DOCTYPE Declaration
วิธีเอาใจใส่ : เว็บคุณอ่ะไม่ได้ประกาศประเภทของเอกสารไว้ในตอนต้นของเอกสาร จึงไม่สามารถตรวจสอบความถูกต้องของเอกสารต่อไปได้ เนื่องจากไม่ทราบว่าเป็นเอกสารอะไร เวอร์ชันใดและต้องการการตรวจสอบแบบใด
คำฟ้อง : Tag omitted ( ไอพวกปิดแท็กทั้งหลายละ )
วิธีเอาใจใส่ : มีความผิดพลาดในการ เปิดปิดแท็กของคำสั่งนั้นๆ ในกรณีนี้หมายถึงเปิดแท็กไว้ แต่ไม่ได้ปิด จึงควรตรวจดูว่ามีการปิดแท็กครบหรือไม่ ในบางกรณีอาจเกิดจากการปิดแท็กผิดที่ จึงทำให้ตัวตรวจสอบหาแท็กปิดไม่พบและแสดงข้อผิดพลาดออกมา
คำฟ้อง : ที่เกี่ยวกับ element … undefined
วิธีเอาใจใส่ : เกิดจากการใช้แท็กที่ไม่อนุญาตให้ใช้ตามประเภทและเวอร์ชันของเอกสาร (โดยมากมักไม่อนุญาตเพราะแท็กที่ใช้ในการตกแต่งและไม่มีความหมายเชิงโครงสร้างหรือวลี) เช่น XHTML เวอร์ชัน 1 ไม่อนุญาตให้ใช้แท็ก <marquee> และวิธีการแก้ปัญหาคือการนำแท็ก <marquee> ออกไปและให้มาร์กอัพโดยแท็กอื่น ๆ ที่มีความหมายเชิงโครงสร้างมากกว่า
คำฟ้อง : ที่เกี่ยวกับ document type does not allow element … here
วิธีเอาใจใส่ : เกิดการจากใช้แท็กผิดที่ เช่น การใช้แท็ก <style> ใน <body> ซึ่งไม่สามารถทำได้ เพราะแท็ก <style> ต้องใช้ในส่วน <head> ของเอกสารเท่านั้น
คำฟ้อง : Required attribute “alt” not specified
วิธีเอาใจใส่ : เกิดจากการไม่ใส่คำอธิบายภาพ ให้ตรวจสอบดูว่ามีการใส่คำอธิบายภาพในแท็ก <img> หรือไม่
คำฟ้อง : ที่เกี่ยวกับ Attribute “…” is not a valid attribute
วิธีเอาใจใส่ : เกิดจากการใช้ แอตทริบิวต์ที่ไม่อนุญาตให้ใช้ตามประเภทและเวอร์ชันของเอกสาร หากปรากฎแอตทริบิวต์เช่นนั้นให้เอาออก โดยมากปัญหาที่พบคือการใช้แอตทริบิวต์สำหรับการตกแต่งเช่น “bordercolor” เพื่อทำสีเส้นขอบ ในกรณีเช่นนี้ให้ใช้ CSS ในการตกแต่งแทน
คำฟ้อง : document type does not allow element “…” here; missing one of …
วิธีเอาใจใส่ : เกิดจากการใช้แท็กผิดวัตถุประสงค์หรือผิดที่ เช่น การใช้แท็ก <ul> ในแท็ก <p> หรือการใช้แท็ก <div> ในแท็ก <a> เป็นต้น มีข้อควรจำว่า เราไม่สามารถใช้ Block Element ใน Inline Element ได้ และใน Block Element ด้วยกันนั้น บางแท็กก็ไม่สามารถซ้อนอยู่ในอีกแท็กหนึ่งได้ แต่บาง Block Element สามารถใช้ซ้อนกันได้ ต้องศึกษาข้อกำหนดของเอกสารประเภทนั้น ๆ เสียก่อน
คำฟ้อง : ที่เกี่ยวกับ Attribute “onMouseOver” is not a valid attribute. Did you mean “onmouseover”?
วิธีเอาใจใส่ : เกิดจากการใช้ชื่อแอตทริบิวต์เป็นอักษรตัวใหญ่หรือผสมกันระหว่างอักษรตัวใหญ่และตัวเล็ก ในข้อกำหนดของ XHTML นั้น ชื่อแอตทริบิวต์ต้องเป็นตัวอักษรตัวเล็กทั้งหมด
คำฟ้อง : No Character Encoding Found! Falling back to UTF-8.
วิธีเอาใจใส่ : เกิดจากการไม่ได้ระบุรหัสอักขระ ในกรณีเช่นนี้จะไม่สามารถตรวจสอบต่อไปได้ ให้ตรวจดูว่ามีการกำหนดรหัสอักขระในแท็ก <html> หรือไม่
คำฟ้อง : Unable to Determine Parse Mode!
วิธีเอาใจใส่ : ไม่สามารถระบุได้ว่าจะใช้วิธีการใดในการตรวจสอบเอกสาร ซึ่งเกิดจากการไม่ระบุประเภทเอกสาร หรือชื่อประเภทเอกสารไม่ถูกต้อง
คำฟ้อง : XML Parsing Error: attributes construct error
วิธีเอาใจใส่ : เกิดจากรูปแบบของแอตทริบิวต์ไม่ถูกต้อง ให้ตรวจสอบดูว่าได้ใส่ค่าของแอตทริบิวต์ไว้ใน “…” หรือไม่
w3C
เวิลด์ไวด์เว็บคอนซอร์เทียม (อังกฤษ: World Wide Web Consortium: W3C) คือองค์กรระหว่างประเทศทำหน้าที่จัดระบบมาตรฐานที่ใช้งานบนเวิลด์ไวด์เว็บ (ย่อว่า WWW หรือ W3) โดยมีจุดมุ่งหมาย ที่จะเป็นแกนนำทางด้านพัฒนาโพรโทคอล และวิธีการใช้งานสำหรับเวิลด์ไวด์เว็บทั้งหมด นอกจากนี้ทาง W3C มีการบริการทางการศึกษา การพัฒนาซอฟต์แวร์ และเปิดให้ใช้ฟอรัมในการปรึกษาเกี่ยวกับเรื่องเว็บ
เรื่องของ DOCTYPE ในเว็บเพจ
มีใครใช้โปรแกรม Dreamweaver หรือโปรแกรมสร้างเว็บเพจใด ๆ แล้วสังเกตกันบ้างไหมว่า โปรแกรมเหล่านี้จะเปิดหัวเอกสารของเว็บเพจในส่วนของ CODE ให้เราที่บรรทัดแรกสุดเป็นข้อความประมาณว่า
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
มีใครสงสัยไหมครับว่า ทำไมโปรแกรมต้องสร้างโค้ดนี้ให้เราเสมอเมื่อทำการสร้างไฟล์ใหม่ขึ้นมา (ถ้าใครยังไม่เคยเปิดดูโค้ดเลยลองเปิดดูครับ) เราเรียกกันว่า DOCTYPE ครั้งนี้ในบทความนี้เราจะมาว่าถึงเรื่องนี้กัน
DOCTYPE คือ
DOCTYPE คือ การประกาศว่าเอกสารเว็บเพจนั้นสร้างขึ้นมาโดยยึดหลักตามมาตราฐานใด ซึ่งมาตราฐานที่เราใช้กันทุกวันนี้กับการแสดงผลเว็บเพจ จะมีที่ใช้กันอยู่ 2 มาตราฐาน คือ
– HTML
– XHTML
ทั้ง 2 มาตราฐาน จะมีการแบ่งกฎในการพัฒนาแตกต่างกันออกไปอีก 3 ประเภท คือ
– Transitional
– Strict
– Frameset
ในบทความนี้ผมจะขอกล่าวถึง และยกตัวอย่างเพียงในส่วนของXHTMLเท่านั้นครับ เนื่องจากว่าXHTMLได้เข้ามาแทนที่ HTML
กฏ 3 ประเภทของ DOCTYPE
– Transitional
สำหรับ Transitional นี้จะมีรูปแบบการประกาศที่บรรทัดแรกของเอกสาร ดังนี้
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
กฏในแบบ Transitional ผู้พัฒนา XHTML ยังคงสามารถใช่งาน TAG หรือ Attribute ของ HTML แทรกลงไปในโค้ดได้
– Strict
สำหรับ Strict จะมีรูปแบบการประกาศที่บรรทัดแรกของเอกสาร ดังนี้
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
กฏในแบบ Strict จะเข้มงวดกับไวยากรณ์ของภาษา ถ้าเราใช้ Strict กับเอกสารเว็บเพจเรา เราจะไม่สามารถแทรก Attribute ใด ๆ ได้เลยกับเว็บเพจของเรา เนื่องจาก Strict จะมองในส่วนของ TAG ที่ใช้กำกับ กับ ส่วนโค้ดที่ใช้ในการแสดงผลแยกออกจากกัน นั้นคือ TAG ของ XHTML เป็นเพียงตัวบอกว่าเอกสารนั้นเมื่อมี TAG นี้กำกับอยู่จะให้ทำอะไร เช่น ขึ้นบรรทัดใหม่ Paragraph ใหม่ เป็นต้น แต่ถ้าต้องการระบุคุณสมบัติ เช่น ทำข้อความไว้กึ่งกลางหน้าเว็บเพจ หรือใส่สีสันให้ข้อความ ต้องกระทำผ่าน CSS เท่านั้น สรุปง่าย ๆ ถ้าเราใช้ Strict กับเว็บเพจ เราต้องใช้ XHTML กับ CSS อย่างแท้จริงเท่านั้น !
– Frameset
สำหรับ Frameset จะมีรูปแบบการประกาศที่บรรทัดแรกของเอกสาร ดังนี้
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
ใช้ในกรณีที่เรามีการออกแบบโดยมีการใช้ Frame ในการแบ่งจอของ Browser
มาตรฐาน W3C
W3C หรือ World Wide Web Consortium เป็นองค์กรระหว่างประเทศที่ทำงานด้านการพัฒนาเทคโนโลยีเว็บ นำโดยนาย ทิม เบิร์นเนอร์ ลี (Tim Berners-Lee) ก่อตั้ง W3C ในปี ค.ศ.1994 และมีองค์กรสมาชิกมากกว่า 450 องค์กร ซึ่งรวมถึงองค์กรอย่าง Microsoft, Sun Microsystems และอื่น ๆ อีกมากมาย องค์กรนี้ประกอบด้วยสถาบัน 3 สถาบันคือ MIT ในสหรัฐอเมริกา INRIA ในยุโรป และ Keio University ในญี่ปุ่น
มาตรฐานของ W3C มีอะไรบ้าง
1. HTML 4.0 – Hyper Text Markup Language
2. XML 1.0 – Extensible Markup Language
3. XHTML 1.0, 1.1 และ Modularization
4. CSS – Cascading Style Sheets
5. DOM 1 – Document Object Model Level 1
ประโยชน์ที่จะได้รับจากการทำตามมาตรฐานเว็บ
1. ประโยชน์ต่อซอฟแวร์หรือเครื่องจักร
• Search engine สามารถค้นหาและทำดรรชนีข้อมูลในเว็บได้ง่ายและมีประสิทธิภาพมากขึ้น
• เนื่องจากว่ามาตรฐานเป็นสิ่งที่บราวเซอร์ทุกชนิดเข้าใจ จึงทำให้สามารถเข้าใจโครงสร้างเอกสารเว็บได้ แม้ว่าจะไม่เข้าใจเทคโนโลยีมาตรฐานใหม่ ๆ แต่ก็ยังสามารถแสดงผลได้
• นักพัฒนาที่ใช้มาตรฐานจะสามารถตรวจสอบความถูกต้องของเอกสาร (validate) ด้วยเครื่องมือที่มีมากมายในอินเตอร์เน็ทได้ ซึ่งช่วยให้การค้นหาข้อผิดพลาดในเว็บของเราได้ง่ายขึ้น
• เอกสารที่ได้มาตรฐานสามารถแปลงไปเป็นเอกสารแบบอื่นได้ง่าย ทำให้เอกสารนั้น ๆใช้งานได้หลายประโยชน์ขึ้น
2. ประโยชน์ต่อผู้ใช้
• ผู้ที่ใช้บราวเซอร์อื่น ๆ ที่แตกต่างไปจากบราวเซอร์ทั่ว ๆ ไปที่เราคุ้นเคยสามารถใช้งานเว็บของเราได้ เช่น คนตาบอดที่ใช้บราวเซอร์เบรลล์หรือ Braille display คนที่ใช้อุปกรณ์พกพาต่าง ๆ หรืออุปกรณ์อื่น ๆ ที่อาจมีในอนาคต ฯลฯ
• สำหรับการทำธุรกิจแล้ว การปฏิเสธผู้ใช้บางกลุ่มสามารถสร้างความแตกต่างในเรื่องของรายได้อย่างคาดไม่ถึง
3. ความมีเสถียรภาพ
• ข้อมูลหรือเนื้อหาต่าง ๆ ที่ทำตามมาตรฐานจะยังสามารถใช้ได้แม้ว่าเทคโนโลยีใหม่ ๆจะเข้ามาแทน และสามารถแสดงผลลัพธ์ผ่านทางบราวเซอร์ในลักษณะที่ผู้ใช้รับได้ (ไม่น่าเกลียดจนเกินไป) เรียกว่าเป็นการตกยุคอย่างสวยงาม (degrade gracefully)
• เนื่องจากว่า เว็บไซต์หนึ่ง ๆ อาจอยู่นานและมีผู้พัฒนาหลายคน ผู้ที่เข้ามาสานงานต่อจะเข้าใจงานที่มีอยู่ได้ง่ายขึ้นหากโค้ดของเราได้มาตรฐาน