Module Project 1/2

ခေါင်းစဥ်တစ်ခု ဖြစ်ပေါ်လာအောင် ရေးသားခြင်း

• website တစ်ခုကို ဖွင့်ကြည့်ရင် ပထမဦးဆုံး မြင်တွေ့ရတတ်တဲ့အရာဟာ စာလုံးကြီးနဲ့ ခေါင်းစဥ်တစ်ခုပါ။ အဓိက ခေါင်းစဥ်ကြီးတစ်ခုကို မြင်ရဖို့ HTMLထဲမှာ ဘယ်လို ရေးသလဲဆိုတာကို တဆင့်ချင်း ရေးပြမယ်။ ပထမဦးဆုံး အနေနဲ့ index.html ဖိုင်ကို terminal ကနေဖြစ်ဖြစ်၊ vscode ကနေဖြစ်ဖြစ် တည်ဆောက်ထားရပါမယ်၊ index.html ဖိုင် ရပြီဆိုရင် အဲဒီဖိုင်ထဲမှာ shift နဲ့ 1 ကို တွဲပြီး နှိပ်ပါ၊ အသင့်ရေးပြီးသား နမူနာပုံစံငယ် ကျလာပါလိမ့်မယ်၊ အောက်ပါ နမူနာပုံစံကို ကြည့်ပါ။

<title>Document</title>

** အဲ့ဒီ နမူနာပုံစံငယ်ထဲ မှာ အကျဥ်းချုပ်အားဖြင့် tag နာမည် လေးခု ရှိပါတယ်။ ၁။ Doctype tag = ၂။ Html tag = (အဖွင့် အပိတ် တစ်စုံ) ၃။ Head tag = (အဖွင့် အပိတ် တစ်စုံ) Head ထဲမှာ meta tag နဲ့ title tag အဖွင့် အပိတ် တစ်စုံ၊

<title>Document</title> ၄။ Body tag = (အဖွင့် အပိတ် တစ်စုံ) ။ ဒီ tag လေးခုပဲ ဖြစ်ပါတယ်။

ညွန်ကြားချက် အတိုင်း လိုက်လုပ်ပါ။

*** body tag ထဲမှာ header tag ကို ရေးရပါမယ်၊ header tag ထဲမှာ h1 tag ကို ရေးပေးရပါမယ်၊ h1 tag ထဲမှာ ကိုယ် ပေးချင်တဲ့ ခေါင်းစဥ်နာမည်ကို ရေးပါ၊ ဥပမာဆိုပါစို့၊ ခေါင်းစဥ်ကို "RUN BUDDY" လို့ ပေးထားကြည့်ပါမယ်၊ အောက်မှာ ဒီပုံစံလေးကို မြင်ကြရပါမယ်။

RUN BUDDY

**** h1 tag နဲ့ ရေးသားထားတဲ့ စာများဟာ ဘာတစ်ခုမျှ (css/ fontzise) မပြုပြင်ရပဲ စာလုံးကြီးဖြင့် ဖော်ပြပေးပါတယ်။

• နောက်တစ်ခုအနေနဲ့ ရေးရရင် Header ပိုင်းနဲ့ ပတ်သက်ဆက်နွယ်တဲ့ ဆင့်ကဲ ပြောင်းလှဲလာမှုများကို ရေးသားပြပါ့မယ်၊ header ထဲမှာ Devloper တစ်ယောက်အနေနဲ့ ဘယ်လို ပုံစံမျိုး ထည့်ပြီး ရေးချင်သလဲ၊ စိတ်ကူးစိတ်သန်း ကောင်းရင် ကောင်းသလို Header ပိုင်းကလည်း လှပမှု ကွဲပြားမှာ ဖြစ်ပါတယ်၊ ကဲ အရိုးရှင်းဆုံးကပဲ စတင်လေ့လာကြရအောင်။

ညွန်ကြားချက် အတိုင်း လိုက်လုပ်ပါ။

• Header tag ထဲမှာ h1 tag နဲ့ ရေးပါမယ်၊ h1 tag ထဲမှာ a tag (အဖွင့် အပိတ် တစ်စုံ) နဲ့ ရေးပါမယ်၊ a tag ထဲမှာ ကိုယ် ပေးချင်တဲ့ ခေါင်းစဥ်နာမည်ကို ရေးပါ၊ ဥပမာဆိုပါစို့၊ ခေါင်းစဥ်ကို "RUN BUDDY" လို့ ပေးထားကြည့်ပါမယ်၊ အောက်မှာ ဒီပုံစံလေးကို မြင်ကြရပါမယ်၊

RUN BUDDY

• အထက်ပါ ပုံစံမှာ ပါတဲ့ tag ကို ရှင်းပြပါ့မယ်၊ tag ကို anchor element လို့ခေါ်ပါတယ်၊ ။ HTML မှာ hyperlinks ဖန်တီးဖို့ အသုံးပြုပါတယ်။ Hyperlinks ဆိုတာ အသုံးပြုတဲ့သူတွေကို စာသား သို့မဟုတ် ပုံများကိုနှိပ်လျှင် တစ်နေရာမှ နောက်တစ်နေရာကို ရွှေ့ပြောင်းစေနိုင်တဲ့ မြှားပုံစံ တစ်ဖြစ်လဲ လက်ပုံစံလေးပဲ ဖြစ်ပါတယ်။

