Mire használjuk?
Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. A </li> záróelem használata opcionális, de mi javasoljuk, hogy mindig rakjuk ki.
Ne használjuk az <ol> taget olyan listáknál, ahol a listaelemek között nincs megállapítható sorrend, a listaelemek egyenértékűek. Ebben az esetben a felsorolás lista lesz a megfelelő (<ul>).
<ol> tag paraméterei:
Kulcsszó | Állapot | Leírás |
|---|---|---|
1 | decimal | Számok (tizes számrendszer) |
a | lower-alpha | Latin ábécé kisbetűi |
A | upper-alpha | Latin ábécé nagybetűi |
i | lower-roman | Római számok (kisbetűs) |
I | upper-roman | Római számok (nagybetűk) |
<li> tag paraméterei:
Példa - Egyszerű sorszámozott lista
A legjobb 3 film listája (IMDB)
<p>A legjobb 3 film listája (IMDB)</p> <ol> <li>A remény rabjai (1994)</li> <li>A keresztapa (1972)</li> <li>A keresztapa 2. (1974)</li> </ol>
A program felolvassa, hogy hány elemű a lista. A listaelemek sorszáma előtt nem hallható szünet, ezért nagyon kell figyelni, hogy a sorszámot megkülönböztessük az évszámtól.
Az IMDB betűszó felolvasása nem érthető, itt helyesebb lenne a rövidítést úgy feloldani (betűzve leírni), hogy az érthetőbb legyen a képernyőolvasót használóknak. Ennek módját korábban bemutattuk (<abbr>).
Példa - Sorszámozott lista fordított sorrendben
A legjobb 3 film listája (IMDB) - fordított sorrendben
<p>A legjobb 3 film listája (IMDB) – fordított sorrendben</p>
<ol reversed>
<li>A keresztapa 2. (1974)</li>
<li>A keresztapa (1972)</li>
<li>A remény rabjai (1994)</li>
</ol>
Ez a megoldás nem fordítja meg a listaelemek sorrendjét, csak a sorszámozás lesz csökkenő sorrendben!
Hallható, hogy most fordított sorszámozás alapján történik a felolvasás.
Példa - Sorszámozott lista kezdősorszám megadásával
A legjobb filmek listája (IMDB)
5 - 10. helyezett
<p>A legjobb filmek listája (IMDB) <br>5–10. helyezett</p> <ol start="5"> <li>A jó, a rossz és a csúf (1966)</li> <li>A sötét lovag (2008)</li> <li>Tizenkét dühös ember (1957)</li> <li>Schindler listája (1993)</li> <li>A Gyűrűk Ura: A király visszatér (2003)</li> <li>Harcosok klubja (1999)</li> </ol>
Hallhatjuk, hogy most öttől kezdődik a sorszámozás.
Példa - Sorszámozott lista más típusú sorszámozással
A legjobb filmek listája (IMDB)
5 - 10. helyezett
<p>A legjobb filmek listája (IMDB) <br>5–10. helyezett</p> <ol start="5" type="I"> <li>A jó, a rossz és a csúf (1966)</li> <li>A sötét lovag (2008)</li> <li>Tizenkét dühös ember (1957)</li> <li>Schindler listája (1993)</li> <li>A Gyűrűk Ura: A király visszatér (2003)</li> <li>Harcosok klubja (1999)</li> </ol>
Példa - A listaelemek sorszámának manuális beállítása
Néhány kedvenc filmem helyezése az IMDB legjobb filmek listáján.
<p>Néhány kedvenc filmem helyezése az IMDB legjobb filmek listáján.</p> <ol> <li value="1">A remény rabjai (1994)</li> <li value="4">Ponyvaregény (1994)</li> <li value="14">Eredet (2010)</li> <li>Nagymenők (1990)</li> <li>Csillagok háborúja (1977)</li> </ol>
Látható, hogy az utolsó két listaelemnél nem lett beállítva a value paraméter, ezért a böngészőprogram az előző sorszámtól folytatja a sorszámozást.
Nézd meg, hogy a kedvenc filmjeid hányadikak a fenti listán, és készíts egy manuális sorszámozású listát az előzőek alapján!
Ötelemű listaként lesz felolvasva a lista, a sorszámokat is helyesen felolvassa a képernyőolvasó program.
Mire használjuk?
Felsorolás lista esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. A </li> záróelem használata itt is opcionális, de mi javasoljuk, hogy mindig rakjuk ki.
Nagyon ajánlott, hogy a szövegekben elhelyezett, vesszővel elválasztott felsorolásokat a weblapok esetén felsoroláslistával valósítsuk meg, mert a látogatók szeme ebben a struktúrában jobban megakad egy-egy elhelyezett kulcsszón.
<ul> tag paraméterei: globális attribútumok
Palacsintatészta hozzávalói
<p>Palacsintatészta hozzávalói</p> <ul> <li>20 <abbr title="dekagram">dkg</abbr> liszt (1 púpos evőkanál=2 <abbr title="dekagramm">dkg</abbr>)</li> <li>2 tojás</li> <li>3 <abbr title="deciliter">dl</abbr> tej</li> <li>2 <abbr title="deciliter">dl</abbr> szénsavas ásványvíz</li> <li>1 csipet só</li> <li>3/4 <abbr title="deciliter">dl</abbr> étolaj</li> </ul>
A képernyőolvasó hatelemű listaként olvassa fel a hozzávalókat. Mivel megadtuk a dkg és dl rövidítések kifejtését, jól érthetően olvassa fel a program a szöveget.
A weblapkészítés során tipikus hiba szokott lenni a listák hibás egymásba ágyazása, ezért nézzünk erre egy szabványos példát!
Az alábbi példában egy sorszámozott listába ágyazunk be egy felsorolás listát.
A legjobb 3 film listája (IMDB)
<p>A legjobb 3 film listája (IMDB)</p>
<ol>
<li>A remény rabjai (1994)
<ul>
<li>Rendező: Frank Darabont</li>
<li>Tim Robbins</li>
<li>Morgan Freeman</li>
<li>Bob Gunton</li>
</ul>
</li>
<li>A keresztapa (1972)<ul>
<li>Rendező:Francis Ford Coppola</li>
<li>Marlon Brando</li>
<li>Al Pacino</li>
<li>James Caan</li>
</ul></li>
<li>A keresztapa 2. (1974)<ul>
<li>Rendező:Francis Ford Coppola</li>
<li>Al Pacino</li>
<li>Robert Duvall</li>
<li>Diane Keaton </li>
</ul></li>
</ol>
Látható, hogy az <ul> elemet a listaelem szövege után kell beillesztenünk, nem pedig a listaelemet lezáró </li> elem mögé, mint ahogy sokan elkövetik ezt a hibát. A HTML validátor eszközökkel gyorsan meggyőződhetünk arról, hogy az egymásba ágyazás szabványos-e, vagy sem.
Háromelemű listaként olvassa fel a program a listát, majd jelzi a felolvasási szintet. Hallhatjuk, hogy a színészek nevét magyarul olvassa fel a program. Ezen javíthatnánk, ha a neveknél megadnánk a nyelvet a lang paraméterrel, mert akkor a felolvasó program képes lenne más nyelven felolvasni a szöveget (de csak elvileg, mert a gyakorlat sokszor mást mutat).
Az interaktív példát alakítsd át úgy, hogy az alábbi képnek megfelelő eredményt kapj! Győződj meg a megoldásod szabványosságáról a http://validator.w3.org/ oldalon!
Listák egymásbaágyazása - feladatA list-style-type tulajdonság segítségével beállíthatjuk a listánkhoz tartozó listajelet.
Példa - Listajel beállítása
Írd át a fenti példát úgy, hogy a többi listajelformátumot is kipróbálhasd.
A fenti értékek előre definiált értékek, és azok közül sem az összes. A CSS3 szabványban külön dokumentum (CSS Counter Styles Level 3) foglalja össze a listaelemekre vonatkozó tudnivalókat. Ebben megtaláljuk az előre definiált listastílusok felsorolását, sőt azt is látjuk, hogyan lehetne akár saját listajel formátumot létrehozni:
@counter-style square {
system: cyclic;
symbols: \25FE;
/* fekete kitöltésű négyzet */
suffix: "";
}
A list-style-position tulajdonság segítségével beállíthatjuk listajelünk és az azt követő szöveg egymáshoz viszonyított pozícióját.
Értékek:
Példa - Listajel pozícionálás
A fenti példában az outside és inside beállítás is kipróbálható.
A list-style-image tulajdonsággal saját, kép alapú listajelet állíthatunk be.
Példa - Listajel beállítása képként
A fenti tulajdonságok külön-külön történő megadása helyett használhatjuk a list-style rövidített (shorthand) tulajdonságot is, pl.: list-style: circle outside.
Mire használjuk?
Ezen elemekkel úgynevezett definíciós, vagy meghatározás listát készíthetünk. A <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket. A fogalmat <dt> és </dt>, a magyarázatát <dd> és </dd> tagek közé kell tennünk.
<dl> tag paraméterei: globális attribútumok
<dt> tag paraméterei: globális attribútumok
<dd> tag paraméterei: globális attribútumok
Fontos fogalmak a web-fejlesztés témakörben:
<p>Fontos fogalmak a webfejlesztés témakörben:</p>
<dl>
<dt>Validáció</dt>
<dd>A forráskód szabványoknak való megfelelőségének ellenőrzési folyamata.</dd>
<dt>Protokoll</dt>
<dd>Egy egyezmény, vagy szabvány, amely leírja, hogy a hálózat résztvevői miképp tudnak egymással kommunikálni.</dd>
</dl>
Kettő elemű definíciós listaként olvassa fel a JAWS program a példát.
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.