XHTML Text Module

ทำความเข้าใจการใช้งาน Alternative text ให้มากขึ้น

ทำความเข้าใจการใช้งาน Alternative text ให้มากขึ้น เพื่อเป็นช่องทางให้ผู้ใช้ทุกคนเข้าถึงข้อมูลในเว็บเราได้อย่างถูกต้อง

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

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

การจัดการ font ในเอกสาร XHTML โดยใช้ CSS

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

การเรียงลำดับข้อมูลของ xhtml ในกล่องกับ div (+section), h1-h6 (h), p และ inline elements

อย่างที่เรารู้กันมาแล้วว่า ความแตกต่างระหว่าง html กับ xhtml มันมีเพียงแค่วิสัยทัศน์ ที่ต่างกันออกไปและเพิ่มเติม เรื่องราวเชิงเทคนิคนิดหน่อย แต่มันทำให้ความหมาย xhtml เปลี่ยนแปลงไปมากมาย วันนี้ผมจะขอพูดถึงเรื่องกล่อง (div) 1 กล่องที่แยกข้อมูลออกเป็นสัดส่วน โดยในข้อมูลมีเนื้อหาหลักๆ ที่ถูกจัดวางไว้ใน element ของ xhtml อย่างเหมาะสม

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

css กับการจัดวาง xhtml ในกล่องข้อมูล

Coffe for Lover

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

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

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

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

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

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

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

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

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

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

DIV (Division)

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

Back to Top

Social media & sharing icons powered by UltimatelySocial