Wyniki egzaminu

Nowy egzamin
Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 12 maja 2026 14:06
  • Data zakończenia: 12 maja 2026 14:10

Egzamin niezdany

Wynik: 12/40 punktów (30,0%)

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Facebook
X.com
LinkedIn
Szczegółowe wyniki:
Pytanie 1

W instrukcjach mających na celu odtwarzanie dźwięku jako muzyki tła na stronie internetowej NIE stosuje się atrybutu

A. href="C:/100.wav"
B. volume="-100"
C. balance="-10"
D. loop="10"
Odpowiedź href="C:/100.wav" jest prawidłowa, ponieważ atrybut href jest używany w kontekście linków hipertekstowych, a nie do odtwarzania dźwięku na stronie. W przypadku odtwarzania dźwięku w HTML, odpowiednie tagi to <audio> oraz związane z nimi atrybuty, takie jak src, controls, autoplay, loop, itp. Aby zrealizować odtwarzanie dźwięku jako podkładu muzycznego, używamy tagu <audio src="C:/100.wav" autoplay loop></audio>, co zapewnia, że dźwięk z pliku .wav będzie odtwarzany automatycznie i w pętli. Zgodnie z dobrymi praktykami, pliki audio powinny być dostępne na serwerze i wskazywane względem ich lokalizacji w sieci, co wspiera lepszą wydajność oraz dostępność. Użycie atrybutu href w tym kontekście jest niewłaściwe i może prowadzić do niepoprawnego działania strony, ponieważ przeglądarki nie interpretują tego w kontekście dźwięku. Przykładowo, zamiast href, należy zastosować odpowiednie atrybuty w tagu <audio> zgodnie z aktualnymi standardami HTML5.
Pytanie 2

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

tekst

pierwsza linia
Druga linia

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

Deklaracja typu dokumentu HTML: wskazuje, że kod został stworzony w wersji

A. 7
B. 4
C. 5
D. 6
Deklaracja typu dokumentu HTML, znana jako <!DOCTYPE HTML>, jest kluczowym elementem każdej strony internetowej, który informuje przeglądarkę, w jakiej wersji HTML została napisana strona. W przypadku <!DOCTYPE HTML> mówimy o wersji HTML5, która jest najnowszym standardem języka znaczników. HTML5 wprowadza wiele usprawnień i nowych funkcji w porównaniu do wcześniejszych wersji, takich jak semantyczne znaczniki, wsparcie dla multimediów (audio i wideo) oraz API do złożonych aplikacji internetowych. Przykładem zastosowania HTML5 mogą być formularze z nowymi typami inputów, które ułatwiają interakcję z użytkownikiem, takie jak 'date', 'email' czy 'url'. Również HTML5 wprowadza nowy model renderowania, który jest bardziej efektywny i dostosowany do nowoczesnych urządzeń mobilnych. Standardy HTML są ustalane przez W3C (World Wide Web Consortium), które regularnie aktualizuje specyfikacje, aby nadążać za rozwijającymi się technologiami internetowymi. W skrócie, poprawna deklaracja <!DOCTYPE HTML> jest niezbędna dla właściwego wyświetlania i działania strony w różnych przeglądarkach.
Pytanie 4

W CSS zdefiniowano styl dla pola edycji. Taki obszar będzie miał jasnozielone tło

input:focus { background-color: LightGreen; }
A. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie
B. w każdej sytuacji
C. gdy zostanie na niego najechane kursorem myszy bez kliknięcia
D. po kliknięciu myszą w celu wprowadzenia tekstu
Pozostałe odpowiedzi opierają się na błędnym zrozumieniu zastosowania pseudoklas w języku CSS. Pseudoklasa :first-of-type, która mogłaby sugerować pierwsze wystąpienie znacznika w dokumencie, nie odnosi się do stanu aktywności pola edycyjnego. Stylizowanie pierwszego wystąpienia nie ma związku z interakcją użytkownika, a jedynie z pozycją elementu w strukturze dokumentu HTML. Kolejny błąd pojawia się przy założeniu, że zmiana koloru tła nastąpi gdy element zostanie wskazany kursorem myszy. W CSS taka interakcja jest obsługiwana przez pseudoklasę :hover, która stosuje się do elementów, nad którymi znajduje się wskaźnik myszy, ale nie obejmuje stanu aktywnego fokusu potrzebnego do edycji. Ostatnia błędna koncepcja dotyczy twierdzenia, że styl jest stosowany w każdym przypadku. To stwierdzenie ignoruje specyfikę selektorów CSS, które wymagają określonych warunków - w tym przypadku aktywnego fokusu elementu. Zrozumienie różnic między pseudoklasami :focus i :hover oraz znajomość ich zastosowań w projektowaniu interaktywnych interfejsów webowych jest kluczowe dla skutecznego stosowania CSS w praktyce. Poprawna wiedza na temat specyficznych zastosowań tych pseudoklas wpływa na jakość doświadczenia użytkownika i integrację funkcjonalności z estetyką projektu.
Pytanie 5

Co należy zrobić, gdy rozmiar pliku graficznego jest zbyt duży do umieszczenia w Internecie?

A. zapisać w formacie BMP
B. dodać kanał alfa
C. zmniejszyć jego rozdzielczość
D. zwiększyć jego głębię kolorów
Zmniejszenie rozdzielczości pliku graficznego to jedna z najskuteczniejszych metod redukcji jego rozmiaru, co jest kluczowe przy publikacji w Internecie. Rozdzielczość odnosi się do ilości pikseli, które tworzą obraz, a jej zmniejszenie prowadzi do mniejszej ilości danych do przechowania. Przykładowo, zamiast publikować obraz o rozdzielczości 4000x3000 pikseli, można zmniejszyć go do 1920x1080, co drastycznie zmniejszy wielkość pliku bez zauważalnej utraty jakości wizualnej na ekranach komputera czy urządzeń mobilnych. Zmniejszenie rozdzielczości jest zgodne z najlepszymi praktykami w zakresie optymalizacji zasobów internetowych, w tym zasadami dotyczącymi czasu ładowania strony i wydajności. Dodatkowo, odpowiednia rozdzielczość może poprawić doświadczenia użytkowników, zmniejszając czas ładowania i zwiększając responsywność witryn. Warto również pamiętać o formatowaniu plików graficznych, gdzie JPEG jest często preferowanym formatem dla zdjęć, a PNG dla obrazów z przezroczystością. Stosowanie technologii takich jak responsywne obrazy również przyczynia się do efektywnej prezentacji graficznej w sieci, co ma kluczowe znaczenie w dzisiejszym świecie online.
Pytanie 6

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>
Ilustracja do pytania
A. A
B. C
C. D
D. B
Zrozumienie jak działają atrybuty HTML takie jak disabled i checked jest kluczowe dla prawidłowego wyświetlania i funkcjonalności formularzy w przeglądarce. Niektóre z odpowiedzi zawierają błędne interpretacje tych atrybutów co prowadzi do niepoprawnego rozumienia jak formularz będzie prezentowany. Na przykład jeśli pole checkbox nie ma ustawionego atrybutu checked to domyślnie będzie niezaznaczone a użytkownik będzie mógł to zmienić. Dodanie atrybutu checked oznacza że pole będzie zaznaczone od razu po załadowaniu strony. Atrybut disabled uniemożliwia interakcję użytkownika z danym elementem co oznacza że użytkownik nie będzie mógł zmienić jego stanu. Częstym błędem jest założenie że wszystkie pola wyboru mogą być domyślnie edytowalne co nie jest prawdą w przypadku zastosowania atrybutu disabled. Również brak zrozumienia jak kolejność elementów i ich atrybutów wpływa na wizualne i funkcjonalne aspekty formularza może prowadzić do błędnych wniosków dotyczących ich zachowania. Warto pamiętać że prawidłowe zrozumienie tych zasad pozwala na tworzenie bardziej intuicyjnych i użytecznych aplikacji internetowych które spełniają oczekiwania użytkowników i standardy branżowe. Poprawna interpretacja kodu HTML jest więc niezbędna dla każdego profesjonalisty zajmującego się tworzeniem stron i aplikacji internetowych aby zapewnić bezbłędne działanie i łatwość obsługi formularzy przez końcowego użytkownika. Powinno się też zwracać uwagę na dostępność i użyteczność formularzy co jest kluczowym aspektem w procesie projektowania stron internetowych.
Pytanie 7

Który z obrazków ilustruje efekt działania podanego fragmentu kodu HTML?

Ilustracja do pytania
A. Obrazek D
B. Obrazek A
C. Obrazek B
D. Obrazek C
Odpowiedzi inne niż C są niepoprawne ponieważ nie uwzględniają poprawnie działania atrybutu rowspan co prowadzi do błędnego renderowania tabeli. W przypadku błędnego rozumienia atrybutu rowspan możemy obserwować sytuacje gdzie komórki tabeli są wyświetlane w niewłaściwych miejscach co może sugerować że atrybut ten jest błędnie zrozumiany jako wpływający na szerokość a nie na wysokość komórki. Często spotykanym błędem jest zakładanie że rowspan działa podobnie jak colspan co prowadzi do błędnego ułożenia komórek w tabeli. Ważne jest aby zrozumieć że rowspan definiuje ile wierszy ma zajmować dana komórka a nie ile kolumn co jest kluczowe dla prawidłowego zrozumienia układów tabelarycznych w HTML. Takie błędy mogą prowadzić do nieczytelnych i niepoprawnie zorganizowanych danych na stronie WWW co jest szczególnie problematyczne w przypadku stron które muszą być kompatybilne z różnymi urządzeniami i technologiami asystującymi. Poprawne stosowanie atrybutów rowspan i colspan jest fundamentalne dla tworzenia dostępnych i estetycznych układów tabelarycznych.
Pytanie 8

Aby zdefiniować styl akapitu <p>, który występuje bezpośrednio po znaczniku <img>, należy w arkuszu stylów CSS zastosować związek

A. img > p
B. img [p]
C. img + p
D. img p
W tym zadaniu chodzi o zrozumienie tzw. kombinatorów w CSS, czyli znaków łączących selektory i określających relacje między elementami w drzewie DOM. Bardzo często mylenie tych relacji prowadzi do dokładnie takich błędnych odpowiedzi jak w tym pytaniu. Zapis „img p” to selektor potomka (descendant selector). Oznacza on: wybierz każdy element <p>, który znajduje się gdziekolwiek wewnątrz elementu <img>. Problem w tym, że w poprawnym HTML znacznik <img> jest pustym elementem, nie może mieć dzieci. W praktyce więc taki selektor nigdy nie zadziała w opisanym scenariuszu. To typowe nieporozumienie: ktoś myśli „obok obrazka jest paragraf, więc napiszę img p”, ale CSS rozumie to jako relację rodzic–potomek, a nie rodzeństwo. Z kolei zapis „img [p]” wynika zwykle z pomieszania składni selektorów atrybutów z selektorami elementów. Nawiasy kwadratowe w CSS służą do wybierania elementów na podstawie atrybutów, np. a[href], input[type="text"]. Konstrukcja [p] sugerowałaby atrybut o nazwie „p”, co w ogóle nie ma sensu w tym kontekście. Taka składnia jest po prostu niepoprawna merytorycznie, bo nie opisuje żadnej realnej relacji między <img> a <p>. Natomiast „img > p” to selektor dziecka (child combinator). Mówi on: wybierz elementy <p>, które są bezpośrednimi dziećmi elementu <img>. To znowu kłóci się z modelem HTML – obrazek nie może zawierać w sobie paragrafu. Ten selektor ma sens np. przy div > p, ale zupełnie nie pasuje do relacji „element po elemencie”. W tym zadaniu potrzebna jest relacja rodzeństwa: akapit stoi obok obrazka, a nie w środku. Prawidłowe podejście opiera się na zrozumieniu, że chcemy „bezpośredniego sąsiada” na tym samym poziomie, a nie potomka czy dziecka. Właśnie to zapewnia selektor sąsiedniego rodzeństwa, czyli konstrukcja z plusem. Typowy błąd myślowy polega na tym, że patrzymy na wygląd strony (obrazek nad akapitem) i nie analizujemy prawdziwej struktury DOM. Dobra praktyka frontendowa to zawsze przełożyć układ na dokładne relacje: rodzic–dziecko, przodek–potomek, rodzeństwo. Dopiero potem dobrać odpowiedni kombinator w CSS. Jeśli chcemy stylować element „bezpośrednio po”, używamy właśnie selektora z +, a nie spacji czy znaku >.
Pytanie 9

Gdzie powinien być umieszczony znacznik meta w języku HTML?

A. w obrębie znaczników <body> ... </body>
B. w sekcji nagłówkowej strony.
C. w dolnej części witryny internetowej.
D. w obrębie znaczników paragrafu.
Umieszczanie znaczników meta pomiędzy znacznikami <body> ... </body> jest niewłaściwe, ponieważ znaczniki te są przeznaczone do sekcji nagłówkowej, a ich umiejscowienie w ciele dokumentu HTML nie spełnia standardów W3C. Znaczniki meta powinny być zdefiniowane już na etapie ładowania strony, ponieważ dostarczają istotnych informacji o stronie przed jej załadowaniem. Z kolei umieszczanie znaczników meta pomiędzy znacznikami paragrafu jest nie tylko technicznie błędne, ale także wprowadza chaos w strukturze dokumentu HTML, co może prowadzić do problemów z interpretacją treści przez przeglądarki oraz wyszukiwarki. Natomiast umieszczanie ich w stopce witryny również nie ma sensu, ponieważ stopka jest miejscem przeznaczonym na informacje dot. praw autorskich, linki do polityki prywatności czy kontaktu, a nie na metadane, które są kluczowe dla SEO. Właściwe umiejscowienie znaczników meta w sekcji nagłówkowej pozwala na lepszą optymalizację strony, a także na poprawne indeksowanie przez roboty wyszukiwarek, co jest fundamentalne dla widoczności strony w internecie.
Pytanie 10

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}
A. znaczników z klasą przypisaną jako *.
B. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.
C. znaczników o identyfikatorze równym *.
D. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.
Wybór opcji dotyczącej całego kodu HTML jako formatowania domyślnego dla wszystkich elementów strony jest poprawny, ponieważ użycie selektora uniwersalnego * w CSS oznacza, że wszystkie dostępne elementy na stronie będą dziedziczyć określone style. W tym przypadku, zarówno font-family ustawiony na Tahoma, jak i kolor tekstu zmieniony na Teal, będą dotyczyły każdego elementu HTML, bez względu na jego typ. To podejście jest zgodne z zasadami stosowania stylów kaskadowych, gdzie style są aplikowane do elementów w sposób hierarchiczny, a selektor uniwersalny jest najogólniejszym z dostępnych. Przykładem zastosowania może być sytuacja, gdy chcemy ustawić jednolite formatowanie dla całej strony, co upraszcza proces projektowania i zapewnia spójność wizualną. Dobrą praktyką jest jednak używanie selektora uniwersalnego z umiarem, aby uniknąć nadmiernego obciążenia wydajności, szczególnie w większych dokumentach, gdzie precyzyjniejsze selektory mogą przynieść lepsze rezultaty.
Pytanie 11

Aby stworzyć układ strony z trzema kolumnami obok siebie, można wykorzystać styl CSS

