Basic HTML- LESSION 5 (HTML Lists)

Basic HTML

LESSION 5

HTML Lists

HTML can have Unordered lists, Ordered lists, or Description lists:

5.1  Unordered HTML Lists - The Style Attribute         

 Style                                                   Description
(a)list-style-type:none       -The list items will not be marked
(b)list-style-type:disc        -The list items will be marked with bullets (default)
(c)list-style-type:circle       - The list items will be marked with circles
(c)list-style-type:square      -The list items will be marked with squares

Unordered lists ရဲ႕ Style Attribute က အထက်ပြထားတဲ့အတိုင်း list-style-type ၄ မျိုးရှိလေရဲ့။

Unordered lists အတွက်   <ul> tag ကိုသုံးပြုမယ်။ List item တစ်ခုစီကို <li>tag သုံးပြုပါမည်။

Syntax
The <ul> tag is written as <ul></ul> with the list items nested between the start and end tags. List items are represented by the <li> element.

Eg.<ul>
         <li>Coffee</li>
           <li>Tea</li>
           <li>Milk</li>
      </ul>
 Result :

• Coffee
• Tea
• Milk

5.1(a)None:

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

   (b)Disc:

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

    (c)Circle:

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

    (d)Square:

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

အထူးမှတ်ရန် - 

 Using a type attribute <ul type="disc">, instead of <ul style="list-style-type:disc">, also works.
   

<ul style="list-style-type:disc"> လို့ရေးမဲ့အစား <ul type="disc">လို့ရေးရင်လည်းရတယ် 

Result အတူတူဖြစ်တယ်။

    ထိုနည်းတူစွာ -

<ul style="list-style-type:circle"> လို့ရေးမဲ့အစား <ul type="circle">လို့ရေးရင်လည်းရတယ်။

 <ul style="list-style-type:square"> လို့ရေးမဲ့အစား <ul type="square">လို့ရေးရင်လည်းရတယ်။

 <ul style="list-style-type:none"> လို့ရေးမဲ့အစား  ဘာမှမရေးဘဲ<ul>လို့ရေးရင်လည်းရတယ်။

  သင်ကိုယ်တိုင် လေ့ကျင့်ခန်းလုပ်ကြည့်ပါ။

5.2  Ordered HTML Lists - The Style Attribute

Ordered lists are usually ordered by numbers (1. 2. 3...), letters (A. B. C...),(a,b,c,....)and roman numerals (i. ii. iii...) etc.
      An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
     
    Syntax
    The <ol> tag is written as <ol></ol> with any number of <li> tags
    A type attribute can be added to an ordered list, to define the type of the marker:

Eg.<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 Result :

1. Coffee
2. Tea
3. Milk

Type                                    Description
type="1"      -The list items will be numbered with numbers (default)
type="A"      -The list items will be numbered with uppercase letters
type="a"       -The list items will be numbered with lowercase letters
type="I"        -The list items will be numbered with uppercase roman numbers
type="i"         -The list items will be numbered with lowercase roman numbers

Ordered HTML Lists ရဲ့ Style Attribute အနေနဲ့ အထက်ကဖော်ပြထားတဲ့အတိုင်း

Type  ၅ မျိုးရှိတယ်။

<ol> tag ကို <ul> tag ရေးသကဲ့သို့ရေးမယ်။ကဲ..ကြည့်ရအောင်။

5.2 (a)Numbers:  type="1"  ( 1,2,3,....စတဲ့ ကိန်းဂဏန်းနဲ့ဖော်ပြတဲ့အစီအစဉ်)

Code	Result
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>	Coffee Tea Milk

ဒီလိုလဲရတယ်။

Code	Result
<ol type="1" > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>	Coffee Tea Milk

(b)Upper Case: type="A"   ( A,B,C,....စတဲ့ Upper Case ဖော်ပြတဲ့အစီအစဉ်)

Code	Result
<ol type="A" > <li>Tea</li> <li>Milk</li> </ol>	Coffee Tea Milk

(c) Lower Case: type="a" ( a,b,c....စတဲ့  Lower Case နဲ့ ဖော်ပြတဲ့အစီအစဉ်)

Code	Result
<ol type="a" > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>	Coffee Tea Milk

     
 (d) Roman Upper Case: type="I" (I,II,III...စတဲ့  Roman Upper Case နဲ့ ဖော်ပြတဲ့အစီအစဉ်)

Code	Result
<ol type="I" > <li>Coffee</li> <li>Tea</li> <li>Milk</li> <li>Milo</li> </ol>	Coffee Tea Milk Milo

     
 (e)Roman Lower Case: type="i"    (i,ii,iii.စတဲ့  Roman Lower Case နဲ့ ဖော်ပြတဲ့အစီအစဉ်)

Code	Result
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> <li>Milo</li> </ol>	Coffee Tea Milk Milo

5.3  HTML Description Lists :    Definition Type
       
        The <dl> tag defines a description list.
      The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

 Syntax
The <dl> tag is written as <dl></dl> with the <dt> and <dd> elements inserted between the start and end tag.
The number of those elements will depend on the number of definition terms and descriptions in the list.

- Description Lists အတွက် <dl> tag ကိုအသုံးပြုမည်။

- definition terms(အဓိပ္ပာယ်သတ်မှတ်ချက် ခေါင်းစဉ်) အတွက် <dt> tag ကိုသုံးမည်။

-  descriptions  (ရှင်းလင်းချက်) အတွက် <dd> tag ကိုသုံးမည်။

  Example ကြည့်ရအောင်။

Code	Result
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd>   </dl>	Coffee - black hot drink Milk - white cold drink

HTML list သင်ခန်းစာပြီးပါပြီ ။

ဆက်လက်ဖော်ပြပေးပါမည်။

မေတ္တာဖြင့် - ဦးအေးမင်း 

               ၇-၅-၂၀၁၅