ในขั้นต้นของการคิดวิเคราะห์ข้อมูลที่จะนำมาทำเป็น list ในรูปแบบต่างๆ ความเข้าใจในพื้นฐานของความเป็น list คือสิ่งสำคัญ เราจะรู้ได้อย่างไรว่าอันไหนคือ list ที่ต้องเรียงลำดับ (ol) อันไหนคือ list ที่ไม่ต้องเรียงลำดับ (ul)
การแสดงผลที่มองเห็นได้นั้น มีความสำคัญคือ ต้องให้ผู้อ่านเข้าใจโครงสร้างของเอกสารจากการมองเห็นได้ง่าย ส่วนการมาร์กอัพนั้น ก็ต้องทำให้ผู้อ่านที่มองไม่เห็นเข้าใจโครงสร้าง ของเอกสารได้ง่ายเช่นเดียวกัน ทั้งสองสิ่งนี้จะต้องทำไปพร้อมกัน
ภาษานี้คงคุ้นกันดีอยู่ในหมู่นักเขียนเว็บทั้งหลาย HTML ภาษานี้เป็นภาษาที่ Browser ส่วนใหญ่เข้าใจดีว่าคืออะไรและสามารถประมวลผลได้อย่างถูกต้อง Browser ส่วนมากนั้นจะรันบนคอมพิวเตอร์ที่มีหน่วยความจำมาก จึงไม่ค่อยเป็นปัญหามากนักในการประมวลผลแม้ว่าบางครั้งผู้เขียนโค้ดอาจเขียนโค้ดผิดพลาดก็ตาม แต่ Browser ก็สามารถเดาได้และแสดงผลได้อย่างถูกต้องเป็นส่วนมาก แต่ปัญหาก็คือ หากต้องการใส่แท็กใหม่ ๆ ลงไป เอกสาร HTML จะไม่สามารถประมวลผลได้ มันจะประมวลผลเฉพาะแท็กที่มันรู้จักเท่านั้น นั่นคือตัว HTML มีความจำกัด นอกจากนี้แล้วเอกสาร HTML ยังถูกเอาไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ ทำให้เอกสารมีความยุ่งยาก ทำความเข้าใจยาก ต้องใช้เวลามากในการเขียนหรือออกแบบเนื่องจากมีการปนกันของเนื้อหาและการตกแต่งเอกสาร เอกสาร HTML ส่วนมากจึงเกิดสภาพที่เรียกว่า malformed ซึ่งตรงข้ามกับคำว่า well-formed ซึ่งหมายถึง เอกสารมีความถูกต้อง ไม่มีข้อผิดพลาดและไม่ฝืนข้อกำหนดของตัว DTD
เห็นด้วยกับทุกท่านครับ ดีใจที่เห็นคนไทยมีคนสนใจ XHTML กับ CSS และพยายามใช้ให้ถูกต้อง เพราะประเทศอื่น ๆ เขาไปกันไกลแล้ว จริง ๆ ผมเคยคิดที่จะทำเว็บเช่นนี้เหมือนกัน แต่ไม่มีเวลา ก็เลยล้มเลิกไป แต่ตัวผมเองนั้นก็ศึกษา XHTML, CSS และ WCAG 1.0 + WCAG 2.0 มามากกว่า 5 ปีแล้ว (พอดีว่าทำงานในองค์กรคนพิการ แล้วเขามีข้อบังคับว่า ต้องรู้จัก 3 ตัวนี้ซึ่งมีส่วนช่วยให้คนพิการเข้าถึงข้อมูลข่าวสารจากเว็บได้สะดวกขึ้น)
แต่พอได้ทำแล้วก็รู้สึกชอบมากเลยครับ มันทำให้เราสามารถทำเว็บได้เร็วขึ้น แก้ไขอะไรก็ง่ายขึ้น ฯลฯ มีข้อดีหลายอย่าง บรรยายไม่หมดบางคนอาจสงสัยว่า ถ้าใช้ XHTML กับ CSS แล้วมันดีกับ Search Engine ยังไง อันนี้ก็เป็นเพราะว่า
อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม
เรามาดูข้อจำกัดของเทคโนโลยีกันก่อนว่า มันมีอะไรบ้างและเราจะเลือกใช้อะไรบ้าง
ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล
ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง
ตัวอย่างแสดงผลออกมาแบบนี้
“จารย์ครับ ทำไมผมเอาโค้ด ที่เว็บไทยซีเอสมาลองใช้แล้ว มันไม่จัดกลางอย่างตัวอย่างในเว็บครับ” คำถามที่น้องคนนึง ทักถามมาทางเอ็มเอสเอ็น ผมสงสัยปนงงเล็กน้อย ว่าทำไมมันไม่จัดกลาง เพราะดูแล้วมันก็ไม่น่าจะมีปัญหาอะไร
ครู่ใหญ่ๆ ผ่านไป เขาได้ส่ง ลิงค์ให้ผมเข้าไปดู หลังจากที่ผมเปิดดู มันก็ไม่จัดกลางอย่างที่เขาว่า ผมเริ่มอยากจะหาสาเหตุ ต้อง วิวซอร์สดูก่อน
แม่เจ้า DOCTYPE หายไป!
เรื่องเล็กๆ ที่สามารถชี้ชะตาชีวิตได้เลยว่า คุณเหมาะที่จะเขียน XHTML CSS ในระดับไหน
ลบทิ้งทำไมครับ ลบไอ้ภาษาอังกฤษ ที่คุณไม่เข้าใจสองสามบรรทัดข้างบนนั้นทิ้งทำไม ไม่เคยคิดเอะใจ สงสัยว่ามันคืออะไรแล้วหาคำตอบให้กับชีวิตบ้างเลยหรือ
ไม่น่าเชื่อ ว่าหลายๆ คนที่ทำเว็บมายาวนาน จะไม่รู้จักว่า DOCTYPE หรือ ภาษาอังกฤษที่มีแถมมาในหน้าเพจจากเครื่องมือ XHTML Editor นั้นมันคืออะไร สำคัญขนาดไหน (รวมถึงผมตอนรู้จักและหัดทำเว็บใหม่ๆ เมื่อหลายปีก่อนด้วย)