၁. 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>

This is Header

This is normal text</body></html>အဲဒီ code ေလးကို notepad ထဲမွာထည့္ေရး.. ျပီးေတာ့ run ၾကည့္လိုက္ပါ။ အခုလိုျမင္ရပါလိမ့္မယ္။ Head Tag က h1 ကေန h6 အထိ ရိွပါတယ္။ နံပါတ္ၾကီးေလေလ ေသးသြားေလေလပဲ။ h6 ဆိုအေသးဆံုးကို ေရာက္သြားျပီ။ ကဲ လက္ေတြ႕ စမ္းၾကည့္ရေအာင္။ notepad ထဲမွာ ေအာက္ကလို ရိုက္ျပီး save လုပ္လိုက္။ ျပီးရင္ ဖြင့္ၾကည့္လိုက္ရင္ ေတြ႕ရပါလိမ့္မယ္။<html><head><title>Example</title></head><body>

H1

H2

H3

H4

H5

H6

</body></html>အခုဆို html အေၾကာင္းနည္းနည္း နားလည္လာေလာက္ပါျပီ။ တကယ္တန္းေတာ့ မခက္ပါဘူး။ ဒါကအစပဲ ရိွပါေသးတယ္။ ဒီေလာက္ေလးနဲ႕ပင္ စာေတြပဲပါတဲ့ page တစ္ခုေရးလို႕ရေနျပီ။ ဒါေပမယ့္ လိုအပ္တာေတြ ရိွေသးတာေပါ့။ အခုဆက္ျပီး bold ၊ italic ၊ underline လုပ္ပံုေလးေတြ ဆက္ေျပာပါမယ္။ လြယ္ပါတယ္။
Line Break

HTML မွာ စာတစ္ေၾကာင္းဆင္းခ်င္ရင္ေတာ့
ကိုသံုးပါတယ္။ သူ႕မွာ close tag မပါဘူး။
ပဲေရးေရး
ပဲေရးေရးရပါတယ္။<html><head><title>Example</title></head><body>First Line
Second Line
Third Line</body></html>

Bold ၊ Italic ၊ Underline Tag

bold မို႕လို႕ ကၽြန္ေတာ္တို႕ေတြ ကိုသံုးပါမယ္။ ေနာက္ျပီး italic မို႕လို႕ ေပါ့။ ဒါဆိုရင္ Underline ကဘာလဲဆိုရင္ သိျပီးသားေလာက္ပါ။ ကၽြန္ေတာ္တို႕ေတြ ကိုသံုးပါမယ္။ အဲဒါကို notepad ထဲမွာ ဒီလိုေရးျပီး run လိုက္ရင္ရပါတယ္။<html><body>This is bold
This is italic
This is underline
</body></html>Bold လုပ္မယ္။ ေနာက္ျပီး အဲဒါကို underline သားမယ္။ ဒါမွ မဟုတ္ italic လုပ္မယ္။ အဲလိုမ်ဳိးလုပ္ခ်င္တယ္။ ရပါတယ္။ tag ေတြထဲမွာ tag ေတြထည့္လိုက္ေပါ့။ ဒီလိုထည့္လို႕ရပါတယ္။This is bold italic This is bold italic အဲလိုမ်ဳိးေရးလို႕ရပါတယ္။ တခ်ဳိ႕လူေတြက ေမးတတ္တယ္။

နဲ႕စမွ ရမွာလား။ ဒီလိုတိုင္း အစဥ္တိုင္းေရးမွ ရမွာလား။ ေနာက္ျပီး အဲလိုမ်ဳိးေတြေကာ ပိတ္လို႕မရဘူးလား။ဘာနဲ႕ စစရပါတယ္။ အစဥ္တိုင္းမဟုတ္ပဲ This is bold italic လို႕ေရးလည္းျဖစ္ပါတယ္။ ေနာက္ျပီး tag အဖြင့္ေတြ အပိတ္ေတြက ၾကိဳက္သလိုျဖစ္ေနလို႕ရပါတယ္။ ဒါေပမယ့္ structure က်က်ေလး။ ပံုစံက်က်ေလး ျဖစ္ေနရင္ေကာင္းတာေပါ့။ ေနာက္မို႕ဆို code ကိုျပန္ဖတ္ရခက္တာေပါ့။

Pre Tag

ကၽြန္ေတာ္တို႕ေတြ စာတစ္ေၾကာင္းဆင္းရမွာ မၾကိဳက္ဘူး။ Enter ေခါက္လိုက္ရံုနဲ႕တင္ တစ္ေၾကာင္းဆင္းခ်င္တယ္။ အလြယ္ဆံုး နည္းလမ္းကေတာ့ dream weaver သံုးလိုက္ျခင္းပဲ။ အဲဒါဆိုရင္ေတာ့ HTML နားလည္မွာမဟုတ္ေတာ့ဘူး။ ေနာက္တစ္နည္းကေတာ့

 ပါ။ ဒါေပမယ့္ သူက font ပံုစံေျပာင္းသြားတယ္။ အဲဒါက ကိစၥ မရိွပါဘူး။ ေနာက္ပိုင္း font ေတြဘယ္လိုေျပာင္းရလဲ ဆိုတာသိလာရင္ လာျပင္လုိက္လို႕ရပါတယ္။ ေနာက္ျပီး  မွာ သူက tab ေခါက္ထားတာေတြ အစသိပါတယ္။<html><head><title>Example</title></head><body>Pre Tag, Now EnterNow Tab Tab
</body></html>

Paragraph Tag



ကၽြန္ေတာ္တို႕ေတြ စာေတြကို paragraph ပံုစံေရးခ်င္တယ္။ စာပိုဒ္ေတြနဲ႕ ေရးမယ္ေပါ့။ ဒါဆိုရင္ 

 ကိုသံုးလို႕ရပါတယ္။ သူက အပိတ္ tag မပါလည္းရပါတယ္။ ထည့္ရင္ေတာ့ ပိုေကာင္းတာေပါ့။<html><head><title>Example</title></head><body>


About Notepad
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.

 How do I change the font style and size?Changes to the font style and size affect all the text in the document.
Click the Format menu, and then click Font.
Make your selections in the Font, Font style, and Size boxes.
An example of how your font will look appears under Sample.
When you are finished making font selections, click OK.

</body></html>

Horizonal Lineကၽြန္ေတာ္တို႕ေတြ horizonal မ်ဥ္းသားခ်င္တဲ့ အခါမွာ သံုးလို႕ရပါတယ္။ သံုးပံုသံုးနည္းကေတာ့ <hr> ပါပဲ။ close tag မပါပါဘူး။<html><head><title>Example</title></head><body>


About Notepad
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. 

<hr>
 How do I change the font style and size?
Changes to the font style and size affect all the text in the document.



Click the Format menu, and then click Font.
Make your selections in the Font, Font style, and Size boxes.
An example of how your font will look appears under Sample.
When you are finished making font selections, click OK.

</body></html>အထက္ပါ code ကို run လိုက္ရင္ ဒီလိုျမင္ရမယ္။ အဲမွာ <hr> ထည့္ထားတဲ့ေနရာက line ေလးတားထားတာကို ျမင္ရပါလိမ့္မယ္။

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 မွာ အသံုးမ်ားတဲ့ color 16 ေရာင္နာမည္ေတြပါ။



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 ကေတာ့ မိမိၾကိဳက္ႏွစ္သက္တဲ့အေရာင္ထည့္လို႕ရပါတယ္။



List



List ပိုင္းမွာ order list နဲ႕ unorder list ဆိုျပီးရိွပါတယ္။ တနည္းအားျဖင့္ နံပါတ္စဥ္နဲ႕ list နဲ႕ နံပါတ္စဥ္ေတြမပါတဲ့ list ေပါ့။ေနာက္ျပီး defination list ဆိုတာရိွပါေသးတယ္။ လူသံုးနည္းပါတယ္။ ပထမဆံုး unorder list အေၾကာင္းေလးသြားရေအာင္။



Unorder list



<html><head><title>Example</title></head><body>


Unorder List