KWALIFIKACJA PGF4 - CZERWIEC 2018

PYTANIE NR 37.
Który znacznik służy do wstawienia obrazka na stronę WWW?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Znacznik <img> służy do osadzenia obrazu w treści dokumentu HTML (najczęściej z użyciem atrybutu src oraz opisu alternatywnego alt). Pozostałe znaczniki dotyczą innych funkcji: mapy obrazu lub elementów formularzy, więc nie wstawiają grafiki jako treści strony.

Pełne wyjaśnienie:

W HTML obraz wstawia się do dokumentu za pomocą elementu <img>. Jest to element osadzany (embedded content) – powoduje wyświetlenie grafiki w miejscu, w którym znajduje się w kodzie strony. W praktyce niemal zawsze używa się atrybutu src wskazującego plik oraz alt, czyli tekstu alternatywnego ważnego dla dostępności i sytuacji, gdy obraz nie może się wczytać.

Odpowiedź <map> jest niepoprawna, ponieważ ten element służy do zdefiniowania mapy obrazka (obszarów klikalnych) i jest używany razem z obrazem, ale sam w sobie nie osadza grafiki na stronie. To narzędzie do opisu interaktywnych obszarów, a nie do wstawienia pliku graficznego.

Odpowiedź <input> jest niepoprawna, bo jest to element formularza. Może przyjmować różne typy (np. pole tekstowe, przycisk), ale nie służy do wstawienia obrazu jako treści strony. Nawet gdy bywa używany w kontekście przycisków, nadal dotyczy interfejsu formularza.

Odpowiedź <select> również jest niepoprawna, ponieważ tworzy listę rozwijaną w formularzu (z opcjami wyboru). Nie ma związku z osadzaniem grafiki w treści strony WWW.

Wskazówka egzaminacyjna: jeśli pytanie dotyczy "wstawienia obrazka na stronę", szukaj elementu przeznaczonego do treści dokumentu (embedded content). Elementy formularzy (<input>, <select>) służą do zbierania danych od użytkownika, a <map> dotyczy interakcji z obrazem, nie samego wyświetlenia pliku.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Znacznik <img> służy do osadzania obrazu w treści strony WWW. Najczęściej wskazujesz plik atrybutem src oraz dodajesz opis alternatywny alt, który poprawia dostępność i wyświetla się, gdy grafika nie wczyta się poprawnie.
Obraz wstawia się elementem <img> umieszczonym w kodzie HTML w miejscu, gdzie ma się pojawić. W praktyce podajesz ścieżkę do pliku (atrybut src) oraz tekst alternatywny (alt). To podstawowa metoda publikacji grafiki w przeglądarce.
Atrybut alt zapewnia opis obrazu dla czytników ekranu oraz sytuacji, gdy plik nie wczyta się (błąd, blokada, słabe łącze). Dzięki temu strona jest bardziej dostępna i zrozumiała. Na egzaminach często sprawdza się tę zasadę jako dobrą praktykę.
<img> wyświetla obraz na stronie. <map> służy do zdefiniowania mapy obrazu, czyli obszarów klikalnych (np. różne fragmenty grafiki prowadzą do różnych linków). Sama mapa nie wstawia grafiki – działa dopiero w połączeniu z obrazem.
Element <input> jest przeznaczony do formularzy (wprowadzanie danych, przyciski). Nie służy do osadzania grafiki jako treści strony. Jeśli pytanie brzmi o "wstawienie obrazka na stronę WWW", właściwą odpowiedzią jest <img>, a nie elementy formularza.
<select> stosuje się w formularzach do stworzenia listy rozwijanej z opcjami wyboru (np. wybór formatu pliku, rozmiaru odbitki). <img> służy do prezentacji grafiki. To zupełnie inne zastosowania, choć oba elementy występują na stronach WWW.
Częste błędy to: brak alt, zła ścieżka w src, mieszanie ścieżek względnych i bezwzględnych, oraz używanie obrazów o zbyt dużej wadze pliku. W praktyce warto też dbać o format (JPEG/PNG/WebP) i optymalizację, aby strona ładowała się szybko.
Najprościej otworzyć stronę w przeglądarce i użyć narzędzi deweloperskich (karta Network), aby zobaczyć, czy plik zwraca kod 200 i ma poprawny typ MIME. Jeśli obraz się nie wyświetla, sprawdź literówki w src oraz czy plik istnieje na serwerze w danej lokalizacji.
Element <img> umieszcza się w części treści dokumentu, czyli w obrębie sekcji wyświetlanej użytkownikowi (zwykle w elemencie body). Wstawiasz go tam, gdzie grafika ma się pojawić: w artykule, galerii, nagłówku, sekcji portfolio lub jako element układu strony.
Ucz się przez praktykę: zrób prostą stronę portfolio z nagłówkiem, akapitami i galerią obrazów. Rozróżniaj elementy treści (np. <img>) od elementów formularzy (np. <input>, <select>). W testach pomagają też krótkie fiszki: "obraz = img, lista = select".
info

To pytanie poprawnie rozwiązuje 86% zdających egzamin. łatwe

Specjaliści zwracają uwagę: "Znacznik &lt;img&gt; służy do osadzenia obrazu w treści dokumentu HTML (najczęściej z użyciem atrybutu src oraz opisu alternatywnego alt)."

Źródła:

  • WHATWG HTML Living Standard – element img (HTML Standard), https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element - dostęp 2026-02-27
  • MDN Web Docs – &lt;img&gt;: The Image Embed element, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - dostęp 2026-02-27
  • W3Schools – HTML img tag, https://www.w3schools.com/tags/tag_img.asp - dostęp 2026-02-27

Materiały:

  • Dokumentacja HTML (sekcja o elementach osadzanych i grafice)
  • MDN Web Docs – przewodnik po HTML i elementach treści
  • Ćwiczenia praktyczne: tworzenie prostej strony z obrazami i opisami (atrybuty src, alt)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego