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: 19 czerwca 2026 13:45
Data zakończenia: 19 czerwca 2026 14:23

Egzamin zdany!

Wynik: 20/40 punktów (50,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

Jak dołączyć do strony skrypt z pliku przyklad.js?

<script>przyklad.js</script>

<link rel="script" href="/przyklad.js">

<script src="/przyklad.js"></script>

<script link="przyklad.js"></script>

Zewnętrzny plik JavaScript podłącza się znacznikiem <script>, wskazując jego lokalizację w atrybucie src (tak jak źródło obrazu w <img>): <script src="/przyklad.js"></script>. Znacznik <script> zawsze wymaga części zamykającej, nawet gdy nie ma między tagami żadnego kodu. Dlatego poprawny jest ten zapis.

Pytanie 2

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

border-radius: 20%;

To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf

A. D.

B. A.

C. C.

D. B.

Dobra robota! Zgadłeś, że chodziło o akapit z tą właściwością CSS 'border-radius: 20%;'. Ta właściwość faktycznie zaokrągla rogi elementów, co wygląda super i sprawia, że strona jest bardziej przyjemna dla oka. Widzisz, akapit B ma te zaokrąglone rogi, a to dokładnie to, co daje nam ten styl CSS. W rzeczywistości, tylko B jest tak zrobiony na obrazku, więc wiesz, że tam zastosowano 'border-radius'. Ta wartość '20%;' mówi nam, jak mocno rogi mają być zaokrąglone. Takie rzeczy są ważne w CSS, żeby strony wyglądały estetycznie i nowocześnie.

Pytanie 3

tr:nth-child(even) {background-color: #F2F2F2;}

Zastosowane formatowanie selektora tr:nth-child(even) spowoduje:

A. wypełnienie wszystkich wierszy tabeli szarym tłem.

B. wypełnienie szarym tłem nieparzystych wierszy tabeli.

C. oddzielenie wierszy nieparzystych od parzystych wierszem z szarym tłem.

D. wypełnienie szarym tłem parzystych wierszy tabeli.

Selektor CSS tr:nth-child(even) oznacza dokładnie: wybierz wszystkie elementy <tr>, które są parzystymi dziećmi swojego rodzica, licząc od 1 w górę. W CSS funkcja nth-child() przyjmuje słowo kluczowe even dla elementów parzystych (2, 4, 6, …) i odd dla elementów nieparzystych (1, 3, 5, …). To jest zdefiniowane w specyfikacji CSS Selectors Level 3. W Twoim przykładzie even powoduje, że przeglądarka nadaje styl background-color: #F2F2F2; wszystkim parzystym wierszom tabeli, czyli 2., 4., 6. itd. wierszowi <tr>. Dzięki temu powstaje tzw. zebra-striping, czyli naprzemienne kolorowanie wierszy tabeli, bardzo często stosowane w interfejsach webowych, bo poprawia czytelność danych i ułatwia śledzenie wiersza wzrokiem. W praktyce używa się tego zwykle razem z drugim stylem, np. tr:nth-child(odd) { background-color: white; }, żeby wyraźnie rozróżnić wiersze. Warto też pamiętać, że nth-child() liczy wszystkie dzieci danego rodzica, a nie tylko te z określoną klasą, więc jeżeli w tabeli pojawią się np. wiersze nagłówkowe <tr> w <thead>, to selektor tr:nth-child(even) zastosowany globalnie może dać trochę inne efekty niż się spodziewasz. Dobrą praktyką jest zawężanie selektora, np. tbody tr:nth-child(even), żeby kolorowanie dotyczyło tylko części z danymi, bez nagłówków. Z mojego doświadczenia warto też używać kolorów o niewielkim kontraście, tak jak #F2F2F2, żeby nie męczyć wzroku użytkownika przy długich tabelach.

Pytanie 4

Który z poniższych formatów NIE pozwala na zapis plików animowanych?

A. SVG

B. ACE

C. SWF

D. GIF

ACE to format archiwum - służy do pakowania i kompresji plików (podobnie jak ZIP czy RAR), a nie do przechowywania grafiki czy animacji. Pozostałe formaty potrafią zapisać ruchome treści: GIF łączy wiele klatek w prostą animację, SWF (Flash) przechowuje animacje i interaktywność, a SVG (wektorowy) może zawierać animacje definiowane np. w CSS lub SMIL. Dlatego animacji nie zapisze ACE.

Pytanie 5

Które z rozszerzeń NIE jest związane z plikiem wideo?

A. AVI

B. MP4

C. MOV

D. GIF

GIF to format obrazu i prostych animacji (sekwencja klatek), a nie kontener wideo z dźwiękiem. Dlatego z plikiem wideo NIE jest związany GIF.

Pytanie 6

Znacznik <ins> w HTML ma na celu wskazanie

A. tekstu, który został przerobiony

B. tekstu, który został usunięty

C. bloku tekstu, który jest cytowany

D. tekstu, który został dodany

Znacznik <ins> w HTML jest używany do oznaczania tekstu, który został dodany w kontekście edytowania treści. Zgodnie ze standardem HTML5, element <ins> reprezentuje wprowadzenie nowego tekstu, co jest szczególnie przydatne w kontekście śledzenia zmian w dokumentach. Używając <ins>, możemy nie tylko oznaczyć dodany tekst, ale także dostarczyć kontekstu dla jego wprowadzenia, na przykład poprzez dodanie atrybutu datetime, który wskazuje, kiedy zmiana została wprowadzona. Praktyczne zastosowanie tego znacznika można zauważyć w edytorach treści, gdzie użytkownicy mogą wprowadzać poprawki, a powstałe zmiany są wizualizowane. Dzięki temu osoby przeglądające dokument mogą łatwo zauważyć, co zostało dodane. Warto również wspomnieć, że w połączeniu z odpowiednim stylem CSS, zmiany te mogą być wyróżnione w sposób, który zwiększa czytelność tekstu. Standardy W3C zalecają stosowanie znaczników semantycznych, takich jak <ins>, aby poprawić dostępność oraz zrozumiałość treści.

Pytanie 7

Nazywa się inaczej nasycenie koloru

A. nasycenie koloru

B. przezroczystość koloru

C. jasność koloru

D. dopełnienie koloru

Saturacja koloru, znana również jako nasycenie, odnosi się do intensywności koloru, określając, jak czysty lub żywy jest dany kolor w porównaniu do szarości o tej samej jasności. W praktyce, wysoka saturacja oznacza, że kolor jest bardziej intensywny i wyrazisty, podczas gdy niska saturacja sprawia, że kolor staje się bardziej stonowany i bliski szarości. Na przykład, jaskrawoczerwony odcień czerwieni ma wysoką saturację, podczas gdy różowy odcień tej samej barwy będzie charakteryzował się niższą saturacją, ponieważ zawiera więcej bieli. W kontekście projektowania graficznego i fotografii, zrozumienie nasycenia jest kluczowe. Pomaga to w tworzeniu harmonijnych kompozycji, które przyciągają uwagę i wywołują określone emocje u odbiorców. Profesjonaliści często korzystają z narzędzi do edycji zdjęć, takich jak Adobe Photoshop, aby manipulować nasyceniem kolorów, co może znacząco wpłynąć na ostateczny odbiór wizualny. Satysfakcjonująca paleta kolorów w projektach graficznych opiera się na właściwym balansowaniu nasycenia, co jest zgodne z zasadami teorii kolorów.

Pytanie 8

Jakie kolory wchodzą w skład modelu barw CMYK?

A. czerwony, zielony, niebieski i kanał alfa

B. cyjan, magenta, żółty i karmazyn

C. czerwony, zielony i niebieski

D. cyjan, magenta, żółty i czarny

Model CMYK tworzą cztery składowe: cyan (niebieskozielony), magenta (purpurowy), yellow (żółty) i black (czarny, oznaczany K). Stosuje się go w druku. Dlatego CMYK to cyjan, magenta, żółty i czarny.

Pytanie 9

Którą funkcję z menu Kolory programu GIMP użyto, w celu uzyskania efektu przedstawionego w filmie?

A. Progowanie.

B. Krzywe.

C. Inwersja.

D. Barwienie.

Wiele osób myli w GIMP-ie różne narzędzia z menu Kolory, bo na pierwszy rzut oka kilka z nich „mocno zmienia” obraz. Jednak efekt pokazany na filmie, gdzie obraz staje się dwuwartościowy (czarno-biały, bez półtonów), jest typowym działaniem funkcji Progowanie. Kluczowe jest tu zrozumienie, czym różnią się od siebie dostępne operacje. Krzywe służą do zaawansowanej korekcji tonalnej i kontrastu. Można nimi mocno przyciemnić lub rozjaśnić wybrane zakresy jasności, robić tzw. efekt kontrastu „S”, korygować prześwietlenia itd. Ale nawet przy bardzo agresywnych ustawieniach krzywych obraz nadal zawiera półtony – pojawiają się stopniowe przejścia między odcieniami, a nie ostre odcięcie na zasadzie czarne/białe. To świetne narzędzie do retuszu zdjęć, ale nie do uzyskania efektu progowania. Inwersja (Kolory → Inwersja) po prostu odwraca wartości kolorów lub jasności: jasne staje się ciemne, czerwony zmienia się na cyjan, zielony na magentę itd. To jak negatyw fotograficzny. Struktura szczegółów pozostaje identyczna, zmienia się tylko ich „biegun”. Nie pojawia się żadne odcięcie progowe, więc obraz wciąż ma pełne spektrum odcieni. W praktyce inwersja przydaje się np. przy przygotowaniu masek lub pracy z materiałami skanowanymi, ale nie generuje typowego, „plakatowego” efektu czerni i bieli jak progowanie. Barwienie z kolei (Kolory → Barwienie) służy do nadania całemu obrazowi jednolitego odcienia, zwykle po wcześniejszym sprowadzeniu go do skali szarości. Można w ten sposób uzyskać np. sepię, niebieski ton nocny albo dowolny kolorystyczny „filtr”. Jasność i kontrast lokalny pozostają bardzo podobne, zmienia się dominująca barwa. To zupełnie inna kategoria operacji niż progowanie, które pracuje na poziomie progów jasności, a nie na poziomie koloru. Typowym błędem jest patrzenie tylko na to, że „obraz bardzo się zmienił” i przypisywanie tego narzędziom takim jak krzywe czy inwersja. W pracy z grafiką warto zawsze zadać sobie pytanie: czy efekt polega na zmianie rozkładu jasności, na odwróceniu kolorów, czy na twardym podziale na dwa poziomy? Jeśli widzisz brak półtonów i ostre granice, praktycznie zawsze chodzi o progowanie, które zostało wskazane jako poprawna funkcja.

Pytanie 10

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

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 11

W sekcji <head> (w elemencie <meta ... >) witryny www nie umieszcza się danych dotyczących

A. automatycznego odświeżania

B. typu dokumentu

C. autora

D. kodowania

W znaczniku <head> strony internetowej umieszczamy różne metadane, które wpływają na zachowanie strony oraz jej pozycjonowanie w wyszukiwarkach. Informacja o typie dokumentu jest określana w deklaracji DOCTYPE, a nie w sekcji <meta>. Typ dokumentu informuje przeglądarki, jakiego standardu HTML używa dana strona, co jest kluczowe dla prawidłowego renderowania zawartości. Z kolei w sekcji <meta> umieszczamy dane takie jak autor strony, kodowanie znaków, które informuje przeglądarkę o użytej technologii tekstowej, oraz meta tagi służące do automatycznego odświeżania strony. Przykładowo, używając meta tagu <meta http-equiv='refresh' content='30'>, możemy ustawić, aby strona odświeżała się co 30 sekund. Właściwe wykorzystanie sekcji <head> poprawia zarówno doświadczenia użytkowników, jak i SEO, dlatego znajomość tych elementów jest fundamentalna dla każdego twórcy stron internetowych.

Pytanie 12

Aby strona poprawnie skalowała się na urządzeniach mobilnych, w sekcji <head> należy umieścić:

<meta charset="utf-8">

<link rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

Znacznik <meta name="viewport" content="width=device-width, initial-scale=1"> mówi przeglądarce mobilnej, że szerokość rzutni (viewport) ma odpowiadać szerokości urządzenia, a strona ma startować w skali 1:1. Bez niego telefon renderuje stronę jako szeroką i pomniejsza ją, przez co media queries nie działają jak należy. Dlatego dla poprawnego skalowania na komórkach niezbędny jest meta viewport.

Pytanie 13

W języku HTML kolor biały można przedstawić przy użyciu wartości

A. #000000

B. rgb(255,255,255)

C. rgb(FFFF,FF)

D. #255255

Kolory w HTML można zapisać na kilka sposobów, ale nie każda opcja jest dobra. Zobaczmy błędne odpowiedzi. Pierwsza, #255255, jest zła, bo w systemie szesnastkowym (hex) kolory powinno się zapisywać w formacie #RRGGBB. Tutaj brakuje cyfr, więc to jest błędny zapis. Druga opcja, #000000, to kolor czarny. Wszędzie mamy 0, czyli brak światła w trzech kanałach RGB, co daje nam czarny, a nie biały. Ostatnia odpowiedź, rgb(FFFF,FF), też jest niepoprawna, ponieważ w rgb muszą być liczby całkowite od 0 do 255. Używanie szesnastkowych wartości tutaj to zły pomysł. Generalnie, zrozumienie jak poprawnie zapisywać kolory w HTML jest kluczowe, jeśli chcesz robić fajne i funkcjonalne projekty w sieci.

Pytanie 14

W dokumencie XHTML znajduje się fragment kodu, który posiada błąd w walidacji. Na czym ten błąd polega?

<h6>tekst</h6>
<p>pierwsza <b>linia</b> <br>
Druga linia</p>

A. Znacznik musi być zamknięty

B. Nie ma nagłówka szóstego stopnia

C. Znacznik nie może być umieszczany wewnątrz znacznika

D. Znaczniki powinny być zapisywane dużymi literami

Niektóre odpowiedzi sugerują błędne interpretacje zasad XHTML. Po pierwsze, stwierdzenie, że znacznik nie może być zagnieżdżany w znaczniku , jest nieprawdziwe. W rzeczywistości, znacznik jest dozwolony w kontekście tekstu wewnątrz znacznika , ponieważ oba należą do tej samej kategorii elementów inline. Wiele elementów inline, takich jak , czy , może być zagnieżdżanych bez problemu w znaczniku , co czyni tę odpowiedź błędną. Z kolei twierdzenie o braku nagłówka szóstego stopnia jest również mylące, ponieważ znacznik <h6> jest częścią standardu HTML i XHTML, a jego użycie jest jak najbardziej zasadne. Przechodząc do kwestii pisania znaczników wielkimi literami, warto zauważyć, że XHTML jest czuły na wielkość liter, a właściwe stosowanie wielkich liter w przypadku znaczników nie jest wymogiem, ale zaleceniem w kontekście stylu. Ostatecznie, błędne uznanie zamknięcia znacznika za opcjonalne w XHTML prowadzi do problemów z walidacją i interpretacją dokumentu, co może skutkować problemami w wyświetlaniu strony w różnych przeglądarkach. Takie nieprawidłowe podejście do składni może prowadzić do poważnych problemów w przyszłości, ponieważ poprawne zamykanie znaczników jest kluczowe dla każdego dokumentu XHTML, co podkreśla znaczenie znajomości i stosowania dobrych praktyk w pracy z kodem.

Pytanie 15

Przedstawiono fragment kodu HTML, który nie waliduje się poprawnie. Błąd walidacji tego fragmentu kodu będzie dotyczył:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <img src="/obraz.gif alt="Obrazek">
    <h1>Rozdział 1</h1>
    <p>To jest tekst paragrafu, ...</p>
    <br>
    <img src="/obraz.gif" alt="Obrazek">
</body>
</html>

A. braku cudzysłowu

B. niedomknięcia znacznika img

C. powtórzenia nazwy pliku graficznego

D. niedomknięcia znacznika br

Fragment kodu HTML zawiera istotny błąd, który polega na braku cudzysłowu w atrybucie 'src' znacznika 'img'. Poprawna składnia wymaga, aby wszystkie wartości atrybutów były otoczone cudzysłowami, zarówno pojedynczymi, jak i podwójnymi. W tym przypadku występuje problem w linii, gdzie atrybut 'src' ma przypisaną wartość '/obraz.gif', ale brakuje zamykającego cudzysłowu, co powoduje, że przeglądarka może niepoprawnie interpretować ten fragment kodu. Aby poprawić kod, należy dodać cudzysłów, co zapewni zgodność z normami HTML, takimi jak W3C. Przykładowo, poprawny zapis powinien wyglądać następująco: <img src="/obraz.gif" alt="Obrazek">. Walidacja kodu HTML jest kluczowa, ponieważ umożliwia uniknięcie problemów z wyświetlaniem strony oraz zapewnia lepszą dostępność treści dla użytkowników oraz robotów wyszukiwarek. Użycie odpowiednich znaczników oraz poprawna składnia sprzyja również lepszym wynikom SEO, co jest istotne w kontekście widoczności w Internecie.

Pytanie 16

Aby przenieść pliki witryny na serwer, można skorzystać z programu:

A. Go!Zilla

B. Bugzilla

C. FileZilla

D. CloneZilla

FileZilla to popularny, darmowy klient FTP, FTPS i SFTP. Służy do przesyłania plików między komputerem lokalnym a serwerem, dlatego używa się go do publikacji gotowej witryny: łączysz się z kontem na serwerze i kopiujesz pliki strony do odpowiedniego katalogu. Obsługuje połączenia szyfrowane, wznawianie transferu i kolejkę zadań. To typowe narzędzie webmastera na etapie wdrażania strony - i dlatego jest poprawną odpowiedzią.

Pytanie 17

Które z pól są umieszczone w formularzu?

A. Textarea, Option, Input(Checkbox), Input(Checkbox), Input (Submit), Input(Reset)

B. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)

C. Input(Text), Select, Input(Radio), Input(Radio), Input (Submit), Input(Reset)

D. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)

