အခန်း (၁) အခန်း (၃) အခန်း (၂)

HyperText Markup Language

Semantic Data Structure (or) The Root of Everything

HTML ဆိုတာ W3C ကသတ်မှတ်ထားတဲ့ Web Document တွေ တည်ဆောက် တဲ့အခါ လိုက်နာ အသုံးပြု ရမယ့် ရေးသားပုံ ရေးသားနည်းပဲ ဖြစ်ပါတယ်။ Web Document တစ်ခုဟာ HTML Element တွေစုစည်းထားတဲ့ Text Document တစ်ခုပဲဖြစ်ပါတယ်။

ပုံ (၂-က) HTML Element တစ်ခု၏ ဖွဲ့စည်းပုံ

ပုံ (၂-က) မှာ HTML Element တစ်ခုရဲ့ ဖွဲ့စည်းပုံကို ဖော်ပြပေးထား ပါတယ်။ HTML Element တွေမှာ အခြေခံ အားဖြင့် Open Tag နဲ့ Close Tag ဆိုပြီး အဖွင့်အပိတ် ရှိပါတယ်။ အဲ့ဒီ အဖွင့်အပိတ် ကြားထဲမှာ Element Content တည်ရှိပြီး Open Tag ရဲ့ အတွင်းထဲမှာ Element Attribute တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုပြီး ရှိနိုင်ပါတယ်။ Close Tag နဲ့ Content မရှိပဲ Open Tag နဲ့ Attribute တွေသာပါတဲ့ Empty Tag တွေလည်း ရှိပါတယ်။

၁၉၉၁ ခုနှစ်က အဲ့ဒီလို Element (၁၈) မျိုး ပါဝင်တဲ့ Document ရေးသားနည်းကို HTML – HyperText Markup Language ရယ်လို့ World Wide Web နည်းပညာကို တီထွင်ခဲ့တဲ့ Tim Berners-Lee ကပဲ စတင် တီထွင်ခဲ့တာ ဖြစ်ပါတယ်။ အဲ့ဒီ (၁၈) ခုထဲက (၁၁) ခုဟာ ကနေ့ထိ ဆက်လက်ပါဝင် အသုံးပြုနေဆဲ ဖြစ်ပါတယ်။ အများ အသုံးပြု နိုင်ပြီဖြစ်တဲ့ HTML 2.0 ကို စတင်ကြေငြာ ခဲ့တာကတော့ ၁၉၉၄ ခုနှစ် နိုဝင်ဘာလမှ ဖြစ်ပါတယ်။ အဆင့်ဆင့်ပြင်ဆင် မှုတွေ ပြုလုပ်လာခဲ့ပြီး အခုဒီစာရေးနေချိန်မှာ ကျယ်ကျယ်ပြန့်ပြန့် အသုံးပြုနေတာကတော့ ၁၉၉၉ ခုနှစ် ဒီဇင်ဘာမှာ ကြေငြာခဲ့တဲ့ HTML 4.01 ပဲဖြစ်ပါတယ်။ အနာဂါတ်မှာ ပြောင်းလဲတိုးတက် မှုတွေ များစွာပါဝင်လာတဲ့ HTML5 ကို အသုံးပြုကြမှာ ဖြစ်ပေမယ့်၊ ဒီအခန်းမှာ ပိုပြီးအခြေခံကျတဲ့ HTML 4.01 ကို အရင်ကြည့် ချင်ပါတယ်။ HTML5 အကြောင်းကိုတော့ အခန်း (၁၄) HTML5 မှာ ဆက်လက်လေ့လာသွားမှာ ဖြစ်ပါတယ်။

Semantic Web

HTML Element တွေအကြောင်း မလေ့လာခင် Semantic Web ကို အရင်ဆုံး နားလည်ထားဖို့ လိုပါတယ်။ Semantic ဆိုတာ သတ်မှတ်ထားတဲ့ စည်းမျဉ်းကို လိုက်နာထားတဲ့ အတွက် စနစ်ကျနေတဲ့ Web Document တွေကို ဆိုလိုတာ ဖြစ်ပါတယ်။ Semantic ဖြစ်နေမှသာ Web Document တွေဟာ လူတစ်ယောက် ဖတ်ရှုနားလည် နိုင်ယုံမက ကွန်ပျူတာကလည်း Process လုပ်နိုင်မှာ ဖြစ်ပါတယ်။ W3C က HTML ကို ဖန်တီးတဲ့ နေရာမှာလည်း ဒီလိုရည်ရွယ် ချက်နဲ့ပဲ ဖန်တီးထားတာ ဖြစ်ပါတယ်။

လူတစ်ယောက်ဟာ Web Document တစ်ခုအတွင်းမှာ ဘာတွေပါလည်း သိချင်ရင် မျက်စိနဲ့ကြည့်ပြီး ဖတ်ရှု့ လေ့လာမှာပါ။ ဒါပေမယ့် ကွန်ပျူတာကတော့ အဲ့ဒီ Document ထဲမှာ ဘာတွေပါလဲ ဆိုတာ သိရဖို့အတွက် Process လုပ်ယူပြီး နားလည်ရတာ ဖြစ်ပါတယ်။ ကွန်ပျူတာ ဆိုတာ Processing Power ရှိပေမယ့် သင်မပေးရင် ဘာမှမတက် ပါဘူး။ Web Browser, Search Engine Spider အစရှိတဲ့ ကွန်ပျူတာ Software တွေကို သတ်မှတ်စည်းမျဉ်းတွေ သင်ကြားပေး ထားတဲ့အတွက် Web Document တစ်ခုကို ဖတ်ယူတဲ့ နေရာမှာ အဲ့ဒီ စည်းမျဉ်းတွေ နဲ့ တိုက်ဆိုင်ကြည့်ပြီး နားလည်မှု့ ရကြတာဖြစ်ပါတယ်။ ဒါကြောင့် ကျွန်တော်တို့ တည်ဆောက်တဲ့ Web Document တွေဟာ သတ်မှတ် စည်းမျဉ်းနဲ့ မညီရင် ကွန်ပျူတာက Process လုပ်နိုင်တဲ့ Semantic Document ဖြစ်မှာမဟုတ်ပါဘူး။

လေ့လာစ Web Developer တွေဟာ Web Document တွေ တည်ဆောက်တဲ့ အခါ "လူတွေဖတ်လို့ရဖို့" ကို အဓိကဦးတည် တည်ဆောက်ကြလေ့ ရှိပါတယ်။ Web Document တစ်ခုဟာ ကွန်ပျူတာကလည်း Process လုပ်နိုင်ဖို့လည်း လိုတယ်ဆိုတဲ့အချက်ကို သတိလွတ်မေ့လျော့တက်ကြပါတယ်။ Web Document တစ်ခုဟာ Text Document သာဖြစ်လို့ စည်းမျဉ်းတွေနဲ့ မကိုက်ညီလည်း လူတွေအတွက်တော့ ဖတ်လို့ရနေနိုင်တာပဲ ဖြစ်ပါတယ်။ ဒါပေမယ့် အဲ့ဒီ Document တွေကို အခြေခံပြီးတော့ ကျွန်တော်တို့က တစ်ခြား Process တွေ လုပ်ရဦးမှာပါ။ အခြေခံ ဖြစ်တဲ့ Document စနစ်မကျခဲ့ရင် Google လို Search Engine နဲ့ Web Browser တွေက ကျွန်တော်တို့ Document ကို အပြည့်အဝ နားမလည်တဲ့ ပြဿနာ ရှိနိုင်သလို၊ ကျွန်တော်တို့ ကိုယ်တိုင် ဆက်လက် ရေးသားရမယ့် CSS နဲ့ Style တွေသတ်မှတ်ခြင်း၊ Javascript နဲ့ Element တွေကို စီမံခန့်ခွဲခြင်း ကိစ္စတွေကို ဆောင်ရွက်တဲ့အခါ အခက်အခဲတွေနဲ့ တွေ့ရမှာပဲဖြစ်ပါတယ်။

ဒါကြောင့် HTML နဲ့ ပက်သက်ရင် ကျွန်တော်တို့ဟာ ကွန်ပျူတာက နားလည်နိုင်တဲ့ Data Structure တည်ဆောက် နေခြင်း ဖြစ်တယ်ဆိုတဲ့ အသိဟာ ပထမဦးဆုံး လိုအပ်ချက်ပဲ ဖြစ်ပါတယ်။ သပ်ရပ်လှပအောင် ဘယ်လိုပုံစံ ဖော်ပြမယ်၊ လူတွေရဲ့ မျက်စိမှာပသာဒ ဖြစ်အောင် ဘယ်လိုဖန်တီးမယ် ဆိုတဲ့ကိစ္စဟာ HTML ရဲ့ တာဝန် မဟုတ်ပါဘူး။ လက်တွေ့ မှာ လုပ်လို့လည်း မရပါဘူး။ ဒါဟာ နောက်အခန်းမှာ ဆက်လက် လေ့လာမယ့် CSS လို့ခေါ်တဲ့ Style Language ရဲ့ တာဝန်ပဲဖြစ်ပါတယ်။

Semantic Web ရဲ့ အရေးပါပုံကို ပိုပြီး ပေါ်လွင်စေဖို့ Browser War နဲ့ XHTML အကြောင်း ထည့်သွင်းဖော်ပြ လိုက်ပါတယ်။

Browser War

ပထမဦးဆုံး Web Browser ဖြစ်တဲ့ Mosaic ကို တီထွင်ခဲ့တဲ့ Marc Andreessen နဲ့ Jim Clark တို့ နှစ်ယောက်ဟာ NCSA က ထွက်ပြီး Mosaic Communications ဆိုတဲ့ လုပ်ငန်းတစ်ခုကို တည်ထောင် ခဲ့ပါတယ်။ နောက်ပိုင်းမှာ Netscape Communications Corporation လို့ အမည်ပြောင်းပြီး Netscape Navigator ဆိုတဲ့ Web Browser ကို ဖန်တီးခဲ့ကြပါတယ်။ Netscape Navigator ရဲ့ Version 1.0 ကို ၁၉၉၄ ခုနှစ် ဒီဇင်ဘာလမှာ ကြေငြာခဲ့ပါတယ်။

အဲ့ဒီအချိန်မှာပဲ NCSA ရဲ့ အဖွဲ့ခွဲတစ်ခုဖြစ်တဲ့ Spyglass Inc. က Mosaic Browser ရဲ့လိုင်စင်ကို Microsoft ကို ပေးလိုက်ပါတယ်။ ၁၉၉၅ ခုနှစ် ဩဂုတ်လမှာ Mosaic Browser ကို အခြေခံထားတဲ့ Microsoft Internet Explorer စတင်ပေါ်ပေါက် လာပါတယ်။ ဒါကြောင့် ရှေ့အခန်းမှာ Microsoft Internet Explorer နဲ့ Mozilla Firefox တို့ဟာ မူလပထမ Browser ဖြစ်တဲ့ Mosaic ကနေ ဆင်းသက်လာ ကြတယ်လို့ ပြောခဲ့တာဖြစ်ပါတယ်။ Mosaic Source Code ကို အသုံးပြုထားတာ မဟုတ်ပေမယ့် Mosaic ကို တီထွင်ခဲ့သူတွေ ဖန်တီးထားတဲ့ Netscape Navigator ဟာ၊ နောက်ပိုင်းမှာ အဓိက Browser တစ်ခုဖြစ်လာတဲ့ Firefox ရဲ့ အစလည်း ဖြစ်ပါတယ်။ တစ်ချိန်တည်းမှာပဲ နော်ဝေ ဆက်သွယ်ရေးလုပ်ငန်း တစ်ခုဖြစ်တဲ့ Telenor ကလည်း Opera Web Browser ရဲ့ ပထမဆုံး Version ကို စမ်းသပ် ထုတ်လုပ်ခဲ့ပါတယ်။ ဒါကြောင့် Opera ဟာ ရှေ့အကျဆုံး Browser တွေထဲကတစ်ခုလို့ ဆိုနိုင်ပြီး ကနေ့ထိလည်း Opera ရဲ့ သက်ရောက်မှုတွေ Web Standards ထဲမှာ ရှိနေဆဲဖြစ်ပါတယ်။

အဲ့ဒီအချိန်ကစပြီး အသုံးပြုသူတွေနဲ့ Web Developer တွေကို အပြိုင်အဆိုင် ဆွဲဆောင်နိုင်ဖို့ Web Browser တွေက သူ့ထက်ငါ ကောင်းဖို့ ကြိုးစားကြရင်း Bowser War ဆိုတာ စတင်ပေါ်ပေါက် လာပါတယ်။

Opera ကတော့ အပြိုင်အဆိုင်ထဲမှာ ဒီလောက် ပြင်းပြင်းထန်ထန်မပါပေမယ့် Microsoft နဲ့ Netscape တို့ကတော့ အတော်လေး ပြိုင်ခဲ့ကြတာ ဖြစ်ပါတယ်။ နှစ်ဖွဲ့လုံးရဲ့ အဓိကဦးတည်ချက်က သူတို့ Web Browser မှာ လုပ်ဆောင် ချက်အသစ်တွေ အခြားသူ ထက်ဦးအောင် ထပ်ထည့်ဖို့ပဲဖြစ်ပါတယ်။ တစ်ဦးထက် တစ်ဦးက သာဖို့ကို အဓိက ဦးတည် နေရတဲ့အတွက် အတူတစ်ကွ ပူးပေါင်းပြီး ညှိနှိုင်းဆောင်ရွက်ဖို့ ဆိုတာ သိပ်မစဉ်းစားကြ ပါဘူး။

အဲ့ဒီအချိန် ကာလတွေဟာ Web Developer တွေအတွက် စိတ်အညစ်ရဆုံး အချိန်တွေပဲ ဖြစ်ပါတယ်။ Web Document တစ်ခု တည်ဆောက်ချင်ရင် Document တစ်ခုတည်းကိုပဲ နှစ်မျိုးခွဲပြီး ရေးသားပေးရလေ့ ရှိပါတယ်။ Internet Explorer အတွက်တစ်မျိုး၊ Netscape အတွက်တစ်မျိုး နှစ်မျိုးခွဲပြီး တည်ဆောက်ရတဲ့ သဘော ဖြစ်ပါတယ်။ တစ်ခါတစ်ရံ Browser တစ်ခုတည်းအတွက် ရည်ရွယ် တည်ဆောက်ပြီး "ဒီ Document ကို တစ်ခြား Browser နဲ့ မကြည့်ရ" လို့ သတ်မှတ်ရတာ တွေလည်း ရှိခဲ့ပါတယ်။ ကနေ့ခေတ်လို Major Browser (၅) ခုအပါအဝင် အခြား Browser လေးငါးဆယ်လောက် ရှိတဲ့ခေတ်မှာသာ အဲ့ဒီလို ဖြစ်နေသေးရင် Developer တွေအတွက်တော့ မတွေးရဲစရာပါပဲ။

ဒီလိုကိစ္စတွေမှာ တူညီအောင်ညှိပေးမယ့် Web Standard အဖွဲ့ W3C ရှိနေပေမယ့်လည်း အစပိုင်းမှာ Web Standard တွေကို သိရှိလိုက်နာသူ အတော်လေး နည်းခဲ့ပါတယ်။ ၁၉၉၈ ခုနှစ်ရောက်တဲ့အထိ Internet Explorer နဲ့ Netscape တို့ ရဲ့ ယှဉ်ပြိုင်မှု Browser War အောက်မှာ Web Development လောကဟာ ဖရိုဖရဲဖြစ်နေခဲ့ ရတာပဲ ဖြစ်ပါတယ်။ ဒါတွေအားလုံးဟာ သတ်မှတ်စည်းမျည်း တွေရှိနေပေမယ့် လိုက်နာဖို့ တာဝန်ရှိတဲ့ သူတွေက လိုက်နာဖို့ ပျက်ကွက်တဲ့ အတွက်ကြောင့် ဖြစ်ခဲ့ရတာလည်း ဖြစ်ပါတယ်။ Browser War က တစ်မျိုး၊ အဲဒီ Browser War ကြောင့် မဖြစ်ဖြစ် အောင် ဖန်တီးနေရလို့ စနစ်မကျတဲ့ Web Document တွေကတစ်သွယ်နဲ့ ခက်ခဲတဲ့ကာလတွေပဲ ဖြစ်ပါတယ်။

၁၉၉၈ ခုနှစ်မှာတော့ Professional Web Developer တွေနဲ့ ဖွဲ့စည်းထားတဲ့ Web Standard Project (WaSP) ဆိုတဲ့ အဖွဲ့အစည်းတစ်ရပ် ပေါ်ပေါက်လာပြီး Web Standard ရဲ့ အရေးပါပုံကို ဖော်ထုပ်ပြောဆို ရေးသားလာခဲ့ ပါတယ်။ အဓိက ရည်ရွယ်ချက်ကတော့ Microsoft နဲ့ Netscape တို့ကို သူတို့ Browser တွေမှာ W3C Web Standard တွေကို တိတိကျကျ လိုက်နာအောင် တွန်းအားပေးဖို့ပဲ ဖြစ်ပါတယ်။ ရေးသားသူ Web Developer နဲ့ Browser ထုပ်လုပ်သူတို့ အားလုံးက Web Standard ကို လိုက်နာကြမှသာ ကြုံတွေ့နေရတဲ့ ပြဿနာတွေဟာ ပြေလည်မှာပဲ ဖြစ်ပါတယ်။ WaSP ရဲ့ ရေးသားဖော်ပြ မှုတွေဟာ အင်တာနက်မှာ အလျှင်အမြန် ပြန့်နှံ့လာတဲ့အတွက် Web Developer တွေအပါအဝင် အင်တာနက် အသုံးပြုသူတွေ အနေနဲ့ Web Standard ရဲ့ အရေးပါပုံကို ပိုမိုသိရှိ နားလည်လာကြ ပါတယ်။

၂၀၀၀ ပြည့်နှစ် ရောက်တဲ့အခါမှာ Microsoft က Mac အတွက် Internet Explorer 5 ကို ကြေငြာခဲ့ ပါတယ်။ အဲ့ဒီ Browser မှာ Web Standard ကို အတော်လေး လိုက်နာလာလို့ ဒါဟာ အရေးပါတဲ့ကာလ တစ်ခုလို့ ဆိုနိုင်ပါတယ်။ WaSP က Netscape ကိုလည်း Navigator 5 ကို မဖြန့်သေးပဲ Web Standard ကို အတိုင်းအတာ တစ်ခုထိ လိုက်နာနိုင် မှသာ စတင်ဖြန့်ချီဖို့ ဖိအားပေးခဲ့ပါတယ်။ တစ်ချိန်တည်းမှာပဲ Wired, ESPN အစရှိတဲ့ Website တွေက သူတို့ Website တွေကို Web Standard နဲ့အညီ ပြောင်းလဲတည်ဆောက် လာခဲ့ကြပါတယ်။

၂၀၀၃ ခုနှစ်မှာတော့ CSS Zen Garden ဆိုတဲ့ Website တစ်ခု ပေါ်လာခဲ့ပြီး HTML Contentကို ထိစရာ မလိုပဲ CSS Style Language ကိုသုံးပြီး Website တစ်ခုလုံးရဲ့ Design ကို အမျိုးမျိုးပြောင်းလို့ ရကြောင်း လက်တွေ့ ပြသခဲ့ပါတယ်။ Professional Web Developer တွေ အထူး စိတ်ဝင်စားပြီး ဒါဟာ Web Design လောကကို တစ်ခေတ်ဆန်း စေခဲ့တဲ့ ဖန်တီးမှုလည်း ဖြစ်ခဲ့ပါတယ်။

၂၀၀၄ ခုနှစ်ကို ရောက်လာတဲ့အခါ Web Standard ကို ကောင်းကောင်း လိုက်နာထားတဲ့ Mozilla Firefox ရဲ့ ပထမဆုံး Version ထွက်လာခဲ့ ပါတယ်။ အဲ့ဒီနှစ်ထဲမှာပဲ Google က Gmail ကို စတင်ကြေငြာ ခဲ့ပါတယ်။ Gmail ဟာ Web Standard တစ်ခုဖြစ်တဲ့ Javascript ကို အဓိက အသုံးပြုပြီး တည်ဆောက် ထားတာ ဖြစ်ပါတယ်။ အဆင့်မြင့် Application တွေကို Javascript နဲ့ ဒီလိုဒီနည်းအတိုင်း တည်ဆောက်နိုင် ပါလား လို့ Web Developer တွေအတွက် စံနမူနာယူစရာ Application တစ်ခုလည်း ဖြစ်လာစေခဲ့ ပါတယ်။ ၂၀၀၄ ခုနှစ် နှစ်ကုန်ပိုင်းလောက် မှာတော့ O'Reilly Media က Tim-O'Reilly က Web2.0 စတဲ့စကားလုံးကို စတင်မိတ်ဆက် ခဲ့ပါတယ်။ အဲဒီနောက်ပိုင်း ကစပြီး Web2.0 ဆိုတဲ့ ကြွေးကြော်သံ အောက်မှာ Web Standard နဲ့ တည်ဆောက်ထားတဲ့ Application တွေ တစ်ခုပြီးတစ်ခု ပေါ်ပေါက်လာခဲ့ တာပဲ ဖြစ်ပါတယ်။ Web Application တွေ စတင်တစ်ခေတ်ဆန်း ခဲ့တဲ့ ကာလတွေပဲ ဖြစ်ပါတယ်။

ကနေ့အချိန်မှာတော့ အဓိက Web Browser အားလုံးက အတော်လေးတူညီစွာ Web Standard ကို လိုက်နာလာ ကြပြီပဲဖြစ်ပါတယ်။ ကျွန်တော်တို့ Web Developer တွေကလည်း Web Standard ကို သိရှိပြီး သတ်မှတ်ချက်တွေ နဲ့အညီ Web Document တွေကို တည်ဆောက်ကြ မယ်ဆိုရင် ကျွန်တော်တို့ တည်ဆောက် လိုက်တဲ့ Web Document တစ်ခုဟာ Web Browser အားလုံးမှာ တူညီစွာ အလုပ်လုပ်မှာပဲ ဖြစ်ပါတယ်။

HTML vs. XHTML

W3C ဟာ Web Standard ကို သတ်မှတ်ပေးတဲ့ အဖွဲ့အစည်းတစ်ခု ဖြစ်ပါတယ်။ Web Standard ကို သတ်မှတ် ရခြင်း ရည်ရွယ်ချက်က Web Industry ထဲမှာရှိတဲ့ ပါဝင်သူအားလုံး နည်းပညာအရ ညီညွတ်ရမယ့် နေရာတွေမှာ ညီနေစေအောင် စံသတ်မှတ်ချက်တွေ သတ်မှတ်ပေးခြင်း အားဖြင့် ညှိနှိုင်းပေးဖို့ ဖြစ်ပါတယ်။ ဖော်ပြခဲ့ပြီးဖြစ်တဲ့ Browser War ကာလမှာ Internet Explorer နဲ့ Netscape တို့က W3C သတ်မှတ်ပေးထားတဲ့ Web Standard အတိုင်းမဟုတ်ပဲ အပြိုင်အဆိုင် တီထွင်ထည့်သွင်း ထားတဲ့ လုပ်ဆောင်ချက်တွေ ကိုယ်စီရှိခဲ့ကြ ပါတယ်။ တစ်ချို့လုပ် ဆောင်ချက်တွေက တစ်ဦးကိုတစ်ဦး တုပရင်း အလိုလိုညီ သွားတာတွေလည်း ရှိပါတယ်။

ဥပမာ <font> ဆိုတဲ့ HTML Element ကိုသုံးပြီး Web Document တစ်ခုမှာပါဝင်တဲ့ စာတွေကို စာလုံးပုံစံ ပြောင်းတာ၊ စာလုံးအရောင်ပြောင်းတာတွေ လုပ်နိုင်ပါတယ်။ အဲ့ဒီ <font> Element ဟာ W3C ရဲ့ HTML စံထဲမှာ မပါပါဘူး။ Netscape က တီထွင် အသုံးပြုထားတာ ဖြစ်ပါတယ်။ ဒါပေမယ့် အဲ့ဒီ <font> Element ဟာ နောက်ပိုင်း မှာ Internet Explorer ကပါ လိုက်လံအသုံးပြုလာတဲ့အတွက်၊ Web Developer တွေက Document တွေ တည်ဆောက်တဲ့အခါ ထည့်သွင်းအသုံးပြုမယ်ဆိုရင် Netscape Navigator မှာရော Internet Explorer မှာပါ အလုပ် လုပ်မှာဖြစ်ပါတယ်။ W3C ရဲ့ ပထမ ရည်ရွယ်ချက်က တူညီအောင်ညှိပေးဖို့ ဖြစ်ပါတယ်။ အခုလို အလိုလို ညီပြီးသား ကိစ္စတွေကို ညီပြီးဖြစ်လို့ Standard ထဲကို ထည့်သွင်း အသိအမှတ်ပြုပေး ရတဲ့သဘောလည်း ရှိပါတယ်။

HTML 3.0 ရောက်လာတဲ့အခါ မူလစံမှာမပါပေမယ့် Internet Explorer နဲ့ Netscape တို့ တစ်ညီတည်း သုံးနေတဲ့ အတွက် ထည့်သွင်းပေးရတဲ့ HTML Element တွေ အတော်များ လာခဲ့ပြီ ဖြစ်ပါတယ်။ ဒီလို ထည့်သွင်းပေး လိုက် တဲ့အတွက် HTML ရဲ့ မူလရည်ရွယ်ချက် ကိုလည်း တစ်ဖြည်းဖြည်း ထိခိုက်လာပါတယ်။ HTML ဆိုတာဟာ Semantic Data Structure တည်ဆောက်ဖို့ အတွက်ဆိုတဲ့ ရှု့ဒေါင့်ကနေ အမြင်လှ အောင် တည်ဆာက်နိုင်တယ် ဆိုတဲ့ဘက်ကို ဦးတည်လာတဲ့သဘော ဖြစ်ပါတယ်။

HTML 4.0 နဲ့ 4.01 ကိုရောက်တဲ့ အခါမှာတော့ ပြန်ပြင်လို့ မရနိုင်တော့ လောက်အောင် HTML ဟာ Semantic Data Structure ဆိုတဲ့ ရှုဒေါင့်ကနေ ဝေးကွာလာပြီပဲ ဖြစ်ပါတယ်။ Web Document ဆိုတာဟာ Application တွေရဲ့ အခြေခံ Data Structure မဟုတ်တော့ပဲ Font အမျိုးမျိုး၊ စာလုံးအရောင် အမျိုးမျိုးနဲ့ Text Format လုပ်ထားတဲ့ Document သာသာ ဖြစ်လာပါတော့တယ်။ Browser Support အားနည်းမှုဟာ အဓိကအချက် ဖြစ်ပေမယ့် ဒီလိုလွဲမှားတဲ့ အခြေခံ Concept တွေဟာ လည်း အဲ့ဒီကာလတွေမှာ အဆင့်မြင့် Web Application ရယ်လို့ ပြောပလောက်အောင် ပေါ်ထွက်မလာခြင်း အကြောင်းရင်းတစ်ခု ဖြစ်ပါတယ်။

W3C အနေနဲ့ အခြေအနေတွေကို ထိမ်းညှိဖို့ မဖြစ်မနေ လိုအပ်လာပါတယ်။ ဒါပေမယ့် HTML 4 .01 မှာ ထည့်သွင်း ထားပြီးသား Element တွေကို နောက် Version မှာ ပြန်ဖြုတ် ပြစ်လို့လည်း မရပါဘူး။ လက်ရှိ HTML 4.01 ကို အသုံးပြု ရေးသားထားတဲ့ Website တွေအများကြီး ရှိနေပြီ ဖြစ်တဲ့အတွက် ဖြုတ်ပြစ်လိုက်ရင် လက်ရှိ Website တွေ အတွက် အဆင်မပြေတော့ပဲ Backward Compatibility ကို ထိခိုက်စေမှာပဲ ဖြစ်ပါတယ်။ ဒါကြောင့် W3C က HTML ကို မပြင်တော့ပဲ XHTML လို့ခေါ်တဲ့ သီးခြား Markup Language တစ်ခုကို ၂၀၀၀ ပြည့်နှစ် ဇန်နဝါရီလမှာ ကြေငြာခဲ့ပါတယ်။ XHTML မှာ ပါတဲ့ X ဟာ eXtensible ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပါတယ်။ W3C ကပဲ တီထွင်ထားတဲ့ Data Model Language ဖြစ်တဲ့ XML ရေးသားပုံ အတိုင်း ရေးသားရမှာ ဖြစ်ပြီး ပိုပြီးစနစ်ကျတဲ့ HTML လို့လည်း ဆိုနိုင်ပါတယ်။

HTML မှာ ထည့်သွင်းထားတဲ့ Semantic မဖြစ်တဲ့ Element တွေကို XHTML မှာ ဖြုတ်ထုပ်ပြစ်ပြီး စည်းမျဉ်းစည်း ကမ်းတွေကိုလည်း ပိုမိုတင်းကြပ် လိုက်ပါတယ်။ ဥပမာ - XHTML မှာ Element Tag တွေအားလုံးကို စာလုံးသေးနဲ့ပဲ ရေးရမယ်လို့ သတ်မှတ်ပါတယ်။ HTML မှာတော့ စာလုံးအကြီးအသေး နှစ်သက်ရာနဲ့ ရေးလို့ရသလို အမျိုးမျိုးလည်း ရေးကြပါတယ်။ XHTML မှာ Element တိုင်းအတွက် Close Tag ပါဝင်ရမယ်လို့ သတ်မှတ်ပါတယ်။ Close Tag မရှိတဲ့ Empty Element တွေကိုလည်း Self-Closing Element အဖြစ် ဖော်ပြ သတ်မှတ်ရမယ်လို့ သတ်မှတ်ပါတယ် (ဥပမာ - <br /> <img />)။ Attribute Value တိုင်းကိုလည်း Quote အတွင်းထဲမှာ ထည့်သွင်းရမယ်လို့ သတ်မှတ်ပါတယ် (HTML: <img src=pic.jpg> vs. XHTML: <img src="pic.jpg" />)။ စသဖြင့် အခြားသတ်မှတ်ချက် တွေလည်း ရှိပါသေးတယ်။ လိုရင်းကတော့ XHTML ဟာ HTML မှာ မှားခဲ့တဲ့ အမှားတွေကို ပြုပြင်ဖယ်ထုပ်ပြီး Semantic Web Document တွေ တည်ဆောက်ဖို့ အတွက် ရည်ရွယ်ဖန်တီးလိုက်တဲ့ Markup Language တစ်မျိုးပဲ ဖြစ်ပါတယ်။

WaSP ရဲ့ ဦးဆောင်မှုနဲ့ Web Standard လှုပ်ရှားမှုတွေ ပြုလုပ်နေစဉ်မှာ Web Developer တွေဟာ XHTML ကိုသာ Web Document တွေတည်ဆောက်ဖို့ အသုံးပြုခဲ့ကြပြီး အခြား Developer တွေကိုလည်း XHTML ကိုသာ အသုံးပြုဖို့ အားပေးမှုတွေ ပြုလုပ်ခဲ့ကြပါတယ်။

WaSP လှုပ်ရှားမှုနဲ့ XHTML ဟာ Semantic Web Document နဲ့ Browser တွေရဲ့ Web Standard Support ကို များစွာ သက်ရောက်မှု ရှိခဲ့တာပဲ ဖြစ်ပါတယ်။ တွင်တွင်ကျယ်ကျယ် အသုံးပြုခဲ့တဲ့ XHTML ဟာ Version 1.1 ဖြစ်ပြီး Version 2 တော့ ထပ်မံထွက်ပေါ် လာခဲ့ခြင်း မရှိပါဘူး။ ဒီစာရေးနေချိန်ထိ W3C ကြေငြာချက်များအရ ထပ်မံထွက်ပေါ်ဖို့လဲ မရှိတော့ပါဘူး။ XHTML 2.0 အစား HTML5 ကိုသာ အနာဂါတ် Web Document များအတွက် တစ်ခုတည်းသော Markup Language အဖြစ် အသုံးပြုကြရ တော့မှာပဲ ဖြစ်ပါတယ်။

HTML5 မှာ ရည်ရွယ်ချက်ကောင်းတွေ ရှိခဲ့တဲ့ XHTML သတ်မှတ်ချက်တွေကို ပေါင်းစပ် ထည့်သွင်းထားပြီး မူလ HTML 4.01 အသုံးပြုထားတဲ့ Website တွေအတွက်လည်း Backward Compatible ဖြစ်အောင် စီမံထားပါတယ်။ HTML5 အကြောင်း ပြောစရာများစွာ ရှိတဲ့အတွက် ဒီနေရာမှာ အကျယ်မချဲ့တော့ပါဘူး။ အခန်း (၁၄) HTML5 ကျမှသာ သီးခြားထပ်မံ ဆွေးနွေးမှာ ဖြစ်ပါတယ်။ အခုတော့ ကျွန်တော်တို့ သိဖို့လိုတဲ့ HTML Element တစ်ချို့ကို ဆက်လက်လေ့လာ ချင်ပါတယ်။

HTML Skeleton

HTML Document တစ်ခု ဖြစ်မြောက်စေဖို့ အတွက် အနည်းဆုံး လိုအပ်ချက်ကတော့ Document Type Declaration ပဲဖြစ်ပါတယ်။ ဒီတစ်ခုပါရင် HTML Document လို့ ဆိုနိုင်ပါပြီ။ ဒါပေမယ့်လည်း လက်တွေ့မှာ ပြီးပြည့်စုံတဲ့ HTML Document တစ်ခုဟာ အနည်းဆုံးတော့ အောက်ဖော်ပြပါ Element တွေ ပါဝင်သင့်ပါတယ်။ 

  <!doctype html>
  <html>
    <head>
      <title>Document Title</title>
    </head>
    <body>
      <!-- Document Content -->
    </body>
  </html>

ပထမဆုံးလိုင်း <!doctype html> ဆိုတာက ဒီ Document ဟာ HTML Document တစ်ခုဖြစ် ကြောင်း ကြေငြာလိုက်တဲ့ Document Type Declaration ပဲ ဖြစ်ပါတယ်။ ကျန် HTML Elements အားလုံးကတော့ <html> Element အတွင်းမှာ ဆက်လက်ရေး သားရမှာပဲ ဖြစ်ပါတယ်။ <html> Element အတွင်းမှာ အဓိက Element နှစ်ခုသာ ရှိရပါတယ်။ <head> Element နဲ့ <body> Element တို့ပဲဖြစ်ပါတယ်။

<head> Element ဟာ လက်ရှိ Document နဲ့ ဆက်စပ် အချက်အလက်တွေ ကြေငြာဖို့ အသုံးပြုရ ပါတယ်။ သူ့ထဲမှာ ပုံမှန်အားဖြင့် <title> Element တစ်ခု မဖြစ်မနေ ပါဝင်သင့်ပါတယ်။ <title> Element အတွင်းမှာ Document Title အနေနဲ့ အသုံးပြုချင်တဲ့ ခေါင်းစဉ်ကို ထည့်သွင်း ပေးရမှာ ဖြစ်ပါတယ်။ <head> Element အတွင်းမှာ ထည့်သွင်းလေ့ ရှိတဲ့ အခြား Element တွေကတော့ <meta> <link> <script> <style> တို့ပဲ ဖြစ်ပါတယ်။

<body> Element အတွင်းမှာတော့ Web Browser မှာ ဖော်ပြစေလိုတဲ့ အချက်အလက် တွေ ထည့်သွင်းရေးသား ရမှာပဲ ဖြစ်ပါတယ်။ နမူနာမှာ အသုံးပြုထားတဲ့ <!-- --> Element ကတော့ မှတ်ချက်တွေ ထည့်သွင်းဖို့ အသုံးပြု နိုင်တဲ့ Comment Element ပဲ ဖြစ်ပါတယ်။ Comment Element ထဲမှာ ရေးသားထားတဲ့ အချက်အလက် တွေဟာ Document တည်ဆောက်သူရဲ့ မှတ်ချက်များသာ ဖြစ်ပြီး ထည့်သွင်းဖော်ပြမှာ မဟုတ်တဲ့ အချက်အလက်များပဲ ဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ HTML Element တွေစုစည်း ရေးသားထားတဲ့ Web Document တွေကို File System မှာ သိမ်းဆည်း တဲ့အခါ html Extension (ဥပမာ - home.html) နဲ့ သိမ်းဆည်း ရပါတယ်။ Document တစ်ခုဟာ Web Document ဖြစ်ကြောင်း ကွန်ပျူတာကို အသိပေးဖို့ Extension က အဓိကတော့ မကျပါဘူး။ Content-Type လို့ခေါ်တဲ့ File Attribute ကသာ အဓိက ဖြစ်ပါတယ်။ ဒါပေမယ့် ယေဘုယျ အားဖြင့် html Extension နဲ့ Document ကို သိမ်းဆည်းပေး လိုက်ရင် File Attribute တွေ သီးခြား သတ်မှတ်နေစရာ မလိုတော့ပဲ ကွန်ပျူတာက Web Document တစ်ခုမှန်း အလိုလိုနားလည် စေနိုင်မှာ ဖြစ်ပါတယ်။ ဒါကိုထည့်သွင်း ပြောရတာက Web Document တိုင်း html Extension ရှိရမယ်လို့ ပုံသေမယူဆစေ ချင်လို့ ဖြစ်ပါတယ်။ ယေဘုယျအားဖြင့် မှန်ပေမယ့် html Extension မပေးထားတဲ့ Web Document တွေလည်း ရှိနိုင်ပါတယ်။

