การกำหนดให้ข้อความอยู่ในรูปของรายการ

1. Lists
การกาหนดให้ข้อความอยู่
ในรูปของรายการ

2. การกาหนดให้ข้อความอยู่ในรูปของรายการ
Unordered Lists แสดงข้อความแยกเป็นบรรทัดๆ ด้วย Bullet
ใช้คาสั่ง <ul>
Ordered Lists เหมือน Unordered Lists แต่เป็นตัวเลข
ใช้คาสั่ง <ol>
Menu Lists เหมือน Order Lists แต่ข้อความต้องมี
ความยาวไม่เกิน 1 บรรทัด ใช้คาสั่ง <menu>
Directory Lists เหมือน Menu Lists แต่ใช้ได้สั้นๆ ไม่เกิน
20 ตัวอักษร ใช้คาสั่ง <dir>

3. การกาหนดให้ข้อความอยู่ในรูปของรายการ
Definition Lists ใช้กับการนิยามความหมายของคาใดๆ
โดยคา และความหมายจะอยู่แยกบรรทัดกัน
ใช้คาสั่ง <dl> , <dt> และ <dd> โดย
<dl> , </dl> เป็นการเริ่มต้นใช้งาน
<dt> , </dt> Definition Term ใช้กาหนด
คา (Word)
<dd> , </dd> Definition Description ใช้
กาหนดคาอธิบายของคา

4. การกาหนดให้ข้อความอยู่ในรูปของรายการ
นอกจากนี้ในการสร้าง Lists เราจะใช้ <br> มาช่วยแยกบรรทัด
หรืออาจใช้ <li> ก็ได้ นอกจากนี้ยังต้องใช้ <lh> เพื่อกาหนด
หัวข้อให้กับ Lists ด้วย

5. ตัวอย่าง
<ul>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ul>
ผลลัพธ์
• HELLO
• HELLO
• HELLO
• HELLO

6. ตัวอย่าง
<ul>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ul>
ผลลัพธ์
HELLO HELLO
• HELLO
• HELLO
• HELLO
• HELLO

7. ตัวอย่าง
<ol>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
1. HELLO
2. HELLO
3. HELLO
4. HELLO

8. ตัวอย่าง
<ol>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
1. HELLO
2. HELLO
3. HELLO
4. HELLO

9. ตัวอย่าง
<dl>
<lh>Important Web term</lh><br>
<dt>HTML
<dd>HyperText Markup Lanquage
<dt>WWW
<dd>World Wide Web
<dt>VRML
<dd>Virtual Reality Markup Lanquage
</dl>
ผลลัพธ์
Important Web term
HTML
HyperText Markup
Lanquage
WWW
World Wide Web
VRML
Virtual Reality Markup
Lanquage

10. การกาหนดรูปแบบ Bullet ให้กับ Unordered Lists
Unordered Lists นอกจากจะแสดง Bullet ให้เป็นสีดาแล้วยัง
สามารถแสดงในรูปแบบอื่นได้อีกด้วย
<ul type=Disc> , </ul> กาหนด Bullet ให้เป็นสีดาแบบปกติ
<ul type=Circle> , </ul> กาหนด Bullet ให้เป็นสีเหลือง
<ul type=Square> , </ul> กาหนด Bullet ให้เป็นสีทึบ

11. ตัวอย่าง
<ul type="disc">
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ul>
ผลลัพธ์
HELLO HELLO
• HELLO
• HELLO
• HELLO
• HELLO

12. ตัวอย่าง
<ul type="circle">
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ul>
ผลลัพธ์
HELLO HELLO
o HELLO
o HELLO
o HELLO
o HELLO

13. ตัวอย่าง
<ul type="square">
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ul>
ผลลัพธ์
HELLO HELLO
 HELLO
 HELLO
 HELLO
 HELLO

14. การกาหนดรูปแบบตัวเลขให้กับ ordered Lists
ordered Lists นอกจากจะแสดงตัวเลขแบบ 1 , 2 , 3 ตามปกติ
แล้ว ยังสามารถแสดงในรูปแบบอื่นได้อีกด้วย
<ol type=A> , </ol> กาหนดตัวเลขเป็นแบบ A , B , C , D ,…
<ol type=a> , </ol> กาหนดตัวเลขเป็นแบบ a , b , c , d ,…
<ol type=I> , </ol> กาหนดตัวเลขเป็นแบบ I , II , III , IV ,…
<ol type=i> , </ol> กาหนดตัวเลขเป็นแบบ i , ii , iii , iv ,…
<ol type=1> , </ol> กาหนดตัวเลขเป็นแบบ 1 , 2 , 3 , 4 ,…

15. ตัวอย่าง
<ol type=A>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
A.HELLO
B. HELLO
C.HELLO
D.HELLO

16. ตัวอย่าง
<ol type=a>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
a. HELLO
b. HELLO
c. HELLO
d. HELLO

17. ตัวอย่าง
<ol type=I>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
I. HELLO
II. HELLO
III. HELLO
IV. HELLO

18. ตัวอย่าง
<ol type=i>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
i. HELLO
ii. HELLO
iii. HELLO
iv. HELLO

19. ตัวอย่าง
<ol type=1>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
1. HELLO
2. HELLO
3. HELLO
4. HELLO

20. การกาหนดรูปแบบตัวเลขให้กับ ordered Lists
ในบางครั้งเราอาจต้องการเปลี่ยนแปลงค่าของตัวเลขที่กาหนด
ใน ordered Lists ซึ่งสามารถเปลี่ยนแปลงได้ดังต่อไปนี้
skip ใช้สาหรับข้ามการเรียงลาดับตัวเลขในรายการ
start ใช้กาหนดค่าเริ่มต้นของตัวเลขในรายการ
valueใช้ระบุลงไปเลยว่าต้องการให้รายการนั้นเป็นตัวเลขอะไร

21. ตัวอย่าง
<ol type=1 start=3>
<lh>HELLO HELLO</lh><br>
<li>HELLO
<li>HELLO
<li>HELLO
<li value=20>HELLO
<li>HELLO
</ol>
ผลลัพธ์
HELLO HELLO
3. HELLO
4. HELLO
5. HELLO
20. HELLO
21. HELLO