website တစ်ခုက၎င်း၏ source code ကိုကြည့်ရှုခြင်းဖြင့်တည်ဆောက်ခဲ့ပုံကိုလေ့လာပါ
ကျွန်မပထမဦးဆုံးတစ်ဦးကို web ဒီဇိုင်နာအဖြစ်ငါ့အကိုစတင်လုပ်ကိုင်ခဲ့သည့်အခါကျွန်မလေးစားတော်မူသောအခြားအကို web ဒီဇိုင်နာများ၏လုပျငနျးပြန်လည်သုံးသပ်နေဖြင့်ဤမျှလောက်သင်ယူခဲ့တယ်။ ငါသည်ဤအတွက်တစ်ဦးတည်းမဟုတ်ဖြစ်၏။ သငျသညျဝဘ်စက်မှုလုပ်ငန်းတစ်ခုသို့မဟုတ်ဝါရင့်ဝါရင့်အသစ်ဖွစျစေ, က HTML source ကိုကြည့်ရှု ကွဲပြားခြားနားသောဝဘ်စာမျက်နှာများသင်သည်သင်၏အသက်မွေးဝမ်းကျောင်း၏သင်တန်းကျော်အကြိမ်ပေါင်းများစွာလုပ်ဖို့များပါတယ်တစ်ခုခုပါပဲ။
web design မှာအသစ်ဖြစ်ကြသောသူတို့အဘို့, တစ်ဦး site ရဲ့ source code ကိုကြည့်ရှုသင်အလုပ်ကနေလေ့လာသင်ယူနှင့်သင့်ကိုယ်ပိုင်အလုပ်အတွက်အချို့ code များသို့မဟုတ်နည်းစနစ်သုံးစွဲဖို့စတငျနိုငျသောကြောင့်ပြုသည်ကိုဘယ်လိုအခြို့သောအမှုတို့ကိုမြင်ဖို့အလွယ်ကူဆုံးနည်းလမ်းတွေထဲကတစ်ခုဖြစ်ပါသည်။ ယနေ့အလုပ်လုပ်မဆိုက်ဘ်ဒီဇိုင်နာ, စက်မှုလုပ်ငန်း၏အစောပိုင်းကာလကတည်းကမှာခဲ့ကြသူအထူးသဖြင့်သူတို့အားကဲ့သို့၎င်း, ဒါကြောင့်သူတို့ကရိုးရိုးကိုသူတို့မြင်စိတ်ဝင်တစားလေ့လာပါသော web စာမျက်နှာများ၏အရင်းအမြစ်ကြည့်ရှုခြင်းဖြင့် HTML ကိုလေ့လာသင်ယူသင်ပြောပြနဲ့လုံခြုံအလောင်းအစားင် သည်။ အပြင် က web design ကိုစာအုပ်တွေဖတ်နေ သို့မဟုတ် ပရော်ဖက်ရှင်နယ်ညီလာခံတက်ရောက်ခြင်း , တစ်ဦး site ရဲ့ source code ကိုကြည့်ရှုအရင်ကဆိုရင် HTML ကိုလေ့လာသင်ယူရန်အဘို့ကြီးစွာသောနည်းလမ်းဖြစ်ပါတယ်။
ရုံ HTML ကိုသန်းကပို
မှတ်မိဖို့အရာတစ်ခုမှာဖြစ်ပါတယ် အရင်းအမြစ်ဖိုင်တွေ ကအရမ်းရှုပ်ထွေးစေနိုင်ပါတယ် (သင်ကြည့်ရှုနေသော website နှင့်ပိုမိုရှုပ်ထွေးသောပိုမိုရှုပ်ထွေးကြောင်း site ရဲ့ကုဒ်ဖြစ်ဖွယ်ရှိသည်ဖြစ်၏) ။ ယင်းအပြင် HTML ကိုဖွဲ့စည်းပုံမှာ သင်ကြည့်နေသောစာမျက်နှာကိုတက်စေသည်လည်းရှိပါလိမ့်မည် CSS ကို (Cascading Style Sheet များ) ကြောင့် site ၏အမြင်အသွင်အပြင် dictate သော။ ထို့အပြင်အများအပြားဝက်ဘ်ဆိုက်များယနေ့ script ကိုဖိုင်တွေက HTML နှင့်အတူထည့်သွင်းပါဝင်သည်ပါလိမ့်မယ်။
မျိုးစုံ script ကိုဖိုင်များ, တကယ်တော့, ထို site ၏ကွဲပြားခြားနားသောရှုထောင့် powering တစျဦးစီပါဝင်သည်ဖြစ်ဖွယ်ရှိရှိပါသည်။ ပှငျ့ပှငျ့လငျးလငျး, တစ်ဦး site ရဲ့ source code ကိုသင်ဤလုပ်နေတာအသစ်ဖြစ်ကြအထူးသဖြင့်လျှင်, လွှမ်းမိုးသောပုံပေါ်နိုင်ပါတယ်။ သငျသညျခကျြခငျြးကြောင်းဆိုက်နှင့်ပေါ်မယ့်အရာကိုတွက်ဆလို့မရပါဘူးလျှင်စိတ်ပျက်ရမထားပါနဲ့။ ယင်းကိုကြည့်ခြင်း က HTML source ကို ဤလုပ်ငန်းစဉ်အတွက်ပဲပထမဦးဆုံးခြေလှမ်းဖြစ်ပါတယ်။ အနည်းငယ်အတွေ့အကြုံနှင့်အတူ, သင်ပိုကောင်းသမျှသောဤအပိုငျးပိုငျးသင်သည်သင်၏ browser မှာမြင်သောဝက်ဘ်ဆိုက်ဖန်တီးဖို့အတူတကွ fit ကိုမည်သို့နားလည်ရန်စတင်ပါလိမ့်မယ်။ သင်ကုဒ်တွေနဲ့ပိုပြီးရင်းနှီးကျွမ်းဝင်ရသကဲ့သို့, သငျသညျကနေပိုမိုလေ့လာသင်ယူနိုင်ပါလိမ့်မည်သည်သင်တို့အားစိတ်ညစ်စရာလုပ်ပေးမထင်ပါလိမ့်မယ်။
ဒါကြောင့်သင်မည်သို့ website တစ်ခု၏ source code ကိုကြည့်ရှုကြသနည်း ဒီမှာ Google Chrome ကို browser ကိုသုံးပြီးဒါလုပ်ဖို့ခြေလှမ်း-by-step ညွှန်ကြားချက်ပါပဲ။
အဆင့်ညွှန်ကြားချက်အားဖြင့်အဆင့်
- ကို Google က Chrome web browser ကိုဖွင့်ပါ (သင်က Google Chrome ကို install လုပ်ထားရှိသည်မဟုတ်ကြဘူးလျှင်, ဒီဟာအခမဲ့ download ဖြစ်ပါတယ်) ။
- သငျသညျဆနျးစစျဖို့လိုတဲ့ဝဘ်စာမျက်နှာသို့သွားရန်။
- စာမကျြနှာကို right-click နှိပ်ပြီးပေါ်လာတဲ့ menu မှာကြည့်ပါ။ ကြောင်း menu ကနေ, ကြည့်ရန်စာမျက်နှာအရင်းအမြစ်ကိုကလစ်နှိပ်ပါ။
- ထိုစာမျက်နှာသို့များအတွက် source code ကိုယခုဘရောက်ဇာအသစ်တစ်ခု tab ကိုအဖြစ်ပေါ်လာပါလိမ့်မယ်။
- တနည်းအားဖြင့်သင်သည်လည်းပြသနေတဲ့ site ရဲ့ source code ကိုအတူ window ကိုဖွင့်ရန်ကို PC ပေါ်မှာ CTRL + ဦး၏ keyboard shortcuts တွေကိုသုံးနိုင်သည်။ တစ်ဦးနဲ့ Mac တွင်, ဒီဖြတ်လမ်းစစ်ဌာနချုပ် + Alt + ဦးဖြစ်ပါတယ်။
ပြုစုသူကိရိယာများ
Google Chrome ကကမ်းလှမ်းသောရိုးရှင်းသောကြည့်ရန်စာမျက်နှာအရင်းအမြစ်စွမ်းရည်အပြင်, သငျသညျအစပင်ပိုမိုနက်ရှိုင်း site တစ်ခုထဲသို့တွင်းတူးဖို့ဟာသူတို့ရဲ့အလွန်အစွမ်းထက်တဲ့ရေးသားသူ Tools များ၏အားသာချက်ယူနိုင်ပါတယ်။ ဤကိရိယာများကိုသင်မပေးသာက HTML, ဒါပေမယ့်လည်းက HTML document ထဲမှာ element တွေကိုကြည့်ရှုရန်သက်ဆိုင်သော CSS ကိုကြည့်ဖို့ခွင့်ပြုပါလိမ့်မယ်။
Chrome ၏ developer tools တွေကိုသုံးပါရန်:
- Google Chrome ကိုဖွင့်ပါ။
- သငျသညျဆနျးစစျဖို့လိုတဲ့ဝဘ်စာမျက်နှာသို့သွားရန်။
- browser ကိုပြတင်းပေါက်၏အပေါ်ညာဘက်ထောင့်တွင်သုံးလိုင်းများနှင့်အတူအိုင်ကွန်ကိုကလစ်နှိပ်ပါ။
- မီနူးကနေနောက်ထပ် tools တွေကိုကျော်ပျံဝဲပြီးတော့ပေါ်လာသော Menu ထဲမှာရေးသားသူ tools တွေကိုကလစ်နှိပ်ပါ။
- ဒါက pane ထဲက၏လက်ဝဲနှင့်လက်ျာပေါ်တွင်ဆက်စပ် CSS ကိုအပေါ်က HTML source code ကိုပြသသောပြတင်းပေါက်ဖွင့်လှစ်ပါလိမ့်မယ်။
- သင်မှန်ဝဘ်စာမျက်နှာမှာ Element တစ်ခုရဲ့ click နှိပ်ပြီးပေါ်လာတဲ့ menu ထဲကကိုစုံစမ်းရန်ကို select လျှင်တနည်းအားဖြင့်, Chrome ၏ developer tools တွေပေါ်လာပါလိမ့်မယ်နဲ့သင်ရွေးချယ်ထားသောအတိအကျဒြပ်စင်ညာဘက်ပြသသက်ဆိုင်ရာ CSS ကိုအတူ HTML မှာမီးမောင်းထိုးပြပါလိမ့်မည်။ သင်တစ်ဦး site ၏တဦးတည်းသီးခြားအပိုင်းအစထွင်းထုခဲ့ပုံအကြောင်းပိုမိုလေ့လာသင်ယူရန်လိုလျှင်ဤသည်စူပါအထောက်အကူဖြစ်ပါတယ်။
အရင်းအမြစ် Code ကိုဥပဒေရေးရာကိုကြည့်ရှုခြင်းသလဲ?
နှစ်တွေ, ငါသည်များစွာသောအသစ်ဟာ web ဒီဇိုင်နာများက site ရဲ့ source code ကိုကြည့်ရှုခြင်းနှင့်၎င်းတို့၏ပညာရေးနှင့်နောက်ဆုံးတွင်သူတို့ကလုပ်ပေးသောအလုပ်အတွက်အသုံးပြုလက်ခံနိုင်ဖွယ်ရှိမရှိမေးခွန်းထုတ်ခဲ့ကြပါပြီ။ site တစ်ခု၏ code ကိုလက္ကားကူးယူခြင်းနှင့် site တစ်ခုပေါ်တွင်သင်၏ကိုယ်ပိုင်အဖြစ်ကပယ်ဖြတ်သန်းဆက်ဆက်လက်ခံနိုင်ဖွယ်မဟုတ်ပါဘူးနေစဉ်, ကနေသင်ယူဖို့တစ် Springboard အဖြစ်ကုဒ်သုံးပြီးဒီစက်မှုလုပ်ငန်းအတွက်လုပ်နေကြတယ်မည်မျှတိုးတက်မှုအမှန်တကယ်ဖြစ်ပါသည်။
ငါသည်ဤဆောင်းပါး၏အစမှာဖော်ပြခဲ့တဲ့အတိုင်း, သင်ခဲယဉ်းတဲ့ site ရဲ့အရင်းအမြစ်ကိုကြည့်ရှုခြင်းဖြင့်တစ်ခုခုသင်ယူမရှိသေးပေသူတစ်ဦးအလုပ်လုပ်ကိုင်က်ဘ်ဆိုက်ပရော်ဖက်ရှင်နယ်ယနေ့တွေ့ရှိရန်ဖိအားပေးလိမ့်မည်ဟု! ဟုတ်ကဲ့တစ်ဦး site ရဲ့ source code ကိုကြည့်ရှုဥပဒေရေးရာဖြစ်ပါတယ်။ အလားတူတစ်ခုခုတည်ဆောက်မယ့်အရင်းအမြစ်အဖြစ်ကုဒ်အသုံးပြုခြင်းကိုလည်းဒဏ်ငွေဖြစ်ပါသည်။ အဖြစ်-ဖြစ်ပါတယ်ကုဒ်ရိုက်ယူခြင်းနှင့်သင်ပြဿနာများကြုံတွေ့ရစတင်ဘယ်မှာသင်၏အလုပ်ဖြစ်ပါသည်ကြောင့်ချွတ်ဖြတ်သန်း။
အဆုံးမှာတော့ကို web ပညာရှင်များတစ်ဦးချင်းစီကတခြားကနေလေ့လာသင်ယူနှင့်မကြာခဏသူတို့မြင်သဖြင့်မှုတ်သွင်းသောအလုပ်အပျေါတိုးတကျအောငျ, ဒါကြောင့် site တစ်ခု၏ source code ကိုကြည့်ရှုနှင့်တစ်ဦးသင်ယူမှု tool အဖြစ်အသုံးပြုတှနျ့ဆုတျပါဘူး။