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: 17 czerwca 2026 16:55
Data zakończenia: 17 czerwca 2026 17:09

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W HTML, aby dodać obrazek z tekstem przylegającym, umiejscowionym na środku obrazka, trzeba użyć znacznika

A. <img src="/obrazek.png" alt="obraz1" hspace="30px">tekst

B. <img src="/obrazek.png" alt="obraz4">tekst

C. <img src="/obrazek.png" alt="obraz2" align="middle">tekst

D. <img src="/obrazek.png" alt="obraz3" height="50%">tekst

Aby wstawić obrazek z tekstem przyległym w HTML, należy skorzystać ze znacznika <img> z atrybutem align ustawionym na 'middle'. Atrybut align jest przestarzały w HTML5, ale nadal może być używany w kontekście tekstów przylegających do obrazków. Ustawiając 'middle', obrazek będzie wyśrodkowany w pionie względem linii tekstu, co pozwala na estetyczne umiejscowienie obrazu w odniesieniu do towarzyszącego mu tekstu. Dobrym przykładem jest zastosowanie <img src='/obrazek.png' alt='obraz2' align='middle'>tekst, co sprawia, że obrazek staje się integralną częścią tekstu, a nie tylko jego dodatkiem. W kontekście standardów, warto zauważyć, że HTML5 zaleca stosowanie CSS do pozycjonowania, dlatego bardziej współczesnym podejściem byłoby użycie stylów CSS, np. 'vertical-align: middle'. Można to osiągnąć poprzez dodanie klasy do obrazka oraz odpowiedniego stylu CSS. Chociaż align jest przestarzały, jego rozumienie jest istotne dla osób przystosowujących starsze strony do nowych standardów.

Pytanie 2

Podany fragment dokumentu HTML zawierający kod JavaScript sprawi, że po naciśnięciu przycisku

A. obraz1.png zostanie wymieniony na obraz2.png

B. obraz1.png zostanie zniknięty

C. obraz2.png zostanie zniknięty

D. obraz2.png zostanie wymieniony na obraz1.png

W analizie odpowiedzi należy zwrócić uwagę na działanie technologii webowych w kontekście manipulacji elementami HTML. W pytaniu przedstawiono kod JavaScript używany w zdarzeniu onclick przycisku HTML co prowadzi do zmiany stylu elementu. Jeśli chodzi o odpowiedź sugerującą że obraz1.png zostanie ukryty jest to błędne ponieważ w kodzie nie ma odwołania do tego elementu poprzez identyfikator. Manipulacja stylami CSS dotyczy jedynie elementów które zostały jednoznacznie zidentyfikowane w skrypcie. Kolejna błędna odpowiedź mówi że obraz2.png zostanie zastąpiony przez obraz1.png. W rzeczywistości w kodzie nie ma żadnego mechanizmu ani funkcji które by zamieniały jeden obrazek na drugi. Skrypt jedynie ukrywa element zmieniając jego styl display więc nie dochodzi do żadnej zamiany. Odpowiedź sugerująca że obraz1.png zostanie zastąpiony przez obraz2.png również jest błędna z podobnych powodów. Manipulacja DOM w tym przypadku polega wyłącznie na zmianie stylu widoczności a nie na modyfikacji treści czy zamianie elementów. Typowym błędem jest założenie że skrypty JavaScript dokonują zamian elementów co wymaga bardziej zaawansowanych operacji niż zmiana stylu display. Kluczowe w programowaniu webowym jest zrozumienie jak selektywne odwoływanie się do elementów za pomocą funkcji takich jak getElementById pozwala na precyzyjne kontrolowanie ich właściwości i reakcji na interakcje użytkownika co jest fundamentem tworzenia dynamicznych i interaktywnych stron internetowych

Pytanie 3

W CSS, poniższy zapis spowoduje, że czerwony kolor zostanie zastosowany do

h1::first-letter {color:red;}

A. pierwsza litera nagłówka pierwszego poziomu

B. pierwsza litera nagłówka drugiego poziomu

C. tekst nagłówka pierwszego poziomu

D. pierwsza linia akapitu

Wiesz, użycie selektora CSS ::first-letter w połączeniu z stylem h1 to fajny sposób na zmianę wyglądu pierwszej litery w nagłówku. Kiedy używasz tego, kolor czerwony sprawi, że ta litera będzie się wyróżniać, co jest super, zwłaszcza w przypadku nagłówków czy akapitów. To technika, którą często stosuje się w projektowaniu stron, żeby nadać im trochę typograficznego stylu, jak w książkach z dużymi inicjałami. Ale pamiętaj, że ten selektor działa tylko z blokowymi elementami, takimi jak czy <h1>, więc jeżeli spróbujesz zastosować go z elementami liniowymi, to niestety efekty nie będą takie, jak się spodziewasz. Zawsze warto też mieć na uwadze standardy W3C, bo one pomagają w tworzeniu dostępnych stron. No i ten selektor jest częścią specyfikacji CSS Pseudo-Elements Level 3, więc przeglądarki go dobrze wspierają. Zrozumienie, jak i kiedy stosować takie selektory, to klucz do tworzenia nowoczesnych stron.

Pytanie 4

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. nav { float: right; }

B. aside {float: left; }

C. nav { float: left; } aside { float: left; }

D. nav { float: right; } section { float: right; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 5

Którego znacznika HTML5 użyć do GRUPOWANIA powiązanych elementów formularza?

<optgroup>

<fieldset>

<summary>

<option>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <code><fieldset></code> grupuje powiązane elementy formularza w logiczną sekcję (zwykle z ramką), a <code><legend></code> daje jej opis. Porządkuje to formularz i poprawia dostępność. Dlatego do grupowania pól formularza służy <code><fieldset></code>.

Pytanie 6

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

B. widoczny obok każdego akapitu

C. tłem każdego akapitu

D. tłem całej witryny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 7

Przygotowano fragment kodu PHP z zadeklarowaną zmienną tablicową. Jaki wynik zostanie wyświetlony jako imię po wykonaniu tego kodu?

$imiona = array('Anna', 'Tomasz', 'Krzysztof', 'Aleksandra');
echo $imiona[2];

A. Krzysztof

B. Tomasz

C. Aleksandra

D. Anna

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź Krzysztofa jest całkiem trafna, bo w PHP zaczynamy liczenie od zera. Czyli mamy pierwszy element na pozycji 0, drugi na 1, a trzeci na 2. W tym przypadku zmienna imiona to tablica z czterema elementami: 'Anna', 'Tomasz', 'Krzysztof' oraz 'Aleksandra'. Gdy używamy echo $imiona[2], to tak naprawdę sięgamy po trzeci element, czyli 'Krzysztofa'. Zasada indeksowania od zera jest właściwie standardem w wielu językach programowania, jak C, JavaScript czy Python. Dzięki temu PHP staje się bardziej spójne z innymi językami. To pozwala lepiej zarządzać danymi w kodzie, bo każdy element ma swój unikalny indeks. Ważne jest, żeby to zapamiętać, bo dzięki temu można unikać błędów, które wynikają z niewłaściwego dostępu do elementów tablic. No i lepiej wiedzieć, że wykraczający indeks może prowadzić do różnych problemów, więc warto zrozumieć to zagadnienie.

Pytanie 8

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}

Na stronie będą wyświetlane czcionką w kolorze niebieskim:

A. paragrafy, do których została przypisana klasa uzytkownik.

B. tylko elementy tekstowe typu , <h1>.

C. wszystkim elementom w sekcji <body> z przypisaną klasą uzytkownik.

D. wszystkie akapity.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Deklaracja selektora p.uzytkownik oznacza w CSS połączenie selektora typu z selektorem klasy. Innymi słowy: przeglądarka wybierze tylko te elementy , które mają w atrybucie class wpisaną klasę uzytkownik, np. Treść. Sama kropka przed nazwą klasy definiuje selektor klasy, a litera p przed kropką zawęża go wyłącznie do paragrafów. Gdyby w stylu było samo .uzytkownik { color: blue; }, wtedy reguła objęłaby wszystkie elementy z tą klasą, niezależnie czy to , <div>, <h1> czy cokolwiek innego. Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł. Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.

Pytanie 9

W kodzie HTML stworzono formularz, który wysyła informacje do pliku formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka zostaje przekierowana na wskazany adres. Na podstawie podanego adresu /formularz.php?imie=Anna&nazwisko=Kowalska można stwierdzić, że dane do pliku formularz.php zostały wysłane za pomocą metody:

A. SESSION

B. POST

C. COOKIE

D. GET

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź wskazuje na metodę GET. Jako jedna z dwóch podstawowych metod przesyłania danych w protokole HTTP, GET przesyła informacje poprzez dołączenie ich do adresu URL. I tak, jeżeli na załączonym obrazku widzimy adres URL zawierający parametry (np. imię=Anna&nazwisko=Kowalska) dołączone do adresu pliku formularz.php, to oznacza, że dane zostały przesłane właśnie tą metodą. Jest to zgodne z dobrymi praktykami i standardami branżowymi, które zalecają użycie metody GET zwłaszcza przy przesyłaniu niewielkich ilości danych, które nie wymagają specjalnego zabezpieczenia. Ważne jednak jest zrozumienie, że metoda GET nie jest odpowiednia, gdy przesyłane dane są poufne, np. hasła, ponieważ są one widoczne w pasku adresu przeglądarki. Ponadto, warto zauważyć, że dane przesyłane metodą GET mogą być zapisane w historii przeglądarki, co również ma swoje implikacje bezpieczeństwa.

Pytanie 10

