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 သည်
လိုအပ်သော src
attribute သည် ပုံသို့ လမ်းကြောင်း (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
တနည်းအားဖြင့် သင်သည် နှင့် height
attribute များကို အသုံးပြုနိုင်သည် ။
ဥပမာ
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
width
နှင့် attribute များသည် height
ပုံ၏ width နှင့် height ကို pixels ဖြင့် အမြဲသတ်မှတ်သည်။
မှတ်ချက်- ပုံတစ်ပုံ၏ အကျယ်နှင့် အမြင့်ကို အမြဲသတ်မှတ်ပါ။ အကျယ်နှင့် အမြင့်ကို မသတ်မှတ်ထားပါက၊ ပုံတင်နေစဉ် ဝဘ်စာမျက်နှာသည် တုန်ခါသွားနိုင်သည်။
အနံနှင့် အမြင့်၊ သို့မဟုတ် ပုံစံ။
, width
, height
နှင့် style
attribute များသည် 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
နှင့်height
attributes သို့မဟုတ် 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 အကိုးအကားကို ဝင်ရောက်ကြည့်ရှု ပါ။