Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 15 czerwca 2026 11:58
Data zakończenia: 15 czerwca 2026 12:18

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Wskaż poprawne stwierdzenie dotyczące przedstawionego kodu HTML.
<video width="640" height="480" controls>
<source src="animacja.mp4" type="video/mp4">
</video>

A. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.

B. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.

C. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

D. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.

Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć dokładnie rozdzielczość 640x480 pikseli, co jest nieprawdziwe. Format <video> w HTML umożliwia odtwarzanie filmów w różnych rozdzielczościach, a przeglądarka automatycznie dostosuje odtwarzanie w zależności od dostępnych zasobów i jakości pliku wideo. Drugie stwierdzenie, że użytkownik nie będzie miał możliwości sterowania odtwarzaniem, jest sprzeczne z definicją atrybutu 'controls', który dodaje elementy sterujące do odtwarzacza, takie jak play, pause i seek. Trzecie stwierdzenie odnosi się do lokalizacji pliku, podczas gdy w rzeczywistości plik animacja.mp4 może być lokalizowany w różnych folderach, a nie tylko w ścisłej ścieżce bezwzględnej. HTML5 wprowadza wiele standardów i uproszczeń, a deweloperzy są zobowiązani do przestrzegania tych standardów, aby zapewnić, że ich treści będą dostępne na różnych platformach. Typowe błędy myślowe prowadzące do takich wniosków obejmują nieznajomość zasad działania znaczników HTML oraz niepełne zrozumienie mechanizmów, jakie przeglądarki stosują w kontekście odtwarzania multimediów.

Pytanie 2

Aby ustawić marginesy wewnętrzne elementu: górny 50px, prawy 20px, dolny 40px, lewy 30px, należy użyć deklaracji CSS:

padding: 20px 40px 30px 50px;

padding: 50px 40px 20px 30px;

padding: 30px 20px 40px 50px;

padding: 50px 20px 40px 30px;

Skrócony zapis padding z czterema wartościami przyjmuje je w kolejności zgodnej z ruchem wskazówek zegara: góra, prawo, dół, lewo (TRBL). Dla marginesów górny 50, prawy 20, dolny 40, lewy 30 daje to padding: 50px 20px 40px 30px;. Wartości rozdziela się spacjami, nie przecinkami. Dlatego poprawna jest ta deklaracja.

Pytanie 3

Kolor zapisany w notacji szesnastkowej #0000FF to:

A. czerwony

B. zielony

C. niebieski

D. czarny

Zapis szesnastkowy koloru ma postać #RRGGBB, gdzie każda para cyfr (00-FF) to składowa: czerwona, zielona i niebieska. W #0000FF składowe R i G są zerowe (00), a niebieska maksymalna (FF = 255), więc powstaje czysty niebieski. To odpowiednik zapisu rgb(0, 0, 255). Znajomość skrajnych wartości (00 i FF) pozwala szybko rozpoznać kolory podstawowe. Dlatego #0000FF to niebieski.

Pytanie 4

Za pomocą którego protokołu można bezpiecznie (z szyfrowaniem) przesłać pliki strony internetowej na serwer WWW?

A. POP3

B. Telnet

C. IMAP

D. SFTP

SFTP (SSH File Transfer Protocol) przesyła pliki w ramach sesji SSH, dlatego cała komunikacja - zarówno dane plików, jak i login oraz hasło - jest szyfrowana. To właśnie czyni go bezpiecznym sposobem na wgranie plików witryny (HTML, CSS, JavaScript, grafik) na serwer WWW: nawet w sieci publicznej nikt postronny nie odczyta przesyłanej zawartości ani danych logowania. SFTP działa na jednym połączeniu (domyślnie port 22) i pozwala nie tylko kopiować pliki, ale też tworzyć katalogi, zmieniać nazwy czy usuwać pliki na serwerze. Dlatego przy publikacji strony, gdy zależy nam na poufności transferu, wybieramy SFTP zamiast klasycznego, nieszyfrowanego FTP.

Pytanie 5

Po przeprowadzeniu walidacji dokumentu HTML pojawił się błąd przedstawiony na zrzucie. Jak można go usunąć?

A. dodać atrybut alt do grafiki

B. w znaczniku img zmienić nazwę atrybutu src na href

C. w znaczniku img zmienić nazwę atrybutu src na alt

D. zmienić zapis </h1> na <h1>

Atrybut alt w znaczniku img jest kluczowym elementem poprawnego i dostępnego kodu HTML. Służy on do dostarczenia tekstowego opisu zawartości obrazu co jest niezwykle ważne dla osób korzystających z technologii asystujących takich jak czytniki ekranu. Dodanie atrybutu alt poprawia również indeksowanie strony przez wyszukiwarki internetowe co wpływa na SEO. Zgodnie z wytycznymi W3C oraz WCAG każda grafika powinna posiadać ten atrybut aby zapewnić dostępność treści. Przykładowo jeśli obraz przedstawia logo firmy alt powinien zawierać nazwę firmy. W przypadku obrazów dekoracyjnych atrybut alt może być pusty co sygnalizuje że obraz nie niesie istotnej informacji. Takie praktyki wspierają budowanie witryn przyjaznych i zgodnych ze standardami co jest nie tylko wymogiem prawnym w wielu jurysdykcjach ale także dobrym nawykiem programistycznym. W związku z tym dodanie atrybutu alt jest nie tylko środkiem do eliminacji błędu walidacji ale również krokiem w stronę odpowiedzialnego tworzenia treści internetowych.

Pytanie 6

Aby umożliwić wybór kilku opcji jednocześnie w rozwijanej liście formularza HTML, należy dodać atrybut do znacznika select

A. size

B. multiple

C. value

D. disabled

Atrybut multiple w znaczniku select w HTML to super sprawa, bo dzięki niemu można zaznaczyć więcej niż jedną opcję z listy rozwijalnej. To się przydaje, jak ktoś musi wybrać kilka elementów w formularzu. Jak dodasz atrybut multiple, to przeglądarka pokazuje to jako pole do wyboru, gdzie można klikać na kilka wartości za pomocą klawiszy Ctrl albo Shift. Fajnie, że ten atrybut nie wymaga żadnych dodatkowych wartości, wystarczy, że go wrzucisz do znacznika select. To zgodne z dobrymi praktykami UX, bo pozwala na większą elastyczność i interaktywność formularzy. Co więcej, nie trzeba być programistycznym guru, żeby to wdrożyć, więc każdy może to zrobić. Używa się go w różnych aplikacjach webowych, zwłaszcza tam, gdzie zbieranie danych od użytkowników w prosty i przejrzysty sposób jest ważne.

Pytanie 7

Projektant stworzył logo dla witryny internetowej. Jest to czarny symbol na przezroczystym tle. Aby zachować wszystkie cechy obrazu i umieścić go na stronie, projektant powinien zapisać obraz w formacie

A. CDR

B. BMP

C. PNG

D. JPEG

Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla grafiki internetowej, zwłaszcza gdy zależy nam na zachowaniu przezroczystości tła, co jest kluczowe w przypadku logotypów. PNG obsługuje kompresję bezstratną, co oznacza, że nie utracimy jakości obrazu przy zapisywaniu go. To szczególnie ważne w kontekście logo, które często musi być skalowane do różnych rozmiarów, a wszelkie zniekształcenia mogą wpłynąć na jego rozpoznawalność. Dodatkowo, format PNG pozwala na uzyskanie pełnej gamy kolorów, w tym przezroczystości w formacie RGBA. W praktyce oznacza to, że możesz umieścić czarny znak na dowolnym tle, a jego kształt zawsze zachowa wyrazistość oraz ostrość. Warto również zauważyć, że PNG jest wspierany przez wszystkie nowoczesne przeglądarki internetowe i systemy operacyjne, co czyni go wszechstronnym wyborem dla twórców stron internetowych. Standard PNG, opublikowany przez W3C, jest uznawany za jedno z najbardziej efektywnych rozwiązań dla grafiki w sieci.

Pytanie 8

W kaskadowych arkuszach stylów do oznaczenia selektora klasy wykorzystuje się symbol

A. *

B. #

C. : (dwukropek)

D. . (kropka)

Odpowiedzi #, *, oraz : nie są poprawne w kontekście definicji selektorów klas w CSS. Symbol # jest używany do definiowania selektorów identyfikatorów, co oznacza, że w przypadku elementu z identyfikatorem 'element1', selektor w CSS będzie wyglądał tak: #element1. Identyfikatory są unikalne dla danego elementu w dokumencie i mogą być używane tylko raz, co sprawia, że są mniej elastyczne w porównaniu do klas. Użycie identyfikatorów jest często niezalecane, gdyż prowadzi do mniejszej reużywalności stylów. Z kolei symbol * jest selektorem uniwersalnym, który odnosi się do wszystkich elementów na stronie. Chociaż może być użyteczny w pewnych sytuacjach, jego nadużywanie może prowadzić do spadku wydajności, zwłaszcza w większych projektach, ponieważ styluje każdy element w dokumencie. Ostatni symbol : jest używany w pseudo-klasach i pseudo-elementach, takich jak :hover czy ::before, które pozwalają na stylizację elementów w specyficznych stanach lub na dodawanie stylów do części elementu. Pojęcia te są często mylone z klasami, co prowadzi do błędnych wniosków i nieefektywnego zarządzania stylem. Używanie właściwych selektorów jest kluczowe dla utrzymania dobrze zorganizowanego i wydajnego kodu CSS.

Pytanie 9

Który atrybut należy wstawić w miejsce kropek, aby przeglądarka wyświetliła komunikat o błędzie w przypadku kliknięcia przycisku "Zapisz" bez wypełnionego pola nazwisko?

<form action="/skrypt.php" method="post">
  <input type="text" name="nazwisko" ...>
  <input type="submit" value="Zapisz">
</form>

A. checked

B. required

C. disable

D. pattern

Poprawną odpowiedzią jest atrybut „required”. Ten atrybut jest częścią wbudowanego mechanizmu walidacji formularzy HTML5 po stronie przeglądarki. Jeśli dodasz go do pola typu input, textarea czy select, przeglądarka automatycznie sprawdzi, czy użytkownik coś tam wpisał lub wybrał, zanim pozwoli wysłać formularz. W naszym przykładzie: <input type="text" name="nazwisko" required> sprawi, że kliknięcie przycisku „Zapisz” bez wypełnionego nazwiska wywoła komunikat błędu i formularz nie zostanie wysłany. To działa bez żadnego JavaScriptu i bez dodatkowego kodu po stronie serwera.
Moim zdaniem warto pamiętać, że „required” to nie tylko wygoda, ale też dobra praktyka UX – użytkownik od razu widzi, czego brakuje, a nie dopiero po przeładowaniu strony. Standard HTML5 jasno opisuje ten atrybut jako tzw. boolean attribute, czyli taki, który samą swoją obecnością w znaczniku włącza daną funkcję. Nie trzeba pisać required="required", chociaż przeglądarka i tak to zrozumie.
W praktyce używa się go bardzo często w formularzach rejestracji, logowania, zamówień: imię, nazwisko, e‑mail, hasło – wszędzie tam, gdzie pole jest obowiązkowe. Dobrze jest łączyć required z innymi atrybutami walidacyjnymi, np. type="email" czy pattern, żeby od razu kontrolować nie tylko to, czy coś wpisano, ale też czy ma poprawny format. Mimo wszystko, nawet przy użyciu required, nigdy nie wolno rezygnować z walidacji po stronie serwera, bo walidacja w przeglądarce może być wyłączona albo ominięta. Required traktuj jako pierwszą linię obrony i wygodne wsparcie dla użytkownika, a nie jedyne zabezpieczenie.

Pytanie 10

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Która część kodu HTML odnosi się do pierwszego wiersza tabeli?

A. B

B. D

C. C

D. A

Niepoprawne podejścia w odpowiedziach A, B i C wynikają z błędnego zastosowania znaczników HTML, co wpływa na sposób, w jaki przeglądarka interpretuje dane w tabeli. Odpowiedź A używa znaczników <td> zamiast <th> do definiowania nagłówków kolumn. Znacznik <td> jest przeznaczony do zwykłych komórek tabeli, co sprawia, że przeglądarka nie traktuje ich jako nagłówków, przez co nie są wstępnie formatowane jako pogrubione i wyśrodkowane. To podejście narusza zasady semantyki HTML, ponieważ nagłówki powinny być jasno zdefiniowane za pomocą <th>, co wspiera dostępność i zrozumienie struktury danych. Odpowiedź B, mimo że używa <th>, stosuje dodatkowo <i>, co zmienia styl na kursywę, a to nie odpowiada formatowi wizualnemu przedstawionemu w pytaniu. Użycie <i> może być mylące, jeśli nie jest to zgodne z oczekiwanym stylem, i może powodować problemy z dostępnością. Wreszcie, odpowiedź C używa <center>, co jest przestarzałym sposobem na wyrównanie treści w HTML. Zamiast tego, stylowanie powinno być osiągane za pomocą CSS, co jest zgodne z nowoczesnymi standardami projektowania stron i wspiera lepszą separację struktury od prezentacji. Wszystkie te podejścia pokazują, jak ważne jest stosowanie semantycznych elementów HTML dla poprawności i dostępności stron internetowych, a jednocześnie podkreślają znaczenie zgodności z aktualnymi standardami sieciowymi.

Pytanie 11

W przedstawionym kodzie HTML ukazany styl CSS to styl:

<p style="color: red;">To jest przykładowy akapit.</p>

A. dynamiczny.

B. zewnętrzny.

C. nagłówkowy.

D. lokalny.

Odpowiedź "lokalnym" jest prawidłowa, ponieważ styl CSS zastosowany w podanym kodzie HTML definiuje właściwości stylu bezpośrednio w elemencie HTML, co określamy jako styl lokalny (inline style). W tym przypadku, styl "color: red;" został zastosowany bezpośrednio w tagu <p>, co wpływa wyłącznie na ten konkretny akapit. Praktyczne zastosowanie lokalnych stylów polega na tym, że można je szybko dodać do pojedynczych elementów, ale należy pamiętać, że nadmiar lokalnych stylów może prowadzić do problemów z utrzymywaniem i zarządzaniem kodem. Zamiast tego zaleca się stosowanie zewnętrznych arkuszy stylów CSS, co pozwala na centralne zarządzanie stylami dla całej strony. Warto zauważyć, że lokalne style mają wyższy priorytet niż style zewnętrzne, co może prowadzić do konfliktów, jeśli nie zostaną odpowiednio użyte. Aby zapewnić zgodność z najlepszymi praktykami, zaleca się ograniczanie stosowania lokalnych stylów tam, gdzie to możliwe, na rzecz bardziej zorganizowanego podejścia z użyciem klas i identyfikatorów w zewnętrznych arkuszach stylów.

Pytanie 12

Aby przekształcić obraz w formacie PNG tak, by jego tło stało się przezroczyste, wymagane jest

A. dodanie kanału alfa.

B. zapisanie go w formacie BMP.

C. ulepszenie nasycenia kolorów.

D. odpowiednie przycięcie.

Odpowiedzi takie jak odpowiednie kadrowanie, poprawienie saturacji barw czy zapisanie obrazu w formacie BMP, nie są właściwe w kontekście uzyskania przezroczystego tła w plikach PNG. Kadrowanie obrazu polega na przycięciu jego części, co nie wpływa na przezroczystość tła; jest to technika używana głównie do zmiany kompozycji obrazu, a nie jego struktury. Z kolei poprawa saturacji barw odnosi się do intensywności kolorów w obrazie, ale nie ma ona związku z przezroczystością. Saturacja wpływa na to, jak żywe i intensywne są kolory, lecz nie zmienia informacji dotyczących przezroczystości w obrazie. Zapisanie pliku w formacie BMP, który nie obsługuje kanałów alfa, spowoduje utratę informacji o przezroczystości. BMP to format rastrowy, który przechowuje dane wizualne bez wsparcia dla przezroczystości, co czyni go nieodpowiednim wyborem dla obrazów wymagających przezroczystości tła. Warto zrozumieć, że do osiągnięcia efektu przezroczystości w obrazach, format PNG oraz wykorzystanie kanału alfa są standardami branżowymi, które powinny być stosowane w każdym profesjonalnym procesie edycji grafiki.

Pytanie 13

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>

A. A

B. B

C. D

D. C

