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

ဦးေအးမင္း(ေအာင္ေျမ)