Uzo de la HTML IMG Etikedo por Bildoj kaj Objektoj
La etikedo de IMG-HTML regas la enmetadon de bildoj kaj aliaj statikaj grafikaj celoj ene de retpaĝo. Ĉi tiu komuna etikedo subtenas plurajn devigajn kaj laŭvolajn atributojn, kiuj aldonas riĉecon al via kapableco por desegni atentan, enfokusigita retejo.
Ekzemplo de tute formita HTML IMG-etikedo aspektas kiel ĉi:
Postulata IMG-Tagaj Atributoj
SRC. La sola atributo, kiun vi bezonas por havi bildon por montri en retpaĝaro, estas la atributo de SRC. Ĉi tiu atributo identigas la nomon kaj lokon de la bildo-dosiero por esti montrata.
ALT. Por skribi valida XHTML kaj HTML4, la ALT-atributo ankaŭ bezonas. Ĉi tiu atributo estas uzata por provizi nevidajn retumilojn kun teksto, kiu priskribas la bildon. Foliumiloj montras la alternativan tekston laŭ malsamaj manieroj. Iuj montras ĝin kiel popo-supre kiam vi metas vian muson super la bildo, aliaj montras ĝin en posedaĵojn kiam vi rajtas klaki sur la bildo, kaj iuj ne montras ĝin tute.
Uzu la altan tekston por doni pliajn detalojn pri la bildo, kiu ne estas grava aŭ grava al la teksto de la Retpaĝo. Sed memoru, ke en la ekranaj legantoj kaj aliaj tekst-retumiloj, la teksto estos legata inline kun la resto de la teksto en la paĝo. Por eviti konfuzon, uzu priskriban altan tekston, kiu diras (ekzemple), "Pri TTT-dezajno kaj HTML" anstataŭ nur "logo".
En HTML5, la ALT-atributo ne ĉiam bezonas, ĉar vi povas uzi titolon por aldoni pli da priskriboj al ĝi. Vi ankaŭ povas uzi la atributon ARIA-DESCRIBEDBY por indiki ID kiu enhavas kompletan priskribon.
Alt-teksto ankaŭ ne estas necesa, se la bildo estas nur ornama, kiel grafikaĵo ĉe supro de retpaĝo aŭ ikonoj. Sed se vi ne certas, inkluzivas altan tekston kaze.
Rekomenditaj IMG-Atributoj
VIDA kaj HETO . Vi devas kutimi ĉiam uzi la atributojn de WIDTH kaj HEIGHT. Kaj vi ĉiam devas uzi la realan grandecon kaj ne regrandigi viajn bildojn per la retumilo.
Ĉi tiuj atributoj rapidigas la bildon de la paĝo ĉar la retumilo povas asigni spacon en la dezajno por la bildo, kaj poste malŝarĝi la reston de la enhavo, prefere ol atendante la tutan bildon por elŝuti.
Aliaj Utilaj IMG-Atributoj
TITULO La atributo estas tutmonda atributo, kiu povas esti aplikata al ajna HTML-elemento . Krome, la TITLE-atributo ebligas aldoni kromajn informojn pri la bildo.
Plej multaj retumiloj subtenas la TITLE-atributon, sed ili faras ĝin laŭ malsamaj manieroj. Iuj montras la tekston kiel pop-up dum aliaj montras ĝin en informaj ekranoj kiam la uzanto rajtas klaku sur la bildo. Vi povas uzi la TITLE-atributon por skribi pliajn informojn pri la bildo, sed ne havas ĉi tiun informon ĉu kaŝita aŭ videbla. Vi certe ne uzu ĉi tion por kaŝi ŝlosilvortojn por serĉiloj. Ĉi tiu praktiko nun estas punita de plej multaj serĉiloj.
USEMAP kaj ISMAP . Ĉi tiuj du atributoj agordas bildojn de kliento-flanko () kaj servilo-flanka (ISMAP) al viaj bildoj.
LONGDESC . La atributo subtenas URLojn al pli longa priskribo de la bildo. Ĉi tiu funkcio faras viajn bildojn pli alireblaj.
Atenditaj kaj Mallerta IMG-Atributoj
Pluraj atributoj nun estas malaktualaj en HTML5 aŭ malakceptitaj en HTML4. Por plej bona HTML, vi devus trovi aliajn solvojn anstataŭ uzi ĉi tiujn atributojn.
BORDERO La atributo difinas la larĝecon en pikseloj de ajna limo ĉirkaŭ la bildo. Ĝi estis senkulpigita en favoro de CSS en HTML4 kaj estas malaktuala en HTML5.
ALIGN Ĉi tiu atributo permesas al vi meti bildon en la tekston kaj la tekston fluas ĉirkaŭ ĝi. Vi povas aliĝi bildon dekstren aŭ maldekstren. Ĝi estis senkulpigita en favoro de la flosata CSS-posedaĵo en HTML4 kaj estas malaktuala en HTML5.
HSPACE kaj VSPACE . La HSPACE kaj VSPACE atribuas aldoni blankan spacon horizontale (HSPACE) kaj vertikale (VSPACE). Blanka spaco estos aldonita al ambaŭ flankoj de la grafikaĵo (supre kaj malsupre aŭ maldekstre kaj dekstre), do se vi nur bezonas spacon unuflanke, vi devus uzi CSS. Ĉi tiuj atributoj estis senkulpigitaj en HTML4 en favoro de la rando CSS-posedaĵo, kaj ili estas malaktualaj en HTML5.
LOWSRC . La atributo LOWSRC provizas alternativan bildon kiam via bildo fonto estas tre granda, ke ĝi malŝarĝas ekstreme malrapide. Ekzemple, vi eble havas bildon 500KB, kiun vi volas montri en via retpaĝaro, sed 500KB longe forprenos. Do vi kreas multe pli malgrandan kopion de la bildo, eble en nigra kaj blanka aŭ simple ege optimumigita, kaj metu tion en la atribuon LOWSRC. La pli malgranda bildo elŝutos kaj montriĝos unue, kaj tiam kiam la pli granda bildo aperas, ĝi anstataŭos la malaltan fonton.
La atributo LOWSRC estis aldonita al Netscape Navigator 2.0 al la IMG-etikedo. Ĝi estis parto de DOM-nivelo 1, sed tiam estis forigita de DOM-nivelo 2. La retumilo de la retumilo estis malabunda por ĉi tiu atributo, kvankam multaj retejoj asertas, ke ĝi estas subtenata de ĉiuj modernaj foliumiloj. Ĝi ne estas senkulpigita en HTML4 aŭ malaktuala en HTML5 ĉar ĝi neniam estis oficiala parto de ĉia specifaĵo.
Evitu uzi ĉi tiun atributon kaj anstataŭe optimizar viajn bildojn por ke ili ŝarĝu rapide. Rapido de paĝo ŝarĝado estas kritika parto de bona TTT-dezajno, kaj grandaj bildoj malrapidaj paĝoj malsupren ege - eĉ se vi uzas la atributon LOWSRC.