Prawidłowa odpowiedź to D ponieważ kod HTML formularza definiuje trzy pola wyboru typu checkbox z różnymi atrybutami wpływającymi na ich stan początkowy. Pierwsze pole wyboru dotyczące sporządzania dokumentacji posiada atrybuty disabled i checked co oznacza że będzie zaznaczone ale nieaktywne dla użytkownika. Oznacza to że użytkownik nie może zmienić jego stanu w przeglądarce. Drugie pole dotyczące pisania kodu ma tylko atrybut checked co oznacza że będzie zaznaczone i dostępne do edycji. Trzecie pole dotyczące testów oprogramowania nie posiada żadnego z tych atrybutów więc będzie domyślnie niezaznaczone i edytowalne. To zachowanie jest zgodne ze standardami HTML i dobrymi praktykami kodowania gdzie atrybuty kontrolują interakcje użytkownika z formularzami. Wiedza ta jest kluczowa dla projektantów stron internetowych aby zapewnić prawidłowe działanie formularzy i poprawne doświadczenie użytkownika. Formularze są podstawowym elementem interakcji z użytkownikiem dlatego zrozumienie ich działania jest niezbędne w tworzeniu funkcjonalnych i intuicyjnych interfejsów użytkownika.

Pytanie 14

Aby edytować nakładające się na siebie pojedyncze fragmenty grafiki, pozostawiając resztę bez zmian, należy zastosować:

A. histogram

B. kanał alfa

C. warstwy

D. kadrowanie

Warstwy to podstawowy mechanizm edytorów grafiki (np. GIMP, Photoshop): każdy element umieszcza się na osobnej warstwie, niczym na przezroczystej folii, a leżące wyżej zasłaniają niższe. Dzięki temu można edytować, przesuwać lub ukrywać pojedynczy fragment, nie naruszając pozostałych. To właśnie warstwy pozwalają pracować nad nakładającymi się elementami niezależnie - i dlatego są poprawną odpowiedzią.

Pytanie 15

Którego znacznika HTML użyć, aby tekst miał czcionkę o stałej szerokości i zachował dodatkowe spacje, tabulacje oraz znaki końca linii?

<ins> ... </ins>

<blockquote> ... </blockquote>

<code> ... </code>

<pre> ... </pre>

Znacznik <pre> (preformatted) wyświetla tekst czcionką o stałej szerokości i ZACHOWUJE formatowanie źródłowe: dodatkowe spacje, tabulacje i znaki końca linii (których HTML normalnie by „zwinął”). Dlatego idealnie nadaje się do fragmentów kodu czy tekstu z wyrównaniem. Zapamiętaj: <pre> = „pokaż dokładnie tak, jak napisałem”.

Pytanie 16

W CSS, aby zastosować efekt przekreślenia, a także podkreślenia dolnego lub górnego w tekście, należy użyć

A. text-align

B. text-transform

C. text-indent

D. text-decoration

Odpowiedź 'text-decoration' jest prawidłowa, ponieważ ta właściwość CSS umożliwia dodawanie różnych efektów dekoracyjnych do tekstu, takich jak przekreślenie, podkreślenie oraz nadkreślenie. Przykładowo, aby przekreślić tekst, możesz użyć następującego kodu: 'text-decoration: line-through;'. Z kolei dla podkreślenia tekstu zastosujesz 'text-decoration: underline;'. W kontekście standardów CSS3, 'text-decoration' ma na celu nie tylko estetykę, ale także poprawę czytelności, co jest kluczowe w projektowaniu responsywnych i dostępnych stron internetowych. Warto również pamiętać o dobrych praktykach, takich jak unikanie nadmiernego stosowania dekoracji, które mogą odwracać uwagę od treści. W praktyce, kontrolowanie wyglądu tekstu za pomocą 'text-decoration' pozwala na tworzenie bardziej zróżnicowanych i atrakcyjnych interfejsów użytkownika, co w efekcie może zwiększyć zaangażowanie odwiedzających stronę.

Pytanie 17

Którego znacznika użyć do sekcji cytatu (mogącej zawierać kilka akapitów, z wcięciem)?

<indent>

<q>

<blockquote>

<blockq>

Pozostałe znaczniki nie pasują. <q> to cytat KRÓTKI, liniowy (otaczany cudzysłowami w tekście), nie blok z akapitami. <indent> i <blockq> w HTML nie istnieją. Dłuższy cytat z wcięciem to <blockquote>.

Pytanie 18

Którą właściwość CSS należy zastosować, aby uzyskać efekt rozstrzelenia (zwiększonych odstępów) między literami?

text-space

text-decoration

letter-spacing

letter-transform

Odstęp między literami ustawia właściwość letter-spacing, np. letter-spacing: 3px. Wartość dodatnia rozsuwa litery (rozstrzelenie), ujemna je zbliża. Często stosuje się ją w nagłówkach i logotypach. Dlatego efekt rozstrzelenia liter daje letter-spacing.

Pytanie 19

Wskaż, który paragraf jest sformatowany przy użyciu podanego stylu CSS:

p {
    font-family: serif;
    background-color: Teal;
    color: white;
    font-style: italic;
}

A. Paragraf 1

B. Paragraf 2

C. Paragraf 3

D. Paragraf 4

Paragraf 4 jest prawidłowo sformatowany zgodnie z przedstawionym stylem CSS. W stylu tym zastosowano cztery właściwości: font-family o wartości serif co sugeruje użycie czcionki o kroju szeryfowym background-color ustawiony na Teal co ustawia tło na ciemnozielony kolor color ustawiony na White co oznacza że tekst powinien być biały oraz font-style ustawiony na italic co powoduje że tekst jest pochylony. Paragraf 4 spełnia te kryteria jest napisany czcionką szeryfową ma ciemnozielone tło biały tekst i jest kursywą. Zastosowanie takich stylów jest częste w projektowaniu stron internetowych gdzie ważne jest czytelne i estetyczne przedstawienie informacji. Używanie odpowiednich stylów CSS pozwala na lepszą organizację wizualną treści co jest kluczowe w tworzeniu interfejsów przyjaznych dla użytkownika. Stylowanie w CSS wspiera standardy takie jak CSS3 które wprowadzają nowe właściwości i ulepszenia umożliwiające bardziej zaawansowane i wydajne metody formatowania.

