အိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၂
မဟာရာဇာ အံစာတံုးအိတ်ချ် … ထီ … အန်မ် … အယ်လ် – ၁
နံပါတ် (၁) ပို့စ်မှာ HTML နဲ့ မိတ်ဆက်ခြင်း၊ အခြေခံ ရေးနည်းကို ပြောခဲ့ပြီးပါပြီ။
အခုပို့မှာတော့ စာလုံးပုံစံ (Font) နဲ့ အရောင်ခြယ်တာ၊ ပုံထည့်တာတွေကို ရေးသားပေးသွားပါမယ်။
စာလုံးပုံစံ
ကျနော်တို့ Word သုံးတဲ့အခါ စာလုံးကို ထင်ရှားအေင် အနက်ခြယ်တာ (bold)၊ စာလုံး အစောင်းလေး ထားတာ (italic) နဲ့ အောက်က မျဉ်းတားတာ (underline) တို့ ပြုလုပ်ပါတယ်။ ဒီလိုပဲ Web Page ပေါ်မှာ စာလုံးကို အနက်ခြယ်တာ၊ စာလုံး အစောင်းထားတာ၊ မျဉ်းတားတာတွေကို လုပ်လို့ ရပါတယ်။
စာလုံး အနက်ခြယ်ဖို့ဆို <b> နဲ့ </b> ကြားထဲမှာ ကိုယ် အနက်ခြယ်ချင်တဲ့ စာလုံးကို ထည့်သွင်း ရေးသားရပါတယ်။ အစောင်းလေးဆိုရင် <i> နဲ့ </i> ကြားမှာ ထားရေးတယ်။ မျဉ်းတားဖို့ဆို <u> နဲ့ </u> ကြားထဲမှာ ထားရေးရပါတယ်။
ဥပမာ အားဖြင့် ဒီလို ရေးပါတယ်။
<html>
<body>
Hello World!
<b> Hello World! </b>
<i> Hello World! </i>
<u> Hello World! </u>
Hello World!
</body>
</html>
ဒါကတော့ စာလုံးကို ထင်ရှားအောင် ခြယ်သတာပါ။
စာလုံး စတိုင်နဲ့ အကြီးအသေး
Web Page ပေါ်မှာ စာလုံးပုံစံ မရွေး၊ စာလုံး အကြီးအသေး မရွေးဘဲနဲ့ ဒီအတိုင်းကြီး ရေးမယ်ဆိုရင် font က default အနေနဲ့ပဲ ပြပေးပါတယ်။ ကျနော်တို့က font ကို ကိုယ်စိတ်ကြိုက် ထားမယ်ဆိုပါစို့။ ဒါဆို font အတွက် သတ်မှတ်ပေးဖို့ လိုအပ်လာပါပြီ။
Font အတွက် အဖွင့် tag က <font> ဖြစ်ပြီး အပိတ် tag ကတော့ </font> ဖြစ်ပါတယ်။
နမူနာ အားဖြင့် ဒီလိုပါ <font> Hello World! </font> ။
Font အမျိုးအစားကို သတ်မှတ်ဖို့အတွက် ဆိုရင် font tag ထဲမှာ face=”—” ဆိုတာကို ထည့်သွင်း ရေးရပြီး font ရဲ့ အရွယ်အစားကိုတော့ size=”—” ဆိုပြီး ထည့်သွင်း ရေးသားရပါတယ်။ Font ရဲ့ အရောင်ကိုတော့ color=”—” ဆိုတာကို ထည့်သွင်းပြီး ရေးသားပေးရပါတယ်။
နမူနာ အားဖြင့် ဒီလိုပါ <font face=”tahoma” size=”4” color=”red”> Hello World! </font> ။
အပြည့်အစုံ ပုံစံကတော့ ဒီလိုလေးပါ။
<html>
<body>
Hello World!
ရိုးရိုး default စာလုံး – Hello World! <br>
Font ကို ထည့်သွင်းပြီး စမ်းကြည့်တဲ့ စာလုံး <br>
<font face=”tahoma” size=”4” color=”red”> Hello World! </font>
</body>
</html>
ဒါဆိုရင် Web Page ပေါ်မှာ စာလုံးတွေကို ကိုယ့်စိတ်ကြိုက် စတိုင်နဲ့ ထားလို့ ရသွားပါပြီ။
ပုံများ ထည့်သွင်းခြင်း
ကျနော်တို့ Website တွေ ကြည့်တဲ့အခါ ပုံတွေကို တွေ့ရပါတယ်။ အဲဒီလို Web Page ပေါ်မှာ ပုံတွေ ပေါ်ဖို့အတွက်ဆိုရင် <img> ဆိုတဲ့ tag ကို ထည့်သွင်း ရေးရပါတယ်။ အဲဒီ ပုံထည့်တဲ့ img tag ရဲ့ ထူးခြားချက်ကတော့ အပိတ် tag မပါခြင်းပဲ ဖြစ်ပါတယ်။
အဲဒီလို ပုံထည့်ဖို့အတွက် ပုံရဲ့ တည်နေရာ၊ နာမည်နဲ့ အမျိုးအစား (format) ကို ညွှန်းပေးဖို့ လိုပါတယ်။ နမူနာ အနေနဲ့ လုပ်ကြည့်ဖို့အတွက် JPG အမျိုးအစား ပုံတစ်ပုံကို တစ်နေရာရာမှာ Folder တစ်ခုဆောက်ပြီး အဲဒီ Folder ထဲ ထည့်ထားလိုက်ပါ။ ပုံရဲ့ နာမည်ကိုတော့ who လို့ ပေးထားလိုက်ပါ။ ပြီးရင် အောက်က code တွေအတိုင်း Notepad ထဲမှာ ရိုက်ထည့်ပြီး စောစောက Folder ထဲမှာ နာမည် တစ်ခုခုနဲ့ Save လိုက်ပါ။
<body>
Hello World!
<b> <u>Putting Image</u> </b> <br>
< img src=”who.jpg” >
</body>
</html>
Save လုပ်ထားတဲ့ html document လေးကို double click နှိပ်ပြီး run ကြည့်လိုက်ပါ။ ခေါင်းစဉ် စားသားလေးနဲ့ ပုံလေး ပေါ်နေတာကို တွေ့ရပါလိမ့်မယ်။ ပုံထည့်တဲ့အခါမှာ ကိုယ်ထည့်ချင်တဲ့ ပုံက ကိုယ် save ထားတဲ့ html document နဲ့ Folder တစ်ခုထဲမှာ အတူတူ ရှိတာ မဟုတ်ဘူးဆိုရင် ပုံရဲ့ location ကိုပါ ညွှန်းပေးဖို့ လိုအပ်ပါတယ်။ ဥပမာ ကျနော်က html document ရှိတဲ့ folder ထဲမှာပဲ images ဆိုတဲ့ နာမည်နဲ့ folder တစ်ခု ထပ်ဆောက်ပြီး who ဆိုတဲ့ ပုံကို ထည့်ထားမယ် ဆိုပါစို့။
ဒါဆို ကျနော်က ဒီလို ပြင်ရေးပါမယ်။ < img src=”images/who.jpg” > ။ images ဆိုတာက ပုံရဲ့ တည်နေရာ (location) ပဲ ဖြစ်ပါတယ်။ တည်နေရာကို ညွှန်းပြီးရင် မျဉ်းစောင်းလေးခံပြီး ပုံရဲ့ နာမည်နဲ့ အမျိုးအစားကို ထည့်ပေးရပါတယ်။ ဒါက sub folder ထဲမှာ ရှိတဲ့ ပုံကို ညွှန်းဆိုခြင်း ဖြစ်ပါတယ်။ အဖွင့်နဲ့ အပိတ် စုံတွဲရှိတဲ့ tag တွေကို ရေးတဲ့အခါ မေ့မကျန်ခဲ့အောင် အဖွင့်အပိတ် တစ်ခါတည်း တွဲပြီးရေးသင့်သလို “” ရေးတဲ့ အခါမှာလည်း တစ်ခါတည်း အဖွင့်ရော အပိတ်ရော တွဲပြီး ရေးသင့်ပါတယ်။
ကဲဗျာ …။ စာလုံး ပုံစံတွေရော၊ ပုံရော ပါတဲ့ html document လေးတစ်ခု ရေးကြည့်ရအောင်လို့ Desktop ပေါ်မှာပဲဖြစ်ဖြစ်၊ တစ်နေရာရာပဲ ဖြစ်ဖြစ် folder လေး တစ်ခုဆောက်ပြီး who နာမည်နဲ့ JPG အမျိုးအစား ပုံတစ်ပုံကို ထည့်ထားလိုက်ဗျာ။ ထည့်ပြီးရင် အောက်က အတိုင်း notepad ထဲမှာ ရေးပြီး ဆောက်ထားတဲ့ folder ထဲမှာ .html ခံပြီး Save လိုက်ဗျာ။ ပြီးရင် run လိုက်ပေါ့။
<body>
<b> bold </b> <br>
<i> italic </i> <br>
<u> underline </u> <br>
<font face=”tahoma” size=”4” color=”red”> Font Style </font> <br>
<b> <u>Putting Image</u> </b> <br>
< img src=”who.jpg” >
</body>
</html>
ရေးသားသူ – အံစာတုံး
9 comments
windtalker
May 5, 2012 at 2:03 pm
အားလုံးကို ကူးသွားပြီ ။ ပြီးမှ အေးဆေးမှ ရမ်းတော့မယ် ။ ဒါနဲ ့အရမ်းလွန်ရင် ဘာတွေ ဆက်ဖြစ်တတ်သေးလဲ ဟင် ။
မဟာရာဇာ အံစာတုံး
May 5, 2012 at 2:06 pm
အရမ်းလွန်ရင်
ပြုတ်တတ်၊ ပြောင်တတ်တယ် … တဲ့ …
ကြားဖူးတာ … 😀
ဗိုက်ကလေး
May 5, 2012 at 2:11 pm
ကြိုက်တယ် အူးလေး..
ပို ့မဲ့ပို ့ ကူးတို ့ရောက်အောင် ပို ့နော်..
ပြီးအောင်ရေး
ပြီးရင် စလယ်ဆုံး အကုန်ကူးပြီး အီးဘုတ် လုပ်ပြီး ပြန်တင်ပေးဦးဂျ
ပြီးတော့ ကိုယ်ပိုင် ဘလော့ဂ် လုပ်နည်းလေးတွေလဲ တင်ပေးဦးဂျ..အူးလေးဒေါင့်ရ
windtalker
May 5, 2012 at 2:14 pm
ဘာရဲ ၊“ ပေါက်ဖော်ဒါန ” ဆိုပြီး တင်မလို ့လား ဟင် ၊ အဲဒါဆို မဟာဘာဂျာ အဲလေ မွှားလို ့၊ မဟာရာဇာ ကြီး နဲ ့ပူးပေါင်းပြီး အမြန်ဆုံး လှုပ်ရှားဘာလို ့၊ တိုက်တွန်းပါ၏ ။ ဟီဟိ
water-melon
May 5, 2012 at 2:49 pm
တောင်မရေ ကူးသွားတယ်အေ့
နောက်မှအေးဆေးစမ်းတော့မယ်
အဟိ
FattyCat
May 5, 2012 at 9:33 pm
သူငယ်ချင်းအံစာတုံးရေ-
ကွန်ပျူတာသမားတစ်ယောက်ဖြစ်ပေမယ့် Web မှာ မူကြိုအဆင့်တောင်မရှိတဲ့သူမို့ ယခုမှစပြီးလေ့လာပါမယ်ဗျာ…
အပင်ပန်းခံမှု၊ ဗဟုသုတ ဝေငှမှုအတွက် ကျေးဇူးပါနော်…
ခင်တဲ့-
ကြောင်ဝတုတ်
ဆူး
May 6, 2012 at 10:53 am
အသိပညာပေးတဲ့ အတွက် ကျေးဇူးတင်ပါတယ်။
ရွာစားကျော်
May 6, 2012 at 4:26 pm
၁ ရော ၂ ရော ကူးသွားဘီဗျားးး
နောက်အပိုင်းလေးတွေလည်း မျှော်နေမယ်နော်..
we R one
May 8, 2012 at 9:37 am
အန်ဇာတုံး က တော့ ဆရာ့ဆရာ ကြီးဖြစ်နေပြီပေါ့လေ. … ပညာတွေလျိုထားတာ အခုမှပေါ်တော့တယ်..
HTML အကြောင်း ပြီးရင် CSS နှင့် JAVA Script အကြောင်းလေး ဆက်ပါအုံး မြန်မြန်လေးတော့ တင်နော်.. ၂ဝ ရက်နေ့ Project အပ်ရတော့မယ်.. Project အမှီတင်ပေးအုံး..
😀