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

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

การตัดรูปภาพ (Slice) และนำรูปมาภาพมาประกอบโดยการใช้ตาราง (Table)

เรื่อง : การตัดรูปภาพ และนำรูปภาพมาประกอบโดยการใช้ตาราง (Slice Image with Table) สำหรับเรื่องนี้เป็นเรื่องที่มีผู้เขียนขอบ...  

สร้าง Select Options แบบ Checkbox เพื่อให้ User เลือกข้อมูล

เรื่อง : วิธีการสร้าง Select Options ในแบบ Checkbox หลายท่านอ่านหัวข้อบทความแล้วอาจจะงง ๆ ว่า Select Options ในแบบ Chackbo...  

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 3 (จบ)

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 3 (จบ) กลับมาต่อกันอีกสักตอนสำหรับเรื่องของการใช้งานโป...  

สร้าง Web Application ด้วย Dreamweaver + PHP + MySQL การเตรียมพร้อมและข้อตกลงในการเรียนรู้

เรื่อง :: การสร้าง Web Application ด้วย Dreamweaver + PHP + MySQL ตอนที่ 1สำหรับบทความนี้ก็จะเป็นบทความชุดนะครับคือใน 1 เร...