Teksty alternatywne — HTML

Tekst alt wyjaśnia znaczenie obrazu osobie, która go nie widzi.

Cel lekcji

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

Wyjaśnienie krok po kroku

Jeśli obraz jest wyłącznie dekoracyjny, stosuje się pusty alt=""; nie zastępuj go przypadkowym opisem pliku.

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

<img src="logo.svg" alt="Logo szkoły programowania">
<img src="ozdoba.svg" alt="">

Przeczytaj kod linijka po linijce

<img src="logo.svg" alt="Logo szkoły programowania">Dodajemy obraz i jego opis alternatywny.
<img src="ozdoba.svg" alt="">Dodajemy obraz i jego opis alternatywny.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Pierwszy obraz ma opis, drugi jest dekoracyjny.

◉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

Napisz alt dla wykresu pokazującego wyniki.