Tan-awa ang bisan unsang web page online karon ug imong mahibal-an nga ipaambit nila ang mga butang nga komon. Usa sa mga nakigbahin nga kinaiya mao ang mga hulagway. Ang husto nga mga hulagway nagdugang kaayo sa presentasyon sa usa ka website. Ang uban nga mga imahe, sama sa logo sa usa ka kompanya, makatabang sa pag-brand sa site ug pagkonektar sa maong digital nga kompyuter ngadto sa imong pisikal nga kompaniya.
Aron makadugang sa usa ka imahen, icon, o mga graphic sa imong web page, kinahanglan nimo gamiton ang tag sa HTML code nga pahina. Gibutang nimo ang tag sa IMG sa imong HTML kung asa nimo gusto ang graphic nga ipakita. Ang web browser nga nagahatag sa code sa panid mopuli niining tag sa tukmang graphic sa higayon nga makita ang pahina. Pagbalik sa panig-ingnan sa logo sa among kompaniya, ania kung unsaon nimo madugang ang maong larawan sa imong site:
Mga Kinaiya sa Imahe
Sa pagtan-aw sa HTML code sa ibabaw, inyong makita nga ang elemento adunay duha ka mga kinaiya. Ang matag usa kanila gikinahanglan alang sa larawan.
Ang unang hiyas mao ang "src". Kini mao ang tinuod nga ang file sa larawan nga gusto nimo nga ipakita sa panid. Sa among panig-ingnan kami naggamit sa file nga gitawag og "logo.png". Kini ang graphic nga ipakita sa web browser sa paghatag niini sa site.
Mamatikdan usab nimo nga sa wala pa kini nga ngalan sa file, nagdugang kami og dugang nga impormasyon, "/ images /". Kini ang path file. Ang inisyal nga forward slash nagsulti sa server sa pagsusi sa gamut sa direktoryo. Dayon kini mangita alang sa usa ka folder nga gitawag og "mga larawan" ug sa katapusan ang file nga gitawag og "logo.png". Ang paggamit sa usa ka folder nga gitawag og "mga larawan" sa pag-store sa tanan nga mga litrato sa usa ka site usa ka komon nga praktis, apan ang imong file path mausab ngadto sa bisan unsa nga may kalabutan sa imong site.
Ang ikaduhang gikinahanglan nga hiyas mao ang "alt" nga teksto. Kini ang "alternate text" nga gipakita kung ang imahe dili mabug-at tungod sa usa ka rason. Kini nga teksto, nga sa atong panig-ingnan mabasa nga "Logo sa Kompanya" ipasundayag kon ang imahen dili mapuno. Ngano nga mahitabo kana? Lainlaing rason:
- Sayop nga agianan sa file
- Sayop nga ngalan sa file o sayop nga pagpadagan
- Pag-transmit sa sayup
- Gikuha ang file gikan sa server
Pipila lamang kini sa mga posibilidad kung nganong kulang ang among espesipikong imahe. Niini nga mga kahimtang, ang atong teksto sa alt mahimong ipasundayag.
Ang teksto sa alt gigamit usab sa software sa screen reader sa "pagbasa" sa imahe ngadto sa usa ka bisita kinsa nawad-an og panglantaw. Tungod kay dili nila makita ang hulagway nga sama sa atong gibuhat, kini nga teksto nagpahibalo kanila unsa ang larawan mismo. Mao kini ang hinungdan nga ang alt teksto gikinahanglan ug ngano kini kinahanglan nga tin-aw nga ipahayag kon unsa ang larawan!
Ang usa ka komon nga dili pagsinabtanay sa alt teksto mao nga kini alang sa mga katuyoan sa search engine. Dili kini tinuod. Samtang ang Google ug uban pang mga search engine nagbasa niini nga teksto aron mahibal-an kung unsa ang imahe (hinumdomi, dili nila "makita" ang imong imahe), dili ka kinahanglan nga isulat ang alt teksto aron moapelar lamang sa mga makina sa pagpangita. Ang tin-aw nga teksto nga gipunting alang sa mga tawo. Kung mahimo usab nga idugang ang pipila ka mga keyword ngadto sa tag nga nag-awhag sa mga search engine, maayo kana, apan siguroha kanunay ang alt text nga nag-alagad sa pangunang katuyoan niini pinaagi sa pagsulti kung unsa ang imahe alang sa bisan kinsa nga dili makakita sa graphic file.
Ubang mga Kinaiya
Ang tag sa IMG aduna usab duha ka laing mga kinaiya nga makita nimo nga gigamit sa dihang imong gibutang ang usa ka graphic sa imong web page - ang gilapdon ug ang gitas-on. Pananglitan, kon mogamit ka sa WYSIWYG editor sama sa Dreamweaver, kini awtomatik nga idugang kini nga impormasyon alang kanimo. Ania ang usa ka pananglitan:
Ang mga kinaiya sa WIDTH ug HEIGHT nagsulti sa browser nga ang gidak-on sa imahe. Ang browser dayon nahibal-an gayud kon unsa ka dako ang luna sa layout nga gigahin, ug kini makapadayon sa sunod nga elemento sa panid samtang ang mga pag-download sa imahe. Ang sulud sa paggamit niini nga kasayuran sa imong HTML mao nga dili nimo gusto nga ang imong imahe ipakita sa eksaktong gidak-on. Pananglitan, kon ikaw adunay usa ka website nga adunay responsibilidad nga ang mga pagbag-o nga gibase base sa screen sa mga bisita ug gidak-on sa device, gusto usab nimo nga ang imong mga imahen mahimong mapasibo. Kon imong isulti sa imong HTML kon unsa ang seryoso nga gidak-on, imong makita nga lisud kaayo ang pag-override sa mga responsive CSS media queries . Tungod niini nga hinungdan, ug sa pagpabilin sa usa ka panagbulag sa estilo (CSS) ug istruktura (HTML), girekomendar nga DILI nimo idugang ang mga hiyas sa lapad ug gitas-on sa imong HTML code.
Usa ka mubo nga sulat: Kung imong gibiyaan ang mga instruksiyon sa sizing ug wala magtino sa usa ka gidak-on sa CSS, ang browser mopakita sa larawan sa iyang default, lumad nga gidak-on gihapon.
Gipagamyan ni Jeremy Girard