Listy i Organizacja

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się pracować z tekstem, nagłówkami i akapitami.

Teraz potrzebujemy porządku.

Bo czasem akapit nie wystarcza.

Czasem treść chce stać się listą.

Zakupy.

Kroki przepisu.

Umiejętności.

Lekcje.

Zadania.

Rzeczy, które obiecałeś zrobić, ale teraz udajesz, że zapomniałeś.

HTML daje nam listy właśnie do tego.

Bardzo cywilizowane.

Czego Się Nauczysz

W tej lekcji nauczysz się:

• jak działają listy nieuporządkowane;
• jak działają listy uporządkowane;
• jak używać li;
• kiedy używać ul;
• kiedy używać ol;
• jak tworzyć listy zagnieżdżone;
• jak jasno organizować treść.

Dlaczego Listy Są Ważne

Listy sprawiają, że informacje łatwiej szybko przeczytać.

Porównaj to:

<p>Muszę kupić chleb, mleko, jabłka, kawę, makaron, pomidory i ser.</p>

Z tym:

<ul>
  <li>Chleb</li>
  <li>Mleko</li>
  <li>Jabłka</li>
  <li>Kawa</li>
  <li>Makaron</li>
  <li>Pomidory</li>
  <li>Ser</li>
</ul>

Druga wersja jest łatwiejsza do czytania.

Oczy nie muszą walczyć z akapitem.

Mózg dziękuje.

Cicho.

Ale szczerze.

Listy Nieuporządkowane

Lista nieuporządkowana używa tagu ul.

Każdy element idzie do tagu li.

Przykład:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul oznacza unordered list.

Kolejność nie ma znaczenia.

Przeglądarka zwykle pokazuje punkty.

Używaj list nieuporządkowanych dla:

• umiejętności;
• zakupów;
• cech;
• narzędzi;
• ogólnych zbiorów.

Jeśli kolejność nie jest ważna, użyj ul.

Listy Uporządkowane

Lista uporządkowana używa tagu ol.

Przykład:

<ol>
  <li>Stwórz plik HTML</li>
  <li>Napisz strukturę dokumentu</li>
  <li>Dodaj treść</li>
  <li>Otwórz stronę w przeglądarce</li>
</ol>

ol oznacza ordered list.

Kolejność jest ważna.

Przeglądarka zwykle pokazuje liczby.

Używaj list uporządkowanych dla:

• instrukcji;
• kroków;
• rankingów;
• przepisów;
• tutoriali;
• procesów.

Jeśli zmiana kolejności zmienia znaczenie, użyj ol.

Element li

Każdy element listy używa li.

Przykład:

<li>To jest element listy.</li>

Nie wkładaj zwykłego tekstu bezpośrednio do ul albo ol.

To jest błędne:

<ul>
  HTML
  CSS
  JavaScript
</ul>

To jest poprawne:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

ul albo ol to kontener.

li to element.

Jak pudełko i rzeczy w pudełku.

Nie rzucaj ziemniaków w powietrze i nie nazywaj tego przechowywaniem.

Lista Umiejętności

Stwórz prostą sekcję umiejętności:

<h2>Moje Umiejętności</h2>

<ul>
  <li>HTML</li>
  <li>Terminal Linux</li>
  <li>Rozwiązywanie problemów</li>
  <li>Robienie błędów i uczenie się na nich</li>
</ul>

To idealne dla stron osobistych.

Proste.

Czytelne.

Niedramatyczne.

Chyba że na liście jest “debugowanie CSS o północy”.

Wtedy robi się dramatycznie.

Lista Krok po Kroku

Dla kroków używaj ol:

<h2>Jak Stworzyć Stronę Webową</h2>

<ol>
  <li>Stwórz folder dla projektu.</li>
  <li>Stwórz plik index.html.</li>
  <li>Dodaj strukturę HTML.</li>
  <li>Napisz treść.</li>
  <li>Otwórz stronę w przeglądarce.</li>
</ol>

Proces staje się jasny.

Czytelnik wie, co zrobić najpierw, potem, później i tak dalej.

Bardzo pomocne.

Bardzo spokojne.

Przeciwieństwo “jakoś sobie poradzisz”.

Listy Zagnieżdżone

Lista zagnieżdżona to lista wewnątrz innej listy.

Przykład:

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Python</li>
      <li>Java</li>
      <li>Bazy danych</li>
    </ul>
  </li>
</ul>

To przydatne, gdy treść ma kategorie.

Ważne: lista zagnieżdżona powinna być wewnątrz li.

Nie powinna pływać losowo.

HTML lubi porządek.

To nie stołówka dla tagów.

Dobra Struktura List Zagnieżdżonych

Poprawnie:

<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Nieidealnie:

<ul>
  <li>Web Development</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>

Druga wersja może nadal pojawić się w przeglądarce.

Ale struktura jest zła.

Przeglądarki wybaczają.

Dobrzy developerzy nie żyją z wybaczania.

Stwórz Stronę do Ćwiczeń

Stwórz nowy plik:

touch lists.html

Dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ćwiczenie List</title>
</head>
<body>
  <h1>Ćwiczenie List</h1>

  <h2>Rzeczy, Których Chcę Się Nauczyć</h2>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Dostępność webowa</li>
  </ul>

  <h2>Jak Się Uczę</h2>
  <ol>
    <li>Otwieram lekcję.</li>
    <li>Czytam wyjaśnienie.</li>
    <li>Piszę kod samodzielnie.</li>
    <li>Testuję go w przeglądarce.</li>
    <li>Naprawiam błędy bez paniki.</li>
  </ol>

  <h2>Obszary Web Developmentu</h2>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </li>
    <li>Backend
      <ul>
        <li>Logika serwera</li>
        <li>Bazy danych</li>
        <li>API</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Otwórz w przeglądarce.

Masz teraz listy nieuporządkowane, uporządkowane i zagnieżdżone.

Strona robi się zorganizowana.

Niebezpiecznie zorganizowana.

Częste Błędy

Używanie akapitów zamiast list

To nie jest świetne:

<p>HTML, CSS, JavaScript, Git, Linux</p>

Lepiej:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Git</li>
  <li>Linux</li>
</ul>

Jeśli to zbiór elementów, lista często jest lepsza.

Używanie ul dla kroków

To nie jest idealne:

<ul>
  <li>Najpierw stwórz plik.</li>
  <li>Potem napisz HTML.</li>
  <li>Na końcu otwórz go w przeglądarce.</li>
</ul>

Lepiej:

<ol>
  <li>Stwórz plik.</li>
  <li>Napisz HTML.</li>
  <li>Otwórz go w przeglądarce.</li>
</ol>

Kroki mają kolejność.

Użyj ol.

Zapomnienie li

Źle:

<ul>
  <p>HTML</p>
  <p>CSS</p>
</ul>

Dobrze:

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

W listach używaj li.

Bez rebelii.

Praktyka

Stwórz stronę o swojej codziennej rutynie.

Powinna zawierać:

• jeden h1;
• jedną listę nieuporządkowaną rzeczy, których używasz codziennie;
• jedną listę uporządkowaną twojej porannej rutyny;
• jedną listę zagnieżdżoną z kategoriami;
• przynajmniej jeden akapit przed listą.

Przykładowe kategorie:

• narzędzia;
• nawyki;
• tematy nauki;
• zadania pracy;
• sport;
• języki.

Zrób to realnie.

Sztuczna treść jest nudna.

Prawdziwa treść ma plamy po kawie i osobowość.

Mini Wyzwanie

Stwórz plik:

course-plan.html

Zbuduj stronę opisującą twój plan nauki.

Powinna zawierać:

• główny nagłówek;
• akapit wprowadzający;
• listę nieuporządkowaną technologii, których chcesz się nauczyć;
• listę uporządkowaną kroków nauki;
• listę zagnieżdżoną grupującą tematy w kategorie;
• krótki akapit podsumowujący.

Bez CSS.

Bez JavaScriptu.

Tylko struktura HTML.

Bo dzisiaj organizujemy treść.

Jutro treść może zacznie się zachowywać.

Może.

Podsumowanie

Dzisiaj nauczyłeś się, że:

• ul tworzy listy nieuporządkowane;
• ol tworzy listy uporządkowane;
• li tworzy elementy listy;
• listy nieuporządkowane są dla zbiorów, gdzie kolejność nie ma znaczenia;
• listy uporządkowane są dla kroków lub sekwencji, gdzie kolejność ma znaczenie;
• listy zagnieżdżone są przydatne dla kategorii;
• listy zagnieżdżone powinny być wewnątrz li;
• listy sprawiają, że treść łatwiej czytać i rozumieć.

Dobre listy robią strony czystsze.

Złe listy sprawiają, że strona wygląda, jakby ktoś wysypał skrzynkę z narzędziami na podłogę.

Używaj list mądrze.

Następna Lekcja

W następnej lekcji poznamy linki i nawigację.

Bo jedna strona webowa jest fajna.

Ale strona połączona z innymi stronami staje się witryną.