ตรวจสอบโค้ด 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

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

การสร้างโปรแกรมสำหรับแสดงข้อมูลจาก Database (Select Data)

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 4ในตอนก่อนเราได้ทำการสร้าง Form และโปรแกรมส...  

การติดตั้ง Dreamweaver Extension ในแบบ Command Line

เรื่อง : วิธีการติดตั้ง Extension ในแบบ Command Line Dreamweaver CC 2015 (หรือเวอร์ชั่นที่สูงกว่า) ท่าน...  

เรียกใช้ External Stylesheet (CSS) ด้วยการ Drag & Drop

เรื่อง : เรียกใช้ไฟล์ CSS ด้วยการลากวาง โปรแกรม Dreamweaver มีความสามารถด้านการลากและวาง หรือ Drag...  

การเขียนโค้ดโปรแกรมด้วย PHP กับ Dreamweaver (PHP with Dreamweaver)

เรื่อง : PHP กับโปรแกรม Dreamweaver บทความนี้จะขอมาแนะนำการใช้งานโปรแกรม Dreamweaver กับการเขียนโปรแกรมด้วยภาษา PHP ครับ ...