Session2 part2
10
Orjix www.RongRean.com หหหหห หหหหหหหหหหหหห HTML: Session หหห
description
Transcript of Session2 part2
Orjix
www.RongRean.com
หลั�กสู�ตร สูรางเว็�บด้ว็ย HTML: Session ที่�� 2 ตอนที่�� 2
www.rongrean.com Orjix
Contents
การสูรางลั�สูต�แบบไม่�ม่�ลั�าด้�บ <ul>1
การสูรางลั�สูต�แบบม่�ลั�าด้�บ <ol>2
การสูรางลั�สูต�ซ้อนก�น3
การสูรางลั�สูต�แบบไม่�ม่�ลั�าด้�บ <ul>
ลั�สูต�แบบไม่�ม่�ลั�าด้�บ (un-ordered list ) เป็!นลั�สูต�ที่��เหม่าะสู�าหร�บการน�าเสูนอข้อม่�ลัที่��เป็!นป็ระเด้�นสู�$นๆ ไม่�ตองการลั�าด้�บข้องต�ว็เลัข้ หร&อต�ว็อ�กษร
www.rongrean.com Orjix
ชื่&�อแที่�ก ul และ liต�าแหน�งข้องแที่�ก
ul (Unordered List) อยู่��ภายู่ในแท็�ก <body> … </body>
ร�ป็แบบใน HTML4 แลัะร�ป็แบบใน(XHTML)
<ul> <li>ข้�อมู�ลในล�สต์� (</li>) <li>ข้�อมู�ลในล�สต์� (</li>) …</ul>
ต�ว็อย�างการสูรางลั�สูต�แบบไม่�ม่�ลั�าด้�บ
www.rongrean.com Orjix
<body> <ul> รายการสู�นค้าที่��ม่�ข้ายในเว็�บไซ้ต�ข้องเรา <li>เค้ร&�องสู�าอาง</li> <li>เสู&$อผ้า</li> <li>รองเที่า</li> </ul></body>
<body> <ul> รายการสู�นค้าที่��ม่�ข้ายในเว็�บไซ้ต�ข้องเรา <li>เค้ร&�องสู�าอาง</li> <li>เสู&$อผ้า</li> <li>รองเที่า</li> </ul></body>
การก�าหนด้เค้ร&�องหม่ายน�าหนาห�ว็ข้อการก�าหนด้เค้ร&�องหม่ายน�าหนาห�ว็ข้อที่�าได้โด้ยใสู�
attribute ‘type’ เข้าไป็ภายใต <ul> หร&อ <li>
www.rongrean.com Orjix
<ul type="circle"><li>one</li><li>two</li><li type="square">three</li>
</ul>
<ul type="circle"><li>one</li><li>two</li><li type="square">three</li>
</ul>
ชน�ดข้องเครื่��องหมูายู่
รื่�ปแบบ ส"ญล"กษณ์�
disc วงกลมูท็'บ •
Circle วงกลมูโปรื่�งใสsquare ส)�เหล)�ยู่มูท็'บ
การสูรางลั�สูต�แบบม่�ลั�าด้�บลั�สูต�แบบม่�ลั�าด้�บใชื่เพื่&�อเสูนอข้อม่�ลั เชื่�นข้�$นตอนการ
ที่�างานหร&ออ�นด้�บหน�งสู&อข้ายด้� การใชื่จะค้ลัายก�บการใชื่ลั�สูต�แบบไม่�ม่�ลั�าด้�บ แต�จะม่�ต�ว็เลัข้ก�าก�บแต�ลัะสูม่าชื่�กที่��อย��ในลั�สูต�
www.rongrean.com Orjix
ชื่&�อแที่�ก Ol และ liต�าแหน�งข้องแที่�ก
Ol (Ordered List) อยู่��ภายู่ในแท็�ก <body>…</body>Li (List Item) อยู่��ภายู่ในแท็�ก <ol>…</ol>
ร�ป็แบบใน HTML4 แลัะร�ป็แบบใน(XHTML)
<ol> <li>ข้�อมู�ลในล�สต์� (</li>) <li>ข้�อมู�ลในล�สต์� (</li>) …</ol>
ต�ว็อย�างการสูรางลั�สูต�แบบม่�ลั�าด้�บ
www.rongrean.com Orjix
<body> <ol> รายการสู�นค้าที่��ม่�ข้ายในเว็�บไซ้ต�ข้องเรา <li>เค้ร&�องสู�าอาง</li> <li>เสู&$อผ้า</li> <li>รองเที่า</li> </ol></body>
<body> <ol> รายการสู�นค้าที่��ม่�ข้ายในเว็�บไซ้ต�ข้องเรา <li>เค้ร&�องสู�าอาง</li> <li>เสู&$อผ้า</li> <li>รองเที่า</li> </ol></body>
การก�าหนด้ชื่น�ด้ข้องต�ว็จ�ด้ลั�าด้�บเราสูาม่ารถที่�าได้โด้ยก�าหนด้ชื่น�ด้ข้องต�ว็จ�ด้อ�นด้�บลัง
ไป็ใน <ol>
www.rongrean.com Orjix
<ol type="A"><li>one</li><li>two</li><li>three</li>
</ol>
<ol type="A"><li>one</li><li>two</li><li>three</li>
</ol>
ก�าหนด้ลั�าด้�บเร��ม่ตนใหก�บข้อม่�ลัถาเราตองการก�าหนด้ลั�าด้�บเร��ม่ตนหร&อตองการข้าม่
ลั�าด้�บไป็บางรายการ เราสูาม่ารถที่�าได้ด้�งน�$
www.rongrean.com Orjix
<ol start="4"><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><li value="7">two</li><li>three</li>
</ol>
การสูรางลั�สูต�ซ้อนก�นการสูรางลั�สูต�ซ้อนก�นม่�ป็ระโยชื่น�ในการน�าเสูนอข้อม่�ลั
ที่��ม่�ห�ว็ข้อย�อยหร&อม่�ข้�$นตอนม่าก
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>
<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 ช"-นเพรื่าะจะท็+าให�ส"บสนก"บข้�อมู�ลท็)�ปรื่ากฏในล�สต์�
