Wykazy

O rozdziale: W rozdziale opisujemy wykazy, zwane też częściej listami, które służą do sporządzania usystematyzowanych zestawień informacji, prezentowanych w punktach - nieuporządkowanych (punktowanych, nienumerowanych) lub uporządkowanych (numerowanych). Jest to powszechnie stosowany na stronach element konstrukcyjny. Wykazy należą do elementów blokowych.

Wykaz nieuporządkowany

Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego, w którym kolejne punkty są wyróżniane punktorami. Polecenie <ul> </ul> tworzy ramy wykazu, natomiast polecenia <li> </li> wprowadzają konkretne punkty. Pamiętaj zawsze o stosowaniu znaczników domykających punkty listy - we wcześniejszych etapach rozwoju WWW niedomykanie tych znaczników było powszechną, szczególnie często spotykaną manierą, która jest jednak błędem we współcześnie stosowanych standardach webmasterskich. Wyjątkiem od zamykania punktów wykazu w tym samym wierszu jest wprowadzanie zagnieżdżonych wykazów niższego szczebla - zamknięcie punktu następuje po zagnieżdzonym wykazie.

<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>

Przykład:

• Pierwszy punkt

• Drugi punkt

• Trzeci punkt

HTML 4.01 Strict zrezygnował ze stosowania atrybutu type, który wprowadzał graficzne punktory: atrybut type=disc wprowadzał kółeczko, type=circle wprowadzał puste kółeczko, natomiast type=square wprowadzał kwadracik. Obecnie stosowane są style CSS, dające znacznie większe mozliwości formatowania.

Typ stylu wykazu disc:

<ul style="list-style-type: disc">

Przykład:

• Pierwszy punkt

• Drugi punkt

• Trzeci punkt

Typ stylu wykazu circle:

<ul style="list-style-type: circle">

Przykład:

• Pierwszy punkt

• Drugi punkt

• Trzeci punkt

Typ stylu wykazu square:

<ul style="list-style-type: square">

Przykład:

• Pierwszy punkt

• Drugi punkt

• Trzeci punkt

Obszerne informacje o formatowaniu punktorów za pomocą stylów CSS znajdziesz w rozdziale o typach stylów wykazów.

Zagnieżdżanie wykazów nieuporządkowanych

Możemy zagnieżdżać kilka poziomów listy nieuporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem - dla przejrzystości pokazujermy to z wcięciami, choć w kodzie źródłowym nie ma to akurat praktycznego znaczenia.

<ul>(otwarcie listy na pierwszym poziomie)

<li>Punkt 1</li>

<li>Punkt 2 (bez znacznika zamykającego)

<ul>(otwarcie listy na drugim poziomie)

<li>Podpunkt 2.1</li>

<li>Podpunkt 2.2 (bez znacznika zamykającego)

<ul>(otwarcie listy na trzecim poziomie)

<li>Podpunkt 2.2.1</li>

<li>Podpunkt 2.2.2</li>

</ul>(zamknięcie listy na trzecim poziomie)

</li> (zamknięcie podpunktu 2.2)

</ul>(zamknięcie listy na drugim poziomie)

</li> (zamknięcie Punktu 2)

<li>Punkt 3 - kontynuacja punktów pierwszego poziomu</li>

<li>Punkt 4 - kontynuacja punktów pierwszego poziomu</li>

</ul>(zamknięcie całej listy)

I przykład działania - zauważ, że przeglądarka sama dodała punktory, niekiedy odmienne (Internet Explorer, Firefox) dla poszczególnych poziomów. Naturalnie, sam możesz je zdefiniować za pomocą stylów.

• Punkt 1

• Punkt 2

  • Podpunkt 2.1

  • Podpunkt 2.2

    • Podpunkt 2.2.1

    • Podpunkt 2.2.2

• Punkt 3

• Punkt 4

Uwaga: jak już wspomnieliśmy wyżej, w trakcie zagnieżdżania wykazów niższego poziomu zamknięcie punktu wykazu nadrzędnego szczebla następuje ZA zagnieżdżonym wykazem.

Informacje o UL

Informacje o LI

Wykaz uporządkowany

Wykaz uporządkowany służy do sporządzenia wykazu numerowanego, w którym istotna jest dla nas kolejność elementów. Ramy wykazu tworzy polecenie <ol> </ol>, natomiast punkty są wprowadzane, podobnie jak w wykazach nieuporządkowanych, za pomocą polecenia <li> </li>.

Przykładowy kod:

<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ol>

Przykład użycia:

1. Pierwszy punkt

2. Drugi punkt

3. Trzeci punkt

W HTML 4.01 nie stosuje się już atrybutu type, który wprowadzał numerowanie: wartość type=A wprowadzała numerowanie według wielkich liter łacińskich, type=a numerowanie według małych liter łacińskich, type=I numerowanie według wielkich liczebników rzymskich, type=i numerowanie według małych liczebników rzymskich, wreszcie type=1 numerowanie według liczebników arabskich. W ich miejsce stosowane są style CSS.

Przykłady:

<ol style="list-style-type: decimal">

1. Pierwszy punkt

2. Drugi punkt

3. Trzeci punkt

<ol style="list-style-type: lower-roman">

1. Pierwszy punkt

2. Drugi punkt

3. Trzeci punkt

<ol style="list-style-type: upper-alpha">

1. Pierwszy punkt

2. Drugi punkt

3. Trzeci punkt

Stosowany dawniej atrybut start=x w definicji wykazu lub value=x w definicji punktu wykazu pozwalał rozpocząć numerowanie listy od dowolnie podanej liczby x, a nie od 1, A, a czy I. Obecnie jest on uznany za przestarzały, natomiast CSS nie wprowadził jeszcze dedykowanego polecenia zastępującego to narzędzie. Można za to na razie wykorzystywać liczniki, które są interpretowane przez Firefoksa i Operę. Dokładniejszy opis techniki użycia liczników znajdziesz w rozdziale o zerowaniu liczników.

Zagnieżdżanie wykazów uporządkowanych

Możemy zagnieżdżać kilka poziomów listy uporządkowanej. Każdy kolejny, niższy poziom powinien zawierać własną definicję listy i powinien się kończyć jej zamknięciem

<ol>(otwarcie listy na pierwszym poziomie)

<li>Punkt 1</li>

<li>Punkt 2 (bez znacznika zamykającego)

<ol>(otwarcie listy na drugim poziomie)

<li>Podpunkt 2.1</li>

<li>Podpunkt 2.2</li>

</ol>(zamknięcie listy na drugim poziomie)

</li> (zamknięcie Punktu 2)

<li>Punkt 3 (bez znacznika zamykającego)

<ol>(otwarcie listy na drugim poziomie)

<li>Podpunkt 3.1</li>

<li>Podpunkt 3.2</li>

</ol>(zamknięcie listy na drugim poziomie)

</li>(zamknięcie Punktu 3)

</ol>(zamknięcie całej listy)

Przykład:

1. Przeglądarki

   1. Netscape Navigator

   2. Microsoft Internet Explorer

   3. Opera

   4. Firefox

   5. Konqueror

   6. Safari

2. Edytory HTML

   1. Pajączek

   2. CoreEditor

   3. kED

   4. edHTML

   5. HateML

   6. Website Pro

   7. Dreamweaver

   8. Expression Web Designer

   9. Nvu

Naturalnie możemy swobodnie manipulować typami stylu wykazu, np. na pierwszym poziomie dać cyfry rzymskie, a na drugim arabskie, na pierwszym cyfry arabskie, a na drugim cyfry arabskie z wiodącym zerem, itd.

Informacje o OL

Lista definicyjna

Lista definicyjna służy do tworzenia definicji terminów.

<dl>początek listy definicyjnej
<dt>pierwszy termin</dt>
<dd>wyjaśnienie pierwszego terminu</dd>
<dt>drugi termin</dt>
<dd>wyjaśnienie drugiego terminu</dd>
</dl>koniec listy definicyjnej

Przykład:

Wyjaśnienie terminów

Volapük

język międzynarodowy utworzony w roku 1868 przez niemieckiego duchownego, Martina Schleyera

Esperanto

język międzynarodowy zapoczątkowany w 1887 roku przez polskiego okulistę, Ludwika Zamenhofa

Interlingua

język międzynarodowy zaprojektowany w latach 1924-1950 przez międzynarodową grupę lingwistów