Basic Elements

လက်ရှိအဆင့်မှာ တစ်ခြား ရှုပ်ထွေးတဲ့ လုပ်ဆောင်ချက် တွေကို ခဏမေ့ထားပြီး HTML Document တစ်ခုကို ကျွန်တော်တို့ စာရွက်တွေနဲ့ တွေ့မြင်နေကြ Text Document တွေနဲ့ နှိုင်းယှဉ် ကြည့်ရအောင်ပါ။ Text Document တွေမှာ ပုံမှန်အားဖြင့် ခေါင်းစီးတွေ ပါမယ်၊ စာပိုဒ်တွေပါမယ်၊ စာရင်းတွေပါမယ်၊ ဇယားတွေ ပါမယ်၊ ရေးသားဖြည့် သွင်းနိုင်တဲ့ Form တွေ ပါမှာဖြစ်ပါတယ်။ ဖြည့်စွက်ပါဝင် နိုင်တာတွေကတော့ ပုံတွေနဲ့ Hyperlink ခေါ် အခြား Document တွေကို ချိတ်ဆက်နိုင်တဲ့ Link တွေပဲ ဖြစ်ပါတယ်။ ဒါတွေကို HTML Document တစ်ခုမှာ ဘယ်လို Element တွေသုံးပြီး ထည့်သွင်းရမလဲ ကြည့်ကြပါမယ်။

ခေါင်းစီးဆိုတဲ့ နေရာမှာ အဆင့်လိုက် ခေါင်းစီးအမျိုးမျိုး ရှိနိုင်ပါတယ်။ Document တစ်ခုမှာ Main Heading လို့ခေါ်တဲ့ အဓိကခေါင်းစီး ရှိနိုင်သလို သက်ဆိုင်ရာ ကဏ္ဍတစ်ခုစီမှာ ထပ်ဆင့် ပေးထားတဲ့ Sub Heading ခေါ် ခေါင်းစဉ်ခွဲတွေ ရှိနိုင်ပါတယ်။ HTML Document တစ်ခုမှာ ခေါင်းစီးနဲ့ ခေါင်းစဉ်ခွဲ (၆) ဆင့် ထည့်လို့ ရပါတယ်။ Main Heading အတွက် <h1> Element ကို သုံးရပါတယ်။ ပထမအဆင့် ခေါင်းစဉ်ခွဲအတွက် <h2> Element ကို သုံးရပါတယ်။ ခေါင်းစဉ်ခွဲ နောက်တစ်ဆင့် ကိုတော့ <h3> Element ကို အသုံးပြုရပြီး <h4> <h5> <h6> စသဖြင့် စုစုပေါင်း (၆) ဆင့် ခွဲခြား အသုံးပြု နိုင်ပါတယ်။ ကိုယ်တည် ဆောက်နေတဲ့ Document သဘာဝနဲ့ ကိုက်ညီအောင် သက်ဆိုင်ရာ ခေါင်းစီး၊ ခေါင်းစဉ်ခွဲ တို့ကို ရွေးချယ် အသုံးပြုရမှာပဲ ဖြစ်ပါတယ်။

စာပိုဒ်တွေ ထည့်သွင်းဖော်ပြဖို့ အတွက် <p> Element ကို အသုံးပြုရ ပါတယ်။ စာပိုဒ်တစ်ခုစီ အတွက် <p> Element တစ်ခုစီ ခွဲခြားအသုံးပြုဖို့ လိုအပ်ပါတယ်။ ခေါင်းစဉ်တွေနဲ့ စာပိုဒ်တွေပါဝင်တဲ့ HTML Document တစ်ခုဟာ အခုလို ဖြစ်နိုင်ပါတယ်။ 

  <!doctype html>
  <html>
   <head>
   <meta charset="UTF-8">
   <title>ညိုမြ - စာရေးဆရာ</title>
   </head>
   <body>
   <h1>စာရေးဆရာကြီး ဦးညိုမြ</h1>
   <img src="nyomya.gif" alt="ဦးညိုမြပုံ">
   <p>
  မုံရွာခရိုင် ချောင်းဦးမြို့နယ် အမြင့်မြို့ သောတာပန် ရွာ၌ အဖ မင်းတိုင်ပင် အမတ် တီပီအက်စ်ဘွဲ့ရ အမိန့်တော်ရ
  ရှေ့နေ ဦးသာဇံ၊ အမိ ဒေါ်အံ့ (ဒေါ်ရွှေအံ့) တို့က ၁၉၁၄ ခုနှစ် ဧပြီလ ၁ဝ ရက် သောကြာနေ့တွင် မွေးဖွားသည်။
  အမည်ရင်း ဦးသိန်းတင် ဖြစ်သော်လည်း ကလောင် အမည် ညိုမြ သည်ပင် အမည်ရင်း ကဲ့သို့ တွင်သည်။
   </p>
   <p>
  ရွှေကူရွာ ဆရာလှိုင်၏ မူလတန်း ကျောင်း၊ ကြက်သွန်ဈေးရွာ ဆရာတော် ဦးဉာဏ ကျောင်းတို့တွင် စတင်
  ပညာ သင်ခဲ့၏။ ၁၉၃၃ ခုနှစ်တွင် ရန်ကုန် တက္ကသိုလ်၌ ဆက်လက် ပညာ သင်သည်။ ၁၉၃၈ ခုနှစ်တွင်
  ဝိဇ္ဇာ (အင်္ဂလိပ်စာ ဂုဏ်ထူးတန်း) ဘွဲ့ ရခဲ့သည်။ ၁၉၄၃ ခုနှစ်တွင် မဟာ သိပ္ပံ (သတင်းစာ ပညာ) ဘွဲ့
  ရခဲ့သည်။
   </p>
   <h2>ဘဝနိဂုံး</h2>
   <p>
  ၁၉၈၅ ခုနှစ် စက်တင်ဘာလ ၂၉ ရက်နေ့ ညနေ ၆ နာရီ ၃ဝ မိနစ်တွင် ရန်ကုန် ဆေးရုံကြီး၌ ကွယ်လွန် ခဲ့သည်။
   </p>
   </body>
  </html>

နမူနာကို လေ့လာကြည့်မယ် ဆိုရင် <head> Element အတွင်းမှာ <meta> Element တစ်ခု ဖြည့်စွက်ပါဝင် လာတာကို တွေ့ရပါမယ်။ ဒီ Element က လက်ရှိ Document ထဲမှာ English မဟုတ်တဲ့ အချက်အလက်တွေ ပါဝင်မယ်လို့ ကြေငြာလိုက်တာပဲ ဖြစ်ပါတယ်။ အမှန်တော့ အခုနောက်ပိုင်း Browser တွေက ဒီလိုကြေငြာ မပေးလဲ English မဟုတ်တဲ့ အချက်အလက်တွေ ပါဝင်လာရင် အလိုလိုသိပြီး အဆင်ပြေအောင် ဖော်ပြပေးကြ လေ့ရှိပါတယ်။ ဒါပေမယ့် ကျွန်တော်တို့ ဘက်က သတ်မှတ် အသိပေးရမယ့်အတိုင်း ထည့်သွင်းပေး လိုက်တာ ဖြစ်ပါတယ်။

<body> Element အတွင်းမှာ အဓိကခေါင်းစဉ် အဖြစ် အသုံးချလိုတဲ့ <h1> Element တစ်ခုပါဝင်ပြီး ခေါင်းစဉ်ခွဲ အဖြစ် ဖော်ပြလိုတဲ့ <h2> Element တစ်ခုတို့ ပါဝင်တာ ကိုလည်း သတိပြုမိမှာပါ။ ထည့်သွင်းလိုတဲ့ စာပိုဒ်ကတော့ (၃) ပိုဒ်ဖြစ်တဲ့အတွက် <p> Element သုံးခု အသုံးပြုထားတာကို တွေ့ရ မှာပါ။

ထူးခြားချက် အနေနဲ့ <img> Element တစ်ခုကိုလည်း အသုံးပြုထား တာကို တွေ့ရနိုင်ပါတယ်။ <img> Element ကို ပုံတွေ ထည့်သွင်းလိုတဲ့အခါ အသုံးပြုရပါတယ်။ Empty Element တစ်ခုဖြစ်ပြီး သူ့မှာ Close Tag နဲ့ Tag Content မပါဝင်ပါဘူး။ ဒါပေမယ့် တွဲဖက်အသုံးပြုရတဲ့ Attribute နှစ်ခု ရှိပါတယ်။ src Attribute က ပုံတည်ရှိတဲ့ နေရာကို ညွန်ပြပေးဖို့ အသုံးပြုရပါတယ်။ alt Attribute ကိုတော့ ပုံမဖော်ပြ နိုင်တဲ့ အခြေအနေတွေမှာ ဖော်ပြစေလိုတဲ့ 'စာ' ထည့်သွင်ပေးဖို့ သုံးရပါတယ်။ ပုံမဖော်ပြနိုင်တဲ့ အခြေအနေ ဆိုတာ src မှာပေးထားတဲ့ နေရာလွဲမှားနေတာပဲဖြစ်ဖြစ်၊ အင်တာနက် အဆက်အသွယ် အခက်အခဲကြောင့် မဖော်ပြနိုင်တာ ပဲဖြစ်ဖြစ် အခြေအနေ တစ်ရပ်ရပ်ကြောင့် ပုံမဖော်ပြ နိုင်တဲ့ အခြေအနေကို ဆိုလိုတာပါ။ ရေးသားထားတဲ့ နမူနာကို Web Browser နဲ့ ဖွင့်လှစ်ကြည့်ရှု့ မယ်ဆိုရင် အခုလို တွေ့မြင်ရမှာပဲ ဖြစ်ပါတယ်။

<h1> Element အသုံးပြုထားတဲ့ အဓိက ခေါင်းစီးကို စာလုံးခပ်ကြီးကြီးနဲ့ တွေ့ရမှာဖြစ်ပြီးတော့ <h2> Element အသုံးပြုထားတဲ့ ခေါင်းစဉ်ခွဲ ကတော့ အနည်းငယ် သေးတာကို တွေ့ရမှာ ဖြစ်ပါတယ်။ ဒါပေမယ့် ဒီနေရာမှာ ထပ်မံသတိပေး ချင်တာကတော့ ကျွန်တော်တို့ဟာ Document Structure တည်ဆောက်နေခြင်း ဖြစ်ပါတယ်။ Browser က အဆင်ပြေအောင် ဖော်ပြပေးနေပေမယ့် ကျွန်တော်တို့က စာလုံးကြီးချင်လို့ <h1> Element သုံးတာ မဟုတ်ပါဘူး။ အဓိကခေါင်းစီးမို့ <h1> သုံးတာပါ။ အနည်းငယ်ပဲ ကြီးချင်လို့ <h2> သုံးတာ မဟုတ်ပါဘူး၊ ခေါင်းစဉ်ခွဲမို့ <h2> သုံးတာ ဖြစ်ပါတယ်။

