Website ေရးနည္း HTML+CSS (အပုိင္း ၁)

Analyzing a 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 ေတြကုိ စေရးသားပါေတာ့မယ္၊ ေနာက္တစ္ပတ္ေလာက္မွ ေရးျဖစ္မယ္ ထင္တယ္ဗ်၊ အဲဒါေၾကာင့္ subscribe လုပ္ၿပီးေတာ့ ေအးေအးေဆးေဆး ေစာင့္ၾကပါဦး၊ ေက်းဇူးတင္ပါတယ္။

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါေၾကာင္း ေျပာၾကားပါရေစ..ဆည္းဆာ မွ နည္းပညာမ်ားအား မည္သူမဆို လြတ္လပ္စြာ ကူးယူသုံးစြဲနိဳင္ပါတယ္..လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... ကြ်န္ေတာ္ ပိုင္ဆိုင္ေသာေနရာေလးအား ဆက္လက္ လည္ပါတ္လိုပါက { ဒီမွာ } သြားလိုက္ပါ