การสร้างลิสต์รายการ

การสร้างลิสต์รายการ

การสร้างลิสต์รายการ คือ การนำเสนอข้อมูลอีกรูปแบบเพื่อช่วยยกข้อมูลที่เป็นประเด็นมาจัดเป็นรายการหรือลิสต์

1. การสร้างลิสต์แบบไม่มีลำดับ

ลิสต์แบบไม่เรียงลำดับ (Unordered List) เป็นลิสต์ที่เหมาะสำหรับการนำเสนอข้อมูลที่เป็นประเด็นสั้น ๆ ไม่ต้องการของตัวเลข หรือตัวอักษรให้ยุ่งยาก

รูปแบบการใช้แท็ก <ul>

<ul>

<li>รายการ1</li>
<li>รายการ2</li>

</ul>

การกำหนดรายละเอียดแอตทริบิวต์ type

<ul type=“ชนิดเครื่องหมาย”>
<li type=“ชนิดเครื่องหมาย”>

ค่าที่กำหนด  ชนิดของเครื่องหมายหน้าลำดับ เช่น disc, circle, และ square

li2

หากไม่มีการกำหนดชนิดของเครื่องหมายหน้ารายการจะแสดงวงกลมทึบเป็นเครื่องหมายปกติ

ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ

<!DOCTYPE HTML>

<html>

<head>

<title>การกำหนดเครื่องหมายให้กับลิสต์แบบไม่มีลำดับ</title>

</head>

<body>

<ul type=”circle”>สถานที่ท่องเที่ยวอำเภอเกาะคา จังหวัดลำปาง

<li type=”disc”>วัดพระธาตุลำปางหลวง</li>

<li type=”square”>วัดไหล่หินหลวง</li>

<li>วัดพระธาตุจอมปิง</li>

</ul>

</body>

</html>

ผลลัพธ์ที่ได้

1

2. การสร้างลิสต์แบบมีลำดับ

ลิสต์แบบเรียงลำดับ จะเป็นการนำเสนอข้อมูลรายการแบบมีตัวเลข ตัวอักษร ซึ่งลิสต์แบบนี้นำมาใช้เพื่อบอกให้ทราบลำดับของข้อมูลที่นำเสนอ

รูปแบบการใช้งานแท็ก <ol>

<ol>

<li>รายการ1</li>
<li>รายการ2</li>

</ol>

การกำหนดชนิดของตัวจัดลำดับ

<ul type=“ชนิดของลำดับ”>

ค่าที่กำหนด  ชนิดของลำดับหน้าหัวข้อ เช่น A, a, I (ไอตัวใหญ่), i และ 1


ชนิดของตัวจัดอันดับ
li5

ตัวอย่างการกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ

 

<html>

<head>

<title>การกำหนดเครื่องหมายให้กับลิสต์แบบมีลำดับ</title>

</head>

<body>

<ol type=”1″>สถานที่ท่องเที่ยวอำเภอเกาะคา จังหวัดลำปาง

   <li>วัดพระธาตุลำปางหลวง</li>

   <li>วัดไหล่หินหลวง</li>

   <li>วัดพระธาตุจอมปิง</li>

</ol>

</body>

</html>

ผลลัพธ์ที่ได้
2

การกำหนดลำดับเริ่มต้นให้กับข้อมูล

<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

 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>

ผลลัพธ์ที่ได้

6

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>

ผลลัพธ์ที่ได้

7

คลิปวิดีโอ

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: