အိတ္ခ်္ … ထီ … အန္မ္ … အယ္လ္ – ၁

နံပါတ္ (၁) ပို႕စ္မွာ HTML နဲ႕ မိတ္ဆက္ျခင္း၊ အေျခခံ ေရးနည္းကို ေျပာခဲ့ၿပီးပါၿပီ။
အခုပို႕မွာေတာ့ စာလံုးပံုစံ (Font) နဲ႕ အေရာင္ျခယ္တာ၊ ပံုထည့္တာေတြကို ေရးသားေပးသြားပါမယ္။

စာလံုးပံုစံ

က်ေနာ္တို႕ Word သံုးတဲ့အခါ စာလံုးကို ထင္ရွားေအင္ အနက္ျခယ္တာ (bold)၊ စာလံုး အေစာင္းေလး ထားတာ (italic) နဲ႕ ေအာက္က မ်ဥ္းတားတာ (underline) တို႕ ျပဳလုပ္ပါတယ္။ ဒီလိုပဲ Web Page ေပၚမွာ စာလံုးကို အနက္ျခယ္တာ၊ စာလံုး အေစာင္းထားတာ၊ မ်ဥ္းတားတာေတြကို လုပ္လို႕ ရပါတယ္။

စာလံုး အနက္ျခယ္ဖို႕ဆို <b> နဲ႕ </b> ၾကားထဲမွာ ကိုယ္ အနက္ျခယ္ခ်င္တဲ့ စာလံုးကို ထည့္သြင္း ေရးသားရပါတယ္။ အေစာင္းေလးဆိုရင္ <i> နဲ႕ </i> ၾကားမွာ ထားေရးတယ္။ မ်ဥ္းတားဖို႕ဆို <u> နဲ႕ </u> ၾကားထဲမွာ ထားေရးရပါတယ္။

ဥပမာ အားျဖင့္ ဒီလို ေရးပါတယ္။

<html>
<body>
Hello World!
<b> Hello World! </b>
<i> Hello World! </i>
<u> Hello World! </u>
Hello World!
</body>
</html>

ဒါကေတာ့ စာလံုးကို ထင္ရွားေအာင္ ျခယ္သတာပါ။

စာလံုး စတိုင္နဲ႕ အႀကီးအေသး

Web Page ေပၚမွာ စာလံုးပံုစံ မေရြး၊ စာလံုး အႀကီးအေသး မေရြးဘဲနဲ႕ ဒီအတိုင္းႀကီး ေရးမယ္ဆိုရင္ font က default အေနနဲ႕ပဲ ျပေပးပါတယ္။ က်ေနာ္တို႕က font ကို ကုိယ္စိတ္ႀကိဳက္ ထားမယ္ဆိုပါစို႕။ ဒါဆို font အတြက္ သတ္မွတ္ေပးဖို႕ လိုအပ္လာပါၿပီ။

Font အတြက္ အဖြင့္ tag က <font> ျဖစ္ၿပီး အပိတ္ tag ကေတာ့ </font> ျဖစ္ပါတယ္။
နမူနာ အားျဖင့္ ဒီလိုပါ <font> Hello World! </font> ။

Font အမ်ိဳးအစားကို သတ္မွတ္ဖို႕အတြက္ ဆိုရင္ font tag ထဲမွာ face=”—” ဆိုတာကို ထည့္သြင္း ေရးရၿပီး font ရဲ႕ အရြယ္အစားကိုေတာ့ size=”—” ဆိုၿပီး ထည့္သြင္း ေရးသားရပါတယ္။ Font ရဲ႕ အေရာင္ကိုေတာ့ color=”—” ဆိုတာကို ထည့္သြင္းၿပီး ေရးသားေပးရပါတယ္။
နမူနာ အားျဖင့္ ဒီလိုပါ <font face=”tahoma” size=”4” color=”red”> Hello World! </font> ။

အျပည့္အစံု ပံုစံကေတာ့ ဒီလုိေလးပါ။

<html>
<body>
Hello World!
ရုိးရုိး default စာလံုး – Hello World! <br>
Font ကို ထည့္သြင္းၿပီး စမ္းၾကည့္တဲ့ စာလံုး <br>
<font face=”tahoma” size=”4” color=”red”> Hello World! </font>
</body>
</html>

ဒါဆိုရင္ Web Page ေပၚမွာ စာလံုးေတြကို ကိုယ့္စိတ္ႀကိဳက္ စတိုင္နဲ႕ ထားလို႕ ရသြားပါၿပီ။

ပံုမ်ား ထည့္သြင္းျခင္း

က်ေနာ္တို႕ Website ေတြ ၾကည့္တဲ့အခါ ပံုေတြကို ေတြ႕ရပါတယ္။ အဲဒီလို Web Page ေပၚမွာ ပံုေတြ ေပၚဖို႕အတြက္ဆိုရင္ <img> ဆိုတဲ့ tag ကို ထည့္သြင္း ေရးရပါတယ္။ အဲဒီ ပံုထည့္တဲ့ img tag ရဲ႕ ထူးျခားခ်က္ကေတာ့ အပိတ္ tag မပါျခင္းပဲ ျဖစ္ပါတယ္။

အဲဒီလို ပံုထည့္ဖို႕အတြက္ ပံုရဲ႕ တည္ေနရာ၊ နာမည္နဲ႕ အမ်ိဳးအစား (format) ကို ညႊန္းေပးဖို႕ လိုပါတယ္။ နမူနာ အေနနဲ႕ လုပ္ၾကည့္ဖို႕အတြက္ JPG အမ်ိဳးအစား ပံုတစ္ပံုကို တစ္ေနရာရာမွာ Folder တစ္ခုေဆာက္ၿပီး အဲဒီ Folder ထဲ ထည့္ထားလိုက္ပါ။ ပံုရဲ႕ နာမည္ကိုေတာ့ who လုိ႕ ေပးထားလိုက္ပါ။ ၿပီးရင္ ေအာက္က code ေတြအတိုင္း Notepad ထဲမွာ ရိုက္ထည့္ၿပီး ေစာေစာက Folder ထဲမွာ နာမည္ တစ္ခုခုနဲ႕ Save လိုက္ပါ။

<body>
Hello World!
<b> <u>Putting Image</u> </b> <br>
< img src=”who.jpg” >
</body>
</html>

Save လုပ္ထားတဲ့ html document ေလးကို double click ႏွိပ္ၿပီး run ၾကည့္လိုက္ပါ။ ေခါင္းစဥ္ စားသားေလးနဲ႕ ပံုေလး ေပၚေနတာကို ေတြ႕ရပါလိမ့္မယ္။ ပံုထည့္တဲ့အခါမွာ ကိုယ္ထည့္ခ်င္တဲ့ ပံုက ကိုယ္ save ထားတဲ့ html document နဲ႕ Folder တစ္ခုထဲမွာ အတူတူ ရွိတာ မဟုတ္ဘူးဆိုရင္ ပံုရဲ႕ location ကိုပါ ညႊန္းေပးဖို႕ လိုအပ္ပါတယ္။ ဥပမာ က်ေနာ္က html document ရွိတဲ့ folder ထဲမွာပဲ images ဆိုတဲ့ နာမည္နဲ႕ folder တစ္ခု ထပ္ေဆာက္ၿပီး who ဆိုတဲ့ ပံုကို ထည့္ထားမယ္ ဆိုပါစို႕။

ဒါဆို က်ေနာ္က ဒီလို ျပင္ေရးပါမယ္။ < img src=”images/who.jpg” > ။ images ဆိုတာက ပံုရဲ႕ တည္ေနရာ (location) ပဲ ျဖစ္ပါတယ္။ တည္ေနရာကို ညႊန္းၿပီးရင္ မ်ဥ္းေစာင္းေလးခံၿပီး ပံုရဲ႕ နာမည္နဲ႕ အမ်ိဳးအစားကို ထည့္ေပးရပါတယ္။ ဒါက sub folder ထဲမွာ ရွိတဲ့ ပံုကို ညႊန္းဆိုျခင္း ျဖစ္ပါတယ္။ အဖြင့္နဲ႕ အပိတ္ စံုတြဲရွိတဲ့ tag ေတြကို ေရးတဲ့အခါ ေမ့မက်န္ခဲ့ေအာင္ အဖြင့္အပိတ္ တစ္ခါတည္း တြဲၿပီးေရးသင့္သလို “” ေရးတဲ့ အခါမွာလည္း တစ္ခါတည္း အဖြင့္ေရာ အပိတ္ေရာ တြဲၿပီး ေရးသင့္ပါတယ္။

ကဲဗ်ာ …။ စာလံုး ပံုစံေတြေရာ၊ ပံုေရာ ပါတဲ့ html document ေလးတစ္ခု ေရးၾကည့္ရေအာင္လို႕ Desktop ေပၚမွာပဲျဖစ္ျဖစ္၊ တစ္ေနရာရာပဲ ျဖစ္ျဖစ္ folder ေလး တစ္ခုေဆာက္ၿပီး who နာမည္နဲ႕ JPG အမ်ိဳးအစား ပံုတစ္ပံုကို ထည့္ထားလိုက္ဗ်ာ။ ထည့္ၿပီးရင္ ေအာက္က အတိုင္း notepad ထဲမွာ ေရးၿပီး ေဆာက္ထားတဲ့ folder ထဲမွာ .html ခံၿပီး Save လိုက္ဗ်ာ။ ၿပီးရင္ run လိုက္ေပါ့။

<body>
<b> bold </b> <br>
<i> italic </i> <br>
<u> underline </u> <br>
<font face=”tahoma” size=”4” color=”red”> Font Style </font> <br>
<b> <u>Putting Image</u> </b> <br>
< img src=”who.jpg” >
</body>
</html>

ေရးသားသူ – အံစာတံုး

About မဟာရာဇာ အံစာတံုး

has written 306 post in this Website..

အခ်ိဳ႕ေသာ အရာေတြဟာ "ေျပာင္" ၿပီးရင္ ျပန္ေကာင္းဖို႕ မလြယ္ဘူး။ အခ်ိဳ႕အရာေတြ က်ေတာ့ တစ္မ်ိဳး။ "ေျပာင္" ၿပီးရင္ ပိုပို ေကာင္းလာတတ္တဲ့ အမ်ိဳး။ ႏႈတ္ခမ္းေမြး ေျပာင္ေအာင္လို႕ ရိတ္တယ္။ ရိတ္ေလ .. သန္ေလပဲ။ ထိပ္ေျပာင္လို႕ ဆံပင္ သန္ေအာင္ လုပ္တယ္။ မလြယ္ျပန္ဘူး။ ဒီသေဘာ .. ဒီသေဘာ။