<h2>Developing A Simple Website by yourself (lesson 3)</h2>
![14-00-22-website-importance-for-business.jpg](https://steemitimages.com/DQmRBGSeYxMv9k9tdRHNYzGFSW8K75hozXZVdDLB9TgUpqK/14-00-22-website-importance-for-business.jpg)
မဂၤလာပါ။ ဒီေန႔ေတာ့ List ေတြအေၾကာင္းကိုတင္ေပးသြားမွာပါ။ကြၽန္ေတာ္တင္ခဲ့တဲ့ lesson 1 နဲ႔ 2 ကိုကြၽန္ေတာ့ Blog ထဲမွာဝင္ေရာက္ဖတ္႐ႈႏိုင္ပါတယ္။

<h3>List</h3>

List မွာ order list,unorder list နဲ႔ defination list ဆိုပီး႐ွိပါတယ္။
Order list ဆိုတာ နံပါတ္စဥ္ပါတဲ့ list ျဖစ္ပီးေတာ့ unoder list ကေတာ့နံပါတ္စဥ္မပါပါပူး။Defination list ကေတာ့လူသံုးနည္းပါတယ္။

<h3>Unorder List</h3>

UnorderList အတြက္သံုးတဲ့ Tag ေတြကေတာ့
&lt; ul &gt;  &lt; /ul &gt; နဲ႔
&lt; li &gt;  &lt; /li &gt; တို႔ပဲဖစ္ပါတယ္။
ေအာက္က နမူနာ code ေတြကို
ၾကည့္လိုက္ပါ။

&lt; html &gt;
&lt; head &gt;
&lt; title &gt; Unoder List &lt; /title &gt;
&lt; /head &gt;
&lt; body &gt;
&lt; u &gt; Unorder List &lt; /u &gt;
&lt; ul &gt;
&lt;li&gt;First&lt;/li&gt;
&lt;li&gt;Second&lt;/li&gt;
&lt;li&gt;Third&lt;/li&gt;
&lt; /ul &gt;
&lt; /body &gt;
&lt; /html &gt;

&lt; ul &gt;  &lt; /ul &gt; ၾကားမွာlist လုပ္ခ်င္တဲ့စရင္းအကုန္လံုးကိုေရးရပီးေတာ့
&lt; li &gt; &lt; /li &gt; ၾကားမွာေတာ့
List လုပ္မဲ့ဟာ ကိုေရးရမွာပါ။
Output ပံုေလးကိုၾကည့္ရင္ေတာ့႐ွင္းသြားမွာပါ။

![1_1516038927092.png](https://steemitimages.com/DQmdoi1BJt8L1JBTgdybVrbn1WgekZPVRGSChPP6SVRBb3z/1_1516038927092.png)

အခုဆိုရင္ First,Second, Third ဆိုတဲ့စာေတြကို အဝိုင္းပံုေလးေတြနဲ႔ List လုပ္ထားတာေတြ႕ရမွာပါ။အဲ့အဝိုင္းေလးေတြ႕ေနရာမွာ Attribute ေျပာင္းပီးတစ္ျခားဟာေလးေတြေျပာင္းၾကည့္ရေအာင္။

<h3>Unorder List Attribute </h3>

Unorder List မွာ disc, square, circle
ဆိုပီးေျပာင္းလို့ရပါတယ္။Disc ကေတာ့ default ေပါ့။type ဆိၾတဲ့ attribute ကိုသံုးရမွာပါ
သံုးနည္းကေတာ့
 &lt; ul type="circle" &gt;
...
...
...
&lt; /ul &gt; ဆိုပီးေတာ့ျဖစ္ပါတယ္။
circle ေနရာမွာပဲ disc နဲ႔ square ကိုေျပာင္းထည့္ၾကည့္လို႔ရပါတယ္။
နမူနာ code ကိုေလ့လာၾကည့္ပါ။

&lt; html &gt;
&lt; head &gt;
&lt; title &gt; Under List &lt; /title &gt;
&lt; /head &gt;
&lt; body &gt;
&lt; u &gt; Unorder List ( Attribute) &lt; /u &gt;
&lt; ul type="circle" &gt;
&lt;li&gt;First&lt;/li&gt;
&lt;li&gt;Second&lt;/li&gt;
&lt;li&gt;Third&lt;/li&gt;
&lt; /ul &gt;
&lt; /body &gt;
&lt; /html &gt;

![2_1516038927138.png](https://steemitimages.com/DQmRRDQ9MEwRpj9HeF8HVjEtPjtAHDTXg2C49jaePpzySSX/2_1516038927138.png)

ပံုစံေလးေျပာင္းသြားတာကိုေတြ႔ကေမွာပါ။ဒီလိုမ်ိဳးပဲ square ကိုစမ္းၾကည့္ၾကပါ။ disc က ေတာ့ default မို႔လို႔ မစမ္းလဲရပါတယ္။

<h3>Order List </h3>

Order List ရဲ႕ Tag က 
&lt; ol &gt; နဲ႔ &lt; /ol &gt; ပဲျဖစ္ပါတယ္။Unorder List နဲ႔ေရးသားနည္းတူတူပါပဲ။သူ႔ရဲ႕ Attribute ေတြကေတာ့ Unorder list နဲ႔တူပါတယ္ type attribute ပါပဲ။ေျပာင္းသြားတဲ့ဟာကေတာ့
1, A, a, I(ေရာမအကၡရာ), i(ေရာမအကၡရာ) တို႔ပဲဖစ္ပါတယ္။
ကဲ့နမူနာ code ေလးေတြၾကည့္လိုက္ရေအာင္ဗ်ာ။

&lt; html &gt;
&lt; head &gt;
&lt; title &gt; Order List &lt; /title &gt;
&lt; /head &gt;
&lt; body &gt;
&lt; u &gt; Unorder List(Attribute) &lt; /u &gt;
&lt; ol type="1" &gt;
&lt;li&gt;First&lt;/li&gt;
&lt;li&gt;Second&lt;/li&gt;
&lt;li&gt;Third&lt;/li&gt;
&lt; /ol &gt;

&lt; ol type="I" &gt;
&lt;li&gt;First&lt;/li&gt;
&lt;li&gt;Second&lt;/li&gt;
&lt;li&gt;Third&lt;/li&gt;
&lt; /ol &gt;

&lt; /body &gt;
&lt; /html &gt;

![3_1516038927186.png](https://steemitimages.com/DQmQXbyPznR5DQ2NibjczbhRTNbjhnKo9cP1opEyETXJp6R/3_1516038927186.png)

Output က 
1.
2.
3. နဲ႔
I.
II.
III. ဆိုပိီးျဖစ္ေနတာေတြ႔ရမွာပါ။
"a" နဲ႔ "i"  ကိုလဲစမ္းသပ္ၾကည့္ၾကပါ။
Order List မွာ Unorder List နဲ႔မတူတဲ့အခ်က္ကေတာ့ မိမိႀကိဳက္တဲ့ နံပါတ္စဥ္ကေနစႏိုင္တာပဲဖစ္ပါတယ္။
start ဆိုတဲ့ Attribute ကို သံုးရတာပါ။
&lt; ol type="A" start=2&gt; ဆိုရင္
A ကေနမစေတာ့ဘဲ Bကေနစမွာပါ။
စမ္းၾကည့္ၾကပါ။

<h3>Definition List</h3>

Defination List မွာ 
dl ရယ္ dt ရယ္ dd ရယ္ဆိုပီး Tag 3 ခု႐ွိပါတယ္။
dl ကေတာ့ အပိတ္အဖြင့္ Tag ေပါ့ ol တို႔ ul တို႔လိုမ်ိဳးေပါ့။
dt ကေတာ့ Definition Term ပါ။တစ္နည္းအားျဖင့္ေခါင္းစဥ္ေပါ့။
dd က ေတာ့ defination ပါ။

&lt; html &gt;
&lt; head &gt;
&lt; title &gt; Defination List &lt; /title &gt;
&lt; /head &gt;
&lt; body &gt;
&lt; u &gt; Defination List &lt; /u &gt;
&lt; dl &gt;
&lt;dt&gt;HTML
&lt;dd&gt;Hyper Text Markup Language
&lt;dt&gt;Biology
&lt;dd&gt;Biology is the studying of living things.
&lt; /dl &gt;
&lt; /body &gt;
&lt; /html &gt;

![4_1516038927052.png](https://steemitimages.com/DQmTXWhSpzojiqz2QDhXDvFitCRet9DMJSEB44K1xruqoPd/4_1516038927052.png)

သူ႔မွာထူးျခားတာက dt နဲ႔ dd tag ေတြမွာအပိတ္ tag မပါတာပဲဖစ္ပါတယ္။
defination list ကအသံုးေတာ့နည္းပါတယ္။
ကဲ့ဒီေလာက္ဆိုရင္ List ေတြပါတဲ့ page တစ္ခုကိုဖန္တီးလို႔ရပါပီ။
ဒီေန႔ေတာ့ဒီေလာက္ပါပဲ။ဖတ္ေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္ ။ 😇

Written by @minthwayko
MSC - 187