หน่วยที่ 4 การสร้างลำดับข้อมูล (List)


list จัดข้อมูลในเว็บเพจให้เป็นระเบียบด้วยHTML

list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น ซึ่ง list แบ่งได้เป็น 2 แบบด้วยกัน 

    1.list แบบไม่มีลำดับ 
    เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้ 

    รูปแบบ list แบบไม่มีลำดับ


    <UL>

        <LH> หัวข้อ </LH>

        <LI> ข้อมูล 1 </LI>

        <LI> ข้อมูล 2 </LI>

    </UL>


    2.list แบบมีลำดับ 
    เป็น list แบบง่ายดีสุดเหมาะสำหรับการนำเสนอข้อมูลที่ไม่มีลำดับเกี่ยวข้อง โดยมีรูปแบบดังนี้ 

    รูปแบบ list แบบมีลำดับ


    <OL>

        <LH> หัวข้อ </LH>

        <LI> ข้อมูล 1 </LI>

        <LI> ข้อมูล 2 </LI>

    </OL>


    3.การใส่สัญลักษณ์ให้กับ list
    การใส่สัญลักษณ์ให้กับ list เราจะเห็นสัญลักษณ์หน้า list อยู่แล้วซึ่งสัญลักษณ์ตัวนั้นสามารถเปลี่ยนแปลงได้โดยใช้ Attibuet คำสั่ง type มีรายละเอียดดังนี้ 

    สัญลักษณ์ที่ใช้กับแบบไม่มีลำดับ


TYPEสัญลักษณ์
discวงกลมทึบ
circleวงกลมโปร่งใส
squareสี่เหลี่ยมทึบ


    สัญลักษณ์ที่ใช้กับแบบมีลำดับ


TYPEสัญลักษณ์
Aเรียงแบบ A,B,C
aเรียงแบบ a,b,c
Iเรียงแบบเลขโรมัน I,II,III
iเรียงแบบเลขโรมัน i,ii,iii
รูปแบบการเขียนคำสั่ง 

 <UL>

        <LH> หัวข้อ </LH>

        <LI Type="square"> ข้อมูล 1 </LI>

        <LI> ข้อมูล 2 </LI>

    </UL>

    4.การใช้ list ซ้อน list
    ในตัวอย่างจะเป็นการทำ list ซ้อน list ซึ่ง html จะเปลี่ยนสัญลักษณ์ให้อัตโนมัติ 
<ul>
  
   <li>ยานพาหนะ 2 ล้อ</li>

   <li>ยานพาหนะ 4 ล้อ
        <ul>
        <li>รถกะบะ</li>
        <li>รถเก๋ง</li>
        </ul>
  </li>

  <li>ยานพาหนะทางน้ำ</li>

</ul>

    5.list แบบจำกัดความ
    Definition list เป็น list ที่ใช้กับการให้คำจำกัดความ ดังตัวอย่าง
 <dl>
             <dt>HTML</dt>
             <dd>(ชื่อเต็มคือ Hypertext Markup Language ภาษามาร์กอัปข้อความหลายมิติ) คือภาษามาร์กอัปออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ หรือข้อมูลอื่นที่เรียกดูผ่านทางเว็บเบราว์เซอร์ เริ่มพัฒนาโดย ทิม เบอร์เนอรส์ ลี (Tim Berners Lee) </dd>
             <dt>WEBSITE</dt>
             <dd>(website, web site, หรือ Web site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ </dd>
 </dl>

    list เป็นคำสั่งที่ใช้สำหรับการแสดงข้อมูลเป็นชุดๆ ซึ่งจะสะดวกและ อ่านข้อมูลได้ง่าย เป็นทางเลือกทางหนึ่งที่ดีในการใช้แสดงบทความ