Web ကိုစာမျက်နှာများမှပုံများထည့်သွင်းခြင်း

ယနေ့အွန်လိုင်းမဆိုဝဘ်စာမျက်နှာကိုကြည့်ပါနဲ့သင်သည်သူတို့ဘုံအတွက်အချို့သောအမှုအရာကိုမျှဝေကြောင်းသတိထားမိပါလိမ့်မယ်။ သူတို့အားမျှဝေစရိုက်များတစ်ခုမှာပုံရိပ်တွေဖြစ်ပါတယ်။ လက်ျာပုံရိပ်တွေ website တစ်ခုဖွင့်တင်ဆက်မှုမှဤမျှလောက်ထည့်ပါ။ ကုမ္ပဏီရဲ့လိုဂိုနဲ့တူသူတွေကိုပုံရိပ်တွေအချို့ကိုအကူအညီအမှတ်တံဆိပ်ဆိုက်နှင့်သင့်ရုပ်ပိုင်းဆိုင်ရာကုမ္ပဏီမှဒစ်ဂျစ်တယ် entity ချိတ်ဆက်ပါ။

သင်၏ဝဘ်စာမျက်နှာတစ်ခုပုံရိပ်, အိုင်ကွန်, ဒါမှမဟုတ်ဂရပ်ဖစ်ကိုထည့်သွင်းဖို့, သင်ကစာမျက်နှာရဲ့ HTML code တွေဟာအတွက် tag ကိုသုံးစွဲဖို့လိုအပ်ပါတယ်။ သင်သည်သင်၏အတွက် IMG tag ကိုနေရာ က HTML ကိုသင်ဂရပ်ဖစ်ဖော်ပြရန်ချင်အတိအကျရှိရာ။ စာမကျြနှာရှုမြင်တစ်ချိန်ကစာမျက်နှာ၏ကုဒ် rendering သော web browser ကိုသင့်လျော်သောဂရပ်ဖစ်နှင့်အတူဤ tag ကိုအစားထိုးဖို့ပါလိမ့်မယ်။ နောက်ကျောကျွန်တော်တို့ရဲ့ကုမ္ပဏီလိုဂိုဥပမာဖို့ Going, ဒီမှာသင်ကသင့်ရဲ့ site ကိုမှပုံရိပ်ပေါင်းထည့်ပေးနိုင်ဘယ်လိုဖြစ်ပါသည်:

image ကို Attribute တွေက

အပေါ်က HTML code တွေဟာကြည့်, သင်ဒြပ်စင်နှစ်ခု attribute တွေပါဝင်သောမြင်လိမ့်မည်။ သူတို့တစ်ဦးစီပုံရိပ်ကိုအဘို့လိုအပ်ပါသည်။

ပထမဦးဆုံးအ attribute ကိုကို "src" ဖြစ်ပါတယ်။ ဒါဟာအတော်လေးစာသားသင်စာမျက်နှာပေါ်တွင်ပြသချင်သောပုံရိပ်ဖိုင်ဖြစ်ပါသည်။ ကျွန်တော်တို့ရဲ့ဥပမာထဲမှာကြှနျုပျတို့သညျ "logo.png" ဟုခေါ်ဖိုင်တစ်ဖိုင်အသုံးပြုနေသည်။ ဤသည်က site ကိုပြန်ဆိုသည့်အခါ web browser ကိုဖော်ပြရန်မယ်လို့သောဂရပ်ဖစ်ဖြစ်ပါတယ်။

သင်တို့သည်လည်း "/ / ပုံရိပ်တွေ" ဒီဖိုင်နာမတော်ရှေ့၌, ငါတို့အချို့အပိုဆောင်းသတင်းအချက်အလက်ထည့်သွင်းကြောင်းသတိထားမိပါလိမ့်မယ်။ ဒါဟာဖိုင်လမ်းကြောင်းဖြစ်ပါတယ်။ ကနဦးရှေ့သို့မျဉ်းစောင်း directory ကိုအမြစ်သို့ကြည့်ဖို့ဆာဗာပြောပြသည်။ ထို့နောက် "ရုပ်ပုံများကို" ဟုခေါ်နေတဲ့ဖိုင်တွဲနှင့် "logo.png" ဟုခေါ်နောက်ဆုံးတော့ဖိုင်ကိုရှာပါလိမ့်မယ်။ အားလုံးတစ်ဦး site ရဲ့ဂရပ်ဖစ်တွေကိုသိမ်းဆည်းဖို့ "ရုပ်ပုံများကို" ဟုခေါ်နေတဲ့ folder ကိုအသုံးပြုခြင်းဟာတော်တော်လေးဘုံအလေ့အကျင့်ဖြစ်တယ်, ဒါပေမဲ့သင့်ရဲ့ဖိုင်လမ်းကြောင်းသင့် site များအတွက်သက်ဆိုင်ရာဖြစ်ပါတယ်ဘာပဲဖို့အတွက်ပြောင်းလဲရတော့မှာပါ။

ဒုတိယလိုအပ်သော attribute ကိုက "alt" စာသားကိုဖြစ်ပါတယ်။ ဒါကပုံရိပ်တချို့အကြောင်းပြချက် load လုပ်ဖို့ပျက်ကွက်လျှင်ပြသသော "အခြားစာသားကို" ဖြစ်ပါတယ်။ ကျွန်တော်တို့ရဲ့ဥပမာထဲမှာ image ကို load လုပ်ဖို့ပျက်ကွက်လျှင် "ကုမ္ပဏီအမှတ်တံဆိပ်" ပြသမည်ဖြစ်ကြောင်းဖတ်သောဤစာသား, ။ အဘယျကွောငျ့ဖြစ်ပျက်မလဲ အကြောင်းရင်းတစ်ခုအမျိုးမျိုး:

ဒါတွေကကျွန်တော်တို့ရဲ့သတ်မှတ်ထားသောပုံရိပ်ပျောက်ဆုံးစေခြင်းငှါအဘယ်ကြောင့်အနည်းငယ်ဖြစ်နိုင်ချေရှိပါတယ်။ ဤအမှုကိစ္စများတွင်ကျွန်ုပ်တို့၏ alt + စာသားမယ့်အစားဖော်ပြရန်လိမ့်မယ်။

alt စာသားကိုလည်းရူပါရုံကိုချို့ယွင်းသူဧည့်သည်မှ image ကို "ကိုဖတ်ပြီး" ကိုမျက်နှာပြင်စာဖတ်သူကိုဆော့ဖ်ဝဲကိုအသုံးပြုကြသည်။ ကြှနျုပျတို့ပွုတူသောသူတို့က image ကိုမမွငျနိုငျကတည်းက, ဒီစာသားကိုသူတို့ကို image ကိုကိုယ်နှိုက်ကဘာလဲဆိုတာသိကြပေးနိုင်ပါတယ်။ alt + စာသားကိုလိုအပ်ပါသည်အဘယ်ကြောင့်ဤသူကားအဘယျကွောငျ့ image ကိုကဘာလဲဆိုတာရှင်းရှင်းလင်းလင်းဖော်ပြသင့်ပါတယ်!

alt + စာသားတစ်ဘုံနားလည်မှုလွဲကြောင့် search engine ကိုရည်ရွယ်ချက်ဆိုလိုသောကွောငျ့ဖွစျသညျ။ ဒါမမှန်ဘူး။ Google ကနှင့်အခြားရှာဖွေရေးအင်ဂျင် (သူတို့ဖြစ်စေသင့်ရဲ့ image ကို "ကိုကြည့်ပါ" လို့မရပါဘူး, မှတ်မိ) ကိုပုံရိပ်သည်အဘယ်အရာကိုဆုံးဖြတ်ဤစာသားကိုဖတ်ပါလုပ်ပေးနေစဉ်, သငျသညျအင်ဂျင်ရှာဖွေတစ်ခုတည်းကိုသာအယူခံ alt + စာသားကိုရေးဖို့သင့်ပါဘူး။ လူသားတွေကိုဆိုလိုကြောင်းရှင်းရှင်းလင်းလင်း alt + စာသားကို Author ။ သင်သည်လည်းအင်ဂျင်ရှာဖွေအယူခံသော tag ကိုသို့အချို့သောသော့ချက်စာလုံးများကိုထည့်သွင်းနိုင်လျှင်, ထိုဒဏ်ငွေဖြစ်ပါသည်, ဒါပေမယ့်အမြဲတမ်းပုံဂရပ်ဖစ်ဖိုင်မမွငျနိုငျသူမည်သူမဆိုအဘို့ဖြစ်၏ဘယ်အရာကိုဖျောပွခွငျးဖွငျ့ alt + စာသားကို၎င်း၏အဓိကရည်ရွယ်ချက််ထမ်းဆောင်နေသည်သေချာပါစေ။

