html5_9

Flexible box model
ဒီသင္ခန္းစာမွာေတာ့ အနာဂတ္ မွာ ခတ္စားလာမယ့္ ၀က္ဆိုက္ပံုစံျဖစ္တဲ့ Flexible Box Modle ကိုသင္ၾကားေပးသြားမယ္၊ ဒီသင္ခန္းစာကို
စတင္ေလ့လာသူေတြအတြက္ေတာ့ တကယ့္ကို အခက္အခဲေတြ႔ႏိုင္သလို နားလည္ဖို႔ခက္ေနမယ္၊ ေျဖးေျဖးျခင္းသင္ၾကားေပးသြားမယ္၊ သတိျပဳရမွာကေတာ့
Flexible Box Model ကို Browser ေတြအားလံုးနားမလည္ဘူး၊ အဆင့္ျမင့္ေနၾကတုန္းရွိေသးတယ္၊ ဒါ့ေၾကာင့္ ဒီသင္ခန္းစာကို ေလ့လာသူေတြအေနနဲ႔
Google Chrome browser ကို အသံုးျပဳဖို႔ အၾကံျပဳပါတယ္၊  ေနာက္တစ္ႏွစ္ေလာက္ၾကာရင္ေတာ့ ဒီနည္းပညာကို
browswer ေတြအားလံုးမွာအသံုးျပဳလို႔ရလာမွာပါ၊ အဲ့ဒီ့အခါၾကရင္ေတာ့ သင္တို႔က တကယ့္ ကို ကၽြမ္းက်င္ေနတဲ့သူေတြျဖစ္ကုန္ပီေပါ့၊
အခုေရွ႕ သင္ခန္းစာေတြမွာသံုးခဲ့တဲ့ HTML ဖိုင္ထဲကို div တစ္ခုထပ္ထည့္မယ္၊ ထည့္ရမယ့္ေနရာက <nav> tag ရဲ့ အဆံုးမွာ ၊ ပိတ္ရမယ့္ေနရာက
<aside> Tag ရဲ့ အဆံုးမွာ၊ ၾကိဳက္တဲ့ id သတ္မွတ္ျပီးထည့္နိုင္တယ္၊ ဒီသင္ခန္းစာမွာေတာ့ <div id= “new_div”> </div> လို႔ပဲ
ထည့္လိုက္မယ္၊ ေအာက္က အတိုင္း၊

အထက္က အနီေရာင္ျမားျပထားတဲ့ <div id= “new_div”> က အသစ္ထည့္လိုက္တဲ့ div ပါ၊ အျပာေရာင္ျမားျပထားတဲ့ </div> က ေတာ့ <div
id=”new_div”> ရဲ့ အပိတ္ပါ၊ အထက္က အတိုင္းျပင္ျပီးသြားရင္ေတာ့ အားလံုး အဆင္သင့္ျဖစ္ျပီး၊ CSS ဖိုင္ကိုသြားမယ္၊ CSS ဖိုင္မွာ အရင္ေရးခဲ့တဲ့ CSS
Code ေတြအားလံုးကိုျဖတ္ပစ္လိုက္ပါ၊ အသစ္ျပန္ေရးရမယ္၊ CSS ဖိုင္အားလံုးကို ျဖတ္လိုက္ရင္ သင့္၀က္ဆိုက္က ေအာက္က အတိုင္းျဖစ္သြားမယ္၊


အထက္က အတိုင္းဆိုရင္ ဆိုက္ပံုစံကေတာ့ အေတာ့ ကိုဆိုးေနပါပီ၊ မပူပါနဲ႔ Flexible Box Model ကိုသံုးျပီး ျပန္ေရးမွာပါ၊ အခု CSS ဖိုင္မွာေအာက္က
အဆင့္အထိျပန္ေရးလိုက္ပါ၊


အထက္က အဆင့္အထိေရးျပီးသြားရင္ေတာ့ body { } အထဲမွာ စတင္ျပီး FBM ကိုအသံုးခ်ေတာ့မယ္၊ ပထမဆံုး သတ္မွတ္ရမွာကေတာ့ width:100% ပါ၊
browser ေတြအားလံုးက ၀က္ဆိုက္ေတြရဲ့ အက်ယ္က default အေနနဲ႔ 100% သတ္မွတ္ၾကပါတယ္၊ ဒါေပမယ့္ Flexible Box Model ကို
သံုးမွာျဖစ္တဲ့အတြက္ ပိုျပီးေသခ်ာေအာင္ width:100% လို႔သတ္မွတ္ေပးလိုက္တာပါ၊ ဒီေတာ့ Flexible Box Model ကိုသံုးရင္ width:100%
ကိုထည့္ကိုထည့္ရမယ့္ဆိုတာကိုသေဘာေပါက္ပါ၊ ဒါမွမဟုတ္ရင္ ေနာက္ပိုင္းျပသနာေပၚလာလိမ့္မယ္၊
 ဒုတိယ တစ္ဆင့္အေနနဲ႔ Body (selector) ထဲမွာ Property ကို display ထည့္ျပီး value ကို -webkit-box; လို႔ထည့္ရမယ္၊ ဒီလိုထည့္လိုက္တာက body
ကို သူ႔အထဲမွာ flaxible box ထည့္သံုးမယ္လို႔ အသိေပးလိုက္တာပါ၊
ေနာက္တစ္ဆင့္မွာေတာ့ -webkit-box-pack:center; လို႔ထည့္ေပးလိုက္ပါ၊ -webkit-box-pack ဆိုတဲ့ Property ရဲ့ အဓိပၸါယ္ကေတာ့ ၀က္ဆိုက္ထဲမွာ
(body ထဲမွာ) ပါမယ့္ boxes  ေတြအလားလံုးကို ညြန္းတယ္၊ ၀က္ဆိုက္တစ္ခုထဲမွာ Flexible boxes ေတြ တစ္ခုမက ပါမွာပါ၊ သူတို႔အားလံုးကို
ဘယ္လို ေနရာခ်ထားမလဲဆိုတာကို သတ္မွတ္ဖို႔အတြက္ -webkit-box-pack ဆိုတဲ့ Property ကိုသံုးတာ၊ Value ကေတာ့ Center ပါ၊
အလည္မွာထားမယ္လို႔ေျပာတာ၊
ေသခ်ာျပန္ေျပပါ၊ body ထဲမွာ Flaxible Box တစ္ခုကိုထည့္မယ္၊ (body ကိုတိုင္ကိုက Flexible box ျဖစ္သြားတဲ့ သေဘာ)၊ ျပီးရင္ အဲ့ဒီ့ body flexible box
ရဲ့ အတြင္းမွာမွ boxes ေတြ (သတၱာေလးေတြအမ်ားၾကီးထည့္မယ္) အဲ့ဒီ့သတၱာေလးေတြအားလံုးကို ေနရာခ်ထားပံုကို သတ္မွတ္ဖို႔အတြမက္ -webkit-
box-pack ဆိုတဲ့ Property ကိုသံုးတာ၊ ေအာက္မွာ CSS ဖိုင္ေရးထားပံုကိုၾကည့္၊

Read More

html5_8

ၤFinishing Layout
ဒီသင္ခန္းစာမွာေတာ့ ၀က္ဆိုက္ရဲ့ Layout ပံုစံကို လက္စသက္လိုက္ၾကမယ္၊ လက္စသက္မယ္ဆိုေတာ့ ျပဳျပင္စရာ
နည္းနည္းေလးက်န္ေနေသးတယ္၊ ေအာက္မွာ လက္ရွိ အေျခအေန အရ ၀က္ဆိုက္ကို ၾကည့္ပါ၊


အခု ၀က္ဆိုက္က အေတာ့ ကိုၾကည့္ေကာင္းေနျပီ ဒါေပမယ့္ အေရးၾကီးတဲ့ အခ်က္တစ္ခု ရွိေသးတယ္၊ အဲ့ဒါကေတာ့ Article ေတြပါပဲ၊
သူတို႔ကို ေသခ်ာအလွဆင္ဖို႔လိုေသးတယ္၊ ဒီအတြက္ ေအာက္က အတိုင္း CSS ဖိုင္မွာ apply လုပ္ျပီးအလွဆင္မယ္၊


