Sunday, December 19, 2010

Creating Web Page with HTML-3

Creating Web Page with HTML-3
Part (1)
Lesson-3


Lesson-2 ကို exercise အျဖစ္အဆင္ေျပေျပေရးႏိုင္ၾကမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။
အခုဆိုရင္ 'Dogs' folder ရဲ႔ေအာက္မွာ File ေလးခုရွိေနျပီျဖစ္ပါတယ္။
index.html
chesapeake.html
german.html
yorkshire.html
File တစ္ခုစီမွာ သက္ဆိုင္ရာေခါင္းစဥ္အလိုက္လည္း အသီးသီးရွွိေနၾကျပီ
ျဖစ္ပါတယ္။အခုတစ္ခါ ပံုနဲ႔ စာေတြထပ္ထည့္ၾကပါမယ္။အဲဒီ့အတြက္ ေအာက္မွာ
ေပးထားတဲ့ပံု (3) ပံုကို Save ထားေစခ်င္ပါတယ္။Dog folder ရဲ႔ေအာက္မွာပဲ
folder အသစ္တည္ေဆာက္လိုက္ပါ။၎ကို 'graphics' ဟုအမည္ေပးလိုက္ပါ။
ေပးထားတဲ့ပံုအစဥ္လိုက္ ေအာက္ပါနာမည္မ်ားေပးထားပါ။




chessie.jpg





shepherds.jpg







yorkie.jpg


ပံုေတြလည္းအဆင္သင့္ရွိျပီဆိုရင္ ဆက္ေရးၾကရေအာင္။
chesapeake.html ရဲ႕ Notepad ကိုဖြင့္ပါ။
ေခါင္းစဥ္ရဲ႔ ေအာက္မွာ ေအာက္ပါအတိုင္းရိုက္ပါ။ပံုထည့္ဖို႔
ေခါင္းစဥ္ရဲ႕ေအာက္မွာ ေအာက္ပါအတိုင္းရိုက္ပါ။[ပံုထည့္ဖို႔ tag က <img
src=""> ျဖစ္ပါတယ္။အဖြင့္အပိတ္ထဲမွာ ပံုတည္ရွိရာလမ္းေၾကာင္းအျဖစ္
graphics folder ရဲ႕ေအာက္က ပံုရဲ႔အမည္ကို
ထည့္သြင္းေရးေပးရပါတယ္။ေခါင္းစဥ္ေအာက္ေရာက္ေစရန္ <p> သို႔မဟုတ္
<br> tag အသံုးျပဳပါ။]

<img src="graphics/chessie.jpg">

အဲဒီ့ေနာက္ ပံုရဲ႕ေအာက္မွာ စာပိုဒ္တစ္ပိုဒ္ထည့္ရပါမယ္။
ေအာက္မွာ ေပးထားတဲ့ စာပိုဒ္ကို ကူးယူျပီး စာပိုဒ္ tag အျဖစ္ <p> နဲ႔အတူ Notepad ထဲျဖည့္လိုက္ပါ။

Chesapeake Bay Retrievers love water.If you throw tennis balls in the
water, these dogs will chase them and bring them back until your arm
falls off.

Notepad ကို Save ျပီး Browser မွာ Run တဲ့အခါေအာက္ပါအတိုင္းျမင္ရမွာျဖစ္ပါတယ္။





ပံုရဲ႔ေအာက္မွာရွိေနတဲ့စာပိုဒ္ကို ပံုရဲ႕ေဘးကိုေရာက္ေအာင္
လုပ္ၾကည့္ရေအာင္။သိပ္မခက္ပါဘူး...။ align="left" ဆိုတဲ့ attribute ကို
<img> tag မွာထည့္ေပးရံုပါပဲ။ ေအာက္ပါအတိုင္းပါ။

<img src="graphics/chessie.jpg" align="left">

ထံုးစံအတိုင္း Notepad ကို Save ျပီး Browser မွာ Reloading ျပန္လုပ္တဲ့အခါ ေအာက္ပါအတိုင္း ျမင္ေတြ႕ရမွာ ျဖစ္ပါတယ္။





တစ္ခါတေလ connection က်တဲ့အခါ ပံုမေပၚႏိုင္ပါဘူး။ အဲဒီ့အခါ ပံုေနရာမွာ
အလြတ္ၾကီး ျဖစ္မေနဘဲ ပံုုနဲ႔သက္ဆိုင္တဲ့စာတစ္ေၾကာင္း ေပၚေနေစရန္ alt
attribute (သို႔မဟုတ္) title attribute သံုး၇ပါတယ္။ connection မက်ဘဲ
ပံုမွန္ ထြက္ေပၚခ်ိန္မွာေတာ့ ပံုေပၚ pointer တင္လွ်င္ စာေပၚပါတယ္။
ဒီမွာေတာ့ နမူနာအျဖစ္ title tag သံုးေပးထားပါတယ္။ေအာက္ပါအတိုင္းပါ။

<img src="graphics/chessie.jpg" align="left" title="Chesapeake Bay Retriever">

