HTML IMG címke használata képekhez és objektumokhoz
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ásához az 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 az ALT-attribútum nem mindig szükséges, mert a leírás további leírást adhat hozzá. Használhatja az ARIA-DESCRIBEDBY attribútumot egy teljes leírással rendelkező 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
WIDTH és HEIGHT . A WIDTH és a HEIGHT attribútumokat mindig be kell szokni. É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ó . Ezenkívül a TITLE attribútum segítségével további információkat adhat meg a képen.
A legtöbb böngésző támogatja a TITLE attribútumot, 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 TITLE attribútumot a képre vonatkozó további információk megadásához, de ne számítsa ki, hogy ez az információ rejtve 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.
BORDER . 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.
ALIGN . 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 a VSPACE attribútumok vízszintes (HSPACE) és függőleges (VSPACE) értéket adnak. 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 tölt le. 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 ezt a LOWSRC attribútumba helyezheted. 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-nak az IMG-címkéhez. 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 attribútumot használja.