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 သင်ခန်းစာပြီးပါပြီ ။

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

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

               ၇-၅-၂၀၁၅

Basic HTML- LESSION (4)အဆက်

Basic HTML

LESSION (4)

4.2  Moving Fonts (လှုပ်ရှားနေသော စာလုံးများ)

Website နှင့် Blog များကို တန်ဆာဆင်ရန် လှုပ်ရှားနေသော စာလုံးများ ကိုဖန်တီးဖို့ <marquee> tag

ကိုတတ်ထားသင့်ပေသည်။ ဤသင်ခန်းစာတွင်ကျန်ရှိသော marquee(Attributes) များကိုဆက်လက်ဖော်ပြပါမည် 

Continuous scrolling text:

direction="right " ဟုဆိုလျှင် စာလုံးလေးများသည် သတ်မှတ်ထားသောဧရိယာတွင် 

ဘယ် မှညာသို့ရွေ့လျားလာပြီး သတ်မှတ်ဧရိယာဆုံးလျှင် ဘယ် မှပြန်လည်ထွက်ပေါ်လာ၍ အဆက်မပြတ်သွားနေမည်။

This marquee causes the text to scroll continuously from left to right. Once it disappears from the left, it re-appears from the left.
ကဲကြည့် ရအောင်

Code	Result
<marquee behavior="scroll" direction="right">Your scrolling text goes here</marquee>	Your scrolling text goes here=>>

Text Scrolling Upwards:

direction="up" ဟုဆိုလျှင် စာလုံးလေးများသည် သတ်မှတ်ထားသောဧရိယာတွင် 

အောက်မှအပေါ်သို့ရွေ့လျားလာပြီး သတ်မှတ်ဧရိယာဆုံးလျှင် အောက်ဖက် မှပြန်လည်ထွက်ပေါ်လာ၍ အဆက်မပြတ်သွားနေမည်။

Code	Result
<marquee behavior="scroll" direction="up">Your Upwards scrolling text </marquee>	Your Upwards scrolling text

Text Scrolling Downwards:

direction="down" ဟုဆိုလျှင် စာလုံးလေးများသည် သတ်မှတ်ထားသောဧရိယာတွင် 

အပေါ်မှအောက်သို့ရွေ့လျားလာပြီး သတ်မှတ်ဧရိယာဆုံးလျှင်အပေါ်ဖက် မှပြန်လည်ထွက်ပေါ်လာ၍ အဆက်မပြတ်သွားနေမည်။

Code	Result
<marquee behavior="scroll" direction="down">Your Downwards scrolling text </marquee>	Your Downwards scrolling text

Slide-in text:

<marquee behavior="slid" direction="left"> ဟုဆိုလျှင် စာလုံးများသည် သတ်မှတ်ဧရိယာ၏

ညာဖက်မှထွက်ပေါ်လာ၍ ဘယ်ဖက်သို့ရွေ့လျားလာပြီး ၎င်းဘယ်ဖက်အစွန်းတွင်ရပ်နားနေမည်။

This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.

Code	Result
<marquee behavior="slide" direction="left">Your scrolling text </marquee>	Your scrolling text

<marquee behavior="slid" direction="right"> ဟုဆိုလျှင် စာလုံးများသည် သတ်မှတ်ဧရိယာ၏

ဘယ်ဖက်မှထွက်ပေါ်လာ၍ ညာဖက်သို့ရွေ့လျားလာပြီး ၎င်းညာဖက်အစွန်းတွင်ရပ်နားနေမည်။

This text slides in from the right, then stays where it is. You will need to refresh this page to see the effect again.

Code	Result
<marquee behavior="slide" direction="right">Your scrolling text </marquee>	Your scrolling text

Text bouncing back and forth:

စာလုံးများ ဘယ်-ညာခေါက်တုန့်ခေါက်ပြန် သွားရန်အတွက်  behavior="alternate" ကိုအသုံးပြုမည်။

Code	Result
<marquee behavior="alternate" >Your bouncing text </marquee>	Your bouncing text

ချစ်သောပညာလိုလားအမျိုးကောင်းသား/သမီး တို့ ဒီနေရာမှာ <marquee> tag သင်ခန်းစာကိုခေတ္တ

ရပ်နားပါမယ်။ ဓာတ်ပုံများရွေ့တဲ့ <marquee> tag သင်ခန်းစာကို နောက်ပိုင်းမှာ ပေါင်းစပ်ဖော်ပြပါမယ်။

ပြဆိုခဲ့ပြီးသောသင်ခန်းစာ များကို အထပ်ထပ်ကြေညက်အောင်လေ့လာပြီး  <marquee> tag မှာ စာလုံးတွေကို အရောင်များထည့် ပြီး ပေါင်းစပ်လေ့ကျင့်ပါလို့ အကြံပြုပါရစေ။

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

 

Basic HTML- LESSION (4)

Basic HTML LESSION (4)

 Moving Fonts (လှုပ်ရှားနေသော စာလုံးများ)

                    စာလုံးလေးတွေ လှုပ်ရှား ၊ရွေ့လျားဖို့ <marquee> tag ကိုအသုံးပြုမည်။

 marquee(Attributes)
(1)Settings of the scrolling section
(a) width="pixels or %  "       for       size of the width
(b) height="pixels or % "        for      size of the height
(c) hspace="pixels "        for      horizontal space
(d) vspace="pixels "        for     vertical space
(e) bgcolor=" color code or name"  for  background color

(2)  Settings of the movement
   (a)behavior (default is scroll)
      (i) behavior="scroll  "   for  scrolling text
      (ii) behavior="slide"     for  sliding text
     (iii)behavior="alternate" for bounce back and forth

   (b) direction(default is left)
      (i)direction="left"     - it moves left (ညာမှဘယ်သို့ရွေ့သည်။)
      (ii)direction="right"  - it moves right (ဘယ်မှညာသို့ရွေ့သည်။)
      (iii)direction="up"     - it moves up (အောက် မှအပေါ် သို့ရွေ့သည်။)
      (iv)direction="down"  - it moves down  (အပေါ်မှအောက်သို့ရွေ့သည်။)

(3) loop (default is infinity) 
       loop=" number "   number of the loops

(4) scrollamount (Speed of motion) (default is 6)
    (i) scrollamount="number"
       high value = fast | low value = slow
 

ကဲ Example: တွေကြည့်ရအောင်။

Continuous scrolling text: 

အဆက်မပြတ်ရွေ့လျားနေသော စာလုံးများအတွက်  behavior="scroll"  direction=" "  ကိုအသုံးပြုပါမည်။
direction="left " ဟုဆိုလျှင် စာလုံးလေးများသည် သတ်မှတ်ထားသောဧရိယာတွင် ညာမှဘယ်သို့ရွေ့လျားလာပြီး သတ်မှတ်ဧရိယာဆုံးလျှင် ညာမှပြန်လည်ထွက်ပေါ်လာ၍ အဆက်မပြတ်သွားနေမည်။
This marquee causes the text to scroll continuously from right to left. Once it disappears from the left, it re-appears from the right.

Code	Result
<marquee behavior="scroll" direction="left"><<=Your scrolling text goes here</marquee>	<<=Your scrolling text goes here

Code ဇယားထဲက code တွေကို Notepad ပေါ် Copy ယူပြီး Save As လုပ် Run ကြည့်ပါ။

ကျန်သော direction=" " (right , up , down ) ပြောင်းပြီး Run ကြည့်ပါ။

နောက်သင်ခန်းစာမှာ ကျန်သောmarquee(Attributes)များကိုဆက်လက်ဖော်ပြပါမည်။

                                 ****************************