Tuesday, July 26, 2016
How to put Image in HTML Document
သင့္၀က္ဆိုက္ရဲ့ စာမ်က္ႏွာေတြထဲကို ဓာတ္ပံုေတြထည့္လို႔ရပါတယ္၊ သင့္၀က္ဆိုက္မွာေပၚလိုတဲ့ ဓာတ္ပံုမွန္သမွ်ကို 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 ၾကည့္လိုက္ပါ၊ ဒါဆိုရင္ေတာ့ သင့္ရဲ့ ၀က္ဆိုက္မွာ ေအာက္ပါအတိုင္း စာသားနဲ႔ ပံုကိုေတြ႔ရမယ္၊
အထက္က အတိုင္း သင့္၀က္ဆိုက္မွာ စာနဲ႔ ပံုေပၚရင္ျဖင့္ အားလံုးအဆင္ေျပပါတယ္၊ ဒါကေတာ့ ၀က္ဆိုက္စာမ်က္ႏွာထဲကို ပံုထည့္တဲ့နည္းပါ၊
ဓာတ္ပံုကိုထည့္တဲ့အခါမွာ ထည့္လိုက္တဲ့ ဓာတ္ပံုရဲ့ အျမင့္ (height) နဲ႔ အက်ယ္ (width) တို႔ကိုလဲ attribute အျဖစ္ထည့္သင့္ပါတယ္၊
ဘာလို႔ထည့္သင့္လဲဆိုေတာ့ သင့္၀က္ဆိုက္ကို အသံုးျပဳသူက လာလည္တဲ့အခါ ၀က္ဆိုက္ကိုအရင္ဆံုး ၀န္တင္ပါလိမ့္မယ္ (loding) အဲ့ဒီ့အခါမွာ
သင့္၀က္ဆိုက္မွာ ပံုေတြအမ်ားၾကီးပါေနတယ္ဆိုရင္ေတာ့ ပံုေတြတင္တဲ့အခ်ိန္က တကယ့္ကိုၾကာေနႏိုင္ပါတယ္၊ ဒီေတာ့ ၀က္ဆိုက္တစ္ခုလံုး ၀န္တင္ျပီးဖို႔က
အေတာ့ကိုေစာင့္ရမယ္၊ (အထူးသျဖင့္ အင္တာနက္ ကြန္နက္ရွင္ေႏွးတဲ့ေနရာေတြမွာေပါ့)၊ ဒီေတာ့ ဓာတ္ပံုရဲ့ အျမင့္ နဲ႔ အက်ယ္ကို Attribute
အျဖစ္ထည့္ထားခဲ့ရင္ျဖင့္ သင့္၀က္ဆိုက္ကို ၀င္တင္တဲ့ အခါ ဓာတ္ပံုေတြရဲ့ အျမင့္ နဲ႔ အက်ယ္ကို ခ်န္ခဲ့ျပီး စာသားေတြကို
အရင္၀င္တင္ေနလိမ့္မယ္၊ ေနာက္မွာ ဓာတ္ပံုကိုအရင္၀န္တင္လိမ့္မယ္၊ ဒီေတာ့ သင့္ဆိုက္ကိုလာလည္သူက ဓာတ္ပံုေတြ၀င္တင္ေနတဲ့ အခ်ိန္အတြင္းမွာ
စာေတြကိုဖတ္ေနႏိုင္တယ္၊ ဓာတ္ပံုအရြယ္အစားကိုအတိအက် မထည့္ထားရင္ အင္တာနက္ Browser က ဓာတ္ပံုအတြက္ ဘယ္ေလာက္
အရြယ္အစားခ်န္ခဲ့ရမယ္မွန္းမသိဘူး၊ ဒီေတာ့ ဓာတ္ပံုကို အရင္၀င္တင္တယ္၊ ေနာက္မွာ က်န္တဲ့အစိတ္အပိုင္းေတြကို ၀န္တင္တယ္၊
ဒီေတာ့ ဓာတ္ပံုရဲ့ အရြယ္အစားျဖစ္တဲ့ height အျမင့္ နဲ႔ width အက်ယ္တို႔ကို ထည့္တာ ဘယ္ေလာက္ထိအေရးသာလဲဆိုတာကိုသေဘာေပါက္ေလာက္ပါပီ၊
အခု Height နဲ႔ width ကိုထည့္ၾကမယ္၊ ထည့္ဖို႔အတြက္ သင့္ဓာတ္ပံုက ဘယ္ေလာက္အရြယ္အစားရွိလဲဆိုတာကိုသိဖို႔လိုတယ္၊
ဓာတ္ပံုဘယ္ေလာက္အရြယ္အစားရွိလဲ မၾကည့္တတ္ရင္ေတာ့ အဲ့ဒီ့ ဓာတ္ပံုေပၚမွာ cursor (pointer) ေထာက္လိုက္ (မႏွိပ္နဲ႔ေနာ္) ဒါဆိုရင္ေတာ့ အဲ့ဒီ့
pointer ေထာက္လိုက္တဲ့ ဓာတ္ပံုရဲ့ Dimention နဲ႔ ဓာတ္ပံုရဲ့အခ်က္အလက္ေတြကိုျပေပးတဲ့ ဇယား အေသးေလးက်လာပါမယ္၊ ေအာက္မွာၾကည့္ပါ၊
အထက္က ပံုအတိုင္း သင္ အရြယ္အစားသိလိုတဲ့ ဓာတ္ပံုေပၚကို pointer ေထာက္လိုက္ရင္ သူ႔ေအာက္မွာ ဇယားေလးက်လာမွာပါ၊ အခုေပၚက waiferkolar
ပံုမွာျပထားတဲ့အတိုင္းပါ၊ item type: PNG image ဆိုတာက ဓာတ္ပံုအမ်ိဳးအစားက PNG အမ်ိဳးအစားလို႔ ေျပာတာပါ၊ Dimensions 267 x 380 ဆိုတာက
ဓာတ္ပံုရဲ့ အက်ယ္ (width) 267 pxils ျဖစ္ျပီး အျမင့္ (height) 380 pxils ျဖစ္တယ္လို႔ေျပာတာပါ၊
အခု အထက္က ပံုရဲ့ attribute ျဖစ္တဲ့ height နဲ႔ width တို႔ ကို သင့္၀က္ဆိုက္မွာတင္တဲ့ image tag ထဲမွာထည့္မယ္၊ အျမင့္ကိုထည့္ဖို႔အတြက္ height =
380px အက်ယ္ကိုထည့္ဖို႔အတြက္ width = 267px ဆိုျပီးထည့္ရမယ္၊ ေအာက္မွာၾကည့္ပါ၊
<img src= "waiferkolar.png" height = “380” width = “267”>
အထက္က အတိုင္း height နဲ႔ width တို႔ကိုသင့္ရဲ့ ၀က္ဆိုက္ထဲကိုထည့္တဲ့ ပံုမွာထည့္ႏိုင္ပါတယ္၊
ေနာက္ထပ္ေလ့လာစရာတစ္ခုကေတာ့ HTML ရဲ့ Alter Attribute ပါ၊ တစ္ခ်ိဳ႕ လူေတြက သူတို႔ ရဲ့ အင္တာနက္ Browser ကို ဓာတ္ပံုေတြ ၀န္မတင္ေအာင္
Setting ခ်ထားတယ္၊ ဒီေတာ့ သင့္ဆိုက္မွာတင္ထားတဲ့ ဓာတ္ပံုေတြက အဲ့ဒီ့ လိုလူေတြရဲ့ Browser နဲ႔ သြားေတြ႔ရင္ ဓာတ္ပံုေတြမေပၚေတာ့ပဲ
ဗလာေနရာၾကီးျဖစ္ေနတယ္၊ ၾကည့္ရတာ အဆင္မေျပဘူး၊ ဒီလို Browser ေတြအတြက္ အဆင့္ေျပေအာင္း သံုးလို႔ရတဲ့ Attribute တစ္ခုရွိတယ္၊ သူကေတာ့
alt လို႔ေခၚတဲ့ alter attribute ပါ၊ သူ႔ကိုေရးရင္ alt= “ ” လို႔ေရးရတယ္၊ ႏွစ္ထပ္ေကာင္မာရဲ့ ၾကားမွာ သင္ၾကိဳက္တဲ့စာသားကိုထည့္ျပီးေရးလို႔ရတယ္၊
ဓာတ္ပံုနဲ႔ ပတ္သတ္တဲ့စာသားဆိုရင္ပိုျပီး သင့္ေတာ္တယ္၊ ဒီလို alt အသံုးျပဳျပီး စာသားတစ္ခုခု ထည့္လိုက္ျခင္းအားျဖင့္ ဓာတ္ပံုေတြက ၀န္မတင္တဲ့ web
browser နဲ႔ ေတြ႔ရင္ ဓာတ္ပံုအစား သင္ Alt attribute သံုးျပီးေရးထားတဲ့စာသားေပၚလာမယ္၊ ဓာတ္ပံု ၀န္တင္လို႔ရရင္ေတာ့ အဲ့ဒီ့ alter attribute
သံုးထားတဲ့စာသား မေပၚပဲ ဓာတ္ပံုပဲ ေပၚမယ္၊ ေအာက္မွာ Altre attribute ကိုထည့္ျပီးေရးတဲ့ပံုကိုၾကည့္ပါ၊
<img src= "waiferkolar.png" alt= “waiferkolar” height = “380” width = “267”>
အထက္မွာေတာ့ alt ဆိုတဲ့ alter attribute ထဲကို waiferkolar ဆိုတဲ့ စာသားထည့္လိုက္တယ္၊ ဒါေၾကာင့္ ၀က္ဆိုင္၀န္တင္တဲ့အခါ brwoser က
ဓာတ္ပံုကိုလက္မခံရင္ ဓာတ္ပံုေနရာမွာ waiferkolar ဆိုတဲ့စာသားေပၚလာမယ္၊
အျခားPostမ်ားၾကည့္လိုပါကအေပၚက Menu မွာၾကည့္လို႔ရပါတယ္ေနာ္
ကၽြန္ေတာ္ပိုင္ေနရာေလးမ်ား
ေရာင္ျပန္ေလးစာေပသို႔ဒီမွာသြားပါ
18+တို႔ဆံုဆည္းရာသို႔ဒီမွာသြားပါ
****အဆင္မေျပမႈ႔တစ္စံုတစ္ရာရွိပါက****
Facebook Account ျဖစ္တဲ႔
ေအာက္ပါပံုေလးကိုႏွိပ္ျပီးေ၀ဖန္အၾကံေပးႏိုင္ပါတယ္
@@@@စာေပ၀ါသနာပါရင္ကၽြန္ေတာ့္ရဲေရာင္ျပန္ေလး-စာေပ PageကိုLikeႏွိပ္ထားပါဦး@@@@
$$$$အားေပးမႈ႔ကိုအထူးပင္ေက်းဇူးတင္ရွိပါသည္$$$$
ကိုယ္စိတ္ႏွစ္ျဖာက်န္းမာ၊ ခ်မ္းသာၾကပါေစ
