Udostępnij za pośrednictwem

  • Artykuł

          

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

Autor: Norbert Blandzi

Opublikowano: 2011-10-07

Częstym problemem, podczas tworzenia strony internetowej, jest tworzenie listy, w której kolejność nie ma znaczenia, ale ważne jest odróżnienie elementów. Do tego celu w HTML stosuje się listy wypunktowane. Tworzymy je, wykorzystując następujący schemat:

<ul>
    <li>element 1</li>
    ...
</ul>

gdzie:

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

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

  • plain – kolejne elementy listy nie są oznaczane żadnymi znakami wyróżniającymi,
  • src="obrazek.png" – w miejsce znaku, oznaczającego nowy element listy, wstawiana jest grafika,
  • type="symbol" – określa sposób wyróżnienia elementów listy i może przyjmować następujące wartości:

square – kolejne elementy listy oznaczone są kwadratami,

disc – kolejne elementy listy oznaczone są kołem,

circle – kolejne elementy listy oznaczone są okręgiem.

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ę wypunktowaną w CSS.

Przykład

<html>
    <head>
        <title>Lista wypunktowana</title>
    </head>
    <body>
        <ul type="square">
            <li>Polska</li>
            <li>Hiszpania</li>
            <li>Francja</li>
            <li>Portugalia</li>
        </ul> 
    </body>
</html>

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

Rys. 1. Lista wypunktowana.

Sprawdź

Praktyczne przykłady Zobacz, jak praktycznie formatować listy w samouczku: