Oh! You come to my blog. Welcome.
မွတ္ခ်က္(Image ရဲ႕ေနရာကိုေတာ့ Picture ရဲ႕ properties ကေနယူေပးပါ) ၊ Background image
က်န္ေသာ tag မ်ားကိုေတာ့ အစားထိုးျပီးေလ့လာၾကည့္ပါ၊ေအာက္ကပံုေပၚလာပါလိမ္မယ္။
ဒီဥပမာေလးကေတာ့ မိမိကြန္ပ်ဳတာထဲရိွ image ကို Img src နဲ႕ညြန္းျပီးသံုးထားတာပါ။
အားလံုးကိုေလးစားလ်က္ပါ၊
Image သည္ web designer ေတြရဲ႕ အသက္ျဖစ္တယ္လိုဆိုထားပါတယ္။ ရုပ္ပံုေလးပါမွ
ၾကည့္ရတဲ့သူ ဖတ္ရတဲ့သူအဖို႕ ပိုးျပီးေတာ့ အသက္ဝင္သြားပါတယ္။ အခု ေနာက္ပိုင္းမွာေတာ့
အသံုးျပဳပံုေတြကို Video ဖိုင္ေတြနဲ႕ ေဖၚျပက်ပါသည္။ ရုပ္ပံုထည္ရာတြင္ the same directory
ထဲတြင္ထည့္မထားပါက ၄င္းပါရိွသည့္ Folder ကို ညြန္းေပးရပါမယ္။ ေအာက္က ဥပမာ ေလးက
ေတာ့ ကိုယ့္ရဲ႕ ကြန္ပ်ဴတာ ထဲမွ ပံုကိုယူရန ္ ညြန္ထားတာပါ။ လုပ္ၾကည့္လိုက္ရင္ နားလည္သြားမွာပါ။
တကယ္လို႕ ပံုမျမင္ရပဲ ၾကက္ေျခခတ္ (x ) ပဲျမင္ရရင္ေတာ့ ထည့္ထားတဲ့ image ပတ္လမ္းေၾကာင္းမွား
ေတာ့ ကိုယ့္ရဲ႕ ကြန္ပ်ဴတာ ထဲမွ ပံုကိုယူရန ္ ညြန္ထားတာပါ။ လုပ္ၾကည့္လိုက္ရင္ နားလည္သြားမွာပါ။
တကယ္လို႕ ပံုမျမင္ရပဲ ၾကက္ေျခခတ္ (x ) ပဲျမင္ရရင္ေတာ့ ထည့္ထားတဲ့ image ပတ္လမ္းေၾကာင္းမွား
တာျဖစ္ႏိုင္သလို၊ image extension မွားတာလည္း ျဖစ္ႏိုင္တယ္။ size ၾကီးေနလို႕ ဒါမွမဟုတ္ ငယ္ေနလို
လဲျဖစ္နိုင္ပါတယ္။ image ထည့္လို႕ရတဲ့ extension ေတြကေတာ့ jpg/ gif/ png ေတြပါ။
ဥပမာ-
| <html> <head><title>bgbackground image </title></head> <body background= “ C:\Users\Public\Pictures\Sample Pictures “bgproperties=”fixed”> <h1>this is bgpicture</h1> </body> </html> |
မွတ္ခ်က္(Image ရဲ႕ေနရာကိုေတာ့ Picture ရဲ႕ properties ကေနယူေပးပါ) ၊ Background image
ထည့္ပံုကိုနားလည္မွာပါ။Web page ေပၚတြင္ image ထားရိွပံုကို ဆက္ျပီးေလ့လာၾကည့္ပါဦး။
Bg image နွင့္ Web page ရိွ image (forder) ထားရိွပံုျခင္းတူေသာလဲ၊သေဘာသဘာဝ ျခင္းမတူပါ။ ဘာေၾကာင့္မတူတာလဲဆိုတာကို what is html ဆိုတဲ့ေခါင္းစဥ္အာက္မွာ ရွင္းထား
ပါတယ္။ <imgsrc=" " alt=” "texT”border=” “hspace=””vspacce=””> tag ပံုစံတြင္ Src
သည္ source ျဖစ္ျပီး image ပါရိွသည့္ေနရာနွင့္ fine name / file extension ကိုရည္ညြန္းပါသည္။
သည္ source ျဖစ္ျပီး image ပါရိွသည့္ေနရာနွင့္ fine name / file extension ကိုရည္ညြန္းပါသည္။
border သည္ အနားသတ္မ်ဥ္း၏ အထူကိုသတ္မွတ္ရန္ျဖစ္ပါသည္။Border ေပးထားပါက Space
(ကြာဟ)မူကို Hspace / Vspace တို႕ျဖစ္သတ္မွတ္နိုင္ပါသည္။Boderline မေပးထားေသာ Image
မ်ားကို <imasrc=” ”> ျဖစ္ေရးနိုင္ပါသည္။အတိုင္းအတာ သတ္မွတ္လိုပါက Height=” “ / Width
=” “ မ်ားျဖင့္ Pixet တန္းဖိုးမ်ားကို ေရးသားေပး၇ပါသည္။၄င္းသတ္မွတ္ခ်က္မ်ားကို Image pixet Dimension ႏွင့္သတ္ မွတ္သျဖင့္ Graphic သေဘာတရားမ်ားကို အနည္းငယ္သိထားရင္ ပိုေကာင္း
ပါတယ္။
မ်ားကို <imasrc=” ”> ျဖစ္ေရးနိုင္ပါသည္။အတိုင္းအတာ သတ္မွတ္လိုပါက Height=” “ / Width
=” “ မ်ားျဖင့္ Pixet တန္းဖိုးမ်ားကို ေရးသားေပး၇ပါသည္။၄င္းသတ္မွတ္ခ်က္မ်ားကို Image pixet Dimension ႏွင့္သတ္ မွတ္သျဖင့္ Graphic သေဘာတရားမ်ားကို အနည္းငယ္သိထားရင္ ပိုေကာင္း
ပါတယ္။
Image မ်ားတြင္ ရိုးရိုး Image ႏွင့္ Animated Image (Animated Fig) မ်ားပါ၇ိွပါသည္။ Animated image သည္ အသက္လႈပ္ရွားမႈရိွေသာ Image တစ္မ်ိဳးျဖစ္ပါသည္။ ၄င္းကို Web page တြင္ထည့္တြင္းရသည္နည္းမွာ ရိုးရိုး Image ထည့္နည္းအတိုင္းပဲ ထည့္ပါတယ္။ ေအာက္မွာလဲ
ကၽြန္ေတာ္ နားလည္တက္ေလာက္ အတက္နိုင္ဆံုး ရွင္းထားေပးပါတယ္။ ေလ့လာၾကည့္ပါဦး
Image SRC
Src သည္ သြားခ်င္တဲ့ Image ၏ ေနရာကို ရည္ညြန္းေပးတာပါ။ Src သည္ သတ္မွတ္ခ်က္ တစ္ခုျဖစ္ပါတယ္။
Src url types
Local Src Location Description src="sunset.gif" picture file resides in same directory as .html file src="../sunset.gif" picture file resides in previous directory as .html file src="../pics/sunset.gif" picture file resides in the pic directory in a previous directory as .html file |
Alt
Image သည္ ၎နွင့္ ပါတ္သက္ေသာ အခ်က္လက္ေတြကို မေဖၚျပနိုင္ဘူးဆုိလ်ွင္ alt tag ကိုသံုးပါသည္။ image အတြက္ ကိုယ္စာလွယ္ လုပ္ေဆာင္တာေပါ့ဗ်ာ။ ၎ tag ကိုေတာ့ ဘယ္လို
အေျခေနမ်ိဳးမွာ သံုးတယ္ဆိုတာ ေအာက္တြင္ ေဖၚျပထားပါတယ္။
1. image ထဲမွာ အခ်က္လက္ေတြပါဝင္ေနလွ်င္ ၎ကို သရုပ္ေဖၚျပရန္ သံုးသည္။(ပံုကိုေတာ့ ေျပာင္းလဲသြားေစခ်င္း မဟုတ္ပါ) |
2. image သည္ element တစ္ခုအတြင္းမွာေရာက္ေနလ်ွင္ ၎သည္ link သြားရမည့္ေနရာကို ရွင္းျပရန္ သံုးပါသည္။ |
3. image ကို decotation (တန္ဆာဆင္) တစ္ခုတည္း အတြက္သာ သံုးမယ္ဆိုရင္လဲ ၎ကို သံုးပါတယ္။ |
Image အတြက္လိုအပ္ေသာ သတ္မွတ္ခ်က္မ်ား
Attribute | Value | Description |
align | top bottom middle left right | Image ရွိခ်င္တဲ့ေနရာ <img src=" " align="middle"> |
border | pixels | Image ပံု၏ အနားသတ္ အထူ၊အပါး <img src=" " border="5" /> border အေရာင္ထည့္ခ်င္လ်ွင္ bordercolor ေပါ့ဗ်ာ။ |
height | pixels % | အျမင့္ ( height=" ") |
hspace | pixels | Body ၏ မ်ဥ္းနွင့္ ဘယ္ေလာက္ (အလ်ား)လိုက္အကြာမွာ (whitespace) ထားခ်င္တယ္ဆိုတာကိုေျပာတာပါ။ left နွင့္ right ထားသာထက္ပိုျပီးတိက်စြာ ထားနိုင္ပါတယ္။ (hspace=" ") |
vspace | pixels | Body ၏ မ်ဥ္းနွင့္ ဘယ္ေလာက္ (ေဒါင္)လိုက္အကြာမွာ (whitespace) ထားခ်င္တယ္ဆိုတာကိုေျပာတာပါ။ top နွင့္ bottom ထားသာထက္ပိုျပီးတိက်စြာ ထားနိုင္ပါတယ္။ (vspace=" ") |
width | pixels % | အက်ယ္ |
Image anign ထည့္ပံု
<html> <body> <p> An image <img src=" " alt="heart" align="bottom" width="32" height="32" /> မ်ဥ္းေၾကာင္းအေပၚမွ An image <img src=" " alt="heart" align="middle" width="32" height="32" /> မ်ဥ္းေၾကာင္းေအာက္မွ An image <img src=" " alt="heart" align="top" width="32" height="32" /> စာပိုဒ္ထဲမွ </p> <p> <b>Note:</b> align="bottom" is the default alignment! </p> <p> <img src=" " alt="heart" width="32" height="32" /> စာပိုဒ္ မတိုင္ခင္ </p> <p> စာပိုဒ္ျပီးတဲ့ေနာက္ <img src="" alt="heart" width="32" height="32" /> </p> <p> align သတ္မွတ္ျခင္းသည္ HTML 4 ထဲမွာ ကန္သတ္ခ်က္ေတြရိွပါတယ္၊ ျပီးေတာ့ ၎ tag သည္ HTML 4.01 Strict DTD နွင့္ XHTML 1.0 Strict DTD မွာေတာ့ support မျဖစ္ပါဘူး၊ CSS ထဲမွာလဲ အသံုးျပန္နိုင္ပါတယ္။</p> </body> </html> |
က်န္ေသာ tag မ်ားကိုေတာ့ အစားထိုးျပီးေလ့လာၾကည့္ပါ၊ေအာက္ကပံုေပၚလာပါလိမ္မယ္။
An image  မ်ဥ္းေၾကာင္းအေပၚမွ An image မ်ဥ္းေၾကာင္းအလယ္ An image စာပိုဒ္ထဲမွ Note: align="bottom" is the default alignment! စာပိုဒ္မတိုင္ခင္စာပိုဒ္ျပီးတဲ့ေနာက္ align သတ္မွတ္ျခင္းသည္ HTML 4 ထဲမွာ ကန္႕သတ္ခ်က္ေတြရိွပါတယ္၊ ျပီးေတာ့ ၎ tag သည္ HTML 4.01 Strict DTD နွင့္ XHTML 1.0 Strict DTD မွာေတာ့ support မျဖစ္ပါဘူး၊ CSS ထဲမွာလဲ အသံုးျပဳနိုင္ပါတယ္။ |
Thumbnails
ဆိုတာ images ၏ အရြယ္စားကိုအေသးငယ္ဆံုးျဖစ္ေအာင္ျပဳလုပ္ေပးတာပါ၊
သူ႕ရ႕ဲသေကၤသေလးက
<a href="sunset.gif"><img src="thmb_sunset.gif"></a> |
Thmb ဆိုတဲ့သေကၤတပါ။
ဒီဥပမာေလးကေတာ့ မိမိကြန္ပ်ဳတာထဲရိွ image ကို Img src နဲ႕ညြန္းျပီးသံုးထားတာပါ။
<html> <head><title> use the image</title></head> <body> <img src=" C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg "border=" 4"h space=" 5"vspace="10"alt="This is image "align="center"height="100"width="200"> </body> </html> |
ဒီေလာက္ဆိုရင္ေတာ့ image အပိုင္းကို နားလည္မယ္လိုထင္ပါတယ္။ မွားတဲ့ေနရာေလးေတြကိုျပင္ေပးသြားခဲ့ပါ။
အားလံုးကိုေလးစားလ်က္ပါ၊
No comments:
Post a Comment