Nyissa meg annak a weboldalnak a HTML-fájlját, amelyhez képet szeretne hozzáadni egy szövegszerkesztőben, például a Jegyzettömbben vagy a webfejlesztő szoftverben.
Adjon hozzá egy címkét a fájlhoz. Helyezze el a címkét azon elem mögé, amely alatt egy képet szeretne megjeleníteni, amikor a HTML-fájlt böngészőben megnyitja. A címkének nincs külön zárócímkéje. A címkén belül meg kell adnia a megjeleníteni kívánt kép forrását úgy, hogy beírja a kép helyét az interneten a src tulajdonság. Ha a kép ugyanabban a mappában van, mint a HTML-fájl, írja be a kép nevét és kiterjesztését. Ha a kép máshol van tárolva, írja be a kép teljes URL-jét.
Add hozzá a alt attribútumot a címkéhez. A HTML5-ben az alt attribútum kötelező. Használja ezt az attribútumot a kép leírására arra az esetre, ha nem sikerül betölteni. Ha egy kép nem tölthető be, a böngésző az alt attribútum után megjeleníti a beírt szöveget. Ezenkívül az alt attribútum fontos a látássérültek által használt képernyőolvasó szoftverek számára. A szoftver beolvassa az alt attribútum szövegét, hogy a webhelyét megtekintő látássérült személy hallja, mi van a képen, még akkor is, ha nem látja.
Adja meg a kép méretét pixelben a gombbal magasság és szélesség attribútumok. Ha nem adja meg a méreteket, a böngésző nem tudja, hogy az oldal betöltésekor mennyi helyet hagyjon a képnek. Ez azt eredményezi, hogy az oldal szaggatottan töltődik be, mivel először a szöveg töltődik be, kis helyet hagyva a képnek, majd a kép betöltésekor szétugrik, és a hely kitágul. A megadott méretekkel a böngésző pontosan annyi helyet hagy az oldalon lévő többi elem között, hogy a kép kitöltse a betöltés befejeztével.
Tesztelje a kódot, hogy megbizonyosodjon arról, hogy a kép a megfelelő helyen jelenik meg. Ehhez nyissa meg a HTML-fájlt egy böngészőben.
A CSS használatával mozgassa a képet a képernyő bal vagy jobb oldalára, vagy helyezze körbe a szöveget. Például használhatja a style="float: left;" vagy style="float: right;" a címkén belül.
Ha nem ismeri a kép magasságát és szélességét, akkor egyszerűen használja a magasság vagy a szélesség attribútumot. A CSS segítségével megadhatja a magasságot és a szélességet is; például 100 x 100 pixeles kép esetén használja a style attribútumot: style="height: 100px; szélesség: 100 képpont."
Tegye a képet kattintható hivatkozássá, ha a címkét egy „a href” címkepárba helyezi. Ha például azt szeretné, hogy egy kép hivatkozzon a Facebookra, írja be a következőt.
Ne használja az alt attribútumot oldala keresőoptimalizálásának javítására. A keresőmotorok már régóta tisztában vannak azzal, hogy egyes webtervezők megpróbálják az alt attribútumot extra kulcsszavakkal feltölteni, ezért figyelmen kívül hagyják az alt attribútum szövegét.
