အိတ်ချ် … ထီ … အန်မ် … အယ်လ်
မဟာရာဇာ အံစာတံုး
ဒီပို့စ်ဟာ ရွာထဲက သိပြီးသား ရွာသူားတွေအတွက် ရည်ရွယ်ရေးသားခြင်း မဟုတ်ပါ ခင်ဗျာ။ မသိသေးသူတွေ၊ စိတ်ဝင်စားသူတွေအတွက် ဗဟုသုတ ရစေခြင်းငှာ ကျနော် သိထားသလောက် ပြန်ရှဲခြင်းသာ ဖြစ်ပါတယ်။ ကျွန်တော် ရေးသားတဲ့ထဲမှာ အမှားတွေလည်း ပါကောင်းပါနိုင်ပါတယ်။ ထိုထိုသော အမှားများကို သိထားသူများက ထောက်ပြပေးကြပါလို့ မေတ္တာရပ်ခံအပ်ပါတယ် ခင်ဗျာ ….
အံစာတုံး
HTML (အိတ်ချ်ထီအန်မ်အယ်လ်) မိတ်ဆက်
HTML ဆိုတာ Web Pages တွေ ရေးတဲ့အခါမှာ အသုံးပြုတဲ့ Hyper Text Markup Language ပဲ ဖြစ်ပါတယ်။ Programming Language တော့ မဟုတ်ပါဘူး။ သူ့ကို ရေးတဲ့အခါ angle bracket (ထောင့်ကွင်း) ထဲမှာ ထည့်သွင်း ရေးသားရပါတယ်။ ဥပမာ – <html> ။ အဲဒီလို ပုံစံမျိုးကို tag (တက်ဂျ်) လို့ ခေါ်ပါတယ်။ HTML မှာ tag တွေက အဖွင့်နဲ့ အပိတ်ဆိုပြီး စုံတွဲ လာတာ များပါတယ်။ အဖွင့် tag မှာ ဒီအတိုင်း ထောင့်ကွင်း ၂ ခုကြား ရေးပေမယ့် အပိတ် tag မှာတော့ ( / ) လေး ပါပါတယ်။ ဥပမာ – <html> <html> ။
HTML document တစ်ခုထဲမှာ HTML tag တွေနဲ့ ရိုးရိုး စာသားများ ပါဝင် နိုင်ပါတယ်။ ဒီ HTML document ရဲ့ အလုပ်ကလည်း Web page တွေကို ပြသပေးဖို့ပဲ ဖြစ်ပါတယ်။ HTML document တွေကို Web Page လို့လည်း ခေါ်ဆို ကြပါသေးတယ်။ Firefox, IE, Chrome စတဲ့ Internet Browser တွေရဲ့ အဓိက ရည်ရွယ်ချက်ကလည်း HTML document တွေကို ဖတ်ဖို့၊ ဖတ်ပြီးရင် အဲဒီ HTML document တွေကို Web page အဖြစ် ပြန်လည် ပြပေးဖို့ပဲ ဖြစ်ပါတယ်။
HTML စရေးကြည့်ကြရအောင်
HTML ရေးဖို့အတွက် Notepad က အကောင်းဆုံးပါပဲ။ Notepad ကို ဖွင့်ဖို့အတွက် Start ကနေ သွားရှာလိုက်ပါ။ အလွယ်ဆုံး Notepad ကို ခေါ်နည်းကတော့ – Keyboard ထဲက Windows Logo key နဲ့ R ကို တွဲနှိပ်ပြီး အဲဒီ box ထဲမှာ notepad လို့ ရိုက်ထည့်ပြီး Enter ခေါက်လိုက်တာနဲ့ Notepad ပွင့်လာပါလိမ့်မယ်။
HTML စရေးဖို့အတွက် ပထမဆုံး အဖွင့် tag နဲ့ စပါတယ်။ ဒီလိုပေါ့ <html> ။ ရေးသူအများစု ကတော့ အဖွင့် tag နဲ့ အပိတ် tag ကို တစ်ခါတည်း တွဲရေးကြတာ များပါတယ်။ ဘာလို့လဲ ဆိုတော့ တစ်ခါတစ်လေမှာ အပိတ် tag ကို ရေးဖို့ မေ့နေတတ်လို့ပါပဲ။ ကဲဗျာ … စကြည့်ရအောင်။ Notepad ထဲမှာ အရင်ဆုံး အောက်ကလိုလေး ရေးလိုက်ပါ။
<html>
<body>
Hello World!
<body>
<html>
အဲလိုလေး ရေးပြီးသွားရင် ကိုယ် Save ချင်တဲ့နေရာမှာ Save လိုက်ပါ။ Save တဲ့အခါမှာ File name ရဲ့ နောက်မှာ .html ခံပြီးမှ Save ရပါတယ်။ ဥပမာ အားဖြင့် man ဆိုတဲ့ နာမည်နဲ့ Save မယ်ဆိုပါစို့။ ဒါဆို man.html ဆိုပြီး Save ရပါတယ်။ ကိုယ် Save ထားတဲ့ နေရာကို သွားကြည့်လိုက်ရင် HTML document လေးကို တွေ့ရပါလိမ့်မယ်။ ကိုယ့် ကွန်ပျူတာမှာ default browser က Firefox ဆိုရင် Firefox ပုံစံမျိုးလေး ဖြစ်နေပါလိမ့်မယ်။ အဲဒါလေးကို double click နှိပ်ပြီး ဖွင့်ကြည့်လိုက်ပါ။ Hello World! ဆိုပြီး ပေါ်နေတာကို တွေ့ရပါလိမ့်မယ်။
အထက်က ထဲမှာ html ဆိုတဲ့ tag ရယ်၊ body ဆိုတဲ့ tag ရယ် ဆိုပြီး tag နှစ်ခု ပါပါတယ်။ html ကတော့ main tag ကြီးပေါ့။ body ဆိုတဲ့ tag ထဲမှာတော့ ခုလို ရိုးရိုးစာတွေ၊ လင့်တွေ၊ ဇယားကွက်တွေ စသည်ဖြင့် နောက်ထပ် tag အများကြီး ထည့်သွင်း ရေးသားပါတယ်။ Hello World! ဆိုတဲ့ နေရာမှာ ကိုယ်ကြိုက်တဲ့ စာသားကို ကြိုက်သလောက် ပြန်ပြင်ပြီး ရိုက်ထည့်၊ ပြီးရင် save လိုက်ပါ။ HTML document ကို ပြန်ပြီး run ကြည့်ပါ။ ကိုယ်ရိုက်ထည့်ထားတဲ့ စာသားတွေ Web page ပေါ်မှာ ပေါ်နေတာကို တွေ့ရပါလိမ့်မယ်။
ဒီနေရာမှာ တစ်ခု ပြောစရာ ရှိတာကတော့ ယူနီကုတ်၊ ဇော်ဂျီ စတဲ့ မြန်မာစာတွေ ရေးမယ်ဆို Save တဲ့အခါ File name ရဲ့အောက် တစ်ကွက်ကျော်မှာ ရှိတဲ့ Encoding ဆိုတဲ့ နေရာမှာ UTF-8 ဆိုတာကို ရွေးပြီးမှ Save ရပါတယ်။ ဒါမှသာ မြန်မာစာတွေ ပေါ်မှာ ဖြစ်ပါတယ်။ နောက်တစ်ခုက စာတွေ များသွားတဲ့အခါ ဘယ်လိုပဲ notepad ထဲမှာ Enter ခေါက်ပြီး စာကို အောက်တစ်ကြောင်း ဆင်းဦးတော့၊ Web Page ပေါ်မှာတော့ ဆင်းမှာ မဟုတ်ပါဘူး။ စာသားတွေ ဆင်းဖို့ အတွက်တော့ <br> ဆိုတဲ့ tag လေးကို ထည့်ရေးပေးရပါတယ်။
နမူနာ အားဖြင့် – ဟိုဟာ မလုပ်ပါနဲ့ <br> ဒီဟာ မလုပ်ပါနဲ့ <br> မင်း သတိထားပါ၊ ဘာညာသာရကာပေါ့။
ဒါဆိုရင် – ဟိုဟာ မလုပ်ပါနဲ့ က တစ်ကြောင်း၊ ဒီဟာ မလုပ်ပါနဲ့ က တစ်ကြောင်း၊ မင်းသတိထားပါ၊ ဘာညာသာရကာပေါ့ ဆိုတာက တစ်ကြောင်း ဖြစ်သွားပါလိမ့်မယ်။
အပြည့်အစုံပုံစံ –
<html>
<body>
ဟိုဟာ မလုပ်ပါနဲ့ <br>
ဒီဟာ မလုပ်ပါနဲ့ <br>
မင်း သတိထားပါ၊ ဘာညာသာရကာပေါ့။
<body>
<html>
ဒီနေ့တော့ ဒီလောက်နဲ့ပဲ ရပ်လိုက်ပါတယ်။ မရှင်းလင်းတာတွေ၊ အဆင် မပြေတာတွေများ ရှိရင် comment ထဲမှာ မေးမြန်းနိုင်ပါတယ် ခင်ဗျာ။ ကျနော် သိသလောက်တော့ ပြန်လည် ပြောပြပေးသွားပါမည့် အကြောင်း …………… ။
အိတ်ချ် … ထီ … အန်မ် … အယ်လ်-၂
ရေးသားသူ – အံစာတုံး
14 comments
windtalker
May 4, 2012 at 8:41 pm
ဒီနေ ့ဒီလောက်နဲ ့ဘဲ ရပ်လိုက်တော့ ၊ နောက်တစ်ပို ့စ် မှ ဆက်လက် လေ့လာရမှာပေါ့ ၊ ဘာဘဲဖြစ်ဖြစ် ၊ အားပေးသွားပါသည် ။
မဟာရာဇာ အံစာတုံး
May 4, 2012 at 8:46 pm
အထဲမှာ ကုတ်ထဲ့တာတွေ နည်းနည်း ဒုက္ခရောက်သွားလို့ ပြန်ပြင်နေရသေးတယ်ဗျို့ …
အားပေးသွားတဲ့အတွက် ကိုပေ ကို ကျေးဇူးပါလို့ …
ဗိုက်ကလေး
May 4, 2012 at 8:49 pm
အူးလေး
<html> ဆိုတာတွေက ဘာတေလဲဗျ
အဲတာတွေထည့်ပြီး လုပ်တာရဘူးဗျာ.
နောက်တစ်ကြောင်း ဆင်းချင်ရင် ဆိုတာလေး ခံရင် ရသဗျ..
ကျနော် Unicode type နဲ ့ Save ပါတယ်ဗျ
ပညာတွေသင်ပေးလို ့ ကျေးဇူးပါဂျ
မဟာရာဇာ အံစာတုံး
May 4, 2012 at 8:57 pm
အမလေး ..
တိုတိုဗိုက်ရယ် ..
html ဆိုတာက အိတ်ချ်ထီအန်မ်အယ်လ် ပေါ့ … 😀
ပညာ သင်ပေးဒါ ဟုတ်ပါဘူးဂျာ ..
ကိုယ် သိထားတာလေးတွေကို ကိုယ်တိုင်လည်း ပြန်နွေးရင်း
သူများလည်း ရှဲရင်း လုပ်တာပါ .. လို့ …
ကောင်းမြတ်သူ
May 4, 2012 at 11:52 pm
title bar မှာ စာသားရေးချင်လို့ ပြောပြပေးပါအုံးဗျာ…
မဟာရာဇာ အံစာတုံး
May 5, 2012 at 12:50 pm
title bar မှာ စာရေးဖို့ ဆိုရင် html အဖွင့် tag ရဲ့အောက်မှာ
title အဖွင့်နဲ့ အပိတ် tag ကို ထည့်ရေးပြီး
အဲဒီ title tag ကြားထဲမှာ ကိုယ်ပေးချင်တဲ့ title စာသားကို ထည့်သွင်း ရေးသားလိုက်ပါ ….
water-melon
May 5, 2012 at 11:20 am
တောင်မရေ
ကျေးဇူးတော့
မန်းလေးလာမှ ပြုစုတော့မယ်
အခုတော့ ပါးစပ်အရသာခံလိုက်အုန်း
အဟိ
ကောင်းမြတ်သူ
May 5, 2012 at 5:02 pm
စာလုံးတွေနက်ပေးပါအုံးနော်။ bullet လေးတွေလည်း တပ်ချင်သေးခင်ဗျ
မဟာရာဇာ အံစာတုံး
May 5, 2012 at 8:41 pm
ဟုတ်ကဲ့ …
ဒါက အခြေခံ လေးတွေပဲ ရှိပါသေးတယ် ခင်ဗျ ..
စာလုံး နက်တာကိုတော့ နံပါတ် ၂ မှာ ပြထားပါတယ် ..
bullet တပ်တာကတော့ နောက်တော့မှ ပါပါလိမ့်မယ် ခင်ဗျ …
ကောင်းမြတ်သူ
May 7, 2012 at 2:26 pm
ကျေးဇူးပဲခင်ဗျ…..ဆက်လက်အားပေးသွားမယ်နော်……
အလင်းဆက်
May 5, 2012 at 8:17 pm
မသိသေးတာလေး သိသွားလို ့ကျေးကျေး ပါ ။
ဆူး
May 6, 2012 at 10:51 am
အတိတ်ကို အတိတ်မှာပဲ ထားခဲ့လိုက်တော့ အကုန် မေ့ကုန်ပြီ။
ကျောင်းပြန်သွားလို့.. အခုပြန်ဖတ်ပြီး ပြန်ဆွဲ ခေါ်တာတောင် မလိုက်ချင်ဘူးရယ်..
ဦးနှောက်တွေ သိပ်မကောင်းတော့တာတော့ အမှန်ပဲ။
TTNU
May 6, 2012 at 11:35 am
မောင်အံစာရေ…
ဖတ်ကြည့်တယ်။ နားမလည်။ ထပ်ဖတ်တယ်။ခေါင်းရှုပ်တယ်။
အတော်ညံ့တယ်နော်။ ဒါကြောင့် ” I hate modern technology.” လို့ အော်နေတာ။
တစ်ခု မတတ်မှ တစ်ခုမေးတော့မယ်နော် ဆရာရေ။ 🙁
နီလေး
May 7, 2012 at 3:08 pm
htmlသင်ခန်းစာကို h2 မှာတုန်းကသင်ရတယ် ခုနောက်ပိုင်းအသုံးပြုရမှန်းသိတော့ အဲစာအုပ်ကို လိုက်ရှာတော့ ပျောက်နေတယ် သင်ပေးတဲ့ဆရာက အရမ်းကိုရှင်းပါတယ်