figure i figcaption — HTML

<figure> grupuje ilustrację i jej opis, a <figcaption> opisuje kontekst obrazu.

Cel lekcji

Poznać zagadnienie „figure i figcaption”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Wciąż pamiętaj o sensownym alt, gdy obraz niesie informację.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Widok w przeglądarce

<figure>
  <img src="wykres.png" alt="Wyniki rosną z miesiąca na miesiąc">
  <figcaption>Wyniki w tym roku</figcaption>
</figure>

Przeczytaj kod linijka po linijce

<figure>Ten znacznik określa element lub strukturę dokumentu.
<img src="wykres.png" alt="Wyniki rosną z miesiąca na miesiąc">Dodajemy obraz i jego opis alternatywny.
<figcaption>Wyniki w tym roku</figcaption>Ten znacznik określa element lub strukturę dokumentu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Obraz wraz z podpisem „Wyniki w tym roku” (gdy plik istnieje).

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj podpis pod zdjęciem.