Udostępnij za pośrednictwem

  • Artykuł

          

Encyklopedia: Jak tworzyć listę numerowaną w HTML - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-10-07

Autor: Norbert Blandzi

Częstym problemem, podczas tworzenia strony internetowej, jest potrzeba utworzenia listy, w której kolejne elementy będą miały przyporządkowaną numerację. Przykład przedstawiony został na Rys. 1.

Rys. 1. Lista numerowana.

Dzięki językowi HTML sprawa staje się prosta. Listę numerowaną tworzymy, wykorzystując konstrukcję:

<ol>
    <li>element 1</li>
    ...
</ol>

gdzie:

  • <ol> – tworzy nową listę numerowaną,
  • <li> – tworzy nowy element na liście.

Do określenia wyglądu listy możemy dla znacznika ol określić następujące właściwości:

compact – zmniejsza odstęp pomiędzy wierszami,  

start="n" – parametr "n" określa pierwszy element, zastosowany podczas numerowania. Wartość "n" zawsze podajemy dziesiętnie, niezależnie od ustawienia kolejnego znacznika. Domyślną wartością jest n=1,

type="symbol" – parametr "symbol" określa sposób numerowania listy i może przyjmować następujące wartości:

  • A – kolejne elementy listy oznaczone są dużymi literami alfabetu,
  • a – kolejne elementy listy oznaczone są małymi literami alfabetu,
  • I – kolejne elementy listy oznaczone są dużymi liczbami rzymskimi,
  • i – kolejne elementy listy oznaczone są małymi liczbami rzymskimi,
  • 1 – kolejne elementy listy oznaczone liczbami arabskimi (domyślnie).

Przedstawiony sposób wykorzystania tych właściwości nie zapewnia elastyczności. Aby w łatwy sposób zmieniać listy na stronach internetowych, należy wykorzystać Kaskadowe Arkusze Stylów. Zobacz część encyklopedii Jak formatować listę numerowaną w CSS.

Przykład

<html>
    <head>
        <title> Jak tworzyć listę numerowaną w HTML</title>
    </head>
    <body>
        <ol type="A">
            <li>Aurelia</li>
            <li>Beata</li>
            <li>Kasia</li>
            <li>Magda</li>
        </ol> 
    </body>
</html>

W przeglądarce przykład wygląda tak, jak na Rys. 2.

Rys. 2. Przykład listy numerowanej w przeglądarce.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie formatować odnośniki w samouczku:

Listy w HTML