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 ထဲမွာ ေျပာေပးၾကပါလုိ႕…

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

Internet explorer လုိ႕ ဘာလုိ႕ေခၚေနေသးလဲ၊ web browser လုိ႕ေခၚလုိက္လုိ႕ရတာပဲ

မရပါဘူး။ လြယ္ေအာင္ ေျပာရရင္ေတာ့ Blogger အမ်ားၾကီးရွိတဲ့ အခန္းထဲက  တစ္ေယာက္ကို ေဟ့ ကိုblogger လုိ႕ လွမ္းမေခၚပဲနဲ႕ ကိုဘယ္သူ မဘယ္၀ါ စသျဖင့္ ေခၚသလုိ၊ web browser ေတြအမ်ားၾကီးရွိတဲ့ အခ်ိန္မွာ Internet Explorer ကိုမွ web browser လုိ႕ ေခၚလုိ႕ မရပါဘူး။

ဘယ္လုိ? web browser ေတြ အမ်ားၾကီးရွိတယ္?

ဟုတ္ပါတယ္။ အသံုးအမ်ားဆံုးျဖစ္တဲ့ Windows မွာ နဂိုကတည္းက ပါျပီးသားျဖစ္တဲ့ Microsoft ရဲ႕ Internet Explorer, Mozilla ရဲ႕ Firefox, Opera, Mac ေတြမွာ ပါျပီးသားျဖစ္တဲ့ Apple ရဲ႕ Safari အျပင္ တျခားတျခား browser ေတြ အမ်ားၾကီးရွိပါတယ္။

Browser ေတြ ဘယ္လုိအလုပ္လုပ္ပါသလဲ?

Browser ေတြဟာ HTML ဆိုတဲ့ text file ေတြကို ဖတ္ျပီးေတာ့ <title> ဆိုတဲ့ tag မ်ိဴးေတြ႕ရင္ Window ရဲ႕ title အျဖစ္ျပေပးတယ္၊ <b> ဒါမွမဟုတ္ <strong> ကိုေတြ႕ရင္ Bold လုပ္ေပးတယ္။ Text file ေတြမွာ <a> ဆိုတာေလးေတြေတြ႕ရင္ သူ႕ရဲ႕ link ကို ျပေပးတယ္ ႏွိပ္လုိက္ရင္ အဲ့ဒီ့ link လုပ္ထားတဲ့ page ကို ဖြင့္ေပးတယ္၊ <img> ကိုေတြ႕ရင္ သူ႕ သက္ဆိုင္ရာ image ကိုျပေပးတယ္ စသျဖင့္ေပါ့။ HTML အျပင္ CSS ဆိုတဲ့ website ေတြကို ဘယ္လုိျပရမယ္ဆိုတဲ့ rule ေလးေတြကို website ေရးတဲ့သူက ထည့္ေပးရင္ အဲ့ဒီ့ browser တစ္ခုရဲ႕ ပံုမွန္ rule ေတြအျပင္ အဲ့ဒီ့ rule ေတြနဲ႕ပါျပေပးတယ္ဆိုပါေတာ့။

ဒီေတာ့ ဘာကိုေတြ႕ရင္ ဘာလုပ္ရမယ္ဆုိတဲ့ render သို႕ translate လုပ္ေပးတဲ့ engine ေလးေတြ သူတုိ႕မွာရွိၾကတယ္။ အဲ့ဒီ့ engine ေကာင္းရင္ ေကာင္းသေလာက္ သူတုိ႕ရဲ႕ performance ေကာင္းတယ္၊ speed ျမန္တယ္ေပါ့။

ဒါ့အျပင္ အခုအခ်ိန္မွာ web page တစ္ခုကို အသံုးလြယ္ေစဖုိ႕ interactive ျဖစ္ေစဖုိ႕အတြက္ သံုးေနၾကတဲ့ Javascript အတြက္ကိုလည္း support လုပ္တဲ့ engine ကလည္း web browser ေကာင္းမေကာင္းကို affect ျဖစ္တဲ့ အခ်က္တစ္ခုပါပဲ။

ဘယ္ Browser ကို သံုးသင့္သလဲ

ပံုမွန္သံုး user တစ္ေယာက္ အေနနဲ႕ အမ်ားစုသည္ နဂိုကတည္းကပါတဲ့ Internet Explorer(IE) ကိုသံုးၾကပါတယ္။ ဒါေပမယ့္ IE ဟာ အေကာင္းဆံုးလားဆိုေတာ့ မဟုတ္ပါဘူး။ အဆိုးဆံုးထဲမွာေတာင္ ပါတယ္လုိ႕ ေျပာလုိ႕ရပါတယ္။ အခုေနာက္ဆံုး version ျဖစ္တဲ့ vista မွာပါတဲ့ IE7 မွာ အမ်ားၾကီး ေကာင္းေအာင္ လုပ္ထားေပမယ့္လဲ သူ႕ရဲ႕ performance နဲ႕ functionality ဟာ တျခား browser ေတြကို မမွီေသးပါဘူး။

ကၽြန္ေတာ့္အေနနဲ႕ recommend လုပ္ခ်င္တဲ့ Firefox ကေတာ့ performance အရ၊ security အရ၊ speed အရ အမ်ားၾကီး ပိုေကာင္းတ့ဲအျပင္၊ open source ျဖစ္ျပီး developer ေတြ အမ်ားၾကီးရဲ႕ ေက်းဇူးေၾကာင့္ ကုိယ္လုိခ်င္တဲ့ functionality ေတြ အသုံးလုိတဲ့ functionality ေတြကို လြယ္လြယ္ကူကူ free plug-in ေတြ သြင္းျပီး customize လုပ္လုိ႕ ရတဲ့ အတြက္ အခု အခ်ိန္မွာ ဒုတိယ အသံုးအမ်ားဆံုးျဖစ္ေနပါတယ္။ အကယ္၍သာ IE သည္ အသံုးအမ်ားဆံုးျဖစ္တဲ့ Windows နဲ႕ အတူတူပါျပီးသား software တစ္ခု မဟုတ္ခဲ့ရင္ Firefox သည္ လူသံုးအမ်ားဆံုး browser တစ္ခုျဖစ္မွာပါပဲ။

တကယ္လုိ႕ download လုပ္ခ်င္တယ္ဆုိရင္ေတာ့ www.getfirefox.com မွာ download လုပ္လုိ႕ ရပါတယ္လုိ႕ recommend လုပ္ရင္း…

I don’t have a Gravatar. Ahh!!!

ဘာမွ ပူစရာမလုိပါဘူး။ အကယ္၍ email တစ္ခုမွာ Gravatar တစ္ခု မရွိဘူးဆုိရင္ အဲ့ဒီ့ website က သူ႕ရဲ႕ default ပံုေလးတစ္ခုပဲျဖစ္ျဖစ္၊ ဒါမွမဟုတ္ ဒီ site မွာလုိ အဲ့ဒီ့ email အတြက္ generate လုပ္ထားတဲ့ unique avatar ေလးတစ္ခု ျပေပးပါလိမ့္မယ္။

ေၾသာ္… ဒါဆို.. Gravatar တစ္ခု ဘယ္လုိလုပ္ရမလဲ?

အင္မတန္ လြယ္ပါတယ္။ http://www.gravatar.com ကိုသြားပါ။ Account တစ္ခု sign up လုပ္ပါ။ ျပီးရင္ အဲ့ဒီ့မွာ ကိုယ္သံုးခ်င္တဲ့ email အတြက္ avatar တစ္ခုကို assign လုပ္ေပးလုိက္ပါ။ ဒါဆိုရင္ အဲ့ဒီ့ email ကိုသံုးထားတဲ့ Gravatar ကို support လုပ္တဲ့ website ေတြမွာ အဲ့ဒီ့ avatar ေပၚလာပါလိမ့္မယ္။

ဘယ္ site ေတြ က Gravatar support လုပ္လဲ?

ဒီ site လုိ wordpress engine သံုးထားတဲ့ site ေတြ နဲ႕ Blog ေတြနဲ႕ သတ္ဆိုင္တဲ့ site ေတြ ေတာ္ေတာ္မ်ားမ်ားမွာ Gravatar ကို support လုပ္ပါတယ္။

Gravatar support မလုပ္တဲ့ engine တစ္ခုကုိ Gravatar support ရေအာင္ ဘယ္လုိလုပ္ရမလဲ?

Gravatar support ကို engine ေတာ္ေတာ္မ်ားမ်ားမွာ support ေပးေနပါျပီ၊ plug-in ေတြ google လုပ္ၾကည့္လုိက္ပါ၊ တကယ္လုိ႕ မေတြ႕ရင္ေတာ့ Gravatar ရဲ႕ Developer Resource က Reference Implementations ေအာက္မွာ တစ္ခ်က္ၾကည့္လုိက္ပါ။

ဒါဆို ဘာမ်ားကြာလုိ႕လဲ?

ကၽြန္ေတာ္တုိ႕ ဖတ္ေနက် blog တစ္ခုကို သြားေတာ့မယ္ဆိုရင္ အဲ့ဒီ့ blog မွာ ကုိယ္မဖတ္ရေသးတဲ့ post ရွိမရွိကို ကၽြန္ေတာ္တုိ႕ မသိပါဘူး။ အေဟာင္းေတြဖတ္ျပီးသားျဖစ္တဲ့ အတြက္ post အသစ္ကို ဖတ္ဖုိ႕သြားတဲ့ ကၽြန္ေတာ္တုိ႕ဟာ အဲ့ဒီ့ page ကို load လုပ္တာကိုထုိင္ေစာင့္ ကၽြန္ေတာ္တို႕ မဖတ္ခ်င္တဲ့ မျမင္ခ်င္တဲ့ cbox ေတြ sidebar က ဘာညာသာတကာ widget ေတြကို တက္လာတာကို ထုိင္ေစာင့္လုိ႕ျပီးမွ ကုိယ္ဖတ္ခ်င္တဲ့ post အသစ္မရွိခဲ့ရင္ အလဟႆ အခ်ိန္ကုန္ပါတယ္။

ဒါေပမယ့္ RSS Reader တစ္ခုမွာေတာ့ ကုိယ္မဖတ္ရေသးတဲ့ post ရဲ႕ content ကိုပဲ ျပေပးတဲ့ အတြက္ ဘာကိုမွ ေစာင့္စရာမလုိပါဘူး။

Magazine အသစ္တစ္ခု ထြက္ျပီလား ဆိုျပီး ခဏခဏ စာအုပ္ဆုိင္သြားၾကည့္ေနတာထက္ အဲ့ဒီ့ Magazine ကို subscribe လုပ္ထားျပီ အိမ္တုိင္ယာေရာက္ လာပို႕တာကို ထုိင္ေစာင့္တာမ်ိဳးလုိေပါ့။

ဟုတ္ျပီ ဒါဆုိ ငါတုိ႕ blog မွာ rss ရေအာင္ ဘယ္လုိလုပ္ရမလဲ?

ဘာမွလုပ္စရာ မလုိပါဘူး။ Wordpress တုိ႕ Blogger တုိ႕လုိ blogging platform ေတြ မွာ နဂိုထဲက support လုပ္ျပီးသားပါ။ တခ်ိဳ႕တခ်ိဳ႕ေသာ poorly implemented blogging platform ေတြ (ဥပမာ – MySuboo) ရဲ႕ blog system မွာေတာ့ အဲ့ဒါကို support မလုပ္ပါဘူး။

ဒါဆို ဘယ္လုိ subscribe လုပ္ရမလဲ?

ဘယ္ blog မွာမဆို လုိပံုပဲ ျဖစ္ျဖစ္ အဲ့လို ပံုခတ္ဆန္ဆန္ ပံုေလးပဲျဖစ္ျဖစ္ရွာျပီး ႏွိပ္လုိက္တာနဲ႕ ကုိယ္ၾကိဳက္တဲ့ RSS reader ကိုေရြးျပီး subscribe လုပ္လုိ႕ရပါတယ္။ ရွာလုိ႕မေတြ႕ရင္လည္း RSS ရွိတဲ့ blog ဆိုတာနဲ႕ Firefox ရဲ႕ Address Bar က RSS icon ေလးကုိႏွိပ္ျပီး subscribe လုပ္လုိ႕ရပါတယ္။ RSS Reader အေနနဲ႕ကေတာ့ သံုးလို႕ အေကာင္းဆံုးနဲ႕ အလြယ္ဆံုးက Google Reader ပါပဲ။ ျမန္မာလုိ ဖတ္လုိ႕ရေအာင္လဲ လုပ္ရလြယ္ပါတယ္။

ကဲ ေျပာေနၾကာပါတယ္။ အခုမွ RSS အေၾကာင္းသိတဲ့သူမ်ား ေလးကိုႏွိပ္ျပီး ကၽြန္ေတာ့္ blog ကို စျပီး subscribe လုပ္ရင္း စမ္းၾကည့္လုိက္ေပေတာ့…