Weblap listák és felsorolások készítése.

Számozás nélküli lista
Számozott lista
Meghatározás lista
Vegyes lista

Lista stílusok
Lista stílusmegjelenések bemutatása

Navigációs listák

 

1.Lista: Számozás nélküli

Számozás nélküli lista, három variánsa látható.
Számozás nélküli listák: Az <ul> kezdő és az </ul> záró cimke között helyezkednek el.

Első, számozás nélküli: Egyszerű felsorolás.
Baloldalon látható, hogyan kell a html - lapon megírni.
A jobboldalon látható, hogyan fog a valóságban megjelenni.

<ul>
<li> Folyadék. </li>
<li> Fém. </li>
<li> Fa.</li>
<li> Műanyag.</li>
</ul>
  • Folyadék.
  • Fém.
  • Fa.
  • Műanyag.

 

 

Második, számozás nélküli: A kiválasztott témát, további témakörre bontjuk.
Baloldalon látható, hogyan kell a html - lapon megírni.
A jobboldalon látható, hogyan fog a valóságban megjelenni.

<ul>
<li> Folyadék </li>
<li>Fémáru
<ul>
<li>Vas</li>
<li>Réz</li>
<li> Alumínium</li> </ul>
</li>
<li> Fa</li>
<li>Műanyag</li>
</ul>
  • Folyadék
  • Fémáru
    • Vas
    • Réz
    • Alumínium
  • Fa
  • Műanyag

 

 

 

Harmadik, számozás nélküli: A második témakört, további részletekre bontjuk.
Baloldalon látható, hogyan kell a html - lapon megírni.
A jobboldalon látható, hogyan fog a valóságban megjelenni.

<ul>
<li> Folyadék. </li>
<li> Fémáru
<ul>
<li>Vas
<ul>
<li>Betonvas 24 méter. </li>
<li>Szögvas 30x30. 6 méter</li>
<li>Laposvas 5x40. 6 méter</li>
</ul>
</li>
<li>Réz </li>
<li>Alumínium </li>
</ul>
</li>
<li>Fa </li>
<li>Műanyag</li>
</ul>
  • Folyadék.
  • Fémáru
    • Vas
      • Betonvas 24 méter.
      • Szögvas 30x30. 6 méter
      • Laposvas 5x40. 6 méter
    • Réz
    • Alumínium
  • Fa
  • Műanyag

 

 

 

2.Lista: Számozott

Számozott lista, három variánsa látható.
Számozott listák megegyeznek a szám nélküli listával, azzal a külömbséggel, hogy a kezdő <ul> címke helyett, <ol> kezdőcimke kell és a záró </ul> cimke helyett </ol> zárócimkét használunk.

A számozott listák alapértelmezés szerint az egyes ( 1 ) számmal kezdődnek.
Megváltoztathatjuk, a start jellemzővel, melyet a kezdő <ol> címkében kell megadni.
Példa:
<ol start="3"> ekkor a sorszámozás hárommal kezdődik,
vagy <ol start="5"> ekkor öttel kezdődik a sorszámozás.

Első, számozott: Egyszerű felsorolás.

Baloldalon látható, hogyan kell a html - lapon megírni.
A jobboldalon látható, hogyan fog a valóságban megjelenni.

<ol>
<li> Fém </li>
<li> Fa</li>
<li> Műanyag</li>
</ol>
  1. Fém
  2. Fa
  3. Műanyag

 

 

Második, számozott: A kiválasztott témát, további témakörre bontjuk.

Baloldalon látható, hogyan kell a html - lapon megírni.
A jobboldalon látható, hogyan fog a valóságban megjelenni.

<ol>
<li> Fémáru </li>
<ol>
<li>Vas </li>
<li>Réz</li>
<li>Alumínium</li> </ol>
<li>Fa</li>
<li> Műanyag </li>
</ol>
  1. Fémáru
    1. Vas
    2. Réz
    3. Alumínium
  2. Fa
  3. Műanyag

 

 

Harmadik, számozott: A második témakört, további részletekre bontjuk.

Baloldalon látható, hogyan kell a html - lapon megírni.
A jobboldalon látható, hogyan fog a valóságban megjelenni.

<ol>
<li> Fémáru
<ol>
<li> Laposvas 5x40.</li>
<li>Zártszelvény
<ol>
<li> 40x40. </li>
<li> 40x60. </li>
</ol>
</li>
<li>Szögvas 30x30. </li>
</ol>
</li>
<li> Fa</li >
<li> Műanyag </li>
</ol>
  1. Fémáru
    1. Laposvas 5x40.
    2. Zártszelvény
      1. 40x40.
      2. 40x60.
    3. Szögvas 30x30.
  2. Fa
  3. Műanyag

 

 

 

 

3.Meghatározáslista.

Meghatározáslistán:
- szavakat
- kifejezéseket
- meghatározásokat sorolunk fel.

Fent a kezdő <dl> lent a záró </dl> cimke határolja.
Meghatározandó szó vagy kifejezés (bekezdés címe ) a <dt> cimkék között helyezkedik el.
Leírás vagy ismertető a <dd> cimkék között helyezkedik el.

Fent látható, hogyan kell a html - lapon megírni.
Alatta látható, hogyan fog a valóságban megjelenni.

<dl>
<dt> Számozás nélküli lista </dt>
<dd> A számozás nélküli listák: felsorolásjelekkel jelölik a lista egyes elemeit. </dd>

<dt> Számozott listák </dt>
<dd>Számokkal, vagy betűkkel jelölik a felsorolásokat.
Azokat, betűrendbe vagy időrendi sorrendbe állitják. </dd>

<dt> Meghatározáslisták. </dt>
<dd>A listán szavakat, kifejezéseket, és meghatározásokat sorolunk fel.
A "dd" cimkék közé írt szöveget, a böngésző programok beljebb húzzák, azaz nem a sor elején hanem beljebb kezdődik a szöveg. </dd>
</dl>
Számozás nélküli lista
A számozás nélküli listák: felsorolásjelekkel jelölik a lista egyes elemeit.
Számozott listák
Számokkal, vagy betűkkel jelölik a felsorolásokat.
Azokat, betűrendbe vagy időrendi sorrendbe állitják.
Meghatározáslisták.
A listán szavakat, kifejezéseket, és meghatározásokat sorolunk fel.
A "dd" cimkék közé írt szöveget, a böngésző programok beljebb húzzák, azaz nem a sor elején hanem beljebb kezdődik a szöveg.

Vissza a lap elejére

4. Lista:Vegyes

A vegyes lista megírása megegyezik a számozott lista megírásával.
A listához, <ol> kezdő és </ol> zárócimkét használunk.

A számozott listák, alapértelmezés szerint az egyes ( 1 ) számmal kezdődnek.
Ezt megváltoztathatjuk a start jellemzővel, melyet a kezdő ol címkében kell megadni.

Például:
A sorszámozás hárommal kezdődik.
<ol start="3">

A sorszámozás öttel kezdődik.
<ol start="5">

A vegyes listában: Betűket, arab számokat és római számokat is használunk.

A felsoroláshoz szükséges stílust, most nem külön css-lapon írjuk meg, hanem közvetlen az XHTML-lap fejlécében a style címkében.
Példa:
<style type="text/css">
ol {list-style: upper-roman; }
ol ol {list-style: upper-alpha;}
ol ol ol {list-style: decimal;}
</style>

- Egyszer írjuk le az ol utasítást, akkor ez minden olyan sorra vonatkozik mely a sor elején kezdődik.
- Kétszer írjuk ol ol azon sorokra vonatkozik, melyek egy egységgel beljebb kezdődnek.
- Háromszor írjuk le, ol ol ol azon sorokra vonatkozik, melyek két egységgel beljebb kezdődnek

Fent látható, hogyan kell a html - lapon megírni.
Alatta látható, hogyan fog a valóságban megjelenni.

<p>Teendők, indulás előtt.</p>
<ol>
<li> Alapfeltételek
<ol>
<li>Elsősegély és izzókészlet</li>
<li>Vízszintek ellenőrzése
<ol>
<li>Hűtő folyadék</li>
<li> Ablakmosó folyadék </li>
</ol>
</li>
<li>Olajszint ellenőrzése </li>
</ol>
</li>
<li>Tetőcsomagok rögzítésének ellenőrzése</li>
<li>Gyerekülés rögzítésének ellenőrzése </li>
</ol>

<p>Teendők induláskor.</p>
<ol start="4">
<li> Biztonsági övek bekapcsolása<</li>
<li>Motor indítása, műszerek ellenőrzése</li>
</ol>

Teendők, indulás előtt.

  1. Alapfeltételek
    1. Elsősegély és izzókészlet
    2. Vízszintek ellenőrzése
      1. Hűtő folyadék
      2. Ablakmosó folyadék
    3. Olajszint ellenőrzése
  2. Tetőcsomagok rögzítésének ellenőrzése
  3. Gyerekülés rögzítésének ellenőrzése

Teendők induláskor.

  1. Biztonsági övek bekapcsolása
  2. Motor indítása, műszerek ellenőrzése


Vissza a lap elejére







Szintenkénti listákhoz tartozó stílusok megírása:
  • ul{list-style: .........; } minden olyan sorra vonatkozik mely a sor elején kezdődik.
  • ul ul{list-style: .........; } azon sorokra vonatkozik, melyek egy egységgel beljebb kezdődnek.
  • ul ul ul{list-style: .........; } azon sorokra vonatkozik, melyek két egységgel beljebb kezdődnek
  • <ol start="3"> A kezdő címkében határozzuk meg, hogy mekkora sorszámmal kezdődik (Alapesetben "1")
  • ol{list-style: .........; } minden olyan sorra vonatkozik mely a sor elején kezdődik.
  • ol ol{list-style: .........; } azon sorokra vonatkozik, melyek egy egységgel beljebb kezdődnek.
  • ol ol ol{list-style: .........; } azon sorokra vonatkozik, melyek két egységgel beljebb kezdődnek
  • Minden listaelemhez rendelhetünk id egyedi és class osztályazonosítót is, ha szükségesnek látjuk.
  • Ha több listát is készítünk, eltérő stílus megjelenéssel, helyezzük el őket külön-külön div szakaszba. Majd, rendeljük őket, a div szakasz azonosítójához.
ol; ul; Stílusok:
A (list-style-type) röviditve (list-style) utasításokhoz a következő css tulajdonságokat használhatjuk.
  • Alapértelmezett: {list-style: decimal;}
  • Nagybetűk: {list-style: upper-alpha;}
  • Kisbetűk: {list-style: lower-alpha;}
  • Római számok nagybetűkkel: {list-style: upper-roman;}
  • Római számok kisbetűkkel: {list-style: lower-roman;}
  • Nincs előjel sorszám: {list-style: none;}
  • Arab sorszám "0"-val kezdődik: {list-style: decimal-leading-zero;}
  • Sorszámozás visszafelé:
    • <ol reversed="reversed">
ul;Számozás nélküli listához használható felsorolásjelek:
  • Teli kör: ul{list-style: disc;}
    • Üres kör: ul ul{list-style: circle;}
      • Négyzet: ul ul ul{list-style: square;}
  • Nincs előjel: ul{list-style: none;}
  • Képet adunk meg: ul{list-style: url(képnév.gif);}
  • Minden listánál ez jelenjen meg, akkor a head szakaszban helyezzük el:
    <style type="/text/css"> ul{list-style: url(képnév.gif);} </style>
Felsorolásijel pozíció, azaz felsorolásijel kilógás:
  • Alapértelemezett, kilógó előjel: {list-style-position: outside;}
  • Kilógás nélkülire, egy vonalba a listaelem tartalmával: {list-style-position: inside;}
  • Meghatározhatjuk így is:
    Sorszámozott és behúzott: {list-style: decimal inside;}
  • A böngésző programok listastílus alapbeállítása outside; Egyébként, akkor van hatással, ha előzőleg meghatároztuk az inside stílust, és ezek közül valamelyik listasort, ki akarjuk emelni a többi közül.
  • Ha a listasor szövege egy sornál hosszabb, és az első sort, balra kijjebb akarjuk húzni a többitől akkor: listasor_azonosító{text-indent: -20px;}
Ha, rövidítéseket alkalmazunk a lista stílusaihoz, tulajdonság értékeinek sorrendje a következő:
{list-style-type: ... ; list-style-image: ... ; list-style-position: ... ; }

Meghatározás lista:
  • dt { font-weight: bold; margin-top: 1em;}
  • dd { font-size: small;}
  • További szövegformázásra jellemző tulajdonságot is meghatározhatunk.
lista display tulajdonsága hivatkozásoknál:
  • Megjelenítés függőlegesen:{display: block;}
    #azonosító li{list-style: none; margin-top:0.2em; }
    #azonosító a{ display: block; text-decoration: none; width: 200px; background-color: blue; color: white; font-weight: bold; padding: 0.5em; border: 1px solid black; }
    #azonosító a:hover{color:#FF8C00; background-color:#808080;}
  • Megjelenítés egy sorba:{display: inline;}
    #azonosító li{display: inline; list-style: none; margin-right: 15px;}
    #azonosító a{text-decoration: none; background-color: blue; color: white; font-weight: bold; padding: 0.5em; border: 1px solid black;}
    #azonosító a:hover{color:#FF8C00; background-color:#808080;}