အထက္မွာေတာ့ HTML ဖိုင္ထဲမွာရွိတဲ့ article အစိတ္အပိုင္းကို CSS apply လုပ္လုိက္ပါပီ၊ တစ္ခုစီရွင္းျပမယ္၊
Background: #fffbcc; ကေတာ့ ေနာက္ခံအေရာင္ကို #fffbcc လို႔ထားလိုက္တာ၊
Border: 1px solid red; ကေတာ့ ေဘာင္ကို 1px အထူ အနီေရာင္ထားလိုက္တာ၊
Padding:20px ကေတာ့ Content ရဲ့ border နဲ႔ စာသားေတြရဲ့ အကြာအေ၀းကို 20px လို႔ထားလိုက္တာ၊ Content အတြင္းမွာပဲ
အကြာအေသးခ်ိန္တာျဖစ္တဲ့အတြက္ ၀က္ဆိုက္တစ္ခုလံုးရဲ့ 1000px အက်ယ္ကိုမထိခိုက္ဘူး၊
Margin-bottom:15px ကေတာ့ article Element တစ္ခုနဲ႔ သူ႔ေအာင္က အျခား Element ေတြရဲ့ 15px ျခားလိုက္တာပါ၊ ဒါမွ တစ္ခုနဲ႔ တစ္ခု ကပ္မေနမွာ၊
margin ကို 15px ထားရာမွာ ေလးဖက္လံုးထားတာမဟုတ္ဘဲ ေအာက္ဖက္တစ္ခုပဲထားတာကိုသတိျပဳပါ၊ အားလံုးျပီးသြားရင္ေတာ့
သင့္၀က္ဆိုက္ကိုေအာက္က အတိုင္းျမင္ေတြ႔ရမွာပါ၊


အထက္က အတိုင္းအေျခအေနဆိုရင္ေတာ့ ၀က္ဆိုက္က အေတာ့ကို Layout Style လွပေနပါပီ၊ ဒါေပမယ့္ Devloped by Waiferkolar ဆိုတဲ့ article
တစ္ခုစီရဲ့ ေအာက္ဆံုးစာသားေတြက ညာဘက္မွာရွိသင့္တယ္၊ ဒါကိုျပဳျပင္လို႔ရပါတယ္၊ သူတို႔ကို HTML File မွာ ၾကည့္ရင္ သူတို႔က article
တစ္ခုစီအတြင္းမွာရွိတဲ့ footer ဆိုတဲ့ Child Element အျဖစ္ရွိေနမွာပါ၊ အခု အဲ့ဒီ့ footer ေတြကို ညာဘက္ေျပာင္းၾကမယ္၊ ေအာက္က CSS ဖိုင္ကိုၾကည့္ပါ၊


အထက္မွာေတာ့ article အတြင္းက footer မွာရွိတဲ့စာသားေတြကို ညာဘက္ကိုကပ္ဖို႔ CSS apply လုပ္လိုက္ပါပီ၊ အဲ့ဒီ့ footer
အစိတ္အပိုင္းကိုေခၚသံုးဖို႔အတြက္ Mother Element ျဖစ္တဲ့ article ကိုေရွ႕မွာထားျပီးေခၚသံုးရပါတယ္၊ ဒါမွမဟုတ္ဘဲ footer လို႔ တစ္လံုးထဲ ေခၚသံုးရင္
(select) လုပ္ရင္ျဖင့္ HTML ဖိုင္ရဲ့ ေအာက္ဆံုးမွာရွိတဲ့ article ထဲမပါတဲ့ footer ပါ အက်ံဳး၀င္သြားမယ္၊ ေျပာင္းသြားမယ္၊ သတိထားပါ၊ text-align: right;
ကေတာ့ စာသားေတြကို ညာဘက္ကိုကပ္မယ့္ေျပာတာပါ၊ အထက္က အတိုင္း CSS apply လုပ္ျပီးရင္ သင့္၀က္ဆိုက္ကိုေအာက္က အတိုင္းေတြ႔ရမယ္၊


အထက္က အတိုင္းအားလံုး၀က္ဆိုက္ကိုရရင္ျဖင့္ Layout က႑ ျပီးဆံုးသြားပါပီ၊ ေနာက္သင္ခန္းစာမွာေတာ့ traditional box model ကို သင္ျပသြားမယ္၊
၀က္ဆိုက္မွာထည့္သံုသြားမယ္၊ CSS3 နဲ႔ HTML5 ရဲ့ ေျပာင္ေျမာက္တဲ့ေပါင္းစပ္မူကိုေလ့လာရမွာပါ၊

Read More

html5_7

Content Styling
ဒီသင္ခန္းစာမွာေတာ့ main_ontent အစိတ္အပိုင္းကို layout ပံုစံ လွေအာင္စဥ္သြားမယ္၊ main_content ထဲမွာ article ႏွစ္ခုပါတယ္၊ အခု အဲ့ဒီ့
article ႏွစ္ခုကို ဘယ္ဘာက္ကိုကပ္လိုက္မယ္၊ ၀က္ဆိုက္တစ္ခုလံုးရဲ့ အက်ယ္က 1000px ဆိုေတာ့ အဲ့ဒီ့ main_content ကို 660px
လို႔ထားမယ္၊ ေအာက္မွာၾကည့္ပါ၊


အထက္က CSS ဖိုင္မွာ #main_content ဆိုျပီး HTML ဖိုင္မွာရွိတဲ့ main_conter ပါတဲ့အစိတ္အပိုင္းကို မွတ္သားတယ္၊
float:left; ကေတာ့ ဘယ္ဘက္ကို စီေမ်ာသြားမယ္ ကပ္သြားမယ္လို႔ အမိန္႔ေပးတာပါ၊
width: 660; ကေတာ့ main_content ရဲ့ အက်ယ္ကို သတ္မွတ္ေပးတာပါ၊
margin:30px; ဆိုတာကေတာ့ ေဘးမ်ဥ္းနဲ႔ content ၾကား အက်ယ္ကို 30px ထားလိုက္တာ၊ အဲ့ဒီ့ 30 px က အေပၚ ေအာက္ ဘယ္
ညာ ေလးဖက္လံုးအတြက္ပါ၊ ဒီမွာတစ္ခု သတိထားရမွာကေတာ့ ဘယ္က 30 px ညာက 30px ဆိုေတာ့ အားလံးေပါင္း 60 px ကိုေဘးမ်ဥ္းနဲ႔ Content ၾကား
အကြာအတြက္သံုးလိုက္တယ္၊ အေပၚမွာ width:660px ဆိုျပီး Content ရဲ့ အက်ယ္ကို သတ္မွတ္ထားတယ္၊ အဲ့ဒီ့ 660px နဲ႔ ေဘးမ်ဥ္း အတြက္ သံုတဲ့ 60px
တို႔ေပါင္းရင္ အားလံုးေပါင္း 720px ျဖစ္သြားတယ္၊ ဆိုက္တစ္ခုလံုးက 1000px ဆိုေတာ့ လက္က်န္သံုးလို႔ရတဲ့ အက်ယ္ 280px ပဲရွိေတာ့တယ္၊  အထက္က
အတိုင္း CSS apply လုပ္ျပီးသြားရင္ Website ကို Run ၾကည့္လုိက္ပါ ေအာက္က အတိုင္းေတြ႔ရမယ္၊



အထက္က ေတာ့ သင့္၀က္ဆိုက္ကို ျမင္ရမယ့္ပံုစံပါ၊ ဒီမွာ သင္ခန္းသာအသစ္မ်ား ဆိုတဲ့အစိတ္အပိုင္းက အေပၚတပ္လာတာကိုေတြ႔ရမယ္၊ သူက <aside>
Tags အစိတ္အပိုင္းပါ၊ သူအေပၚကိုတပ္လာတာကေတာ့ သူ႔အထက္က <section id=”main_content”> က 720 px ပဲ အက်ယ္ရွိျပီး
ဘယ္ဘက္ေဘးကိုကပ္သြားလို႔ လက္က်န္ေနရာျဖစ္တဲ့ ညာဘက္ 280px ကို၀င္ယူလိုက္တာပါ၊ ေအာက္မွာ ေတာ့ <aside id="sidebar"> အစိတ္အပိုင္းကို
CSS apply လုပ္ပါမယ္၊


အထက္မွာေတာ့ Sidebar အစိတ္အပိုင္းကို CSS apply လုပ္လိုက္ပါတယ္၊
Float:left; ဆိုတာက ဘယ္ဘက္ကို စီေမ်ာမယ္လို႔ေျပာတာ
Width: 220px က အက်ယ္ကို 220px ထားမယ့္ေျပာတာ
Margin: 20px 0px; က ေဘးမ်ဥ္းကို အထက္ 20px ေအာက္ 0px ထားမယ့္ေျပာတာ
Padding:30px က အထက္ ေအာက္ ဘယ္ ညာ padding ကို 30px စီထားမယ္ေျပာတယ္၊ ဘယ္ က 30px ညာက 30px ဆိုေတာ့ 60px ျဖစ္သြားတယ္၊
အထက္က အက်ယ္က 220px ဆိုေတာ့ အားလံုးေပါင္း 280px ျဖစ္သြားတယ္၊ သူ႔ဘယ္ဘက္က main_content ရဲ့ အက်ယ္က 720px ဆိုေတာ့
အားလံုးေပါင္းရင္ 1000px ျဖစ္သြားပီ၊ အဲ့ဒီ့မွာ border 1px ေတြဘာေတြသြားမထည့္နဲ႔ ထည့္လိုက္တာနဲ႔ သင့္၀က္ဆိုက္က ပံုပ်က္သြားမယ္၊ 1000px
ထက္ပိုသြားရင္ ၀က္ဆိုက္က မူရင္းသတ္မွတ္ထားတဲ့ ပမာဏထက္ၾကီးျပီး ပ်က္သြားမယ္၊
Background: #66cccc; ကေတာ့ ေနာက္ခံအေရာင္ကို #66cccc; ထားမယ့္လို႔ေျပာတာ (သင္ၾကိဳက္ရာ အျခား အေရာင္ကိုလဲထည့္ႏိုင္တယ္)
အားလံုးျပီးသြားရင္ေတာ့ သင့္၀က္ဆိုက္က ေအာက္က ပံုစံအတိုင္းျဖစ္သြားမယ္၊


အထက္က အတိုင္း သင့္၀က္ဆိုက္ကိုေတြ႔ရရင္ေတာ့ အားလံုး OK ေနပါပီ၊ ဒီမွာအေရးၾကီးတဲ့ အခ်က္တစ္ခ်က္က footer မွာရွိရမယ့္ 72coder မူပိုင္ ဆိုတဲ့
“ငတိ” က အေပၚကိုတပ္သြားတယ္၊ ဒီလိုျပသနာက ျဖစ္ေလ့ျဖစ္ထရွိတယ္၊ အခု အဲ့ဒီ့ footer အစိတ္အပိုင္းကို ေသခ်ာျပင္ဆင္မယ္၊ ေအာက္မွာၾကည့္၊


အထက္က ပံုကေတာ့ footer ကို CSS apply လုပ္လိုက္တာပါ၊
Clear:both; ကေတာ့ footer အစိတ္အပိုင္းရဲ့ ဘယ္ဘက္ေကာ ညာဘက္ေကာမွာဘာမွမရွိေတာ့ေအာင္ရွင္းလိုက္တာပါ၊ ဒါဆိုရင္ အဲ့ဒီ့
အတန္းလံုးသူတစ္ေယာက္ထဲရွိေတာ့မယ္၊ ဘာမွမရွိေတာ့ဘူး၊
Text-align:center; ကေတာ့ 72coder မူပိုင္ ဆိုတဲ့စာသားကို အလယ္မွာထားခ်င္လို႔ text-align စာသား ခ်ိန္ညွိမူကို center လို႔ေျပာင္းလိုက္တာ၊
Padding:20px ကေတာ့ စာသားေတြနဲ႔ border ကို 20px ခြာမယ္လို႔ေျပာလိုက္တာ၊
Borde-top: 1px solid green ကေတာ့ footer အစိတ္အပိုင္းရဲ့အေပၚမွာ border ထားမယ့္ border က အထူ 1px ထားမယ့္လို႔ေျပာတာ
အဲ့ဒီ့အစိတ္အပိုင္းအထိျပီးရင္ သင့္၀က္ဆိုက္ကိုေအာက္က အတိုင္းေတြ႔ရမယ္၊

Read More

html5_6

More Styling
၀က္ဆိုက္ကေတာ့ အေျခအေန အေတာ့ ကိုေကာင္းသြားပါပီ၊ ဒါေပမယ့္ အဲ့ဒီ့ အဆင့္ေလာက္နဲ႔ေတာ့ ၀က္ဆိုက္ကိုေရာင္းစားဖို႔ အခေက်းေငြယူျပီး
၀က္ဆိုက္ဆြဲဖို႔မျဖစ္ႏိုင္ေသးပါဘူး၊ ေလာေလာဆယ္ အေျခအေနမွာပဲ ၀က္ဆိုက္ကို တစ္ခ်က္ေလာက္ၾကည့္ရေအာင္၊


