Tuesday 23 July 2013

Html ကုဒ္အေၾကာင္း ( How to put Image in HTML Document)

at 08:44
Posted by Unknown

သင့္၀က္ဆိုက္ရဲ့ စာမ်က္ႏွာေတြထဲကို ဓာတ္ပံုေတြထည့္လို႔ရပါတယ္၊ သင့္၀က္ဆိုက္မွာေပၚလိုတဲ့ ဓာတ္ပံုမွန္သမွ်ကို HTML Tag နဲ႔ Attribute ကို အသံုးျပဳျပီးထည့္ရပါမယ္၊ သံုးမယ့္ Tag ကေတာ့ <img> ပါ၊ သူ႔ရဲ့ထူးျခားခ်က္ကေတာ့ သူ႔မွာ အပိတ္မပါဘူး၊ သူ႔ကိုသူျပန္ပီတ္တဲ့ Self Closing Tag ပါ၊  <imag> Tag ကို အသံုးျပဳျပီး သင့္၀က္ဆိုက္ထဲ ကို ဓာတ္ပံုေတြထည့္ရာမွာ အဓိပ သံုးရတာကေတာ့ src= “” ဆိုတဲ့ Attribute ပါ၊ သူကိုေတာ့ <img> ရဲ့ အထဲ ေနာက္ဆံုး အပိတ္ ျမားေလးမတိုင္းမီထည့္ရပါတယ္၊ ဥပမာ သင္ထည့္မယ့္ ပံုက 1.jpg ဆိုတဲ့ပံုဆိုပါစို႔ ဒါဆိုရင္ေတာ့ ေအာက္ပါအတိုင္းေရးျပီး အဲ့ဒီ့ 1.jpg ကိုသင့္၀က္ဆိုက္ထဲကို ထည့္ႏိုင္ပါတယ္၊ ထည့္မယ့္ပံုကို src= “” ဆိုတဲ့ sorce ကုတ္ေနာက္က အဖြင့္အပိတ္ ႏွစ္ထပ္ေကာ္မာထဲမွာထည့္ရမွာ ေအာက္မွာၾကည့္ပါ၊
<img src= “1.jpg” >
လြယ္ပါတယ္၊ အရင္ဆံုး image ထည့္ရင္သံုးတဲ့ <img> tag ကိုေရးတယ္၊ ျပီးေတာ့ <img ရဲ့ အဆံုးမွာ src = “” ဆိုတဲ့ source ကုတ္ကိုထည့္တယ္၊ ျပီးရင္ src = “” ေနာက္က အဖြင့္အပိတ္ ႏွစ္ထပ္ေကာ္မာထဲမွာ ဓာတ္ပံုကိုထည့္တယ္၊ ထည့္မယ့္ ဓာတ္ပံုကိုေတာ့ သင္ေရးထားတဲ့ HTML Document ကိုသိမ္းတဲ့ HTML Folder ထဲမွာ ထည့္ထားဖို႔လိုတယ္ေနာ္၊
အခုလက္ေတြ႔ ဥပမာ အေနနဲ႔ေအာက္က ပံုကို   HTML Document ထဲကိုထည့္ၾကည့္မယ္၊
ပံုနာမည္ကိုေတာ့ waiferkolar.png လို႔ေပးထားတယ္၊ (72coder ရဲ့တည္ေထာင္သူပါ)၊  သင္ၾကိဳက္တဲ့ ပံုကိုသံုးလို႔ရပါတယ္၊ ဒီပံုမွမဟုတ္ဘူး၊ အခု အဲ့ဒီ့ ပံုကို HTML Floader ထဲကိုထည့္ရမယ္၊ ေအာက္က အတိုင္း၊
အထကလို သင္ေရးေနတဲ့ HTML Doucment နဲ႔ သင္အသံုးျပဳမယ့္ ပံုက folder တစ္ခုထဲမွာရွိဖို႔က သိပ္ကိုအေရးၾကီးလွပါတယ္၊ folder တစ္ခုထဲမွာ အတူတူ မရွိရင္ေတာ့ ဘယ္လိုမွအလုပ္မျဖစ္ပါဘူး၊ ေနာက္တစ္ခုက ပံုရဲ့ extension ကိုေသခ်ာသိဖို႔လိုပါတယ္၊  သင္သံုးမယ့္ပံုက JPG လား၊ Gif လား၊ png အမ်ိုဳးအစားလား အတိအက်သိဖို႔လိုတယ္၊ အေသအခ်ာမသိရင္ အဲ့ဒီ့ပံုေပၚမွာ ခလစ္တစ္ခ်က္ေထာက္လိုက္ ဒါဆိုရင္ ေအာက္ပိုင္းမွာ ဓာတ္ပံုအမ်ိဳးအစားကိုေျပာတဲ့ စာသားကိုေတြ႔ရမွာပါ၊  အထက္မွာ ဓာတ္ပံုအမ်ိဳးအစားျပတဲ့ေနရာကို ျမားစိမ္းျပထားတယ္၊
အထက္ကအတိုင္း အားလံုး အဆင္ေျပျပီးဆိုရင္ေတာ့ ကုတ္စေရးမယ္၊ ပံုထည့္မွာျဖစ္တဲ့အတြက္ HTML ရဲ့ image tag ျဖစ္တဲ့ <img> ကိုစေရးမယ္၊ ျပီးရင္ HTML image tag နဲ႔ တြဲတဲ့ Attribute ျဖစ္တဲ့ src= “” ကိုထည့္မယ္၊ ျပီးပီဆိုရင္ ပံုရဲ့နာမည္ျဖစ္တဲ့ waiferkolar.png ကိုထည့္မယ္၊ ေအာက္က အတိုင္း
<html>
<head>
<title>Firstwebpage</title>
</head>
<body>
what is this website name <br/>
<img src= “waiferkolar.png”>
</body>
</html>
အထက္က အတိုင္း ကုတ္ေရးျပီးရင္ Run ၾကည့္လိုက္ပါ၊ ဒါဆိုရင္ေတာ့ သင့္ရဲ့ ၀က္ဆိုက္မွာ ေအာက္ပါအတိုင္း စာသားနဲ႔ ပံုကိုေတြ႔ရမယ္၊
ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

                                 ref: http://www.72coder.com/
<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>
 
 
ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။
လယ္တီေျမသား www.ledimyethar.blogspot.com
ဘေလာ့ခရီးသည္ http://aungsanmks.blogspot.com/
 ဓမၼႏွင့္စာေပနန္းေတာ္ http://ninilayy.blogspot.com/
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)