ตรวจสอบโค้ด HTML ว่าได้มาตรฐานหรือไม่ [Article ID : 51]

เรื่อง : ตรวจสอบมาตรฐานของ HTML Code ด้วย Dreamweaver

โค้ด HTML ที่ใช้ในการพัฒนาเว็บมีมาตรฐานที่กำหนดโดย W3C ซึ่งเป็นมาตรฐานที่นักพัฒนาเว็บควรนำมาใช้และปฏิบัติตาม ทั้งนี้เพื่อให้เว็บไซต์ที่เราพัฒนา มีความเป็นมาตรฐาน ซึ่งเว็บเพจใดที่ต้องการตรวจสอบมาตรฐานของโค้ด HTML เราอาจจะนำ URL ของเว็บเพจนั้นไปตรวจสอบได้ที่ URL ดังนี้

https://validator.w3.org

แต่ถ้าเราใช้ Dreamweaver ในการพัฒนาเว็บไซต์อยู่แล้ว เราอาจจะใช้โปรแกรม Dreamweaver ในการตรวจสอบมาตรฐานของโค้ด HTML เราได้เช่นเดียวกัน ดังนี้

วิธีการตรวจสอบโค้ด HTML ด้วยโปรแกรม Dreamweaver

ทำการเปิดไฟล์เว็บเพจที่ต้องการตรวจสอบขึ้นมากับโปรแกรม Dreamweaver จากนั้นให้ปฏิบัติตาม ดังนี้

1. ที่เมนูเลือกไปที่ Validate แล้วเลือกที่ Validate Current Document (W3C)
*Menu -> Validate -> Validate Current Document ดังรูป 2. เมื่อคลิปที่เมนูดังข้อ 1 แล้ว อาจจะมีหน่าต่างเล็ก ๆ แจ้งเตือน ดังรูป ให้เรากด OK 3. โปรแกรมจะทำการตรวจสอบโค้ด HTML และรายงานผลที่หน้าต่าง Validation ซึ่งแสดงอยู่ด้านล่างของโปรแกรม ดังรูป

จากรูปจะพบว่ามี Error หรือมีข้อผิดพลาดของโค้ด HTML ในเว็บเพจ 1 จุด คือ บรรทัดที่ 14 ของโค้ด ซึ่งมีการใช้งานแท๊ก <font> กับเว็บเพจ โดยที่แท๊ก <font> ในมาตรฐาน HTML5 ได้มีการประกาศยกเลิกใช้งานไปแล้ว (Obsolete) ดังนั้น หากเราต้องการแก้ไข เราต้องปรับเปลี่ยน หรือนำโค้ดดังกล่าวออกไปจากโค้ดของเรา
เมื่อนำโค้ด <font> ออกไปจากโค้ดแล้ว ตรวจสอบอีกครั้ง จะพบว่าข้อความที่แจ้ง Error ได้หายไปแล้ว ดังรูป

เรื่องมาตรฐานของโค้ด HTML นี้ เราในฐานะนักพัฒนาเว็บไซต์ ควรให้ความใส่ใจกันนะครับ อย่าละเลย ซึ่งตรงนี้จะส่งผลต่อความรู้ความเข้าใจในการพัฒนาเว็บเราอย่างมากมาย ตัวอย่างเช่น Error ในโค้ดที่ผ่านมา หากใครทำเว็บมานานแล้ว หรือเรียนรู้การพัฒนาเว็บจากตำราเก่า ๆ อาจจะไม่ทราบว่า ปัจจุบันได้มีการประกาศยกเลิกการใช้งานแท๊กใดไปบ้าง... อย่างไรก็ลองใช้งานและศึกษากันด้วยครับ...สวัสดี.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

วิธีเปลี่ยน CSS Designer ใน Dreamweaver CC เป็น CSS Styles Panel ในแบบดั่งเดิม

เรื่อง: เปลี่ยน CSS Designer ใน Dreamweaver CC เป็น CSS Styles Panel แบบ CS6 การใช้ CSS...  

สร้างระยะเยื้องให้บรรทัดแรกของข้อความย่อหน้า (text-indent)

เรื่อง : สร้างระยะเยื้องให้บรรทัดแรกของย่อหน้าด้วย Dreamweaver หลายท่านคงมีปัญหา เมื่อทำการพิมพ์ข้อความที่เป็นเนื้อหาของห...  

การจัดเรียงข้อมูลในตาราง (Sort Table) ด้วย Dreamweaver

เรื่อง : การจัดเรียงข้อมูลในตารางด้วย Dreamweaver (Sort Data on Table) บางครั้งการจัดทำข้อมูลในเว็บเพจของเรา อาจจะเคยต้...  

การทำ Refresh/Redirect ให้ Web Browser ด้วย Dreamweaver

เรื่อง : สั่งให้ Web Browser ทำการ Refersh หรือ Redirect ตัวเอง ใบบางครั้งเรามีความจำเป็นต้องทำการ Refresh ...