การสร้าง List แบบไม่มีลำดับ (Unordered List)
List แบบไม่มีลำดับเป็น List แบบที่ง่ายที่สุด เหมาะสำหรับนำเสนอข้อมูล
ที่ไม่มีลำดับเกี่ยวข้อง เราจะพบ List ชนิดนี้ได้บ่อยในเวปเพจต่าง ๆ ที่ต้อง
การนำเสนอข้อมูลอย่างกระชับเป็นหัวข้อสั้น ๆ
List แบบไม่มีลำดับรูปแบบคำสั่งดังนี้
<UL>
<LH> หัวข้อ List </LH>
<LI> ข้อมูลใน List
<LI> ข้อมูลใน List
...
</UL>
|
ตัวอย่าง
จากรูป แบบตัวอย่างนี้เป็นการกำหนด List แบบไม่เรียงลำดับซึ่งผลที่ได้จะมีแค่จุดดำ ๆ เท่านั้น ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ
การสร้าง List แบบมีลำดับ (Ordered List)
บางครั้งเราต้องใช้ List ที่มีการจัดลำดับเพื่อนำเสนอข้อมูล เช่น ขั้นตอนการทำงาน หรือ อัน
ดับหนังสือขายดี การใช้ List แบบนี้คล้ายกับการใช้ List แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับ
แต่ละสมาชิกที่อยู่ใน List ให้โดยอัตโนมัติ
List แบบมีลำดับมีรูปแบบคำสั่งดังนี้
<OL>
<LH> หัวข้อ List </LH>
<LI> ข้อมูลใน List
<LI> ข้อมูลใน List
...
</OL>
|
ตัวอย่าง
จากรูป แบบตัวอย่างนี้เป็นการกำหนด List แบบเรียงลำดับซึ่งผลที่ได้จะมีตัวเลขที่เรียงตามลำดับก่อนหลัง ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ
เราสามารถกำหนดให้การจัดลำดับใน List ใช้เครื่องหมายอื่น นอกจากตัวเลข เช่น I,II,III หรือ A,B,C ได้โดยการใช้
TYPE="ชนิดของ List แบบมีลำดับ"
|
โดยคำสั่งนี้จะแทรกอยู่ใน <OL>
ตัวอย่าง
จากรูป แบบตัวอย่างนี้เป็นการกำหนด List แบบเรียงลำดับตามลักษณะที่เรากำหนดขึ้นโดยสังเกตวิธีการกำหนดในส่วนของ <OL TYPE=ตัวที่กำหนด> ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ
การสร้าง List จำกัดความ (Definition List)
List จำกัดความมักนำมาใช้กับการจำกัดความ เช่น ในพจนานุกรม รูปแบบของ List จำกัดความ แบ่งออกได้เป็น 2 ส่วนคือ ส่วน
แรก คือ คำจำกัดความ และส่วนที่สอง คือ ความหมายของคำจำกัดความ ซึ่งจะถูกพิมพ์เยื้องเข้าไปหลังคำนิยาม
List แบบไม่มีลำดับมีรูปแบบคำสั่งดังนี้
<DL>
<LH> หัวข้อ List </LH>
<DT> คำจำกัดความ
<DD> ความหมาย
<DT> คำจำกัดความ
<DD> ความหมาย
. . .
</DL>
|
ตัวอย่าง
จากรูป แบบตัวอย่างนี้เป็นการสร้าง List จำกัดข้อความ ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ
การสร้าง List ซ้อนกัน
การสร้าง List ซ้อนกันมีประโยชน์สำหรับนำเสนอข้อมูล ที่มีหัวข้อย่อย หรือมีขั้น
ตอนมาก เช่น คู่มืออธิบายขั้นตอนการปรุงอาหาร หรือโจทย์คำถามที่มีคำถามย่อย ซึ่งการสร้าง
ก็คือการนำคำสั่งที่เกี่ยวกับการสร้าง List แบบต่าง ๆ มาผสมกันในลักษณะที่ต้องการ
ตัวอย่าง
จากรูป แบบตัวอย่างนี้เป็นการสร้าง List แบบซ้อนกัน โดยจะเห็นว่าเราสามารถนำคำสั่งในการสร้าง List ตัวใดมา
ใช้ในการสร้างก็ได้ ซึ่งถ้าคุณต้องการดูผลลัพธ์ก็กดที่ปุ่มด้านล่างได้เลยครับ
|