HTML ပုံများ
ပုံများသည် ဒီဇိုင်းနှင့် ဝဘ်စာမျက်နှာ၏ အသွင်အပြင်ကို တိုးတက်စေနိုင်သည်။
ဥပမာ
<img src="pic_trulli.jpg"
alt="Italian Trulli">
ဥပမာ
<img src="img_girl.jpg"
alt="Girl in a jacket">
ဥပမာ
<img src="img_chania.jpg"
alt="Flowers in Chania">
HTML Images Syntax
HTML <img>tag ကို ဝဘ်စာမျက်နှာတစ်ခုတွင် ပုံတစ်ခုထည့်သွင်းရန် အသုံးပြုသည်။
ပုံများကို ဝဘ်စာမျက်နှာတစ်ခုတွင် နည်းပညာအရ ထည့်သွင်းမထားပါ။ ပုံများကို ဝဘ်စာမျက်နှာများနှင့် ချိတ်ဆက်ထားသည်။ တဂ် သည် <img>ကိုးကားထားသောပုံအတွက် ထိန်းထားနိုင်သည့်နေရာကို ဖန်တီးပေးသည်။
တဂ်သည် ဗလာဖြစ်ပြီး၊ ၎င်း <img>တွင် ရည်ညွှန်းချက်များသာ ပါဝင်ပြီး အပိတ်အမှတ်အသား မရှိပါ။
တဂ် တွင် <img>လိုအပ်သော အရည်အချင်းနှစ်ခု ရှိသည်-
- src - ပုံသို့ လမ်းကြောင်းကို သတ်မှတ်သည်။
- alt - ပုံအတွက် အလှည့်ကျ စာသားကို သတ်မှတ်သည်။
အထားအသို
<img src="url" alt="alternatetext">
src Attribute သည်
လိုအပ်သော srcattribute သည် ပုံသို့ လမ်းကြောင်း (URL) ကို သတ်မှတ်ပေးသည်။
မှတ်ချက်- ဝဘ်စာမျက်နှာတစ်ခု တက်လာသောအခါ၊ ၎င်းသည် ဝဘ်ဆာဗာတစ်ခုမှ ပုံကိုရယူပြီး စာမျက်နှာထဲသို့ ထည့်သွင်းပေးသည့် ထိုအချိန်တွင် ၎င်းသည် ဘရောက်ဆာဖြစ်သည်။ ထို့ကြောင့်၊ ပုံသည် ဝဘ်စာမျက်နှာနှင့် ဆက်စပ်နေသည့် တူညီသောနေရာတွင် ရှိနေကြောင်း သေချာစေပါ၊ သို့မဟုတ်ပါက သင့်ဧည့်သည်များသည် ကျိုးပဲ့နေသည့် လင့်ခ်အိုင်ကွန်ကို ရရှိမည်ဖြစ်သည်။ altဘရောက်ဆာသည် ရုပ်ပုံကို ရှာမတွေ့ပါက ကျိုးနေသော လင့်ခ်အိုင်ကွန်နှင့် စာသားကို ပြထားသည်။
ဥပမာ
<img src="img_chania.jpg" alt="Flowers
in Chania">
alt Attribute
altအကြောင်းတစ်ခုခုကြောင့် အသုံးပြုသူက မကြည့်နိုင်လျှင် (ချိတ်ဆက်မှုနှေးကွေးခြင်း၊ src ရည်ညွှန်းချက်တွင် အမှားအယွင်းတစ်ခုကြောင့် သို့မဟုတ် အသုံးပြုသူသည် ဖန်သားပြင်ဖတ်ကိရိယာကို အသုံးပြုပါက) လိုအပ်သော attribute သည် ပုံတစ်ပုံအတွက် အလှည့်ကျစာသားတစ်ခုကို ပေးဆောင်ပါသည်။
ရည်ညွှန်းချက် ၏တန်ဖိုးသည် altပုံအား ဖော်ပြသင့်သည်-
ဥပမာ
<img src="img_chania.jpg" alt="Flowers
in Chania">
ဘရောက်ဆာတစ်ခုသည် ပုံတစ်ပုံကို ရှာမတွေ့ပါက၊ ၎င်းသည် alt
attribute ၏တန်ဖိုးကို ပြသလိမ့်မည်-
ဥပမာ
<img src="wrongname.gif" alt="Flowers
in Chania">
အကြံပြုချက်- စခရင်ဖတ်စက်သည် HTML ကုဒ်ကိုဖတ်ပြသည့် ဆော့ဖ်ဝဲပရိုဂရမ်တစ်ခုဖြစ်ပြီး သုံးစွဲသူအား အကြောင်းအရာကို "နားဆင်ရန်" ခွင့်ပြုသည်။ မျက်နှာပြင်ဖတ်စက်များသည် အမြင်အာရုံချို့တဲ့သူများ သို့မဟုတ် သင်ယူမှုမသန်စွမ်းသူများအတွက် အသုံးဝင်ပါသည်။
ပုံအရွယ်အစား - အနံနှင့် အမြင့်
styleပုံတစ်ပုံ၏ အကျယ်နှင့် အမြင့်ကို သတ်မှတ်ရန် အရည်အချင်းကို သင်သုံးနိုင်သည် ။
ဥပမာ
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
widthတနည်းအားဖြင့် သင်သည် နှင့် heightattribute များကို အသုံးပြုနိုင်သည် ။
ဥပမာ
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
widthနှင့် attribute များသည် heightပုံ၏ width နှင့် height ကို pixels ဖြင့် အမြဲသတ်မှတ်သည်။
မှတ်ချက်- ပုံတစ်ပုံ၏ အကျယ်နှင့် အမြင့်ကို အမြဲသတ်မှတ်ပါ။ အကျယ်နှင့် အမြင့်ကို မသတ်မှတ်ထားပါက၊ ပုံတင်နေစဉ် ဝဘ်စာမျက်နှာသည် တုန်ခါသွားနိုင်သည်။
အနံနှင့် အမြင့်၊ သို့မဟုတ် ပုံစံ။
, width, heightနှင့် styleattribute များသည် HTML တွင် တရားဝင်သည်။
သို့သော်၊ styleကျွန်ုပ်တို့သည် attribute ကိုအသုံးပြုရန်အကြံပြုသည်။ ၎င်းသည် ပုံများ၏ အရွယ်အစားကို ပြောင်းလဲခြင်းမှ ပုံစံစာရွက်များကို တားဆီးသည်-
ဥပမာ
<!DOCTYPE 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;height:128px;">
</body>
</html>
အခြားဖိုင်တွဲရှိ ပုံများ
ဖိုင်တွဲခွဲတစ်ခုတွင် သင့်ပုံများရှိပါက၊ ရည်ညွှန်းချက်တွင် ဖိုင်တွဲအမည်ကို ထည့်သွင်းရပါမည် src-
ဥပမာ
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
အခြားဆာဗာ/ဝဘ်ဆိုက်ရှိ ပုံများ
အချို့ဝဘ်ဆိုက်များသည် အခြားဆာဗာရှိ ပုံတစ်ခုကို ညွှန်ပြသည်။
အခြားဆာဗာရှိ ပုံတစ်ပုံကို ညွှန်ပြရန်၊ ရည်ညွှန်းချက်တွင် အကြွင်းမဲ့ (အပြည့်အစုံ) URL ကို သတ်မှတ်ရပါမည် src။
ဥပမာ
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
ပြင်ပရုပ်ပုံများဆိုင်ရာ မှတ်စုများ- ပြင်ပပုံများသည် မူပိုင်ခွင့်အောက်တွင် ရှိနေနိုင်သည်။ ၎င်းကိုအသုံးပြုရန် သင်ခွင့်ပြုချက်မရပါက၊ သင်သည် မူပိုင်ခွင့်ဥပဒေများကို ချိုးဖောက်ခြင်းဖြစ်နိုင်သည်။ ထို့အပြင်၊ သင်သည် ပြင်ပပုံများကို ထိန်းချုပ်၍မရပါ။ ရုတ်တရက် ဖယ်ရှားခြင်း သို့မဟုတ် ပြောင်းလဲနိုင်သည်။
ကာတွန်းပုံများ
HTML သည် ကာတွန်း GIF များကို ခွင့်ပြုသည်-
ဥပမာ
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
လင့်ခ်အဖြစ် ပုံ
ပုံတစ်ပုံကို လင့်ခ်တစ်ခုအဖြစ် အသုံးပြုရန်၊ <img>tag ကို tag တွင် ထည့်ပါ <a>
-
ဥပမာ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
ရုပ်ပုံရေပေါ်
floatပုံအား ညာဘက် သို့မဟုတ် စာသားတစ်ခု၏ ဘယ်ဘက်တွင် လွင့်နေစေရန် CSS ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ-
ဥပမာ
<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:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
အကြံပြုချက်- CSS Float အကြောင်း ပိုမိုလေ့လာရန်၊ ကျွန်ုပ်တို့၏ CSS Float Tutorial ကို ဖတ်ရှုပါ ။
အသုံးများသော ပုံဖော်မတ်များ
ဤသည်မှာ ဘရောက်ဆာအားလုံးတွင် ပံ့ပိုးနိုင်သည့် အသုံးအများဆုံး ရုပ်ပုံဖိုင်အမျိုးအစားများဖြစ်သည် (Chrome၊ Edge၊ Firefox၊ Safari၊ Opera)။
| 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 |
အခန်းအကျဉ်းချုပ်
<img>ပုံတစ်ပုံကို သတ်မှတ်ရန် HTML အစိတ်အပိုင်းကို အသုံးပြု ပါ။srcပုံ၏ URL ကို သတ်မှတ်ရန် HTML အရည်အချင်းကို အသုံးပြု ပါ။altမပြသနိုင်ပါက ပုံတစ်ခုအတွက် အစားထိုးစာသားတစ်ခုကို သတ်မှတ်ရန် HTML အရည်အချင်းကို အသုံးပြု ပါ။-
ပုံ၏အရွယ်အစားကိုသတ်မှတ်ရန် HTML
widthနှင့်heightattributes သို့မဟုတ် CSSwidthနှင့် ဂုဏ်သတ္တိများကို အသုံးပြုပါ။height floatပုံအား ဘယ်ဘက် သို့မဟုတ် ညာဘက်သို့ လွင့်သွားစေရန်အတွက် CSS ပိုင်ဆိုင်မှုကို အသုံးပြု ပါ။
မှတ်ချက်- ပုံကြီးများကို တင်ခြင်းသည် အချိန်ကြာမြင့်ပြီး သင့်ဝဘ်စာမျက်နှာကို နှေးကွေးစေနိုင်သည်။ ပုံများကို ဂရုတစိုက်သုံးပါ။
HTML လေ့ကျင့်ခန်းများ
HTML ပုံတဂ်များ
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
ရနိုင်သော HTML တဂ်များ အားလုံး၏ စာရင်းအပြည့်အစုံအတွက်၊ ကျွန်ုပ်တို့၏ HTML Tag အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။