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 09:05
Data zakończenia: 8 czerwca 2026 09:26

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Którego narzędzia użyć, aby usunąć szum tła z nagrania (z taniego mikrofonu)?

A. echa

B. obwiedni

C. wyciszenia

D. usuwania szumów

Stały szum tła z taniego mikrofonu usuwa się narzędziem „usuwania szumów” (np. Noise Reduction w Audacity) - analizuje ono próbkę samego szumu i odejmuje go z całego nagrania. Dlatego należy użyć usuwania szumów.

Pytanie 2

W każdej iteracji pętli wartość aktualnego elementu tablicy jest przypisywana do zmiennej, a wskaźnik tablicy jest przesuwany o jeden, aż do ostatniego elementu tablicy. Czy to zdanie odnosi się do instrukcji?

A. for

B. next

C. while

D. foreach

Instrukcja 'foreach' w językach programowania, takich jak PHP, C# czy Java, jest zaprojektowana specjalnie do iteracji po elementach kolekcji, takich jak tablice lub kolekcje. Działa to poprzez przypisanie bieżącego elementu tablicy do zmiennej w każdej iteracji pętli oraz automatyczne przesuwanie wskaźnika do następnego elementu, co czyni ten mechanizm bardzo wygodnym w użyciu. Przykładowo, w PHP możemy użyć 'foreach' w następujący sposób: 'foreach ($tablica as $element) { echo $element; }'. W tej konstrukcji, dla każdego elementu w tablicy, zmienna $element będzie zawierać jego wartość, a pętla zakończy się automatycznie po osiągnięciu ostatniego elementu. Taki sposób iteracji jest bardziej przejrzysty i mniej podatny na błędy, ponieważ nie musimy zarządzać indeksami ręcznie, co może prowadzić do pomyłek, takich jak przekroczenie granic tablicy. Ponadto, instrukcje 'foreach' są bardziej czytelne, co ułatwia współpracę w zespołach programistycznych i utrzymanie kodu w dłuższej perspektywie. W dokumentacji wielu języków programowania 'foreach' jest rekomendowane jako najlepsza praktyka do iteracji po elementach kolekcji, co czyni je bardziej efektywnymi w kontekście programowania obiektowego oraz funkcjonalnego.

Pytanie 3

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

p { text-indent: 30px; }

p { text-spacing: 30px; }

p { line-height: 30px; }

p { line-indent: 30px; }

Pozostałe właściwości nie istnieją lub robią co innego. text-spacing i line-indent w CSS nie istnieją. line-height ustawia WYSOKOŚĆ wiersza (odstęp między liniami), a nie wcięcie. Wcięcie pierwszej linii daje text-indent.

Pytanie 4

Określ rezultat działania skryptu napisanego w języku PHP

PHP
<?php
$tablica=array(10=>"Perl",14=>"PHP",20=>"Python",22=>"Pike");
asort($tablica);
print("<pre>");
print_r($tablica);
print("</pre>");
?>

A. rys. A

B. rys. B

C. rys. C

D. rys. D

Niepoprawne odpowiedzi wynikają z błędnego rozumienia działania funkcji asort() w PHP. Funkcja ta sortuje tablicę według wartości, a nie kluczy, co oznacza, że wartości są uporządkowane alfabetycznie lub numerycznie w zależności od ich typu. W przypadku tablic asocjacyjnych klucze pozostają przypisane do swoich oryginalnych wartości co jest kluczowe dla utrzymania integralności danych. Błędne podejścia do sortowania często wynikają z założenia że sortowanie dotyczy kluczy co prowadzi do błędnych wyników. Innym typowym błędem jest założenie że sortowanie zmienia klucze na indeksy numeryczne co nie jest prawdą dla funkcji asort(). Wiedza o tym jak PHP traktuje typy danych i jak przeprowadza operacje sortowania jest niezbędna do efektywnego programowania w tym języku. Należy pamiętać że asort() różni się od sort() gdyż ta druga funkcja faktycznie zmienia klucze na indeksy numeryczne co może prowadzić do utraty istotnych danych identyfikacyjnych w tablicach asocjacyjnych.

Pytanie 5

Warunek zapisany w języku PHP wyświetli liczbę, gdy

if ($liczba % 2 == 0)
{
    echo $liczba;
}

A. wynik dzielenia danej liczby przez 2 jest równy 0

B. jest to liczba pierwsza

C. jest to liczba parzysta

D. jest to liczba dodatnia

Odpowiedź jest prawidłowa ponieważ wyrażenie $liczba % 2 == 0 w języku PHP wykorzystuje operator reszty z dzielenia który sprawdza czy liczba po podzieleniu przez 2 ma resztę równą zero. Taki warunek jest spełniony wyłącznie dla liczb parzystych które z definicji dzielą się bez reszty przez 2. W programowaniu rozpoznawanie liczb parzystych jest często stosowane w algorytmach które wymagają specyficznego przetwarzania danych takich jak sortowanie czy filtrowanie. Warto również zauważyć że używanie operatora modulo (%) w takich przypadkach jest uznawane za dobrą praktykę branżową ze względu na jego czytelność i efektywność. Przykładem praktycznego zastosowania może być np. generowanie naprzemiennego koloru tła w tabelach aby zwiększyć ich czytelność co jest powszechnie stosowane w aplikacjach webowych. Zrozumienie tego konceptu jest fundamentalne w programowaniu ponieważ pozwala na tworzenie bardziej dynamicznych i elastycznych aplikacji które potrafią reagować na różne stany danych.

Pytanie 6

Który kod HTML poprawnie tworzy akapit, w którym jedno słowo jest wyróżnione znacznikiem <mark>, a inne oznaczone jako ważne <em>, przy prawidłowym zamknięciu wszystkich znaczników?

<p>Tekst może być <mark>wyróżniony</mark> albo <em>istotny dla autora</p>

<p>Tekst może być <mark>wyróżniony albo <i>istotny</i> dla autora</mark></p>

<p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

<p>Tekst może być <mark>wyróżniony albo <em>istotny</em> dla autora</mark></p>

Poprawny kod to

<p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

Tu <mark> wyróżnia pojedyncze słowo, <em> oznacza inne jako ważne, a każdy znacznik ma swój znacznik zamykający we właściwym miejscu. Dlatego ta wersja jest prawidłowa.

Pytanie 7

W dokumencie XHTML znajduje się fragment kodu, w którym występuje błąd walidacyjny. Co jest przyczyną tego błędu?

A. Znacznik <br> musi być zamknięty

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

C. Znaczniki powinny być pisane dużymi literami

D. Znacznik <b> nie może być umieszczany wewnątrz znacznika <p>

Wybór odpowiedzi, że nie istnieje nagłówek szóstego stopnia, jest błędny, ponieważ w specyfikacji XHTML nagłówek szóstego stopnia <h6> jest jak najbardziej dopuszczalny i służy do oznaczania najmniej ważnych nagłówków, w hierarchii od <h1> do <h6>. Pisanie znaczników wielkimi literami nie jest wymogiem XHTML. Chociaż XHTML jest wrażliwy na wielkość liter, co oznacza, że nazwy znaczników i atrybutów muszą być pisane małymi literami, odpowiedź sugerująca, że tylko wielkie litery są poprawne, jest błędna. Użycie <b> jako zagnieżdżonego w <p> jest standardową praktyką i jest zgodne z normami XHTML, ponieważ <b> służy do pogrubienia tekstu wewnątrz elementu blokowego, jakim jest <p>. Problem z tą odpowiedzią polega na błędnym zrozumieniu struktury HTML, gdzie zagnieżdżanie elementów inline w elementach blokowych jest dozwolone. Ważnym aspektem jest umiejętność rozpoznania, które elementy są inline, a które blokowe, i jak mogą być poprawnie zagnieżdżane w kontekście specyfikacji XHTML. Poprawne zrozumienie tych zasad pomaga w tworzeniu wydajniejszych i bardziej zgodnych dokumentów internetowych.

Pytanie 8

Którego typu danych w MySQL należy użyć, aby w jednym polu zapisać datę i czas?

DATE

YEAR

BOOLEAN

TIMESTAMP

Aby w jednym polu zapisać datę wraz z godziną, w MySQL używa się typu TIMESTAMP (albo DATETIME) - przechowuje on rok, miesiąc, dzień, godzinę, minutę i sekundę. TIMESTAMP bywa wykorzystywany do automatycznego znacznika czasu utworzenia lub modyfikacji rekordu (np. z DEFAULT CURRENT_TIMESTAMP). Spośród podanych opcji to właśnie on łączy datę i czas, dlatego jest poprawny.

Pytanie 9

Na stronie www znajduje się formularz, do którego należy zaimplementować następujące funkcje: walidacja: podczas wypełniania formularza w czasie rzeczywistym sprawdzana jest poprawność danych, oraz przesyłanie danych: po wypełnieniu formularza i jego zatwierdzeniu informacje są przesyłane do bazy danych na serwerze. Aby wprowadzić tę funkcjonalność w najprostszy sposób, trzeba zapisać

A. walidację i przesyłanie danych w języku PHP

B. walidację i przesyłanie danych w języku JavaScript

C. walidację w skrypcie PHP, a przesyłanie danych w JavaScript

D. walidację w języku JavaScript, a przesyłanie danych w skrypcie PHP

Mówiąc szczerze, podejście, które zakłada walidację i przesyłanie danych tylko w PHP, to nie za bardzo dobry pomysł. Dlaczego? Bo każde weryfikowanie danych po stronie serwera wymaga przesyłania ich tam, co powoduje zbędne obciążenie. To z kolei może spowalniać interakcję z użytkownikiem, co jest frustrujące, zwłaszcza w przypadku większych formularzy. A walidacja w PHP i przesyłanie w JavaScript? Znowu nie jest to najlepsze rozwiązanie. Walidacja po stronie serwera nie jest natychmiastowa, więc użytkownik może czekać, co zazwyczaj nie jest fajne. Gdy ktoś weźmie niepoprawne dane, to musi czekać na odpowiedź serwera i to jest czasochłonne. Najlepiej łączyć walidację w JavaScript, bo to poprawia interakcję, a wysyłanie danych do serwera robić w PHP, bo on dba o bezpieczeństwo i kontakt z bazą danych. Takie rozdysponowanie zadań sprawia, że wszystko chodzi sprawnie i łatwiej to potem rozwijać, co jest zgodne z aktualnymi standardami.

Pytanie 10

Aby w wyniku zapytania wyeliminować powtarzające się wiersze, należy użyć klauzuli

LIMIT

UNIQUE

DISTINCT

ORDER BY

Klauzula DISTINCT w zapytaniu SELECT porównuje całe zwracane wiersze i pozostawia tylko niepowtarzalne, usuwając wszystkie ich kopie. Dotyczy zestawu kolumn wskazanych po słowie SELECT: jeśli dwa wiersze mają identyczne wartości we wszystkich tych kolumnach, w wyniku pojawi się jeden z nich. Na przykład SELECT DISTINCT miasto FROM klienci zwróci listę miast bez powtórzeń, nawet gdy wielu klientów mieszka w tym samym mieście. To właśnie ta klauzula odpowiada za eliminację zduplikowanych wierszy w wyniku zapytania.

Pytanie 11

Który atrybut HTML wyświetla podpowiedź (dymek) pokazywaną po najechaniu kursorem na element?

title

alt

src

id

Atrybut title można dodać do niemal każdego znacznika; przeglądarka pokazuje jego treść jako mały dymek (tooltip) po zatrzymaniu kursora nad elementem. Służy do krótkiej dodatkowej podpowiedzi, np. wyjaśnienia odnośnika czy ikony. Dlatego dymek z podpowiedzią wyświetla atrybut title.

Pytanie 12

Kwalifikatory dostępu private, protected i public definiują mechanizm:

A. przeładowania (overloadingu)

B. polimorfizmu

C. hermetyzacji (enkapsulacji)

D. rekurencji

Kwalifikatory private, protected i public sterują widocznością pól i metod klasy, czyli realizują HERMETYZACJĘ (enkapsulację) - ukrywanie wewnętrznych szczegółów i udostępnianie tylko wybranego interfejsu. Dlatego definiują mechanizm hermetyzacji.

Pytanie 13

Która deklaracja w C++ przyjmuje argument typu RZECZYWISTEGO i zwraca wynik typu CAŁKOWITEGO?

void fun1(int a);

int fun1(float a);

float fun1(int a);

float fun1(void a);

Funkcja ma przyjmować argument RZECZYWISTY i zwracać CAŁKOWITY. Argument rzeczywisty to float a, a typ zwracany całkowity to int przed nazwą - czyli int fun1(float a). Dlatego poprawna deklaracja to int fun1(float a);.

Pytanie 14

Które wartości może przyjąć zmienna typu double?

A. 1,44; 2,55

B. 1979-12-05; 12:33

C. "Ala"; 'd'

D. 2.4; 4; 3.2

Typ double przechowuje liczby ZMIENNOPRZECINKOWE, a w kodzie część dziesiętną oddziela KROPKA. Dlatego pasują wartości 2.4; 4; 3.2 (liczba całkowita też mieści się w typie rzeczywistym). Dlatego poprawny jest zestaw 2.4; 4; 3.2.

Pytanie 15

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

A. <media>

B. <movie>

C. <audio>

D. <video>

Znacznik <video> jest właściwym elementem HTML używanym do osadzania filmów na stronach internetowych. Jest on częścią standardu HTML5, który wprowadził nowoczesne podejścia do multimediów w sieci. Umożliwia on nie tylko osadzanie wideo, ale także dostosowywanie jego odtwarzania, takie jak automatyczne odtwarzanie, powtarzanie oraz kontrolowanie głośności. Przykład użycia znacznika <video>: <video src='film.mp4' controls>Odtwarzacz wideo</video>. Warto również dodać atrybuty, takie jak 'controls', które dodają przyciski do odtwarzania, pauzowania i regulacji głośności, co znacząco poprawia użyteczność dla użytkowników. Dobrą praktyką jest również używanie atrybutu 'poster' do określenia miniatury, która będzie wyświetlana przed rozpoczęciem odtwarzania, co przyciąga uwagę i zwiększa estetykę strony. Znacznik <video> wspiera różne formaty plików, takie jak MP4, WebM i Ogg, co zapewnia szeroką kompatybilność z różnymi przeglądarkami internetowymi, co jest kluczowe w dzisiejszym zróżnicowanym środowisku online.

Pytanie 16

Cechą formatu PNG jest:

A. obsługa animacji

B. bezstratna kompresja

C. brak obsługi kanału alfa

D. reprezentacja grafiki wektorowej

PNG to rastrowy format graficzny z kompresją bezstratną - przy zapisie nie traci jakości, więc dobrze nadaje się do grafik, logo i zrzutów ekranu z ostrymi krawędziami. Obsługuje też kanał alfa, czyli przezroczystość. Nie zapisuje natomiast animacji (do tego służy GIF) i nie jest formatem wektorowym. Dlatego cechą PNG jest bezstratna kompresja.

Pytanie 17

Aby utworzyć tabelę w języku SQL, należy użyć polecenia

A. ALTER TABLE

B. INSERT TABLE

C. ADD TABLE

D. CREATE TABLE

Odpowiedź 'CREATE TABLE' jest poprawna, ponieważ w języku SQL to polecenie jest używane do tworzenia nowych tabel w bazie danych. Umożliwia definiowanie struktury tabeli, w tym nazw kolumn, typów danych oraz ograniczeń, takich jak klucze główne czy unikalność. Przykładowe użycie polecenia 'CREATE TABLE' może wyglądać następująco: 'CREATE TABLE pracownicy (id INT PRIMARY KEY, imie VARCHAR(50), nazwisko VARCHAR(50));'. W tym przykładzie tworzymy tabelę 'pracownicy' z trzema kolumnami: 'id', 'imie' oraz 'nazwisko'. Warto zaznaczyć, że zgodnie z najlepszymi praktykami, przed wykonaniem polecenia warto sprawdzić, czy tabela o danej nazwie już istnieje, aby uniknąć błędów związanych z podwójnym tworzeniem. Zapewnienie odpowiedniej struktury bazy danych już na etapie jej tworzenia przekłada się na lepszą wydajność oraz łatwiejsze zarządzanie danymi w przyszłości.

Pytanie 18

Jaki kolor oznacza zapis szesnastkowy #0000FF?

A. zielony

B. niebieski

C. czerwony

D. czarny

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 19

Zaprezentowano poniżej obsługę

if (!isset($_COOKIE[$nazwa]))
   echo "nie ustawiono!";
 else
   echo "ustawiono: " . $_COOKIE[$nazwa];

A. zmiennych tekstowych

B. bazy danych

C. ciasteczek

D. sesji

Obsługa ciasteczek jest kluczowym elementem w zarządzaniu stanem w aplikacjach webowych. Ciasteczka, czyli małe pliki tekstowe przechowywane w przeglądarce użytkownika, pozwalają na śledzenie aktywności użytkownika między stronami i sesjami. W kodzie powyżej widzimy użycie globalnej tablicy PHP $_COOKIE do sprawdzania, czy ciasteczko o określonej nazwie zostało ustawione. Funkcja isset() sprawdza, czy zmienna jest zdefiniowana i nie jest null. Jeśli ciasteczko istnieje, jego wartość jest wyświetlana. Ciasteczka są powszechnie używane do zarządzania sesjami, personalizacji treści czy śledzenia zachowań użytkowników. W praktyce, zabezpieczenia są ważnym aspektem zarządzania ciasteczkami. Powinny być szyfrowane i oznaczone jako HttpOnly oraz Secure, aby zminimalizować ryzyko kradzieży informacji przez ataki XSS. Programiści powinni także stosować polityki prywatności zgodnie z regulacjami RODO, informując użytkowników o użyciu ciasteczek. Zrozumienie tych mechanizmów jest fundamentalne dla budowy bezpiecznych i funkcjonalnych aplikacji webowych.