အခုပံုနဲ႔ စာက ကပ္လြန္းေနပါတယ္။နည္းနည္းခြာၾကည့္ရေအာင္။ အေပၚ၊ ေအာက္
ကြာျခားဖို႔က vspace attribute ပါ။ ဘယ္၊ ညာ ေရႊ႕ဖို႔က hspace attribute
ပါ။ ဒီမွာေတာ့ သင့္ေတာ္မယ္လို႔ယူဆရတဲ့ vspace="4" နဲ႔ hspace="12"
သံုးထားပါတယ္. ကိန္းဂဏန္းအနည္းအမ်ား ကေတာ့ မိမိဘာသာ အမ်ိဳးမ်ိဳး
ေျပာင္းလဲစမ္းသပ္ၾကည့္ပါ။
(စိတ္ရွည္ရွည္ေတာ့ ထားေစခ်င္ပါတယ္။ သို႔မွသာ Coding ေတြရဲ႕သေဘာကို
နားလည္မွာျဖစ္ပါတယ္။ ပံုကိုေဘာင္ခတ္ဖို႔အတြက္ Border attribute
ကိုသံုးပါမယ္။border="1" လို႔သံုးထားပါတယ္။ဂဏန္းမ်ားလာတာနဲ႔အမွ်
ပံုကိုေဘာင္ခတ္ထားတဲ့ မ်ဥ္းက ပိုထူသြားမွာ ျဖစ္ပါတယ္။ ေအာက္မွာ အဆံုးသတ္
Coding ကိုေရးျပထားပါတယ္။

<img src="graphics/chessie.jpg" align="left" title="Chesapeake Bay Retriever" vspace="4" hspace="12" border="1">

Notepad ကို Save ျပီး Browser မွာ Run တဲ့အခါ ေအာက္ပါအတိုင္း ျမင္ေတြ႕ရမွာ ျဖစ္ပါတယ္။






ကဲ..ထံုးစံအတိုင္း Chesapeake Bay Retriever အတြက္ရျပီဆိုရင္ က်န္တဲ့
German shepherds နဲ႔ Yorkshire Terriers page ေတြအတြက္လည္း
မိမိဘာသာဖန္တီးၾကည့္ရေအာင္..။ေအာက္မွာ notes ေတြေပးထားပါတယ္။ ပံုေတြကေတာ့
အစကတည္းက graphics folder ထဲသိမ္းထားခဲ့ျပီေနာ္..။


Practical Exercise for Lesson-3

1.German Shepherds page အတြက္ေခါင္းစဥ္ေအာက္မွ ထည့္ရန္စာ
German Shepherds are smart dogs

2.Yorkshire Terriers page အတြက္ေခါင္းစဥ္ေအာက္မွ ထည့္ရန္စာ
Yorkshire Terriers are cute.

3.စာပိုဒ္မ်ားအား arial font ,size -1 သံုးပါ။

4.စာပိုဒ္မ်ား၏ ေအာက္မွသက္ဆိုင္ရာ ပံုမ်ား ထည့္သြင္းပါ။

5.ပံုမ်ားအား aligm="left" / border="1" / vspace="4" / hsapce="12" အသံုးျပဳပါ။

ေအာက္တြင္ထြက္ေပၚလာရမည့္ Page ႏွစ္ခုကို ေဖာ္ျပထားပါသည္။ ထိုပံုမ်ား မထြက္ေပၚက Coding ျပန္စစ္ပါ။








Create an email link

Home page မွာ email ခ်ိတ္တာပါ တစ္ခါတည္း ေျပာလိုက္ပါမယ္။ email အတြက္ mailto: ဆိုတာသံုးပါတယ္။
index.html ရဲ႔ notepad ထဲက </body> ရဲ႔ အေပၚမွာ ေအာက္ပါအတိုင္း ထည့္ပါ။

<p>
For more information contact<a href="mailto:info@visibooks.com">
info@visibooks.com</a>


Links to an external site

ျပင္ပ site နဲ႔လည္း link ခိ်တ္ႏိုင္ပါတယ္။ခုဏ coding ရဲ႕ေအာက္မွာ ေအာက္ပါအတိုင္းရိုက္ပါ။

Please also visit<a href="http://www.dog.com">www.dog.com</a>;

အားလံုးျပီးျပီေနာ္။ Notepad ကို Save ပါ။ coding ေတြ
အစအဆံုးျပန္မေရးျပေတာ့ဘူးေနာ္။ ျဖစ္တယ္မလား..။ေအာက္က ပံုက Browser မွာ Run
တဲ့အခါ ျမင္ေတြ႔ရမယ့္ပံုပါ...။






ထံုးစံအတိုင္း ေမးစရာရွိရင္ shweainsi2008@gmail.com သို႔ ဆက္သြယ္ေမးျမန္းႏိုင္ပါတယ္..။
သို႔မဟုတ္ discussion အျဖစ္လည္း စာခ်န္ခဲ့ႏိုင္ပါတယ္..။
အဆင္ေျပၾကပါေစ.....
ေမတၱာျဖင့္...သူသူ

န္

No comments:

Post a Comment