Html List
HTML Lists
ကျွန်တော့်တို့ Web page မှာ စာရင်းလေးတွေထည့်ချင်တဲ့အခါမျိုးကျရင် Lists တွေအကြောင်းကို နားလည်းထားမှ ဖြစ်ပါမယ်။ ဒါဆိုရင် နဲနဲလောက်တော့ လုပ်ထားမှဖြစ်မယ် ဆိုပါတော့ …။
ဒါကတော့ Unorder List ပါ။
<html> <body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>
ဒါကတော့ Order List ပါ၊ Order List ဆိုတဲ့အတိုင်း နံပါတ်စဉ်နဲ့ List လုပ်ပေးပါတယ်။
<html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html>
နောက်တစ်ခုကတော့ Definition List ပါ … ၊ Definition List ဆိုတဲ့အတွက် terms တွေကို အဓိပ္ပါယ်ရှင်းလင်းတဲ့ နေရာမျိုးတွေမှာ သုံးပါတယ်။
Definition List ရဲ့ tag ကတော့ <dl> … </dl>
Definition term ရဲ့ tag ကတော့ <dt> … </dt>
Definition Description ရဲ့ tag ကတော့ <dd> … </dd> ဆိုပြီးတော့ သတ်မှတ်ထားပါတယ်။ ရေးကြည့်ပါဦး …။
<html> <body> <dl> <dt>Coffee</dt> <dd>Black Hot Drink</dd> <dt>Milk</dt> <dd>White Cold Drink</dd> </dl> </body> </html>
ဒါကတော့ Order list နဲ့ပတ်သတ်တာတွေ ပေါ့ဗျာ …
<html> <body> <h4> Numbered list: </h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4> Letters List: </h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4> Lowercase letters list: </h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4> Roman numbers list: </h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4> Lowercase Roman numbers list: </h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html>
ဒါကတော့ Unorder List အတွက်ပါ …
<html> <body> <h4> Disc bullets list: </h4> <ul type="disc"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> <h4> Circle bullets list: </h4> <ul type="circle"> <li> Apple </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> <h4> Square bullets list: </h4> <ul type="square"> <li> Apples </li> <li> Bananas </li> <li> Lemons </li> <li> Oranges </li> </ul> </body> </html>
ဒါကတော့ Nested List လို့ ခေါ်ပါတယ် … ထွေထွေထူးထူးမဟုတ်ပါဘူး၊ List တွေကို ဆင့်ပွားလေးတွေလုပ်သွားတာပါ … List အခွဲလေးတွေပေါ့ဗျာ။
ဒါကတော့ နှစ်ဆင့်ခွဲ Nested List ပေါ့ …
<html> <body> <h4> A nested List: </h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea </li> <li>Green tea </li> </ul> </li> <li>Milk</li> </ul> </body> </html>
ဒါက Nested List ကို သုံးဆင့်ပါ …
<html> <body> <h4> A nested List: </h4> <ul> <li> Coffee </li> <li> Tea <ul> <li> Black tea </li> <li> Green tea <ul> <li> China </li> <li> Africa </li> </ul> </li> </ul> <li> Milk </li> </ul> </body> </html>
ဒါဆိုရင်တော့ List တွေ အကြောင်း တော်တော်လေး သိသွားပါပြီ … နောက်တစ်ခေါက် ကျွန်တော်တို့ လေ့လာမှာကတော့ HTML Forms ပဲဖြစ်ပါတယ် … ။
<Coming: HTML Forms>
Facebook comments:
