A multimédiás tartalmaknak természetesen több típusa is létezik, leckénket azonban a szerény elemmel fogjuk kezdeni, melynek segítségével egyszerű képeket tudunk a weboldalon elhelyezni. Ebben a cikkben az alapokat is felölelve, részletesen bemutatjuk ennek az elemnek az alkalmazását és a CSS-szel való kapcsolatát.

Hogyan illeszthetünk képet a weboldalba?

Amint már említettük, a képet az elem segítségével tudjuk beszúrni. Ez egy üres elem (ami azt jelenti, hogy nincs szöveges tartalma vagy zárójelölése), melynek legalább egy attribútumra van szüksége ahhoz, hogy hasznos legyen — ez a src, azaz a source. A src attribútum tartalmazza azt az útvonalat, amely a beilleszteni kívánt képhez vezet.

Tehát ha a kiválasztott kép neve logo.jpg, és ugyanabban a mappában van, ahol a HTML oldal is, így szúrhatjuk be:

Ha a kép az images almappában van, az almappa pedig a HTML oldal mappájában (amit a Google is ajánl), az útvonal így fest:

<img src="logo.jpg" />

Alternatív szöveg

A következő attribútum, melynek figyelmet kell szentelnünk, az alt. Értéke a kép szöveges leírása kell hogy legyen. Ez a szöveg olyan esetekben jelenik meg, amikor a kép valamilyen okból nem látható. A fenti kódot így modifikálhatnánk:

Az alt attribútumot úgy tesztelhetjük a legegyszerűbben, ha a kódban szándékosan elrontjuk a kép nevét, és például logoooo.jpg-t írunk be. Ebben az esetben a böngésző nem tudja megjeleníteni a képet, és az alternatív szöveg jelenik meg helyette.

<img alt="Az ErdSoft cég logója" src="images/logo.jpg" />

A kép szélessége és magassága

A width és a height attribútumok segítségével a kép szélességét és magasságát is be tudjuk állítani. Térjünk vissza a példánkra:

<img alt="Az ErdSoft cég logója" height="341" src="images/logo.jpg" width="400" />

Ez a beállítás normális körülmények között nem változtat a megjelenítésen. Ha viszont a felhasználó megérkezett az oldalra, és a kép még nem töltődött be, a böngésző üresen hagyja a kép helyét, amíg az nem jelenik meg. A szélesség és a magasság beállítása hasznos dolog, mert az oldal betöltődése gyorsabb és zökkenőmentesebb lesz. Azt azonban fontos megjegyezni, hogy a képek nagyságát nem tanácsos HTML-attribútumok segítségével változtatni, mert a képek torzak, rossz minőségűek lehetnek — erre használj inkább egy jó képszerkesztő alkalmazást.

A kép címe

A képeket elláthatjuk title attribútummal is, melybe beírhatjuk a kép címét. A példánkon ez valahogy így festene:

<img alt="Az ErdSoft cég logója" height="341" src="images/logo.jpg" title="ErdSoft logó" width="400" />

A beírt cím jelenik meg, ha a böngészőben a képre helyezzük a kurzort. Fontos azonban megjegyezni, hogy a title attribútumnak számos hátránya is van, mely főként a képernyőolvasókhoz kapcsolódik. A fontos információkat a képről tanácsosabb a cikk szövegébe illeszteni.

Olyan esetekben, amikor sok képpel és sok felirattal dolgozunk, használhatjuk a HTML5

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>
<p><strong>Note:</strong> The figure tag is not supported in Internet Explorer 8 and earlier versions.</p>

CSS-háttérképek

A képek beillesztéséhez a weboldalba CSS-t is alkalmazhatunk (valamint JavaScriptet is, de ez már egy egész más történet). A CSS background-image tulajdonság és a többi background-* tulajdonság kontrollálja a kép elhelyezését. Ha például azt szeretnénk, hogy az oldal minden paragrafusában megjelenjen a háttérkép, azt így érhetjük el:

p {
  background-image: url("images/hatter.jpg");
}

Az eredményként kapott kép sokkal könnyebben pozicionálható és kontrollálható, mint a HTML-képek. Miért használjuk akkor a HTML-t? Azért, mert a CSS-háttérképeknek csak dekorációs céljuk van. Ha szeretnél valami szépet hozzáadni az oldalhoz, hogy esztétikusabb legyen, rendben van. Az ilyen képeknek azonban nincs semmilyen szemantikus jelentésük. Nincs hozzájuk tartozó szöveg, a képernyőolvasók nem észlelik őket... itt lépnek színre a HTML-képek!

Hogy összegezzük: Ha egy képnek van valamilyen jelentése a tartalom szempontjából, érdemes a HTML szemszögéből megközelíteni. Ha a kép csak dekoráció, a CSS-háttérkép lesz a jó megoldás.

Mai cikkünkbe ennyi fért bele. Részletesen bemutattuk a képeket és a feliratokat. A tanultakat magad is kipróbálhatod, hogy a jövő héten felkészülten vághass bele következő leckénkbe.