Developing A Simple Website by yourself

Developing A Simple Website by yourself (lesson 5)

မဂၤလာပါ။ ဒီေန႔ေတာ့ Page တစ္ခုနဲ႔တစ္ခု Link ခ်ိတ္နည္းကိုတင္ေပးမွာပါ။

Link ခ်ိတ္တဲ့ေနရာမွာ Page တစ္ခုကတစ္ခုခ်ိတ္ျခင္း။ပံုကိုႏိုပ္လိုက္ရင္ တစ္ျခား page ေရာက္သြားျခင္း သ့ိုမဟုတ္ ပံုႀကီးခ်ဲ့ျခင္း ကဲ့သို႔ေသာ Link ခ်ိတ္နည္းအမ်ိဳးမ်ိဳး႐ွိပါတယ္။
Link ခ်ိတ္ရာမွာအသံုးျပဳမဲ့ tag ကေတာ့
< a href="url" > Link text </a>
ပဲဖစ္ပါတယ္။
url ဆိုတဲ့ေနရာမွာ မိမိသြားေစခ်င္လိုတဲ့ link ကိုထည့္ရမွာပါ။ဓာတ္ပံုေတြနဲ႔တစ္ျခားလုပ္ေဆာင္ခ်က္ေတြလဲထည့္လို႔ရပါေသးတယ္။
Link text ဆိုတဲ့စာသားေနရာမွာ မိမိႀကိဳက္တာထည့္လို႔ရပါတယ္။
အဲ့ Link text ဆိုတဲ့စာႏိုပ္လိုက္ရင္
url မွာေရးထားတဲ့ေနရာေရာက္သြားမွာျဖစ္ပါတယ္။

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

< a href="http://www.google.com" > Google </a>

< /body >
< /html >

အေပၚက နမူနာ code ကို run ၾကည့္ရင္ ပံုထဲက အတိုင္း Google ဆိုတဲ့အျပာေရာင္စာေလးကိုအျပာေရာင္မ်ဥ္းေလးနဲ႔သားထားတာေတြရမွာပါ။အဲ့စာကိုႏိုပ္လိုက္ရင္ google search engine ကိုေရာက္စြားမွာပါ။Internet ဖြင့္ထားမယ္ဆိုရင္ေပါ့ 😁။

< a href="http://www.google.com" > MSC </a>

လို႔ေရးရင္ output က MSC ဆိုတဲ့စာသားေလးကိုေတြရပါမယ္။အဲ့စာသားေလးကိုႏိုပ္ရင္လဲ Google ထဲကိုပဲေခၚသြားမွာပါ။ အဓိက အရာက a tag ထဲမွာေရးထားတဲ့ url ဆီကိုေခၚသြားတာပါ။ဒီေနရာကိုနားမလည္ရင္ေနာက္ပိုင္းဟာေတြကို ဘယ္လိုမွနားမလည္ႏိုင္ပါပူး။အဲ့ေတာ့ code ေတြကို ကိုယ္တိုင္ run ၾကည့္ျကပာလို့ေျပာခ်င္ပာတယ္ 😃။

Page ၂ ခု Link ခ်ိတ္ျခင္း

Page ႏွစ္ခုဆိုတဲ့ အတြက္ HTML file ႏွစ္ခုေရးရပါမယ္။အဲ့file ႏွစ္ခုကိုလဲ folder တစ္ခုထဲေအာက္မွာထားရပါမယ္။
ပထမဆံုး Desktop မွာ Right Click ႏိုပ္ပီး HTML ဆိုတဲ့ folder ေလးတစ္ခုcreat လုပ္လိုက္ပါ။
အခုေရးမဲ့ နမူနာ ပံုစံက Home page နဲ႔
New page Link အျပန္အလွန္ခ်ိတ္ထားတဲ့ပံုစံပါ။
Home page ကေန Link to New page ဆိုတာႏိုပ္လိုက္ရင္ New page ထဲေရာက္သြားပီး New page ကေန Link to Home page ဆိုတာ ႏိုပ္လိုက္ရင္ Home page ကိုျပန္ေရာက္သြားတဲ့ပံုစံမ်ိဳးေရးမွာပါ။
index.html နဲ႔ new.html ဆိုတဲ့ file နွစ္ခုေရးမွာပါ။

index.html မွာေရးရမည့္ code

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

< a href="new.html" > Link to New page </a>

< /body >
< /html >

new.html မွာေရးရမည့္ code

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

< a href="index.html" > Link to New page </a>

< /body >
< /html >

အေပၚက Html file ႏွစ္ခုကို အေစာပိုင္းက creat လုပ္ထားတဲ့ HTML ဆိုတဲ့ folder ထဲမွာသိမ္းထားလိုက္ပါ။(file ႏွစ္ခုထားတဲ့ ေနရာမတူရင္ Link ခ်ိတ္ေပးမွာမဟုတ္ပါပူး)

index ဆိုတဲ့ file ေလးကိုအရင္ဖြင့္ၾကည့္ရေအာင္ဗ်ာ။file ကိုဖြင့္လိုက္ရင္
index page ထဲေခၚသြားပီး Link to New page ဆိုတဲ့ စာသားေလးကိုေတြ႔ရပါမယ္။အဲ့စာသားကိုႏိုပ္လိုက္ရင္ New page ထဲေခၚသြားပါလိမ့္မယ္။(ဒီေနရာကပံုျပလို႔အဆင္မေျပလို႔မထည့္ေတာ့ပါပူး။ တစ္ခုခု error တတ္ရင္ comment မွာ ေမးႏိုင္ပါတယ္ 😁)

New page ကိုက်ေတာ့ new.html လို႔ေပးပီး Home page ကိုက်ေတာ့ ဘာလို႔ index.html လို႔ေပးလဲဆိုေတာ့ web page ေတြမွညစတက္တဲ္ page က index.html page မို႔လို႔ပါ။ default.html လို႔သံုးလဲရပါတယ္။www.youtube.com လို႔ေခၚလိုက္ရင္ တက္လာတဲ့ page က index page ပါ။
www.youtube.com/index.html ပါ။
Search Engine မွာ႐ွာတဲ့အခါ index.html ထည့္စရာမလိုပါပူး။Website တစ္ခုကို႐ွာလိုက္တာနဲ႔ index page ကိုၫႊန္းပီးသားျဖစ္ေနလို႔ပါ။

Page ၂ ခု Link ခ်ိတ္ျခင္း ဆိုတဲ့ေခါင္းစဥ္ေအာက္က စာေတြက Beginner ေတြအတြက္ခတ္ခ်င္ခတ္ေနပါလိမ့္မယ္။
အဲ့ေတာ့ နမူနာေရးထားတဲ့ code အျပင္ ကိုယ္တိုင္ code ေတြစမ္းေရးၾကည့္ၾကပါ။ HTML က မ်ားမ်ား code ေရးေပးေလ ျမန္ျမန္တတ္ေလပါပဲ။