M-HTMl Paragraph

HTML Paragraph

သင့္၀က္ဆိုက္မွာ စာေရးတဲ့အခါ စာပိုက္ေတြကိုခြဲျပီးေရးႏိုင္တယ္၊ စာပိုဒ္ တစ္ပိုဒ္ စီမွာေတာ့ စာပိုဒ္ျဖစ္ေၾကာင္း HTML Tags နဲ႔ မွတ္သားထားရမယ္၊ စာပိုဒ္ အတြက္ အသံုးျပဳတဲ့ HTML Tags ကေတာ့ အဖြင့္
နဲ႔ အပိတ္
တို႔ပါ၊ အဖင့္
နဲ႔ အပိတ္
တို႔ကို စာပိုဒ္တစ္ခုရဲ့ အစ နဲ႔ အဆံုးမွာထည့္ေပးျပီး စာပိုဒ္ျဖစ္ေၾကာင္းကို သတ္မွတ္ရပါတယ္၊ ေအာက္က ဥပမာ ကိုၾကည့္ပါ၊





You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see.
You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see.


အထက္က HTML Document ကို Run ၾကည့္လုိက္ပါ၊ ဒါဆိုေရးထားတုံုးက ေရာေရးထားေပမယ့္ သင့္၀က္ဆိုက္မွာေတာ့ စာပိုဒ္ေတြခြဲျပီး ေဖာ္ျပေနတာကိုေတြ႔ရမွာပါ၊ ဒါကေတာ့ အဖြင့္
နဲ႔ အပိတ္
ဆိုတဲ့ Paragraph tags ထည့္ထားလို႔ပါ၊
HTML Line Break
စာပိုက္ေတာ့မခြဲခ်င္ဘူး စာေၾကာင္းပဲ ျခားခ်င္တယ္ဆိုရင္လဲ စာေၾကာင္းျခားတဲ့ HTML tag ျဖစ္တဲ့ line break
ကိုသံုးႏိုင္ပါတယ္၊ တစ္ခ်ိဳ႕ေတာ့ ေနာက္က မ်ဥ္းေစာင္းကိုထည့္မေရးဘူး၊
က အဖြင့္ ပိတ္ကို တစ္ခုထဲမွာပဲ လုပ္သြားတယ္၊ ေျပာခ်င္တာက အဖြင့္
နဲ႔ အပိတ္
ဆိုျပီးမရွိဘူး၊
ဆိုျပီးတစ္လံုးထဲပဲထည့္ရတယ္၊ အဖြင့္ နဲ႔ အပိတ္ မရွိတာေၾကာင့္ သူ႔ကို self closing tag လို႔ေခၚတယ္၊ ထည့္ရမယ့္ ေနရာကို စာေၾကာင္းကို အဆံုးသတ္ျပီး ေနာက္တစ္ၾကာင္းကိုေျပာင္းေစခ်င္တယ္ဆိုရင္ အဲ့ဒီ့ အဆံုးသတ္မယ့္ စာေၾကာင္းရဲ့ ေနာက္ဆံုးမွာထည့္ရမွာ၊ ေအာက္မွာဥပမာကိုၾကည့္ပါ၊





You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.



အထက္က ဥပမာမွာ အဆံုးသတ္လိုတဲ့စာေၾကာင္းေတြရဲ့ေနာက္မွာ
ကိုထည့္ထားတယ္၊ ဒါေၾကာင့္ အဲ့ဒီ့စာေၾကာင္းအဆံုးသတ္သြားျပီး ေနာက္ေရးသမွ်စာေတြအားလံုး ေနာက္တစ္ၾကာင္းကိုေရာက္သြားမယ္၊
စာေၾကာင္းျခားတဲ့ Tag ျဖစ္တဲ့
နဲ႔ စာပိုက္ျခားတဲ့ tags ျဖစ္တဲ့
တို႔မတူၾကပါဘူး၊ စာပိုဒ္ tag အတြက္ browser က ေရွ႕နဲ႔ ေနာက္မွာ ေနရာလြတ္ခ်န္ေပးထားပါတယ္၊ ႏို႔ေပမယ့္ စာေၾကာင္းျခားတဲ့
tag အတြက္ေတာ့ ေနရာလြတ္မထားေပးပါဘူး၊
HTML Horizonal Line
စာပိုက္တစ္ခုေအာက္မွာမ်ဥ္းေၾကာင္း ထားလို႔ရပါတယ္၊ Line မ်ဥ္းေၾကာင္းကို ကိုစားျပဳတဲ့ HTML tag ကေတာ့

---

ျဖစ္ပါတယ္၊ သူလဲ Line break tag
လိုပဲ self closing tag ပါ၊ အဖြင့္ အပိတ္ ႏွစ္ခုမရွိဘူး၊ မ်ဥ္းတားလိုတဲ့ စာပိုဒ္ရဲ့ေအာက္မွာ

---

လို႔ထည့္ေပးလိုက္တာနဲ႔ မ်ဥ္းေၾကာင္း တစ္ေၾကာင္းတားျပီးသားျဖစ္သြားမယ္၊ ေအာက္မွာဥပမာၾကည့္ပါ၊




You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

---

You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

---

You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

---

You win it’s your show now so what is gonna be, cause people will tune in how many trined trick do we need to see, befor loose touch of we though this was slow, will it’s best getting worse where would all good people go.

---

အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ စာတစ္ေၾကာင္းအဆံုးလို႔သတ္မွတ္ျပီး

---

ထည့္ထားတဲ့စာသား အဆံုးမွာ မ်ဥ္းေၾကာင္းတစ္ေၾကာင္းဆြဲထားတာေတြ႔လိမ့္မယ္၊ အထက္က ဥပမာ မွာေတာ့

---

ေလးခုပါေတာ့ မ်ဥ္းေလးေၾကာင္းေပါ့၊

---

ကိုသံုးထားရင္ line break
ကိုသံုးစရာမလိုေတာ့ပါဘူး၊ HTML tag နဲ႔ ထည့္ထားတဲ့မ်ဥ္းေၾကာင္းေတြကို အရြယ္အစား နဲ႔ အေရာင္ခ်ိန္ညွိလို႔ရပါတယ္၊ ေနာက္ပိုင္းမွာ သင္ျပေပးပါမယ္၊
HTML Comments
HTML Doucment တစ္ခုေရးရင္း မွတ္သားစရာေပၚလာတယ္၊ မွတ္ခ်က္ထည့္စရာေပၚလာခဲ့တယ္ဆိုရင္ျဖင့္ အဲ့ဒီ့ HTML Document ထဲမွာပဲ မွတ္သားထားႏိုင္ပါတယ္၊ ေအာက္မွာ HTML Comment ထည့္တဲ့ ပံုကိုၾကည့္ပါ၊




hey what are you doing



အထက္က HTML Document ကို Run လိုက္ရင္ hey what are you doing ဆိုတဲ့ စာသားကိုေတြ႔ရမယ္၊ ဒါေပမယ့္ I am learning HTML ဆိုတဲ့စာသားကိုေတာ့ မေတြ႔ရပါဘူး၊ အေၾကာင္းကေတာ့ ဆိုတဲ့စာသားက comment ျဖစ္ေနလို႔ပါ၊ အလုပ္လုပ္ေနရင္း မွတ္သားခ်င္တာေတြရွိရင္ အဲ့ဒီ့ comment ထည့္တဲ့နည္းကိုသံုးျပီး မွတ္သားႏိုင္ပါတယ္၊ ေရးပံုကေတာ့ တို႔ ၾကားမွာ မွတ္သားလိုတဲ့ စာသားမွန္သမွ် ေရးရပါတယ္၊

www.72coder.com မွ ကူးယူေဖာ္ျပျခင္းျဖစ္သည္ 

M-HTML Heading

