HTML5 – listy

 w strony www  Tagi HTML5 / strony www przez

Listy pomagają w usystematyzowaniu treści na stronie i można wypunktować najważniejsze elementy.

Listy służą również do tworzenia menu.

W HTML mamy do wyboru listy nieuporządkowane, listy uporządkowane oraz listy definicji.

Większość znaczników HTML, jak również nazwy funkcji i metod w językach programowania, tworzy się od nazw angielskich odpowiednich tłumaczeń.

Listy nieuporządkowane

Jeżeli wiemy, że lista nieuporządkowana po angielsku to unordered list, możemy teraz wziąć pierwsze litery z przetłumaczonego zwrotu i otrzymujemy znacznik <ul>. Każdy podpunkt naszej listy to <li>

<ul>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ul>

Otrzymamy:

  • 1 element
  • 2 element
  • 3 element
  • 4 element

Listy uporządkowane

Jeżeli wiemy, że lista uporządkowana po angielsku to ordered list, możemy teraz wziąć pierwsze litery z przetłumaczonego zwrotu i otrzymujemy znacznik <ol>. Każdy podpunkt naszej listy to <li>

<ol>
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>
typy list

Listy mogą zostać zdefiniowane wg typów:

  • cyfry arabskie – 1 lub brak typu
  • wielkie litery – A
  • małe litery – a
  • cyfry rzymskie wielkie – I
  • cyfry rzymskie małe – i

Jeżeli zastosujemy poniższy typ:

<ol type="a">
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>

Otrzymamy następującą listę:

  1. 1 element
  2. 2 element
  3. 3 element
  4. 4 element
zmiana numeracji

Jeżeli musimy rozpocząć numeracje od konkretnej liczby, możemy to zrobić za pomocą atrybutu start:

<ol type="a" start="3">
    <li>1 element</li>
    <li>2 element</li>
    <li>3 element</li>
    <li>4 element</li>
</ol>

Otrzymamy:

  1. 1 element
  2. 2 element
  3. 3 element
  4. 4 element

Zagnieżdżanie list

Listy możemy dowolnie zagnieżdżać w sobie. Przykład:

<ol type="I">
    <li>1 element</li>
    <ol type="1" start="5">
        <li>1 element</li>
        <li>2 element</li>
        <li>3 element</li>
    </ol>
    <li>2 element</li>
    <li>3 element</li>
    <li>
        <ul>
            <li>1 element</li>
            <li>2 element</li>
            <li>3 element</li>
            <li>4 element</li>
        </ul>
    </li>
</ol>

Otrzymamy:

  1. 1 element
    1. 1 element
    2. 2 element
    3. 3 element
  2. 2 element
  3. 3 element
    • 1 element
    • 2 element
    • 3 element
    • 4 element

Listy definicji

Lista definicji <dl> zawiera w sobie 2 znaczniki <dt>, czyli tytuł definicji oraz <dd> – opis definicji.

<dl>
<dt>Opis HTML5</dt>
<dd>Język wykorzystywany do tworzenia i prezentowania stron internetowych www. </dd> 

<dt>Nowości</dt>
<dd>HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.</dd>
</dl>

Otrzymamy:

Opis HTML5
Język wykorzystywany do tworzenia i prezentowania stron internetowych www.
Nowości
HTML5 poza dodaniem nowych elementów, usprawniających tworzenie serwisów i aplikacji internetowych, doprecyzowuje wiele niejasności w specyfikacji HTML 4, dotyczących przede wszystkim sposobu obsługi błędów.

 

Ćwiczenie:

W pliku z ćwiczenia poprzedniego, umieść wszystkie rodzaje poznanych list, zastosuj odpowiednie typy i skorzystaj z właściwości „start”.