Thursday, December 29, 2011

html မိတ္ဆက္သင္ခန္းစာ ( ဘေလာ့ေရးေသာသူငယ္ခ်င္းတိုင္းအတြက္)



အဆင္ေျပၾကပါေစဗ်ာ

HTML lessons



ဒီေန့ blog sites ေလးေတြမွာ...စာအစဥိတစိုင္ေရးေနတဲ့...
friends အေပါင္းအတြက္...html ကို နားလည္အသံုးခ်တတ္ေစရန္...က်ေနာ္အပိုင္းခြဲၿပီး...
သင္ၿပေပးသြားပါ့မယ္...
ဒါကိုမေၿပာခင္...သင္ဆရာ...ၿမင္ဆရာ...ၾကားဆရာအေပါင္းကို...ရိုေသဂါရ၀...ပဏာမၿပဳလိုက္ရပါတယ္ဗ်ာ...

♦မခက္ပါဘူး...ဒီစကားဟာ...နားလည္သူေတြမွေၿပာရမယ့္စကားပါ...
ဒါေပမယ့္...နားလည္ဖို့ေတာ့...ဘယ္အရာမတိုအေရးၾကီးေနပါလိမ့္မယ္...

♦ကဲစၾကရေအာင္...က်ေနာ္လည္း..အခ်ိန္မရလို့...အပိုင္းခြဲေၿပာရမယ့္...အေနအထားပါပဲ..
သူငယ္ခ်င္းတို့...ဆက္လက္ေတာ့...ေစာင့္ဖတ္ေပးသြားေစခ်င္ပါတယ္...

♦ခု blog sites ေလးေတြမွာ..Rich text နဲ့ Html ဆိုၿပီး...ေတြ့ရတယ္ေနာ္...
တစ္ခ်ိဳ့ sites ေလးေတြကေတာ့ပံုမေၿပာင္းေသးပါဘူး...
ေတာ္ေတာ္မ်ားမ်ားေၿပာင္းေပးထားပါတယ္...
ေလ့လာပါ့မယ္...မွတ္ပါ...ေတြးပါ...လက္ေတြ့လိုက္လုပ္ပါ..

♦ေလာေလာဆယ္... html အေၾကာင္း...အရင္...ေလ့လာရေအာင္....
အဂၤလိပ္လိုေတြအကုန္ေတာ့...က်ေနာ္ဘာသာၿပန္မေပးေတာ့ဘူးေနာ္...

" HTML is not a programming language, but rather a markup language. If you already know XML, then HTML will be a snap for you to learn. We
urge you not to attempt to blow through this tutorial in one sitting.
We recommend that you spend 15 minutes to an hour a day practicing HTML
and then take a break, to let the information settle in. We aren't
going anywhere! "

♦ရတယ္ေနာ္...သူဟာ...not a programming language, but rather a markup language ၿဖစ္ပါတယ္...
ေနာက္တစ္ခုက...သူ့မွာ tag ေတြနဲ့.. attribute ေလးေတြရွိေနပါ့မယ္..
tag က html ကိုယ္စားၿပဳတဲ့ codes ေလးေတြကိုေခၚတာပါ
attribute ဆိုတာကေတာ့....tag ေတြရဲ့ လုပ္ေဆာင္မွဳေတြကိုေဖာ္ေဆာင္ေပးတဲ့သေဘာနားလည္ေပးထားပါ...


HTML( Backgroundcolor codes)
ကဲ... blog site ေလးေတြမွာ...background color နဲ့...သူငယ္ခ်င္းတို့...စာေရးၾကည့္ရေအာင္...
အသံုးၿပဳပါမယ္...html tag ( codes ) ေလးေတြကို...
အားလံုးကို...blog ရဲ့ html အတြင္းမွာေရးရမွာဆိုတာ...အၿမဲသတိခ်ပ္လုပ္ေဆာင္သြားဖို့ပါပဲ...

♦ဒီေနရာမွာ....သူငယ္ခ်င္းတို့နားလည္လြယ္ေစရန္ပဲ...အဆင္သင့္...codes ေတြယူၿပီး copy လုပ္ေရးႏိုင္ေစဖို့ပဲ..
ပထမေၿပာေပးသြားပါ့မယ္..ေနာက္မွ.. ( tag) codes ေတြနဲ့..attribute ေတြအေၾကာင္း...ဆက္ေၿပာၾကတာေပါ့...
ခုကေတာ့...သိပ္လြယ္လြယ္...ဘယ္သူမွနားမလည္ႏိုင္ေသးလို့ပါပဲ....



