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: 8 czerwca 2026 13:00
Data zakończenia: 8 czerwca 2026 13:38

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

Model barw oparty na trzech parametrach: odcień (hue), nasycenie (saturation) i jasność (brightness/value) to

A. RGB

B. CMY

C. CMYK

D. HSV

Pozostałe modele opisują kolor inaczej. RGB miesza składowe światła: czerwoną, zieloną i niebieską. CMY i CMYK to modele druku (cyan, magenta, yellow, a w CMYK czarny K). Parametry odcień-nasycenie-jasność tworzą model HSV.

Pytanie 2

Wskaż blok sformatowany poniższym stylem CSS:

background: linear-gradient(to right, LightBlue, DarkBlue);

A. Blok 3.

B. Blok 1.

C. Blok 2.

D. Blok 4.

Gratulacje! Wybrałeś właściwą odpowiedź - Blok 2. W stylach CSS, zapis 'background: linear-gradient(to right, LightBlue, DarkBlue);' określa gradient liniowy, który przechodzi od koloru jasnoniebieskiego (LightBlue) do ciemnoniebieskiego (DarkBlue) poziomo, od lewej do prawej strony. To oznacza, że kolor tła danego elementu stopniowo zmienia się od jednego koloru do drugiego w określonym kierunku. Stosowanie gradientów jest popularną techniką w web designie, ponieważ pozwala na tworzenie płynnych przejść kolorów i dodaje estetyki stronie. Gradienty mogą być zastosowane do różnych elementów na stronie, takich jak tło, tekst, ramki itp. Warto zaznaczyć, że gradienty CSS mogą być nie tylko liniowe, ale również radialne. W tym przypadku, tylko Blok 2. jest sformatowany zgodnie z podanym stylem CSS, ponieważ zawiera gradient poziomo przechodzący od jasnoniebieskiego do ciemnoniebieskiego.

Pytanie 3

Kod umieszczony w ramce tworzy tabelę, która zawiera

A. jeden wiersz i jeden słupek

B. dwa wiersze i dwa słupki

C. dwa wiersze i jeden słupek

D. jeden wiersz i dwa słupki

Podany kod HTML tworzy tabelę z jednym wierszem i dwoma kolumnami ponieważ w strukturze tabeli element <tr> definiuje wiersz a element <td> definiuje komórkę w tym wierszu. W tym przypadku kod zawiera jeden element <tr> co wskazuje na pojedynczy wiersz oraz dwa elementy <td> co oznacza że w tym wierszu znajdują się dwie kolumny. Tego typu struktura jest powszechnie wykorzystywana do przedstawiania danych w formie tabelarycznej co jest standardową praktyką w web developmencie. Tabele HTML są kluczowym elementem w projektowaniu stron internetowych gdyż pozwalają na uporządkowane prezentowanie informacji często używane do tworzenia harmonogramów porównań czy formularzy. Ważne jest aby pamiętać o poprawnym zamykaniu znaczników oraz przestrzeganiu hierarchii struktury tabeli co zapewnia jej poprawne wyświetlanie w przeglądarkach. Dobrą praktyką jest również stosowanie zewnętrznych arkuszy CSS do stylizacji tabel co pozwala na oddzielenie struktury od prezentacji i ułatwia zarządzanie wyglądem strony. Znajomość i umiejętność tworzenia tabel jest niezbędna dla każdego web dewelopera ponieważ tabele stanowią fundamentalny element organizacji danych w HTML.

Pytanie 4

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

A. kompilator

B. debugger

C. walidator

D. interpreter

Pozostałe odpowiedzi to narzędzia związane z językami programowania, a HTML do nich nie należy. Debugger pozwala zatrzymywać i śledzić wykonujący się program, sprawdzać wartości zmiennych - tymczasem HTML niczego nie wykonuje, więc nie ma tu czego debugować. Interpreter i kompilator to z kolei narzędzia, które tłumaczą lub uruchamiają kod programu: interpreter na bieżąco, kompilator zamieniając go wcześniej na inną postać. HTML jest jedynie opisem struktury strony, dlatego żadne z nich nie wskaże błędnie zapisanego znacznika. Do kontroli poprawności składni HTML służy walidator, który porównuje dokument ze standardem języka i raportuje znalezione usterki.

Pytanie 5

Kolor zapisany w notacji szesnastkowej #0000FF to:

A. czerwony

B. czarny

C. niebieski

D. zielony

Pozostałe kolory mają inne układy składowych. Czarny powstaje, gdy wszystkie składowe są zerowe - #000000. Zielony to maksymalna składowa G przy zerowych pozostałych, czyli #00FF00. Czerwony ma pełną składową R - #FF0000. W zapisie #0000FF pełną wartość ma wyłącznie ostatnia para (składowa niebieska), więc kolor jest niebieski, dlatego ta odpowiedź jest poprawna.

Pytanie 6

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. określenie kaskadowych arkuszy stylów przypisanych do strony

B. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych

C. stylizację tekstu za pomocą dostępnych znaczników

D. przygotowanie szablonu witryny internetowej

Wybór odpowiedzi dotyczącej definiowania kaskadowych arkuszy stylów (CSS) w kontekście funkcji drzewa kontekstowego w Adobe Dreamweaver jest mylący. Kaskadowe arkusze stylów są narzędziem służącym do stylizacji stron internetowych, ale nie są bezpośrednio związane z funkcjonalnością drzewa kontekstowego, które koncentruje się na przedstawieniu struktury HTML dokumentu. Kiedy projektant korzysta z edytora, może wprowadzać zmiany w stylach CSS, jednak drzewo kontekstowe nie jest dedykowane temu procesowi. Ponadto, zrozumienie struktury HTML jest kluczowe do efektywnego stosowania CSS, ale to nie oznacza, że można je mylić. Druga odpowiedź, dotycząca tworzenia szablonu strony internetowej, jest również nieprecyzyjna. Szablony są narzędziem do ułatwienia konstrukcji stron, ale drzewo kontekstowe nie jest bezpośrednio związane z ich tworzeniem. Podobnie, formatowanie tekstu przy pomocy znaczników nie jest funkcją drzewa kontekstowego; jest to zadanie edytora WYSIWYG jako całości. Zrozumienie tych koncepcji technicznych jest kluczowe, aby uniknąć typowych pułapek myślowych, takich jak mylenie różnych funkcji edytorów oraz ich zastosowań w procesie tworzenia stron internetowych. Osoby pracujące w branży powinny być dobrze zaznajomione z odpowiedzialnością, jaką niesie ze sobą poprawne stosowanie narzędzi i technologii, aby efektywnie realizować projekty webowe.

Pytanie 7

Dla strony internetowej stworzono styl, który będzie stosowany tylko do wybranych znaczników, takich jak niektóre nagłówki oraz kilka akapitów. W tej sytuacji, aby przypisać styl do konkretnych znaczników, najodpowiedniejsze będzie użycie

A. identyfikatora

B. selektora akapitu

C. pseudoklasy

D. klasy

Pseudoklasy w CSS są używane do stylizowania elementów w określonym stanie, np. :hover dla zmiany stylu po najechaniu myszą. Nie są odpowiednie do przypisywania unikalnych stylów do konkretnych elementów. Identyfikator w CSS, oznaczany przez #, jest używany do stylizowania jednego unikalnego elementu na stronie. Jego użycie jest ograniczone do jednego elementu, co jest zgodne z zasadą unikalności identyfikatorów w dokumencie HTML. Nie nadaje się do sytuacji, gdy ten sam styl ma być stosowany do wielu elementów, ponieważ zmuszałoby to do definiowania i przypisywania wielu unikalnych identyfikatorów do każdego z nich, co jest przeciwieństwem DRY (Don't Repeat Yourself). Selektor akapitu bezpośrednio odnosi się do wszystkich elementów danego typu, np. p dla wszystkich akapitów. Nie jest on elastyczny, gdy chcemy zastosować styl tylko do niektórych elementów danego typu. Klasy oferują większą elastyczność w zarządzaniu stylami wielu elementów, ponieważ mogą być stosowane do różnych typów elementów w różnych miejscach dokumentu HTML. Ponadto, klasy są bardziej czytelne i ułatwiają utrzymanie kodu, co jest zgodne z najlepszymi praktykami w programowaniu front-endowym. Użycie klas wspiera również lepszą strukturę i modularność kodu CSS, co jest istotne w kontekście pracy zespołowej oraz skalowalności projektu.

Pytanie 8

Fragment kodu w języku JavaScript realizujący dodawanie dwóch liczb ma poniższą postać. Aby dodawanie wykonane było po kliknięciu przycisku o nazwie "dodaj", należy w wykropkowane miejsce wstawić

Podaj pierwszą liczbę: <input type="text" name="liczba1" />
 Podaj drugą liczbę: <input type="text" name="liczba2" />
 ….
 <script type=text/javascript>
 function dodaj()
 {
     // ta funkcja realizuje dodawanie i podaje jego wynik
 }
 </script>

A. <button onclick="return oblicz()">dodaj</button>

B. <button onselect="return dodaj()">dodaj</button>

C. <button onselect="return dodaj()">oblicz</button>

D. <button onclick="return dodaj()">dodaj</button>

Gratulacje, wybrałeś poprawną odpowiedź. Przycisk w JavaScript jest aktywowany poprzez zdarzenie onclick, które jest wyzwalane po kliknięciu przycisku. Właściwość onclick jest jednym z wielu zdarzeń w JavaScript, które są używane do obsługi interakcji użytkownika. Kiedy użytkownik kliknie przycisk, zdarzenie onclick jest wywoływane i kod zawarty w tym zdarzeniu jest wykonany. W tym przypadku, kod to 'return dodaj()', co oznacza, że funkcja 'dodaj' jest wywoływana. Ta funkcja została zdefiniowana w skrypcie JavaScript i realizuje dodawanie dwóch liczb. Zdarzenie onclick jest często używane w praktycznych zastosowaniach, takich jak przyciski subskrybcji, przyciski do logowania czy przyciski do przesyłania formularzy. Zasada ta jest zgodna z dobrymi praktykami programowania, które zalecają utrzymanie interakcji użytkownika w kodzie JavaScript zamiast HTML.

Pytanie 9

Aby poprawnie zdefiniować hierarchiczną strukturę tekstu na stronie internetowej, należy zastosować:

