6. A szöveg tördelése II.: A listák
Az előző fejezetben láthattuk, milyen lehetőségek vannak a HTML-ben folyó szövegek formázására. Vannak azonban olyan szövegek, melyben felsorolások szerepelnek. Ezek kezelésére még nem láttunk megfelelő eszközöket. Nem találtunk kedvező lehetőséget a bekezdések hierarchikus elrendezésére sem. Ebben a fejezetben megismerkedhetünk néhány remek eszközzel, melyek pont ezekre kínálnak remek megoldást.
Egyszerű felsorolás
Az egyszerű felsorolás nyitóeleme az <ul>. Ennek hatására új sor kezdődik, és a margó kissé beljebb húzódik. A lista egyes elemeit a <li> elemmel jelöljük, ennek záróelemét nem kötelező használni. Minden egyes listaelem előtt egy apró jel jelenik meg. A listák egymásba ágyazhatók, és minden alárendelt listában más-más jelecske jelöli a listaelemet. A jelecskét akár az <ul>, akár a <li> elemben mi is megváltoztathatjuk a type paraméterrel. (Az Opera mindig tömör kört használ, ha nem adunk meg más értéket.) Ennek értéke disc (tömör kör, korong), circle (kör, karika) vagy square lehet. Például:
<ul type=circle>
<li> Ez itt kör.
<li type=square> Ez négyzet
<ul type=disc>
<li> Ez tömör kör.
<li type=circle> Ez kör.
<li type=square> Ez négyzet.
<li> Ez is tömör kör.
</ul>
<li> Ez kör.
<li type=disc> Ez tömör kör.
<li> Ez is kör.
</ul>
Természetesen az egyes listaelemek megjelölését nem érdemes megváltoztatni, mert csak összezavarja a képet. (Figyelem: ha egy lista jelecskéjét átdefiniáljuk, az nem hat a beágyazott listára: az ugyanolyan jellel fog megjelenni, mint eredetileg jelent volna.)
Mint a fenti részletből is látszik, a listaelemek végére nem kell <br> elemet tenni, a böngésző anélkül is új sort kezd. Ha a listaelemben szereplő szöveg több sort is kitölt, a böngésző mindig az első sor első betűje alatt kezdi az új sort, így a listaelemet kezdő jelecske elég feltűnő marad. A listaelemen belül is elhelyezhetünk sortöréseket, sőt, újabb listákat. A böngésző csak az újabb <li> elem hatására teszi ki az új listaelemet jelző jelecskét.
(Megjegyezzük, hogy a <li> elem akkor is használható, ha nem nyitunk meg listát az <ul> elemmel. Ez azonban nem tekinthető szabályos használatnak.)
Listákat készíteni egyáltalán nem nehéz! Gyakorlásképpen alakítsuk át a személyes adatainkat tartalmazó oldalunkat úgy, hogy listában sorolja fel adatainkat. Válasszunk olyan adattípust is, melynél több adatot is felsorolhatunk (pl. iskoláink, munkahelyeink, gyermekeink). Hasonlítsuk össze a példamegoldással!
A sorszámozott lista
A sorszámozott listát az <ol> elemmel kezdjük. A sorszámozott lista minden tekintetben megegyezik a az egyszerű lista tulajdonságaival, csupán a listaelem kezdetét jelölő jelecske helyett itt mindig más jel jelenik meg: sorszám, vagy betű. Ezek minden listaelemnél egyet lépnek előre. A type paraméterrel a következő típusokat választhatjuk: 1 sorszámozás arab számokkal, i sorszámozás kis római számokkal, I sorszámozás nagy római számokkal, a felsorolás kisbetűkkel, A felsorolás nagybetűkkel. A számozás kiinduló értékét a start paraméterben adhatjuk meg. Az általunk használt három böngésző közül mindegyik csak az arab számként fogad el kiinduló értéket, ezeket a megfelelő római számra vagy betűre alakítja át. Az Internet Explorer negatív számokat is elfogad (de csak akkor, ha arab számokról van szó), az Opera a negatív számokat nem, de a nullát igen, míg a Netscape Navigator csak a pozitív számokat fogadja el. (Tört számokat természetesen egyiknél sem adhatunk meg.) Mivel nem tudhatjuk, hogy az oldal látogatója milyen böngészőt fog használni, célszerű megmaradni a pozitív számok körében.
Az egyes listaelemeknek magunk is adhatunk értéket a value paraméter segítségével. Ilyenkor a listázás attól az értéktől folytatódik, amit megadtunk. A különböző típusú egyszerű és számozott listák minden megkötöttség nélkül egymásba ágyazhatók.
A szószedet
Az előzőleg tárgyalt listáktól eltérő szerkezetű a szószedet. Ez arra való, hogy egyes szavakhoz (vagy néhány szóból álló kifejezéshez) hosszabb szöveget rendeljünk. A kifejezés a bal margóhoz igazítva jelenik meg, míg a hozzá tartozó szöveg egy sorral lejjebb, valamivel beljebb kezdődik. A szószedetet a <dl> elem nyitja meg, és természetesen kötelező lezárni. A kifejezést a <dt> elem, a szöveget a <dd> elem nyitja meg, egyiket sem kötelező lezárni (az újabb kifejezést, ill. szöveget megnyitó elem az előzőt automatikusan lezárja). A kifejezésen belül szövegformáló elemeket nem szabad elhelyezni, a szövegbe azonban akár listákat is elhelyezhetünk.
A szószedet rendkívül sokoldalú eszköz. Segítségével készíthetünk valódi szótárat (természetesen csak kisebbet, pl. számitástechnikai szakszavak gyűjteményét, szlengszótárat az iskolai honlapra), leírásokat (pl. játékok leírását, könyvek tartalmi ismertetését), de közölhetünk ilyen formában recepteket is.
Feladatok
1. Készítsük el az uráli népek családfáját! (Forrásként használhatjuk pl. a népszerű Finnugor kalauz című kiadványt.) A népek neveit szedjük kurzívan, a magyart emeljük ki félkövérrel is! Megoldásunkat vessük össze a példamegoldással!
2. Készítsünk rövid jegyzéket arról, hogy milyen HTML-elemeket ismerünk, és milyen paraméterek et adhatunk meg nekik! Megoldásunkat vessük össze a példamegoldással, melyben csak néhány elemet mutatunk be!