Creating Web Pages with HTML

Creating Web Pages with HTML

Creating Web Pages with HTML
Part ( 1 )
Introduction

HTML ဆိုတာ Hyper Text Markup Languages ပါ ။ ယေန႔အင္တာနက္မီဒီယာမွာ
ျမင္ေတြ႔ေနရတဲ့ Websites ေတြေရးသားဖို႔ အေျခခံအက်ဆံုး program တစ္ခုပါပဲ
။Web designer? Web developmer ေတြအတြက္သာမက Social Network
အသံုးျပဳတဲ့သူေတြ၊ blog တည္ေဆာက္သူေတြအတြက္ပါ HTML ဘာသာရပ္က
မရွိမျဖစ္လိုအပ္လွပါတယ္။ HTML ဆိုတာ ဘာလဲလို႔ သိခ်င္ရင္ ပထမဆံုးအေနနဲ႔
Website တစ္ခုဖြင့္လိုက္ပါ။ ျပီးရင္ menu bar ကView မွာရွိတဲ့ page source
ကိုဖြင့္လိုက္ပါ။ အဲဒီ့မွာ ထြက္ေပၚက်လာတဲ့ New box ထဲက စာသားေတြဟာ အဲဒီ့
Web page ကိုေရးသားထားတဲ့ HTMLေတြပါပဲ။ ကဲ...ဒါေတြ ဘယ္လိုေရးရတာလဲ ?
ေလ့လာၾကည့္ၾကစို႔လား....။

အရင္ဆံုးအေနနဲ႔ သင္ဟာဒါေလးေတြေတာ့ သိဖို႔လိုအပ္ပါတယ္။ folderတည္ေဆာက္တာ၊ ထို folder ထမွာ ထပ္ဆင့္ folder တည္ေဆာက္တာ၊
စာပိုဒ္တစ္ခုကို Copy ကူးျပီးေနာက္တစ္ေနရာမွာ Paste ခ်တာ၊ ပံုတစ္ပံုကို
Save as picture ဆိုျပီးသိမ္းရမယ့္File ထဲသိမ္းတတ္တာ၊ ဒီေလာက္သိထားရင္
အဆင္ေျပပါျပီ။
Markup < > နဲ႔ ေရးတာေတြကို Tag လို႔ ေခၚျပီး Markup < >
အဖြင့္အပိတ္ၾကားထဲက လိုအပ္တဲ့စာသား၊ ရုပ္ပံုေတြ ထည့္ရတာကို Data လို႔
ေခၚပါတယ္။
ရွင္းလင္းေအာင္ျပရရင္ ဒီလိုပါ...။

Data
၊_______________၊
Tag

Webpage ေရးသားဖို႔ အေျခခံ Format ကေအာက္ပါအတိုင္းျဖစ္ပါတယ္...။





ေရးလိုသည့္အေၾကာင္းအရာမ်ား
အထက္ပါ Format ကိုေလ့လာၾကည့္ရင္
tag အဖြင့္ေရးျပီးရင္ အပိတ္ျပန္ေရးတာ၊
၊ စသျဖင့္ tag
အဖြင့္ရွိရင္ ျပန္ပိတ္ေပးရတာ သတိျပဳမိမယ္ ထင္ပါတယ္။
Browser မွာ ျပန္ run တဲ့အခါ ထဲက
ကိုယ္ေရးတဲ့ စာသားဟာ browser ရဲ႕ main window မွာ ျမင္ရမွာ ျဖစ္ပါတယ္။
Lesson (1) ကိုမစမီ ကိုယ့္ကြန္ပ်ဴတာမွာ Mozilla Firefox (သို႕) Internet Explorer
ရွိေနဖို႔ လိုအပ္ပါတယ္။ဒီ browser ႏွစ္ခုဟာ အသံုးအမ်ားဆံုး Web browser
ေတြျဖစ္တဲ့အတြက္ ဒါေတြနဲ႔ အဆင္ေျပေအာင္ ေရးႏိုင္ရင္က်န္တဲ့ browser
အားလံုးနဲ႔လဲ လိုက္ေလ်ာညီေထြ ရွိပါတယ္။

LESSON ( 1 )

ပထမဆံုး Notepad ကိုဖြင့္ပါ။
Start> All Program > Accessories >Notepad
Notepad ထဲမွာ ေအာက္ပါအတိုင္းရိုက္ပါ။


ျပီးရင္ ဒီ Notepad ကို ဖိုင္တစ္ခုအေနနဲ႔ သိမ္းပါမယ္။( Cyber မွာသံုးတဲ့လူအတြက္ကေတာ့ လြယ္လြယ္ကူကူ Desktop
ေပၚသိမ္းလိုက္ပါ။ဒီေနရာမွာေတာ့ Drive D:/ ထဲကေန သိမ္းတာျပပါမယ္)
Drive D:/ ထဲမွာ New Folder တစ္ခုတည္ေဆာက္ပါ။၎Folder ကို 'Dogs' ဟုအမည္ေပးပါ။ ထိုအမည္ေပးျပီးသား
Folder ကို Double click လုပ္လိုက္ရင္ ၎ 'Dogs အမည္ဟာ Save in box
ထဲမွာသြားေပၚေနတာကို ေတြ႔ရပါလိမ့္မယ္။ ဒါဆိုရင္ File name ရဲ႕ textbox
ထဲမွာ index.html လို႔ ရိုက္လိုက္ပါ။
ထို႔ေနာက္ Save as type ရဲ႕ drop-down list ကိုဆြဲခ်ျပီး All File ကိုေရြးခ်ယ္လိုက္ပါ။ျပီးရင္ Save ကို click ပါ။
[ Web page တိုင္းအတြက္ .html (သို႔) .htm အသံုးျပဳရျပီး home page တိုင္းအတြက္ file name ကို index.html အျဖစ္ အသံုးျပဳရပါတယ္]
ဒါဆိုရင္ အခု Home Page တစ္ခုေရးဖို႔အတြက္ File တစ္ခု တည္ေဆာက္ျပီးပါျပီ။
ဆက္ေရးၾကည့္ၾကရေအာင္..။
tag ရဲ႕ေအာက္မွာ ေအာက္ပါအတိုင္းရိုက္ပါ။



Your Name ရဲ႕ေနရာမွာ သင့္နာမည္ကိုအစားထိုးပါ။
[ ကို comment လို႔ေခၚပါတယ္။ဒါကို browser မွာျမင္ေတြ႔ရမွာ
မဟုတ္ပါဘူး။တစ္စံုတစ္ေယာက္က HTML coding ေတြကိုၾကည့္တဲ့အခါမွသာ
ျမင္ေတြ႔ရမွာပါ။]
tag ရဲ႔ေအာက္မွာအခုေရးသားမယ့္ page အတြက္ေခါင္းစဥ္ရိုက္ၾကရေအာင္..။ေအာက္ပါအတိုင္းျဖစ္ပါတယ္။

ဒါေလးေတြကို တစ္ဆင့္ျခင္းရိုက္ျပီးျပီဆိုရင္ ကိုယ့္ရဲ႕ Notepad ထဲမွာရိုက္ျပီးသား
Coding ေတြကို တစ္ခ်က္ျပန္စစ္ၾကည့္ရေအာင္။ Your Name ေနရာမွာေတာ့ thuthu
လို႔ျဖည့္ထားပါတယ္. ။ မိတ္ေဆြမ်ားကေတာ့ မိမိနာမည္ေပါ့။






Coding ေတြျပန္စစ္ၾကည့္လို႔မွန္သြားျပီဆိုရင္ ဒီ File ေလးကို Browser မွာ ျပန္ Run ၾကည့္ပါမယ္။ MZ (သို႔) IE ႏွစ္သက္ရာအသံုးျပဳပါ။ဒီမွာေတာ့ IE နဲ႔ျပပါမယ္။
Internet Explorer > File > Open > Browse >
Browse ကေနမိမိရဲ႔ Dogs File ေအာက္က Index.html ကိုေရြးျပီး Double Click ပါ။
ဒါဆိုရင္ browser ရဲ႕title bar မွာA Home Page About Dogs
ဆိုတာျမင္ေတြ႔ရမွာျဖစ္ျပီး Address ေနရာမွာေတာ့ ကိုယ့္အမည္ေပးခဲ့တဲ့ File
နာမည္နဲ႔ လာရာလမ္းေၾကာင္းကို ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္ ။ဘာစာမွ ရိုက္ထားျခင္း
မရွိေသးတဲ့အတြက္ browser ရဲ႕ main window မွာေတာ့ ဘာမွျမင္ေတြ႕ရမွာ
မဟုတ္ပါဘူး။
Coding ဆက္ေရးၾကပါစို႔။
ရဲ႕ေအာက္မွာ ေအာက္ပါအတိုင္း ရိုက္ပါ။

Dogs Home Page

ျပီးရင္ Save ပါ။ထို႔ေနာက္ Browser ကိုျပန္ Run ၾကည့္ပါဦး။အခုဆိုရင္ browser ရဲ႕
main window မွာ Dogs Home Page ဆိုျပီးစာတစ္ေၾကာင္းေပၚေနတာ ျမင္ေတြ႔ရမွာ
ျဖစ္ပါတယ္...။
ဒီစာသားဟာ ဘာမွျပဳျပင္ေျပာင္းလဲျခင္းမရွိဘဲ ရိုးရိုးသာမာန္စာလံုးအေနနဲ႔သာ ျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္။ဒီစာလံုးကိုပဲ အၾကီး၊
အေသး၊ ကာလာအေရာင္ ၊ပိုထင္ရွားေအာင္လုပ္တာ စသျဖင့္
အမ်ိဳးစံုေျပာင္းလဲေပးႏိုင္ပါေသးတယ္။Notepad ထဲက coding ေတြဘက္ျပန္လွည့္ၾကည့္ၾကရေအာင္..။


စာလံုးေတြျပင္တာျဖစ္တဲ့ အတြက္ ဆိုတဲ့ tag ကိုအသံုးျပဳပါမယ္။အေျခခံအားျဖင့္သံုးလို႔ အဆင္ေျပႏိုင္တဲ့ font ေတြက "verdana" , "arial" , "helvetica"
စသည္တို႔ျဖစ္ပါတယ္။ အသံုးအမ်ားဆံုးကေတာ့ arial ေပါ့ ။ attribute က face
ပါ..။ေအာက္ပါပံုစံေပါ့..။


or

ဒီေနရာမွာ မ်က္ေတာင္အဖြင့္အပိတ္လို႔ေခၚတဲ့ quote ကိုထည့္မယ္ဆိုရင္ ႏွစ္ဖက္စလံုးထည့္ေပးရပါမယ္..အလွ်င္းမထည့္ဘဲ ေရးလို႔လဲ ရပါတယ္။ quote အဖြင့္ေရးျပီး အပိတ္က်န္ခဲ့တာမ်ိဳးေတာ့ မရပါဘူး။ သတိျပဳရမွာက စာေၾကာင္းအဆံုးမွာ ထည့္ေပးရပါမယ္...။

စာလံုးအၾကီး၊ အေသးကိုေတာ့ attribute အျဖစ္ size ကို အသံုးျပဳပါမယ္။
Dogs Home Page

ကိုယ္လိုခ်င္တဲ့ အၾကီး၊ အေသး၊ အခ်ိဳးအဆ အတြက္လိုအပ္သလို Plus sign (or) Minus sign ၊
ကိန္းဂဏန္းအနည္းအမ်ား စသည္ျဖင့္ေျပာင္းလဲအသံုးျပဳႏို

င္ပါတယ္။စာလံုးကိုၾကီးေစခ်င္ရင္ Plus sign ၊ေသးေစခ်င္ရင္ Minus sign ပါ။

အေရာင္အတြက္ attribute အျဖစ္ Color ကိုအသံုးျပဳပါမယ္။

Dogs Home Page

Color အတြက္ၾကိဳက္ႏွစ္သက္ရာ အေရာင္နာမည္အမ်ိဳးမ်ိဳး ထည့္ႏိုင္ပါတယ္။အေရာင္စပ္ေတြအတြက္ color code ေတြလည္းထည့္ႏိုင္ပါတယ္။
ဥပမာ- #ffffcc , #00ff00 စသျဖင့္ ထိုအေရာင္ coding မ်ားကို www.webmenkey.com/reference/color-codes မ်ားတြင္ ရယူႏိုင္ပါတယ္။အျခား site မ်ားမွ ရွာေဖြခ်င္လွ်င္ Google Search တြင္ ( htmlcolor codes ) ဟုရိုက္ထည့္၍ ရွာေဖြနိုင္ပါသည္။

စာလံုးကို Bold တင္ရန္ Attribute ကိုသံုးပါမည္။ နဲ႔လည္းျပန္ပိတ္ေပးရပါမယ္။

Dogs Home Page

ျပီးရင္ Notepad ကို Save ပါ။ထို႔ေနာက္ Browser ကိုျပန္ Run ၾကည့္ပါ။ Color အမ်ိဳးမ်ိဳး ၊ အၾကီးအေသးအမ်ိဳးမ်ိဳးေျပာင္း၍ Browser ၌ျဖစ္ေပၚေျပာင္းလဲပံု
အမ်ိဳးမ်ိဳးကိုေလ့လာၾကည့္ႏိုင္ပါသည္။
စာလံုးအၾကီးအေသး၊ စာလံုး Font အမ်ိဳးမ်ိဳး ၊အေရာင္အမ်ိဳးမ်ိဳးကို သံုးတတ္သြားျပီဆိုလွ်င္ မူလအတိုင္းျပန္ထားလို္ကပါ။အခုဆိုရင္ Notepad မွာေအာက္ပါအတိုင္း Coding မ်ားကိုျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္.။ျပန္စစ္ၾကည့္ပါဦး..။။







Dogs Home Page




ထို Notepad ကို Save ၍ Browser မွာ Run ၾကည့္တဲ့အခါ ေအာက္ပါအတိုင္းေတြ႔ရမွာ ျဖစ္ပါတယ္...။

LESSON-1 အႏွစ္ခ်ဳပ္


-ေရးသမွ်စာသားေတြအားလံုး အဖြင့္နဲ႔ အပိတ္ထဲမွာ ျဖစ္ရပါမယ္။
-title bar မွာေခါင္းစဥ္ေပၚေစရန္ အပိတ္ထဲတြင္ အဓိကေခါင္းစဥ္ထည့္ေပးရပါမယ္။
[ မွတ္ခ်က္။။ အပိတ္က်န္ခဲ့လွ်င္coding မွား၍ စာမေပၚပါ။။ ]



-main window တြင္ေရးသမွ် စာအားလံုး အဖြင့္ႏွင့္ အပိတ္ထဲတြင္ ျဖစ္ရပါမယ္။
-(1) စာလံုးအတြက္ attribute က face
-(2)အရြယ္အစားအတြက္ attribute က size
-(3)အေရာင္အတြက္ attribute က color
-အထက္ပါ (၃) ခ်က္မ်ားအတြက္ tag အျဖစ္ ကိုသံုးရပါမယ္။
-Bold တင္ရန္ အဖြင့္ႏွင့္ အပိတ္ ပါရပါမယ္။
Lesson-1 ကေတာ့ဒီေလာက္သိျပီဆိုရင္ အဆင္ေျပပါျပီ။ Lesson -2 မွာစာပိုဒ္ထပ္ထည့္ၾကပါမယ္။ အဲဒီ့စာပိုဒ္ကို ဘယ္၊ ညာလည္း
ေရႊ႕ၾကည့္ၾကမွာျဖစ္သလို၊ စာတစ္ေၾကာင္းစီဆင္းတာ၊ Bullets တပ္တာ၊
နံပါတ္စဥ္တပ္တာ၊ Link ခ်ိတ္တာစသျဖင့္ ဆက္ေလ့လာၾကည့္ၾကပါမယ္။
အခုေရးသားျပီးသား Lesson-1 ကို Delete မေၾကြးလိုက္နဲ႔ဦးေနာ္။ တစ္ဆင့္ျပီးတစ္ဆင့္ဒါေလးကိုပဲျပီးေအာင္ ဆက္ေရးသြားမွာမို႔ ေနာက္ဆံုးမွာျပီးျပည့္စံုတဲ့ Webpage တစ္ခုအျဖစ္ျမင္ေတြ႔ၾကရမွာပါ။ မိမိကြန္ပ်ဴတာမွာ (သို႔) Memory stick (သို႔)
MP4 ထဲမွာေခတၱခဏသိမ္းဆည္းထားပါဦး။