Pytanie 20

W przedstawionym kodzie PHP, co powinno się wyświetlić zamiast znaków zapytania?

$x = mysql_query('SELECT * FROM mieszkancy');
 if(!$x)
 echo "???????????????????????";

A. Zapytanie zostało zrealizowane pomyślnie

B. Błąd w trakcie przetwarzania zapytania

C. Nieprawidłowe hasło do bazy danych

D. Niepoprawna nazwa bazy danych

Odpowiedź 2 czyli Błąd przetwarzania zapytania jest poprawna ponieważ w kodzie PHP używana jest funkcja mysql_query do wykonania zapytania SQL Funkcja ta zwraca false w przypadku niepowodzenia co oznacza że blok if(!x) zostanie wykonany tylko wtedy gdy wystąpi błąd w przetwarzaniu zapytania Komunikat Błąd przetwarzania zapytania jest więc właściwy ponieważ odzwierciedla sytuację w której zapytanie nie mogło zostać wykonane poprawnie co może być wynikiem wielu czynników takich jak błędy składniowe w zapytaniu brak połączenia z serwerem bazy danych lub nieodpowiednie uprawnienia użytkownika Praktyczne podejście do obsługi błędów w PHP często obejmuje logowanie szczegółowych komunikatów błędów lub przekazywanie ich użytkownikowi w sposób przyjazny dla użytkownika co jest zgodne z najlepszymi praktykami w zakresie programowania Dodatkowo warto wspomnieć że funkcja mysql_query jest przestarzała i nie jest zalecana do użycia w nowych projektach Zaleca się używanie bardziej nowoczesnych funkcji takich jak mysqli_query lub PDO co poprawia bezpieczeństwo i wydajność aplikacji

Pytanie 21

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 dodaj()">dodaj</button>

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

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

D. <button onclick="return oblicz()">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 22

W przedstawionej definicji stylu CSS, powtarzanie dotyczy

body {
   background-image: url("rysunek.gif");
   background-repeat: repeat-y;
 }

A. rysunku umieszczonego znacznikiem img.

B. rysunku umieszczonego w tle strony w pionie.

C. tła każdego ze znaczników akapitu.

D. rysunku umieszczonego w tle strony w poziomie.

Twoja odpowiedź jest na miejscu. To, co mówi 'background-repeat: repeat-y;' w CSS, oznacza, że tło będzie się powtarzać w pionie. Super sprawa, jeśli chcesz, by obraz w tle pokrywał całą wysokość elementu, niezależnie od tego, jak duży on jest. Używa się tego często w projektowaniu stron, żeby stworzyć fajne efekty wizualne, jak na przykład tło, które działa w pasku nawigacyjnym. Warto pamiętać, że powtarzanie tła to zaledwie jedna z wielu opcji, jakie mamy w CSS. Możesz również ustawiać pozycję tła czy jego rozmiar, żeby wszystko wyglądało tak, jak chcesz.

Pytanie 23

W którym formacie zapisać logo (czarny symbol na PRZEZROCZYSTYM tle) na stronę WWW?

A. PNG

B. BMP

C. CDR

D. JPG

Logo będące czarnym symbolem na PRZEZROCZYSTYM tle trzeba zapisać w PNG - to format rastrowy obsługujący kanał alfa (przezroczystość) i działający w przeglądarkach. Dzięki temu logo nałoży się na dowolne tło bez białego prostokąta. Zapamiętaj: potrzebujesz przezroczystości na stronie - wybierz PNG.

Pytanie 24

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. A.

B. B.

C. C.

D. D.

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 25

O zmiennej predefiniowanej

$_POST

w języku PHP można stwierdzić, że

A. jest odwzorowaniem tablicy $_COOKIE

B. jest rozwiniętą wersją tablicy $_SESSION

C. zawiera dane przesłane do skryptu za pośrednictwem formularza

D. zawiera dane bezpośrednio dostarczone do skryptu z ciasteczka

Odpowiedź, że zmienna predefiniowana $_POST zawiera dane przesłane do skryptu z formularza, jest w pełni poprawna. W języku PHP, $_POST to jedna z superglobalnych tablic, która umożliwia dostęp do danych przesyłanych metodą POST. Metoda ta jest powszechnie stosowana w formularzach HTML, gdzie użytkownik może wprowadzać dane, które następnie są wysyłane do serwera. Na przykład, formularz kontaktowy, w którym użytkownik wprowadza swoje imię i adres e-mail, może być przetwarzany za pomocą $_POST, co pozwala na łatwą i bezpieczną obsługę danych. Dobrą praktyką jest również walidacja danych przed ich użyciem, aby zminimalizować ryzyko ataków, takich jak SQL Injection czy XSS. Dzięki zastosowaniu $_POST, programiści mogą przechwytywać i przetwarzać dane użytkowników w bardziej zaawansowany sposób, co pozwala na dynamiczne generowanie treści i interakcję z użytkownikami.

Pytanie 26

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

A. odpowiednie przycięcie.

B. dodanie kanału alfa.

C. ulepszenie nasycenia kolorów.

D. zapisanie go w formacie BMP.

Dodanie kanału alfa do obrazu w formacie PNG jest kluczowe dla uzyskania przezroczystego tła. Kanał alfa to dodatkowa warstwa informacji w obrazie, która definiuje przezroczystość każdego piksela. Dzięki niemu, obrazy PNG mogą przechowywać informacje o tym, które części obrazu są całkowicie przezroczyste, częściowo przezroczyste lub całkowicie nieprzezroczyste. To oznacza, że stosując kanał alfa, możemy tworzyć złożone efekty wizualne, takie jak cienie czy gradienty, które są nieosiągalne w formatach nieobsługujących przezroczystości, jak JPEG. W praktyce, dodanie kanału alfa można zrealizować w programach graficznych, takich jak Adobe Photoshop czy GIMP, za pomocą opcji 'Dodaj kanał alfa' w menu warstw. Umożliwia to edytowanie tła obrazu, eliminację niepożądanych elementów oraz integrację z różnymi tłem w dokumentach i stronach internetowych, co jest szczególnie istotne w projektowaniu graficznym i web designie. Zatem, znajomość obsługi kanału alfa oraz umiejętność pracy z formatem PNG są niezbędne dla profesjonalnych grafików w nowoczesnym środowisku projektowym.

Pytanie 27

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w drugie pole użytkownik wpisał wartość "ala ma kota"?

<form>
  <select>
    <option value="v1">Kraków</option>
    <option value="v2">Poznań</option>
    <option value="v3">Szczecin</option>
  </select> <br>
  <input type="password" />
</form>

Efekt 1

Efekt 2

Efekt 3

Efekt 4

A. Efekt 3.

B. Efekt 1.

C. Efekt 2.

D. Efekt 4.

Odpowiedź 'Efekt 2' jest poprawna, ponieważ odpowiada ona opisowi działania kodu HTML formularza. W kodzie HTML formularza, mamy pole wyboru miasta z opcjami 'Kraków', 'Poznań', 'Szczecin', a także pole hasła. W momencie, kiedy użytkownik wpisuje do pola hasła wartość 'ala ma kota', przeglądarka reprezentuje te dane jako ciąg znaków zastępczych, czyli kropeczki. Efekt 2 pokazuje rozwinięte menu wyboru z zaznaczonym 'Kraków' oraz pole hasła z kropeczkami, co jest zgodne z opisanym działaniem formularza przy wpisaniu 'ala ma kota' do pola hasła. Jest to zgodne ze standardami tworzenia formularzy w HTML, gdzie pola hasła są zazwyczaj reprezentowane jako kropeczki dla poprawienia bezpieczeństwa danych użytkownika. Dodatkowo, HTML pozwala na tworzenie różnego rodzaju pól formularzu, które mogą przyjmować różne wartości, co daje duże możliwości personalizacji formularza.

Pytanie 28

Jaką wartość przyjmie zmienna $a po wykonaniu poniższej sekwencji poleceń w języku PHP?

$a = 1; $a++; $a += 10; --$a;

A. 11

B. 10

C. 12

D. 1

Gratulacje, Twoja odpowiedź jest prawidłowa. Instrukcje wykonane w kodzie PHP prowadzą do osiągnięcia wartości 11 przez zmienną 'a'. Proces ten jest realizowany w czterech krokach. Najpierw zmienna 'a' jest inicjowana wartością 1. Następnie wartość ta jest zwiększana o 1, co daje nam 2. Do tej wartości dodawane jest 10, co daje nam łącznie 12. Na końcu, wartość ta jest zmniejszana o 1, co daje nam ostateczną wartość 11. Warto przypomnieć, że w języku programowania PHP, tak jak w większości języków, operacje są wykonywane od lewej do prawej. To jest ważne do zapamiętania, gdy mamy do czynienia z bardziej skomplikowanymi sekwencjami operacji.

Pytanie 29

Jaką maksymalną ilość znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, w której nie ma złączeń komórek ani wiersza nagłówkowego?

A. 3

B. 6

C. 9

D. 12

Tabela o trzech kolumnach i trzech wierszach składa się z 9 komórek, co oznacza, że maksymalna liczba znaczników <td>, które można zastosować w takiej tabeli, wynosi 9. Każda komórka tabeli jest reprezentowana przez znacznik <td>, dlatego musisz pomnożyć liczbę kolumn (3) przez liczbę wierszy (3), co daje 3 * 3 = 9. To podejście odzwierciedla najlepsze praktyki w tworzeniu tabel HTML, które zakładają, że każda komórka powinna być jednoznacznie określona. Warto pamiętać, że unikanie złączeń komórek upraszcza strukturę tabeli, co ułatwia przetwarzanie przez różne systemy oraz poprawia dostępność strony. Przykład zastosowania to np. wyświetlanie danych o produktach w sklepie internetowym, gdzie każda informacja o produkcie, taka jak nazwa, cena i opis, znajduje się w osobnej komórce. Zgodnie z wytycznymi W3C, stosowanie semantycznych znaczników poprawia SEO i ułatwia nawigację.

Pytanie 30

Która z definicji funkcji w języku C++ przyjmuje parametr typu zmiennoprzecinkowego i zwraca wartość typu całkowitego?

A. void fun1(int a)

B. int fun1(float a)

C. float fun1(int a)

D. float fun1(void a)

Odpowiedź 'int fun1(float a);' jest poprawna, ponieważ funkcja ma parametr wejściowy typu 'float', co oznacza, że przyjmuje dane rzeczywiste. Zwracany typ 'int' wskazuje, że funkcja będzie generować wynik w formacie całkowitym. W praktyce, taka funkcjonalność może być użyteczna, gdy chcemy przetworzyć dane zmiennoprzecinkowe i uzyskać wynik jako liczbę całkowitą, na przykład w obliczeniach, gdzie zaokrąglamy wartości do najbliższej liczby całkowitej. W kontekście programowania w języku C++, standardowe praktyki zalecają, aby zwracać typ, który jest odpowiedni do kontekstu użycia funkcji. Często stosuje się konwersje typów, co w tym przypadku może być zastosowane do przekształcenia wartości zmiennoprzecinkowej na całkowitą. Dobrą praktyką jest również odpowiednie dokumentowanie funkcji, aby jasno określić, jakie typy danych są oczekiwane i jakie będą wyniki ich przetworzenia. Dzięki temu, kod staje się bardziej czytelny i łatwy do utrzymania.

Pytanie 31

Aby skutecznie zrealizować algorytm znajdujący największą wartość spośród trzech podanych liczb a, b oraz c, wystarczy zastosować

A. jedną pętlę

B. dwie tablice

C. dwa warunki

D. pięć zmiennych

Aby znaleźć największą z trzech liczb a, b i c, stosując dwa warunki, można wykorzystać porównania. Pierwszym krokiem jest porównanie a i b, aby ustalić, która z tych liczb jest większa. Następnie porównujemy wynik z c. To podejście jest efektywne, ponieważ wymaga jedynie dwóch porównań (warunków) do określenia największej liczby z trzech. Taka metoda jest nie tylko prosta, ale również zgodna z dobrymi praktykami programowania, które stawiają na wydajność i czytelność kodu. Przykładowy kod w języku Python może wyglądać następująco:

python
max_value = a
if b > max_value:
max_value = b
if c > max_value:
max_value = c

Warto zwrócić uwagę, że bardziej złożone metody, takie jak stosowanie pętli czy tablic, są niepotrzebne w tym przypadku i mogą wprowadzać niepotrzebną złożoność do kodu. W codziennym programowaniu dążymy do minimalizowania liczby operacji, aby zwiększyć wydajność, szczególnie w sytuacjach, gdy mamy ograniczone zasoby obliczeniowe. Ponadto, rozważając stosowanie algorytmów, które można łatwo zrozumieć, wspieramy przyszłą konserwację i rozwój oprogramowania.

Pytanie 32

Jakie oznaczenie wykorzystuje się do jednoliniowego komentarza w skryptowym języku PHP?

A. /*

B. #

C. $

D. --

Oznaczenie jednoliniowego komentarza w języku PHP realizuje się za pomocą znaku '#'. Komentarze są niezwykle ważnym elementem kodu, ponieważ pozwalają programistom na dodawanie wyjaśnień, notatek lub przypomnień dotyczących implementacji. Umożliwiają one innym programistom (lub nawet samym sobie w przyszłości) zrozumienie kontekstu i logiki stosowanych rozwiązań. Przykładowo, można umieścić komentarz w kodzie w taki sposób: '# To jest komentarz, który wyjaśnia, co robi poniższy kod'. Warto pamiętać, że stosowanie komentarzy zgodnie z najlepszymi praktykami programowania zwiększa czytelność kodu oraz ułatwia jego utrzymanie. PHP pozwala również na stosowanie komentarzy wieloliniowych z użyciem znaków '/* ... */', jednak w przypadku komentarzy jednoliniowych preferowanym podejściem jest użycie znaku '#', szczególnie w kontekście prostych, krótkich notatek. Przykład: echo 'Hello World!'; # Ta linia wyświetla powitanie.

Pytanie 33

Informacje o ciasteczkach (cookies) są w PHP przechowywane w tablicy:

$_GET

$_POST

$_COOKIE

$_SERVER

Ciasteczka odesłane przez przeglądarkę PHP udostępnia w tablicy superglobalnej $_COOKIE. Odczytuje się z niej wartość po nazwie, np. $_COOKIE["jezyk"]. Samo ciasteczko ustawia się funkcją setcookie("jezyk", "pl", time()+3600), a serwer wysyła je w nagłówku odpowiedzi; przy kolejnych żądaniach przeglądarka odsyła je z powrotem i trafiają właśnie do $_COOKIE. W praktyce wykorzystuje się je do zapamiętania preferencji użytkownika czy identyfikatora sesji. Dlatego informacje o ciasteczkach przechowuje tablica $_COOKIE.

Pytanie 34

Aby utworzyć strukturę strony internetowej za pomocą znaczników semantycznych języka HTML 5, zgodnie z przedstawionym na ilustracji projektem, SEKCJA B powinna być zawarta w znaczniku

A. <nav></nav>

B. <header></header>

C. <section></section>

D. <article></article>

W tym zadaniu kluczowe jest rozpoznanie, że sekcja B na ilustracji nie jest zwykłym fragmentem treści, tylko blokiem służącym do poruszania się po stronie: linki „Główna”, „O nas”, „Kontakt”. W semantycznym HTML5 dla takiej właśnie grupy odsyłaczy przewidziano specjalny znacznik <nav>. Częsty błąd polega na tym, że projektanci wrzucają menu nawigacyjne do zwykłego <div> albo <section>, a semantykę zostawiają na później. Technicznie strona działa, ale traci się zalety wynikające z poprawnej struktury: czytniki ekranu nie mogą łatwo przeskoczyć do nawigacji, roboty wyszukiwarek gorzej interpretują układ, a cała strona staje się mniej dostępna. Innym typowym nieporozumieniem jest używanie <header> dla wszystkiego, co znajduje się „na górze” strony. Nagłówek faktycznie często zawiera menu, ale to menu i tak powinno być wydzielone znacznikiem <nav> wewnątrz <header>. Sam <header> opisuje obszar wprowadzający: logo, tytuł, czasem slogan. Z kolei <section> i <article> służą do logicznego dzielenia treści merytorycznej, a nie do nawigacji. Jeśli więc sekcja B zawiera tylko linki menu, zamykanie jej w <section> myli sens dokumentu – wygląda, jakby to była kolejna część artykułu, a nie narzędzie przechodzenia między podstronami. Podobnie znaczniki typu <aside> czy <footer> też nie pasują: <aside> jest na treści poboczne, a <footer> na stopkę. W nowoczesnych projektach, zgodnych z HTML Living Standard i dobrymi praktykami dostępności, wszystkie główne obszary nawigacji opisuje się konsekwentnie za pomocą <nav> i to właśnie odróżnia kod „zlepiony byle działał” od kodu, który jest przemyślany i profesjonalny.

Pytanie 35

Która właściwość języka CSS może przyjmować wartości: underline, overline, line-through?

A. text-style

B. font-style

C. font-weight

D. text-decoration

