Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2021 (test 2)


PYTANIE NR 24.
Poprawny zapis znacznika <img>, za pomocą którego można umieścić na stronie internetowej obraz rys.jpg przeskalowany do szerokości 120 px i wysokości 80 px z tekstem alternatywnym "krajobraz" to
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawny zapis używa elementu <img> z atrybutem src wskazującym plik, width i height ustawiającymi rozmiar renderowania oraz alt jako tekst alternatywny. Pozostałe propozycje zawierają niepoprawne atrybuty (np. info, image) lub błędny atrybut źródła (href).

Pełne wyjaśnienie:

Element <img> służy do osadzania obrazu na stronie. Aby przeglądarka wiedziała, jaki plik ma wczytać, konieczny jest atrybut src (np. wskazujący "rys.jpg").

Rozmiar wyświetlania można określić atrybutami width (szerokość) oraz height (wysokość). W praktyce oznaczają one rozmiar renderowania obrazu w pikselach, więc para 120 i 80 odpowiada żądanemu przeskalowaniu do 120 px × 80 px.

Tekst alternatywny podaje się w atrybucie alt. Jest on kluczowy dla dostępności: gdy obraz się nie wczyta lub użytkownik korzysta z czytnika ekranu, alt przekazuje informację o treści grafiki (tu: "krajobraz").

  • Odpowiedź z atrybutem "info" jest błędna, ponieważ w standardowej składni <img> nie jest to atrybut służący do opisu alternatywnego; poprawnym polem jest alt.
  • Wariant z "href" jest błędny, bo href jest typowy dla odnośników (np. <a>), a w <img> źródło obrazu wskazuje src.
  • Wariant z atrybutem "image" jest błędny, ponieważ <img> nie używa atrybutu o takiej nazwie do określenia pliku; ponownie właściwy jest src.

Wskazówka egzaminacyjna: przy <img> zapamiętaj zestaw "src + alt" jako podstawę, a width/height jako opcjonalne parametry rozmiaru. Jeśli w odpowiedzi widzisz href lub wymyślone nazwy atrybutów, to silny sygnał, że zapis jest niepoprawny.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest atrybut alt w <img> i po co się go stosuje?
Atrybut alt to tekst alternatywny obrazu. Jest używany, gdy grafika się nie załaduje oraz przez technologie asystujące (np. czytniki ekranu). Powinien krótko opisywać sens obrazu, np. "krajobraz", a nie tylko nazwę pliku.
Jakie atrybuty są obowiązkowe w znaczniku <img> na egzaminie?
Najczęściej wymagany jest src (źródło pliku) i w zadaniach poprawnościowych także alt (tekst alternatywny). Atrybuty width i height są opcjonalne, ale często podawane, gdy trzeba ustawić rozmiar wyświetlania.
Dlaczego w <img> używa się src, a nie href?
href służy do wskazywania adresu w elementach typu odnośnik (np. <a>). Obraz jest zasobem osadzanym w dokumencie, więc jego plik wskazuje atrybut src. Użycie href w <img> nie zadziała zgodnie z typową składnią HTML.
Jak działa skalowanie obrazu przez width i height w <img>?
Atrybuty width i height ustawiają wymiary renderowania obrazu w układzie strony. Przeglądarka wyświetli grafikę w zadanym rozmiarze, nawet jeśli plik ma inne wymiary. W praktyce to proste przeskalowanie, choć jakość zależy od oryginału.
Czy w atrybutach width i height trzeba dopisywać "px"?
W HTML wartości width/height są interpretowane jako liczba pikseli, więc często spotyka się zapis bez jednostek (np. 120, 80). Na egzaminach możesz trafić też na zapis z "px". Najważniejsze jest rozpoznanie poprawnych atrybutów i właściwych wartości.
Jakie błędy w zapisie <img> pojawiają się najczęściej w testach?
Typowe pułapki to: użycie href zamiast src, wpisanie nieistniejącego atrybutu (np. "info"), brak alt albo zamiana wartości width z height. Takie odpowiedzi wyglądają podobnie, ale nie spełniają wymagań składni.
Co oznacza, że obraz jest "przeskalowany" na stronie WWW?
To znaczy, że obraz jest wyświetlany w innych wymiarach niż ma w pliku. Można to osiągnąć atrybutami width/height w <img> albo przez CSS. W testach zwykle chodzi o ustawienie rozmiaru renderowania, np. 120×80 pikseli.
Jak sprawdzić, czy atrybut w HTML jest poprawny, gdy nie pamiętam składni?
Najlepiej skojarzyć atrybut z elementem: dla <img> typowe są src, alt, width, height. Jeśli widzisz nazwę kojarzącą się z linkami (href) lub "opis" w dziwnym polu (info), to sygnał, że odpowiedź jest podejrzana.
Jakie są różnice między alt a title w kontekście obrazów?
alt dostarcza tekst zastępczy (dostępność i sytuacje braku obrazu). title bywa wyświetlany jako dymek po najechaniu kursorem, ale nie zastępuje alt. W zadaniach egzaminacyjnych opis alternatywny powinien trafić do alt.
Jak przygotować się do zadań o tagach HTML na INF.3?
Ćwicz rozpoznawanie poprawnych atrybutów dla podstawowych elementów: <img>, <a>, <form>, <input>. Rób krótkie fiszki "element → atrybuty". W testach porównuj odpowiedzi pod kątem nazw atrybutów, bo to najczęstsze źródło pułapek.
info

Statystycznie 83% uczniów zna prawidłową odpowiedź. średnio łatwe

Według specjalistów z branży: "Poprawny zapis używa elementu &lt;img&gt; z atrybutem src wskazującym plik, width i height ustawiającymi rozmiar renderowania oraz alt jako tekst alternatywny."

Źródła:

  • MDN Web Docs: "<img>: The Image Embed element" (atrybuty src, alt, width, height) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img — dostęp 2026-02-27
  • MDN Web Docs: "HTML attribute: alt" — https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/alt — dostęp 2026-02-27
  • MDN Web Docs: "HTML attribute: width" — https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/width — dostęp 2026-02-27

Materiały:

  • Dokumentacja MDN Web Docs: element &lt;img&gt; i atrybuty alt/width/height
  • Ćwiczenia praktyczne: budowa prostej strony HTML z grafikami i walidacja HTML
  • Materiały o dostępności WWW (podstawy alt i treści alternatywnej)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego