education for everyone
Planet Creator ရေးထားတဲ့ စာအုပ်ဖြစ်ပြီး HTML နဲ့ CSS ကို အခြေခံမှ စပြီး သေသေချာချာ ရေးထားတဲ့ စာအုပ်ကောင်းလေး တစ်အုပ်ပါ။ စာမျက်နှာပေါင်း ၁၉၇ မျက်နှာ ပါရှိပြီး နားလည် သဘောပေါက်အောင် ရှင်းလင်းထားတဲ့အတွက် လေ့လာတဲ့သူတွေအတွက် အတော့်ကို အသုံးဝင်မယ့် စာအုပ်တစ်အုပ်ပါ။
http://www.worldwidemyanmar.com/news/headline/423-myanmar-version-html-css-ebook.html
မှာ သွားရောက်ယူနိုင်ပါတယ်။
HTML 5 ဆိုတာကတော့ အခုနောက်ပိုင်း ခေတ်စားလာပါတယ်။ အခုနောက်ပိုင်း Browser တွေဟာ HTML5 ကို support လုပ်လာပါပြီ။ နောက်ပိုင်းမှာ website တွေဟာ HTML5 ကို အဓိက အသုံးပြုတော့မှာပါ။ HTML5 ဆိုတာဘာလဲ။ HTML5 က ဘာတွေ ထူးလဲ။ HTML5 ကို ဘယ်မှာလေ့လာလို့ရမလဲ။
HTML 5 ~= HTML 5 + jsAPI + CSS3
လို့ ဆိုလို့ရပါတယ်။ HTML ဆိုတာက tag တွေပါပဲ။ ထူးထူးခြားခြားရယ်လို့ မရှိလာပေမယ့် HTML5 နဲ့ အတူ တွဲပါလာတဲ့ javascript API အသစ်တွေနဲ့ CSS3 က ထူးခြားမှုတွေ ဖြစ်စေပါတယ်။
Cheat Sheet ဆိုတာကတော့ ကျွန်တော်တို့တွေ ပုံမှန် များပြားလှတဲ့ reference တွေကို လိုအပ်ပြီး အသုံးဝင်တာတွေ စုစည်းထားတာကို ဆိုတာပါ။ တနည်းပြောရင် quick reference လို့ ဆိုလို့ရပါတယ်။ ကျွန်တော် HTML, CSS , jQuery အကြောင်း MZ Edu မှာ ရေးခဲ့ဘူးပါတယ်။ အခု Web Development လုပ်မယ့်သူတွေအနေနဲ့ HTML, CSS , jQuery တို့ကို သိထားဖို့လိုအပ်ပါတယ်။ ရေးသားရာမှာလည်း လွယ်လွယ်ကူကူ reference လုပ်လို့ရအောင် cheat sheet လေးတွေ ဆောင်ထားဖို့လည်း လိုအပ်ပါတယ်။
HTML အကြောင်းကို ကျွန်တော် ရေးခဲ့ပြီးပါပြီ။ ရေးထားခဲ့တဲ့ စာအုပ်က HTML4 အကြောင်းပါ။ အခု HTML5 မှာ ပါဝင်လာတဲ့ feature တွေထဲက form အကြောင်း ထပ်မံဖြည့်စွက်ထားပါတယ်။
textbox မှာ စာမဖြည့်ခင် textbox information ပြထားချင်တဲ့အခါမှာ အရင်တုန်းက jquery ကို သုံးပြီးရေးရတယ်။ အဲဒီလို ရေးမယ့် အစား HTML5 မှာ placeholder ဆိုတဲ့ attribute ကို သုံးလို့ရပါတယ်။ code ကိုတော့ ဒီလိုရေးတယ်။
<input type="text" placeholder="Enter Your Name" />
အဲဒီ code လေးက လက်ရှိ webkit borwser တွေမှာ အလုပ်လုပ်ပါတယ်။ Firefox 3.6 မှာတော့ အလုပ်မလုပ်သေးပါဘူး။ နောက်ပိုင်း version တွေမှာတော့ အလုပ်လုပ်မယ်ထင်တယ်။
require validation စစ်ဗျို့အတွက် ကျွန်တော်တို့တွေ jquery ဖြစ်ဖြစ် javascript ဖြစ်ဖြစ် ရေးပြီး စစ်ခဲ့ရပါတယ်။ အခု HTML5 မှာ require ဆိုတဲ့ attribute နဲ့ တင်ရပါတယ်။ Safari မှာကတော့ error message မပြပေမယ့် form တစ်ခုကို မကူးသွားပါဘူး။ လိုအပ်တဲ့ field မှာ focus ဖြစ်သွားပါတယ်။ Opera မှာကတော့ message ကိုဖော်ပြပေးပါတယ်။ သူ့ကိုတော့ ဒီလိုလေးရေးတယ်။
<input type="text" placeholder="Enter Your Name" required />
HTML5 မှာ javascript နဲ့ textbox ကို focus လုပ်ဖြစ်အောင် ရေးစရာမလိုတော့ပါဘူး။ ဥပမာ။။ Google လိုမျိုး တက်တက်ချင်းမှာ textbox ကို focus ဖြစ်ချင်ရင် autofocus attribute ကို သုံးလိုက်ရုံပါပဲ။ jquery , javascript တွေနဲ့ သီးသန့် ထပ်ရေးနေဖို့မလိုတော့ဘူးပေါ့။ သို့ပေမယ့်လည်း browser တွေ အားလုံးမှာ မရသေးပါဘူး။ လက်ရှိ firefox 3.6 မှာတော့ အဲဒီ attribute အလုပ်မလုပ်သေးပါဘူး။
<input type="text" placeholder="Enter Your Name" required autofocus />
HTML4 တုန်းက javascript နဲ့ email validation တွေ စစ်ခဲ့ကြပါတယ်။ အခုတော့ javascript မလိုအပ်ပဲ html5 မှာ စစ်လို့ရပါပြီ။
<input type="email" placeholder="yourmail@mail.com" required />
iPhone, iPodTouch တို့မှာဆိုရင်တော့ email keyboard ပြောင်းသွားပါလိမ့်မယ်။ Opera မှာဆိုရင်တော့ form submit လုပ်တဲ့အခါမှာ email format မှားနေတယ်ဆိုပြီး error message ပြပါလိမ့်မယ်။ Safari တို့ chrome တို့မှာတော့ submit လုပ်လို့မရပဲ focus ဖြစ်သွားပါလိမ့်မယ်။
သူကတော့ HTML5 မှာ အသစ်ပါဝင်လာတာပေါ့။ Telephone number အတွက်ပါ။ iPhone , iPodTouch တို့မှာဆိုရင်တော့ phone number keyboard ပေါ်လာပါတယ်။ အခြား browser တွေမှာတော့ ထူးထူးခြားခြားရယ် မရှိပါဘူး။
<input id=phone name=phone type=tel placeholder="Eg. +447500000000" required>
HTML5 မှာ number တွေ သီးသန့် ထပ်ပါလာပါတယ်။ number field ကို HTML5 မှာ ထပ်ပါလာပါပြီ။ number field ဖြစ်တဲ့အတွက် increase , decrease button လေး ဘေးမှာ ထပ်ပါလာပါတယ်။
<input id=cardnumber name=cardnumber type=number required>
ကျွန်တော်တို့တွေ date အတွက် javascriptနဲ့ဖြစ်ဖြစ် jqueyr ui နဲ့ ဖြစ်ဖြစ် အသုံးပြုခဲ့ကြပါတယ်။ HTML5 မှာ date field ပါလာပေမယ့် အခုလောလောဆယ်တော့ Opera တစ်ခုတည်းမှာပဲ ရပါသေးတယ်။
<input id=dob name=dob type=date required>
HTML5 ဆိုင်ရာလေ့လာစရာများ
960gs css framework ကို ဘယ်လို အသုံးပြုရမလဲဆိုတာ video လေးနဲ့ ပြထားပါတယ်။
Continue reading “960gs”
Web Page များကိုရေးသားခြင်း၏ အခြေခံအုတ်မြစ်ဖြစ်သော HTML (Hyper Text Markup Language) နှင့် CSS (Cascading Style Sheet) ဆိုင်ရာ လေ့ကျင့်ခန်းများကို (W3 Schools) မှ ဘာသာပြန်ဆိုတည်းဖြတ်၍ အတတ်နိုင်ဆုံး စုံလင်အောင် လေ့လာ ပြုစု တင်ပြထားသည်။
နည်းပညာလမ်းကြောင်းပေါ်မှာ အခြေခံအကျဆုံး အရိုးရှင်းဆုံးနဲ့ နားလည်အလွယ်ဆုံး Webpage ရေးနည်းကိုပြပါဆိုရင် HTML ပဲရှိပါတယ်… ဒါကိုနားမလည်ရင်.. ဘာမှ အလုပ်မဖြစ်ပါဘူး Pro မဖြစ်နိုင်ပါဘူး… ဘာပဲဖြစ်ဖြစ် ကြားနာမှတ်သားဖူးသမျှ ဝေမျှပါတယ်.. နားလည်ပြီးသူများအတွက် မရည်ရွယ်ပါ.. စတင်လေ့လာလိုသူများအတွက်သာ အထူးဦးတည် ရေးသားတာဖြစ်ပါတယ်.. ကျွန်တော် သိလွန်းလို့မဟုတ်ပါ.. အထက်မှာ ဆိုခဲ့သလို “ဧဝံမေ သုတံ ” ပါလို့ ထပ်ပြီး ၀န်ခံပါရစေ… Continue reading “HTML By Ccrazy”
ယနေ့အခါမှာ Internet ဟာအလွန်ကျယ်ပြန့်လာပြီး လူတိုင်းနီးပါးအသုံးပြုကြပေသည်။ ကျွန်တော်တို့တွေဟာလည်း Internet ပေါ်မှာ ကိုယ်ပိုင်နေရာများကို ကိုယ်ပိုင် Homepage များကို အလွယ်တကူ ယူဆောင်နိုင်လေပြီ။ Internet ဆိုတာကို အကျယ်ရှင်းမနေတော့ပါဘူး။ အလွယ်ရှင်းရရင်တော့ Internet ဆိုတာ ကမ္ဘာ ပေါ်ရှိ နိုင်ငံအချင်းချင်း ချိတ်ဆက်ထားသော Network ကွန်ယက်ကြီးတစ်ခုဖြစ်ပါသည်။ အဲဒီလို Information တွေ ဖလှယ်ဖို့အတွက် Web Page တွေကို ရေးဆွဲရပါတယ်။ Web Page ရေးဆွဲဖို့ရာအတွက် HTML ဟာ အဓိက ကျပါတယ်။ ရေးသားထားတဲ့ Web Page တွေကို Web Browser Software နဲ့ ကြည့်ရှုရပါတယ်။ Web Broswer Software တွေက Internet Explorer နဲ့ Firefox တို့က နာမည်ကြီးတွေပါ။ ဒါကြောင့် web site တွေကို ဖန်တီးရာမှာ အခြေခံအကျဆုံး HTML ကို စာအုပ်လေးရေးသားထားပါ့တယ်။ Size သေးအောင် 7Zip နဲ့ချံု့ထားပါတယ်။ ဒါကြောင့် 7Zip ကိုသွင်းဖို့တော့ လိုပါလိမ့်မယ်။ ဒါမှမဟုတ် browser တွေမှာ ဖတ်လို့ရအောင် .swf file လေးလည်း ပေးထားပါတယ်။ နှစ်သက်ရာကို download ချယူနိုင်ပါတယ်။