အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၄
မဟာရာဇာ အံစာတံုးပြီးခဲ့တဲ့ ပို့စ်ဖြစ်တဲ့ “အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၃” မှာ 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 |
____________________________________________________________________
အိတ်ချ် … ထီ … အန်မ် … အယ်လ်
အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၂
အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၃
ရေးသားသူ – အံစာတုံး
13 comments
ဗိုက်ကလေး
May 8, 2012 at 3:11 pm
ရေလည်ကြိုက်တယ် အူလေးရာ
ပြီးရင် အီးဘုတ် လုပ်ဖို ့မမေ့နဲ ့ဦးဗျ
ပြီးတော့ ကုဒ်တွေကို ကုဒ်အတိုင်း ပေါ်အောင် ဘယ်လိုရေးရသလဲ
မဟာရာဇာ အံစာတုံး
May 8, 2012 at 3:22 pm
ဆြာဗိုက်ရေ့ ..
ကုဒ်တွေကိုတော့ အန်ကုဒ် ပြောင်းပြီး ရေးတာပါ ..
ကျနော်ကတော့ ဒါလေးကို ဒေါင်းပြီး ပြောင်းတာပဲ ….
http://sawsan.googlecode.com/files/Code_Encoder.zip
ပြီးရင် Ebook လုပ်ဖို့လည်း မေ့ပါဘူးဂျာ …. လို့ ..
ခုလို လာရောက် အားပေးတာ ကျေးဇူးပါလို့ …
ဗိုက်ကလေး
May 8, 2012 at 3:31 pm
ကျေးဇူးပါ အူးလေးရေ
/br,/em ဘာညာတွေကို သူ ့ကုဒ်အတိုင်းပေါ့..အူးလေးလုပ်တလို တင်ချင်တာလေ..
အဲတာ တင်တတ်ဘူးဖစ်နေတာ
အန်ကုဒ်လေးနဲ ့ စမ်းကြည့်ပါ့မယ်
တင့်ခရု
kai
May 8, 2012 at 3:32 pm
တန်ဖိုးရှိပါတယ်..။
အင်တာနက်တက်နေသူတိုင်း… အကြမ်းတော့သိထားသင့်တာပေါ့…
windtalker
May 8, 2012 at 4:05 pm
မဟာဇာကြီးရေ အစကနေ ပြန်ဖတ်ပြီးမှ လုပ်ကြည့်ရတော့မယ်ဗျာ ။ ဖတ်ရင်းလုပ် သင်ခန်းစာများကို ပို့ချပေးလို့ အထူးရှဲရှဲ
ဗိုက်ကလေး
May 8, 2012 at 4:17 pm
အန်ကုဒ်လေး စမ်းတာနော်..
<strong></strong>
ဗိုက်ကလေး
May 8, 2012 at 4:23 pm
ကုဒ်ပေါ်တယ်ဟေ့..ကုဒ်ပေါ်တယ်ဟေ့
ရို ့..ရို ့..
R Ga
May 8, 2012 at 4:35 pm
ဆြာ အံ ရေ အခုမှ ဖတ်မိတဲ့ အတွက် ပထမဦးစွား ကိုယ့်ကိုယ်ကိုယ် သာအပြစ်တင်မိပါတယ်။ အခုတော့ နောက်ကြောင်း ပြန်လှည့်ပြီး ဖတ်၊လေ့လာ၊၊ သိမ်းဆည်း နေရပါကြောင်း။ ဗိုက်ဗိုက် ပေါက် ပြောသလို အီးဘွတ်လေး လုပ်ပေးပါဦးဂျ..။
ကောင်းမြတ်သူ
May 8, 2012 at 5:30 pm
ကိုအံစာရေကျေးဇူးအထူးဗျို့……. header cell တည်ဆောက်ချင်သူတွေရှိခဲ့ရင် tag လေးကို tag အစားထည့်သုံးကြည့်ကြပါခင်ဗျ….
ကောင်းမြတ်သူ
May 8, 2012 at 6:00 pm
td tag အစား th tag ကို ထည့်သုံးကြည့်ကြပါခင်ဗျာ…
မဟာရာဇာ အံစာတုံး
May 8, 2012 at 9:53 pm
ဟုတ်ပါတယ် th tag ကို သုံးမယ်ဆိုရင် စာလုံးက bold ဖြစ်မယ်၊ အလယ် (center) ကို အော်တို ရောက်ပါမယ် ..
ရှဲရှဲပါ ကိုကောင်းရေ …
ကောင်းမြတ်သူ
May 8, 2012 at 6:24 pm
uncode စမ်းတာခင်ဗျ
<html>
<head> <title> Testing </title>
</head>
<body>
<table border=1 bordercolor="red">
<tr> <td colspan=4 align="center"> Testing Table</td></tr>
<tr> <th> Name </th> <th> Myanmar </th> <th> English </th> <th> Math </th> </tr>
<tr> <td>Mg Kyaw </td> <td align="right"> 85 </td> <td align="right"> 86 </td> <td align="right"> 95 </td> <tr>
<tr> <td>Ma Nilar </td> <td align="right"> 86 </td> <td align="right"> 56 </td> <td align="right"> 63 </td> <tr>
<tr> <td>Mg Aye </td> <td align="right"> 100 </td> <td align="right"> 45 </td> <td align="right"> 75 </td> <tr>
</table>
</body>
</html>
water-melon
May 8, 2012 at 7:08 pm
အံဇာရေ နာအခုတော့ မအားသေးတော့မစမ်းရသေးဘူးအေ့
နောက်မှရေလည်စမ်းမယ်
ညည်းနာ့အကြောင်းသိတယ်မလား ပန်းတနော်တုန်းကလေ
အဟိ
အီးဘုတ်လုပ်ပြီးပို့ပေးအုန်းနော်
ခင်တဲ့ ဖရဲမ