Html ကုဒ္အေၾကာင္း ( Markup Tags )

What is HTML
HTML ဆိုတာ ၀က္ဆိုက္စာမ်က္ႏွာေတြကို ေဖာ္ျပဖို႔အတြက္သံုးတဲ့ ဘာသာပါ၊ HTML ဆိုတဲ့ စကားလံုးမွာ အကၡရာ တစ္လံုးစီမွာ အဓိပၸါယ္ရွိပါတယ္၊ H က Hyper ဆိုတဲ့စာလံုးအတြက္ရပ္တည္တယ္၊ T က Text ဆိုတဲ့ စာလံုးအတြက္ရပ္တည္တယ္၊ M က Markup ဆိုတဲ့စာလံုးအတြက္ရပ္တည္တယ္၊ L က language ဆိုတဲ့စာလံုးအတြက္ရပ္တည္တယ္၊ အားလံုးကို ေပါင္းေရးရင္ အတိုေကာက္ ပံုစံက HTML ျဖစ္ျပီး မူရင္းပံုစံက Hyper Text Markup Language ျဖစ္တယ္၊ HTML က Programming ဘာသာရပ္မဟုတ္ပါဘူး၊ သူက Markup ဆိုတဲ့ အမွန္အသားျပဳလုပ္တဲ့ ဘာသာပါ၊ အမွတ္အသားဆိုတာ <h> ဆိုရင္ေခါင္းစဥ္လို႔သတ္မွတ္တယ္၊ <p> ဆိုရင္ စာပိုက္လို႔သတ္မွတ္တယ္ စသျဖင့္ အမွတ္အသားလုပ္တဲ့ ဘာသားျဖစ္လို႔ သူ႔ကို Markup Language လို႔ေခၚပါတယ္၊ Markup Language လို႔ေခၚတဲ့ အမွတ္အသားျပဳလုပ္တဲ့ ဘာသာရပ္ကို မတူညီတဲ့ မွတ္သားမူေတြျပဳလုပ္တဲ့ သေကၤသေတြနဲ႔ ဖြဲ႔ စည္းထားတယ္၊ အဲ့ဒိ့ မတူညီတဲ့ အမွတ္အသား သေကၤသေတြကို Markup Tags လို႔ေခၚတယ္၊
Markup Tags
အဲ့ ဒီ့ Markup Tags ေတြက ၀က္ဆိုက္စာမ်က္ႏွာေတြကို ဘယ္အပိုင္းကေတာ့ ေခါင္းစဥ္ ဘယ္အပိုင္းကေတာ့ စာပိုဒ္ စသျဖင့္မွတ္သားေပးတယ္၊ Markup tags ေတြမွာ အထူးျပဳစာလံုးေတြကိုသံုးတယ္၊ ဥပမာ head ဆိုရင္ h လို႔သံုးတယ္၊ paragraph ဆိုရင္ p လို႔သံုးတယ္၊ line break ဆိုရင္ br လို႔သံုးတယ္၊ အဲ့ဒီ့ အထူးျပဳစာလံုးေတြကို angle brackets လို႔ေခၚတဲ့ အဖြင့္ < အပိတ္ > ျမားေလးေတြနဲ႔ ၀ိုင္းထားတယ္၊ Greater than သေကၤသတို႔ Less than သေကၤသတို႔နဲ႔တူတယ္၊ Markup Tags တိုင္းကို အဲ့ဒီ့လိုျမားေလးေတြ အဖြင့္အပိတ္ႏွစ္ခုၾကာထဲထည့္ရတယ္၊ ဥပမာ head ဆိုရင္ <h> လို႔ေရးတယ္၊  paragraph ဆိုရင္ <p> လို႔ေရးတယ္၊ အဲ့ဒီ့ Markup Tags ေတြက ေရးရင္ တစ္စံုေရးရတယ္၊ အဖြင့္ ရွိသလို အပိတ္ရွိတယ္ (တစ္ခ်ိဳ႕ေတာ့ျခြင္းခ်က္ရွိတယ္)၊ အဖြင့္အပိတ္ပါေအာင္ေရးမွ မွတ္လိုတဲ့အစိတ္အပိုင္းကို မွန္ကန္စြာမွတ္ႏိုင္မယ္၊
ဥပမာ သင္စာေၾကာင္းတစ္ေၾကာင္းကို ေခါင္းၾကီးစာလံုး heading လို႔သတ္မွတ္ခ်င္တယ္ဆိုပါစို႔၊ အဲ့ဒီ့လို သတ္မွတ္ဖုိ႔အတြက္ Markup Tags ေတြထဲက ေခါင္းၾကီးစာလံုးကို ကိုစားျပဳတဲ့ <h1> ကိုသံုးႏိုင္တယ္၊ အဖြင့္ကို <h1> လို႔ေရးျပီး အပိတ္ကို </h1> လို႔ေရးတယ္၊ အဖြင့္အပိတ္ကိုေတာ့ သင္သတ္မွတ္လိုတဲ့စာေၾကာင္းရဲ့ အစနဲ႔ အဆံုးမွာထည့္ရတယ္၊
ဥပမာ သင္က “I am Learning web design ဆိုတဲ့စာသားကိုေခါင္းစဥ္ heading အျဖစ္သတ္မွတ္ခ်င္တယ္ဆိုရင္ ေအာက္က အတိုင္း Markup tags ရဲ့ ေခါင္းၾကီးစဥ္ သေကၤသ ျဖစ္တဲ့ <h1> နဲ႔ </h1> တို႔ကို  “I am learning web design” ဆိုတဲ့ သင္ေခါင္းစဥ္သတ္မွတ္လိုတဲ့ စာသားရဲ့ ေရွ႕ နဲ႔ ေနာက္မွာထားရမယ္၊ ေအာက္မွာဥပမာၾကည့္၊
<h1> I am learning web design </h1>
အထက္က ဥပမာကေတာ့ သင္ မွတ္သားလိုတဲ့ စာေၾကာင္းကို Markup tag သံုးျပီးမွတ္သားရာမွာ အဖြင့္open tags နဲ႔ အပိတ္ close tag ႏွစ္ခုသံုးျပီးမွတ္သားရတယ္ဆိုတဲ့ ဥပမာ ပါ၊ အပိတ္မွာ close tag မွာ အျမဲတမ္း ေရွ႕ကိုေစာင္းထားတဲ့ မ်ဥ္းေစာင္း forward slash ကိုထည့္ရတယ္၊
HTML က အသံုး၀င္လွပါတယ္၊ သူ႕ကိုမသံုးရင္ သင့္ရဲ့၀က္ဆိုက္မွာ ဘယ္စာေၾကာင္းက ေခါင္းစဥ္လဲ ဘယ္စာေၾကာင္းက လင့္လဲ စသျဖင့္ ခြဲျခား သိႏိုင္ေတာ့မွာမဟုတ္ပါဘူး၊
HTML Element
HTML မွာ HTML Elements ေတြရွိပါတယ္၊ သူတို႔ကို HTML Tags ေတြနဲ႔ ရွဳပ္သြားတတ္တယ္၊ ေအာက္က ဥပမာကိုၾကည့္ပါ၊
<h1> I am learning web design </h1>
အထက္က စာေၾကာင္းမွာ HTML Tags ေတြကိုေျပာပါဆိုရင္ <h1> နဲ႔ </h1> တို႔ကိုေျပာရပါမယ္၊ အလယ္က စာေၾကာင္းမပါဘူး၊ ဒါမွမဟုတ္ဘဲ HTML Element ကိုေျပာပါဆိုရင္ေတာ့
စာေၾကာင္းတစ္ေၾကာင္းလံုး အပါအ၀င္ျဖစ္တဲ့ <h1> I am learning web design </h1> ကိုေျပာရပါမယ္၊ <h1> အစကေန စာေၾကာင္းအပါအ၀င္ </h1> အဆံုးအထိကို HTML Element တစ္ခုလို႔ေခၚပါတယ္၊
HTML Documents are Webpages
HTML Document ဆိုတာက web page လို႔ေခၚတဲ့ ၀က္ဆိုက္စာမ်က္ႏွာပါပဲ၊ HTML ရဲ့ အျမင္မွာေတာ့ web pages ေတြက HTML Document ေတြပဲျဖစ္ပါတယ္၊ ဒါေၾကာင့္ပဲ HTML Document တစ္ခုကို web page လို႔ေခၚႏိုင္ပါတယ္၊
ကြန္ျပဴတာ အင္တာနက္အသံုးျပဳသူေတြသံုးေနၾကတဲ့ web browser ေတြျဖစ္တဲ့ Internet Explorer, Firefox, Google Chrome တို႔ရဲ့ အဓိပ ရည္ရြယ္ခ်က္က HTML Document ေတြကို ဖတ္ျပီးဘာသာျပန္ဖို႔ပါ၊ web browser ေတြက သူတို႔ ေတြ႔တဲ့ HTML Documents ေတြကို သင္ျမင္ေတြ႔ေနရတဲ့ လွပ ေသသပ္တဲ့ ၀က္ဆိုက္စာမ်က္ႏွာေလးေတြျဖစ္ေအာင္ ဘာသာျပန္ၾကတယ္၊ တကယ္ေတာ့ သူတို႔ စေတြ႔တာက Markup Tags ေတြနဲ႔ ဖြဲ႔စည္းထားတဲ့ HTML Document ပါ၊ HTML Documents ေတြကိုပဲ လူေတြအတြက္ အျမင္ရွင္းေအာင္ ဖတ္ရလြယ္ေအာင္ browser ေတြက ဘာသာျပန္လိုက္ၾကတယ္၊ ဥပမာ <h1> This is heading </h1> ဆိုတဲ့စာသားကိုေတြ႔ရင္ browser ေတြက ေအာ္ ဒါက <h1> ဆိုတဲ့ Tag ကိုသံုးထားေတာ့ သူ႔ထဲမွာရွိတဲ့စာသားေတြက ေခါင္းစဥ္ျဖစ္မယ္၊ ဒီေတာ့ သူ႔ကို တျခားစာလံုးေတြနဲ႔ မတူတဲ့ ေခါင္းစဥ္စာလံုးပံုေျပာင္းေပးလိုက္မယ္ ဆိုျပီး ေခါင္းစဥ္အျဖစ္ေျပာင္းေပးလိုက္တယ္၊ ဒါကိုဘာသာျပန္တယ္လို႔ေခၚတယ္၊ HTML Tags ေတြကို ေတာ့ထည့္မျပန္ဘူး၊ ဒါေပမယ့္ HTML tags ေတြရဲ့ မွတ္သားမူေတြအတိုင္း ဘာသာျပန္လိုက္တယ္၊
ဒီသင္ခန္းစာမွာ မိတ္ဆက္အေနနဲ႔ HTML အေၾကာင္းကိုပဲ ရွင္းျပထားတယ္၊ ေနာက္ သင္ခန္းစာမွာေတာ့ အျခခံတည္ေဆာက္ပံုကိုေလ့လာမယ္၊

ref:  http://www.72coder.com/

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>
 

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

 လယ္တီေျမသား www.ledimyethar.blogspot.com

 ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/

 ဓမၼႏွင့္စာေပနန္းေတာ္ http://ninilayy.blogspot.com/