HTML ကျူတိုရီရယ်

HTML ပင်မစာမျက်နှာ HTML နိဒါန်း HTML တည်းဖြတ်သူများ HTML အခြေခံ HTML အစိတ်အပိုင်းများ HTML အရည်အချင်းများ HTML ခေါင်းစီးများ HTML စာပိုဒ်များ HTML ပုံစံများ HTML Formatting HTML ကိုးကားချက်များ HTML မှတ်ချက်များ HTML အရောင်များ HTML CSS HTML လင့်ခ်များ HTML ပုံများ HTML Favicon HTML ဇယားများ HTML စာရင်းများ HTML Block & Inline HTML အတန်းများ HTML ID HTML Iframes HTML JavaScript HTML ဖိုင်လမ်းကြောင်းများ HTML Head HTML အပြင်အဆင် HTML တုံ့ပြန်မှု HTML ကွန်ပျူတာကုဒ် HTML ဝေါဟာရများ HTML ပုံစံလမ်းညွှန် HTML အကြောင်းအရာများ HTML သင်္ကေတများ HTML အီမိုဂျီများ HTML Charset HTML URL ကုဒ် HTML နှင့် XHTML

HTML ပုံစံများ

HTML ပုံစံများ HTML Form Attribute များ HTML ဖောင်ဒြပ်စင်များ HTML ထည့်သွင်းမှု အမျိုးအစားများ HTML ထည့်သွင်းခြင်း အရည်အချင်းများ HTML Input Form Attributes

HTML ဂရပ်ဖစ်

HTML Canvas HTML SVG

HTML မီဒီယာ

HTML မီဒီယာ HTML ဗီဒီယို HTML အသံ HTML ပလပ်အင်များ HTML YouTube

HTML API များ

HTML Geolocation HTML ဆွဲ/ချပါ။ HTML ဝဘ်သိုလှောင်မှု HTML ဝဘ်အလုပ်သမားများ HTML SSE

HTML နမူနာများ

HTML နမူနာများ HTML Quiz HTML လေ့ကျင့်ခန်းများ HTML လက်မှတ် HTML အနှစ်ချုပ် HTML အသုံးပြုနိုင်မှု

HTML ကိုးကားချက်များ

HTML Tag စာရင်း HTML အရည်အချင်းများ HTML ကမ္ဘာလုံးဆိုင်ရာ အရည်အချင်းများ HTML Browser ပံ့ပိုးမှု HTML ပွဲများ HTML အရောင်များ HTML Canvas HTML အသံ/ဗီဒီယို HTML Doctypes HTML အက္ခရာအစုံများ HTML URL ကုဒ် HTML လန်းကုဒ်များ HTTP မက်ဆေ့ခ်ျများ HTTP နည်းလမ်းများ PX မှ EM Converter ကီးဘုတ်ဖြတ်လမ်းများ

HTML Unordered Lists


HTML <ul>tag သည် အစီအစဥ်မထားသော (ကျည်ဆန်များ) စာရင်းကို သတ်မှတ်သည်။


အစီအစဥ်မထားသော HTML စာရင်း

<ul>အစီအစဥ်မတင်ထားသောစာရင်းသည် တဂ် ဖြင့် စတင်သည် ။ <li>စာရင်းအကြောင်းအရာတစ်ခုစီသည် တဂ် ဖြင့် စတင်သည် ။

စာရင်းပါ အရာများကို ပုံသေအားဖြင့် ကျည်ဆန်များ (အနက်ရောင် စက်ဝိုင်းငယ်) ဖြင့် အမှတ်အသားပြုပါမည်-

ဥပမာ

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


အစီအစဥ်မထားသော HTML စာရင်း - စာရင်းအကြောင်းအရာ အမှတ်အသားကို ရွေးချယ်ပါ။

CSS ၏ list-style-typeပိုင်ဆိုင်မှုကို စာရင်းအကြောင်းအရာ အမှတ်အသား၏ ပုံစံကို သတ်မှတ်ရန် အသုံးပြုသည်။ ၎င်းတွင် အောက်ပါတန်ဖိုးများထဲမှ တစ်ခုရှိနိုင်သည်-

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

ဥပမာ - Disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ဥပမာ- စက်ဝိုင်း

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ဥပမာ- ရင်ပြင်

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ဥပမာ - မရှိပါ။

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


Nested HTML စာရင်းများ

စာရင်းများကို nested လုပ်ထားနိုင်သည် (စာရင်းအတွင်းရှိစာရင်း)

ဥပမာ

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

မှတ်ချက်- စာရင်းအကြောင်းအရာ ( <li>) သည် စာရင်းအသစ်တစ်ခုနှင့် ပုံများနှင့် လင့်ခ်များကဲ့သို့ အခြားသော HTML အစိတ်အပိုင်းများ ပါဝင်နိုင်သည်။


CSS ဖြင့် အလျားလိုက်စာရင်း

HTML List များကို CSS ဖြင့် ပုံစံအမျိုးမျိုးဖြင့် ပုံစံချနိုင်သည်။

လူကြိုက်များသောနည်းလမ်းတစ်ခုမှာ စာရင်းတစ်ခုကို အလျားလိုက်ပုံစံပြုလုပ်ရန်၊ လမ်းကြောင်းပြမီနူးတစ်ခုဖန်တီးရန်ဖြစ်သည်-

ဥပမာ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

အကြံပြုချက်- ကျွန်ုပ်တို့၏ CSS Tutorial တွင် CSS အကြောင်း ပိုမိုလေ့လာနိုင်ပါသည်


အခန်းအကျဉ်းချုပ်

  • <ul>အစီအစဥ်မထားသောစာရင်းကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။
  • list-style-typeစာရင်းအကြောင်းအရာ အမှတ်အသားကို သတ်မှတ်ရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ။
  • <li>စာရင်းအကြောင်းအရာကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။
  • စာရင်းများကို nested လုပ်နိုင်ပါသည်။
  • စာရင်းတွင် အခြား HTML အစိတ်အပိုင်းများ ပါဝင်နိုင်သည်။
  • float:leftစာရင်းကို အလျားလိုက်ပြသရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ။

HTML List Tags

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

ရရှိနိုင်သော HTML တဂ်များအားလုံး၏စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။