ရုပ်ပုံများနှင့်္တုများအတွက် HTML ကို IMG Tag ကိုအသုံးပြုခြင်း
အဆိုပါ HTML ကို IMG tag ကိုပုံနဲ့ဝဘ်စာမျက်နှာအတွင်းရှိအခြားငြိမ်သော graphical အရာဝတ္ထုများ၏သွင်းအုပ်ချုပ်။ ဤသည်ဘုံ tag ကိုတစ်ဦးဆွဲဆောင်မှုရှိတဲ့, ပုံရိပ်-အာရုံစူးစိုက်က်ဘ်ဆိုက်ဒီဇိုင်းရန်သင့်စွမ်းရည်မှပေါများကြွယ်ဝ add အများအပြားမဖြစ်မနေနှင့် optional ကို attribute တွေထောက်ခံပါတယ်။
တစ်ဦးအပြည့်အဝကိုဖွဲ့စည်းခဲ့ HTML ကို IMG tag ကိုတခုရဲ့ဥပမာဒီတူ:
တောင်းဆိုနေတဲ့ IMG Tag ကို Attribute တွေက
src ။ သင်တစ်ဦးကို web စာမျက်နှာပေါ်တွင်ဖော်ပြရန်ပုံရိပ်တစ်ခုရရှိရန်လိုအပ်မှသာ attribute က src attribute ကိုဖြစ်ပါတယ်။ ဤသည် attribute ကိုပြသဖို့အတွက်ပုံရိပ်ဖိုင်၏အမည်နှင့်တည်နေရာသတ်မှတ်။
ALT ။ ခိုင်လုံသော XHTML ကနှင့် HTML4 ရေးလိုက်ဖို့, ALT attribute ကိုလည်းလိုအပ်ပါသည်။ ဤသည် attribute ကို image ကိုဖော်ပြသောစာသား nonvisual browser များပေးရာတွင်အသုံးပြုသည်။ browsers ကွဲပြားခြားနားတဲ့နည်းလမ်းတွေထဲမှာအခြားရွေးချယ်စရာစာသားကိုဖော်ပြရန်။ သင် image ကိုကျော်သင့်ရဲ့ mouse ကိုသွင်းထားသည့်အခါသင်ပုံရိပ်ပေါ်မှာ right-click တဲ့အခါမှာ pop-up အဖြစ်တချို့က display ကိုက, အခြားသူများဂုဏ်သတ္တိများ၌ပြသရန်နှင့်အချို့မှာအားလုံးကမပြကြဘူး။
အဆိုပါသုံးပါ alt + စာသားကို က်ဘ်စာမျက်နှာ၏စာသားမှသက်ဆိုင်ရာသို့မဟုတ်အရေးမပါသောပုံရိပ်နှင့် ပတ်သက်. နောက်ထပ်အသေးစိတ်အချက်အလက်များကိုပေးစေခြင်းငှါ။ ဒါပေမယ့် screen ကိုစာဖတ်သူများနှင့်အခြားစာသားသာ browser များအတွက်စာသားစာမျက်နှာပေါ်တွင်စာသား၏ကျန်နှင့်အတူအင်လိုင်းကိုဖတ်ပါလိမ့်မည်ဆိုတာသတိရပါ။ စိတ်ရှုပ်ထွေးမှုများကိုရှောင်ရှားရန်, အစားရုံ၏ "web ဒီဇိုင်းနဲ့ HTML အကြောင်း" (ဥပမာ) ကပြောပါတယ်ကြောင်းဖော်ပြရန် alt + စာသား, ကိုအသုံးပြုဖို့ "လိုဂို။ "
သင်ကပိုပြီးဖော်ပြချက် add ဖို့စာတန်းအသုံးပွုနိုငျသောကွောငျ့ HTML5 ကိုခုနှစ်, ALT attribute ကိုအမြဲမလိုအပ်ပါ။ သင်တို့သည်လည်းအပြည့်အဝဖော်ပြချက်များပါဝင်သည်တစ်ခု ID ကိုညွှန်ပြရန်အ attribute ကို ARIA-DESCRIBEDBY ကိုသုံးနိုင်သည်။
image ကိုသက်သက်သာအလှဆင်လျှင် alt စာသားကိုလည်းထိုကဲ့သို့သောဝဘ်စာမျက်နှာများသို့မဟုတ် icon များရဲ့ထိပ်မှာဂရပ်ဖစ်အဖြစ်မလိုအပ်ပါ။ သငျသညျသေချာမနေလျှင်မူကား, ကိုယ့်အမှု၌ alt + စာသားကိုပါဝင်သည်။
အကြံပြု IMG Attribute တွေက
width နဲ့ height ။ သင်အမြဲ width နဲ့ height attributes သုံးပြီးများ၏အလေ့အထသို့ရသင့်ပါတယ်။ ထိုအသင်အမြဲအစစ်အမှန်အရွယ်အစားကိုအသုံးပြုရန်နှင့်ဘရောက်ဇာနှင့်သင်၏ပုံရိပ်တွေဆိုဒ်ပြောင်းရန်သင့်ပါဘူး။
browser ကိုအစားကိုဒေါင်းလုဒ်လုပ်ရန်တစ်ခုလုံးကို image ကိုစောင့်ဆိုင်းနေသည်ထက်, ပုံရိပ်များအတွက်ဒီဇိုင်းအတွက်အာကာသခွဲဝေချထားပေးရန်, အဲဒီနောက်အကြောင်းအရာ၏ကျန်ဒေါင်းလုပ်ဆက်လက်နိုငျသောကွောငျ့ဤအ attribute တွေစာမျက်နှာ၏တင်ဆက်မှုအရှိန်မြှင့်။
သည်အခြားအသုံးဝင်သော IMG Attribute တွေက
TITLE ။ attribute မှာမဆိုအသုံးချနိုင်မယ့်ကမ္ဘာလုံးဆိုင်ရာ attribute ကဖြစ်ပါတယ် HTML ကိုဒြပ်စင် ။ ထို့အပြင် TITLE attribute ကိုသင်ပုံရိပ်နှင့် ပတ်သက်. အပိုသတင်းအချက်အလက်များထည့်သွင်းပေးနိုင်ပါတယ်။
အများစုမှာ browser များအတွက် TITLE attribute ကိုထောကျပံ့ပေး, ဒါပေမဲ့သူတို့ကွဲပြားခြားနားတဲ့နည်းလမ်းတွေထဲမှာလုပ်ပါ။ တချို့က display ကိုတဲ့ pop-up အဖြစ်စာသားအခါပုံရိပ်ပေါ်အသုံးပြုသူကို right-ကလစ်အခြားသူတွေသတင်းအချက်အလက်ဖန်သားပြင်၌ပြသနေစဉ်။ သင်ကပုံရိပ်နှင့် ပတ်သက်. နောက်ထပ်သတင်းအချက်အလက်များရေးသားဖို့အတွက်ကို TITLE attribute ကိုသုံးနိုငျ, ဒါပေမယ့်ဒီအချက်အလက်တွေကိုဝှက်ထားသောသို့မဟုတ်မြင်နိုင်ဖြစ်စေဖြစ်ခြင်းအပေါ်မတွက်ပါ။ သငျသညျအမြားဆုံးကျိန်းသေရှာဖွေရေးအင်ဂျင်များအတွက်သော့ချက်စာလုံးများဖုံးကွယ်ဖို့ဒီကိုမသုံးသင့်ပါတယ်။ ဒီအလေ့အကျင့်ယခုအများဆုံးရှာဖွေရေးအင်ဂျင်အားဖြင့်အပြစ်ပေးသည်။
USEMAP နှင့် ISMAP ။ အဲဒီနှစျခု attribute တွေ (client-side set) နှင့် Server-side (ISMAP) image ကိုမြေပုံ သင့်ရဲ့ပုံရိပ်တွေရန်။
LONGDESC ။ attribute မှာ image ကိုတစ်ဦးပိုရှည်ဖော်ပြချက်မှ URL များကိုထောက်ပံ့ပေးထားပါတယ်။ ဒီ feature ကသင်၏ပုံရိပ်တွေကိုပိုမိုသုံးစွဲနိုင်စေသည်။
ကန့်ကွက်နှင့်ပေါရာဏ IMG Attribute တွေက
အများအပြားက attribute တွေယခု HTML5 ကိုအတွက်အသုံးမပြုတော့သို့မဟုတ် HTML4 အတွက်ကန့်ကွက်ခံထားဖြစ်ကြသည်။ အကောင်းဆုံးက HTML, သင်မယ့်အစား, ဤ attribute တွေသုံးပြီးတခြားဖြေရှင်းချက်ကိုရှာဖွေသင့်ပါတယ်။
နယ်စပ်။ attribute မှာ image ကိုလှည့်ပတ်မဆိုနယ်စပ် pixels ကိုအတွက် width ကိုသတ်မှတ်ပါတယ်။ ဒါဟာ HTML4 အတွက် CSS ကို၏မျက်နှာသာအတွက်ကန့်ကွက်ခံထားနဲ့ HTML5 အတွက်အသုံးမပြုတော့ဖြစ်ပါတယ်ခဲ့တာဖြစ်ပါတယ်။
align ။ ဤသည် attribute ကိုသင်ကစာသားအတွင်းပိုင်းပုံရိပ်တစ်ခုနေရာကလှည့်ပတ်စာသားစီးဆင်းမှုရှိသည်ဖို့ခွင့်ပြုပါတယ်။ သင်သည်လက်ျာသို့မဟုတ်လက်ဝဲမှပုံရိပ်တစ်ခု align နိုင်ပါတယ်။ ဒါဟာ HTML4 အတွက် float CSS ကိုပိုင်ဆိုင်မှု၏မျက်နှာသာအတွက်ကန့်ကွက်ခံထားနဲ့ HTML5 အတွက်အသုံးမပြုတော့ဖြစ်ပါတယ်ခဲ့တာဖြစ်ပါတယ်။
HSPACE နှင့် VSPACE ။ အဆိုပါ HSPACE နှင့် VSPACE attribute တွေအလျားလိုက် (HSPACE) အဖြူအာကာသ add နှင့်ဒေါင်လိုက် (VSPACE) ။ white space (ထိပ်နဲ့အောက်ဆုံးသို့မဟုတ် left နှင့်ညာဘက်) ကိုဂရပ်ဖစ်နှစ်ဖက်စလုံးမှဆက်ပြောသည်ပါလိမ့်မည်, ဒါကြောင့်သင်တစ်ဦးတည်းသာဘက်မှာအာကာသလိုအပ်တယ်ဆိုရင်, သင် CSS ကိုအသုံးပြုသင့်ပါတယ်။ ဤရွေ့ကား attribute တွေအတွက်အနားသတ် CSS ကိုပိုင်ဆိုင်မှု၏မျက်နှာသာအတွက် HTML4 အတွက်ကန့်ကွက်ခံထားပြီ, သူတို့က HTML5 ကိုအတွက်အသုံးမပြုတော့တဲ့ဖြစ်ကြသည်။
LOWSRC ။ သင့်ရဲ့ image ကိုအရင်းအမြစ်ကအလွန်နှေးကွေးစွာဖြင့် download နိုင်အောင်ကြီးမားသည်အခါ LOWSRC attribute ကိုအစားထိုးပုံရိပ်ကိုပေးပါသည်။ ဥပမာအားဖြင့်, သင်သင်၏ဝဘ်စာမျက်နှာပေါ်တွင်ဖော်ပြရန်ချင်သော 500KB ကြောင်းပုံရိပ်တစ်ခုရှိစေခြင်းငှါ, ဒါပေမယ့် 500KB ကိုဒေါင်းလုဒ်လုပ်ရန်အချိန်အနည်းငယ်ကြာလိမ့်မယ်။ ဒါကြောင့်သင်ဖြစ်ကောင်းအနက်ရောင်နှင့်အဖြူရောင်သို့မဟုတ်ပဲအလွန်အမင်း optimized အတွက် image ကိုတစ်ဦးသိပ်သေးငယ်မိတ္တူဖန်တီးလျက်, LOWSRC attribute ကိုအတွက်ကိုတင်ထားရမည်။ အဆိုပါသေးငယ်ပုံရိပ်ဒေါင်းလုဒ်လုပ်ပြီးပထမဦးဆုံးပြသလျက်, ပိုကြီးတဲ့ပုံရိပ်ကိုပုံပေါ်သည့်အခါထို့နောက်ကအနိမ့်-source ကိုတဦးတည်းကိုအစားထိုးမည်။
အဆိုပါ LOWSRC attribute က IMG tag ကိုမှကို Netscape Navigator 2.0 မှထည့်သွင်းခဲ့သည်။ ဒါဟာ DOM အဆင့် 1 ၏အစိတ်အပိုင်းတစ်ခုဖြစ်ခဲ့သည်ထိုအခါမူကားများစွာသောက်ဘ်ဆိုက်များအားလုံးကိုခေတ်မီ browser များကထောက်ပံ့ရဲ့တောင်းဆိုပေမယ့် 2. Browser ကိုထောက်ခံကြောင်း, ဒီ attribute ကိုများအတွက်အသေအချာမသိခဲ့ DOM အဆင့်ကနေဖယ်ရှားခဲ့ပါတယ်။ ဒါကြောင့်ဖြစ်စေသတ်မှတ်ချက်၏တာဝန်ရှိသူတစ်ဦးကတစ်စိတ်တစ်ဒေသဘယ်တော့မှကြောင့်ဒါဟာ HTML5 ကိုအတွက် HTML4 သို့မဟုတ်အသုံးမပြုတော့တဲ့အတွက်ကန့်ကွက်ခံထားသည်မဟုတ်။
ဒီ attribute ကိုသုံးပြီးရှောင်ကြဉ်ပါနဲ့အစားသူတို့လျင်မြန်စွာ load ဒါကြောင့်သင့်ရဲ့ပုံရိပ်တွေကိုပိုကောင်းအောင်။ အလွန်တရာပင်စာမျက်နှာတင်ပေး၏မြန်နှုန်းကောင်းတစ်က်ဘ်ဒီဇိုင်းကိုဝေဖန်အစိတ်အပိုင်းတစ်ခုနှင့်ကြီးမားသောပုံရိပ်တွေဖြစ်ပါတယ်နှေးကွေးစာမကျြနှာကိုဆင်းသင် LOWSRC attribute ကိုသုံးနေလျှင်။