Po wykonaniu poniższego kodu PHP, w zmiennej $napis znajduje się tekst:

$napis = "Programowanie w PHP";
$napis = substr($napis, 3, 5);

A. gr

B. og

C. gramo

D. ogram

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'gramo' jest poprawna, ponieważ funkcja substr() w PHP służy do wyodrębnienia podciągu z łańcucha znaków. W przedstawionym kodzie, oryginalna wartość zmiennej $napis to 'Programowanie w PHP'. Funkcja substr() przyjmuje trzy argumenty: pierwszy to łańcuch źródłowy, drugi to indeks początkowy (rozpoczynając od 0), a trzeci to długość podciągu, który ma zostać wyodrębniony. W naszym przykładzie, funkcja substr($napis, 3, 5) zaczyna od indeksu 3, co odpowiada literze 'g' w słowie 'Programowanie', a następnie pobiera kolejnych 5 znaków. Ostatecznie wyodrębniony podciąg to 'gramo', obejmujący znaki g, r, a, m, o. Przykład zastosowania: możemy użyć tej funkcji do wyodrębnienia konkretnej części tekstu, na przykład w przypadku przetwarzania danych lub generowania dynamicznej zawartości na stronach internetowych.

Pytanie 11

Przedstawiono fragment HTML, który nie przechodzi poprawnej walidacji. Błąd walidacyjny tego kodu 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 br.

C. powtórzenia nazwy pliku graficznego.

D. niedomknięcia znacznika img.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Błąd walidacji w kodzie HTML na obrazku wynikał z braku cudzysłowu. W HTML atrybuty powinny być zawsze otoczone cudzysłowami, są to pojedyncze (' ') lub podwójne (" "), co jest wymogiem poprawnej walidacji kodu. Atrybuty, którym nie przydzielono wartości, mogą powodować problemy w przeglądarkach, co z kolei prowadzi do błędów walidacji. Dlatego zawsze należy pamiętać o otoczeniu atrybutów cudzysłowami, aby zapewnić poprawne działanie strony internetowej. Prawidłowo zapisany atrybut w tagu HTML powinien wyglądać tak: <img src="obrazek.jpg">. W praktyce niezgodność z tą konwencją może prowadzić do nieprawidłowego wyświetlania strony lub jej elementów. Dlatego zawsze warto zwracać uwagę na poprawność składni podczas pisania kodu HTML.

Pytanie 12

Który zapis to poprawny SKŁADNIOWO warunek PHP sprawdzający błąd połączenia z bazą?

if (mysqli_connect_errno()){}

if (mysqli_connect_error())()

if (mysqli_connect_errno()}{

if (mysqli_connect_error()}{

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Składnia warunku w PHP to <code>if (warunek) { ... }</code> - okrągłe nawiasy obejmują warunek, a klamrowe blok kodu. Poprawny jest więc <code>if (mysqli_connect_errno()){}</code>. Dlatego ten zapis jest składniowo prawidłowy.

Pytanie 13

Którego polecenia użyć w PHP, aby poprawnie ZAKOŃCZYĆ połączenie z bazą MySQL?

exit

mysqli_close

die

mysql_exit

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Połączenie z bazą MySQL otwierasz w PHP przez <code>mysqli_connect()</code>, a gdy skończysz na nim pracować, zamykasz je funkcją <code>mysqli_close($polaczenie)</code>. Zamknięcie zwalnia zasoby serwera i uchwyt połączenia, co jest dobrą praktyką zwłaszcza w długo działających skryptach (choć PHP i tak zamyka połączenie automatycznie na końcu wykonania). Typowy schemat to: połącz się, wyślij zapytania, odbierz wyniki, a na końcu <code>mysqli_close($polaczenie);</code>. Zapamiętaj: skoro połączenie otwiera <code>mysqli_connect</code>, to symetrycznie zamyka je <code>mysqli_close</code>.

Pytanie 14

Jeśli zmienna $x przechowuje dowolną dodatnią liczbę naturalną, przedstawiony kod źródłowy PHP ma za zadanie wyświetlić:

$licznik = 0;
while ($licznik != $x)
{
    echo $licznik;
    $licznik++;
}

A. kolejne liczby od 0 do x-1

B. kolejne liczby od x do 0

C. liczby wczytywane z klawiatury, tak długo aż zostanie wczytana wartość x

D. losowe liczby z przedziału (0, x)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwa odpowiedź sugeruje, że kod PHP wyświetla liczby naturalne od 0 do x-1. Przez inicjalizację zmiennej $licznik wartością 0 i stopniowe zwiększanie jej wartości o 1 w każdej iteracji pętli while, aż do osiągnięcia wartości $x, proces ten jest realizowany. Jest to typowy przykład użycia pętli while w programowaniu, gdzie chcemy wykonać dane działanie wielokrotnie, zazwyczaj do momentu, gdy spełniony jest określony warunek. Zastosowanie takiego podejścia jest powszechne nie tylko w PHP, ale w większości języków programowania. W tym konkretnym przypadku, zastosowanie pętli while pozwala na efektywne wygenerowanie liczby naturalnej w określonym zakresie, co jest często potrzebne w różnych algorytmach czy operacjach matematycznych.

Pytanie 15

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Metoda ta odniesie się do akapitu

A. akapit

B. akapit2

C. akapit3

D. akapit4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementsByClassName('akapit') w JavaScript jest metodą DOM, która zwraca kolekcję wszystkich elementów w dokumencie HTML, które mają przypisaną określoną klasę. W tym przypadku interesuje nas klasa 'akapit'. Poprawna odpowiedź to akapit4, ponieważ ten akapit ma atrybut class ustawiony na 'akapit'. Zastosowanie klasy w HTML jest zgodne z najlepszymi praktykami programistycznymi, ponieważ pozwala na łatwe stylowanie i manipulowanie grupą elementów za pomocą CSS i JavaScript. Na przykład, jeśli chcemy zmienić kolor tekstu wszystkich akapitów z klasą 'akapit', możemy to zrobić jednym poleceniem w CSS: .akapit { color: red; }. Ponadto, metoda getElementsByClassName zwraca tzw. HTMLCollection, co oznacza, że możemy iterować po tej kolekcji i modyfikować jej elementy. Użycie klas w ten sposób wspiera zasadę separacji treści od prezentacji, co jest kluczowe w nowoczesnym podejściu do tworzenia stron internetowych.

Pytanie 16

W języku PHP instrukcja foreach jest rodzajem

A. instrukcji warunkowej, niezależnie od typu zmiennej

B. instrukcji wyboru, dla elementów tablicy

C. pętli, przeznaczonej wyłącznie dla elementów tablicy

D. pętli, niezależnie od rodzaju zmiennej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Instrukcja foreach w PHP to naprawdę super sprawa, jeśli chodzi o przechodzenie przez elementy tablicy. Dzięki niej można bardzo prosto iterować po wszystkich wartościach, co sprawia, że kod staje się bardziej przejrzysty i zwięzły. Nie trzeba wtedy się martwić o ręczne zarządzanie wskaźnikami tablicy. A dostęp do kluczy i wartości? Proszę bardzo! Na przykład, mając tablicę $fruits = ['jabłko', 'banan', 'czereśnia'], można użyć foreach tak: <code>foreach ($fruits as $fruit) { echo $fruit; }</code>. To wydrukuje nam wszystkie owoce na ekranie. No i warto mieć na uwadze, że foreach działa też z tablicami asocjacyjnymi, co pozwala na przechodzenie przez pary klucz-wartość. Korzystając z tej instrukcji, można pisać lepszy, bardziej zrozumiały kod, a to szczególnie ma znaczenie w większych projektach, gdzie czytelność jest kluczowa dla późniejszego rozwoju i utrzymania kodu.

Pytanie 17

Wskaż równoważną metodę dla instrukcji switch zapisaną w języku PHP?

A. D

B. C

C. A

D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest dobra, bo w PHP używamy instrukcji switch, żeby robić różne rzeczy w zależności od wartości zmiennej. W tym przypadku, if w odpowiedzi B działa podobnie do switch, gdy sprawdzamy kilka wartości tej samej zmiennej. W twoim kodzie if patrzy, czy zmienna $liczba jest równa 10 albo 20, a dla tych ilości robimy to samo, czyli zwiększamy $liczba. Jak żaden z warunków nie zagra, to else ustawia $liczba na 0. Takie sposoby pisania kodu są dość popularne i pomagają w unikaniu powtarzania tych samych instrukcji, co czyni kod lepszym. W sumie, użycie switch byłoby lepsze przy bardziej skomplikowanych opcjach, bo kod byłby bardziej zrozumiały i łatwiejszy do utrzymania. Z doświadczenia wiem, że lepiej unikać zbyt wielu warunków w if, gdy można to zrobić prościej z użyciem switch, szczególnie, gdy mamy do czynienia z wieloma stałymi wartościami.

Pytanie 18

Na ilustracji przedstawiono strukturę bloków na stronie internetowej. Który z poniższych fragmentów CSS odpowiada takim ustawieniom? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. #pierwszy { width: 30%; } #drugi { width: 70%; } #trzeci { width: 70%; } #czwarty { width: 100%; }

B. #pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }

C. #pierwszy {float:left; width:30%; } #drugi {clear:both; width:70%; } #trzeci {float:left; width:70%; } #czwarty {clear:both; }

D. #pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź pierwsza jest prawidłowa, gdyż prawidłowo wykorzystuje właściwość float w stylach CSS, aby uzyskać pożądany układ bloków na stronie internetowej. Float pozwala elementom przemieszczać się na lewą lub prawą stronę kontenera, co jest kluczowe w tworzeniu layoutów. W tym przypadku #pierwszy, #drugi i #trzeci mają ustawione float:left, co umożliwia ich równoległe ustawienie w poziomie aż do momentu, gdy szerokości kontenera są zapełnione. Następnie blok #czwarty wymaga clear:both, aby przemieszczać się poniżej wszystkich poprzednich elementów z ustawionym float. To powszechna technika stosowana w projektowaniu responsywnych układów stron, gdzie równoległe pozycjonowanie elementów pozwala na efektywne wykorzystanie przestrzeni. Float w połączeniu z odpowiednimi szerokościami procentowymi pomaga tworzyć elastyczne projekty, które dobrze skalują się na różnych urządzeniach, co jest zgodne z nowoczesnymi standardami web developmentu. Ponadto zrozumienie działania float i clear jest fundamentem przy tworzeniu klasycznych layoutów typu grid przed wprowadzeniem nowoczesnych rozwiązań takich jak Flexbox czy CSS Grid, co pokazuje zrozumienie podstawowych zasad CSS.

Pytanie 19

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

A. SWF

B. ACE

C. GIF

D. SVG

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 20

Którym znacznikiem wstawić listę NUMEROWANĄ (uporządkowaną)?

<ol>

<ul>

<li>

<dl>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Listę numerowaną (uporządkowaną) tworzy <code><ol></code> (ordered list), a każdą pozycję wpisujesz w <code><li></code>: <code><ol><li>Pierwszy</li><li>Drugi</li></ol></code> wyświetli kolejne punkty z numerami 1, 2... Numerację można zmienić atrybutem <code>type</code> lub CSS-em <code>list-style-type</code>. Zapamiętaj: „ol” = ordered (uporządkowana), „ul” = unordered (punktowana).

Pytanie 21

Z którego z pól klasy

Dane

można będzie uzyskać dostęp z zewnątrz, korzystając z obiektu stworzonego jako instancja tej klasy?

class Dane {
    public $a;
    private $b;
    protected $c;
}

A. Do wszystkich pól.

B. Do pola $b.

C. Do pola $a.

D. Do pola $c.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ pole $a jest zadeklarowane jako publiczne, co oznacza, że jest dostępne z zewnątrz klasy i może być modyfikowane oraz odczytywane przez instancje tej klasy oraz inne klasy. Publiczne modyfikatory dostępu są standardową praktyką w programowaniu obiektowym, umożliwiającą swobodny dostęp do danych, co jest szczególnie przydatne w przypadku, gdy chcemy, aby dane były łatwo dostępne dla innych komponentów systemu. Na przykład, jeśli klasa Dane jest używana w aplikacji, możemy tworzyć obiekty tej klasy i bezpośrednio operować na polu $a, co sprzyja elastyczności i prostocie w zarządzaniu danymi. W dobrych praktykach programistycznych często wykorzystuje się publiczne pola w prostych strukturach danych, gdzie dostęp do danych musi być łatwy i szybki. Warto także pamiętać, że dostępność publicznych pól może być użyteczna w kontekście serializacji obiektów, gdzie prosto jest zmapować dane obiektu na format JSON lub XML.

Pytanie 22

Określ rezultat działania podanego kodu PHP, przy założeniu, że zmienna tab jest tablicą.

$tab = explode(",", "jelenie,sarny,dziki,lisy,borsuki"); 
echo $tab[1]." ".$tab[2];

A. jelenie sarny

B. sarny dziki

C. lisy borsuki

D. dziki lisy

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wynik wykonania kodu PHP przedstawionego w pytaniu to 'sarny dziki', co odpowiada trzeciej opcji. Analizując kod, najpierw wykorzystujemy funkcję explode, która dzieli ciąg znaków na elementy tablicy, używając przecinka jako separatora. W rezultacie zmienna $tab stanie się tablicą składającą się z pięciu elementów: 'jelenie', 'sarny', 'dziki', 'lisy', 'borsuki'. Następnie w instrukcji echo odwołujemy się do drugiego i trzeciego elementu tablicy, co odpowiada indeksom 1 i 2, ponieważ indeksowanie w PHP zaczyna się od zera. Zatem $tab[1] to 'sarny', a $tab[2] to 'dziki'. W kontekście praktycznym, znajomość pracy z tablicami oraz funkcji do ich manipulacji jest kluczowa w programowaniu w PHP, zwłaszcza przy pracy z danymi w formacie CSV lub innymi formatami wymagającymi podziału ciągów. Opanowanie takich technik jest istotne dla programistów zajmujących się tworzeniem aplikacji webowych, gdzie przetwarzanie danych wejściowych jest na porządku dziennym.

Pytanie 23

Wskaż poprawne stwierdzenie dotyczące poniższej definicji stylu:

<style>
<!--
P{color:blue; font-size:14pt; font-style:italic}
A{font-size: 16pt ; text-transform:lowercase;}
TD.niebieski {color: blue}
TD.czerwony {color: red}
-->
</style>

A. Określono dwie kategorie

B. Akapit będzie konwertowany na małe litery

C. To jest styl lokalny

D. Odnośnik będzie napisany czcionką 14 punktów

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym kawałku kodu CSS mamy dwie klasy: TD.niebieski i TD.czerwony. Klasy w CSS to nic innego jak sposób na nadawanie różnych stylów grupom elementów HTML. Poznajesz je po tym, że mają przed sobą kropkę. Klasa TD.niebieski ustawia kolor tekstu na niebieski, a TD.czerwony na czerwony. Tworzenie klas jest super ważne, gdy robisz strony WWW, bo pozwala ci na stosowanie jednolitych stylów w różnych miejscach. Dzięki temu łatwiej później ogarnąć wygląd strony. Na przykład, w dużych projektach webowych użycie klas sprawia, że wszystko wygląda spójnie, a zmiany kolorów czy innych stylów są proste, bo nie musisz grzebać w każdym elemencie osobno. Fajnie jest też nadawać klasom opisowe nazwy, bo to ułatwia zrozumienie kodu. W sumie, to standard w branży, żeby wszyscy, którzy będą pracować nad kodem, mogli się w nim łatwo odnaleźć.

Pytanie 24

Rezultatem działania zamieszczonej pętli napisanej w języku PHP jest wypisanie następujących liczb

A. od 10 do 2

B. od 1 do 10

C. od 2 do 10

D. od 10 do 1

Pętla for w języku PHP przedstawiona w pytaniu zaczyna od wartości początkowej 10 dla zmiennej iteracyjnej $i. Warunek zakończenia pętli to $i >= 1, co oznacza że pętla będzie działać dopóki wartość $i jest większa lub równa 1. W każdym kroku iteracji następuje dekrementacja zmiennej $i o 1 dzięki operatorowi $i--. W praktyce oznacza to że pętla wypisuje wartości od 10 do 1 w kolejnych liniach. Dekrementacja w pętlach jest często stosowana, kiedy chcemy przechodzić przez elementy w odwrotnej kolejności, co jest przydatne w algorytmach sortowania bądź odwracania danych. Dzięki jasnemu określeniu warunków początkowych, końcowych oraz kroku iteracji pętla for jest jednym z bardziej przejrzystych i zrozumiałych narzędzi w programowaniu. Warto pamiętać o optymalizacji kodu i unikanie nadmiernych iteracji, co jest dobrym standardem w praktykach programistycznych, zwłaszcza w projektach o dużej skali. Pisząc bardziej złożone skrypty, należy pamiętać także o możliwości wystąpienia błędów związanych z nieskończonymi pętlami jeśli warunek zakończenia nie jest poprawnie zdefiniowany.

Pytanie 25

W CSS zdefiniowano regułę

input:focus { background-color: LightGreen; }

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

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

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

C. w każdej sytuacji

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

Pseudoklasa :focus dotyczy elementu, który jest AKTYWNY - ma „fokus”, np. pole tekstowe po kliknięciu, gotowe do wpisywania. Dlatego input:focus zadziała po kliknięciu w pole, gdy jest aktywne.

Pytanie 26

Który kod jest alternatywny do kodu zamieszczonego w ramce?

<?php
 for($x = 1; $x <= 55; $x++)
 {
   if($x % 2 != 0) continue;
   echo $x . " ";
 }
 ?>

A. for($x = 1; $x <= 55; $x++) {echo $x." ";}

B. for($x = 1; $x <= 55; $x += 1) {echo $x." ";}

C. for($x = 2; $x <= 56; $x += 2) {echo $x." ";}

D. for($x = 2; $x <= 54; $x += 2) {echo $x." ";}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Brawo! Wybrałeś odpowiedź A, która jest poprawna. Kod zawarty w tej odpowiedzi jest alternatywą dla kodu zamieszczonego w ramce. W obydwu przypadkach mamy do czynienia z pętlą, która operuje na liczbach. W pętli zamieszczonej w ramce, instrukcja 'continue' powoduje, że pętla pomija operacje na liczbach parzystych. Tym samym, końcowy efekt tego kodu to operacje na liczbach nieparzystych. W odpowiedzi A, pętla została skonstruowana w taki sposób, że operacje wykonywane są tylko na liczbach parzystych (pętla zaczyna od liczby 2 i zwiększa wartość o 2 za każdym razem). Tą technikę możemy wykorzystać, kiedy chcemy zbudować kod, który nie uwzględnia pewnego podzbioru danych. W tym przypadku, jeśli chcemy stworzyć kod, który operuje tylko na liczbach nieparzystych, możemy zastosować instrukcję 'continue' w połączeniu z warunkiem sprawdzającym parzystość liczby.

Pytanie 27

Jakie oznaczenie powinno się zastosować, aby umieścić film na stronie internetowej?

A. <audio>

B. <video>

C. <movie>

D. <media>

Znaczniki <media>, <movie> oraz <audio> nie są odpowiednie do osadzania filmów na stronach internetowych z kilku powodów. Nie istnieje znacznik <media> w standardzie HTML, co prowadzi do mylnego przekonania, że jest to poprawne podejście do integracji multimediów. Użytkownicy mogą mylnie sądzić, że takie podejście zapewni im funkcjonalność wideo, jednak brak takiego znacznika w specyfikacji HTML czyni go nieprzydatnym. Z kolei znacznik <movie> również nie jest zdefiniowany w standardach HTML i nie jest stosowany w praktyce webowej, co sprawia, że jego użycie prowadzi do poważnych błędów w implementacji. Można spotkać się z przekonaniem, że <audio> może być używany do odtwarzania wideo, jednak jest on przeznaczony wyłącznie do dźwięku. Odtwarzanie wideo przy użyciu znacznika <audio> byłoby niewłaściwe i wprowadzałoby użytkowników w błąd, ponieważ nie zapewniałoby wizualnego komponentu, który jest niezbędny do wyświetlania filmów. Ponadto, prawidłowe osadzanie wideo powinno opierać się na standardach branżowych, które promują odpowiednie użycie znaczników oraz ich atrybutów, co jest kluczowe dla funkcjonalności i dostępności multimediów w sieci. Przy projektowaniu stron internetowych, ważne jest, aby stosować się do aktualnych standardów, aby zapewnić pełne wsparcie przeglądarek oraz optymalne doświadczenie użytkownika.

Pytanie 28

Którego znacznika HTML użyć, aby wstawić poziomą linię?

<hl>

<hr>

<line>

<br>

Poziomą linię (oddzielającą treść) wstawia znacznik <hr> - to element pusty, bez znacznika zamykającego. Dlatego poziomą linię daje <hr>.

Pytanie 29

W języku PHP, po wykonaniu poniższego fragmentu kodu, w zmiennej o nazwie Nowy_Napis uzyskamy

A. ZAWSZE SPRAWDZ SWOJ KOD

B. ZaWszE

C. zAwSZe sPrAwDz SWOJ kOd

D. zawsze sprawdz swoj kod

Funkcja strtolower w PHP służy do konwersji ciągu znaków na małe litery. W podanym przykładzie zmienna Napis zawiera wartość ZaWsze SpRaWdZ swoj KoD, która jest mieszanką wielkich i małych liter. Po zastosowaniu funkcji strtolower do tej zmiennej, wynikowy ciąg zostaje przetworzony tak, że wszystkie litery są zamieniane na małe. Dlatego w zmiennej Nowy_Napis znajdzie się tekst zawsze sprawdz swoj kod. Użycie strtolower jest częste, gdy chcemy ujednolicić dane tekstowe, np. porównując adresy email czy nazwy użytkowników, aby uniknąć rozróżnienia wielkości liter. Jest to zgodne z dobrą praktyką programistyczną, która polega na zapewnieniu spójności danych poprzez ich normalizację. W kontekście aplikacji webowych często stosuje się tę funkcję do przetwarzania danych wejściowych od użytkowników, aby uzyskać jednolite formatowanie i uniknąć potencjalnych błędów przy wyszukiwaniu lub porównywaniu danych. Praktyczne zastosowanie tej funkcji ułatwia zarządzanie danymi i upraszcza logikę biznesową aplikacji.

Pytanie 30

Jaki kolor oznacza zapis szesnastkowy #0000FF?

A. niebieski

B. zielony

C. czarny

D. czerwony

W zapisie szesnastkowym #RRGGBB kolejne pary to czerwony, zielony i niebieski. W #0000FF czerwony i zielony są zerowe, a niebieski maksymalny (FF = 255), więc kolor jest NIEBIESKI. Dlatego #0000FF to niebieski.

Pytanie 31

Która właściwość CSS ustawia kolor TEKSTU elementu?

font-color

color

background-color

text-color

Kolor TEKSTU elementu ustawia w CSS właściwość color, np. color: #000000; daje czarny tekst. Tła dotyczy osobna właściwość background-color. Dlatego kolor tekstu ustawia color.

Pytanie 32

Które reguły CSS poprawnie ustawiają dla akapitu czcionkę Arial, rozmiar 16 pt i pochylenie (kursywę)?

p { font-style: Arial; font-size: 16pt; font-variant: normal; }

p { font-style: Arial; size: 16px; font-weight: normal; }

p { font-family: Arial; font-size: 16px; font-variant: normal; }

p { font-family: Arial; font-size: 16pt; font-style: italic; }

Wygląd czcionki opisują w CSS trzy osobne właściwości: font-family ustala krój (np. Arial), font-size - rozmiar (tu 16pt, bo zadano punkty, a nie piksele), a font-style: italic włącza pochylenie. Razem daje to p { font-family: Arial; font-size: 16pt; font-style: italic; }. Warto pamiętać, że font-style odpowiada za kursywę, a font-weight za grubość - to częste źródło pomyłek. Dlatego poprawny jest ten zestaw reguł.

Pytanie 33

Kolor zapisany w notacji szesnastkowej #0000FF to:

A. czerwony

B. niebieski

C. czarny

D. zielony

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 34

$liczba = 10;
while($liczba<50){
echo "$liczba";
$liczba=$liczba+5;
}
Jakie liczby zostaną wyświetlone w wyniku działania tej pętli w języku PHP?

A. 10 15 20 25 30 35 40 45 50

B. 10 15 20 25 30 35 40 45

C. 0 5 10 15 20 25 30 35 40 45

D. 0 5 10 15 20 25 30 35 40 45 50

Wynik działania pętli w języku PHP jest poprawny, ponieważ zaczyna się od wartości 10, a następnie w każdej iteracji zwiększa tę wartość o 5, aż osiągnie 50, które nie jest wliczane do wypisywanych wyników. Wartości wypisywane w trakcie działania pętli to: 10, 15, 20, 25, 30, 35, 40, 45. Wartością graniczną jest 50, która przerywa działanie pętli. Taki mechanizm jest często stosowany w programowaniu, zwłaszcza w sytuacjach, gdzie musimy iteracyjnie przetwarzać dane w określonym zakresie. Dobrą praktyką jest również upewnienie się, że warunki pętli są jasno określone, co zapobiega niepożądanym wynikom, takim jak nieskończone pętle. W PHP używamy pętli takich jak 'while', 'for' i 'foreach', które są kluczowymi elementami w programowaniu i pozwalają na efektywne przetwarzanie danych.

Pytanie 35

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. C.

B. A.

C. D.

D. B.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 36

Komunikat błędu wygenerowany przez walidator HTML może wskazywać na:

A. użycie zbyt wielu kolorów na stronie

B. zbyt wolne ładowanie strony

C. brak zamknięcia znacznika 

D. zbyt długą treść akapitu 

Walidator HTML sprawdza zgodność kodu ze standardem i zgłasza błędy składni. Typowy komunikat dotyczy niedomkniętego znacznika - np. otwartego  bez odpowiadającego , złego zagnieżdżenia lub nieprawidłowego atrybutu. Dlatego komunikat walidatora może wskazywać na brak zamknięcia znacznika .

Pytanie 37

Jak nazywa się edytor stron, którego działanie tłumaczy się jako „otrzymujesz to, co widzisz”?

A. WYSIWYG

B. VISUAL EDITOR

C. IDE

D. WEB STUDIO

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
WYSIWYG (What You See Is What You Get - „otrzymujesz to, co widzisz”) to edytor, w którym podczas pracy widać efekt zbliżony do finalnego wyglądu strony, bez konieczności pisania kodu. Dlatego mowa o edytorze WYSIWYG.

Pytanie 38

Jak wstawić obrazek tak, aby przylegający tekst znalazł się POŚRODKU wysokości obrazka?

<img src="obrazek.png" alt="obraz" height="50%"> tekst

<img src="obrazek.png" alt="obraz" align="middle"> tekst

<img src="obrazek.png" alt="obraz" hspace="30px"> tekst

<img src="obrazek.png" alt="obraz"> tekst

Aby przylegający tekst znalazł się POŚRODKU wysokości obrazka, dawniej używano atrybutu align="middle" w <img>. Dlatego poprawny jest zapis z align="middle". Warto wiedzieć, że atrybut align jest przestarzały - dziś robi się to przez CSS (vertical-align).

Pytanie 39

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

hight

margin

padding

width

Pozostałe właściwości robią co innego. margin to margines ZEWNĘTRZNY (odstęp od sąsiednich elementów), a nie wewnętrzny. width ustawia szerokość elementu. hight to literówka - prawidłowa nazwa height ustala wysokość. Margines wewnętrzny daje padding.

Pytanie 40

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

A. Joomla

B. Mambo

C. WordPress

D. Apache

Apache (Apache HTTP Server) to serwer WWW - oprogramowanie, które odbiera żądania przeglądarek i odsyła im strony; stanowi część infrastruktury, na której działają witryny. Nie służy do zarządzania treścią. Systemy CMS (Content Management System), takie jak WordPress, Joomla! czy Mambo, pozwalają natomiast tworzyć i edytować zawartość strony bez programowania - i często działają właśnie na serwerze Apache. Dlatego to Apache nie jest CMS-em.

Rozpocznij nowy egzamin

Powrót do strony głównej