HTML alapok › 6. modul: Oldalszerkezet › Gyorsítópálya
🚀 HTML alapok · 6. modul · Gyorsítópálya
Oldalszerkezet – gyorsítópálya
A 6. modul teljes tudása egyetlen leckében: div és span, valamint a szemantikus elemek a header-től a footer-ig. Ha valahol elakadsz, a részletes leckék egy kattintásra vannak.
Mikor válaszd?
- ha gyorsan haladsz, és egy órában szeretnéd átvenni a modult;
- ha ismételsz, például dolgozat előtt;
- ha érettségire készülsz, és egy tömör áttekintés kell.
Részletesen
6.1 A div és a span →
6.2 header →
6.3 nav →
6.4 main →
6.5 section →
6.6 article →
6.7 aside →
6.8 footer →
Puska: az oldal térképe
| Elem | Mire való? |
|---|---|
div, span | Jelentés nélküli dobozok: blokk, illetve soron belüli. Csak ha nincs beszédes címke. |
header | Az oldal vagy egy rész fejléce (logó, cím, menü). Nem azonos a head-del! |
nav | Fő navigáció, listával; aktuális oldal: aria-current="page"; ugrólink a main-re. |
main | Az oldal egyedi, fő tartalma; pontosan egy. |
section | Tematikus szakasz, mindig címsorral. |
article | Önálló tartalom (kiragadás-próba); dátum: time datetime. |
aside | Kiegészítő tartalom (kihagyás-próba). |
footer | Záró információk; elérhetőség: address. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Mi a különbség a head és a header között?
A head nem látható adatokat tartalmaz, a header látható fejléc a body-ban.
Hány main lehet egy oldalon?
Egy látható.
Section vagy article egy blogbejegyzés?
Article: önállóan is megáll (kiragadás-próba).
Miért nem lehet gomb egy div?
Mert billentyűzettel nem érhető el, és a felolvasó sem gombnak mondja.
Mire való az address?
A szerző vagy az oldal gazdájának elérhetőségére.
Gyorsfeladat: tisztítsd meg a div-levest!
Írd át fejben (vagy a VS Code-ban) a régi, csupa div kódot szemantikus címkékre! A „tudtad” doboz a bejegyzéshez tartozik.
<div class="fejlec"> <div class="menu">…</div></div><div class="tartalom"> <div class="bejegyzes">…</div> <div class="tudtad">…</div></div><div class="lablec">…</div>
Megoldás
Lásd a lenti kódot: fejlec → header, menu → nav, tartalom → main, bejegyzes → article, tudtad → aside a cikken belül, lablec → footer.
<header> <nav>…</nav></header><main id="tartalom"> <article>… <aside>…</aside> </article></main><footer>…</footer>
Gyorsfeladat: tájékozódásipont-vadászat
Mit lát a felolvasó?
Nyisd meg a saját oldaladat a Firefoxban, F12, majd az Accessibility (Akadálymentesség) fül. A fában látod a „landmark” szerepeket: banner (header), navigation (nav), main, complementary (aside), contentinfo (footer). Megvan mind?
Záróprojekt: a saját oldalad teljes szerkezete
Tedd teljessé a saját oldalad szerkezetét minden oldalon!
- Minden oldal: ugrólink, header benne nav-val (aktuális oldal jelölve), egy main id-val, footer © jellel és address-szel.
- A Rólam oldal section-ökre bontva, a blog article-ökből, legalább egy aside-dal.
- Ellenőrizd a W3C validátorral és a Firefox akadálymentességi nézetével.
Kész vagy, ha…
…a validátor nem talál hibát, minden tájékozódási pont megvan, és sehol nem maradt olyan div, aminek beszédes címke lenne a helye.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …mikor jó a div és a span, és mi a div-leves. (6.1)
- …mi a különbség a head és a header között. (6.2)
- …hogyan készül egy akadálymentes menü ugrólinkkel. (6.3)
- …mi kerül a main-be, és miért csak egy van. (6.4)
- …mikor section, mikor article. (6.5, 6.6)
- …mire jó az aside és a footer, és mire az address. (6.7, 6.8)
Tanároknak
Mire jó a gyorsítópálya?
Differenciálásra, ismétlésre, dolgozat előtti összefoglalásra és érettségi-felkészítésre. A div-leves tisztítása a modul összes elemét egyetlen, valós refaktorálási feladatban kéri, a tájékozódásipont-vadászat pedig a böngésző akadálymentességi nézetével ellenőriz.
Időterv (45 perc)
Puska és villámkérdések: 12 perc. Div-leves tisztítás: 12 perc. Tájékozódásipont-vadászat: 8 perc. Záróprojekt elkezdése: 13 perc.
Értékelés
A „Tudom, hogy…” lista önértékelésre, a záróprojekt a validátor és az akadálymentességi nézet alapján értékelhető.