Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

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

Egzamin zdany!

Wynik: 23/40 punktów (57,5%)

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

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

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

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

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

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

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

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

Pytanie 2

Który składnik nie jest wymagany do instalacji i uruchomienia systemu CMS Joomla!?

A. parser PHP

B. serwer WWW

C. platforma .NET

D. baza danych

Poprawnie wskazana została platforma .NET jako element, który nie jest wymagany do instalacji i działania Joomla!. Ten CMS jest napisany w PHP i z założenia działa w klasycznym stosie LAMP/LEMP, czyli Linux/Windows + serwer WWW (najczęściej Apache lub Nginx) + PHP + baza danych (MySQL/MariaDB, czasem PostgreSQL). Joomla! korzysta z interpretera PHP do wykonywania całej logiki aplikacji: obsługi logowania, generowania szablonów, pracy z bazą danych, modułów, komponentów itd. Serwer WWW (HTTP) odpowiada za przyjmowanie żądań z przeglądarki i przekazywanie ich do PHP, a baza danych przechowuje treści, użytkowników, konfigurację, menu, artykuły i całą resztę danych dynamicznych. Platforma .NET to zupełnie inny ekosystem technologiczny, typowy dla aplikacji pisanych w C#, ASP.NET, .NET Core, działających np. na IIS. Joomla! nie jest aplikacją .NET, więc nie potrzebuje środowiska uruchomieniowego .NET ani serwera IIS, żeby działać. W praktyce, w typowej firmie hostingowej, gdy chcesz uruchomić Joomla!, patrzysz czy jest obsługa PHP w odpowiedniej wersji, dostęp do bazy MySQL/MariaDB oraz czy serwer WWW pozwala na friendly URLs (mod_rewrite lub odpowiednik). To są realne wymagania. Można oczywiście postawić Joomla! także na Windowsie, ale dalej korzystasz z PHP i serwera WWW, a nie z ASP.NET. Moim zdaniem warto zapamiętać prostą zasadę: jeśli CMS jest napisany w PHP, to kluczowe są PHP, serwer HTTP i baza danych, a nie platformy typowe dla innych języków, jak .NET czy Java.

Pytanie 3

Który zapis w dokumencie HTML połączy stronę z zewnętrznym arkuszem stylów style.css?

<a href="/style.css">

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

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

<a src="/style.css">

Zewnętrzny arkusz stylów dołącza się w <head> znacznikiem <link rel="stylesheet" href="/style.css"> - rel określa typ relacji, a href wskazuje plik. Dlatego poprawny jest ten zapis.

Pytanie 4

Do czego można wykorzystać program FileZilla?

A. do weryfikacji strony internetowej

B. do publikowania strony internetowej

C. do interpretacji kodu PHP

D. do testowania prędkości ładowania strony

Odpowiedzi, które wybrałeś, niestety nie dotyczą FileZilli. Mieszają się tu różne tematy, jak interpretacja kodu PHP czy testowanie wczytywania strony, co nie ma nic wspólnego z tym narzędziem. PHP jest odrębną sprawą, bo skrypty są wykonywane na serwerze, a nie przez FileZillę. Walidacja strony też dotyczy zupełnie innych rzeczy – chodzi o to, czy strona pasuje do jakichś standardów, co robią specjalne narzędzia. A testowanie prędkości wczytywania to już w ogóle inny temat, do tego są inne aplikacje. Czasem zdarza się pomylić funkcje różnych narzędzi, co prowadzi do nieporozumień. Ważne jest, żeby zrozumieć, co naprawdę robi FileZilla i jak można z niej efektywnie korzystać przy tworzeniu stron.

Pytanie 5

Podczas walidacji witryn internetowych nie analizuje się

A. działania hiperlinków

B. źródła pochodzenia narzędzi edycyjnych

C. błędów w składni kodu

D. zgodności z różnymi przeglądarkami

Nieprawidłowe odpowiedzi na to pytanie koncentrują się na aspektach, które są kluczowe w procesie walidacji stron internetowych, a które są niestety różnie interpretowane. Zgodność z przeglądarkami jest jednym z najważniejszych elementów, które należy brać pod uwagę, aby zapewnić, że strona działa prawidłowo na różnych platformach. W dzisiejszym zróżnicowanym ekosystemie przeglądarek, od Chrome po Firefox i Safari, walidacja pod kątem zgodności jest niezbędna dla maksymalizacji zasięgu i użyteczności strony. Działania linków również nie mogą być pomijane; badanie, czy wszystkie odnośniki działają, jest kluczowe dla doświadczeń użytkowników i SEO. Martwe linki mogą znacząco obniżyć jakość strony i wpłynąć na jej ranking w wyszukiwarkach. Walidacja błędów składni kodu to kolejny istotny krok, który zapewnia, że strona jest zbudowana zgodnie z obowiązującymi standardami, co pomaga uniknąć problemów z renderowaniem treści. Niezrozumienie, że źródło narzędzi edytorskich nie wpływa na te techniczne aspekty, prowadzi do błędnych wniosków i może skutkować tworzeniem stron, które nie są w pełni funkcjonalne ani zgodne z wymaganiami użytkowników.

Pytanie 6

Który z elementów w sekcji head dokumentu HTML 5 jest obowiązkowy według walidatora HTML, a jego niedobór skutkuje błędem (error)?

A. title

B. style

C. meta

D. link

Znak „title” jest fundamentalnym elementem sekcji head dokumentu HTML, który ma kluczowe znaczenie dla jego poprawnego działania oraz dla doświadczeń użytkowników. Jego obecność jest niezbędna, ponieważ zapewnia tytuł strony, który jest wyświetlany na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Tytuł powinien być krótki, ale jednocześnie informacyjny, co pozwala na łatwe zidentyfikowanie zawartości strony. Przykładowo, w przypadku bloga dotyczącego zdrowia, tytuł mógłby brzmieć „Porady zdrowotne – Jak dbać o zdrowie”. Ponadto, zgodnie z wytycznymi W3C, brak tego znacznika jest traktowany jako błąd, co oznacza, że strona nie będzie spełniać standardów HTML5. W praktyce, obecność tytułu wpływa również na SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki często wykorzystują ten element do zrozumienia tematyki strony oraz jej rankingu. Dlatego dobór odpowiednich słów do tytułu jest równie ważny.

Pytanie 7

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

A. SMTP

B. FTP

C. NNTP

D. HTTP

Pliki źródłowe aplikacji wgrywa się na serwer protokołem FTP (lub jego bezpieczną odmianą SFTP), zwykle za pomocą klienta takiego jak FileZilla. Po skopiowaniu plików do katalogu serwera aplikacja staje się dostępna pod adresem WWW. Dlatego do publikacji aplikacji PHP używa się protokołu FTP.

Pytanie 8

Który z czynników ma negatywny wpływ na efektywną współpracę w zespole?

A. rywalizacja między członkami zespołu

B. efektywna komunikacja

C. jasny podział ról i obowiązków

D. wzajemny szacunek

Efektywna współpraca w zespole opiera się na zaufaniu, wzajemnym szacunku, dobrej komunikacji i jasnym podziale ról. Czynnikiem, który ją osłabia, jest rywalizacja między członkami zespołu - zamiast dążyć do wspólnego celu, ludzie zaczynają konkurować, ukrywać informacje i przypisywać sobie zasługi, co rodzi konflikty. Zdrowa współpraca stawia na wspólny wynik, a nie na pokonanie kolegów. Dlatego negatywny wpływ ma rywalizacja w zespole.

Pytanie 9

Wskaż kod CSS odpowiadający układowi bloków 2 - 5, zakładając, że są one zbudowane w oparciu o przedstawiony kod HTML.

BLOK 1
BLOK 2	BLOK 3	BLOK 4
BLOK 5

<div id="pierwszy">BLOK 1</div>
<div id="drugi">BLOK 2</div>
<div id="trzeci">BLOK 3</div>
<div id="czwarty">BLOK 4</div>
<div id="piaty">BLOK 5</div>

Kod 1.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  clear: both;
  width: 30%;
}

Kod 2.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  float: left;
  width: 30%;
}

Kod 3.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}

Kod 4.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}

A. Kod 2.

B. Kod 3.

C. Kod 4.

D. Kod 1.

Niestety, twoja odpowiedź jest niepoprawna. Wybrałeś odpowiedź niezgodną z przedstawionym układem bloków. Analizując kod CSS, musisz zwrócić uwagę na różne aspekty, takie jak pozycja, szerokość i kolejność bloków. W tym przypadku, blok 'drugi' powinien być umieszczony po lewej stronie i zajmować 40% szerokości, bloki 'trzeci' i 'czwarty' powinny być odpowiednio po lewej i prawej stronie z szerokością 30%, a blok 'piąty' powinien być umieszczony na dole i zajmować 30% szerokości. To wszystko odpowiada układowi bloków na diagramie. Jeżeli wybrałeś inny kod, to prawdopodobnie źle zinterpretowałeś pozycję lub szerokość bloków, co jest kluczowe w tworzeniu układów stron. Ważne jest, aby zrozumieć i umieć manipulować kodem CSS, aby uzyskać pożądany układ strony. Pamiętaj, że praktyka i doświadczenie są kluczowe do zrozumienia jak kod CSS wpływa na układ i stylizację elementów strony.

Pytanie 10

Grafika powinna być zapisana w formacie GIF, jeśli

A. konieczne jest zapisanie obrazu lub animacji

B. jest to obraz w technologii stereoskopowej

C. istnieje potrzeba zapisu obrazu w formie bez kompresji

D. jest to grafika wektorowa

Format GIF (Graphics Interchange Format) jest powszechnie wykorzystywany do przechowywania obrazów oraz animacji. Dzięki obsłudze przezroczystości oraz możliwości tworzenia prostych animacji, GIF stał się standardem w przypadku grafiki na stronach internetowych. Jego ograniczenie do 256 kolorów sprawia, że idealnie nadaje się do prostych grafik, takich jak logo czy ikony, gdzie nie jest wymagana pełna gama kolorów, co ma miejsce w formatach takich jak JPEG czy PNG. W przypadku animacji, GIF umożliwia zapis wielu klatek w jednym pliku, co pozwala na odtwarzanie sekwencji obrazu bez potrzeby korzystania z dodatkowego oprogramowania. Praktyczne zastosowanie GIF-a można zaobserwować w mediach społecznościowych, gdzie animowane obrazki są często wykorzystywane do wyrażania emocji, a także na stronach internetowych do przedstawiania logo w ruchu. Używanie formatu GIF w kontekście animacji jest zgodne z dobrą praktyką w branży, ponieważ pozwala na efektywne zarządzanie zasobami wizualnymi oraz zwiększa atrakcyjność treści wizualnych.

Pytanie 11

Który sposób zapisu stylu CSS ma najwyższy priorytet (jest stosowany w pierwszej kolejności)?

A. styl importowany do wewnętrznego arkusza

B. wewnętrzny arkusz stylów

C. styl lokalny (śródliniowy, w atrybucie style)

D. zewnętrzny arkusz stylów

Najwyższy priorytet w CSS ma styl LOKALNY (śródliniowy) - zapisany wprost w atrybucie style elementu, np. <p style="color:red">. Jest „najbliżej” elementu, więc nadpisuje reguły z arkuszy wewnętrznego i zewnętrznego. Zapamiętaj zasadę bliskości: im bliżej elementu zdefiniowany styl, tym silniejszy.

Pytanie 12

W dokumencie HTML zdefiniowano listę oraz dodano do niej formatowanie CSS. Który z efektów odpowiada tej definicji?

<ul>
  <li>Foksterier
  <li>Bokser
  <li>Baset
</ul>

li::after {
  content: " - Pies";
  background-color: teal;
  color: white;
}

Efekt 1

Foksterier
Bokser
Baset

Efekt 2

Foksterier
Bokser
Baset

Efekt 3

Foksterier
Bokser
Baset

Efekt 4

Foksterier
Bokser
Baset

A. Efekt 1.

B. Efekt 4.

C. Efekt 2.

D. Efekt 3.

Gratulacje, wybrałeś poprawną odpowiedź, która jest 'Efekt 4'. W tym przypadku, dokument HTML został odpowiednio sformatowany za pomocą kodu CSS. Widzimy, że pseudoelement ::after został użyty do dodania tekstu '- Pies' za każdym elementem listy. Jest to często stosowana technika w CSS do dodawania dekoracji lub dodatkowych informacji do elementów na stronie. Dodatkowo, widzimy, że styl CSS definiuje kolor tła jako 'teal' i kolor tekstu jako 'white'. Jest to zgodne z zasadami dobrego projektowania stron internetowych, które sugerują, że kontrast między kolorem tekstu a tłem powinien być wystarczający, aby tekst był łatwo czytelny. Również dobrym podejściem jest utrzymanie spójności kolorów na stronie internetowej, co poprawia jej estetykę i profesjonalizm. W praktyce, umiejętność manipulacji elementami HTML za pomocą CSS jest kluczowa dla każdego front-end developera.

Pytanie 13

W CSS określono stylizację dla paragrafu, która nada mu następujące właściwości:

A. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px

B. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px

C. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px

D. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

Rozważając zastosowanie CSS do stylizacji elementów musimy zrozumieć różnicę między marginesami wewnętrznymi padding a zewnętrznymi margin co jest kluczowe w pytaniu odpowiedzi twierdzące że marginesy wewnętrzne są ustawione na 40px są błędne ponieważ w kodzie użyto margin co jednoznacznie dotyczy marginesów zewnętrznych Marginesy wewnętrzne padding odnoszą się do przestrzeni pomiędzy zawartością a obramowaniem elementu a marginesy zewnętrzne określają odstęp między elementem a innymi elementami na stronie Błędnym jest również przypisanie odwrotnej kolorystyki czyli tła niebieskiego i tekstu czerwonego co jest sprzeczne z zawartością kodu CSS background-color red i color blue Często błędy te wynikają z niewłaściwego zrozumienia hierarchii stylów i ich wpływu na układ strony W praktyce ważne jest aby testować zmiany stylów wizualnie oraz zrozumieć jak różne właściwości CSS współpracują ze sobą aby tworzyć responsywne i estetyczne projekty Stosowanie odpowiednich marginesów zapewnia przejrzystość oraz poprawia czytelność co jest podstawą dobrego projektowania Dzięki zrozumieniu tych zasad można tworzyć bardziej efektywne i estetyczne strony które odpowiadają na potrzeby użytkowników i spełniają standardy branżowe

Pytanie 14

Którego znacznika użyć, aby umieścić na stronie animację Flash (.swf)?

<img>

<video>

<audio>

<object>

Pozostałe znaczniki obsługują inne media. <img> wstawia STATYCZNY obraz (np. PNG, JPG), bez interaktywności. <audio> odtwarza dźwięk, a <video> film w formatach HTML5 (MP4, WebM, Ogg) - żaden nie uruchamia pliku Flash. Plik .swf osadza <object>.

Pytanie 15

W kodzie HTML stworzono link do strony internetowej. Aby otworzyć tę stronę w nowym oknie lub zakładce przeglądarki, należy dodać do definicji linku atrybut

<a href="http://google.com" >strona Google</a>

A. target = "_blank"

B. rel = "external"

C. target = "_parent"

D. rel = "next"

Wybór innych atrybutów, takich jak rel="next" czy rel="external", wynika z nieporozumienia dotyczącego funkcji atrybutu target. Atrybut rel jest używany do określenia relacji między aktualną stroną a stroną, do której prowadzi link. Oznaczenie rel="external" sugeruje, że link prowadzi do zewnętrznej witryny, co nie wpływa na sposób, w jaki strona zostanie otwarta. Z kolei rel="next" jest używane w kontekście paginacji treści, co również nie ma związku z otwieraniem linków w nowych oknach. Atrybut target ma na celu precyzyjne kontrolowanie miejsca, w którym otworzy się link. Rozważając inne wartości target, takie jak '_parent' lub '_top', również można zauważyć, że nie są one odpowiednie w kontekście otwierania nowych okien. '_parent' otwiera stronę w bieżącym oknie lub w rodzicielskim ramce, co może prowadzić do niezamierzonych skutków, jeśli celem jest zachowanie otwartej oryginalnej strony. Takie podejścia mogą prowadzić do frustracji użytkowników, którzy mogą chcieć, aby ich pierwotna strona pozostała otwarta podczas przeglądania innych zasobów. Dlatego kluczowe jest zrozumienie, jak różne atrybuty wpływają na nawigację i doświadczenia użytkowników, aby uniknąć nieporozumień i błędów w projektowaniu stron internetowych.

Pytanie 16

Na ilustracji przedstawiono wybór formatu pliku do importu bazy danych. Który format powinien być wykorzystany, jeśli dane zostały wyeksportowane z programu Excel i zapisane jako tekst z użyciem przecinka do oddzielania wartości pól?

A. XML

B. SQL

C. ESRI

D. CSV

Format SQL jest używany do pracy z relacyjnymi bazami danych, ale nie jest odpowiedni do importu danych z Excela, jeśli są one zapisane w postaci tekstowej z przecinkami. SQL to język zapytań, który służy do zarządzania i modyfikacji danych w bazach danych, ale nie jest formatem przechowywania danych. W przypadku ESRI, mamy do czynienia z formatem plików kształtu, który jest specyficzny dla danych geoprzestrzennych i nie jest dostosowany do ogólnych danych tabelarycznych, takich jak te z Excela. Format ESRI jest używany głównie w GIS do przechowywania danych przestrzennych. Natomiast XML jest formatem znaczników, który umożliwia przechowywanie danych w strukturze drzewa i jest bardziej złożony niż CSV. XML jest używany wtedy, gdy potrzebujemy skomplikowanej struktury danych z definicjami hierarchii, co czyni go mniej efektywnym dla prostego importu tabelarycznego. Wybór niewłaściwego formatu wynika często z niezrozumienia specyfiki i przeznaczenia każdego z nich. Często błędnym założeniem jest przekonanie, że bardziej skomplikowane formaty, takie jak XML czy SQL, są zawsze lepszym wyborem, co nie jest prawdą, gdy celem jest prostota i kompatybilność z szeroką gamą programów i systemów. CSV pozostaje najefektywniejszym rozwiązaniem dla tego typu danych dzięki swojej prostocie i łatwości użycia w wielu kontekstach technologicznych.

Pytanie 17

Która para znaczników HTML daje TEN SAM efekt wizualny (bez CSS)?

A. <b> i <strong>

B. <p> i <h2>

C. <meta> i <title>

D. <b> i <big>

Znaczniki <b> i <strong> domyślnie wyświetlają tekst pogrubiony, więc bez stylów CSS wyglądają identycznie. Różni je znaczenie: <strong> niesie wagę semantyczną (ważna treść, czytana z naciskiem przez czytniki), a <b> to czysto wizualne pogrubienie. Dlatego ten sam efekt dają <b> i <strong>.

Pytanie 18

Który zapis <img> jest poprawny zgodnie z walidacją HTML5?

<img src=mojPiesek.jpg" alt="pies>

<img src="mojPiesek.jpg">

<img src="mojPiesek.jpg" alt="pies">

<img src=mojPiesek.jpg alt=pies>

Poprawny zapis to <img src="mojPiesek.jpg" alt="pies"> - wartości atrybutów src i alt ujęte są w cudzysłowy, a znacznik jest poprawnie domknięty. Dlatego prawidłowy jest ten zapis.

Pytanie 19

W języku CSS zdefiniowano styl. Sformatowana stylem sekcja będzie zawierała obramowanie o szerokości

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

A. 20 px oraz marginesy na zewnątrz tego obramowania.

B. 20 px oraz marginesy wewnątrz tego obramowania.

C. 2 px oraz marginesy na zewnątrz tego obramowania.

D. 2 px oraz marginesy wewnątrz tego obramowania.

Wygląda na to, że niepoprawnie zrozumiałeś, jak działają obramowania i marginesy w CSS. W tym języku obramowanie (border) i margines (margin) to dwie różne typy przestrzeni, które możemy zdefiniować wokół elementu. Obramowanie jest linią otaczającą element, natomiast margines to przestrzeń między obramowaniem a następnym elementem. Marginesy są zawsze na zewnątrz obramowania, nie wewnątrz. Powiedzenie, że margines jest 'wewnątrz' obramowania, to fundamentalne nieporozumienie dotyczące tego, jak te dwie właściwości działają. Poza tym, szerokość obramowania została zdefiniowana jako 2 piksele, a nie 20. To może być łatwo pomylone, ale pamiętaj, że w CSS jednostki są ważne i mogą znacząco wpływać na wygląd strony. W praktyce, szczegółowe zrozumienie obramowania i marginesów jest kluczowe do precyzyjnego ułożenia elementów na stronie internetowej.

Pytanie 20

Jak wygląda poprawny zapis samozamykającego się znacznika łamania linii?

</br>

</ br>

<br> </br>

<br/>

Pozostałe zapisy łamią zasady void-elementów. </br> i </ br> to znaczniki ZAMYKAJĄCE, a element pusty takiego nie posiada (do tego spacja w drugim jest niedozwolona). <br></br> próbuje domknąć go osobną parą, jakby miał zawartość. Poprawna samozamykająca forma to <br/>.

Pytanie 21

Aby strona WWW była responsywna (dostosowana do różnych urządzeń), należy między innymi definiować:

A. rozmiary obrazów wyłącznie w pikselach

B. układ strony wyłącznie za pomocą tabel

C. rozmiary obrazów w procentach

D. tylko znane czcionki, np. Arial

Responsywność polega na tym, że strona dopasowuje się do szerokości ekranu - od dużego monitora po telefon. Aby to osiągnąć, wymiary elementów, w tym obrazów, podaje się w jednostkach względnych, na przykład w procentach szerokości kontenera. Obraz o szerokości 100% skaluje się wtedy razem z układem, zamiast wystawać poza ekran. Dlatego w RWD rozmiary obrazów definiuje się w procentach.

Pytanie 22

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

A. żółtą

B. zieloną

C. niebieską

D. czerwoną

W modelu RGB barwę tworzą składowe czerwona (R), zielona (G) i niebieska (B) o wartościach 0-255. Zapis RGB(0, 0, 255) oznacza maksymalną składową niebieską i zerowe pozostałe, czyli czysty niebieski. Dlatego RGB(0, 0, 255) to barwa niebieska.

Pytanie 23

Aby zdefiniować w języku HTML listę nienumerowaną (wypunktowaną), należy użyć znacznika:

<ol>

<dd>

<dt>

<ul>

Listę nienumerowaną (wypunktowaną) tworzy znacznik <ul> (unordered list), a jej kolejne pozycje umieszcza się w <li>. Domyślnie elementy poprzedzane są punktorami. Dla listy numerowanej używa się <ol>. Dlatego listę wypunktowaną definiuje <ul>.

Pytanie 24

W CSS określono styl dla stopki. Jak można zastosować to formatowanie do bloku oznaczonego znacznikiem div?

#stopka { ... }

A. <div title = "stopka"> …

B. <div class = "stopka"> …

C. <div id = "stopka"> …

D. <div "stopka"> …

Poprawnie – zapis #stopka w CSS oznacza selektor identyfikatora (ID), więc w HTML musimy użyć atrybutu id="stopka" dokładnie z tą samą nazwą. W CSS znak # wskazuje, że styl jest przypisany do elementu o konkretnym identyfikatorze, a nie do klasy czy czegokolwiek innego. Dlatego jedynym prawidłowym sposobem podpięcia tego stylu do bloku div jest konstrukcja: <div id="stopka">…</div>.
W praktyce wygląda to tak:
CSS:
#stopka {
background-color: #333;
color: white;
padding: 20px;
}
HTML:
<div id="stopka">To jest stopka strony</div>
Przeglądarka łączy selektor #stopka z elementem, który ma id="stopka" i nakłada na niego zdefiniowane właściwości. Identyfikator powinien być unikalny w obrębie całego dokumentu HTML, co jest zgodne z zaleceniami W3C i ogólnie przyjętą dobrą praktyką. Do jednego ID odwołujemy się w CSS przez #, a w JavaScript przez document.getElementById("stopka").
Moim zdaniem warto zapamiętać prostą zasadę: # w CSS = id w HTML, kropka (.) w CSS = class w HTML. Gdy projektujesz layout strony, zwykle elementy typu nagłówek, stopka, główna nawigacja mają unikalne ID, bo występują raz na stronie. Natomiast powtarzalne elementy (np. kafelki z produktami) dostają klasy. Dzięki temu kod jest czytelniejszy, łatwiej się go utrzymuje i unikamy dziwnych konfliktów stylów. Dobrą praktyką jest też używanie opisowych nazw, np. id="stopka" zamiast skrótów typu id="s1", bo po miesiącu nikt nie pamięta, co to znaczyło.

Pytanie 25

Która z list jest interpretacją podanego kodu?

A. Rys. A

B. Rys. D

C. Rys. C

D. Rys. B

Częstym błędem przy interpretacji kodu HTML jest niepoprawne rozumienie zagnieżdżania list lub ich typów. W przypadku pytania mamy do czynienia z jedną listą uporządkowaną ol która zawiera inne listy nieuporządkowane ul W niektórych odpowiedziach przewidziano błędnie że wszystkie elementy są częścią jednej listy nieuporządkowanej co nie jest zgodne z przedstawionym kodem Listy ol i ul pełnią różne role w HTML Specyfikacja HTML jasno określa że uporządkowane listy ol są używane wtedy gdy kolejność elementów ma znaczenie zaś nieuporządkowane ul gdy kolejność jest nieważna Źle zidentyfikowanie tych typów może prowadzić do błędów w prezentacji danych i wpływać na ich semantyczne znaczenie w dokumentach Aby uniknąć takich błędów warto zapoznać się z dokumentacją W3C oraz stosować się do dobrych praktyk kodowania takich jak wyraźne zagnieżdżanie list i zachowanie ich semantycznego sensu Utrzymywanie przejrzystości kodu zwiększa również jego dostępność i SEO co jest ważne w profesjonalnym tworzeniu stron internetowych

Pytanie 26

Która reguła dotycząca sekcji <head> w HTML jest poprawna?

A. w <head> definiuje się szablon strony znacznikami <div>

B. w <head> nie można umieszczać CSS, tylko odwołanie do pliku

C. w <head> mogą wystąpić <meta>, <title>, <link>

D. w <head> zawiera się sekcję <body>

