Session2 part2

Orjix
www.RongRean.com
หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 2 ตอนที่ 2

www.rongrean.com Orjix
Contents
การสร้างลิสต์แบบไม่มีลาดับ <ul>1
การสร้างลิสต์แบบมีลาดับ <ol>2
การสร้างลิสต์ซ้อนกัน3

การสร้างลิสต์แบบไม่มีลาดับ <ul>
ลิสต์แบบไม่มีลำดับ (un-ordered list) เป็นลิสต์ที่เหมำะสำหรับกำรนำเสนอข้อมูลที่
เป็นประเด็นสั้นๆ ไม่ต้องกำรลำดับของตัวเลข หรือตัวอักษร
ชื่อแท็ก ul และ li
ตำแหน่งของแท็ก ul (Unordered List) อยู่ภายในแท็ก <body> …
</body>
รูปแบบใน HTML4
และรูปแบบใน
(XHTML)
<ul>
<li>ข้อมูลในลิสต์ (</li>)
…
</ul>

ตัวอย่ำงกำรสร้ำงลิสต์แบบไม่มีลำดับ
<body>
<ul>
รายการสินค้าที่มีขายในเว็บไซต์ของเรา
<li>เครื่องสาอาง</li>
<li>เสื้อผ้า</li>
<li>รองเท้า</li>
</ul>
</body>

กำรกำหนดเครื่องหมำยนำหน้ำหัวข้อ
กำรกำหนดเครื่องหมำยนำหน้ำหัวข้อทำได้โดยใส่ attribute ‘type’ เข้ำไป
ภำยใต้ <ul> หรือ <li>
<ul type="circle">
<li>one</li>
<li>two</li>
<li type="square">three</li>
</ul>
ชนิดของเครื่องหมาย รูปแบบ สัญลักษณ์
disc วงกลมทึบ •
Circle วงกลมโปร่งใส
square สี่เหลี่ยมทึบ

กำรสร้ำงลิสต์แบบมีลำดับ
ลิสต์แบบมีลำดับใช้เพื่อเสนอข้อมูล เช่นขั้นตอนกำรทำงำนหรืออันดับหนังสือขำยดี กำร
ใช้จะคล้ำยกับกำรใช้ลิสต์แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับแต่ละสมำชิกที่อยู่ในลิสต์
ชื่อแท็ก Ol และ li
ตำแหน่งของแท็ก Ol (Ordered List) อยู่ภายในแท็ก
<body>…</body>
Li (List Item) อยู่ภายในแท็ก <ol>…</ol>
รูปแบบใน HTML4
และรูปแบบใน
(XHTML)
<ol>
…
</ol>

ตัวอย่ำงกำรสร้ำงลิสต์แบบมีลำดับ
<body>
<ol>
รายการสินค้าที่มีขายในเว็บไซต์ของเรา
<li>เครื่องสาอาง</li>
<li>เสื้อผ้า</li>
<li>รองเท้า</li>
</ol>
</body>

กำรกำหนดชนิดของตัวจัดลำดับ
เรำสำมำรถทำได้โดยกำหนดชนิดของตัวจัดอันดับลงไปใน <ol>
<ol type="A">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
ชนิด คาอธิบาย
Type=“A” แสดงเป็นตัวอักษรพิมพ์ใหญ่ A,B,C,…
Type=“a” แสดงเป็นตัวอักษรพิมพ์เล็ก a,b,c,…
Type=“I” แสดงเป็นเลขโรมันตัวพิมพ์ใหญ่ I,II,III,…
Type=“i” แสดงเป็นเลขโรมันตัวพิมพ์เล็ก i,ii,iii
Type=“1” แสดงเป็นตัวเลข คือ 1,2,3,…..

กำหนดลำดับเริ่มต้นให้กับข้อมูล
ถ้ำเรำต้องกำรกำหนดลำดับเริ่มต้นหรือต้องกำรข้ำมลำดับไปบำงรำยกำร เรำสำมำรถทำได้
ดังนี้
<ol start="4">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol>
<li>one</li>
<li value="7">two</li>
<li>three</li>
</ol>

กำรสร้ำงลิสต์ซ้อนกัน
กำรสร้ำงลิสต์ซ้อนกันมีประโยชน์ในกำรนำเสนอข้อมูลที่มีหัวข้อย่อยหรือมีขั้นตอนมำก
<ol>
<li>one</li>
<ol type="a">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<li>two</li>
<ul type="square">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li>three</li>
</ol>
*ไม่แนะนาให้ซ้อนลิสต์เกินกว่า 3 ชั้นเพราะจะทาให้สับสนกับข้อมูลที่ปรากฏในลิสต์

Session2 part2

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

More from sangkeetwittaya stourajini

More from sangkeetwittaya stourajini (20)

Session2 part2