XHTML

ปฏิเสธไม่ได้ว่า สิ่งที่ยากที่สุดสิ่งหนึ่งในการเขียน HTML และ CSS คือ การตั้งชื่อ Class และ ID ถึงแม้ว่า ในตอนนี้จะหมดยุคของการตั้งชื่อ Class เพื่อเขียน CSS แล้วก็ตาม เราสามารถเขียน Combinator selectors หรือ Simple selectors แบบ Type Selector ผสมกับ Child Selector กันไปได้ใน CSS2.1 ถึงกระนั้น เราก็ยังจำเป็นต้องสร้าง Class เพราะว่า การตั้งชื่อ Class และ ID ไม่ได้เกี่ยวอะไรโดยตรงกับ CSS

Class และ ID เป็นสิ่งจำเป็นอย่างยิ่ง ในยุคของ Web 4.0 (อย่างช้า ก็ 5.0) เป็นต้นไป เพราะ หน้าเว็บนั้นๆ หรือเอกสารนั้นๆ จะถือตนเป็นฐานข้อมูล HTML ด้วยตัวของมันเอง กฎของเว็บยุคใหม่ สามารถอนุญาตให้เข้าถึง และ Share ข้อมูลกันได้จากหน้าเว็บโดยตรง เช่น นาย ก ไก่ ทำเว็บเกี่ยวกับ "การปลูกผัดสวนครัว" นาย ข ไข่ ทำเว็บเกี่ยวกับการเลี้ยงปลา นาย ค "ทำเว็บเกี่ยวกับการ ทำอาหาร" ทั้งสามคนนี้ สามารถที่จะ เขียนชุดภาษาคอมพิวเตอร์ใดๆ เพื่อที่จะไป เก็บข้อมูลจากหน้าเว็บ ตามที่เว็บนั้นๆ "ได้ Markup เอาไว้อย่างถูกวิธี และแยก Class และ ID ของข้อมูลอย่างเป็นระเบียบ" ทั้งนี้ สามคนข้างต้น ต้องมีการตกลงเรื่องการเสนอข้อมูลทางกฎหมายต่อไป ว่าจะเอาไปแสดงยังไง อ้างอิงยังไง แต่เรื่องความปลอดภัยในการเข้าถึงข้อมูลก็เป็นอีกเรื่องหนึ่ง ซึ่งเมื่อไม่นานมานี้ "เซอร์ ทิม เบอร์นเนอส ลี" ก็ได้กล่าวเอาไว้ว่า เรื่องความเสี่ยงของการเข้าไปนำข้อมูลจากหน้าเว็บของคนอื่น แล้วเอาออกมาใช้นั้น จะทำอย่างไร หรือมีมาตรการใด เพื่อเป็นรับรองได้ว่า ไม่ได้เป็นการทำเพื่อการโกง แฮ๊ก ล่วงเกินข้อมูลของผู้อื่น

ลักษณะการแชร์ข้อมูลแบบนี้ก็อย่างเช่น นาย ข ทำเว็บเลี้ยงปลา มีเนื้อหาเกี่ยวกับปลา เนื้อหาเกี่ยวกับปลา ของนาย ข สามารถที่จะ สร้างความสัมพันธ์ไปยังเนื้อหาของ นาย ค ที่เกี่ยวกับเมนูอาหารประเภทปลาได้ และ เนื้อหาของนาย ค ก็จะไปตามหาผักที่มีประโยชน์ที่สุด เมื่อเอามาปรุงกับปลาชนิดที่นาย ข มีอยู่ และบอกได้ด้วยว่า ในรัศมี 2 กิโลเมตรที่เรากำลังนั่งอยู่ เราจะไปซื้อผักซื้อปลา ได้จากร้านค้าไหน หรือมีบ่ปลาอีกกี่บ่อ เปรียบเทียบราคา ให้เราตัดสินใจ เป็นต้น

สิบห้านาทีถัดมา ไปยืนรอ หน้าประตูบ้านได้เลย คุณจะมั่นใจได้ว่า ผัก ปลา ที่ได้มานั่น ปลอดสารพิษ ราคาเป็นกันเองชัวร์ อร่อยไม่อร่อย ก็อยู่ที่ฝีมือทำอาหารของคุณแล้ว

