-
ဝက်ဘ်စာမျက်နှာမှ
ကြိုဆိုပါတယ်
-
စာမျက်နှာက ဗလာကြီးဆိုတော့
ငြီးငွေ့စရာပဲပေါ့
-
ဒါပေမယ့် ဝက်ဘ်စာမျက်နှာတိုင်းက
ဒီလိုပဲ အစပျိုးခဲ့ကြရတာပါ
-
အခု ဝက်ဘ်စာမျက်နှာ တည်ဆောက်ပုံကို
သရုပ်ပြသွားပါမယ်
-
ပထမဦးဆုံး
ဝက်ဘ်စာမျက်နှာရဲ့
-
အခြေခံအချက်များကို ပြပါမယ်။
-
ဝက်ဘ်စာမျက်နှာတိုင်းရဲ့ အစမှာ
-
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 စိန်ခေါ်မှုစလိုက်ရအောင်