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

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

จัดรูปแบบบโค้ดด้วย Apply Source Formatting

เรื่อง : จัดรูปแบบบโค้ดด้วย Apply Source Formattingใครที่ชอบเขียนโค้ดด้วยโปรแกรม Dreamweaver อาจจะพบปัญหาที่ว่า พอเขียนโค้...  

เมาท์ (Mouse) มาตารางเปลี่ยนสี (CSS Pseudo-classes)

เรื่อง : เมาท์มาตารางเปลี่ยนสีด้วย CSS มีผู้ชมที่ติดตามเว็บ DwThai.Com ขอกันเข้ามามากครับเกี่ยวกับการทำเทคนิคนี้ ซึ่งคุณคงจ...  

การ Set ให้โปรแกรม Dreamweaver ใช้งานภาษาไทย

เรื่อง : การกำหนด Encoding ให้เว็บเพจเพื่อการใช้งานภาษาไทยได้อย่างถูกต้อง *เวอร์ชั่นตั้งแต่ CS3 ขึ้นไปไม่จำเป็นต้องเซ็ท เพราะค่า Defaul...  

สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar

เรื่อง : สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar มีหลายท่านสอบถามกันมาบ่อยเหลือเกินว่า อยากให้ทำการสร้าง Link ที่พอเมื่อ ...