เมื่อเดือนที่แล้วมีข่าวดีของคนรัก iPhone คือ App Store ได้อนุญาติให้มี 3rd party web browser ที่สามารถ install ลงในเครื่อง iPhone ได้แล้ว ผมเองก็ได้แต่เฝ้ารอดูอยู่ว่ามันจะออกมาในรูปแบบใด อย่างว่า ... ถ้าว่ากันด้วยเรื่องการตลาด และ ธุรกิจแล้ว iPhone กำลังจะครอบงำ trend การทำเวปสำหรับ mobile device หรือเปล่า (ลองจับตาดูกัน) เพราะในแง่ความคิดผมแล้วมันเป็นอะไรที่มาแรงเหลือเกินฉุดไม่อยู่จริง ๆ ไม่ว่าจะเป็นผลิตภัณฑ์ใดของ Apple มันมักจะสวนกระแส ป่วนกระแส และ สุดท้ายสร้าง กระแสได้ดีเสมอ กลับมาต่อกันด้วยเรื่องของเรา จากที่ผมติดค้างไว้ เมื่อปีที่แล้ว (ปีที่แล้วเลย) ว่าจะแนะนำให้รู้จักภาษาโครงสร้างใหม่ XHTML Basic 1.1 สำหรับ การทำเวปในส่วนของ mobile device นั้นบัดนี้ได้เพลาพอปลีกตัวพอหายใจได้ขยับขยายผายปอด ผายลม ออกมาแรด ๆ หายใจทิ้งทำนั่นทำนี่ได้หน่อย ก่อนจะเข้าสู่ห้วงยุ่งอีกครั้ง ก็ขอบ่น ๆ ไว้สักหน่อย สักบทความ

ผมขออนุญาติไม่พูดเรื่องวิธีการออกแบบ GUI ในการทำเวปสำหรับ mobile device ผมมีความเชื่อว่าถ้าเราเข้าใจธรรมชาติของ โครงสร้าง และ ตัวกำหนดการแสดงผล layout แล้วมันจะทำให้เราเข้าใจว่าเราจะต้อง ออกแบบ GUI ออกมาอย่างไรให้เหมาะสมกับ ธรรมชาติของภาษาโครงสร้าง และ ตัวกำหนดการแสดงผลนั้น ๆ ได้เป็นอย่างดีจากนั้นชีวิตก็มีความสุข แล้ว (ถ้าใครที่ทำงานบริษัท ที่ อยู่ในอุตสาหกรรม website งานต่อไปหลังจากออกแบบ GUI ก็คงจะเป็นการตรวจสอบว่าตรงกับแผนพัฒนา เศรษฐกิจ และ ผลิตภัณฑ์ หรือไม่) เริ่มเรื่องกันเลยดีกว่า

เกริ่นเรื่อง

กาลปางก่อน เนิ่นนานมานั้น เหล่านักพัฒนาทั้งหลาย ที่พัฒนา Web site นั้นมีแนวทางในการแก้ไขปัญหาสำหรับผู้ใช้ที่เข้ามาเยี่ยมชม Website ของพวกเขาด้วย โทรศัพท์มือถือ, palm, pda และ/หรือ เหล่า Smartphone ต่าง ๆ คร่าว ๆ หลัก ๆ ดังนี้

1. 1. คือไม่สนใจอะไรทั้งสิ้น ปล่อยให้ Browser ของอุปกรณ์เหล่านั้นแสดงผล โครงสร้างหน้าตา Website ของพวกเขาไปตามยถากรรมที่มันถูกพัฒนามา
2. 2. ดัดแปลงหน้าตาให้ใกล้เคียงกับการออกแบบที่ ออกแบบมาสำหรับ desktop screen ทั้งหลาย ด้วย CSS (handheld)
3. 3. ทำแยกออกมาเป็น version ของอุปกรณ์เหล่านี้ไปเลย desktop screen ก็อีกแบบ สำหรับมือถือนั้นก็เป็นอีกแบบแยกออกจากกัน

ครั้งนี้ผมจะเขียนแนะนำเกี่ยวกับ markup ที่ w3 นั้นพัฒนามาเพื่อสนับสนุนอุปกรณ์เหล่านี้โดยเฉพาะ และ มี feature อะไรบ้างที่ w3 นั้นเตรียมให้เรานำมาใช้กัน