A. znaczniki <frame> i <table>

B. znacznik <div>

C. znacznik <p> z formatowaniem

D. znaczniki <h1>, <h2> oraz <p>

Wszystkie wymienione znaczniki istnieją w HTML, ale tylko nagłówki naprawdę tworzą hierarchię treści. <div> to neutralny pojemnik - grupuje elementy, lecz sam z siebie nic nie znaczy dla struktury. <frame> pochodzi z dawnego, wycofanego sposobu dzielenia okna na ramki, a <table> służy do prezentacji danych tabelarycznych, nie do organizacji tekstu. Akapit <p> z dodatkowym formatowaniem zmienia jedynie wygląd, ale nie ustala, co jest tytułem, a co podrozdziałem. Dopiero nagłówki <h1>-<h6> (w poprawnej odpowiedzi razem z akapitem <p>) wyznaczają kolejne poziomy ważności, które rozumieją przeglądarki, wyszukiwarki i technologie wspomagające.

Pytanie 10

W kodzie HTML zdefiniowano formularz, który wysyła dane do pliku formularz.php. Po naciśnięciu przycisku typu submit przeglądarka przechodzi do poniższego adresu:

../formularz.php?imie=Anna&nazwisko=Kowalska

Na podstawie podanego adresu można stwierdzić, że dane do pliku formularz.php zostały przesłane metodą:

A. COOKIE

B. POST

C. SESSION

D. GET

Wybrana przez ciebie odpowiedź jest nieprawidłowa. Wybrałeś metodę POST, COOKIE lub SESSION jako sposób przesyłania danych do pliku formularz.php, ale na podstawie widocznego adresu URL, który zawiera parametry przekazane po znaku zapytania (?), odpowiedź jest GET. Metoda POST jest również popularna w przesyłaniu danych, ale różni się od GET tym, że dane są przesyłane w ciele żądania, nie są widoczne w pasku adresu. COOKIE to mechanizm, który pozwala na przechowywanie danych na stronie klienta, nie jest to metoda przesyłania danych do serwera. SESSION to technika, która pozwala na przechowywanie informacji po stronie serwera, która jest powiązana z konkretnym użytkownikiem za pomocą identyfikatora sesji. Żadna z tych technik (POST, COOKIE, SESSION) nie powoduje, że parametry są widoczne w adresie URL, co jest charakterystyczne dla metody GET.

Pytanie 11

Który z przedstawionych kodów HTML sformatuje tekst według wzoru?
(uwaga: słowo "stacji" jest zapisane większą czcionką niż reszta słów w tej linii)

Lokomotywa

Stoi na stacji lokomotywa ...

A.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji lokomotywa ...</p>

B.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

C.
<h1>Lokomotywa</p>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

D.
<p><small>Lokomotywa</small></p>
<p>Stoi na <big>stacji<big> lokomotywa ...</p>

A. D.

B. C.

C. B.

D. A.

Brawo! Wybrałeś prawidłową odpowiedź, która jest kodem HTML formatującym słowo 'stacji' większą czcionką niż reszta tekstu. Wykorzystuje ona znacznik <big>, który jest wyjątkowo przydatny w sytuacjach, gdy chcemy podkreślić pewną część tekstu i sprawić, że będzie ona wyglądać na większą niż reszta. Jest to praktyka często stosowana na stronach internetowych, by przyciągnąć uwagę użytkownika do konkretnych informacji. Pamiętaj jednak, że znacznik <big> jest przestarzały i nie jest zalecany do stosowania w nowoczesnym kodowaniu HTML. Zamiast tego, w dzisiejszych czasach lepiej jest używać CSS do zmiany rozmiaru czcionki. Niemniej jednak, znajomość różnych znaczników HTML, w tym <big>, jest nadal ważna, zwłaszcza do zrozumienia i utrzymania starszych stron internetowych.

Pytanie 12

Co określa właściwość CSS animation-duration?

A. czas trwania jednego cyklu animacji

B. liczbę powtórzeń animacji

C. kierunek animacji

D. opóźnienie startu animacji

Pozostałe parametry animacji mają osobne właściwości. Opóźnienie startu ustawia animation-delay, liczbę powtórzeń animation-iteration-count, a kierunek (w przód lub w tył) animation-direction. Sam czas pojedynczego przebiegu to animation-duration.

Pytanie 13

Jak nazywa się nadrzędny formularz służący do nawigacji między formularzami i kwerendami bazy?

A. zagnieżdżonym

B. sterującym

C. pierwotnym

D. głównym

Nadrzędny formularz służący do nawigacji między innymi formularzami i kwerendami bazy nazywa się formularzem STERUJĄCYM - pełni rolę menu (panelu przełączania). Dlatego to formularz sterujący.

Pytanie 14

Który format to RASTROWY format graficzny z kompresją BEZSTRATNĄ?

A. PNG

B. CDR

C. SVG

D. JNG

PNG to rastrowy format graficzny z kompresją BEZSTRATNĄ - zmniejsza rozmiar pliku bez pogorszenia jakości obrazu, dodatkowo obsługując przezroczystość. Dlatego nadaje się do grafik, w których liczy się czystość krawędzi i kolorów. Zapamiętaj: PNG = raster + bezstratność (+ kanał alfa).

