Nézd meg bármelyiket honlap ma online, és észreveszi, hogy bizonyos dolgokban közösek. Az egyik ilyen közös tulajdonság a képek. A megfelelő képek annyira hozzáadják a weboldal bemutatóját. Néhány ilyen kép, például egy vállalat logója, segít a webhely márkajelzésében, és összeköti a digitális entitást a fizikai vállalattal.
Kép hozzáadása egy weboldalhoz HTML használatával
Kép, ikon vagy grafika hozzáadásához a weboldalához a címkét kell használnia az oldal HTML-kódjában. Helyezed a.
IMGcímke a. HTML pontosan hol szeretné megjeleníteni a grafikát. Az oldal kódját megjelenítő webböngésző az oldal megtekintését követően ezt a címkét helyettesíti a megfelelő grafikával. Visszatérve a céges logó példánkra, a következőképpen adhatja hozzá ezt a képet a webhelyéhez:
Az SRC attribútum
A fenti HTML kódot megnézve látni fogja, hogy az elem két attribútumot tartalmaz. Mindegyikre szükség van a képhez.
Az első attribútum az "src". Szó szerint ez a képfájl, amelyet meg akar jeleníteni az oldalon. Példánkban a "logo.png" nevű fájlt használjuk. Ezt a grafikát jeleníti meg a webböngésző, amikor a webhelyet megjeleníti.
Azt is észreveszi, hogy a fájlnév előtt néhány további információt, "/ images /" adtunk hozzá. Ez a fájl elérési útja. A kezdeti előrejelzés azt mondja a szervernek, hogy keresse meg a könyvtár gyökerét. Ezután megkeresi a "images" nevű mappát, végül pedig a "logo.png" nevű fájlt. A "képek" nevű mappa használata a webhely összes grafikájának tárolására meglehetősen gyakori gyakorlat, de a fájl elérési útját a webhelyére relevánsra változtatná.
Az Alt attribútum
A második kötelező attribútum az "alt" szöveg. Ez az "alternatív szöveg" jelenik meg, ha a képet valamilyen okból nem sikerül betölteni. Ez a szöveg, amely példánkban a "Vállalati embléma" feliratú, akkor jelenik meg, ha a kép betöltése nem sikerül. Miért történne ez? Különféle okok:
- Helytelen fájl elérési út
- Helytelen fájlnév vagy elírás
- Átviteli hiba
- A fájlt törölte a szerverről
Ez csak néhány lehetőség arra, hogy miért hiányozhat a megadott képünk. Ezekben az esetekben az alt szövegünk jelenik meg helyettük.
Mire használják az Alt szöveget?
Az Alt szöveget a képernyőolvasó szoftver is használja a kép "olvasására" egy látássérült látogató számára. Mivel nem láthatják a képet, mint mi, ez a szöveg tudatja velük, mi a kép maga. Ezért van szükség az alt szövegre, és miért kell egyértelműen megadni, hogy mi a kép!
Az alt szöveg általános félreértése, hogy keresőmotorok céljára szolgál. Ez nem igaz. Míg a Google és más keresőmotorok elolvassák ezt a szöveget, hogy megállapítsák, mi a kép (ne feledje, ők sem "láthatják" a képedet), ne írj alt szöveget, hogy kizárólag a keresésre vonzódj motorok. A szerző tiszta alt szöveget jelent, amely embereknek szól. Ha olyan kulcsszavakat is felvehet a címkébe, amelyek vonzóak a keresőmotorok számára, akkor rendben van, de mindig ügyeljen rá az alt szöveg az elsődleges célját szolgálja azzal, hogy megadja, mi a kép annak, aki nem látja a grafikát fájl.
Egyéb képattribútumok
A.
IMG.
a tag két további attribútummal is rendelkezik, amelyeket használat közben láthat, amikor grafikát helyez el a weboldalára - a szélességet és a magasságot. Például, ha olyan WYSIWYG szerkesztőt használ, mint a Dreamweaver, az automatikusan hozzáadja ezt az információt. Íme egy példa:
A.
SZÉLESSÉG.
és.
MAGASSÁG.
az attribútumok megadják a böngészőnek a kép méretét. A böngésző ekkor pontosan tudja, hogy mennyi helyet kell kiosztani az elrendezésben, és továbbléphet az oldal következő elemére, miközben a kép letöltődik. Ezen információk HTML-ben történő felhasználásával az a probléma, hogy nem mindig szeretné, ha a képe pontosan ebben a méretben jelenne meg. Például, ha van egy.
érzékeny weboldal
amelynek méretezése a látogatói képernyő és az eszköz mérete alapján változik, akkor azt is meg kell, hogy a képei rugalmasak legyenek. Ha a HTML-ben megadod, hogy mi a rögzített méret, akkor nagyon nehéz felülírnod az adaptívvel.
CSS média lekérdezések
. Emiatt, valamint a stílus (CSS) és a struktúra (HTML) elválasztásának fenntartása érdekében javasoljuk, hogy NE adjon szélességi és magassági attribútumokat a HTML-kódjához.
Egy megjegyzés: Ha kikapcsolja ezeket a méretezési utasításokat, és nem ad meg méretet a CSS-ben, a böngésző úgyis az alapértelmezett méretben jeleníti meg a képet.
Szerk.: Jeremy Girard