• href ကို "hypertext reference" လို့ခေါ်ဆိုပါတယ်၊။ URL ဆီသွားဖို့ link ထားသိုရာ နေရာတစ်ခုလည်းပဲ ဖြစ်ပါတယ်၊၊

• "/" ဒီပုံစံကတော့ URL ဖြစ်ပါတယ်။ website ၏ အဓိကစာမျက်နှာ (homepage) ဖြစ်ပါတယ်။

• headrer tag ထဲမှာ Headr Section ဆိုတဲ့ ခေါင်းစဥ် ရေးခဲ့တာကို အမှတ်ရဥိးမယ်လို့ ထင်မိပါတယ်၊ header ဆိုတဲ့ ပုစံခွက်လေးထဲမှာ ခေါင်းစဥ်ကြီးကို ရေးလို့ ရသလိုမျိုး အခြားသော ခေါင်းစဥ်ငယ်များ၊ အရာဝတ္ထုများစွာကိုလည်း ရေးလို့ရပါတယ်၊ ဥပမာအားဖြင့် body footer တွေနဲ့ ချိတ်ဆက်ဖို့ link ကို ညွန်းဆိုတဲ့ menu concact about စတဲ့ navigation element တွေနဲ့ ရေးသားခြင်းတွေပဲဖြစ်ပါတယ်။

nav ul li ဆိုတဲ့ အဓိပ္ပါယ်။

nav = Navigation Bar အတွက် သတ်မှတ်ပေးထားခြင်းဖြစ်ပါတယ်။ ul = Unordered List (၁၊ ၂၊ ၃ စသည်စီစဉ်မထားတဲ့ စာရင်း) ဖြစ်ပါတယ်။ li = (List Item) တစ်ခုချင်းစီကို သိမ်းထားတာပါ။ "#what-we-do" ဒီလိုရေးသားထားခြင်းက "What We Do" ဆိုတဲ့ စာသားကို #what-we-do ဆိုတဲ့ ID ရှိတဲ့နေရာကို လင့်ခ်ချိတ်ပေးတာ ဖြစ်ပါတယ်။

ညွန်ကြားချက်။ လိုက်လုပ်ပါ။

** header tag ထဲမှာ nav လို့ခေါ်တဲ့ navigation tag ကို ရေးရပါမယ်၊ nav>tag ထဲမှာ ul လို့ခေါ်တဲ့ unordered list element ကို ရေးရပါမယ်၊ ul tag ထဲမှာ li လို့ခေါ်တဲ့ list item element ကို ရေးရပါမယ်၊ li tag ထဲမှာ Anchor element လို့ခေါ်တဲ့ a tag ကို ရေးရပါတယ်၊

အောက်ပါ ပုံစံကို ကြည့်ပါ။

RUN BUDDY

• What We Do
• What You Do
• Your Trainers
• Reach Out

Html နဲ့ css ဆိုတာ ဘာလဲ။

Html ကို css နဲ့ ချိတ်ဆက်ခြင်း အလှဆင်ခြင်း။

• Html ဆိုတာ ဦးခေါင်း၊ ခန္ဓာကိုယ်၊ ခြေလက် စတဲ့ အင်္ဂါ အစုံနဲ့ တည်ဆောက်ထားတဲ့ လူတစ်ယောက်ရဲ့ ရုပ်တုတစ်ခုလို head body header footer စတဲ့ အခြေခံကုဒ်တွေနဲ့ ဖွဲ့စည်းထားတဲ့ အကြမ်းထည် ပုံသဏ္ဍာန် တစ်ခုပဲဖြစ်ပါတယ်၊

• css ဆိုတဲ့သဘောက html ထဲမှာ ရေးခဲ့တဲ့ header body footer စတဲ့နိမိတ်ပုံတွေကို လူရုပ်တုကို ဆေးခြယ်သလို css ထဲမှာ color fontzise margin padding စတဲ့ အလှကုန် ပစ္စည်းများနဲ့ ဆေးခြယ်သခြင်းပဲ ဖြစ်ပါတယ်။

• ဥပမာအနေနဲ့ ခိုင်းနိုင်းရမယ်ဆိုရင် အင်္ကျီ အဝတ်အစား ဘာတစ်ခုမှ ဝတ်မထားတဲ့ လူတစ်ယောက်ရဲ့ ခန္ဓာကိုယ် ပုံစံဟာ html နဲ့ တူပြီး အင်္ကျီ အဝတ်အစား ဝတ်ထားပြီး ခန္ဓာကိုယ်ကို ချောမောလှပအောင် ဖီးလိမ်း ပြင်ဆင်ချယ်သထားခြင်းဟာ css နဲ့တူပါတယ်။ နောက်ထပ် ဥပမာအနေနဲ့ ပြောရရင် တည်ဆောက်ပြီး ဆေးမသုပ်ရသေးတဲ့ အကြမ်းထည် အိမ်နဲ့ ဆေးသုပ် အလှဆင်ထားတဲ့ အိမ်ပုံစံလိုပဲ ဖြစ်ပါတယ်။

အောက်ပါ ပုံကို ကြည့်ပါ။