.jpg)
မဂၤလာပါ …ဒီတစ္ပါတ္ေတာ့ ကၽြန္ေတာ္တုိ႔ 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 ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။
သင္ခန္းစာ အက်ယ္
အေျခခံ 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 ထဲမွာ ပါရွိမွာ ျဖစ္ပါတယ္။
<!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 ထဲကုိ ထည့္ပါေတာ့မယ္၊ ေတာင္းပန္ပါတယ္၊ ေအာက္က ဗီဒီယုိကုိ ဆက္ၾကည့္လိုက္ပါ၊ စာေရးရတာ အရမ္းအခ်ိန္ၾကာၿပီး နားမလည္မွာစုိးလို႔ပါ။
No comments:
Post a Comment