Paggamit sa HTML IMG Tag alang sa mga litrato ug mga butang
Ang HTML IMG tag nagdumala sa pagpasulod sa mga hulagway ug uban pang static nga mga butang sa sulod sa usa ka web page. Kining komon nga tag nagsuportar sa pipila ka mga mandatory ug opsyonal nga mga kinaiya nga makadugang sa pagkadato sa imong abilidad sa pagdisenyo sa usa ka makalingaw, hulagway nga nakapunting nga website.
Usa ka pananglitan sa usa ka bug-os nga nahimo HTML nga tag sa IMG susama niini:
Gikinahanglan ang Mga Katangian sa IMG Tag
SRC. Ang usa lamang nga kinaiya nga kinahanglan nimo nga makuha ang usa ka imahe nga ipakita sa usa ka web page mao ang SRC attribute. Kini nga hiyas nagpaila sa ngalan ug lokasyon sa file sa imahe aron ipakita.
ALT. Sa pagsulat sa balido nga XHTML ug HTML4, gikinahanglan usab ang ALT nga kinaiya. Kini nga hiyas gigamit aron sa paghatag sa dili makita nga mga browser sa teksto nga naghulagway sa larawan. Gipakita sa mga browser ang alternatibong teksto sa lainlaing mga paagi. Ang uban nga nagpakita niini ingon nga usa ka pop-up sa diha nga imong ibutang ang imong mouse sa ibabaw sa imahe, ang uban nagpakita niini sa mga kabtangan sa diha nga imong i-right-click ang imahe, ug ang uban wala magpakita niini.
Gamita ang alt text aron paghatag dugang nga mga detalye mahitungod sa hulagway nga dili hinungdanon o importante sa teksto sa Web page. Apan hinumdomi nga sa screen readers ug uban pang mga text-only browsers, ang teksto mabasa nga inline sa ubang teksto sa panid. Aron malikayan ang pagkalibog, gamita ang gihulagway nga alt nga teksto nga nag-ingon (pananglitan), "mahitungod sa Web Design ug HTML" imbis nga "logo" lamang.
Sa HTML5, ang ALT nga kinaiya dili kanunay gikinahanglan, tungod kay makagamit ka og kapsyon aron makadugang sa paghulagway niini. Mahimo usab nimo gamiton ang hiyas nga ARIA-DESCRIBEDBY aron ipaila ang usa ka ID nga adunay bug-os nga paghulagway.
Ang teksto sa Alt wala usab gikinahanglan kon ang hulagway limpyo nga pangdekorasyon, sama sa graphic sa ibabaw sa usa ka web page o mga icon. Apan kung dili ka sigurado, i-apil ang alt text sa kaso.
Gisugyot nga IMG Mga Kinaiya
WIDTH ug HEIGHT . Kinahanglan nimong batasanon kanunay ang paggamit sa mga hiyas sa WIDTH ug HEIGHT. Ug kinahanglang gamiton nimo kanunay ang tinuod nga gidak-on ug dili usbon ang imong mga hulagway sa browser.
Kini nga mga kinaiya nagpadali sa paghubad sa panid tungod kay ang browser makagahin sa luna sa disenyo alang sa hulagway, ug unya ipadayon ang pag-download sa uban nga mga sulod, imbis maghulat sa tibuok nga imahen nga i-download.
Ubang Us aka IMG Mga Kinaiya
TITLE . Ang kinaiya usa ka global nga kinaiya nga mahimong magamit sa bisan unsang elemento sa HTML . Dugang pa, ang attribute sa TITLE makahatag kanimo og dugang nga kasayuran mahitungod sa hulagway.
Kadaghanan sa mga browser nagsuporta sa hiyas sa TITLE, apan gibuhat nila kini sa lainlaing mga paagi. Ang uban nagpakita sa teksto ingon nga usa ka pop-up samtang ang uban nagpakita niini diha sa mga screen sa impormasyon sa diha nga ang mga user right-clicks sa imahe. Mahimo nimo nga gamiton ang TITLE attribute sa pagsulat og dugang nga kasayuran mahitungod sa hulagway, apan ayaw pagsalig sa niini nga kasayuran nga natago o makita. Kinahanglan gayud nga dili gayud gamiton kini aron itago ang mga keyword alang sa mga search engine. Kini nga praktis karon gipahamtangan sa kadaghanan sa mga makina sa pagpangita.
USEMAP ug ISMAP . Kining duha ka mga kinaiya nagbutang sa mga mapa sa client-side () ug server-side (ISMAP) sa imong mga larawan.
LONGDESC . Ang hiyas nagsuporta sa mga URL ngadto sa mas taas nga paghulagway sa larawan. Kini nga bahin naghimo sa imong mga imahe nga mas dali nga makuha.
Gikuha ug Wala'y Kinaiya nga mga Kinaiya sa IMG
Daghang mga hiyas karon wala na usba sa HTML5 o wala usba sa HTML4. Alang sa labing maayo nga HTML, kinahanglan nga imong makit-an ang ubang mga solusyon kay sa paggamit niini nga mga hiyas.
BORDER . Ang hiyas naghubit sa gilapdon sa mga pixel sa bisan unsang utlanan sa palibot sa larawan. Kini wala usba pabor sa CSS sa HTML4 ug wala na usba sa HTML5.
ALIGN . Kini nga hiyas nagtugot kanimo sa pagbutang og usa ka imahen sa sulod sa teksto ug ipagawas ang teksto sa palibot niini. Mahimo nimo maila ang usa ka larawan sa tuo o sa wala. Wala kini usba pabor sa float CSS property sa HTML4 ug wala na usba sa HTML5.
HSPACE ug VSPACE . Ang HSPACE ug mga VSPACE nga mga hiyas nagdugang sa puti nga luna nga pinahigda (HSPACE) ug vertically (VSPACE). Ang puting luna idugang sa duha ka kilid sa graphic (ibabaw ug sa ubos o sa wala ug tuo), busa kung gikinahanglan lamang ang luna sa usa ka bahin, kinahanglang gamiton ang CSS. Kini nga mga hiyas wala na usba sa HTML4 pabor sa margin CSS nga propyedad, ug kini wala na usba sa HTML5.
LOWSRC . Ang tagna sa LOWSRC naghatag og usa ka alternatibo nga larawan sa diha nga ang imong gigikanan nga larawan dako kaayo nga kini nag-usab nga hinay kaayo. Pananglitan, mahimo nga adunay usa ka imahen nga 500KB nga gusto nimo ipakita sa imong web page, apan ang 500KB dugay nga mag-download. Busa naghimo ka og mas gamay nga kopya sa hulagway, tingali sa itom ug puti o na-optimize kaayo, ug gibutang kana sa attribute sa LOWSRC. Ang mas gamay nga larawan mag-download ug magpakita una, ug unya sa diha nga ang mas dako nga hulagway makita kini mopuli sa ubos nga tinubdan.
Ang kinaiya sa LOWSRC gidugang ngadto sa Netscape Navigator 2.0 sa tag sa IMG. Kini kabahin sa DOM level 1 apan dayon gikuha gikan sa DOM level 2. Ang suporta sa browser dili kaayo alang niini nga hiyas, bisan daghan nga mga site ang nag-ingon nga kini gisuportahan sa tanan nga mga modernong mga browser. Wala kini usba sa HTML4 o karaan na sa HTML5 tungod kay kini dili usa ka opisyal nga bahin sa bisan unsang paghingalan.
Likayi nga gamiton kini nga hiyas ug hinoon palamboa ang imong mga imahe aron kini dali nga magamit. Ang pagpadali sa pag-load sa pahina usa ka mahinungdanong bahin sa maayo nga pagdisenyo sa Web, ug ang dagko nga mga larawan hinay nga mga pahina nga hilabihan ka daghan-bisan kon gamiton nimo ang kinaiya sa LOWSRC.