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

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