Pytanie 15

input[type=number] { background-color: Brown; }

Zapis tego selektora oznacza, że tło będzie miało brązowy kolor dla:

A. wszystkich typów pól edycyjnych

B. wszystkich tekstów na stronie internetowej

C. pól edycyjnych, w które użytkownik wprowadzi dowolną cyfrę

D. pól edycyjnych, które są typu numerycznego

Selekcja `input[type=number]` w CSS jest używana do stylizacji pól formularzy, które oczekują wartości numerycznych. Tło tych pól zostanie ustawione na kolor brązowy, co wpływa na ich wygląd i może poprawić doświadczenie użytkownika. Takie podejście jest zgodne z zasadami dostępności, ponieważ pozwala użytkownikom na natychmiastowe rozpoznanie, które pola są przeznaczone do wprowadzania cyfr. Przykładem zastosowania może być formularz zamówienia, w którym część pól ma określony typ, jak `number`, co ogranicza wprowadzanie do wartości liczbowych. Używając odpowiednich typów input, projektanci mogą tworzyć bardziej intuicyjne interfejsy, które redukują błędy użytkowników oraz poprawiają proces wypełniania formularzy. W tym kontekście warto również zwrócić uwagę na standardy W3C, które zalecają stosowanie typów input, aby zapewnić lepszą kompatybilność i funkcjonalność w różnych przeglądarkach i urządzeniach.

Pytanie 16

Który protokół jest stosowany do przesyłania plików na serwer WWW?

A. POP3

B. FTP

C. DNS

D. DHCP

FTP, czyli File Transfer Protocol, to protokół używany do przesyłania plików między komputerami w sieci, zwłaszcza w kontekście serwerów WWW. Umożliwia on użytkownikom łatwe przesyłanie, pobieranie, a także zarządzanie plikami na serwerze. FTP działa na bazie modelu klient-serwer, gdzie klient nawiązuje połączenie z serwerem i może przesyłać pliki w obie strony. Protokół ten operuje na portach 20 i 21, co czyni go standardem w dziedzinie przesyłania plików. W praktyce, wiele aplikacji klienckich, takich jak FileZilla czy WinSCP, wykorzystuje FTP do zarządzania plikami na serwerach. FTP wspiera różne metody autoryzacji, w tym logowanie anonimowe, co umożliwia użytkownikom dostęp do publicznych zasobów. Warto również zaznaczyć, że istnieją rozszerzenia, takie jak FTPS czy SFTP, które oferują dodatkowe funkcje zabezpieczeń, umożliwiając szyfrowanie danych podczas transferu. W kontekście standardów, FTP jest definiowany w dokumentach RFC 959 oraz RFC 3659, które określają jego działanie oraz interakcje w sieci. Dzięki swojej wszechstronności i niezawodności, FTP pozostaje jednym z najpopularniejszych protokołów do przesyłania plików w Internecie.

Pytanie 17

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. opisu witryny

B. słów kluczowych

C. języka używanego na stronie

D. kodowania znaków

Element <meta charset="utf-8"> jest kluczowym składnikiem metadanych w dokumentach HTML, który określa sposób kodowania znaków używanych na stronie internetowej. Użycie kodowania UTF-8, które jest najczęściej stosowanym standardem, pozwala na wyświetlanie różnorodnych znaków z różnych języków, w tym znaków diakrytycznych. Dzięki temu, strony internetowe mogą być dostępne dla szerokiego grona użytkowników bez obaw o błędy związane z wyświetlaniem tekstu. Kiedy przeglądarka internetowa napotyka ten element, wie, że powinna interpretować zawartość dokumentu zgodnie z określonym kodowaniem. Jest to szczególnie ważne w kontekście globalizacji internetu, gdzie treści mogą być tworzone w wielu językach. Ustalając odpowiednie kodowanie, programiści minimalizują ryzyko wystąpienia problemów z wyświetlaniem, takich jak zamienione znaki czy nieczytelne fragmenty tekstu. Właściwe ustawienie metadanych jest zgodne z wytycznymi W3C oraz zaleceniami dla twórców stron internetowych, co czyni ten element niezbędnym w każdej współczesnej witrynie.

Pytanie 18

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 = "sekcja2"

B. href = "r2"

C. href = "#sekcja2"

D. href = "#r2"

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 19

Które stwierdzenie jest poprawne w odniesieniu do grafiki rastrowej?

A. nie jest zapisywana w formacie WMF

B. podczas skalowania obraz nie traci na jakości

C. to obraz przedstawiony jako siatka odpowiednio kolorowanych pikseli

D. obraz opisany jest figurami geometrycznymi w układzie współrzędnych

Grafika rastrowa to obraz zapisany jako SIATKA pikseli, z których każdy ma swój kolor (tak działają zdjęcia, formaty PNG, JPG, BMP). Dlatego poprawne jest stwierdzenie, że to obraz w postaci siatki kolorowanych pikseli.

Pytanie 20

Jaką informację przekazuje przeglądarce internetowej zapis <!DOCTYPE html> ?

A. W dokumencie wymagane jest zamknięcie każdego taga, nawet samozamykającego

B. W dokumencie wszystkie tagi są zapisane wielkimi literami

C. Dokument został zapisany w wersji HTML 4

