Developing A Simple Website by yourself

Developing A Simple Website by yourself6 (lesson 1)

Website တစ္ခုကိုဖန္တီးရာမွာ programming language ေတြ Markup Language ေတြကိုအသံုးျပဳရပါတယ္။
အလြယ္ကူဆံုးနဲ႔ အေျခအက်ဆံုး Language ကေတာ့ HTML (Hyper text Markup Language) ပဲျဖစ္ပါတယ္။
ေနာက္တစ္ခုက CSS (Cascading Style Sheets) ပါ။
Website တစ္ခုကို လူ႔ခႏၶာကိုယ္နဲ႔ ႏိႈင္းယွင္ရင္ေတာ့ HTML ဆိုတာ အ႐ိုးေတြနဲ႔တူပါတယ္(အေျခခံအုတ္ျမစ္ေပါ့: p)။
CSS ကေတာ့ အေသြးအသားေတြအေရခြံေတြေပါ့ (HTML ဆိုတဲ့ အ႐ိုးစုႀကီးကို လွပသြားေအာင္အလွဆင္တယ္ေပါ့: p)။
ေနာက္ထပ္ PHP တို႔ Javascript တို႔႐ွိပါေသးတယ္ ေလာေလာဆယ္ေတာ့ HTML နဲ႔ CSS ကိုပဲတင္ေပးသြားမွာပါ။

Setup to Learn HTML

programming Language ေတြကိုေရးပီး software ေတြ website ေတြကိုဖန္တီးရာမွာ IDE ေတြ Complier ေတြလိုပါတယ္။IDE ေတြ Complier ေတြကဘာေတြလား လို႔ေမးရင္ အဲ့တာေတြက အခုအေျခခံအဆင့္မွာသိဖို႔မလိုေသးပါပူး။
HTML ကိုေရးဖို႔လိုအပ္တာကေတာ့
Windows OS မွာBuilt-in ပါတဲ့ Notepad ပါ။

Notepad ကိုသံုးဖို႔အတြက္ Windows key + R ႏိုပ္လိုက္ပါ။Dialog Box တစ္ခုက်လာရင္ notepad လို႔႐ိုက္ထည့္လိုက္ပါ။

ကဲ့ အခုဆိုရင္ HTML ကိုစတင္ေလ့လာလို႔ရပါပီ။

About Tag in HTML

HTML ကိုေလ့လာမယ္ဆိုရင္ Tag ဆိုနာသိရပါမယ္။အဲ့ေတာ့ Tag ဆိုတာဘာလဲ? ဟုတ္ကဲ့ပါ Tag ဆိုတာ႐ိုး႐ိုးစာသား (Text) နဲ႔ HTML code ေတြခြဲခါးလို႔ရေအာင္လုပ္ထားတာပါ။

Eg:

ဆိုရင္ Browser ထဲမွာကြၽန္ေတာ္တို႔ေတြ႔ရမွာက Underline ဆိုတဲ့ စာသားေလးကို ေအာက္ကမ်ဥ္းေလးတားထားတာေတြ႔ရမွာပါ။HTML မွာမ်ားေသာအားျဖင့္ အဖြင့္ Tag နဲ႔ အပိတ္ Tag ႐ွိပါတယ္။
အဖြင့္Tag <>
အပိတ္ Tag </>
ကဲဒီေလာက္ဆို Tag အေၾကာင္းနားလည္ပီလို႔ထင္ပါတယ္။

Creating First Web Page

Notepad ကိုဖြင့္လိုက္ပါမယ္။ပီးရင္ေအာက္က Code ေတြကိုေရးလိုက္ပါ။

Html မွာ ဘာပဲေရးေရး
< html >နဲ႔စၿပီး < html > နဲ႔ဆံုးရပါတယ္။
Head tag ႏွစ္ခုၾကားမွာ Title tag ႐ွိပါတယ္။
Body tag ႏွစ္ခုၾကားမွာေရးထားတဲ့စာသားေတြကေတာ့ WebPage မွာေဖာ္ျပမွာျဖစ္ပါတယ္။Head Tag ႏွစ္ခုၾကားမွာ စာေရးမိရင္ေတာ့ Browser ကေဖာ္ျပမွာမဟုတ္ပါပူး။
ေရးထားတဲ့ code ေတြကို Ctrl + s ႏိုပ္ပီး save ပါမယ္။

Save တဲ့ေနရာမွာအေရႀကီးပါတယ္။
ကြၽန္ေတာ္တို႔ myweb.html လို႔ save လိုက္ပါမယ္။

myweb ေနရာမွာ ကိုယ္ႏွစ္သက္ရာထည့္လို႔ရပါတယ္။.html ကိုေတာ့ေျပာင္းလို႔မရပါပူး။
ကဲ့အခုဆိုကြၽန္ေတာ္တို႔ save ထားတဲ့ webpage ေလး Desktop မွာေပၚေနပါပီ။

ဖြင့္ၾကည့္လိုက္ရင္ ေအာက္ပါပံုအတိုင္းေပၚမွာျဖစ္ပါတယ္။

ပံုေလးကိုၾကည့္ပီးနားလည္ေလာက္ပီထင္ပါတယ္။

Header Tag - < h >< /h>

Notepad မွာ ေအာက္က code ေတြကိုထည့္လိုက္ပါ။

< html >
< head >
< title >About Header tag </title >
< /head >
< body >
< h1 >Header 1 </h1 >
< h2>Header 2 </h2 >
< h3 >Header 3 </h3 >
<h4 >Header 4 </h4 >
<h5 >Header 5 < /h5 >
< h6> Header 6 < /h6 >
Normal Text
< /body >
< /html >

ပီးရင္ header.html ဆိုပီး save လိုက္ပါ။. html ဆိုတာကိုမလြဲေစပါနဲ႔။

Webpage ေလးတက္လာရင္ပံုထဲကအတိုင္းေတြ႔ရမွာပါ။
header tag က 1 ကေန 6ထိ႐ွိပါတယ္။
1 ကအႀကီးဆံုး 6 ကအငယ္ဆံုးပါ။

Bold, italic, Underline Tag and Line Break

< html >
< head >
< title >This is title </title >
< /head >
< body >
< b >This is bold tag < /b > < br >
< u>This is underline tag < u> < br/ >
< i > This is italic tag < /i >

< /body >
< /html >

အေပၚက code ေတြကို notepad မွာေရးပီး save လိုက္ပါ။
ဖြင့္လိုက္ရင္ ေအာက္ကပံုလိုေပၚေနပါလိမ့္မယ္။

< b ></b > က စာလံုးေတြကိုထူေအာင္လုပ္ေပးတဲ့ bold tag ပါ။
< u > </u >ကေအာက္ကလိုင္းတားေပးတဲ့ tag ပါ။
< i > < /i > ကစာလံုးေတြကိုတစ္ေစာင္းေလးျဖစ္ေစတာပါ။
< br > နဲ႔ < br/ > က်ေတာ့ line break tag လို႔ေခါပါတယ္။ ႏွစ္မ်ိဳးလံုးႀကိဳတ္တာသံုးလို႔ရပါတယ္။သူ႔မွာက်ေတာ့ closing tag မပါပါပူး။လုပ္ေဆာင္ခ်က္ကေတာ့ စာေၾကာင္းေတြကိုေအာက္ဆင္းေပးတာပါ။ HTML မွာက စာေၾကာင္းေတြကိုေအာက္ဆင္းခ်င္ရင္ PC မွာသံုးသလိုမ်ိဳး Enter ေခါက္လို႔မရပါပူး။

Line Break tag ( < br > or < br / >) သံုးေပးရပါတယ္။

ဒီေန႔ကေတာ့အစပိုင္းမို႔လို႔ဒီေလာက္ပါပဲ။အဆံုးထိဖတ္႐ႈေပးတဲ့အတြက္ေက်းဇူးတင္ပါတယ္ 😃။

Written by @minthwayko
MSC-187