Full Playlists
Youtube မှာ နောက်ထပ် video tutorial တွေတင်ဖို့ရှိသေးတာမို့လို့ Youtube channel ကို subscribe လုပ်ထားပါဦး …
မင်္ဂလာပါ …ဒီတစ်ပါတ်တော့ ကျွန်တော်တို့ 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 ထဲကို ထည့်ပါတော့မယ်၊ တောင်းပန်ပါတယ်၊ အောက်က ဗီဒီယိုကို ဆက်ကြည့်လိုက်ပါ၊ စာရေးရတာ အရမ်းအချိန်ကြာပြီး နားမလည်မှာစိုးလို့ပါ။
