နည္းပညာ

ကြန္ပ်ဴတာ နည္းပညာမ်ား, နည္းပညာ software ႏွင့္ နည္းပညာ blog

လက္ေရြးစင္ သင္ခန္းစာမ်ား ၾကည့္ရန္။

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

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

  1. Blog မွာ Facebook Comment ဘယ္လိုထည့္ရလဲသိခ်င္လို႔ပါခင္ဗ် . . . ျပီးေတာ့ Blog Post ေအာက္မွာ Related Post ဘယ္လို ထည့္ရလဲ မသိလို႔ပါခင္ဗ် ာ . . . . အားရင္ ေျပာျပေပးလို႔ရမလားခင္ဗ်ာ . . .

    1. Blog က blogspot လား၊ WordPress လား? ဒါမွမဟုတ္ တစ္ျခားဟာလား?

      1. view background image လုပ္မရျဖစ္ေနလိ့ုဘယ္လိုဆက္လုပ္ရမလဲ ကူညီပါအံုးဆရာ

  2. သင္ခန္းစာမ်ားအား pdf format မ်ား ေဒါင္းခ်င္ပါတယ္

  3. firebug ကတင္လုိ႔မရဘူးျဖစ္ေနတယ္ဗ်။ေဒါင္းလုပ္ဆုိပီး ရပ္ေနတယ္။

    1. အခုေနာက္ပုိင္း browser ေတြက firebug သီးသန္႔တင္ဖုိ႔ မလုိေတာ့ပါဘူး။ Right click ေထာက္လုိက္ရင္ Inspect element သုိ႔မဟုတ္ Inspect နဲ႔ စတာ တစ္ခုခု ပါပါတယ္။ အဲဒါကုိ ႏွိပ္လိုက္ရင္ ရပါၿပီ။ ဒါမွမဟုတ္ keyboard က f12 ဆုိတဲ့ ခလုတ္ကုိႏွိပ္ရင္လည္း ရပါတယ္။

  4. ဆရာရဲ့….စိတ္ဓာတ္…ေစတနာေတြကို အရမ္းေလးစားေၾကာင္းပဏာမအေနနဲ ့ ဂုဏ္ျပဳလုိပါတယ္။

    ဆရာ့ရဲ့ အြန္းလိုင္းသင္ခန္းစာေတြကို စတင္ျပီးေလ့လာသင္ယူေနပါျပီ။ ကြ်န္ေတာ္ အရမ္းဝါသနာပါတဲ့အလုပ္လည္းျဖစ္ပါတယ္။
    အမ်ားအေပၚ ေစတနာေမတၱာထားျပီး ေဝငွေပးတဲ့ ဆရာ…ကိုယ္က်န္းမာ စိတ္ခ်မ္းသာပါေစလို ့ဆုမြန္ေကာင္းေခြ်ေပးရင္း….

    အြန္လိုင္း တပည့္

  5. အခုအပိုင္း(၁)ကိုေလ့လာလိုက္ေတာ့website တစ္ခုကေန code ေတြကိုဘယ္လိုေလ့လာရမလဲဆိုတာသိရပါတယ္

  6. ဆရာ က်ြန္ေတာ့ email ထဲကို web design ဆြဲနည္း သင္ခန္းစာေတြကို email ထဲကို ပိုေပးပါလား က်ြန္ေတာ္ကို သင္ေပးပါဦး

  7. ဆရာ သင္တန္းမတက္ေတာ့သိပ္နားမလည္ေသးဘူးဗ်ာ
    ဆရာ့ရဲ႕သင္ခန္းစာေတြေတာ့ခဏခဏျပန္ဖတ္ေနပါတယ္
    ေက်းဇူးတင္ပါတယ္

  8. website ေတာ့ေရးပီးပီဆရာ ူသငယ္ခ်င္းက google မွာဘယ္လိုရွာရမွာလဲ
    -readmore ေနာက္ကစာ ဘယ္လုိေရးရမလဲ
    mainmenu,Oursevice အစရွိသည့္ စာေနာက္ ဘယ္လိုေရးရ

    ျပန္လည္ေျဖေပးပါဆရာ ေက်းဇူးတင္ပါတယ္

  9. ဆရာ့ဆီမွာ သင္တန္းတက္ခ်င္တယ္ ဆရာ့ကိုဆက္သြယ္လို႕ရမဲ့ဖုန္းနံပါတ္ေလးေပးပါလားဆရာ ေက်းဇူးတင္ပါတယ္

  10. ခုလိုေလ့လာခြင့္ရတာအရမ္းေက်းဇူးတင္ပါတယ္
    ေလးစားပါတယ္ခင္ဗ်ာ
    ေနာင္လည္းသည့္ထက္မကေ၀မွ်ႏိုင္ပါေစ
    ကၽြန္ေတာ္ရဲ႔ Blog မွာလည္းထပ္ဆင့္ျပန္လည္ေဖာ္ျပခြင့္ျပဳပါခင္ဗ်ာ

    1. ရပါတယ္။ ခြင့္ေတာင္းတဲ့အတြက္လည္း ေလးစားပါတယ္။ အပန္းမႀကီးဘူးဆုိရင္ Credit ေလးထည့္ေပးပါေနာ ..

  11. အရမ္းေက်းဇူးတင္ပါတယ္။ က်ေတာ္ေလ့လာေနတာ ၾကာပီး div ဆုိတာကုိ ဘာလဲဆုိတာမသိဘူးျဖစ္ေနတာ။ ေနာက္ပီး ခြဲျခမ္းစိတ္ျဖာၿပီး ျပထားလုိ႔ ေလ့လာသူေတြကုိ ပုိပီးျမင္ေစတယ္။ နားလည္ေစတယ္။ ေက်းဇူးပါ

Leave a Reply

Your email address will not be published. Required fields are marked *