Sekcja <head> nie zawiera widocznej treści strony, lecz informacje O niej - metadane i powiązania z zasobami. Poprawnie mogą się w niej znaleźć <meta> (np. kodowanie znaków, opis dla wyszukiwarek), <title> (tytuł widoczny na karcie przeglądarki) oraz <link> (np. dołączenie zewnętrznego arkusza CSS). Dlatego poprawne jest stwierdzenie o <meta>, <title> i <link>.

Pytanie 27

Poniżej znajduje się fragment kodu w języku HTML. Przedstawia on definicję listy:

A. A

B. B

C. D

D. C

W przypadku odpowiedzi niepoprawnych można zauważyć kilka błędnych interpretacji kodu HTML dotyczących struktury listy uporządkowanej i nieuporządkowanej Po pierwsze błędem jest traktowanie wszystkich elementów jako jednolitej listy numerowanej co ignoruje obecność zagnieżdżonej listy nieuporządkowanej ul Zrozumienie różnicy między ol i ul jest kluczowe dla poprawnego interpretowania hierarchii w HTML Listy uporządkowane ol służą do tworzenia sekwencyjnych numeracji natomiast listy nieuporządkowane ul są używane dla elementów które nie wymagają konkretnego porządku Błędne traktowanie list zagnieżdżonych jako jednorodnych prowadzi do zniekształcenia struktury dokumentu HTML co utrudnia jego czytelność i zarządzanie nim Przykładowo jeżeli zagnieżdżona lista nieuporządkowana jest interpretowana jako część większej listy uporządkowanej może to prowadzić do błędów logicznych w strukturze dokumentu co jest sprzeczne z dobrymi praktykami w zakresie tworzenia przejrzystych i semantycznie poprawnych dokumentów HTML Warto podkreślić że właściwe stosowanie zagnieżdżonych struktur listowych w HTML jest nie tylko kwestią estetyki ale także funkcjonalności zapewniając że treść jest prezentowana w sposób zrozumiały zarówno dla użytkowników jak i narzędzi do przetwarzania stron internetowych

Pytanie 28

W przedstawionym filmie, aby połączyć tekst i wielokąt w jeden obiekt tak, aby operacja ta była odwracalna zastosowano funkcję

A. sumy.

B. wykluczenia.

C. grupowania.

D. części wspólnej.

Prawidłowo – w filmie została użyta funkcja grupowania. W grafice wektorowej, np. w programach typu Inkscape, CorelDRAW czy Illustrator, grupowanie służy właśnie do logicznego połączenia kilku obiektów w jeden „zestaw”, ale bez trwałego mieszania ich geometrii. To znaczy: tekst dalej pozostaje tekstem, wielokąt dalej jest wielokątem, tylko są traktowane jak jeden obiekt przy przesuwaniu, skalowaniu czy obracaniu. Dzięki temu operacja jest w pełni odwracalna – w każdej chwili możesz rozgrupować elementy i edytować każdy osobno.
Moim zdaniem to jest podstawowa dobra praktyka w pracy z projektami, które mogą wymagać późniejszych poprawek: podpisy, etykiety, logotypy, schematy techniczne. Jeśli połączysz tekst z kształtem za pomocą operacji boolowskich (suma, część wspólna, wykluczenie), to tekst zwykle zamienia się na krzywe, przestaje być edytowalny jako tekst. To bywa potrzebne przy przygotowaniu do druku czy eksportu do formatu, który nie obsługuje fontów, ale nie wtedy, gdy zależy nam na łatwej edycji.
Z mojego doświadczenia: przy projektowaniu interfejsów, ikon, prostych banerów na WWW czy grafik do multimediów, najrozsądniej jest najpierw grupować logicznie elementy (np. ikona + podpis), a dopiero na samym końcu, gdy projekt jest ostateczny, ewentualnie zamieniać tekst na krzywe. Grupowanie pozwala też szybko zaznaczać całe moduły projektu, wyrównywać je względem siebie, duplikować całe zestawy (np. kafelki menu, przyciski z opisami) bez ryzyka, że coś się rozjedzie. W grafice komputerowej to taka podstawowa „organizacja pracy” – mniej destrukcyjna niż różne operacje na kształtach i zdecydowanie bardziej elastyczna przy późniejszych zmianach.

Pytanie 29

Którego znacznika należy użyć, aby przejść do nowej linii tekstu, nie tworząc nowego akapitu?

</b>

<br>

<p>

</br>

Znacznik <br> wymusza złamanie wiersza - przenosi dalszy tekst do nowej linii, nie rozpoczynając przy tym nowego akapitu ani dodatkowych odstępów. Jest to element pusty (void), więc w HTML5 zapisuje się go bez ukośnika i bez znacznika zamykającego (poprawnie <br>, a nie </br>). Używa się go np. w adresach czy wierszach wiersza, gdzie liczy się dokładny podział linii. Do oddzielania bloków tekstu właściwy jest jednak akapit <p>. Dlatego nową linię bez akapitu daje <br>.

Pytanie 30

Jaki zapis szesnastkowy odpowiada kolorowi rgb(128, 16, 8)?

#801008

#FF0F80

#FF1008

#800F80

Każdą składową RGB (0-255) zapisuje się dwucyfrowo szesnastkowo: 128 = 80, 16 = 10, 8 = 08, co po sklejeniu daje #801008. Przelicznik: 128 to połowa z 256, czyli 0x80. Zapamiętaj metodę: licz każdą składową osobno i połącz w #RRGGBB.

Pytanie 31

