HTML Lists : Order Lists

Order List တွေရေးသားဖို့အတွက် <ol> tag ကိုအသုံးပြုပါတယ်။ HTML Order list မှာ အင်္ဂလိပ် ဂဏန်း၊ ရောမ ဂဏန်း နှင့် အင်္ဂလိပ် အက္ခရာများဖြင့် သတ်မှတ်ရေးသားနိုင်ပါတယ်။

---

Order HTML List

အရေအတွက်ကို ရေတွက်ပြီး List လုပ်ချင်တဲ့အချိန်မျိုးတွေမှာ Order List ကိုအသုံးပြုရပါတယ်။

Order List တွေကို <ol> tag နဲ့ စတင်ပြီးတော့ ol ဆိုတာ Order List ရဲ့ အတိုကောက်ပါ။

ပြီးရင်တော့ ထုံးစံအတိုင်း အချက်အလက်တစ်ချင်းစီကို <li> tag ထဲမှာ ထည့်ရေးပါတယ်။

ပုံမှန်အားဖြင့် Order List တွေရဲ့ ရှေ့မှာ 1 , 2 , 3 စတဲ့နံပတ်တွေနဲ့ အမှတ်အသားလုပ်ပေးပါတယ်။

Example Code: Order List

1. <ol>

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

---

Order List type Attribute

type Attribute ဟာ Order List ရဲ့ List အမှတ်သား (list item marker type) ကို သတ်မှတ်ပေးဖို့အတွက် အသုံးပြုပါတယ်။

List အမှတ်အသား (list item marker type) ဆိုတာ List တွေရဲ့ ရှေ့မှာ ဖေါ်ပြပေးမယ့် သင်္ကေတကို ဆိုလိုပါတယ်။

Type	Description
type="1"	အင်္ဂလိပ်ဂဏန်း စဉ်ဖြင့် ဖေါ်ပြပေးမည်။ (Default)
type="A"	အင်္ဂလိပ်အက္ခရာ အကြီးဖြင့် ဖေါ်ပြပေးမည်။
type="a"	အင်္ဂလိပ်အက္ခရာ အသေးဖြင့် ဖေါ်ပြပေးမည်။
type="I"	ရောမဂဏန်းစဉ် အကြီးဖြင့် ဖေါ်ပြပေးမည်။
type="i"	ရောမဂဏန်းစဉ် အသေးဖြင့် ဖေါ်ပြပေးမည်။

Order List : Numbers

1. <ol type="1">

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

Order List : Uppercase Letters

1. <ol type="A">

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

Order List : Lowercase Letter

1. <ol type="a">

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

Order List : Uppercase Roman Numbers

1. <ol type="I">

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

Order List : Lowercase Roman Numbers

1. <ol type="i">

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

---

Control List Counting

ပုံမှန်အားဖြင့် Order List များရဲ့ အစဉ်ကို 1 ကနေ စ,ပါတယ်။ အကယ်လို့ အဲဒိစမှတ်ကို မိတ်ဆွေအနေနဲ့ ပြောင်းလဲချင်တယ် ဆိုရင်တော့ start Attribute ကိုသုံးရပါလိမ့်မယ်။

အောက်က ဥပမာကတော့ 50 ကနေ စတင်ပြီး ရေတွက်ပေးမယ့် ဥပမာ Code ဖြစ်ပါတယ်။

Example

1. <ol start="50">

2.      <li> Coffee </li>

3.      <li> Tea </li>

4.      <li> Milk </li>

5. </ol>

Try it Yourself!

---

Nested HTML lists

Nested ဆိုတာက List တစ်ခုအတွင်းမှာ နောက်ထပ် List တစ်ခုသုံးတာကို ပြောတာပါ။ အဲဒီလိုလည်း အသုံးပြုနိုင်ပါတယ်။

Example

1. <ol>

2.      <li> Coffee </li>

3.      <li> Tea

4.          <ol>

5.              <li> Black Tea </li>

6.              <li> Green Tea </li>

7.          </ol>

8.      </li>

9.      <li> Milk </li>

10. </ol>

Try it Yourself!

<li> tab အတွင်းမှာ နောက်ထပ် List Tag တွေထားနိုင်သလို၊ <img>တို့ <a> တို့လို အခြား HTML Element များလည်း ထည့်လို့ရပါတယ်။

---

Chapter Summary

1. Order List အတွက် <ol> ကိုအသုံးပြုပါတယ်။
2. List အမှတ်အသားသတ်မှတ်ဖို့အတွက် type Attribute ကိုသုံးတယ်။
3. List Item တွေအတွက်တော့ <li> ကိုသုံးရပါတယ်။
4. List ထဲမှာ နောက်ထပ် List တစ်ခုထပ်ထည့်လို့ရတယ်။
5. <li> tag ထဲမှာ အခြား HTML Element တွေလည်းထည့်သုံးလို့ရပါတယ်။

---

HTML List Tag

Tag	Description
<ul>	Unorder List သတ်မှတ်ရန်။
<ol>	Order List သတ်မှတ်ရန်။
<li>	အချက်အလက်များ သတ်မှတ်ရန်။
<dl>	Description List သတ်မှတ်ရန်။
<dt>	Description List ရဲ့ အချက်အလက် သတ်မှတ်ရန်။
<dd>	Description List ရဲ့ အချိက်အလက်ရဲ့ ရှင်းလင်းဖေါ်ပြချက် သတ်မှတ်ရန်။

HTML Tag များအားလုံးကို ကြည့်ရှုလိုပါက ‌HTML Tag Reference မှာသွားကြည့်နိုင်ပါတယ်။

မရှင်းလင်းတာ၊ မေးမြန်းလိုတာ၊ လိုအပ်တာများရှိရင် Comment မှာရေးခဲ့ပေးပါ။