Free Online HTML Editors With Instant Previews

ကျွန်တော်တို့ တစ်နေ့နဲ့ တစ်နေ့ အင်တာနက်ထဲ သွားလာလည်ပတ်နေတဲ့ Web pages တွေကို HTML ( HyperText Markup Language ) လို့ ခေါ်တဲ့ Programming language နဲ့ ရေးသားထားပါတယ် - ဒီ HTML လို့ ခေါ်တဲ့  Programming language ဟာ Web စာမျက်နှာမှာ ပါဝင်တဲ့ အချက်အလက် အကြောင်းအရာတွေကို  ဘယ်လို ပုံစံချပြီး ဖော်ပြမယ်ဆိုတာ Browsers ကို ညွှန်ကြားတဲ့ လုပ်ငန်းဆောင်တာကို လုပ်ဆောင်ပါတယ် - နောက်တစ်မျိုး ပြောရမယ်ဆိုရင် HTML ကို Web ရဲ့ အခြေခံ အဆောက်အအုံ လို့လည်း ပြောလို့ရပါတယ် - ဟိုးတစ်ချိန်တုန်းက ဒီ HTML ဆိုတဲ့ အခြေခံ အဆောက်အအုံဟာ ရှုပ်ရှုပ်ထွေးထွေ သိပ်မရှိလှပါဘူး - အားလုံး ခပ်ရိုးရိုးတွေနဲ့ချည်း တန်ဆာဆင်ထားတာပါ - ဥပမာ - စာသားတွေကို ဘယ်လို ဖော်ပြမယ် - Links တွေ ဘယ်လိုချိတ်ဆက်မယ် - ပုံတွေ ဘယ်လိုဖြည့်သွင်းမယ် - အဲ့လောက်ပဲ ရှိခဲ့ပါသေးတယ် -

ခုမျက်မှောက်ခေတ်မှာတော့ - Web ရဲ့ တည်ဆောက်ပုံက Links တွေချိတ်ဆက်ယုံ - စာသားတွေ ဖော်ပြယုံ - ရုပ်ပုံတွေ ထည့်သွင်းယုံလောက် အဆင့် မကတော့ဘူး - ကျွန်တော်တို့တွေ မျှော်လင့်လာကြတာ ဒီ Web ပေါ်မှာပဲ Online games ( ဥပမာ Chess ) တွေဆော့တဲ့အခါ - ဒီ စာမျက်နှာပေါ်မှာပဲ ရှိနေတဲ့ Map တစ်ခုပေါ်မှာ ဟိုဟိုဒီဒီ လှုပ်ရှားသွားလာချင်တဲ့ အခါ ( ဥပမာ Google Maps ) Web page တစ်ခုလုံးကို Reload ပြန်လုပ်စရာမလိုပဲ ရွှေ့ပြောင်း သွားလာချင်လာတယ် - လှုပ်ရှား ဆော့ကစား ချင်လာတယ် - ကျွန်တော်တို့ လိုချင်တဲ့ စွမ်းဆောင်ရည်ကို Static web pages တွေက မစွမ်းဆောင်နိုင်ပါဘူး - ဒီလို လုပ်ဆောင်နိုင်ဖို့ဆို အရင်တုန်းက တည်ရှိခဲ့တဲ့ Static web pages ကနေ Dynamic web pages ကို ကူးပြောင်းဖို့ လိုလာပါတယ် - ဒီလို Dynamic web pages တစ်ခု အဖြစ် ကူးပြောင်းနိုင်ဖို့ အရင် Static web pages မှာ သုံးခဲ့တဲ့ Language နေရာမှာ အားဖြည့်ဖို့ နောက်ထပ် Scripting language တစ်ခု ထပ်ပေါ်လာရတယ် - အဲ့တာကတော့ JavaScript ပါ - JavaScript ဆိုတာ ပေါ်လာတော့ အရင် Static web pages တွေကနေ ကျွန်တော်တို့ လိုချင်တဲ့ Dynamic web pages တွေ အဖြစ် စပြီး အသက်ဝင်လာတယ် - ဒါတင်မက JavaScript ကြောင့် မျက်မှောက်ခေတ် အဓိက လူသုံးများတဲ့ Web browsers တွေမှာဆိုရင် Web pages တွေက Real-time interactions လို့ ခေါ်တဲ့ တစ်ချိန်တည်း တစ်ပြိုင်တည်း အပြန်အလှန် အကျိုး သက်ရောက်မှုတွေ ရရှိလာပါတယ် -  ဥပမာ ဆိုကြပါစို့ - Online form တစ်ခုကို ကျွန်တော်တို့တွေ Web browsers ထဲမှာ ဖြည့်ကြတယ် - အားလုံးဖြည့်ပြီး “Submit” button ကို နှိပ်လိုက်တာနဲ့ တစ်ပြိုင်တည်းမှာ Web page ကနေ JavaScript ကိုသုံးပြီး ကိုယ့်ဖြည့်လိုက်တဲ့ form ကို စစ်ဆေး - နောက် အဲ့ဒီ့ form မှာ ကိုယ် ဘာတွေမှားလဲ ဘာတွေကျန်ခဲ့လဲ ဆိုတာ တစ်ချိန်တည်း ဖော်ပြ Result ထုတ်ပေးနိုင်တဲ့ အဆင့်ထိ အကျိုးကျေးဇူးတွေ ရလာပါတယ် -

ဒါပေမယ့် ဒီနေ့ ကျွန်တော်တို့ သိထားတဲ့ Dynamic web ဆိုတာဟာ web applications တွေ ဖြစ်တဲ့ Gmail - Google Maps - နောက် Outlook Web App ( OWA ) ဆိုတာတွေမှာ ပထမဆုံး စသုံးခဲ့တဲ့ XHR ( XMLHttpRequest ) ကနေစခဲ့တာပါ - XMLHttpRequest (XHR) ဆိုတာ API တစ်ခုဖြစ်ပြီး JavaScript လိုမျိုးပဲ web browser မှာသုံးကြတဲ့ scripting languages တွေထဲက တစ်ခုဖြစ်ပါတယ် - ဒီ XHR ကြောင့် Web page တစ်ခုပေါ်မှာ ရှိနေတဲ့ Game - Map - Video စတဲ့ အစိတ်အပိုင်း အသီးသီးတွေ တစ်ခုချင်းစီ အပြောင်းအလဲ ဖြစ်တဲ့ အခါမှာ Page ကြီးတစ်ခုလုံး နောက်တစ်ကြိမ် Reload ပြန်လုပ်စရာ မလိုပဲ ရပ်တည်လာနိုင်စေပါတယ် - နောက်ဆုံး ရလာဒ်ကတော့ Web apps တွေ အသုံးပြုတ့ဲ အချိန်မှာ အရင်တုန်းကထက် ပိုမြန်ဆန်လာတယ် - ပိုကောင်းလာတယ် ဆိုတဲ့ သဘောမျိုးပေါ့ -

ဖော်ပြခဲ့တဲ့ အဆင့်လိုက် တိုးတက်ပြောင်းလဲမှုတွေနဲ့ အတူ Web pages တွေမှာ နောက်ထပ် ပြောင်းလဲလာတာ တစ်ခုက ခံစားမှုတွေ အသက်ဝင်နိုင်စေမယ့် တန်ဆာဆင်မှု အပိုင်းပါ - ဒါကို စာစကားနဲ့ ပြောရင် CSS (Cascading Style Sheets) ကို အသုံးချတယ်လို့ ခေါ်ပါတယ် - CSS က ကျွန်တော်တို့ နေ့တိုင်းကြည့်နေတဲ့ Web pages တွေကို အများသူငါ ကြည့်ရှုတဲ့ အချိန်မှာ ရင်သတ်ရှုမောဖြစ်အောင် ဘယ်လို ပုံစံချမလဲ - အလှအပတွေ ဘယ်လိုပေါင်းစပ် ဖန်တီးမလဲ ဆိုတာ programmers တွေကို အလွယ်တကူ လုပ်ဆောင်နိုင်စေပါတယ် -

ဒီလို JavaScript, XHR, CSS နဲ့ တစ်ခြား Web technologies တွေ ပေါင်းစည်းတည်ဆောက်ထားတာကိုပဲ Web programmers တွေက AJAX (Asynchronous JavaScript and XML) ဆိုပြီး ညွှန်းဆိုကြပါသေးတယ် -  ဒါ့ကြောင့်  Web programmers တစ်ယောက် ဖြစ်ချင်တဲ့ သူဟာ  JavaScript တစ်ခုတည်း တတ်ကျွမ်းလို့ မရသလို CSS တစ်ခုတည်း ပိုင်လို့လည်း မရပါဘူး - အားလုံးကို နားလည်ထားဖို့ လိုသလို - ဆက်စပ်အသုံးချတတ်ဖို့လည်း လိုအပ်ပါတယ် - 