Poprawna odpowiedź to właściwość CSS `text-decoration`. To właśnie ona odpowiada za dodawanie różnych „linii” do tekstu: podkreślenia (`underline`), nadkreślenia (`overline`) oraz przekreślenia (`line-through`). W praktyce zapis wygląda np. tak: `a { text-decoration: underline; }` – klasyczny przykład dla linków, albo `del { text-decoration: line-through; }` dla tekstu usuniętego. W nowszych specyfikacjach CSS (CSS Text Decoration Module Level 3) ta właściwość została trochę rozbita na bardziej szczegółowe, jak `text-decoration-line`, `text-decoration-style`, `text-decoration-color`, ale w codziennym kodowaniu dalej bardzo często używa się skrótu `text-decoration`.
Moim zdaniem warto od razu kojarzyć, że `text-decoration` nie służy do zmiany kroju pisma, pogrubienia czy kursywy, tylko właśnie do „ozdabiania” tekstu dodatkowymi liniami. Dobra praktyka jest taka, żeby świadomie używać tej właściwości przy stylowaniu linków: np. usuwamy podkreślenie `a { text-decoration: none; }`, a potem przy najechaniu myszką dajemy `a:hover { text-decoration: underline; }`. Dzięki temu interfejs jest czytelniejszy, a użytkownik widzi, że element jest klikalny.
Warto też wiedzieć, że `text-decoration` może przyjmować kilka wartości naraz, np. `text-decoration: underline overline;`, co rzadko się używa, ale czasem w jakichś specyficznych projektach UI może się przydać. Z mojego doświadczenia w projektach komercyjnych najczęściej korzysta się z `underline`, `none` i czasem `line-through` np. przy cenach promocyjnych: stara cena przekreślona, nowa obok. To jest taki mały szczegół CSS, ale bardzo często używany w praktyce.

Pytanie 36

W pliku konfiguracyjnym serwera Apache httpd.conf linia kodu Listen 120 oznacza

A. czwarty oktet adresu IP serwera.

B. numer portu, na którym nasłuchuje serwer.

C. jeden z numerów kodu błędu odpowiedzi HTTP.

D. maksymalną liczbę jednoczesnych połączeń z sieci do serwera.

Dyrektywa „Listen 120” w konfiguracji Apache’a bywa mylona z różnymi innymi parametrami sieciowymi, ale w rzeczywistości ma jedno, dość konkretne znaczenie: określa numer portu, na którym serwer HTTP ma nasłuchiwać połączeń. Nie ma ona żadnego związku z poszczególnymi oktetami adresu IP. Adres IP składa się z czterech oktetów, ale są one zapisywane w formacie kropkowym, np. 192.168.0.120, i konfiguruje się je w systemie operacyjnym lub wirtualnym interfejsie sieciowym, a nie dyrektywą Listen. Czasem uczniowie patrzą na „120” i kojarzą to z ostatnim oktetem adresu, ale to skrót myślowy, który tutaj kompletnie nie pasuje. Innym typowym skojarzeniem jest powiązanie liczby z kodami odpowiedzi HTTP. Jednak kody statusu w protokole HTTP mają zdefiniowane zakresy: 1xx to odpowiedzi informacyjne, 2xx – sukces, 3xx – przekierowania, 4xx – błędy po stronie klienta, 5xx – błędy po stronie serwera. Kod 120 nie jest standardowym kodem odpowiedzi HTTP opisanym w specyfikacji RFC 7231 czy nowszych. Co ważne, kody odpowiedzi są wysyłane w treści protokołu HTTP, a nie konfigurowane w ten sposób w httpd.conf. Pojawia się też czasem przekonanie, że taka liczba mogłaby oznaczać limit jednoczesnych połączeń. Limity połączeń, procesów czy wątków w Apache’u definiuje się jednak innymi dyrektywami, zależnie od użytego MPM (np. MaxRequestWorkers, ServerLimit, ThreadsPerChild). Listen nie ustawia żadnych ograniczeń wydajnościowych, tylko określa punkt wejścia do usługi – numer portu i ewentualnie adres IP. Mylenie tych pojęć wynika moim zdaniem z mieszania warstwy transportowej (port, TCP) z logiką aplikacji (kody błędów) i parametrami wydajności. Dobra praktyka w administracji serwerem to wyraźne rozróżnianie: port = gdzie nasłuchuje serwer, kody HTTP = jak odpowiada na żądania, limity = ile ruchu jest w stanie obsłużyć równocześnie.

Pytanie 37

Domyślna CAPTCHA

CAPTCHA - reCAPTCHA▼

W CMS Joomla! opcja konfiguracji globalnej, pokazana na ilustracji, służy do

A. zapobiegania atakom typu SQL Injection.

B. wyświetlenia okna umożliwiającego wyszukiwanie tekstu na stronie.

C. wyświetlania okna informującego o zgodzie użytkownika na pliki cookie.

D. dopuszczenia do przesyłania danych z formularzy wypełnionych tylko przez człowieka.

Opcja pokazana na zrzucie w Joomla! dotyczy domyślnej CAPTCHA, czyli mechanizmu weryfikującego, czy formularz wypełnia człowiek, a nie automat (bot). W praktyce, gdy w konfiguracji globalnej wybierzesz np. „CAPTCHA – reCAPTCHA”, Joomla! będzie mogła używać tego mechanizmu we wszystkich formularzach, które potrafią z CAPTCHA współpracować, np. formularz rejestracji użytkownika, formularz kontaktowy, czasem logowanie czy dodawanie komentarzy w rozszerzeniach.

CAPTCHA działa tak, że dodaje do formularza dodatkowy krok: użytkownik musi zaznaczyć odpowiednie pole („Nie jestem robotem”) albo rozwiązać proste zadanie typu rozpoznanie obrazków. Po stronie serwera (tu: Joomla! + Google reCAPTCHA) sprawdzany jest specjalny token. Jeżeli token jest poprawny, dane z formularza są przyjmowane. Jeżeli nie – formularz jest odrzucany. Dzięki temu znacząco ogranicza się spam, masowe rejestracje fałszywych kont i automatyczne wysyłki z formularzy.

Moim zdaniem w każdym publicznym formularzu, szczególnie na stronach firmowych czy szkolnych, warto mieć poprawnie skonfigurowaną CAPTCHA. To jest jeden z podstawowych elementów dobrych praktyk bezpieczeństwa aplikacji webowych – obok filtrowania danych, ograniczania liczby żądań czy stosowania firewalli aplikacyjnych (WAF). Sama CAPTCHA nie zastąpi innych zabezpieczeń, ale bardzo skutecznie zmniejsza liczbę automatycznych ataków i spamu.