လက်တွေ့မှာ Browser က အလိုအလျှောက် ဖော်ပြပေးနေတဲ့ Size က အသုံးမဝင်ပါဘူး။ ကျွန်တော်တို့ လိုချင်တဲ့ Size နဲ့ Style အတိအကျ ရအောင် CSS နဲ့ မဖြစ်မနေ ပြင်ဆင်ယူရ ဦးမှာပဲ ဖြစ်ပါတယ်။ ဒါကြောင့် HTML ရေးသားချိန်မှာ "ဘယ်လိုပေါ်မလဲ" ဆိုတာကို လုံးဝမစဉ်းစားသင့်ပါဘူး။ ဘယ်လိုအချက်အလက်လဲ ဆိုတာကိုသာ စဉ်းစားပြီး သင့်တော်တဲ့ Element နဲ့ အသုံးပြုပေးရမှာပဲ ဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ HTML Document ကို ရေးသားတဲ့ အခါမှာ ထည့်သွင်းအသုံးပြုတဲ့ White Space တွေကို လက်တွေ့ အလုပ်လုပ်တဲ့အခါ ထည့်သွင်းစဉ်းစားမှာ မဟုတ်ပါဘူး။ White space ဆိုတာ "Space" "Tab" နဲ့ "New Line" တို့အတွက် အသုံးပြုထားတဲ့ နေရာလွတ် တွေကို ပြောတာဖြစ်ပါတယ်။ HTML Document ကို ကွန်ပျူတာက Process လုပ်တဲ့အခါမှာပဲ ဖြစ်ဖြစ်၊ Web Browser က ဖော်ပြတဲ့နေရာ မှာပဲဖြစ်ဖြစ် အဲ့ဒီ White Space တွေအစား Single Space နဲ့သာ အစားထိုးပြီး အလုပ်လုပ်သွားမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် ကျွန်တော်တို့ Document ထဲမှာ White Space တွေကို နှစ်သက်သလို ထည့်သွင်း ရေးသား နိုင်ပါတယ်။

Hyperlinks and Anchors

ရှေ့အခန်းမှာ Web Server တစ်ခုမှာ သိမ်းဆည်းထားတဲ့ Document နဲ့ Resource တိုင်းအတွက် ကိုယ်ပိုင် လိပ်စာ URL တစ်ခုစီ ရှိကြတယ်လို့ ဖော်ပြခဲ့ပါတယ်။ HTML Document တွေရဲ့ အဓိကထူးခြားချက်၊ အားသာချက် ကတော့ အဲ့ဒီ URL လိပ်စာတွေကိုအသုံးပြုပြီး Document တစ်ခုကနေ အခြား Document တွေကို Hyperlink တွေနဲ့ ချိတ်ဆက်နိုင်ခြင်းပဲ ဖြစ်ပါတယ်။

အဲ့ဒီအပြင် Document တစ်ခုရဲ့အတွင်းထဲက နေရာ (Region) တစ်ခုကနေ အခြား နေရာတစ်ခု ကိုလည်း ချိတ်ဆက် နိုင်ပါသေးတယ်။ ပြင်ပ Document တစ်ခုနဲ့ ချိတ်ဆက်ထားတဲ့ Link ကို Hyperlink ခေါ်ပြီး လက်ရှိ Document ထဲကပဲ နေရာတစ်ခုကို ချိတ်ဆက်ထားတဲ့ Link ကိုတော့ Anchor လို့ခေါ်လေ့ရှိပါတယ်။ တနည်းပြောရမယ် ဆိုရင် Link တွေမှာ ပြင်ပ (External) Resource တစ်ခုကို ရည်ညွန်း ချိတ်ဆက်နိုင်တဲ့ External Link နဲ့ လက်ရှိ Document အတွင်းနေရာ (Internal) တစ်ခုကို ရည်ညွန်းချိတ်ဆက်နိုင်တဲ့ Internal Link ဆိုပြီး နှစ်မျိုးရှိတဲ့သဘော ဖြစ်ပါတယ်။

External Link ထည့်သွင်းချင်ရင် <a> Element ကို အသုံးပြုရပြီး Internal Link ထည့်သွင်းချင်ရင်လည်း <a> Element ကိုပဲ အသုံးပြုရပါတယ်။ <a> Element တိုင်းမှာ href ဆိုတဲ့ လိပ်စာ URL ထည့်သွင်းဖို့ အတွက် Attribute တစ်ခု မဖြစ်မနေ ပါဝင်ရပါတယ်။ Google Search ကို ချိတ်ဆက်ထားတဲ့ External Link တစ်ခုကို အခုလို ထည့်သွင်းနိုင်ပါတယ်။ 

  <a href="http://www.google.com/" title="Google Search">Search</a>

ပေးထားတဲ့ နမူနာမှာ <a> Element အတွက် http://www.google.com/ ဆိုတဲ့ လိပ်စာ URL ကို href Attribute နဲ့ ထည့်သွင်းပေးထားပါတယ်။ ဒီ Link ကိုနှိပ်လိုက်ရင် http://www.google.com ဆိုတဲ့လိပ်စာကို သွားရမယ်လို့ ရည်ညွန်းထားခြင်းလည်း ဖြစ်ပါတယ်။

title Attribute ထည့်သွင်းပေးထားတာကိုလည်း နမူနာမှာတွေ့ရမှာပါ။ ဒီ Attribute က မထည့်လည်း ရပေမယ့် <a> Element တိုင်းမှာ အမြဲထည့်သွင်းပေးသင့်တဲ့ Attribute တစ်ခုဖြစ်ပါတယ်။ title Attribute က လက်ရှိ Element ရဲ့ အဓိပ္ပါယ်အကျဉ်းကို အသုံးပြုသူအတွက်ရော Search Engine Spider တွေလို ကွန်ပျူတာပရိုဂရမ် တွေအတွက်ပါ ရှင်းပြထားတဲ့သဘောဖြစ်ပါတယ်။ <a> Element တင်မကပဲ အခြား မည်သည့် HTML Element နဲ့မဆို တွဲဖက်အသုံးပြုလို့ရပါတယ်။

မှတ်ချက် ။ ။ HTML Element တစ်ခုမှာ title Attribute ရှိမယ်ဆိုရင် Web Browser မှာ ကြည့်ရှု့ နေစဉ် Mouse နဲ့ အဲ့ဒီ Element ကို ထောက်လိုက်မယ် ဆိုရင် title Attribute မှာ ထည့်သွင်း ပေးထားတဲ့ အချက်အလက်ကို Tool Tip အနေနဲ့ ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။

Link တစ်ခုကို နှိပ်လိုက်တဲ့ အခါ URL မှာ ရည်ညွန်းထားတဲ့ Document ကို သီးခြား Browser Window နဲ့ ဖော်ပြစေချင် ရင် သုံးတဲ့ Attribute တစ်ခုရှိပါတယ် target="_blank" ဆိုတဲ့ Attribute ပဲဖြစ်ပါတယ်။ ရေးသားပုံနမူနာက အခုလို ဖြစ်မှာ ဖြစ်ပါတယ်။ 

  <a href="http://www.google.com/" target="_blank">Search</a>

ဒီ Attribute ဟာ တစ်ခါတစ်ရံမှာ အသုံးဝင်နိုင်တဲ့အတွက် ထည့်သွင်းဖော်ပြပေးတာဖြစ်ပါတယ်။ ဒါပေမယ့် အကြောင်း နှစ်ချက်ကြောင့် အသုံးမပြုသင့်ပါဘူး။ HTML Document တစ်ခုဟာ Data Structure ပဲ ဖြစ်သင့်တာ ဖြစ်ပါတယ်။ ဘယ်လို လုပ်ဆောင်မှု ပုံစံမျိုးနဲ့ အလုပ်လုပ်သင့်သလဲဆိုတာကို HTML နဲ့ မသတ် မှတ်သင့်ပါဘူး။ target="_blank" Attribute က ဒီ Link ကို နှိပ်လိုက်ရင် URL အညွန်းမှာ ဖော်ပြထားတဲ့ Document ကို နောက်ထပ် Browser Window အသစ်တစ်ခုနဲ့ ဖွင့်ပေးလိုက်ပါလို့ "လုပ်ဆောင်ရမယ့်နည်းလမ်း" ကို သတ်မှတ်ထား တာ ဖြစ်နေပါတယ်။ ဒီကိစ္စမျိုးကို Javascript နဲ့ သီးခြားဆောင်ရွက်သင့်ပြီး HTML Data Structure ထဲမှာ ထည့်သွင်း မသတ်မှတ်သင့်ပါဘူး။

နောက်တစ်ချက်ကတော့ Usability ကြောင့်ဖြစ်ပါတယ်။ Web Browser တိုင်းမှာ Link ကို Right Click နှိပ်လိုက်ရင် "Open Link in New Window" ဆိုတဲ့ Option ပါဝင်လေ့ ရှိပါတယ်။ အသုံးပြုသူက ဆန္ဒရှိ ရင် Link ကို သီးခြား Window တစ်ခုနဲ့ဖော်ပြဖို့ သူကိုယ်တိုင် ရွေးချယ်နိုင်မှာ ဖြစ်ပါတယ်။ ကျွန်တော်တို့ ထည့်ပေးဖို့ မလိုပါဘူး။ ထည့်ပေးလိုက်တော့မှ အသုံးပြုသူအတွက် ပြဿနာဖြစ်နေတက်တာပါ။ အသုံးပြု သူက နှိပ်လိုက်ရင် သီးခြား Window နဲ့ပဲ ဖော်ပြတော်မှာပါ။ လက်ရှိ Window ထဲမှာပဲ ဖော်ပြစေချင်ပါတယ် လို့ရွေးစရာ Option မရှိပါဘူး။ ကျွန်တော်တို့က အသုံးပြုသူကို "သီးခြား Window နဲ့ ကြည့်ကိုကြည့်ရမယ်" လို့ ဇွတ်အတင်း Force လုပ်လိုက်သလို ဖြစ်သွားပါတယ်။ ဒီ Usability ရှု့ဒေါင့်အရလည်း target="_blank" Attribute ကို ရှောင်သင့်တာ ဖြစ်ပါတယ်။ ဒီနေရာမှာ ထည့်သွင်းဖော်ပြတာကတော့ မဖြစ်မနေလိုအပ်တဲ့ တစ်ခါတစ်ရံမှာ အသုံးဝင်တက်လို့သာ ထည့်သွင်းဖော်ပြပေးထားတာ ဖြစ်ပါတယ်။

Internal Link (Anchor) တစ်ခု ထည့်သွင်းဖို့အတွက် ကျွန်တော်တို့ ဖြည့်စွက်နားလည်ရမှာကတော့ Document တစ်ခုအတွင်းမှာ ပါဝင်တဲ့ HTML Element တိုင်းကို ကိုယ်ပိုင် ID သတ်မှတ်ပေးထားလို့ ရတယ်ဆိုတဲ့ အချက်ပဲ ဖြစ်ပါတယ်။ ဥပမာ - 

  <h2 id="ch2">Chapter Two</h2>

နမူနာမှာ <h2> Element ကို id Attribute အသုံးပြုပြီး ကိုယ်ပိုင် ID တစ်ခု သတ်မှတ်ပေးထားလိုက် ပါတယ်။ လက်ရှိ Document မှာ တစ်ခြား <h2> Element တွေလည်း ရှိနိုင်ပါသေးတယ်။ ဒါပေမယ့် ဒီ <h2> ကတော့ သူများနဲ့ မတူပဲ ကိုယ်ပိုင် ID တစ်ခု ရှိသွားပြီဖြစ်ပါတယ်။

<a> Element ကို အသုံးပြုပြီး လက်ရှိ Document ထဲကပဲ နေရာတစ်ခုကို အတိအကျညွန်းဆိုချိတ်ဆက်လိုရင် အဲ့ဒီ ID ကို ညွန်းပြီး ချိတ်ဆက်ရတာဖြစ်ပါတယ်။ ဥပမာ - 

  <a href="#ch2">Chapter Two</a>

ဒီ <a> Element ရဲ့ href Attribute မှာ Document တစ်ခုကို ရည်ညွန်းထားတာမဟုတ်ပဲ လက်ရှိ Document ထဲကပဲ ch2 ဆိုတဲ့ ID ရှိတဲ့ Element ကို ရည်ညွန်းလိုက်တာပဲ ဖြစ်ပါတယ်။ #ch2 လို့ ရှေ့မှာ # Sign လေး ထည့်သွင်းပေးရတာကို သတိပြုပါ။

External Link တွေမှာလည်း ပြင်ပ Document တစ်ခုကိုညွန်းဆိုယုံမက အဲ့ဒီ ပြင်ပ Document ထဲက Element တစ်ခုကို တိုက်ရိုက်ညွန်းဆိုလိုရင်လည်း ဒီနည်းအတိုင်းပဲ အသုံးပြုနိုင်ပါတယ်။ ဥပမာ - 

  <a href="http://example.com/toc.html#ch2">Chapter Two</a>

