Weblapkészítés HTML alapokon 2. rész - Listák

3. oldal / 3

5. fejezet: Listák

Sokszor van szükségünk ilyen-olyan felsorolásra, ilyenkor jól jöhet a felsorolás.

Alapvetően két típusú lista van: a számozott lista (= Ordered List = OL), illetve a nem számozott lista. (= Unordered List = UL) A listán belül minden egyes elem egy-egy listatag. (= List Item = LI) Ennek a tagnek nincsen zárórésze a HTML4-ben. Nézzük a következő egyszerű példát! (htmlpelda16.html)

<HTML>

<ul>

<li>elsö elem

<li>második elem

<li>harmadik elem

<li>negyedik elem

<li>ötödik elem

</ul>

</HTML>

  

Látható a bal oldali kód megvalósulása a jobb oldalon. Ha az <UL>-t lecseréljük <OL>-re, akkor sorszámozott listát kapunk. Érdemes kipróbálni!

8. feladat: Az előző feladatban a linkeket cserélje ki nem sorszámozott listára!

 

Rendezett lista esetén az <LI> egyik paramétere egyben megszabja a lista típusát is.

Type = 1 - a listaelemek számok.

Type = a - a listaelemek kisbetűk.

Type = A - a listaelemek nagybetűk

Type = i - a listaelemek kicsi római számok.

Type = I - a listaelemek nagy római számok.

Ugyanezen paraméterek megjelenhetnek az <OL> elemnél is, ráadásul lehet egy START=n elem is, ami a kezdőértéket adja meg! A HTML5-ös szabványnál ráadásul engedélyezett egy „reversed” paraméter is, ami a fordított sorszámozást teszi lehetővé. Persze lehet kicsit cifrázni a nem sorszámozott lista egyes elemeit is, de ehhez már némi CSS-ismeret szükséges. (Pár fejezet múlva már sorra is kerül!)

 

Definíciós listát is készíthetünk, ahol egyszerűbb fogalmakat lehet megmagyarázni. (Definition List = DL). Az egyes elemeket és fogalmakat <DT>-vel jelöljük, (Definition Term) míg magyarázatukat <DD>-vel. (Definition Description) Íme egy egyszerű példa: (htmlpelda17.html)

<HTML>

<dl>

<dt>1. fogalom

<dd>az 1. fogalom magyarázata

<dt>2. fogalom

<dd>a 2. fogalom magyarázata

</dl>

</HTML>

9. feladat: Készítsen egy definíciós listát például 3-4 matematikai definícióról. (Pitagorasz-tétel, Thalész-tétel, prímszámok fogalma, stb.)

10. feladat: Elevenítse fel saját ismerőseinek névsorát, melyben legalább 15 ismerősét felsorolja egy nem sorszámozott listában!

11. feladat: Csináljon egy sorszámozott listát a budapesti hidakról (északról délre), majd minden egyes hídnál nem sorszámozott módon írja ki egy listában azt is, hogy melyik kerületeket köti össze!

 

Felhasznált szakirodalom:

https://www.w3schools.com/tags/default.asp

Folytatása következik!