HTML  heading
သတင္းစာေတြမွာ ေခါင္းစဥ္စားလံုးကိုအၾကီးနဲ႔ေရးၾကပါတယ္၊ ဒီလိုပဲ သင့္၀က္ဆိုကမွာလဲ ေခါင္းစဥ္စာလံုးေတြကို စာလံုးအၾကီးနဲ႔ ေရးလိုရပါတယ္၊ စာလံုး အၾကီး ေတြကို 1 က ေန 6 အထိ တျဖည္းျဖည္း ေသးသြားတယ္၊ h1 က အၾကီးဆံုးျဖစ္ျပီး h6 က အေသးဆံုး၊ HTML Tag ေတြရဲ့သဘာ၀အတိုင္း သူတို႔အားလံုးမွာ အဖြင့္အပိတ္ဆိုျပီးရွိၾကတယ္၊ ေအာက္က ဥပမာ ကို ၾကည့္၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<h1> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး </h1>
<h2> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h2>
<h3> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h3>
<h4> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h4>
<h5> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h5>
<h6> ေခါင္းစဥ္အရြယ္အစား 1 စာလံုး</h6>
</body>
</html>
အထက္က ဥပမာ ကို Run လိုက္ပါ၊ ဒါဆိုရင္ေတာ့ သင့္၀က္ဆိုက္စာမ်က္ႏွာမွာ မတူညီတဲ့ အရြယ္အစားရွိတဲ့ စာလံုးေတြေပၚလာမယ္၊ အဲ့ဒီ့ ကေန ေခါင္းစဥ္စာလံုး ေတြကို ဘယ္ အရြယ္အစား သံုးခ်င္လဲ သံုးသင့္လဲ ဆိုတာကို နမူနာယူပါ၊ ေနာက္ပိုင္းေရးတဲ့အခါ က်ရင္ေတာ့ သင္ၾကိဳက္တဲ့ ေခါင္းစဥ္အရြယ္အစားသံုးျပီးေရးႏိုင္တယ္၊ သတိထားရမွာက အဖြင့္အပိတ္ ႏွစ္ခုလံုးပါေအာင္ေရးဖို႔ပဲ၊
Headings Are Important
တခ်ဳိ႕ေတြက စာလံုးၾကီးရင္ျပီးေရာဆိုျပီး Strong Tag , Bold Tag နဲ႔ Font size ေတြ သံုးျပီး ေခါင္းၾကီးစာလံုးေတြကို ျပဳျပင္ၾကပါတယ္၊ ေခါင္းၾကီးစာလံုးရဲ့ ့heading Tags ကိုေတာ့ မသံုးၾကေတာ့ဘူး၊ 72coder က အၾကံျပဳခ်င္တာကေတာ့ ေခါင္းစဥ္အတြက္ heading tag ေတြကိုပဲသံုးပါ၊ ဒါမွမဟုတ္ရင္ျဖင့္ ေနာက္ပိုင္း စာမ်က္ႏွာေတြအမ်ားၾကီးပါတဲ့ ဆိုက္ ၾကီးေတြကို CSS သံုးျပီး အလွဆင္ရင္ျပသနာျဖစ္တတ္ပါတယ္၊ ဒီ့အျပင္ heading Tag ေတြနဲ႔ ၀ိုင္းထားတဲ့စာသားေတြကို browser ကေတြ႔ရင္ အဲ့ဒီ့ heading tag မွာပါတဲ့စာသားရဲ့ ေရွ႕နဲ႔ ေနာက္မွာ ေနရာလြတ္ကိုအလုိေလွ်ာက္ခ်န္ေပးထားတယ္၊ ေနရာလြတ္ဆိုတာ တျခား စာသားေတြမၾကဴးေက်ာ္လာႏိုင္ေအာင္မ်ဥ္တာေပးထားတာ၊ မ်ဥ္းကိုေတာ့မေတြ႔ရပါဘူး၊ ဒါေပသည့္ရွိပါတယ္၊
ေနာက္အရမ္းအေရးၾကီးတဲ့အခ်က္က Search enging ျဖစ္တဲ့ Google တို႔ Yahoo တို႔က သင့္ရဲ့ ဆိုက္ရွိ အေၾကာင္းအရာေတြကို ရွာေဖြတဲ့အခါမွာ သင့္၀က္ဆိုက္ရဲ့ heading ေခါင္းစဥ္ကို မူတည္ျပီးရွာပါတယ္၊ ဒါေၾကာင့္ heading tag မသံုးရင္ Search engine က သင့္ဆိုက္ကိုရွာရတာ ခက္ခဲပါတယ္၊
သင့္ဆိုက္ကို ၀င္ေရာက္ေလ့လာသူေတြအေနနဲ႔လဲ ေခါင္းစဥ္ကို ရွာျပီး သူလိုအပ္တဲ့ အေၾကာင္းအရာ ဟုတ္လားမဟုတ္လားကိုအလြယ္တစ္ကူဆံုးျဖတ္ႏိုင္မွာပါ၊

အေရးၾကီးရင္ ၾကီးသလို heading tags ေတြကို ခ်ိန္ျပီးသံုးႏိုင္ပါတယ္၊ သိပ္အေရးၾကီးတယ္ဆိုရင္ျဖင့္ အေရးၾကီးတဲ့စာသားကို h1 နဲ႔ ေရး၊ ေခါင္းစဥ္မွန္သမွ်ကိုေတာ့ heading tags ထည့္ျဖစ္ေအာင္ထည့္ ဒါမွ အသံုျပဳသူေတြက အေၾကာင္းအရာတစ္ခုကိုရွာမယ္၊ အဲ့ဒီ့ အေၾကာင္းအရာက သင့္၀က္ဆိုက္မွာ ပါတယ္ဆိုရင္ Search Engine က သင့္၀က္ဆိုက္ကို အလြယ္ေလးရွာေတြ႔မွာ၊
HTML Link
HTML မွာ လင့္ေတြထည့္လို႔ရတယ္၊ ဥပမာ သင္ ရဲ့ ၀က္ဆိုက္စာမ်က္ႏွာကေန အျခား ၀က္ဆိုက္စာမ်က္ႏွာကို လွမ္းညြန္းလို႔ရတယ္၊ လင့္ထည့္ဖို႔အတြက္သံုးရတဲ့ HTML tag ကေတာ့
<a> tag ပါ၊ အဖြင့္ကို <a> လို႔ေရးျပီး အပိတ္ကိုေတာ့ </a> လို႔ေရးပါတယ္၊ ဥပမာ သင့္ဆိုက္မွာ 72coder.com ဆိုက္ကိုလင့္ခ်ိတ္မယ္ဆိုရင္ အဖြင့္ HTML Link tag ရဲ့အတြင္းမွာ ခ်ိတ္မယ့္ဆိုက္ရဲ့နာမည္ကိုေရးေပးရတယ္၊ ခ်ိတ္မယ့္ဆိုက္ရဲ့နာမည္ကိုေရးတဲ့အခါ href လို႔ေခၚတဲ့ hyper reference ကိုပါထည့္ရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<a href= “72coder.com”>ဒီဆိုက္ကိုသြားလည္ပါ</a>
အထက္က ကုတ္ကို Run ၾကည့္လိုက္ရင္ျဖင့္ ဒီဆိုက္ကိုသြားလည္ပါဆိုတဲ့စာသားကို အျပာေရာင္နဲ႔ ေရးထားတာေတြ႔မယ္၊ အျပာေရာင္ရဲ့သေဘာကေတာ့ အဲ့ဒီ့စာသားမွာ လင့္ပါတယ္ ဆိုတဲ့သေဘာပါ၊ အဲ့ဒီ့စာသားကို ႏွိပ္လိုက္ရင္ (အင္တာနက္ခ်ိတ္ထားရင္) 72coder.com site ကို သင့္ကိုေခၚသြားလိမ့့္မယ္၊ ဒါကေတာ့ သင့္ဆိုက္မွာ လင့္ခ်ိတ္တဲ့ပံုပါ၊ သံုးတဲ့ HTML Tags က <a> နဲ႔ </a> တို႔ပါ၊ အဖြင့္ <a> ရဲ့အတြင္းမွာ href= “ ” လို႔ထည့္ေပးျပီး ႏွစ္ထပ္ေကာ္မာရဲ့ ၾကားမွာေတာ့ သင္လင့္ခ်ိတ္လိုတဲ့ ဆိုက္ရဲ့နာမည္ကို ထည့္ရပါတယ္၊ “ဒိဆိုက္ကိုသြားလည္ပါ” ဆိုတဲ့စာသားကိုေတာ့ သင္စိတ္ၾကိဳက္ လိုအပ္တဲ့စာသားေရးလို႔ရတယ္၊ အဲ့ဒီ့စာသားက ၀က္ဆိုက္စာမ်က္ႏွာမွာ ေပၚမယ့္စာသား၊
အထက္မွသံုးခဲ့ href = “ ” ကေတာ့ target link ျဖစ္ပါတယ္၊ သူ႔အေၾကာင္းကိုေတာ့ ေနာက္ပိုင္း  HTML Link ေတြကို အေသးစိတ္ရွင္းျပရင္ ထည့္သြင္းရွင္းျပေပးပါမယ္၊

