Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Wykazy

Email Drukuj PDF

Tematy: Wykaz nieuporządkowany | Wykaz uporządkowany | Lista definicyjna

logo HTML 5O rozdziale (aktualizacja 23.02.2013): 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.

Uwaga: przeglądarki nie obsługują jeszcze zredefiniowanego w HTML 5 polecenia menu i stowarzyszonego z nim polecenia command, które służą w aplikacjach webowych do tworzenia list poleceń. Nie uwzględniamy ich zatem na razie.

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. W HTML 5 atrybut ten nie jest już wspierany. 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 (lista) 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 stosowało 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 stosowano style CSS. W HTML 5 jednak atrybut ten został przywrócony.

Przykłady:

<ol type="1">

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

<ol type="A">

  1. Pierwszy punkt
  2. Drugi punkt
  3. Trzeci punkt

<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

Atrybut value=x w definicji punktu wykazu pozwala rozpocząć numerowanie listy od dowolnie podanej liczby x, a nie od 1, A, a czy I. Uznany za przestarzały w XHTML 1.1, jest jednak obecny w HTML 5. Można też wykorzystywać liczniki - dokładniejszy opis techniki użycia liczników znajdziesz w rozdziale o zerowaniu liczników

<ol>
<li>Kawa</li>
<li>Herbata</li>
<li value="5">Mleko</li>
<li>Sok</li>
</ol>

  1. Kawa
  2. Herbata
  3. Mleko
  4. Sok

Atrybut start pozwala rozpocząć cały wykaz od podanej wartości, np. start=3 - działa to niezależnie od typu wykazu, np. gdy typ nakazuje użycie wielkich liter, numer wskazuje automatycznie literę.

<ol type="A" start="3">
<li>Kawa</li>
<li>Herbata</li>
<li>Mleko</li>
<li>Sok</li>
</ol>

  1. Kawa
  2. Herbata
  3. Mleko
  4. Sok

Atrybut reversed wprowadza odwrotny porządek numerowania.

<ol type="1" reversed="reversed">
<li>Kawa</li>
<li>Herbata</li>
<li>Mleko</li>
<li>Sok</li>
</ol>

  1. Kawa
  2. Herbata
  3. Mleko
  4. Sok

 

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

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

Informacje o DL

Informacje o DT

Informacje o DD

gość specjalny Helion.pl
 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15166531