Który z przedstawionych poniżej fragmentów kodu HTML5 zostanie uznany przez walidator HTML za niepoprawny?

A. <p class= "stl">tekst</p>

B. <p class= "stl"><style>.a{color:#F00}</style>tekst</p>

C. <p class= "stl" style= "color: #F00 ">tekst</p>

D. <p class= "stl" id= "a">tekst</p>

Poprawna odpowiedź, która została wskazana, to <p class= "stl"><style>.a{color:#F00}</style>tekst</p>. W kontekście HTML5, element <style> jest przeznaczony do umieszczania w nagłówkach dokumentu (<head>), a nie wewnątrz elementów blokowych, takich jak <p>. Umieszczanie tagu <style> w tagu <p> narusza zasady dotyczące struktury dokumentu HTML. Walidatory HTML5, które sprawdzają zgodność kodu z obowiązującymi standardami W3C, uznają takie umieszczenie za błąd, ponieważ stylizacja powinna być oddzielona od treści. Zgodnie z najlepszymi praktykami, CSS powinno być zaimplementowane w plikach zewnętrznych lub sekcjach <head>, co ułatwia utrzymanie i modyfikację kodu. Przykładem poprawnej struktury może być: <head><style>.a{color:#F00}</style></head><body><p class="stl">tekst</p></body>. To zapewnia przejrzystość i zgodność z zasadami HTML5, co jest kluczowe dla SEO oraz dostępności strony.

Pytanie 32

Która z zasad dotyczących poprawnego kodu HTML jest BŁĘDNA (nieprawdziwa)?

A. znaczniki zamyka się w odwrotnej kolejności niż otwierano

B. atrybuty trzeba podawać w kolejności ALFABETYCZNEJ

C. znaczniki (poza pustymi) działają do domknięcia, np. <p>...</p>

D. w nazwach znaczników nie rozróżnia się wielkości liter (<p> = <P>)

Pozostałe zasady są PRAWDZIWE, więc nie pasują do pytania o błąd. Znaczniki (poza pustymi) faktycznie działają do domknięcia (np. <p>...</p>), w nazwach znaczników nie rozróżnia się wielkości liter, a zamyka się je w odwrotnej kolejności niż otwierano. Nieprawdziwy jest tylko wymóg alfabetycznej kolejności atrybutów.

Pytanie 33

Który format najlepiej nadaje się do zapisu RASTROWEGO obrazu z przezroczystością na stronę WWW?

A. SVG

B. PNG

C. BMP

D. JPG

Pozostałe formaty nie pasują. JPG nie obsługuje przezroczystości i kompresuje stratnie. BMP jest nieskompresowany i bez kanału alfa. SVG owszem obsługuje przezroczystość, ale to format WEKTOROWY, a pytanie dotyczy obrazu RASTROWEGO. Rastrowa grafika z przezroczystością na web to PNG.

Pytanie 34

Selektor CSS a:link {color:red} użyty w kaskadowych arkuszach stylów określa

A. klasę

B. pseudoelement

C. pseudoklasę

D. identyfikator

Odpowiedź, którą wybrałeś, to pseudoklasa. W CSS jest to typowa sprawa, bo selektor a:link to właśnie przykład użycia pseudoklas. Dzięki nim możesz stylizować różne elementy na podstawie ich stanu lub tego, jak się zachowują w dokumencie. Na przykład, selektor a:link definiuje styl dla linków, które jeszcze nie zostały odwiedzone - więc jeśli ktoś kliknął na link, zmienia się jego wygląd. Używając pseudoklas, możesz znacznie poprawić estetykę stron i sprawić, że będą bardziej przyjazne dla użytkowników. Pomyśl o takich pseudoklasach jak :hover, co zmienia styl, gdy najedziemy kursorem, albo :active, która wprowadza zmiany podczas klikania. To naprawdę dobra technika, żeby nadać stronom fajny, dynamiczny charakter. Rozumienie pseudoklas to istotna sprawa w web designie, a to, co się zgadza z tym, co mówi W3C, to dodatkowy atut.

Pytanie 35

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. Rys. A

B. Rys. D

C. Rys. B

D. Rys. C

Błędne odpowiedzi wynikają głównie z nieprawidłowego przypisania wartości marginesów i marginesów wewnętrznych w stylach CSS. W przypadku niepoprawnych stylów, takich jak w Rys. A i D, zastosowano linię przerywaną, co nie spełnia warunków pytania, które wymaga zastosowania linii ciągłej. Solidna linia graniczna jest bardziej preferowana w projektach profesjonalnych, ponieważ dodaje wyrazistości i estetyki. Warianty, gdzie nie zachowano odpowiednich wartości marginesów i marginesów wewnętrznych, mogą prowadzić do niezamierzonego zachowania w układzie strony, takich jak zły odstęp między elementami, co negatywnie wpływa na użyteczność i estetykę interfejsu użytkownika. Niewłaściwe ustawienie tych wartości często wynika z niedostatecznego zrozumienia modelu pudełkowego w CSS, który jest fundamentem w projektowaniu rozmieszczenia elementów na stronie. Model pudełkowy umożliwia dokładne określenie, jak elementy są wyświetlane, co jest niezbędne do tworzenia responsywnych i estetycznie przyjemnych stron internetowych. Zrozumienie i prawidłowe zastosowanie marginesów i marginesów wewnętrznych jest kluczowe dla osiągnięcia profesjonalnych wyników w projekcie.

Pytanie 36

Gdzie umieścić informacje o autorze, opisie i słowach kluczowych strony?

A. w <body>, w znaczniku <html>

B. w <body>, w znaczniku <meta>

C. w <head>, w znaczniku <style>

D. w <head>, w znaczniku <meta>

Metadane należą do nagłówka, nie do treści. <style> zawiera reguły CSS, a nie opis strony. <meta> w <body> jest niepoprawne, a <html> to znacznik nadrzędny całego dokumentu. Autora, opis i słowa kluczowe podaje <meta> w <head>.

Pytanie 37

Na czym polega opracowanie logicznego UKŁADU strony internetowej?

A. na rozmieszczeniu elementów w określonych miejscach strony

B. na zdefiniowaniu treści strony

C. na ustaleniu adresów URL podstron

D. na przygotowaniu zestawu grafik

Pozostałe odpowiedzi dotyczą innych etapów pracy. Definiowanie treści to przygotowanie tekstów, zestaw grafik to materiały wizualne, a ustalanie adresów URL podstron to kwestia nawigacji i struktury serwisu. Sam układ to rozmieszczenie elementów w wyznaczonych miejscach strony.

Pytanie 38

W języku działającym po stronie serwera tworzysz ankietę, której wynik ma być zapamiętany w postaci małego pliku po stronie użytkownika. Jaki mechanizm wykorzystasz?

A. ciasteczka (cookies)

B. bazę danych SQL

C. sesję

D. tablicę globalną $_FILES

Ciasteczko (cookie) to niewielki plik zapisywany przez serwer w przeglądarce użytkownika i odsyłany przy kolejnych żądaniach. Idealnie nadaje się do zapamiętania drobnej informacji po stronie klienta, np. że ktoś wziął już udział w ankiecie. W PHP ustawia się je funkcją setcookie(). Dlatego dane zapisywane w małym pliku u użytkownika to ciasteczka.

Pytanie 39

W CSS, aby ustawić różne stylizacje dla pierwszej litery w akapicie, należy wykorzystać selektor

A. dziecka p + first-letter

B. klasy p.first-letter

C. atrybutu p [first-letter]

D. pseudoelementu p::first-letter

Wybór niewłaściwego selektora do stylizacji pierwszej litery akapitu może prowadzić do nieporozumień i błędów w interpretacji CSS. Na przykład, 'dziecka p + first-letter' to niepoprawny sposób definiowania stylu, ponieważ nie odnosi się do konkretnego pseudoelementu, a zamiast tego sugeruje selekcję w kontekście struktury DOM. Kolejną nieadekwatną opcją jest 'klasy p.first-letter', która wskazuje na klasę CSS, a nie na pseudoelement, co nie pozwala na selekcję pierwszej litery. Klasy są używane do stylizacji elementów, ale nie mają zastosowania w kontekście specyficznych fragmentów tekstu. 'Atrybutu p [first-letter]' również nie można uznać za poprawny, ponieważ CSS nie wspiera atrybutów w tej formie dla stylizacji tekstu. Te błędne podejścia wynikają często z nieporozumienia dotyczącego działania selektorów oraz ich specyfiki w CSS. Użytkownicy mogą mylić selektory klasowe i atrybutowe z pseudoelementami, co jest powszechnym błędem. Zrozumienie różnicy między tymi różnymi typami selektorów jest kluczowe do efektywnego stylizowania stron internetowych. Aby skutecznie wykorzystać CSS, warto zwrócić uwagę na dokumentację i uczyć się od najlepszych praktyk, aby unikać takich nieporozumień.

Pytanie 40

W języku CSS, sformatowanie dowolnego elementu języka HTML w ten sposób, że po najechaniu na niego kursorem zmienia on kolor czcionki, wymaga zastosowania pseudoklasy

A. :active

B. :visited

C. :hover

D. :coursor

Poprawna odpowiedź to pseudoklasa :hover. W CSS służy ona dokładnie do tego, o co chodzi w pytaniu: do zmiany wyglądu elementu w momencie, gdy użytkownik najedzie na niego kursorem myszy (albo innym wskaźnikiem). Mechanizm jest prosty: przeglądarka śledzi pozycję kursora i kiedy znajduje się on nad danym elementem, do selektora z :hover zostają zastosowane zdefiniowane tam style.

Przykładowo, żeby po najechaniu zmienić kolor tekstu linku, wystarczy napisać:

a:hover {
color: red;
}

Można tak samo stylować dowolny element HTML, nie tylko <a>:

button:hover {
color: white;
background-color: #007bff;
cursor: pointer;
}

W nowoczesnych interfejsach :hover jest podstawą efektów „podświetlenia” przycisków, kart, menu rozwijanych itp. Z mojego doświadczenia warto pamiętać o kolejności pseudoklas dla linków: a:link, a:visited, a:hover, a:active – to jest klasyczna dobra praktyka (czasem zapisywana jako LVHA), żeby style się nie nadpisywały w dziwny sposób.

Trzeba też mieć w głowie, że na urządzeniach mobilnych :hover działa inaczej lub wcale, bo tam nie ma typowego kursora. Dlatego sensowne jest, żeby najważniejsze informacje nie były dostępne tylko po najechaniu, a :hover traktować bardziej jako poprawę wygody i estetyki, a nie jedyne źródło funkcjonalności. Mimo to w klasycznym desktopowym webie :hover jest absolutnym standardem do reakcji na najechanie kursorem.

Rozpocznij nowy egzamin

Powrót do strony głównej