Syntax of HTML image: <img src="url" alt="some_text">url ဆိုသည္မွာ image file တည္ရွိရာ ေနရာ ကိုေျပာျခင္းျဖစ္ပါတယ္။ alt ေနရာမွာေတာ့ မိမိ ေပးခ်င္ေသာ image ၏ နာမည္ ကိုေရးရမွာျဖစ္ပါတယ္။ image file ၏ နာမည္ ကို ေျပာတာမပာုတ္ပါဘူး။ Browser မွ image ကို loading လုပ္ျပီး မျပေပးႏိုင္တဲ့ အေျခအေနမ်ိဳးမွာ alt မွာ ေရးထားေသာ နာမည္ ကို ေဖာ္ျပေပးမွာ ျဖစ္ပါတယ္။
Example:
<img src="image/yourphotoname.jpg" alt="This is my photo">
အထက္ပါ example မွ image/yourphotoname.jpg တြင္ image ဆိုသည္မွာ photo သို.မပာုတ္ image ထည့္ထားေသာ folder name ျဖစ္ျပီး၊ yourphotoname ေနရာတြင္ မိမိ အသံုးျပဳမည့္ photofile ၏ name ကိုထည့္းေပးရမွာပါ။ .jpg ေနရာမွာ တကယ္လို. မိမိသံုးတဲ့ photo file က png အမ်ိဳးအစားျဖစ္လ်င္ .png လို.ေရးရျပီး gif ျဖစ္လ်င္ .gif လို. ေရးရမွာပါ။ ထို file extention မမွန္လ်င္ Browser က ပံုမ်ားကို မေဖာ္ျပေပးႏိုင္ပါဘူး။ ထို.ေၾကာင့္ မိမိ၏ folder name, image file name ႏွင့္ file extention တို. မွန္ကန္ေအာင္ ေရးဖို. လိုအပ္ပါတယ္။က်ေနာ္တို. Image ပါတဲ့ Web page တစ္ခု တည္ေဆာက္ၾကည့္ရေအာင္...
Step 1:
ပထမဆံုး folder တစ္ခု တည္ေဆာက္ျပီး မိမိေပးလိုေသာ နာမည္ေပးလိုက္ပါ။ ထို folder ထဲမွာ folder တစ္ခုထပ္ေဆာက္ျပီး image ပာုနာမည္ေပးလိုက္ပါ။ Web page မွာ အသံုးျပဳမည့္ photo ကို image folder ထဲမွာ ထည့္လိုက္ပါ။ က်ေနာ္တို. Web site ေရးတဲ့အခါမွာ photo ေတြအမ်ားၾကီးကို အသံုးျပဳၾကရလို. သီးသန္.ခြဲျခားထားတဲ့ အေလ့ အက်င့္ေလးျဖစ္ေအာင္ လို.ပါ။Step 2:
Notepad++ ကိုဖြင့္ျပီး index.html ပာုအမည္ေပးကာ က်ေနာ္တို.တည္ေဆာက္ထားတဲ့ folder မွာ သိမ္းလိုက္ပါ။Step 3:
ေအာက္တြင္ ေဖာ္ျပထားေသာ code ကိုေရးလိုက္ပါ။ image/yourphotoname.jpg ေနရာမွာ က်ေနာ္ အထက္မွာ ရွင္းျပထားသည့္ အတိုင္း photo ထည့္ထားေသာ folder name ႏွင့္ file name တို.ျဖင့္ ေျပာင္းေရး လိုက္ပါ။<!DOCTYPE HTML>
<html>
<body>
<img src=”image/yourphotoname.jpg” alt=”This is my photo”>
</body>
</html>ျပီးလ်င္ File menu>save သို.မပာုတ္ keyboard မွCtrl+s ကို ႏွိပ္ျပီးသိမ္းလိုက္ပါ။ index.html file ကို double click ႏွိပ္ျပီး Browser မွာ run ၾကည့္လိုက္ပါ။ မိမိတို. အသံုးျပဳထားေသာ ပံုကို ျမင္ေတြ.ရမွာပါ။
ယခုေရးထားေသာ file မွာ ပဲ က်ေနာ္ တို.ျပဳျပင္မွဳေတြ ထပ္လုပ္ၾကည့္ရေအာင္...
index.html file မွာ right click ႏွိပ္ျပီး Edit with notepad++ ကိုေရြးျပီး index.html ကို ျပန္ဖြင့္လိုက္ပါ။
<img src="image/yourphotoname.jpg" alt="This is my photo"> မွာ width="300" ႏွင့္ height="200" ကိုထပ္ထည့္ ပါမယ္။
ေအာက္ပါအတိုင္း ထည့္ေရးလိုက္ပါ။
<img src="image/photo.jpg" alt="This is my photo" width="300" height="200">
ျပီးလ်င္ save လုပ္ျပီး Browser မွာျပန္ run ၾကည့္ပါ။ Photo ၏ အရြယ္အစားေျပာင္းသြားပါမယ္။ ထိုနည္းျဖင့္ Photo ေတြရဲ့ အရြယ္အစားကို HTML ျဖင့္လည္း ေျပာင္းလဲေရးသား ႏိုင္ပါတယ္။
ဒီေလာက္ဆိုလ်င္ Web page ေတြမွာ photo ကိုေဖာ္ျပဖို. ဘယ္လိုေရးသားရလဲဆိုတာ သိေလာက္ျပီးလို. ယူဆပါတယ္။
No comments:
Post a Comment