Nézd meg ma bármelyik weblapot, és észre fogod venni, hogy bizonyos dolgokat közösen megosztanak. Az egyik ilyen közös tulajdonság a képek. A helyes képek annyira hozzáteszik a weboldal bemutatásához. Néhány ilyen kép, mint például egy cég logója, segíti a márkanevet a webhelyen és összekapcsolja a digitális entitással a fizikai céggel.
Ha képet, ikont vagy grafikát szeretne hozzáadni a weboldalához, akkor használja a címkét az oldal HTML kódjában. Az IMG-címkét a HTML-ben pontosan ott helyezheti el, ahol a grafika megjelenik. Az oldal kódját megjelenítő webböngésző ezt a címkét helyettesíti a megfelelő grafikával az oldal megtekintését követően. Visszatérve a céges logó példájához, itt adhatja hozzá a képet a webhelyére:
Image Attributes
A fenti HTML kódot látva láthatod, hogy az elem két attribútumot tartalmaz. Mindegyikük szükséges a képhez.
Az első attribútum az "src". Ez szó szerint az a képfájl, amelyet meg szeretne jeleníteni az oldalon. Példánkban egy "logo.png" nevű fájlt használunk. Ez az a grafika, amelyet a webböngésző akkor jelenne meg, amikor megjelenítette a webhelyet.
Azt is észre fogod venni, hogy a fájl neve előtt hozzáadtunk néhány további információt, "/ images /". Ez a fájl elérési útja. Az első előremutató perjel azt jelzi, hogy a kiszolgáló megvizsgálja a könyvtár gyökerét. Ezután keresni fog egy "képek" nevű mappát, és végül a "logo.png" nevű fájlt. A "képek" nevű mappának használata a webhely grafikusainak tárolásához elég gyakori gyakorlat, de a fájl elérési útja megváltozott, ami releváns a webhelyén.
A második szükséges attribútum az "alt" szöveg. Ez az "alternatív szöveg", amely akkor jelenik meg, ha a kép valamilyen okból nem töltődik be. Ez a szöveg, amely a példánkban a "Céglogó" kifejezést jeleníti meg, megjelenik, ha a kép nem töltődik be. Miért történne ez? Különféle okok miatt:
- Helytelen fájl elérési út
- Helytelen fájlnév vagy helyesírási hiba
- Átviteli hiba
- A fájlt törölték a kiszolgálóról
Ez csak néhány lehetőség arra, hogy miért hiányzott a megadott képünk. Ezekben az esetekben az alt szövegünk megjelenik.
Alt szöveget használ a képernyőolvasó szoftver, hogy "olvassa el" a képet egy látogató, aki látássérült. Mivel nem látják a képet, mint mi, ez a szöveg lehetővé teszi számukra, hogy mi is a kép. Ezért van alt szöveg, és miért kell világosan megmondani, hogy mi a kép!
Az alt szöveg általános félreértése az, hogy a keresőmotorok céljaira szolgál. Ez nem igaz. Míg a Google és más keresőmotorok ezt a szöveget olvassák, hogy meghatározzák, mi a kép (emlékszel, nem tudják "látni" a képet), ne írjon alt szöveget kizárólag a keresőmotorokra. Írj egy világos, szöveges szöveget, amely emberre vonatkozik. Ha hozzáadhat néhány kulcsszót is a keresőmotorokhoz címkével ellátott címkéhez, akkor jó, de mindig győződjön meg róla, hogy az alt szöveg elsődleges célját szolgálja annak megállapításával, hogy mi a kép azoknak, akik nem láthatják a grafikus fájlt.
Egyéb jellemzők
Az IMG-címke két másik tulajdonsággal is rendelkezik, amelyeket akkor használhat, ha grafika a weboldalon - szélesség és magasság. Például ha olyan WYSIWYG szerkesztőt használ, mint a Dreamweaver, akkor automatikusan hozzáadja ezt az információt az Ön számára. Íme egy példa:
A WIDTH és HEIGHT attribútumok jelzik a böngészőnek a kép méretét. A böngésző pontosan tudja, hogy mennyi helyet foglal el az elrendezésben, és a kép letöltésekor továbbhaladhat az oldal következő elemére. Az ilyen információk HTML-ben történő használatával kapcsolatos probléma az, hogy nem feltétlenül kívánja megjeleníteni a képet a megadott méretben. Például ha van egy olyan érzékeny weboldala, amelynek méretezése a látogatók képernyőjén és eszközméretén alapul, akkor is szeretné, ha a képek rugalmasak lennének. Ha megadja a HTML-ben, hogy mi a rögzített méret, akkor nagyon nehéz lesz felülbírálni a reagáló CSS médiakérdel . Ezért a stílus (CSS) és a struktúra (HTML) szétválasztásának fenntartása érdekében javasoljuk, hogy NEM adjon hozzá szélességi és magassági attribútumokat a HTML kódjához.
Egy megjegyzés: Ha elhagyod ezeket a méretezési utasításokat, és nem adsz meg egy méretet a CSS-ben, akkor a böngésző az alapértelmezett, natív méretű képet fogja megjeleníteni.
Szerkesztette Jeremy Girard