Ilustracja do pytania
A. C
B. B
C. D
D. A
Poprawna odpowiedź A wykorzystuje właściwość float CSS ustawioną na left oraz szerokość width na 33 procent co pozwala na umieszczenie trzech kolumn obok siebie na stronie internetowej Float jest często używany do tworzenia układów wielokolumnowych gdyż pozwala na pływające rozmieszczenie elementów blokowych wewnątrz kontenera Dzięki ustawieniu szerokości na 33 procent zapewniamy że trzy kolumny będą mogły się zmieścić obok siebie w jednym rzędzie w ramach dostępnej szerokości kontenera Jest to efektywne podejście w przypadku responsywnych projektów gdzie nie zawsze znamy dokładną szerokość dostępnej przestrzeni Floating jest klasycznym podejściem w CSS i chociaż nowe technologie jak flexbox czy grid oferują więcej możliwości jest wciąż powszechnie stosowany w wielu projektach szczególnie gdy chodzi o proste układy Dodatkowo float left jest zgodny z wielu przeglądarkami co zapewnia większą uniwersalność kodu Przy projektowaniu stron zawsze warto pamiętać o dodaniu clearfix lub overflow hidden do rodzica elementów pływających aby uniknąć problemów z zawijaniem się kontenera wokół elementów pływających
Pytanie 12

W HTML, aby dodać obrazek z tekstem umieszczonym pośrodku obrazka, konieczne jest użycie znacznika

A. <img src="obrazek.png" alt="obraz2" align="middle"> tekst
B. <img src="obrazek.png" alt="obraz4"> tekst
C. <img src="obrazek.png" alt="obraz1" hspace="30px"> tekst
D. <img src="obrazek.png" alt="obraz3" height="50%"> tekst
Odpowiedzi, które nie są poprawne, zawierają różne koncepcje i podejścia, które nie spełniają wymogów wyśrodkowania tekstu wokół obrazka. Na przykład, użycie <img src="obrazek.png" alt="obraz3" height="50%"> tekst jest niewłaściwe, ponieważ atrybut height nie wpływa na położenie tekstu w stosunku do obrazka. W rzeczywistości, atrybut ten jedynie zmienia wysokość obrazka, co nie ma związku z umiejscowieniem tekstu. To podejście może prowadzić do błędnych wniosków, że zmiana wymiarów obrazka automatycznie wpływa na układ tekstu, co jest mylne. Z kolei, <img src="obrazek.png" alt="obraz4"> tekst nie zawiera żadnych atrybutów, które mogłyby zdefiniować położenie tekstu, co sprawia, że tekst będzie po prostu wyświetlany obok obrazka, bez jakiejkolwiek kontroli nad jego wyrównaniem. W kontekście nowoczesnych standardów HTML5, brak zastosowania CSS do stylizacji układu nie tylko obniża estetykę strony, ale również nie spełnia oczekiwań dotyczących dostępności. Wiele aplikacji internetowych i stron korzysta z CSS do precyzyjnego zarządzania położeniem elementów, co jest zgodne z zasadami responsywnego projektowania. Użycie atrybutu align z wartością middle w odpowiedzi 2 jest najodpowiedniejszym sposobem na zapewnienie poprawnego wyśrodkowania tekstu, co jest kluczowe w projektowaniu stron internetowych, gdzie zarówno estetyka, jak i funkcjonalność mają duże znaczenie.
Pytanie 13

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }
A. każdemu odnośnikowi niezależnie od aktualnego stanu.
B. wszystkim odnośnikom odwiedzonym.
C. wszystkim odnośnikom nieodwiedzonym.
D. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.
Wybrane przez Ciebie odpowiedzi sugerują, że nie do końca rozumiesz działanie pseudoklas w CSS. Pseudoklasa :hover jest stosowana do elementów, na które najechał kursor myszy, a nie do wszystkich odnośników niezależnie od ich stanu. Przypisanie stylu do 'wszystkich odnośników odwiedzonych' lub 'wszystkich odnośników nieodwiedzonych' wymagałoby użycia pseudoklas :visited i :link. Pseudoklasy te służą do stylizacji odnośników w zależności od tego, czy użytkownik już na nie kiedyś kliknął, czy nie. Ważne jest zrozumienie, że różne pseudoklasy służą do stylizacji elementów w różnych stanach i kontekstach. W praktyce, zastosowanie niewłaściwej pseudoklasy może prowadzić do nieoczekiwanych wyników i błędów w działaniu strony. Dlatego zawsze warto dokładnie zrozumieć, jakie efekty przynosi użycie danej pseudoklasy.
Pytanie 14

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

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

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

A. atrybutu p [first-letter]
B. dziecka p + first-letter
C. pseudoelementu p::first-letter
D. klasy 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 16

W CSS zapisano stylizację ```css p > i {color: blue} ``` oznacza to, że kolorem niebieskim zostanie wyświetlony

A. wszystkie teksty nagłówków, niezależnie od formatowania
B. pochylony tekst akapitu
C. cały tekst akapitu, niezależnie od jego stylizacji
D. pogrubiony tekst akapitu
Wszystkie inne odpowiedzi są niepoprawne z kilku powodów. Izolowanie tekstu paragrafu jako całości w odpowiedzi sugeruje, że cała zawartość elementu <p> byłaby stylizowana na niebiesko, co jest błędne, ponieważ selektor CSS wskazuje na tylko konkretne elementy wewnątrz <p>, a nie na całe jego wnętrze. Tekst kursywy, oznaczony przez <i>, to specyficzna część tekstu, która jest stylizowana, a nie cały tekst paragrafu. Pogrubiony tekst, oznaczony przez <b>, również pozostanie w swoim standardowym stylu, ponieważ nie jest objęty regułą CSS. Druga odpowiedź, dotycząca całego tekstu nagłówków, również jest niepoprawna, ponieważ nagłówki, takie jak <h1>, <h2> itd., nie są w ogóle związane z tym selektorem CSS, który odnosi się wyłącznie do paragraficznych elementów <p> i ich dzieci. Wreszcie, idea, że pogrubiony tekst paragrafu miałby być zmieniony na niebieski, również nie znajduje potwierdzenia w definicji selektora. Selektor CSS, jak w tym przypadku, działa na podstawie hierarchii i struktury dokumentu, a nie na ogólnym formacie tekstu. Wyjaśniając te kwestie, możemy zrozumieć, jak działa kaskadowe stylowanie i jak precyzyjne są selektory w CSS, co jest kluczowe dla efektywnego projektowania stron internetowych.
Pytanie 17

Który z wymienionych systemów nie należy do systemów CMS?

