KWALIFIKACJA INF3 - STYCZEŃ 2017

PYTANIE NR 4.
Zapisano kod HTML wstawiający grafikę na stronę internetową. Jeżeli rysunek.pngnie zostanie odnaleziony, przeglądarka
Ilustracja przedstawia fragment kodu HTML, który wstawia grafikę na stronę internetową.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Gdy przeglądarka nie może pobrać pliku wskazanego w atrybucie src elementu <img>, obraz nie zostaje wyświetlony. W jego miejscu może pojawić się tekst alternatywny, czyli zawartość atrybutu alt opisująca grafikę, np. "pejzaż".

Pełne wyjaśnienie:

W HTML grafiki na stronie osadza się najczęściej elementem <img>, który wskazuje plik obrazu w atrybucie src. Jeśli plik (np. rysunek.png) nie istnieje, ma błędną ścieżkę albo nie może zostać pobrany, przeglądarka nadal renderuje stronę, ale nie jest w stanie wyświetlić samego obrazu.

W takiej sytuacji kluczową rolę pełni atrybut alt. Jest to tekst alternatywny – opis grafiki, który ma sens zarówno dla użytkownika (gdy obraz nie wczyta się), jak i dla narzędzi dostępności (np. czytników ekranu). Dlatego poprawna jest odpowiedź: "w miejscu grafiki wypisze tekst "pejzaż"", bo "pejzaż" to typowa treść alt, wyświetlana, gdy obraz nie jest dostępny.

  • Odpowiedź "nie wyświetli strony internetowej" jest błędna, bo pojedynczy brakujący zasób (obraz) nie blokuje renderowania całego dokumentu HTML; strona zwykle działa dalej.
  • Odpowiedź "w miejscu grafiki wypisze tekst "rysunek.png"" jest błędna, ponieważ przeglądarka nie ma obowiązku prezentować nazwy pliku z src jako zastępstwa. Informacją zastępczą jest treść alt, a nie ścieżka do zasobu.
  • Odpowiedź "w miejscu grafiki wypisze błąd wyświetlania strony" jest błędna: błędy pobierania obrazów są raportowane technicznie (np. w narzędziach deweloperskich), ale nie muszą być wypisywane w treści strony jako komunikat.

Wskazówka egzaminacyjna: gdy pytanie dotyczy braku pliku grafiki, najpierw sprawdź, czy w kodzie jest alt. To on determinuje, jaki tekst może pojawić się zamiast obrazu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Atrybut alt to tekst alternatywny obrazu osadzonego przez <img>. Opisuje, co przedstawia grafika, i jest używany m.in. przez czytniki ekranu oraz wtedy, gdy obraz nie może się wczytać. Dobrze napisany alt zwiększa dostępność i ułatwia zrozumienie treści.
Dzieje się tak, gdy plik ze ścieżki w src jest niedostępny (np. błędna ścieżka, brak pliku na serwerze, problem sieci). Wtedy przeglądarka nie ma danych obrazu do wyrenderowania, więc korzysta z informacji zastępczej, czyli tekstu alt (jeśli jest ustawiony).
Najczęściej nie. Dokument HTML nadal może zostać pobrany i wyrenderowany, a problem dotyczy tylko brakującego zasobu (np. jednego obrazu). Skutkiem jest puste miejsce/ikona uszkodzonego obrazu oraz ewentualnie wyświetlenie tekstu alt, ale reszta strony działa normalnie.
Otwórz Narzędzia deweloperskie w przeglądarce i sprawdź zakładkę Network oraz Console. Zobaczysz, czy żądanie do pliku z src kończy się błędem (np. 404). Zweryfikuj też ścieżkę względną/bezwzględną i wielkość liter w nazwie pliku.
Jeśli obraz jest wyłącznie dekoracyjny i nie niesie informacji, zwykle stosuje się pusty alt: alt="". Dzięki temu czytniki ekranu nie będą czytać zbędnych opisów. Gdy obraz przekazuje informację (np. wykres, produkt), alt powinien krótko i konkretnie opisywać jego treść.
Alt powinien opisywać sens obrazu w kontekście strony, a nie tylko ogólny temat. Zamiast "obrazek1" lepiej "Pejzaż górski o zachodzie słońca". Unikaj upychania słów kluczowych. Dobra praktyka: 1 zdanie lub krótka fraza, bez zbędnych ozdobników.
Nie ma takiej reguły. Źródłem treści zastępczej jest atrybut alt, a nie nazwa pliku z src. Informacje o tym, że plik jest niedostępny (np. 404), zwykle widać w narzędziach deweloperskich, ale nie muszą pojawić się jako tekst w miejscu obrazu.
W praktyce powinien być stosowany zawsze, bo jest kluczowy dla dostępności. Dla obrazów informacyjnych alt jest niezbędny, aby użytkownik bez grafiki rozumiał treść. Wyjątkiem są obrazy czysto dekoracyjne, gdzie zaleca się pusty alt (alt=""), by nie wprowadzać szumu informacyjnego.
Najczęściej myli się alt z title, zakłada, że brak obrazu "psuje stronę", albo że pojawi się nazwa pliku z src. Inny błąd to wpisywanie w alt losowych nazw typu "foto", bez opisu znaczenia. Na egzaminie szukaj związku: brak obrazu → alt.
Alt to tekst alternatywny (zastępuje obraz i wspiera dostępność). Title to dodatkowa wskazówka/tooltip, który może pojawić się po najechaniu kursorem, ale nie zastępuje obrazu i nie spełnia roli alt dla czytników ekranu. W pytaniach o brak pliku kluczowy jest alt.
info

Około 69% zdających odpowiada poprawnie na to pytanie. średnie

W praktyce zawodowej kluczowe jest to, że gdy przeglądarka nie może pobrać pliku wskazanego w atrybucie src elementu &lt;img&gt;, obraz nie zostaje wyświetlony.

Źródła:

  • MDN Web Docs: "&lt;img&gt;: The Image Embed element" (sekcja dot. atrybutu alt i zachowania przy braku obrazu) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - dostęp 2026-02-27
  • WHATWG HTML Living Standard: "The img element" (wymagania dla alt oraz rola tekstu alternatywnego) https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element - dostęp 2026-02-27
  • W3C WAI: "Alt text" / podstawy tekstu alternatywnego dla obrazów (dostępność i znaczenie alt) https://www.w3.org/WAI/tutorials/images/ - dostęp 2026-02-27

Materiały:

  • Dokumentacja HTML: element &lt;img&gt; i atrybut alt
  • MDN Web Docs – &lt;img&gt;: przykłady użycia src/alt
  • Ćwiczenia praktyczne: tworzenie strony z celowo błędnym src i obserwacja zachowania przeglądarki

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego