การจัดลำดับรายการ (LIST)

กำกับด้วยสัญลักษณ์
กำกับด้วยตัวเลข
กำกับด้วยคำจำกัดความ

การแสดงลำดับรายการ ( LIST )

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

รายการแบบใช้สัญลักษณ์กำกับ ( Bullet lists )

           รูปแบบ

<UL>ตัวเปิด
      <LI>ข้อมูลที่ต้องการแสดง
      <LI>ข้อมูลที่ต้องการแสดง
</UL>ตัวปิด

           ลักษณะ เป็นการแสดงผลโดยใช้สัญลักษณ์ในการกำกับรายการต่าง ๆ และเราสามารถกำหนดลักษณะของสัญลักษณ์ได้โดยใช้คำสั่ง Type=N ซึ่ง N=circle=วงกลม , disc=วงกลมทึบ หรือ square=สี่เหลี่ยม โดยอยู่ในคำสั่ง ของ <UL> ถ้าต้องการ ให้สัญลักษณ์ เหมือนกัน ทุกรายการ แต่ ถ้าต้องการ ให้แต่ละรายการ ไม่เหมือนกันให้ใส่ในส่วนของ <LI> เช่น

<UL>
     <LI Type=disc>รายการที่ 1
     <LI Type=circle>รายการที่ 2
     <LI Type=square>รายการที่ 3
</UL>

           เว็บบราวเซอร์ จะแสดง ออกมา เป็น

 



รายการแบบใช้ตัวเลขกำกับ (Numbered lists)
           รูปแบบ

<OL>ตัวเปิด
     <LI>ข้อมูลที่นำมาแสดง
     <LI>ข้อมูลที่นำมาแสดง
</OL>ตัวปิด

           ลักษณะ เป็นการกำหนดรายการโดยใช้ตัวเลขกำกับเช่น 1 หรือ i และสามารถ กำหนดค่าเริ่มต้นไว้ที่ <OL> โดยใส่ค่า START=n โดย n= ตัวเลขที่ต้องการเริ่ม และ TYPE=n โดย n= a , A , i , I ซึ่งเป็นชนิดของค่าเริ่มต้น ตามตัวอย่างจะเริ่ม ต้นที่ 3 ชนิดเป็น a เช่น

<OL START=1 TYPE=a>
     <LI>รายการที่ 1
     <LI>รายการที่ 2
     <LI>รายการที่ 3
</OL> 

           เว็บบราวเซอร์ จะแสดง ออกมา เป็น

การแสดงลำดับรายการ (Numbered lists)
     a รายการที่ 1
     b รายการที่ 2
     c รายการที่ 3

           และยังสามารถใช้คำสั่ง TYPE=n ในส่วนของ <LI> ได้ แต่ค่าเริ่มต้นต้องเป็นไปตามค่าดังกล่าวข้างต้นให้สังเกตตามตัวอย่าง

<OL>
     <LI TYPE=1>รายการที่ 1
     <LI>รายการที่ 2
     <LI>รายการที่ 3
</OL>

           เว็บบราวเซอร์ จะแสดง ออกมา เป็น

การแสดงลำดับรายการ (Numbered lists)
      1 รายการที่ 1
      2 รายการที่ 2
      3 รายการที่ 3




รายการแบบคำจำกัดความ ( Definition lists )
           รูปแบบ

<DL>ตัวเปิด
     <DT>คำจำกัดความ
     <DD>คำอธิบาย
     <DT>คำจำกัดความ
     <DD>คำอธิบาย
</DL>ตัวปิด

           รูปแบบ เช่น

<DL>
     <DT>BP

     <DD>Bangkapomt Secondary School.
     <DT>SSK
     <DD>SAMUTSONGKRAM
</DL>

 

           เว็บบราวเซอร์ จะแสดง ออกมา เป็น

การแสดงลำดับรายการ ( Definition lists )
BP
Bangkapomt Secondary School .
SSK
SAMUTSONGKRAM

 

ใบงานที่ 6
กลับขึ้นข้างบน
แบบฝึก