OLDALSZERKEZET ELEMEK 1
A TAG A header taggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről (pl..) 2 A HTML5 szabvány Oldalszerkezet bemutatása A HTML5 szabvány Oldalszerkezet bemutatása A HTML5 szabvány Oldalszerkezet bemutatása
A TAG A nav elem az oldal azon részének van fenntartva, amely más oldalakra, vagy az adott lap egy bizonyos területére mutató linkeket tartalmaz. 3
A TAG A section elem az oldal egy nagyobb részét foglalja magába. Azonos témához tartozó elemek összecsoportosítására való, melynek közös címe van. Az azonos témakörbe tartozó elemeket foglalja egy csoportba. 4
AZ TAG Az aside tag tartalma kapcsolatban áll az oldal fő részével, érintőlegesen kapcsolódik a körülötte levő tartalomhoz. Általában oldalsáv formájában jelenik meg, ami olyan elemeket tartalmaz, mint kapcsolódó kommentek/linkek vagy tag felhők. 5
AZ TAG Az article tagben található az oldal lényegi része. Ez lehet egy fórum bejegyzés, egy újságcikk, blog bejegyzés, vagy bármilyen más független tartalom. Lehet saját fejléce és lábléce. Egy cikk fejléce tartalmazhatja például a cikk címét, alcímét, publikálás dátumát header tagek között. A láblécbe meg kerülhet például szerző footer tagek közé. 6
A TAG A footer a header elemhez hasonló elem, a lábléc jelölésére alkalmas tag. Nem csak az oldal egészére, de akár egy különálló részre vonatkozóan is. Ebből kifolyólag akár többször is használható egy oldalon belül. A lábléc általában az oldallal kapcsolatos információkat tartalmazza, mint például a készítő neve, kapcsolódó dokumentumok linkjei, szerzői jogi információk. 7
A TAG A hgroup tag a címsor elemek (h1 - h6) csoportosítására való tag. Akkor szükséges a használata, amikor több szintű címsor van, mint például ha egy cikknek van alcíme. Ez esetben a h1 - h6 tageket csoportosítani kell egy hgroup tagbe. 8
FELADATOK OLDALSZERKEZET ELEMEK 9
1. FELADAT Készítsd el a t2-f1-feladat.png képen szereplő oldalszerkezetet a tanult HTML5 elemek használatával! Segítségül használd a t2-f1-style.css stílusfájlt. 10
2. FELADAT Készítsd el a t2-f2-feladat.png képen szereplő oldalszerkezetet a tanult HTML5 elemek használatával! Segítségül használd a t2-f2-style.css stílusfájlt. 11