1. หน่วยที่ 5
การใช้ลิสต์สร้างรายการ

2. การนาเสนอข้อมูลในเว็บเพจควรมีความกระชับวิธีหนึ่งที่จะช่วยได้คือ ยกข้อมูลเป็นประเด็นโดยจัดเป็นรายการหรือลิสต์ ในบท
นี้จะกล่าวถึงลิสต์ซึ่งมีอยู่ 5 แบบด้วยกัน
1.ลิสต์แบบไม่มีลาดับ (Unordered List) จะแยกแต่ละรายการโดยใช้สัญลักษณ์พิเศษ
2.ลิสต์แบบมีลาดับ (Ordered List) มีลักษณะเป็นลาดับขั้นตอน มีตัวเลขกากับในแต่ละรายการ
3.ลิสต์แบบเมนู (Menu List) เป็นรายการที่ไม่เกิน 1 บรรทัด
4.ลิสต์แบบไดเรกทอรีลิสต์ (Directory List ) เป็นรายการสั้นๆ ไม่เกิน 20 ตัว อักษร
5.ลิสต์แบบจากัดความ (Definition List) ใช้แยกคาและความหมายออกจากกัน

3. การสร้างลิสต์แบบไม่มีลาดับ <ul>
ลิสต์แบบไม่มีลาดับ(Unordered List) เป็นลิสต์ที่เหมาะสาหรับการนาเสนอข้อมูลที่เป็นหัวข้อประเด็นสั้นๆ ไม่ต้องการลาดับของ
เลข หรือตัวอักษรให้ยุ่งยากดังนี้ ตัวอย่างการสร้างลิสต์แบบไม่มีลาดับ
การสร้างลิสต์แบบมีลาดับ <ol>
บางครั้งเราต้องใช้ลิสต์ที่มีการจัดลาดับ(Ordered List) เพื่อนาเสนอข้อมูล เช่น ขั้นตอนการทางาน หรืออันดับหนังสือขายดี
การใช้ลิสต์แบบนี้คล้ายกับการใช้ลิสต์แบบไม่มีลาดับ แต่จะมีตัวเลขกากับ แต่ละสมาชิกที่อยู่ในลิสต์ให้โดยอัตโนมัติ มีรูปแบบแท็ก
ดังนี้ ตัวอย่างการสร้างลิสต์แบบมีลาดับ

4. การกาหนดชนิดของตัวจัดลาดับ
เราสามารถกาหนดชนิดของตัวจัดอันดับที่นาหน้าหัวข้อ โดยระบุในแท็ก ol ดังนี้
ลาดับแต่ละชนิดมีลักษณะดังนี้
ตัวอย่างการกาหนดชนิดของตัวจัดลาดับ

5. กาหนดลาดับเริ่มต้นให้กับข้อมูล
หากเราต้องการกาหนดตัวเลขเริ่มต้น หรือต้องการข้ามลาดับบางรายการไป เป็นการแสดงลาดับที่ไม่ต่อเนื่อง สามารทาได้โดยตาม
รูปแบบดังต่อไปนี้
ตัวอย่างการกาหนดเลขลาดับเริ่มต้น

6. การสร้างลิสต์แบบเมนู<menu>
ลิสต์แบบเมนู (Menu List) จะมีลักษณะเหมือนลิสต์แบบไม่มีลาดับ (Unordered List) แต่ลิสต์แบบเมนูนี้ได้ถูกยกเลิกไปแล้ว ทั้งใน
HTML4 และ XHTML
ตัวอย่างการสร้างเมนูลิสต์
การสร้างลิสต์แบบไดเรกทอรีลิสต์<dir>
ลิสต์แบบไดเรกทอรีลิสต์ (Directory List) จะมีลักษณะเหมือนลิสต์แบบไม่มีลาดับ (Unordered List)
แต่ลิสต์แบบไดเรกทอรีนี้ได้ถูกยกเลิกไปแล้ว ทั้งใน HTML และ XHTML
ตัวอย่างการสร้างไดเรทอรีลิสต์

7. การสร้าลิสต์จากัดความ <dl>,<dt>,<dd>
ลิสต์แบบจากัดความ (Definition List) มักจะถูกนามาใช้กับการจากัดความ เช่นในพจนานุกรม รูปแบบของลิสต์จากัดความแบ่ง
ออกได้เป็น 2 ส่วน ส่วนแรกคือคาศัพท์(Term) และส่วนที่สองคือคาจากัดความ (Definition) ซึ่งจะถูกพิมพ์เยื้องเข้าไปหลังคาศัพท์
ตัวอย่างการสร้างลิสต์จากัดความ

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