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>) <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> <li>ขอ้มูลในลิสต์ (</li>) <li>ขอ้มูลในลิสต์ (</li>) …</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>

กำาหนดลำาดับเริม่ต้นให้กับขอ้มูลถ้าเราต้องการกำาหนดลำาดับเริม่ต้นหรอืต้องการขา้ม

ลำาดับไปบางรายการ เราสามารถทำาได้ดังน้ี


<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

Education

Transcript of Session2 part2