รู้จักกับ XHTML Syntax

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

XHTML Syntax

หรือ หลักการณ์เขียน XHTML การเขียน XHTML ที่ถูกต้องนั้นง่ายนิดเดียวครับ จำง่าย ๆ เลยว่าข้อมูล จะเป็นตัวกำหนด elements ที่จะเอามาครอบมัน โดยเลือก tag และ attribute ของ XHTML มาอธิบายความหมายของมัน ให้เหมาะสม อย่างไร? ง่าย ๆ ครับสมมติว่าผมมีข้อมูล “ที่อยู่” อยู่ชุดหนึ่ง ดังนี้: นาย สุดเทพ ชอบโกงกิน บ้านเลข 12 หมู่ 16 ถ. บ้านคำปากหาย อ. หมอกแหงนหงาย จ. แขบชายดอน รหัสไปรษณีย์ 46850เมื่อผมต้องการเขียนในรูปแบบเอกสาร XHTML แล้วผมจะเลือกใช้ tag ใด กับข้อมูล ข้อมูลนี้ ผมก็ต้องเลือกใช้ tag “address” กับข้อมูลชุดนี้ดังนี้:

<address>นาย สุดเทพ ชอบโกงกิน</address>
<address>บ้านเลข 12 หมู่ 16 ถ. บ้านคำปากหาย อ. หมอกแหงนหงาย จ. แขบชายดอน</address>
<address>รหัสไปรษณีย์ 46850</address>

จะเห็นได้ว่าผมเลือก tag “address” กับข้อมูลชุดนี้ เพราะ tag “address” เป็น tag ที่ใช้กับข้อมูลที่เป็นข้อมูลที่ใช้ในการติดต่อสื่อสาร เช่น ที่อยู่, เบอร์โทรศัพท์, อีเมลล์ ฯลฯ ทีนี้จากคำอธิบายด้านบนของผมอาจจะทำให้คุณงง ว่าอะไรที่เรียกว่า elements อะไรที่เรียกว่า attributes และ อะไรที่เรียกว่า tag มาทำความรู้จักกับมันกันเลยดีกว่าอะไรคือ Elements อะไรคือ Attributes และ อะไรคือ Tag ในเอกสาร XHTML นั้นจะประกอบด้วยองค์ประกอบ 4 อย่าง คือ 1. ข้อมูล 2. Elements 3. Attributes และ 4. Tag เราจะดูรู้ได้อย่างไรว่า อะไรเป็นอะไรบ้าง มาทำความเข้าใจไปพร้อม ๆ กันครับ ตัวอย่าง:

<li title="contact us">Contact Us</li>

จากตัวอย่างที่ผมเขียนข้างบน เป็นคำสั่ง XHTML หนึ่งชุด ซึ่งประกอบไปด้วยองค์ประกอบครบถ้วน เรามาดูกันตามลำดับ 1 – 4 ที่ผมกล่าวไว้ด้านบนว่าอะไรเรียกว่าอะไร

1. ข้อมูลในคำสั่งข้างบนนี้ ข้อมูลคือ คำว่า Contact Us

2. Elements คือ หนึ่งชุดคำสั่งของ XHTML เพราะฉะนั้นในที่นี้ Elements ก็คือ

<li title="contact us">Contact Us</li>

โดย <li>เรียกว่า opening tag หรือ เปิด tag ซึ่งเป็นการเริ่มต้นของ Elements และ </li> เรียกว่า closing tag หรือ ปิด tag หรือเป็นการสิ้นสุดของ Element

3. Attribute คือ คำสั่งที่เอาไว้ขยายความ หรือ ค่ากำหนดเบื้องต้นให้กับ tag อีกทีหนึ่งในที่นี้ Attribute คือ title=”contact us” ซึ่งหมายถึง การบอกว่า list นี้เป็น list ที่ชื่อ หรือ เก็บข้อมูล ที่ชื่อว่า Contact Us

4. Tag คือ คำสั่ง XHTML ที่ใช้บ่งบอกความหมายของข้อมูลนั้น ๆ ที่ตัวมันครอบอยู่ จากตัวอย่างที่ผมยกมา tag ในที่นี้คือ <li> </li>

กฏง่าย ๆ ในการเขียน tag ที่ถูกต้อง

คือ ต้องเขียนเป็นตัวอักษรตัวเล็กเสมอ และ เมื่อเปิด tag แล้วต้องมีการปิด tag โดยการปิดจะมีเครื่องหมาย / นำชื่อ tagเสมอ ในกรณีพิเศษ XHTML นั้นจะมี tag ที่มีความหมายจบในตัวมันเอง โดยไม่ต้องครอบข้อมูลใดใด เราเรียก tag พวกนี้ว่า “Single Tag” เราจะเขียน tag พวกนี้เป็นแบบ เปิด และ ปิดด้วยตัวมันเอง ยกตัวอย่างเช่น รูปภาพ เราสามารถใช้ tag “img” เพื่อบ่งบอกความเป็นมันได้เลยทันที โดยเราสามารถ อธิบายถึง ค่ากำหนดเบื้องต้นของมัน เช่น ความกว้าง ความสูง และ ที่จัดเก็บรูปภาพภาพนั้น ขยายความให้มัน เช่น คำอธิบายภาพ ภาพนั้น ด้วย Attribute เพราะฉะนั้น “Single Tag” พวกนี้มันจะจบความหมายในตัวมันเองเลย เพราะฉะนั้นการเขียนก็จะเขียนในลักษณะนี้

<img width="120" height="50" alt="Demo" src="../images/demo.jpg" />

จะเห็นได้ว่ามีการเปิด-ปิด ในตัวมันเองเลย ไม่ต้องไปครอบข้อมูลก่อน

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

สวัสดี