A. WordPress
B. Joomla!
C. Adobe Flash
D. Drupal
Adobe Flash to platforma do tworzenia animacji oraz interaktywnych aplikacji internetowych, a nie system zarządzania treścią (CMS). CMS to oprogramowanie, które umożliwia użytkownikom łatwe tworzenie, zarządzanie i publikowanie treści na stronach internetowych bez potrzeby znajomości języków programowania. Flash, stworzony przez firmę Adobe, był wykorzystywany głównie do animacji, gier i aplikacji multimedialnych w sieci, ale nie oferował funkcji typowych dla systemów CMS, takich jak zarządzanie bazą danych, szeregowanie treści czy obsługa użytkowników. Przykłady popularnych CMS-ów to WordPress, który dominuje wśród blogów i prostych stron internetowych, Joomla! znany z elastyczności i szerokich możliwości, oraz Drupal, który zapewnia zaawansowane funkcje dla większych i bardziej skomplikowanych projektów. Użytkownicy mogą łatwo edytować treści, zmieniać układ strony, dodawać nowe funkcjonalności poprzez wtyczki i modyfikować szablony bez potrzeby kodowania, co jest głównym powodem, dla którego CMS-y stały się tak popularne wśród osób nieposiadających umiejętności programistycznych.
Pytanie 18

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. polskich znaków, takich jak: ś, ć, ń, ó, ą
B. specjalnych znaków przeznaczonych dla języka kodu strony
C. symboli matematycznych
D. znaków zarezerwowanych dla języka opisu strony
Wybór znaków matematycznych jako celu kodowania w standardzie ISO-8859-2 jest błędny, ponieważ ten standard nie koncentruje się na symbolach matematycznych, a raczej na literach i znakach typowych dla języków łacińskich, w tym polskiego. Mylne jest również stwierdzenie, że ISO-8859-2 jest używane do wyświetlania znaków specjalnych dla języka kodu strony, ponieważ te znaki są ogólnie obsługiwane przez różne standardy kodowania, w tym UTF-8, a ich obecność w ISO-8859-2 jest ograniczona. W przypadku znaków zarezerwowanych dla języka opisu strony, takich jak HTML, ich interpretacja nie zależy od konkretnego kodowania, lecz od zgodności z określonymi standardami HTML i CSS. Warto zwrócić uwagę, że wiele osób zapomina o różnicy między kodowaniem a samym językiem programowania; kodowanie dotyczy sposobu reprezentacji znaków, podczas gdy języki programowania definiują logikę oraz składnię. Często stosowanym błędem jest założenie, że każda strona internetowa musi wykorzystywać ISO-8859-2, co nie jest prawdą, zwłaszcza w dobie globalizacji i różnorodności językowej, gdzie coraz powszechniejsze staje się kodowanie UTF-8, które jest bardziej elastyczne i obsługuje szerszy zakres znaków.
Pytanie 19

Czy przedstawione w języku CSS ustawienia czcionki będą dotyczyć dla ```* { font-family: Tahoma; color: Teal; }```?

A. całego dokumentu HTML, jako domyślne formatowanie dla wszystkich elementów strony
B. znaczników o id równym *
C. znaczników z klasą przypisaną równą *
D. całego dokumentu HTML, niezależnie od późniejszych reguł CSS
Właściwość CSS zastosowana w podanym kodzie dotyczy wszystkich elementów HTML na stronie, ponieważ użycie selektora * oznacza, że formatowanie będzie miało zastosowanie do każdego elementu, niezależnie od jego typu. Oznacza to, że czcionka Tahoma oraz kolor Teal będą domyślnie stosowane do tekstu we wszystkich znacznikach HTML. Tego rodzaju podejście jest zgodne z dobrymi praktykami w projektowaniu stron, ponieważ pozwala na jednolite formatowanie bez konieczności stylizowania każdego elementu z osobna. Przykładem zastosowania może być stworzenie spójnego wyglądu strony, gdzie wszystkie nagłówki, akapity i inne teksty mają ten sam styl, co poprawia czytelność i estetykę. Dodatkowo, takie zastosowanie stylów jest efektywne, gdyż zmiana stylu w kontekście całej strony odbywa się poprzez edytowanie jednego miejsca w kodzie CSS, co oszczędza czas i zmniejsza ryzyko błędów.
Pytanie 20

Kolor zielony w skróconej notacji szesnastkowej można zapisać w CSS jako sekwencję

A. #0F0
B. #F00
C. #00F
D. #FFF
Pierwsza z niepoprawnych odpowiedzi to #F00, która reprezentuje kolor czerwony w notacji szesnastkowej. W tej notacji, kanał czerwony ma maksymalną wartość (FF), podczas gdy kanały zielony i niebieski są ustawione na 0. To sprawia, że każdy element stylizowany tym kolorem będzie miał intensywny odcień czerwonego, co jest całkowicie sprzeczne z definicją koloru zielonego. Kolejna niepoprawna odpowiedź to #00F, która przedstawia kolor niebieski. W tym przypadku kanał niebieski ma maksymalną wartość, a kanały czerwony i zielony są ustawione na 0. Ta kombinacja skutkuje ciemnym niebieskim odcieniem, czym także nie można nazwać koloru zielonego. Ostatnia niepoprawna odpowiedź to #FFF, która reprezentuje kolor biały, a nie zielony. W tym przypadku wszystkie trzy kanały (czerwony, zielony, niebieski) mają maksymalne wartości, co skutkuje brakiem koloru dominującego i efektem białym. Każda z tych wartości w notacji szesnastkowej jest istotna dla zrozumienia, jak kolory są definiowane w CSS i jak można nimi manipulować, jednak żadna z tych odpowiedzi nie odpowiada na pytanie o kolor zielony.
Pytanie 21

W języku CSS wprowadzono poniższe formatowanie:

p > i { color: blue; }
Oznacza to, że tekst w kolorze niebieskim będzie zapisany:
A. pogrubiony tekst akapitu
B. cały tekst akapitu, bez względu na jego formatowanie
C. cały tekst nagłówków, bez względu na ich formatowanie
D. pochylony tekst akapitu
W przypadku zrozumienia reguł CSS ważne jest, aby wiedzieć, jak różne selektory wpływają na wygląd elementów na stronie internetowej. Selekcja całego tekstu paragrafu niezależnie od jego formatowania wymagałaby użycia selektora p bezpośrednio, nie uwzględniając specyficznych potomków takich jak i. Pogrubiony tekst paragrafu jest zazwyczaj implementowany za pomocą tagu b lub strong, a nie i, który zgodnie z HTML jest przeznaczony dla tekstu pochyłego. Dlatego, aby stylizować pogrubiony tekst na niebiesko, należałoby użyć selektora p > b lub p > strong w zależności od użytego tagu. Jeśli chodzi o nagłówki, czyli elementy h1 h2 itd. ich stylizacja wymagałaby użycia selektorów odnoszących się bezpośrednio do tych elementów np. h1 {color: blue;} jeśli chcielibyśmy zmienić kolor całego nagłówka niezależnie od formatowania. Zrozumienie tych zasad pozwala tworzyć bardziej precyzyjne i czytelne style CSS. Typowym błędem jest mylenie selektorów kontekstowych z innymi typami selektorów co prowadzi do nieoczekiwanych wyników w wyglądzie strony. Taka wiedza jest fundamentalna w profesjonalnym projektowaniu stron internetowych i pozwala na lepszą kontrolę wizualną oraz semantyczną nad wybranymi elementami w strukturze dokumentu HTML co jest kluczowe w nowoczesnym web designie.
Pytanie 22

Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?

A. </br/>
B. <br/>
C. </ br>
D. <br/>
Zapis znacznika </ br> jest niepoprawny, ponieważ nie można w ten sposób zamknąć znacznika, który nie ma zawartości. W XHTML wszystkie tagi muszą być poprawnie sformatowane, a takie umieszczenie spacji w znaczniku zamknięcia oraz użycie nieodpowiedniego formatu są całkowicie niezgodne z wymaganiami standardów. Kolejną niepoprawną koncepcją jest użycie </br/> - chociaż syntaktyczna forma jest bliska poprawnej, znaczniki otwierające i zamykające muszą mieć odpowiednie konteksty. W przypadku znaczników samozamykających się, takich jak <br/>, nie ma potrzeby umieszczania pary znaczników, ponieważ ich funkcjonalność polega na wstawieniu łamania linii, a nie na wytwarzaniu dodatkowego bloku. Ostatnią z wymienionych odpowiedzi, <br>, również nie jest zgodna z odpowiednim formatowaniem XHTML, ponieważ brakuje ukośnika, co czyni go niepoprawnym w kontekście stricte przestrzegania standardu. Podstawowym błędem w myśleniu, który prowadzi do tych niepoprawnych wniosków, jest niewłaściwe zrozumienie zasady samozamykania znaczników oraz ich roli w strukturze dokumentu HTML. Ignorowanie zasadności i standardów tworzenia HTML prowadzi do wielu problemów z interpretacją kodu przez różne środowiska oraz przeglądarki, co wpływa na ostateczną jakość i dostępność stron internetowych.
Pytanie 23

Walidacja strony internetowej polega na

