Website ေရးနည္း သင္ခန္းစာ အက်ဥ္း
ဒီ post ဟာ website ေရးျခင္းကုိ စိတ္ဝင္စားတဲ့ လူေတြအတြက္ ပထမဆုံး ေျခလွမ္းျဖစ္မယ္ထင္ပါတယ္။ အခု သင္ခန္းစာမွာ website တစ္ခုရဲ႕ တည္ေဆာက္ပုံကုိ ခြဲျခမ္းစိတ္ျဖာ ေလ့လာမွာ ျဖစ္ပါတယ္။
ဘယ္လိုလူေတြက ဒီသင္ခန္းစာကုိ လုိက္ႏုိင္မလဲ?
အခု သင္ခန္းစာကုိ website တစ္ခုကုိ ျမင္ဖူးတဲ့လူတုိင္း လုိက္ႏုိင္မွာ ျဖစ္ပါတယ္။
ကၽြန္ေတာ္ ဒီ blog ကေနၿပီးေတာ့ တစ္ပတ္ တစ္ခါ အားတဲ့အခ်ိန္ေတြကုိ အသုံးျပဳၿပီး static website တစ္ခုေရးပုံကုိ အစအဆုံး လမ္းညႊန္သြားေပးဖုိ႔ စဥ္းစားထားပါတယ္။ static website ဆုိတာ ဘာလဲ မသိရင္ google မွာ “what is static website” လို႔ ရုိက္ရွာၾကည့္ပါ။ ကၽြန္ေတာ့္ post ထဲမွာ ထည့္မေရးတာက မလုိအပ္ပဲ post ရွည္သြားမွာ နဲ႔ လမ္းညႊန္မယ့္လူမရွိရင္ မလုပ္တတ္မွာစုိးလုိ႔ ထည့္မေရးရတာပါ။ ေနာက္ပုိင္းမွာလည္း မသိတဲ့ စကားလုံးမ်ား ပါခဲ့မယ္ဆုိရင္ ဒီလုိပဲ google မွာ ရွာၾကည့္ပါ၊ ရွာၾကည့္လို႔မွ နားမလည္ဘူးဆုိရင္ေတာ့ comment ေရးပါ။ဒီတစ္ပတ္ ကၽြန္ေတာ္တုိ႔ရဲ႕ ပထမဆုံး ေျခလွမ္းက code ေရးတာေတြ ဘာေတြ လုံးဝ မဟုတ္ေသးပါဘူး၊ သူမ်ားေတြ ေရးထားၿပီးသား website ကုိ ဝင္ၾကည့္တဲ့အခါမွာ အဲဒီ 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 တည္ေဆာက္ပုံကုိ 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 လုပ္ၿပီးေတာ့ ေအးေအးေဆးေဆး ေစာင့္ၾကပါဦး၊ ေက်းဇူးတင္ပါတယ္။
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by forexlive from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.