Twoja odpowiedź sugeruje pewne nieporozumienia co do typów pól używanych w formularzach html. Przykładowo, Textarea to pole wieloliniowego tekstu, które nie zostało użyte w tym formularzu. Podobnie, Element Option jest zazwyczaj używany wewnątrz elementu Select i nie jest samodzielnym polem formularza. Co więcej, Input(Checkbox) to pole wyboru, które pozwala na zaznaczenie wielu opcji. W tym formularzu, używane są przyciski wyboru (Input(Radio)), które są podobne, ale pozwalają tylko na wybór jednej opcji. Wreszcie, należy pamiętać, że nie wszystkie formularze muszą zawierać wszystkie typy pól. Różne typy pól są używane w zależności od tego, jakiego rodzaju informacje chcemy zebrać. Ważne jest, aby zrozumieć różnice między nimi i kiedy ich używać, aby stworzyć skuteczny formularz, który będzie łatwy do wypełnienia dla użytkowników i będzie zbierał potrzebne informacje.

Pytanie 18

Którą właściwością CSS ustawia się kolor tła elementu (np. strony)?

color

background-color

text-background

bgcolor

Kolor tła elementu ustawia w CSS właściwość background-color, np. body { background-color: #f0f0f0; }. Można podać nazwę koloru, zapis szesnastkowy lub funkcję rgb. To nowoczesny, zgodny ze standardem sposób - w przeciwieństwie do dawnego atrybutu HTML bgcolor. Dlatego tło ustawia background-color.

Pytanie 19

Jaki zapis w dokumencie HTML umożliwia powiązanie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <a src="style.css">

B. <a href="style.css">

C. <link rel="stylesheet" href="style.css">

D. <link rel="stylesheet' src="style.css">

Zapis <a src="style.css"> jest błędny, ponieważ element <a> służy do tworzenia odnośników do innych stron lub zasobów, a nie do dołączania arkuszy stylów. Atrybut 'src' nie jest właściwy dla elementu <a>, który powinien używać atrybutu 'href'. Zastosowanie elementu <a> w tym kontekście pokazuje typowy błąd myślowy, polegający na myleniu celów różnych znaczników HTML. Element <link> jest przeznaczony do osadzania zasobów, takich jak arkusze stylów, a nie <a>, które jest używane do nawigacji. Kolejny błąd występuje w zapisie <a href="style.css">, który również nie jest przeznaczony do dołączania arkuszy stylów. Choć użycie atrybutu 'href' jest poprawne, element <a> nie jest odpowiedni do tego celu. Stosowanie niewłaściwych znaczników może prowadzić do problemów z wydajnością i dostępnością strony. Zapis <link rel="stylesheet' src="style.css"> zawiera dodatkowy błąd związany z użyciem atrybutu 'src' zamiast 'href', co jest niezgodne z definicją elementu <link> w standardzie HTML. Używanie atrybutu 'src' w tym miejscu prowadzi do nieodpowiedniego załadowania stylów i może spowodować błędy w renderowaniu strony. Takie niepoprawne podejścia prowadzą do złożoności w zarządzaniu stroną i mogą skutkować trudnościami w utrzymywaniu spójności wizualnej oraz funkcjonalnej w projekcie.

Pytanie 20

Aby za pomocą CSS zdefiniować przedstawione na rysunku opływanie obrazu tekstem należy w stylu obrazu wprowadzić zapis

A. float: right;

B. table: left;

C. float: left;

D. clear: both;

Twoja odpowiedź nie jest prawidłowa. Wszystkie podane błędne odpowiedzi są niepoprawne, ponieważ nie tworzą żądanego efektu opływania obrazu przez tekst. 'clear: both;' jest własnością CSS, która służy do zapobiegania opływaniu, a nie jego tworzeniu. Jest używana, gdy nie chcemy, aby dany element był opływany przez inne. 'table: left;' nie jest istniejącą własnością CSS, i nie ma związanego z nią konkretnego efektu. Właściwość 'float: left;' powoduje, że obraz zostaje przesunięty na lewą stronę strony, co powoduje, że tekst opływa go od prawej strony, a nie od lewej, jak to jest wymagane w pytaniu. Pamiętaj, aby zawsze dobrze zrozumieć, jakie efekty daje użycie konkretnych właściwości CSS, zanim zastosujesz je w praktyce.

Pytanie 21

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. header

B. div

C. aside

D. nav

Znacznik <div> jest często używany do ogólnego grupowania elementów w HTML, ale nie niesie ze sobą semantycznego znaczenia, co oznacza, że nie informuje technologii wspomagających ani wyszukiwarek o roli, jaką pełni zawartość. W kontekście semantycznego HTML5, poleganie na znaczniku <div> nie wykorzystuje potencjału nowych standardów, które poprawiają dostępność i strukturę dokumentów. Znacznik <aside> jest zwykle używany do grupowania treści pobocznej, takiej jak reklamy czy linki powiązane, dlatego nie jest on odpowiedni do definiowania sekcji menu. <header> jest z kolei stosowany do elementów nagłówkowych, takich jak tytuły stron czy sekcje wstępne, co również nie pasuje do kontekstu sekcji nawigacyjnej. Właściwe wykorzystanie semantycznych znaczników pomaga nie tylko w lepszej organizacji kodu, ale także wspiera dostępność oraz optymalizację SEO, co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 22

Aby nałożyć na zdjęcie półprzezroczysty znak wodny (logo prześwitujące przez obraz), należy:

A. poprawić nasycenie kolorów

B. wykorzystać kanał alfa

C. zastosować filtr Gaussa

D. odpowiednio przyciąć obraz

Aby logo prześwitywało przez zdjęcie (półprzezroczysty znak wodny), wykorzystuje się KANAŁ ALFA - steruje on stopniem przezroczystości pikseli, więc nakładana warstwa może być częściowo widoczna. Dlatego należy wykorzystać kanał alfa.

Pytanie 23

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 wymaganego atrybutu title w znaczniku <img>.

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

C. element <title> nie jest konieczny.

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

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 24

W języku HTML, aby uzyskać następujący efekt formatowania, należy zapisać kod:

pogrubiony pochylony lub w ^{górnym indeksie}

A. pogrubiony pochylony lub w górnym indeksie

B. pogrubiony pochylony lub w górnym indeksie

C. pogrubiony pochylony lub w górnym indeksie

D. pogrubiony pochylony lub w górnym indeksie

Poprawna odpowiedź to: pogrubiony pochylony lub w górnym indeksie. Ta odpowiedź prawidłowo wykorzystuje trzy kluczowe tagi HTML do formatowania tekstu: , i . Tag służy do wyświetlania tekstu w pogrubionym formacie, co pozwala na podkreślenie istotnych fragmentów tekstu. Przykładem może być wyróżnienie tytułów, nagłówków lub kluczowych punktów w treści. Tag jest używany do wyświetlania tekstu w formacie kursywy, co jest często używane do wyróżnienia tytułów książek, filmów, cytowań lub podkreślenia ważnych punktów. Tag jest używany do wyświetlania napisów jako tekst górnego indeksu, co jest często używane do wskazania numerów stron, przypisów, lub dla oznaczeń matematycznych lub naukowych. Pamiętaj, że prawidłowe użycie tych tagów jest kluczowe dla tworzenia jasnej, czytelnej i profesjonalnie wyglądającej strony internetowej.

Pytanie 25

Które z pól edycyjnych zostało wystylizowane według poniższego wzoru, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

input {
    padding: 10px;
    background-color: Teal;
    color: white;
    border: none;
    border-radius: 7px;
}

A. Pole 2

B. Pole 3

C. Pole 4

D. Pole 1

Pole 2 zostało sformatowane zgodnie z podanym stylem CSS Ponieważ właściwość padding została ustawiona na 10px pole tekstowe ma wewnętrzny odstęp wokół zawartości co sprawia że tekst nie dotyka bezpośrednio krawędzi pola Kolor tła ustawiony na Teal odróżnia to pole od innych które mogą mieć domyślne kolory tła Biały kolor tekstu zapewniony przez właściwość color sprawia że tekst jest czytelny na ciemnym tle Brak obramowania dzięki border none powoduje że pole nie ma widocznej linii wokół siebie co nadaje mu czysty wygląd Zaokrąglenie krawędzi ustawione na 7px border-radius daje bardziej nowoczesny wygląd a także ułatwia integrację z różnymi projektami interfejsu użytkownika Takie podejście do stylizacji elementów formularzy jest zgodne z nowoczesnymi trendami projektowania stron internetowych gdzie używane są łagodne zaokrąglenia oraz odpowiednio dobrane kontrasty kolorystyczne W praktyce takie style są nie tylko estetyczne ale także poprawiają użyteczność interfejsu poprzez zwiększenie czytelności i intuicyjności obsługi formularzy Warto również zauważyć że zastosowanie CSS do formatowania elementów pozwala na zachowanie spójności wyglądu na różnych stronach oraz łatwą modyfikację w przyszłości

Pytanie 26

Na stronie umieszczono obrazek, a po nim akapit. Aby obrazek znalazł się w tej samej linii, po LEWEJ stronie tekstu, w stylu CSS obrazka należy ustawić:

alt: left;

align: left;

float: left;

style: left;

align i style nie są właściwościami opływania (a align w CSS w ogóle nie istnieje). alt to atrybut tekstu alternatywnego <img>, nie styl położenia. Opływanie obrazka tekstem daje float: left;.

Pytanie 27

Które stwierdzenie dotyczy SKALOWANIA obrazu?

A. zmienia rozmiar obrazu bez utraty istotnej zawartości

B. łączy lub odejmuje kształty

C. wycina fragment obrazu (kadrowanie)

D. zmienia format zapisu, by zmienić kompresję

Skalowanie obrazu to zmiana jego ROZMIARU (powiększenie lub pomniejszenie) z zachowaniem istotnej zawartości wizualnej - całość zostaje, zmieniają się wymiary. Stosuje się je np. przy dopasowaniu zdjęcia do układu strony. Dlatego skalowanie to zmiana rozmiaru obrazu bez utraty istotnej zawartości.

Pytanie 28

Który semantyczny znacznik HTML5 powinien wystąpić na stronie tylko raz?

<header>

<article>

<main>

<section>

Pozostałe znaczniki mogą pojawić się wielokrotnie. <header> oznacza nagłówek - może być jeden dla całej strony, ale też osobny dla każdej sekcji czy artykułu. <article> reprezentuje samodzielną treść (np. wpis, wiadomość), więc na jednej stronie może ich być wiele. <section> grupuje treść tematycznie i również występuje dowolną liczbę razy. Tylko główna treść <main> powinna pojawić się raz, dlatego ta odpowiedź jest poprawna.

Pytanie 29

Jak powinien być poprawnie zapisany znacznik <img>, służący do umieszczenia na stronie internetowej obrazu rys.jpg, przeskalowanego do szerokości 120 px oraz wysokości 80 px z tekstem alternatywnym "krajobraz"?

A. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

B. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

C. <img href="rys.jpg" height="120px" width="80px" info="krajobraz"/>

D. <img src="rys.jpg" height="120px" width="80px" info="krajobraz"/>

Odpowiedź <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/> jest poprawna z kilku powodów. Przede wszystkim, atrybut 'src' wskazuje na lokalizację pliku graficznego, co jest kluczowe dla poprawnego wyświetlania obrazu na stronie internetowej. Atrybuty 'width' oraz 'height' pozwalają na precyzyjne określenie rozmiarów obrazu, co jest istotne zarówno dla responsywności strony, jak i dla optymalizacji czasu ładowania. Użycie jednostki 'px' (pikseli) jest poprawne, jednak w HTML5 można pominąć tę jednostkę, wpisując jedynie wartość liczbową. Atrybut 'alt' jest niezwykle ważny dla dostępności, ponieważ dostarcza alternatywny opis obrazu dla użytkowników, którzy nie mogą go zobaczyć, na przykład osób niewidomych korzystających z czytników ekranu. Używanie odpowiednich atrybutów oraz wartości jest zgodne z najlepszymi praktykami w tworzeniu stron WWW oraz standardami W3C, co wpływa na lepszą użyteczność oraz SEO strony. Przykładem praktycznym może być umieszczenie grafiki w nagłówku strony, gdzie obraz jest widoczny, a opis alternatywny wspiera dostępność i kontekst treści.

Pytanie 30

Który z protokołów umożliwia publikację strony internetowej na serwerze?

A. FTP

B. SMTP

C. NNTP

D. ICMP

ICMP (Internet Control Message Protocol) to protokół, który używany jest głównie do przesyłania komunikatów kontrolnych w sieci, np. błędów czy informacji o tym, czy hosty są dostępne. I teraz tak - nie jest to protokół do transferu plików, więc nie nadaje się do publikowania stron. Więc używanie ICMP w tym kontekście może prowadzić do złych wniosków, bo nie jest to jego rola. Z drugiej strony, SMTP (Simple Mail Transfer Protocol) jest do wysyłania e-maili, a nie do publikacji stron. Przesyła wiadomości między serwerami pocztowymi, więc też nie ma zastosowania w transferze plików na serwery WWW. A NNTP (Network News Transfer Protocol) to natomiast protokół do rozsyłania wiadomości w grupach dyskusyjnych, co też nie ma związku z publikowaniem stron. Ważne jest, żeby rozumieć te protokoły, żeby unikać nieporozumień. Kiedy mówimy o publikacji, to najważniejsze są te protokoły, które obsługują transfer plików, jak FTP, oraz metody ich zabezpieczania. Błędny wybór protokołu może prowadzić do różnych problemów w publikacji.

Pytanie 31

Jakie oprogramowanie służy do obróbki dźwięku?

A. RealPlayer

B. Audacity

C. Winamp

D. Brasero

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Audacity jest wszechstronnym, darmowym programem typu open source, który służy do edycji dźwięku. Jego funkcjonalność obejmuje nagrywanie, edytowanie i przetwarzanie dźwięku w różnych formatach. Program ten jest często wykorzystywany przez muzyków, podcasterów oraz profesjonalistów zajmujących się dźwiękiem, co czyni go niezwykle popularnym w branży. Audacity obsługuje wiele efektów dźwiękowych, takich jak kompresja, reverb oraz equalizacja, co pozwala na zaawansowaną obróbkę nagrań. Dzięki intuicyjnemu interfejsowi użytkownika, użytkownicy mogą łatwo nawigować w programie oraz korzystać z funkcji takich jak wielościeżkowe nagrywanie i edytowanie. Warto również wspomnieć, że Audacity działa na różnych systemach operacyjnych, w tym Windows, macOS oraz Linux, co zapewnia dostępność dla szerszego kręgu użytkowników. Użytkownicy mogą również korzystać z dodatkowych wtyczek, które rozszerzają możliwości programu, co jest zgodne z najlepszymi praktykami w branży, gdzie elastyczność i rozszerzalność oprogramowania są kluczowe dla profesjonalnych zastosowań.

Pytanie 32

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem całej witryny

B. tłem każdego bloku tekstowego

C. pokazany, jeśli w kodzie użyty będzie znacznik img

D. wyświetlany obok każdego bloku tekstowego

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis p{background-image: url('rysunek.jpg')} oznacza, że każdy , czyli paragraf, dostanie jako tło obrazek o nazwie rysunek.jpg. To jest po prostu sposób, żeby nadać każdyemu paragrafowi ten sam wygląd. Działa to świetnie, gdy chcesz, żeby cały tekst miał spójny styl czy dodać coś wizualnego do treści. Ważne, żeby ten plik rysunek.jpg był w dobrym miejscu, bo jak go nie znajdziesz, to przeglądarka go nie wczyta. Można to wykorzystać, żeby strona wyglądała bardziej estetycznie i przyciągała wzrok – każdy paragraf z własnym tłem na pewno sprawi, że będzie się lepiej czytało. Możesz też bawić się dodatkowymi właściwościami w CSS, jak background-repeat czy background-size, bo to otwiera drzwi do jeszcze ciekawszych efektów wizualnych.

Pytanie 33

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. obraz1.png zostanie wymieniony przez obraz2.png

B. obraz2.png zostanie zniknięty

C. obraz2.png zostanie wymieniony przez obraz1.png

D. obraz1.png zostanie zniknięty

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 34

Jak zapisać marginesy zewnętrzne: górny i dolny 20 px, lewy i prawy 40 px?

margin: 20px 40px;

margin: 40px 20px;

margin: 20px 20px 40px 40px;

margin: 20px 40px 40px 20px;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W zapisie skróconym z dwiema wartościami <code>margin: pion poziom</code> pierwsza dotyczy góry i dołu, druga lewej i prawej. Górny i dolny 20px, boczne 40px daje więc <code>margin: 20px 40px;</code>. Dlatego poprawny jest <code>margin: 20px 40px;</code>.

Pytanie 35

W języku CSS przedstawione w ramce stylizacje będą miały następujące zastosowanie. Kolorem czerwonym zostanie zapisany

h1 i {color: red;}

A. pełny tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, bez względu na jego lokalizację na stronie

B. kompletny tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu

C. wyłącznie tekst pochylony we wszystkich nagłówkach

D. jedynie tekst pochylony w nagłówku pierwszego stopnia

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 1 jest poprawna, ponieważ selektor CSS 'h1 i' odnosi się do wszystkich elementów (czyli tekstu pochylonego) znajdujących się wewnątrz elementów nagłówka <h1>. Oznacza to, że tylko tekst pochylony w nagłówkach pierwszego stopnia zostanie sformatowany na kolor czerwony. Jest to przykład selektora złożonego, który jest używany do stylizowania elementów zagnieżdżonych w określonym kontekście. W praktyce, takie podejście pozwala na precyzyjne kontrolowanie stylów na poziomie struktury dokumentu HTML, co jest zgodne z dobrymi praktykami w zakresie utrzymania i czytelności kodu CSS. Podczas projektowania arkuszy stylów ważne jest, aby stosować specyficzne selektory tylko tam, gdzie jest to konieczne, aby uniknąć nadmiernego komplikowania stylów i zapewnić lepszą wydajność renderowania stron w przeglądarkach. Dodatkowo, używając właściwości 'color', możemy definiować sposób, w jaki kolor tekstu prezentuje się na stronie, co jest kluczowe dla tworzenia dostępnych i estetycznych interfejsów użytkownika.

Pytanie 36

Jakie będzie działanie po naciśnięciu przycisku oznaczonego jako "niebieski", który uruchamia podany kod JavaScript?

<p id="para1">Przykładowy tekst</p><p> i skrypt</p>
<button onClick="changeColor('blue');">niebieski</button>

<script type="text/javascript">
function changeColor(newColor)
{
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>

A. Zmiana koloru tekstu "Przykładowy tekst" na niebieski

B. Zmiana koloru tekstu "Przykładowy tekst i skrypt" na niebieski

C. Zmiana barwy przycisku na niebieski

D. Zmiana koloru tekstu "i skrypt" na niebieski

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod JavaScript przedstawiony w pytaniu definiuje funkcję changeColor która przyjmuje jeden argument newColor. Po wywołaniu funkcji przez kliknięcie przycisku funkcja ta używa metody document.getElementById aby pobrać element o identyfikatorze para1. Identyfikator ten jest przypisany do pierwszego elementu paragrafu zawierającego tekst Przykładowy tekst. Następnie w ramach tego elementu zmieniany jest kolor tekstu poprzez przypisanie newColor do właściwości style.color. W omawianym przypadku newColor przyjmuje wartość blue co oznacza że tekst Przykładowy tekst zmieni kolor na niebieski. Warto podkreślić że manipulacja DOM przy użyciu JavaScript jest powszechnie stosowaną techniką w tworzeniu dynamicznych interfejsów użytkownika. Używanie metod takich jak getElementById jest standardem ze względu na ich prostotę oraz efektywność w selekcji elementów HTML. W praktycznych zastosowaniach warto również pamiętać o zgodności ze standardami W3C oraz o możliwościach rozszerzenia za pomocą bibliotek takich jak jQuery które oferują jeszcze bardziej zaawansowane opcje manipulacji DOM.

Pytanie 37

Który zapis CSS wyrówna tekst akapitu do PRAWEJ strony?

<p style="position: right">tekst</p>

<p style="font: right">tekst</p>

<p style="align: right">tekst</p>

<p style="text-align: right">tekst</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poziome wyrównanie tekstu ustawia właściwość <code>text-align</code>, więc <code>text-align: right</code> dosuwa treść akapitu do prawej krawędzi. Dlatego poprawny jest zapis <code><p style="text-align: right"></code>.

Pytanie 38

Aby przyspieszyć ładowanie strony z dużą grafiką (2000×760 px), należy zmniejszyć jej rozmiar:

A. właściwością CSS w pikselach

B. za pomocą atrybutów HTML

C. właściwością CSS w procentach

D. w programie graficznym

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby naprawdę przyspieszyć stronę, trzeba zmniejszyć wagę i wymiary pliku graficznego w programie graficznym (np. zmienić rozmiar do faktycznie potrzebnych pikseli i zoptymalizować kompresję). Dopiero wtedy przeglądarka pobiera mniejszy plik. Skalowanie w HTML czy CSS zmienia jedynie sposób wyświetlania, nie wielkość pobieranych danych. Dlatego grafikę zmniejsza się w programie graficznym.

Pytanie 39

Poniżej zaprezentowano fragment kodu w języku HTML:
<ol>
<li>punkt 1</li>
<li>punkt 2</li>
<ul>
<li>podpunkt1</li>
<li>podpunkt2</li>
<li>podpunkt3</li>
</ul>
<li>punkt3</li>
</ol>

A. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

B. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

C. 1. punkt 1 2. punkt 2 3. punkt3 podpunkt1 podpunkt2 podpunkt1

D. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Fajnie, że wybrałeś poprawną odpowiedź! To pokazuje, że rozumiesz, jak działa struktura list w HTML. W Twoim kodzie mamy uporządkowaną listę z trzema głównymi punktami, co jest świetne. Te pierwsze dwa są dobrze zdefiniowane jako elementy <li>, tak jak powinny być. A w punkcie 2 masz zagnieżdżoną listę nieuporządkowaną, co dodaje trochę ekstra informacji – super sprawa! Pamiętaj, że to zagnieżdżenie ma znaczenie, bo pomaga to w organizacji treści. Każdy podpunkt też jest elementem <li>, więc wszystko się zgadza. Tego typu struktury są mega przydatne, zwłaszcza w spisach treści czy menu nawigacyjnych. Pamiętaj, że dobrze zbudowany HTML jest ważny dla czytelności, a także dla osób, które korzystają z różnych technologii do przeglądania stron. Trzymaj tak dalej!

Pytanie 40

Jaki kolor oznacza zapis szesnastkowy #0000FF?

A. czerwony

B. czarny

C. zielony

D. niebieski

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W zapisie szesnastkowym <code>#RRGGBB</code> kolejne pary to czerwony, zielony i niebieski. W <code>#0000FF</code> czerwony i zielony są zerowe, a niebieski maksymalny (<code>FF</code> = 255), więc kolor jest NIEBIESKI. Dlatego <code>#0000FF</code> to niebieski.

Rozpocznij nowy egzamin

Powrót do strony głównej