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.

Przykład:

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:

Typ stylu wykazu circle:

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

Przykład:

Typ stylu wykazu square:

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

Przykład:

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.

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:

Przykład użycia:

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">

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

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

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:

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.

Przykład:

Listy definicyjne można również mieszać z listami numerowanymi i nienumerowanymi.

Informacje o DL

Informacje o DT

Informacje o DD