Twoje Centrum Szkoleniowe

Listy: uporządkowane i nieuporządkowane

W tej lekcji nauczysz się, jak tworzyć listy uporządkowane i nieuporządkowane, jakie są między nimi różnice oraz kiedy warto je stosować. Przygotuj się na praktyczne przykłady i ćwiczenia, które pomogą Ci lepiej zrozumieć to zagadnienie.

Dlaczego listy są ważne?

• Przejrzystość informacji: Listy ułatwiają czytanie i zrozumienie treści poprzez jej uporządkowanie.
• Struktura: Pomagają zorganizować informacje w logiczny sposób.
• Dostępność: Poprawnie użyte listy są lepiej interpretowane przez technologie asystujące.
• Semantyka: Wprowadzają dodatkowe znaczenie do treści, co jest ważne dla SEO.

Rodzaje list w HTML

W HTML dostępne są trzy główne typy list:

1. Listy nieuporządkowane (<ul>) – elementy listy bez określonej kolejności, zwykle oznaczane punktami.
2. Listy uporządkowane (<ol>) – elementy listy z określoną kolejnością, numerowane.
3. Listy definicji (<dl>) – używane do prezentowania par pojęć i ich definicji.

W tej lekcji skupimy się na dwóch pierwszych typach – listach nieuporządkowanych i uporządkowanych.

Listy nieuporządkowane (<ul>)

Co to jest lista nieuporządkowana?

Lista nieuporządkowana to zbiór elementów, w którym kolejność nie ma znaczenia. Jest oznaczana znacznikiem <ul> (od ang. unordered list). Elementy listy są zwykle wyświetlane z punktami lub innymi znacznikami graficznymi.

Struktura listy nieuporządkowanej

Podstawowa struktura wygląda następująco:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

• <ul> – znacznik otwierający listę nieuporządkowaną.
• <li> – oznacza pojedynczy element listy (od ang. list item).
• Każdy element listy musi być zawarty w znaczniku <li>.

Przykład zastosowania

Lista zakupów:

<h2>Lista zakupów</h2>
<ul>
  <li>Chleb</li>
  <li>Mleko</li>
  <li>Jajka</li>
  <li>Masło</li>
</ul>

Po wyświetleniu w przeglądarce otrzymamy listę z wypunktowanymi produktami.

Kiedy używać list nieuporządkowanych?

• Gdy kolejność elementów nie jest istotna.
• Przy wymienianiu cech, opcji, kategorii.
• Do tworzenia menu nawigacyjnego (w połączeniu z CSS).

Listy uporządkowane (<ol>)

Co to jest lista uporządkowana?

Lista uporządkowana to zbiór elementów ułożonych w określonej kolejności. Używamy znacznika <ol> (od ang. ordered list). Elementy są zwykle numerowane.

Struktura listy uporządkowanej

Podstawowa struktura wygląda następująco:

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

Przykład zastosowania

Przepis na ciasto:

<h2>Przepis na ciasto czekoladowe</h2>
<ol>
  <li>Rozgrzej piekarnik do 180°C.</li>
  <li>W misce wymieszaj mąkę, cukier i kakao.</li>
  <li>Dodaj jajka i mleko, miksuj do uzyskania jednolitej masy.</li>
  <li>Przelej ciasto do formy i piecz przez 45 minut.</li>
</ol>

Po wyświetleniu w przeglądarce otrzymamy numerowaną listę kroków.

Atrybuty listy uporządkowanej

• type – określa typ oznaczenia elementów (np. cyfry, litery).
• start – określa początkowy numer listy.
• reversed – wyświetla listę w kolejności malejącej.

Przykłady:

• Zmieniamy typ oznaczenia na litery małe:

<ol type="a">
  <li>Pierwszy element</li>
  <li>Drugi element</li>
</ol>

• Rozpoczynamy numerowanie od 5:

<ol start="5">
  <li>Piąty element</li>
  <li>Szósty element</li>
</ol>

• Odwracamy kolejność:

<ol reversed>
  <li>Trzeci element</li>
  <li>Drugi element</li>
  <li>Pierwszy element</li>
</ol>

Kiedy używać list uporządkowanych?

• Gdy kolejność elementów ma znaczenie.
• Przy opisywaniu kroków w instrukcji lub procedurze.
• Do prezentowania rankingów lub list priorytetów.

Zagnieżdżanie list

Możemy tworzyć listy zagnieżdżone, czyli umieszczać jedną listę wewnątrz innej. Pozwala to na tworzenie bardziej złożonych struktur.

Przykład zagnieżdżonej listy

Plan dnia:

<h2>Plan dnia</h2>
<ol>
  <li>Poranek
    <ul>
      <li>Śniadanie</li>
      <li>Ćwiczenia</li>
    </ul>
  </li>
  <li>Praca
    <ul>
      <li>Spotkanie zespołu</li>
      <li>Projektowanie</li>
    </ul>
  </li>
  <li>Wieczór
    <ul>
      <li>Kolacja</li>
      <li>Czytanie książki</li>
    </ul>
  </li>
</ol>

W tym przykładzie lista uporządkowana zawiera listy nieuporządkowane.

Listy definicji (<dl>)

Chociaż skupiamy się na listach uporządkowanych i nieuporządkowanych, warto wspomnieć o listach definicji, które są używane do prezentowania par pojęć i ich definicji.

Struktura listy definicji

<dl>
  <dt>Pojęcie 1</dt>
  <dd>Definicja pojęcia 1.</dd>
  <dt>Pojęcie 2</dt>
  <dd>Definicja pojęcia 2.</dd>
</dl>

