Accessibility Links

• Skip to Content
• Skip to Main Navigation
• Skip to thaicss.com Search
• Accessibility help
• Access keys help
• 

 

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

โดย พร อันทะ เมื่อ 2007-08-18 14:20:18 ดูทั้งหมด 358 ครั้ง

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

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

1. เมื่อมันเป็น xhtml 1.0

• - div หรือ division ยังครองความเป็นเจ้าแห่งการแบ่งแยกดินแดนอยู่ เช่น เราต้องการกล่อง 2 กล่อง เรายังต้องใช้ div สองอัน
• - div หรือ division มันสามารถเอาตัวหนังสือใส่เข้าไปโดดๆ ได้ เพราะมันยังอยู่ใน text module
• - หรือ ถ้าเราต้องการกล่องสองกล่องซึ่งถูกจับยัดอยู่ในกล่องหลัก เพื่อทำดีไซน์ เราก็ต้องมี div ทั้งสิ้น 3 อัน (คือ 1 div หลักที่ครอบอยู่ และอีก 2 divs ที่เอาไว้แบ่งข้อมูลออกคนละส่วน บน-ล่าง/ซ้าย-ขวา)
• - ที่เหลือ h1-h6, p และ inline element อื่นๆ ก็ใช้ไปตามความหมายและความเหมาะสมของเนื้อหา

ตัวอย่าง

<div>

<div>

</div>

<div>

</div>

</div>

2. เมื่อมันจะเป็น xhtml 2.0

• - div หรือ division ถูกดันออกไปอยู่ใน structure module คือเอาไว้วางโครงสร้าง เลย์เอ้าท์ เท่านั้น
• - div หรือ division ไม่สามารถใส่ข้อมูลลงไปเฉยๆ ได้ ถ้าไม่มี element ใดๆ ของ text module หรือ list module มารองรับก่อน
• - หรือ ถ้าต้องการแบ่งข้อมูลออกเป็น 2 ส่วน อยู่ในกล่องที่ครอบเอาไว้เพื่อทำดีไซน์ เราสามารถใช้ div อันเดียวแล้วแยกส่วนข้อมูลนั้นด้วย section แทน
• - ที่เหลือ h1-h, p และ inline element อื่นๆ ก็ใช้ไปตามความหมายและความเหมาะสมของเนื้อหา

ตัวอย่าง

<div>

<section>

</section>

<section>

</section>

</div>

ใน xhtml 1.0 เมื่อเรานำ h1-h6 และ p เข้าไปรวมอยู่ด้วยก็จะเขียนได้เป็น

<div>

<div>

<h1></h1>

<p></p>

<h2></h2>

<p></p>

</div>

<div>

<h1></h1>

<p></p>

<h2></h2>

<p></p>

<h3></h3>

<p></p>

</div>

</div>

ใน xhtml 2.0 เมื่อเรานำ h1-h และ p เข้าไปรวมอยู่ด้วยก็จะเขียนได้เป็น

<div>

<section>

<h1></h1>

<p></p>

<separator/>

<h2></h2>

<p></p>

</section>

<section>

<h1></h1>

<p></p>

<separator/>

<h2></h2>

<p></p>

<separator/>

<h3></h3>

<p></p>

</section>

</div>

หมายเหตุ

- <separator/> คือการแบ่งส่วนของเนื้อหาแต่ละท่อน ที่ถูก separated แล้ว

- <br/> ถูกตัดทิ้งไปจาก xhtml 2 เพราะความหมายไม่ลึกซึ้งกินใจเพียงพอ

- <h></h> ถูกเพิ่มเข้ามาถือเป็น header ที่ไม่ได้ให้น้ำหนักในการเรียงลำดับ

บทความเพิ่มเติมส่วนต่อไป เดี๋ยวผมจะเขียนเพิ่มในมุมของการใช้ css เข้าร่วมและจะทดสอบการใส่ข้อมูลพร้อมรูปภาพ รอดูกันว่า จะออกมาหน้าตายังไง

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

• About Author: พร อันทะ

  • 
  • พร อันทะ

Back to Top

Tags:

1. xhtml
2. priority
3. tags

เนื้อหาที่เกี่ยวข้อง

1. รู้จัก XHTML Basic 1.1 (ตอนที่ 1)
2. การสร้างแบบฟอร์มอย่างถูกวิธี 2
3. การสร้าง Graph โดยใช้ XHTML CSS
4. การสร้างแบบฟอร์มอย่างถูกวิธี
5. รู้จักกับ common attribute ของ xhtml

หรือกำลังสนใจ

1. รู้จัก XHTML Basic 1.1 (ตอนที่ 1)

Unknown Version Unknown