XHTML DOCTYPE เขียนเว็บภายใต้การทำงานของ DTD และ Box Model

“จารย์ครับ ทำไมผมเอาโค้ด ที่เว็บไทยซีเอสมาลองใช้แล้ว มันไม่จัดกลางอย่างตัวอย่างในเว็บครับ” คำถามที่น้องคนนึง ทักถามมาทางเอ็มเอสเอ็น ผมสงสัยปนงงเล็กน้อย ว่าทำไมมันไม่จัดกลาง เพราะดูแล้วมันก็ไม่น่าจะมีปัญหาอะไร

ครู่ใหญ่ๆ ผ่านไป เขาได้ส่ง ลิงค์ให้ผมเข้าไปดู หลังจากที่ผมเปิดดู มันก็ไม่จัดกลางอย่างที่เขาว่า ผมเริ่มอยากจะหาสาเหตุ ต้อง วิวซอร์สดูก่อน

แม่เจ้า DOCTYPE หายไป!

เรื่องเล็กๆ ที่สามารถชี้ชะตาชีวิตได้เลยว่า คุณเหมาะที่จะเขียน XHTML CSS ในระดับไหน

ลบทิ้งทำไมครับ ลบไอ้ภาษาอังกฤษ ที่คุณไม่เข้าใจสองสามบรรทัดข้างบนนั้นทิ้งทำไม ไม่เคยคิดเอะใจ สงสัยว่ามันคืออะไรแล้วหาคำตอบให้กับชีวิตบ้างเลยหรือ

ไม่น่าเชื่อ ว่าหลายๆ คนที่ทำเว็บมายาวนาน จะไม่รู้จักว่า DOCTYPE หรือ ภาษาอังกฤษที่มีแถมมาในหน้าเพจจากเครื่องมือ XHTML Editor นั้นมันคืออะไร สำคัญขนาดไหน (รวมถึงผมตอนรู้จักและหัดทำเว็บใหม่ๆ เมื่อหลายปีก่อนด้วย)

ไม่เข้าใจ ว่าทำไมหลายๆ คนเลือกที่จะลบ DOCTYPE ที่ถูกเจนเนอร์เน็ตออกมาตอนเปิดหน้า Document ใหม่มาเขียนเว็บไป

ใครที่ยังไม่เข้าใจเรื่อง DOCTYPE สามารถอ่านเพิ่มเติมได้จาก บทความเรื่อง DOCTYPE ที่ผมเขียนเอาไว้ก่อนหน้านี้ครับ

ในตัวอย่างของแต่ละบทความ ส่วนใหญ่แล้วผมจะเขียนอยู่ภายใต้ XHTML 1.0 Strict หรือ XHTML 1.1 มันแตกต่างกันตรงที่ XHTML 1.1 ถ้าจะเขียน ต้องกำหนดหน้าเว็บเป็น application/xhtml+xml ซึ่งต้องเขียนแบบ XML ปัญหาหลักที่เราไม่สามารถเขียนได้แบบเต็มๆ อย่างนั้นก็คือ เว็บบราวเซอร์ ตระกูล IE ยังไม่สามารถรองรับ application/xhtml+xml (IE6) เราจึงต้องเขียนแบบ text/html ไปก่อน

เมื่อเรารู้แล้วว่าเราจะเขียน XHTML ภายใต้ DTD อะไร เราจึงสามารถกำหนดและเลือกวิธีเขียนเว็บได้ง่ายมากยิ่งขึ้น

อย่างที่รู้กันครับ 1.0 Strict ไม่อนุญาตให้เขียน แอตทริบิ้ว ของ html ลงไปในอีเลเม้นแน่ๆ และที่สำคัญ xhtml และ html มันต่างกันแบบคนละเรื่อง

กรุณาทำความเข้าใจกันก่อนนะครับ

Box Model

Box Model คือการจัดวางกล่อง หารบ่งส่วนหรือแบ่ง section ของหน้าเว็บออกเป็นชิ้นๆ นั้นเอง พอเราเอามารวมกันแล้วมันก็จะกลายเป็นเลย์เอ้าท์

Box Model คือตัวโครงสร้างการแสดงผลข้อมูล ซึ่ง Element หลักที่ถูกนำมาใช้เพื่อแบ่งส่วนของหน้าเว็บนั้น คือ div นั่นเอง

คุณสมบัติ ข้อจำกัดและลักษณะการนำไปใช้งาน ของ div มีจำกัดนะครับ ใช้พร่ำเพรื่อไม่ดี ไร้ประโยชน์เปล่าๆ

อ่านบทความเรื่อง div