- ถ้าคุณเขียนโค้ดถูก แต่บราวเซอร์แสดงผลเพี้ยน แสดงว่าบราวเซอร์ มีปัญหา
- ถ้าคุณเขียนโค้ดผิด แต่บราวเซอร์ยังแสดงผลถูกต้อง นั่นแสดงว่า ทั้งตัวคุณ ทั้งบราวเซอร์ ต่างก็มีปัญหา
สองข้อด้านบน เป็นประโยคที่อธิบายลักษณะ การทำงานของเว็บดีไซเนอร์ได้อย่างน่าขันดี แต่หลายคนอาจจะไม่ขำกับผมด้วยเป็นแน่แท้ เพราะส่วนใหญ่อยู่ที่ข้อสาม คือ ไม่รู้ว่าตัวเอง เขียนโค้ดถูก หรือผิด เลยไม่รู้ว่า บราวเซอร์ แสดงผลถูกหรือผิดในความเป็นจริง แต่ในเชิงประจักษ์ทางสายตา เรายังเห็นการแสดงผลที่เพี้ยนบ้างพออภัย
หลายคนคงหงุดหงิดไม่น้อย ที่ช่วงหลังๆ เข้ามาที่ไทยซีเอสเอส แล้วเจอแต่เรื่องราวประหลาด ไม่ค่อยมีบทความเกี่ยวกับการเขียน CSS เลย มีแต่เรื่องบ้าบอคอแตก อะไรก็ไม่รู้ คำก็ Web Standards สองคำ ก็ ทำเว็บให้ได้มาตรฐาน สามคำก็ พาไปเขียน XHTML แล้วเรื่องราวของ CSS หละ อยากเห็น อยากเจอ
วันนี้ ผมมีตัวอย่างเล็กๆ น้อยๆ สำหรับคนที่หลงทางเสียเวลา หลงภาพมายา เสียเวลามากกว่า มานำเสนอครับพี่น้อง เป็นเรื่องราวของการเขียน CSS XHTML แบบ ผิดๆ แต่แสดงผลถูกต้องและตรวจผ่านมาตรฐาน W3C แต่ไร้ความหมายของรูปแบบกระบวนความของ Semantic Web เป็นเรื่องราวที่หลายคนยังงุนงงกันอยู่ว่า แท้ที่จริงแล้วมันต่างกันตรงไหน ระหว่างเรื่องราวทั้งหมด เพราะว่า เพียงแค่ทำเว็บโดยไม่ใช้ ตาราง (table) นั้นก็ยากเต็มทนแล้ว กว่าหน้าเว็บจะเป็น div ได้ ก็แทบจะบ้าตาย ยังต้องมารับรู้เรื่องราวพวกนี้อีกนั่นหรือ
คำตอบคือ ใช่ครับ
ตัวอย่างต่อไปนี้ผมจะเขียนให้เห็นถึง การเขียน CSS XHTML แบบ ผิดๆ แต่แสดงผลถูกต้องและตรวจผ่านมาตรฐาน W3C แต่ ไร้ความหมาย (1) และความแตกต่างระหว่างเรื่องที่ผิด และเรื่องที่ถูกต้อง (2)
โดย จะเขียนหน้าเว็บขึ้นมาหนึ่งหน้า แบ่งเป็นสามส่วน Header, Content, Footer และแบ่งออกเป็น 2 คอลัมน์ พร้อมทั้งมีเนื้อหาบ้างเล็กน้อยพอเป็นยา
จากโค้ดต่อไปนี้ ให้ทุกท่านสังเกตดูว่า แต่ละบรรทัด มันถูกต้องหรือ ผิดเพี้ยนประการใด ไม่ต้องถึงขั้นทุกกระเบียดนิ้ว เพราะเพียงอยากให้มีช่องว่างพอได้ ถกเถียง หายใจกัน
หมายเหตุ ขอให้มองข้ามเรื่องราวของ CSS ไปก่อน เจาะจงเฉพาะ XHTML ครับ
ตัวอย่างที่ 1 ขอให้ทุกท่านดูหน้าเว็บตัวอย่างนี้
นั่นแหละครับคือตัวอย่างง่ายๆ แล้วก่อนที่จะขึ้นบทความในหัวข้อต่อไป เรามาสนทนากันก่อนนะครับว่า ตามตัวอย่างนั้น มีจุดไหนที่ ผิดเพี้ยนไป ตามขบวนการของหลัก Semantic Web บ้าง
เชิญครับ แล้วเราค่อยมาต่อกับบทขยายส่วนต่อไป
ขอบคุณ คุณ hiroshi
มา ณ โอกาสนี้ด้วยครับ
ประโยชน์ เกิดได้ ตามใจต้องการครับ
ขอเสริมอีกนิดครับ ผมเห็นในหลายๆเว็บมักจะถกเถียงกันว่าระหว่าง <b> กับ <strong> ควรใช้อย่างไหนมากกว่ากัน
และก็มีหลายๆความเห็นนะครับ(หลายๆท่านไม่รู้ว่า XHTML คืออะไร)บางคนก็บอกว่า <b> ดีกว่าเพราะประหยัดโค้ด (กำ… -*-) บางคนก็บอกให้ใช้ <strong> เพราะเป็นโค้ดแบบใหม่ทันสมัยกว่า <b> (แต่ไม่รู้ว่าทำไมต้องใช้)แต่ถ้าใครที่ผ่านมาก็ลองอ่านความเห็นผมดูนะครับเกี่ยวกับเรื่องเล็กๆที่ไม่เล็กอย่าง <b> และ <strong> ใน Semantic Web
<b> คือตัวหนาแต่ไม่บอกว่าสำคัญยังไง แค่หนาเฉยๆ หนาเพราะนายสั่ง หนาเพราะสวยงาม แต่ไม่ได้มีความหมายอะไรสำคัญ
<strong> คือเน้นว่าคำที่ถูกคร่อมด้วย tag นี้เป็นคำสำคัญ เพราะมันสำคัญกว่าคำอื่นๆเลยต้องให้มันหนาซักหน่อย และมีความหมายมากกว่าคำือื่นๆใน paragraph
ผมหลงเสน่ห์ Semantic Web เพราะอย่างนี้แหละครับ เพราะเราจะไม่ได้เขียนเว็บเพียงเพื่อให้แสดงผลออกมาสวยงามตามต้องการ แต่ต้องสื่อความหมายด้วย ใครยังไม่คุ้นเคยกับ XHTML หรือคำว่า Semantic Web ก็ลองศึกษาดูนะครับ แล้วจะติดใจเหมือนผม (^_^)
Semantic Web ในความเห็นของผม ผมว่ามันไม่ซับซ้อนนะ ก่อนที่เราจะลงมือเขียนโค้ด XHTML ที่เป็น standard และสื่อความหมายอย่างถูกต้อง สิ่งที่เราต้องรู้ก็คือ
1. tag XHTML ที่เราสามารถนำมาใช้ไ้ด้มีอะไรบ้าง
2. เราต้องเข้าใจส่วนต่างๆของเนื้อหาเราว่าสิ่งที่เรากำลังจะใส่ลงไปนั้นมันคืออะไร สิ่งที่เรานำมาใส่บนเว็บเพจ มันไม่ใช่แค่ตัวหนังสือ ตัวใหญ่ๆ ตัวเอียงๆ หรือตัวเลข แต่ให้ดูความหมายของมันว่าถ้าตัวใหญ่ๆ หนาๆ ของเรานั้นเป็นส่วนของหัวเรื่อง เราก็ใส่ <h1>หรือ<h2> คร่อมไปซะ ถ้าเป็นตัวหนาที่ต้องการเน้นว่ามันสำคัญ แต่ไม่ใช่หัวเรื่อง ก็ใส่ <strong> หรือถ้าเป็นที่หรือชื่อผู้แต่งบทความอยู่เราก็ใส่ <address> คร่อมไป ฯลฯ
เท่านี้ XHTML ของเราก็จะสื่อความหมายได้ทั้งคนที่อ่านโค้ด และ SE bot ด้วยครับ
ตัวอย่างที่ให้มาส่วนที่เป็น Header ก็ควรใส่ tag <h1> คร่อมไปให้เรียบร้อย
ส่วนที่เป็นเนื้อหา เราก็เห็นๆว่ามันเป็น paragraph เราก็เอา <p> คร่อมไปซะ หากต้องการจะเว้นระยะห่างระหว่าง paragraph ก็กำหนด margin ตามต้องการใน CSS
ถ้าทุกคนเข้าใจ XHTML และเข้าใจในเนื้อหาที่กำลังเขียนลงไปบนหน้าเว็บว่าอะไรคืออะไร ผมว่า Semantic Web เป็นเรื่องง่ายและมีประโยชน์มหาศาลครับ
คิดว่าน่าจะผิด ตรง <br> มากก่า
เห็นด้วยกับคุณครับdaclubb
<div>Content , <div>Footer ที่มีข้อความอยู่ข้างใน ให้ใส่แท็ก p h1 h2…h6 เป็นการลำดับความสำคัญให้กับข้อความ
<div>Navigation เปลี่ยนเป็น ul li ครับ
sidebar หรือเปล่าคับ ตำแหน่งมันไม่น่าจะอยู่ตรงนี้นะคับ
ปล. เพิ่งศึกษาคับ ไม่แน่ใจเหมือนกัน
คิดว่าต้องเพิ่ม <p> มาจัดการข้อความใน main-section และ ใช้ inline element มาเสริม เช่น <q> <em> นะครับ ถึงจะเป็น semantic web
ผมเห็นด้วยกับคุณdaclubb
เพราะ tag div มันเป็น Structural Module เพราะฉะนั้นมันจะมีข้อความวางไว้ระหว่าง tag div ไม่ได้จะต้องใช้ tag Text Module มาครอบข้อความไว้ น่ะครับ
………………..
ปล.ถูกต้องไมคับ รอคำตอบจากคุณพี่พรแล้วกันน่ะคับ
ผมว่าที่ผิดก็ตรง <div>ไงครับข้อความอยู่ใน <div>โต้งๆเลยเนื่องจาก div มันเป็น Structure module หน้าที่คือแบ่งหน้าเว็บเป็นส่วนๆมิได้มีไว้ใส่ข้อความแต่อย่างใด
ต่อหน่อยดีก่า…คือมันต้องมี text module มาใส่ข้อความเช่น แท็ก p h1 h2 h3 …h6และอื่นๆอีกมากมาย แท็ก </br>คงไม่จำเป็นเพราะถ้าใช้ p h1 h2…h6 มันก้ขึ้นบรรทัดใหม่ให้อยู่แล้ว
ตรงnavigation ควรจะใช้ ul li มาใส่ข้อความอะครับแล้วเอา div ออกให้เหลือคลุมไว้ 1 div พอ
<div>
<ul>
<li><a>link1</a></li>
<li><a>link2</a></li>
.
.
.
<li><a>link n</a></li>
<ul>
</div>
- -\"
ไอดี main-section ใช้กับ p ได้มั้ยมันจะยังเป็น semantic อยู่หรือไม่
แต่ navigation bar น่าจะเป็น list
ว้ากำลังสนุกเลย แล้วจะติดตามตอนต่อไปครับ (ดูไม่ออกอ่ะว่าจุดไหนผิดเพื้ยนไป)
เรื่องการขึ้นบรรทัดและย่อหน้ามั้ยครับ
ปล. ผมไม่รู้จัก semantic web
ปล2. ดูใน wiki แล้วแต่แปลไม่ออกครับ