Developing A Simple Website by yourself

Developing A Simple Website by yourself (lesson 7)

မဂၤလာပါ။ဒီေန႔ေတာ့ Table အေၾကာင္းကိုတင္ေပးသြားပါမယ္။
Webpage တစ္ခုတည္ေဆာက္ရာမွာ Table ကအေရးပါပါတယ္။Table ကပဲကိုယ့္ရဲ႕ Webpage ကို frame က်ေအာင္လုပ္ႏိုင္ပီး ပံုစံက်ေအာင္ပံုေဖာ္ေပးႏိုင္တာပါ။ေနာက္ပိုင္းက်ရင္ေတာ့ div နဲ႔ CSS ေပါင္းပီး page ကိုလွေအာင္ျပင္ႏိုင္ပါတယ္။ဒီTable နဲ႔ frame အေၾကာင္းကိုနားလည္ပီဆိုရင္ HTML တစ္ခုတည္းနဲ႔ webpage ေသးေသးေလးေတြလုပ္ႏိုင္မွာပါ။page ေတြကို Link ခ်ိတ္လိုက္ရင္ website ေသးေသးေလးရမွာေပါ့ေနာ့္ 😁။ (HTML နဲ႔ android app လုပ္လို႔ရပါေသးတယ္။Web-view နဲ႔ၾကည့္ရတာေပါ့။Website ကို app အျဖစ္ convert လုပ္လိုက္တဲ့သေဘာပါ။Application နဲ႔လုပ္ရတာပါ။HTML ပီးရင္တင္ေပးပါမယ္။ 😁)

Div Tag

<div> </div>
အတြင္းမွာေရးသားထားတဲ့ စာေတြနဲ႔ code ေတြကိုသပ္သပ္စီေဖာ္ျပေပးမွာပါ။div tag အတြင္းကစာေတြက block တစ္ခုလိုျဖစ္သြားတာပါ။div tag က webpage တစ္ခုမွာ width ကို ဘယ္ကေနညာထိအျပည့္ယူပါတယ္။
Div tag နဲ႔ CSS နဲ႔ေပါင္းပီးWebpage မွာ အလွဆင္ထားတဲ့ block တစ္ခုလုပ္လို႔ရပါတယ္။

အေပၚက code မွာဆိုရင္ div tag အတြင္း paragraph တစ္ခုေရးထားပီး css code ေတြနဲ႔ အလွဆင္ထားပါတယ္။
ကြၽန္ေတာ္တို႔ေရးလိုက္တဲ့ paragraph ေလးက webpage ထဲမွာ သီးျခားေနတဲ့ block တစ္ခုလိုျဖစ္ေနပါလိမ့္မယ္။

ကြၽန္ေတာ္တို႔ Background ကို အမဲေရာင္ထားခဲ့ေပမဲ့ page တစ္ခုလံုးမမဲသြားပါပူး။ Div tag အတြင္းမွာပဲေျပာင္းသြားတာပါ။

Table

Table တစ္ခုမွာ အေျခခံအေနနဲ႔ roll နဲ႔ column ေတြပါဝင္ပါတယ္။roll ေတြ column ေတြကို cell ကြက္ေလးေတြနဲ႔ဖြဲစည္းထားတာပါ။သူ႔မွာ က CSS code ေတြထည့္ေရးပီး အဆင္ေျပေအာင္လုပ္ေပးရပါတယ္။
နမူနာ code မေရးခင္ အသံုးျပဳမဲ့ tag ေတြကိုအရင္႐ွင္းျပပါမယ္။

<table>

ဒီ tag ထဲမွာပဲအကုန္ေရးရမွာပါ။ဒီ tag ထဲမွာ code ေတြေရးလိုက္ရင္ table တစ္ခုျဖစ္ပါပီ။ဒီလို tag မ်ိဳးေနာက္တစ္ခု ထပ္ဖြင့္ပီး Table အမ်ားႀကီးေရးႏိုင္ပါတယ္။table ထဲမွာလဲ ေနာက္ထပ္ table ေတြေရးႏိုင္ပါတယ္။

<tr>

ဒါက cell ကြက္ roll ပါ။

<td>

ဒါက table dataပါ။ဒီtag ထဲမွာ မိမိေရးခ်င္တဲ့ စာသားကိုေရးရမွာပါ။

<th>

