ၿပီးခဲ့တဲ့ ပို႕စ္ျဖစ္တဲ့ “အိတ္ခ်္ … ထီ … အန္မ္ … အယ္လ္ – ၃” မွာ table တစ္ခုကို အၾကမ္းဖ်င္း တည္ေဆာက္ပံုကို ေျပာခဲ့ၿပီးပါၿပီ။ ဒီအခါမွာေတာ့ အေခ်ာ တည္ေဆာက္ၾကည့္ၾကရေအာင္။

အက်ယ္နဲ႕ အျမင့္

ဇယားကြက္ အၾကမ္းမွာေတာ့ အက်ယ္အဝန္းလည္း မသတ္မွတ္ခဲ့သလို အျမင့္ကိုလည္း မသတ္မွတ္ခဲ့ပါဘူး။ ဇယားကြက္ (table) ရဲ႕ အက်ယ္နဲ႕ အျမင့္ကို သတ္မွတ္ေပးဖို႕ ဆိုရင္ width နဲ႕ height ဆိုတာကို table အဖြင့္ tag ထဲမွာ ထည့္သြင္း ေရးသားေပးရပါတယ္။ အဲလို သတ္မွတ္ေပးတဲ့ အခါမွာေတာ့ က်ေနာ္က pixel အေနနဲ႕ ျပေပးသြားပါမယ္။ pixel ကိုေတာ့ အတိုအေနနဲ႕ px ဆိုၿပီး သံုးပါတယ္။ ဥပမာအားျဖင့္ – <table border=”1” width=”800px” height=”600px”> </table> ။

မေန႕က ေဆာက္ခဲ့တဲ့ ဇယားကြက္ အၾကမ္းထဲက (အေပၚ colum နဲ႕ ေအာက္ colum ညီမွ်တဲ့ ဇယားကြက္) table အဖြင့္ tag ထဲမွာ ဥပမာထဲက အတုိင္း ထည့္ၿပီး save၊ ၿပီးရင္ ျပန္ run ၾကည့္လိုက္ပါ။ ဇယားကြက္က ႀကီးသြားတာကို ေတြ႕ရပါလိမ့္မယ္။ ဇယားကြက္ႀကီးသလို row ေတြ colum ေတြကလည္း ႀကီးလိုက္လာတာကို ေတြ႕ရပါလိမ့္မယ္။ က်ေနာ္တို႕က ဒီလုိ မျဖစ္ခ်င္ဘူး။ အေပၚဆံုး row ရဲ႕ အျမင့္ကို နည္းနည္း က်ဥ္းက်ဥ္းေလး ထားခ်င္တယ္ ဆိုပါစို႕။ ဒါဆို ပထမ row ရဲ႕ အဖြင့္ tag ထဲမွာ height=”50px” ဆိုၿပီး ထည့္ေပးရမွာပါ။ 50px ေနရာမွာေတာ့ ကိုယ္ႀကိဳက္တဲ့ ဆိုက္ကို ေျပာင္းေပါ့။ ပံုစံ – <tr height=”50px”> </tr> ။

Row ရဲ႕ width ကေတာ့ ျပင္လို႕ ရမွာ မဟုတ္ေသးပါဘူး။ သူက table ရဲ႕ width အတိုင္း သြားတာမို႕ပါ။ row ရဲ႕ အျမင့္ကို ျပင္လို႕ရသလို colum ရဲ႕ အျမင့္ကိုလည္း ျပင္လို႕ရပါတယ္။ ဒါေပမယ့္လို႕လည္း colum ရဲ႕ အျမင့္ကို သတ္မွတ္ရင္ row ရဲ႕ အျမင့္ပါ လိုက္ၿပီး ျမင့္သြားပါလိမ့္မယ္။ ဒါေၾကာင့္ colum ရဲ႕ အက်ယ္ (width) ကိုပဲ ျပင္ၾကည့္ရေအာင္။

ပထမဆံုး row ရဲ႕ ပထမဆံုး colum အဖြင့္ tag ထဲမွာ ကိုယ္ႀကိဳက္တဲ့ အက်ယ္အဝန္း ဆိုက္ကို ထည့္လိုက္ပါ။ က်ေနာ္ကေတာ့ width=”100px” လို႕ပဲ ထည့္လိုက္တယ္။ အဲဒီလို ထည့္ၿပီး ျပန္ run ၾကည့္လိုက္ရင္ colum ရဲ႕ အက်ယ္က သတ္မွတ္ေပးထားတဲ့ 100 pixel အက်ယ္ ျဖစ္သြားပါလိမ့္မယ္။ ဥပမာ – <td width=”100px”> </td> ။ ဒီေလာက္ဆို table နဲ႕ အဲဒီ table ထဲက row (tr) နဲ႕ colum (td) ေတြရဲ႕ အက်ယ္နဲ႕ အျမင့္ကို ကလိၾကည့္လို႕ ရသြားပါၿပီ။

Tag မ်ားအား ျပန္လည္ ေတြးၾကည့္ျခင္း

က်ေနာ္တို႕ အစကေန အသံုးျပဳခဲ့တဲ့ tag ေတြကို ျပန္လည္ ေတြးၾကည့္ရင္ –

<html> </html>
<title> </title>
<body> </body>
<table> </table>
<tr> </tr>
<td> </td>
<b> </b>
<i> </i>
<u> </u>
<font> </font>
<img>
<br>

ဒါေတြကို က်ေနာ္တို႕ အသံုးျပဳၿပီး ေရးၾကည့္ခဲ့ပါတယ္။ အဲဒီထဲမွာ html tag ကေတာ့ main tag လို႕ ဆိုရမလားပဲ။ ၿပီးေတာ့ title tag က browser ေတြရဲ႕ tab မွာ ေခါင္းစဥ္အေနနဲ႕ ေပၚခ်င္တဲ့အခါ အသံုးျပဳဖို႕ပါ။ ဥပမာ အားျဖင့္ က်ေနာ္တို႕ ေဂဇက္ဖြင့္တဲ့အခါ browser tab ေပၚမွာ ျမွားကေလး တင္ၾကည့္လိုက္ပါ။ ဒါဆို The Mandalay Gazette-Myanmar/Burma News စသည္ျဖင့္ ျပေပးပါလိမ့္မယ္။ ဒါက ေဂဇက္ရဲ႕ title ပါ။ က်ေနာ္တို႕ Html ေရးတဲ့အခါမွာလည္း ကိုယ္ထည့္ခ်င္တဲ့ title ကို အဲဒီ title tag ၾကားထဲမွာ ေရးေပးရမွာပဲ ျဖစ္ပါတယ္။

Body tag
Body tag ကေတာ့ webpage တစ္လံုးလံုးရဲ႕ မ်က္ႏွာျပင္ tag လို႕ ေျပာရမလားပဲ။ အဲဒီ body tag ထဲမွာမွ table ေတြ၊ ပံုေတြ စသည္ျဖင့္ ထည့္သြင္း အသံုးျပဳပါတယ္။ အဲဒီ body tag ထဲမွာ၊ တစ္နည္းအားျဖင့္ body အဖြင့္ tag ထဲမွာ ေနာက္ခံအေရာင္ (bgcolor) ကို ထည့္သြင္း အသံုးျပဳႏိုင္ပါတယ္။ ပံုမွန္အားျဖင့္ body ရဲ႕ ေနာက္ခံ အေရာင္ဟာ အျဖဴေရာင္ပါ။ ဒါကို က်ေနာ္တို႕က အျပာေရာင္ ထားခ်င္တယ္ ဆိုပါစို႕။ ဒါဆို က်ေနာ္က body အဖြင့္ tag ထဲမွာ ဒီလိုေလး ထည့္ေရးလိုက္မယ္ – <body bgcolor=”blue”> ။ ကာလာေတြကို code ေတြနဲ႕လည္း ထည့္သြင္းေရးသားပါတယ္။ ကာလာ မ်ိဳးစံုရဲ႕ code ေတြကိုေတာ့ ဒီေနရာမွာ သြားယူလိုက္ပါ။ http://pvrguy.tripod.com/MyLightLanguage_HTML_True_Color_Chart.pdf ….

Table tag
ဇယားကြက္တစ္ခု ေဆာက္ခ်င္ရင္ ဒီ table tag ကို အသံုးျပဳရပါတယ္။ table ရဲ႕ အတြင္းထဲမွာေတာ့ row အတြက္ tr ဆိုတဲ့ tag နဲ႕ colum အတြက္ td ဆိုတဲ့ tag ေတြကို အသံုးျပဳရပါတယ္။ Table အဖြင့္ tag ထဲမွာ ေနာက္ခံအေရာင္ (bgcolor)၊ table အတြက္ border ၊ table ရဲ႕ တည္ေနရာ (align) ၊ table ရဲ႕ အက်ယ္ (width) နဲ႕ အျမင့္ (height) ေတြကို ထည့္သြင္း ေရးသားႏိုင္ပါတယ္။ ဥပမာ က်ေနာ္က table ရဲ႕ ေနာက္ခံအေရာင္ကို အနီေရာင္၊ border ကိုေတာ့ ပါသည္ဆိုရုံ၊ အက်ယ္ကိုေတာ့ 900px နဲ႕ အျမင့္ကိုေတာ့ 750px ထားမယ္၊ ၿပီးရင္ table ကို webpage ရဲ႕ အလယ္တည့္တည့္ကို ပို႕ထားခ်င္တယ္ ဆိုပါစို႕။ ဒါဆို က်ေနာ္က table အဖြင့္ tag ထဲမွာ ဒီလုိ ထည့္ေရးလိုက္မယ္။ <table bgcolor=”red” border=”1” align=”center” width=”900px” height=”750px”> ။

