My Note Book

MY NEW BLOG IS HERE

wlo — Sat, 12 Jun 2010 10:26:06 +0000

WEB TUT web development tutorial for myanmar

Order list

wlo — Thu, 01 Apr 2010 17:27:52 +0000



order list



Introduction
Objectives
Conclusion

Order list ကလည္း Unorder list နဲ႔ သိပ္မကြာလွပါဘူး။ သူက default အေနနဲ႔ 1., 2., … ဆိုၿပီးေပၚတာကိုေတြ႔ရမွာပါ။ ဒါေတြအျပင္

decimal (1,2,3)

lower roman (i, ii, iii)

upper roman (I, II, III)

lower alpha (a, b, c)

upper alpha (A, B, C)

တို႔ကိုသံုးလည္းရပါတယ္။ ေအာက္မွာ Example ျပထားပါတယ္။



order list



Chapter One
Chapter Two
Chaper Three



Chapter One
Chapter Two
Chaper Three

Output:

Chapter One
Chapter Two
Chaper Three

Chapter One
Chapter Two
Chaper Three

ဘယ္ကစမယ္ဆိုတာကို start attribue ေလးနဲ႔ျပလို႔ရပါတယ္။



order list



Chapter One
Chapter Two
Chaper Three



Chapter One
Chapter Two
Chaper Three

Output

Chapter One
Chapter Two
Chaper Three

Chapter One
Chapter Two
Chaper Three



order list



Chapter One
Chapter Two

Part A
Part B
Part C

Chapter Three

ဒါကေတာ႔ order list နဲ႔ unorder list ကိုတြဲသံုးထားတာပါ။

Unorder List

wlo — Sat, 27 Mar 2010 10:05:09 +0000



Unorder List





    HTML
    CSS
    JavaScript

Ourput:

HTML
CSS
JavaScript

ဒါကေတာ႔ unorder list ပါ။ list ေရွ႕မွာ အစက္ေလးေတြပါတာေတြ႕ရမွာပါ။ အစက္ေလးေတြကို ပံုစံေျပာင္းလို႔ရသလို မထည့္ရင္လည္းရပါတယ္။



Unorder List





    HTML
    CSS
    JavaScript



    HTML
    CSS
    JavaScript



    HTML
    CSS
    JavaScript



    HTML
    CSS
    JavaScript

Output:

HTML
CSS
JavaScript

HTML
CSS
JavaScript

HTML
CSS
JavaScript

HTML
CSS
JavaScript

ပထမဆံုး disc ဆိုတဲ့အမ်ိဳးအစားက default ျဖစ္ပါတယ္။ ေနာက္ဆံုးတစ္ခု ကေတာ႔ ဘာမွမထည့္ခ်င္ရင္သံုးေပါ႔။



Nested





    HTML
        
            Heading tag
            Unorder List
                
                    disc
                    circle
                    square
                
            
            Order List
        
    
    CSS
    JavaScript

Output:

HTML
- Heading tag
- Unorder List
  - disc
  - circle
  - square
- Order List
CSS
JavaScript

ဒါကေတာ႔ အဆင့္ဆင့္ list လုပ္တဲ့ပံုစံေလးေပါ႔။ ေသခ်ာၾကည့္ရင္နားလည္မွာပါ။

blockquote tag

wlo — Sat, 27 Mar 2010 09:55:51 +0000

blockquote

The line from Plato to St. Augustine to John Calvin links the thoughts of each. Calvin's theology is rooted deeply in Greek philosophy and today's Calvinists thank Plato for their beliefs. As Dr. Hill states,

"First we must see the origin. Immutability means unchanging. This is the basis for many of the tenets of Calvinistic doctrine. But, where did the idea of immutability come from? The answer is Plato. "

Output:

The line from Plato to St. Augustine to John Calvin links the thoughts of each. Calvin’s theology is rooted deeply in Greek philosophy and today’s Calvinists thank Plato for their beliefs. As Dr. Hill states,

“First we must see the origin. Immutability means unchanging. This is the basis for many of the tenets of Calvinistic doctrine. But, where did the idea of immutability come from? The answer is Plato. “

blockquote tag က စာပိုဒ္ရဲ႕ ဘယ္ဖတ္မွာေရာ ညာဖတ္မွာ ပါ space ေတြထားေပးထားတာေတြ႔ရမွာပါ။

CSS Introduction

wlo — Fri, 26 Mar 2010 07:24:04 +0000

Html code ေတြနဲ့ဘဲ web site ေတြကိုတည္ေဆက္ရမယ္ဆို code ေတြ႐ႈပ္ပြၿပီးေတာ႔ သိပ္မလွပတဲ့ site ေတြဘဲ ထြက္ပါလိမ့္မယ္။ css ကို သံုးျခင္းျဖင့္ဒါေတြကိုျပဳျပင္ႏိုင္ပါတယ္။
ကၽြန္ေတာ္တို႔ css ကိုသံုးၿပီး html tag ေတြကို modify လုပ္လို႔ရပါတယ္။ ဒါ႔အျပင္ ကၽြန္ေတာ္တို႔ css style တစ္ခုကိုတစ္ခါေရးၿပီးတာနဲ့ ဒါကို အၿမဲေခၚသံုးလို့ရပါတယ္။ ဥပမာအားျဖင့္ သင္က html headign tag h1 ကို css သံုးၿပီး h1 ကို အျပာေရာင္ထားမယ္။ ေနာက္အလယ္မွာေပၚမယ္လို႔ css နဲ႔ တစ္ခါျပဳျပင္လိုက္တာနဲ႔ h1 ကိုသံုးလိုက္တာနဲ႔ အဲဒီအခ်က္ေတြက သံုးတိုင္းပါလာမွာပါ။ ထပ္ျပဳျပင္စရာမလိုေတာ႔ပါဘူး။ ေနာက္ၿပီး h1 ကို ကၽြန္ေတာ္တို႔ အနီေျပာင္းခ်င္တယ္ဆိုရင္လည္းတစ္ေနရာထဲမွာျပင္လိုက္႐ုံနဲ့ ရပါတယ္ site တစ္ခုလံုးမွာရွိတဲ့ h1 tag ေတြကို ကုန္လိုက္ျပင္စရာမလိုေတာ႔ဘူး။ ဒါဟာ site ကိုျပင္တဲ့ေနရာမွာ လြယ္ကူေစပါတယ္။ အဲဒီလိုဘဲ အျခား html tag ေတြအားလံုးကိုလည္း ျပဳျပင္ႏိုင္ပါတယ္။ html ကေတာ႔တစ္ခါသံုးတစ္ခါေရးေနရေတာ႔ code ေတြကိုမ်ားျပား႐ႈပ္ပြေစပါတယ္။

ကၽြန္ေတာ္အရင္ဆံုး css ကို html နဲ႔ေပါင္းစပ္တဲ့ နည္းလမ္း 3 မ်ိဳးကို ေဖၚျပလိုပါတယ္။

1. Embedded Style



Embedded Style





Heading h1 modify with css

ဒီ example မွာ css style ကို html ဖိုင္ထဲမွာပဲ ေရးထားတာေတြ႔မွာပါ။

2.External Style Sheet



External Style Sheet





Heading h1 modify with css

ဒီ code ေတြကို notepad မွာ႐ုိက္ၿပီး html extension နဲ႔ သိမ္းလိုက္ပါ။ ၿပီးရင္ေတာ႔ notepad အသစ္ထပ္ယူလိုက္ပါ။ ၿပီးရင္ေအာက္က css code ေတြကို႐ုိက္ၿပီး style.css အမည္နဲ႔သိမ္းလိုက္ပါ။

h1 {
font: Arial, Helvetica, sans-serif;
color: #00CC00;
}

ကၽြန္ေတာ္တို႔ css file ကို ဒီ html ဖိုင္နဲ႔ folder တစ္ခုထဲမွာ ထားၿပီး save ရပါမယ္။ ဒါဆိုရင္ေတာ႔ ကၽြန္ေတာ္တို႔ html ဖိုင္ဟာ style.css ဖိုင္က css properties ေတြကိုယူသံုးၿပီးသားျဖစ္ သြားပါၿပီ။
external css file ကို link ခ်ိတ္တဲ့ေနရာမွာ ေအာက္ပါအတိုင္းလည္း ခ်ိတ္ဆက္အသံုးျပဳ ႏိုင္ပါတယ္။

3.Inline Style Rule



Inline Style




Heading h1 modify with css

CSS Structure

css ရဲ႔ syntax မွာအပိုင္း ၃ ပိုင္းပါပါတယ္။ selector, property, value တို႔ျဖစ္ပါတယ္။

h1
{
color: blue;
}