ဒါက table headပါ။Head ဆိုတဲ့အတိုင္း ႐ွင္း႐ွင္းလင္းလင္း ျမင္ရေအာင္ စာသားေတြကို Auto မဲေပးထားမွာပါ။

<caption>

ဒါက မိမိေရးထားတဲ့ Table အေပၚမွာ Caption အျဖစ္ေဖၚျပေပးမွာပါ။

--Table tag ထဲမွာ Caption tag,th tag, tr tag, td tag, ေတြေရးရမွာပါ။
--tr tag ေတြကို Table tag ထဲမွာႀကိဳက္သေလာက္ေရးပီး row ေတြအမ်ားႀကီးဖန္တီးလို႔ရပါတယ္။
--td tag ကို လဲ tr tag ထဲမွာ ႀကိဳက္သေလာက္ေရးပီး column ေတြအမ်ားႀကီးဖန္တီးလို႔ရပါတယ္။
-- အကုန္လံုးမွာ အပိတ္ tag ႐ွိပါတယ္။

ကဲ့နမူနာcode ေလးေတြေလ့လာၾကည့္ရေအာင္ဗ်ာ။

ကြၽန္ေတာ္ row ႏွစ္ခုနဲ႔ column သံုးခုရွိတဲ့ table ကိုေရးလိုက္တာပါ။
table tag ထဲမွာ tr tag ႏွစ္ခု႐ွိပါတယ္။
row ႏွစ္ခုပါ။
tr tag တစ္ခုစီမွာ td tag သံုးခု႐ွိပါတယ္။ column 3 ခုပါ။အခုမွစေလ့လာတဲ့သူေတြအတြက္႐ႈပ္ခ်င္႐ႈပ္ပါမယ္။ သံုးတက္သြားရင္ တကယ္အသံုးဝင္ပီး ေတာ္ေတာ္လြယ္ပါတယ္။
ဒါက output ပါ

ကြၽန္ေတာ္တို႔ အေပၚက ေရးထားတဲ့ table မွာပဲ ေနာက္ထပ္ row တစ္ခု ထပ္ထည့္ပီး row သံုးခု column သံုးခုပါတဲ့ table တစ္ခုေရးၾကည့္ပါမယ္။

Row သံုးခုမို႔လို႔ tr tag သံုးခုပါပါမယ္။
row တစ္ခုစီမွာ td tag သံုးခုပါပါမယ္။

Output ပါ။

ကြၽန္ေတာ္တို႔ table နဲ႔ td ရဲ႕ width ကိုထိန္းခ်ဳပ္လို႔ရပါတယ္။width ကို % or pixel နဲ႔ သတ္မွတ္လို႔ရပါတယ္။pixel နဲ႔သတ္မွတ္တာက အေသပါ။ % က်ေတာ့ browser အလိုက္ေျပာင္းေပးပါတယ္။ browser ႀကီးရင္ လိုက္ႀကီးတယ္ ေသးရင္လိုက္ေသးပါတယ္။
နမူနာ code ကိုၾကည့္ပါမယ္။

အေပၚကေရးထားတဲ့ code ေတြမွာပဲထပ္ေရးလိုက္ပါမယ္။
Table tag ထဲမွာ width="100%" ဆိုပီးေရးလိုက္ပါ။

code ကို run ၾကည့္လိုက္တဲ့အခါ အခုနကနဲ႔မတူဘဲ table ဟာ browser တစ္ခုလံုးအျပည့္ယူထားတာကိုေတြ႔ရမွာပါ။
Browser ကိုခ်ံဳ႕ၾကည့္ခ်ဲ့ၾကည့္ပါ။browser အက်ဥ္းအက်ယ္ အတိုင္း table ေလးဟာ လိုက္ေျပာင္းေနပါလိမ့္မယ္။

ကြၽန္ေတာ္တို႔ အေပၚက ေရးထားတဲ့
width="100%" ေနရာမွာ
width="1000px" လို႔ေျပာင္းေရးၾကည့္ပီး code ကို run ၾကည့္ပါ။Browser ကို ခ်ံဳ႕လိုက္ခ်ဲ့လိုက္လုပ္ရင္လဲ table ဟာ မေျပာင္းလဲဘဲ႐ွိေနတာေတြ႕ရမွာပါ။

ကဲဒီေန႔ေတာ့ ဒီေလာက္ပါပဲ။
ဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးတင္ပါဆယ္။

Written by @minthwayko
MSC - 187