မွတ္ခ်က္ ။ ။ စတင္ေလ ့လာသူမ်ားအတြက္သာရည္ရြယ္ပါသည္ ။ ပညာရွင္မ်ားအတြက္ မရည္ရြယ္ပါသၿဖင္ ့ အမွားပါလ်င္ သီးခံပါေလ..။
ကဲ...စၿပီ.....
ပထမဦးဆံ ုး notepad နဲ ့ အရင္ ေလ ့က်င္ ့သင္ ့ပါတယ္ ။ notepad ကို ဖြင္ ့ၿပီး ေအာက္ပါအတိုင္း စတင္ေရးသားၾကည္ ့ရေအာင္ဗ်ာ ။
<html>
<title> my test</title>
<script type="text/javascript">
document.write("hello.! welcome to MCO");
</script>
</html>
အထက္က ေဖာ္ၿပထားတဲ ့ ကုဒ္ေတြကို တခုခ်င္း ၿပန္ရွင္းၿပပါ့မယ္ ။
<html> ဆိုတာကေတာ ့ html ေလ ့လာဘူးတဲ ့သူေတြသိမွာပါ ။ html စတင္ေတာ ့မယ္ သေကၤတဆိုပါေတာ ့ ။
<script type="text/javascript"> ဆိုတာကေတာ ့ html webpage ထဲမွာ javascript ကုဒ္ေတြကို စတင္အသံ ုးၿပဳေတာ ့မယ္လို ့ ေၾကၿငာတာပါ ။ java script ဟာ <script> နဲ ့ စၿပီး </script> နဲ ့ အဆံ ုးသတ္ရပါတယ္ ။ java ဟာ အေသးစိတ္က်ၿပီး အမွားမခံတဲ ့အတြက္ ကုဒ္ေတြေရးသားတဲ ့ေနရာမွာ ေသခ်ာေရးသားရမွာၿဖစ္ပါတယ္ ။ နဲနဲေလး လိုသည္ၿဖစ္ေစ၊ ပိုသြ ားသည္ၿဖစ္ေစ အလုပ္လုပ္နိုင္ေတာ ့မွာမဟုတ္ပါဘူး ။
ကဲ..ဆက္ရေအာင္.......
document.write("welcome to MCO"); ဆိုတာကေတာ ့ output ပါ ။ webpage မွာ ေပၚလာေအာင္ပါ ။ welcome to MCO ဆိုတာကေတာ ့ output ထုတ္ခ်င္တဲ ့ စာသားပါ ။ အထက္က ကုဒ္ေတြကို notepad မွာ file name .html နဲ ့ save လိုက္ၿပီး ဖြင္ ့လိုက္ရင္ webpage မွာ welcome to MCO လို ့ေပၚေနမွာပါ ။ ထုတ္ခ်င္တဲ ့ စာသားကို ( ...) နွစ္ခုၾကားထဲမွာ " double code ခံၿပီးေရးသားရမွာပါ ။ၿပီးရင္ေနာက္ဆံ ုးမွာ ; semi coma နဲ ့ဆံ ုးရပါမယ္ ။ တခုခုေမ ့က်န္ခဲ ့ရင္ အလုပ္လုပ္မွာမဟုတ္ပါဘူး ။ document.write("............") ဟာ output ထုတ္တဲ ့ေနရာမွာ သံ ုးရတယ္ဆိုတာ အၿမဲမွတ္ထားပါ ။ ဥပမာ ။ ။ ကၽြန္ေတာ္တို ့ html မွာ စာေၾကာင္းတေၾကာင္းဆင္းခ်င္ရင္ <br> </br> command ကို သံုးရပါတယ္ ။ java script မွာ စာတေၾကာင္းဆင္းခ်င္ရင္ document.write("</br>"); လို ့ေရးရပါမယ္ ။ အဲလို output ထုတ္မွ အလုပ္လုပ္မွာပါ ။ သခ်ာၤအတြက္အခ်က္ေတြေၿဖရွင္းၿပီးလို ့ အေၿဖထုတ္ခ်င္ရင္လဲ ဒီလိုပဲထုတ္ရမွာပါ ။ ေနာက္ပိုင္း နားလည္လာပါလိမ့္မယ္ ။
</script> ဆိုတာကေတာ ့ သိၿပီးၾကတဲ ့အတိုင္းပဲ ကုဒ္ေ၇းသားၿခင္း ၿပီးၿပီဆိုတဲ ့သေဘာပါ ။ အဲဒီ အပိတ္မပါရင္ ေရးထားတဲ ့ကုဒ္ အလုပ္မလုပ္နိုင္ပါဘူး ။
</html> ဆိုတာကေတာ ့ html ကုဒ္ ၿပီး ဆံ ုးေၾကာင္း ၿပတဲ ့သေဘာပါ ။ html ကလဲ <html> </html> အဲလို အစနဲ ့ အဆံ ုး ေရးသားရတာပါပဲ ။
ကဲ...အခုမွ စမယ္ ့ ညီအစ္ကိုေမာင္နွမမ်ား notepad ေလးဖြင္ ့ၿပီး လက္ေတြ ့စမ္းသပ္ၾကည္ ့ၾကပါအံ ုး ။ အဲ.. notepad ကို save ရင္ .html ဆိုတဲ ့ filename နဲ ့ေတာ ့ save ပါ ။ ဘာလို ့လဲဆိုေတာ ့ အခု ကၽြန္ေတာ္တို ့ သံ ုးေနတဲ ့ ကုဒ္က html ၾကားမွာ java ကို ညွပ္သံ ုးထားလို ့ပါ ။
ဒီတခါ java script comment အေၾကာင္းေပါ့ ။ ဥပမာဗ်ာ....ပရိုတခုေရးသားလိုက္တဲ ့ ပရိုဂမ္မာက သူ ့ပရိုဂရမ္ရဲ ့ အေၾကာင္း ၾကြားခ်င္ရင္ေပါ့ ။ ဒါမွမဟုတ္ တခုခုအသိေပးခ်င္ရင္ပဲၿဖစ္ၿဖစ္ေပါ့ ။ ဒါဆိုရင္ comment ကိုသံ ုးမယ္ဗ်ာ ။
<html>
<title> my test</title>
<script type="text/javascript">
/* this is comment .
this is double comment .you can it when you write many letters . */
// this is single comment .
document.write("hello.! welcome to MCO");
</script>
</html>
comment မွာ single နဲ ့ double ဆိုၿပီး ရွိတယ္ဗ်ာ ။ /*..............................*/ ဒါက double comment....muti-line comment လို ့လဲေခၚတယ္ ။ သူကိုက တေၾကာင္းထက္ပိုတဲ ့စာေတြေရးသားလိုရင္သံ ုးတယ္ ။ ဒါက // single comment ။ သူကေတာ ့ စာတေၾကာင္းပဲ ေရးခ်င္တဲ ့အခါေပါ့ ။ အဲလိုေရးထားတဲ ့ comment ေတြကို program က အလုပ္မလုပ္ပဲ ေက်ာ္သြ ားမ်ာၿဖစ္ပါတယ္ ။ သူက အလုပ္လုပ္ဖို ့မဟုတ္ဘူးေလ....comment သက္သက္ပါပဲ ။ ကဲ.....လက္ေတြ ့ ေရးၿပီး စမ္းၾကည္ ့ၾကဗ်ာ.......ခင္ဗ်ားတို ့ေရးထားတဲ ့ comment ေတြ output မွာ မေပၚဘူးဆိုရင္ မွန္တယ္ ။ အဲ.....webpage မွာ ေပၚေနတယ္ဆိုရင္ေတာ ့ မွာေနဘီ...ၿပန္စစ္လိုက္အံ ုး..ေသခ်ာ ။ comment ကလဲ သိထားရမယ္ဗ် ။ သူလဲ တနည္းနည္းနဲ ့ေတာ ့ အသံ ုး၀င္တဲ ့အရာပဲ ။ ေနာက္ေတာ ့ သိလာပါလိမ့္မယ္ ။
အဲ..ေမ့ေနလို ့ comment ကို ဒီလိုလဲေရးလို ့ရတာပဲ... <!-- this is comment//--> ။ ဒါကေတာ ့ ကၽြန္ေတာ္လဲ ေသခ်ာသိဘူးဗ် ။ html မွာေတာ ့ သူ ့ကိုသံ ုးေနတာေတြ ့တာပဲ
ကဲ...Variables ေတြအေၾကာင္း ေလ့လာၾကမယ္ဗ်ာ......
ကၽြန္ေတာ္တို ့ အထက္တန္းေက်ာင္းတံ ုးက သင္ယူခဲ ့ ၾကတာေလးေတြ မွတ္မိအံ ုးမယ္ ထင္ပါတယ္ဗ်ာ...............
x = 5
y = 4
z=x+y
z= ?
ဘယ္ေလာက္ရလဲ .? ကၽြန္ေတာ္လဲ ေမ ့ေနၿပီဗ်ာ
ဒါေတြကို Variables လို ့ ေခၚပါတယ္ ။ ဘာသာၿပန္မယ္ဆိုရင္ ကိန္းရွင္မ်ားလို ့ ေခၚနိုင္မယ္ထင္ပါတယ္ ။ သူ က တန္းဖိုးေၿပာင္းလဲနိုင္တယ္ေလ ။ အေသမဟုတ္ဘူး..အရွင္ ။ ကၽြန္ေတာ္က x=5 လို ့ သတ္မွတ္ထားတယ္ ။ ခင္ဗ်ားက x=3 လို ့ ေၿပာင္းၿပီး တန္ဖိုးသတ္မွတ္လို ့လဲရတာပဲမဟုတ္လား ။
သူ ့ကို short name ဥပမာ ကၽြန္ေတာ္သံ ုးထားသလို x ၊ ဒါမွမဟုတ္ y , a ,b ၾကိဳက္တာသံ ုး ။ ရတယ္ ။ အဲ...ရွည္ရွည္ သံ ုးခ်င္တယ္ဆိုရင္လဲရတယ္ဗ်ာ ။
ဥပမာ ။ ။ carname , myname စသၿဖင္ ့ေပါ့ ......သူ ့မွာက တန္ဖိုး သတ္မွတ္မွဳ မရွိေသးဘူး ။ ဘယ္လို တန္ဖိုးသတ္မွတ္မလဲ .?
carname = BMW
my name = pisces
ကဲ..ဒါဆို သူတို ့မွာ တန္ဖိုး အသီးသီးရွိသြ ားၿပီ ။ ေသခ်ာရွင္းေအာင္ၾကည္ ့ေနာ္ ။ ေနာင္အခါမွာ ဒါေတြ က အေရးပါလာလိမ့္မယ္ ။ ဥပမာ ခင္ဗ်ားတို ့ ကိုယ္ပိုင္ javascript game ေတြ ဖန္တီးေတာ ့မယ္ ့ အခါေတြ ၊ program ေတြ ေရးေတာ ့မယ္ ့ အခါေတြမွာေပါ့ဗ်ာ ။ ဒါေတြမသိရင္မၿဖစ္ေတာ ့ဘူး ။
အဲဒီမွာတခုသတိၿပဳေစခ်င္တယ္ဗ်ာ....
A = 5
a = 5
အဲဒီနွစ္ခု မတူဘူးေနာ္ .....အၾကီးက တခု .....အေသးက တခု...မတူဘူး.....java ဟာ အမွားမခံဘူးလို ့ ကၽြန္ေတာ္ေၿပာခဲ ့သလိုပါပဲ ။ အားလံ ုး အေသးစိတ္ပါပဲ ။ ; semi coma ေလး တခု က်န္ေနခဲ ့တာနဲ ့ ပရိုဂမ္တခုလံ ုး အလုပ္မလုပ္နိုင္တာ ၾကံ ုေတြ ့ၾကပါလိမ့္မယ္ ။
Variables ေတြကို ဘယ္လိုသံ ုးမလဲ ဆိုေတာ ့ Variables တခုသံ ုးေတာ ့မယ္ဆိုရင္ အရင္ဆံ ုး Declaring လုပ္ရပါမယ္ ။ ေၾကာ္ၿငာရမယ္လို ့ေၿပာတာ ။ ဘယ္လိုေၾကာ္ၿငာတာလဲဆိုေတာ ့ ............................
var x = 5
var y=4
var ဆိုတာ variables ကိုေၿပာတာပါ ။ အဲလိုေၾကာၿငာရမယ္ ။ program မွာ x တန္ဖိုး 5 ၊ y တန္ဖိုး 4 ထားမယ္ ၊ သံ ုးမယ္လို ့ ေၾကာၿငာလိုက္တာပါပဲ ။
( ကဲ.....ေနာက္ေန ့မွ ဆက္မယ္ကြယ္......သံ ုးေနတဲ ့ဆိုင္က ပိတ္ၿပီတဲ ့.....ကိုယ္ပိုင္မရွိေတာ ့လဲ ..မ်က္နွာငယ္ရတာေပါ့.........)
အထက္ကၿပခဲ ့တဲ ့ variable ေတြကို မသံ ုးခင္ အရင္ဆံ ုး operators ေတြကို သိထားရမွာၿဖစ္တယ္ ။
javascript operators
javascript operators ေတြဟာလဲ သိထားရမယ္ ့အရာေတြပါပဲ ။အဲဒီမွာ Arithmetic Operators ၊ Assignment Operators နဲ ့Comparison and Logical Operators ဆိုၿပီး ရွိၾကတယ္ ။
Arithmetic Operators
+ operator = = =>>> သူကေတာ ့ ေပါင္းၿခင္း ၊ တိုးၿခင္းေတြ လုပ္ေဆာင္ရာမွာ အသံ ုးၿပဳပါတယ္ ။ addition ပါ ။ ဥပမာ ။ ။
A+b ဆိုရင္ a နဲ ့ b ေပါင္းၿခင္းလို ့ အဓိပၸါယ္ရပါတယ္ ။
- operator =====>>>သူကေတာ ့ နွဳတ္ၿခင္း ဆိုင္ရာ သေကၤတပါ ။subtraction ပါ ။
* operator = = = =>>>ဒါက အေၿမာက္ သေကၤတ ။ mutiplication ပါ ။
/ operator = = = = >>> ဒါကစားၿခင္းဆိုင္ရာ သေကၤတပါ ။ division ပါ ။
% operator = = = = >>>ဒါက ရာခိုင္နွဳန္းအတြက္သံ ုးတဲ ့သေကၤတ ။
++ operator = = = = >>>ဒါက တိုးသြားတဲ ့သေဘာ။ ဥပမာ ။ ။ a=7 , b=++a ဒါဆိုရင္ b=8 ၿဖစ္သြ ားၿပီ....သူကတခုၿခင္းတိုးသြ ားတဲ ့သေဘာ ။
-- operator = = = = >>>ဒါကေတာ ့ တခုၿခင္းေလ်ာ ့သြ ားလိုတဲ ့အခါမွာ သံ ုးတယ္ ။
-------------------------------------------------------------------------------------------------------------------------------------------------------------------
Assignment Operators
= operator = = = = >>> ဒါက တူတယ္ ၊ ညီတယ္လို ့ ဆိုတာ ။ ဥပမာ a=3 ဆိုရင္ a ဟာ 3 နဲ ့ညီတယ္လို ့ဆိုတာ ။
+= operator = = = = >>>ဒါက အေပါင္းနဲ ့ခပ္ဆင္ဆင္ပါပဲ ။ b=3 , a=4,a+=b ? a= a+b နဲ ့ညီတယ္လို ့ေၿပာတာပါ ။ ဒါဆို a ဟာ 7 ပါ ။
-= operator = = = = >>>ဒါကေတာ ့ အထက္ကပံ ုအတိုင္းပါပဲ ။ နွဳတ္တာပါ ။
*= operator = = = = >>>ဒါက အေၿမာက္ ။
/= operator = = = = >>> ဒါက အစား ။
%= operator = = = = >>>ဒါက ရာခိုင္နွဳန္း ။
----------------------------------------------------------------------------------------------------------------------------------------------------------
Comparison and Logical Operators
== operator = = = = >>> is equal to လို ့ေခၚပါတယ္ ။ အတူတူပဲလို ့ ဆိုလိုတာပါ ။ x ==5 ဒါဆို မွားပါတယ္ ။ x ဆိုတာ 5 မွမဟုတ္ပဲေလ ။ x ဆိုတာ အဂၤလိပ္စာလံ ုးေလ ။ 5 ဆိုတာက ဂဏန္းသခ်ၤာ ။
=== operator = = = = >>>is exactly equal to ပါ ။ သူူက တန္ဖိုးတခု တိက်စြ ာသတ္မွတ္တာပါ ။ a===5 ဒါဆိုမွန္ပါတယ္ ။ a==="5" ဒါဆိုရင္ေတာ ့မွားပါတယ္ ။
!= operator = = = = >>> is not equal to ပါ ။ သူက မညီဘူးလို ့ ဆိုတာပါ ။
> operator = = = = >>> greater than ပါ ။ ၾကီးၿခင္ိးကိုၿပတဲ ့သေကၤတပါ ။
< operator = = = = >>>less than ပါ ။ ငယ္ၿခင္းကိုၿပတဲ ့သေကၤတပါ ။
>= operator = = = = >>> greater than or equal ပါ ။ ၾကီးမယ္ ဒါမွမဟုတ္ တူမယ္လို ့ ဆိုလိုတာပါ ။
<= operator = = = = >>>less than or equal ပါ ။ ငယ္မယ္ ဒါမွမဟုတ္ တူမယ္လို ့ ဆိုတာပါ ။
& operator = = = = >>> and ပါ ။ နွင္ ့ လို ့ဆိုတာပါ ။ a&b ဒါဆို a နွင္ ့ b လို ့ ေၿပာတာပါ ။
|| operator = = = = >>> or ပါ ။ သို ့မဟုတ္ လို ့ အဓိပၸါယ္ရပါတယ္ ။
! operator = = = = >>>not ပါ ။ မဟုတ္ဘူး လို ့ ဆိုတာပါ ။
HTML ကုိ အၾကမ္းဖ်င္းေလ့လာက်မယ္…………. (၁) 05/20/2011
HTML ဆိုတာ website တစ္ခုေရးေတာ့မယ္ဆိုရင္ အေျခခံအက်ဆံုးကုဒ္တစ္မ်ိဳးပါပဲ။
တစ္ျခားကုဒ္ေတြကိုမသိေသာ္ျငားလည္း ဒီကုဒ္ကိုသိရင္ လွတပတ ဆိုဒ္ေလးတစ္ခုေတာ့ေရးလို႕ရမွာပါ။
ကဲ နိဒါန္းေလးပ်ိဳးရေအာင္……
HTML မွာ မပါမျဖစ္ပါရတဲ့ ကုဒ္ ၃ခုရွိတယ္ ။ အဲ့ဒါကေတာ့ <html> <head> <body>
တို႕ျဖစ္ပါတယ္။ ပထမဆံုး ကုဒ္စတင္ေရးေတာ့မယ္ဆိုရင္ <html> နဲ႕စပါတယ္ </html> နဲ႕ဆံုးပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္ ျဖစ္ျပီးေတာ့ <body> ကေတာ့ ကၽြန္ေတာ္တို႕ျမင္ေနရတဲ့ Page ၾကီးျဖစ္ပါတယ္။
ကုဒ္တစ္ေၾကာင္းေလာက္ေရးၾကည့္မယ္ေနာ္။
Notepad ကို ဖြင့္လိုက္ပါ။
<html>
<head>
<title> your title </title>
</head>
<body bgcolor=”#ffffff”>
<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here</h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>
</body>
</html>
ဒီကုဒ္ေလးက အလြန္ကိုလြယ္တဲ့ကုဒ္ေလးတစ္ခုျဖစ္ပါတယ္။ အခုက အစမွာမို႕လို႕ ဒီဇိုင္းမပါပဲနဲ႕
စာပဲေရးထားတာျဖစ္ပါတယ္ ။ အဲ့ဒါကို ၾကည့္မယ္ဆိုရင္ notepad ကို .html နဲ႕ save လုိက္ပါ။ ေနာက္ ဖိုင္ကို browser တစ္ခုနဲ႕ဖြင့္ၾကည့္လုိက္ပါ။
ကုဒ္ အစကေနၾကည့္မယ္ဆိုရင္ <html> နဲ႕စထားတာမို႕ ေနာက္ဆံုး</html>
နဲ႕ပဲဆံုးထားရပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္းအပိုင္းေပါ့။ ေခါင္းစဥ္ကိုေပးမယ္ဆိုရင္ <head> နဲ႕ </head> ႏွစ္ခုၾကားမွာ
<title> ဆိုတာေလးေရးေပးရပါတယ္။ <title>နဲ႕ </title> ၾကားမွာမွ ကိုယ္တင္ခ်င္တဲ့ ေခါင္းစဥ္ကို ေရးရမွာျဖစ္ပါတယ္။
ေနာက္ဆံုးတစ္ခုကေတာ့ <body> ပဲျဖစ္ပါတယ္။ အဲ့ဒါကေတာ့ ကိုယ္ျမင္ရမယ့္ webpage ၾကီးေပါ့။ အဲ့ဒီမွာ
ႏွစ္ခုတိုးလာတယ္ bgcolor ဆိ္ုတာေလးေလ။ အဲ့ဒါက ကိုယ့္ webpage ရဲ႕ကာလာကို ေျပာင္းေပးတာ
ျဖစ္ပါတယ္။ bgcolor ကုဒ္ေတြကို Photoshop ထဲမွာ အလြယ္တစ္ကူ ၾကည့္ႏိုင္သလို RGB လို႕
မွတ္ထားရင္လည္း လြယ္ပါတယ္။ Number ၆လံုးထဲကမွ ေရွ႕ွႏွစ္လံုးက အနီ ေနာက္ႏွစ္လံုးက အစိမ္း ေနာက္ဆံုးႏွစ္လံုးက အျပာ လို႕ မွတ္ထားႏိုင္ပါတယ္။
<h1> ဆိုတာကေတာ့ စာလံုး ကိုၾကီးေစတဲ့ကုဒ္ပါပဲ။ ကိုယ္ ၾကီးေစခ်င္တဲ့ကုဒ္ကို <h1> နဲ႕ <h2>
ၾကားထည့္ေရးလိုက္ျပီဆိုရင္ ကိုယ္ေရးလိုက္တဲ့စာလံုးကို အၾကီးဆံုးျမင္ရမွာျဖစ္ပါတယ္။ အေသးဆံုးကေတာ့
<h6>ျဖစ္ပါတယ္။ ထုိထက္မ်ားေသာဂဏန္းမ်ားထည့္လွ်င္ effect မျဖစ္ေတာ့ပါ။ ဒီကုဒ္က ဂဏန္းၾကီးေလေလ
စာလံုးေသးေလေလပဲျဖစ္ပါတယ္။
ေနာက္ထက္ကုဒ္တစ္ေၾကာင္းဆက္ေရးရေအာင္ေနာ္
အခုေရးမွာက <body> နဲ႕ </body> ၾကားထဲမွာေရးရမွာျဖစ္ပါတယ္။
<a href=”www.google.com”> Google </a>
ဟုေရးၾကည့္ပါ။
Webpage တြင္ Google ဟုစာတစ္လံုးထဲေပၚေနမည္။ ထုိ Google ကို ႏွိပ္လိုက္လွ်င္ google ရဲ႕ webpage ကို ေရာက္သြားမွာျဖစ္ပါတယ္။ ထုိကုဒ္ကို link ခ်ိတ္သည္ဟုေခၚပါသည္။
ေနာက္ webpage မွာ ပံုထည့္ၾကည့္ရေအာင္။
<body> tags ထဲမွာေရးရမွာပဲျဖစ္ပါတယ္။
<img src="file:///D|/Nyein Chan Ko/header.jpg”> ဟုရုိက္ၾကည့္ပါ။ ေနာက္ run ၾကည့္လိုက္ပါ။
Webpage တြင္ပံုေပၚေနမည္ျဖစ္ပါတယ္။ ဒီကုဒ္ကိုေတာ့ single tags လို႕ေခၚပါတယ္။
အေရးၾကီးတဲ့ single tags ေတြကေတာ့ <br> နဲ႕ <hr> ပဲျဖစ္ပါတယ္။ <br> ကေတာ့ Enter ေခါက္တာနဲ႕
တူျပီးေတာ့ <hr> ကေတာ့ မ်ဥ္းပိတ္တာနဲ႕တူပါတယ္။
ထုိပံုကို link ခ်ိတ္ၾကည့္ရေအာင္ေနာ္။
<a href=”www.nyeinchanko.weebly.com”><img src="file:///D|/Nyein Chan Ko/header.jpg"></a>
ဟု ရိုက္ၾကည့္လုိက္ပါ ။
ပံုတစ္ပံုပဲေပၚေနမွာျဖစ္ျပီးေတာ့ ပံုကို Click လုိက္ရင္ေတာ့ www.nyeinchanko.weebly.com
ကိုေရာက္သြားမွာျဖစ္ပါတယ္။
အဖြင့္ပဲေရးျပီး အပိတ္မေရးရင္ဘာျဖစ္မလဲ။
အဲ့ဒါကို link ခ်ိတ္တာနဲ႕ပဲရွင္းျပပါမယ္။
သူငယ္ခ်င္းတုိ႕ေရ ဒီေနရာေလးမွာ သြားေဒါင္းလုိက္ေနာ္။
အဲ့ဒီစာေၾကာင္းထဲမွာကိုယ္က ဒီေနရာေလး ကို link ခ်ိတ္ခ်င္တယ္ေပါ့။
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး </a> မွာ သြားေဒါင္းလုိက္ေနာ္
လုိ႕ေရးရမွာကိ္ု
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္
လို႕ေရးလုိက္ရင္ ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္ ဆိုတဲ့စာေၾကာင္းတစ္ခုလံုးကို link ခ်ိတ္ျပီးသား ျဖစ္သြားမယ္ဆိုေတာ့ ပိတ္ဖို႕ကို မေမ့ဖို႕လိုတယ္ေနာ္။
ကဲအခုေတာ့ဒီေလာက္ပါပဲ ေနာက္ထက္ tags တစ္ခုမွာ ဘယ္လို attribute ေတြရွိတယ္ဆိုတာကိုေျပာျပေပး ပါ့မယ္။
တစ္ျခားကုဒ္ေတြကိုမသိေသာ္ျငားလည္း ဒီကုဒ္ကိုသိရင္ လွတပတ ဆိုဒ္ေလးတစ္ခုေတာ့ေရးလို႕ရမွာပါ။
ကဲ နိဒါန္းေလးပ်ိဳးရေအာင္……
HTML မွာ မပါမျဖစ္ပါရတဲ့ ကုဒ္ ၃ခုရွိတယ္ ။ အဲ့ဒါကေတာ့ <html> <head> <body>
တို႕ျဖစ္ပါတယ္။ ပထမဆံုး ကုဒ္စတင္ေရးေတာ့မယ္ဆိုရင္ <html> နဲ႕စပါတယ္ </html> နဲ႕ဆံုးပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္ ျဖစ္ျပီးေတာ့ <body> ကေတာ့ ကၽြန္ေတာ္တို႕ျမင္ေနရတဲ့ Page ၾကီးျဖစ္ပါတယ္။
ကုဒ္တစ္ေၾကာင္းေလာက္ေရးၾကည့္မယ္ေနာ္။
Notepad ကို ဖြင့္လိုက္ပါ။
<html>
<head>
<title> your title </title>
</head>
<body bgcolor=”#ffffff”>
<h1> your text here </h1>
<h2> your text here </h2>
<h3> your text here</h3>
<h4> your text here </h4>
<h5> your text here </h5>
<h6> your text here </h6>
</body>
</html>
ဒီကုဒ္ေလးက အလြန္ကိုလြယ္တဲ့ကုဒ္ေလးတစ္ခုျဖစ္ပါတယ္။ အခုက အစမွာမို႕လို႕ ဒီဇိုင္းမပါပဲနဲ႕
စာပဲေရးထားတာျဖစ္ပါတယ္ ။ အဲ့ဒါကို ၾကည့္မယ္ဆိုရင္ notepad ကို .html နဲ႕ save လုိက္ပါ။ ေနာက္ ဖိုင္ကို browser တစ္ခုနဲ႕ဖြင့္ၾကည့္လုိက္ပါ။
ကုဒ္ အစကေနၾကည့္မယ္ဆိုရင္ <html> နဲ႕စထားတာမို႕ ေနာက္ဆံုး</html>
နဲ႕ပဲဆံုးထားရပါတယ္။
<head> ကေတာ့ ေခါင္းစဥ္းအပိုင္းေပါ့။ ေခါင္းစဥ္ကိုေပးမယ္ဆိုရင္ <head> နဲ႕ </head> ႏွစ္ခုၾကားမွာ
<title> ဆိုတာေလးေရးေပးရပါတယ္။ <title>နဲ႕ </title> ၾကားမွာမွ ကိုယ္တင္ခ်င္တဲ့ ေခါင္းစဥ္ကို ေရးရမွာျဖစ္ပါတယ္။
ေနာက္ဆံုးတစ္ခုကေတာ့ <body> ပဲျဖစ္ပါတယ္။ အဲ့ဒါကေတာ့ ကိုယ္ျမင္ရမယ့္ webpage ၾကီးေပါ့။ အဲ့ဒီမွာ
ႏွစ္ခုတိုးလာတယ္ bgcolor ဆိ္ုတာေလးေလ။ အဲ့ဒါက ကိုယ့္ webpage ရဲ႕ကာလာကို ေျပာင္းေပးတာ
ျဖစ္ပါတယ္။ bgcolor ကုဒ္ေတြကို Photoshop ထဲမွာ အလြယ္တစ္ကူ ၾကည့္ႏိုင္သလို RGB လို႕
မွတ္ထားရင္လည္း လြယ္ပါတယ္။ Number ၆လံုးထဲကမွ ေရွ႕ွႏွစ္လံုးက အနီ ေနာက္ႏွစ္လံုးက အစိမ္း ေနာက္ဆံုးႏွစ္လံုးက အျပာ လို႕ မွတ္ထားႏိုင္ပါတယ္။
<h1> ဆိုတာကေတာ့ စာလံုး ကိုၾကီးေစတဲ့ကုဒ္ပါပဲ။ ကိုယ္ ၾကီးေစခ်င္တဲ့ကုဒ္ကို <h1> နဲ႕ <h2>
ၾကားထည့္ေရးလိုက္ျပီဆိုရင္ ကိုယ္ေရးလိုက္တဲ့စာလံုးကို အၾကီးဆံုးျမင္ရမွာျဖစ္ပါတယ္။ အေသးဆံုးကေတာ့
<h6>ျဖစ္ပါတယ္။ ထုိထက္မ်ားေသာဂဏန္းမ်ားထည့္လွ်င္ effect မျဖစ္ေတာ့ပါ။ ဒီကုဒ္က ဂဏန္းၾကီးေလေလ
စာလံုးေသးေလေလပဲျဖစ္ပါတယ္။
ေနာက္ထက္ကုဒ္တစ္ေၾကာင္းဆက္ေရးရေအာင္ေနာ္
အခုေရးမွာက <body> နဲ႕ </body> ၾကားထဲမွာေရးရမွာျဖစ္ပါတယ္။
<a href=”www.google.com”> Google </a>
ဟုေရးၾကည့္ပါ။
Webpage တြင္ Google ဟုစာတစ္လံုးထဲေပၚေနမည္။ ထုိ Google ကို ႏွိပ္လိုက္လွ်င္ google ရဲ႕ webpage ကို ေရာက္သြားမွာျဖစ္ပါတယ္။ ထုိကုဒ္ကို link ခ်ိတ္သည္ဟုေခၚပါသည္။
ေနာက္ webpage မွာ ပံုထည့္ၾကည့္ရေအာင္။
<body> tags ထဲမွာေရးရမွာပဲျဖစ္ပါတယ္။
<img src="file:///D|/Nyein Chan Ko/header.jpg”> ဟုရုိက္ၾကည့္ပါ။ ေနာက္ run ၾကည့္လိုက္ပါ။
Webpage တြင္ပံုေပၚေနမည္ျဖစ္ပါတယ္။ ဒီကုဒ္ကိုေတာ့ single tags လို႕ေခၚပါတယ္။
အေရးၾကီးတဲ့ single tags ေတြကေတာ့ <br> နဲ႕ <hr> ပဲျဖစ္ပါတယ္။ <br> ကေတာ့ Enter ေခါက္တာနဲ႕
တူျပီးေတာ့ <hr> ကေတာ့ မ်ဥ္းပိတ္တာနဲ႕တူပါတယ္။
ထုိပံုကို link ခ်ိတ္ၾကည့္ရေအာင္ေနာ္။
<a href=”www.nyeinchanko.weebly.com”><img src="file:///D|/Nyein Chan Ko/header.jpg"></a>
ဟု ရိုက္ၾကည့္လုိက္ပါ ။
ပံုတစ္ပံုပဲေပၚေနမွာျဖစ္ျပီးေတာ့ ပံုကို Click လုိက္ရင္ေတာ့ www.nyeinchanko.weebly.com
ကိုေရာက္သြားမွာျဖစ္ပါတယ္။
အဖြင့္ပဲေရးျပီး အပိတ္မေရးရင္ဘာျဖစ္မလဲ။
အဲ့ဒါကို link ခ်ိတ္တာနဲ႕ပဲရွင္းျပပါမယ္။
သူငယ္ခ်င္းတုိ႕ေရ ဒီေနရာေလးမွာ သြားေဒါင္းလုိက္ေနာ္။
အဲ့ဒီစာေၾကာင္းထဲမွာကိုယ္က ဒီေနရာေလး ကို link ခ်ိတ္ခ်င္တယ္ေပါ့။
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး </a> မွာ သြားေဒါင္းလုိက္ေနာ္
လုိ႕ေရးရမွာကိ္ု
သူငယ္ခ်င္းတို႕ေရ <a href=” your download link”> ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္
လို႕ေရးလုိက္ရင္ ဒီေနရာေလး မွာ သြားေဒါင္းလုိက္ေနာ္ ဆိုတဲ့စာေၾကာင္းတစ္ခုလံုးကို link ခ်ိတ္ျပီးသား ျဖစ္သြားမယ္ဆိုေတာ့ ပိတ္ဖို႕ကို မေမ့ဖို႕လိုတယ္ေနာ္။
ကဲအခုေတာ့ဒီေလာက္ပါပဲ ေနာက္ထက္ tags တစ္ခုမွာ ဘယ္လို attribute ေတြရွိတယ္ဆိုတာကိုေျပာျပေပး ပါ့မယ္။
No comments:
Post a Comment