HTML လို႕ ေျပာလိုက္ရင္ IT field ထဲကလူေတြ သိျပီးသားျဖစ္ေနလိမ့္မယ္။
အိုေက။ ဒါေပမယ့္ မသိတယ့္ လူေတြလဲ ..ရိွေသး တယ္။
အခု မွ HTML နဲ႕ပက္သက္ျပီး ေလ့လာခ်င္တယ့္ လူေတြ၊
IT field မွာ အခုမွ စေျခခ်မယ့္ ညီကိုေမာင္နွေတြ အတြက္ Knowledge ရေစဖို႕ ဒီtitle ေလးတည္လိုက္တယ္။
Html ဆိုတာ programming language မဟုတ္ပါဘူး။သူက markup language တစ္ခုပါ။
Markup tags ေတြနဲ႕ေရးသားရတယ့္ language တစ္ခုေပါ့၊ ျမန္မာမႈျပဳရရင္ markup အမွတ္အသားလုပ္ထားေသာ၊ tag စာအပိုင္းအစေလးေပါ့ေလ။ ျမင္သာေအာင္ေျပာရရင္
Facebook ၾကီးမွာ ေဘာ္ေဘာ္ေတြနဲ႕ ရိုက္ထားတယ့္ဓါတ္ပံုေတြ တင္ၾကတယ့္အခါမွာ ပံုထဲက သယ္ရင္း ေတြကို လည္း share ခ်င္ရင္ tag လုပ္ေလ့ရိွၾကတယ္။အဲ့မွာ နာမည္ေလးေတြ ေရးျပီး ေတာ့ သူကေတာ့ဘယ္သူ ဘယ္၀ါ ဆိုျပီး သတ္မွတ္လိုက္ၾကတယ္ အမွတ္အသားတစ္ခု အျဖစ္ေပါ့။
ဒီ HTML ကလည္းအဲလိုပဲ ကိုယ္ေပၚေစခ်င္တယ့္ စာသားတစ္ခု ကို အရြယ္ၾကီးေစခ်င္ရင္ ၾကီးခ်င္သလို၊ေသးရင္ေသးခ်င္သလို HTML tag ေတြသံုးျပီးေတာ့ သတ္မွတ္ရတယ့္ markup language တစ္ခု ပါ။HTML tag ေတြကေတာ့စုစုေပါင္း အခု ၁၂၀ ေလာက္ရိွတယ္။ ရပါတယ္
ကိစၥမရိွပါဘူး web page တစ္မ်က္ႏွာေပၚဖို႕အတြက္ အဲ့ဒီ့ေလာက္မလိုအပ္ပါဘူး။ဒါေၾကာင့္
အကုန္မွတ္မိဖို႕ မၾကိဳးစားပါနဲ႕ reference ေတြအမ်ားၾကီးရိွပါတယ္ ကၽြန္ေတာ္ တို႕က exam
ေျဖေနတာ မဟုတ္တယ့္အတြက္ လိုအပ္တယ့္အခ်ိန္မွာ အကူအညီယူလို႕ရပါတယ္။
အိုေက ဒါဆို HTML sentence အေၾကာင္းနဲနဲေျပာရေအာင္-
HTML sentence က ရိုးရွင္းတယ္၊ပံုေသပဲ မေျပာင္းလဲဘူး ဒီဟာေရးရင္ ဒီ output ထြက္တယ္။sentence ပံုစံကို ျမင္ေအာင္ေျပာ ရရင္ သူ႕မွာ လည္း လူေတြလိုပဲ Head ေတြ Body ေတြရိွတယ္။ဒါေပမယ့္ လူေတြမွာပါတယ့္ဟာ အကုန္လံုးသူ႕မွာ မပါသလို ၊ သူ႕မွာ ပါတယ့္ ဟာေတြလဲ လူေတြမွာ မပါဘူးေပါ့(ကပ္သပ္ စဥ္းစားတက္တယ့္ လူေတြကိုေျပာတာပါ J)။အိုေက ထားေတာ့။
HTML ကို tag ေတြနဲ႕ အသံုးျပဳျပီး create လုပ္ထားတယ္လို႕ ေျပာခဲ့တယ္။အဲ့ဒီေတာ့ သူရဲ႕tag ဘယ္လိုဖြဲ႕စည္းထားလဲ ၾကည့္ရေအာင္။
သူ႕မွာ open tag နဲ႕ close tag အစံုေတြ အမ်ားဆံုးပါတယ္။
ဥပမာ- <tagName>ေပၚခ်င္တယ့္စာသား</tagName>
တစ္ခ်ိဳ႕ က self closing tag-
ဥပမာ - </tagName>
နမူနာ ေနနဲ႕
HTML file တစ္ခု ကိုစေရးမယ္ဆိုရင္
<html> ဆိုတယ့္ open tag နဲ႕ </html>ဆိုတယ့္ close tag ၂ခုၾကားမွာေရးရတယ္။
သူ႕အထဲမွာမွ ကၽြန္ေတာ္ ေျပာခဲ့သလို <head></head> ေတြ <body></body> ေတြရိွမယ္။ဒါဆို ေအာက္က ပံုကို ေလ့လာၾကည့္ရေအာင္ ။
ဒီ screen shot ေလးကို ၾကည့္ျပီး စာအမ်ိဳးအစားခ်င္းတူေပမယ့္ မတူညီတယ့္ html tags ေတြေၾကာင့္ ပံုစံအမ်ိဳးမ်ိဳးနဲ႕ ေနရာအမ်ိဳးအမ်ိဳးထြက္လာတာ သတိျပဳမယ္ လို႕ ယူဆတယ္။
သံုးခဲ့တယ့္ tag ေတြကို ေျပာျပရရင္ -
<html></html>- ဒီ tag ကေတာ့ အားလံုးရဲ႕ အခ်ဳပ္ေပါ့။
<head></head>- head ပုိင္းဆိုေတာ့ <html> ျပီးရင္ ထိပ္ဆံုးကေပါ့။
<title></title> - <head></head> tag အထဲမွာ ရိွရတယ္။သူ႕ထဲမွာထည့္တယ့္စာသားကေတာ့
web page ရဲ႕ tab name(not tag)အေနနဲ႕ ေဖာ္ျပျခင္းခံရတယ္။
<body></body>- body ကေတာ့ web page တစ္ခုလံုးမွာ ေပၚမယ့္ content ေတြကို
သိုေလွာင္ထားတယ့္ ေနရာေပါ့။HTML tag ေတာ္ေတာ္မ်ားမ်ား က
<body></body> tag ထဲမွာပဲ ရိွတယ္လို႕ အရင္သိထားရင္ လံုေလာက္ျပီ။
<h3></h3> - “h” ဆိုတာက heading ကို ကုိယ္စားျပဳတယ္။အေနာက္ က “3” ကအရြယ္အစားကို
ျပတယ္ ။ သူ႕ရဲ႕အရြယ္အစား နံပါတ္က 1 ကေန 6 ထိရိွတယ္၊ <h1></h1> ကေန
<h6></h6> ေပါ့။စာပုဒ္ေတြ ရဲ႕ ေခါင္းၾကီးစာသားအျဖစ္ေပၚခ်င္ရင္ အသံုးျပဳေလ့
ရိွတယ့္ tag ေတြေပါ့။
<p></p> - “p” ကေတာ့ paragraph ကို ကိုယ္စားျပဳတယ္။ information ေတြကို စာပုဒ္ အလိုက္
ေဖၚျပခ်င္တယ့္ အခါေတြမွာအသံုးျပဳေလ့ရိွတယ္။
HTML file ဘယ္လိုေရးတာလဲဆိုတာေတာ့ အက်ဥ္းအားျဖင့္သိျပီ။ အဲ့ဒီ့ေနာက္ ဘယ္မွာေရးရမလဲ လို႕ေမးစရာရိွတယ္ ၊ ရွင္းပါတယ္ notepad မွာေရးေပါ့ J ။နဲနဲ ျမင့္တယ့္ editor
တာ သံုးခ်င္ ရင္ Note++ တို႕ Sublime Text တို႕နဲ႕ေရးလို႕ပိုအဆင္ေျပမႈရိွတယ္။
ျပီးေတာ့ file extension ကို .html or .htm နဲ႕ save လုပ္ျပီး double click နွိပ္ရံုနဲ႕ မိမိ မွာရိွတယ့္ web browser မွာ run လိုက္တယ့္ html webpage တက္လာမွာျဖစ္ပါတယ္။
ကဲဒါဆို ဒီေလာက္အထိ နားလည္မယ္လို႕ယူဆတယ္။ က်န္ရိွေနတယ့္ HTML tag ေတြအသံုးျပဳပံုကို
Sample demos မ်ားႏွင့္ေနာက္ tutorial ေတြမွာ နားလည္သေဘာေပါက္လြယ္ေအာင္ အတက္ႏိုင္
ဆံုးေဖာ္ျပသြားပါမယ္။ဒီတစ္ေခါက္ ေတာ့ ဒီေလာက္နဲ႕ပဲနားလိုက္ပါတယ္ ေက်းဇူးတင္ပါတယ္။
အထိန္းအကြပ္မရိွ က်ယ္က်ယ္ျပန္႕ျပန္႕ လြတ္လြတ္လပ္လပ္ ေတြးေခၚနိုင္ၾကပါေစ။
ေမတၱာေရွ႕ထား၍။
Author Name: Nyan Lynn Tun [itstudentpro]
<< Previous Chapter [Having fun with web development - Introduction]
[Having fun with web development - web server (chapter 2)] Next Chapter>>
[…] Having fun with web development – HTML ( chapter-1)Having fun with web development – IntroductionAndroid Device ေတြရဲ႔ Battery […]
ReplyDelete[…] Having fun with web development – web server (chapter 2)Having fun with web development – HTML ( chapter-1)Having fun with web development – IntroductionAndroid Device ေတြရဲ႔ Battery […]
ReplyDelete