♦အခုေပးထားတဲ့ tag နဲ့ html မွာထည့္ေရးရင္...ေနာ္ကခံ အ၀ါေရာင္ရွိေနပါလိမ့္မယ္ဗ်ာ...
<div style="background-color: yellow; width: 200px;">ေရးခ်င္တာဒီမွာေရးပါ...</div>
ရၿပီေနာ္..သတိထားရမွာက...ကိုယ္ေရးေနတဲ့.. blog site ေတြရဲ့ ေနာက္ခံအေရာင္နဲ့..ကိုယ္သံုးတဲ့
ေနာက္ခံအေရာင္....တထပ္တည္းမက်ေနေစဖို့ပါပဲ...ဒါဆိုရင္စာေတြမၿမင္ရပဲၿဖစ္သြားႏိုင္ပါတယ္..
သူငယ္ခ်င္းတို့ေၿပာင္းေပးရမွာက...html codes ေတြထဲက...အေရာင္ (color ) ကိုေၿပာင္းသံုးေပးသြားပါ...
အခုအထိေၿပာတာ...နားလည္မယ္ထင္ပါရဲ့...
ေနာက္ပိုင္း...html ကိုေသခ်ာပိုင္ႏိုင္သြားရင္...bg cloor ထက္အဆင့္ၿမင့္တဲ့ codes ေလးေတြ...ကိုယ့္ဘာကို..
ေရးႏိုင္လာမွာပါ...အစဆိုတာကေတာ့...တကယ္အခက္ဆံုးအပိုင္းကို...ေက်ာ္လႊားေနရၿခင္းလို့ပဲ..
သူငယ္ခ်င္းတို့မွတ္ထားပါဗ်ာ...

♦ေနာက္တစ္ခု....
<div style="background-color: rgb(102, 204, 255); margin-right: 2em;"><p style="text-align: left;">ေရးခ်င္တာဒီမွာေရးပါ...</p></div>
ဒီ codes ေခးေတြကေတာ့နည္းနည္း...ပိုခက္သြားမွာေပါ့...
ဘာၿဖစ္လို့လဲဆိုေတာ့...သူဟာ... bg color codes ကို rgb နဲ့ ေၿပာင္းထားလို့ပါပဲ...
မခက္ပါဘူး...သိရင္..သံုးတတ္ရင္လြယ္ပါတယ္...

♦သူငယ္ခ်င္းတို့...
html စာမ်က္ႏွာေပၚၿမင္ရမယ့္... ပံုေလးေတြ...ဥပမာေပးၿပီးမၿပေတာ့ဘူး..
ကိုယ့္ဘာကို....ေရးၾကည့္ၿပီးၿမင္ရာတာပိုေကာင္းမွာပါ...
ၾကိဳးစားၾကည့္ေပါ့ေနာ္....

♦ေနာက္အပိုင္းေတြမွာ...html သင္ခန္းစာအေၾကာင္းဆက္ပို့ခ်ေပးသြားဦးမွာပါ....
သူရဲ့ link site လိပ္စာေတာ့...သူငယ္ခ်င္းတို့ကိုေပးခဲ့ပါ့မယ္ဗ်ာ..
အရင္ကိုယ့္ဘာသာ..ေလ့လာခ်င္သူေတြအတြက္ပါ...
http://www.tizag.com မွာေလ့လညၾကည့္ရွဳ...သင္ယူႏိုင္ပါတယ္လို့....

