KWALIFIKACJA INF3 - STYCZEŃ 2021

PYTANIE NR 32.
Za pomocą którego zapisu zostanie utworzony w dokumencie HTML element wyświetlający obraz kotek.jpg z tekstem alternatywnym "obrazek kotka"?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawny zapis używa elementu <img> z atrybutem src wskazującym plik grafiki oraz atrybutem alt zawierającym tekst alternatywny. Atrybut title nie zastępuje alt, a href służy do odnośników, nie do osadzania obrazu.

Pełne wyjaśnienie:

W HTML obraz na stronie osadza się elementem <img>. Aby przeglądarka wiedziała, jaki plik ma pobrać i wyświetlić, używa się atrybutu src (źródło zasobu), np. src="kotek.jpg".

Drugim kluczowym elementem jest alt, czyli tekst alternatywny. Jest on wykorzystywany m.in. wtedy, gdy obraz nie może zostać wczytany, a także przez technologie asystujące (np. czytniki ekranu). Dlatego zapis z alt="obrazek kotka" spełnia wymaganie "z tekstem alternatywnym".

Dlaczego pozostałe warianty są błędne?

  • Wariant z title zamiast alt jest niepoprawny w kontekście pytania: title daje zwykle dymek/podpowiedź po najechaniu myszą i nie pełni roli opisu alternatywnego wymaganej dla dostępności.
  • Warianty z href są niepoprawne składniowo i semantycznie: href jest typowy dla odnośników (np. w elemencie <a>), a element <img> nie używa go do wskazywania pliku obrazu.

Wskazówka egzaminacyjna: zapamiętaj regułę "img = src + alt". Jeśli w odpowiedzi widzisz href albo brak alt, to nie spełnia warunków polecenia o tekście alternatywnym.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Atrybut alt to tekst alternatywny dla obrazu w elemencie <img>. Jest używany, gdy grafika nie wczyta się, oraz przez czytniki ekranu. Dzięki temu treść pozostaje zrozumiała i bardziej dostępna dla użytkowników.
Obraz wstawia się elementem <img> z atrybutem src wskazującym plik oraz alt z opisem. Przykład: <img src="kotek.jpg" alt="obrazek kotka">. To podstawowy, poprawny schemat.
src służy do wskazania źródła zasobu osadzanego (np. obrazu). href jest typowy dla odnośników, gdzie "prowadzi" do adresu (np. w <a>). Użycie href w <img> jest błędne i nie spełnia roli osadzenia grafiki.
alt to opis alternatywny zastępujący obraz w sytuacjach problemów z wyświetleniem i wspierający dostępność. title to dodatkowa podpowiedź (często dymek po najechaniu), ale nie zastępuje alt. Na egzaminie alt jest kluczowy dla "tekstu alternatywnego".
Alt jest szczególnie ważny w serwisach publicznych, sklepach internetowych i wszędzie tam, gdzie obraz niesie informację (np. zdjęcie produktu, ikona funkcji). Pomaga osobom korzystającym z czytników ekranu oraz wtedy, gdy grafika nie może zostać pobrana.
Tak, czasem stosuje się alt="" dla obrazów czysto dekoracyjnych, aby czytnik ekranu je pominął. Gdy jednak obraz przekazuje treść (np. produkt, wykres, przycisk), alt nie powinien być pusty. Na egzaminie czytaj uważnie, czy wymagany jest konkretny tekst.
Najczęstsze pomyłki to: użycie href zamiast src, zastąpienie alt atrybutem title, brak cudzysłowów przy wartościach atrybutów oraz mylenie ścieżki względnej z bezwzględną. Warto ćwiczyć rozpoznawanie tych różnic.
Najprościej: włącz podgląd w przeglądarce oraz użyj walidatora HTML. Sprawdź, czy obraz się ładuje, a po celowym zepsuciu ścieżki (np. zmiana nazwy pliku) czy pojawia się tekst z alt. To szybki test poprawności atrybutów.
Alt powinien krótko opisywać sens obrazu w kontekście strony, np. "obrazek kotka", "logo firmy X", "czerwony sweter, przód". Unikaj upychania słów kluczowych. Jeśli obraz jest linkiem lub przyciskiem, alt powinien opisywać działanie, a nie wygląd.
W zadaniach egzaminacyjnych bardzo często wymaga się alt, bo dotyczy to zarówno poprawnej składni, jak i dostępności. Jeśli w treści pytania pada "tekst alternatywny", to odpowiedź bez alt nie spełnia warunku. Zawsze szukaj alt jako elementu rozstrzygającego.
info

Około 70% zdających odpowiada poprawnie na to pytanie. średnio łatwe

Eksperci podkreślają: "Poprawny zapis używa elementu &lt;img&gt; z atrybutem src wskazującym plik grafiki oraz atrybutem alt zawierającym tekst alternatywny."

Źródła:

  • MDN Web Docs: "&lt;img&gt;: The Image Embed element" (atrybuty src, alt, title), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - accessed 2026-03-01
  • WHATWG HTML Living Standard: "The img element" (wymagane atrybuty i znaczenie alt), https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element - accessed 2026-03-01
  • MDN Web Docs: "alt" (HTML attribute: alt) – rola tekstu alternatywnego dla dostępności, https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/alt - accessed 2026-03-01

Materiały:

  • Specyfikacja HTML (sekcja dot. elementu &lt;img&gt; i atrybutów)
  • Kursy/lekcje o dostępności WWW (WCAG w ujęciu praktycznym, rola tekstów alternatywnych)
  • Walidator HTML oraz ćwiczenia z poprawiania błędów składni

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego