Website ေရးနည္း HTML+CSS (အပုိင္း ၁)
Website ေရးနည္း (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
Website ေရးနည္း သင္ခန္းစာ အက်ဥ္း
ဒီ post ဟာ website ေရးျခင္းကုိ စိတ္ဝင္စားတဲ့ လူေတြအတြက္ ပထမဆုံး ေျခလွမ္းျဖစ္မယ္ထင္ပါတယ္။ အခု သင္ခန္းစာမွာ website တစ္ခုရဲ႕ တည္ေဆာက္ပုံကုိ ခြဲျခမ္းစိတ္ျဖာ ေလ့လာမွာ ျဖစ္ပါတယ္။
ဘယ္လိုလူေတြက ဒီသင္ခန္းစာကုိ လုိက္ႏုိင္မလဲ?
အခု သင္ခန္းစာကုိ website တစ္ခုကုိ ျမင္ဖူးတဲ့လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။
ကၽြန္ေတာ္ ဒီ blog ကေနၿပီးေတာ့ တစ္ပတ္ တစ္ခါ အားတဲ့အခ်ိန္ေတြကုိ အသုံးျပဳၿပီး static website တစ္ခုေရးပုံကုိ အစအဆုံး လမ္းညႊန္သြားေပးဖုိ႔ စဥ္းစားထားပါတယ္။ static website ဆုိတာ ဘာလဲ မသိရင္ google မွာ “what is static website” လို႔ ရုိက္ရွာၾကည့္ပါ။ ကၽြန္ေတာ့္ post ထဲမွာ ထည့္မေရးတာက မလုိအပ္ပဲ post ရွည္သြားမွာ နဲ႔ လမ္းညႊန္မယ့္လူမရွိရင္ မလုပ္တတ္မွာစုိးလုိ႔ ထည့္မေရးရတာပါ။ ေနာက္ပုိင္းမွာလည္း မသိတဲ့ စကားလုံးမ်ား ပါခဲ့မယ္ဆုိရင္ ဒီလုိပဲ google မွာ ရွာၾကည့္ပါ၊ ရွာၾကည့္လို႔မွ နားမလည္ဘူးဆုိရင္ေတာ့ comment ခ်န္ၿပီး ေမးပါ။ ေနာက္ၿပီေးတာ့ ဒီ blog မွာ post အသစ္တင္လား မတင္လား ခဏခဏ လာဝင္ၾကည့္ဖုိ႔ မအားဘူးဆုိရင္ေတာ့ blog ရဲ႕ ညာဘက္အျခမ္းမွာ post အသစ္တင္တုိင္း ေမးလ္ပုိ႔ပါမည္ ဆုိတဲ့ ေဘာက္စ္ထဲမွာ e-mail ထည့္၊ subscribe ႏွိပ္လုိက္ပါ၊ ၿပီးရင္ အဲဒီ ထည့္လုိက္တဲ့ email ရဲ႕ inbox ကုိသြားပါ၊ Myanmar Website Tutorials ကပုိ႔ထားတဲ့ ေမးလ္ေရာက္ေနပါလိမ့္မယ္၊ အဲဒီေမးလ္ကုိဖြင့္ၿပီး confirm ကုိ ႏွိပ္လိုက္ပါ။ ဒါဆုိရင္ ဒီ blog မွာ post အသစ္တင္တုိင္း သူငယ္ခ်င္းတုိ႔ရဲ႕ inbox ထဲကုိ ေရာက္လာမွာ ျဖစ္ပါတယ္။ ဒီတစ္ပတ္ ကၽြန္ေတာ္တုိ႔ရဲ႕ ပထမဆုံး ေျခလွမ္းက code ေရးတာေတြ ဘာေတြ လုံးဝ မဟုတ္ေသးပါဘူး၊ သူမ်ားေတြ ေရးထားၿပီးသား website ကုိ ဝင္ၾကည့္တဲ့အခါမွာ အဲဒီ website ေတြရဲ႕ တည္ေဆာက္ပုံကုိ ေလ့လာျခင္းပဲျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ အခုေလ့လာမယ့္ website ကေတာ့ Myanmar Web Designer website ပဲ ျဖစ္ပါတယ္၊ အခု post မွာလဲ ပုံနဲ႔တကြ ရွင္းျပေပးမွာျဖစ္ပါတယ္၊ ဒါေပမယ့္ website ကုိ ကုိယ္တုိင္သြားၿပီးေတာ့ အေသးစိတ္ လိုက္ေလ့လာမယ္ဆုိရင္ေတာ့ ဒီသင္ခန္းစာကုိ အေကာင္းဆုံး နားလည္မွာ ျဖစ္ပါတယ္။
static website တစ္ခုေရးဖုိ႔ဆုိရင္ ကၽြန္ေတာ္တုိ႔ တတ္ထားရမွာက html နဲ႔ css ဆုိရင္ ရပါၿပီ၊ ဟုိးအရင္တုန္းကေတာ့ css မေပၚေသးေတာ့ html တစ္ခုနဲ႔ပဲ ေရးခဲ့ၾကရတာ ျဖစ္ပါတယ္၊ html language ထဲက table ကုိ အသုံးျပဳၿပီးေတာ့ ေရးခဲ့ၾကရတာျဖစ္ပါတယ္၊ table နဲ႔ ေရးတဲ့အခါမွာ ေရးရတာမ်ားတဲ့အတြက္ေၾကာင့္ ေရးခ်ိန္ၾကာျခင္း၊ code မ်ားျခင္း၊ အရင္တုန္းက ဆုိေတာ့ internet connection ေႏွးျခင္း၊ browsers မ်ား version နိမ့္ျခင္း စတဲ့အခ်က္ေတြေၾကာင့္ website ကုိ online ေပၚတင္လုိက္တဲ့အခါမွာ website အတက္ေႏွးျခင္း (slow website download speed) ဆုိတဲ့ ျပႆနာကုိ ေတြ႕ႀကဳံရတဲ့အခါမွာ အဲဒီအတြက္ အေျဖရွာရင္း css ဆုိတဲ့ language အသစ္ကုိ တီထြင္လိုက္ၾကပါတယ္၊ တစ္ဘက္ကလည္း browser ေတြကုိ version ျမွင့္လာၾကပါတယ္၊ connection ကေတာ့ အခုအခ်ိန္ထိ သားစုိး သီခ်င္းလုိပဲ “လိမ္ဖယ္၊ လိမ္ဖယ္” ေပါ့ဗ်ာ …
အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ တတ္ရမယ့္ဟာကုိေတာ့ သိပါၿပီ၊ တတ္ရမယ့္ language ေတြကုိ မေလ့လာခင္ website တည္ေဆာက္ပုံကုိ ေလ့လာၾကတာေပါ့၊ website ေရးတဲ့အခါမွာ menu အပုိင္း၊ banner (facebook မွာဆုိရင္ေတာ့ cover photo) အပုိင္း၊ body အပုိင္း စသည္ျဖင့္ အပုိင္း အပုိင္းေတြ ခြဲၿပီး ေရးၾကပါတယ္။ အဲဒီ အပုိင္းေတြကုိ အဂၤလိပ္လို “division” လို႔ ေခၚပါတယ္၊ html မွာေတာ့ အဲဒီ division ကုိ အတုိေကာက္ “div” လုိ႔ သုံးပါတယ္။ ေအာက္က ပုံကုိၾကည့္ပါ။ (ကလစ္ႏွိပ္ၾကည့္ပါက ပုံကုိ အႀကီး ျမင္ရပါမည္)
ပုံအရဆုိရင္ ကၽြန္ေတာ္တုိ႔ ေလးေထာင့္က်က် အကြက္မ်ဳိးဆုိရင္ div
တစ္ခုလုိ႔ေတာင္ အၾကမ္းဖ်င္း သတ္မွတ္လို႔ ရပါတယ္။ ဒါကေတာ့ Myanmar Web
Designer website ရဲ႕ home page ကုိ analysis လုပ္ၾကည့္တာပါ။ div
တည္ေဆာက္ပုံကုိ coding အေနနဲ႔ပါ ေလာ့လာခ်င္တယ္ဆုိရင္ေတာ့ “firebug” ဆုိတဲ့
addon ေလးကုိ firefox မွာ တင္ရပါမယ္၊ firebug ကုိ တင္ခ်င္တယ္ဆုိရင္ေတာ့ “firebug addon for firefox”
မွာ သြားတင္လိုက္ပါ။ ၿပီးရင္ေတာ့ home menu ေပၚမွာ right click
ႏွိပ္ၿပီးေတာ့ “Inspect element with firebug” ဆုိတာကုိ ႏွိပ္လိုက္ပါ။
အဲဒီလုိ ႏွိပ္လိုက္မယ္ဆုိရင္ေတာ့ browser ရဲ႕ ေအာက္ေျခနားမွာ ေအာက္က ပုံအတုိင္း ေပၚလာမွာ ျဖစ္ပါတယ္။
ေပၚလာတဲ့ပုံမွာ အကန္႔ႏွစ္ကန္႔ ပါပါတယ္၊ ဘယ္ဘက္အျခမ္းက html code ေတြကုိ
ေဖာ္ျပတဲ့ဘက္ျဖစ္ၿပီးေတာ့၊ ညာဘက္ အကန္႔ကေတာ့ css code ေတြကုိ ေဖာ္ျပတဲ့
အျခမ္းျဖစ္ပါတယ္၊ css ေတြကုိ အစီအစဥ္မက် ျပေပးတာ မဟုတ္ပါဘူး၊ ဘယ္ဘက္ အျခမ္း
html code ေတြထဲက ကၽြန္ေတာ္တုိ႔ ႏွိပ္လိုက္တဲ့ html code နဲ႔ ဆုိင္တဲ့ css
code ေတြကုိပဲ ျပေပးတာ ျဖစ္ပါတယ္ ( html နဲ႔ css က တြဲသုံးရတာပါ)၊ ဘယ္ဘက္က
html code နဲ႔ ဆုိင္တဲ့ css ေတြ ေပၚလာေအာင္ ဘယ္လို လုပ္ရလဲဆုိေတာ့
<div, <ul, <li, <a, … စသည္ျဖင့္ ရွိၾကတဲ့ထဲမွာ ေထာင့္ကြင္း
“<” ေနာက္ကပ္ရပ္က စာလုံးကုိ ကလစ္ႏွိပ္လိုက္တာနဲ႔ ညာဘက္မွာ သူနဲ႔ဆုိင္တဲ့
css ကုိ ျပေပးမွာ ျဖစ္ပါတယ္။ css ဘက္အျခမ္းမွာေတာ့ css တစ္ခ်ဳိ႕ကုိ css
စာေၾကာင္း ေရွ႕က stop icon ကုိ ပိတ္လိုက္ ဖြင့္လုိက္ လုပ္ၿပီး error
ရွာတာတုိ႔ ဘာတုိ႔ လုပ္ၾကည့္လို႔ရပါေသးတယ္၊ အခုကေတာ့ error ရွာစရာ
ကုိယ္တုိင္ေရးထားတဲ့ code မရွိေတာ့ css အပိတ္ အဖြင့္ လုပ္ၿပီး
ေလ့လာၾကည့္ၾကေပါ့ဗ်ာ၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အခ်ိန္နည္းနည္းပုိေပးၿပီး
ေလွ်ာက္စမ္းၾကည့္ေစခ်င္တယ္ဗ်၊ တစ္ျခား site ေတြကုိ ဝင္ၾကည့္တဲ့အခါမွာလဲ
သူတုိ႔ site ေတြကုိ firebug နဲ႔ ဝင္ကလိၾကည့္ေပါ့ဗ်ာ၊ ဒါမွ
မ်ားမ်ားတတ္မွာဗ်။ firebug က အရမ္းအသုံးဝင္တဲ့ tool
တစ္ခုျဖစ္လာတဲ့ေနာက္ပုိင္းမွာ browser တုိင္းလိုလုိက firebug လုိ element
ေတြကုိ inspect လုပ္လို႔ရတဲ့ tool ေတြကုိ default အေနနဲ႔
ထည့္သြင္းလာၾကပါတယ္၊
firefox မွာဆုိ ctrl+shift+i
google chrome နဲ႔ IE မွာဆုိ f12 နဲ႔
opera မွာဆုိ right click ႏွိပ္ၿပီး inspect element ကုိ ေရြးၿပီးေတာ့ default inspect tool ေတြကုိ အသုံးျပဳႏုိင္ပါတယ္၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အႀကိဳက္ဆုံးပါပဲ။
ကဲ … website analyzing ကေတာ့ ဒီေလာက္ပါပဲဗ်ာ၊ ေနာက္လာမယ့္ သင္ခန္းစာမွာေတာ့ html, css code ေတြကုိ စေရးသားပါေတာ့မယ္၊ ေနာက္တစ္ပတ္ေလာက္မွ ေရးျဖစ္မယ္ ထင္တယ္ဗ်၊
ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔ စေရးလို႔ရပါၿပီ၊ code စေရးတဲ့အခါမွာ ေရးဖို႔
software (text editor လို႔ ေခၚပါတယ္) လိုပါတယ္၊ အခုအခ်ိန္မွာေတာ့ open
source text editor ျဖစ္တဲ့ “notepad++”
ကုိ download လုပ္ၿပီး သုံးပါ။ ဒီ သင္ခန္းစာ အစအဆုံး
ၿပီးသြားၿပီဆုိရင္ေတာ့ notepad++ ထက္ ပုိေကာင္းတဲ့ text editor ေတြသုံးပါ၊
ကဲ .. ကၽြန္ေတာ္တုိ႔မွာ text editor လည္းရွိေနၿပီဆုိေတာ့ coding
စေရးၾကတာေပါ့။ notepad++ မွာ ေအာက္က code ေတြကုိ လုိက္ေရးပါ။
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
အဲဒီလိုေရးၿပီးၿပီဆုိရင္ေတာ့ notepad++ မွာ flie>save ကုိ သြားၿပီးေတာ့ ေရးၿပီးသားကုိ သိမ္းလိုက္ပါ၊ file name ကုိေတာ့ index.html လို႔ ေပးလိုက္ပါ။ file name ကုိ အႀကီးမသုံးရပါ၊ space မျခားရပါ၊ space အစား “_” ကုိ သုံးပါတယ္။ online ေပၚတင္တဲ့အခါ server ေတြက linux server ေတြမ်ားပါတယ္၊ linux မွာက အေပၚက စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးရပါတယ္၊ server အေၾကာင္းရွင္းျပတာ မဟုတ္လို႔ အက်ယ္ေျပာမေနေတာ့ပါဘူး၊ အဲဒီ စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးပါ၊ အလ်ဥ္းသင့္ရင္ server အေၾကာင္း ေရးပါဦးမယ္။ ဒါဆုိ ကၽြန္ေတာ္တုိ႔ သိမ္းၿပီးၿပီဆုိရင္ code ကုိ ရွင္းျပေပးပါမယ္။
ပထမဆုံး တစ္ေၾကာင္းျဖစ္တဲ့ “<!DOCTYPE html>” ဆုိတာက browser ေတြကုိ ဒီ document အမ်ဳိးအစား (document type) က html အမ်ဳိးအစားျဖစ္တယ္လို႔ ေျပာလုိက္တာျဖစ္ပါတယ္။
ဒါဆုိ ကၽြန္ေတာ္တုိ႔လည္း အခုကၽြန္ေတာ္တုိ႔ ေရးေနတာ html ဖုိင္ဆုိတာ သိသြားၿပီေပါ့၊ html ဖုိင္ျဖစ္တဲ့အတြက္ “<html>” နဲ႔ ဖြင့္ၿပီေးတာ့ “</html>” နဲ႔ ျပန္ပိတ္ေပးရပါတယ္။ အဲဒီ html အထဲမွာမွ head နဲ႔ body ကုိလည္း အဖြင့္ tag, အပိတ္ tag ေတြနဲ႔ ထည့္ေပးရပါတယ္၊ ေခါင္းနဲ႔ ကုိယ္ တပ္ေပးလိုက္တာေပါ့
။ tag ဆုိတာ ဘာႀကီးလဲ ဆုိေတာ့ ကၽြန္ေတာ္တုိ႔ ေထာင့္ကြင္း “<” နဲ႔
“>” ပါရင္ tag လုိ႔ ေခၚပါတယ္။ tag ေတြမွာမွ slash “/” မပါတာက
အဖြင့္ျဖစ္ၿပီးေတာ့၊ ပါရင္ အပိတ္ tag ျဖစ္ပါတယ္၊ (ဥပမာ။ ။
<head> သည္ head အဖြင့္ tag ျဖစ္ၿပီး </head> သည္ head အပိတ္
tag ျဖစ္ပါသည္။)
ဒါဆုိရင္ ကၽြန္ေတာ္ဖုိင္ထဲမွာ head ပုိင္းနဲ႔ body ပုိင္း ဆုိၿပီး ႏွစ္ပုိင္းရပါၿပီ၊ အဲဒါေတြကုိ div ေတြနဲ႔ သြား မေရာပါနဲ႔၊ div တစ္ခုမွ မပါေသးပါဘူး၊ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ div ေတြကုိ body ထဲကုိ ထည့္ပါေတာ့မယ္၊ ေတာင္းပန္ပါတယ္၊ ေအာက္က ဗီဒီယုိကုိ ဆက္ၾကည့္လိုက္ပါ၊ စာေရးရတာ အရမ္းအခ်ိန္ၾကာၿပီး နားမလည္မွာစုိးလို႔ပါ။
မဂၤလာပါ …အရင္တစ္ေခါက္ကေတာ့ ကၽြန္ေတာ္တုိ႔ “Coding header of Myanmar Web Designer”
ကုိ ေရးခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ေခါက္ post မွာေတာ့ mainmenu အပုိင္းကုိ ေရးမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ့္အေနနဲ႔ “firebug” addon ကုိ မိတ္ဆက္ေပးခဲ့ၿပီး အသုံးျပဳပုံကုိ ရွင္းျပခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ခါ firefox addon ေနာက္တစ္ခုကုိ ကၽြန္ေတာ္ မိတ္ဆက္ေပးမွာျဖစ္ပါတယ္၊ firefox addon ျဖစ္တဲ့အတြက္ firefox မွာပဲ အလုပ္လုပ္မွာပါ၊ တစ္ျခား browser ေတြအတြက္လည္း ရွာရင္ေတာ့ ရွိႏုိင္ပါတယ္၊ အဲဒီ addon ကေတာ့ …
“web developer” addon ျဖစ္ပါတယ္။ ဒီ addon က လုပ္ႏုိင္တဲ့ လုပ္ငန္းေတြကေတာ့ အမ်ားႀကီးေပါ့။ အဲဒီထဲကမွ ကၽြန္ေတာ္က အလ်ဥ္းသင့္သေလာက္ပဲ ေဖာ္ျပသြားမွာ ျဖစ္ပါတယ္၊ က်န္တာေတြကုိေတာ့ ကုိယ့္ဘာသာ စမ္းသပ္ၾကည့္ႏုိင္ရင္ ပုိေကာင္းတာေပါ့။ အစကေတာ့ ကၽြန္ေတာ္ internet connection ကုိ ငဲ့ၿပီး စာေတြနဲ႔ပဲ သင္ေပးဖို႔ လုပ္ခဲ့ပါတယ္။ ဒါေပမယ့္ တစ္ကယ္တန္းက်ေတာ့ စာနဲ႔ သင္မယ္ဆုိရင္၊ စာေတြအမ်ားႀကီးေရးရတဲ့အတြက္ အခ်ိန္ပုိကုန္ပါတယ္၊ အခ်ိန္ပုိကုန္ေတာ့ တစ္ပတ္ တစ္ပတ္ကုိ နည္းနည္းပဲ သင္ႏုိင္ပါတယ္၊ ေနာက္တစ္ခုက စာနဲ႔ရွင္းျပေတာ့ နားမလည္ဖုိ႔ ရာခုိင္ႏႈန္းပုိမ်ားပါတယ္၊ video နဲ႔က်ေတာ့ သင္ျပေပးတာကုိ လုိက္ၾကည္လို႔ရေတာ့ ပုိနားလည္မယ္ထင္ပါတယ္။ video ေတြကုိ download လုပ္ရတာ အဆင္ေျပေအာင္ ၁၀ မိနစ္ဝန္းက်င္ အပုိင္းေလးေတြ record လုပ္ေပးထားပါတယ္။ ေနာက္ပုိင္းမွာ ျမန္မာႏုိင္ငံရဲ႕ IT ေလာကမွာ web က ေတာ္ေတာ္ေလး တြင္က်ယ္လာဖုိ႔ ရွိပါတယ္၊ ဒါေၾကာင့္ ေနာက္ပုိင္းက်ရင္ web design နဲ႔ ပတ္သတ္ၿပီးေတာ့ အလုပ္အကုိင္ အခြင့္အလမ္းေတြ မ်ားလားမွာပါ။ ကုိယ့္ဘက္က အဆင္သင့္ ျဖစ္ေနဖုိ႔ လုိပါတယ္။ ေလ့လာရတာ အဆင္မေျပတာရွိရင္ email တုိ႔ chat တုိ႔ကေန မေမးပဲ comment မွာ ေမးခဲ့ႏုိင္ပါတယ္၊ ဒါမွသာ တစ္ျခားသူေတြလည္း ပုိ ဗဟုသုတ ရႏုိင္မွာ ျဖစ္ပါတယ္။youtube မွာက default အေနနဲ႔ ၁၅ မိနစ္ထက္ပုိတဲ့ video ေတြဆုိ ေပးမတင္ပါဘူး၊ ကုိယ့္ဘာသာ limit ကုိ တုိးလုိ႔ေတာ့ ရပါတယ္၊ ဒါေပမယ့္ သူက ႏုိင္ငံအေပၚမူတည္ပါတယ္၊ ျမန္မာႏုိင္ငံလည္း တုိးလို႔ေတာ့ရပါတယ္၊ ဖုန္းနံပါတ္ နဲ႔ verify လုပ္ခုိင္းပါတယ္၊ ကြၽန္ေတာ့္ ဖုန္းနံပါတ္နဲ႔ verify လုပ္လို႔မရလို႔ ေနာက္ထပ္ google service တစ္ခုျဖစ္တဲ့ “google drive” မွာ ကြၽန္ေတာ္ တင္ၿပီးေတာ့ share လုပ္ထားတာျဖစ္ပါတယ္၊ အက်ယ္ၾကည့္ခ်င္ရင္ “How to create menu with html and css” ကုိ ကလစ္ႏွိပ္ၿပီး သြားၾကည့္လို႔ရပါတယ္။Google Drive မွာ download လုပ္ဖုိ႔ အဆင္မေျပတဲ့သူမ်ားအတြက္ http://www.youtube.com/watch?v=2emQv4s20XY&feature=youtu.be မွာ ထပ္တင္ေပးထားပါတယ္၊ ၂ ေနရာလုံးက download လုပ္လို႔ရပါတယ္။
မဂၤလာပါ …ဒီတစ္ပတ္ေတာ့
အားလပ္ရက္ ပုိရလို႔ ကၽြန္ေတာ္ footer အတြက္ပါ video record
လုပ္ထားလုိက္ပါတယ္။ ဒီသင္ခန္းစာက website တစ္ခု တည္ေဆာက္ျခင္းရဲ႕ အပုိင္း
(၄) လုိ႔ ေျပာလို႔ရပါတယ္။ က်န္အပုိင္းမ်ားကုိ မဖတ္ဖူးေသးရင္ ဒီသင္ခန္းစာကုိ
မေလ့လာခင္ က်န္အပုိင္း သုံးပုိင္းကုိ အရင္ဖတ္ရမွာျဖစ္ပါတယ္၊
က်န္တဲ့အပုိင္းေတြကေတာ့ ေအာက္ပါအတုိင္းျဖစ္ပါတယ္။
အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၁)၊ (၂)၊ (၃) ကုိ ဖတ္ၿပီးသားလူေတြကေတာ့ အခုသင္ခန္းစာအတြက္ ေအာက္က video ကုိ ၾကည့္ပါ။
အခု ေျပာျပေပးမယ့္ သင္ခန္းစာကုိေတာ့ ေအာက္က အပုိင္း ၁၊ ၂၊ ၃၊ ၄ ေတြကုိ ဖတ္ၾကည့္ၿပီး လုိက္လုပ္ဖူးတဲ့ လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္၊
အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၄) — Coding footer of Myanmar Web Designer
ဒါဆုိရင္ ကြၽန္ေတာ္တုိ႔ သင္ခန္းစာ စလိုက္ၾကရေအာင္ဗ်ာ …
How to write a jQuery slider (jQuery ျဖင့္ slider ေရးနည္း)
မဂၤလာပါ …ဒီတစ္ပုိင္းကေတာ့
website ေရးျခင္းရဲ႕ ေနာက္ဆုံး အပုိင္းျဖစ္ပါတယ္၊ ကၽြန္ေတာ္ တင္ေပးထားတဲ့
သင္ခန္းစာေတြကုိ ေတာက္ေလွ်ာက္ လုိက္လုပ္တဲ့လူဆုိရင္ေတာ့ အခု သင္ခန္းစာ
ၿပီးရင္ website တစ္ခုကုိ ေရးတတ္မွာ ေသခ်ာပါတယ္။ ဒီ post
အခုမွေတြ႕တဲ့လူေတြအတြက္လည္း အရင္သင္ခန္းစာေတြကုိ ျပန္ညႊန္းေပးပါ့မယ္။
အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၄) — Coding footer of Myanmar Web Designer
အပုိင္း (၅) — jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)
ဒီေန႔ video ကေတာ့ သုံးပုိင္းရွိပါတယ္၊ ၃ပိုင္း ဆုိလို႔ လန္႔မသြားပါနဲ႔ သုုံးခုေပါင္းမွ ၂၇ မိနစ္ေလာက္ပဲ ရွိတာပါ၊ အဲဒီ video ေတြကေတာ့
0:01 / 13:26 web lay-outing with html and css (part-I)
0:00 / 7:11 web lay-outing with html and css (part-II)
firefox မွာဆုိ ctrl+shift+i
google chrome နဲ႔ IE မွာဆုိ f12 နဲ႔
opera မွာဆုိ right click ႏွိပ္ၿပီး inspect element ကုိ ေရြးၿပီးေတာ့ default inspect tool ေတြကုိ အသုံးျပဳႏုိင္ပါတယ္၊ ကၽြန္ေတာ္ကေတာ့ firebug ကုိ အႀကိဳက္ဆုံးပါပဲ။
ကဲ … website analyzing ကေတာ့ ဒီေလာက္ပါပဲဗ်ာ၊ ေနာက္လာမယ့္ သင္ခန္းစာမွာေတာ့ html, css code ေတြကုိ စေရးသားပါေတာ့မယ္၊ ေနာက္တစ္ပတ္ေလာက္မွ ေရးျဖစ္မယ္ ထင္တယ္ဗ်၊
Website ေရးနည္း HTML+CSS (အပုိင္း ၂)
မဂၤလာပါ …ဒီတစ္ပါတ္ေတာ့ ကၽြန္ေတာ္တုိ႔ html နဲ႔ css
code ေတြကုိ စေရးရပါေတာ့မယ္။ မေရးခင္ ဘယ္ language က ဘာအတြက္
သုံးတယ္ဆုိတာေလး ေျပာခ်င္ပါတယ္။ html ဆုိတာကေတာ့ “Hyper Text Markup
Language” ရဲ႕ အတုိေကာက္ျဖစ္ၿပီးေတာ့ website မွာ content (စာ, ဓာတ္ပုံ,
..) ေတြထည့္ဖုိ႔ သုံးရတဲ့ language ျဖစ္ၿပီးေတာ့၊ css (Cascading Style
Sheet) ကေတာ့ style sheet ဆုိတဲ့အတုိင္း html က ထည့္ထားတဲ့ content ေတြကုိ
ပုံစံေျပာင္းျခင္း၊ အလွဆင္ျခင္း အစရွိတာေတြကုိ လုပ္ႏုိင္တဲ့ language
ျဖစ္ပါတယ္။ဒီသင္ခန္းစာကုိ ဘယ္လိုလူေတြ လုိက္ႏုိင္မလဲ?
ဒီသင္ခန္းစာကုိ “Analyzing a website” ကုိ ဖတ္ဖူးတဲ့လူေတြ လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။
သင္ခန္းစာ အက်ယ္
အေျခခံ static website တစ္ခုျဖစ္ဖုိ႔အတြက္ ဆုိရင္ေတာ့ Photoshop, HTML, CSS အစရွိတာေတြကုိေတာ့ အနည္းဆုံး တတ္ေျမာက္ထားရမွာ ျဖစ္ပါတယ္၊ ဒါေပမယ့္ အခု ကၽြန္ေတာ္တုိ႔က online ကေနသင္ၾကားေနတာက တစ္ခ်က္၊ ဘာမွမသိေသးတဲ့လူေတြပါ လုိက္လုပ္ႏုိင္ေစခ်င္တာက တစ္ခ်က္ စတဲ့အခ်က္ေတြေၾကာင့္ Photoshop နဲ႔ design ဆြဲတဲ့အပုိင္းကုိ ကၽြန္ေတာ္ ခ်န္ထားခဲ့ပါရေစ။ ပုံမွန္အတုိင္းဆုိရင္ေတာ့ design ဆြဲ customer သုိ႔မဟုတ္ website လာအပ္တဲ့သူကုိျပ၊ သူတုိ႔က ႀကိဳက္တယ္၊ အုိေခ ဆုိမွ က်န္တဲ့ html, css နဲ႔ တစ္ျခားဟာေတြကုိ ဆက္ေရးရတာ ျဖစ္ပါတယ္။ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔မွာ ၾကည့္ဆြဲရမယ့္ design ဆြဲထားတာ မရွိပါဘူး။ ဆြဲထားတာ မရွိေတာ့ ရွိၿပီးသား ဒီဇုိင္းတစ္ခုကုိ ၾကည့္ဆြဲမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ ၾကည့္ဆြဲမယ့္ design ကေတာ့ online ေပၚမွာ ရွိၿပီးသားျဖစ္တဲ့ “Myanmar Web Designer” website ျဖစ္ပါတယ္။ ဒီတစ္ေခါက္ သင္ခန္းစာမွာေတာ့ Myanmar Web Designer ရဲ႕ header div အထိကုိ ၿပီးေအာင္ ေရးမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ စ မေရးခင္ Myanmar Web Designer ရဲ႕ header div ကုိ အေသးစိတ္ analysis လုပ္မွာျဖစ္ပါတယ္။ ေအာက္ကပုံကုိ ၾကည့္ပါ။ အေပၚပုိင္းက header div တစ္ခုလုံးကုိ ျပထားတာပါ၊ ေအာက္ပုိင္းကေတာ့ header div ကုိ အေသးစိတ္ ျပထားတာပါ၊ တစ္နည္းအားျဖင့္ ေအာက္က div ေတြ အကုန္လုံးက header div ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။
သင္ခန္းစာ အက်ယ္
အေျခခံ static website တစ္ခုျဖစ္ဖုိ႔အတြက္ ဆုိရင္ေတာ့ Photoshop, HTML, CSS အစရွိတာေတြကုိေတာ့ အနည္းဆုံး တတ္ေျမာက္ထားရမွာ ျဖစ္ပါတယ္၊ ဒါေပမယ့္ အခု ကၽြန္ေတာ္တုိ႔က online ကေနသင္ၾကားေနတာက တစ္ခ်က္၊ ဘာမွမသိေသးတဲ့လူေတြပါ လုိက္လုပ္ႏုိင္ေစခ်င္တာက တစ္ခ်က္ စတဲ့အခ်က္ေတြေၾကာင့္ Photoshop နဲ႔ design ဆြဲတဲ့အပုိင္းကုိ ကၽြန္ေတာ္ ခ်န္ထားခဲ့ပါရေစ။ ပုံမွန္အတုိင္းဆုိရင္ေတာ့ design ဆြဲ customer သုိ႔မဟုတ္ website လာအပ္တဲ့သူကုိျပ၊ သူတုိ႔က ႀကိဳက္တယ္၊ အုိေခ ဆုိမွ က်န္တဲ့ html, css နဲ႔ တစ္ျခားဟာေတြကုိ ဆက္ေရးရတာ ျဖစ္ပါတယ္။ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔မွာ ၾကည့္ဆြဲရမယ့္ design ဆြဲထားတာ မရွိပါဘူး။ ဆြဲထားတာ မရွိေတာ့ ရွိၿပီးသား ဒီဇုိင္းတစ္ခုကုိ ၾကည့္ဆြဲမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႔ ၾကည့္ဆြဲမယ့္ design ကေတာ့ online ေပၚမွာ ရွိၿပီးသားျဖစ္တဲ့ “Myanmar Web Designer” website ျဖစ္ပါတယ္။ ဒီတစ္ေခါက္ သင္ခန္းစာမွာေတာ့ Myanmar Web Designer ရဲ႕ header div အထိကုိ ၿပီးေအာင္ ေရးမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ စ မေရးခင္ Myanmar Web Designer ရဲ႕ header div ကုိ အေသးစိတ္ analysis လုပ္မွာျဖစ္ပါတယ္။ ေအာက္ကပုံကုိ ၾကည့္ပါ။ အေပၚပုိင္းက header div တစ္ခုလုံးကုိ ျပထားတာပါ၊ ေအာက္ပုိင္းကေတာ့ header div ကုိ အေသးစိတ္ ျပထားတာပါ၊ တစ္နည္းအားျဖင့္ ေအာက္က div ေတြ အကုန္လုံးက header div ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
အဲဒီလိုေရးၿပီးၿပီဆုိရင္ေတာ့ notepad++ မွာ flie>save ကုိ သြားၿပီးေတာ့ ေရးၿပီးသားကုိ သိမ္းလိုက္ပါ၊ file name ကုိေတာ့ index.html လို႔ ေပးလိုက္ပါ။ file name ကုိ အႀကီးမသုံးရပါ၊ space မျခားရပါ၊ space အစား “_” ကုိ သုံးပါတယ္။ online ေပၚတင္တဲ့အခါ server ေတြက linux server ေတြမ်ားပါတယ္၊ linux မွာက အေပၚက စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးရပါတယ္၊ server အေၾကာင္းရွင္းျပတာ မဟုတ္လို႔ အက်ယ္ေျပာမေနေတာ့ပါဘူး၊ အဲဒီ စည္းမ်ဥ္းေတြကုိ လုိက္နာေပးပါ၊ အလ်ဥ္းသင့္ရင္ server အေၾကာင္း ေရးပါဦးမယ္။ ဒါဆုိ ကၽြန္ေတာ္တုိ႔ သိမ္းၿပီးၿပီဆုိရင္ code ကုိ ရွင္းျပေပးပါမယ္။
ပထမဆုံး တစ္ေၾကာင္းျဖစ္တဲ့ “<!DOCTYPE html>” ဆုိတာက browser ေတြကုိ ဒီ document အမ်ဳိးအစား (document type) က html အမ်ဳိးအစားျဖစ္တယ္လို႔ ေျပာလုိက္တာျဖစ္ပါတယ္။
ဒါဆုိ ကၽြန္ေတာ္တုိ႔လည္း အခုကၽြန္ေတာ္တုိ႔ ေရးေနတာ html ဖုိင္ဆုိတာ သိသြားၿပီေပါ့၊ html ဖုိင္ျဖစ္တဲ့အတြက္ “<html>” နဲ႔ ဖြင့္ၿပီေးတာ့ “</html>” နဲ႔ ျပန္ပိတ္ေပးရပါတယ္။ အဲဒီ html အထဲမွာမွ head နဲ႔ body ကုိလည္း အဖြင့္ tag, အပိတ္ tag ေတြနဲ႔ ထည့္ေပးရပါတယ္၊ ေခါင္းနဲ႔ ကုိယ္ တပ္ေပးလိုက္တာေပါ့
။ tag ဆုိတာ ဘာႀကီးလဲ ဆုိေတာ့ ကၽြန္ေတာ္တုိ႔ ေထာင့္ကြင္း “<” နဲ႔
“>” ပါရင္ tag လုိ႔ ေခၚပါတယ္။ tag ေတြမွာမွ slash “/” မပါတာက
အဖြင့္ျဖစ္ၿပီးေတာ့၊ ပါရင္ အပိတ္ tag ျဖစ္ပါတယ္၊ (ဥပမာ။ ။
<head> သည္ head အဖြင့္ tag ျဖစ္ၿပီး </head> သည္ head အပိတ္
tag ျဖစ္ပါသည္။)ဒါဆုိရင္ ကၽြန္ေတာ္ဖုိင္ထဲမွာ head ပုိင္းနဲ႔ body ပုိင္း ဆုိၿပီး ႏွစ္ပုိင္းရပါၿပီ၊ အဲဒါေတြကုိ div ေတြနဲ႔ သြား မေရာပါနဲ႔၊ div တစ္ခုမွ မပါေသးပါဘူး၊ အဲဒီေတာ့ ကၽြန္ေတာ္တုိ႔ div ေတြကုိ body ထဲကုိ ထည့္ပါေတာ့မယ္၊ ေတာင္းပန္ပါတယ္၊ ေအာက္က ဗီဒီယုိကုိ ဆက္ၾကည့္လိုက္ပါ၊ စာေရးရတာ အရမ္းအခ်ိန္ၾကာၿပီး နားမလည္မွာစုိးလို႔ပါ။
Website ေရးနည္း HTML+CSS (အပုိင္း ၃)
ကုိ ေရးခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ေခါက္ post မွာေတာ့ mainmenu အပုိင္းကုိ ေရးမွာျဖစ္ပါတယ္။ ကၽြန္ေတာ့္အေနနဲ႔ “firebug” addon ကုိ မိတ္ဆက္ေပးခဲ့ၿပီး အသုံးျပဳပုံကုိ ရွင္းျပခဲ့ၿပီး ျဖစ္ပါတယ္၊ ဒီတစ္ခါ firefox addon ေနာက္တစ္ခုကုိ ကၽြန္ေတာ္ မိတ္ဆက္ေပးမွာျဖစ္ပါတယ္၊ firefox addon ျဖစ္တဲ့အတြက္ firefox မွာပဲ အလုပ္လုပ္မွာပါ၊ တစ္ျခား browser ေတြအတြက္လည္း ရွာရင္ေတာ့ ရွိႏုိင္ပါတယ္၊ အဲဒီ addon ကေတာ့ …
“web developer” addon ျဖစ္ပါတယ္။ ဒီ addon က လုပ္ႏုိင္တဲ့ လုပ္ငန္းေတြကေတာ့ အမ်ားႀကီးေပါ့။ အဲဒီထဲကမွ ကၽြန္ေတာ္က အလ်ဥ္းသင့္သေလာက္ပဲ ေဖာ္ျပသြားမွာ ျဖစ္ပါတယ္၊ က်န္တာေတြကုိေတာ့ ကုိယ့္ဘာသာ စမ္းသပ္ၾကည့္ႏုိင္ရင္ ပုိေကာင္းတာေပါ့။ အစကေတာ့ ကၽြန္ေတာ္ internet connection ကုိ ငဲ့ၿပီး စာေတြနဲ႔ပဲ သင္ေပးဖို႔ လုပ္ခဲ့ပါတယ္။ ဒါေပမယ့္ တစ္ကယ္တန္းက်ေတာ့ စာနဲ႔ သင္မယ္ဆုိရင္၊ စာေတြအမ်ားႀကီးေရးရတဲ့အတြက္ အခ်ိန္ပုိကုန္ပါတယ္၊ အခ်ိန္ပုိကုန္ေတာ့ တစ္ပတ္ တစ္ပတ္ကုိ နည္းနည္းပဲ သင္ႏုိင္ပါတယ္၊ ေနာက္တစ္ခုက စာနဲ႔ရွင္းျပေတာ့ နားမလည္ဖုိ႔ ရာခုိင္ႏႈန္းပုိမ်ားပါတယ္၊ video နဲ႔က်ေတာ့ သင္ျပေပးတာကုိ လုိက္ၾကည္လို႔ရေတာ့ ပုိနားလည္မယ္ထင္ပါတယ္။ video ေတြကုိ download လုပ္ရတာ အဆင္ေျပေအာင္ ၁၀ မိနစ္ဝန္းက်င္ အပုိင္းေလးေတြ record လုပ္ေပးထားပါတယ္။ ေနာက္ပုိင္းမွာ ျမန္မာႏုိင္ငံရဲ႕ IT ေလာကမွာ web က ေတာ္ေတာ္ေလး တြင္က်ယ္လာဖုိ႔ ရွိပါတယ္၊ ဒါေၾကာင့္ ေနာက္ပုိင္းက်ရင္ web design နဲ႔ ပတ္သတ္ၿပီးေတာ့ အလုပ္အကုိင္ အခြင့္အလမ္းေတြ မ်ားလားမွာပါ။ ကုိယ့္ဘက္က အဆင္သင့္ ျဖစ္ေနဖုိ႔ လုိပါတယ္။ ေလ့လာရတာ အဆင္မေျပတာရွိရင္ email တုိ႔ chat တုိ႔ကေန မေမးပဲ comment မွာ ေမးခဲ့ႏုိင္ပါတယ္၊ ဒါမွသာ တစ္ျခားသူေတြလည္း ပုိ ဗဟုသုတ ရႏုိင္မွာ ျဖစ္ပါတယ္။youtube မွာက default အေနနဲ႔ ၁၅ မိနစ္ထက္ပုိတဲ့ video ေတြဆုိ ေပးမတင္ပါဘူး၊ ကုိယ့္ဘာသာ limit ကုိ တုိးလုိ႔ေတာ့ ရပါတယ္၊ ဒါေပမယ့္ သူက ႏုိင္ငံအေပၚမူတည္ပါတယ္၊ ျမန္မာႏုိင္ငံလည္း တုိးလို႔ေတာ့ရပါတယ္၊ ဖုန္းနံပါတ္ နဲ႔ verify လုပ္ခုိင္းပါတယ္၊ ကြၽန္ေတာ့္ ဖုန္းနံပါတ္နဲ႔ verify လုပ္လို႔မရလို႔ ေနာက္ထပ္ google service တစ္ခုျဖစ္တဲ့ “google drive” မွာ ကြၽန္ေတာ္ တင္ၿပီးေတာ့ share လုပ္ထားတာျဖစ္ပါတယ္၊ အက်ယ္ၾကည့္ခ်င္ရင္ “How to create menu with html and css” ကုိ ကလစ္ႏွိပ္ၿပီး သြားၾကည့္လို႔ရပါတယ္။Google Drive မွာ download လုပ္ဖုိ႔ အဆင္မေျပတဲ့သူမ်ားအတြက္ http://www.youtube.com/watch?v=2emQv4s20XY&feature=youtu.be မွာ ထပ္တင္ေပးထားပါတယ္၊ ၂ ေနရာလုံးက download လုပ္လို႔ရပါတယ္။
Website ေရးနည္း HTML+CSS (အပုိင္း ၄)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၁)၊ (၂)၊ (၃) ကုိ ဖတ္ၿပီးသားလူေတြကေတာ့ အခုသင္ခန္းစာအတြက္ ေအာက္က video ကုိ ၾကည့္ပါ။
https://www.youtube.com/watch?v=1SaYv_XePwE
Website ေရးနည္း HTML+CSS (အပုိင္း ၅)
jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)
မဂၤလာပါ …အရင္တစ္ပတ္ကေတာ့
ကြၽန္ေတာ္တုိ႔ Myanmar Web Designer ရဲ႕ main body အပုိင္းကုိ
ခ်န္ထားခဲ့ၿပီး footer ကုိ အရင္ သင္ျပေပးခဲ့ပါတယ္၊ ဒီတစ္ပတ္မွာေတာ့ main
body ထဲက content ေတြကုိ layout ခ် တာကုိ သင္ျပေပးမွာျဖစ္ပါတယ္။
အခု သင္ခန္းစာကုိ ဘယ္သူေတြ လုိက္ႏုိင္မလဲ ?အခု ေျပာျပေပးမယ့္ သင္ခန္းစာကုိေတာ့ ေအာက္က အပုိင္း ၁၊ ၂၊ ၃၊ ၄ ေတြကုိ ဖတ္ၾကည့္ၿပီး လုိက္လုပ္ဖူးတဲ့ လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္၊
အပုိင္း (၁) — Analyzing a website (ဝဘ္ဆုိက္ တစ္ခုကုိ ခြဲျခမ္းစိတ္ျဖာျခင္း)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၄) — Coding footer of Myanmar Web Designer
ဒါဆုိရင္ ကြၽန္ေတာ္တုိ႔ သင္ခန္းစာ စလိုက္ၾကရေအာင္ဗ်ာ …
How to write a jQuery slider (jQuery ျဖင့္ slider ေရးနည္း)
Website ေရးနည္း HTML+CSS (အပုိင္း ၆)
အပုိင္း (၂) — Coding header of Myanmar Web Designer
အပုိင္း (၃) — Coding main menu of Myanmar Web Designer
အပုိင္း (၄) — Coding footer of Myanmar Web Designer
အပုိင္း (၅) — jQuery slider တစ္ခု ဖန္တီးျခင္း (Create a jQuery slider)
ဒီေန႔ video ကေတာ့ သုံးပုိင္းရွိပါတယ္၊ ၃ပိုင္း ဆုိလို႔ လန္႔မသြားပါနဲ႔ သုုံးခုေပါင္းမွ ၂၇ မိနစ္ေလာက္ပဲ ရွိတာပါ၊ အဲဒီ video ေတြကေတာ့
0:00 / 7:11 web lay-outing with html and css (part-II)
