ပုံများသည်ဝဘ်စာမျက်နှာ၏ဒီဇိုင်းနှင့်အသွင်အပြင်ကိုတိုးတက်စေနိုင်သည်။
HTML Images Syntax
HTML <img> tag ကိုဝဘ်စာမျက်နှာတစ်ခုမှာပုံတစ်ပုံထည့်ရန်အသုံးပြုသည်။
ပုံများကိုနည်းပညာအားဝဘ်စာမျက်နှာတစ်ခုထဲသို့ထည့်သွင်းခြင်းမပြုပါ။ ပုံများကို web စာမျက်နှာများနှင့်ဆက်စပ်လျက်ရှိသည်။ <img> tag သည်ရည်ညွှန်းထားသောရုပ်ပုံအတွက်သိုလှောင်နေရာတစ်ခုဖန်တီးပေးသည်။
<img> tag သည်ဗလာဖြစ်ပြီး၎င်းတွင် attribute များသာပါဝင်ပြီး၊ ပိတ်ထားသော tag မရှိပါ။
<img> tag တွင်လိုအပ်သော attribute နှစ်ခုရှိသည်။
src - ပုံ၏လမ်းကြောင်းကိုသတ်မှတ်သည်။
alt - ပုံအတွက်အခြားစာသားတစ်ခုသတ်မှတ်သည်။
Syntax
<img src="url" rel="alternatetext">
The alt Attribute
လိုအပ်သော src attribute သည် အသုံးပြုသူသည်အကြောင်းပြချက်တချို့ကြောင့်ကြည့်ရှု့ မရနိုင်ပါကရုပ်ပုံအတွက်အခြားစာသားတစ်ခုပေးသည်။ (နှေးကွေးသောကြောင့်၊ src attribute တွင်အမှားတစ်ခုခုပါရှိပါက သိုမဟုတ် အကြောင်းတခုခုကြာင့်ပုံမပေါ်လျှင်) ။
alt attribute ၏တန်ဖိုကိုဖော်ပြပေသည်။
browser တစ်ခုမှပုံတစ်ပုံကိုရှာမတွေ့ပါက၎င်းသည် alt attribute ၏တန်ဖိုးကိုပြလိမ့်မည်။
Image Size - Width and Height
ပုံ၏အကျယ်နှင့်အမြင့်ကိုသတ်မှတ်ရန် style attribute ကိုသုံးနိုင်သည်။
Example
<img src="road_near_mountain.jpg" alt="road near mountain.jpg" style="width:500px ;height:600px ;">
နောက်တစ်နည်းအနေနဲ့width and heightတွေကိုသုံးနိုင်ပါတယ်။
Example
<img src="road_near_mountain.jpg" alt="road near mountain.jpg" width="500px" height="600px">
The width and height width နဲ့ height attribute တွေကပုံရဲ့ width နဲ့ height ကို pixel ထဲမှာအမြဲသတ်မှတ်ပါတယ်။
Width and Height,or Style?
width, height နဲ့ style attribute တွေအားလုံးက HTML မှာတရားဝင်ပါတယ်။ သို့သော် style attribute ကိုအသုံးပြုရန်ကျွန်ုပ်တို့အကြံပြုပါသည်။ ပုံ၏အရွယ်အစားကိုမပြောင်းလဲစေရန် style sheets များကကာကွယ်ပေးသည်။
Example
<!DOCETYPE html><html><head><style>img {width :100% ;}</style></head><body><img src="html5.gif" alt="HTML5 Icon width="128" height="128"><img src="html5.gif" alt="HTML5 Icon style ="width:128px;heigth:128px;"></body></html>
Images in Another Folder
သင့်တွင်ရုပ်ပုံများကိုဖိုင်တွဲငယ်တစ်ခုတွင်ထားရှိပါက src attribute တွင်ဖိုလ်ဒါအမည်ထည့်ရမည်။
Example
<img src="/images/heml5.gif" alt="HTML5 Icon"style ="width:128px;heigth:128px;">
Animated Images
HTML သည် animated GIF များကိုခွင့်ပြုသည်။
Example
<img src="programming.gif" alt="Computer Man"style ="width:40px;heigth:40px;">
Image as a Link
ပုံကိုလင့်ခ်တစ်ခုအနေဖြင့်အသုံးပြုလိုပါက <img> tag ကို <a> tag အတွင်း၌ထည့်ပါ။
Example
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>
Image Floating
စာသားရဲ့ညာဖက်ဒါမှမဟုတ်ဘယ်ဘက်အပေါ် float ခွင့်ပြုရန် CSS float property ကိုသုံးပါ။
Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">The image will float to the right of the text.<p><p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">The image will float to the right of the text.<p>
Common Image Formats
(Chrome, Edge, Firefox, Safari, Opera) မှာတွေ့ရတတ်တဲ့ image file အမျိုးအစားများဖြစ်သည်။
| Abbreviation | File Format | File Extension |
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Chapter Summary
- ပုံတစ်ပုံကိုသတ်မှတ်ရန် HTML <img> element ကိုသုံးပါ။
- ပုံ၏ URL ကိုသတ်မှတ်ရန် HTML src attribute ကိုသုံးပါ။
- ပုံတစ်ပုံအတွက်ပြသရန်မဖြစ်နိုင်ပါကအခြားစာသားကိုသတ်မှတ်ရန် HTML alt attribute ကိုအသုံးပြုပါ။
- ပုံ၏အရွယ်အစားကိုသတ်မှတ်ရန် HTML width နှင့် heigth attribute များသို့မဟုတ် CSS width နှင့် heigth property များကိုသုံးပါ။
- ဘယ်ဘက်သို့ညာဘက်သို့ float ခွင့်ပြုရန် CSS float property ကိုသုံးပါ။
No comments:
Post a Comment