การนาเสนอข้อมูลที่ต้องการความกระชับ หรือแสดงรายการเป็นข้อ ๆ วิธีการอย่างหนึ่งที่ใช้กันคือ การทาลิสต์ (List)
ลิสต์แบบไม่มีลาดับ (Unordered List)
ลิสต์แบบมีลาดับ (Ordered List)
ลิสต์แบบจากัดความ (Definition List)
ลิสต์แบบไม่มีลาดับ (Unordered List)
ลิสต์แบบไม่มีลาดับ (Unordered List)
ลิสต์แบบมีลาดับ (Ordered List)
ลิสต์แบบจากัดความ (Definition List)
ลิสต์แบบไม่มีลาดับ (Unordered List)
รูปแบบ
<ul type="ชนิดเครื่องหมาย">
<li type="ชนิดเครื่องหมาย" >ข้อมูล</li>
<li type="ชนิดเครื่องหมาย" >ข้อมูล</li>
…
</ul>
</ul>
type เป็นแอททริบิวต์ที่กาหนดเครื่องหมายนาหน้าหัวข้อ
ชนิดของเครื่องหมายหน้าหัวข้อ
discวงกลมทึบ (เป็น default)
circleวงกลมโปร่งใส
squareสี่เหลี่ยมทึบ
ลิสต์แบบไม่มีลาดับ (Unordered List)
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=tis-620" />
<title>ลิสต์แบบไม่มีลาดับ</title>
</head>
<body>
<ul>
อาหารไทยที่ชาวต่างชาติชอบ
<li>ต้มยากุ้ง</li>
<li>ผัดไท</li>
<li>ส้มตา</li>
</ul>
</body>
</html>
ตัวอย่างนี้เริ่มสร้างเอกสารตามโครงสร้างของ XHTML
ลิสต์แบบไม่มีลาดับ (Unordered List)
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=tis-620" />
<title>ลิสต์แบบไม่มีลาดับ</title>
</head>
<body>
<ul type="square">
อาหารไทยที่ชาวต่างชาติชอบ
<li type="circle">ต้มยากุ้ง</li>
<li>ผัดไท</li>
<li type="circle">ส้มตา</li>
</ul>
</body>
</html>
ลิสต์แบบมีลาดับ (Ordered List)
รูปแบบ
<ol type="ชนิดตัวแสดงลาดับ">
<li type=" ชนิดตัวแสดงลาดับ " >ข้อมูล</li>
<li type=" ชนิดตัวแสดงลาดับ " >ข้อมูล</li>
…
</ol>
type เป็นแอททริบิวต์ที่กาหนดชนิดของตัวแสดงลาดับ
ชนิดของตัวแสดงลาดับtype="A" เป็นตัวอักษรพิมพ์ใหญ่ คือ A, B, Ctype="a"เป็นตัวอักษรพิมพ์ใหญ่ คือ a, b, ctype="I"เป็นเลขโรมันตัวพิมพ์ใหญ่ คือ I, II, III...type="i"เป็นเลขโรมันตัวพิมพ์เล็ก คือ i, ii, iiitype="1"เป็นตัวเลข คือ 1, 2, 3 (เป็น Default)
ลิสต์แบบมีลาดับ (Ordered List)
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=tis-620" />
<title>ลิสต์แบบมีลาดับ</title>
</head>
<body>
<ol>
อาหารไทยที่ชาวต่างชาติชอบ
<li>ต้มยากุ้ง</li>
<li>ผัดไท</li>
<li>ส้มตา</li>
</ol>
</body>
</html>
ลิสต์แบบมีลาดับ (Ordered List)
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=tis-620" />
<title>ลิสต์แบบมีลาดับ</title>
</head>
<body>
<ol type="I">
อาหารไทยที่ชาวต่างชาติชอบ
<li>ต้มยากุ้ง</li>
<li>ผัดไท</li>
<li>ส้มตา</li>
</ol>
</body>
</html>
การกาหนดลาดับเริ่มต้นให้กับข้อมูล
หากต้องการกาหนดตัวเลขเริ่มต้น หรือต้องการข้ามลาดับบางรายการไป เป็นการแสดงลาดับที่ไม่ต่อเนื่อง
รูปแบบ
ใช้แอททริบิวต์ start ซึ่งอยู่ได้ทั้ง <ol> และ <li>
รูปแบบ<ol start="ตัวเลข"> และ <li value="ตัวเลข">
การกาหนดลาดับเริ่มต้นให้กับข้อมูล
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=tis-620" />
<title>การกาหนดลาดับเริ่มต้นให้กับข้อมูล</title>
</head>
<body>
อาหารและผลไม้ทเว็บมาสเตอร์ชอบ
<ol>
อาหาร
<li>ต้มยาปลา</li>
<li>ต้มกระดูกอ่อนใส่สมุนไพร</li>
<li>ส้มตา</li>
</ol>
<ol start="4">
ผลไม้
<li>ทุเรียน</li>
<li>มังคุด</li>
<li>สับปะรด</li>
</ol>
</body>
</html>
<ol>
ผลไม้
<li value="4">ทุเรียน</li>
<li>มังคุด</li>
<li>สับปะรด</li>
</ol>
</body>
</html>
การสร้างลิสต์ซ้อนกัน
<html >
<head>
<meta http-equiv="content-type" content="text/html;charset=tis-620" />
<title>สร้างลิสต์ซ้อนกัน</title>
</head>
<body>
<ol>
<li>อาหารที่ท่านชอบมากที่สุด คือข้อใด</li>
<ol type="a">
<li>ต้มยาปลา</li>
<li>ต้มกระดูกอ่อนใส่เครื่องยาจีน</li>
<li>ส้มตา</li>
</ol>
การสร้างลิสต์ซ้อนกัน
<li>ผลไม้ที่ท่านชอบมากที่สุด คือข้อใด</li>
<ol type="a">
<li>ทุเรียน</li>
<li>มังคุด</li>
<li>สับปะรด</li>
</ol>
</ol>
</body>
</html>
0 ความคิดเห็น:
แสดงความคิดเห็น