A felsorolások / listák

 

 

Ebben a fejezetben az listákkal felsorolásokkal, mint egy további szövegformázási móddal ismerkedünk meg.
Témák:


Gyakran van szükség rá, hogy valamit felsoroljunk, listázzunk weblapunkon. Ezeknél a lap megfelelő külalakja és áttekinthetősége miatt el kell érni, hogy a felsorolás tételei elvágólag kerüljenek egymás alá. Már megismertük a táblázatokat, amiket erre a célra is lehet használni. Van azonban a HTML-nek egy erre kitalált elemcsoportja, a listaelemek.
Ilyen felsorolásra példák ezeknek a lapoknak a tetején található tartalomjegyzék.

fel...


A listák fajtái és használata

Weblapjainkon elhelyezhetünk számozott, számozatlan, menü, könyvtár... listákat. Itt csak a két leggyakrabban használt listáról, a számozott és a számozatlan listákról lesz szó.
Íme egy számozott (rendezett) és egy számozatlan (rendezetlen) lista:

  1. első listaelem
  2. második listaelem
  3. harmadik listaelem
  • első listaelem
  • második listaelem
  • harmadik listaelem

Látjuk, a listáknál a lista tételsorai egymás alá kerülnek és egy listajel van a sor elején.
A listákat egymásba is illeszthetjük, így többszintű listákat kapunk:

  1. első szint
    • második szint
    • második szint
      • harmadik szint
      • harmadik szint
    • második szint
  2. első szint
  3. első szint
  4. első szint

A felsorolások forráskódja egy nyitó és egy zárótagból áll, közöttük találhatók a listaelemek. Ez az első listánk kódja:

<UL>
     <LI> első listaelem </LI>
     <LI> második listaelem </LI>
     <LI> harmadik listaelem </LI>
</UL>

fel...


A számozott listák

A számozott listák esetén a sorkezdő listajel a sor listában elfoglalt helyére utal.
A lista elején és végén található <OL> és </OL> között helyezzük el a tételsorokat az <LI> és </LI> tagok között (az LI esetén a zárótag elmaradhat.)
Meghatározhatjuk a listajelek kinézetét a type= tulajdonsággal. Értéke lehet:

    type"1" (alapért.)
  1. sorszám listajel
  2. sorszám listajel
  3. sorszám listajel
    type="a"
  1. kisbetű listajel
  2. kisbetű listajel
  3. kisbetű listajel
    type="A"
  1. nagybetű listajel
  2. nagybetű listajel
  3. nagybetű listajel
    type"i"
  1. római kis sorszám
  2. római kis sorszám
  3. római kis sorszám
  4. római kis sorszám
  5. római kis sorszám
    type="I"
  1. római nagy sorszám
  2. római nagy sorszám
  3. római nagy sorszám
  4. római nagy sorszám
  5. római nagy sorszám

A start attribútummal a kezdő sorszámot állíthatjuk be. (Ezt az opciót a W3C nem javasolja, nem minden böngészőben működik.)
<OL start="15">

<LI> első listaelem </LI>
<LI> második listaelem </LI>
<LI> harmadik listaelem </LI>

</OL>
  1. első listaelem
  2. második listaelem
  3. harmadik listaelem

fel...


A számozatlan listák

A számozatlan listák azonos listajelet kapnak. A készítése az előző, számozott listához hasonló. A listajeleket az alábbiak szerint határozhatjuk meg:

    type="disc" (alapért.)
  • kerek listajelekkel
  • kerek listajelekkel
    type="circle"
  • gyűrű listajelekkel
  • gyűrű listajelekkel
    type="square"
  • kocka listajelekkel
  • kocka listajelekkel

fel...


 
Itt gyakorolhatod a listák készítését. Az alábbi kódban változtass kedved szerint, aztán nézd meg, amit alkottál:

   

 



fel...
előző: a táblázatokról...
következő: az űrlapok...
tartalom...


ThomasWebMűhely
(c)Katona Tibor
2001-2002