HTML အေၾကာင္းေျပာျပီဆိုေတာ့ နည္းနည္းေလး Technical ပိုင္းပုိမ်ားမယ္လုိ႕ ထင္ပါတယ္။ ဒါေပမယ့္ HTML အေၾကာင္းကို introduction ေလာက္ေလးပဲ လုပ္သြားမွာျဖစ္တဲ့ အတြက္ ဘာမွေတာ့ သိပ္အမ်ားၾကီး မပါေသးပါဘူး။

သာမန္ ျမန္မာ netizen တစ္ေယာက္အေနနဲ႕ တစ္ေန႕တစ္ေန႕ ၾကည့္ၾကည့္ေနတဲ့ web page ေတြကို ဘယ္လုိ ေဆာက္ထားလဲ ဆိုတဲ့ အေၾကာင္းကို ကိုယ္စီးတဲ့ ႏြား အထီးလား အမလား သိရုံေလာက္ပဲ ေရးသြားမွာပါ။

HTML ဆိုတာဘာလဲ?

HTML ဆိုတာကို အရွည္ေျပာရရင္ေတာ့ Hyper Text Markup Language လုိ႕ေျပာရပါလိမ့္မယ္။ ဟိုလူကေျပာ ဒီလူကေျပာ ေျပာေျပာေနၾကမယ့္ HTML ဆိုတာဟာ ကၽြန္ေတာ္တုိ႕ ဘယ္အခ်ိန္ၾကည့္ၾကည့္ ဘယ္ website ကိုၾကည့္ၾကည့္ ျမင္ရသမွ်ကို web browser ကျပႏုိင္ဖုိ႕ အတြက္ အဓိကလုိတဲ့ file တစ္ခု (သို႕မဟုတ္) text file တစ္ခုပါပဲ။

အခုအခ်ိန္မွာ XHTML ဆိုတဲ့ standard မွီတဲ့ HTML language သာ သံုးေတာ့ေပမယ့္ အဲ့ဒီ့ XHTML ကိုလည္း အမ်ားအားျဖင့္ HTML လုိ႕သာေခၚၾကပါတယ္။

ဘာကြာလည္းေတာ့ ေခါင္းေနာက္သြားမွာ စိုးတဲ့အတြက္ ေနာက္မွပဲ ရွင္းျပပါေတာ့မယ္။ လုိရာကိုပဲေျပာျပီး HTML ဘယ္ကစလဲ? ဘယ္သူထြင္လဲ? ဘယ္တုန္းကလဲ? စတဲ့ သမုိင္းသင္ခန္းစာေတြ ကိုေက်ာ္လုိက္ရေအာင္။

HTML ဘယ္လုိေရးမလဲ?

လြယ္ပါတယ္။ Notepad နဲ႕ ေရးပါတယ္။ တကယ္လုိ႕ notepad နဲ႕ တျဖည္းျဖည္း html ကို နားလည္လာျပီဆိုရင္ web development အတြက္သံုးႏုိင္တဲ့ IDE တစ္ခုခုကို ေျပာင္းသံုးျပီး ဆက္ေရးႏုိင္ပါတယ္။

HTML မွာ Tag ေတြကို သံုးျပီး mark up လုပ္ပါတယ္။ Tag အမ်ိဴးအစားေပၚမူတည္ျပီး ဘာျပေပးရမယ္ဆိုတာကို web browser က ၾကည့္ျပီး ျပေပးပါတယ္။

ဥပမာ <a> ဆိုတဲ့ Tag မ်ိဴးကိုေတြ႕ရင္ anchor သုိ႕ link ျပေပးရမယ္၊ <p>...</p> ဆုိတဲ့ tag မ်ိဴးကိုေတြ႕ရင္ ၾကားထဲမွာရွိတဲ့ စာကို paragraph တစ္ခုအေနနဲ႕ ျပေပးရမယ္ေပါ့။

HTML tag ေတြမွာ characteristic ေလး တခ်ိဳ႕ ရွိပါတယ္။ သူတုိ႕ေတြမွာ

1. အေၾကာင္းရွိတယ္
2. ေဆြမ်ိဴးရွိတယ္
3. အစနဲ႕ အဆံုးရွိတယ္

အေၾကာင္းရွိတဲ့ HTML tag

HTML tag ေတြမွာ သူတို႕ကိုယ္ပိုင္ အေၾကာင္းအရာေလးေတြ (Attribute ေတြ) ရွိပါတယ္။

ဥပမာ Link တစ္ခုကိုေရးတဲ့ HTML tag တစ္ခုဟာ

<a href="http://mmhan.net" title="Go to mmhan.net">Go to mmhan.net</a> ဆိုရင္

အဲ့ဒီ anchor link ရဲ႕ attribute ေတြဟာ href နဲ႕ title ပါပဲ။

အဲ့ဒီ့ attribute ေတြဟာ HTML tag ရဲ႕ အလုပ္လုပ္ပံု၊ display ျပပံုကို သတ္မွတ္ပါတယ္။

ဒီဥပမာမွာ href ဆိုတဲ့ attribute ဟာ ဒီ link ကို click ႏွိပ္လုိက္ရင္ ဘယ္သြားမယ္လုိ႕ ေျပာေပးျပီး၊ title ဆိုတဲ့ attribute ဟာ ဒီ link ေပၚမွာ mouse တင္ထားရင္ ဘယ္စာ ျပရမယ္ ဆိုတာမ်ိဴးကို သတ္မွတ္ေပးတာေပါ့။

ေဆြမ်ိဴးရွိတဲ့ HTML tag

ေဆြမ်ိဴးရွိတယ္လုိ႕ ဘာလုိ႕ေျပာရလဲဆိုေတာ့ သူတုိ႕ေတြဟာ Tree Structure နဲ႕ ရွိေနလုိ႕ပါ။ ေအာက္က code ကို တခ်က္ၾကည့္ၾကည့္ပါ။

I'm a child of <div id="bar">
Me too!!

I'm sibling of <div id="bar">

အဲ့ဒီ့ code မွာေတြ႕ရတဲ့ အတိုင္းပဲ၊ <div id="foo"> ဆုိတဲ့ division tag ဟာ တျခား HTML tag ေတြနဲ႕ယွဥ္ရင္ tree structure ရဲ႕ အေပၚဆံုးမွာရွိေနျပီး၊ သူ႕ရဲ႕ child ေတြ အျဖစ္ <div id="bar"> နဲ႕ <h3> ဆုိတဲ့ heading-3 tag ရွိပါတယ္။

HTML ကိုေရးျပီဆိုရင္ အဲ့ဒီ့လုိပဲ tree structure နဲ႕ေရးရပါတယ္။

အစနဲ႕ အဆံုးရွိတဲ့ HTML tag

HTML ေရးျပီဆိုရင္ အစနဲ႕ အဆံုး tag ေတြ မရွိမျဖစ္ ရွိရပါတယ္။

အေပၚမွာျပသြားတဲ့ code အရ <div id="foo"> ရဲ႕ child ေတြကို အုပ္ထားတဲ့ </div> ဟာ သူ႕ရဲ႕ အဆံုး tag ပါ။

<h1> ရဲ႕ အဆံုး tag ဟာ </h1>၊ <h2> ရဲ႕ အဆံုး tag ဟာ </h2> ျဖစ္ျပီး <h3> ရဲ႕ အဆံုး tag ဟာ </h3>၊  ပါ။

ဒီေတာ့ အဆံုး tag ကိုေရးခ်င္ရင္ အစ tag ရဲ႕ < အျပီးမွာ / ထည့္ရတယ္လုိ႕ ေတြ႕ပါလိမ့္မယ္။

တစ္ခါတစ္ေလမွာေတာ့ child မရွိတဲ့ HTML tag ေတြရွိတတ္ပါတယ္။

ပံုျပတဲ့ <img> tag ဟာ အဲ့ဒီ့ထဲက တစ္ခုေပါ့။

သူ႕ကိုေရးတဲ့အခါမွာေတာ့

<img src="http://somedomain.com/someimage.jpg" width="100" height="100" /> ဆိုျပီး tag ရဲ႕ အဆံုး > မတိုင္ခင္မွာ / ကိုထည့္ျပီး အဆံုးသတ္ ေပးရပါတယ္။

ကဲ အခုေလာက္ဆုိရင္ေတာ့ HTML နဲ႕ ေမးထူးေခၚေျပာ အဆင့္ေလာက္ထိ အကၽြမ္းတ၀င္ရွိသြားျပီေပါ့… Expert မ်ား အေနနဲ႕ ကၽြန္ေတာ္ လုိတာမ်ားရွိခဲ့ရင္ comment ထဲမွာ ေျပာေပးၾကပါလုိ႕…

အကယ္၍ စိတ္၀င္စားတယ္ ဆိုရင္ေတာ့ ေနာက္ေနာင္မ်ားမွာ ဆက္ျပီးေရးသြားပါဦးမယ္လုိ႕ ေျပာရင္း…