D. Dokument został zapisany w wersji HTML 5

Wszystkie niepoprawne odpowiedzi opierają się na nieprawidłowych założeniach dotyczących definicji i funkcji deklaracji typu dokumentu (DOCTYPE). Odpowiedź sugerująca, że dokument został zapisany w HTML 4, ignoruje fakt, że HTML 5 jest wersją, która wprowadza wiele istotnych zmian oraz nowych elementów w porównaniu do starszych wersji. HTML 4 był szeroko stosowany, ale obecnie jest przestarzały, a jego zastosowanie nie jest zgodne z nowoczesnymi praktykami. Kolejna odpowiedź, która stwierdza, że wszystkie znaczniki w dokumencie muszą być zapisane wielkimi literami, jest błędna, ponieważ HTML jest językiem, który nie jest wrażliwy na wielkość liter. Znaczniki mogą być zapisywane zarówno małymi, jak i wielkimi literami, co jest zgodne z zasadami dobrych praktyk, które zalecają stosowanie małych liter dla większej czytelności. Wreszcie, stwierdzenie, że każdy znacznik musi być zamykany, jest również mylne, ponieważ HTML 5 wprowadza elementy samozamykające, takie jak <br> czy <img>, które nie wymagają zamknięcia. Zrozumienie tych różnic jest kluczowe dla efektywnego posługiwania się HTML i tworzenia poprawnych dokumentów webowych.

Pytanie 21

W języku CSS stworzono określony styl. Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości

div {
     border: solid 2px blue;
     margin: 20px;
 }

A. 20 px oraz marginesy wewnętrzne tego obramowania

B. 2 px oraz marginesy zewnętrzne tego obramowania

C. 20 px oraz marginesy zewnętrzne tego obramowania

D. 2 px oraz marginesy wewnętrzne tego obramowania

Odpowiedź 2 px oraz marginesy na zewnątrz tego obramowania jest prawidłowa ponieważ w definicji stylu CSS ustawiono właściwość border z wartością solid 2px blue co oznacza że element będzie miał obramowanie o grubości 2 pikseli z niebieskim kolorem Dodatkowo użyto właściwości margin z wartością 20px co wskazuje że element ma margines zewnętrzny o szerokości 20 pikseli na każdej stronie Właściwość margin w CSS odnosi się zawsze do przestrzeni na zewnątrz granic elementu co odróżnia ją od padding który dotyczy marginesu wewnętrznego Praktyczne zastosowanie takiego stylu można znaleźć w projektach gdzie projektant chce oddzielić elementy od siebie zachowując równomierne odstępy W ten sposób można tworzyć przejrzyste i estetyczne układy na stronach internetowych Zastosowanie border pozwala również na wizualne wyróżnienie elementów co jest często wykorzystywane w interfejsach użytkownika aby podkreślić ważne informacje Dobrą praktyką jest używanie takich stylizacji aby poprawić czytelność i funkcjonalność strony poprzez jasne rozgraniczenie sekcji oraz zapewnienie odpowiednich odstępów między nimi zgodnie z zasadami UX

Pytanie 22

Która cecha wyróżnia format PNG?

A. brak obsługi kanału alfa

B. obsługa animacji

C. kompresja bezstratna

D. reprezentacja grafiki wektorowej

Pozostałe stwierdzenia są nieprawdziwe. PNG to format rastrowy (nie wektorowy) i co do zasady nie obsługuje animacji (od tego jest GIF lub APNG). Kanał alfa, czyli przezroczystość, PNG właśnie OBSŁUGUJE, więc „brak obsługi alfa” jest błędem. Wyróżnia go kompresja bezstratna.

Pytanie 23

Edytor, który spełnia kryteria WYSIWYG, powinien umożliwiać

A. osiągnięcie zbliżonego rezultatu tworzonej strony do jej wyglądu w przeglądarce internetowej

B. publikację strony na serwerze za pomocą wbudowanego klienta FTP

C. tworzenie podstawowych grafik wektorowych

D. przygotowanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej

Edytory WYSIWYG (What You See Is What You Get) mają na celu umożliwienie użytkownikom tworzenia i edytowania treści w sposób, który przypomina ostateczny wygląd strony internetowej. Odpowiedź dotycząca uzyskania zbliżonego wyniku tworzonej strony do jej obrazu w przeglądarce internetowej jest kluczowym aspektem działania takich edytorów. Umożliwiają one użytkownikom natychmiastowe podglądanie efektów wprowadzanych zmian, co jest nieocenione przy projektowaniu stron. Przykładem może być edytor tak jak Adobe Dreamweaver czy WordPress, które pozwalają na wizualne projektowanie układu, co redukuje potrzebę ręcznego kodowania. Przy tworzeniu stron internetowych zgodnie z dobrymi praktykami, edytory WYSIWYG powinny wspierać standardy HTML i CSS, co zapewnia, że efekty wizualne są zgodne z tym, co użytkownik zobaczy w przeglądarce. Takie podejście zwiększa efektywność pracy, a także ułatwia współpracę między programistami a designerami.

Pytanie 24

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. HTML 4.01 Strict

B. XHTML 1.1

C. HTML 5

D. HTML 4.01 Transitional

Odpowiedź HTML 5 jest prawidłowa, ponieważ to właśnie w tej wersji języka HTML wprowadzono nowe semantyczne znaczniki, takie jak <header>, <article>, <section> oraz <footer>. Te znaczniki mają na celu lepsze strukturalne organizowanie treści w dokumentach internetowych, co ułatwia zarówno odczyt zrozumienia przez przeglądarki, jak i poprawia dostępność dla osób korzystających z technologii wspomagających. Na przykład, <header> zazwyczaj zawiera nagłówki i elementy nawigacyjne, podczas gdy <article> służy do oznaczenia niezależnej jednostki treści, np. artykułu prasowego. <section> jest używane do grupowania powiązanych sekcji, a <footer> zawiera informacje takie jak prawa autorskie czy linki do polityki prywatności. Wdrożenie tych znaczników zgodnie z najlepszymi praktykami zwiększa semantykę strony, co jest korzystne dla SEO, a także pozwala na lepsze zrozumienie struktury strony przez roboty indeksujące. HTML 5 jest obecnie standardem w tworzeniu stron internetowych i jego znajomość jest kluczowa dla współczesnych deweloperów.

Pytanie 25

Aby udostępnić aplikację PHP w internecie, jej pliki źródłowe należy skopiować na serwer za pomocą protokołu:

A. NNTP

B. HTTP

C. FTP

D. SMTP

Pozostałe protokoły służą do innych zadań. HTTP odpowiada za przesyłanie stron z serwera do przeglądarki - to nim użytkownik ogląda gotową witrynę, a nie wgrywa pliki. SMTP to protokół poczty elektronicznej, używany do wysyłania wiadomości e-mail, więc z publikacją plików nie ma związku. NNTP obsługuje grupy dyskusyjne Usenet i również nie służy do transferu plików aplikacji. Pliki źródłowe na serwer przesyła się protokołem FTP (lub SFTP), dlatego to on jest poprawny.

Pytanie 26

Który z poniższych znaczników HTML jest używany do tworzenia struktury strony internetowej?

A. <aside>

B. <mark>

C. <em>

D. <input>

Znacznik <aside> jest poprawnym rozwiązaniem, ponieważ jest używany do definiowania treści, która jest powiązana z otaczającym kontekstem, ale nie jest kluczowa dla głównego przebiegu informacji. Z perspektywy budowy struktury strony internetowej, <aside> doskonale wpisuje się w koncepcję bocznych paneli, przypisów, lub dodatkowych informacji, które wzbogacają główną treść. Przykładem zastosowania może być umieszczenie sekcji z cytatami, powiązanymi artykułami lub innymi treściami uzupełniającymi. Zgodnie z zasadami semantyki HTML5, <aside> pozwala na lepszą interpretację treści przez przeglądarki oraz narzędzia do analizy SEO, co przyczynia się do poprawy dostępności i użyteczności strony. W praktyce, korzystanie z semantycznych znaczników, takich jak <aside>, wspiera także tworzenie bardziej czytelnych i strukturalnych dokumentów, co jest zgodne z najlepszymi praktykami w tworzeniu stron internetowych.

Pytanie 27

Aby pobrać dane z formularza HTML tak, aby nie były widoczne w adresie URL, należy zastosować:

A. metodę GET

B. wyłącznie funkcje z biblioteki PDO

C. metodę POST

D. same kontrolki, bez formularza

Kluczem jest tu sposób, w jaki formularz wysyła dane. Metoda GET dopisuje je bezpośrednio do adresu URL w postaci par nazwa=wartość, więc są od razu widoczne w pasku adresu, w historii i logach serwera - dokładnie tego mieliśmy uniknąć. Wybranie samych kontrolek bez formularza w ogóle nie zadziała: to formularz odpowiada za zebranie i wysłanie danych na serwer. Biblioteka PDO dotyczy zupełnie innego etapu - służy do komunikacji PHP z bazą danych, a nie do decydowania, jak dane opuszczają przeglądarkę. Aby ukryć je przed adresem URL, formularz musi korzystać z metody POST, która przenosi dane w treści żądania.

Pytanie 28

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 zniknięty

B. obraz2.png zostanie wymieniony przez obraz1.png

C. obraz1.png zostanie wymieniony przez obraz2.png

D. obraz2.png zostanie zniknięty

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 29

Wskaż przycisk sformatowany przedstawionym stylem CSS.

#przycisk {
    background-color: white;
    padding: 10px;
    border-width: 2px;
    border-bottom-style: dashed;
}

Przycisk 1

Przycisk 2

Przycisk 3

Przycisk 4

A. Przycisk 1

B. Przycisk 4

C. Przycisk 3

D. Przycisk 2

Niestety, twoja odpowiedź nie była prawidłowa. Wybór innego przycisku niż Przycisk 2 sugeruje, że mogłeś nie do końca zrozumieć, jak działa selekcja i stylizacja elementów za pomocą CSS. Białe tło, odstęp wewnętrzny 10 pikseli, szerokość obramowania 2 piksele oraz przerywana dolna krawędź obramowania są elementami, które zostały ustawione w stylach CSS dla przycisku 2. Pozostałe przyciski miały inne cechy, które nie były zgodne z opisanym stylem CSS. Przy niewłaściwym wyborze przycisku lub innego elementu do stylizacji, strona może nie wyglądać zgodnie z zamierzeniem, co może negatywnie wpłynąć na doświadczenie użytkownika. Dlatego ważne jest, aby zrozumieć, jak działa selekcja i stylizacja CSS. Pamiętaj, że zrozumienie CSS to klucz do tworzenia atrakcyjnych i funkcjonalnych projektów webowych.