W Joomla! konfiguracja globalna jest o tyle wygodna, że ustawiasz raz domyślny typ CAPTCHA, a potem w poszczególnych komponentach (np. „Użytkownicy”, „Kontakty”) tylko zaznaczasz, że chcesz jej używać. W praktyce oznacza to, że formularze będą przyjmować dane tylko wtedy, gdy człowiek poprawnie przejdzie test CAPTCHA – dokładnie tak, jak opisuje poprawna odpowiedź.

Pytanie 38

Jak nazywa się technologia, w której komunikacja z serwerem odbywa się bez przeładowania całej strony?

A. Django

B. AJAX

C. PHP

D. Ruby

Pozostałe odpowiedzi to nie ta technika. Django to framework webowy w Pythonie, a Ruby to język programowania - służą do budowy aplikacji, a nie są samą metodą asynchronicznej wymiany. PHP działa po stronie serwera i samo z siebie nie aktualizuje strony bez przeładowania. Komunikację z serwerem bez przeładowania realizuje AJAX.

Pytanie 39

W której notacji diagramów ER został zapisany model związków encji przedstawiony na ilustracji?

A. Bachmana.

B. Min-Max.

C. Martina.

D. Chena.

Prawidłowa odpowiedź to notacja Martina. Na diagramie widać bardzo charakterystyczne cechy tej notacji: encje są przedstawione jako prostokąty z nagłówkiem wypełnionym innym kolorem (tu: ciemnoszary pasek z nazwą encji KLIENT, ZAKUP, TOWAR), a pod spodem w formie tabelki wypisane są atrybuty, jeden pod drugim. Klucz główny jest po prostu pierwszym atrybutem na liście (ID), bez dodatkowych ozdobników typu podkreślenie czy elipsa, co jest typowe właśnie dla podejścia Martina, zorientowanego na projektowanie relacyjnej bazy danych. Związki między encjami są rysowane liniami z tzw. crow’s foot ("kurzą łapką") po stronie encji wielokrotnej, a po stronie encji pojedynczej mamy prostą kreskę. Na ilustracji dokładnie to widać: ZAKUP jest encją pośredniczącą, a relacje KLIENT–ZAKUP i TOWAR–ZAKUP mają klasyczną symbolikę notacji Martina. W praktyce, w wielu narzędziach CASE (np. w starszych wersjach ERwin, PowerDesigner, Visio z szablonem Database Model Diagram) domyślny styl ERD jest właśnie bardzo zbliżony do notacji Martina. Taki diagram jest od razu „bliski” strukturze fizycznej tabel w SQL, więc łatwo go przełożyć na CREATE TABLE, klucze obce i indeksy. Z mojego doświadczenia w firmach produkcyjnych i w małych software house’ach notacja Martina jest często używana przy projektach, gdzie liczy się szybkie przejście z modelu koncepcyjnego do modelu logicznego i fizycznego, bez zbyt rozbudowanej symboliki teoretycznych ER-ów. Dlatego rozpoznanie tej notacji po wyglądzie encji-tabelek i crow’s foot jest bardzo praktyczną umiejętnością przy pracy z bazami danych.

Pytanie 40

Który paragraf w przedstawionym kodzie zostanie wyświetlony czcionką o kolorze niebieskim?

<!DOCTYPE html>
<html>
<head>
<style>
div~p { color: blue; }
</style>
</head>
<body>
  <div>
    <p>pierwszy paragraf</p>
      <div>
        <p>drugi paragraf</p>
        <p>trzeci paragraf</p>
      </div>
    <p>czwarty paragraf</p>
  </div>
</body>
</html>

A. Drugi.

B. Trzeci.

C. Czwarty.

D. Pierwszy.

Źródłem problemu w tym zadaniu jest zrozumienie, jak dokładnie działa selektor `div~p`. Na pierwszy rzut oka wiele osób patrzy po prostu na kolejność paragrafów w kodzie i zakłada, że skoro wewnątrz diva są kolejne `<p>`, to one wszystkie będą niebieskie. To jest typowe mieszanie działania selektora rodzeństwa z selektorem potomków. Zapis `div p` rzeczywiście oznaczałby „każdy paragraf znajdujący się gdziekolwiek wewnątrz diva”, ale w pytaniu użyto operatora tyldy `~`, który ma inne znaczenie. Selektor `div~p` wskazuje elementy `<p>`, które są rodzeństwem elementu `<div>`, czyli mają tego samego rodzica w drzewie DOM, i jednocześnie występują po nim w kodzie. To oznacza, że przeglądarka w ogóle nie patrzy na paragrafy zagnieżdżone głębiej, np. w dodatkowym `<div>` w środku. One nie są rodzeństwem, tylko potomkami, więc selektor ich nie obejmuje. Częsty błąd polega też na myleniu selektora `div~p` z `div+p`. Ten drugi wybiera wyłącznie pierwszy paragraf bezpośrednio po divie na tym samym poziomie, natomiast `~` obejmuje wszystkie późniejsze rodzeństwa danego typu. W tym przykładzie jedynym `<p>`, który jest na tym samym poziomie co zewnętrzny `<div>` i stoi po nim, jest „czwarty paragraf”. Pozostałe, mimo że wizualnie znajdują się „w środku” tego diva, nie są rodzeństwem, tylko są bardziej zagnieżdżone. Z mojego doświadczenia wynika, że dopóki nie narysuje się sobie drzewa DOM albo nie podejrzy struktury w DevTools, bardzo łatwo o takie pomyłki. Dobra praktyka w CSS to zawsze myśleć o relacjach: rodzic–dziecko, rodzeństwo, potomek, a dopiero potem o kolejności w kodzie. Dzięki temu selektory są pisane świadomie, bardziej precyzyjnie i nie powodują niespodziewanych efektów w większych projektach.

Rozpocznij nowy egzamin

Powrót do strony głównej