Myanmar Coder Guide: Unordered Lists

Sunday, December 20, 2020

Unordered Lists

Writen By Noodle

HTML Unordered Lists

HTML က < ul > tagကို unordered list လို့ ခေါ် ပါတယ်။ bulleted နဲ့ သတ်မှတ်ပါတယ်။

Unordered HTML List

Unodered listတစ်ခုက <ul> tagနဲ့ စပါတယ်။ list itemတစ်ခုစီကို <li>tagနဲ့ စပါတယ်။
List itemများကို bulletsနဲ့ default ထားပါတယ်။

Example

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

Try it yourself

Unordered HTML List - Choose List Item Marker

Cssရဲ့ list-style-type property နဲ့ list itemရဲ့ styleကို ပြောင်းလဲ အသုံးပြုနိုင်ပါတယ်။ဒီproperty မှာအောက်ဖော်ပြထားသည့်valuesကနေ သုံးနိုင်ပါတယ်။

Value	Description
disc	list itemတွေကို default အနေနဲ့ bulletပုံစံတပ်ပါတယ်။
circle	list itemတွေကို အဝိုင်း(circle )ပုံစံ တပ်ပါတယ်။
square	list itemတွေကို လေးထောင့် (square)ပုံစံ တပ်ပါတယ်။
none	list itemတွေကို ဘာမှမတပ်ပါ။

Example - Disc

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

Try it yourself

Example - Circle

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

Try it yourself

Example - Square

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

Try it yourself

Example - None

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

Try it yourself

Nested HTML Lists

Listတွေကို listအတွင်းမှာ listတွေကို စဥ်နိုင်ပါတယ်။

Example

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

Try it yourself

List itemတွေမှာ new list တစ်ခု နဲ့ အခြား HTML elements တွေ (images and links,etc...)တွေ ပါဝင်နိုင်ပါတယ်။

Horizontal List with CSS

HTML listတွေကို CSSသုံးပြီး နည်းးလမ်းအမျိုးမျိုးသုံးပြီး ပုံစံချနိုင်ပါတယ်။
အသုံးများတဲ့နည်းကတော့ navigation menuပြုလုပ်ရန်အတွက် listတွေကို horizontallyအတိုင်း ပုံစံခြင်းဖြစ်ပါတယ်။

Example

```
  <!DOCTYPE html >
```
```
  < html >
```
```
  < head>
```
```
  < style>
```
```
 ul {
```
```
    list-style-type: none;
```
```
    margin: 0;
```
```
   padding: 0;
```
```
   overflow: hidden;
```
```
  background-color: #333333;
```
```
 }
```
```
  li {
```
```
  }
```
```
 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>
```

Try it yourself

Chapter Summary

HTML ရဲ့ unordered listကိုသတ်မှတ်ရန် < ul > သုံးနိုင်ပါတယ်။
list itemတွေရဲ့ ပုံစံကို သတ်မှတ်ရန် CSSရဲ့ list style typeကို သုံးပါတယ်။
list itemတွေကို သတ်မှတ်ရန် HTMLရဲ့ < li >element ကိုသုံးပါတယ်။
Listတစ်ခုအတွင်းမှာ နောက်ထပ်listတစ်ခု စီနိုင်ပါတယ်။
List itemsတွေအတွင်းမှာ အခြား HTML element တွေ ပါဝင်နိုင်ပါတယ်။
Listတွေကို horizontallyစီရန်အတွက် CSS property ဖြစ်တဲ့ float:leftကို သူံးနိုင်ပါတယ်

HTML List Tags

Tag	ဖော်ပြချက်
< ul >	unordered listကို သတ်မှတ်ပါတယ်။
< ol >	ordered listကို သတ်မှတ်ပါတယ်။
< li >	list itemတစ်ခုကို သတ်မှတ်ပါတယ်။
< dl >	description listကို သတ်မှတ်ပါတယ်။

Web Design Tutorials

Web Development Tutorials

UI/UX Tutorials

How To

Knowledge Article

How To

HTML Tutorials

Documentation

Writer Links

Writer Data

JavaScript Tutorials

Sunday, December 20, 2020

Unordered Lists

HTML Unordered Lists

Unordered HTML List

Example

Unordered HTML List - Choose List Item Marker

Example - Disc

Example - Circle

Example - Square

Example - None

Nested HTML Lists

Example

Horizontal List with CSS

Example

Chapter Summary

HTML List Tags

No comments:

Post a Comment

All Course

HTML & CSS

JavaScript

Server Side

Programing

CSS Tutorials

Laravel Tutorials

How To

Documentation

Writer Links

Writer Data

HTML Tutorials

JavaScript Tutorial

Blog Archive

Labels