สอนทำเว็บ ด้วย HTML

ในการแสดงข้อมูลบนเว็บเพจ นอนกจากการแสดงผลแบบปกติทั่วไปแล้ว บางครั้งเราอาจมีความจำเป็นต้องจัดรูปแบบการแดสงผลให้เป็นแบบของรายการ (Lists) คือมีการแสดงข้อมูลในลักษณะที่เป็นหัวข้อ ซึ่งอาจมีคำอธิบายหรือไม่ก็ได้

การแสดงข้อมูลแบบรายการ (Lists) จะมีรายการแบบมีลำดับ (ใช้หมายเลขกำกับ) หรือแบบไม่มีลำดับ (ใช้สัญลักษณ์กำกับ) แต่ไม่ว่าจะเลือกให้มีการแสดงผลรายการแบบใดก็ตาม ทั้ง 2 แบบ ก็มีลักษณะการทำงานที่เหมือนกัน แตกต่างกันเพียงแบบหนึ่งเป็นตัวเลขและอีกแบบหนึ่งเป็นสัญลักษณ์เท่านั้น

การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists)

การแสดงข้อมูลรายการแบบมีหมายเลขกำกับ (Number/Order Lists) จะใช้แท็ก <OL> และ </OL> ซึ่งย่อมาจาก Ordered List คือข้อมูลรายการแบบมีหมายเลข เรียงลำดับจากน้อยไปหามากกำกับอยู่หน้าแต่ละรายการ โดยมีแท็กที่เป็นส่วนประกอบภายในอีกทีหนึ่ง คือแท็ก <LI> ที่ใช้กำหนดหัวเรื่องหรือรายละเอียดของรายการย่อย ซึ่งเมื่อรายการย่อยเหล่านี้นำไปแสดงบนเบราเซอร์ ลำดับที่ของรายการจะถูกใส่ให้กับแต่ละรายการโดยอัตโนมัติ

type= ชนิดของการแสดงผลแบบรายการ
- I , i เป็นการแสดงผลแบบโรมัน
- A , a เป็นการแสดงผลแบบภาษาอังกฤษ
- 1 เป็นการแสดงผลลำดับรายการปกติ (Default)
start= การเริ่มของค่าของการแสดงรายการ (สามารถกำหนดค่าเริ่มต้นได้)
value= การกำหนดค่าเฉพาะแต่ละค่าของการแสดงรายการ

การแสดงข้อมูลรายการแบบมีสัญลักษณ์กำกับ (Bulleted/Unordered Lists)

วิธีการใช้แท็ก < UL > และ < /UL > หรือรายการแบบใช้สัญลักษณ์กำกับ (Unordered List) นี้มีส่วนประกอบภายในคล้าย ๆ กับการเรียงรายการแบบใช้หมายเลขกำกับ คือมีส่วนหรัวเรื่องและส่วนรายการย่อย พร้อมทั้งแอตทริบิวต์ TYPE ที่ใช้กำหนดสัญลักษณ์กำกับหน้ารายการย่อย

type= "circle" การกำหนดรายการแบบวงกลม
type= "square" การกำหนดรายการแบบสี่เหลี่ยมทึบ
type= "disc" การกำหนดรายการแบบวงกลมทึบ (เป็น Default)

การเรียงรายการแบบใช้นิยาม

รายการย่อยแบบใช้นิยาม หรือ Definition List นี้จะคล้ายกันกับรายการย่อยแบบที่ใช้หมายเลขหรือสัญลักษณ์กำกับ ต่างกันที่ไม่สัญลักษณ์ใดๆ กำกับหน้าแต่ละรายการย่อย มีเพียงแต่รายการย่อยต่างๆ แสดงอยู่ลักษณะคล้ายกับพจนานุกรม โดยมีแท็กที่เกี่ยวข้องอยู่ 3 แท็กด้วยกัน คือ <DL> และ </DL> เพื่อบอกว่ารายการย่อยมีลักษณะเป็น แบบใช้นิยาม ส่วนแท็ก <DT> นั้นใช้บอกส่วนที่เป็นเรื่องของแต่ละรายการย่อย และแท็ก <DD> ใช้บอกส่วนที่เป็นรายละเอียดในรายการย่อยนั้น

<DL>
<DT>ข้อความ</DT>
<DD>ข้อความ</DD>
</DL>

การเรียงรายการแบบใช้รูปภาพกำกับ

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

แท็ก < MENU > และ < DIR >

แท็ก <MEUN> และ <DIR> เป็นแท็กที่ใช้ทำรายการที่ใช้สัญลักษณ์กำกับหน้ารายการย่อย วิธีการใช้งานและผลที่ได้รับไม่ต่างอะไรไปจากแท็ก <UL> มากนัก ซึ่งบางเบราเซอร์ก็มองแท็ก 2 ตัวนี้เหมือนกับแท็ก <UL>

<MENU>
<LH>ข้อความ
<LI><A HREF="ชื่อไฟล์ .html">ข้อความ</A>
</MENU>

ใน HTML 4.0 ได้มีการประกาศว่าแท็ก < MENU > และ < DIR > เป็นแท็กที่ถูกยกเลิก เพราะให้ผลไม่แตกต่างไปจากการใช้แท็ก < UL > เลยแต่การเปลี่ยนแปลงที่สำคัญใน HTML 4.0 คือมีการเพิ่มแอตทริบิวต์ STYLE ให้ใช้ในแท็กที่เกี่ยวข้องกับรายการย่อยได้ และยังคงสามารถใช้แอตทริบิวต์ STYLE นี้เพื่อกำหนดรูปแบบเลขที่กำกับแทนการ แอตทริบิวต์ TYPE ได้อีกด้วย