HTML alapok › 2. modul: Szöveg › Gyorsítópálya
🚀 HTML alapok · 2. modul · Gyorsítópálya
Szöveg – gyorsítópálya
A 2. modul teljes tudása egyetlen leckében: címsorok, bekezdések, kiemelések, sortörés, témaváltás és listák. 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
2.1 Címsorok →
2.2 Bekezdés és kiemelés →
2.3 A br és a hr →
2.4 Listák →
Puska: a modul címkéi
| Címke | Mire való? |
|---|---|
h1–h6 | Címsorok, tartalomjegyzék-szerűen: egy h1, nincs szintugrás; a méretet a CSS adja. |
p | Bekezdés; a kódban lévő több szóköz és sortörés egy szóközzé vonódik össze. |
strong / em | Fontos / hangsúlyos (jelentés). A b és az i jelentésbeli fontosság nélküli kiemelés. |
br | Sortörés, ha a sor vége a tartalom része (vers, cím). Nem térközre! |
hr | Témaváltás a szövegen belül, nem díszvonal. |
ul / ol + li | Számozatlan / számozott lista; beágyazott lista a li-n belül. |
dl + dt / dd | Fogalomlista: fogalom és magyarázat. |
, < | Nem törő szóköz; a < jel a szövegben. |
Villámkérdések
Előbb gondold végig a választ, csak utána nyisd ki!
Mi jöhet közvetlenül egy h2 után: h3 vagy h4?
h3 (vagy újabb h2); a h4 szintugrás lenne.
Hogyan jelenik meg: <p>Szia! Hogy vagy?</p>
„Szia! Hogy vagy?”, egyetlen szóközzel.
Ugyanúgy néz ki a strong és a b. Mi a különbség?
A strong fontosságot jelöl, a b nem; a felolvasók és a keresők ezt figyelembe vehetik.
Recept lépései: ul vagy ol?
ol, mert számít a sorrend.
Hová kerül egy beágyazott lista?
A szülő li-n belülre.
Gyorsfeladatok
Tartalomjegyzék
Egy cikk: „Az erdő élővilága”, fejezetei: Növények (alfejezet: fák, cserjék), Állatok (alfejezet: emlősök, madarak). Írd meg csak a címsorokat!
Megoldás
h1: Az erdő élővilága · h2: Növények · h3: Fák · h3: Cserjék · h2: Állatok · h3: Emlősök · h3: Madarak
Melyik lista?
Válassz listatípust: a) egy toplista a 10 legjobb dalról; b) a kiránduláshoz szükséges dolgok; c) informatikai szakszavak és jelentésük.
Megoldás
a) ol (akár reversed), b) ul, c) dl
Vers
Tördeld br-rel egy közkincs vers (1929 előtt megjelent) első versszakát egyetlen bekezdésbe.
Vegyes hibavadászat
A
<h1>Receptek</h1><h3>Levesek</h3>
Mi a baj?
Szintugrás: h1 után h2 kell.
B
Első gondolat.<br><br>Második gondolat.Mi a baj?
Két gondolat két bekezdés (p), nem br-ek.
C
<ul><li>Gyümölcs</li><ul><li>alma</li></ul></ul>
Mi a baj?
A belső lista a „Gyümölcs” li-n belülre kell.
D
Új sor</br>Mi a baj?
A br üres elem, nincs záró címkéje.
Záróprojekt: receptoldal
Készíts egy receptoldalt egy kedvenc ételedről, szabályos HTML-vázzal.
- Egy h1 (az étel neve), és h2-k: Hozzávalók, Elkészítés, Tippek.
- A hozzávalók ul-ben, az elkészítés lépései ol-ben.
- Legalább egy strong (például „Vigyázz, forró!”) és egy em.
- A Tippek előtt egy hr, a végén egy kis fogalomlista a konyhai szakszavakhoz (dl).
- Mennyiségeknél nem törő szóköz:
200 g.
Kész vagy, ha…
…a W3C validátor nem talál hibát, a címsorok helyes tartalomjegyzéket adnak, és minden címke a jelentése szerint szerepel.
Tudom, hogy…
Pipáld ki gondolatban! Ahol bizonytalan vagy, ott a zárójelben lévő lecke segít.
- …hogyan építek helyes címsor-hierarchiát, és miért fontos a felolvasóknak. (2.1)
- …miért vonja össze a böngésző a szóközöket, és hogyan tagolok bekezdésekkel. (2.2)
- …mi a különbség a strong, az em, a b és az i között. (2.2)
- …mikor jogos a br, és mit jelent a hr. (2.3)
- …mikor használok ul-t, ol-t és dl-t, és hogyan ágyazok be listát. (2.4)
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 receptoldal a freeCodeCamp és a code.org projektalapú feladatainak mintájára, új helyzetben kéri a modul összes címkéjét.
Időterv (45 perc)
Puska és villámkérdések: 12 perc. Gyorsfeladatok: 15 perc. Hibavadászat: 5 perc. Záróprojekt elkezdése: 13 perc.
Értékelés
A „Tudom, hogy…” lista önértékelésre, a receptoldal a W3C validátor eredménye és a „Kész vagy, ha…” szempont szerint értékelhető.