www.72coder.com မွ ကူးယူေဖာ္ျပျခင္းျဖစ္သည္ 

M-HTML BASIC FORM OF FRAME

HTML Basic Form or Frame
HTML မွာ အေျခခံတည္ေဆာက္ပံုရွိတယ္၊ HTML ရဲ့ Frame လို႔ေခၚတယ္၊ HTML Document တစ္ခုကိုေရးတိုင္း HTML Frame ကပါကိုပါရမယ္၊ ေအာက္မွာ အေျခခံ HTML Frame ကိုတည္ေဆာက္ပံုကို တဆင့္စီရွင္းျပမယ္၊
ပထမအဆင့္
ဒီအဆင့္မွာေတာ့ အခုေရးမွာက HTML Document ျဖစ္ေၾကာင္း ကိုေျပာတဲ့ Document type ဆိုတဲ့ Document အမ်ိဳးအစားကို HTML ကို ဘာသာျပန္မယ့္ browser ကသိေအာင္ မိတ္ဆက္မယ္၊ ဒီအတြက္သံုးတဲ့ သေကၤသကေတာ့ <!DOCTYPE html> ပါ၊ <!DOCTYPE html> သေကၤသကို သင္ေရးတဲ့ HTML Document တိုင္းရဲ့ ထိပ္ဆံုးမွာထည့္ေပးရပါတယ္၊ ဒါမွ အဲ့ဒီ့ စာမ်က္ႏွာကို ဘာသာျပန္မယ့္ web browser က ဘယ္လို Doucment အမ်ိဳးအစားလဲဆိုတာကိုသိျပီး လြယ္လြယ္ကူကူ ဘာသာျပန္ႏိုင္မယ္၊
ဒုတိယ အဆင့္           
ဒီအဆင့္မွာေတာ့ အခုက စလို႔ HTML ဖိုင္ကိုစေရးပါပီလို႔ေၾကျငာ ဖို႔အတြက္ HTML Tags ကိုထည့္ေပးရမယ္၊ အဖြင့္နဲ႔ အပိတ္ ႏွစ္ခုရွိတယ္၊ ေအာက္မွာ ထည့္ပံုကိုၾကည့္၊
<!DOCTYPE html>
<html>

</html>
အထက္မွာေတာ့ အဖြင့္နဲ႔ အပိတ္ HTML Tags ေတြကိုထည့္လိုက္တယ္၊ အပိတ္မွာ forwards slash (ေရွ႕ ကိုေစာင္းေနတဲ့ မ်ဥ္းေစာင္း ပါတာကို သတိျပဳပါ၊)  <html> နဲ႔ </html> တို႔ကိုေတာ့ web borwser က HTML ဖိုင္ကို <html> ဆိုတဲ့ ေနရာကစျပီး </html> အထိ အားလံုးက HTML ဖိုင္ျဖစ္ပါတယ္လို႔ အသိေပးလိုက္တာ၊ ေနာက္ပိုင္း ေရးသမွ် HTML Tags ေတြေကာ စာသားေတြေကာကိုပါ၊ <html> အဖြင့္နဲ႔ </html> အပိတ္တို႔ၾကားမွာေရးရမယ္၊
တတိယ အဆင့္
ဒီအဆင့္မွာေတာ့  HTML Doucment ရဲ့ ေခါင္းၾကီးပိုင္း ကိုသတ္မွတ္မယ္၊ ေခါင္းၾကီးပိုင္းျဖစ္တဲ့ heading ရဲ့ ကုိစားျပဳ HTML tags က  အဖြင့္ <head> နဲ႔ အပိတ္ </head> တို႔ပါ၊  သူတို႔ကို <html> နဲ႔ </html> တို႔ၾကားထဲမွာထည့္ေရးရတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
</head>
</html>
အထက္မွာေတာ့ ေခါင္းၾကီးပိုင္း သတ္မွာတဲ့ HTML tags ေတြျဖစ္တဲ့ အဖြင့္ <head> နဲ႔ အပိတ္ </head> တို႔ကိုေရးျပီးသြားပါပီ၊ သူတို႔ သာလွ်င္မက အျခား မည္သည့္ HTML Tags ေတြကုိမဆို <html> နဲ႔ </html> တို႔ၾကားထဲမွာထည့္ေရးရမယ္၊
စတုတၳအဆင့္
ဒီအဆင့္မွာေတာ့ ေခါင္းစဥ္ကိုတပ္မယ္၊ ေခါင္း ၾကီးပိုင္းနဲ႔ ေခါင္းစဥ္နဲ႔ မတူပါဘူး၊  ေခါင္းစဥ္ Title တပ္ဖို႔အတြက္ သံုးရတဲ့ HTML Tags ကေတာ့ အဖြင့္ <title> နဲ႔ အပိတ္ </title> တို႔ပဲျဖစ္ပါတယ္၊ ေခါင္းစဥ္ Tags ေတြကိုေတာ့ ေခါင္းၾကီးပိုင္း Tags  ေတြျဖစ္တဲ့ <html> နဲ႔ </html> တိွ် စာသား ပံု လင့္ ဇယား မွန္သမွ်ကို အဲ့ဒီ့ <body> အဖြင့္နဲ႔ </body> အပိတ္တို႔ၾကားမွာေရးပါတယ္၊
အထက္က ကုတ္ေတြရဲ့ အဖြင့္ <body> နဲ႔ အပိတ္ ္ျဖစ္တဲ့ My Web Page ကို ေခါင္းစဥ္ tags ေတြျဖစ္တဲ့ <title> နဲ႔ </title> ရဲ့ၾကားမွာထည့္ထားတာကိုေတြ႔ရမယ္၊ ေခါင္းစဥ္ နဲ႔ ပတ္သတ္တဲ့ Element ကိုေတာ့ ေခါင္းၾကီးပိုင္း Tags ေတြျဖစ္တဲ့ <head> နဲ႔ </head> တို႔ရဲ့ ၾကားမွာ ထားကိုထားရမယ္၊
ပဥၥမ အဆင့္
ဒီအဆင့္ကေတာ့ သင္ရဲ့ ၀က္ဆိုက္တစ္ခုလံုးကိုေပၚေစတဲ့ အပိုင္းပါ၊ သင္ျမင္ေတြ႔ေနရတဲ့ ၀က္ဆိုက္မွန္သမွ်က ဒီအစိတ္အပိုင္းက ေနလာပါတယ္၊ သူ႔ကိုေတာ့ body လို႔ေခၚတယ္၊ သူ႔ကိုေရးရာမွာ အသံုးျပဳတဲ့ HTML Tags ကေတာ့ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ပါ၊ သူတို႔ကိုေတာ့ ေခါင္းၾကီးပိုင္း       Tag  ရဲ့ အဆံုးျဖစ္တဲ့ </head> ရဲ့ ေအာက္မွာထည့္ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
</body>
</html>
အထက္က HTML ဖိုင္မွာ <body> နဲ႔ </body>  တို႔ကို ေခါင္းၾကီးပိုင္း Tag အဆံုးျဖစ္တဲ့ </head> ရဲ့ေနာက္မွာထည့္လိုက္ပါပီ၊ ေနာက္ပိုင္းသင့္ ၀က္ဆိုက္ရဲ့ စာမ်က္ႏွာမွာ ေပၚလိုသမွ် စာသား ပံု လင့္ ဇယား မွန္သမွ်ကို အဲ့ဒီ့ <body> အဖြင့္နဲ႔ </body> အပိတ္တို႔ၾကားမွာေရးပါတယ္၊
အထက္က ကုတ္ေတြရဲ့ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ၾကားမွာ စာတစ္ေၾကာင္းေလာက္ထည့္လိုက္မယ္၊ ထည့္မယ့္စာေၾကာင္းကို Paragraph စာပိုဒ္ အေနနဲ႔ထည့္မယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<p> Howddy Buddy! This is my Site </p>
</body>
</html>
အထက္က  HTML Document ကို Run လိုက္ရင္ေအာက္ပါအတိုင္းစာမ်က္ႏွာကိုေရရွိပါမယ္၊