Pytanie 20

Które z poniższych oprogramowań NIE jest systemem zarządzania treścią (CMS)?

A. Apache

B. Mambo

C. WordPress

D. Joomla

Pozostałe pozycje to systemy CMS. WordPress to najpopularniejszy na świecie system zarządzania treścią, używany do blogów i serwisów. Joomla to rozbudowany CMS do bardziej złożonych witryn. Mambo to starszy system CMS, z którego historycznie wywodzi się Joomla. Apache nie zarządza treścią - jest serwerem WWW udostępniającym strony - dlatego to on jest odpowiedzią poprawną.

Pytanie 21

Który z elementów jest opcjonalny w kodzie HTML5 i jego pominięcie nie spowoduje wygenerowania błędu lub ostrzeżenia walidatora HTML?

A. <!DOCTYPE html>

B. <title>Tytuł strony</title>

C. <meta name="keywords" content="">

D. <html lang="pl">

To pytanie bardzo dobrze pokazuje różnicę między elementami wymaganymi przez specyfikację HTML5 a tymi, które są tylko dodatkowymi informacjami. Wiele osób myli tu pojęcie „często używany” z „obowiązkowy” i stąd biorą się błędne odpowiedzi.

Deklaracja <!DOCTYPE html> w HTML5 jest kluczowa, bo informuje przeglądarkę, że ma interpretować dokument w trybie standardowym, zgodnie z HTML5, a nie w jakimś starym „quirks mode”. Jeśli ją pominiesz, walidator HTML będzie zgłaszał problemy, a przeglądarka może zacząć zachowywać się nieprzewidywalnie. To nie jest tylko formalność – brak doctype potrafi rozwalić działanie CSS-ów, szczególnie w starszych przeglądarkach. Dlatego w dobrych praktykach tworzenia stron WWW doctype jest zawsze na samym początku dokumentu.

Podobnie element html z atrybutem lang, np. <html lang="pl">, jest bardzo ważny z punktu widzenia dostępności (WCAG, ARIA). Określenie języka dokumentu pomaga czytnikom ekranu i narzędziom asystującym poprawnie odczytywać treść. Walidatory HTML potrafią zgłaszać ostrzeżenia, gdy lang jest pominięty, bo to narusza dobre praktyki i wytyczne dotyczące dostępności. W nowoczesnych projektach webowych brak lang jest traktowany jako błąd jakościowy, nawet jeśli strona „jakoś działa”.

Znacznik <title> w sekcji head też nie jest dowolny. Tytuł dokumentu jest wymagany przez specyfikację HTML, a jego brak może generować ostrzeżenia walidatora. Dodatkowo wpływa on na to, jak strona jest prezentowana w karcie przeglądarki, w historii, w zakładkach oraz w wynikach wyszukiwania. Z mojego doświadczenia brak tytułu to sygnał, że ktoś po prostu zaniedbuje podstawy semantyki HTML.

Element meta name="keywords" jest inny od poprzednich. To tylko dodatkowy metatag, który nie wpływa na strukturę dokumentu, nie jest wymagany przez standard i obecnie nie ma realnego znaczenia dla SEO. Typowy błąd myślowy polega na tym, że skoro „kiedyś wszyscy kazali go wpisywać”, to musi być obowiązkowy. W HTML5 to po prostu opcjonalna ciekawostka. Właśnie dlatego jedynie jego pominięcie nie spowoduje błędów ani ostrzeżeń walidatora, natomiast ignorowanie doctype, lang czy title jest wbrew dobrym praktykom tworzenia stron WWW i standardom branżowym.

Pytanie 22

Który kod oznacza kolor o odcieniu NIEBIESKIM?

#EE00EE

#EE0000

#0000EE

#00EE00

W zapisie #RRGGBB ostatnia para to niebieski. #0000EE ma zerowy czerwony i zielony, a wysoką składową niebieską - więc kolor jest NIEBIESKI. Dlatego niebieski to #0000EE.

Pytanie 23

Jaką barwę przedstawia kolor zapisany w modelu RGB(0, 255, 0)?

A. zieloną

B. żółtą

C. niebieską

D. czerwoną

W modelu RGB kolor opisują składowe czerwona (R), zielona (G) i niebieska (B), każda od 0 do 255. Zapis RGB(0, 255, 0) to maksymalna składowa zielona i zerowe pozostałe, czyli czysty zielony. Dlatego RGB(0, 255, 0) oznacza barwę zieloną.

Pytanie 24

Na co wpływa częstotliwość próbkowania?

A. na jakość cyfrowego dźwięku

B. na amplitudę fali dźwiękowej

C. na skalę głośności utworu

D. na jakość dźwięku analogowego

Próbkowanie to etap CYFRYZACJI dźwięku, więc nie dotyczy sygnału analogowego (ten jest ciągły). Nie ustala też amplitudy fali ani skali głośności - to osobne wielkości. Częstotliwość próbkowania wpływa na jakość cyfrowego dźwięku.

Pytanie 25

W HTML-u znacznik tekst będzie prezentowany przez przeglądarkę w sposób identyczny do znacznika

A. <h1>tekst</h1>

B. <b>tekst</b>

C. <sub>tekst</sub>

D. <big>tekst</big>