နမူနာမှာ example.com/toc.html ကို ညွန်းဆိုယုံမက အဲ့ဒီ Document ထဲက #ch2 ဆိုတဲ့ Element ထိ အတိအကျ ညွန်းဆိုထည့်သွင်းပေးလိုက်တာပဲ ဖြစ်ပါတယ်။

Lists

HTML Document တစ်ခုမှာ စာရင်းအနေနဲ့ ဖော်ပြတဲ့ List တွေထည့်သွင်းဖို့အတွက် Element နှစ်ခု ရှိပါတယ်။ <ul> နဲ့ <ol> ဖြစ်ပါတယ်။ <ul> ဆိုတာ Unordered List ဆိုတဲ့အဓိပ္ပါယ် ဖြစ်ပြီး စာရင်းကို Bullet လေးတွေနဲ့ ဖော်ပြပေးမှာဖြစ်ပါတယ်။ <ol> ကတော့ Ordered List ဆိုတဲ့အဓိပ္ပါယ် ဖြစ်ပြီး စာရင်းကို နံပါတ်စဉ်နဲ့ ဖော်ပြပေးမှာပဲ ဖြစ်ပါတယ်။

ဒီနေရာမှာလဲ ကိုယ်ထည့်သွင်းတဲ့ List က အစီအစဉ်ကျပြီးသား စာရင်းဆိုရင် <ol> ကို အသုံးပြုသင့်ပြီး အစီအစဉ် ကျတဲ့စာရင်းမဟုတ်ရင် <ul> ကို သုံးသင့်တာဖြစ်ပါတယ်။ အချက်အလက်အမျိုးအစားနဲ့ ကိုက်ညီအောင် အသုံးပြု ရတာဖြစ်ပြီး ဖော်ပြပုံကိုကြည့်ပြီး ရွေးချယ်အသုံးပြုရတာ မဟုတ်ပါဘူး။ Bullet နဲ့ ဖော်ပြတယ်၊ နံပါတ်စဉ်နဲ့ဖော်ပြ တယ်ဆိုတဲ့ အပြင်အဆင်က နောက်မှလိုသလို ပြောင်းလဲယူလို့ရပါတယ်။

<ul> <ol> Element တွေအတွင်းထဲမှာ ပါဝင်ရမယ့် Item စာရင်းကိုတော့ List Item Element ဖြစ်တဲ့ <li> Element အသုံးပြုထည့်သွင်းပေးရမှာပဲ ဖြစ်ပါတယ်။

Ordered List ရေးသားပုံနမူနာ 

  <ol>
   <li>Chapter One</li>
   <li>Chapter Two</li>
   <li>Chapter Three</li>
   <li>Chapter Four</li>
  </ol>

ရလဒ်


  1. Chapter One
  2. Chapter Two
  3. Chapter Three
  4. Chapter Four

Unordered List ရေးသားပုံနမူနာ 

  <ul>
   <li>Yangon</li>
   <li>Mandalay</li>
   <li>Naypyidaw</li>
   <li>Monywa</li>
  </ul>

ရလဒ်


  • Yangon
  • Mandalay
  • Naypyidaw
  • Monywa

<ol> Element ကို အသုံးပြုတဲ့ List တစ်ခုမှာ စမှတ်ကို သတ်မှတ်ပေးချင်ရင် start Attribute အသုံးပြုနိုင်ပါတယ်။ ဥပမာ - <ol start="5"> ဆိုရင် နံပါတ်စဉ်ဖော်ပြတဲ့အခါ 1 ကမစပဲ 5, 6, 7 စသဖြင့် ဖော်ပြပေးသွားမှာ ဖြစ်ပါတယ်။

တစ်ခါတစ်ရံ စာရင်းက အစီအစဉ်တကျတော့ အစီအစဉ်တကျပဲ ဒါပေမယ့် အစီအစဉ်က ပြောင်းပြန် (ကြီးစဉ်ငယ်လိုက် နံပါတ်စဉ်နဲ့) စီစဉ်ချင်တာမျိုးလည်း ရှိတက်ပါတယ်။ အဲ့ဒီလိုဆိုရင်တော့ reversed Attribute ကို အသုံးပြုနိုင် ပါတယ်။ ဥပမာ - <ol reversed>

မှတ်ချက် ။ ။ တစ်ချို့ Element Attribute တွေမှာ ရှေ့က Attribute Name ပဲပါပြီး နောက်က Attribute Value မပါတဲ့ Attribute တွေရှိပါတယ်။ အဲ့ဒီလို Attribute တွေကို တစ်ခြား Attribute တွေရေးသားပုံနဲ့ တစ်ညီတည်းဖြစ်စေချင်ရင Attribute Name ကိုပဲ Value အဖြစ် အသုံးပြုရေးသားနိုင်ပါတယ်၊ ဥပမာ - <ol reversed="reversed">. XHTML ခေတ်က ဒီလိုအပြည့်အစုံရေးတာကို အားပေးခဲ့ကြပေမယ့် အခုနောက်ပိုင်းမှာတော့ ရေးသားရတိုတဲ့ Value မပါပဲ Attribute Name သက်သက်ရေးသားတဲ့ ရေးနည်းကို အားပေး လာကြပြန်ပါတယ်။ နှစ်သက်သလို ရေးသားနိုင်ပါတယ်။

မှတ်ချက် ။ ။ reversed Attribute ဟာ HTML5 ရောက်မှ ပါလာတဲ့ Attribute ဖြစ်လို့ အသုံးပြုမယ်ဆိုရင် HTML5 Support မလုပ်တဲ့ Browser အဟောင်းတွေမှာ အလုပ်လုပ်မှာ မဟုတ်ပါဘူး။

Tables

ဇယားတွေထည့်သွင်းဖို့အတွက် <table> Element ကို အသုံးပြုနိုင်ပါတယ်။ ဇယားတစ်ခုဟာ Rows တွေ Columns တွေနဲ့ ဖွဲ့စည်းထားတာမို့ Table တစ်ခုထည့်သွင်းမယ်ဆိုရင် Rows တွေ Columns တွေပါ သတ်မှတ် ထည့်သွင်းပေးရမှာ ဖြစ်ပါတယ်။ Rows တွေထည့်သွင်းဖို့အတွက် Table Row <tr> Attribute သုံးရမှာဖြစ်ပြီး Rows တစ်ခုစီမှာ ပါဝင်တဲ့ Columns တွေကို Table Data <td> Attribute နဲ့ သတ်မှတ် ပေးရမှာဖြစ်ပါတယ်။

ရေးသားပုံနမူနာ 

  <table>
   <tr>
     <td>484</td>
     <td>MX</td>
     <td>MEX</td>
     <td>Mexico</td>
   </tr>
   <tr>
     <td>504</td>
     <td>MA</td>
     <td>MAR</td>
     <td>Morocco</td>
   </tr>
   <tr>
     <td>104</td>
     <td>MM</td>
     <td>MMR</td>
     <td>Myanmar</td>
   </tr>
   <tr>
     <td>524</td>
     <td>NP</td>
     <td>NPL</td>
     <td>Nepal</td>
   </tr>
  </table>

ရလဒ်

484

MX

MEX

Mexico

504

MA

MAR

Morocco

104

MM

MMR

Myanmar

524

NP

NPL

Nepal


Table အတွက် ခေါင်းစီးထည့်သွင်းချင်ရင်တော့ ခေါင်းစီးအဖြစ် ဖော်ပြလိုတဲ့ Column မှာ <td> Element အစား <th> Element နဲ့ ပြောင်းလဲအသုံးပြုပေးရမှာဖြစ်ပါတယ်။

ရေးသားပုံနမူနာ 

  <table>
   <tr>
     <th>Code</th>
     <th>ISO</th>
     <th>ISO3</th>
     <th>Name</th>
   </tr>
   <tr>
     <td>504</td>
     <td>MA</td>
     <td>MAR</td>
     <td>Morocco</td>
   </tr>
   <tr>
     <td>104</td>
     <td>MM</td>
     <td>MMR</td>
     <td>Myanmar</td>
   </tr>
  </table>

ရလဒ်

Code

ISO

ISO3

Name

504

MA

MAR

Morocco

104

MM

MMR

Myanmar


Table ကို <thead> <tbody> <tfoot> Element တွေသုံးပြီးတော့ အပိုင်းလိုက်လည်း ခွဲခြားသတ်မှတ်လို့ ရပါတယ်။

ရေးသားပုံနမူနာ 

        <table>
         <thead>
         <tr>
           <th colspan="4">Country List</th>
         </tr>
         </thead>
         <tbody>
         <tr>
           <th>Code</th>
           <th>ISO</th>
           <th>ISO3</th>
           <th>Name</th>
         </tr>
         <tr>
           <td>504</td>
           <td>MA</td>
           <td>MAR</td>
           <td>Morocco</td>
         </tr>
         <tr>
           <td>104</td>
           <td>MM</td>
           <td>MMR</td>
           <td>Myanmar</td>
         </tr>
         </tbody>
         <tfoot>
         <tr>
           <td colspan="4">&copy; Copyright 2013</td>
         </tr>
         </tfoot>
        </table>

ရလဒ်

Country List
Code ISO ISO3 Name
504 MA MAR Morocco
104 MM MMR Myanmar
© Copyright 2013

<thead> Element ထဲက <td> မှာ colspan="4" ဆိုတဲ့ Attribute တစ်ခုသုံး ထားတာကို သတိပြုပါ။ အဲ့ဒီ Attribute က Column တွေကို ပေါင်းစပ်နေရာ ယူစေလိုတဲ့အခါ အသုံးပြုပါတယ်။ colspan="4" ရဲ့ အဓိပ္ပါယ်က ဒီနေရာမှာ "လေးကွက်စာနေရာယူပါ" လို့ ပြောလိုက်သလိုပါပဲ။ ဒါကြောင့် ရလဒ်မှာ ကြည့်လိုက် ရင်လည်း Country List ဆိုတဲ့ Column က လေးကွက်စာ နေရာယူပြီး ဖော်ပြပေးတာကို တွေ့ရမှာပါ။

<tfoot> Element ထဲမှာ &copy; ဆိုတဲ့ ရေးသားမှု တစ်ခုကိုလည်း သတိပြုပါ။ အဲ့ဒါကတော့ HTML Entitle Symbol လို့ခေါ်တဲ့ သင်္ကေတတွေ HTML ထဲမှာ ထည့်သွင်းလိုတဲ့ အခါ အသုံးပြုရတဲ့ ရေးသားနည်း ဖြစ်ပါတယ် Ampersand (&) နဲ့အစပြုပြီး Semi-Colon (;) နဲ့ အဆုံးသတ်လေ့ရှိပါတယ်။ &copy; ကတော့ © Symbol လေး ထည့်သွင်းချင်တဲ့အခါ ရေးသားရတဲ့ HTML Entitle Symbol ဖြစ်ပါတယ်။

Table Layout

ဒီအခန်းမှာ ခဏခဏ ပြောနေတဲ့ ကိစ္စကိုပဲ ထပ်ပြောရပါဦးမယ်။ HTML Document တစ်ခုဆိုတာ Semantic Data Structure အနေနဲ့ စနစ်တစ်ကျ တည်ဆောက်ထားတဲ့ အချက်အလက်များသာ ဖြစ်သင့်ပြီး အဲ့ဒီ Document ကို ဘယ်ပုံဘယ်နည်း ဖော်ပြရမလဲဆိုတာ ကိုတော့ သီးခြား Style Language ဖြစ်တဲ့ CSS နဲ့ သတ်မှတ်ရတာ ဖြစ်ပါတယ်။ ဒါပေမယ့် ပြဿနာက XHTML မတိုင်ခင်မှာ Browser တွေရဲ့ CSS Support က အတော်လေး အားနည်းခဲ့ပါတယ်။

၁၉၉၆ ခုနှစ်မှာ အပြီးသတ်ခဲ့တဲ့ CSS2.1 ကို အဲ့ဒီကာလတွေမှာ လူသုံးအများဆုံးဖြစ်တဲ့ Internet Explorer Web Browser က ၂၀၀၁ ခုနှစ်ရောက်မှသာ တစ်ဝက်ကျော်ကျော် Support စလုပ်နိုင်ပါတယ်။ ဒါတောင် တစ်ဝက်ကျော် ကျော်ပဲ ရှိပါသေးတယ်။ ဒီတော့ ၂၀၀၁ မတိုင်ခင်က Web Developer တွေဟာ Web Document တွေကို Style လုပ်နိုင်ဖို့ CSS ကို အားကိုးလို့ မရခဲ့ပါဘူး။ ဒါကြောင့် မရရအောင် ကြံဖန်လုပ်တဲ့ အနေနဲ့ <table> Element တွေကို Document Layout အတွက် အသုံးပြုခဲ့ကြပါတယ်။












