Kép beszúrása HTML-kóddal

Fűszerezze webhelyeit képek hozzáadásával. A segítségével képeket illeszthet be HTML-fájlokba címke, amellyel megadhatja a kép helyét az interneten, a kép magasságát és szélességét, valamint alternatív szöveget, amely akkor jelenik meg, ha a kép nem töltődik be, vagy ha valaki képernyőolvasót használ az oldal megtekintéséhez. Az interneten három általánosan használt képfájltípus a GIF, PNG és JPEG.

1. lépés

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.

2. lépés

Adjon hozzá egy -t címkét a fájlhoz. Helyezze el a címkét azon elem után, amely alatt a képet meg szeretné jeleníteni, amikor a HTML-fájlt böngészőben megnyitják. 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 az src segítségével. 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épet máshol tárolja, írja be a kép teljes URL-címét.

3. lépés

Adja hozzá az alt billentyűt 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.

4. lépés

Adja meg a kép méretét képpontokban a magasság segítségével és szélesség attribútumokat. 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.

5. lépés

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.

Tipp

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="height:100px;width:100px" stílusattribútumot."

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.

Figyelmeztetés

Ne használja az alt attribútumot oldala keresőoptimalizálásának javítására. A keresőmotorok régóta tudatában vannak annak, 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.