A. umieszczaniu treści w sieci
B. sprawdzeniu jej w celu usunięcia błędów
C. reklamowaniu strony
D. zestawie działań mających na celu zwiększenie liczby odwiedzin
Wiele osób myli pojęcie walidacji strony internetowej z innymi procesami związanymi z zarządzaniem stroną, co prowadzi do nieporozumień. Zwiększanie oglądalności to skomplikowany proces, który obejmuje działania marketingowe, takie jak SEO czy kampanie reklamowe, ale nie ma nic wspólnego z samą walidacją. Publikowanie w sieci wiąże się z umieszczaniem treści lub kodu na serwerze, co jest etapem wdrażania, a nie weryfikacji. Promocja strony to działania mające na celu przyciągnięcie użytkowników, które są równie istotne jak walidacja, lecz z zupełnie innej perspektywy. Walidacja to proces, który koncentruje się na identyfikowaniu błędów technicznych, takich jak niepoprawne tagi HTML, błędy w CSS czy problemy z dostępnością. Ignorowanie tych aspektów może prowadzić do frustracji użytkowników, którzy mogą napotkać trudności w korzystaniu ze strony. Błędy te mogą również wpływać na ranking w wyszukiwarkach, co z kolei negatywnie wpłynie na oglądalność. Dlatego ważne jest, aby zrozumieć, że walidacja to nie tylko przeglądanie zawartości, ale systematyczne podejście do zapewnienia, że strona internetowa jest funkcjonalna, dostępna i zgodna z obowiązującymi standardami.
Pytanie 24

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. niedomknięcia znacznika img.
B. braku cudzysłowu.
C. powtórzenia nazwy pliku graficznego.
D. niedomknięcia znacznika br.
Wybrane odpowiedzi sugerują pewne nieporozumienia dotyczące zasad walidacji kodu HTML. Po pierwsze, znacznik <img> nie wymaga domknięcia, a więc niedomknięcie tego znacznika nie byłoby błędem walidacji. Jest to znacznik samozamykający się, służący do osadzania obrazów na stronie. Podobnie, nie ma wymogu domknięcia znacznika <br>, który jest również samozamykający się i służy do tworzenia linii przerwy. Ponadto, powtórzenie nazwy pliku graficznego w kodzie HTML nie jest błędem walidacji. Możliwe jest użycie tego samego obrazu w wielu miejscach na stronie, co wiązałoby się z wielokrotnym użyciem tej samej nazwy pliku. Kluczowe jest zrozumienie, że walidacja HTML polega głównie na sprawdzaniu poprawności składni, a nie na ocenie decyzji projektowych, takich jak wybór grafik. Zasadniczy błąd walidacji w analizowanym fragmencie kodu polega na braku cudzysłowu otaczającego atrybuty w znaczniku <img>, co jest wymogiem poprawnej walidacji kodu HTML.
Pytanie 25

<source src="plik.mp4" type="video/mp4">
Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:
A. <section> </section>
B. <video> </video>
C. <div> </div>
D. <embed> </embed>
W tym pytaniu kluczowe jest zrozumienie, że sam znacznik `<source>` nie osadza wideo na stronie, tylko dostarcza przeglądarce informacji o konkretnym pliku i jego typie. Rolę kontenera pełni inny element. Często uczniowie próbują „owijać” źródło wideo w różne ogólne znaczniki, takie jak `<div>` czy `<section>`, bo kojarzą je z budowaniem struktury strony. To jednak tylko znaczniki blokowe do organizowania layoutu i treści, nie mają one natywnej logiki odtwarzania multimediów. Jeśli włożymy `<source>` do `<div>` lub `<section>`, przeglądarka po prostu potraktuje to jako zwykły kod, który niczego nie odtwarza, bo brakuje elementu multimedialnego odpowiedzialnego za interpretację tego źródła. Innym skojarzeniem jest `<embed>`. Ten znacznik był (i bywa nadal) używany do osadzania zewnętrznych zasobów, np. animacji Flash, PDF-ów czy innych obiektów. W czasach HTML5 jego rola jest jednak ograniczona, a dla wideo i audio wprowadzono dedykowane elementy `<video>` i `<audio>`. Użycie `<embed>` do wideo jest możliwe, ale nie jest zgodne z nowoczesnymi standardami i pozbawia nas wielu zalet, takich jak spójne API, lepsza dostępność czy łatwiejsza kontrola stylów. Typowym błędem myślowym jest tu traktowanie każdego znacznika, który „coś osadza”, jako równoważnego. HTML5 mocno stawia na semantykę: `<video>` jasno mówi, że mamy do czynienia z treścią wideo, `<section>` – z logiczną sekcją dokumentu, `<div>` – z neutralnym kontenerem, a `<embed>` – z osadzonym zasobem o mniej precyzyjnym przeznaczeniu. Przeglądarka oczekuje, że `<source>` pojawi się wewnątrz elementu multimedialnego, czyli właśnie `<video>` lub `<audio>`. Z mojego doświadczenia wynika, że kiedy ktoś próbuje wkładać `<source>` w inne znaczniki, to najczęściej wynika to z mylenia struktury dokumentu (layoutu) z elementami odpowiedzialnymi za realne odtwarzanie treści. Dobra praktyka w nowoczesnym webdevie to korzystanie z elementów zgodnie z ich semantyką, dlatego do wideo zawsze używamy `<video>` jako kontenera, a `<source>` tylko jako definicji plików w środku.
Pytanie 26

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

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

Aby obraz wstawiony na stronę internetową mógł dostosować się automatycznie do wymiarów ekranu, na którym jest wyświetlany, konieczne jest

A. ustawienie jednego z jego wymiarów w pikselach
B. niezmienianie obu jego wymiarów za pomocą stylów CSS
C. ustawienie jego szerokości w wartościach procentowych
D. ustawienie obu jego rozmiarów w pikselach
Ustawienie wymiarów obrazu w pikselach ogranicza jego elastyczność, co prowadzi do nieidealnego wyświetlania na różnych urządzeniach. Obrazy o stałych wymiarach mogą nie zmieścić się na ekranach o mniejszych rozmiarach, co skutkuje koniecznością przewijania w poziomie lub zniekształceniem obrazu, gdy przeglądarka jest zmniejszana. Ponadto, ustawienie jednego z wymiarów w pikselach również nie rozwiązuje problemu responsywności, ponieważ drugi wymiar nadal będzie stały, co może prowadzić do nieproporcjonalnego wyświetlania. Nie modyfikowanie obu wymiarów stylami CSS neguje możliwości dostosowania obrazów do zmieniających się rozmiarów ekranów, co jest istotnym aspektem nowoczesnego web designu. Praktyczna implementacja responsywnych zdjęć wymaga przemyślenia koncepcji elastyczności, co obejmuje użycie CSS, aby zapewnić optymalne wyświetlanie obrazów na wszystkich urządzeniach. Użytkownicy powinni być świadomi, że dobrą praktyką jest stosowanie technik takich jak media queries oraz CSS Flexbox, co pozwala na precyzyjne dostosowywanie layoutu do wymagań urządzenia. Podsumowując, podejście to nie tylko wpływa na estetykę strony, ale również na jej funkcjonalność i dostępność, co jest kluczowe w obecnych czasach, gdy użytkownicy korzystają z szerokiej gamy urządzeń.
Pytanie 28

W HTML5 semantycznym znacznikiem, który służy do określenia dwóch sekcji widocznych po prawej stronie na rysunku, zawierających wiadomości oraz aktualności, jest

Ilustracja do pytania
A. &lt;nav&gt;
B. &lt;article&gt;
C. &lt;main&gt;
D. &lt;footer&gt;
Bardzo często osoby uczące się HTML5 mylą znaczniki semantyczne, szczególnie gdy chodzi o takie elementy jak <nav>, <main>, <footer> czy <article>. To w sumie zrozumiałe, bo na pierwszy rzut oka mogą się wydawać podobne, ale każdy z nich ma swoje konkretne zadanie. <nav> to sekcja nawigacyjna – zawiera odnośniki do innych części serwisu, więc zwykle stosuje się go do menu, bocznych pasków z linkami czy paneli nawigacyjnych. Umieszczenie w <nav> sekcji z wiadomościami czy aktualnościami to klasyczny przykład złego zrozumienia przeznaczenia tego elementu – w praktyce taka struktura zaburza logikę nawigacji i dostępność strony. <main> z kolei oznacza główną i unikalną treść dokumentu, tej, która jest najważniejsza dla danej podstrony. Jednak <main> używamy tylko raz na stronie – nie powinno się go powielać ani używać do oznaczania pojedynczych sekcji, takich jak wiadomości, bo to prowadzi do błędnej interpretacji przez wyszukiwarki i czytniki ekranowe. <footer> odpowiada za stopkę strony lub sekcji, czyli miejsce na informacje jak prawa autorskie, dane kontaktowe, linki do polityk czy podsumowania – wrzucenie tam wiadomości czy aktualności byłoby mocno nielogiczne. Wybierając niewłaściwy znacznik, można popełnić błąd, który potem utrudnia rozwój strony, jej pozycjonowanie czy poprawność dostępności. Najczęstszy błąd to kierowanie się wyglądem, a nie semantyką – a w HTML5 to właśnie semantyka daje najwięcej korzyści na dłuższą metę.
Pytanie 29

Strona internetowa została zaprezentowana w taki sposób:

Rozdział 1

tekst

Podrozdział 1.1

tekst

Podrozdział 1.2

Jakie są poprawne znaczniki do tego formatu?
A. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
B. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>
C. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
D. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
Stosowanie znaczników HTML w sposób niezgodny z ich przeznaczeniem prowadzi do poważnych problemów w kontekście SEO oraz dostępności. Przykładowo, użycie znacznika <big> w odpowiedzi, która nie zawiera żadnej strukturalnej informacji, nie jest zgodne z zasadami semantycznymi HTML. Znacznik <big> ma na celu jedynie zwiększenie rozmiaru czcionki, co nie wnosi wartości do struktury dokumentu ani nie określa hierarchii treści. Tego rodzaju podejście może wprowadzać w błąd osoby przeglądające stronę oraz algorytmy wyszukiwarek, które bazują na odpowiednio zdefiniowanej semantyce do oceny treści. Dodatkowo, pominięcie znaczników <p> w odpowiedziach spowoduje, że tekst stanie się trudniejszy do odczytania i zrozumienia. Tworzenie listy za pomocą znacznika <ul> może być w niektórych kontekstach użyteczne, jednak w tym przypadku nie pasuje do struktury, jaką określono w pytaniu. Struktura HTML powinna być przejrzysta i logiczna, aby ułatwić użytkownikom poruszanie się po stronie oraz wspierać indeksację treści przez wyszukiwarki. Niezrozumienie tych zasad często prowadzi do nieprawidłowego stosowania znaczników, co z kolei wpływa negatywnie na doświadczenia użytkownika oraz widoczność w wyszukiwarkach.
Pytanie 30

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 24-30 fps
B. 31-36 fps
C. 16-19 fps
D. 20-23 fps
Wybór wartości poniżej 24 fps, takich jak 20-23 fps czy 16-19 fps, na pewno nie zapewni płynności obrazu w filmie. Klatkaż 20-23 fps nie tylko nie osiąga standardów branżowych, ale również wprowadza widza w kłopotliwy stan, ponieważ takie niskie wartości skutkują widocznymi skokami między klatkami. Kiedy klatkaż spada poniżej 24 fps, efekt staje się zbliżony do stroboskopu, co może być bardzo nieprzyjemne dla widza. Na przykład, przy 16-19 fps widać wyraźnie, że ruchy są zbyt szarpane, co prowadzi do utraty immersji w filmie. Ponadto, niektóre produkcje telewizyjne mogą wykorzystywać wyższe klatkaże, aby uzyskać lepszą jakość obrazu, jednak wybór 24-30 fps pozostaje kluczowy w kontekście klasycznych filmów. W przemyśle filmowym kluczowe jest, aby zrozumieć, jak liczba klatek wpływa na postrzeganie obrazu przez widza i jak standardy ustalone przez organizacje takie jak SMPTE wpływają na techniki produkcji. Niewłaściwy klatkaż nie tylko wpłynie na estetykę filmu, ale również na jego odbiór przez publiczność, co czyni ten temat krytycznym dla każdego, kto chce zrozumieć sztukę filmową.
Pytanie 31

Aby strona internetowa była dostosowana do różnych urządzeń, należy między innymi określać

A. tylko znane fonty, takie jak Arial
B. wymiary obrazów w procentach
C. wymiary obrazów jedynie w pikselach
D. układ strony wyłącznie przy pomocy tabel
Różne podejścia do definiowania rozmiarów obrazów na stronach WWW mogą prowadzić do poważnych problemów z responsywnością. Używanie wyłącznie tabel do rozkładu strony to przestarzała metoda projektowania, która nie sprzyja elastyczności ani skalowalności layoutu. Tabele są statyczne i nie adaptują się do zmieniających się rozmiarów ekranów, co może powodować, że strona będzie wyglądać nieestetycznie na urządzeniach mobilnych. Z kolei definiowanie rozmiarów obrazów wyłącznie w pikselach ogranicza ich zdolność do dostosowywania się do różnych rozdzielczości. Przy stałych wartościach w pikselach obrazy mogą być zbyt małe na dużych ekranach lub zniekształcone na mniejszych urządzeniach, co negatywnie wpływa na użytkowanie. Ponadto, ograniczenie się do znanych czcionek, takich jak Arial, nie sprzyja różnorodności projektowej i może prowadzić do wizualnej monotonii strony. Współczesne praktyki projektowania zachęcają do korzystania z szerszej gamy czcionek oraz do technik takich jak @font-face, co pozwala na większą elastyczność estetyczną. Kluczowym błędem w myśleniu o responsywności jest brak zrozumienia, że wszystkie elementy strony powinny być traktowane w sposób dynamiczny i elastyczny, co jest podstawą nowoczesnego podejścia do tworzenia stron internetowych.
Pytanie 32

Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:

border: solid 1px;
border-color: red blue green yellow;
A. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty
B. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty
C. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego
D. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty
Podana odpowiedź jest prawidłowa, ponieważ opisuje właściwe przypisanie kolorów do krawędzi obramowania według standardów CSS. W zapisie border-color: red blue green yellow; kolory są przypisywane zgodnie z kierunkiem wskazówek zegara, zaczynając od góry. Zatem krawędź górna jest koloru czerwonego, prawa koloru niebieskiego, dolna zielonego, a lewa żółtego. Jest to zgodne z praktykami projektowania stron internetowych, gdzie priorytetem jest zrozumiała i spójna struktura kodu. W praktyce takie zrozumienie pozwala na efektywne tworzenie stylów w CSS, przyspieszając proces tworzenia responsywnych i estetycznych interfejsów użytkownika. Wiedza o przypisywaniu kolorów do krawędzi jest przydatna w tworzeniu zaawansowanych układów graficznych, pozwalając na lepsze wykorzystanie przestrzeni wizualnej i wprowadzenie unikalnych elementów stylistycznych. Takie podejście do CSS jest zgodne z nowoczesnymi standardami projektowania, które kładą nacisk na czytelność i efektywność kodu oraz zapewniają lepsze doświadczenia użytkownika.
Pytanie 33

Wymiary:4272x2848px
Rozdzielczość:72 dpi
Format:JPG