အခြားအ Attribute တွေက

width နဲ့အမြင့် - အ IMG tag ကိုသင်တို့ကိုလည်းသင်၏ဝဘ်စာမျက်နှာပေါ်တွင်ဂရပ်ဖစ်ထားတဲ့အခါသင်အသုံးပြုမြင်စေခြင်းငှါနှစ်ခုကတခြား attribute တွေရှိပါတယ်။ သငျသညျ Dreamweaver ကဲ့သို့သော WYSIWYG editor ကိုအသုံးပြုတယ်ဆိုရင်ဥပမာ, အလိုအလျောက်သငျသညျအဘို့ဤအချက်အလက်ကထပ်ပြောသည်။ ဒီနေရာတွင်ဥပမာတစ်ခုဖွင့်:

width နဲ့ height ကို browser ပုံရဲ့အရွယ်အစားကိုပြောပြ attributes ။ အဆိုပါ browser ကိုထို့နောက်အတိအကျဘယ်လောက်ခွဲဝေချထားပေးရန်ဖို့အဆင်အပြင်ထဲမှာအာကာသသိတယ်, ထိုသို့ image ကိုဒေါင်းလုဒ်နေစဉ်စာမျက်နှာပေါ်တွင်လာမည့်ဒြပ်စင်မှအပေါ်ကိုရွှေ့နိုင်ပါတယ်။ သင့်ရဲ့ HTML မှာဤအချက်အလက်သုံးပြီးနှင့်အတူပြဿနာကိုသင်အမြဲသင့်ရဲ့ image ကိုကြောင်းအတိအကျအရွယ်အစားမှာပြသချင်မပြုစေခြင်းငှါဖြစ်ပါသည်။ သင်တစ်ဦးရှိပါကဥပမာအားဖြင့်, တုံ့ပြန်မှုက်ဘ်ဆိုက် သည်အဘယ်သူ၏ sizing ပြောင်းလဲမှုများကိုတစ်ဦးဧည့်သည်များ screen နဲ့ device ကိုအရွယ်အစားပေါ်အခြေခံပြီး, သငျသညျလညျးသငျ့ရဲ့ပုံရိပ်တွေကိုပြောင်းလွယ်ပြင်လွယ်ဖြစ်ချင်ပါလိမ့်မယ်။ သင်က fixed size ကိုကဘာလဲဆိုတာသင့်ရဲ့ HTML မှာဖော်ပြလိုလျှင်, သင်ကအလွန်ခက်ခဲတုံ့ပြန်မှုနှင့်အတူပယ်ဖျက်ဖို့ကိုတွေ့လိမ့်မည် CSS ကိုမီဒီယာမေးမြန်းချက် ။ ဒီအကြောင်းပြချက်အဘို့နှင့်တစ်ဦးစတိုင်ခွဲခြာ (CSS ကို) နှင့်ဖွဲ့စည်းတည်ဆောက်ပုံ (HTML) ကိုဆက်လက်ထိန်းသိမ်းထားဖို့, ကသငျသညျ width ကို add မဟုတ်ပါဘူးများနှင့်အမြင့်သင့်ရဲ့ HTML code တွေဟာဖို့ attributes ကြောင်းအကြံပြုသည်။

တဦးတည်းမှတ်စု: အကယ်. သင်သည်ဤအ sizing ညွှန်ကြားချက်ကိုချွတ်ထားခဲ့ပါဘူးနှင့် browser ကိုဘာပဲဖြစ်ဖြစ်သူ့ရဲ့ default အနေနဲ့, ဇာတိအရွယ်အစားမှာ image ကိုပြသပါလိမ့်မယ်, CSS ကိုတစ်ဦးရဲ့အရွယ်အစားကိုသတ်မှတ်မထားဘူးဆိုရင်။

ဂျယ်ရမီ Girard တည်းဖြတ်