A HTML Az IMG tag szabályozza a képek és más statikus grafikus objektumok weboldalon történő beillesztését. Ez a közös címke számos kötelező és opcionális attribútumot támogat, amelyek gazdagabbá teszik egy vonzó, képközpontú webhely tervezésének képességét.
A teljesen kialakított HTML IMG címke példája így néz ki:
Kötelező IMG címke attribútumok
src = "/ elérési út / ide / image.jpg"
Az egyetlen attribútum, amelyre szükséged van egy kép megjelenítéséhez egy weboldalon, az a src tulajdonság. Ez az attribútum azonosítja a megjelenítendő képfájl nevét és helyét.
alt = "A kép leírása"
Érvényes XHTML és HTML4 írásához a alt attribútum is szükséges. Ezt az attribútumot a nem vizuális böngészőknek a képet leíró szöveg biztosítására használják. A böngészők az alternatív szöveget különböző módon jelenítik meg. Vannak, akik előugró ablakként jelenítik meg, amikor az egeret a kép fölé helyezzük, mások tulajdonságokban jelenítik meg, amikor a jobb egérgombbal rákattintunk a képre, mások pedig egyáltalán nem jelenítik meg.
Használja a alt szöveg további részletek megadása a képről, amelyek nem relevánsak vagy fontosak a weboldal szövege szempontjából. Ne feledje azonban, hogy a képernyõolvasókban és más, csak szöveges böngészõkben a szöveget az oldal többi szövegével összhangban olvassuk. A félreértések elkerülése érdekében használjon olyan leíró alt szöveget, amely (például) „A webdesignról és a HTML-ről” mondja a „logó” helyett.
A alt a szöveg szintén elengedhetetlen a SEO (Search Engine Optimization) szempontjából. Azok a botok, amelyeket a keresőmotorok, például a Google, a webhelyek tartalmának feltárására használnak, nem képesek "látni" képeket. Bíznak a alt szöveget annak meghatározásához, hogy mi található az oldalon.
Ban ben HTML5, a alt attribútum nem mindig szükséges, mert használhatja a felirat hogy további leírást adjunk hozzá. Használhatja ezt az attribútumot a teljes leírást tartalmazó azonosító jelzésére is:
aria-descriptionby = "A kép leírása"
Az Alt szöveg akkor sem szükséges, ha a kép tisztán dekoratív, például egy weboldal tetején lévő grafika vagy ikonok. De ha nem biztos benne, minden esetre mellékelje az alt szöveget.
Attribútumok méretezése
szélesség = "500"és.
magasság = "500"Tervétől függően használja a. magasság és. szélesség
Általában azt akarja, hogy a képméretet a CSS-ben állítsa be. Gyakrabban ez lesz a kép szülőtárolójának méreteinek eredménye. Ez a megközelítés a legnagyobb rugalmasságot teszi lehetővé a különböző képernyőméretekhez való alkalmazkodás során. Mégis vannak olyan esetek, amikor érdemes a kép dimenzióit HTML attribútumként megadni.
Egyéb hasznos IMG attribútumok
title = "Leíró kép neve"Az attribútum globális attribútum, amely bármelyikre alkalmazható. HTML elem. Sőt, a. cím
A legtöbb böngésző támogatja a cím attribútumot, de különböző módon csinálják. Egyesek a szöveget előugró ablakként, míg mások az információs képernyőkön jelenítik meg, amikor a felhasználó jobb gombbal kattint a képre. Használhatja a cím attribútum további információk írására a képről, de ne számoljon azzal, hogy ezeket az információkat elrejtik vagy látható. Biztosan nem használja ezt a keresőmotorok kulcsszavainak elrejtésére. Ezt a gyakorlatot a legtöbb keresőmotor már bünteti.
usemap = ""és.
ismap = ""Ez a két attribútum ügyféloldali () és kiszolgálóoldali (ISMAP) képtérképek
longdesc = "A kép részletesebb leírása"A. longdesc
Elavult és elavult IMG-attribútumok
Számos attribútum már elavult a HTML5-ben vagy elavult a HTML4-ben. A legjobb HTML eléréséhez az attribútumok használata helyett más megoldásokat kell találnia.
határ = "3"
align = "left"Ez az attribútum lehetővé teszi, hogy képet helyezzen el a szövegben, és a szöveg körülötte folyjon. Igazíthatja a képet jobbra vagy balra. A. Javára elavult. float CSS tulajdonság
hspcace = "10"és.
vspace = "10"A. hspace és. vspace az attribútumok vízszintesen adnak fehér helyet ( hspace) és függőlegesen ( vspace
lowsrc = "/ path / to / lowres.jpg"A. lowsrc attribútum alternatív képet nyújt, ha a kép forrása akkora, hogy rendkívül lassan töltődik le. Például lehet, hogy van egy 500 KB méretű kép, amelyet meg szeretne jeleníteni a weboldalán, de az 500 KB-ot hosszú időbe telik letölteni. Tehát létrehoz egy sokkal kisebb példányt a képből, esetleg fekete-fehérben, vagy csak rendkívül optimalizáltan, és ezt a képbe helyezi. lowsrc
A lowsrc attribútumot hozzáadták a Netscape Navigator 2.0 címkéhez. A DOM 1. szint része volt, de azután eltávolították a 2. DOM-ból. A böngésző támogatása vázlatos volt ennek az attribútumnak, bár sok webhely azt állítja, hogy az összes modern böngésző támogatja. Nem elavult a HTML4-ben vagy elavult a HTML5-ben, mert soha nem volt egyik specifikáció sem hivatalos része.
Kerülje az attribútum használatát, ehelyett optimalizálja a képeket, hogy gyorsan betölthetők legyenek. Az oldalbetöltés sebessége a jó webtervezés kritikus része, a nagy képek pedig rendkívül lassítják az oldalakat - még akkor is, ha a lowsrc tulajdonság.