Brûk fan it HTML-IMG-tag foar foto's en objekten
It HTML-IMG-tag bestiet de ynset fan foto's en oare statyske grafyske objekten binnen in webside. Dizze mienskiplike tag befettet ferskate ferplichtings en opsjonele eigenskippen dy't jo rykheid tafoegje oan jo fermogen om in yngrepen, byldbehearske webstee te ûntwerpen.
In foarbyld fan in folslein formulearre HTML-IMG-tag like dit:
Required IMG tag attributes
SRC. It allinne attribút dat jo in ôfbylding krije moatte om te sjen op in webside is it SRC-attribuut. Dit attribút identifisearret de namme en lokaasje fan 'e ôfbyldingtriem dy't te sjen is.
ALT. Om jildige XHTML en HTML4 te skriuwen, is it ALT-attribút ek ferplicht. Dit attribus wurdt brûkt om nonvisual browsers te meitsjen mei tekst dy't it byld beskriuwt. Browsers lit de alternative tekst op ferskillende manieren sjen. Guon werjaan as in pop-up as jo jo mûs oer it byld bringe, oaren sjen it yn eigenskippen as jo rjochts klikke op it byld, en guon dogge it hielendal net.
Brûk de alt tekst om oanfoljende details oer it byld te jaan dy't net relevant of wichtich binne oan de tekst fan 'e webside. Mar tink derom dat yn skermlêzers en oare tekstblêders, de tekst wurdt ynlêzen mei de rest fan 'e tekst op' e side. Om betize tefoaren te brûken, brûke beskriuwende al tekst dy't seit (bygelyks), "Oer Web Design en HTML" ynstee fan just "logo".
Yn HTML5 is it ALT-attribjen net altyd ferplicht, om't jo in caption brûke kinne om mear beskriuwing oan te meitsjen. Jo kinne ek de attribute ARIA-DESCRIBEDBY brûke om in ID te jaan dy't in folsleine beskriuwing befettet.
Alt tekst is ek net ferplichte as it ôfbyldyn is pur dekoratyf, lykas in grafyk op 'e boppe fan in webside of byldkaikes. Mar as jo net wis binne, befetsje alt tekst just yn gefal.
Oanwêzige IMG-attributen
WIDTH en HEIGHT . Jo moatte yn 'e gewoante krije fan altyd de WIDTH- en HEIGHT-attributen brûke. En jo moatte de echte grutte altyd brûke en jo ôfbyldings net mei de browser feroarje.
Dizze attributen fergrutsje it rendering fan 'e side omdat de blêder romte jaan kin yn' e ûntwerp foar it byld, en dan fierder downloade de rest fan de ynhâld, dan wachtsje op it folsleine ôfbylding om te laden.
Oare brûkte IMG-attributen
TITLE . It attribút is in globale attribúsje dy't tapast wurdt op elk HTML-elemint . Boppedat kin it TITLE-attribje ekstra ynformaasje oer it byld taheakje.
De measte browsers stipe it TITLE-attribút, mar se dogge it op ferskate wizen. Guon sjogge de tekst as pop-up, wylst oaren it yn ynformaasje-skermen werjaan as de brûker rjochts klikke op it byld. Jo kinne it TITLE-attribje brûke om ekstra ynformaasje oer it ôfbyld te skriuwen, mar jild net op dizze ynformaasje dy't ferstoppe of sichtber is. Jo moatte it meastentiids net brûke om keywords foar sykmasines te ferbergje. Dizze praktyk wurdt no straffe troch de measte sykmasines.
USEMAP en ISMAP . Dizze twa eigenskippen set client-side () en server-side (ISMAP) ôfbyldings kaartsjes nei jo ôfbyldings.
LONGDESC . It attribute stipet URLs om in langere beskriuwing fan it byld. Dizze funksje makket jo ôfbyldings tagonkliker.
Ferwurden en ferâldere IMG-attributen
Ferskate eigenskippen binne no yn HTML5 ferâldere of feroare yn HTML4. Foar bêste HTML moatte jo oare oplossingen fine ynstee fan dizze attributen.
BORDER . It attribus befettet de breedte yn piksels fan elke grins om it byld. It is ynsteld foar CSS yn HTML4 en is yn HTML5 ferâldere.
ALIGN . Dit attribus makket it mooglik om in plaatsje yn 'e tekst te pleatsen en de tekst flak om it hinne. Jo kinne in ôfbylding rjochtsje nei rjochts of links. It is ynsteld foar it float CSS eigendom yn HTML4 en is ynhierd yn HTML5.
HSPACE en VSPACE . De HSPACE en attributen fan VSPACE add white space horizontal (HSPACE) en vertically (VSPACE). Wite romte wurdt tafoege oan beide kanten fan de grafyk (boppe- en ûnderkant of links en rjochts), dus as jo allinich romte nedich hawwe foar ien side, moatte jo CSS brûke. Dizze attributen binne yn HTML4 fertsjinnend foardere foar de marzje CSS-eigenskip, en se binne yn HTML5 ferâldere.
LOWSRC . It attribút fan LOWSRC jout in alternatyf byld as jo ôfbyldingsquelle sa grut is dat it tige leech wurdt. Jo kinne bygelyks in ôfbylding hawwe dat 500 KB is dat jo wolle op jo webside sjen, mar 500 KB sil in lange tiid nedich wêze om te laden. Sa meitsje jo in folle lytsere kopie fan 'e ôfbylding, miskien yn swart en wyt of krekt ekstra optimisearre, en set dat yn it attribute LOWSRC. It lytsere byld sil earst ynlade en werjaan, en dan as it gruttere byld ferskynt sil it leech-boarne ien ferfange.
It attribute LOWSRC is tafoege oan Netscape Navigator 2.0 oan it IMG-tag. It wie diel fan DOM-nivo 1, mar waard dan fanôf DOM-nivo 2 fuortsmiten. Blêderestraging is foar dit attribút sketst, hoewol in protte siden ferwachtsje dat it troch alle moderne browsers stipe wurdt. It is net feroare yn HTML4 of ferâldere yn HTML5, omdat it nea in offisjele ûnderdiel wie fan spesifikaasje.
Meitsje dizze eigenskip gebrûk te meitsjen en ynstee fan jo ôfbyldings optimaal te laden sadat se fluch lade. Blêdwizer fan side-laden is in kritysk ûnderdiel fan goed web-ûntwerp, en grutte ôfbyldings sjogge siden slúte enerzjy - ek as jo it attribute LOWSRC brûke.