Recommended
More Related Content
More from pinglada1
More from pinglada1 (20)
Session2Part2.pptx
- 1. Orjix www.RongRean.com หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 2 ตอนที่ 2
- 2. www.rongrean.com Orjix Contents การสร้างลิสต์แบบไม่มีลาดับ <ul> 1 การสร้างลิสต์แบบมีลาดับ <ol> 2 การสร้างลิสต์ซ้อนกัน 3
- 3. การสร้างลิสต์แบบไม่มีลาดับ <ul> ลิสต์แบบไม่มีลำดับ (un-ordered list) เป็นลิสต์ที่เหมำะสำหรับกำรนำเสนอข้อมูลที่ เป็นประเด็นสั้นๆ ไม่ต้องกำรลำดับของตัวเลข หรือตัวอักษร www.rongrean.com Orjix ชื่อแท็ก ul และ li ตำแหน่งของแท็ก ul (Unordered List) อยู่ภายในแท็ก <body> … </body> รูปแบบใน HTML4 และรูปแบบใน (XHTML) <ul> <li>ข้อมูลในลิสต์ (</li>) <li>ข้อมูลในลิสต์ (</li>) … </ul>
- 5. กำรกำหนดเครื่องหมำยนำหน้ำหัวข้อ กำรกำหนดเครื่องหมำยนำหน้ำหัวข้อทำได้โดยใส่ attribute ‘type’ เข้ำไป ภำยใต้ <ul> หรือ <li> www.rongrean.com Orjix <ul type="circle"> <li>one</li> <li>two</li> <li type="square">three</li> </ul> ชนิดของเครื่องหมาย รูปแบบ สัญลักษณ์ disc วงกลมทึบ • Circle วงกลมโปร่งใส square สี่เหลี่ยมทึบ
- 6. กำรสร้ำงลิสต์แบบมีลำดับ ลิสต์แบบมีลำดับใช้เพื่อเสนอข้อมูล เช่นขั้นตอนกำรทำงำนหรืออันดับหนังสือขำยดี กำร ใช้จะคล้ำยกับกำรใช้ลิสต์แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับแต่ละสมำชิกที่อยู่ในลิสต์ www.rongrean.com Orjix ชื่อแท็ก Ol และ li ตำแหน่งของแท็ก Ol (Ordered List) อยู่ภายในแท็ก <body>…</body> Li (List Item) อยู่ภายในแท็ก <ol>…</ol> รูปแบบใน HTML4 และรูปแบบใน (XHTML) <ol> <li>ข้อมูลในลิสต์ (</li>) <li>ข้อมูลในลิสต์ (</li>) … </ol>
- 8. กำรกำหนดชนิดของตัวจัดลำดับ เรำสำมำรถทำได้โดยกำหนดชนิดของตัวจัดอันดับลงไปใน <ol> www.rongrean.com Orjix <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,…..
- 9. กำหนดลำดับเริ่มต้นให้กับข้อมูล ถ้ำเรำต้องกำรกำหนดลำดับเริ่มต้นหรือต้องกำรข้ำมลำดับไปบำงรำยกำร เรำสำมำรถทำได้ ดังนี้ www.rongrean.com Orjix <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>
- 10. กำรสร้ำงลิสต์ซ้อนกัน กำรสร้ำงลิสต์ซ้อนกันมีประโยชน์ในกำรนำเสนอข้อมูลที่มีหัวข้อย่อยหรือมีขั้นตอนมำก www.rongrean.com Orjix <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 ชั้นเพราะจะทาให้สับสนกับข้อมูลที่ปรากฏในลิสต์