ဒီ example မွာ h1 က selector ပါ။ color ကေတာ႔ property ေပါ႔။ blue ကေတာ႔ value ပါ။ selector ကိုေရးၿပီးတာနဲ႔ property နဲ႔ value ကို တြန္႔ကြင္းထဲမွာထားၿပီးေရးရပါမယ္။ property နဲ႔ value ၾကားမွာေတာ႔ full colon ခံၿပီးမွ value ကုိ ထည့္ရပါမယ္။ value အားလံုးထည့္ၿပီးရင္ေတာ႔ semicolon နဲ႔ အဆံုးသတ္ရပါမယ္။ ၿပီးေတာ႔ value ကို ႏွစ္ခုသံုးခု ထည့္မယ္ဆိုရင္ေတာ႔ တစ္ခုနဲ့တစ္ခုၾကားမွာ comma ခံေရးရပါတယ္။ property ကိုလည္း အမ်ားႀကီး ထည့္ႏိုင္ပါတယ္။ property တစ္ခုၿပီးလို႔ semicolon နဲ႔ အဆံုးသတ္ၿပီးတာနဲ႔ ေနာက္တစ္ခုကို ဆက္ေရးႏုိင္ ပါတယ္။ ေအာက္မွာ နမူနာျပထားပါတယ္။

h1
{
color: blue;
font-family: Arial;
}

font tag

wlo — Thu, 25 Mar 2010 10:13:08 +0000

ကၽြန္ေတာ္တို႔ browser မွာ ေပၚေစခ်င္တဲ့ font ကို font tag နဲ႔ ေျပာင္းလို႔ရပါတယ္။ font tag မွာ သူခ်ည္းဘဲေတာ႔ font ကို ေျပာင္းလို႔မရပါဘူး။ face ဆိုတဲ့ attribute သံုးရပါတယ္။



Font tag




This is Arial font.

Output:
This is Arial font.

ဒီ example မွာ face ဆိုတဲ့ attribute မွာ font သံုးမ်ိဳးထည့္ေပးထားတာေတြ႔ရမွာပါ။ ဘာလို႔လည္းဆိုေတာ႔ ကၽြန္ေတာ္တို႔ သံုးခ်င္တဲ့ font ဟာ user ရဲ႔ စက္မွာ ရွိခ်င္မွရွိမွာပါ။ ဒါေၾကာင့္ ပထမဆံုးကၽြန္ေတာ္တို႔သံုးမယ့္ font ကိုထည့္ၿပီး အဲဒါမရွိဘူးဆိုရင္ေတာ႔ ဒုတိယ font ကိုသံုးမွာပါ။ အဲဒီသံုးခုလံုးမွ မရွိရင္ေတာ႔ browser ကေရႊးခ်ယ္ေဖာ္ျပပါလိမ့္မယ္။



Font tag




This is font size 5.
This is relative font size.

Output:
This is font size 5.
This is relative font size.

ဒီ example မွာ font ရဲ႔ size ကို ေျပာင္းလဲေပးႏုိင္တာေတြ႔ရပါလိမ့္မယ္။ အဲဒီလိုေျပာင္းတဲ့ေနရာမွာ ႏွစ္မ်ိဳးရွိပါတယ္။ မူရင္း font size ကို အေပါင္း၊ အႏႈတ္လုပ္ေပးႏုိင္သလို ကိုယ္လိုခ်င္တဲ့ size ကို တိုက္႐ုိက္ထည့္ေပးႏုိင္ပါတယ္။ အဲဒီလို အေပါင္း။ အႏႈတ္လုပ္တဲ့ေနရာမွာ မူရင္း size က 3 ျဖစ္ပါတယ္။ example မွာဆိုင္ရင္ +2 လို႔ေရးထားတဲ့ အတြက္ size က 5 ျဖစ္သြားပါတယ္။ မူရင္း font size ကို ဆိုၿပီး ေျပာင္းေပးႏုိင္ပါတယ္။ ဒါေပမယ့္ Firefox မွာေတာ႔သူက affect မျဖစ္ပါဘူး။ font size ကိုတိုက္ရုိက္ထည့္တဲ့ေနရာမွာ 7 အထိထည့္လို႔ရပါတယ္။



Font tag




This is font blue.

Output:
This is font blue.

ဒီ example မွာေတာ႔ font မွာ color ထည့္ထားတာေတြ႔ရမွာပါ။

sub and sup tag

wlo — Thu, 25 Mar 2010 09:51:14 +0000



sub and sup




H₂O
2²=4

