Thursday, December 17, 2015

Look Ahead ( BBC Learning )

မူလတန္းအ႐ြယ္ကေလးမ်ားမွ ဘြဲ႔ရအ႐ြယ္ထိ အျပည္ျပည္ဆိုင္ရာ အဂၤလိပ္စကားေျပာ

ေလ႔က်င္႔ႏိုင္သည္။

Sunday, May 24, 2015

Basic HTML

LESSION _ 6

HTML Links - Hyperlinks

HTML links are hyperlinks.A hyperlink is a text or an image you can click on, and jump to another document.

Web စာမျက်နှာတစ်ခု မှ အခြားစာမျက်နှာတစ်ခု သို့ပြောင်းကြည့်ရန်(သို့မဟုတ်) ဓာတ်ပုံ ၊ ဗွီဒီယိုဖိုင်များနှင့်တခြား document များကို web page တွင်ထည့်သွင်းဖော်ပြရန်၊ ရည်ညွှန်းရန် Link ကိုအသုံးပြုပါမည်။

When you move the mouse cursor over a link, two things will normally happen:
   The mouse arrow will turn into a little hand
    The color of the link element will change
By default, links will appear as this in all browsers:
    An unvisited link is underlined and blue.

Link ပါသော စာလုံးနှင့် Link မပါသော စာလုံးကို လွယ်ကူစွာခွဲခြားနိူင်ပါသည်။

ပုံမှန်အားဖြင့် Link ပါသော စာလုံးအရောင်သည်

အပြာရောင်ဖြစ်၍အောက်ဖက်တွင်မျဉ်းသားထားသည်။

the mouse cursor ဖြင့် ထောက်ကြည့်လျှင်လည်း လွယ်ကူစွာသိနိုင်ပါ၏။

စာလုံးပေါ် mouse cursor တင်ကြည့်လို့ လက်ညှိုးပုံစံပြောင်းသွားလျှင်

Link ပါသော စာလုံးပင်ဖြစ်သည်။

ဥပမာအနေနဲ့ Facebook စာမျက်နှာများတွင် လွယ်ကူစွာလေ့လာ တွေ့ရှိနိုင်ပါသည်။

Facebook စာမျက်နှာများတွင် အပြာရောင်စာလုံးများသည် Link နှင့်တကွဖြစ်သော

စာလုံးများပင်ဖြစ်သည်။

နှိပ်(Click ) လိုက်လျှင်အခြားစာမျက်နှာသို့ပြောင်းသွားမည်ဖြစ်သည်။

ဒီလို Link ပါသော စာလုံးများ ( link text ) ကို ကိုယ်တိုင်ဖန်တီးဖို့ HTML Links သင်ခန်းစာကို

စကြရအောင်။

HTML Links -

Synta

6.1 You can use the <a> tag to link text or images

In HTML, links are defined with the <a> tag:

links ကို <a> tag: ဖြင့်အောက်ပါအတိုင်းရေးပါမည်။

<a href="url">link text</a>

url = Adress of link text

Example:
link မပါသောရိုးရိုး text =>>Lwintmgmg Daily News

