Html-1 သင္ခန္းစာ
html_1
HTML Basic Form or FrameHTML မွာ အေျခခံတည္ေဆာက္ပံုရွိတယ္၊ 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> တို႔ရဲ့ ၾကားမွာထည့္ရ
ပါတယ္၊ ေအာက္မွာၾကည့္ပါ၊
<!DOCTYPE html>
<html>
<head>
<title>My Web page </title>
</head>
</html>
အထက္က ကုတ္မွာ ေခါင္းစဥ္ျဖစ္တဲ့ 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 လိုက္ရင္ေအာက္ပါအတိုင္းစာမ်က္ႏွာကိုေရရွိပါမယ္၊
အစိမ္းေရာင္ ျမားျပထားတဲ့ ေနရာကေတာ့ သင္ကုတ္ေတြေရးတုံးက ေခါင္းစဥ္ေနရာမွာ <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>
တို႔ၾကားထဲမွာဘာပဲေရးေရး အဲ့ဒီ့ ျမားအနက္ရွိတဲ့ အျဖဴေရာင္မ်က္ႏွာျပင္မွာေပၚမွာပါ၊ ဒီသင္ခန္းစာကိုေသခ်ာနားလည္ေအာင္ ေလ့လာပါ
No comments:
Post a Comment