A HTML IMG címke szabályozza a képek és egyéb statikus grafikus objektumok weboldalon belüli beillesztését. Ez a közös címke számos kötelező és opcionális attribútumot támogat, amelyek gazdagságot kölcsönöznek egy vonzó, képközpontú weboldal megtervezéséhez.
Egy példa a teljesen kialakított HTML IMG-tagra, így néz ki:
Szükséges IMG-cím attribútumok
SRC.Az egyetlen attribútum, amellyel egy weboldalon megjeleníteni kell egy képet, az SRC attribútum. Ez az attribútum azonosítja a megjelenítendő képfájl nevét és helyét.
ALT.Az érvényes XHTML és HTML4 megírása érdekében a ALT attribútum is szükséges. Ez az attribútum arra szolgál, hogy a nem látható böngészők szöveges leírást adjanak a képnek. A böngészők különböző módon mutatják be az alternatív szöveget. Néhány megjelenítésként jelenik meg, amikor felhelyezi az egeret a kép fölé, mások a tulajdonságokban megjelenítik a tulajdonságokat, ha jobb egérgombbal kattint a képre, és egyesek egyáltalán nem jelennek meg.
Az alt szöveg használatával további részleteket adhat meg a képről, amelyek nem relevánsak vagy fontosak a weboldal szövegéhez. De ne felejtsük el, hogy a képernyőolvasók és más csak szöveges böngészők esetén a szöveg az oldal többi részével összhangban lesz olvasható. Az összetévesztés elkerülése érdekében használja a leíró leíró szöveget (például), "A webes tervezésről és a HTML-ről", ne csak a "logó" helyett.
A HTML5-ben a ALT attribútum nem mindig szükséges, mert a leírás több leírást adhat hozzá. Az attribútumot is használhatja ARIA-DESCRIBEDBY egy teljes megnevezést tartalmazó azonosító jelzésére.
Más szöveg nem szükséges, ha a kép tisztán dekoratív, például egy weboldal vagy ikonok tetején lévő grafika. De ha nem vagy benne biztos benne, írj bele az alt szövegbe is.
Ajánlott IMG-attribútumok
SZÉLESSÉG és MAGASSÁG. Meg kell szokni a mindig használni a SZÉLESSÉG és MAGASSÁG attribútumok. És mindig használnia kell az igazi méretet, és nem szabad átméretezni a képeket a böngészővel.
Ezek az attribútumok felgyorsítják az oldal megjelenítését, mert a böngésző kioszthat helyet a kép tervében, majd továbbra is letöltheti a tartalom többi részét, és nem várja meg a teljes kép letöltését.
Egyéb hasznos IMG-attribútumok
CÍM. Az attribútum olyan globális attribútum, amely bármely HTML elemre alkalmazható. Továbbá, a CÍM attribútum segítségével extra információt adhat a képről.
A legtöbb böngésző támogatja a CÍM attribútum, de különböző módon csinálják. Egyesek megjelenítik a szöveget egy előugró ablakban, míg mások információs képernyőkön jelennek meg, amikor a felhasználó jobbra kattint a képen. Használhatja a CÍM attribútum, hogy további információkat írjon a képről, de ne számítsa bele, hogy ez az információ rejtve van vagy látható. Bizonyára nem szabad ezt használni a kulcsszavak elrejtéséhez a keresőmotoroknál. Ezt a gyakorlatot most a legtöbb keresőmotor bünteti.
usemap és ISMAP. Ez a két attribútum az ügyfél-oldali () és a szerveroldali (ISMAP) képi térképeket állítja be a képekre.
longdesc. Az attribútum támogatja az URL-eket a kép hosszabb leírásához. Ez a funkció megkönnyíti a képeket.
Elavult és elavult IMG attribútumok
Több attribútum immár elavult a HTML5-ben, vagy elavult a HTML4-ben. A legjobb HTML-hez más megoldásokat kell találni az ilyen attribútumok használata helyett.
HATÁR. Az attribútum határozza meg a kép körüli szélességet pixelenként. A HTML4-ben a CSS javára elavult, és a HTML5-ben elavult.
IGAZÍTSA. Ez az attribútum lehetővé teszi, hogy képet helyezzen a szöveg belsejébe, és a szöveg körül forogjon. A képeket jobbra vagy balra igazíthatja. A HTML4-ben lebegő CSS tulajdonság javára elavult, és a HTML5-ben elavult.
hspace és vSpace. A hspace és vSpace attribútumok hozzáadják a fehér területet vízszintesen (hspace) és függőlegesen (vSpace). Fehér teret ad a grafika mindkét oldalához (felül és alul, balra vagy jobbra), így ha csak egy oldalra van szükséged, használd a CSS-t. Ezeket az attribútumokat a HTML4-ben elavulták a margin CSS tulajdonság javára, és elavultak a HTML5-ben.
LOWSRC. A LOWSRC attribútum alternatív képet ad, ha a képforrás olyan nagy, hogy nagyon lassan letölt. Például egy olyan 500 KB méretű kép jelenhet meg, amelyet a weboldalán meg szeretne jeleníteni, de a letöltés hosszú időt vesz igénybe 500 kilobájt. Így létrehozhatsz egy sokkal kisebb példányt a képből, talán fekete-fehérben vagy csak rendkívül optimalizált módon, és tedd azt a LOWSRC tulajdonság. A kisebb kép elsőként letöltésre és megjelenítésre kerül, majd amikor a nagyobb kép megjelenik, az kicsiny forrású lesz.
A LOWSRC attribútum hozzá lett adva a Netscape Navigator 2.0 programhoz IMG címke. Ez része volt az 1. szintű DOM-nak, de eltávolították a DOM 2. szintről. A böngésző támogatása vázlatos volt ehhez az attribútumhoz, bár sok webhely azt állítja, hogy minden modern böngésző támogatja. Nem HTML4-ben elavult vagy elavult a HTML5-ben, mert soha nem volt sem hivatalos része sem a specifikációnak.
Ne használja ezt az attribútumot, hanem optimalizálja a képeket, így gyorsan betöltődnek. Az oldalak betöltésének sebessége a jó webes tervezés kritikus része, és a nagy képek lassan lefelé haladnak, még akkor is, ha a LOWSRC tulajdonság.