ဒီအကြောင်းအရာက Web Design ပိုင်းကို အားသန်ကြတဲ့ လေ့လာလိုသူ လူငယ်တွေ ဗဟုသုတဖြစ်အောင် ဖတ်ခဲ့ဖူးတဲ့ စာအုပ်တစ်အုပ်ထဲက ပြန်လည်ဖော်ပြပေးတာပါ - လူငယ်တော်တော်များများ Web Design ပိုင်းကို အားသန်ကြတယ် - ဒါပေမယ့် တော်တော်များများက ဘာကိုစပြီး လေ့လာရမှန်း မသိဘူး - တစ်ချို့က သူများ Programming ဆိုတာနဲ့ လိုက် Programming ကြတယ် - သူများ Java ဆိုရင် ကိုယ်လည်းလိုက် Java ကြတယ် - ဒါပေမယ့် ကိုယ်သင်နေတာတွေက ဘယ်နေရာမှာ ဘာအသုံးဝင်မှန်းကျတော့ သေသေချာချာ ဂဃနဏ မလေ့လာကြဘူး - ဒါကျွန်တော်တို့ မြန်မာလူငယ်တွေ အားနည်းချက်ပါပဲ - ကိုယ်ဝါသနာပါတဲ့ အရာကို ဖြစ်ဖြစ်မြောက်မြောက် တတ်ကျွမ်းဖို့ဆိုရင် ကိုယ်လေ့လာတဲ့ အရာက ဘာလုပ်လို့ ရမယ် ဆိုတာရယ် - အဲလိုဖြစ်အောင်လုပ်ဖို့ ဘာတွေမဖြစ်မနေ တတ်ဖို့လိုမယ် ဆိုတာရယ် တိတိကျကျ သိထားဖို့ လိုကိုလိုပါတယ် - ကျွန်တော်ကတော့ Web programmer လည်း မဟုတ်ဘူး -  ကိုယ်လှုပ်ရှားနေတဲ့ နယ်ပယ် မဟုတ်တော့ အများကြီးလည်း သိပ်မသိဘူး - ဒါပေမယ့် ရံဖန်ရံခါ စိတ်ရူးပေါက်ရင် ဟိုလိုက်စမ်း ဒီလိုက်စမ်း စမ်းတယ် - Blog လည်း ရေးတာရှိတော့ HTML - CSS က အခြေခံလောက်တော့ သိထားသင့်တယ် ဆိုပြီး နိုင်သလောက်လေး လေ့လာဖြစ်တာတော့ ရှိတယ် - ဒီလိုသိထားတော့ ကိုယ့် Blog လေး အမြင်လှအောင် ဟိုပြင်ဒီပြင် ပြင်တဲ့ အခါ - ဟိုပေါင်းဒီပေါင်း ပေါင်းတဲ့ အခါ - ဟိုဖြုတ်ဒီတပ် လုပ်တဲ့ အခါ ပိုအဆင်ပြေတာပေါ့ -

အခုလည်း အဲလိုနဲ့ စာလိုက်ဖတ်ရင်း ဟိုတစ်နေ့က Online html editors နဲ့ ပတ်သတ်တဲ့ tools တွေ သွားတွေ့မိတယ် - အရင်သုံးနေကျ html editors တွေထက် ဒီကောင်က realtime previews မို့လို့ ကျွန်တော်ကတော့ ပိုသဘောကျမိတယ် - လေ့လာလိုသူတွေ သိရှိနိုင်အောင် ဒီအောက်မှာ ဖော်ပြပေးလိုက်ပါတယ် - သူတို့တွေကတော့ -

HTML Instant

သူက အပေါ်မှာ ပြောခဲ့တဲ့ Realtime HTML editor ဆိုတာပါ - HTML ကို လေ့လာလိုသူတွေ web developer တွေအတွက်  အသုံးတည့်ပါတယ် - Web page တစ်ခုလုံး ဖြစ်ဖြစ် - Code လေးနည်းနည်းပါပါး ဖြစ်ဖြစ် စိတ်ရိုက် Edit လုပ်ပြီး ထွက်လာမယ့် Result ကိုတိုက်ရိုက်ကြည့်လို့ ရပါတယ် -

Online HTML Editor

သူကလည်း အပေါ်မှာ ဖော်ပြခဲ့တဲ့ HTML editor တစ်မျိုးပါပဲ - နောက်ပြီး သူ့မှာ WYSWYG editor ပါလို့ Format လုပ်တဲ့ နေရာမှာ အလွယ်တကူနဲ့ ပြင်ဆင်တည်းဖြတ်နိုင်ပါတယ် -

HTMLEdit

သူကတော့ HTML editor ထဲမှာ တော်တော်လေး အမြင်ရိုးတယ် ဆိုရမယ် - ဒါပေမယ့် အထင်မသေးပါနဲ့ Stylesheets နဲ့ CSS tags အားလုံးကို Supports ပေးပါတယ်။ နောက်ပြီး သူ့ကို Mobile browser ကနေလည်း သုံးလို့ ရပါတယ် -

ကျွန်တော်ခု ဖော်ပြခဲ့တာတွေ အားလုံးဟာ အခြေခံတွေပါ - စိတ်ပါဝင်စားသူများ အစပျိုးနိုင်အောင် - လေ့လာနေသူတွေ အထောက်အကူ ဖြစ်အောင် တွန်းအားပေးချင်ယုံသက်သက်ပါပဲ -

မိသားစုဝင်များ ဆထက်တန်ပိုး အောင်မြင်ကြပြီး အနာဂတ်မှာ မိမိတိုင်းပြည်ကို ဒီ့ထက်မက အကျိုးပြုနိုင်ကြပါစေ -

KznT.