♦ html color picker and codes ေတြပါ...
tag (codes ) မွာ အေရာင္ကို...codes (သို့) အေရာင္အတိုင္းထည့္ေရးႏိုင္ပါတယ္ဗ်ာ..
ေနာက္ပိုင္းမွာ...ပိုနားလည္..သေဘာေပါက္လာမွာပါ...
#FFFFFF #FFFFCC #FFFF99 #FFFF66 #FFFF33 #FFFF00
#FFCCFF #FFCCCC #FFCC99 #FFCC66 #FFCC33 #FFCC00
#FF99FF #FF99CC #FF9999 #FF9966 #FF9933 #FF9900
#FF66FF #FF66CC #FF6699 #FF6666 #FF6633 #FF6600
#FF33FF #FF33CC #FF3399 #FF3366 #FF3333 #FF3300
#FF00FF #FF00CC #FF0099 #FF0066 #FF0033 #FF0000
#CCFFFF #CCFFCC #CCFF99 #CCFF66 #CCFF33 #CCFF00
#CCCCFF #CCCCCC #CCCC99 #CCCC66 #CCCC33 #CCCC00
#CC99FF #CC99CC #CC9999 #CC9966 #CC9933 #CC9900
#CC66FF #CC66CC #CC6699 #CC6666 #CC6633 #CC6600
#CC33FF #CC33CC #CC3399 #CC3366 #CC3333 #CC3300
#CC00FF #CC00CC #CC0099 #CC0066 #CC0033 #CC0000
#99FFFF #99FFCC #99FF99 #99FF66 #99FF33 #99FF00
#99CCFF #99CCCC #99CC99 #99CC66 #99CC33 #99CC00
#9999FF #9999CC #999999 #999966 #999933 #999900
#9966FF #9966CC #996699 #996666 #996633 #996600
#9933FF #9933CC #993399 #993366 #993333 #993300
#9900FF #9900CC #990099 #990066 #990033 #990000
#66FFFF #66FFCC #66FF99 #66FF66 #66FF33 #66FF00
#66CCFF #66CCCC #66CC99 #66CC66 #66CC33 #66CC00
#6699FF #6699CC #669999 #669966 #669933 #669900
#6666FF #6666CC #666699 #666666 #666633 #666000
#6633FF #6633CC #663399 #663366 #663333 #663300
#6600FF #6600CC #660099 #660066 #660033 #660000
#33FFFF #33FFCC #33FF99 #33FF66 #33FF33 #33FF00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#33CCFF #33CCCC #33CC99 #33CC66 #33CC33 #33CC00
#3399FF #3399CC #339999 #339966 #339933 #339900
#3366FF #3366CC #336699 #336666 #336633 #336600
#3333FF #3333CC #333399 #333366 #333333 #333300
#3300FF #3300CC #330099 #330066 #330033 #330000
#00FFFF #00FFCC #00FF99 #00FF66 #00FF33 #00FF00
#00CCFF #00CCCC #00CC99 #00CC66 #00CC33 #00CC00
#0099FF #0099CC #009999 #009966 #009933 #009900
#0066FF #0066CC #006699 #006666 #006633 #006600
#0033FF #0033CC #003399 #003366 #003333 #003300
#0000FF #0000CC #000099 #000066 #000033 #000000



♦ ေနာက္အပိုင္းမ်ားတြင္...html သင္ခန္းစာမွာ...ဒီထက္မခက္ရင္ေတာင္..
ဒီထက္မလြယ္ကူႏိုင္ေၾကာင္း...သိလာပါလိမ့္မယ္..
ဘာပဲၿဖစ္ၿဖစ္...စိတ္ေတာ့မေလွ်ာ့လိုက္နဲ့...သူငယ္ခ်င္းတို့ေရ....

♦သူငယ္ခ်င္းတို့...
connected is not fine in myanmar ၿဖစ္ေနတာေၾကာင့္ရယ္....
က်ေနာ္လည္း...နည္းပါးလွတဲ့ online အသံုးၿပဳခ်ိန္ရယ္ေၾကာင့္..သိပ္ေတာ့စာအရွည္ၾကိးမေရးႏိုင္ပါဘူးဗ်ာ...

ဟိုေန့က...ေၿပာခဲ့တာေလးေတြ...ထပ္ၿဖည့္ေၿပာၾကတာေပါ့...ဒီေန့...
အနည္းငယ္ေတာ့...က်ယ္ၿပန့္မယ္ထင္ပါတယ္...html အသံုးခ်ပံုေလးေတြဟာ...

HTML( background color )....
<div style="background-color: yellow; width: 200px;">
ေရးခ်င္တာ...ဒီမွာေရးပါဗ်ာ..
</div>

ဒီေနရာမွာ...bg color ေပးတာနဲ့ပတ္သက္ၿပီး...အေရာင္ေတြအေၾကာင္းနည္းနည္းေၿပာၾကတာေပါ့...
color
ဟာ...သူငယ္ခ်င္းတို့အေနနဲ့...ရိုးရုိးပဲေရးခ်င္ရင္...red/blue/yellow/...စသည္ၿဖင့္ေပါ့...
အဲဒီအေရာင္ေတြၿဖည့္ရင္ေတာ့...( semi column :) နဲ့အတူအေရာင္ကိုေရးရပါမယ္...
ဒီေနရာမွာ..multi color ေတြအေၾကာင္းေၿပာပါေတာ့မယ္...
ဥပမာ...# ( hash sign ) # 99ccff ဟာ...sky blue color
ကိုကိုယ္စားၿပဳပါတယ္...
သူကေတာ့...33/66/99/00(zero zero)/cc/ff စတဲ့အေရာင္ေတြကို...အတြဲလိုက္ 6
ခုေပါင္းထားၿပီးေရးပါမယ္..
ဥမမာ...#3366cc/#99ff00/#ccccff/#000000/33ffcc/....စသည္ၿဖင့္ေပါ့...

