Lekcja HTML 2 – Listy

Witam w trzecim kursie przygotowującym do Kwalifikacji E.14. Już znamy podstawowe elementy HTML, teraz musimy nauczyć się je prezentować na naszej stronie. Do tego celu posłużymy się tabelą i listami.

Zapraszam.

Listy

Wyróżniamy dwa rodzaje list:

  • numerowana
  • punktowana

 

Lista numerowana

Pierwszym typem jest lista numerowana. Definiuję się ją znacznikiem <ol> wewnątrz którego umieszcza się poszczególne pozycje listy otoczone znacznikami <li>. Ponadto lista numerowana posiada trzy atrybuty stylów.

Cyframi arabskimi  (domyślnie).

<ol type="1">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ol>
Rezultat:

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

Cyframi rzymskimi  (type=”I”).

<ol type="I">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ol>
Rezultat:

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

Literami alfabetu  (type=”A”).

<ol type="A">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ol>
Rezultat:

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


 

 

 

Lista punktowana

Jest to drugi rodzaj listy który definiujemy znacznikiem <ul>. Podobnie jak w przypadku listy numerowanej,  pozycje listy są otoczone znacznikami <li>.

Lista punktowana także posiada atrybuty stylów.

 Wypełnione kółko  (type=”disc”)

<ul type="disc">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ul>
Rezultat:

  • element 1
  • element 2
  • element 3

 Puste w środku kółko  (type=”circle”).

<ul type="circle">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ul>
Rezultat:

  • element 1
  • element 2
  • element 3

Wypełniony kwadrat  (type=”square”).

<ul type="square">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ul>
Rezultat:

  • element 1
  • element 2
  • element 3

 

 

 

Dodaj komentarz