Strona główna
Wyniki egzaminu

Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Rozpoczęcie: 7 czerwca 2026 23:18
Zakończenie: 7 czerwca 2026 23:19

Egzamin niezdany

Wynik: 0/40 punktów (0,0%)

Wymagane minimum: 20 punktów (50%)

Twój wynik na tle innych

Twój wynik jest lepszy niż 0% podejść do kwalifikacji INF.03.

Porównanie z 39483 zakończonymi podejściami do tej kwalifikacji (dane zbiorcze, bez wyników indywidualnych).

Zachowaj ten wynik na koncie

Załóż darmowe konto albo zaloguj się - ten egzamin przypiszemy do Twojego konta, więc wrócisz do swoich błędów, będziesz śledzić postęp i dostaniesz powtórki dobrane do Twoich odpowiedzi.

Załóż darmowe konto Zaloguj się

Analiza przebiegu egzaminu - sprawdź jak rozwiązywałeś pytania Przebieg egzaminu

Udostępnij swój wynik

Szczegółowe wyniki

Pytanie 1

.format1 {
    …
}

W CSS określono wspólne style dla pewnej grupy elementów. Użycie takich stylów w kodzie HTML odbywa się za pomocą atrybutu:

A. div = "format1"

B. id = "format1"

C. style = "format1"

D. class = "format1"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Użycie atrybutu class w języku HTML do formatowania grupy znaczników jest zgodne z najlepszymi praktykami web developmentu. Atrybut class pozwala na zastosowanie tej samej definicji stylu CSS do wielu elementów, co jest efektywne i utrzymuje porządek w kodzie. Umożliwia to również łatwą zmianę wyglądu strony poprzez modyfikację tylko jednej definicji CSS zamiast ręcznego edytowania stylów każdego z elementów z osobna. Dzięki takiemu podejściu, programista może szybko aktualizować wygląd całej strony lub jej części bez ryzyka, że pominięte zostaną pojedyncze elementy. Ponadto użycie klas jest zgodne ze standardami W3C, co zapewnia kompatybilność i poprawne renderowanie w różnych przeglądarkach. Praktycznym przykładem zastosowania jest stronie, gdzie wszystkie elementy z klasą .format1 będą miały jednolity wygląd, na przykład wszystkie przyciski na stronie mogą mieć jednakowy kolor i styl. Pozwala to na tworzenie spójnych interakcji użytkownika i ułatwia przyszłą rozbudowę strony o dodatkowe funkcje.

Pytanie 2

Jakiej funkcji w edytorze grafiki rastrowej należy użyć, aby przygotować obraz do wyświetlenia na stronie tak, aby widoczne było jedynie to, co mieści się w ramce?

A. Kadrowanie

B. Lustro

C. Perspektywa

D. Zmiana rozmiaru

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kadrowanie w edytorze grafiki rastrowej to naprawdę fajna technika, bo pozwala nam na wycięcie konkretnej części obrazu, którą chcemy pokazać. Dzięki temu skupiamy uwagę na tym, co w grafice najważniejsze, eliminując to, co jest zbędne. Przygotowując grafikę do wrzucenia na stronę www, dobrze jest pomyśleć o kadrowaniu, bo nie tylko poprawia estetykę, ale też sprawia, że strona działa szybciej. Mniejsza grafika to krótszy czas ładowania, co wszyscy lubią. Kadrowanie jest kluczowe, zwłaszcza w responsywnym web designie, gdzie musimy dostosować obrazy do różnych ekranów. Z praktyki wiem, że dobrze wykadrowany obraz to lepsza jakość przy mniejszej wadze pliku, co korzystnie wpływa na SEO i wrażenia użytkowników. W programach jak Adobe Photoshop czy GIMP kadrowanie jest dość proste i pozwala na szybkie dostosowanie obrazu do potrzeb projektu.

Pytanie 3

Którego znacznika NIE NALEŻY umieszczać w nagłówku dokumentu HTML?

A. <h2>

B. <title>

C. <meta>

D. <link>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <h2> jest trafna, bo ten znacznik jest właśnie do nagłówków w HTML. Powinien być używany w sekcji <body>, nie w <head>. Jak dobrze wiesz, nagłówki, czyli <h1> do <h6>, mają spore znaczenie w organizacji tekstu i hierarchii, co wpływa później na SEO i dostępność strony. Dzięki <h2> możesz dodać podtytuł, co sprawia, że tekst jest bardziej przejrzysty i łatwiejszy do zrozumienia. Stosowanie nagłówków w odpowiedni sposób to ważna zasada, żeby dokument miał sens i był logicznie poukładany. Warto też wiedzieć, że znaczniki takie jak <link>, <meta> i <title> są super ważne dla strony, ale pełnią inne funkcje niż nagłówki. Więc ogólnie rzecz biorąc, fajnie, że to rozumiesz!

Pytanie 4

Prezentowany fragment dokumentu HTML z użyciem JavaScript spowoduje, że po naciśnięciu przycisku

<img src="obraz1.png">
<img src="obraz2.png" id="id1">
<button onclick="document.getElementById('id1').style.display='none'">Przycisk</button>

A. obraz2.png zostanie zniknięty

B. obraz1.png zostanie wymieniony przez obraz2.png