link ပါသော text=>> Lwintmgmg Daily News
The href attribute specifies the destination address (https://lwintmgmgdawei.blogspot.com)
Code ကို ဒီလိုရေးမယ်။

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com/">Lwintmgmg Daily News </a>	Lwintmgmg Daily News

Result မှLwintmgmg Daily News ကို နှိပ်(Click ) လိုက်လျှင် ယခုကြည့်နေသော

Web Page နေရာမှာ Lwintmgmg Daily News စာမျက်နှာပေါ်လာမည်။

(လက်တွေ့နှိပ်ကြည့်ပါ)

6.2 The target Attribute

      (1) Open the link in a new window (or tab)

Here we use target="_blank" to open the link in a new window.

       ယခုကြည့်နေသော Web Page ကိုမပြောင်းစေဘဲ window သစ် (or ) tabသစ် တစ်ခုဖြင့် ဖွင့်မယ်ဆိုရင်
                 target="_blank" ဆိုတာကိုထည့် လိုက်မယ်။

Example:

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com" target="_blank">Lwintmgmg Daily News </a>.	Lwintmgmg Daily News .

(2) Reload the new window

ပထမ link ဖြင့် new window ကိုဖွင့်ပြီး

ဒုတိယ link နှင့် တတိယ link ကို new window ပေါ်မှာ ပင်ဖွင့်မည်ဆိုလျှင်

target="myTab" ကိုအသုံးပြုမည်။

Example:

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com/" target="myTab">Lwintmgmg Daily News</a><br><a href="https://lwintmgmgmovie.blogspot.com/" target="myTab">LWINT MG MG</a><br><br /> <a href="https://lwintmgmg.blogspot.com/" target="myTab">လွင့်မောင်မောင် ၏ Diary</a><br><br />	Lwintmgmg Daily News LWINT MG MG လွင့်မောင်မောင် ၏ Diary

6.3 The title Attribute

Link Text ပေါ် mouse cursor ကိုတင်လိုက်သည်နှင့် ၎င်း Link Text နှင့်ပတ်သက်သည့်

အကြောင်းအရာကိုဖော်ပြသော စာသား ပေါ်လာစေလိုလျှင်

title Attribute title =" ရေးလိုသည့်အကြောင်းအရာ" ကိုအသုံးပြုရသည်။

Example:

Code	Result
<a title="နေ့စဉ်သတင်း" href="https://lwintmgmgdawei.blogspot.com" target="_blank">Lwintmgmg Daily News </a>.<br /><a href="http://lwintmgmg.blogspot.com/" target="_blank"title="အထွေထွေဗဟုသုတ">လွင့်မောင်မောင် ၏ Diary </a>	Lwintmgmg Daily News . လွင့်မောင်မောင် ၏ Diary .

6.4 - Image as Link

(1) It is common to use images as links:
<img src="url" >

ဓာတ်ပုံအရွယ်အစားပါအတိအကျလိုချင်တယ်ဆိုရင်တော့ width="Number" height ="Number"

ထည့်ပေးလိုက်ပါ။

ဒီလိုပါ - <img src="http:// #"width="#" height ="#" >
Example:

Code	Result
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhICYNtEWyjL7rUEYSncsBW5dF9-NRsdwtT7Xfgb5ZUEcXqhBPnCEGFTDvSpbpdWUU8guu5cEeEUVEk36tnles4WO1qFe-4OCzSBR4jzZSzOelAM4Yju6Lz8n28qgYTtY1Xh0KxeDdmSINh/s400/maungmagan4.jpg"width="150"height="110">

(2) အကယ်၍ Web page တစ်ခုကို ဓာတ်ပုံနှင့်တကွ Link ချိတ်ချင်တယ်ဆိုရင်...ဒီလိုရေးမယ်။
Eg.

Code	Result
<a href="https://lwintmgmgdawei.blogspot.com/"target="_blank><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-UMUd25v-1Wx8PIgQLHeGqxcNTkTsL-UxGCwDgP6oWSf56n8xXDWfYLp5jeN8zp6G3jg4gfDXxGvrYYwq6qN5S05S4W_1Lj7lp7bwOvYqYlWLUksvgQBUTa1ASStaEdSfFr89z1H-Bz0/s1600/LDN+banner2.png" width="150" title=""alt="Photo of Lwintmgmg"></a>

-မှတ်ရန် - ဓာတ်ပုံရဲ့ အရွယ်အစားကိုဖော်ပြရာမှာ height မပါဘဲ width ကိုသာရေးလျှင်လည်းရတယ်။

++++++++++++++++++++++++++++++++++++++++++

ချစ်သော ပညာလိုလားမိတ်ဆွေများ....Blogger တွင် website တစ်ခုဖန်တီးရန် Html ကိုအခြေခံအားဖြင့် ဤမျှလောက် ကျွမ်းကျင်တတ်မြောက်လျှင် ပင် အတော်အဆင်ပြေပါလိမ့်မည်။

ကျန်နေသေးသော Html သင်ခန်းစာများကို အချိန်ရလျှင်ရသလို ဆက်လက်ဖော်ပြပေးပါမည်။

နောက်သင်ခန်းစာတွင် Blogger တွင် website ဖန်တီးပုံကို ဆက်လက် ဖော်ပြပေးပါမည်။

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

၂၄- ၅ -၂၀၁၅ တနင်္ဂနွေနေ့ ည၁၁နာရီ၂၀မိနစ်

Thursday, May 7, 2015

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 :

Coffee
Tea
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

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

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

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

၇-၅-၂၀၁၅

Tuesday, May 5, 2015

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 မှာ စာလုံးတွေကို အရောင်များထည့် ပြီး ပေါင်းစပ်လေ့ကျင့်ပါလို့ အကြံပြုပါရစေ။

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

Monday, May 4, 2015

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)များကိုဆက်လက်ဖော်ပြပါမည်။

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