Tr & Td tag
Table ထဲမွာ row အတြက္ tr tag ကို ထည့္သြင္းေရးသားၿပီး colum အတြက္ကိုေတာ့ td tag ကို ထည့္သြင္း ေရးသားပါတယ္။ Row အတြက္ ျဖစ္တဲ့ tr အဖြင့္ tag ထဲမွာ ေနာက္ခံအေရာင္ (bgcolor) ၊ အေပၚေအာက္ တည္ေနရာ ဗာတီကယ္အလုိင္း (valign)၊ width, height ေတြကို ထည့္သြင္း ေရးသားႏိုင္ပါတယ္။ ဒီအထဲမွာ valign ကိုေတာ့ top, middle, bottom ဆိုၿပီး ထည့္သံုးပါတယ္။ အကြက္က ႀကီးလို႕ အဲဒီထဲ ထည့္သြင္း ေရးသားထားတဲ့ စာေတြက အေပၚမကပ္ဘဲ အလယ္မွာပဲ ေရာက္ေနရင္ valign=”top” ဆိုတာကို ထည့္သြင္း ေရးသားလိုက္တာနဲ႕ စာေတြက အေပၚနားကို ကပ္သြားမွာ ျဖစ္ပါတယ္။ ဥပမာ – <tr bgcolor=”green” valign=”top”> ။

Td အဖြင့္ tag ထဲမွာလည္း bgcolor, width, height နဲ႕ align ေတြကို ထည့္သြင္း ေရးသားႏိုင္ပါတယ္။ အဲဒီထဲမွာပါတဲ့ align ကေတာ့ စာလံုးေတြ၊ ပံုေတြအတြက္ ရည္ရြယ္ပါတယ္။ ဥပမာအားျဖင့္ က်ေနာ္တို႕ သတ္မွတ္ထားတဲ့ td tag ထဲက စာေတြ ပံုေတြ အကုန္လံုးကို အလယ္တည့္တည့္မွာ ေပၚခ်င္တယ္ ဆိုပါေတာ့။ ဒါဆို td အဖြင့္ tag ထဲမွာ align=”center” ဆိုတာကို ထည့္သြင္း ေရးသားေပးရပါတယ္။

စာလံုးမ်ားအတြက္

စာလံုးတစ္လံုးကို အနက္ျခယ္မယ္ဆို <b> နဲ႕ </b> ၾကားထဲမွာ ထည့္ေရးမယ္။ အေစာင္းေလးဆို <i> နဲ႕ </i> ၾကားထဲမွာ ထည့္ေရးမယ္၊ ေအာက္က မ်ဥ္းသားခ်င္တယ္ဆို <u> နဲ႕ </u> ၾကားထဲမွာ ထည့္ေရးပါမယ္။ ဒီလို ထည့္ေရးတဲ့အခါ သီးသန္႕ရပ္တည္ေနတဲ့ စာလံုးမ်ားမွ မဟုတ္ပါဘူး။ Td tag ထဲမွာရွိတဲ့ စာသားေတြအတြက္လည္း ထည့္သြင္း ေရးသားလို႕ ရပါတယ္။ ဥပမာ – <td> <u> <b> Hello World! </b> </u> </td> ။

Font ……….

Font tag ထဲမွာေတာ့ font အမ်ိဳးအစားကို သတ္မွတ္ဖို႕အတြက္ (face)၊ အေရာင္ (color)၊ အႀကီးအေသး (size) ေတြကို ထည့္သြင္း ေရးသားႏိုင္ပါတယ္။ Font ရဲ႕ face ကို သတ္မွတ္တဲ့အခါ Word ထဲကလို font ေရြးသလိုပါပဲ။ က်ေနာ္တို႕ အသံုးျပဳခ်င္တဲ့ Font အမ်ိဳးအစားရဲ႕ နာမည္ကို ထည့္ေပးရမွာပါ။ က်ေနာ္တို႕က ေဇာ္ဂ်ီကို သံုးမယ္ဆို face=”Zawgyi-One” ေပါ့။ color ကေတာ့ ႀကိဳက္တဲ့အေရာင္ သံုးႏိုင္ပါတယ္။ size ကို သတ္မွတ္တဲ့ အခါမွာေတာ့ 1,2,3,4,5,6,7 စသည္ျဖင့္ အႀကီးအေသး ႀကိဳက္သလို သံုးႏိုင္ပါတယ္။ ဥပမာ – <td> <font face=”zawgyi-one” color=”grey” size=”5”> <u> <b> Hello World! </b> </u> </font> </td> ။

