HTML alapok › 2. modul: Szöveg › 2.4 lecke
HTML alapok · 2.4 lecke
Listák: felsorolás, sorrend és fogalmak
A weben mindenhol listák vannak: bevásárlólista, lépésenkénti útmutató, szószedet, sőt a menük is. Ebben a leckében megismered a három listatípust, és megtanulod helyesen egymásba ágyazni őket.
A lecke végére
- számozatlan listát készítesz (
ul) felsoroláshoz; - számozott listát készítesz (
ol), ahol számít a sorrend; - fogalomlistát készítesz (
dl) fogalmakhoz és magyarázatukhoz; - helyesen ágyazol egymásba listákat.
Mielőtt elkezded
Szükséged lesz a bekezdésekre és a címsorokra.
Számozatlan lista: ul
<h2>Mit viszek a kirándulásra?</h2> <ul> <li>kulacs</li> <li>esőkabát</li> <li>szendvics</li> </ul>
Az ul (unordered list) olyan felsorolás, ahol nem számít a sorrend. A lista minden eleme egy li (list item).
Számozott lista: ol
<h2>Így készül a palacsinta</h2> <ol> <li>Keverd csomómentesre a lisztet a tejjel.</li> <li>Add hozzá a tojást és egy csipet sót.</li> <li>Süsd ki forró serpenyőben.</li> </ol>
Az ol (ordered list) ott kell, ahol a sorrend számít: lépések, rangsor, útvonal. A számokat a böngésző magától írja ki.
type="I" római számokkal.Fogalomlista: dl
<dl> <dt>böngésző</dt> <dd>Program, amely megjeleníti a weboldalakat.</dd> <dt>szerver</dt> <dd>Számítógép, amely tárolja és kiszolgálja a weboldalakat.</dd> </dl>
A dl (description list) fogalmak és magyarázataik párjaira való: szószedet, GYIK, adatlap. A dt a fogalom, a dd a magyarázat.
Listák egymásban
Egy listaelemen belül újabb lista lehet. A lényeg: a belső lista a li-n belül van, a záró </li> előtt.
<ul> <li>Gyümölcs <ul> <li>alma</li> <li>körte</li> </ul> </li> <li>Zöldség</li> </ul>
Jósold meg!
Mi a baj ezzel? <ul><li>Gyümölcs</li><ul><li>alma</li></ul></ul>
Megoldás
A belső ul közvetlenül a külső ul-ban áll, nem egy li-ben. Az ul közvetlen gyereke csak li lehet. Helyesen a belső listát a „Gyümölcs” li-jébe kell tenni.
Miért lista, és nem kötőjeles sorok?
nav-nál látod majd.Hibavadászat
1. Kötőjeles „lista”
<p>- kulacs<br>- esőkabát<br>- szendvics</p>
Mi a baj?
Ez csak látszólag lista: a felolvasó és a böngésző nem tudja, hogy felsorolás. Helyesen ul és li.
2. li lista nélkül
<li>alma</li> <li>körte</li>
Mi a baj?
A li csak ul-ban vagy ol-ban állhat.
3. Rossz listatípus
<ul> <li>Kapcsold be a gépet.</li> <li>Jelentkezz be.</li> </ul>
Mi a baj?
Lépésekről van szó, ahol számít a sorrend: ol kell.
Projekt: listák a saját oldaladon
Folytasd a saját oldalad projektet!
- A Kedvenceim részbe tegyél egy számozatlan listát (például kedvenc könyveid).
- Készíts egy számozott „toplistát” (például a három legjobb film,
reversedattribútummal). - A Rólam oldalra tegyél egy kis fogalomlistát (például a hobbid szakszavai és magyarázatuk).
Kész vagy, ha…
…mindhárom listatípus szerepel, mindegyik a céljának megfelelően, és a beágyazások helyesek.
Ellenőrizd magad!
Mikor használsz ul-t és mikor ol-t?
Ul-t, ha nem számít a sorrend; ol-t, ha számít.
Mire jó a dl?
Fogalmak és magyarázataik párjaihoz.
Hová kerül a beágyazott lista?
A szülő li-n belülre, a záró li elé.
Miért jobb a lista a kötőjeles soroknál?
Mert a felolvasók és a böngészők felismerik, és CSS-sel egységesen formázható.
Tanároknak
Kerettantervi kapcsolódás
NAT 2020, Digitális kultúra, 9. évfolyam, Publikálás a világhálón: felsorolások a weblapon. Kapcsolódik a szövegszerkesztés felsorolás- és számozásformázásához.
Módszertan
A három listatípus hétköznapi példákon (csomagolólista, recept, szószedet) jelenik meg, így a választás szempontja (számít-e a sorrend, fogalom–magyarázat pár) jól érthető. A beágyazás a DOM-fa (1.5) ismereteire épít.
Időterv
Ul és ol: 15 perc. Dl: 7 perc. Beágyazás: 8 perc. Miért lista?: 5 perc. Hibavadászat és projekt: 10 perc.