Saturday, May 2, 2015

Basic HTML - LESSION (3) အဆက်

Basic HTML

LESSION (3) အဆက်

HTML Font Style

- စာလုံးထူထူ(Bold ) အတွက် Tag <b> ကိုအသုံးပြုမယ်။

- စာလုံးစောင်း(Italic) အတွက် Tag <i> ကိုအသုံးပြုမယ်။

- စာလုံးအောက်မှာUnderline ဆွဲမယ်ဆိုရင် Tag <u>ကိုအသုံးပြုမယ်။

Example

<p><b>This is Bold</b></p>
<p><i>This is Italic</i></p>
<p><b><i>This is Bold and Italic</i></b></p>
<p><u><b><i>This is Bold and Italic</i></b></u></p>
Result
This is Bold
This is Italic
This is Bold and Italic
This is Bold and Italic

HTML Body Style

Web page ရဲ့ နောက်ခံအရောင်ကို ပြောင်းလဲလုပ်လိုတဲ့အခါ အသုံးပြုပါမယ်။

Hex code နဲ့ရေးမယ်ဆိုရင် "color:#hex code" လို့ရေးမယ်။

# ပါမှရမယ်ဆိုတာ သတိထားပါ။

Colour Hex code ကို http://www.w3schools.com/html/html_colors.asp
မှာ သွားကြည့်ပါ။

Example(1)
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
** အထက်ပါ code ကို Notepad ပေါ် ကူး၊Save as လုပ်ပြီး သင်ကိုယ်တိုင် Result ထုတ်ကြည့်ပါ

Example(2)
<body style="background-color:#606060 ">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
** အထက်ပါ code ကို Notepad ပေါ် ကူး၊Save as လုပ်ပြီး သင်ကိုယ်တိုင် Result ထုတ်ကြည့်ပါ။
** Save as လုပ်နည်းမေ့သွားလျှင် LESSION (1)မှာပြန်ကြည့်ပါ။

HTML Line Style

ရေညီမျဉ်း(horizontal line) ကို Tag <hr> နဲ့ရေးတာ အရှေ့မှာပြခဲ့ပြီးဖြစ်တယ်။

End Tag ကိုရေးဖို့မလိုပါ။

မျဉ်းကိုအရောင်ထည့်မယ်ဆိုရင် ဒီလိုရေးမယ်။

line 1<hr style="color:red;">
line 2<hr style="color:#990000">

Result
line 1

line 2

LESSION (3) ကိုဒီမှာရပ်နားပါမယ်။

နောက်သင်ခန်းစာမှာရွေ့လျားနေတဲ့ စာလုံးပြေး(Moving Fonts)တွေကိုဆက်လက်ဖော်ပြပါမယ်။

LESSION (1)(2)(3) ကိုကြေညက်အောင်လေ့ကျင့်ပါ။

@@@@@@@@@@@@@@@@@@@@@@@@@@@

ဆက်စပ် သင်ခန်းစာများ
(1) LESSION (1) (2) LESSION (2) (3) LESSION (3)

Sunday, April 26, 2015

Basic HTML (3)

                                               Basic HTML
                                                    Lesson (3)
                                                   ===========

ဒီသင်ခန်းစာမှာ စာလုံး အရောင် ၊အမျိုးအစား၊ အရွယ်အစား ၊တို့ကိုဖော်ပြမဲ့

html code ရေးနည်းကိုဖော်ပြပါမည်။

HTML Styles

The HTML Style Attribute

The HTML style attribute has the following syntax:

style="property:value"

(i) HTML Text Color

စာလုံး(Text) အရောင်အတွက် color property ကိုအသုံးပြုရပါမယ်။

The color property defines the text color to be used for an HTML element:

Example

<h3 style="color:blue">(i) ‌ခေါင်းစဉ်ရဲ့စာလုံးအရောင် သည်အပြာရောင်ဖြစ်သည်။</h3>
<p style="color:red">(ii)စာပိုဒ်ရှိစာလုံးများ၏အရောင်သည် အနီရောင်ဖြစ်သည်။</p>

Result တွင် စာလုံးအရောင်ကိုသတိပြုပါ။

(i)ခေါင်းစဉ်ရဲ့စာလုံးအရောင် သည်အပြာရောင်ဖြစ်သည်။

(ii)စာပိုဒ်ရှိစာလုံးများ၏အရောင်သည် အနီရောင်ဖြစ်သည်။

ဒီနေရာမှာ html style မှာရေးတဲ့ ကာလာမှာ u မပါဘူးနော။

color: ဆိုတာသတိပြုပါ။

ကျန်တဲ့အရောင် များကိုလည်းထည့်ကြည့်ပါ။

ခရမ်းရောင်၊အပြာနု(lightblue)၊အစိမ်းရောင်၊အစိမ်းနု(lightgreen) .....

စသည်ဖြင့်ပြောင်းထည့်ကြည့်ပါ။

- အရောင်စပ်များကိုတော့ RGB (or) Hexa code များနဲ့သာ အဆင်ပြေပါတယ်။

အဲဒီCode တွေကို Photoshop မှာလေ့လာလို့ရပါတယ်။

ဒီနေရာမှာလည်း လေ့လာနိုင်ပါတယ်။

http://www.w3schools.com/tags/ref_colorpicker.asp

http://www.pagetutor.com/common/bgcolors1536.html

http://www.colorsift.com/

Colour code များလေ့လာရန်အောက်ကအနီရောင်ခလုတ်ကိုနှိပ်ပါ

(ii) HTML Fonts

စာလုံး(Text) ပုံစံ အတွက် font-family property ကိုအသုံးပြုရပါမယ်။

The font-family property defines the font to be used for an HTML element:
Example

<h3 style="font-family:verdana">(i) ခေါင်းစဉ်၏ စာလုံးအမျိုးအစားသည် verdana ဖြစ်သည်။</h13>
<p style="font-family:courier">(ii)ဤစာပိုဒ်အတွင်းရှိစာလုံးအမျိုးအစားသည် courier ဖြစ်သည်။</p>

Result တွင် စာလုံးအမျိုးအစား ကိုသတိပြုပါ။

(i)ခေါင်းစဉ်၏ အမျိုးအစားသည် verdana ဖြစ်သည်။

(ii)ဤစာပိုဒ်အတွင်းရှိစာလုံးအမျိုးအစားသည် courier ဖြစ်သည်။

အခြားစာလုံးအမျိုးအစားများ Arial , Book Antiqua , Cambria , Cataneo BT ,

Century Gothic, Comic Sans MS ,Zawgyi-One

တို့ပြောင်းထည့် ပြီး Run ကြည့်ပါ။

(iii) HTML Text Size

စာလုံးအရွယ်အစားအတွက် font-size property ကိုအသုံးပြုပါမည်။

value အတွက် % သို့မဟုတ် px ကိုအသုံးပြုပါမည်။

The font-size property defines the text size to be used for an HTML element:

Example

<h1 style="font-size:100%">(i)စာလုံးအရွယ်အစား 100% ဖြစ်သည်။</h1>
<p style="font-size:16px">(ii)(ii)စာလုံးအရွယ်အစား 16px ဖြစ်သည်။။</p>

Result

(i)စာလုံးအရွယ်အစား 100% ဖြစ်သည်။

(ii)စာလုံးအရွယ်အစား 16px ဖြစ်သည်။

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

style property များကို ပေါင်းစပ်ရေးမည်ဆိုလျှင် property တစ်ခုနှင့်တစ်ခုအကြားတွင် “ ; ” ကိုခြားပေးရမည်။

ဥပမာကြည့်ရအောင်-
Example

<h3 style="font-size:16px;color:red;font-family:verdana">(i)This is a heading</h3>
<p style="font-size:32px;color:lightgreen;font-family:Arial ">(ii)This is a paragraph.</p>
<p style="font-size:14px;color:green;font-family:Comic Sans MS">(iii)This is a paragraph.</p>
<p style="font-size:20px;color:blue;font-family:Cataneo BT ">(iv)This is a paragraph.</p>
<p style="font-size:24px;color:violet;font-family:Comic Sans MS">(v)This is a paragraph.</p>

Result တွင် စာလုံးအရောင်၊ အမျိုးအစား နှင့် အရွယ်အစားတို့ကိုသတိပြုပါ။

(i)This is a heading

(ii)This is a paragraph.

(iii)This is a paragraph.

(iv)This is a paragraph.

(v)This is a paragraph.

The HTML Style Attribute များကိုဆက်လက်ဖော်ပြပါမည်။

ဦးအေးမင်း(အောင်မြေ)

Thursday, April 23, 2015

Basic Html (2)

Lesson (2)
(2) HTML Paragraphs <p>

စာပိုဒ် ခွဲတဲ့အခါ HTML Paragraphs ကိုသုံးမယ်။

The HTML <p> element defines a paragraph.

စာပိုဒ်ကို <p> နဲ့ </p> အကြားရေးမယ်။

Example

<p>This is a paragraph</p>

<p>This is another paragraph</p>

- ဒီနေရာမှာ စာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။

- ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။

Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။

ကဲ လက်တွေ့ကြည့်ရအောင်.....

<p>HTML is a markup language for describing web documents (web pages).
  HTML stands for Hyper Text Markup Language.
    A markup language is a set of markup tags.
   HTML documents are described by HTML tags.
     </p>
<p>- ဒီနေရာမှာစာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။
 -ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။
  -Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။</p>

အပေါ်က Code တွေကို Notepad ပေါ် Copy ယူပြီး ။ Save as လုပ်ပါ။

Save as လုပ်နည်းကိုပြန်ပြောမယ်။

file name = prg.html (prg နေရာမှာကြိုက်တာရေး။ .html ကတော့ ပြောင်းလို့မရ)

Save as type = All Files

Encoding= Unicode ကို ယူမယ်(မြန်မာစာလုံးပါနေ၍)

file ကိုsave ထားတဲ့နေရာမှာရှာပြီး Run ကြည့် ။

--ဒီလိုပေါ်ပါမယ်။

ပထမစာပိုဒ်က ဝါကျ (၄)ကြောင်းစလုံးဆက်နေသလို ဒုတိယစာပိုဒ်က ဝါကျ(၃)ကြောင်းလည်း တဆက်တည်းဖြစ်နေပါလိမ့်မယ်။

HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language.A markup language is a set of markup tags.HTML documents are described by HTML tags.

- ဒီနေရာမှာ စာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။- ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။

ကိုယ်လိုချင်တာက ဝါကကျတစ်ကြောင်းချင်းစီဆိုရင် ဝါကျတစ်ကြောင်းဆုံးရင်Enter ခေါက်တယ်မဟုတ်လား။အဲဒီ Enter ခေါက်တဲ့နေရာမှာ teg<br>ကို ထည့်ယုံလေးပါ။

ကြည့်ရအောင်..

<html>
<p>HTML is a markup language for describing web documents (web pages).<br>
    HTML stands for Hyper Text Markup Language.<br>
    A markup language is a set of markup tags.<br>
    HTML documents are described by HTML tags.<br>
     </p>
<p>- ဒီနေရာမှာ စာပိုဒ်ဆိုတော့ စာတစ်ပိုဒ်မှာ ဝါကျ တစ်ကြောင်းထက်ပိုလာမယ်။<br>
- ရိုးရိုးစာရိုက်ရင် Enter ခေါက်ပြီး အောက်ဖက် နောက်တစ်ကြောင်းကိုပြန်စတယ်။<br>
Code နဲ့ ဆိုရင် <br> ကိုသုံးမယ်။ Tag <br>မှာ End teg သုံးဖို့မလို။<br>
</p>
</html>

အပေါ်ကCode ကို Notepad ပေါ် Copy ယူပြီး ။ Save as လုပ်ပါ။ Run ကြည့် ။

မှတ်ရန် - teg <br> တစ်ခုဟာ Enter တစ်ကြိမ်ခေါက်တာနဲ့ညီမျှတယ်။

==============================================
(၃) Html Horizontal Line <hr>

The HTML <hr> element defines a horizontal line .

- Teg <hr> မှာလည်း End teg </hr> ထည့်ရန်မလို။

ရေညီမျည်းတစ်ကြောင်း အတွက် <hr> တစ်ခုပါ။

ကဲ ..ကိုယ်တိုင်လက်တွေ့ Code ရေးပြီး လေ့ကျင့်လိုက်ပါ။

ဦးအေးမင်း(23-4-2015)

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

Tuesday, April 21, 2015

Basic Html Codes

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

အာသီသစကား

Blog နှင့် Web Site များ ဖန်တီးရေးသားနိုင်ဖို့ Google မှထောက်ပံ့ပေးသည့် Blogger တို့ကဲ့သို့သောအဆင်သင့်ပြု လုပ်နိုင်သော Server ပေါင်းများစွာရှိ၏ ။

သို့သော် မိမိ၏ Blog နှင့် Web Site များကို မိမိလိုချင်သည့်ပုံစံရရန်အတွက်မူ Html code ကို အခြေခံမျှ နားလည် တတ်ထားသင့်ပေ၏။

တခြားတိုင်းနှင့်ပြည်နယ်များတွင်တော့မပြောတတ်။ ထားဝယ်ကွန်ပြူတာတက္ကသိုလ်မှာ ၂၀၀၃/၂၀၀၄ ခုနှစ်များတွင်တက်ခဲ့သော ကျောင်းသားများ Html ကိုတော့ သင်ပါရဲ့ အမှန်တကယ် Run လို့မရဘူးဆို့လို့.. ဒီ Post ကို ရေးသားတင်ဆက်ခြင်းဖြစ်ကြောင်းပါ။

ဤသင်ခန်းစာဖြင့် တစုံတစ်ယောက်ကို အကျိုးဖြစ်ထွန်း စေခဲ့လျှင်ဖြင့် ရေးရကျိုးနပ်ပေပြီ။

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Basic Html (Hyper Text Markup Language )

HTML မိတ်ဆက်

- HTML stands for Hyper Text Markup Language

Html = Hyper Text Markup Language

Code များရေးဖို့ လိုအပ်သောအရာများ

====================

(၁) Notepad (ကွန်ပြူတာမှာဒီလိုရှာ =>Start > All Progams > Accessories > Notepad)

(၂) Web Browser များ ( eg. Inter Explorer , Mozilla Firefox ...စသည်ဖြင့်)

ဒါတွေက ကွန်ပြူတာwindow တွေမှာပါပြီးသား။

==============================

HTML document တွေကို HTML tags များ နဲ့ ဒီလိုဖော်ပြပါတယ်။

<tagname>content</tagname>

contentနေရာမှာ မိမိကြိုက်တာရေးသွင်း

ဒီနေရာမှ အချိန်တိုအတွင်း Blogger ကိုအသုံးပြုပြီး Web/Blog ဖန်တီးနိုင်ဖို့ Web Page အပေါ်ခြေခံထားရှင်းလင်းမှာဖြစ်တယ်။

Tagname အမျိုးမျိုး

-----------------------

1 - The DOCTYPE declaration defines the document type to be HTML- <!DOCTYPE html>

2- The text between <html> and </html> describes an HTML document

3 - The text between <head> and </head> provides information about the document

4 - The text between <title> and </title> provides a title for the document

5 - The text between <body> and </body> describes the visible page content

6 - The text between <h1> and </h1> describes a heading

7 - The text between <p> and </p> describes a paragraph.....

စသည်ဖြင့် Tag ပေါင်းများစွာရှိပါတယ်။

အထက်က Tagname တွေမှာ (1)(2)(3)(4) က Web page ပေါ်မှာ မမြင်ပါ။

ဥပမာ -

The head Element

head element မှာတော့ page နဲ့ဆိုင်တဲ့ information တွေပါပါမယ်။ အဲဒါတွေကို page မှာတော့ ပြပေးမှာ မဟုတ်ပါဖူး။

browser နဲ့ search engine spider တွေအတွက် information တွေပါ။

ဥပမာ title element ဆိုရင် browser ရဲ့ title bar မှာ page ရဲ့ ခေါင်းစဉ်ကိုပြပေးမှာပါ။

The title Element အပေါ်က code မှာ <title>Untitled Document</title> လို့ပါပါတယ်။

အဲလိုဆိုရင် browser ရဲ့ title bar မှာ “Untitle Document” လို့ ပြပေးမှာပါ။

ပုံတွင်ရှု-

ကဲ သင်ခန်းစာကိုစလိုက်ကြရအောင်

===================================================

သင်ခန်းစာ(၁)

ဒီသင်ခန်းစာမှာ စာလုံး(Text ; font ) တွေနဲ့ ဆိုင်တဲ့ Tag တွေအကြောင်းစပြောမယ်။