ผมติดมาไว้นานมากตั้งแต่ปีที่แล้ว ที่บอกว่าถ้ามีเวลาผมจะแนะแนวทางการใช้ form ให้ถูกต้อง สะอาด และ accessibility วันนี้ก็คิดว่าคงได้เวลาแล้วล่ะ เพราะกว่าจะว่างอีกคงนานแน่ ๆ เลย เพราะตอนนี้ผมเองก็ไปมุ่งศึกษาในส่วนของ Semantic Web และ Mobile Web Technology แล้วมากกว่า อีกอย่างฝันอยากจะทำ free PDF Magazine เกี่ยวกับการสร้างสรรค์ การจุดประกาย ส่งเสริมให้เกิดความคิดสร้างสรรค์ คิดต่อยอด ให้มีในประเทศไทยบ้างแต่คงจะเริ่มจากกรอบของสิ่งที่ผมทำอยู่ รู้จัก และ ถนัด ซึ่งคิดว่าคงจะได้เห็นกันในเร็ว ๆ วันนี้ แต่อย่างไรก็ตาม ผมก็จะมาบ่น ๆ แบบเรื่อย ๆ เอื่อย ๆ ของผมแบบนี้ ต้องขออภัยที่อาจจะทำให้ ThaiCSS ดูเงียบเหงาไป อาจจะเห็นผมคนเดียวอย่างนี้บ่อย ๆ เพราะพรคงอาจจะนาน ๆ แวะเข้ามาทีแล้ว เพราะมีหน้าที่รับผิดชอบอันยิ่งใหญ่กว่าไว้รอ Surprise กันในเร็ว ๆ วัน สำหรับคนที่รัก Tweeter สามารถพูดคุยกับผมได้ทั้งวันทั้งมีสาระ และ ไม่มีสาระได้เลย (อย่างหลังคงไม่บ่อย หะ หะ) ผมใช้ username ว่า radiz ชื่อผมนี่แหละครับ แนะนำว่าให้ใช้ SNS ในทางที่มีประโยชน์นะครับ อย่าเอามันมาทำลายเวลา และ ขดสมอง

เข้าเรื่องกันดีกว่าครับ ก่อนเราจะเขียนโครงสร้างแบบฟอร์มใน xhtml นั้นเรามารู้จัก tag ต่าง ๆ ที่จะทำงานร่วมกับโครงสร้างแบบฟอร์มกันก่อนโดยผมจะกล่าวแบ่งตามประเภทของมันนะครับ (Block Element และ Inline Element) และ สิ่งที่ผมกล่าวถึงจะเป็นส่วนที่ทำงานเกี่ยวกับ Data Entry (การใส่ข้อมูล) ของแบบฟอร์มส่วนโครงสร้างร่วมอื่น ๆ ให้พิจารณาตามความเหมาะสมครับ บางคนอาจจะใช้ ul, ol หรือ dl ไม่แนะนำให้ใช้ table ในการจัด layout ของ form ครับผม มาทำความรู้จักกับ tag ที่ทำงานร่วมกับ Data Entry ต่าง ๆ กันเลยครับ

เคยได้ยินกันมาบ้างไหมครับ Common Attribute เป็นชื่อเรียกกลุ่ม Attribute ของ xhtml ที่เราจะพบเจอกับมันบ่อย ๆ ในการทำงาน หรือ ใน Website ของคนอื่น ๆ

attribute เหล่านี้จะถูกนำมาใช้กับ xhtml element ได้หลาย ๆ element เพื่อกำหนดบ่งชี้คุณสมบัติ หรือ คำอธิบายต่าง ๆ ให้กับ xhtml element นั้น ๆ ที่เรียกตัวมันไปใช้

ผมนึกถึงตอนที่ผมหัดเขียน CSS เมื่อสองสามปีที่ผ่านมา ตอนนั้นคิดอยู่อย่างเดียวว่า ต้องเขียนให้มันแสดงผลได้ใน IE ก่อน แต่พอศึกษาไป เรื่อยๆ กลับกลายเป็น ต้องเขียนให้ดูได้บน Modern Browsers ก่อน IE ค่อยตามมา ผ่านไปเกือบปี ถึงรู้ว่า ก่อนจะเขียน CSS ให้ไปหัดเขียน XHTML ใหม่เสียก่อน

XHTML Syntax หรือ หลักการณ์เขียน XHTML การเขียน XHTML ที่ถูกต้องนั้นง่ายนิดเดียวครับ จำง่าย ๆ เลยว่าข้อมูล จะเป็นตัวกำหนด elements ที่จะเอามาครอบมัน โดยเลือก tag และ attribute ของ XHTML มาอธิบายความหมายของมัน ให้เหมาะสม

ทำไมถึงขั้น ต้องรู้ด้วยหละ เพราะอะไร ผมว่ามีน้อยคนนักที่แวะเวียนเข้ามา เว็บไทยซีเอสเอสและจะไม่มีพื้นฐานเรื่อง html เลย

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

กับคำถามมากมายว่า DIV หรือ TABLE มันดีกว่ากันยังไง มันจะใช้แทนที่กันได้ยังไง หลายคนที่ยังสงสัย ตอนนี้ผมมีข้อมูลเล็กๆ น้อยๆ มาแจกจ่ายกันบ้าง อาจจะไม่กระจ่างมาก แต่คงพอถึงบางอ้อ

เรื่องมันมีอยู่ว่า

ด้วยเหตุแห่งยุคแรกเริ่มเดิมทีที่เหล่า เว็บดีไซเนอร์ พากันเรียกใช้ <table> ซึ่งเป็นตัวจัดการวางข้อมูล ออกมาใช้เป็นตัวจัดการโครงสร้างของเว็บทั้งหมด ด้วยเหตุที่ง่ายและยังไม่มีวิธีใดที่ดียิ่งกว่า TABLE จึงแพร่หลายและถูกใช้อย่างผิดๆ มาตั้งแต่นั้น

ปัจจุบัน คำว่า Tableless Design หรือการทำเว็บแบบพึ่งพา table ให้น้อยที่สุด หรือไม่ต้องใช้เลย อาจจะแพร่กระหลายในหมู่คนทำเว็บต่างประเทศอื่นๆ โดยเฉพาะฝั่งยุโรป แต่ในเมืองไทยยังไม่เป็นที่นิยมมากนัก เพราะต้องการใช้เวลาในห้วงระยะหนึ่งในการทำความเข้าใจ เรียนรู้มากพอสมควร ทั้งในเรื่องของ XHTML, XML เพื่อที่จะสามารถเข้าใจหลักการทำงานพื้นฐานได้ ถึงแม้โครงสร้างภาษาจะไม่แตกต่างจาก HTML มากมายก็ตาม

ต้องใช้ DIV ทั้งเว็บใช่หรือไม่

คำตอบคือ ใช่ และไม่ใช่

อย่างไร

ถ้ากรณีที่เว็บของเราที่ทำขึ้นมานั้น ไม่ได้มีการแสดงผล แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel ก็คงไม่จำเป็นต้องมี table ครับ แค่ DIV และ อย่างอื่น ก็ทำเว็บได้

แต่ ถ้าเมื่อใดที่เราต้องแสดงผลแบบเป็นแถว เป็นคอลัมน์ เรายังต้องใช้ table อยู่ นั่นเอง

ด้วยคุณสมบัติและลักษณะที่แตกต่าง จึงไม่สามารถเอามาใช้แทนกันได้

ผมเคยแนะนำไปแล้วว่าเราสามารถใช้ Comment ตบตา Netscape 4 แต่คราวนี้เรา
จะมาใช้ Comment ตบตา Modern Browser ให้มองไม่เห็นคำสั่งบ้าง ให้คุณลุง
Netscape 4 แกมองเห็นเพียงแต่คนเดียว

วิธีนี้ใช้ได้ผลชงัดแถม Valid กับ CSS Validator ด้วย เป็นเทคนิคที่ค้นพบโดย Fabrice Pascal วิธีนี้สามารถตบตาได้หมด ยกเว้น Browser ดังต่อไปนี้นะครับ

1. Netscape 4
2. Opera 4 และ 5 (Windows)
3. Opera 5 (Mac)

ความเคยชินที่ได้ทำสิ่งใดสิ่งหนึ่งมาช้านาน จากยาก จนกลายเป็นง่าย และไม่อยากเปลี่ยนไปทำรูปแบบอื่นอีก อาการอย่างนี้ บางครั้งมันอาจจะทำให้เราท้อแท้ใจ เมื่อเจอของใหม่

ถ้ามีโจทย์มา ถ้านะครับ แบบว่า สมมุติ ให้ทำเว็บไซท์ ธรรมดา 1 หน้า ดีไซน์ พอไปวัดไปวา แต่ ห้ามใช้ table หรือแม้กระทั่ง div tag ในหน้านั้น คุณจะแก้โจทย์ข้อนี้ด้วยวิธีการอะไร ด้วยการใช้ XHTML + CSS ในการสร้างหน้าเว็บขึ้นมา อย่าเพิ่งคิดว่ามันเป็นไปไม่ได้ครับ มาลองดูกันดีว่า