Wykazy – listy numerowane, punktowane, definicyjne

Tworzenie wykazów w HTML · INF.03

Punktowana lista (nieuporządkowana) — <ul>

<ul>
  <li>Pierwszy punkt</li>
  <li>Drugi punkt</li>
  <li>Trzeci punkt</li>
</ul>

Numerowana lista (uporządkowana) — <ol>

<ol>
  <li>Pierwszy krok</li>
  <li>Drugi krok</li>
  <li>Trzeci krok</li>
</ol>

Możliwe typy numeracji: 1, A, a, I, i (np. <ol type="A">)

Zagnieżdżone listy

<ul>
  <li>Główna pozycja
    <ul>
      <li>Podpunkt 1</li>
      <li>Podpunkt 2</li>
    </ul>
  </li>
  <li>Kolejna główna pozycja</li>
</ul>

Lista definicyjna — <dl>

<dl>
  <dt>HTML</dt>
  <dd>Język opisu stron internetowych.</dd>
  <dt>CSS</dt>
  <dd>Język opisu wyglądu stron.</dd>
</dl>

Ćwiczenia praktyczne

Ćwiczenie 1: Stwórz zagnieżdżoną listę punktowaną, gdzie jeden z punktów zawiera listę numerowaną. 
    
  
  • Pierwszy punkt
    • 
  
  • Drugi punkt
    
      
      
    1. Krok 1
      2. 
      
    2. Krok 2
      3. 
    
    
  
    • 
  
  • Trzeci punkt
    •
Ćwiczenie 2: Zbuduj listę definicyjną dla pojęć: HTML, CSS, JavaScript. 

  
HTML

  
Język opisu stron WWW.

  
CSS

  
Język stylowania stron.

  
JavaScript

  
Język skryptowy dla stron WWW.

Quiz

<ol>
<ul>
Każda (ul, ol, dl)
Tylko ul i ol
Do tworzenia list definicyjnych
Do zwykłych punktów listy

Podsumowanie

Znajomość obsługi różnych typów list w HTML pozwala na czytelne prezentowanie danych oraz ułatwia budowę nawet rozbudowanych struktur, takich jak menu czy FAQ.

Checklista

Materiały: INF.03 — Wykazy HTML · Opracowanie: Tomasz Puchała © 2025