Pytanie 30

Jaką maksymalną liczbę znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, która nie zawiera złączeń między komórkami oraz wiersza nagłówkowego?

A. 6

B. 3

C. 12

D. 9

Wybór innych odpowiedzi może wynikać z niepoprawnego rozumienia struktury tabeli lub zasadności użycia znaczników <td>. Odpowiedź 3, sugerująca 6 znaczników, pomija fakt, że każda kolumna powinna zawierać wszystkie wiersze, co w przypadku trzech wierszy prowadzi do stwierdzenia, że maksymalna liczba komórek powinna być znacznie wyższa. Natomiast odpowiedź 12 może wynikać z błędnego założenia, że każda komórka może być użyta wielokrotnie, co jednak narusza zasady HTML, które zakładają jednoznaczne przypisanie danych do danej komórki. Dlatego, aby uzyskać poprawną liczbę znaczników <td>, należy pomnożyć liczbę kolumn przez liczbę wierszy. W tym przypadku mamy trzy kolumny i trzy wiersze, więc całkowita liczba znaczników <td> wynosi 9. Kluczowe jest zrozumienie, że znaczniki <td> są przeznaczone wyłącznie do umieszczania danych w tabeli, a zasady ich użycia są ściśle określone w standardach HTML. W praktyce, błędy takie jak zbyt niska lub zbyt wysoka liczba znaczników mogą prowadzić do niepoprawnych wyświetleń tabeli oraz utrudniać użytkownikom dostęp do danych. Aby uniknąć podobnych nieporozumień, zawsze warto stosować się do dobrze zdefiniowanych zasad projektowania tabel w HTML.

Pytanie 31

Aby zaprojektować kształt logo dla strony WWW sposobem przedstawionym na obrazie, należy zastosować funkcję

A. różnicy.

B. sumy.

C. części wspólnej.

D. wykluczenia.

Niestety, wybrana odpowiedź jest niepoprawna. Zamiast 'różnicy', 'sumy' czy 'części wspólnej', poprawnym rozwiązaniem jest 'wykluczenie'. Na obrazie mamy do czynienia z dwoma kształtami, z których fioletowy jest nałożony na czerwony. Wynik to kształt pokazujący tylko te części czerwonego kształtu, które nie pokrywają się z fioletowym. Właśnie tak działa operacja wykluczenia w grafice komputerowej - wynikowa forma zawiera tylko te elementy jednego obiektu, które nie nakładają się z drugim. Operacje różnicy, sumy czy części wspólnej miałyby inne efekty. 'Różnica' usunęłaby część czerwonego kształtu pokrywającą się z fioletowym, 'suma' utworzyłaby kształt zawierający całość obu kształtów, a 'część wspólna' wytworzyłaby kształt pokrywający się z oboma kształtami. Odnoszenie się do niewłaściwych operacji może prowadzić do znacznych błędów w projektowaniu graficznym.

Pytanie 32

Brak którego elementu spowoduje BŁĄD/ostrzeżenie walidatora HTML?

A. przynajmniej jednego <h1>

<title>

<meta name="author">

<link>

Pozostałe elementy nie są obowiązkowe. <link> (np. do CSS) i <meta name="author"> są opcjonalne. Brak <h1> nie jest błędem walidacji (to zalecenie dostępności, nie wymóg). Wymagany jest <title>.

Pytanie 33

Funkcja colspan umożliwia łączenie komórek tabeli w układzie poziomym, natomiast rowspan w układzie pionowym. Która z poniższych tabel odpowiada fragmentowi kodu w języku HTML?

A. Odpowiedź C

B. Odpowiedź A

C. Odpowiedź B

D. Odpowiedź D

Rozumienie działania atrybutów rowspan i colspan jest kluczowe dla prawidłowego tworzenia struktur tabelarycznych w HTML. Błędne odpowiedzi wynikają często z nieporozumienia dotyczącego sposobu, w jaki te atrybuty kształtują układ tabeli. Rowspan, jak sama nazwa wskazuje, łączy komórki w pionie, czyli wzdłuż kolumny, co może być źródłem zamieszania dla osób przyzwyczajonych do myślenia bardziej w kategoriach kolumn niż wierszy. Przy błędnym przypisaniu rowspan można oczekiwać komórek rozciągających się w poziomie, co jest funkcją colspan. Typowym błędem jest także założenie, że rowspan i colspan są zamienne, podczas gdy w rzeczywistości służą do różnych celów i mają różne zastosowania. Ważne jest, aby rozumieć, że rowspan zwiększa wysokość komórki poprzez zajęcie miejsca w kolejnych wierszach, co jest istotne przy projektowaniu układów tabel, które muszą być zarówno funkcjonalne, jak i estetycznie poprawne. Prawidłowe użycie rowspan i colspan zgodnie z zasadami semantyki HTML zwiększa dostępność i użyteczność stron, co jest zgodne z najlepszymi praktykami w branży.

Pytanie 34

Która rozdzielczość daje proporcje obrazu 16:9 (przy kwadratowym pikselu)?

A. 2560 × 2048

B. 800 × 480

C. 1366 × 768

D. 320 × 240

Po przeliczeniu pozostałe rozdzielczości dają inne kształty obrazu. 320 × 240 to ≈ 1,33, czyli klasyczne 4:3 (stare monitory), a 800 × 480 ≈ 1,67. 2560 × 2048 daje ≈ 1,25, blisko proporcji 5:4. Tylko 1366 × 768 wychodzi ≈ 1,78, czyli 16:9.

Pytanie 35

Której właściwości CSS użyć, aby ustawić wewnętrzny GÓRNY odstęp (między treścią a obramowaniem)?

border-top

outline-top

padding-top

local-top

Pozostałe nazwy dotyczą czego innego. border-top rysuje górne OBRAMOWANIE (linię), a nie odstęp wewnętrzny. outline-top i local-top to właściwości, które w CSS NIE istnieją. Górny margines wewnętrzny daje padding-top.

Pytanie 36

Który z poniższych obrazów został sformatowany przy użyciu zaprezentowanego stylu CSS?

A. A

B. C

C. D

D. B

Odpowiedź A jest prawidłowa, ponieważ zastosowane style CSS dokładnie odzwierciedlają podany kod. Styl img { padding: 5px; border: 1px solid grey; border-radius: 10px; } oznacza, że obrazek otrzymuje wewnętrzny margines o wartości 5 pikseli, szary, jednopikselowy, ciągły obramowanie oraz zaokrąglenie narożników o promieniu 10 pikseli. Efektem tego jest estetyczny wygląd, który umożliwia lepszą prezentację treści graficznych w projektach webowych. Padding pozwala na uzyskanie równowagi wizualnej, natomiast border-radius zapewnia miękkość krawędzi, co jest często stosowane w nowoczesnym web designie. Praktycznym zastosowaniem takich stylów jest m.in. tworzenie kart wizualnych na stronach internetowych, gdzie estetyka i czytelność są kluczowe. Dobrym przykładem jest stosowanie tych technik w responsywnych projektach, gdzie obrazy muszą dobrze współgrać z różnymi elementami interfejsu użytkownika. CSS umożliwia tworzenie atrakcyjnych wizualnie stron, które przyciągają uwagę i poprawiają interakcję użytkownika z treścią.

Pytanie 37

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

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

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

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

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

Poziome wyrównanie tekstu w bloku ustawia właściwość text-align. Wartość right dosuwa tekst do prawej krawędzi, np. <p style="text-align: right">tekst</p>. Inne dopuszczalne wartości to left, center i justify (wyjustowanie). Dlatego do wyrównania tekstu do prawej służy text-align: right.

Pytanie 38

Który z wymienionych formatów umożliwia zapisanie materiału wideo z towarzyszącą ścieżką dźwiękową?

A. MP4

B. WMA

C. AAC

D. WAV

Odpowiedź MP4 jest poprawna, ponieważ jest to jeden z najpopularniejszych formatów kontenerowych używanych do przechowywania wideo wraz z dźwiękiem. Format MP4 (MPEG-4 Part 14) pozwala na efektywne kodowanie wideo, przy jednoczesnym zachowaniu wysokiej jakości obrazu i dźwięku. Umożliwia on przechowywanie różnorodnych strumieni danych, w tym wideo, audio, a także tekstu, co czyni go bardzo wszechstronnym rozwiązaniem dla twórców multimediów. Przykładowo, format MP4 jest często używany w aplikacjach do strumieniowania wideo, takich jak YouTube, oraz w systemach zarządzania treścią (CMS) do publikacji materiałów wideo w Internecie. Dzięki kompresji zgodnej z kodekiem H.264 dla wideo i AAC dla audio, pliki MP4 są względnie małe, co ułatwia ich przesyłanie i przechowywanie. To czyni format MP4 standardem branżowym w produkcji filmowej, telewizyjnej oraz w aplikacjach mobilnych i webowych.

Pytanie 39

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW

B. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej

C. bazy danych z danymi publikowanymi na stronie

D. organizacji informacji na serwerze WWW

Ważne jest, by zrozumieć, że front-end i back-end pełnią różne role w tworzeniu aplikacji internetowych. Back-end zajmuje się tym, co dzieje się na serwerze, czyli organizowaniem danych i logiką aplikacji. Jeśli myślisz, że front-end to wszystko, co związane z serwerem, to musisz to przemyśleć. Front-end to rzeczywiście ta warstwa, którą widzisz, ale też komunikacja z serwerem przez technologie jak AJAX. A jeśli ktoś mówi, że front-end to baza danych, to totalnie nie tak. Bazy danych to sprawa back-endu. Często można też spotkać zamieszanie między interfejsem użytkownika a logiką aplikacji, co może prowadzić do nieporozumień w tworzeniu stron. Projektując coś, musisz myśleć o obu tych warstwach, żeby wszystko razem dobrze działało.

Pytanie 40

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. td, th { 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.

Rozpocznij nowy egzamin

Powrót do strony głównej