ဝက်ဘ်စာမျက်နှာမှ
ကြိုဆိုပါတယ်
စာမျက်နှာက ဗလာကြီးဆိုတော့
ငြီးငွေ့စရာပဲပေါ့
ဒါပေမယ့် ဝက်ဘ်စာမျက်နှာတိုင်းက
ဒီလိုပဲ အစပျိုးခဲ့ကြရတာပါ
အခု ဝက်ဘ်စာမျက်နှာ တည်ဆောက်ပုံကို
သရုပ်ပြသွားပါမယ်
ပထမဦးဆုံး
ဝက်ဘ်စာမျက်နှာရဲ့
အခြေခံအချက်များကို ပြပါမယ်။
ဝက်ဘ်စာမျက်နှာတိုင်းရဲ့ အစမှာ
DOCTYPE လို့ရေးထားတာက
ဒီစာမျက်နှာကို
HTML အသစ်နဲ့
ရေးထားကြောင်း
ဝက်ဘ် Browser ကို အသိပေးတာပါ
ဒီဇိုင်းအဟောင်းနဲ့မဟုတ်ပါဘူး။
နောက်တစ်ခုကတော့ Tag အကြောင်းပါ
HTML က စာမျက်နှာတစ်ခုနှင့်တစ်ခုကို
ချိတ်ဆက်ပေးတဲ့ နည်းပညာဖြစ်ပြီး
Tags တွေနဲ့ တည်ဆောက်ထားတာပါ
Tag ကို ထောင့်ချွန်ကွင်းနဲ့ ရေးပါတယ်
သင်္ချာလိုတွေးရင်တော့
ပိုကြီး၊ ပိုသေးသင်္ကေတတွေလို
ဖြစ်နေမှာပါ
ဝက်ဘ်စာမျက်နှာတိုင်းရဲ့
ပထမဆုံး Tag က
HTML tag ပါ
ဒါက HTML tag အဖွင့်ဖြစ်ပြီး
ဒါကတော့ အပိတ်ပါ။
အပိတ်မှာ မျဉ်းစောင်းခံပြီးပိတ်ဖို့
သိပ်အရေးကြီးပါတယ်။
HTML tag နဲ့ဖွင့်ပြီးရင်
အခြားသော tags များနဲ့
ဒီဝက်ဘ်စာမျက်နှာကို
တည်ဆောက်ရပါတယ်
အဲ့ဒါကြောင့် အောက်ရောက်မှပဲ
ပိတ်ပါတယ်။
အများအားဖြင့် အဖွင့်-အပိတ်
ရေးကြပေမယ့်
အားလုံးတော့မဟုတ်ပါဘူး။
နောက်တစ်ခုက
HTML tag အောက်က
Head tag အကြောင်းပါ။
Browser ရဲ့ စာမျက်နှာကို
Render လုပ်ပေးပါတယ်
ဒါပေမယ့် အသုံးပြုသူအနေနဲ့
မြင်ရမှာ မဟုတ်ပါဘူး။
အောက်က meta tag ကြည့်ရင်
အသေးစိတ်သိရမှာပါ။
ဥပမာ - အင်္ဂလိပ်ဘာသာရပ်မှ
သုံးနေကျ စကားလုံးတွေကို
အာရဗီဘာသာ ပြန်ဆိုတဲ့အခါ
လွယ်ကူစေပါတယ်။
အခု meta charset မှာ
utf-8 လို့ရေးရပါမယ်။
နောက် Title tag ကတော့
ဝက်ဘ်စာမျက်နှာကို
ခေါင်းစီးတပ်တာပါ
Browser ရဲ့ Tab နာမည်တွေ၊
Bookmarks နဲ့
ရှာဖွေမှုရလဒ်တွေအပြင်၊
ခန်း အကယ်ဒမီရဲ့ ဝက်ဘ်စာမျက်နှာ
မှာလည်းခေါင်းစီးရှိပါတယ်
အခု ခေါင်းစီးကို
ယုန်များအကြောင်း
All about rabbits ဆိုပြီး
ပြောင်းလိုက်မယ်
Tab မှာလည်း လိုက်ပြောင်းမှာပါ
ကောင်းပြီ။ အခုဒီလောက်နဲ့
Head tag ကို ပိတ်ပြီ။
နောက် Body tag အကြောင်းကို
ဆက်သွားရအောင်။
အခုဆို နည်းနည်းလောက်တော့
ပျင်းနေလောက်ရောပေါ့
ဟုတ်ပြီ၊ ဘာဆက်ရေး
ရင်ကောင်းမလဲ?
အခုက ယုန်တွေအကြောင်း
ဝက်ဘ်စာမျက်နှာ
ရေးနေတာဆိုတော့
ခေါင်းစဉ်ကြီးတစ်ခု တပ်လိုက်ပါမယ်
h1 Tag သုံးပြီး
ရေးလိုက်ပါပြီ
တကယ်တော့ ခေါင်းစဉ်
Tags ခြောက်ခု
h1, h2, h3,
h4, h5, h6 အထိ
သုံးနိုင်ပါတယ်။
h1 က အကြီးဆုံးဖြစ်ပြီး
h6 ကတော့ အငယ်ဆုံးပါ။
ခေါင်းစဉ်နည်းနည်း
ထပ်ထည့်ပါရစေ
h2 ကို ခေါင်းစဉ်ငယ်အဖြစ်
သုံးပါမယ်။
ပြီးတော့ သီချင်းအနည်းငယ်
ထပ်ထည့်မယ်။
အချက်အလက်အနည်းငယ်
ထပ်ထည့်မယ်။
ဒီဝက်ဒ်စာမျက်နှာကို
ယုန် မမြင်ဖူးသူတွေအတွက်
ရည်ရွယ်လိုက်ရအောင်
ဆိုတော့ ယုန်အကြောင်းကို
ရှင်းအောင် ဖော်ပြရပါမယ်
တကယ်တော့ စာတွေကို
စာပိုဒ်နဲ့ပြဖို့လိုတယ်
ဆိုတော့ ဘယ်လိုလုပ်ရမလဲ?
P tag ကိုသုံးမှာပေါ့
စာရိုက်ထည့်မနေတော့ဘဲ
စာကိုအပိုဒ်လိုက် ကူးယူပြီး
P tag ထဲမှာ ဖော်ပြလိုက်ရုံပဲ
လှသွားပြီ။
ကောင်းပြီ၊ အခုထပ်ပြီး
သီချင်းစာသားလေး
ထပ်ထည့်လိုက်မယ်။
သီချင်းကိုအပိုဒ်လိုက်
P tag နဲ့ ကူးထည့်လိုက်မယ်။
ကောင်းလိုက်တဲ့ သီချင်းတစ်ပုဒ်ပဲ
အဲနေဦး…
စာသားတွေကို
တစ်လိုင်းထဲမှာ ပြနေတယ်
စာသားတွေက
ဘာကြောင့်လိုက်မဆင်းသလဲ?
တစ်ကယ်တော့ HTML မှာ
browsers က
စာကြောင်းခွဲ၊ နေရာလပ်ကို
လျစ်လျူရှုထားတယ်
အကယ်လို့ စာကြောင်းခွဲချင်ရင်
အခြား tag ကို သုံးရတယ်
အဲ့ဒါက BR tag
Break (စာကြောင်းခွဲ) တာပါ။
အဲ့တော့ စာကြောင်းတိုင်းရဲ့နောက်မှာ
BR tags လိုက်ထည့်မယ်။
အခု သီချင်းစာသားပုံပေါ်သွားပြီ။
BR tag ရဲ့ ထူးခြားချက်ကို
သတိထားမိလား?
Tag အပိတ်မပါတာပဲ။
စာကြောင်းခွဲဖို့ပဲ
သုံးတာဆိုတော့
အပိတ်မလိုတော့ဘူး။
အဖွင့် tag ပဲ လိုတာပါ။
ဒီလောက်ပါပဲ။
ယုန်အကြောင်းကို
မသိတဲ့သူတွေလည်း သိလောက်ပြီ
သင်လည်း HTML ရဲ့
အခြေခံကို ရလောက်ရောပေါ့။
ဒီသင်ခန်းစာကို
အနည်းငယ်ပြောင်းပြီး
စမ်းသပ်လေ့ကျင့်ပါ။
သင်အဆင်သင့်ဖြစ်ရင် ပထမဆုံး
HTML စိန်ခေါ်မှုစလိုက်ရအောင်