W ramce przedstawiono właściwości pliku graficznego. W celu optymalizacji czasu ładowania rysunku na stronę WWW należy
A. zmniejszyć rozmiary obrazu
B. dostosować proporcje szerokości do wysokości
C. zmienić format grafiki na CDR
D. zwiększyć rozdzielczość
Zwiększenie rozdzielczości nie jest zalecanym rozwiązaniem w kontekście optymalizacji czasu ładowania grafiki. Wyższa rozdzielczość zwiększa liczbę pikseli w obrazie, co skutkuje większym rozmiarem pliku, co w efekcie spowalnia czas ładowania strony. Dla obrazów przeznaczonych do wyświetlania w Internecie, standardowa rozdzielczość 72 dpi jest wystarczająca, a jej zwiększenie do 300 dpi lub więcej ma sens tylko w przypadku drukowania, gdzie jakość obrazu jest kluczowa. Zmiana formatu grafiki na CDR również nie jest odpowiednia w tym kontekście. CDR to format pliku stworzony przez program CorelDRAW, który jest stosunkowo niewłaściwy do publikacji w sieci. Pliki CDR są często większe od plików JPG i nie są szeroko wspierane przez przeglądarki internetowe. W związku z tym, ich użycie zamiast formatu JPG, który jest zoptymalizowany do szybkiego ładowania i wyświetlania w Internecie, stanowi nieefektywne podejście. Zmiana proporcji szerokości do wysokości również nie przynosi korzyści, ponieważ może prowadzić do zniekształcenia obrazu, co jest niepożądane z punktu widzenia estetyki i użyteczności. Dostosowanie proporcji może być istotne w przypadku określonych układów, jednak nie wpływa bezpośrednio na optymalizację rozmiaru pliku ani czasu ładowania. Celem optymalizacji jest uzyskanie właściwego balansu między jakością a rozmiarem pliku, a zmiana wymiarów jest najskuteczniejszym sposobem na osiągnięcie tego celu.
Pytanie 34

Oznaczenie barwy w postaci #FF00E0 jest równoważne zapisowi

A. rgb(FF, 0, E0)
B. rgb(F, 0, E0)
C. rgb(255, 0, 224)
D. rgb(255, 0, 128)
Oznaczenie #FF00E0 to zapis koloru w systemie szesnastkowym (hex), bardzo typowym w CSS i ogólnie w tworzeniu interfejsów. Składa się ono z trzech par znaków: FF (czerwony), 00 (zielony), E0 (niebieski). Każda para to jedna składowa kanału RGB zapisana w systemie szesnastkowym, czyli w bazie 16. Zakres dla każdej składowej to od 00 do FF, co odpowiada wartościom dziesiętnym od 0 do 255. FF w systemie szesnastkowym to 15×16 + 15 = 255 w systemie dziesiętnym. 00 to po prostu 0. Natomiast E0 to 14×16 + 0 = 224. Dlatego zapis #FF00E0 jest równoważny rgb(255, 0, 224). To jest dokładnie ten sam kolor, tylko zapisany w innym formacie. W CSS możesz używać obu zapisów zamiennie: np. `color: #FF00E0;` oraz `color: rgb(255, 0, 224);` dadzą identyczny efekt w przeglądarce. W praktyce, przy projektowaniu stron i interfejsów, warto rozumieć oba zapisy, bo narzędzia graficzne (Photoshop, GIMP, Figma) często podają kolory w hex, a dokumentacja front-endowa i tutoriale bardzo często używają rgb() albo nawet rgba(). Dobra praktyka w branży jest taka, żeby umieć szybko w głowie lub z pomocą prostego kalkulatora przeliczyć wartości hex na dziesiętne, szczególnie przy drobnych korektach kolorów. Moim zdaniem świadomość, że hex to po prostu inna reprezentacja tych samych liczb 0–255, bardzo ułatwia później rozumienie gradientów, filtrów, a nawet pracy z kolorami w JavaScript, gdzie możesz programowo generować wartości rgb().
Pytanie 35

Jaki atrybut powinien zostać umieszczony w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby wskazać źródło cytatu?

A. cite
B. alt
C. src
D. href
Odpowiedzi 'src', 'alt' i 'href' są nieprawidłowe, ponieważ każdy z tych atrybutów pełni inną rolę w kontekście HTML. Atrybut 'src' jest wykorzystywany do określenia źródła dla elementów takich jak <img> czy <script>, a więc nie ma zastosowania w przypadku znacznika <blockquote>. Wybierając 'src', można pomylić cytat z obrazem lub skryptem, co prowadzi do błędnej interpretacji struktury dokumentu. Atrybut 'alt' jest używany do dostarczania alternatywnego tekstu dla obrazów, co również nie ma zastosowania w kontekście cytatów. Użytkownik, wybierając odpowiedź 'alt', może błędnie sądzić, że alternatywny tekst jest istotny dla przedstawienia źródła cytatu, co jest mylne. Natomiast 'href', który jest stosowany w elementach <a> do określenia adresu URL, również nie ma zastosowania w kontekście cytatów. Zastosowanie 'href' w znaczeniu cytatu mogłoby prowadzić do zamieszania związane z funkcją nawigacyjną i semantyką dokumentu. Każda z tych odpowiedzi ilustruje typowe nieporozumienia dotyczące roli atrybutów HTML, co pokazuje, jak ważne jest zrozumienie właściwych kontekstów, w których atrybuty powinny być używane. Prawidłowe zrozumienie znaczenia atrybutu 'cite' jest kluczowe dla tworzenia semantycznych i czytelnych dokumentów HTML, które poprawnie odzwierciedlają intencje autora oraz są zgodne z najlepszymi praktykami webowymi.
Pytanie 36

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr:active { background-color: Pink; }
B. tr { background-color: Pink; }
C. td, th { background-color: Pink; }
D. tr:hover { background-color: Pink; }
W tym zadaniu chodzi o zrozumienie, jak działają selektory CSS oraz pseudo-klasy odpowiedzialne za interakcję z użytkownikiem. Jeśli efekt ma pojawiać się tylko wtedy, gdy użytkownik najedzie myszką na wiersz tabeli, to zwykłe ustawienie background-color bez pseudo-klasy nie spełni tego warunku. Deklaracja tr { background-color: Pink; } oznaczałaby, że wszystkie wiersze tabeli są cały czas różowe, niezależnie od tego, czy ktoś na nie najedzie, czy nie. To jest po prostu styl statyczny, bez żadnej reakcji na zdarzenia. Podobnie zapis td, th { background-color: Pink; } ustawia tło dla wszystkich komórek tabeli (zarówno nagłówkowych th, jak i zwykłych td) w sposób stały. Moim zdaniem to dość częsty błąd: ktoś kojarzy tabelę z komórkami i intuicyjnie styluje td/th, ale zapomina, że w pytaniu chodzi o efekt dynamiczny „po najechaniu”. W rezultacie otrzymujemy tabelę pokolorowaną na stałe, bez jakiejkolwiek interakcji, co jest sprzeczne z założeniem zadania i z typowym zachowaniem tabel w nowoczesnych interfejsach. Ciekawsza jest kwestia selektora tr:active { background-color: Pink; }. Pseudo-klasa :active oznacza element w momencie „aktywacji”, czyli najczęściej w chwili klikania (przytrzymania przycisku myszy). Efekt trwa bardzo krótko, tylko w czasie samego kliknięcia. To zupełnie inny scenariusz niż wygodne podświetlenie wiersza, które ma się utrzymywać, dopóki kursor jest nad elementem. Użycie :active prowadzi do efektu, który miga na ułamek sekundy i z punktu widzenia ergonomii jest praktycznie bezużyteczny w kontekście podświetlania wierszy. Typowy błąd myślowy przy takich pytaniach polega na myleniu różnych pseudo-klas: :hover, :active, :focus. W webdevie przyjęło się, że :hover służy do reakcji na najechanie myszką, :active do krótkiej reakcji na kliknięcie, a :focus do zaznaczenia elementu, który ma aktualnie fokus klawiatury. Standardy CSS i dobre praktyki projektowania interfejsów jasno wskazują, że do efektu „podświetl wiersz, gdy nad nim jestem” należy użyć właśnie :hover na odpowiednim elemencie, czyli w tym przypadku tr. Wszystkie pozostałe odpowiedzi ignorują tę zasadę albo stosują nie tę pseudo-klasę, co trzeba, przez co nie odzwierciedlają poprawnie zachowania pokazanego w materiale wideo.
Pytanie 37

