Gebruik van die HTML IMG-tag vir prente en voorwerpe
Die HTML IMG-tag beheer die invoeging van prente en ander statiese grafiese voorwerpe binne 'n webblad. Hierdie gemeenskaplike tag ondersteun verskeie verpligte en opsionele eienskappe wat rykdom aan jou vermoë bied om 'n innemende, beeldgerigte webwerf te ontwerp.
'N Voorbeeld van 'n volledig gevormde HTML-IMG-tag lyk soos volg:
Vereiste IMG-tag eienskappe
SRC. Die enigste eienskap wat jy nodig het om 'n beeld te kry om op 'n webblad te vertoon, is die SR-kenmerk. Hierdie kenmerk identifiseer die naam en ligging van die beeldlêer wat vertoon moet word.
ALT. Om geldige XHTML en HTML4 te skryf, word die ALT-kenmerk ook benodig. Hierdie kenmerk word gebruik om nie-visuele blaaiers te verskaf met teks wat die prent beskryf. Browsers vertoon die alternatiewe teks op verskillende maniere. Sommige vertoon dit as 'n opspring wanneer jy jou muis oor die prentjie plaas, ander vertoon dit in eienskappe wanneer jy regskliek op die prentjie, en sommige vertoon dit glad nie.
Gebruik die alt-teks om addisionele besonderhede te gee oor die prent wat nie relevant of belangrik is vir die teks van die webblad nie. Maar onthou dat in skermlesers en ander blaaiers wat slegs vir teks beskikbaar is, die teks met die res van die teks op die bladsy ingelees sal word. Om verwarring te vermy, gebruik beskrywende alt-teks wat byvoorbeeld sê: "Oor Webontwerp en HTML" in plaas van net "logo."
In HTML5 is die kenmerk ALT nie altyd nodig nie, want jy kan 'n onderskrif gebruik om meer beskrywing daaraan toe te voeg. U kan ook die kenmerk ARIA-BESKRYWING gebruik om 'n ID wat 'n volledige beskrywing bevat, aan te dui.
Alt-teks word ook nie benodig as die beeld suiwer dekoratief is nie, soos 'n grafiese aan die bokant van 'n webblad of ikone. Maar as jy nie seker is nie, sluit alt-teks net in geval.
Aanbevole IMG-eienskappe
WIDTH en HEIGHT . Jy moet die gewoonte gebruik om altyd die WIDTH en HEIGHT eienskappe te gebruik. En jy moet altyd die regte grootte gebruik en nie jou beelde met die leser verander nie.
Hierdie eienskappe bespoedig die lewering van die bladsy omdat die leser ruimte in die ontwerp vir die prent kan toeken en dan voortgaan met die aflaai van die res van die inhoud, eerder as om te wag vir die hele prent wat afgelaai moet word.
Ander nuttige IMG-eienskappe
TITLE . Die kenmerk is 'n globale kenmerk wat op enige HTML-element toegepas kan word. Daarbenewens kan die TITLE-kenmerk u ekstra inligting oor die prent byvoeg.
Die meeste blaaiers ondersteun die kenmerk TITLE, maar hulle doen dit op verskillende maniere. Sommige vertoon die teks as 'n opspring terwyl ander dit in inligtingskerms vertoon wanneer die gebruiker regs op die prent kliek. U kan die kenmerk TITLE gebruik om addisionele inligting oor die prent te skryf, maar reken nie dat hierdie inligting verborge of sigbaar is nie. U moet dit beslis nie gebruik om sleutelwoorde vir soekenjins weg te steek nie. Hierdie praktyk word nou deur meeste soekenjins gepenaliseer.
USEMAP en ISMAP . Hierdie twee eienskappe stel die kaarte van die kliënt-kant () en die bediener-kant (ISMAP) op jou beelde.
LONGDESC . Die kenmerk ondersteun URL's tot 'n langer beskrywing van die prent. Hierdie funksie maak jou prente meer toeganklik.
Onverwagte en verouderde IMG-eienskappe
Verskeie eienskappe is nou verouderd in HTML5 of verval in HTML4. Vir die beste HTML, moet jy ander oplossings vind in plaas daarvan om hierdie eienskappe te gebruik.
BORDER . Die kenmerk definieer die breedte in pixels van enige grens om die beeld. Dit is afgekeur ten gunste van CSS in HTML4 en is verouderd in HTML5.
ALIGN . Met hierdie kenmerk kan u 'n prentjie in die teks plaas en die teks daarheen vloei. Jy kan 'n prentjie regs of links koppel. Dit is afgekeur ten gunste van die vlot CSS-eiendom in HTML4 en is verouderd in HTML5.
HSPACE en VSPACE . Die HSPACE en VSPACE-eienskappe voeg wit spasie horisontaal (HSPACE) en vertikaal (VSPACE) toe. Wit spasie sal aan albei kante van die grafika aangebring word (bo en onder, of links en regs), dus as u net eenkant benodig, moet u CSS gebruik. Hierdie eienskappe is in HTML4 afgekeur ten gunste van die CSS-eienskap, en hulle is verouderd in HTML5.
LOWSRC . Die LOWSRC-kenmerk bied 'n alternatiewe beeld wanneer u beeldbron so groot is dat dit baie stadig afgelaai word. Byvoorbeeld, jy het dalk 'n prentjie wat 500KB is wat jy op jou webblad wil wys, maar 500KB sal lank neem om af te laai. So skep jy 'n veel kleiner kopie van die prent, miskien in swart en wit of net uiters geoptimaliseer, en plaas dit in die LOWSRC-kenmerk. Die kleiner beeld sal eers afgelaai en vertoon word, en dan sal die laer bron vervang word as die groter prentjie verskyn.
Die LOWSRC-kenmerk is by Netscape Navigator 2.0 by die IMG-tag gevoeg. Dit was deel van DOM vlak 1, maar is dan verwyder uit DOM-vlak 2. Browserondersteuning is sketchy vir hierdie kenmerk, hoewel baie webwerwe beweer dat dit ondersteun word deur alle moderne blaaiers. Dit word nie in HTML4 verouder of verouderd in HTML5 nie, want dit was nooit 'n amptelike deel van enige spesifikasie nie.
Vermy die gebruik van hierdie kenmerk en plaas jou prente optimaal sodat hulle vinnig laai. Spoed van die laai van bladsye is 'n kritiese deel van goeie webontwerp, en groot beelde vertraag bladsye enorm - selfs as jy die LOWSRC-kenmerk gebruik.