ဖော်ပြထားတဲ့ Layout ကို Table တစ်ခုလို့ မြင်ကြည့်ပါ။ Row သုံးခုရှိပါတယ်။ အလယ် Row မှာ Column နှစ်ခုရှိပြီး ကျန် Row နှစ်ခုမှာ Column တစ်ခုစီ ရှိကြပါတယ်။ ဒီနည်းနဲ့ <table> Element တွေကို စာရင်းဇယားဖော်ပြဖို့ မဟုတ်ပဲ Page Layout အတွက် သုံးခဲ့ကြပါတယ်။ တစ်ဖြည်းဖြည်း Web Developer တွေကြား အလေ့အကျင့် တစ်ခုလို ဖြစ်လာတဲ့အတွက် XHTML ပေါ်လာပြီး Semantic Web ကို အားပေးလာချိန်၊ Browser CSS Support တွေ အထိုက်အလျှောက် အားကောင်းလာချိန်မှာ <table> Element ကို ဇယားဖော်ပြဖို့ပဲ သုံးဖို့၊ Layout အတွက် မသုံးဖို့ အတော်လေး ပြန်ပြီး တိုက်တွန်းခဲ့ရပါတယ်။

ကနေ့ခေတ်မှာတော့ Browser CSS Support ဆိုတာ အတော်လေး ပြည့်စုံအားကောင်း နေပြီဖြစ်ပါတယ်။ Layout အတွက်တော့ Table တွေသုံးနေစရာ မလိုတော့ပါဘူး။ လက်တွေ့မှာ Table Layout တစ်ခုဟာ CSS Layout လောက် ပြည့်စုံ သပ်ရပ်ခြင်းလည်း မရှိပါဘူး။ ဒါကြောင့် အရင်က <table> Element ကို Layout အတွက်သုံးတဲ့ခေတ် ရှိခဲ့တယ် ဆိုတာလောက်ပဲ ပြောချင်ပါတယ်။ ကျွန်တော်တို့ လိုက်လုပ်ကြဖို့ မဟုတ်ပါဘူး။

Formatting Elements

Text တွေကို Format လုပ်လိုတဲ့အခါ အသုံးပြုနိုင်တဲ့ Element တွေရှိပါတယ်။ အခြေခံအားဖြင့် <b> Element ကို စာလုံးတွေ Bold လုပ်ဖို့အသုံးပြုပြီး <i> Element ကို စာလုံးစောင်း (Italic) ပြုလုပ်ဖို့ အသုံးပြုနိုင် ပါတယ်။ ဒါပေမယ့် Text တွေကို Format လုပ်တယ်ဆိုတာ အမှန်တော့ စာတွေကို ဘယ်လိုပုံစံ ဖော်ပြရမလဲ သတ်မှတ်ခြင်း ဖြစ်ပါတယ်။ HTML Document ထဲမှာ Text Format လုပ်တဲ့ Element တွေ (ဖြစ်နိုင်မယ်ဆိုရင်) ထည့်သွင်း အသုံးမပြုသင့်ပါဘူး။ စာတွေကို ဘယ်လိုပုံစံ ဖော်ပြရလဲဆိုတဲ့ Style Detail ကို CSS နဲ့ အသေးစိတ် သတ်မှတ်နိုင်ပါတယ်။

ဒါကြောင့်လည်း W3C က XHTML မှာ <b> <i> <s> <u> အစရှိတဲ့ Formatting Elements တွေကို ဖယ်ထုတ်ပြစ်ခဲ့တာဖြစ်ပါတယ်။ ဒါပေမယ့်လည်း Document တွေမှာ တစ်ခြားစာတွေနဲ့မတူပဲ အလေးပေး ဖော်ပြသင့်တဲ့စာတွေ ပါဝင်တက်ပါတယ်။ အဲ့ဒီလို အထူးအလေးပေး ဖော်ပြသင့်တဲ့ စာတွေအတွက် အသုံးပြု နိုင်ဖို့ Semantic Element ဖြစ်တဲ့ <strong> <em> <del> တို့ကိုတော့ XHTML မှာ ထည့်သွင်းပေး ခဲ့ပါတယ်။

<i>Hello, World!</i> လို့ရေးသားရင် Hello, World! လို့ စာလုံးစောင်းနဲ့ ဖော်ပြထားတဲ့ ရလဒ်ကို ရမှာပါ။ <em>Hello, World!</em> လို့ ရေးသားရင်လည်း စာလုံးစောင်းနဲ့ပဲဖော်ပြတဲ့ တူညီတဲ့ရလဒ်ကို ရရှိမှာဖြစ်ပါ တယ်။ ဒါဆိုရင် <i> Element အစား <em> Element သုံးလိုက်လို့ ဘာများထူးသွား လို့လည်း? လို့ မေးစရာ ရှိလာနိုင်ပါတယ်။ ကျွန်တော်တို့ ကိုယ့်ကိုယ်ကို ပြန်မေးသင့်တာက "ဘာလို့ စာလုံးစောင်း သုံးတာလဲ?" ဆိုတဲ့မေးခွန်း ဖြစ်ပါတယ်။ စာလုံးစောင်း လုပ်လိုက်တယ်ဆိုတာ အများအားဖြင့် အဲ့ဒီစာကို ပိုပြီးထူးခြားစေချင်လို့ ဖြစ်ပါတယ်။ <em> ဆိုတာ Emphasis (အထူးပြုဖော်ပြချက်) ဆိုတဲ့ အဓိပ္ပါယ် ဖြစ်ပါတယ်။ ပိုပြီးအဓိပ္ပါယ် ရှိပါတယ်။ ဒါကြောင့် စာလုံး စောင်းဖော်ပြလိုက်ပါ လို့ အဓိပ္ပါယ်ရတဲ့ <i> Element အစား အထူးပြုဖော်ပြလိုက်ပါ လို့ အဓိပ္ပါယ်ရတဲ့ <em> Element ကိုသုံးတာက ပိုပြီး Semantic ဖြစ်စေမှာဖြစ်ပါတယ်။

ဒါပေမယ့်လည်း HTML5 မှာတော့ <u> Element ကလွဲရင် အားလုံးကို ခွင့်ပြုထားတဲ့အတွက် အသုံးများတဲ့ Formatting Elements တွေကို ဖော်ပြပေးလိုက်ပါတယ်။

<b> - စာလုံးတွေ Bold လုပ်ဖော်ပြဖို့ အသုံးပြုနိုင်ပါတယ် (Example)။

<i> - စာလုံးတွေကို စာလုံးစောင်းနဲ့ ဖော်ပြဖို့ အသုံးပြုနိုင်ပါတယ် (Example)။

<s> - စာလုံးတွေကို Strike-through လုပ်ပြီးဖော်ပြဖို့ အသုံးပြုနိုင်ပါတယ် (Example)။

<strong> - ပိုပြီးထင်ရှားပေါ်လွင်စေလိုတဲ့ စာတွေအတွက်သုံးနိုင်ပါတယ် (Example)။

<em> - အထူးပြုဖော်ပြလိုတဲ့ စာတွေအတွက်သုံးနိုင်ပါတယ် (Example)။

<del> - ဖျက်ထားကြောင်း အသိပေးဖော်ပြလိုတဲ့ စာတွေအတွက် သုံးနိုင်ပါတယ် (Example)။

<sup> - Superscript တွေဖော်ပြဖို့ သုံးနိုင်ပါတယ် (Example – 2nd)။

<sub> - Subscript တွေဖော်ပြဖို့ သုံးနိုင်ပါတယ် (Example – H2O)။

<code> - Program Code တွေ ထည့်သွင်းဖော်ပြဖို့ သုံးနိုင်ပါတယ် (Example)။

<pre> - ကြိုတင် Format လုပ်ထားတဲ့ စာတွေဖော်ပြဖို့ သုံးနိုင်ပါတယ်။ ပုံမှန်ဆိုရင် HTML က Whitespace တွေကို ဖော်ပြလေ့မရှိပေမယ့် <pre> Element ထဲမှာ ထည့်သွင်းထားတဲ့ Whitespace တွေကိုတော့ ရေးသားထားတဲ့အတိုင်း ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။ HTML Document ထဲမှာ တစ်ကြောင်းထက်ပိုတဲ့ Program Code တွေ ထည့်သွင်းဖော်ပြဖို့ အသုံးဝင်တဲ့ Element ဖြစ်ပါတယ်။

<blockquote> - မှတ်ချက်တွေ ထည့်သွင်းဖို့ (သို့မဟုတ်) တစ်ခြားသူ ဖော်ပြထားတဲ့ အချက်အလက်တွေ ကိုးကားဖော်ပြဖို့ အတွက် အသုံးပြုနိုင်ပါတယ်။

Form and Inputs

စာရွက်စာတမ်းတွေမှာ ရေးဖြည့်စရာ Form တွေ ပါဝင်တက်သလိုပဲ HTML Document တွေမှာလည်း Form တွေ ထည့်သွင်းလို့ရပါတယ်။ အသုံးပြုသူတွေက အချက်အလက် ဖြည့်သွင်းရတဲ့ Element မို့ Input Element တွေလို့ ခေါ်ပါတယ်။ အခြေခံအကျဆုံးကတော့ Text Input ဖြစ်ပါတယ်။

<input> Element ကိုပဲအသုံးပြုရပြီး type Attribute မှာ "text" လို့ သတ်မှတ်ပေးရပါတယ်။ Empty Tag တစ်ခုဖြစ်တဲ့အတွက် Close Tag နဲ့ Content မရှိပါဘူး။ 

  <input type="text">

တစ်ခြားအသုံးဝင်တဲ့ Attribute တွေ ရှိပါသေးတယ်။ value Attribute ကို Text Input မှာ Default Value ဖော်ပြဖို့သုံးနိုင်ပါတယ်။ Text Input ထဲက အချက်အလက်တွေကို အသုံးပြုသူက မပြင်ဆင်စေချင်ရင် readonly Attribute နဲ့ ကန့်သတ်နိုင်ပါတယ်။ disabled Attribute နဲ့ Input ကို ပိတ်ထားနိုင်ပါတယ်။ maxlength Attribute နဲ့ Text Input ထဲမှာ ထည့်သွင်းခွင့်ပြုလိုတဲ့ စာလုံးအရေအတွက် ကို ကန့်သတ်နိုင်ပါတယ်။ ဥပမာ - <input type="text" maxlength="6">

Input နဲ့အတူ Label တွေကို တွဲဖက်ဖော်ပြစေချင်ရင်တော့ <label> Element ကို သုံးနိုင်ပါတယ်။ 

  <label for="fname">First Name</label>
  <input type="text" id="fname">

<label> Element နဲ့ <input> Element တို့ကို ချိတ်ဆက်ဖို့အတွက် <label> Element ရဲ့ for Attribute မှာ <input> Element ရဲ့ id ကို ထည့်သွင်းပေးခြင်းဖြင့် ချိတ်ဆက်လိုက်တာပဲ ဖြစ်ပါတယ်။ ရရှိမယ့်အကျိုး ကတော့ အသုံးပြုသူက "First Name" ဆိုတဲ့ Label ကို နှိပ်လိုက်ရင် Text Input မှာ အလိုလို Focus ဖြစ်ပြီး ဖြစ်နေစေမှာပဲ ဖြစ်ပါတယ်။

Input Type မှာ Text အပြင် တစ်ခြားအသုံးပြုလို့ ရတာတွေ ရှိပါသေးတယ်။

<input type="password"> ကို အသုံးပြုသူ Password ရိုက်ထည့်ဖို့ သုံးနိုင်ပါတယ်။ Text Input နဲ့ အခြေခံအားဖြင့်တူပေမယ့် အသုံးပြုသူ အချက်အလက်တွေ ရိုက်ထည့်တဲ့အခါ Star လေးတွေအဖြစ် အလိုအလျှောက် ပြောင်းလဲဖော်ပြပေးမယ့် Input အမျိုးအစားဖြစ်ပါတယ်။

