การใช้ลิสต์ (List) ในการสร้างรายการแบบต่าง ๆ
การนำเสนอข้อมูลต่าง ๆ ในเว็บเพจให้น่าสนใจ คือ แยกข้อมูลออกเป็นประเด็น โดยการจัดเป็นรายการ หรือที่เราเรียกว่า List ซึ่ง มีอยู่ด้วยการหลายแบบ แต่ที่นิยมใช้งานในปัจจุบันและพบบ่อยที่สุดมี 2 แบบ คือ 1.การสร้างรายการ (List) แบบไม่มีลำดับ (Unordered List) โดยใช้แท็ก <ul> ร่วมกับแท็ก <li> 2.การสร้างรายการ (List) แบบมีลำดับ (Order List) โดยใช้แท็ก <ol> ร่วมกับแท็ก <li> ดังต่อไปนี้
เป็นการสร้างรายการ(List) แบบไม่มีีเลขลำดับ แต่เป็นการใช้เครื่องหมาย หน้าหัวข้อแทน โดยเครื่องหมายหน้าหัวข้อมีให้เลือก 3 รูปแบบคือ disc หมายถึง วงกลมทึบ circle หมายถึง วงกลมโปร่งใส square หมายถึง สีเหลี่ยมทึบ หากไม่มีการกำหนดเครื่องหมายหน้าหัวข้อหน้ารายการจะแสดงเป็น วงกลม ทึบ ซึ่งถือเป็นเครื่องหมายปกติ
ตัวอย่าง
<html> <head> <title>การสร้างรายการ (List)</title> </head> <body> การเขียนเว็บเพจ<br> <hr> <ul> <li>รายการที่1</li> <li>รายการที่2</li> <li>รายการที่3</li> <li> รายการที่4</li> </ul> </body> </html>
จากตัวอย่างจะเห็นว่ามีการกำหนดให้เครื่องหมายหน้ัาหัวข้อเป็น "square" คือเป็นสี่เหลี่ยมทึบ แต่ในรายการที่ 3 กำหนดให้เครื่องหมายหน้าหัวข้อเป็น "circle" คือ วงกลมโปร่งใส่เป็นการสร้างรายการ (List) แบบมีลำดับ คือมีสัญลักษณ์แสดงลำดับหน้ารายการที่ต้องการ สัญลักษณ์ แสดงลำดับมี 6 แบบคือ type="a" คือแสดงลำััดับจาก a..z type="A" คือแสดงลำดับจาก A..Z type="i" หมายถึงแสดงลำัดับเป็น เลขโรมันตัวพิมพ์เล็ก type="I" หมายถึงแสดงลำดับเป็น เลขโรมันตัวพิมพ์ใหญ่ type="1" หมายถึงแสดงลำดับเป็น 1,2,3,4..
<html> <head> <title>การสร้างรายการ (List)</title> </head> <body> การเขียนเว็บเพจ<br> <hr> <ul type="square" > <li>รายการที่1</li> <li>รายการที่2</li> <li type="circle" >รายการที่3</li> <li> รายการที่4</li> </ul> </body> </html>
<html> <head> <title>List แบบลำดับ </title> </head> <body>การเขียนเว็บเพจ<br> <hr> <ol type="A"> รายการแบบแสดงลำดับ <li>รายการที่1</li> <li>รายการที่2</li> <li>รายการที่3</li> <li>รายการที่4</li> </ol> </body> </html>
ถ้าหากต้องการระบุค่าเริ่มต้นในรายการ สามารถทำได้โดย ใช้ แอททริบิวต์ในแท็ก <ol> ดังนี้ <ol type="1" start="7"> ตัวเลขที่จะแสดงในลำดับแรก คือเลข 7 เพราะเรากำหนดลำดับ เป็นตัวเลข คือ type="1" ถ้าต้องการระบุลำดับหน้ารายการใดรายการหนึ่ง สามารถทำได้โดย การใช้แอททริบิวต์ value ใน แท็ก <il> ดังนี้ <li value="15"> หมายความว่า หน้ารายการนี้จะแสดงเป็นเลข 15 ดังตัวอย่างตามกรอบด้านขวา
<html> <head> <title>List แบบลำดับ </title> </head> <body>การเขียนเว็บเพจ<br> <hr> <ol type="1" start="7"> รายการแบบแสดงลำดับ <li>รายการที่1</li> <li>รายการที่2</li> <li>รายการที่3</li> <li value="15" >รายการที่4</li> </ol> </body> </html>
<html> <head> <title>List แบบซ้อนกัน </title> </head> <body>การเขียนเว็บเพจ<br> <hr> <ol type="1"> <li>ทุเรียนพันธ์ใดเป็นที่นิยมมากที่สุด</li> <ol type="a"> <li>ชะนี</li> <li>หมอนทอง</li> <li>กระดุม</li> <li>รวงทอง</li> </ol> <li>หนังสือยอดนิยมได้แก่</li> <ol type="i"> <li>คอมพิวเตอร์</li> <li>นวนิยาย</li> <li>ประวัติศาสตร์</li> <li>วารสาร</li> </ol> </ol> </body> </html>
|