Tag: xhtml

กลับมาที่ html กับ xhtml กันต่อ สองภาษานี้คล้ายกันแต่ไม่เหมือนกันและถูกแยกออกเป็นคนละภาษา แต่สร้างขึ้นมาจากโครงสร้างภาษาเดียวกัน งงไหมครับ ถ้างง ก็นี่เลยครับ “สองภาษานี้เขียนไม่เหมือนกัน อย่าเอาไปผสมกัน” ง่ายๆ เลย ถึงแม้ว่า DOCTYPE

คำว่ามาตรฐานกับความนิยมในสองอย่างนั้นแตกต่างกันยังไงผมขอเล่าความสั้นๆ ก่อนนะครับ ว่า html กับ xhtml จะอยู่ร่วมโลกกันอย่างไร การจะเขียนอะไรลงไปในหน้าเอกสาร หรือหน้าเว็บนั้นให้เหลือบมองไปที่ DOCTYPE กันก่อนว่าเอกสารนั้นอยู่ภายใต้ภาษาอะไร ประเภทไหน ถึงแม้ว่าเราจะใช้ Adobe Dreamweaver ในการเขียนหน้าเอกสารขึ้นมาก็ตาม ขอให้ลืมการแสดงผลหน้าเอกสารของ IE6 และ IE7 ไปก่อน การที่เราเขียนเอกสาร วางโครงสร้างให้ถูกต้องตามหลักมาตรฐาน ใน User Agents ที่ได้มาตรฐานจะ Render หน้าเอกสารออกมาได้อย่างถูกต้อง แล้วทำไม IE แสดงผลไม่ถูกต้อง ก็เพราะว่า IE6 และ IE7 ผลิตขึ้นมาไม่ได้เข้าหลักมาตรฐานตามที่ W3C กำหนดนั่นไงหละครับ จึงแสดงผลหน้าเอกสารที่เขียนแบบ ผิดๆ ได้ แต่ Firefox หรือ Opera แสดงผลเพี้ยน ก็เพราะหน้าเอกสารเขียนผิด User Agents ทั้งสองที่ยึดหลักมาตรฐานก็แสดงผลออกมาผิดๆ นั่นเอง ในขณะเดียวกัน ที่ผ่านมา คนนิยมใช้ IE กันทั่วโลก ความถูกต้องจึงถูกละเลย จะไปสนใจบราวเซอร์อื่นทำไม ในเมื่อไออีแสดงผลได้ถูกต้องใช่ไหมครับ แต่เราลืมไปว่า สักวันข้างหน้าความจริงจะปรากฎ เฉกเช่นชั่วโมงนี้ เมื่อบราวเซอร์อื่นๆ ที่ไม่ใช่ ไออีเริ่มแย่งส่วนแบ่งทางการตลาดและคำว่า Web Standards เริ่มแพร่กระจาย อ้าแขนต้อนรับ Semantic Web เพื่อที่จะไปยุค Web 3.0 ยุคที่ความสำคัญของทุกอย่างไม่ว่าจะหน้าบ้านหรือหลังบ้านเท่าเทียมกันหมด เข้าถึงข้อมูลได้เหมือนๆ กัน

ไม่ทราบว่าเคยได้ยินกันบ้างหรือยังกับคำคำนี้ Microformats และ งงกันบ้างไหมครับว่ามันคืออะไร ทำงานอย่างไร สำหรับเราหลาย ๆ คนคงเป็นเรื่องใหม่ ที่จะเข้ามาปั่นหัวให้วุ่นวายกันอีกแน่ Microformats เป็น “กลุ่มของข้อมูล ที่นำเอามาตรฐานเข้ามาใช้ ที่ถูกออกแบบโครงสร้างมาให้เป็นประโยชน์ต่อ มนุษย์ มากกว่า จักรกล” อย่างไรนะเหรอ? ในอนาคตอีกไม่นานนี้ (ในประเทศไทย) จะได้รู้ถึงคุณประโยชน์ของมันอย่างแน่นอน เมื่อ ICT รู้จักทำประโยชน์ให้ประเทศ รู้จักมองถึงปัญหาที่เกิดเกี่ยวกับโลก cyber อย่างแท้จริง รู้จักมองถึงประชาชนในประเทศ และ รักษาสิทธิ์ที่พวกเราพึงจะได้มากกว่านี้ … ทำไมผมถึงพูดออกมาอย่างนั้น ทำไมน่ะเหรอ เอาไว้จะสาธยายให้ฟัง หลังจากอธิบายเกี่ยวกับ Microformats ก่อนก็แล้วกันครับ

Microformats นั้นหมายถึงการใช้ Standard ที่เรารัก (ไม่รู้ว่ารักจริงไหมนะ เฉพาะชาว ThaiCSS หรือเปล่า?) ให้มีความหมายมากที่สุด (semantic มากที่สุด) เท่าที่จะทำได้ มองง่าย ๆ ไปเลยเสียว่า มันคือแบบฝึกหัดในการทำให้ Website ของคุณนั้นมี Accessibility ที่สูง ๆ นั่นเอง Microformats ใช้ XHTML tags หลาย ๆ ตัวเช่น address, cite และ blockquote และ XHTML attributes หลาย ๆ ตัวเช่น rel, rev และ title เอามาทำให้ข้อมูลของคุณนั้นเกิดความหมาย เกิดประโยชน์มากที่สุด (ถ้าอ่านมาถึงตรงนี้ คุณมีความคิดในใจเกิดขึ้นว่า อะไรของมันวะเดี๋ยว tags เดี๋ยว attributes ให้ลองอ่าน ความหมายของมันในกระทู้นี้ Microformats ใช้ยากไหม? ไม่ยากครับ มันใช้ tags และ attribute ที่เราคุ้นเคยนี่แหละ นำมาใช้ในทางที่ดีที่สุด เกิดประโยชน์ที่สุด

เป็นที่ทราบกันอยู่แล้วว่าขนาด default ของ font ในแต่ละ browser เวลาที่เรากด small, smaller, medium, larger และ largest นั้นอยู่ในหน่วย % คือ 90%, 100%, 110% และ 120% แต่ขนาด zoom นั้นจะเป็นเอกลักษณ์ของแต่ละ browser

สุดท้ายแล้ว สิ่งที่ผมเจออยู่ในตอนนี้ คืออาการ มึนงง คล้ายๆ กับการหลงทาง เพราะอะไรนั่นหรือ เพราะ การเขียนเว็บนี่แหละครับ มันไม่เหมือนเดิม มันไม่เหมือนเมื่อก่อน ไม่เหมือนโดยสิ้นเชิง “ใครๆ ก็ทำเว็บได้” คำๆ นี้คุ้นๆ เหมือนผมเคยได้ยินจากที่ไหนมาก่อน แต่ อยากจะเพิ่มเติมคำนี้เข้าไปด้วย “ใครๆ ก็ควรเข้าใจในหลักการทำเว็บพื้นฐาน& อยากให้เข้าใจ เข้าใจจริงๆ ก่อน ก่อนที่จะเริ่มลงมือทำเว็บสักเว็บ

เคยลองเขียนหน้าเว็บแบบ XHTML 1.1 แล้วเกิดข้อผิดพลาดจนหน้าเว็บไม่แสดงผลบ้างไหมครับ หรือ แสดงผล แต่ผิดเพี้ยน ความหงุดหงิด งุ่นง่านเกิดขึ้นกับผมทุกครั้งที่คิดอยากจะเขียนเว็บแบบ XHTML 1.1 แต่ในชีวิตจริง ถ้าหากคุณยังทำงานกับโปรแกรมเมอร์ที่ยังไม่เข้าใจว่า XHTML 1.1 กับ HTML 4.01 มันต่างกันอย่างไรหละก็ บอกคำเดียวครับ ว่าคุณ ไม่ต้องไปแสดงกล้ามดากอะไรกับเขาเหล่านั้นอีกแล้ว หยิบยื่น XHTML 1.0 Transitional ให้เขาเหล่านั้นก็พอ โลกแห่งความฝันแตกต่างกับความเป็นจริงฉันใด ก็ฉันนั้น โลกแห่งธุรกิจและความสามารถในการพัฒนาตัวตน ของคนทำงานมักไม่เท่ากันเสมอ คำแนะนำคือ เก็บความขมขื่นเอาไว้คนเดียว แล้วไปเขียนระบายความรู้ กู้ความเครียดใน Web Log ของตัวเองซะ

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

HTML (Hyper Text Markup Language)

ภาษานี้คงคุ้นกันดีอยู่ในหมู่นักเขียนเว็บทั้งหลาย HTML ภาษานี้เป็นภาษาที่ Browser ส่วนใหญ่เข้าใจดีว่าคืออะไรและสามารถประมวลผลได้อย่างถูกต้อง Browser ส่วนมากนั้นจะรันบนคอมพิวเตอร์ที่มีหน่วยความจำมาก จึงไม่ค่อยเป็นปัญหามากนักในการประมวลผลแม้ว่าบางครั้งผู้เขียนโค้ดอาจเขียนโค้ดผิดพลาดก็ตาม แต่ Browser ก็สามารถเดาได้และแสดงผลได้อย่างถูกต้องเป็นส่วนมาก แต่ปัญหาก็คือ หากต้องการใส่แท็กใหม่ ๆ ลงไป เอกสาร HTML จะไม่สามารถประมวลผลได้ มันจะประมวลผลเฉพาะแท็กที่มันรู้จักเท่านั้น นั่นคือตัว HTML มีความจำกัด นอกจากนี้แล้วเอกสาร HTML ยังถูกเอาไปใช้อย่างผิดความหมายและผิดวัตถุประสงค์ ทำให้เอกสารมีความยุ่งยาก ทำความเข้าใจยาก ต้องใช้เวลามากในการเขียนหรือออกแบบเนื่องจากมีการปนกันของเนื้อหาและการตกแต่งเอกสาร เอกสาร HTML ส่วนมากจึงเกิดสภาพที่เรียกว่า malformed ซึ่งตรงข้ามกับคำว่า well-formed ซึ่งหมายถึง เอกสารมีความถูกต้อง ไม่มีข้อผิดพลาดและไม่ฝืนข้อกำหนดของตัว DTD

ก่อนหน้านี้ ในหลายๆ บทความ ผมได้พูดถึงเรื่อง การจัดวางข้อมูล อย่างเป็นระบบของ xhtml มาบ้างแล้ว มาคราวนี้เราลองนำ css เข้ามาตกแต่งหน้าเอกสาร บ้างเป็นไร ผมจะยังพูดถึงลักษณะ การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล

ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมดทีมีใส่ลงไปในกล่อง โดยเลือกใช้ xhtml elements เดินตามเนื้อเรื่อง

ตัวอย่างแสดงผลออกมาแบบนี้