Download to read offline
Session2 part2
- 1. www.RongRean.com หลักสูตร สร้างเว็บด้วย HTML: Session ที่ 2 ตอนที่ 2
- 2. Contents www.rongrean.com Orjixการสร้างลิสต์แบบไม่มีลำดับ <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>
- 4. ตัวอย่างการสร้างลิสต์แบบไม่มีลำดับ <body> <ul>รายการสินค้าที่มีขายในเว็บไซต์ของเรา <li> เครื่องสำอาง </li> <li> เสื้อผ้า </li> <li> รองเท้า </li> </ul> </body> www.rongrean.com Orjix
- 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>
- 7. ตัวอย่างการสร้างลิสต์แบบมีลำดับ www.rongrean.com Orjix<body> <ol> รายการสินค้าที่มีขายในเว็บไซต์ของเรา <li> เครื่องสำอาง </li> <li> เสื้อผ้า </li> <li> รองเท้า </li> </ol> </body>
- 8. การกำหนดชนิดของตัวจัดลำดับ เราสามารถทำได้โดยกำหนดชนิดของตัวจัดอันดับลงไปใน <ol> www.rongrean.com Orjix <ol type="A" > <li>one</li> <li>two</li> <li>three</li> </ol>
- 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.comOrjix < 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 ชั้นเพราะจะทำให้สับสนกับข้อมูลที่ปรากฏในลิสต์