Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - WRZESIEŃ 2014


PYTANIE NR 33.
Jaki kod należy umieścić między znacznikami <map> </map> podczas modyfikacji istniejącej strony internetowej, która musi być zgodna ze standardem HTML5, aby utworzyć kołowy obszar aktywny w mapie obrazu, odsyłający do http://www.firma.pl ?
Ilustracja przedstawia fragment kodu HTML dotyczący mapy obrazu, który jest częścią pytania egzaminacyjnego związanego z
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby utworzyć kołowy obszar aktywny w mapie obrazu w HTML5, wewnątrz <map> umieszcza się element <area> z atrybutami: shape="circle", coords="x,y,r" oraz href wskazującym adres docelowy. Same znaczniki <map> nie definiują klikalnego obszaru bez <area>.

Pełne wyjaśnienie:

Mapa obrazu w HTML służy do zdefiniowania wielu klikalnych obszarów na jednej grafice. Technicznie działa to tak, że:

  • grafika (<img>) wskazuje mapę przez atrybut usemap,
  • definicja mapy znajduje się w elemencie <map>,
  • konkretne obszary klikalne definiują elementy <area> umieszczone wewnątrz <map>.

Kołowy (okrągły) obszar aktywny tworzy się przez zastosowanie w <area>:

  • shape="circle" – informuje przeglądarkę, że obszar ma mieć kształt koła,
  • coords="x,y,r" – trzy liczby opisujące położenie i rozmiar: współrzędne środka (x,y) oraz promień r,
  • href="http://www.firma.pl" – adres, pod który ma prowadzić kliknięcie,
  • alt – tekst alternatywny (ważny dla dostępności).

Dlaczego pozostałe typowe odpowiedzi bywają błędne?

  • Użycie samego <map> bez <area> nie tworzy klikalnego obszaru – <map> jest tylko kontenerem na definicje.
  • Wartości shape inne niż circle (np. rect, poly) nie spełniają warunku "kołowy obszar".
  • Brak coords powoduje, że przeglądarka nie wie, gdzie ten obszar ma się znajdować na obrazie.
  • Użycie niewłaściwego atrybutu (np. src zamiast href) nie utworzy odsyłacza.

Wskazówka egzaminacyjna: jeśli pytanie brzmi "co wstawić między <map> i </map>", to niemal zawsze chodzi o jeden lub więcej elementów <area>, bo to one definiują obszary aktywne.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest mapa obrazu w HTML i do czego służy?
Mapa obrazu to mechanizm HTML pozwalający zdefiniować kilka klikalnych obszarów na jednej grafice. Definicja mapy znajduje się w <map>, a konkretne obszary linków opisują elementy <area> (np. koło, prostokąt, wielokąt).
Jak działa znacznik <area> w mapie obrazu?
<area> opisuje pojedynczy obszar aktywny w mapie obrazu: jego kształt (shape), położenie i rozmiar (coords) oraz cel kliknięcia (href). Bez <area> sama mapa (<map>) nie tworzy klikalnych fragmentów grafiki.
Jakie atrybuty są kluczowe dla koła w mapie obrazu?
Dla koła kluczowe są: shape="circle" oraz coords w formie x,y,r (środek i promień). Do utworzenia linku potrzebny jest też href. Dodatkowo warto dodać alt dla dostępności.
Jak zapisać coords dla shape="circle" w HTML5?
Dla shape="circle" atrybut coords zawiera trzy liczby rozdzielone przecinkami: x,y,r, gdzie x i y to współrzędne środka obszaru na obrazie, a r to promień w pikselach. Wartości dobiera się do konkretnej grafiki.
Dlaczego nie wystarczy użyć samego <map> bez <area>?
<map> jest kontenerem – przechowuje definicje obszarów, ale ich nie tworzy. Dopiero <area> wskazuje, gdzie na obrazie znajduje się obszar klikalny i dokąd prowadzi. Bez <area> przeglądarka nie ma informacji o kształtach ani linkach.
Czy w HTML5 nadal wolno używać map obrazu <map> i <area>?
Tak, mapy obrazu są elementem standardu HTML i mogą być używane także w HTML5. Trzeba jednak pamiętać o poprawnej składni i dostępności: dodawaniu alt, sensownych linków oraz testowaniu działania w przeglądarce i na urządzeniach mobilnych.
Jak połączyć obraz z mapą obrazu przez usemap?
Na obrazie (<img>) ustawia się atrybut usemap wskazujący identyfikator mapy, np. usemap="#nazwa". Następnie w <map name="nazwa"> umieszcza się <area> z definicjami obszarów. Nazwa w usemap i w map musi do siebie pasować.
Jakie są typowe błędy przy tworzeniu obszarów aktywnych?
Najczęstsze błędy to: brak coords lub zła kolejność liczb, użycie złej wartości shape (np. rect zamiast circle), pominięcie href, literówki w nazwie mapy (usemap vs name), oraz brak alt. Warto każdą zmianę od razu testować w przeglądarce.
Jak sprawdzić, czy kod mapy obrazu jest zgodny ze standardem HTML5?
Najprościej użyć walidatora HTML (np. W3C Validator) i poprawić zgłoszone błędy składni. Dodatkowo przetestuj klikane obszary w przeglądarce: czy link prowadzi we właściwe miejsce i czy kształt obszaru odpowiada grafice (zwłaszcza dla circle i poly).
Jak przygotować się do zadań egzaminacyjnych o mapach obrazu?
Przećwicz tworzenie mapy obrazu na prostej grafice: dodaj 2–3 obszary (<area>) o różnych kształtach i linkach. Naucz się rozróżniać atrybuty shape i coords oraz ich format. Na egzaminie zwracaj uwagę, czy pytanie dotyczy kodu w <map> (czyli <area>).
info

Około 43% zdających odpowiada poprawnie na to pytanie. trudne

Specjaliści zwracają uwagę: "Aby utworzyć kołowy obszar aktywny w mapie obrazu w HTML5, wewnątrz &lt;map&gt; umieszcza się element &lt;area&gt; z atrybutami: shape="circle", coords="x,y,r" oraz href wskazującym adres docelowy."

Źródła:

  • MDN Web Docs: "&lt;area&gt;: The Image Map Area element" (atrybuty shape, coords, href), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area - dostęp 2026-02-18
  • MDN Web Docs: "&lt;map&gt;: The Image Map element" (relacja &lt;map&gt; i &lt;area&gt;), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map - dostęp 2026-02-18
  • WHATWG HTML Living Standard: sekcja "Image maps" (definicje map obrazu i &lt;area&gt;), https://html.spec.whatwg.org/multipage/image-maps.html - dostęp 2026-02-18

Materiały:

  • Dokumentacja MDN: element &lt;map&gt; i &lt;area&gt;
  • Specyfikacja WHATWG HTML – sekcja Image maps
  • Ćwiczenia praktyczne: tworzenie map obrazu i testowanie coords w przeglądarce
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego