INF.03 · HTML i CSS

Listy, tabele i linki w HTML

Treść, po której można się poruszać.

  • Przewidź efekt
  • Zmień i sprawdź
  • Zbuduj samodzielnie

Po tej lekcji: Dobierzesz listę, tabelę i odnośnik do informacji oraz zapiszesz przenośne ścieżki.

Zrozum, zanim zapiszesz

Lista ul pasuje do zbioru rzeczy; ol do kolejnych kroków. Każda pozycja to li. Dane w kolumnach zapisujesz w table: caption nazywa zestawienie, thead i tbody grupują wiersze tr, th scope="col" opisuje kolumnę, a td zawiera dane. Nie buduj tabelą układu strony.

href="kontakt.html" wskazuje plik w bieżącym folderze; obrazy/plakat.svg schodzi do folderu, ../index.html wychodzi wyżej, #repertuar trafia do elementu z id="repertuar". https://... to adres bezwzględny. Wielkość liter może mieć znaczenie na serwerze. Obraz dodajesz przez img src="obrazy/plakat.svg" alt="…"; alt opisuje istotną treść obrazu, a dekoracja ma alt="".

colspan="2" scala komórkę przez dwie kolumny; rowspan="2" przez dwa wiersze. Pozostałe komórki zaplanuj tak, by siatka nadal była spójna. Złożone tabele wymagają dokładniejszego powiązania nagłówków; na początek wybieraj proste zestawienia.

Przykład do odtworzenia

index.htmlhtml
<ul><li>Bilet</li><li>Woda</li></ul>
<ol><li>Wybierz film</li><li>Zarezerwuj miejsce</li></ol>
<table id="repertuar">
  <caption>Repertuar kina szkolnego</caption>
  <thead><tr><th scope="col">Film</th><th scope="col">Godzina</th></tr></thead>
  <tbody><tr><td>Podróż</td><td>16:00</td></tr></tbody>
</table>
<a href="kontakt.html">Kontakt z kołem filmowym</a>
<a href="#repertuar">Wróć do repertuaru</a>
<img src="obrazy/plakat.svg" alt="Rysunkowy plakat: góry i słońce" width="640" height="360">

Sprawdź w działaniu

Ta sama informacja, inna struktura

Przełącz listę ul/ol, dodaj wiersz repertuaru i zmień cel odnośnika. Obserwuj wynik wraz z kodem.

Ta interakcja wymaga włączonego JavaScriptu.

Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.

Obraz do ćwiczeń

Pobierz autorską ilustrację „Plakat koła filmowego” przyciskiem w warsztacie. Utwórz folder obrazy obok index.html i zapisz w nim plakat.svg. Arkusz style.css trzymaj obok index.html. Ten sam plik posłuży w kolejnych lekcjach. Ilustracja jest materiałem własnym BitEdu do ćwiczeń.

Dźwięk i film: odbiorca decyduje o odtwarzaniu

audio controls i video controls pokazują elementy sterujące. Nie uruchamiaj automatycznie dźwięku. preload="none" ogranicza pobieranie przed odtworzeniem. Film powinien mieć napisy przez track oraz dostępny opis lub transkrypcję. Obsługa kodeka zależy od przeglądarki; rozszerzenie pliku nie wystarcza do oceny zgodności.

W Źródłach i dalszej nauce pobierz autorski plik sygnal-testowy.wav, zapisz jako media/sygnal.wav i wstaw poniższy fragment do body. Zapisz HTML, odśwież stronę, uruchom i zatrzymaj dźwięk. Element video wypróbuj z własnym dozwolonym filmem: src wskazuje jego rzeczywistą nazwę, controls udostępnia sterowanie, a track kind="captions" wskazuje przygotowane napisy WebVTT. Nie wpisuj nieistniejącej ścieżki i nie uznawaj pustego odtwarzacza za działający film.

Osadź dźwięk z pliku

index.html — fragment bodyhtml
<audio controls preload="none" src="media/sygnal.wav">
  <a href="media/sygnal.wav">Pobierz dźwięk testowy</a>
</audio>
<p>Krótki autorski sygnał do ćwiczenia odtwarzania dźwięku.</p>

Ćwiczenie z pomocą · samodzielna praca

Zbuduj samodzielnie — z pomocą, gdy potrzebujesz

W index.html dodaj listę trzech zasad kina, tabelę repertuaru z dwiema kolumnami Film i Godzina oraz dwoma wierszami danych. Dodaj caption, nagłówki kolumn i odnośnik do utworzonego kontakt.html. Na kontakt.html umieść link powrotny.

Oczekiwany rezultat
Dwie strony połączone linkami; tabela ma podpis, dwa nagłówki i dwa wiersze danych.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

Utwórz obydwa pliki w jednym folderze.

Krok 2 — pokaż podpowiedź

Rozdziel thead i tbody, a nagłówkom th nadaj scope="col".

Krok 3 — pokaż podpowiedź

Otwórz każdy link w przeglądarce; nie wpisuj ścieżki do własnego dysku.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Sprawdź, zanim oddasz

Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.

Podsumowanie

Co warto zapamiętać

  1. Dobierzesz listę, tabelę i odnośnik do informacji oraz zapiszesz przenośne ścieżki.
  2. Potrafisz wskazać w kodzie przyczynę widocznego efektu.
  3. Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka