Lesson-2
Paragraph စတင္ေရးပါမယ္။ အဲဒီ့အတြက္ <p> tag ကိုသံုးပါမယ္။ ထံုးစံအတိုင္း
</p> နဲ႔လည္းျပန္ပိတ္ေပးရပါမယ္။ <body> ရဲ႕ေအာက္မွာ
ေအာက္ပါအတိုင္းရိုက္ပါ။(စာေၾကာင္းအတြက္ Font, Size ထည့္တာ Lesson-1 မွာသိခဲ့ျပီးသားမို႔ အထူးေျပာစရာလိုမယ္မထင္ေတာ့ပါ။)
<p>
<font face=”arial” size=”-1”>
These are my favorite breeds of dogs.
</font>
</p>
ျပီးရင္ Notepad ကို Save ျပီး Browser မွာ Run ၾကည့္ပါဦး။ မူလ Dogs Home
Page ရဲ႕ေအာက္မွာ These are my favorite breeds of dog
ဆိုျပီးစာေၾကာင္းတစ္ေၾကာင္းေပၚေနတာ ျမင္ေတြ႔ရမွာျဖစ္ပါတယ္။ အဲဒီ့စာေၾကာင္းေလးကို ညာဘက္ကပ္သြားေအာင္လည္း လုပ္လို႔ရပါတယ္။ <p> tag ထဲမွာ attribute အျဖစ္
‘align’ ကိုအသံုးျပဳရပါတယ္။ ညာဘက္ကပ္ေစခ်င္ရင္ေတာ့ right ေပါ့။
<p align=”right”>
<font face=”arial” size=”-1”>
These are my favorite breeds of dogs.
</font>
</p>
အဲဒီ့လို Coding ေျပာင္းလဲျပီးရင္ Notepad ကို Save ျပီး Browser မွာ Run
တဲ့အခါေအာက္ပါအတိုင္းျမင္ရမွာျဖစ္ပါတယ္။
Align ထည့္တာသေဘာေပါက္သြားျပီဆိုရင္ align ထည့္ထားတာျပန္ဖ်က္ျပီး မူလ Coding
အဆိုင္းျပန္ထားလိုက္ပါ။ Notepad မွာတစ္ခုခုေျပာင္းလဲျပီးတိုင္း Save
ဖို႔မေမ့ပါနဲ႔။ align ထည့္မထားတဲ့အခါ စာေၾကာင္းဟာပံုမွန္အတိုင္း
ဘယ္ဘက္မွာပဲရွိေနပါမယ္။ align=”left” ထည့္တဲ့သေဘာပါပဲ။ ဘာမွ align လည့္မထားလဲ
သူ႕ဘာသာသူ ဘယ္ဘက္ကစပါလိမ့္မယ္။
တျခားစမ္းသပ္ၾကည့္ခ်င္ေသးရင္ မိမိႏွစ္သက္ရာစာေၾကာင္းေတြထပ္ရုိက္ၾကည့္ပါ။ </p> ေအာက္ကေပါ့။စာေၾကာင္းတစ္ေၾကာင္းဆင္းခ်င္ရင္ <br> ထည့္ေပးရပါမယ္။ႏွစ္ေၾကာင္းဆင္းခ်င္ရင္ <br><br> ႏွစ္ခါေပါ့။သူကေတာ့ အဆံုးမွာျပန္ပိတ္ေပးစရာမလိုပါဘူး။
<p></p> tag က စာတစ္ပိုဒ္စီအတြက္အသံုးျပဳျပီး <br>က အဲဒီ့စာပိုဒ္ထဲမွာမွ စာေၾကာင္းေတြဆင္းဖို႔အတြက္ အသံုးျပဳပါတယ္။
ဆက္ေရးရေအာင္ ။
These are my favorite breeds of dogs ေရးထားတဲ့ </p> tag
ေအာက္မွာေအာက္ပါအတိုင္းရိုက္ပါ။
<p>Cheseapeake Bay Retriever</p>
<p>German Shepherd</p>
<p>Yorkshire Terrier</p>
Notepad ကို Save ျပီး Browser ကို Run ၾကည့္ရင္ These are my favorite breeds of
dogs ရဲ႔ေအာက္မွာ အခုေရးလိုက္တဲ့ စာသံုးေၾကာင္းရွိေနတာကို ျမင္ေတြ႔ရမွာ
ျဖစ္ပါတယ္။အဲဒီ့စာသံုးေၾကာင္းကို နံပါတ္စဥ္တပ္ခ်င္ရင္ <ol> tag ကိုသံုးပါတယ္။Notepad ထဲက အဲဒီ့စာသံုးေၾကာင္းထိပ္နဲ႔ဘိတ္မွာ <ol> </ol> တပ္ေပးရံုပါပဲ။
<ol>
<p>Cheseapeake Bay Retriever</p>
<p>German Shepherd</p>
<p>Yorkshire Terrier</p>
</ol>
Notepad ကို Save ျပီး Browser မွာ Run တဲ့အခါ
1.Cheseapeake Bay Retriever
2.German Shepherd
3.Yorkshire Terrier
ဆိုျပီး နံပါတ္စဥ္တပ္ေပးသြားတာ ျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္။ဒါကို နားလည္သြားျပီဆိုရင္
<ol></ol> ကိုျပန္ဖ်က္လိုက္ပါ။
အခုတစ္ဖန္ Bullets တပ္ၾကည့္ပါမယ္။ကိုယ္ Bullets တပ္ခ်င္တဲ့စာေၾကာင္းရဲ႔ေရွ႔မွာ
<li> တပ္ေပးရံုပါပဲ။<li> tag က အဆံုးမွာျပန္ပိတ္ေပးစရာမလိုပါ။
ထို႔ျပင္ Bullets တပ္တာဟာ သူ႔အလိုလိုစာတစ္ေၾကာင္းစီ ဆင္းသြားတာမို႔ <p> tag
လည္းျဖဳတ္လို႔ရပါတယ္။ေအာက္ပါအတိုင္း ျဖစ္ပါတယ္။
<li>Cheseapeake Bay Retriever
<li>German Shepherd
<li>Yorkshire Terrier
Notepad Save ပါ။Coding အထားအသိုမွန္၊ မမွန္ တစ္ခ်က္ေတာ့
ျပန္စစ္ၾကည့္ပါဦး။
<html>
<head>
<!--created by thuthu-->
</head>
<title>
A Home Page About Dogs
</title>
<body>
<font face="arial" size="+4" color="red">
<b>Dogs Home Page</b></font>
<p>
<font face="arial" size="-1">
These are my favorite breeds of dogs</font>
</p>
<li>Cheseapeake Bay Retriever
<li>German Shepherd
<li>Yorkshire Terrier
</body>
</html>
Browser မွာ Run ၾကည့္တဲ့အခါ ေအာက္ပါအတိုင္းျမင္ေတြ႔ရမွာ ျဖစ္ပါတယ္။
Create Links to new pages
Step 1:Create a new page
အခုတစ္ခါေဖာ္ျပပါေခါင္းစဥ္သံုးခုကို link ခ်ိတ္ၾကည့္ၾကပါမယ္။ ေနာက္ထပ္စာမ်က္ႏွာခြဲေတြ ဆိုပါစို႔။ ဒါဆိုရင္
အဲဒီ့စာမ်က္ႏွာေတြ ထပ္တည္ေဆာက္ေပးဖို႔ကေတာ့
က်ိန္းေသလိုအပ္လို႔ေနပါျပီ။ အခုေရးျပီးသား Coding ေတြကိုပဲ အသံုးျပဳျပီး ေနာက္ထပ္ Filတစ္ခုထပ္တည္ေဆာက္ပါမယ္။
Notepad ထဲက title ကို “Chesapeake Bay Retrievers”
လို႔ေျပာင္းလဲလိုက္ပါ။ျပီးရင္ <body> အဖြင့္နဲ႔ </body> အပိတ္ၾကားထဲက စာသားေတြ
အကုန္လံုးဖ်က္ပစ္လိုက္ပါ။File အသစ္တစ္ခုရပါျပီ။ Save ရေအာင္။
Menu bar > File > Save As
File name မွာ Chesapeake.html
Save as type မွာ All Files
အားလံုးျပီးရင္ Save ကိုကလစ္ပါ။ဒါဆိုရင္ Dogs ဆိုတဲ့ Folder ရဲ႔ေအာက္မွာ Home Page အျဖစ္ index.html ၊ စာမ်က္ႏွာခြဲအျဖစ္ Chesapeake.html ဆိုျပီး File ေလးႏွစ္ခုရွိလာပါျပီ။
ဒီ Chesapeake Bay Retrievers ကိုစာသားထပ္ထည့္ၾကည့္ၾကပါမယ္။ <body> tag ရဲ႕ေအာက္မွာ ေအာက္ပါအတိုင္း
ရိုက္ပါ။
<font face=verdana size=+3><b>Chesapeake Bay Retrievers</b></font>
စာလံုး font ကိုဒီတစ္ခါ verdana ေျပာင္းသံုးထားပါတယ္။ေခါင္းစဥ္ျဖစ္တဲ့အတြက္ အရြယ္အစားၾကီးေစဖို႔ + 3 ကိုအသံုးျပဳပါတယ္။(Home Page ရဲ႕ေခါင္းစဥ္ထက္အနည္းငယ္ေသးေပး
ရပါတယ္) ။ပိုထင္ရွားေအာင္ bold ပါတင္လိုက္တယ္ေပါ့။ Notepad ကို Save ျပီး Browser မွာ Run တဲ့အခါ
ေအာက္ပါအတိုင္းျမင္ေတြ႕ရမွာ ျဖစ္ပါတယ္။
Step 2 : Links to the new page
Link ခ်ိတ္လို႔ရပါျပီ။
Home Page(index.html) ရဲ႕ Notepad ကိုဖြင့္ပါ။
Chesapeake Bay Retrievers စာေၾကာင္းရဲ႕ေရွ႔မွာ <a href=””> ဆိုတဲ့ tag
ထပ္ထည့္ပါမယ္။ေအာက္ပါအတိုင္းေပါ့။
<li><b><a href=”Chesapeake.html” targt=”_blank”>Chesapeake Bay Retrievers</a></b>
Chesapeake Bay Retrievers File ကိုခ်ိတ္ခ်င္တဲ့ အတြက္ “” အတြင္းမွာ Chesapeake.html ကိုထည့္ပါတယ္။
အဆံုးမွာ </a> အပိတ္လည္းျပန္ထည့္ေပးရပါတယ္။ target သံုးတာက အဲဒီ့ link ကို click
လိုက္ရင္ေနာက္ထပ္ new tag အေနနဲ႔ ထြက္ေပၚေအာင္ပါ။အခ်ိဳ႔ကေတာ့ target=”_new”
လို႔လည္းသံုးပါတယ္။
Notepad ကို Save ျပီး Browser မွာ Run တဲ့အခါ ေအာက္ပါအတိုင္းျမင္ေတြ႕ရမွာျဖစ္ပါတယ္။
Link ကို click လိုက္ရင္ Chesapeake Bay Retriever page ေပၚလာတာကိုျမင္ေတြ႕ရမွာ ျဖစ္ပါတယ္.။
Practical Exercise for lesson 2
ေနာက္ထပ္ German Shepherds နဲ႔ Yorkshire Terriers ကိုလည္း new pages အျဖစ္တည္ေဆာက္ျပီး လင့္ခ်ိတ္ပါမယ္။ဒီတစ္ခါေတာ့ မိမိဘာသာဖန္တီးၾကည့္ပါဦး။ေအာက္မွာ
ေျပာင္းရမယ့္ title , file name ေတြေပးထားပါတယ္။Page တစ္ခုစီမွာ ရွိရမယ့္ ေခါင္းစဥ္အတြက္ font , size , weight
တို႔ကိ္ုလည္း ေပးထားပါတယ္။
1.
Title | File Name | |
German Shepherds | German Shepherds | German.html |
Yorkshire Terriers | Yorkshire Terriers | Yorkshire.html |
2.home page(index.html) Notepad မွ ေခါင္းစဥ္အား Home Page ကိုဖ်က္ပါ။
"Dogs" ဟုထားရွိပါ။(အခုက home page ဆိုတာ သေဘာေပါက္ေနျပီမို႔ ထည့္ေရးစရာ မလိုအပ္ေတာ့ပါဘူး။)
3. Page တစ္ခုစီအတြက္ ေခါင္းစဥ္မ်ား
German Shepherds ] -------- (verdana , bold ,+3 )
Yorkshire Terriers
4.home page(index.html) Notepad ၌အထက္ပါ new pages အားလံုးကို Link ခိ်တ္ပါ။(Chesapeake ကဲ့သို႔ပင္ ျဖစ္ပါသည္။)
5.File အားလံုး Save ရန္ မေမ့ပါႏွင့္။
6. Browser ၌ Run ၾကည့္ျပီး Link 3 လံုး click ၾကည့္ပါ။ သက္ဆိုင္ရာ ေခါင္းစဥ္အလိုက္ new page မ်ားထြက္ေပၚလာရပါမည္။
မေပၚခဲ့လွ်င္ Coding ျပန္စစ္ပါ။
Lesson 2 ကိုအဆင္ေျပေျပေရးႏိုင္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ Practical အျဖစ္ exercise
ေပးထားတာမို႔ lesson 2 အႏွစ္ခ်ဳပ္ကို မေဖာ္ျပေတာ့ပါ။အခုဆိုရင္ Website တစ္ခုအတြက္
စာမ်က္ႏွာခြဲေတြပါ တည္ေဆာက္ျပီးပါျပီ။ အခုထိနားလည္လာခဲ့ျပီဆိုရင္ ေနာက္ပိုင္း lessonေတြမွာ လြယ္လြယ္ကူကူျဖစ္သြးမွာပါ။ေမးျမန္းစရာ ရွိခဲ့ရင္ shweainsi2008@gmail.com
သို႔ဆက္သြယ္ေမးျမန္းႏိုင္ပါတယ္။(သို႔) discussion အျဖစ္လည္း ေမးစရာေတြ
ခ်န္ထားခဲ့နိုင္ပါတယ္။
အဆင္ေျပၾကပါေစ။
ေမတၱာျဖင့္………သူသူ
No comments:
Post a Comment