Znacznik <strong> w HTML jest używany do oznaczania tekstu, który ma być wyróżniony jako ważny. Jego domyślne stylizowanie w przeglądarkach polega na pogrubieniu tekstu, co jest również funkcją znacznika <b>. Oba znaczniki mają podobne zastosowanie, ale <strong> niesie dodatkowe znaczenie semantyczne, co oznacza, że informuje przeglądarki i maszyny o tym, że dany tekst jest istotny. Przykładem może być użycie <strong> w nagłówkach lub w miejscach, gdzie chcemy zwrócić uwagę na kluczowe informacje, jak np. 'Zamówienie <strong>pilne</strong> musi być dostarczone do jutra.' W kontekście dobrych praktyk zaleca się używanie znaku <strong> zamiast <b>, gdyż wspiera to dostępność i SEO - wyszukiwarki lepiej interpretują semantykę treści, co może wpłynąć na pozycjonowanie strony. Warto również pamiętać, że zgodnie z W3C, semantyka HTML ma kluczowe znaczenie dla strukturyzacji dokumentów oraz ich dostępności.

Pytanie 26

Jaki format CSS dla akapitu definiuje styl szarej ramki z następującymi cechami?

p {
  padding: 15px;
  border: 2px dotted gray; }

A. linia ciągła; grubość 2 px; marginesy między tekstem a ramką 15 px

B. linia kreskowa; grubość 2 px; marginesy poza ramką 15 px

C. linia kropkowa; grubość 2 px; marginesy między tekstem a ramką 15 px

D. linia ciągła; grubość 2 px; marginesy poza ramką 15 px

Odpowiedź numer jeden jest poprawna, ponieważ prawidłowo opisuje stylizację akapitu przy użyciu CSS zgodnie z przedstawionym kodem. Właściwość 'border' definiuje styl obramowania elementu. W tym przypadku użyto stylu 'dotted', który oznacza linię kropkowaną, o grubości 2 pikseli i kolorze szarym. Jest to użyteczne w sytuacjach, gdy chcemy wizualnie wyróżnić element, ale w sposób subtelny i nienachalny. Dodatkowo, właściwość 'padding' określa margines wewnętrzny, czyli odstęp między zawartością elementu a jego krawędzią. Zapewnienie marginesu wewnętrznego 15 pikseli pozwala tekstowi oddalić się od krawędzi obramowania, co zwiększa czytelność i estetykę. Praktyczne zastosowanie takich stylizacji można znaleźć w projektowaniu stron internetowych, gdzie często używa się różnych stylów obramowań do organizowania treści. Zgodność z dobrymi praktykami web designu zakłada użycie spójnych i intuicyjnych stylów, co poprawia doświadczenia użytkownika oraz ułatwia nawigację po stronie internetowej. Tego typu formatowanie jest zgodne ze standardami CSS, co czyni kod bardziej przewidywalnym i łatwiejszym w utrzymaniu

Pytanie 27

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. kadrowanie.

B. łączenie warstw.

C. zmiana rozmiaru.

D. lustrzane odbicie obrazu.

Kadrowanie to proces polegający na wycinaniu fragmentu obrazu w celu skupienia uwagi na określonym elemencie lub poprawienia kompozycji. W kontekście grafiki internetowej, kadrowanie jest kluczowe, aby dostosować zdjęcia do wymagań wizualnych strony, zachowując jednocześnie wysoką jakość obrazu. Przykładowo, jeśli tworzymy stronę dla restauracji, możemy wyciąć fragment zdjęcia dania, aby lepiej zaprezentować jego szczegóły. Dobre praktyki w kadrowaniu obejmują stosowanie zasady trzech, która polega na umiejscowieniu kluczowych elementów obrazu w punktach przecięcia linii podziału. Warto również pamiętać o rozdzielczości i proporcjach, aby uniknąć rozmycia lub zniekształcenia obrazu. Kadrowanie jest często używane w różnych formatach wizualnych, takich jak posty w mediach społecznościowych, banery reklamowe czy galerie zdjęć. W ten sposób, odpowiednie kadrowanie przyczynia się do lepszej prezentacji treści oraz poprawia estetykę i przejrzystość strony internetowej.

Pytanie 28

Czy możliwa jest przedstawiona transformacja obrazu rastrowego dzięki funkcji?

A. odcienie szarości

B. ustawienia jasności i kontrastu

C. zmniejszenie liczby kolorów

D. barwienie

Barwienie to proces edycji obrazu rastrowego, który polega na modyfikacji istniejących kolorów poprzez nałożenie nowego odcienia na całość lub część obrazu. Dzięki temu możemy uzyskać efekt jak na przedstawionym obrazie, gdzie oryginalne kolory zostały zastąpione jednolitą barwą. Barwienie jest powszechnie stosowane w grafice komputerowej do nadawania dramatyzmu lub zmiany nastroju obrazu, co jest szczególnie przydatne w fotografii artystycznej czy projektach reklamowych. Narzędzia takie jak Adobe Photoshop czy GIMP oferują funkcje barwienia, pozwalając artystom na twórcze eksperymenty z kolorami. Technika ta może być stosowana również w procesie tworzenia materiałów wizualnych w branży marketingowej, gdzie spójna kolorystyka jest kluczowa dla budowania rozpoznawalności marki. Ważne jest, aby pamiętać o zachowaniu naturalnego balansu i harmonii w barwach, co jest zgodne z zasadami dobrych praktyk w projektowaniu graficznym. Barwienie umożliwia również korektę kolorystyczną, co jest istotne w procesie przygotowania materiałów do druku, gdzie kolory muszą być dostosowane do specyfikacji technicznych drukarni.

Pytanie 29

Który z wymienionych programów służy do tworzenia i edycji grafiki wektorowej?