C. obraz1.png zostanie zniknięty

D. obraz2.png zostanie wymieniony przez obraz1.png

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna, ponieważ przycisk w kodzie JavaScript powoduje, że po jego kliknięciu element HTML o identyfikatorze 'id1', który jest obrazem 'obraz2.png', zostanie ukryty. Wartość 'style.display' zmienia się na 'none', co jest standardowym sposobem na ukrycie elementu w dokumentach HTML. W praktyce takie podejście jest szeroko stosowane w interaktywnych aplikacjach webowych, aby poprawić doświadczenia użytkowników, umożliwiając im dynamiczne ukrywanie lub wyświetlanie treści w odpowiedzi na ich działania. Ukrywanie elementów zamiast ich usuwania z DOM ma swoje zalety, ponieważ umożliwia ich późniejsze przywrócenie, co jest bardziej efektywne w kontekście wydajności. Dobrym przykładem może być rozwijane menu na stronie, gdzie po kliknięciu na dany element, jego zawartość jest ukrywana lub pokazywana bez potrzeby przeładowywania całej strony.

Pytanie 5

Która z poniżej wymienionych zasad nie przyczyni się do poprawy czytelności kodu?

A. W każdej linii kodu powinna znaleźć się tylko jedna komenda

B. Nazwy zmiennych muszą odzwierciedlać ich funkcję

C. Kod powinien być napisany bez wcięć i nadmiarowych enterów

D. Trzeba dodawać komentarze w trudniejszych fragmentach kodu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź "Kod powinien być napisany bez wcięć i zbędnych enterów" jest prawidłowa, ponieważ brak wcięć i odpowiednich przerw w kodzie negatywnie wpływa na jego czytelność. Właściwe formatowanie kodu, w tym stosowanie wcięć, jest kluczowe dla zrozumienia struktury programu. Pomaga to programistom w szybkim zlokalizowaniu bloków kodu, a także wzmacnia hierarchię i powiązania między funkcjami i klasami. Na przykład w języku Python, wcięcia są integralną częścią składni, co oznacza, że brak wcięć skutkuje błędami wykonania. W praktyce, pisząc kod, warto zastosować konwencje formatowania takie jak PEP 8 dla Pythona lub Google Java Style Guide dla Javy, które promują przejrzystość i jednoznaczność. W związku z tym, aby zwiększyć czytelność i zrozumiałość kodu, należy stosować wcięcia oraz logiczne podziały. Dobrze sformatowany kod nie tylko ułatwia jego przeglądanie, ale również późniejsze utrzymanie oraz współpracę z innymi programistami.

Pytanie 6

W języku CSS, sformatowanie dowolnego elementu języka HTML w ten sposób, że po najechaniu na niego kursorem zmienia on kolor czcionki, wymaga zastosowania pseudoklasy

A. :active

B. :visited

C. :coursor

D. :hover

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to pseudoklasa :hover. W CSS służy ona dokładnie do tego, o co chodzi w pytaniu: do zmiany wyglądu elementu w momencie, gdy użytkownik najedzie na niego kursorem myszy (albo innym wskaźnikiem). Mechanizm jest prosty: przeglądarka śledzi pozycję kursora i kiedy znajduje się on nad danym elementem, do selektora z :hover zostają zastosowane zdefiniowane tam style. Przykładowo, żeby po najechaniu zmienić kolor tekstu linku, wystarczy napisać: a:hover { color: red; } Można tak samo stylować dowolny element HTML, nie tylko <a>: button:hover { color: white; background-color: #007bff; cursor: pointer; } W nowoczesnych interfejsach :hover jest podstawą efektów „podświetlenia” przycisków, kart, menu rozwijanych itp. Z mojego doświadczenia warto pamiętać o kolejności pseudoklas dla linków: a:link, a:visited, a:hover, a:active – to jest klasyczna dobra praktyka (czasem zapisywana jako LVHA), żeby style się nie nadpisywały w dziwny sposób. Trzeba też mieć w głowie, że na urządzeniach mobilnych :hover działa inaczej lub wcale, bo tam nie ma typowego kursora. Dlatego sensowne jest, żeby najważniejsze informacje nie były dostępne tylko po najechaniu, a :hover traktować bardziej jako poprawę wygody i estetyki, a nie jedyne źródło funkcjonalności. Mimo to w klasycznym desktopowym webie :hover jest absolutnym standardem do reakcji na najechanie kursorem.

Pytanie 7

Która zasada NIE poprawi czytelności kodu?

A. komentarze w trudniejszych fragmentach kodu

B. pisanie kodu BEZ wcięć i zbędnych enterów

C. jedna instrukcja w jednej linii

D. nazwy zmiennych odzwierciedlają ich przeznaczenie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pytanie szuka zasady, która NIE pomaga. Pisanie kodu bez wcięć i bez podziału na linie sprawia, że struktura bloków staje się nieczytelna - to praktyka SZKODZĄCA czytelności. Dlatego czytelności nie poprawi pisanie kodu bez wcięć i zbędnych enterów.

Pytanie 8

Który zapis CSS ustawi wcięcie PIERWSZEJ linii akapitu na 30 pikseli?

p { text-indent: 30px; }

p { line-height: 30px; }

p { line-indent: 30px; }

p { text-spacing: 30px; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wcięcie PIERWSZEJ linii akapitu ustawia właściwość <code>text-indent</code>, więc <code>p { text-indent: 30px; }</code> przesunie początek pierwszego wiersza o 30 pikseli. Dlatego ten zapis jest poprawny.

Pytanie 9

Jaki jest najłatwiejszy i najmniej czasochłonny sposób przetestowania strony w różnych przeglądarkach i ich wersjach?

A. test tylko w jednej przeglądarce, zakładając zgodność pozostałych

B. użycie emulatora przeglądarek (np. usługi typu Browser Sandbox)

C. instalacja różnych przeglądarek na kilku komputerach i testowanie

D. użycie walidatora kodu HTML

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Najszybszym sposobem sprawdzenia strony w wielu przeglądarkach i ich wersjach jest emulator przeglądarek (np. usługa typu Browser Sandbox) - bez instalowania każdej z nich osobno otrzymujemy podgląd w różnych środowiskach. Dlatego najwygodniejsze jest użycie emulatora przeglądarek.

Pytanie 10

Który zapis HTML deklaruje KODOWANIE znaków w dokumencie?

<encoding="UTF-8">

<meta charset="UTF-8">

<meta encoding="UTF-8">

<charset="UTF-8">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kodowanie znaków deklaruje się w sekcji <code><head></code> zapisem <code><meta charset="UTF-8"></code> - dzięki temu przeglądarka poprawnie wyświetli polskie znaki. Dlatego poprawny jest <code><meta charset="UTF-8"></code>.

Pytanie 11

W kodzie HTML zdefiniowano hiperłącze: <a href="http://website.com" rel="nofollow">link</a>. Użyty w nim atrybut rel="nofollow" w znaczniku <a>:

A. oznacza, że kliknięcie w link nie przeniesie użytkownika na stronę website.com

B. oznacza, że kliknięcie w link otworzy go w osobnej karcie przeglądarki

C. jest informacją dla robota wyszukiwarki, aby nie podążał za tym linkiem i nie przekazywał mu wartości rankingowej

D. jest poleceniem dla przeglądarki, aby nie traktowała słowa "link" jako odnośnika

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut <code>rel="nofollow"</code> w znaczniku <code><a></code> to wskazówka skierowana do robotów wyszukiwarek, na przykład Googlebota. Mówi im, by nie podążały za danym odnośnikiem i nie przekazywały mu wartości rankingowej (historycznie nazywanej PageRank). Działa wyłącznie na poziomie indeksowania - nie zmienia zachowania linku dla użytkownika, który dalej może go kliknąć i przejść na stronę docelową. nofollow stosuje się często przy linkach zewnętrznych, do treści niezaufanych, w komentarzach czy linkach płatnych, aby nie firmować obcej witryny autorytetem własnej strony i ograniczać spam.

Pytanie 12

Znaczniki HTML oraz , które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. oraz

B. oraz

C. oraz

D. oraz

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki HTML oraz mają kluczowe znaczenie w kontekście semantyki i formatowania tekstu w dokumentach HTML. Znacznik wskazuje na tekst o zwiększonej ważności, co jest zgodne z jego domyślnym formatowaniem, które w większości przeglądarek wyświetla tekst pogrubiony. Z kolei znacznik sugeruje tekst, który powinien być akcentowany w odpowiedni sposób, a jego domyślne formatowanie to kursywa. W związku z tym, ich odpowiednikami pod względem formatowania są znaczniki oraz . Znacznik służy do pogrubienia tekstu, ale nie niesie ze sobą żadnej dodatkowej semantyki, natomiast używany jest do kursywy bez wskazania na ważność. W praktyce, należy używać i tam, gdzie semantyka jest kluczowa dla zrozumienia treści, a dodatkowe znaczenie przekłada się na lepsze pozycjonowanie w wyszukiwarkach oraz dostępność dla osób korzystających z technologii asystujących. Ważne jest, by przestrzegać dobrych praktyk webowych i stosować znaczniki semantyczne, co pozwoli na efektywne przekazywanie informacji zarówno użytkownikom, jak i robotom indeksującym.

Pytanie 13

Który zapis <img> jest poprawny zgodnie z walidacją HTML5?

<img src="mojPiesek.jpg">

<img src="mojPiesek.jpg" alt="pies">

<img src=mojPiesek.jpg" alt="pies>

<img src=mojPiesek.jpg alt=pies>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny zapis to <code><img src="mojPiesek.jpg" alt="pies"></code> - wartości atrybutów <code>src</code> i <code>alt</code> ujęte są w cudzysłowy, a znacznik jest poprawnie domknięty. Dlatego prawidłowy jest ten zapis.

Pytanie 14

W kodzie HTML 5, w celu walidacji wartości pola <input type="text"> za pomocą wyrażenia regularnego, należy użyć atrybutu

A. pattern

B. readonly

C. step

D. value

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to „pattern”, bo właśnie ten atrybut w HTML5 służy do walidacji zawartości pola tekstowego za pomocą wyrażeń regularnych po stronie przeglądarki. Atrybut pattern przyjmuje jako wartość wyrażenie regularne w składni zbliżonej do tej znanej z JavaScript (ECMAScript). Przeglądarka sprawdza, czy wpisany tekst pasuje do wzorca i jeśli nie, to nie pozwoli wysłać formularza, o ile pole ma ustawiony atrybut required lub użytkownik wywoła standardową walidację formularza. Przykład praktyczny: jeśli chcemy wymusić, żeby użytkownik wpisał dokładnie 3 cyfry, możemy napisać: <input type="text" name="kod" pattern="\d{3}" required> Wtedy poprawne będą wartości typu „123”, a „12a” czy „1234” zostaną odrzucone. Dla adresu e‑mail (prostej wersji) można użyć np.: <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"> W praktyce i tak często łączy się walidację HTML5 (pattern) z walidacją po stronie serwera, bo walidacja w przeglądarce jest tylko pierwszą linią obrony i użytkownik może ją wyłączyć. Z mojego doświadczenia warto pamiętać, że pattern działa tylko na tekst (input type="text", „search”, „tel”, „email”, „url” itd.) i jest walidowany dopiero w momencie wysyłki formularza lub wywołania metody checkValidity() w JavaScript. Dobrą praktyką jest też dodanie atrybutu title z opisem formatu danych, np. title="Wpisz 3 cyfry", żeby użytkownik zrozumiał, czemu formularz go nie przepuszcza. W projektach komercyjnych pattern bardzo pomaga szybko ogarnąć proste reguły, jak kody pocztowe, numery indeksów, proste loginy itp., bez konieczności pisania dodatkowego skryptu JS.

Pytanie 15

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }

A. wszystkim odnośnikom odwiedzonym.

B. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

C. każdemu odnośnikowi niezależnie od aktualnego stanu.

D. wszystkim odnośnikom nieodwiedzonym.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.

Pytanie 16

W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć następującego zapisu

A. p { text-spacing: 30px; }

B. p { text-indent: 30px; }

C. p { line-height: 30px; }

D. p { line-indent: 30px; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź p { text-indent: 30px; } jest poprawna, ponieważ właściwość text-indent w CSS służy do definiowania wcięcia pierwszej linii tekstu w elemencie blokowym, takim jak akapit (p). Umożliwia to nadanie tekstowi estetycznego wyglądu oraz zwiększenie czytelności, szczególnie w dłuższych blokach tekstu. Wartość 30px oznacza, że pierwsza linia akapitu zostanie przesunięta o 30 pikseli w prawo względem pozostałych linii. Przykładowo, jeśli mamy długi akapit z tekstem, zastosowanie wcięcia może pomóc w wyodrębnieniu go wizualnie, co sprzyja lepszemu zrozumieniu zawartości przez użytkowników. Warto także dodać, że standardy CSS są regularnie aktualizowane, a stosowanie dobrych praktyk, takich jak odpowiednie formatowanie tekstu, ma kluczowe znaczenie w projektowaniu responsywnych i przyjaznych dla użytkownika stron internetowych. Wykorzystanie text-indent jest jedną z technik, które przyczyniają się do poprawy UX (User Experience).

Pytanie 17

Który kod oznacza kolor CZERWONY?

#EE0000

#00EE00

#0000EE

#00EEEE

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W zapisie <code>#RRGGBB</code> pierwsza para to czerwony. W <code>#EE0000</code> wysoka jest tylko składowa czerwona (<code>EE</code>), a zielona i niebieska są zerowe - więc kolor jest CZERWONY. Dlatego czerwony to <code>#EE0000</code>.

Pytanie 18

Którego znacznika użyć, aby umieścić na stronie animację Flash (.swf)?

<object>

<img>

<video>

<audio>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Animację Flash (plik <code>.swf</code>) osadza się na stronie znacznikiem <code><object></code> - to uniwersalny kontener na obiekty zewnętrzne obsługiwane przez wtyczki (kiedyś Flash Player), z parametrami podawanymi w <code><param></code>. Warto pamiętać, że Flash jest dziś technologią wycofaną i przeglądarki go nie wspierają - współcześnie animacje robi się w HTML5/CSS lub <code><canvas></code>. Mimo to formalnie poprawnym kontenerem dla <code>.swf</code> jest <code><object></code>.

Pytanie 19

W trakcie walidacji dokumentu HTML5 napotkano komunikat o treści: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

B. element <title> nie jest konieczny.

C. element <title> nie został poprawnie zamknięty przez </title>.

D. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <title> jest kluczowym składnikiem sekcji <head> każdego dokumentu HTML, zgodnie z wytycznymi W3C. Jego głównym zadaniem jest określenie tytułu strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Brak tego elementu w dokumencie skutkuje błędem walidacji, ponieważ HTML5 wymaga, aby każdy dokument miał zdefiniowany tytuł. Przykładowo, poprawny fragment dokumentu HTML5 powinien wyglądać następująco: <head><title>Mój dokument</title></head>. Niezdefiniowanie elementu <title> może negatywnie wpłynąć na SEO, ponieważ wyszukiwarki często używają tytułu strony do określenia jej zawartości. W praktyce oznacza to, że każda strona internetowa powinna mieć unikalny tytuł odzwierciedlający jej tematykę, co nie tylko poprawi doświadczenie użytkownika, ale także pomoże w pozycjonowaniu w wynikach wyszukiwania.

Pytanie 20

Aby wskazać błędy składniowe w kodzie HTML, należy zastosować:

A. walidator

B. interpreter

C. kompilator

D. debugger

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Do sprawdzania poprawności kodu HTML służy walidator - na przykład walidator W3C (validator.w3.org). Analizuje on dokument pod kątem zgodności ze standardem języka i wypisuje błędy oraz ostrzeżenia: niezamknięte znaczniki, błędne zagnieżdżenia, nieprawidłowe atrybuty. HTML jest językiem znaczników, a nie programowania - nie kompiluje się go ani nie wykonuje, więc do kontroli składni używa się właśnie walidatora, a nie narzędzi typowych dla kodu programu.

Pytanie 21

Który z podanych znaczników HTML nie jest używany do formatowania tekstu?

A.

B.

C.

D. <div>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<div> jest znacznikiem HTML, który służy do grupowania elementów na stronie, co ułatwia ich stylizację i manipulację w CSS oraz JavaScript. W przeciwieństwie do znaczników takich jak , i , które mają konkretne zastosowania związane z formatowaniem tekstu, <div> pełni rolę kontenera, co czyni go bardziej uniwersalnym narzędziem do strukturyzacji treści. Przykładowo, można użyć <div> do utworzenia sekcji nagłówka, stopki lub bocznego panelu na stronie. Zgodnie z standardami W3C, <div> jest elementem blokowym, co oznacza, że zajmuje całą szerokość dostępną w swoim rodzicu. W praktyce, <div> pozwala na efektywne zarządzanie układem strony i jest często stosowany w połączeniu z CSS w celu uzyskania pożądanej prezentacji wizualnej. Przykład zastosowania: <div class='container'>...</div> może być użyty do zawarcia innych elementów jak <h1>, czy <img>. Dzięki temu można łatwo manipulować stylem i zachowaniem tych elementów, co czyni <div> kluczowym narzędziem w nowoczesnym web designie.

Pytanie 22

Ile maksymalnie znaczników <td> może być zastosowanych w tabeli, która ma trzy kolumny oraz trzy wiersze, nie zawierając przy tym złączeń komórek i wiersza nagłówkowego?

A. 9

B. 12

C. 6

D. 3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 9 jest prawidłowa, ponieważ w tabeli o trzech kolumnach i trzech wierszach, gdzie nie ma złączeń komórek ani wiersza nagłówkowego, maksymalna liczba znaczników <td> wynosi 9. Każda kolumna w każdym wierszu może być wypełniona osobnym znacznikiem <td>. Tabela składająca się z 3 wierszy i 3 kolumn daje w sumie 3 x 3 = 9 komórek, które są reprezentowane przez znaczniki <td>. Przykładową strukturę HTML takiej tabeli można przedstawić następująco: <table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>. Warto również zauważyć, że zgodnie z zaleceniami W3C, użycie odpowiednich znaczników w tabelach jest kluczowe dla zapewnienia właściwej dostępności i semantyki dokumentu HTML, co jest zgodne z dobrymi praktykami tworzenia stron internetowych.

Pytanie 23

Aby zdefiniować krój czcionki w stylu CSS, należy użyć właściwości:

text-family

text-style

font-style

font-family

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Krój (rodzinę) czcionki ustawia w CSS właściwość <code>font-family</code>. Podaje się w niej nazwę czcionki, a zwykle także listę zapasowych i ogólną rodzinę, na przykład <code>font-family: Arial, sans-serif</code> - przeglądarka użyje pierwszej dostępnej. Pozwala to zachować spójny wygląd tekstu nawet, gdy konkretna czcionka nie jest zainstalowana. Dlatego do zdefiniowania kroju czcionki służy <code>font-family</code>.

Pytanie 24

W języku JavaScript funkcja getElementById odnosi się do

A. elementu HTML z określoną nazwą klasy

B. elementu HTML z podanym id

C. klasy zdefiniowanej w CSS

D. zmiennej numerycznej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementById w języku JavaScript jest kluczowym narzędziem do manipulacji DOM (Document Object Model), które pozwala deweloperom na łatwe odwoływanie się do konkretnych elementów HTML za pomocą ich atrybutu id. Dzięki temu, możemy dynamicznie zmieniać treść, style lub atrybuty tych elementów, co jest niezwykle przydatne w tworzeniu interaktywnych stron internetowych. Na przykład, jeśli mamy element HTML z atrybutem id='header', możemy użyć `document.getElementById('header')` do uzyskania do niego dostępu. To podejście jest zgodne z zasadami poprawnej struktury HTML, gdzie atrybut id powinien być unikalny w obrębie dokumentu. Rekomendowane jest, aby id było zrozumiałe i jasno określało zawartość elementu, co ułatwia późniejszą nawigację i skrypty, a także poprawia dostępność strony. W praktyce, korzystając z getElementById, możemy na przykład zmieniać tekst nagłówka: `document.getElementById('header').innerText = 'Nowy nagłówek';`.

Pytanie 25

W CSS wartości: underline, overline, blink są powiązane z atrybutem

A. text-style

B. font-style

C. text-decoration

D. font-weight

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut text-decoration w CSS jest tym, co pozwala na dodawanie różnych efektów do tekstu. Możemy dzięki niemu użyć takich rzeczy jak underline, overline czy nawet blink, chociaż to ostatnie nie jest już zbyt popularne, bo wiele przeglądarek to ignoruje ze względu na dostępność. Dzięki tym efektom tekst może wyglądać bardziej estetycznie, a czytelność też się poprawia. Na przykład, jeśli użyjesz 'p { text-decoration: underline; }', to cały tekst w tym paragrafie będzie podkreślony. W CSS3 dodano też nowe możliwości, jak text-decoration-color czy text-decoration-style, co daje jeszcze większą kontrolę nad tym, jak nasz tekst będzie wyglądał. Dlatego myślę, że umiejętność korzystania z text-decoration jest naprawdę ważna dla każdego, kto zajmuje się tworzeniem stron internetowych.

Pytanie 26

W języku CSS zdefiniowano następujące formatowanie:

 h1 i {color: red;}

Kolorem czerwonym zostanie zapisany

A. tylko tekst pochylony we wszystkich poziomach nagłówków.

B. tylko tekst pochylony nagłówka pierwszego stopnia.

C. cały tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu.

D. cały tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, niezależnie od tego, w którym miejscu strony się znajduje.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłową odpowiedzią jest, że kolorem czerwonym zostanie zapisany tylko tekst pochylony nagłówka pierwszego stopnia. W CSS, gdy mówimy o selektorach potomków, odnosimy się do elementów, które są bezpośrednio lub niebezpośrednio umieszczone wewnątrz innego elementu. W przedstawionym kodzie CSS: h1 i {color: red;}, selektor pochylonego tekstu () wewnątrz nagłówka pierwszego stopnia (<h1>) jest selektorem potomka. Oznacza to, że reguła dotyczy tylko tych elementów , które są umieszczone wewnątrz elementu <h1>. Właściwość 'color: red;' zmienia kolor tych elementów na czerwony. Istotne jest zrozumienie, że ta reguła nie wpływa na inne elementy strony, takie jak zwykły tekst w nagłówku h1 czy tekst pochylony w innych miejscach dokumentu. W praktyce, nauka zrozumienia i stosowania selektorów potomków w CSS jest kluczowa dla skutecznego i precyzyjnego formatowania elementów na stronie.

Pytanie 27

Które z formatowań nie jest wyrażone w języku CSS?

A. Formatowanie 2

B. Formatowanie 3

C. Formatowanie 4

D. Formatowanie 1

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrałeś Formatowanie 3 i to jest zgodne z ideą pytania, bo właśnie tam zastosowano atrybut HTML `bgcolor`, który nie korzysta z mechanizmu CSS. W tym fragmencie mamy zapis `<body bgcolor="yellow">`. To jest tzw. prezentacyjne rozszerzenie HTML, które było popularne w bardzo starych wersjach specyfikacji (HTML 3.2, wczesne 4.0), ale obecnie jest traktowane jako przestarzałe i niezalecane (deprecated). Kolor tła jest tu definiowany bezpośrednio w znaczniku HTML, a nie w osobnym arkuszu stylów ani nawet w atrybucie `style`. Z punktu widzenia dzisiejszych standardów W3C i dobrych praktyk front‑endowych, formatowanie wyglądu powinno być przeniesione do CSS. W pozostałych formatach użyto już języka CSS, tylko w różnych miejscach. Formatowanie 1 wykorzystuje styl wbudowany w dokument w sekcji `<style>...</style>` w pliku HTML. Taki kod jest jak najbardziej CSS: selektor `body` i deklaracja `background-color: yellow;`. Formatowanie 2 przenosi ten sam zapis do zewnętrznego arkusza stylów, np. `formatowanie.css`. To jest obecnie uznawane za najbardziej eleganckie i skalowalne rozwiązanie, bo rozdziela strukturę (HTML) od prezentacji (CSS). Formatowanie 4 używa atrybutu `style` wewnątrz znacznika `<body>`: `style="background-color: yellow;"`. W środku atrybutu też znajduje się pełnoprawny kod CSS, tylko zapisany inline. Technicznie jest to CSS, choć z mojego doświadczenia warto go używać raczej oszczędnie, np. do szybkich testów lub jednostkowych wyjątków. W praktyce, przy tworzeniu nowoczesnych stron WWW, wszystkie ustawienia kolorów, marginesów, czcionek itd. trzymamy w arkuszach stylów. Atrybuty typu `bgcolor`, `align`, `font` i podobne są uznawane za złą praktykę, bo mieszają zawartość z prezentacją i utrudniają późniejszą modyfikację wyglądu. Dlatego poprawna odpowiedź pokazuje właśnie przykład starego, nie‑CSS‑owego formatowania.

Pytanie 28

Wybierz prawidłowy sposób umieszczania komentarzy w kodzie źródłowym HTML

A. -- informacje komentarza --

B.

C. "" informacje komentarza ""

D. /* informacje komentarza */

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny komentarz w HTML musi być zapisany dokładnie w formie: . To jest jedyny format zgodny ze specyfikacją HTML (HTML5, ale też starsze wersje). Przeglądarka traktuje wszystko, co znajduje się między ciągiem znaków , jako komentarz, czyli tego nie wyświetla użytkownikowi i nie interpretuje jako kod. Dzięki temu można w kodzie zostawiać sobie uwagi, opisy sekcji, tymczasowo coś „wyłączyć” albo oznaczyć fragment do późniejszej edycji. W praktyce stosuje się np.:  albo . Moim zdaniem komentarze są szczególnie ważne w większych projektach, bo po miesiącu naprawdę trudno pamiętać, po co była jakaś dziwna konstrukcja w HTML. Warto też wiedzieć, że w HTML nie stosujemy ani //, ani /* */ jak w JavaScript czy CSS. To są inne języki, inne reguły. Jeżeli wstawisz coś w stylu , to cały ten akapit jest ignorowany przez przeglądarkę, co jest wygodne przy testowaniu. Dobra praktyka jest też taka, żeby nie przesadzać z ilością komentarzy, ale tam gdzie struktura jest mniej oczywista (np. zagnieżdżone divy, rozbudowane formularze), lepiej dodać krótki, konkretny opis. W projektach komercyjnych często używa się komentarzy do oznaczania sekcji layoutu, np. , , co ułatwia pracę całemu zespołowi. W skrócie: tylko zapis z nawiasami ostrymi i myślnikami, czyli , jest w HTML prawidłowy i rozpoznawany jako komentarz.

Pytanie 29

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. SVG

B. ACE

C. GIF

D. SWF

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format ACE (Archive Compressed Enhanced) jest formatem archiwum, który służy do kompresji danych, a nie do przechowywania animacji. W przeciwieństwie do formatów takich jak SWF, SVG czy GIF, ACE nie jest projektowany do obsługi grafiki ruchomej. SWF to format opracowany przez Adobe, który jest używany do tworzenia i wyświetlania animacji we Flashu. SVG to wektorowy format grafiki, który również wspiera animacje za pomocą CSS i JavaScript. GIF, z kolei, jest jednym z najpopularniejszych formatów do zapisu prostych animacji, dzięki możliwości przechowywania wielu klatek w jednym pliku. Zrozumienie różnic między tymi formatami jest istotne w kontekście tworzenia treści multimedialnych, a także w kontekście ich zastosowań w sieci. Wybór odpowiedniego formatu do animacji może mieć wpływ na wydajność ładowania strony, jakość wizualną oraz możliwości interakcji z użytkownikami.

Pytanie 30

Który kod oznacza kolor o odcieniu NIEBIESKIM?

#0000EE

#EE00EE

#00EE00

#EE0000

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W zapisie <code>#RRGGBB</code> ostatnia para to niebieski. <code>#0000EE</code> ma zerowy czerwony i zielony, a wysoką składową niebieską - więc kolor jest NIEBIESKI. Dlatego niebieski to <code>#0000EE</code>.

Pytanie 31

Którego selektora użyć, aby sformatować WSZYSTKIE obrazy znajdujące się w akapicie?

p.img

p img

p + img

p # img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby ostylować wszystkie obrazy zawarte w akapicie, używa się selektora potomka - dwóch nazw oddzielonych SPACJĄ: <code>p img</code>. Spacja oznacza „dowolny <code><img></code> gdziekolwiek wewnątrz <code><p></code>”. Dlatego poprawny jest <code>p img</code>.

Pytanie 32

Której właściwości CSS należy użyć, aby ustawić marginesy wewnętrzne elementu?

hight

width

padding

margin

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Marginesy WEWNĘTRZNE - odstęp między treścią elementu a jego obramowaniem - ustawia w CSS <code>padding</code>, np. <code>padding: 10px;</code> daje 10 px wolnego miejsca dookoła treści wewnątrz ramki. To część modelu pudełkowego (box model). Zapamiętaj różnicę: <code>padding</code> jest WEWNĄTRZ ramki, a <code>margin</code> na ZEWNĄTRZ.

Pytanie 33

Jak ustawić tło body obrazem rys.png, powtarzanym TYLKO w poziomie?

background-image: url("rys.png"); background-repeat: repeat;

background-image: url("rys.png"); background-repeat: repeat-x;

background-image: url("rys.png"); background-repeat: repeat-y;

background-image: url("rys.png"); background-repeat: round;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Powtarzanie obrazu tła reguluje <code>background-repeat</code>. Wartość <code>repeat-x</code> powiela obraz TYLKO w poziomie (wzdłuż osi X), tworząc poziomy pas. Dlatego tło powtarzane jedynie w poziomie daje <code>background-repeat: repeat-x</code>.

Pytanie 34

Której wartości właściwości background-attachment użyć, aby tło pozostało nieruchome względem okna przeglądarki?

local

inherit

fixed

scroll

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wartość <code>fixed</code> właściwości <code>background-attachment</code> „przykleja” tło do okna przeglądarki - przy przewijaniu strony obraz tła pozostaje nieruchomy, a treść przesuwa się po nim (efekt paralaksy). Dlatego nieruchome tło ustawia <code>fixed</code>.

Pytanie 35

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>

A. href = "r2"

B. href = "#r2"

C. href = "sekcja2"

D. href = "#sekcja2"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś 'href="#r2"', co jest poprawne, ponieważ w HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. W tym przypadku, miejsce docelowe to identyfikator (id) elementu na tej samej stronie. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. W tym konkretnym przypadku, 'r2' jest identyfikatorem rozdziału 2 na stronie, dlatego 'href="#r2"' skieruje odnośnik do tego rozdziału. W praktyce, używanie identyfikatorów pozwala na tworzenie skomplikowanych stron z wieloma sekcjami, gdzie odsyłacze umożliwiają łatwe i szybkie nawigowanie. To jest zgodne ze standardami i dobrymi praktykami dla tworzenia stron internetowych.

Pytanie 36

W instrukcjach, których celem jest odtwarzanie dźwięku na stronie internetowej jako tła muzycznego, nie stosuje się atrybutu

A. href="c:/100.wav"

B. balance="10"

C. volume="-100"

D. loop="10"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut href w kontekście dźwięku na stronie internetowej jest używany w tagu <audio> lub <source>, aby wskazać lokalizację pliku audio. Pliki dźwiękowe, które mają być odtwarzane w przeglądarkach, powinny być dostępne pod adresem URL, a nie w lokalnym systemie plików, jak w przypadku href='c:/100.wav'. Standardy W3C oraz HTML5 określają, że pliki audio powinny być dostępne przez HTTP lub HTTPS, co pozwala na ich odtwarzanie zdalnie. Jeśli plik audio znajduje się na lokalnym dysku, nie będzie on dostępny dla użytkowników odwiedzających stronę poprzez Internet. Przykładem poprawnego użycia atrybutu href jest wskazanie pliku dźwiękowego, który jest hostowany na serwerze, na przykład href='http://example.com/audio/track1.mp3'. Ponadto, do kontrolowania odtwarzania dźwięku można wykorzystać inne atrybuty jak autoplay, loop, czy controls, które pozwalają na lepsze zarządzanie interakcją użytkownika z muzyką na stronie.

Pytanie 37

W HTML atrybut alt w tagu img służy do określenia

A. napisu, który będzie widoczny pod obrazem

B. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie

C. lokalizacji i nazwy pliku źródłowego obrazu

D. tekstu, który pojawi się, gdy obrazek nie może być załadowany

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, która wskazuje, że atrybut alt znacznika img w języku HTML definiuje tekst, który będzie wyświetlony, jeśli grafika nie może być poprawnie załadowana, jest całkowicie poprawna. Atrybut alt jest kluczowym elementem dostępności w sieci, ponieważ dostarcza użytkownikom alternatywne informacje o zawartości obrazu, co jest szczególnie ważne dla osób korzystających z czytników ekranu. Na przykład, jeśli zdjęcie w artykule nie jest dostępne z powodu problemów z łączem internetowym, atrybut alt zapewnia kontekst, dzięki czemu użytkownik jest informowany o tym, co miało być przedstawione. Dobre praktyki zalecają, aby tekst w atrybucie alt był zwięzły, ale jednocześnie dostarczał wystarczających informacji o obrazie. Warto również zauważyć, że stosowanie atrybutu alt wspiera SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki mogą używać tych informacji do indeksowania treści. Przykład: <img src='example.jpg' alt='Zdjęcie pięknego krajobrazu górskiego'>.

Pytanie 38

Co można powiedzieć o wyświetlonym przez witrynę tekście "test kolorów"?

<p id="p1" style="color:blue;">test kolorów</p>
<button type="button"
  onclick="document.getElementById('p1').style.color='red'">
  test</button>

A. Po wciśnięciu przycisku test kolor tekstu jest czerwony.

B. Po wciśnięciu przycisku test kolor tekstu jest niebieski.

C. Wciskanie przycisku test sprawia, że kolor tekstu jest na przemian niebieski i czerwony.

D. Zaraz po załadowaniu witryny kolor tekstu jest czerwony.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zauważyłem, że w kodzie HTML kolor tekstu na początku jest niebieski. Jest to ustawione w atrybucie style dla elementu o id='p1'. Po kliknięciu w przycisk, uruchamia się funkcja JavaScript, która zmienia kolor na czerwony. Ta funkcja jest przypisana w atrybucie onclick. Takie podejście to świetny sposób na interakcję użytkownika z witryną, korzystając ze skryptów JavaScript. Myślę, że to bardzo dobry przykład, który pokazuje, jak można robić interaktywne elementy na stronach. Wiedza na ten temat może pomóc lepiej zrozumieć, jak działają strony internetowe i co można zrobić z JavaScriptem.

Pytanie 39

Którego znacznika użyć, aby przejść do nowej linii tekstu BEZ tworzenia akapitu?

</b>

</br>

<br>

<p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <code><br></code> wymusza przejście do nowej linii w obrębie tego samego bloku tekstu, bez tworzenia nowego akapitu (i bez dodatkowego odstępu, jaki daje <code><p></code>). To element pusty, bez znacznika zamykającego. Dlatego nową linię bez akapitu daje <code><br></code>.

Pytanie 40

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

B. td, th { background-color: Pink; }

C. tr:hover { background-color: Pink; }

D. tr:active { background-color: Pink; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Rozpocznij nowy egzamin Powrót do strony głównej