- Html Elements များ(Words) ကို Start tag <tagname> နဲ့ End teg</tagname>

အကြားရေးရမယ်။

<tagname>content</tagname>

<p>My first HTML paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

(၁)HTML Headings ( ခေါင်းစဉ်များအတွက် စာလုံးအရွယ်အစားHtml)

------------------------------------------------------------------------------

HTML headings များအတွက် <h1> ,<h2> ,<h3> ,<h4> ,<h5> ,<<h6>

ဆိုတဲ့ tags ၆ မျိုးရှိပါတယ်။

<h1> teg က font size အကြီးဆုံးဖြစ်ပြီး <h6> teg ကအငယ်ဆုံးဖြစ်ပါတယ် ။

Heading Code တွေကို ဒီလိုရေးမယ်။

<h1>Heading h1 </h1>

<h2>Heading h2 </h2>

<h3>Heading h3 </h3>

<h4>Heading h4 </h4>

<h5>Heading h5 </h5>

<h6>Heading h1 </h6>

ကဲ..Notepad ပေါ်မှာ ဒီလိုလေးချရေးလိုက်မယ်

<!DOCTYPE html>
<html>
<body>

<h1>
This is heading 1</h1>
<h2>
This is heading 2</h2>
<h3>
This is heading 3</h3>
<h4>
This is heading 4</h4>
<h5>
This is heading 5</h5>
<h6>
This is heading 6</h6>
</body>
</html>

အောက်ဖက်ညာထောင့် ကို ဆွဲယူ၍ Box ကိုချဲ့ထုတ်နိုင်သည်။

ပြီးရင် file ကို Save As လုပ်မယ်။ Web Browser နဲ့ Run မှာဆိုတော့ ဒီအပိုင်းကအရေးကြီးဆုံးအပိုင်းဖြစ်တယ်။

= html file Save As လုပ်နည်း =

File > Save As အဆင့်ဆင့် ကလစ်တဲ့အခါ Save As box ပေါ်လာမယ်။

File ကိုရှာရလွယ်အောင် Desktop ပေါ်မှာ Save ပါ ။

ဒီBox မှာ File name: ကို name.html (name နေရာမှာ နှစ်သက်ရာအမည် ။ အမည်နောက်မှာ dot html " .html "ဖြစ်ပါစေ )

Save as type : ကို All Files မှာထား ။

Encoding: UTF8 မှာထား။

သို့သော် မြန်မာစာလုံးတွေပါလာရင်တော့ Unicode ကိုရွေး။

ကဲ ..Save ကို နှိပ်ချလိုက်တော့။ Result ကိုကြည့်ဖို့ Files Save ထားတဲ့ Desktop ပေါ်မှာလိုက်ရှာ။

Mozilla Firefox browser သို့မဟုတ် Chrome browser icon နဲ့ တွေ့ ရမယ် ။

ကဲ ဒီ icon ကိုဖွင့်လိုက် ဒီလိုတွေ့ရမယ် ။

Pages

Video Category

Thursday, December 17, 2015

Sunday, May 24, 2015

Basic HTML

LESSION _ 6

HTML Links - Hyperlinks

HTML Links -

Synta

6.1 You can use the <a> tag to link text or images

6.2 The target Attribute

(2) Reload the new window

6.3 The title Attribute

6.4 - Image as Link

Thursday, May 7, 2015

Basic HTML

LESSION 5

HTML Lists

Tuesday, May 5, 2015

Basic HTML

LESSION (4)

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

Continuous scrolling text:

Text Scrolling Upwards:

Text Scrolling Downwards:

Slide-in text:

Text bouncing back and forth:

Monday, May 4, 2015

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

Continuous scrolling text:

Saturday, May 2, 2015

Sunday, April 26, 2015

(i)ခေါင်းစဉ်ရဲ့စာလုံးအရောင် သည်အပြာရောင်ဖြစ်သည်။

Colour code များလေ့လာရန်အောက်ကအနီရောင်ခလုတ်ကိုနှိပ်ပါ

(i)ခေါင်းစဉ်၏ အမျိုးအစားသည် verdana ဖြစ်သည်။

(i)စာလုံးအရွယ်အစား 100% ဖြစ်သည်။

(i)This is a heading

Thursday, April 23, 2015

Tuesday, April 21, 2015

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6