Listy w HTML

Trzy pytania z poprzedniej lekcji

1. Czym różni się <strong> od <b>?
2. Do czego służy <br>, a do czego go nie używamy?
3. Jak napisać na stronie znak <, żeby nie zaczął znacznika?

Lista czy akapit?

Lista zakupów, kroki przepisu, spis treści: to są wyliczenia. Kilka zdań połączonych jedną myślą to akapit.

Pojemnik i rzeczy w środku

<!-- kropki -->
<ul>
  <li>mleko</li>
  <li>jajka</li>
  <li>chleb</li>
</ul>

<!-- numery -->
<ol>
  <li>Pobierz XAMPP</li>
  <li>Zainstaluj</li>
  <li>Uruchom Apache</li>
</ol>

• ul (unordered list) = lista z kropkami, ol (ordered list) = lista z numerami. To pojemniki, jak koszyk.
• li (list item) = jedna pozycja, rzecz w koszyku. li może leżeć tylko w ul albo ol.
• Kropki i numery rysuje przeglądarka sama. Wy ich nie wpisujecie.

Numeracja po Waszemu

Lista w liście: podlista

Podlista to nowa lista, którą wkładacie do środka punktu li, a nie obok niego.

Przeglądarka sama robi wcięcie i zmienia znak kropki. Poziomów może być dowolnie wiele.

Najczęstszy błąd: lista obok punktu

dobrze: ul w środku li
<ol>
  <li>Poniedziałek
    <ul>
      <li>matematyka</li>
      <li>WF</li>
    </ul>
  </li>
  <li>Wtorek</li>
</ol>

źle: ul między punktami
<ol>
  <li>Poniedziałek</li>
  <ul>
    <li>matematyka</li>
    <li>WF</li>
  </ul>
  <li>Wtorek</li>
</ol>

Słowniczek: dl, dt, dd

<dl>
  <dt>HTML</dt>
  <dd>Język do opisu treści strony.</dd>
  <dt>Znacznik</dt>
  <dd>Nawias z nazwą wokół treści.</dd>
</dl>

• Para: najpierw dt (słowo), zaraz po nim dd (opis). Jedno pojęcie może mieć kilka opisów.
• Używacie go do słowniczka, do listy „nazwa: wartość” (np. dane produktu), do pytań i odpowiedzi.

Ciekawostka ze specyfikacji HTML (WHATWG): dt i dd wyglądają jak dobry sposób na zapis rozmowy, dt jako imię, dd jako to, co ktoś powiedział. Specyfikacja to wyklucza: dl nie nadaje się do zapisu dialogu. Zostaje przy parach pojęcie i opis, czyli przy słowniczku.

Dlaczego nie myślniki w akapicie?

źle:    <p>- mleko<br>- jajka<br>- chleb</p>                  → jeden akapit tekstu
dobrze: <ul><li>mleko</li><li>jajka</li><li>chleb</li></ul>   → lista, 3 pozycje

• Czytnik ekranu dla osób niewidomych mówi „lista, 3 elementy” i pozwala skakać między punktami. Z myślnikami czyta jeden długi tekst.
• Wyszukiwarka rozumie, że to wyliczenie, a nie zdanie.
• Wygląd kropek i numerów zmienicie później w CSS bez ruszania HTML.

Tak pytają na egzaminie

<ol> <li>biały</li>
  <li>czerwony <ul><li>różowy</li>
  <li>pomarańczowy</li></ul></li>
  <li>niebieski</li> </ol>

Ćwiczenie 1: „Mój plan tygodnia”

1. W swoim folderze na dysku nowy plik plan.html ze szkieletem. Tytuł na karcie i h1: Mój plan tygodnia.
2. Lista numerowana ol z dniami od poniedziałku do piątku. W każdym dniu podlista ul z co najmniej dwoma zajęciami (lekcje, trening, praca).
3. Jeden dzień ma numerację literami: drugi ol pod tytułem h2 „Weekend” z type="A" i dwoma punktami.
4. h2 „Słowniczek” i dl z trzema pojęciami z tej lekcji: ul, ol, dl, każde z własnym opisem.
5. Sprawdź w przeglądarce: otwórz plan.html dwuklikiem i przejrzyj całą stronę.

Ćwiczenie 2: ul, ol czy dl?

Do każdego opisu dopiszcie znacznik listy. Przy ol dopiszcie atrybut, jeśli jest potrzebny.

1. Składniki na pizzę.
2. Kroki instalacji XAMPP, od pobrania do uruchomienia.
3. Pojęcia z lekcji i ich wyjaśnienia.
4. Ranking dziesięciu gier, od miejsca 10 do miejsca 1.
5. Menu strony: Start, O nas, Kontakt.

Trzy pytania na koniec

1. Gdzie wkładacie podlistę: bezpośrednio do ol czy do środka li?
2. Lista ma zaczynać się od litery „E”. Jaki atrybut i jaka wartość?
3. Z jakich trzech znaczników składa się słowniczek i co oznacza każdy z nich?

Co musicie umieć po tej lekcji?

1. Wybrać: ul, ol, dl czy zwykły akapit.
2. Napisać listę z kropkami i z numerami; zmienić numerację przez type, start, reversed.
3. Zrobić podlistę w środku li i poprawnie ją zamknąć.
4. Napisać słowniczek z dl, dt, dd.

Na następnej lekcji: łącza, czyli jak połączyć strony ze sobą.

A jak to wygląda w produkcji?