ဒီ example ေလးကို run ၾကည့္ရင္ေတာ႔ ဒီလို H₂O 2²=4 ေပၚပါလိမ့္မယ္။ နားလည္လြယ္ပါတယ္။

pre tag

wlo — Fri, 19 Mar 2010 08:47:20 +0000

pre tag ကေတာ႔ တစ္ေၾကာင္းဆင္းခ်င္ရင္
သံုးရတာ tab ခုန္ထားတာ browser မွာ မေပၚတာေတြကို ေျဖရွင္းေပးႏုိင္ပါတယ္။ pre tag ၾကားမွာေရးထားတာေတြကို note pad မွာ ကၽြန္ေတာ္တို႔ေရးထားတဲ့အတိုင္း browser မွာေပၚေစပါတယ္။

pre tag

This is paragraph tag. This is next line. This is Tab.

This is test for pre tag.
This is next line.
     This is Tab.

Output:

This is paragraph tag.This is next line.This is Tab.

This is test for pre tag.
This is next line.
This is Tab.

ဒီ example မွာ p tag နဲ႔ pre tag တို႔ရဲ႕ မတူညီပံုေလးကို ေတြ႔ရမွာပါ။
ဒီ program မွာ ကၽြန္ေတာ္တို႔
မသံုးဘဲ တစ္ေၾကာင္းဆင္းထားၿပီး tab ခုန္ထားတာကိုေတြ႔ရမွာပါ။ pre tag ၾကားမွာ ရွိေနတဲ့အတြက္ အဲဒါေတြအကုန္လံုး browser မွာ affect ျဖစ္ပါလိမ့္မယ္။ p tag ၾကားကေတာ႔ effect မျဖစ္ပါဘူး။

paragraph tag

wlo — Fri, 19 Mar 2010 08:40:16 +0000

About paragraph tag

This is first line. That is next in code.

This is next paragraph.

Output:

This is first line.That is next in code.

This is next paragraph.

ဒီ example ေလးကို run ၾကည့္လိုက္ပါ။ This is first line.That is next in code. ဆိုၿပီး သူတို႔ႏွစ္ေၾကာင္းဟာ တစ္ေၾကာင္းတည္းေပၚေနတာကို ေတြရပါလိမ့္မယ္။ ဒါဟာ coding မွာ တစ္ေၾကာင္းဆင္းေပမယ့္ browser မွာ တစ္ေၾကာင္းမဆင္းတဲ့အေၾကာင္း သိေစခ်င္လို႔ပါ။ ဒါပင္မယ့္ ကၽြန္ေတာ္တို႔ coding ကစာေၾကာင္းေရးရင္နဲ႔ browser screen ထက္ရွည္သြားမယ္ဆိုရင္ေတာ႔ တစ္ေၾကာင္းဆင္းပါလိမ့္မယ္။ This is next paragraph. ဆိုတဲ့ စာေၾကာင္းကေတာ႔ paragraph ထံုးစံအတိုင္း တစ္ေၾကာင္းျခားၿပီး ေတာ႔ ေအာက္တစ္ေၾကာင္းက ေပၚလာတာေတြ႔ ရပါလိမ့္မယ္။

About body tag

This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph.

Output:

This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph. This is paragraph.

ဒီ example မွာေတာ႔ paragraph ရဲ႔ align ကို right လို႔ေပးထားပါတယ္။ သူက ဘာမွမပါရင္ left ကို default အေနနဲ႔ ထားထားပါတယ္။ ေနာက္ center ကိုထားလို႔လည္းရပါတယ္။ justify ကေတာ႔ browser screen မွာစာတစ္ပုိဒ္လံုးကို ညီေအာင္ညႇိေပးပါတယ္။

b i u tag

wlo — Fri, 19 Mar 2010 08:35:10 +0000



About body tag



This is bold text

This is italic text

This is underline

This is strong text

This is em text

Output:
This is bold text
This is italic text
This is underline
This is strong text
This is em text

ဒီ example ေလးကို run ၾကည့္လိုက္ရင္ ဒီ tag ကေလးေတြအေၾကာင္း အလြယ္တကူ နားလည္လိမ့္မယ္ ထင္ပါတယ္။ ဒီ example မွာ ၾကည့္လိုက္ရင္ strong နဲ့ bold က တူသလို i နဲ႔ em က လည္းတူပါတယ္။ သူတို႔ ႏွစ္ခုသံုးခု တြဲသံုးရင္လည္းရပါတယ္။

This is bold italic text