♦က်ေနာ္..html color picker နဲ့ codes
ေတြနဲ့တြဲေနတဲ့အေရာင္ေလးေတြဥပမာေရးေပးခဲ့ပါ့မယ္....
♦ခု bg ထဲမွာအေရာင္ထည့္ၿပီ္း...Insert image ေလးေတြထည့္ၾကည့္ရေအာင္....
ဒီေနရာမွာ..html ကေနသြားမယ္ဆိုရင္...link images ေတြကို...< img
src;> ကေနသြားရပါ့မယ္...
က်ေနာ္ကေတာ့...လြယ္လြယ္ပဲ copy paste လုပ္ထည့္ပါ့မယ္..




MySpace I Love You Comments















♦အိုေက...ရၿပီေနာ္...သူငယ္ခ်င္းတို့...
က်ေနာ္ဒီစာမ်က္ႏွာေပၚမွာပဲ..စာေရးခဲ့ပါမယ္...
gmail ေပၚ highlight ေရးသလို...ကာဆာခ်ၿပီး...space enter နဲ့...
အေရာင္ကိုခ်ဲ့ယူႏိုင္ပါတယ္..

♦ေနာက္ေန့မွာ..background image ေပၚ..စာေရးတာကို...
ဆက္ေၿပာၾကတာေပါ့...






♦ဟုတ္ကဲ့...သိပ္မရွင္းဘူးဆိုသူေတြအတြက္...ၿပန္ေရးေပးပါ့မယ္.. သူငယ္ခ်င္းတို့...
ဒီေန့လည္း...သိပ္ေတာ့အခ်ိန္မရၿပန္ဘူး..
ရသေလာက္အခ်ိန္ကိုပဲ...အသံုးခ်သြားတာေပါ့....

♦က်ေနာ္ ရဲ့ HTML ( background image)....
နဲ့ပတ္သက္ၿပီးမရွင္းတာေလးေတြရွိသြားတာ...sorry ပါသူငယ္ခ်င္းတို့..
ဒါဟာ...blog site ေတြအေနနဲ့...တစ္ခုခုေၾကာင့္မၿမင္ရတဲ့အေနအထားၿဖစ္သြားတာပါ...
တကယ္တမ္းသံုးနည္းအမွန္ကိုက်ေနာ္ေၿပာခဲ့တာပါပဲ...

♦ဒီေန့တစ္ခုေရွ့ဆက္ရေအာင္....
Font size and Cloor....
font size နဲ့ cloor ေတြ gmail ကတိုက္ရိုက္ copy မယူပဲေရးၾကည့္ရေအာင္...
့html code ေလးေတြ htmlထဲမွာေရးပါမယ္..
rich text မွာညပန္ၾကည့္ရင္းေရးသြားပါ...
မခက္ပါဘူး..လြယ္ပါတယ္..

♦ .အေရာင္ေတြေၿပာင္းၾကည့္တာပါ

ရတယ္ေနာ္...
အေရာင္ေတြေၿပာင္းၾကည့္တာပါ

ဒါက... hexcolor...လို့ေခၚပါတယ္..

ဒါက... hexcolor...လို့ေခၚပါတယ္..


♦ ရတယ္ေနာ္...
ေနာက္ၿပီး...font size ေၿပာင္းပါ့မယ္...

Customize your font to achieve a desired look.

Customize your font to achieve a desired look.


ကီးၿပီးေသးထားတာ...ေနာက္ကစာလံုးေတြကို...


ၾ ကီးၿပီးေသးထားတာ...ေနာက္ကစာလံုးေတြကို...

ရတယ္ေနာ္...မခက္ပါဘူး...



ဒါကေတာ့...font style ေၿပာင္းေပးတာပါ....

This paragraph
has had its font...



This paragraph
has had its font...
♦html table....
ႊဒီေနရာမွာ...html ဟာ..table ကိုလည္းတိတိက်က်မေဖာ္ၿပတာကို...လက္ေတြ့ၿမင္ရပါလိိမ့္မယ္ဗ်ာ...
ၾကည့္ပါ...

AB BC
CD DE

AB BC
CD DE

Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1


Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1


Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2


bgcolor="rgb(0,255,0)">
Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2



Column 1 Column 2
Row 1 Cell 1 Row 1 Cell 2
Row 2 Cell 1 Row 2 Cell 2
♦ရတယ္ေနာ္...သူငယ္ခ်င္းတို့...က်ေနာ္မမွားရင္ေတာင္...စာနဲ့ေရးေၿပာရတာၿဖစ္တဲ့အတြက္..
လိုအပ္ခ်က္ကေလးေတြရွိေနမွာပါခင္ဗ်ာ...
ဧရာေျမ
းးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးး
ဒါကေတာ့

HTML Marquee Codeေခၚပါတယ္...

စာေၾကာင္းေတြေျပးေနတာ
စာေၾကာင္းေတြခုန္ေနတာ
စာေၾကာင္းေတြေဘာ္လံုးေလးလို လိမ့္ေနတာ

ေအာက္မွာေလလာၾကည့္ျကပါဗ်ာ...

ဒီကိုႏွိပ္ျပီးၾကည့္ပါ
 ဘေလာ့ဆိုက္အေပၚဘားမွာပံုေလးေတြ
ေျပးေနေအာင္ဖန္တီး၇ေသာကုတ္ကေတာ ့


ဒီပံုကုတ္
<a href="http://www.glitter-graphics.com"><img src="http://dl8.glitter-graphics.net/pub/570/570018w02xr7isn0.gif" width=90 height=90 border=0></a>

 ဒီပံုရဲ ့ကုတ္ကေအာက္မွာ
<a href="http://www.glitter-graphics.com"><img src="http://dl3.glitter-graphics.net/pub/1769/1769173cl3jsgbglk.gif" width=280 height=248 border=0></a><br><a href="http://www.glitter-works.org" target=_blank>glitter-graphics.com</a>
ဒါေတြကိုသံုးပံုကေတာ ့
ပထမဆံုးဘေလာ့မွာ..sign in ၀င္ပါ
ဒါတိယ..... design ကိုသြားပါ...
တတိယ.....Add a Gadget..ကိုႏွိပ္ပါ
ျပီးရင္ေတာ ့
ေနာက္ဆံုးအဆင့္ေရာက္ျပီေပါ ့..ဒီလိုပါဗ်ာ..
ေအာက္ကိုျကည့္ပါ

 HTML/JaVa Script....ဆိုတာေတြ့ပါလိမ့္မယ္
အဲ့ဒါကိုႏွိပ္ပါ..ျပီးရင္ေတာ့ေအာက္မွာေပးထားတဲ့
ကုတ္ေလးထဲမွာၾကိဳက္ရာပံုရဲ့လင့္ကိုေျပာသလို
ထည့္ျပီးေစ့လိုက္ပါ....ဆက္ျကစို ့ဗ်ာ.
.ေအာက္ကိုျကည့္ေနာ





<!-- HTML codes by Quackit.com -->
<marquee behavior="scroll" direction="left">
ဒီေနရာမွာပံုရဲ ့htmlကုတ္ထည္ ့
<p style="font-size:10px;"><a href="http://www.quackit.com/html/tutorial/">ဒီေနရာမွာလည္းအဲ့သလိုကုတ္ပဲထည္ ့</a></p>
</marquee>
တစ္ကယ္လို ့သူငယ္ခ်င္းကတစ္ပံုထဲသံုးခ်င္ရင္ေတာ့လင့္ေလ်ာ့လိုက္ေပါ ့ဗ်ာ
ေနလင္းျဖိဳး
းးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးးး
အေမ့သားနားလည္သေလာက္ေတြေရးခ်ရင္းကေန
ဧရာေျမကိုေရာက္ခဲ့တယ္ဗ်...အဲ့မွာသူရွင္းျပထားတာက
ပိုလြယ္ကူသလိုျဖစ္ေနတယ္...အဲံဒါေျကာင့္..
ဧရာေျမကိုညႊန္းခ်င္ပါတယ္...အခုပိုစ္ေလးက
ဆရာဧရာေျမနဲ့ကြ်န္ေတာ္ေပါင္းျပီးတင္ျပေပးပါတယ္ဗ်ာ......
သူငယ္ခ်င္းအားလံုးေပ်ာ္ရႊင္ႏိုင္ပါေစ...
ေနလင္းျဖိဳး

0 comments:

Post a Comment