IMG Tag

ပံုေတြ ထည့္သြင္းဖို႕ဆိုရင္ေတာ့ img ဆိုတဲ့ tag ကို အသံုးျပဳပါတယ္။ က်ေနာ္တို႕ ထည့္ခ်င္တဲ့ ပံုရဲ႕ တည္ေနရာကို src ထဲမွာ ထည့္သြင္း ေရးရပါတယ္။ ပံုရဲ႕ တည္ေနရာနဲ႕ ပတ္သက္လို႕ ၿပီးခဲ့တဲ့ ပုိ႕စ္ထဲမွာ ေျပာခဲ့ၿပီးသြားပါၿပီ။ က်ေနာ္တို႕က ပံုကို ဒီအတုိင္ img src ဆိုၿပီး ထည့္လိုက္ရင္ ပံုက သူ႕ရဲ႕ နဂုိအရြယ္အစား အတိုင္းပဲ ေပၚပါလိမ့္မယ္။ ဒါကို က်ေနာ္တို႕က လိုသလို ခ်ံဳ႕ခ်ဲ႕ၿပီး သံုးခ်င္တယ္ဆိုရင္ img ဆိုတဲ့ tag ထဲမွာ width, height ေတြကို ထည့္သြင္း ေရးသားေပးရမွာပါ။ ၿပီးေတာ့ ပံုကို ေဘာင္ေလး ခတ္ခ်င္တယ္ဆိုရင္ေတာ့ border ဆိုတာကို ထည့္သြင္းေပးရပါတယ္။ ဥပမာ – <td> <img src=”who.jpg” width=”300px” height=”200px” border=”2”> </td> ။ Img tag ရဲ႕ ထူးျခားခ်က္ကေတာ့ အပိတ္ tag မလိုတာပါပဲ။
Word ထဲမွာ Enter ေခါက္ၿပီး စာတစ္ေၾကာင္း ဆင္းသလို Webpage ေပၚမွာလည္း စာတစ္ေၾကာင္း ဆင္းခ်င္ရင္ br ကို အသံုးျပဳရပါတယ္။

ကဲ … ဗ်ာ။ ေလ့က်င့္ခန္း တစ္ခုေလာက္ စမ္းလုပ္ၾကည့္ရေအာင္။ ေလ့က်င့္ရမယ့္ ပံုစံေလးကို ေအာက္က ပံုထဲမွာ ျပထားပါတယ္။ အဲလိုေလးျဖစ္ေအာင္ အစမ္းေရးၾကည့္ရေအာင္။

ကလိၾကည့္ၾကရေအာင္

____________________________________________________________________

ဒီပို႕စ္ထဲမွာ table တစ္ခု အစမ္း ကလိၾကည့္တာကေတာ့ ဒီလိုေလးပါ …

Testing Html


testing html testing html testing html testing html testing html testing html testing html testing html testing html testing html



testing html testing html testing html testing html testing html testing html testing html testing html testing html testing html


testing html testing html testing html testing html testing html testing html testing html testing html testing html testing html

____________________________________________________________________
အိတ္ခ်္ … ထီ … အန္မ္ … အယ္လ္

အိတ္ခ်္ … ထီ … အန္မ္ … အယ္လ္ – ၂

အိတ္ခ်္ … ထီ … အန္မ္ … အယ္လ္ – ၃

ေရးသားသူ – အံစာတံုး

About မဟာရာဇာ အံစာတံုး

has written 306 post in this Website..

အခ်ိဳ႕ေသာ အရာေတြဟာ "ေျပာင္" ၿပီးရင္ ျပန္ေကာင္းဖို႕ မလြယ္ဘူး။ အခ်ိဳ႕အရာေတြ က်ေတာ့ တစ္မ်ိဳး။ "ေျပာင္" ၿပီးရင္ ပိုပို ေကာင္းလာတတ္တဲ့ အမ်ိဳး။ ႏႈတ္ခမ္းေမြး ေျပာင္ေအာင္လို႕ ရိတ္တယ္။ ရိတ္ေလ .. သန္ေလပဲ။ ထိပ္ေျပာင္လို႕ ဆံပင္ သန္ေအာင္ လုပ္တယ္။ မလြယ္ျပန္ဘူး။ ဒီသေဘာ .. ဒီသေဘာ။