Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
More from Nattipong Siangyen
More from Nattipong Siangyen (20)
บทที่ 6 การใช้สร้างรายการด้วย list
- 3. การสร้างลิสต์แบบไม่มีลาดับ <ul> ลิสต์แบบไม่มีลาดับ (un-ordered list) เป็นลิสต์ที่เหมาะสาหรับการนาเสนอข้อมูลที่ เป็นประเด็นสั้นๆ ไม่ต้องการลาดับของตัวเลข หรือตัวอักษร ชื่อแท็ก ul และ li ตาแหน่งของแท็ก ul (Unordered List) อยู่ภายในแท็ก <body> … </body> รูปแบบใน HTML <ul> <li> ข้อมูลในลิสต์ </li> <li> ข้อมูลในลิสต์ </li> … </ul>
- 4. ตัวอย่างการสร้างลิสต์แบบไม่มีลาดับ <body> <ul> รายการสินค้าที่มีขายในเว็บไซต์ของเรา <li> เครื่องสาอาง </li> <li> เสื้อผ้า </li> <li> รองเท้า </li> </ul> </body>
- 5. การกาหนดเครื่องหมายนาหน้าหัวข้อ การกาหนดเครื่องหมายนาหน้าหัวข้อทาได้โดยใส่ attribute ‘type’ เข้าไปภายใต้ <ul> หรือ <li> <ul type="circle"> <li>one</li> <li>two</li> <li type="square">three</li> </ul> ชนิดของเครื่องหมาย รูปแบบ สัญลักษณ์ disc วงกลมทึบ • Circle วงกลมโปร่งใส square สี่เหลี่ยมทึบ
- 6. การสร้างลิสต์แบบมีลาดับ ลิสต์แบบมีลำดับใช้เพื่อเสนอข้อมูล เช่นขั้นตอนกำรทำงำนหรืออันดับหนังสือขำยดี กำรใช้จะคล้ำย กับกำรใช้ลิสต์แบบไม่มีลำดับ แต่จะมีตัวเลขกำกับแต่ละสมำชิกที่อยู่ในลิสต์ ชื่อแท็ก Ol และ li ตาแหน่งของแท็ก Ol (Ordered List) อยู่ภายในแท็ก <body>…</body> Li (List Item) อยู่ภายในแท็ก <ol>…</ol> รูปแบบใน <ol> <li> ข้อมูลในลิสต์ </li> <li> ข้อมูลในลิสต์ </li> … </ol>
- 7. ตัวอย่างการสร้างลิสต์แบบมีลาดับ <body> <ol> รายการสินค้าที่มีขายในเว็บไซต์ของเรา <li> เครื่องสาอาง </li> <li> เสื้อผ้า </li> <li> รองเท้า </li> </ol> </body>
- 8. การกาหนดชนิดของตัวจัดลาดับ เราสามารถทาได้โดยกาหนดชนิดของตัวจัดอันดับลงไปใน <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,…..
- 9. กาหนดลาดับเริ่มต้นให้กับข้อมูล ถ้าเราต้องการกาหนดลาดับเริ่มต้นหรือต้องการข้ามลาดับไปบางรายการ เราสามารถทาได้ดังนี้ <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. การสร้างลิสต์ซ้อนกัน การสร้างลิสต์ซ้อนกันมีประโยชน์ในการนาเสนอข้อมูลที่มีหัวข้อย่อยหรือมีขั้นตอนมาก <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>