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 သင္ခန္းစာၿပီးပါၿပီ ။
ဆက္လက္ေဖာ္ျပေပးပါမည္။
ေမတၱာျဖင္႔ - ဦးေအးမင္း 
               ၇-၅-၂၀၁၅