နည္းပညာ

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

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

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 ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။ 

 

ဒါဆုိရင္ ကၽြန္ေတာ္တုိ႔ စေရးလို႔ရပါၿပီ၊ 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 ထဲကုိ ထည့္ပါေတာ့မယ္၊ ေတာင္းပန္ပါတယ္၊ ေအာက္က ဗီဒီယုိကုိ ဆက္ၾကည့္လိုက္ပါ၊ စာေရးရတာ အရမ္းအခ်ိန္ၾကာၿပီး နားမလည္မွာစုိးလို႔ပါ။

 

ဗီဒီယုိ အပုိင္း ၁

 

ဗီဒီယုိ အပုိင္း ၂

 

ဗီဒီယုိ အပုိင္း ၃

 

ဗီဒီယုိ အပုိင္း ၄

 

ဗီဒီယုိ အပုိင္း ၅

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

  1. video No.3 က video No.4 နဲ႔ သြားတူေနတာကုိ ျပန္ျပင္လုိက္ပါၿပီ။ မွားေနတာကုိ ေျပာေပးတဲ့ ညီမ၊ ေက်းဇူးတင္ပါတယ္။

  2. video file ထဲက တစ္ခ်ိဳ႕ code ေတြကိုၾကည့္ရတာ သိပ္ပီပီျပင္ျပင္မျမင္ရဘူးဆရာေရ။ Link ခ်ိတ္တာကစၿပီး ေခါင္းကိုက္ေတာ့တာပါပဲ။ ဆရာ့ သင္ခန္းစာဖိုင္ေလးက်န္ေသးရင္ ဒီ web design tutorials အခန္းမွာပါတဲ့ code ေလးေတြကို Pdf နဲ႔ျဖစ္ျဖစ္ တင္ေပးေစခ်င္ပါတယ္ ဆရာ။ ေက်းဇူးတင္ပါတယ္။

    1. ဟုတ္လား … ကၽြန္ေတာ့္မွာေတာ့ မရွိေတာ့ဘူးဗ်။ ဒါေပမယ့္ SEO meta tag optimization သင္ခန္းစာမွာေတာ့ website တစ္ခုက source code ကုိ ဘယ္လိုၾကည့္ရမလဲဆုိတာ ေရးျပထားတယ္ဗ်။ အဲဒီသင္ခန္းစာဖတ္ၿပီးေတာ့ Myanmar Web Designer က code ေတြကုိ ဝင္ၾကည့္ေပါ့ဗ်ာ။ ဒါဆုိရင္ အဆင္ေျပမယ္ထင္တယ္ဗ်။

  3. အခုလုိ တင္ေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။
    ဒီလုိမ်ိဳးပညာရပ္ေတြဟာ တစ္ကိုယ္တည္းေလ့လာေနတာက အခ်ိန္ကုန္ေနတဲ့အတြက္
    သင္တန္းမ်ိဳးတက္ခ်င္ပါတယ္ခင္ဗ်ာ။
    ကူညီလမ္းညႊန္ေပးႏုိင္ဖုိ႔ ေမွ်ာ္လင့္ပါတယ္ခင္ဗ်ာ

  4. အရမ္းစိတ္ဝင္စားပါတယ္။ပိုက္ဆံမရွိလို႔ မၾကည့္ျဖစ္ေသးပါဘူးဗ်။

  5. အရမ္းကိုပညာရပါတယ္ အေျခံခံကေနစျပီးေလ့လာသူေတြအတြက္ တန္ဖိုးရွိပါတယ္ ဆက္ျပီးေတာ့လည္းတင္ေပးပါ အဆက္မျပတ္ေလ့လာေနပါတယ္ ေလးစားစြာျဖင့္

  6. HTML ေတာ့ေလ့လာထားပါတယ္
    HTML (5) ကေန ျပန္ျပီး စေလ့လာ လုိ႔ရမလား ဆရာ

  7. ညီမ ခုမွစေလ့လာေနတာပါ..တျခားဆိုက္ေတမွာလဲ ေလ့လာပါတယ္…ဒီဆိုက္က video ေတက.. ညီမ တကယ္သိခ်င္တ့ဲ အတိုင္း႐ွင္းျပေပးထားလို႔..အတိုင္းမသိဝမ္းသာပါတယ္..ေက်းဇူးလဲတင္ပါတယ္႐ွင့္

  8. background image ကေနေရွ့ဆက္တက္လို ့ မရဘူးၿဖစ္ေနတယ္ဆရာ
    code ထည့္ၿပီးတာေတာင္ အေရာင္ကတက္မလာဘူးၿဖစ္ေနတယ္
    ဘယ္လိုလုပ္ရမလဲဆရာ ရွင္းၿပေပးပါလာ

Leave a Reply

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