การสร้างลิสต์รายการ คือ การนำเสนอข้อมูลอีกรูปแบบเพื่อช่วยยกข้อมูลที่เป็นประเด็นมาจัดเป็นรายการหรือลิสต์ 1. การสร้างลิสต์แบบไม่มีลำดับ ลิสต์แบบไม่เรียงลำดับ (Unordered List) เป็นลิสต์ที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นประเด็นสั้น ๆ ไม่ต้องการของตัวเลข หรือตัวอักษรให้ยุ่งยาก รูปแบบการใช้แท็ก <ul> <ul> <li>รายการ1</li> </ul> การกำหนดรายละเอียดแอตทริบิวต์ type <ul type=“ชนิดเครื่องหมาย”> ค่าที่กำหนด ชนิดของเครื่องหมายหน้าลำดับ เช่น disc, circle, และ square
<li>รายการ2</li>
<li type=“ชนิดเครื่องหมาย”>
หากไม่มีการกำหนดชนิดของเครื่องหมายหน้ารายการจะแสดงวงกลมทึบเป็นเครื่องหมายปกติ
ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ
<!DOCTYPE HTML>
<html>
<head>
<title>การกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ</title>
</head>
<body>
<ul type=”circle”>สถานที่ท่องเที่ยวอำเภอเกาะคา จังหวัดลำปาง
<li type=”disc”>วัดพระธาตุลำปางหลวง</li>
<li type=”square”>วัดไหล่หินหลวง</li>
<li>วัดพระธาตุจอมปิง</li>
</ul>
</body>
</html>
ผลลัพธ์ที่ได้
2. การสร้างลิสต์แบบมีลำดับ
ลิสต์แบบเรียงลำดับ จะเป็นการนำเสนอข้อมูลรายการแบบมีตัวเลข ตัวอักษร ซึ่งลิสต์แบบนี้นำมาใช้เพื่อบอกให้ทราบลำดับของข้อมูลที่นำเสนอ
รูปแบบการใช้งานแท็ก <ol>
<ol>
<li>รายการ1</li>
<li>รายการ2</li>
</ol>
การกำหนดชนิดของตัวจัดลำดับ
<ul type=“ชนิดของลำดับ”>
ค่าที่กำหนด ชนิดของลำดับหน้าหัวข้อ เช่น A, a, I (ไอตัวใหญ่), i และ 1
ชนิดของตัวจัดอันดับ
ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ
<html>
<head>
<title>การกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ</title>
</head>
<body>
<ol type=”1″>สถานที่ท่องเที่ยวอำเภอเกาะคา จังหวัดลำปาง
<li>วัดพระธาตุลำปางหลวง</li>
<li>วัดไหล่หินหลวง</li>
<li>วัดพระธาตุจอมปิง</li>
</ol>
</body>
</html>
ผลลัพธ์ที่ได้
การกำหนดลำดับเริ่มต้นให้กับข้อมูล
<ol start=“ตัวเลข”> และ <li value=“ตัวเลข”>
ค่าที่กำหนด เป็นการกำหนดเลขเริ่มต้นของลำดับ
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>การกำหนดเลขเริ่มต้นของลำดับ</title>
</head>
<body>
5 อับดับหนังสือขายดีประจำร้าน
<ol>หมวดคอมพิวเตอร์
<li>Photoshop CS5</li>
<li>เรียนลัดการสร้างเว็บ</li>
<li>การสร้างงานนำเสนอ</li>
</ol>
<ol start=”4″>หมวดทั่วไป
<li>ชีวิตยิ่งกว่าละคร</li>
<li>ความฝันของนายโข่ง</li>
</ol>
</body>
</html>
ผลลัพธ์ที่ได้
3. การสร้างลิสต์แบบแบบจำกัดความ
ลิสต์แบบจำกัดความ (Definition List) มักถูกนำไปใช้กับการจำกัดความ โดยมีการแบ่งลิสต์เป็น 2 ส่วน เช่น พจนานุกรม ส่วนแรก คือ คำศัพท์ ส่วนที่สอง คือ คำจำกัดความ จะเยื้องไปหลังคำศัพท์
รูปแบบการใช้งานแท็ก <dl>
<dl>
<dt>คำศัพท์</dt>
<dd>ความหมาย</dd>
<dt>คำศัพท์</dt>
<dd>ความหมาย</dd>
…
</dl>
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>การสร้างลิสต์แบบแบบจำกัดความ</title>
</head>
<body>
<dl>อธิบายคำศัพท์อินเทอร์เน็ต
<dt>HTTP</dt>
<dd>โพรโตคอลในการสืบค้นข้อมูล</dd>
<dt>FTP</dt>
<dd>โพรโตคอลในการโอนย้ายไฟล์ข้อมูล</dd>
</dl>
</body>
</html>
ผลลัพธ์ที่ได้
4. การสร้างลิสต์ซ้อนลิสต์
การสร้างลิสต์แบบซ้อนกันมีประโยชน์ในการนำเสนอข้อมูลที่มีหัวข้อย่อย หรือขั้นตอนมาก ซึ่งสามารถนำมาประยุกต์ใช้ในการตั้งโจทย์คำถามที่คำตอบยาก ๆ ได้
ตัวอย่างการใช้งาน
<!DOCTYPE HTML>
<html>
<head>
<title>การสร้างลิสต์ซ้อนลิสต์</title>
</head>
<body>
<ol>
<li>จังหวัดใดอยู่ในภาคเหนือตอนบน</li>
<ol type=”a”>
<li>เชียงใหม่</li>
<li>เพชรบูรณ์</li>
<li>ตาก</li>
<li>สุโขทัย</li>
</ol>
<li>จังหวัดใดอยู่ในภาคเหนือตอนล่าง</li>
<ol type=”a”>
<li>เชียงใหม่</li>
<li>เพชรบูรณ์</li>
<li>ลำปาง</li>
<li>พะเยา</li>
</ol>
</ol>
</body>
</html>
ผลลัพธ์ที่ได้
อ้างอิง
- รูปภาพจากอิดิเตอร์ Notepad
- การสร้างเว็บและเพิ่มลูกเล่นด้วย HTML และ XHTML เขียนโดย นายประชา พฤกษ์ประเสริฐ สำนักพิมพ์ซิมพลิฟาย