Paggamit ng HTML IMG Tag para sa Mga Larawan at Mga Bagay
Ang HTML IMG tag ay namamahala sa pagpasok ng mga larawan at iba pang mga static na graphical na bagay sa loob ng isang web page. Sinusuportahan ng karaniwang tag na ito ang ilang mga sapilitan at opsyonal na mga katangian na nagdaragdag ng kayamanan sa iyong kakayahang mag-disenyo ng isang makatawag pansin, imahen na nakatuon sa imahe.
Ang isang halimbawa ng isang ganap na nabuo HTML IMG tag ay ganito ang hitsura:
Kinakailangang IMG Tag Mga Katangian
SRC. Ang tanging attribute na kailangan mo upang makakuha ng isang imahe upang maipakita sa isang web page ay ang katangian ng SRC. Kinikilala ng katangiang ito ang pangalan at lokasyon ng file ng imahe upang maipakita.
ALT. Upang isulat ang wastong XHTML at HTML4, kinakailangan din ang katangian ng ALT. Ginagamit ang attribute na ito upang magbigay ng mga nonvisual browser na may teksto na naglalarawan ng imahe. Ipinapakita ng mga browser ang alternatibong teksto sa iba't ibang paraan. Ang ilan ay nagpapakita ito bilang isang pop-up kapag inilagay mo ang iyong mouse sa ibabaw ng imahe, ipinapakita ito ng iba sa mga pag-aari kapag nag-right-click ka sa larawan, at ang ilan ay hindi nagpapakita nito.
Gamitin ang tekstong alt upang magbigay ng mga karagdagang detalye tungkol sa imaheng hindi nauugnay o mahalaga sa teksto ng pahina ng Web. Ngunit tandaan na sa mga mambabasa sa screen at iba pang mga browser na lamang-text, ang teksto ay mababasa nang buo sa natitirang bahagi ng teksto sa pahina. Upang maiwasan ang pagkalito, gumamit ng mapaglarawan na tekstong alt na nagsasabing (halimbawa), "Tungkol sa Web Design at HTML" sa halip na "logo" lamang.
Sa HTML5, ang ALT na katangian ay hindi laging kinakailangan, dahil maaari mong gamitin ang isang caption upang magdagdag ng higit pang paglalarawan dito. Maaari mo ring gamitin ang katangian ARIA-DESCRIBEDBY upang ipahiwatig ang isang ID na naglalaman ng isang buong paglalarawan.
Ang teksto ng Alt ay hindi rin kinakailangan kung ang imahe ay pulos pandekorasyon, tulad ng isang graphic sa tuktok ng isang web page o mga icon. Ngunit kung hindi ka sigurado, isama ang alt text kung sakali.
Mga Inirerekomendang IMG Mga Katangian
WIDTH and HEIGHT . Dapat kang makakuha ng sa ugali ng palaging paggamit ng mga katangian WIDTH at HEIGHT. At dapat mong palaging gamitin ang tunay na laki at hindi palitan ang iyong mga larawan gamit ang browser.
Pinapabilis ng mga katangiang ito ang pag-render ng pahina dahil maaaring maglaan ang browser ng espasyo sa disenyo para sa imahe, at pagkatapos ay patuloy na i-download ang natitirang bahagi ng nilalaman, sa halip na maghintay para i-download ang buong imahe.
Iba pang Kapaki-pakinabang na IMG Katangian
TITLE . Ang katangian ay pandaigdigang katangian na maaaring ilapat sa anumang elemento ng HTML . Bukod dito, ang attribute ng TITLE ay nagpapahintulot sa iyo na magdagdag ng karagdagang impormasyon tungkol sa larawan.
Sinusuportahan ng karamihan ng mga browser ang katangiang TITLE, ngunit ginagawa nila ito sa iba't ibang paraan. Ang ilan ay nagpapakita ng teksto bilang isang pop-up habang ang iba ay nagpapakita ito sa mga screen ng impormasyon kapag ang mga pag-click ng user sa larawan. Maaari mong gamitin ang katangian ng TITLE upang magsulat ng karagdagang impormasyon tungkol sa larawan, ngunit hindi umaasa sa impormasyong ito na nakatago o nakikita. Dapat mong hindi tiyak na gamitin ito upang itago ang mga keyword para sa mga search engine. Ang praktis na ito ngayon ay mapaparusahan ng karamihan sa mga search engine.
USEMAP at ISMAP . Ang dalawang katangian ay magtakda ng mga mapa ng client-side () at server-side (ISMAP) na imahe sa iyong mga imahe.
LONGDESC . Ang katangian ay sumusuporta sa mga URL sa mas mahabang paglalarawan ng larawan. Ang tampok na ito ay ginagawang mas naa-access ang iyong mga larawan.
Deprecated and Obsolete IMG Attributes
Ang ilang mga katangian ay hindi na ginagamit sa HTML5 o hindi na ginagamit sa HTML4. Para sa pinakamahusay na HTML, dapat kang makahanap ng iba pang mga solusyon sa halip na gamitin ang mga katangiang ito.
Border . Ang katangian ay tumutukoy sa lapad sa mga pixel ng anumang hangganan sa paligid ng imahe. Ito ay hindi na ginagamit para sa CSS sa HTML4 at hindi na ginagamit sa HTML5.
ALIGN . Ang attribute na ito ay nagpapahintulot sa iyo na maglagay ng isang imahe sa loob ng teksto at ang daloy ng teksto sa paligid nito. Maaari mong ihanay ang isang imahe sa kanan o sa kaliwa. Ito ay hindi na ginagamit sa pabor ng float property ng CSS sa HTML4 at hindi na ginagamit sa HTML5.
HSPACE at VSPACE . Ang HSPACE at mga katangian ng VSPACE idagdag ang white space nang pahalang (HSPACE) at patayo (VSPACE). Ang puwang ng White ay idaragdag sa magkabilang panig ng graphic (itaas at ibaba o kaliwa at kanan), kaya kung kailangan mo lamang ng espasyo sa isang panig, dapat mong gamitin ang CSS. Ang mga katangiang ito ay hindi na ginagamit sa HTML4 na pabor sa margin ng property ng CSS, at hindi na ito ginagamit sa HTML5.
LOWSRC . Ang katangian ng LOWSRC ay nagbibigay ng isang alternatibong imahe kapag ang iyong pinagmulan ng imahe ay napakalaki na ina-download ito nang napakabagal. Halimbawa, maaari kang magkaroon ng isang imahe na 500KB na nais mong ipakita sa iyong web page, ngunit 500KB ay aabutin ng mahabang panahon upang i-download. Kaya gumawa ka ng mas maliit na kopya ng larawan, marahil sa itim at puti o sobrang na-optimize, at ilagay iyon sa katangian ng LOWSRC. Ang mas maliliit na imahe ay magda-download at magpapakita muna, at pagkatapos ay kapag lumilitaw ang mas malaking imahen ay papalitan nito ang mababang-pinagmulan.
Ang attribute ng LOWSRC ay idinagdag sa Netscape Navigator 2.0 sa tag ng IMG. Ito ay bahagi ng DOM na antas ng 1 ngunit pagkatapos ay inalis mula sa antas ng DOM 2. Ang suporta ng browser ay masama para sa katangiang ito, bagaman maraming mga site ang nagsasabi na ito ay suportado ng lahat ng mga modernong browser. Hindi ito ginagamit sa HTML4 o hindi na ginagamit sa HTML5 dahil hindi ito opisyal na bahagi ng alinman sa detalye.
Iwasan ang paggamit ng katangiang ito at sa halip ay i-optimize ang iyong mga imahe upang mabilis silang mag-load. Ang bilis ng paglo-load ng pahina ay isang kritikal na bahagi ng magandang disenyo ng Web, at ang mga malalaking larawan ay mabagal na pababa ng mga pahina-kahit na ginagamit mo ang katangian ng LOWSRC.