XHTML

การเขียนเว็บแบบเรียงลำดับความสำคัญ ของข้อมูลในโครงสร้างถือเป็นปัจจัยหลัก ที่สำคัญที่ XHTML designer ทุกคนควรพึงกระทำ และพึงระวัง ในเรื่องการใช้ tag xhtml ให้ถูกกับข้อมูลที่นำเสนอ

h1 หรือ Header Level 1 ถือเป็น Block Element ที่เป็น text module ที่สำคัญที่สุดของ xhtml เลยก็ว่าได้

แล้วเราจะมองข้ามมันไปได้ยังไงหว่า และที่รองลงมา คือ h2-h6 และ h ใน XHTML 2.0 ที่จะมีเพิ่มเข้ามา

p หรือ paragraph เอาไว้ใช้จัดการกับตัวหนังสือ ที่ถูกแบ่งออกเป็นย่อหน้า สามารถใช้ inline elements อย่าง span, strong, em เข้าร่วมด้วยอย่างเมามัน

สำหรับการทำเมนู ไม่ว่าจะแนวตั้งหรือแนวนอน ในตอนนี้ ul, li (Unordered list, list) ถือเป็น elements ที่นิยมใช้กัน ก่อนที่ จะเปลี่ยนไปใช้ Nl หรือ Navigation แทนใน XHTML 2.0 เช่นกัน (nl สามารถใช้ใน Opera, Firefox และบราวเซอร์ใหม่ๆ อื่นๆ ยกเว้น ไออี 6 ส่วน 7 ผมยังไม่ลอง)

แล้ว OL หละ ทำไมไม่เอามาทำเป็นเมนูแทน ul มันก็สั่งได้เหมือนกัน

อย่างที่เคยเล่าให้ฟังครับ ol คือ Ordered List แตกต่างจาก Unordered List ตรงที่อันนึงมันเป็นลิสต์แบบตามลำดับขั้น แต่อีกอัน มันไม่ใช่ จึงเห็นเขาใช้ ul มาทำเมนู มากกว่าใช้ ol แต่ในเชิงความสำคัญทางโครงสร้างภาษา XHTML ทาง ol ถูกจัดอันดับความสำคัญไว้มากกว่า

หลังจากที่ได้ form มาแล้ว ซึ่งเขียนแล้วต้องถูกหลัก ผ่านมาตรฐาน w3c ด้วยนะครับ มาถึงตอนนี้เรามาจัดรูปแบบกันบ้าง การเขียน css เพื่อควบคุมการแสดงผลของ form นั้น ไม่ได้ยากอย่างที่หลายคนคิด เมื่อก่อนนี้ กว่าจะได้ form ออกมาสักตัวต้องสร้างตารางกันให้วุ่นวาย โค้ดยาวเฟื้อย จากเจียงฮาย ไปสุไหงโกลก

ลักษณะของการจัดการหน้าตาของ form ที่ผมจะแนะนำและยกตัวอย่างต่อไปนี้ คือแบบยอดนิยมที่เคยปฏิบัติกันมานมนานนะครับ คือ เอาชื่อไว้ทางซ้าย เอา input ไว้ทางขวา

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

ในการเขียน form นั้น สิ่งหนึ่งที่ขาดไม่ได้ก็คือ <label> หรือ ชื่อของ ตัวรับค่าแต่ละตัวนั่นเอง เช่น

<label for=“name” >ชื่อ : </label>
<input name=“name” id=“name” type=“text” />

สิ้นสุดกันทีกับการใช้ ตาราง ผิดที่ผิดเวลา หลายคนคงเคยเป็นเหมือนผม ตอนหัดทำเว็บใหม่ๆ หรือทำเว็บจนชิน

หลายคนกำลังรอคอยเรื่องการใช้ตารางแบบ xhtml อยู่ แต่ความแตกต่าง ระหว่าง html 4.0 กับ xhtml 1.0 มันก็ไม่มีอะไรมากมายนักหรอกครับ แต่ว่า เขาพัฒนาให้มันเฉพาะเจาะจงมากยิ่งขึ้นนั่นเอง เช่นว่า ตารางที่คุณกำลังเขียนนั้นเอาไว้ใช้กับข้อมูลอะไร ย้ำนะครับว่า เอาไว้แสดงผลข้อมูล ไม่ได้แสดงผลกราฟฟิคเลย์เอ้าท์

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

การให้ความสำคัญแก่หัวข้อ และการเลือกใช้ elements 1-6 ใน xhtml ถือได้ว่าสำคัญไม่น้อยเหมือนกันครับ ข้อดีอีกอย่างของการเลือกใช้ h สำหรับหัวข้อนั้นคือระบบเสิร์ชเอ็นจิ้นต่างๆ จะให้ความสำคัญกับข้อมูลที่อยู่ใน h1 ไล่ไปจนถึง h6 ก่อน ซึ่งเป็นการช่วยให้ bots ต่างๆ เข้าค้นหาข้อมูลในเว็บเราได้ง่ายขึ้นด้วยครับ

การนำไปใช้แค่เพียงพิมพ์

<h1>หัวข้อนี้สำคัญระดับพันล้าน</h1>

<h2>หัวข้อนี้สำคัญระดับร้อยล้าน</h2>

<h3>หัวข้อนี้สำคัญระดับล้าน</h3>

<h4>หัวข้อนี้สำคัญระดับแสน</h4>

<h5>หัวข้อนี้สำคัญระดับหมื่น</h5>

<h6>หัวข้อนี้สำคัญระดับพัน</h6>