|
การใช้ลิสต์ (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>
|
