HTML အေၾကာင္းမိတ္ဆက္
ယေန႕အခါမွာ Internet ဟာအလြန္က်ယ္ျပန္႕လာျပီး လူတိုင္းနီးပါးအသံုးျပဳၾကေပသည္။ကၽြန္ေတာ္တို႕ေတြဟာလည္း
Internetေပၚမွာ ကိုယ္ပိုင္ေနရာမ်ားကို ကိုယ္ပိုင္ Homepageမ်ားကို အလြယ္တကူယူေဆာင္ႏိုင္ေလျပီ။ Internet
ဆိုတာကို အက်ယ္ရွင္းမေနေတာ့ပါဘူး။အလြယ္ရွင္းရရင္ေတာ့ Internet ဆိုတာ ကမာၻေပၚရိွ ႏိုင္ငံအခ်င္းခ်င္း ခ်ိတ္
ဆက္ထားေသာ Networkကြန္ယက္ၾကီးတစ္ခုျဖစ္ပါသည္။ အဲဒီလို Information ေတြဖလွယ္ဖို႕အတြက္ Web Page
ေတြကို ေရးဆြဲရပါတယ္။Web Page ေရးဆြဲဖို႕ရာအတြက္ HTML ဟာ အဓိက က်ပါတယ္။ေရးသားထားတဲ့ Web Page
ေတြကို Web Browser Softwareနဲ႕ ၾကည့္ရႈရပါတယ္။ Web Broswer Software ေတြကInternet Explorer နဲ႕
Firefox တို႕က နာမည္ၾကီးေတြပါ။
HTML History
1989 ခုက Tim Berners-Lee နဲ႕ Rober Calliau ဟာ Research Documents ေတြကို ပိုမိုျမန္ဆန္ေကာင္းမြန္ မယ့္
နည္းလမ္းကို ရွာေဖြခဲ့ပါတယ္။ ၂ ႏွစ္ ေလာက္ၾကာေတာ့ Berners-Lee ဟာ browser ေတြက ၾကည့္ရႈဖတ္သားႏိုင္ျပီး
Tag မ်ားႏွင့္ ဖြဲ႕စည္းတည္ေဆာက္ထားတဲ့ နည္းပညာတစ္ခုကို ျပဳလုပ္ႏိုင္ခဲ့ပါတယ္။ ထို႕ေနာက္အဲဒီ tage ေတြထဲမွာ
Hyper-Link နဲ႕ document အခ်င္းခ်င္းခ်ိတ္ဆက္ႏိုင္တဲ့ tag ေတြပါထည့္သြင္းႏိုင္ခဲ့ပါသည္။ Berners-Lee ရဲ႕
နည္းပညာကို Hyber Text Markup Language ဆိုတဲ့ HTML ပါပဲ။
Tag ဆိုတာဘာလဲ
Tag ဆိုတာကေတာ့ ရိုးရိုး Text ေတြနဲ႕ HTML code ေတြကို ခြဲျခားလို႕ရေအာင္လုပ္ထားတာပါ။ ဘယ္လိုမ်ဳိးလဲဆိုရင္
ေတာ့ <b>This is bold </b> ဆိုရင္ web browser နဲ႕ ၾကည့္ရင္ စာလံုးဟာ bold ျဖစ္ေနပါလိမ့္မယ္။ အဲဒီမွာ <b>
နဲ႕ </b> တို႕ဟာ tag ေတြပါ။ အမ်ားအားျဖင့္ tag ေတြဟာ အဖြင့္ နဲ႕ အပိတ္ပါ ပါတယ္။ အပိတ္ဆိုရင္ / ေလးခံထားေပးရပါတယ္။
HTML အတြက္ Editor
HTML အတြက္ Editor ေတြ IDE ေတြအမ်ားၾကီးရိွပါတယ္။ ကၽြန္ေတာ္ကေတာ့ Dreamweaver အၾကိဳက္ဆံုးပါပဲ။
သူက HTML မတတ္ရင္ေတာင္ Website တစ္ခုဆြဲလို႕ရပါတယ္။ ဒါေပမယ့္ Dreamweaver ကိုသံုးရင္ေတာ့
HTML codeေတြသိလာမွာ မဟုတ္သလို တျခား website ေတြကို ျပင္ရတာလည္းခက္ပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕
ေတြ သူမ်ားေတြေပးထားတဲ့website template ကိုျပင္ခ်င္တယ္။ ကိုယ္ပိုင္ေသေသခ်ာခ်ာ HTML code ေတြကို
သိခ်င္တယ္။ ဒါဆိုရင္ေတာ့ ေလ့လာကာစမွာNotepad သံုးျပီးေလ့လာပါ။ ေလ့က်င့္ပါ။ HTML က web site ဆြဲရတဲ့
အထဲမွာ အလြယ္ဆံုးနဲ႕ အေျခခံအက်ဆံုးပဲ။သူ႕ကိုေသေသခ်ာခ်ာနားလည္ထားမွ တျခား web programming
ေတြျဖစ္တဲ့ PHP, ASP.NET , JSP , Ruy On Railတို႕မွာ အေထာက္အကူျဖစ္မွာပါ။
Notepad ျဖင့္စတင္ျခင္း
၁. Windows Key + R ကို ႏိွပ္လိုက္ပါ။ Run Dailog Box တက္လာပါမည္။ ထို႕ေနာက္ notepad လုိ႕ရိုက္လိုက္ပါ။
ျပီးလွ်င္ OK ကို ႏိွပ္လိုက္ပါ။ ဒါဆိုရင္ notepad တက္လာပါလိမ့္မယ္။
၂. Notepad ထဲတြင္ Format ေအာက္က word warp ကို check လုပ္ထားပါ ။ ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့
Word Warp က Notepad မွာစာရိုက္တာ ျပည့္သြားရင္ ေအာက္တစ္ေၾကာင္း ဆင္းသြားရန္အတြက္ ျဖစ္သည္။
HTML စတင္ေရးသားျခင္း
၁. Notepad ထဲတြင္ အခုလိုေရးသားလိုက္ပါ။
<html> <head><title>This is title</title> </head><body>This is body</body></html>
HTML နဲ႕ စျပီး HTML နဲ႕ျပန္ပိတ္ရပါတယ္။ အဲဒီၾကားမွာ html code ေတြေရးရပါတယ္။
Head Tag နဲ႕ Head Tag အပိတ္ၾကားတြင္ Title ထည့္ထားသည္ကို ေတြ႕ရမည္။ Title သည္
Browser ၏ ထိပ္ bar တြင္ ေတြ႕ျမင္ရန္ျဖစ္သည္။ Body အဖြင့္ နဲ႕ အပိတ္ၾကားမွာ မိမိ၏ ႏွစ္သက္ရာ
စာမ်ားေရးသားႏိုင္သည္ ။
၂. အဲဒါကို တေနရာ မွာ save သြင္းလိုက္ပါ။ Save Dialog box တက္လာရင္ filetype ကို All file လို႕ေပးလိုက္ပါ။
file name ကို firstrun.html လို႕ေပးလိုက္ပါ။ firstrun သည္ မိမိ၏ ႏွစ္သက္ရာ နာမည္ေပးႏိုင္သည္။ .html သည္
file extension ျဖစ္သည္။ HTML ေရးထားေသာ page မ်ားကို .html ႏွင့္ .htm လို႕ေပးမွသာ browser တြင္
ေပၚပါလိမ့္မည္။
၃. Save သြင္းလိုက္ေသာ file လမ္းေၾကာင္းကို သြားလိုက္ပါ ။ first.html file ေလးကို double
click လုပ္ျပီး ဖြင့္လိုက္ပါ ။ အဲ့ဒါဆို page ေလးတစ္ခုတက္လာတာကို ျမင္ရပါမယ္။ထိပ္ပိုင္းတြင္
File ပတ္လမ္းေၾကာင္းကို address bar တြင္ေတြ႕ရမည္ျဖစ္သည္။ title tag ထဲတြင္ ေရးထားေသာ
This is tile ဆိုေသာ စာကို Windos ၏ Title bar ႏွင့္ Tab Title bar တို႕တြင္ ေတြ႕ရမည္။ Body tag ထဲတြင္
ေရးထားေသာ This is body ဆိုေသာ စာသားကို စာမ်က္ႏွာအျဖဴေပၚတြင္ ေပၚေနသည္ကို ေတြ႕ရမည္ျဖစ္သည္။
ျပင္မယ္ဆိုရင္ေတာ့
IE7 မွာဆိုရင္Page > View Source ကိုႏိွပ္လိုက္ပါက Notepad နဲ႕ ကိုယ္ေရးထားတဲ့ HTML ပြင့္လာပါမယ္။
IE 6 မွာဆိရင္View > Source ကို ႏိွပ္လိုက္ပါက Notepad နဲ႕ ကိုယ္ေရးထားတဲ့ HTML ပြင့္လာပါမယ္။
အဲဒီမွာ ေရးထားတဲ့ codeေတြကို ဖတ္ႏိုင္သလို ကိုယ့္စက္ထဲမွာေရးထားတဲ့ page ဆိုရင္ေတာ့ ျပင္ျပီး တစ္ခါတည္း
save လုပ္ႏိုင္ပါတယ္။ Internet ေပၚက Web site ေတြကိုေတာ့ view > source ကေနဖြင့္ျပင္ျပီး save လုပ္လို႕မရပါဘူး။
Header Tag
notepad ထဲမွာ ဒီလိုရိုက္လိုက္ပါ
<html><head><title>Example Of Header</title></head><body><h1>This is Header</h1>
This is normal text</body></html>အဲဒီ code ေလးကို notepad ထဲမွာထည့္ေရး.. ျပီးေတာ့ run ၾကည့္လိုက္ပါ။
အခုလိုျမင္ရပါလိမ့္မယ္။ Head Tag က h1ကေန h6 အထိ ရိွပါတယ္။ နံပါတ္ၾကီးေလေလ ေသးသြားေလေလပဲ။
h6 ဆိုအေသးဆံုးကို ေရာက္သြားျပီ။ ကဲ လက္ေတြ႕စမ္းၾကည့္ရေအာင္။ notepad ထဲမွာ ေအာက္ကလို ရိုက္ျပီး
save လုပ္လိုက္။ ျပီးရင္ ဖြင့္ၾကည့္လိုက္ရင္ ေတြ႕ရပါလိမ့္မယ္။ <html><head><title>Example</title>
</head><body><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5>
<h6>H6</h6></body></html> အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာေလာက္ပါျပီ။
တကယ္တန္းေတာ့ မခက္ပါဘူး။ဒါကအစပဲ ရိွပါေသးတယ္။ ဒီေလာက္ေလးနဲ႕ပင္ စာေတြပဲပါတဲ့ page တစ္ခု
ေရးလို႕ရေနျပီ။ ဒါေပမယ့္ လိုအပ္တာေတြ ရိွေသးတာေပါ့။ အခုဆက္ျပီး bold ၊ italic ၊ underline လုပ္ပံုေလးေတြ
ဆက္ေျပာပါမယ္။ လြယ္ပါတယ္။
Line Break
HTML မွာ စာတစ္ေၾကာင္းဆင္းခ်င္ရင္ေတာ့ <br/> ကိုသံုးပါတယ္။ သူ႕မွာ close tag မပါဘူး။ <br/> ပဲေရးေရး <br>
ပဲေရးေရးရပါတယ္။
<html><head><title>Example</title></head><body>First Line<br/>Second Line<br>Third Line
</body></html>
Bold ၊ Italic ၊ Underline Tag
bold မို႕လို႕ ကၽြန္ေတာ္တို႕ေတြ <b> ကိုသံုးပါမယ္။ ေနာက္ျပီး italic မို႕လို႕ <i> ေပါ့။ ဒါဆိုရင္
Underline ကဘာလဲဆိုရင္ သိျပီးသားေလာက္ပါ။ ကၽြန္ေတာ္တို႕ေတြ <u> ကိုသံုးပါမယ္။ အဲဒါကို
notepad ထဲမွာ ဒီလိုေရးျပီး run လိုက္ရင္ရပါတယ္။
<html><body><b>This is bold</b> <br/><i>This is italic</i> <br/>
<u>This is underline</u> <br/></body></html>
Bold လုပ္မယ္။ ေနာက္ျပီး အဲဒါကို underline သားမယ္။ ဒါမွ မဟုတ္ italic လုပ္မယ္။
အဲလိုမ်ဳိးလုပ္ခ်င္တယ္။ ရပါတယ္။ tag ေတြထဲမွာ tag ေတြထည့္လိုက္ေပါ့။ ဒီလိုထည့္လို႕ရပါတယ္။
<i><b>This is bold italic </b></i>
<u><i><b>This is bold italic </b></i></u>
အဲလိုမ်ဳိးေရးလို႕ရပါတယ္။ တခ်ဳိ႕လူေတြက ေမးတတ္တယ္။<i> နဲ႕စမွ ရမွာလား။ ဒီလိုတိုင္း အစဥ္တိုင္းေရးမွ
ရမွာလား။ ေနာက္ျပီး <b><i></b></i> အဲလိုမ်ဳိးေတြေကာ ပိတ္လို႕မရဘူးလား။ဘာနဲ႕ စစရပါတယ္
အစဥ္တိုင္းမဟုတ္ပဲ <b><i> This is bold italic </i></b> လို႕ေရးလည္းျဖစ္ပါတယ္။ ေနာက္ျပီး
tag အဖြင့္ေတြ အပိတ္ေတြက ၾကိဳက္သလိုျဖစ္ေနလို႕ရပါတယ္။ ဒါေပမယ့္ structure က်က်ေလး။
ပံုစံက်က်ေလး ျဖစ္ေနရင္ေကာင္းတာေပါ့။ ေနာက္မို႕ဆို code ကိုျပန္ဖတ္ရခက္တာေပါ့။
Pre Tag
ကၽြန္ေတာ္တို႕ေတြ စာတစ္ေၾကာင္းဆင္းရမွာ မၾကိဳက္ဘူး။ Enter ေခါက္လိုက္ရံုနဲ႕တင္ တစ္ေၾကာင္းဆင္းခ်င္တယ္။
အလြယ္ဆံုး နည္းလမ္းကေတာ့ dream weaver သံုးလိုက္ျခင္းပဲ။ အဲဒါဆိုရင္ေတာ့ HTML နားလည္
မွာမဟုတ္ေတာ့ဘူး။ ေနာက္တစ္နည္းကေတာ့ <pre> ပါ။ ဒါေပမယ့္ သူက font ပံုစံေျပာင္းသြားတယ္။
အဲဒါက ကိစၥ မရိွပါဘူး။ ေနာက္ပိုင္း font ေတြဘယ္လိုေျပာင္းရလဲ ဆိုတာသိလာရင္ လာျပင္လုိက္လို႕ရပါတယ္။
ေနာက္ျပီး <pre> မွာ သူက tab ေခါက္ထားတာေတြ အစသိပါတယ္။
<html><head><title>Example</title></head><body><pre>Pre Tag, Now EnterNow Tab Tab
</pre></body></html>
Paragraph Tag
ကၽြန္ေတာ္တို႕ေတြ စာေတြကို paragraph ပံုစံေရးခ်င္တယ္။ စာပိုဒ္ေတြနဲ႕ ေရးမယ္ေပါ့။ ဒါဆိုရင္
<p> ကိုသံုးလို႕ရပါတယ္။ သူက အပိတ္ tag မပါလည္းရပါတယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။
<html><head><title>Example</title></head><body><h1>About Notepad</h1><p>
Notepad is a basic text editing program and it is most commonly used to view or edit text files. A
Horizonal Line
ကၽြန္ေတာ္တို႕ေတြ horizonal မ်ဥ္းသားခ်င္တဲ့ အခါမွာ သံုးလို႕ရပါတယ္။ သံုးပံုသံုးနည္းကေတာ့
<hr> ပါပဲ။ close tag မပါပါဘူး။
<html><head><title>Example</title></head><body><h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly used to view or
edit text files. A text file is a file type typically identified by the .txt file name extension. </p>
<hr><h1> How do I change the font style and size?</h1><p>Changes to the font style and
size affect all the text in the document.<br/>
Attribue
ကၽြန္ေတာ္တို႕ေတြဟာ tag ေတြမွာလည္း attribute ေတြထည့္ျပီး သံုးႏိုင္ပါတယ္။
attribute ဆိုတာကေတာ့ အဲဒီ tag ပိုင္ဆိုင္တဲ့ properties ေပါ့။ tag တိုင္းမွာေတာ့
attribute မရိွပါဘူး။ အခု ဦးစြာ အရင္ဆံုး body မွာပါတဲ့ color attribute အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။
Body Color
<html><head><title>Example</title></head><body bgcolor=silver>Body BGCOLOR</body>
</html>အဲဒီ code ေလးကို run လုိက္ရင္ေတာ့ အရင္ကလို background color က အျဖဴေရာင္မဟုတ္ေတာ့ပဲ
စိမ္းႏုေရာင္ေလးျဖစ္ေနတာကို ေတြ႕ရပါမယ္။ေအာက္က Table မွာအသံုးမ်ားတဲ့color16ေရာင္နာမည္ေတြပါ။
Silver, Gray, Maroon ,Green, Navy ,Purple, Olive, Teal ,White ,Black ,Red ,Lime ,Blue, Magenta ,
Yellow ,Cyan ကၽြန္ေတာ္တို႕ေတြဟာ colorေတြကို code အေနနဲ႕လည္း အသံုးျပဳႏိုင္ပါတယ္။ သံုးရမွာကေတာ့
RGB color ပါ။Hex code number ကိုအသံုးျပဳရပါတယ္။ #FF0000 ဆိုရင္ေတာ့အနီေရာင္ပါ။
ေရွ႕ဆံုး ၂ လံုးက အနီေရာင္ျဖစ္ျပီးအလယ္ ၂ လံုးက အစိမ္းေရာင္ပါ။ ေနာက္ဆံုး ၂လံုးကေတာ့ အျပာေရာင္ေပါ့။
အဲဒီ အေရာင္ ၃ေရာင္ကို စပ္ျပီး သံုးရပါတယ္။တကယ္လို႕ color ေတြကို မသိဘူးဆိုရင္ photoshop ကေနလည္း
ၾကိဳက္ႏွစ္သက္တဲ့ အေရာင္ကို ယူျပီးသံုးႏိုင္ပါတယ္။ဘယ္လိုယူရမလဲဆိုရင္ေတာ့ အရင္ဆံုး photoshop ကိုဖြင့္လိုက္။
ဘယ္ဘက္ ေအာက္နားမွာ color ေရြးဖို႕ေလးပါတယ္။အဲဒါေလးကို double click လုပ္လိုက္ပါ။
color dialog box တက္လာပါမယ္။ ျပီးရင္ ႏွစ္သက္ရာ အေရာင္ေရြးပါ။color အေရာင္ေရြးျပီးရင္ ေအာက္နားမွာ
hex code ေလးကို copy ကူးလိုက္ရံုပါပဲ။ ကၽြန္ေတာ္တို႕ေတြ color အေနနဲ႕သံုးခ်င္ရင္ # ေလးကိုေရွ႕မွခံျပီးသံုးလိုက္ရံုပါပဲ။
<html><head><title>Example</title></head><body bgcolor=#e5bb2c>Body BGCOLOR Hex code
</body></html> အခုဆိုရင္ေတာ့ attribute ပိုင္း နဲ႕ color ပိုင္းေလးကို နည္းနည္းပါးပါးသိေလာက္ျပီလို႕ထင္ပါတယ္။
attribute ထည့္လို႕ရတဲ့ tag ေတြကလည္း အမ်ားၾကီးရိွပါေသးတယ္။ ျဖည္းျဖည္းျခင္း ေျပာျပသြားမယ္။ အခု ေနာက္ထပ္ tag
တစ္ခုျဖစ္တဲ့ <hr> ရဲ႕attribute အေၾကာင္းေလးေျပာပါမယ္။
Hr Attribute
ကၽြန္ေတာ္တို႕ေတြဟာ tag တစ္ခုရဲ႕ေနာက္မွာ attribute တစ္ခုထက္မက လိုက္လို႕ရပါတယ္။
tag ေတြေနာက္မွာ attribute တစ္ခုထက္မကပါတာေတြကို ေနာက္ပိုင္းမွာေတြ႕ရပါလိမ့္မယ္။
အခုေတာ့ hr အေၾကာင္းေလး ဆက္ရေအာင္။ <html><head><title>Example</title></head>
<body bgcolor=#e0e0e0>Default HR<hr>Hr with size=1<hr size=1>Hr with size=5
<hr size=5>Hr with size=10<hr size=10>Hr with size=10 and noshade<hr size=10 noshade>
Hr with size=5 and color<hr size=5 color=#D60000></body></html> အဲမွာ size ကေတာ့ အရြယ္အစားပါ။
noshade ဆိုတာကေတာ့ shade မပါတဲ့ဟာကို ေျပာတာပါ။ ေျဗာင္ၾကီးေပါ့။ color ကေတာ့မိမိၾကိဳက္ႏွစ္သက္တဲ့အေရာင္ထည့္
လို႕ရပါတယ္။
Move To Center
သူက စာလံုးေတြကို center ေရာက္ေအာင္လုပ္ေပးပါတယ္။
<html><head><title>Example</title></head><body><center>This is center
</center></body></html>
This is center ဆိုတာေလးက အလယ္ပိုင္းကိုေရာက္ေနတာကိုေတြ႕ရပါမယ္။
အဲဒါေလးကို သံုးျပီး စာေတြကို အလယ္ပိုင္းကို ေရြ႕ထားလို႕ရပါတယ္။
<html><head><title>Example</title></head><body><h1 align=”justify”>Test</h1>
</body></html> အဲဒီ code မွာဆိုရင္ေတာ့ header ေတြက အလယ္ကိုေရာက္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။
Font
Font ကေတာ့ HTML မွာအေရးပါတဲ့ အပိုင္းပါ။ Web Page တစ္ခုမွာ ကိုယ္လိုခ်င္တဲ့ font ကုိေျပာင္းလဲဖို႕အတြက္
font tag ကိုသိမွ ျဖစ္မွာပါ။ <html><head><title>Example</title></head><body>
<font face=”Zawgyi-one”>Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font></body></html>
အဲဒါဆိုရင္ <font> နဲ႕ </font> ၾကားမွာရိုက္ထားတဲ့ စာက zawgyi-one font နဲ႕ေပၚေနမွာပါ။ face=”font name” ကိုထည့္ရတာပါ။ (ကူးယူေဖၚၿပပါတယ္ဗ်ာ ဆရာမဟုတ္ပါ )
ယေန႕အခါမွာ Internet ဟာအလြန္က်ယ္ျပန္႕လာျပီး လူတိုင္းနီးပါးအသံုးျပဳၾကေပသည္။ကၽြန္ေတာ္တို႕ေတြဟာလည္း
Internetေပၚမွာ ကိုယ္ပိုင္ေနရာမ်ားကို ကိုယ္ပိုင္ Homepageမ်ားကို အလြယ္တကူယူေဆာင္ႏိုင္ေလျပီ။ Internet
ဆိုတာကို အက်ယ္ရွင္းမေနေတာ့ပါဘူး။အလြယ္ရွင္းရရင္ေတာ့ Internet ဆိုတာ ကမာၻေပၚရိွ ႏိုင္ငံအခ်င္းခ်င္း ခ်ိတ္
ဆက္ထားေသာ Networkကြန္ယက္ၾကီးတစ္ခုျဖစ္ပါသည္။ အဲဒီလို Information ေတြဖလွယ္ဖို႕အတြက္ Web Page
ေတြကို ေရးဆြဲရပါတယ္။Web Page ေရးဆြဲဖို႕ရာအတြက္ HTML ဟာ အဓိက က်ပါတယ္။ေရးသားထားတဲ့ Web Page
ေတြကို Web Browser Softwareနဲ႕ ၾကည့္ရႈရပါတယ္။ Web Broswer Software ေတြကInternet Explorer နဲ႕
Firefox တို႕က နာမည္ၾကီးေတြပါ။
HTML History
1989 ခုက Tim Berners-Lee နဲ႕ Rober Calliau ဟာ Research Documents ေတြကို ပိုမိုျမန္ဆန္ေကာင္းမြန္ မယ့္
နည္းလမ္းကို ရွာေဖြခဲ့ပါတယ္။ ၂ ႏွစ္ ေလာက္ၾကာေတာ့ Berners-Lee ဟာ browser ေတြက ၾကည့္ရႈဖတ္သားႏိုင္ျပီး
Tag မ်ားႏွင့္ ဖြဲ႕စည္းတည္ေဆာက္ထားတဲ့ နည္းပညာတစ္ခုကို ျပဳလုပ္ႏိုင္ခဲ့ပါတယ္။ ထို႕ေနာက္အဲဒီ tage ေတြထဲမွာ
Hyper-Link နဲ႕ document အခ်င္းခ်င္းခ်ိတ္ဆက္ႏိုင္တဲ့ tag ေတြပါထည့္သြင္းႏိုင္ခဲ့ပါသည္။ Berners-Lee ရဲ႕
နည္းပညာကို Hyber Text Markup Language ဆိုတဲ့ HTML ပါပဲ။
Tag ဆိုတာဘာလဲ
Tag ဆိုတာကေတာ့ ရိုးရိုး Text ေတြနဲ႕ HTML code ေတြကို ခြဲျခားလို႕ရေအာင္လုပ္ထားတာပါ။ ဘယ္လိုမ်ဳိးလဲဆိုရင္
ေတာ့ <b>This is bold </b> ဆိုရင္ web browser နဲ႕ ၾကည့္ရင္ စာလံုးဟာ bold ျဖစ္ေနပါလိမ့္မယ္။ အဲဒီမွာ <b>
နဲ႕ </b> တို႕ဟာ tag ေတြပါ။ အမ်ားအားျဖင့္ tag ေတြဟာ အဖြင့္ နဲ႕ အပိတ္ပါ ပါတယ္။ အပိတ္ဆိုရင္ / ေလးခံထားေပးရပါတယ္။
HTML အတြက္ Editor
HTML အတြက္ Editor ေတြ IDE ေတြအမ်ားၾကီးရိွပါတယ္။ ကၽြန္ေတာ္ကေတာ့ Dreamweaver အၾကိဳက္ဆံုးပါပဲ။
သူက HTML မတတ္ရင္ေတာင္ Website တစ္ခုဆြဲလို႕ရပါတယ္။ ဒါေပမယ့္ Dreamweaver ကိုသံုးရင္ေတာ့
HTML codeေတြသိလာမွာ မဟုတ္သလို တျခား website ေတြကို ျပင္ရတာလည္းခက္ပါလိမ့္မယ္။ ကၽြန္ေတာ္တို႕
ေတြ သူမ်ားေတြေပးထားတဲ့website template ကိုျပင္ခ်င္တယ္။ ကိုယ္ပိုင္ေသေသခ်ာခ်ာ HTML code ေတြကို
သိခ်င္တယ္။ ဒါဆိုရင္ေတာ့ ေလ့လာကာစမွာNotepad သံုးျပီးေလ့လာပါ။ ေလ့က်င့္ပါ။ HTML က web site ဆြဲရတဲ့
အထဲမွာ အလြယ္ဆံုးနဲ႕ အေျခခံအက်ဆံုးပဲ။သူ႕ကိုေသေသခ်ာခ်ာနားလည္ထားမွ တျခား web programming
ေတြျဖစ္တဲ့ PHP, ASP.NET , JSP , Ruy On Railတို႕မွာ အေထာက္အကူျဖစ္မွာပါ။
Notepad ျဖင့္စတင္ျခင္း
၁. Windows Key + R ကို ႏိွပ္လိုက္ပါ။ Run Dailog Box တက္လာပါမည္။ ထို႕ေနာက္ notepad လုိ႕ရိုက္လိုက္ပါ။
ျပီးလွ်င္ OK ကို ႏိွပ္လိုက္ပါ။ ဒါဆိုရင္ notepad တက္လာပါလိမ့္မယ္။
၂. Notepad ထဲတြင္ Format ေအာက္က word warp ကို check လုပ္ထားပါ ။ ဘာျဖစ္လို႕လည္းဆိုရင္ေတာ့
Word Warp က Notepad မွာစာရိုက္တာ ျပည့္သြားရင္ ေအာက္တစ္ေၾကာင္း ဆင္းသြားရန္အတြက္ ျဖစ္သည္။
HTML စတင္ေရးသားျခင္း
၁. Notepad ထဲတြင္ အခုလိုေရးသားလိုက္ပါ။
<html> <head><title>This is title</title> </head><body>This is body</body></html>
HTML နဲ႕ စျပီး HTML နဲ႕ျပန္ပိတ္ရပါတယ္။ အဲဒီၾကားမွာ html code ေတြေရးရပါတယ္။
Head Tag နဲ႕ Head Tag အပိတ္ၾကားတြင္ Title ထည့္ထားသည္ကို ေတြ႕ရမည္။ Title သည္
Browser ၏ ထိပ္ bar တြင္ ေတြ႕ျမင္ရန္ျဖစ္သည္။ Body အဖြင့္ နဲ႕ အပိတ္ၾကားမွာ မိမိ၏ ႏွစ္သက္ရာ
စာမ်ားေရးသားႏိုင္သည္ ။
၂. အဲဒါကို တေနရာ မွာ save သြင္းလိုက္ပါ။ Save Dialog box တက္လာရင္ filetype ကို All file လို႕ေပးလိုက္ပါ။
file name ကို firstrun.html လို႕ေပးလိုက္ပါ။ firstrun သည္ မိမိ၏ ႏွစ္သက္ရာ နာမည္ေပးႏိုင္သည္။ .html သည္
file extension ျဖစ္သည္။ HTML ေရးထားေသာ page မ်ားကို .html ႏွင့္ .htm လို႕ေပးမွသာ browser တြင္
ေပၚပါလိမ့္မည္။
၃. Save သြင္းလိုက္ေသာ file လမ္းေၾကာင္းကို သြားလိုက္ပါ ။ first.html file ေလးကို double
click လုပ္ျပီး ဖြင့္လိုက္ပါ ။ အဲ့ဒါဆို page ေလးတစ္ခုတက္လာတာကို ျမင္ရပါမယ္။ထိပ္ပိုင္းတြင္
File ပတ္လမ္းေၾကာင္းကို address bar တြင္ေတြ႕ရမည္ျဖစ္သည္။ title tag ထဲတြင္ ေရးထားေသာ
This is tile ဆိုေသာ စာကို Windos ၏ Title bar ႏွင့္ Tab Title bar တို႕တြင္ ေတြ႕ရမည္။ Body tag ထဲတြင္
ေရးထားေသာ This is body ဆိုေသာ စာသားကို စာမ်က္ႏွာအျဖဴေပၚတြင္ ေပၚေနသည္ကို ေတြ႕ရမည္ျဖစ္သည္။
ျပင္မယ္ဆိုရင္ေတာ့
IE7 မွာဆိုရင္Page > View Source ကိုႏိွပ္လိုက္ပါက Notepad နဲ႕ ကိုယ္ေရးထားတဲ့ HTML ပြင့္လာပါမယ္။
IE 6 မွာဆိရင္View > Source ကို ႏိွပ္လိုက္ပါက Notepad နဲ႕ ကိုယ္ေရးထားတဲ့ HTML ပြင့္လာပါမယ္။
အဲဒီမွာ ေရးထားတဲ့ codeေတြကို ဖတ္ႏိုင္သလို ကိုယ့္စက္ထဲမွာေရးထားတဲ့ page ဆိုရင္ေတာ့ ျပင္ျပီး တစ္ခါတည္း
save လုပ္ႏိုင္ပါတယ္။ Internet ေပၚက Web site ေတြကိုေတာ့ view > source ကေနဖြင့္ျပင္ျပီး save လုပ္လို႕မရပါဘူး။
Header Tag
notepad ထဲမွာ ဒီလိုရိုက္လိုက္ပါ
<html><head><title>Example Of Header</title></head><body><h1>This is Header</h1>
This is normal text</body></html>အဲဒီ code ေလးကို notepad ထဲမွာထည့္ေရး.. ျပီးေတာ့ run ၾကည့္လိုက္ပါ။
အခုလိုျမင္ရပါလိမ့္မယ္။ Head Tag က h1ကေန h6 အထိ ရိွပါတယ္။ နံပါတ္ၾကီးေလေလ ေသးသြားေလေလပဲ။
h6 ဆိုအေသးဆံုးကို ေရာက္သြားျပီ။ ကဲ လက္ေတြ႕စမ္းၾကည့္ရေအာင္။ notepad ထဲမွာ ေအာက္ကလို ရိုက္ျပီး
save လုပ္လိုက္။ ျပီးရင္ ဖြင့္ၾကည့္လိုက္ရင္ ေတြ႕ရပါလိမ့္မယ္။ <html><head><title>Example</title>
</head><body><h1>H1</h1><h2>H2</h2><h3>H3</h3><h4>H4</h4><h5>H5</h5>
<h6>H6</h6></body></html> အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာေလာက္ပါျပီ။
တကယ္တန္းေတာ့ မခက္ပါဘူး။ဒါကအစပဲ ရိွပါေသးတယ္။ ဒီေလာက္ေလးနဲ႕ပင္ စာေတြပဲပါတဲ့ page တစ္ခု
ေရးလို႕ရေနျပီ။ ဒါေပမယ့္ လိုအပ္တာေတြ ရိွေသးတာေပါ့။ အခုဆက္ျပီး bold ၊ italic ၊ underline လုပ္ပံုေလးေတြ
ဆက္ေျပာပါမယ္။ လြယ္ပါတယ္။
Line Break
HTML မွာ စာတစ္ေၾကာင္းဆင္းခ်င္ရင္ေတာ့ <br/> ကိုသံုးပါတယ္။ သူ႕မွာ close tag မပါဘူး။ <br/> ပဲေရးေရး <br>
ပဲေရးေရးရပါတယ္။
<html><head><title>Example</title></head><body>First Line<br/>Second Line<br>Third Line
</body></html>
Bold ၊ Italic ၊ Underline Tag
bold မို႕လို႕ ကၽြန္ေတာ္တို႕ေတြ <b> ကိုသံုးပါမယ္။ ေနာက္ျပီး italic မို႕လို႕ <i> ေပါ့။ ဒါဆိုရင္
Underline ကဘာလဲဆိုရင္ သိျပီးသားေလာက္ပါ။ ကၽြန္ေတာ္တို႕ေတြ <u> ကိုသံုးပါမယ္။ အဲဒါကို
notepad ထဲမွာ ဒီလိုေရးျပီး run လိုက္ရင္ရပါတယ္။
<html><body><b>This is bold</b> <br/><i>This is italic</i> <br/>
<u>This is underline</u> <br/></body></html>
Bold လုပ္မယ္။ ေနာက္ျပီး အဲဒါကို underline သားမယ္။ ဒါမွ မဟုတ္ italic လုပ္မယ္။
အဲလိုမ်ဳိးလုပ္ခ်င္တယ္။ ရပါတယ္။ tag ေတြထဲမွာ tag ေတြထည့္လိုက္ေပါ့။ ဒီလိုထည့္လို႕ရပါတယ္။
<i><b>This is bold italic </b></i>
<u><i><b>This is bold italic </b></i></u>
အဲလိုမ်ဳိးေရးလို႕ရပါတယ္။ တခ်ဳိ႕လူေတြက ေမးတတ္တယ္။<i> နဲ႕စမွ ရမွာလား။ ဒီလိုတိုင္း အစဥ္တိုင္းေရးမွ
ရမွာလား။ ေနာက္ျပီး <b><i></b></i> အဲလိုမ်ဳိးေတြေကာ ပိတ္လို႕မရဘူးလား။ဘာနဲ႕ စစရပါတယ္
အစဥ္တိုင္းမဟုတ္ပဲ <b><i> This is bold italic </i></b> လို႕ေရးလည္းျဖစ္ပါတယ္။ ေနာက္ျပီး
tag အဖြင့္ေတြ အပိတ္ေတြက ၾကိဳက္သလိုျဖစ္ေနလို႕ရပါတယ္။ ဒါေပမယ့္ structure က်က်ေလး။
ပံုစံက်က်ေလး ျဖစ္ေနရင္ေကာင္းတာေပါ့။ ေနာက္မို႕ဆို code ကိုျပန္ဖတ္ရခက္တာေပါ့။
Pre Tag
ကၽြန္ေတာ္တို႕ေတြ စာတစ္ေၾကာင္းဆင္းရမွာ မၾကိဳက္ဘူး။ Enter ေခါက္လိုက္ရံုနဲ႕တင္ တစ္ေၾကာင္းဆင္းခ်င္တယ္။
အလြယ္ဆံုး နည္းလမ္းကေတာ့ dream weaver သံုးလိုက္ျခင္းပဲ။ အဲဒါဆိုရင္ေတာ့ HTML နားလည္
မွာမဟုတ္ေတာ့ဘူး။ ေနာက္တစ္နည္းကေတာ့ <pre> ပါ။ ဒါေပမယ့္ သူက font ပံုစံေျပာင္းသြားတယ္။
အဲဒါက ကိစၥ မရိွပါဘူး။ ေနာက္ပိုင္း font ေတြဘယ္လိုေျပာင္းရလဲ ဆိုတာသိလာရင္ လာျပင္လုိက္လို႕ရပါတယ္။
ေနာက္ျပီး <pre> မွာ သူက tab ေခါက္ထားတာေတြ အစသိပါတယ္။
<html><head><title>Example</title></head><body><pre>Pre Tag, Now EnterNow Tab Tab
</pre></body></html>
Paragraph Tag
ကၽြန္ေတာ္တို႕ေတြ စာေတြကို paragraph ပံုစံေရးခ်င္တယ္။ စာပိုဒ္ေတြနဲ႕ ေရးမယ္ေပါ့။ ဒါဆိုရင္
<p> ကိုသံုးလို႕ရပါတယ္။ သူက အပိတ္ tag မပါလည္းရပါတယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။
<html><head><title>Example</title></head><body><h1>About Notepad</h1><p>
Notepad is a basic text editing program and it is most commonly used to view or edit text files. A
Horizonal Line
ကၽြန္ေတာ္တို႕ေတြ horizonal မ်ဥ္းသားခ်င္တဲ့ အခါမွာ သံုးလို႕ရပါတယ္။ သံုးပံုသံုးနည္းကေတာ့
<hr> ပါပဲ။ close tag မပါပါဘူး။
<html><head><title>Example</title></head><body><h1>About Notepad</h1>
<p>Notepad is a basic text editing program and it is most commonly used to view or
edit text files. A text file is a file type typically identified by the .txt file name extension. </p>
<hr><h1> How do I change the font style and size?</h1><p>Changes to the font style and
size affect all the text in the document.<br/>
Attribue
ကၽြန္ေတာ္တို႕ေတြဟာ tag ေတြမွာလည္း attribute ေတြထည့္ျပီး သံုးႏိုင္ပါတယ္။
attribute ဆိုတာကေတာ့ အဲဒီ tag ပိုင္ဆိုင္တဲ့ properties ေပါ့။ tag တိုင္းမွာေတာ့
attribute မရိွပါဘူး။ အခု ဦးစြာ အရင္ဆံုး body မွာပါတဲ့ color attribute အေၾကာင္းေလးနဲ႕ စလိုက္ရေအာင္။
Body Color
<html><head><title>Example</title></head><body bgcolor=silver>Body BGCOLOR</body>
</html>အဲဒီ code ေလးကို run လုိက္ရင္ေတာ့ အရင္ကလို background color က အျဖဴေရာင္မဟုတ္ေတာ့ပဲ
စိမ္းႏုေရာင္ေလးျဖစ္ေနတာကို ေတြ႕ရပါမယ္။ေအာက္က Table မွာအသံုးမ်ားတဲ့color16ေရာင္နာမည္ေတြပါ။
Silver, Gray, Maroon ,Green, Navy ,Purple, Olive, Teal ,White ,Black ,Red ,Lime ,Blue, Magenta ,
Yellow ,Cyan ကၽြန္ေတာ္တို႕ေတြဟာ colorေတြကို code အေနနဲ႕လည္း အသံုးျပဳႏိုင္ပါတယ္။ သံုးရမွာကေတာ့
RGB color ပါ။Hex code number ကိုအသံုးျပဳရပါတယ္။ #FF0000 ဆိုရင္ေတာ့အနီေရာင္ပါ။
ေရွ႕ဆံုး ၂ လံုးက အနီေရာင္ျဖစ္ျပီးအလယ္ ၂ လံုးက အစိမ္းေရာင္ပါ။ ေနာက္ဆံုး ၂လံုးကေတာ့ အျပာေရာင္ေပါ့။
အဲဒီ အေရာင္ ၃ေရာင္ကို စပ္ျပီး သံုးရပါတယ္။တကယ္လို႕ color ေတြကို မသိဘူးဆိုရင္ photoshop ကေနလည္း
ၾကိဳက္ႏွစ္သက္တဲ့ အေရာင္ကို ယူျပီးသံုးႏိုင္ပါတယ္။ဘယ္လိုယူရမလဲဆိုရင္ေတာ့ အရင္ဆံုး photoshop ကိုဖြင့္လိုက္။
ဘယ္ဘက္ ေအာက္နားမွာ color ေရြးဖို႕ေလးပါတယ္။အဲဒါေလးကို double click လုပ္လိုက္ပါ။
color dialog box တက္လာပါမယ္။ ျပီးရင္ ႏွစ္သက္ရာ အေရာင္ေရြးပါ။color အေရာင္ေရြးျပီးရင္ ေအာက္နားမွာ
hex code ေလးကို copy ကူးလိုက္ရံုပါပဲ။ ကၽြန္ေတာ္တို႕ေတြ color အေနနဲ႕သံုးခ်င္ရင္ # ေလးကိုေရွ႕မွခံျပီးသံုးလိုက္ရံုပါပဲ။
<html><head><title>Example</title></head><body bgcolor=#e5bb2c>Body BGCOLOR Hex code
</body></html> အခုဆိုရင္ေတာ့ attribute ပိုင္း နဲ႕ color ပိုင္းေလးကို နည္းနည္းပါးပါးသိေလာက္ျပီလို႕ထင္ပါတယ္။
attribute ထည့္လို႕ရတဲ့ tag ေတြကလည္း အမ်ားၾကီးရိွပါေသးတယ္။ ျဖည္းျဖည္းျခင္း ေျပာျပသြားမယ္။ အခု ေနာက္ထပ္ tag
တစ္ခုျဖစ္တဲ့ <hr> ရဲ႕attribute အေၾကာင္းေလးေျပာပါမယ္။
Hr Attribute
ကၽြန္ေတာ္တို႕ေတြဟာ tag တစ္ခုရဲ႕ေနာက္မွာ attribute တစ္ခုထက္မက လိုက္လို႕ရပါတယ္။
tag ေတြေနာက္မွာ attribute တစ္ခုထက္မကပါတာေတြကို ေနာက္ပိုင္းမွာေတြ႕ရပါလိမ့္မယ္။
အခုေတာ့ hr အေၾကာင္းေလး ဆက္ရေအာင္။ <html><head><title>Example</title></head>
<body bgcolor=#e0e0e0>Default HR<hr>Hr with size=1<hr size=1>Hr with size=5
<hr size=5>Hr with size=10<hr size=10>Hr with size=10 and noshade<hr size=10 noshade>
Hr with size=5 and color<hr size=5 color=#D60000></body></html> အဲမွာ size ကေတာ့ အရြယ္အစားပါ။
noshade ဆိုတာကေတာ့ shade မပါတဲ့ဟာကို ေျပာတာပါ။ ေျဗာင္ၾကီးေပါ့။ color ကေတာ့မိမိၾကိဳက္ႏွစ္သက္တဲ့အေရာင္ထည့္
လို႕ရပါတယ္။
Move To Center
သူက စာလံုးေတြကို center ေရာက္ေအာင္လုပ္ေပးပါတယ္။
<html><head><title>Example</title></head><body><center>This is center
</center></body></html>
This is center ဆိုတာေလးက အလယ္ပိုင္းကိုေရာက္ေနတာကိုေတြ႕ရပါမယ္။
အဲဒါေလးကို သံုးျပီး စာေတြကို အလယ္ပိုင္းကို ေရြ႕ထားလို႕ရပါတယ္။
<html><head><title>Example</title></head><body><h1 align=”justify”>Test</h1>
</body></html> အဲဒီ code မွာဆိုရင္ေတာ့ header ေတြက အလယ္ကိုေရာက္ေနတာကိုေတြ႕ရပါလိမ့္မယ္။
Font
Font ကေတာ့ HTML မွာအေရးပါတဲ့ အပိုင္းပါ။ Web Page တစ္ခုမွာ ကိုယ္လိုခ်င္တဲ့ font ကုိေျပာင္းလဲဖို႕အတြက္
font tag ကိုသိမွ ျဖစ္မွာပါ။ <html><head><title>Example</title></head><body>
<font face=”Zawgyi-one”>Zawgyi Font ျဖင့္အသံုးျပဳထားသည္</font></body></html>
အဲဒါဆိုရင္ <font> နဲ႕ </font> ၾကားမွာရိုက္ထားတဲ့ စာက zawgyi-one font နဲ႕ေပၚေနမွာပါ။ face=”font name” ကိုထည့္ရတာပါ။ (ကူးယူေဖၚၿပပါတယ္ဗ်ာ ဆရာမဟုတ္ပါ )