• <dl> – znacznik listy definicji (od ang. definition list).
• <dt> – termin definiowany (definition term).
• <dd> – definicja terminu (definition description).

Przykład zastosowania

Słowniczek pojęć:

<h2>Słowniczek pojęć</h2>
<dl>
  <dt>HTML</dt>
  <dd>Język znaczników używany do tworzenia struktur stron internetowych.</dd>
  <dt>CSS</dt>
  <dd>Język arkuszy stylów służący do opisu wyglądu elementów HTML.</dd>
</dl>

Praktyczne ćwiczenie

Ćwiczenie 1: Stwórz listę zakupów

1. Utwórz nową sekcję na swojej stronie z nagłówkiem "Lista zakupów".
2. Dodaj listę nieuporządkowaną z co najmniej pięcioma produktami.

Przykład:

<h2>Lista zakupów</h2>
<ul>
  <li>Pomidory</li>
  <li>Ogórki</li>
  <li>Ser</li>
  <li>Chleb</li>
  <li>Sok pomarańczowy</li>
</ul>

Ćwiczenie 2: Opisz procedurę

1. Dodaj sekcję z nagłówkiem "Jak przygotować kawę".
2. Utwórz listę uporządkowaną z krokami przygotowania kawy.

Przykład:

<h2>Jak przygotować kawę</h2>
<ol>
  <li>Zagotuj wodę.</li>
  <li>Wsyp dwie łyżeczki kawy do filiżanki.</li>
  <li>Zalej kawę gorącą wodą.</li>
  <li>Dodaj mleko lub cukier według uznania.</li>
  <li>Wymieszaj i delektuj się smakiem.</li>
</ol>

Ćwiczenie 3: Stwórz zagnieżdżoną listę

1. Utwórz listę swoich ulubionych gatunków muzycznych.
2. Dla każdego gatunku dodaj zagnieżdżoną listę z kilkoma ulubionymi wykonawcami.

Przykład:

<h2>Moje ulubione gatunki muzyczne</h2>
<ul>
  <li>Rock
    <ul>
      <li>Queen</li>
      <li>The Beatles</li>
      <li>Pink Floyd</li>
    </ul>
  </li>
  <li>Jazz
    <ul>
      <li>Miles Davis</li>
      <li>John Coltrane</li>
      <li>Ella Fitzgerald</li>
    </ul>
  </li>
  <li>Elektroniczna
    <ul>
      <li>Daft Punk</li>
      <li>Deadmau5</li>
      <li>Kraftwerk</li>
    </ul>
  </li>
</ul>

Dobre praktyki

• Zachowaj poprawną strukturę: Upewnij się, że listy są poprawnie zagnieżdżone i że każdy element jest w znaczniku <li>.
• Używaj odpowiedniego typu listy: Wybierz listę uporządkowaną, gdy kolejność ma znaczenie, i nieuporządkowaną, gdy nie ma.
• Unikaj nadmiernego zagnieżdżania: Zbyt głębokie zagnieżdżanie może utrudnić czytelność.
• Dodaj semantykę: Używaj list zamiast akapitów przy wyliczeniach – poprawi to dostępność i SEO.

Częste błędy i jak ich unikać

• Brak znacznika <li>: Każdy element listy musi być zawarty w znaczniku <li>.

Niepoprawnie:

<ul>
  Element 1
  Element 2
</ul>

Poprawnie:

<ul>
  <li>Element 1</li>
  <li>Element 2</li>
</ul>

• Nieprawidłowe zagnieżdżanie: Pamiętaj, aby zagnieżdżone listy umieszczać wewnątrz elementu <li>.

Niepoprawnie:

<ul>
  <li>Element 1</li>
  <ul>
    <li>Podpunkt 1</li>
  </ul>
</ul>

Poprawnie:

<ul>
  <li>Element 1
    <ul>
      <li>Podpunkt 1</li>
    </ul>
  </li>
</ul>

• Nieodpowiednie użycie atrybutów: Upewnij się, że atrybuty, takie jak type czy start, są stosowane w odpowiedni sposób.

Podsumowanie

W tej lekcji nauczyliśmy się:

• Czym są listy nieuporządkowane i uporządkowane oraz jakie są między nimi różnice.
• Jak tworzyć listy w HTML i jak poprawnie z nich korzystać.
• Jak zagnieżdżać listy, aby tworzyć bardziej złożone struktury.
• Jakie są dobre praktyki związane z używaniem list.
• Jak unikać częstych błędów podczas tworzenia list.

Listy są nieodłącznym elementem stron internetowych i umiejętność ich poprawnego stosowania jest kluczowa dla każdego twórcy stron WWW.

Zadania do samodzielnego wykonania

1. Stwórz stronę z przepisem kulinarnym:

   • Użyj listy uporządkowanej do opisania kroków przygotowania.
   • Wykorzystaj listę nieuporządkowaną do wymienienia składników.

2. Przygotuj listę rzeczy do zrobienia (to-do list):

   • Dodaj możliwość zagnieżdżania zadań podrzędnych.
   • Zastosuj odpowiednie znaczniki.

3. Stwórz słowniczek pojęć z użyciem listy definicji:

   • Wybierz kilka terminów związanych z Twoim hobby lub zainteresowaniami.
   • Dodaj ich definicje.

Ciekawostka

Czy wiesz, że listy w HTML były jednym z pierwszych sposobów tworzenia menu nawigacyjnych na stronach internetowych? Dzięki odpowiedniemu stylowaniu za pomocą CSS, listy nieuporządkowane stały się podstawą dla menu poziomych i pionowych, które widzimy na wielu witrynach.