XHTML

สวัสดีชาว ThaiCSS ทุกคนครับ บทความวันนี้ผมจะพูดถึง Attribute นึงที่ทุกคนจะต้องใช้งานบ่อยๆ หลายคนก็เลือกที่จะไม่ใช้ หรือพอใช้ก็ไม่แน่ใจว่าใช้งานถูกต้องหรือไม่ซึ่ง Attribute ตัวนี้คือ "alt" หรือ Alternative text นั่นเอง วัตถุประสงค์ของมันมีไว้ช่วยในการอ่านข้อมูลที่เป็นภาพ เพื่อเป็นช่องทางให้ผู้ใช้ทุกคนเข้าถึงข้อมูลในเว็บเราได้อย่างถูกต้อง

ลองนึกภาพถ้าหากเราใช้งานเว็บในช่วงที่อินเตอร์เน็ตมีปัญหาอยู่ ซึ่งบราวเซอร์ไม่สามารถแสดงภาพออกมาประกอบการอธิบายบทความที่คุณอ่านอยู่ สิ่งหนึ่งที่สามารถช่วยคุณได้เวลานั้นคือ Alternative text ทีสามารถอธิบายเพื่อให้คุณเข้าใจความหมายระหว่างภาพและเนื้อหาได้สมบูรณ์ขึ้น และอย่าลืมว่ามีแต่เราเท่านั้นที่จะใช้งานเว็บไซต์ได้ยังมีคนอีกกลุ่มหนึ่งที่อาจจะมีปัญหาทางประสาทสัมผัสที่จะต้องใช้เครื่องมือหรือซอร์ฟแวร์ให้การเข้าถึงเว็บไซต์ดังนั้นเราจึงไม่ควรที่จะมองข้าม Attribute เหล่านี้เพื่อให้เว็บไซต์ของเราทุกคนสามารถเข้าถึงได้

ปฏิเสธไม่ได้ว่า สิ่งที่ยากที่สุดสิ่งหนึ่งในการเขียน 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 ของข้อมูลอย่างเป็นระเบียบ" ทั้งนี้ สามคนข้างต้น ต้องมีการตกลงเรื่องการเสนอข้อมูลทางกฎหมายต่อไป ว่าจะเอาไปแสดงยังไง อ้างอิงยังไง แต่เรื่องความปลอดภัยในการเข้าถึงข้อมูลก็เป็นอีกเรื่องหนึ่ง ซึ่งเมื่อไม่นานมานี้ "เซอร์ ทิม เบอร์นเนอส ลี" ก็ได้กล่าวเอาไว้ว่า เรื่องความเสี่ยงของการเข้าไปนำข้อมูลจากหน้าเว็บของคนอื่น แล้วเอาออกมาใช้นั้น จะทำอย่างไร หรือมีมาตรการใด เพื่อเป็นรับรองได้ว่า ไม่ได้เป็นการทำเพื่อการโกง แฮ๊ก ล่วงเกินข้อมูลของผู้อื่น

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

class ของ HTML คือภาษา HTML ไม่เกี่ยวกับภาษา CSS ภาษา CSS นั้นมาขอใช้งานภาษา HTML ด้วยการสั่งงานผ่าน HTML Attribute ที่ชื่อ class เท่านั้น และหรือในกรณีเดียวกัน CSS ก็ขอเอี่ยวกับ Attribute id ของ HTML ไปด้วย

อย่างที่บทความก่อนหน้านี้เรื่อง class ที่ รดิส ได้เขียนเอาไว้ เรื่อง "attribute class และ การใช้งานอย่างถูกต้อง" class ของ HTML มีเอาไว้เพื่อจำแนก "ของที่มีอยู่ในหน้าเอกสาร ที่มีพฤติกรรมแบบเดียวกัน" ส่วน id มีเอาไว้เรียกชื่อเพื่อระบุการมีตัวตอนของ ของ แต่ละชิ้น เช่น ในห้องเรียนชั้น ม.5 ห้อง 5/3 มีเด็กแนวกลุ่มหนึ่ง ชื่อ "เกรียนเมพ" ในกลุ่มนั้น มีนักเรียนชาย5 คน นักเรียนหญิง 5 คน ถ้าเรามาเขียน HTML ก็จะจำแนกออกเป็นสอง classes คือ class="นักเรียนชาย" และ class="นักเรียนหญิง"

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

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

กาลปางก่อน เนิ่นนานมานั้น เหล่านักพัฒนาทั้งหลาย ที่พัฒนา 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 นั้นเตรียมให้เรานำมาใช้กัน

ความเดิมจากตอนที่แล้ว จากตัวอย่างเมื่อคราวที่แล้ว ขออนุญาติตอบคำถามของคุณ​ mabonic ก่อนนะครับ ว่าใน IE6 ถ้าไม่สามารถกำหนด attribute selector ได้จะทำอย่างไร คำตอบมีสอง Case ครับ Case1: คือ เขียน class selector เพื่อกำหนดคุณสมบัติให้มันครับ ส่วน Case2: ก็คือ ใช้ JavaScript ที่ชื่อ ie7-js สำหรับ reset ค่า default ต่าง ๆ ในการ render และ ทำให้มันรู้จักคำสั่งของ CSS level ใหม่ ๆ ที่มันไม่รู้จัก (อย่าลืมนะครับว่า IE6 มันแก่แล้ว) JavaScript ตัวนี้ให้กำเนิดโดย Dean Edwards แต่ข้อจำกัดหลายอย่างก็ยังมีอยู่ ถ้าผู้ใดสนใจเป็นหนึ่งในทีมพัฒนาก็สามารถเข้าร่วมได้นะครับ

มาต่อกันที่เรื่องของฟอร์มกันครับ จากคราวที่แล้วผมนำเสนอตัวอย่างการเขียนฟอร์มเล็ก ๆ ง่าย ๆ ไปหนึ่งแบบทีนี้เราจะมาดูกันครับว่าถ้าเรามีฟอร์มสำหรับเก็บข้อมูลที่สัมพันธ์กันหลาย ๆ ส่วน เราจะเขียนออกมากันอย่างไร ในบทความนี้ tag ที่เพิ่มเข้ามาก็จะมีดังนี้ครับ <fieldset></fieldset> และ <legend></legend> จากครั้งที่แล้วได้เกริ่นไป แต่ยังไม่ได้มีบทบาท รอบนี้ล่ะ มันจะเป็นตัวชูโรง fieldset จะเป็น tag ที่ใช้สำหรับแยกฟอร์ม ออกเป็นส่วน ๆ ตามข้อมูลที่เรานั้นต้องการจะเก็บ และ legend จะเป็นการตั้งชื่อบ่งบอกชื่อให้กับ fieldset นั้น ๆ ว่าเป็น set ของอะไร