<input type="hidden"> ဟာလည်း Text Input နဲ့ အခြေခံအားဖြင့် တူပါတယ်။ ဒါပေမယ့် hidden ဆိုတဲ့အတိုင်း ထည့်သွင်းမဖော်ပြပဲ ဖျောက်ထားမယ့် Input အမျိုးအစားဖြစ်ပါတယ်။ Application တွေတည်ဆောက် တဲ့အခါ ဒီ hidden Input က သူ့နေရာနဲ့သူ အသုံးဝင်ပါတယ်။

<input type="checkbox"> ကိုတော့ Checkbox Option တွေထည့်သွင်းဖို့ အသုံးပြုနိုင်ပါတယ်။ checked Attribute ကိုအသုံးပြုပြီး Default Check လုပ်ပေးနိုင်ပါတယ်။ checked Attribute ဟာ အပြည့်အစုံဆိုရင် checked="checked" လို့ ရေးပေးရတဲ့ Attribute တစ်ခုဖြစ်ပါတယ်။ ရှေ့မှာပြောခဲ့ သလိုပဲ အပြည့်အစုံပဲဖြစ်ဖြစ်၊ Attribute Name သက်သက်ချည်းဖြစ်ဖြစ် နှစ်သက်သလို ရေးနိုင်ပါတယ်။

<input type="radio"> ကိုတော့ Radio Option တွေထည့်သွင်းဖို့ အသုံးပြုနိုင်ပါတယ်။ သူလည်းပဲ checked Attribute ကိုပဲ Default Check အတွက် သုံးပါတယ်။ ထူးခြားချက်ကတော့၊ Radio Option ဆိုတာ ရွေးစရာအများကြီးထဲက တစ်ခုတည်းကိုပဲ ရွေးခွင့်ပေးတဲ့ Option အမျိုးအစားပဲဖြစ်ပါတယ်။ ဒီလုပ်ဆောင်ချက် ရဖို့အတွက် အမျိုးအစားတူရာ Radio Option တွေကို name Attribute တူအောင် ပေးရပါတယ်။ ဥပမာ - 

  <input type="radio" name="gender" value="male">
  <input type="radio" name="gender" value="female">

<input type="submit"> ကတော့ Button ထည့်သွင်းဖို့ အသုံးပြုရပါတယ်။ submit Button ဟာ Form တစ်ခုအတွက် အရေးအကြီးဆုံး ဖြစ်ပါတယ်။ submit Button အလုပ်လုပ်ပုံကို အခန်း (၈) Web Development with PHP (Part – 1) မှာ အသေးစိတ် ထပ်ရှင်းပေးမှာ ဖြစ်ပြီး အဲ့ဒီအခန်းမှာပဲ တစ်ခြား Input Element တွေကို လက်တွေ့ အသုံးပြုရမှာ ဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ value Attribute ဟာ Text Input တွေအတွက် Default Value ဖော်ပြဖို့ အသုံးပြုပါတယ်။ Checkbox နဲ့ Radio Option တို့အတွက်တော့ သက်ဆိုင်ရာ Element ရဲ့ တန်းဖိုးသတ်မှတ်ပေးဖို့ သုံးရ ပါတယ်။ Button Element တွေအတွက်တော့ value Attribute ကို Button ပေါ်မှာပေါ်တဲ့ Button Label ဖော်ပြဖို့ အသုံးပြုနိုင် ပါတယ်။ ဥပမာ - <input type="submit" value="Save">

<input type="reset"> ဟာလည်း Button တစ်ခုပဲ ဖြစ်ပါတယ်။ reset Button ကို နှိပ်လိုက်ရင် Input တွေအားလုံးမှာ ထည့်သွင်းထားတဲ့ အချက်အလက်တွေကို ရှင်းလင်းပေးမှာ ဖြစ်ပါတယ်။ ဒီ Button ဟာ မသုံးသင့်တဲ့ Button တစ်ခုဖြစ်ပါတယ်။ Web Form တစ်ခုမှာ ဖြည့်သွင်းစရာ Input ၁၀ ခုခန့်ပါတယ် ဆိုကြပါစို့။ အားလုံးဖြည့် ပြီးမှ ဖြည့်ခဲ့သမျှမှာနေလို့ ၁၀ ခုလုံးကို ပြန်ရှင်းပြစ်ချင်တယ်ဆိုတဲ့ Use Case က လက်တွေ့မှာ မရှိပါဘူး။ မှားလို့ ပြန်ဖြည့်ချင်လဲ တစ်ခု နှစ်ခုပဲ ရှိမှာပါ။ ဒီ Button ထည့်ထားမိမှ အသုံးပြုသူက မတော်တစ်ဆ မှားနှိပ်မိရင် သူဖြည့်ခဲ့ သမျှအကုန်ရှင်းသွားလို့ အစအဆုံးပြန်ထည့်ရတဲ့ ပြဿနာ ရှိနိုင်ပါတယ်။ Usability ဆိုတဲ့ အသုံးပြုရ အဆင်ပြေ လွယ်ကူမှုရှု့ဒေါင့်က ကြည့်မယ်ဆိုရင် အထူးလိုအပ်ချက် တစ်စုံတစ်ရာမရှိရင် မသုံးသင့်တဲ့ Button တစ်မျိုးပဲ ဖြစ်ပါတယ်။

<input type="button"> ဟာလည်း Button တစ်မျိုးပဲ ဖြစ်ပါတယ်။ သူကတော့ Button အလွတ် တစ်ခုသာ ဖြစ်ပါတယ်။ ဘာအလုပ်မှ လုပ်မှာမဟုတ်ပါဘူး။ Javascript နဲ့ တွဲဖက်အသုံးပြု လိုတဲ့အခါ အသုံးပြုရမယ့် Button တစ်မျိုးဖြစ်ပါတယ်။

<button> Element ဟာ လည်း <input type="button"> နဲ့ အတူတူပဲဖြစ်ပါတယ်။ ထူးခြားချက်က <button> Element က Full Element တစ်ခုဖြစ်တဲ့အတွက် Element Content နဲ့ Close Tag ရှိပါတယ်။ ဥပမာ - <button>Download</button> လို့ ရေးရမှာ ဖြစ်ပါတယ်။ ရလဒ်ကတော့ <input type="button" value="Download"> လို့ ရေးသားခြင်းနဲ့ အတူတူ ပဲရမှာ ဖြစ်ပါတယ်။

<button> Element ရဲ့ ထူးခြားချက်က လိုအပ်ရင် Formatting Tag တွေကို Content မှာ ထည့်ရေးလို့ ရနိုင်ခြင်းပဲ ဖြစ်ပါတယ်။ ဥပမာ - <button>Download <b>file.pdf</b></button> လို့ ရေးသားနိုင်တဲ့ အားသာချက် ရှိမှာဖြစ်ပါတယ်။

နောက် Input နှစ်မျိုး ကျန်ပါသေးတယ်။ Textarea နဲ့ Select Box တို့ပဲ ဖြစ်ပါတယ်။ သူတို့ကိုတော့ <input> Element မသုံးပါဘူး။ Textarea ထည့်သွင်းဖို့အတွက် <textarea> Element ကို သုံးရပါတယ်။ ထူးခြားချက်က <textarea> ဟာ <input> လို Empty Element မဟုတ်ပါဘူး။ အဖွင့်အပိတ် ရှိတဲ့ Full Element ဖြစ်ပါ တယ်။ ပြီးတော့ Default Value သတ်မှတ်ဖို့အတွက် <input type="text"> မှာလို value Attribute သုံးပြီး သတ်မှတ်လို့ မရပါဘူး။ Default Value ကို အဖွင့် Tag နဲ့ အပိတ် Tag ကြားထဲမှာ ရေးပေးရပါတယ်။ ဥပမာ - <textarea>Default Text</textarea>

Select Box ကို Drop-Down Box လို့လည်း ခေါ်ပါတယ်။ ထည့်သွင်းဖို့အတွက်တော့ <select> Element ကို သုံးရပါတယ်။ နှိပ်လိုက်ရင် ရွေးစရာစာရင်း ကျလာမှာဖြစ်ပါတယ်။ ရွေးစရာစာရင်းကိုတော့ <option> Element တွေနဲ့ သတ်မှတ်ပေးနိုင်ပါတယ်။ ဥပမာ - 

  <select>
   <option value="1">Apple</option>
   <option value="2">Orange</option>
   <option value="3" selected>Mango</option>
   <option value="4">Grape</option>
  </select>

<option> Element တွေမှာ value Attribute သတ်မှတ်ထားတာကို သတိပြုပါ။ ဥပမာ - Orange လို့ ရွေးစရာစာရင်းမှာ ဖော်ပြထားပေမယ့် သူ့ရဲ့တန်ဖိုးအမှန်က (2) ဖြစ်ပါတယ်။ value Attribute မပေးထားလည်း ရပါတယ်။ မပေးထားရင်တော့ ရွေးစရာစာရင်းမှာဖော်ပြထားတဲ့ Orange ကိုပဲ သူရဲ့ value အနေနဲ့အသုံးပြု သွားမှာပါ။ နောက်ထပ် သတိပြုရမှာက selected Attribute ဖြစ်ပါတယ်။ သူက Default ရွေးထားပေးစေလိုတဲ့ <option> Element မှာ ထည့်သွင်းပေးရမှာ ဖြစ်ပါတယ်။ selected Attribute ပေးထားတဲ့ <option> မရှိရင်၊ အပေါ်ဆုံး <option> ကို Default အနေနဲ့ ရွေးထားပေးမှာပဲ ဖြစ်ပါတယ်။

HTML Form Example

  <!doctype html>
  <html>
  <head>
   <meta charset="UTF-8">
   <title>HTML Form</title>
  </head>
  <body>
   <h1>Form Inputs</h1>

   <form>
     <label for="fname">Name</label><br>
     <input type="text" id="name"><br>

     <label for="email">Email</label><br>
     <input type="text" id="email"><br>

     <label for="address">Address:</label><br>
     <textarea id="address"></textarea><br>
     <br>

     <input type="radio" name="gender" id="male">
     <label for="male">Male</label>

     <input type="radio" name="gender" id="female">
     <label for="female">Female</label><br>
     <br>

     <label for="education">Highest Education</label><br>
     <select id="education">
     <option>High School</option>
     <option>Bachelor</option>
     <option>Post Graduate Diploma</option>
     <option>Master</option>
     <option>Ph.D</option>
     </select><br> <br>

     <input type="submit" value="send">
   </form>
  </body>
  </html>

နမူနာမှာဖော်ပြထားတဲ့ Form ကို Browser နဲ့ဖွင့်ကြည့်ရင် အခုလိုရလဒ် ရရှိမှာပဲဖြစ်ပါတယ်။

မှတ်ချက် ။ ။ Browser မှာ ဖော်ပြတဲ့အခါ Element တွေကို နောက်တစ် လိုင်းဆင်းပြီး ဖော်ပြစေချင်ရင် <br> Element ကို အသုံးပြုနိုင်ပါတယ်။ <br> ဆိုတာ Line Break ဆိုတဲ့ အဓိပ္ပါယ်ဖြစ်ပြီး Content နဲ့ Close Tag မရှိတဲ့ Empty Element တစ်ခုလည်း ဖြစ်ပါတယ်။

Conclusion

အခုဖော်ပြခဲ့တဲ Element တွေဟာ ရိုးရိုး Text Document တစ်ခုကို HTML Element တွေနဲ့ တည်ဆောက် တဲ့အခါ အသုံးပြုရတဲ့ အခြေခံ Element များပဲ ဖြစ်ပါတယ်။ ဖြည့်စွက်မှတ်သားဖို့လိုတဲ့ Element နဲ့ Attribute တွေကို သက်ဆိုင်ရာအခန်းအလိုက် ဖြည့်စွက်ဖော်ပြ ပေးသွားမှာ ဖြစ်ပါတယ်။ HTML5 မှာဆိုရင် Element အသစ်တွေ၊ Attribute အသစ်တွေသာမက အတော်လေးအသုံးဝင်တဲ့ လုပ်ဆောင်ချက် အသစ် တွေလည်း အများကြီးပါဝင်လာ ပါတယ်။ အသေးစိတ်ကိုတော့ အခန်း (၁၄) HTML5 မှာ ဆက်လက် ဖော်ပြပေးမှာ ဖြစ်ပါတယ်။ ဒီအခန်းမှာတော့၊ HTML Document တွေဟာ Web Application တွေရဲ့ အခြေခံ Semantic Data Structure တွေ ဖြစ်တယ်ဆိုတဲ့ အချက်ကို အထူးပြုနားလည်စေချင်ပါတယ်။