Definicja stylu przedstawiona w języku CSS dotyczy odnośnika, który

Ilustracja do pytania
A. ma wskaźnik myszy ustawiony nad nim
B. jeszcze nie był odwiedzany
C. posiada niepoprawny adres URL
D. był już odwiedzany
Podczas analizy CSS ważne jest rozumienie, jak działają pseudo-klasy, które umożliwiają stylizację elementów w określonych stanach. Pseudo-klasa :hover odpowiada za stan, gdy kursor myszy znajduje się nad elementem, co pozwala na dynamiczne zmiany wyglądu, takie jak podświetlenie elementu. Jest to często używane do interaktywnych efektów w interfejsach użytkownika. Tymczasem :link dotyczy linków, które jeszcze nie zostały odwiedzone przez użytkownika. Wprawdzie pozwala to na odróżnienie ich od odwiedzonych linków, ale stylizacja :link nie może zmienić się po kliknięciu, co jest kluczowe dla zachowania dostępności. Błędny adres URL nie jest związany z żadną z tych pseudo-klas i nie można go zidentyfikować ani zmodyfikować za pomocą CSS, ponieważ zarządzanie adresami URL odbywa się na poziomie HTML i JavaScript. W kontekście tworzenia stron internetowych zrozumienie tych różnic jest kluczowe, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcję z treścią. Błędy w rozumieniu tych mechanizmów prowadzą do niepoprawnej nawigacji i mogą negatywnie wpływać na doświadczenie użytkownika, co jest sprzeczne z dobrymi praktykami w projektowaniu interfejsów i UX. Ważne jest, aby projektować strony zgodnie ze standardami, które umożliwiają intuicyjne korzystanie i zapewniają, że użytkownicy łatwo mogą rozpoznać odwiedzone i nieodwiedzone linki, co jest kluczowe dla ich doświadczenia i nawigacji.
Pytanie 38

<form>
  <input type="email" id="addr" required>
  <input type="submit" value="Zapisz">
</form>
Na podstawie przedstawionego kodu formularza HTML można powiedzieć, że pole edycyjne:
A. nie powinno zawierać znaków numerycznych.
B. wymaga wpisania jedynie znaków alfanumerycznych.
C. może być puste.
D. nie może być puste i wymaga wpisania tekstu ze znakiem @.
Kod formularza, który został pokazany w pytaniu, wykorzystuje dwa mechanizmy walidacji wbudowane w HTML5: typ pola ustawiony na email oraz atrybut required. Jeśli się je dobrze rozumie, to łatwo odrzucić wszystkie błędne interpretacje. Spójrzmy na to bardziej od strony tego, co faktycznie robi przeglądarka. Pomysł, że pole może być puste, jest sprzeczny z działaniem atrybutu required. Ten atrybut wprost oznacza, że użytkownik musi coś wpisać. Jeżeli zostawi pole puste i kliknie przycisk „Zapisz”, przeglądarka zablokuje wysłanie formularza i wyświetli swój komunikat, np. „Wypełnij to pole”. To nie jest kwestia „dobrej praktyki”, tylko twardej reguły zapisanej w specyfikacji HTML. W praktyce to bardzo przydatne, bo od razu na froncie wymusza uzupełnienie danych. Stwierdzenie, że pole nie powinno zawierać znaków numerycznych, też jest błędne. Pole typu email dopuszcza cyfry, bo wiele poprawnych adresów e‑mail zawiera liczby, np. [email protected]. Przeglądarka nie ma żadnego zakazu cyfr w takim polu, patrzy tylko na ogólny format adresu. Nieprawidłowy jest też pogląd, że wymagane są „jedynie znaki alfanumeryczne”. Adres e‑mail zawiera zwykle kropki, znak @, czasem myślniki, podkreślenia i inne dopuszczalne znaki. Gdyby przeglądarka pozwalała tylko na litery i cyfry, większość realnych adresów zostałaby odrzucona. Walidacja typu email jest skoncentrowana na strukturze (część przed @, znak @, część po @), a nie na tak prymitywnym ograniczeniu jak „tylko litery i cyfry”. Typowy błąd myślowy przy takich pytaniach to mylenie różnych poziomów walidacji: jedni zakładają, że HTML w ogóle nie sprawdza formatu, inni z kolei wyobrażają sobie zbyt restrykcyjne reguły, które w praktyce by uniemożliwiły wpisanie normalnego adresu. Dobrym nawykiem jest patrzenie na to, co gwarantuje przeglądarka: w tym wypadku wymagane jest, żeby pole nie było puste (required) oraz żeby wpisany tekst przypominał adres e‑mail, czyli zawierał m.in. znak @ w odpowiednim miejscu. Wszystkie inne interpretacje wychodzą poza to, co naprawdę wynika z kodu formularza.
Pytanie 39

Język HTML posiada nagłówki, które służą do tworzenia hierarchii treści. Nagłówki te występują tylko w zakresie

A. h1 – h10
B. h1 – h8
C. h1 – h6
D. h1 – h4
Odpowiedź h1 – h6 jest poprawna, ponieważ język HTML udostępnia sześć poziomów nagłówków, od h1 do h6, które służą do tworzenia hierarchii treści na stronie internetowej. Nagłówek h1 jest najważniejszy i powinien być używany do oznaczenia głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 wskazują na kolejne poziomy nagłówków, które pomagają w organizacji treści. Przykładowo, nagłówek h2 może być używany do sekcji, natomiast h3 może oznaczać podsekcje w ramach danej sekcji. Używanie nagłówków w ten sposób nie tylko poprawia czytelność i zrozumienie treści przez użytkowników, ale także pozytywnie wpływa na SEO (optymalizację dla wyszukiwarek). Warto pamiętać, że zgodnie z najlepszymi praktykami, powinno się unikać pomijania poziomów nagłówków, co zapewnia logiczną strukturę treści i ułatwia indeksację przez roboty wyszukiwarek.
Pytanie 40

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość

Ilustracja do pytania
A. float: left dla wszystkich bloków.
B. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.
C. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.
D. clear: both dla wszystkich bloków.
Twoja odpowiedź jest poprawna. Bloki 1, 2, 3 i 4 powinny być ustawione obok siebie na stronie. Możemy tego dokonać, stosując dla nich właściwość 'float: left' w CSS, która sprawia, że elementy są wyświetlane po lewej stronie swojego kontenera. Często stosuje się tę technikę przy projektowaniu layoutów stron internetowych, umożliwiając rozmieszczenie bloków w jednym rzędzie. Blok 5 powinien natomiast znajdować się poniżej tych bloków, co osiągniemy stosując właściwość 'clear: both'. Ta właściwość zapewnia, że element nie będzie obok żadnego z poprzednich bloków, nawet jeśli mają one ustawiony float. Jest to szczególnie przydatne w sytuacjach, gdy chcemy, aby pewien element (np. stopka strony) był wyświetlany poniżej innych bloków, niezależnie od ich położenia czy szerokości. W praktyce, prawidłowe zastosowanie tych dwóch właściwości jest kluczowe dla tworzenia responsywnych i atrakcyjnych layoutów stron.
Rozpocznij nowy egzamin
Powrót do strony głównej