A. WordPad

B. Paint

C. Audacity

D. Corel Draw

Corel Draw to popularny program do tworzenia i edycji grafiki wektorowej, w której obraz opisują krzywe i kształty (a nie piksele), więc można go dowolnie skalować bez utraty jakości. Wykorzystuje się go m.in. do logotypów, ilustracji i materiałów do druku. Do tej samej kategorii należą Inkscape (darmowy) i Adobe Illustrator, a przeciwieństwem są edytory rastrowe, takie jak GIMP czy Photoshop. Dlatego do grafiki wektorowej służy Corel Draw.

Pytanie 30

Który z akapitów wykorzystuje opisaną właściwość stylu CSS?

A. B

B. A

C. D

D. C

Odpowiedź B jest poprawna, ponieważ właściwość CSS border-radius: 20% określa zaokrąglenie narożników elementu. W tym przypadku zastosowanie 20% promienia powoduje, że narożniki akapitu są zaokrąglone w umiarkowanym stopniu. Właściwość ta jest powszechnie wykorzystywana w projektowaniu stron internetowych, aby nadać elementom bardziej łagodny, przyjazny wygląd. Użycie procentowej wartości oznacza, że wielkość zaokrąglenia zależy od wymiarów elementu, co pozwala na zachowanie proporcji na różnych urządzeniach i przy różnych rozmiarach ekranu. Zaokrąglenie w CSS jest istotnym aspektem responsywnego designu, ponieważ może poprawiać czytelność i estetykę interfejsu użytkownika. Praktyczne zastosowania obejmują przyciski, karty, obrazki i inne elementy interfejsu, gdzie płynne linie mogą wpływać na ogólne wrażenie wizualne strony. Zrozumienie i umiejętne wykorzystanie border-radius jest częścią standardowych umiejętności projektanta stron internetowych, co również wspiera zgodność ze współczesnymi trendami w UI/UX.

Pytanie 31

Emblemat systemu CMS o nazwie Joomla! to

A. D.

B. B.

C. A.

D. C.

Logo systemu CMS Joomla! różni się od logotypów innych znanych systemów jak Drupal czy WordPress, co jest dość oczywiste. Zrozumienie ich to klucz do ogarnięcia tych platform, bo każda z nich ma swoje zastosowania i funkcje. Drupala przedstawia niebieska kropla, a to narzędzie jest naprawdę potężne do budowy złożonych systemów webowych, ale potrzeba sporej wiedzy programistycznej, więc początkujący mogą mieć z nim trudności. Z kolei WordPress z literą W w czarnym kółku to najpopularniejszy CMS, zwłaszcza wśród blogerów i małych firm, bo jest łatwy w obsłudze. Ale ten logo z pomarańczową gwiazdką nie jest związane z żadnym z tych CMS-ów, więc można się w tym pogubić. Trzeba zrozumieć różnice i jak się te systemy wizualnie identyfikuje, żeby mądrze wybierać platformy do swoich projektów. Kluczowe jest nie tylko widzieć logotypy, ale jeszcze ogarnąć, co każdy z tych systemów potrafi, żeby skutecznie je wykorzystać w pracy.

Pytanie 32

Które znaczniki HTML wyświetlą tekst „Dobre strony mojej strony” w JEDNYM wierszu, jeśli nie zastosowano żadnych reguł CSS?

<div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

<p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

<span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

<h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

Pozostałe znaczniki są BLOKOWE, więc każdy zaczyna się od nowej linii i rozbiłby tekst na osobne wiersze. Dotyczy to <p> (akapit), <h3> (nagłówek) oraz <div> (kontener). W jednym wierszu tekst utrzyma liniowy <span>.

Pytanie 33

W CSS zdefiniowano regułę

input:focus { background-color: LightGreen; }

Kiedy pole edycyjne będzie miało jasnozielone tło?

A. w każdej sytuacji

B. gdy zostanie najechane kursorem (bez kliknięcia)

C. jeśli to pierwsze wystąpienie tego elementu w dokumencie

D. po kliknięciu w nie, gdy jest aktywne do wpisywania tekstu

:focus nie odnosi się do pierwszego wystąpienia elementu ani nie działa „w każdej sytuacji”. Reakcja na samo najechanie kursorem (bez kliknięcia) to :hover, a nie :focus. Jasnozielone tło pojawi się, gdy pole stanie się aktywne do wpisywania tekstu.

Pytanie 34

Reprezentacja znacznika HTML w formacie

<a href="#hobby">przejdź</a>

A. jest błędny, użyto niewłaściwego znaku "#" w atrybucie href

B. jest błędny, w atrybucie href należy wpisać adres URL

C. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do sekcji o nazwie "hobby"

D. jest poprawny, po kliknięciu w odnośnik otworzy się strona internetowa o URL "hobby"

Zapis znacznika HTML przedstawiony w pytaniu jest poprawny i spełnia standardy języka HTML. Użycie elementu <a> z atrybutem href i wartością #hobby oznacza, że użytkownik po kliknięciu w ten link zostanie przewinięty do sekcji na stronie, która ma przypisany identyfikator "hobby". Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, umożliwiając tworzenie nawigacji wewnętrznej. Warto zaznaczyć, że użycie znaku hash (#) w atrybucie href wskazuje na lokalizację w obrębie tej samej strony. To jest powszechnie stosowane w przypadkach, gdy chcemy ułatwić użytkownikom dostęp do różnych sekcji na tej samej stronie, bez konieczności ładowania nowej strony. Przykładem zastosowania może być strona z długim artykułem, gdzie linki do poszczególnych nagłówków ułatwiają orientację czytelników. Oprócz tego, korzystając z takiej struktury, możemy również poprawić doświadczenia użytkowników oraz zwiększyć efektywność SEO, ponieważ wyszukiwarki są w stanie lepiej zrozumieć organizację treści na stronie.

Pytanie 35

W przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ

<img src="kwiat.jpg alt="kwiat">

A. wprowadzono nieznany atrybut alt

B. użyto niewłaściwego znacznika do wyświetlenia obrazu

C. nie odnaleziono pliku kwiat.jpg

D. nie zamknięto cudzysłowu

Atrybuty w znaczniku img takie jak src i alt są kluczowymi elementami do poprawnego wyświetlania obrazów w HTML. Błędne użycie znacznika do wyświetlania obrazu mogłoby oznaczać próbę użycia innego elementu HTML który nie jest przeznaczony do tego celu jednak w tym przypadku znacznikiem img jest odpowiedni wybór. Brak odnalezienia obrazu kwiat.jpg jest problemem związanym z dostępnością pliku a nie z błędem walidacji HTML. Tego typu błędy występują gdy ścieżka do pliku obrazu jest nieprawidłowa lub plik nie istnieje w określonym miejscu co nie jest związane z analizowanym problemem. Zastosowanie nieznanego atrybutu alt również nie jest przyczyną błędu ponieważ alt jest standardowym atrybutem stosowanym do opisu zawartości obrazu dla dostępności i SEO. Znaczenie alt jest szczególnie istotne w kontekście użytkowników korzystających z czytników ekranowych. Typowy błąd to nieuwzględnienie zamknięcia cudzysłowu co prowadzi do niejednoznaczności w strukturze kodu HTML i jego błędnej interpretacji przez przeglądarki. Domykanie cudzysłowów jest podstawową praktyką zapewniającą poprawność kodu i uniknięcie błędów podczas renderowania strony.

Pytanie 36

W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?

A. HTML5

B. XHTML1.0

C. HTML4

D. XHTML 2.0

HTML4 oraz XHTML 1.0 koncentrują się głównie na definiowaniu struktury dokumentów, ale nie oferują tak zaawansowanej semantyki jak HTML5. W HTML4 brak jest rozróżnienia dla elementów takich jak <header>, <footer> czy <nav>, co prowadzi do używania mniej semantycznych rozwiązań, takich jak <div>. Użycie znacznika <div> do wszelkich elementów strukturalnych może prowadzić do tzw. 'div soup', czyli zagmatwanej struktury kodu, w której trudno zrozumieć, jakie elementy pełnią jakie funkcje. XHTML 2.0, z kolei, nigdy nie zyskał na popularności, ponieważ nie został ukończony i nie przyjął się w praktyce. Jego koncepcje w dużej mierze opierały się na idei 'czystego' XML-a, co skutkowało brakiem wsparcia dla wielu istniejących rozwiązań. Tak więc, korzystanie z XHTML 1.0 lub HTML4 do budowy nowoczesnych stron internetowych może być ograniczające i niezgodne z aktualnymi standardami branżowymi. Współczesne podejście do tworzenia stron internetowych oraz najlepsze praktyki wskazują na potrzebę przyjęcia HTML5 z jego nowymi znacznikami, co sprzyja lepszej organizacji treści i poprawia doświadczenia użytkowników.

Pytanie 37

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

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

D. tr { background-color: Pink; }

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.

Pytanie 38

Aby usunąć z nagrania szmery i zakłócenia tła, należy zastosować efekt:

A. pogłosu (reverb)

B. zmiany wysokości dźwięku

C. redukcji szumów

D. normalizacji

Redukcja (usuwanie) szumów to obróbka, która analizuje stałe, niepożądane tło - szum, przydźwięk, syk - i wycisza je, pozostawiając właściwy sygnał. W edytorach audio zwykle pobiera się próbkę samego szumu, a program odejmuje go z całego nagrania. Dlatego do usunięcia szmerów i zakłóceń tła służy efekt redukcji szumów.

Pytanie 39

Metainformacja „Description” zawarta w pliku źródłowym HTML powinna zawierać

<head>
    <meta name="description" content="...">
</head>

A. informację o tym, kto jest autorem strony.

B. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

C. nazwę programu, przy użyciu którego została stworzona strona.

D. opis tego, co znajduje się na stronie.

Należy podkreślić, że choć autor strony czy program, którym strona została stworzona, to informacje mogą być ciekawe, nie są one celem metainformacji 'Description'. Informacje o autorstwie czy narzędziach służących do stworzenia strony mogą zostać uwzględnione w innych metatagach lub sekcjach strony, ale nie w 'Description'. Na przykład, metatag 'author' jest przeznaczony do wskazywania autora strony. Podobnie, informacje o oprogramowaniu, które zostało użyte do stworzenia strony, zwykle są zawarte w metatagu 'generator'. Co do wyrazów kluczowych, to choć są one istotne dla optymalizacji strony pod kątem wyszukiwarek, nie powinny być jedyną zawartością metatagu 'Description'. Kluczowe słowa powinny być raczej wplecione w naturalny, czytelny dla użytkownika opis strony. W ten sposób 'Description' staje się efektywnym narzędziem SEO, które pomaga zwiększyć ruch na stronie.

Pytanie 40

Który format NIE służy do publikacji grafiki lub animacji w internecie?

A. SVG

B. AIFF

C. PNG

D. SWF

AIFF (Audio Interchange File Format) to format pliku DŹWIĘKOWEGO, więc nie służy do publikacji grafiki ani animacji w internecie. Pozostałe wymienione formaty są graficzne lub animacyjne. Dlatego z grafiką nie ma związku AIFF.

Rozpocznij nowy egzamin

Powrót do strony głównej