အထက္က ပံုကေတာ့ ေရးခဲ့တဲ့ ကုတ္ေတြကို Run လိုက္ရင္ရမယ့္ Web page ပါ၊ (ပံုကေတာ့ ေသးေအာင္ခ်ံဳ႕ထားတာ)၊ အစိမ္းေရာင္ ျမားျပထားတဲ့ ေနရာကေတာ့ သင္ကုတ္ေတြေရးတုံးက ေခါင္းစဥ္ေနရာမွာ <title>My Web page</title> လို႔ေရးခဲ့တဲ့အပိုင္းကို ကိုစားျပဳတဲ့ ေခါင္းစဥ္စာသားပါ၊ Web browser က ဘာသာျပန္ျပီးေခါင္းစဥ္ရွိရမယ့္ ေနရာျဖစ္တဲ့ ျမားစိမ္းျပထားတဲ့ ေနရာကိုပို႔လိုက္တာ။ ဒီေတာ့ အဖြင့္ <title> နဲ႔ အပိတ္ </title> တို႔ၾကားမွာ ဘာေရးေရး တကယ့္ ၀က္ဆိုက္မွာ ဖြင့္ၾကည့္ရင္ အဲ့ဒီ့ေရးထားတဲ့ စာသားေတြေပၚမယ့္ေနရာက အစိမ္းေရာင္ျမားျပထားတဲ့ေနရာပါ၊
အနီေရာျမားျပထားတဲ့ေနရာကေတာ့ သင့္၀က္ဆိုက္ ရဲ့နာမည္ေပၚမယ့္ေနရာပါ၊ ဥပမာ 72coder.com က သင့္၀က္ဆိုက္နာမည္ဆိုရင္ အဲ့ဒီ့ အနီေရာင္ျမားျပထားတဲ့ေနရာမွာ 72coder.com လို႔ေပၚေနမယ္၊ အခုေတာ့ ကြန္ျပဴတာထဲမွာပဲ Run ထားတဲ့ အတြက္ ကြန္ျပဴတာထဲရွိ HTML Document သိမ္းထားတဲ့ေနရာကိုပဲျပေနပါတယ္၊
အနက္ေရာင္ျမားျပထားတဲ့ ေနရာ (အဲ့ဒီ့အျဖဴေရာင္မ်က္ႏွာျပင္တစ္ခုလံုး) ကေတာ့ သင္ HTML Frame ကိုေရးတုန္းက အဖြင့္ <body> နဲ႔ အပိတ္ <body> ၾကားမွာ ေရးခဲ့တဲ့ Howddy Buddy! This is my site ဆိုတဲ့စာသားေပၚေနမယ့္ေနရာပါ၊ သင္ အဖြင့္ <body> နဲ႔ အပိတ္ </body> တို႔ၾကားထဲမွာဘာပဲေရးေရး အဲ့ဒီ့ ျမားအနက္ရွိတဲ့ အျဖဴေရာင္မ်က္ႏွာျပင္မွာေပၚမွာပါ၊
ဒီသင္ခန္းစာကိုေသခ်ာနားလည္ေအာင္ ေလ့လာပါ

www.72coder.com မွ တင္ျပခ်က္ကို ကူးယူေဖာ္ျပသည္

M-What is HTML

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 အေၾကာင္းကိုပဲ ရွင္းျပထားတယ္၊ ေနာက္ သင္ခန္းစာမွာေတာ့ အျခခံတည္ေဆာက္ပံုကိုေလ့လာမယ္


 www.72coder.com မွ ကူးယူေဖာ္ျပျခင္းျဖစ္သည္