` tageket használsz az oldal különálló elemeinek létrehozásához. Hozz létre egy sor `

` elemet, amelyek képeket fognak tartalmazni. ### Képek Egy HTML tag, amelynek nincs szüksége záró tagra, az `` tag, mert van egy `src` eleme, amely tartalmazza az összes információt, amely az elem megjelenítéséhez szükséges. Hozz létre egy `images` nevű mappát az alkalmazásodban, és abba helyezd el az összes képet a [forráskód mappából](../../../../3-terrarium/solution/images); (14 növény képe van). ### Feladat Add hozzá ezeket a növényképeket két oszlopba a `` tagek közé: ```html

``` > Megjegyzés: Spans vs. Divs. A Div-ek 'blokk' elemeknek számítanak, míg a Spans 'soros' elemek. Mi történne, ha ezeket a div-eket span-ekké alakítanád? Ezzel a jelöléssel a növények most megjelennek a képernyőn. Elég rosszul néz ki, mert még nincsenek CSS-sel formázva, de ezt a következő leckében fogjuk megtenni. Minden képnek van alternatív szövege, amely akkor is megjelenik, ha nem tudod látni vagy megjeleníteni a képet. Ez egy fontos attribútum a hozzáférhetőség érdekében. A hozzáférhetőségről a későbbi leckékben tanulhatsz többet; egyelőre jegyezd meg, hogy az alt attribútum alternatív információt nyújt egy képről, ha a felhasználó valamilyen okból nem tudja megtekinteni azt (például lassú kapcsolat, hiba a src attribútumban, vagy ha a felhasználó képernyőolvasót használ). ✅ Észrevetted, hogy minden képnek ugyanaz az alt tag-je? Ez jó gyakorlat? Miért igen vagy miért nem? Tudod javítani ezt a kódot? --- ## Szemantikus jelölés Általánosságban előnyösebb, ha jelentést hordozó 'szemantikát' használsz a HTML írásakor. Mit jelent ez? Azt, hogy a HTML tageket arra a típusú adatra vagy interakcióra használod, amelyre tervezték őket. Például az oldal főcímének `

` tag-et kell használnia. Add hozzá a következő sort közvetlenül a nyitó `` tag alá: ```html

My Terrarium

``` A szemantikus jelölés, például a címek `

`-ként való megadása és a rendezetlen listák `
`-ként való megjelenítése segíti a képernyőolvasókat az oldal navigálásában. Általánosságban a gombokat `

` tag fölé: ```html

``` ✅ Bár hozzáadtad ezt a jelölést a képernyőhöz, semmi sem jelenik meg. Miért? --- ## 🚀Kihívás Vannak néhány 'régi' HTML tag, amelyekkel még mindig szórakoztató játszani, bár nem szabad elavult tageket, például [ezeket a tageket](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) használni a jelölésedben. Mégis, tudod használni a régi `` tag-et, hogy az h1 cím vízszintesen görögjön? (ha megteszed, ne felejtsd el utána eltávolítani) ## Előadás utáni kvíz [Előadás utáni kvíz](https://ff-quizzes.netlify.app/web/quiz/16) ## Áttekintés és önálló tanulás A HTML az a 'kipróbált és bevált' építőkocka-rendszer, amely segített a webet azzá alakítani, ami ma. Tanulj egy kicsit a történelméről, tanulmányozva néhány régi és új tag-et. Ki tudod találni, miért vontak vissza néhány tag-et, és miért adtak hozzá újakat? Milyen tagek jelenhetnek meg a jövőben? Tudj meg többet a web- és mobiloldalak készítéséről a [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) oldalon. ## Feladat [Gyakorold a HTML-t: Készíts egy blog makettet](assignment.md) --- **Felelősségkizárás**: Ez a dokumentum az [Co-op Translator](https://github.com/Azure/co-op-translator) AI fordítási szolgáltatás segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt a professzionális, emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.