အခု အရင္ဆံုး ၀က္ဆိုက္ရဲ့ body တစ္ခုလံုးထဲမွာရွိတဲ့ Tags ေတြအားလံုးကို လြမ္းျခံဳထားတဲ့ container ကို Style ထည့္မယ္၊ (html ဖိုင္မွာ div =
“container” လို႔ေရးထားတာကို div id= “container” လို႔ေျပာင္းလိုက္ပါ၊ ျပီးရင္ CSS နဲ႔ အလွဆင္မယ္၊ ေအာက္က အတိုင္း၊


အထက္က CSS ဖိုင္မွာ #container လို႔ေရးျပီး HTML ဖိုင္မွာရွိတဲ့ <div id= “container”> ကို select မွတ္တယ္၊ Declaration ၄ ခု ရွိတယ္၊
 border: 1px solid black; လို႔ေရးထားတယ္၊ အဓိပၸါယ္ကေတာ့  ၀က္ဆိုက္တစ္ခုလံုးကို ေဘာင္ခက္မယ္၊ ေဘာင္ အထူက 1 pixel, အထူ, အနက္ေရာင္
လို႔ေရးလိုက္တာ၊ ဒီမွာ တစ္ခု သတိထားရမွာက တကယ္ေတာ့ ေဘာ္ဒါထည့္စရာမလိုပါဘူး၊ ၀က္ဆိုက္တည္ေဆာက္တာ မကၽြမ္းက်င္သူေတြအေနနဲ႔
အခက္မေတြ႔ရေအာင္ border ထည့္ျပီးျမင္သာေအာင္ လုပ္လုိက္တာပါ၊ ေနာက္ပိုင္း ျပန္ျဖတ္ျပစ္လဲရတယ္၊
 ေနာက္တစ္ခုကေတာ့ width ပါ၊ သူကေတာ့ ၀က္ဆိုက္တစ္ခုလံုးရဲ့ အက်ယ္ကို သတ္မွတ္သာပါ၊ ပံုမွန္အားျဖင့္ 1024 pixel ရွိတယ္၊ အခုေတာ့ 1000px
လို႔သတ္မွတ္ထားတယ္၊ ဒါ့ေၾကာင့္ ၀က္ဆိုက္ရဲ့ ညာဘက္ ေဘး နဲ႔ ဘယ္ဘက္ေဘးအတြက္ 24px ခ်န္ထားခဲ့တယ္၊ ေဘးႏွစ္ဖက္မွာ တစ္ဖက္ကို 12px စီ
လြတ္ေနလိမ့္မယ္၊
ေနာက္တစ္ဆင့္မွာေတာ့ margin:20px auto; လို႔ေရးထားတယ္၊  သေဘာကေတာ့ အထက္နဲ႔ေအာက္ ေဘးမ်ဥ္းေတြကို 20px စီျခားထားမယ့္လို႔ေျပာတာပါ၊
၀က္ဆိုက္ရဲ့ စာသားေတြအားလံုး အစက ေဘးမ်ဥ္းက ေန 20 px ကြာေနလိမ့္မယ္၊
ေနာက္ဆံုးတစ္ခုကေတာ့ text-align ပါ၊ သူကေတာ့ ၀က္ဆိုက္ရဲ့ <body> အတြင္းမွာရွိတဲ့ စာသားေတြအားလံုးကို ဘယ္ဘက္ေဘးကပ္ခိုင္းတာ၊
ဒီလိုကပ္လိုက္တာက <body> ကိုမထိခိုက္ပါဘူး၊ ဒါေၾကာင့္ အထက္က ေဘးမ်ဥ္းတားထားတဲ့ ဧရိယာအတြင္းက စာသားေတြ ပဲ
ဘယ္ဘက္ေဘးကိုကပ္သြားမွာပါ၊
အထက္က အတိုင္းအားလံုးကိုေရးျပီးရင္ေတာ့ ၀က္ဆိုက္ကို Run ၾကည့္လိုက္ပါ၊ ေအာက္က အတိုင္းေတြ႔ရမယ္၊


အထက္က အတိုင္းဆိုရင္ ၀က္ဆိုက္က ကြန္ျပဴတာရဲ့အလည္တည့္တည့္ မွာတည္ေနပါပီ၊ အခုေနာက္တစ္ဆင့္အေနနဲ႔ ေခါင္းစဥ္ ကို
အလွဆင္ၾကမယ္၊ ေခါင္းစဥ္ကို <html> ဖိုင္ထဲမွာ <header id= “top_header”> လို႔ေပးထားတယ္၊ အခု အဲ့ဒီ top_header ကို CSS သံုးျပီး
အလွဆင္မယ္၊ ေအာက္က အတိုင္း၊


အထက္က အတိုင္း top_header ကို အလွဆင္လိုက္ပါပီ၊ Declaration ၃ သံုးခုပါတယ္၊
Background:#d1bfeb ကေတာ့ top_header ရဲ့ ေနာက္ခံအေရာင္ကို #d1bfeb ထားမယ္လို႔ေရးလိုက္တာ၊ (သင္ၾကိဳက္တဲ့အေရာင္ကိုေျပာင္းႏိုင္ပါတယ္)
Border: 1px solid #70288d ကေတာ့ top_header အစိတ္အပိုင္းကို ေဘာင္ခတ္မယ္၊ ေဘာင္ကို 1px အရြယ္အစားထာမယ္၊ အထူ (solid), အေရာင္ကို
#70288d လို႔သတ္မွတ္မယ္၊
Padding ကေတာ့ စာသားေတြနဲ႔ ေဘာင္ (border) အၾကားကြာထားတဲ့အကြာအေ၀းကို 20px ထားမယ့္လို႔ေရးထားတာပါ၊ အထက္က
အတိုင္းအားလံုးေရးျပီးရင္ေတာ့ သင့္၀က္ဆိုက္ကို Run ၾကည့္ပါ၊ ေအာက္က အတုိင္းေတြ႔ရမယ္၊


အထက္က အတုိင္း ၀က္ဆိုက္ကို ရရင္ျဖင့္ အားလံုးအဆင္ေခ်ာေနပါတယ္၊ အထက္က ၀က္ဆိုက္က ပံုေသးေအာင္ခ်ံဳ႕ထားတာပါ၊
အခု navigator bar ကိုအလွဆင္ၾကပါမယ္၊ ဒီ့အတြက္ HTML ဖိုင္မွာရွိတဲ့ <nav id= “top_navigator”> ကို CSS သံုးျပီးျပဳျပင္
အလွဆင္ပါမယ္၊ ေအာက္မွာၾကည့္ပါ၊


အထက္မွာေတာ့ HTML ဖိုင္မွာရွိတဲ့ top_navigator ဆိုတဲ့ id ကို CSS နဲ႔ select လုပ္ျပီးအလွဆင္လိုက္ပါပီ၊ ေနာက္ခံအေရာင္ background ကို #a62810
လို႔ထားလိုက္တယ္၊ စာလံုးေတြရဲ့အေရာင္ကိုေတာ့ blue လို႔ထားလိုက္တယ္၊ အထက္က အတိုင္းေျပာင္းျပီးသြားရင္ ေအာက္က
ပံုစံရွိတဲ့၀က္ဆိုက္ပံုစံမ်ိဳးကိုရမယ္၊

အထက္က အတိုင္း ၀က္ဆိုက္က ရမယ္၊ ႏို႔ေပမယ္ navigation bar က အေတာ့ကိုေၾကာင္ေနေသးတယ္၊ li list ေတြအားလံုးက
တစ္ခုကိုတစ္ေၾကာင္းစီျဖစ္ေနတယ္၊ တကယ္ဆိုရင္ တစ္ေၾကာင္းထဲမွာျဖစ္ရမွာ၊ အခုလို တစ္ခုကိုတစ္ေၾကာင္းစီျဖစ္ေနတာကေတာ့ block လုပ္ထားလို႔ပါ၊
အခု ေအာက္မွာ unordered list ေတြအားလံုး တစ္ေၾကာင္းထဲမွာျပေအာင္ နဲ႔ ပိုျပီးၾကည့္ေကာင္းသြားေအာင္ အလွဆင္ပါမယ္၊ ဒီ့အတြက္ top_navigator li
ဆိုျပီး list ေတြကို သက္ဆိုင္ရာ mother element နဲ႔ တြဲေခၚပါမယ္၊ ေအာက္မွာၾကည့္ပါ၊

အထက္မွာေတာ့ CSS သံုးျပီး HTML ဖိုင္မွာရွိတဲ့ top_navigator li ေတြကို ျပဳျပင္လိုက္ပါပီ၊
Display: inline-block; ဆိုတာက list ေတြအားလံုးကို တစ္တန္းထဲမွာထား (inline)၊ အဲ့ဒီ့ အတန္းကို block လုပ္ထား (block
လုပ္တယ္ဆိုတာ ေရွ႕နဲ႔ ေနာက္မွာ အျခား Element ေတြ၀င္လို႔မရေအာင္ပိတ္ထားတာပါ၊
List-style:none; ကေတာ့ list ေတြရဲ့ေရွ႕မွာပါေနတဲ့ Style (အတံုးေလးေတြ) ကိုမထည့္ပဲ ဘာမွမပါတဲ့အတိုင္းထားမယ့္လို႔ေျပာတာပါ၊
Padding:5px; ကေတာ့ list ေတြအားလံုးရဲ့ အေပၚ ေအာက္ အေရွ႕ အေနာက္ အားလံုးကို border ကေန 5px ခြါမယ္လို႔ အမိန္႔ေပးလိုက္တာ၊
အားလံုးကိုေရးျပီးသြားရင္ သင့္၀က္ဆိုက္ကို ေအာက္က အတိုင္းေတြ႔ရမယ္၊

အထက္မွာေတာ့ CSS သံုးျပီး HTML ဖိုင္မွာရွိတဲ့ top_navigator li ေတြကို ျပဳျပင္လိုက္ပါပီ၊
Display: inline-block; ဆိုတာက list ေတြအားလံုးကို တစ္တန္းထဲမွာထား (inline)၊ အဲ့ဒီ့ အတန္းကို block လုပ္ထား (block
လုပ္တယ္ဆိုတာ ေရွ႕နဲ႔ ေနာက္မွာ အျခား Element ေတြ၀င္လို႔မရေအာင္ပိတ္ထားတာပါ၊
List-style:none; ကေတာ့ list ေတြရဲ့ေရွ႕မွာပါေနတဲ့ Style (အတံုးေလးေတြ) ကိုမထည့္ပဲ ဘာမွမပါတဲ့အတိုင္းထားမယ့္လို႔ေျပာတာပါ၊
Padding:5px; ကေတာ့ list ေတြအားလံုးရဲ့ အေပၚ ေအာက္ အေရွ႕ အေနာက္ အားလံုးကို border ကေန 5px ခြါမယ္လို႔ အမိန္႔ေပးလိုက္တာ၊
အားလံုးကိုေရးျပီးသြားရင္ သင့္၀က္ဆိုက္ကို ေအာက္က အတိုင္းေတြ႔ရမယ္၊


အထက္မွာေတာ့ သင့္၀က္ဆိုက္ရဲ့ Navigation Bar က အေတာ့ကိုလွပသြားပါပီ၊ အေရာင္ေရြးခ်ယ္မူကိုေတာ့ သင့္စိတ္ၾကိဳက္ျပဳလုပ္ႏိုင္တယ္၊
အေရာင္လွေလ သင့္ဆိုက္ရဲ့ ပံုစံ ပိုလွသြားမွာပါ၊

Read More

html5_5

Start Styling
ဒီအခန္းမွာေတာ့ ေရွ႕အခန္းေတြမွာတည္ေဆာက္ခဲ့တဲ့ ၀က္ဆိုက္ကို CSS နဲ႔ CSS3 သံုးျပီးစတင္အလွဆင္ပါမယ္၊ သင္ CSS နဲ႔ CSS3 ကို နားမလည္ေသးရင္
မတတ္ေျမာက္ေသးရင္ 72coder ရဲ့ CSS နဲ႔ CSS3 သင္ခန္းစာေတြကိုျပန္ဆင္းပါ၊ အခု အလွမဆင္ခင္ HTML5
၀က္ဆိုက္ကိုတစ္ခ်က္ေလာက္ရဴ႕စားလိုက္ပါဦး၊


အထက္က အတိုင္း ၀က္ဆိုက္ရဲ့ အသြင္အျပင္ကို CSS သံုးျပီး အလွစတင္ဆင္ပါမယ္၊ ကနဦး အေနနဲ႔ ၀က္ဆိုက္တစ္ခုလံုးမွာ ရွိတဲ့ စာသားေတြရဲ့ Margin နဲ႔
Padding ကို 0 လို႔ထားလိုက္မယ္၊ မထားရင္ေတာ့ default အရြယ္အစားအတိုင္းရွိေနမယ္၊ အခုလိုထည့္လိုက္ေတာ့ အားလံုးကို margin padding 0px
လို႔ေျပာင္းလိုက္တာပါ၊ ေအာက္မွာ CSS ဖိုင္ကိုၾကည့္ပါ၊


အထက္က * ၾကယ္ပံုစံသေကၤသကေတာ့ selector ျဖစ္ျပီး သူက ၀က္ဆိုက္တစ္ခုလံုးရဲ့ Tags ေတြအားလံုးကို  Select လုပ္လိုက္တာပါ၊
၀က္ဆိုက္တစ္ခုလံုးအၾကံဳး၀င္သြားပီ၊ အခု အထက္က ဖိုင္ကိုသိမ္းလိုက္ျပီး သင့္၀က္ဆိုက္ကို ဖြင့္ ၾကည့္လိုက္ပါဦး၊ ဒါဆိုရင္ေတာ့ ေအာက္က အတိုင္း
Margin နဲ႔ Padding ေတြ မရွိေတာ့လို႔ စာေၾကာင္းေတြ အေပၚေအာက္နဲ႔ ဘယ္လက္ေလးကိုကပ္သြားတာကိုေတြ႔ရမယ္၊


အထက္က အတိုင္း အားလံုး OK ရင္ေတာ့ အခု <h1> <h2><h3> Tags  ေတြကို စာလံုးအရြယ္အစား, စာလံုးမ်ိဳးႏြယ္စု, စာလံုး
စတိုင္းေတြေျပာင္းမယ္၊ ေအာက္ က CSS ဖိုင္မွာၾကည့္လိုက္ပါ၊



အထက္မွာေတာ့ h1, h2, h3 Tags ေတြကို စာလံုးအပံုစံ အရြယ္အစားနဲ႔ စာလံုး အမ်ိဳးအစား တုိ႔ကိုျပဳျပင္လိုက္ပါပီ၊ h1 အတြက္ စာလံုးအထူ၊
စာလံုးအရြယ္အစား 20px, စာလံုးအမ်ိဳးအစား “Zawgyi-One” တို႔ကိုထည့္ထားတယ္၊ h1 အတြက္ စာလံုးအထူ၊ စာလံုးအရြယ္အစား 18px,
စာလံုးအမ်ိဳးအစား “Zawgyi-One” တို႔ကိုထည့္ထားတယ္၊ h1 အတြက္ စာလံုးအထူ၊ စာလံုးအရြယ္အစား 16px, စာလံုးအမ်ိဳးအစား “Zawgyi-One”
တို႔ကိုထည့္ထားတယ္၊ CSS ဖိုင္ကို Save ျပီး သင့္၀က္ဆိုက္ကို Run ၾကည့္လိုက္ပါ ေအာက္က အတိုင္း ေတြ႔ရမယ္၊


အနီေရာင္ျပထားတာကေတာ့ h1 နဲ႔ ပတ္သတ္တဲ့စာေၾကာင္းပါ၊ အစိမ္းေရာင္ျပထားတာကေတာ့ h2 Tag နဲ႔ ၀ိုင္းထားတဲ့စာေၾကာင္းပါ၊
အျပာေရာင္ျပထားတာကေတာ့ h3 Tags နဲ႔ ၀ိုင္းထားတဲ့စာေၾကာင္းပါ၊
ေနာက္ထပ္ အေရးတၾကီးျပဳျပင္သင့္တဲ့အခ်က္တစ္ခ်က္ကေတာ့ အခ်ိဳ႕ သင့္၀က္ဆိုက္က HTML5 ကုတ္ေတြကိုနားမလည္တဲ့ browser ေတြနဲ႔ ေတြ႔တဲ့အခါ
HTML5 Tags ေတြကို block အေနနဲ႔ ျပသေအာင္ CSS နဲ႔ ျပင္ဆင္ဖို႔ပါ၊ ေအာက္မွာ HTML5 Tags ေတြကို display:block အျဖစ္ CSS နဲ႔ ျပဳျပင္ထားတယ္၊


အထက္မွာေတာ့ HTML5 Tags ေတြကို display:block ျဖစ္ေအာင္ CSS နဲ႔ အမိန္႔ေပးလိုက္ပါပီ။ ဒီလိုမွမေရးထားရင္ တခ်ိဳ႕ browser
အေဟာင္းေတြနဲ႔ ေတြ႔ရင္ သင့္၀က္ဆိုက္က HTML5 Tags ေတြကို ေရာျပီး Inline ပံုစံျပလိုက္ႏိုင္ပါတယ္၊ (block နဲ႔ Inline) ကိုနားမလည္ရင္ CSS
သင္ခန္းစာကိုသြား)
ေနာက္တစ္ဆင့္အေနနဲ႔ browser problem ကိုေျဖရွင္းဖို႔အတြက္ <body> section ကို text-align:center ထည့္ပါမယ္၊ ဒီလိုမွမထည့္ရင္ အခ်ိဳ႕
browser ေတြမွာျပသနာရွိႏိုင္လို႔ပါ၊ ေအာက္မွာ CSS ဖိုင္ကိုၾကည့္၊


အထက္မွာေတာ့ browser ေတြအားလံုးမွာ သင့္ရဲ့ ၀က္ဆိုက္ကို ကြန္ျပဴတာ မ်က္ႏွာျပင္ရဲ့ အလည္မွာေဖာ္ျပေအာင္ text-align:center ကို body section
အတြက္ေျပာင္းျပီးသြားပီ၊ ဒါဆိုရင္ေတာ့ အားလံုး အဆင္သင့္ျဖစ္ျပီ၊ ေနာက္အခန္းမွာထပ္ျပီး အလွဆင္မယ္၊ အဲ့ဒီ့ text-align:center ကိုေတာ့
မပါမျဖစ္ထည့္ရပါမယ္၊ ဒါမွမဟုတ္ရင္ေတာ့ သင့္၀က္ဆိုက္ကို တစ္ခ်ိဳ႕ကြန္ျပဴတာေတြမွာ ဘယ္ဘက္ၾကီးကပ္ျပီးျပေနမွာ ဒါဆိုရင္ေတာ့
ၾကည့္ရအေတာ့ကိုဆိုးေနလိမ့္မယ္၊

Read More

html5_4

Website Layout

ဒီအခန္းမွာေတာ့ ၀က္ဆိုက္ရဲ့ အခင္းအက်င္း (layout) ကိုျပဳျပင္ဖို႔ အသင့္ျပင္မယ္၊ ေနာက္တစ္ခန္းမွာစျပီး layout ကိုအလုပ္စလုပ္မယ္၊  အခု ေရွ႕က ဆြဲခဲ့
တဲ့ ၀က္ဆိုက္တစ္ခုလံုးကို ၾကည့္တဲ့ ကြန္ျပဴတာ တိုင္းရဲ့ အလည္မွာေရာက္ေစဖို႔ div တစ္ခုနဲ႔သတ္မွတ္မယ္၊ သတ္မွတ္မယ့္ div ကို နာမည္ container
လို႔ေပးလိုက္မယ္၊ ထည့္ရမယ့္ ေနရာက <body> အစရဲ့ ေနာက္မွာ နဲ႔ အဆံုး ရဲ့ အေပၚမွာပါ၊ ေအာက္မွာၾကည့္ပါ၊


အထက္မွာေတာ့ ၀က္ဆိုက္တစ္ခုလံုးကို ၾကည့္ရူ႕တဲ့ ကြန္ျပဴတာတိုင္းရဲ့ မ်က္ႏွာျပင္အလည္မွာေရာက္ေအာင္ ခြဲေပးမယ့္ div တစ္ခုကိုထည့္လိုက္တယ္၊
အဖြင့္ကို ျမား အျဖဴနဲ႔ ထိုးျပထားတယ္၊ အပိတ္ကိုလဲ ျမား အျဖဴနဲ႔ ေအာက္မွာထိုးျပထားတယ္၊ ခလယ္မွာေတာ့ အျခား
Tags ေတြအမ်ားၾကီးရွိေသးေပမယ့္ ေနရာ အခက္အခဲရွိလို႔ ခဏေဖ်ာက္ထားတယ္၊ သင္တို႔လဲေဖ်ာက္ခ်င္ရင္ေဖ်ာက္ႏိုင္တယ္၊ ျပန္ဖြင့္ခ်င္ရင္ေတာ့
အေပါင္းလကၡဏာေလးေတြကိုႏွိပ္လိုက္ပါ၊ အခု ထည့္ထားတဲ့ div ကို CSS ဖိုင္က ေန အမိန္႔လွမ္းေပးရအံုးမယ္၊ ျပဳျပင္ရအံုးမယ္၊ ဒီတိုင္းပဲ ထားရင္ေတာ့
အခုထည့္ထားတဲ့ “container” က ဘာမွအသံုး၀င္မွာမဟုတ္ေသးဘူး၊ သူက ၀က္ဆိုက္ရဲ့ content တစ္ခုလံုးကိုေတာ့ ၀ိုင္းထားလိုက္ပီ၊ ေနာက္အခန္းမွာ
သူ႔ကို အမိန္႔ေပး ခိုင္းေစမယ္၊
အခု အျခား Tag ေတြကိုလဲ CSS သံုးျပီး အလုပ္လုပ္လို႔ ရေအာင္ id သတ္မွတ္မယ္၊ အေပၚဆံုးက <header> ကို <header id= “top_header”> လို႔ id
သတ္မွတ္လိုက္ပါ၊ ေနာက္ျပီး ရင္ <nav> ကိုလဲ top_navigator လုိ႔ id နာမည္ေပးမယ္၊ <nav id= “top_navigator”> လို႔ေျပာင္းလိုက္ပါ၊ ျပီးရင္ေတာ့
<section> ကို <section id= “main_content”> လို႔ေျပာင္းေပးလိုက္ပါ၊ သေဘာကေတာ့ <section> ထဲမွာ id သတ္မွတ္လိုက္တာ၊ CSS နဲ႔
နာမည္ေခၚျပီးအလုပ္ခိုင္းလို႔ရေအာင္၊ ေနာက္ျပီးရင္ေတာ့ <aside> ကို <aside id= “sidebar”> လို႔ေျပာင္းေပးလိုက္ပါ၊ ဒါက <aside> ကို id
နာမည္သတ္မွတ္လိုက္တာ၊ ေနာက္ဆံုးတစ္ခုကေတာ့ <footer> ပါ၊ သူ႔ကိုလဲ <footer id= “the_footer”> လို႔နာမည္ေပးလိုက္ပါ၊ ေအာက္မွာဥပမာ ရွဴ႕


အထက္က အဆင့္ အထိ အားလံုးလုပ္ေဆာင္ျပီးသြားရင္ေတာ့ CSS ဖိုင္ကိုတည္ေဆာက္ၾကပါမယ္၊ <head> section မွာသတ္မွတ္ခဲ့တဲ့အတိုင္း CSS ဖိုင္ကို
style.css လို႔ နာမည္ေပးလိုက္ပါ၊ အဓိက အေရးၾကီးတာကေတာ့ CSS ဖိုင္ကို HTML ဖိုင္နဲ႔ ဖိုဒါတစ္ခုထဲမွာပဲ သိမ္းဖို႔ပါ၊ သိမ္းတဲ့အခါ က်ရင္ Style ေနာက္မွာ
.css လို႔ Extension နာမည္ထည့္ျပီးသိမ္းပါ၊ သိမ္းျပီးသြားရင္ေတာ့ ေအာက္က ပံုစံအတိုင္းေတြ႔ရပါမယ္၊

အထက္က အတိုင္း style.css ဖိုင္ကိုတည္ေဆာက္ျပီးသြားရင္ေတာ့ ေနာက္တစ္ခန္းမွာ စျပီး style စတင္ေရးပါမယ္၊

Read More

html5_3

Article for Section
ဒီသင္ခန္းစာမွာေတာ့ <section> ထဲကို Articale ထည့္တဲ့ ပံုစံကိုရွင္းျပေပးမယ္၊ Article  ဆိုေတာ့ ေဆာင္းပါး ေပါ့၊ ဒါေပမယ့္ နာမည္ပဲ ယူထားတာပါ၊

တကယ့္ ေဆာင္းပါးေတြနဲ႔ တူစရာမလိုပါဘူး၊ <section> အဖြင့္ နဲ႔ အပိတ္ </section> ၾကားမွာ Article ကိုထည့္ရမယ္၊ <article > အဖြင့္နဲ႔ </article>

 အပိတ္တို႔ပါ၊  ေအာက္က အတိုင္း၊
အထက္က အတိုင္း <article> အဖြင့္ နဲ႔ </article> အပိတ္တို႔ကို <section> အဖြင့္ နဲ႔ </section> အပိတ္တို႔ၾကားမွာထည့္ေပးရတယ္၊
ဒီလိုထည့္ေပးလိုက္တာက အေၾကာင္းရွိပါတယ္၊ <article> အဖြင့္နဲ႔ အပိတ္ ၾကားမွာ layout တစ္ခု တည္ေဆာက္ဖို႔ပါ၊ အဲ့ဒီ့ <article>
Tags ႏွစ္ခုၾကားမွာေရးမယ့္ စာသားေတြ ပံုေတြကို ေခါင္းစဥ္ထည့္မယ္၊ စာပိုဒ္ေတြထည့္မယ္၊ footer ထည့္မယ္၊ အဲ့ဒါေတြအားလံုးကို လုပ္ဖို႔အတြက္
<article> Tags ၾကားမွာလုပ္ႏိုင္ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊


အထက္မွာေတာ့ <article > အထဲမွာ header , paragraph, footer တို႔ကိုထည့္လိုက္ပါပီ၊ paragraph မွာေတာ့ စာသားတစ္ခ်ိဳ႕ပါထည့္လိုက္ပါတယ္၊ အခု
<header>အဖြင့္ နဲ႔ </header> တို႔ထဲမွာ ေခါင္းစဥ္  ႏွစ္ခုထည့္မယ့္၊

အထက္မွာေတာ့ <article > အထဲမွာ header , paragraph, footer တို႔ကိုထည့္လိုက္ပါပီ၊ paragraph မွာေတာ့ စာသားတစ္ခ်ိဳ႕ပါထည့္လိုက္ပါတယ္၊ အခု
<header>အဖြင့္ နဲ႔ </header> တို႔ထဲမွာ ေခါင္းစဥ္  ႏွစ္ခုထည့္မယ့္၊


အထက္မွာေတာ့ Article ရဲ့ header ဆိုတဲ့ section ထဲမွာ ေခါင္းစဥ္ႏွစ္ခုထည့္လိုက္ပါပီ၊ ဒီမွာ တစ္ခု သတ္မွတ္စရာက်န္ေသးတယ္၊  ေခါင္းစဥ္
တစ္ခုထပ္ပိုျပီးတပ္ရင္ေတာ့ အဲ့ဒီ့ ေခါင္းစဥ္ေတြကို အုပ္စုခြဲေပးရမယ္၊ ေခါင္းစဥ္အုပ္စုကို <hgroup> </hgroup> အပိတ္တို႔နဲပ ၀ိုင္းေပးရပါတယ္၊ တစ္ခုထဲ
ဆိုရင္ေတာ့ <hgroup> နဲ႔ ၀ိုင္းစရာမလိုပါဘူး၊ ေအာက္မွာ <hgroup> နဲ႔ ၀ိုင္းထားတဲ့ပံုပါ၊


အထက္မွေတာ့ Atricle အတြင္းရွိ <header> ထဲက ေခါင္းစဥ္ႏွစ္ခုကို <hgroup> နဲ႔ ၀ိုင္းျပီး မွတ္သားလိုက္ပါပီ၊
 ဒီလိုမမွတ္သားလို႔မရဘူးေနာ္၊ ေခါင္းစဥ္တစ္ခုပဲ တပ္ထားရင္ ေတာ့ မွတ္သားစရာမလိုဘူး၊ အခုေခါင္းစဥ္ပိုင္းေတာ့ အေတာ္ေလးလံုေလာက္သြားပီ၊
ထပ္ျပီးလုိအပ္တာကေတာ့ footer မွာစာသားအနည္းငယ္ထည့္ဖို႔ပါ၊ သင္ၾကိဳက္တဲ့စာသားထည့္ႏိုင္ပါတယ္ ေအာက္က အတိုင္း


အထက္က အတိုင္း Footer ထဲမွာ စာအနည္းငယ္ထည့္ျပီးသြားရင္ျဖင့္ Article section က အေတာ္ေလးျပည့္စံုသြားပါပီ၊ ဒီမွာတစ္ခုေျပာလိုတာက
<section> Tag ထဲက article ကို တစ္ခုထဲမဟုတ္ပဲ ၾကိဳက္သေလာက္ထည့္ႏိုင္ပါတယ္၊ ေအာက္မွာေနာက္ထပ္တစ္ခုထပ္ထည့္ျပမယ္၊


အထက္မွာေတာ့ <section> Tag ထဲမွာေနာက္ထပ္ article တစ္ခုထပ္ထည့္လိုက္တာပါ၊ အိုေက အခု ဆိုက္ရဲ့ အသြင္အျပင္ကို Google Chrome နဲ႔
ဖြင့္ျပီးၾကည့္လိုက္မယ္၊ ေအာက္မွာၾကည့္ပါ၊


အထက္မွာေတာ့ လက္ရွိ သင္ဆြဲထားျပီးတဲ့ ဆိုက္ပံုစံပါ၊ လံုး၀မလန္းေသးဘူး၊ မပူပါနဲ႔ သင္မယံုၾကည့္ႏိုင္ေလာက္တဲ့ အလွဆင္မူမ်ိဳးကို CSS
အသံုးျပဳျပီး ေနာက္သင္ခန္းစာေတြမွာလုပ္သြားမွာပါ၊ အခုေတာ့ HTML5 ရဲ့ Layout ခ်မွတ္ပံုနဲ႔ Tags ေတြ အသံုးျပဳပံုကိုသာ သင္အာရံုစိုက္ျပီး
နားလည္ေအာင္လုပ္ထားပါ၊ ေနာက္ပိုင္း မွအလွဆင္မယ္၊ ေနာက္ပိုင္းအလွဆင္ရင္ အခု ရွင္းျပေနတဲ့ HTML5
Tags ေတြကို ျပန္ရွင္းျပေတာ့မွာမဟုတ္တဲ့အတြက္ ဒီသင္ခန္းစာေတြကို ေက်ေက် ညက္ညက္ နားလည္ထားဖို႔လိုပါတယ္၊

Read More

htmk5_2

Filling body part     
ဒီသင္ခန္းစာမွာေတာ့ body အစိတ္အပိုင္းကို HTML5 သံုးျပီးသေရးသြားမယ္၊ ၀က္ဆိုက္ေတြကို စတင္တည္ေဆာက္တုန္းက HTML ရဲ့ table နည္းကိုသံုးျပီး
၀က္ဆိုက္တစ္ခုလံုးရဲ့ အသြင္အျပင္နဲ႔ ေနရာခ်ထားမူ အစီအစဥ္ေတြကိုတည္ေဆက္ခဲ့ပါတယ္၊ ေခါင္းစဥ္ပိုင္း (heading) ဆိုရင္ ၀က္ဆိုက္ရဲ့ေခါင္းစဥ္အတြက္၊
Navigation Bar ဆိုရင္ ၀က္ဆိုက္ရဲ့ အျခားစာမ်က္ႏွာေတြကို ကူးေျပာင္းႏိုင္ေအာင္လင့္ခ်ိတ္ထားတဲ့ အခ်က္အလက္ေတြ၊ Side bar ဆိုရင္
၀က္ဆိုက္မွာပါ၀င္တဲ့ က႑ အသီးသီးရွိတဲ့ စာမ်က္ႏွာေတြကို အလြယ္တစ္ကူ ၀င္ေရာက္ဖို႔အတြက္စာမ်က္ႏွာ၊  content ဆိုရင္ ၀က္ဆိုက္ရဲ့ အဓိက
စာမ်က္ႏွာေတြကိုေရးတဲ့အစိတ္အပိုင္း၊ Footer ဆိုရင္ ၀က္ဆိုက္ရဲ့ ေအာက္ဆံုးအပိုင္းမွာေနရာယူျပီး ၀က္ဆိုက္နဲ႔ ပက္သတ္တဲ့ ဆက္သြယ္ရန္လိပ္စာတို႔၊
Term and Condition တို႔ကိုထည့္ပါတယ္၊ ေအာက္က ၀က္ဆိုက္ကို ဥပမာ ၾကည့္ပါ၊

အထက္က ၀က္ဆိုက္မွာ အစိမ္းေရာင္ျပထားတဲ့ေနရာကေတာ့ Header အပိုင္းျဖစ္တယ္၊ အနီေရာင္ျပထားတဲ့အစိတ္အပိုင္းကေတာ့ Navigiator
အပိုင္းျဖစ္တယ္၊ အ၀ါေရာင္ျပထားတဲ့အစိတ္အပိုင္းကေတာ့ content အပိုင္းျဖစ္တယ္၊ အျပာေရာင္ျပထားတဲ့အပိုင္းကေတာ့ Sidebar အပိုင္းပါ၊
ခရမ္းေရာင္ျပထားတဲ့အပိုင္းကေတာ့ Footer အပိုင္းပါ၊ အထက္က ဆိုက္အတိုင္းပါပဲ ၀က္ဆိုက္အမ်ားစုက herder,navigator,sidebar,content,footer
ဆိုျပီး အစိတ္အပိုင္းအသီးသီးခြဲျခားျပီးေရးၾကပါတယ္၊ ကနဦးေတာ့ HTML ရဲ့ table နည္းကိုသံုးျပီး အထက္က အစိတ္အပိုင္း
ငါးခုကိုခြဲပါတယ္၊ ေနာက္ပိုင္းမွာေတာ့ div ကိုသံုးျပီး အထက္က အစိတ္အပိုင္းငါးခုကိုခြဲလာပါေတာ့တယ္၊ div ကိုသံုးျခင္းက HTML table
tag ေတြကိုသံုးျခင္းထက္အစေပါင္းမ်ားစြာ ပိုအဆင္ေျပာပါတယ္၊ div ကိုသံုးျခင္းအားျဖင့္ လိုအပ္တဲ့ အစိတ္အပိုင္း တစ္ခုစီကို
ၾကိဳက္တဲ့အခ်ိန္မွာ ျပင္ဆင္လို႔ရတယ္၊ တည္းျဖတ္လို႔ရတယ္၊ ၾကိဳက္တဲ့အခ်ိန္အလွဆင္လို႔ရတယ္၊
အထက္က လို၀က္ဆိုက္ေတြရဲ့ အေျခခံ တည္ေဆာက္ပံုေတြတူညီတယ္ဆိုတာကို သေဘာေပါက္တဲ့ HTML5 developer ေတြက ပိုမိုလြယ္ကူျပီး

၀က္ဆိုက္တည္ေဆာက္ရာမွာ အဆင္ေျပမယ့္နည္းတစ္ခုကို Develop လုပ္ခဲ့တယ္၊  ေအာက္မွာၾကည့္ပါ၊


အထက္က <body> အဖြင့္အပိတ္ၾကားက ေရးခဲ့တဲ့ Tag ပံုစံကေတာ့ HTMl5 ၀က္ဆိုက္အတြက္ Header ကိုေရးတဲ့ပံုစံပါ၊
ၾကားျဖတ္ျပီးတစ္ခုေလာက္သင္ေပးခ်င္ပါတယ္၊ အထက္က ပံုရဲ့အနီေရာင္ျမားျပ ထားတဲ့ ေနရာမွာ အျဖဴေရာင္အတုန္းေလးနဲ႔ အဲ့ဒီ့အတုန္းေလးထဲမွာ
အႏုတ္သေကၤသကိုေတြပမွာပါ၊ အဲ့ဒီ့ အႏုတ္သေကၤသေလးကို ခလစ္တစ္ခ်က္ႏွိပ္လိုက္ရင္ေတာ့ <head> Section
တစ္ခုလံုးေပ်ာက္သြားမယ္၊ ေပ်ာက္သြားမယ္ဆိုတာ
လံုး၀ပ်က္သြားတာကိုေျပာတာမဟုတ္ပါဘူး၊ ေဖ်ာက္ထားေပးတာကိုေျပာတာပါ၊ ႏွိပ္ၾကည့္လိုက္ပါ ေအာက္က အတိုင္းျဖစ္သြားမယ္၊


အထက္က ပံုကေတာ့ <head> Section ကိုေဖ်ာက္ထားတဲ့ပံုပါ၊ ျပန္ျပီးေပၚေစခ်င္ရင္ေတာ့ <head> ရဲ့ဘယ္လက္က အေပါင္းလကၡဏာေလးကိုႏွိပ္လိုက္ပါ၊
ဒါဆိုရင္ျပန္ေပၚလာမယ္၊
အခု <body> Section ထဲမွာရွိတဲ့ <header> အေၾကာင္းကို ေလ့လာရေအာင္၊ ဒီ <header> အဖြင့္နဲ႔ အပိတ္ </header> Tags တို႔က
၀က္ဆိုက္တစ္ခုရဲ့ ေခါင္းစဥ္ ကိုကိုစားျပဳတယ္၊ ေခါင္းစဥ္က စာျဖစ္ရင္ျဖစ္မယ္၊ ပံုျဖစ္ရင္ျဖစ္မယ္၊ အဲ့ဒီ့ အစိတ္အပိုင္းကို <header> အျဖစ္သတ္မွတ္တယ္၊
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္္ ေအာက္က အတိုင္း google Chrome မွာ သင့္၀က္ဆိုက္ကိုေတြ႔ရမယ္၊


အထက္က ေတာ့ သင္ေရးလိုက္တဲ့ ၀က္ဆိုက္ရဲ့ header အပိုင္းပါ၊ Browser ကလဲ သင္ေရးလိုက္တဲ့ <header> Tags အဖြင့္အပိတ္ၾကားက
စာေတြအားလံုးက ေခါင္းစဥ္အတြက္ဆိုတာကိုေသခ်ာသိတယ္၊ အခု ့ေနာက္ထပ္တစ္ဆင့္အေနနဲ႔ Navigation Bar ထည့္ပါမယ္၊ ေအာက္က အတိုင္း


အထက္မွာေတာ့ Navigation Bar ထည့္လိုက္ပါပီ၊ HTML5 မွာ Navigation bar ကိုတိုက္ရိုက္ထည့္တဲ့ ကုတ္ကေတာ့ <nav> အဖြင့္ နဲ႔ </nav> အပိတ္
Tag တို႔ပါ၊ အခု ဥပမာ မွာ စာရင္း သံုးခုပါတယ္၊ unordered list ပံုစံနဲ႔ ေရးထားတာ၊ အဲ့ဒီ့ <nav> ဆိုတဲ့ Tag ကိုေတြ႔ရင္ browser ေတြက Navigation
မွန္းသိတယ္၊  အထက္က ကုတ္ေတြေရးျပီးရင္ သိမ္းလိုက္ပါ၊ ျပီးရင္ Google Chrome နဲ႔ Run ၾကည့္လိုက္ပါ၊ ေအာက္က အတိုင္း
သင့္၀က္ဆိုက္ကိုေတြ႔ရမယ္၊


အထက္က ပံုစံကေတာ့ သင့္၀က္ဆိုက္ကို ျမင္ရမယ့္ပံုစံပါ၊ ေလာလာ ဆယ္ အလွမဆင္ရေသးဘူး၊ မပူနဲ႔ ေနာက္အခန္းမွာ CSS သံုးျပီး
အလွဆင္မယ္၊ ေနာက္တစ္ဆင့္အေနနဲ႔ Content ကိုထည့္မယ္၊ Content ကို ကိုယ္စာျပဳမယ့္ HTML5 Tag ကေတာ့ <section> အဖြင့္နဲ႔ </section>
အပိတ္တို႔႔ပါ၊ ေအာက္မွာၾကည့္ပါ၊


အထက္မွာေတာ့ <section> ကို ထည့္လိုက္ပါပီ၊ <section> အဖြင့္နဲ႔ </section> အပိတ္တို႔ၾကားမွာထည့္သမွ်စာသားေတြ ပံုေတြ သင့္ဆိုက္ရဲ့ အဓိက
စာေရးတဲ့ အစိတ္အပိုင္းကို ကိုယ္စာျပဳမွာပါ၊ အထက္က ဥပမာ မွာ <header> နဲ႔ <nav> တို႔ကို ခဏေဖ်ာက္ထားတာကိုေတြ႔ရမယ္၊ ျပန္ေဖာ္ခ်င္ရင္
အေပါင္းလကၡဏာေလးေတြကိုႏွိပ္၊ အထက္က အတိုင္း Section ထည့္ျပီးရင္ျဖင့္ Google Chorme မွာ Run ၾကည့္လိုက္ပါ၊
သင့္၀က္ဆိုက္ကိုေအာက္ပါအတိုင္းေတြ႔ရမယ္၊


အထက္က အဆင့္အထိျပီးသြားရင္ျဖင့္ Side bar ထည့္ပါမယ္၊ Side bar ကိုကုိယ္စားျပဳတဲ့ HTML5 Tag ကေတာ့ <aside> ပါ၊ အဖြင့္ <aside> နဲ႔ အပိတ္
</aside> တို႔ ၾကားက စာသားေတြအားလံုးကို browser က side bar ထဲက စာေတြလို႔သတ္မွတ္ပါလိမ့္မယ္၊ ေအာက္မွာၾကည့္ပါ၊


အထက္က အတိုင္း side bar ကို ကုိယ္စာျပဳတဲ့ <aside> Tag ကိုထည့္ျပီးသြားရင္ျဖင့္ Google Chrome မွာ Run ၾကည့္လိုက္ပါ၊ ေအာက္က

အတုိင္းေတြ႔ရမယ္



အထက္က အဆင့္ အတိုင္း side bar ကိုထည့္ျပီးသြားရင္ျဖင့္ ေနာက္တစ္ဆင့္အေနနဲ႔ Footer ထည့္ပါမယ္၊ <footer> အဖြင့္နဲ႔ </footer>
အပိတ္တို႔ကိုထည့္မွာပါ၊  အဲ့ဒီ့ <footer> အဖြင့္နဲ႔ </footer> အပိတ္တို႔ၾကားက စာသားေတြအားလံုးကို browser ကလဲ footer
ထဲမွာပါတဲ့စာသားေတြအျဖစ္ေဖာ္ျပေပးမွာပါ၊ ေအာက္မွာၾကည့္ပါ၊



အထက္မွာေတာ့ ၀က္ဆုိက္ထဲကို footer ထည့္လိုက္ပါပီ၊ Run ၾကည့္္လိုက္ရင္ေအာက္က


ဆိုက္က မလွေသးပါဘူး၊ မပူပါနဲ႔ ေနာက္တစ္ခန္းမွာ CSS သံုးျပီးအလွဆင္သြားမွာပါ၊ အခုေတာ့ HTML5 Code ေတြကို ဘယ္လိုေရးလဲ
၀က္ဆိုက္မွာဘယ္လိုေပၚလဲဆိုတာကိုေသခ်ာေလ့လာထားပါ၊ ေနာက္တစ္ခန္းမွာ အလွဆင္မယ္၊ ဒီအခန္းကို နားလည္မွ ေနာက္တစ္ခန္းသြား၊

Read More