Kezdetben a web csak szövegből állt, és valljuk be, elég unalmas volt. Szerencsére nem kellett sok idő ahhoz, hogy képeket (vagy más, érdekes tartalmakat) is be lehessen illeszteni a weboldalakba.
A multimédiás tartalmaknak természetesen több típusa is létezik, leckénket azonban a szerény <img> 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 <img> 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:
<img src="logo.jpg" />
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="images/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:
<img src="images/logo.jpg"
alt="Az ErdSoft cég logója">
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.
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 src="images/logo.jpg"
alt="Az ErdSoft cég logója"
width="400"
height="341" />
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 src="images/logo.jpg"
alt="Az ErdSoft cég logója"
width="400"
height="341"
title="ErdSoft logó" />
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> és <figcaption> elemeit. Ezek arra valók, hogy összekapcsolják a képet a hozzá tartozó felirattal. A példánkat így írhatnánk át:
<figure>
<img src="images/logo.jpg"
alt="Az ErdSoft cég logója"
width="400"
height="341" />
<figcaption>ErdSoft logó</figcaption>
</figure>
A <figcaption> elem teszi nyilvánvalóvá a böngészőknek, hogy a szöveg a <figure> elem tartalmának leírására való. A figure elem nem kell hogy kép legyen, lehet más tartalom is.
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.
Kiemelkedő eredményt ért el az ErdSoft csapata
Dudás Róbert, az ErdSoft senior frontend fejlesztője és stratégiai partnerünk senior backend fejlesztője egy csapatot alkotva második helyezést ért el a Google budapesti AMP-versenyén!
Mi az AMP? Az AMP (Accelerated Mobile Pages vagy gyorsított mobiloldalak) a Google nyílt forráskódú projektuma, célja, hogy a mobilböngészés során az oldalak a lehető leggyorsabban jelenjenek meg. Az AMP három építőeleme az AMP JavaScript, az AMP Cache és az AMP HTML. Az AMP JavaScript felelős az alapvető funkcionalitásokért, az AMP Cache segítségével az oldalak lényegesen effektívebben jeleníthetőek meg, az AMP HTML pedig egy folyamatosan bővülő komponenskészlet, mely tudatosan limitált funkcionalitással bír — mindez a teljesítmény érdekében.
Az október 12-én megrendezett eseményen fejlesztőcégek és -ügynökségek vettek részt. A találkozó célja az volt, hogy ismertessék a résztvevőkkel az AMP-technológia működését és a legfőbb építőelemeket, melyek feltétlenül szükségesek egy ilyen oldal publikálásához.
Csapatunk a Hackathon során az egyik általunk készített és ügyfelünkkel együtt kiválasztott oldalt igyekezett a lehető legjobban átszabni érvényes AMP-oldallá.
A megmérettetésen csapatunk kiemelkedő eredményt, második helyezést ért el, maga mögé utasítva a magyarországi e-kereskedelem nagyjait. Nagyon büszkék vagyunk az eredményre, és izgatottan várjuk a jövőbeli kihívásokat!
NEREMÉNYJÁTÉK!
A játék heti kérdése:
Hogyan hivatkozhatunk egy képre, ha a HTML-fájlunk a gyökérkönyvtárban van, a kép pedig a pictures/logos almappában, a kép neve pedig logo.png?
1. <img src="images/logos/logo.png" ... />
2. <img src="pictures/logos/logo.jpg" ... />
3. <img src="pictures/logos/logo.png" ... />
Azok között, akik beküldik a helyes választ, a sorozat végén egy laptopot sorsolunk ki! Minden beküldött helyes válasz növeli a nyerési esélyeket, hiszen mindegyik egy szelvényt fog érni.
A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
