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:13
Data zakończenia: 15 czerwca 2026 10:06

Egzamin zdany!

Wynik: 28/40 punktów (70,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Poniżej przedstawiono fragment kodu języka HTML. Jest on definicją listy:

<ol>
   <li>punkt 1</li>    <li>punkt 2</li>
   <ul>
     <li>podpunkt1</li>
     <ul>    <li>podpunkt2</li>  <li>podpunkt3</li>  </ul>
   </ul>
   <li>punkt3</li>
 </ol>

punkt 1
punkt 2
- podpunkt1
- podpunkt2
- podpunkt3
punkt3

punkt 1
punkt 2
punkt3
- podpunkt1
- podpunkt2
- podpunkt3

punkt 1
punkt 2
- podpunkt1
  - podpunkt2
  - podpunkt3
punkt3

punkt 1
punkt 2
1. podpunkt1
  - podpunkt2
  - podpunkt3
punkt3

A. C.

B. B.

C. D.

D. A.

Twoja odpowiedź niestety nie była prawidłowa. Kluczową częścią zadania była interpretacja struktury kodu HTML prezentującej listę numerowaną (<ol>) z trzema elementami listy (<li>). W szczególności, zwróć uwagę na to, że w drugim elemencie listy znajduje się zagnieżdżona lista nieuporządkowana (<ul>) z trzema podpunktami. Fakt, że podpunkty są oznaczone kropkami, jest charakterystyczny dla listy nieuporządkowanej, co sugerowało, że prawidłową odpowiedzią jest C. W przypadku innych odpowiedzi, nie odzwierciedlały one prawidłowo struktury przedstawionego kodu, co mogło wynikać z niezrozumienia znaczenia poszczególnych tagów HTML. Pamiętaj, że w HTML istotne jest zrozumienie, jak tagi są zagnieżdżone w sobie, tworząc strukturę strony. Przy dalszej nauce zwracaj uwagę na to, jak poszczególne elementy HTML są ze sobą powiązane.

Pytanie 2

Która z komórek tabeli została sformatowana przedstawionym stylem CSS zakładając, że pozostałe własności przyjmują wartości domyślne?

td {
  border: 1px solid black;
  padding: 15px;
  height: 40px;
  vertical-align: bottom;
}

dane w tabeli		dane w tabeli		dane w tabeli		dane w tabeli
Komórka 1		Komórka 2		Komórka 3		Komórka 4

A. Komórka 3.

B. Komórka 1.

C. Komórka 4.

D. Komórka 2.

Gratulacje, to jest prawidłowa odpowiedź! Styl CSS, który został podany, określa, że komórka tabeli ma obramowanie o grubości 1px i kolorze czarnym, wewnętrzny margines (padding) o wielkości 15px, wysokość 40px oraz wyrównanie tekstu do dołu (vertical-align: bottom). Komórka 3. jest jedyną, która spełnia te kryteria - tekst jest wyrównany do dołu, a komórka ma widoczne obramowanie i odpowiednią wysokość. Formatowanie CSS jest kluczowym aspektem projektowania stron internetowych, które pozwalają na personalizację wyglądu elementów na stronie. Kiedy formatujesz komórkę tabeli w CSS, musisz zwrócić uwagę na szczegóły, takie jak wysokość, wewnętrzny margines, narożniki i wyrównanie tekstu. Wszystko to wpływa na ostateczny wygląd i doświadczenie użytkownika na stronie. Pamiętaj, że praktyka jest kluczem do zrozumienia, jak te elementy razem pracują, dlatego zawsze warto eksperymentować z różnymi ustawieniami.

Pytanie 3

Wskaż styl CSS za pomocą, którego uzyskano przedstawiony efekt

Styl 1.
img {
  width: 100px;
  border-radius: 10%;
}

Styl 2.
img {
  width: 100px;
  border-radius: 50px;
}

Styl 3.
img {
  width: 100px;
  border: 50% green;
}

Styl 4.
img {
  width: 100px;
  shape: circle;
}

A. Styl 1.

B. Styl 3.

C. Styl 4.

D. Styl 2.

Niestety, wybrałeś niepoprawną odpowiedź. Poprawną odpowiedzią jest 'Styl 2.', który wykorzystuje właściwość CSS border-radius z wartością 50px do zaokrąglania rogów obrazka. Zobaczmy, dlaczego pozostałe style są niepoprawne. 'Styl 1.' ma za małą wartość zaokrąglenia, co nie daje oczekiwanego efektu. Właściwość border-radius musi mieć odpowiednią wartość, aby uzyskać pożądane zaokrąglenie. 'Styl 3.' zawiera niepoprawną wartość, a mianowicie kolor. Kolor nie jest właściwą wartością dla border-radius, co pokazuje, jak ważne jest zrozumienie, jakie wartości są akceptowane dla różnych właściwości CSS. 'Styl 4.' używa właściwości shape, która nie istnieje w CSS. To jest błąd typowy dla osób, które nie są jeszcze pewne, które właściwości są dostępne w CSS. Jest to jasnym przykładem, dlaczego nauka i praktyka CSS są tak ważne do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 4

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

A. Obrazek C

B. Obrazek A

C. Obrazek D

D. Obrazek B

Prawidłowa odpowiedź to C ponieważ atrybut rowspan="2" w komórce oznacza że komórka ta zajmuje miejsce w dwóch wierszach. W kodzie HTML mamy tabelę z dwoma wierszami. W pierwszym wierszu znajdują się dwie komórki pierwsza z tekstem 'pierwszy' ma ustawiony rowspan na 2 co sprawia że zajmuje miejsce w obu wierszach tabeli. Druga komórka w pierwszym wierszu zawiera tekst 'drugi'. W drugim wierszu znajduje się jedna komórka z tekstem 'trzeci'. Taki układ powoduje że komórka z 'pierwszy' rozciąga się na wysokość dwóch wierszy a pozostałe komórki 'drugi' i 'trzeci' są obok siebie w pierwszym i drugim wierszu obok tej rozciągniętej komórki. Zastosowanie atrybutu rowspan to popularna technika w tworzeniu złożonych układów tabeli i pozwala na efektywne wykorzystanie przestrzeni układu. Jest to dobra praktyka stosowana w celu zachowania czytelności danych w tabelach na stronach internetowych a także pomagająca w poprawnym renderowaniu danych w czytnikach ekranu co wspiera dostępność strony WWW.

Pytanie 5

Wskaźnik HTML, który umożliwia oznaczenie tekstu jako błędnego lub nieodpowiedniego poprzez jego przekreślenie, to jaki?

A. <s> </s>

B. <b> </b>

C. <u> </u>

D. <em> </em>

Element <s> w HTML służy do oznaczania tekstu jako nieaktualnego, błędnego albo już nieobowiązującego poprzez jego przekreślenie. Przeglądarka domyślnie renderuje taki fragment z poziomą linią przez środek tekstu. W praktyce używa się go np. przy cenach promocyjnych: <p>Stara cena: <s>199 zł</s> Nowa cena: 149 zł</p> albo przy korektach treści, kiedy chcemy pokazać, że coś zostało zmienione, ale wciąż widoczne jest, co było wcześniej. Warto wiedzieć, że historycznie do podobnych celów używano też <strike>, ale ten znacznik jest przestarzały (deprecated) w standardzie HTML i nie powinien być już stosowany. Moim zdaniem lepiej od razu przyzwyczajać się do poprawnych, aktualnych tagów, bo to się później opłaca przy większych projektach. W nowszych specyfikacjach HTML5 zaleca się stosowanie <s> właśnie do treści nieaktualnych, ale nie takich, które zostały formalnie wycofane – do tego jest znacznik <del>, który dodatkowo semantycznie wskazuje usunięcie fragmentu, często używany w systemach kontroli wersji treści. Z mojego doświadczenia warto rozróżniać <s>, <del> i <ins>, bo w połączeniu z CSS i narzędziami do dostępności (np. czytnikami ekranu) daje to lepszą semantykę dokumentu. Dobrą praktyką jest też nie nadużywać przekreśleń tylko dla „efektu wizualnego” – jeśli chcesz coś tylko wyróżnić graficznie, lepiej użyć CSS, a znaczników semantycznych używać zgodnie z ich przeznaczeniem.

Pytanie 6

Emblemat systemu CMS o nazwie Joomla! to

A. A.

B. D.

C. B.

D. C.

Logo systemu CMS Joomla! składa się z czterech kolorowych elementów ułożonych w ciekawy wzór, który od razu zwraca uwagę. Moim zdaniem, ten design dobrze oddaje ideę Joomla!, bo podkreśla współpracę i wspólnotę. To jeden z najpopularniejszych systemów do zarządzania treścią na świecie, a ludzie go używają do różnych rzeczy – od prostych blogów po naprawdę rozbudowane portale korporacyjne. Dzięki fajnym rozszerzeniom i szablonom można na prawdę spersonalizować swoją stronę. Co ważne, Joomla! wspiera dobre praktyki SEO, więc jest super opcją dla deweloperów, którzy chcą, żeby ich strony były dobrze widoczne w sieci. Widziałem, że to logo często pojawia się na stronach jako znak jakości, co pokazuje, jak bardzo jest rozpoznawalne i ważne w branży. Wybór tego logo jest więc trafiony i daje dobry punkt wyjścia do nauki o CMS-ach i ich zastosowaniach w realnym świecie.

Pytanie 7

Jak nazywa się proces dążący do osiągnięcia przez stronę jak najwyższych pozycji w wynikach wyszukiwarek?

A. walidacja HTML

B. pozycjonowanie

C. optymalizacja wydajności

D. responsywność

Proces dążący do osiągnięcia przez stronę jak najwyższych pozycji w wynikach wyszukiwarek to pozycjonowanie (SEO). Obejmuje optymalizację treści, struktury, słów kluczowych i zdobywanie linków, by wyszukiwarka uznała stronę za wartościową. Zapamiętaj: pozycjonowanie = walka o miejsce na pierwszej stronie Google.

Pytanie 8

W poniższym kodzie CSS czcionka zmieni kolor na żółty

a[target="_blank"]
{
  color: yellow;
}

A. odnośników, które otwierają się w tej samej karcie

B. każdego linku

C. odnośników, które otwierają się w nowej karcie

D. tekstu akapitu

Prawidłowa odpowiedź wskazuje na zastosowanie selektora a[target="_blank"] w języku CSS. Ten selektor odnosi się do wszystkich odnośników HTML, które otwierają się w nowej karcie przeglądarki dzięki użyciu atrybutu target z wartością "_blank". Stylizacja tych odnośników na kolor żółty jest możliwa przez przypisanie właściwości color z odpowiednią wartością. Jest to praktyczne podejście, które pozwala na wizualne wyróżnienie linków otwierających się w osobnych zakładkach. Takie podejście jest zgodne z dobrymi praktykami projektowania stron internetowych, gdzie wskazane jest, aby użytkownicy mieli wyraźne sygnały o nietypowych działaniach linków. W kontekście dostępności webowej, takie stylizowanie wspiera użytkowników w szybszym orientowaniu się w sposobie działania poszczególnych elementów interfejsu. Separacja stylu i treści zgodnie z zasadami CSS umożliwia bardziej elastyczne zarządzanie wyglądem strony i ułatwia utrzymanie spójności wizualnej na całej witrynie. Przykład ten ilustruje, jak CSS może wpływać na interakcję użytkownika z elementami strony, co jest kluczowe w procesie tworzenia przyjaznych i intuicyjnych interfejsów użytkownika.

Pytanie 9

Aby w języku HTML uzyskać formatowanie paragrafu przedstawione w ramce, należy zastosować kod

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

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

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

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

Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik <p> tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): <mark> do zaznaczenia fragmentu tekstu jak zakreślaczem oraz <em> do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 <mark> służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. <em> natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz <mark>, potem go zamykasz </mark>, dopiero później otwierasz <em> i zamykasz </em>. Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe (<mark>) i jednocześnie podkreślić termin ważny dla autora lub kontekstu (<em>). Moim zdaniem lepiej stosować <em> zamiast <i>, bo <em> niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.

Pytanie 10

Na przedstawionej grafice znajduje się struktura sekcji dla witryny internetowej. Przyjmując, że blok5 nie ma przypisanej szerokości, a bloki są określone w dokumencie HTML w kolejności ich numeracji, jak powinno wyglądać zdefiniowanie opływania?

A. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;

B. bloki 1, 2, 4 float: left; blok 3, 5 float: right;

C. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

D. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;

Właściwe użycie float w CSS jest kluczowe do tworzenia układów stron. W pierwszej propozycji zastosowano float: left; dla bloków 1, 2, 4 oraz float: right; dla bloków 3 i 5, co jest niepoprawne, ponieważ blok 5 powinien być odseparowany od pozostałych poprzez clear: both;, aby zająć całą szerokość strony. W drugiej odpowiedzi, chociaż float: right; dla bloków 1, 2, 3, 4 może wydawać się poprawne dla niektórych stylów, blok 5 z clear: right; nie będzie działał, ponieważ nie uwzględnia float: left, które ma zastosowanie w układzie. Ostatnia odpowiedź używa float: center;, co jest nieprawidłowe, ponieważ w CSS nie istnieje taka właściwość. Elementy można centrować za pomocą innych metod, ale nie za pomocą float. Ponadto, przypisanie clear dla bloku 5 jest poprawne, ale pozostałe ustawienia float dla bloków są błędne i niezgodne z przedstawionym układem. Konsekwentne błędy często wynikają z braku zrozumienia, jak właściwości float i clear współdziałają w kontekście modelu pudełkowego w CSS.

Pytanie 11

Grafik chce zamienić obraz JPG na PNG tak, by białe miejsca stały się przezroczyste. Co powinien zrobić?

A. dodać kanał alfa

B. obniżyć rozdzielczość obrazu

C. zamienić obraz na odcienie szarości

D. zaimportować obraz do edytora wektorowego

Aby białe miejsca stały się przezroczyste po zapisie do PNG, trzeba dodać KANAŁ ALFA - czyli warstwę przezroczystości, w której piksele można uczynić niewidocznymi. Dlatego należy dodać kanał alfa.

Pytanie 12

W języku HTML stworzono definicję tabeli. Który z rysunków ilustruje jej działanie?

A. Rysunek 3

B. Rysunek 2

C. Rysunek 4

D. Rysunek 1

Odpowiedzi które nie są zgodne z kodem HTML wynikają z błędnej interpretacji atrybutu colspan lub struktury tabeli. Na przykład jeden z rysunków przedstawia sytuację w której drugi wiersz tabeli zawiera dwie odrębne komórki podczas gdy kod HTML wyraźnie wskazuje na użycie atrybutu colspan=2 co powinno skutkować rozciągnięciem komórki z tekstem 'trzeci' na szerokość dwóch kolumn. Taki błąd często wynika z niepełnego zrozumienia jak działa atrybut colspan co jest kluczowe dla poprawnego tworzenia układów tabeli w HTML. Inny rysunek z kolei może przedstawiać brak rozciągnięcia komórki w dolnym wierszu co sugeruje brak zastosowania atrybutu colspan i wskazuje na brak synchronizacji między strukturą kodu a jego wizualizacją. Często spotykanym błędem jest także niezrozumienie różnicy między atrybutami colspan i rowspan które choć podobne mają zupełnie odmienne zastosowanie w kontekście organizacji układu tabeli. Zrozumienie tych różnic i umiejętne zastosowanie odpowiednich atrybutów pozwala na tworzenie bardziej złożonych i responsywnych układów stron internetowych w zgodzie z najlepszymi praktykami projektowymi. Analiza błędów w rozumieniu struktury tabeli i ich wizualizacji pomaga unikać takich pomyłek w przyszłości i sprzyja lepszemu projektowaniu interfejsów użytkownika które są nie tylko funkcjonalne ale i estetyczne co jest jednym z kluczowych wymogów nowoczesnego webdesignu. Poprawna interpretacja atrybutów i ich zastosowanie są fundamentalne w tworzeniu przejrzystych i łatwych w nawigacji stron co przekłada się bezpośrednio na lepsze doświadczenie użytkownika.

Pytanie 13

Która z czynności NIE WPŁYNIE na wielkość zajmowanej pamięci pliku graficznego?

A. Skalowanie obrazu przy użyciu atrybutów HTML

B. Kompresja

C. Interpolacja

D. Zmiana rozdzielczości obrazu

Skalowanie obrazu za pomocą atrybutów HTML nie wpływa na rozmiar pliku graficznego, ponieważ ta operacja odbywa się po stronie klienta, w przeglądarce, a nie na samym pliku. Gdy obraz jest wyświetlany w HTML, atrybuty takie jak 'width' i 'height' mogą zmienić jego wizualny rozmiar na stronie, ale nie modyfikują samego pliku. W praktyce oznacza to, że niezależnie od tego, jak duży lub mały wyświetlany jest obraz, jego rzeczywisty rozmiar na dysku pozostaje niezmieniony. Dobrą praktyką w web designie jest stosowanie odpowiednich rozmiarów i formatów obrazów w zależności od kontekstu, co może poprawić szybkość ładowania strony i doświadczenie użytkownika. Warto również pamiętać, że zbyt duże obrazy mogą powodować dłuższy czas ładowania, co wpływa na SEO i oceny wydajności witryny. Dlatego zaleca się optymalizację obrazów przed ich dodaniem do strony, co jest bardziej efektywne niż poleganie na zmianie rozmiarów przez HTML.

Pytanie 14

Aby strona poprawnie skalowała się na urządzeniach mobilnych, w sekcji <head> należy umieścić:

<title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet">

Znacznik <meta name="viewport" content="width=device-width, initial-scale=1"> mówi przeglądarce mobilnej, że szerokość rzutni (viewport) ma odpowiadać szerokości urządzenia, a strona ma startować w skali 1:1. Bez niego telefon renderuje stronę jako szeroką i pomniejsza ją, przez co media queries nie działają jak należy. Dlatego dla poprawnego skalowania na komórkach niezbędny jest meta viewport.

Pytanie 15

Która z wymienionych grup znaczników HTML zawiera elementy przeznaczone do grupowania oraz tworzenia struktury dokumentu?

A. div, article, header

B. br, img, hr

C. table, tr, td

D. span, strong, em

Odpowiedź 'div, article, header' jest poprawna, ponieważ te znaczniki HTML są kluczowymi elementami umożliwiającymi grupowanie i organizację treści w dokumentach webowych. Znacznik 'div' jest uniwersalnym kontenerem, który można wykorzystać do grupowania innych elementów w celu lepszej strukturyzacji strony. 'article' jest przeznaczony do oznaczania niezależnych fragmentów treści, takich jak posty na blogach, które mogą być samodzielnie dystrybuowane. Z kolei 'header' zazwyczaj zawiera nagłówki i elementy wprowadzające dla sekcji strony. Zastosowanie tych znaczników zgodnie z wytycznymi W3C sprzyja poprawnej hierarchii dokumentu, co z kolei zwiększa użyteczność strony oraz jej dostępność dla technologii asystujących. Przykładowo, użycie 'article' pozwala wyszukiwarkom i czytnikom ekranu lepiej zrozumieć strukturę treści, co może pozytywnie wpłynąć na SEO oraz doświadczenia użytkowników.

Pytanie 16

Jakim zapisem w dokumencie HTML można stworzyć element, który wyświetli obraz kotek.jpg oraz tekst alternatywny "obrazek kotka"?

A. <img src="kotek.jpg" alt="obrazek kotka">

B. <img href="kotek.jpg" alt="obrazek kotka">

C. <img href="kotek.jpg" title="obrazek kotka">

D. <img src="kotek.jpg" title="obrazek kotka">

Odpowiedź <img src="kotek.jpg" alt="obrazek kotka"> jest poprawna, ponieważ zawiera element <img>, który jest standardowym rozwiązaniem do wyświetlania obrazów w dokumentach HTML. Atrybut src określa ścieżkę do pliku obrazu, co jest kluczowe dla poprawnego załadowania grafiki na stronie. Atrybut alt z kolei pełni istotną rolę w zapewnieniu dostępności treści; tekst alternatywny wyświetla się w przypadku, gdy obraz nie może zostać załadowany lub jest odczytywany przez programy dla osób niewidomych. Zastosowanie odpowiednich atrybutów jest zgodne z wytycznymi W3C dotyczącymi dostępności, co pozwala na tworzenie bardziej przyjaznych dla użytkowników stron internetowych. W praktyce, prawidłowe wykorzystanie atrybutu alt jest również korzystne dla SEO, ponieważ wyszukiwarki analizują te opisy przy ocenie kontekstu strony. Ważne jest, aby zawsze stosować zarówno src, jak i alt, aby zapewnić pełnię funkcji obrazu na stronie.

Pytanie 17

Co można powiedzieć o wyświetlonym przez witrynę tekście „test kolorów”?

<p id="p1" style="color:blue;">test kolorów</p>
<button type="button"
  onclick="document.getElementById('p1').style.color='red'">
  test</button>

A. Po naciśnięciu przycisku test kolor tekstu pozostaje niebieski.

B. Tuż po otwarciu strony kolor tekstu jest czerwony.

C. Naciskanie przycisku test powoduje, że kolor tekstu zmienia się na przemian z niebieskiego na czerwony.

D. Po naciśnięciu przycisku test kolor tekstu zmienia się na czerwony.

Kod HTML przedstawia scenariusz w którym po załadowaniu strony element p1 ma styl koloru ustawiony na niebieski co oznacza że domyślnym kolorem tekstu jest niebieski Błędne zrozumienie tego kodu może prowadzić do mylnego wniosku że kolor jest czerwony już po załadowaniu co nie jest prawdą W kodzie zastosowano mechanizm onclick w elemencie button który uruchamia funkcję JavaScript zmieniającą kolor tekstu na czerwony To wyraźnie wskazuje że zmiana koloru następuje dopiero po interakcji użytkownika co jest częstym przypadkiem błędnego zrozumienia sekwencji działań w programowaniu frontendowym Nie ma również mechanizmu który umożliwiałby naprzemienne zmienianie kolorów co wyklucza możliwość istnienia cyklicznej zmiany kolorów w odpowiedzi Kod nie obejmuje logiki która mogłaby automatycznie zmieniać kolory na przemian zatem taka interpretacja jest błędna Zrozumienie manipulacji DOM i poprawne rozróżnienie między stanem początkowym a stanami dynamicznymi po interakcji jest kluczowe w efektywnym programowaniu JavaScript oraz tworzeniu intuicyjnych i responsywnych interfejsów użytkownika Dlatego ważne jest aby dokładnie analizować kod i zrozumieć jego działanie w kontekście interakcji z użytkownikiem oraz kolejności wykonywania skryptów na stronie internetowej

Pytanie 18

Wskaż element, który definiuje pole edycyjne formularza zgodne z ilustracją

A. <input type="time" id="minutes" name="hours">

B. <input type="date" id=" minutes" name="hours">

C. <input type="number" id="mm" name="hh" min="0" max="24">

D. <input type="month" id="hh" name="mm">

Prawidłowy wybór to <input type="time" id="minutes" name="hours">, ponieważ dokładnie taki element HTML5 służy do wprowadzania godziny w formacie hh:mm, czyli tak jak na ilustracji. Atrybut type="time" mówi przeglądarce, że pole ma przyjmować tylko wartości czasu, bez daty, miesięcy czy liczb dowolnego typu. Zgodnie ze specyfikacją HTML Living Standard oraz HTML5, przeglądarka powinna wtedy wyświetlić natywne kontrolki do wyboru godziny (np. rozwijane listy, suwak, mały zegarek – zależy od systemu i przeglądarki). Dzięki temu użytkownik ma mniejsze ryzyko pomyłki, a walidacja odbywa się częściowo automatycznie.
Z mojego doświadczenia warto korzystać z type="time" zawsze, gdy formularz dotyczy konkretnych godzin, np. godzina rozpoczęcia pracy, rezerwacja wizyty, planowanie spotkania online. Po stronie serwera (np. w PHP) to pole przychodzi jako tekst w formacie „HH:MM”, co jest łatwe do dalszego przetwarzania, parsowania do obiektu DateTime albo zapisu w bazie danych w typie TIME.
Dobra praktyka jest też taka, żeby nazwy atrybutów id i name były semantyczne. W tym zadaniu nie ma to wpływu na poprawność odpowiedzi, ale w realnym projekcie lepiej byłoby użyć np. id="endTime" i name="end_time". Ułatwia to później pracę z JavaScriptem i po stronie backendu. Warto też pamiętać o dodaniu atrybutów min i max, jeśli chcemy ograniczyć zakres godzin (np. od 08:00 do 20:00), oraz pattern lub dodatkowej walidacji JS, jeśli mamy specyficzne wymagania. Mimo że ilustracja nie pokazuje tych szczegółów, sam mechanizm type="time" jest tu absolutnie kluczowy i zgodny z dobrymi praktykami front-endowymi.

Pytanie 19

Kolor zielony to szesnastkowo #008000. Jaki to zapis RGB?

rgb(0, 80, 0)

rgb(0, 100, 0)

rgb(0, 160, 0)

rgb(0, 128, 0)

Pozostałe odpowiedzi błędnie przeliczają parę 80. To nie 80 dziesiętnie (taki byłby zapis #005000), nie 160 (#00A000) ani 100 (#006400). Szesnastkowe 80 równa się 128, więc #008000 to rgb(0, 128, 0).

Pytanie 20

W CSS zapisana reguła

css
p::first-line {font-size: 150%;}

wykorzystana na stronie z wieloma paragrafami, z których każdy składa się z kilku linijek, spowoduje, że

A. cały tekst w paragrafie zostanie powiększony o 150%

B. pierwsza linia każdego z paragrafów będzie miała mniejszy rozmiar czcionki niż pozostałe linie

C. pierwsza linia każdego z paragrafów będzie miała większy rozmiar czcionki niż pozostałe linie

D. pierwszy paragraf na stronie będzie miał całą czcionkę powiększoną

Zapis CSS p::first-line {font-size: 150%;} odnosi się do pseudoelementu ::first-line, który pozwala na stylizację tylko pierwszej linii tekstu w każdym paragrafie. W tym przypadku, gdy stosujemy font-size: 150%, oznacza to, że rozmiar czcionki pierwszej linii każdego paragrafu zostanie zwiększony o 50% w stosunku do domyślnego rozmiaru czcionki ustalonego w CSS. To oznacza, że pierwsza linia będzie wizualnie wyróżniać się na tle pozostałego tekstu, który pozostanie w standardowym rozmiarze czcionki. Stylizowanie pierwszej linii paragrafu jest przydatnym narzędziem w projektowaniu stron internetowych, ponieważ pozwala na zwrócenie uwagi czytelników na istotne fragmenty tekstu, co może wpływać na lepszą czytelność i odbiór treści. Dodatkowo, zgodnie z specyfikacją CSS, użycie pseudoelementów, takich jak ::first-line, jest jednym z sposobów na wprowadzenie estetycznych i funkcjonalnych zmian w tekście bez konieczności modyfikacji HTML. W praktyce, stosując ten styl, można uzyskać efekt, który poprawia hierarchię informacji w tekstach, co jest szczególnie ważne w dłuższych artykułach czy dokumentach.

Pytanie 21

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

A. div.menu { background-color: green; }

B. menu { background-color: rgb(0,255,0); }

C. #menu { background-color: rgb(0,255,0); }

D. div:menu { color: green; }

Wybrany selektor `div.menu { background-color: green; }` dokładnie pasuje do podanego fragmentu HTML: `<div class="menu"></div>`. W CSS zapis `div.menu` oznacza element typu `<div>`, który ma atrybut `class` ustawiony na `menu`. Kropka w selektorze zawsze oznacza klasę, więc `menu` po kropce to nazwa klasy, a nie nazwa znacznika. Dzięki temu styl zostanie zastosowany tylko do tych elementów `div`, które mają klasę `menu`, a nie do wszystkich divów na stronie. Właśnie tak zgodnie ze standardami CSS definiuje się wygląd elementów z konkretną klasą.
Własność `background-color: green;` ustawia kolor tła danego bloku na zielony. Można tu używać różnych zapisów kolorów: nazw (green), wartości heksadecymalnych (`#00ff00`), funkcji `rgb()` czy `hsl()`. W tym pytaniu istotne jest jednak nie tyle to, jak dokładnie zapisano kolor, tylko czy selektor trafia w odpowiedni element HTML.
W praktyce bardzo często używa się klas do stylowania wielu podobnych elementów, np. `.menu`, `.btn-primary`, `.card`. Z mojego doświadczenia lepiej unikać nadmiernego używania identyfikatorów (`id`) do stylowania, a zamiast tego bazować właśnie na klasach, bo klasy można wielokrotnie powtarzać w dokumencie i są bardziej elastyczne. Dodatkowo selektor z typem elementu (`div.menu`) jest trochę bardziej precyzyjny niż samo `.menu`, co bywa przydatne, gdy ta sama klasa pojawia się na różnych znacznikach, a chcemy kontrolować konkretne przypadki. W nowoczesnym front-endzie takie podejście jest zgodne z dobrymi praktykami: czytelne, przewidywalne i zgodne ze specyfikacją CSS.

Pytanie 22

Który znacznik HTML jest elementem BLOKOWYM?

<img>

<p>

<span>

<strong>

Element BLOKOWY zajmuje całą szerokość i zaczyna się od nowej linii - takim elementem jest akapit <p>. Dlatego elementem blokowym jest <p>.

Pytanie 23

W języku CSS określono styl dla stopki. Aby zastosować to formatowanie do bloku oznaczonego znacznikiem div, należy wpisać

#stopka { ... }

A. <div title="stopka">

B. <div id="stopka">

C. <div class="stopka">

D. <div "stopka">

Poprawna odpowiedź to <div id="stopka"> ponieważ w CSS użycie selektora ID poprzedzonego znakiem # oznacza, że styl jest stosowany do elementu o określonym identyfikatorze. W HTML atrybut id jest unikalny w obrębie całego dokumentu co oznacza, że może być przypisany tylko do jednego elementu. Stosowanie identyfikatorów jest powszechną praktyką w przypadku stylizacji elementów, które pojawiają się tylko raz na stronie jak stopka nagłówek czy główny kontener treści. Przykład praktycznego zastosowania obejmuje sytuacje gdzie chcesz stylizować konkretną część strony internetowej zachowując jednorodność w całym projekcie. Dobrą praktyką jest również unikanie zbyt częstego używania id na rzecz klas które są bardziej elastyczne i mogą być stosowane do wielu elementów. Jednak w przypadku elementów unikalnych takich jak stopka użycie id jest zgodne z najlepszymi praktykami projektowania stron internetowych. Warto również pamiętać że selektory ID mają wyższy priorytet w CSS co oznacza że ich stylizacje nadpisują te zdefiniowane dla klas o tej samej specyfikacji.

Pytanie 24

Które z poniższych poleceń jest poprawne w kontekście walidacji HTML5?

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

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

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

D. <img src = "mojPiesek.jpg" >

Odpowiedź <img src = "mojPiesek.jpg" alt = "pies"> jest poprawna zgodnie z wymaganiami HTML5, ponieważ przestrzega zasad dotyczących składni znaczników. W HTML5 atrybuty powinny być stosowane w formacie klucz-wartość, gdzie klucz jest nazwą atrybutu, a wartość jest przypisana w cudzysłowach. W tym przypadku atrybut 'src' wskazuje na źródło obrazu, a 'alt' dostarcza tekst alternatywny, co jest istotne z punktu widzenia dostępności. Tekst alternatywny jest używany przez technologie asystujące oraz wyświetlany, gdy obraz nie może być załadowany. Przykład użycia: <img src="logo.png" alt="Logo firmy"> jest zgodny z dobrymi praktykami, ponieważ informuje użytkowników o zawartości obrazu. Warto również pamiętać, że w HTML5 nie jest wymagane zamykanie tagu <img>, co czyni go bardziej elastycznym w użyciu. Poprawne stosowanie atrybutów oraz odpowiedzialność za dostępność treści to kluczowe aspekty projektowania stron internetowych w dzisiejszych czasach.

Pytanie 25

Po uruchomieniu zamieszczonego w ramce skryptu w języku JavaScript, w przeglądarce zostanie wyświetlona wartość:

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);

A. 12,5

B. 15,4

C. 12,4

D. 15,5

W tym skrypcie JavaScript mamy operator dekrementacji a--, gdzie najpierw wartość zmiennej a jest przypisana do zmiennej b, a dekrementacja następuje później. Jeśli tego nie rozumiesz, może to prowadzić do różnych nieporozumień co do wynikowych wartości. Czyli po a-- b przyjmuje pierwotną wartość a, która wynosi 5. Warto zrozumieć kolejność operacji, bo przy operatorze postfix zmiana wartości następuje po przypisaniu. Później, po dekrementacji, a staje się 4, co czasem jest źle interpretowane, bo ludzie myślą, że b też by się zmieniło. Potem jest a *= 3, gdzie 4 mnożymy przez 3 i dostajemy 12. Często ludzie popełniają błąd, zakładając, że operatory działają równocześnie w jednym wierszu kodu. Ważne jest, żeby znać te subtelności, bo pomaga to w lepszym programowaniu i kontrolowaniu, jak zmienne się zmieniają.

Pytanie 26

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

<br/>

</ br>

<br> </br>

</br>

Łamanie linii <br> to element pusty (void) - nie zawiera żadnej treści, więc nie ma osobnego znacznika zamykającego. W składni XHTML zapisuje się go w formie samozamykającej <br/>, z ukośnikiem tuż przed > (w HTML5 wystarczy samo <br>). Dlatego poprawną formą samozamykającą jest <br/>.

Pytanie 27

Co spowoduje zapis

h2 { background-color: green; }

A. zieloną czcionkę wszystkich nagłówków

B. zielone tło całej strony

C. zieloną czcionkę nagłówków drugiego poziomu

D. zielone tło nagłówków drugiego poziomu (<h2>)

Reguła h2 { background-color: green; } ustawia zielone TŁO elementom <h2>, czyli nagłówkom drugiego poziomu. Selektor h2 ogranicza działanie tylko do tych nagłówków. Dlatego daje zielone tło nagłówków <h2>.

Pytanie 28

W formularzu umieszczono kontrolki do podania imienia oraz nazwiska. Który z atrybutów odpowiada za wyświetlanie sugestii w polu kontrolki, która znika, gdy użytkownik zaczyna wpisywanie wartości?

<label for="imie">Imię: </label> 
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label> 
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">

A. value

B. title

C. placeholder

D. for

Atrybut "placeholder" jest kluczowym elementem w formularzach HTML, który definiuje tekst podpowiedzi umieszczony w polu kontrolki. Tekst ten zniknie, gdy użytkownik zacznie wpisywać dane, co pozwala na zapewnienie bardziej intuicyjnego interfejsu. W przypadku przykładowego formularza, atrybut "placeholder" jest użyty w polu nazwiska, co stanowi doskonały przykład jego praktycznego zastosowania. Dobrą praktyką jest stosowanie atrybutu "placeholder" w formularzach, ponieważ wprowadza on klarowność i ułatwia użytkownikom wypełnianie formularzy, jednocześnie zmniejszając ryzyko błędów. Atrybut ten nie tylko poprawia doświadczenia użytkownika, ale także zwiększa dostępność formularzy, ponieważ pozwala osobom korzystającym z czytników ekranu lepiej zrozumieć, jakie dane są wymagane. Warto również zauważyć, że "placeholder" nie powinien być używany jako substytut etykiety, która jest niezbędna do poprawnej dostępności i użyteczności. Etykiety powinny być zawsze stosowane, a "placeholder" powinien pełnić jedynie funkcję pomocniczą.

Pytanie 29

Który atrybut pozwala na wskazanie lokalizacji pliku graficznego w znaczniku <img>?

A. alt

B. src

C. href

D. link

Atrybut 'src' w znaczniku <img> jest kluczowy, ponieważ określa lokalizację pliku graficznego, który ma być wyświetlany na stronie. Oznacza to, że wartość tego atrybutu to URL (Uniform Resource Locator), który wskazuje na lokalizację obrazu w internecie lub na lokalnym serwerze. Przykładowo, jeśli chcemy wyświetlić obrazek o nazwie 'zdjecie.jpg' znajdujący się w folderze 'obrazy', użyjemy: <img src='obrazy/zdjecie.jpg' alt='Opis obrazka'>. Zastosowanie odpowiedniego atrybutu 'src' jest zgodne z najlepszymi praktykami HTML, co zapewnia, że przeglądarki internetowe prawidłowo interpretują nasze zamierzenia co do wyświetlania treści wizualnych. Nieprawidłowe określenie lokalizacji obrazu może prowadzić do błędów '404 Not Found', co negatywnie wpływa na doświadczenie użytkownika. Dobrze zaprojektowane strony internetowe powinny również uwzględniać atrybut 'alt', który zapewnia dostępność oraz opisuje zawartość obrazu osobom korzystającym z czytników ekranu, ale to 'src' jest odpowiedzialny za wyświetlanie samego obrazu.

Pytanie 30

W języku CSS określono styl dla pola edycyjnego. Pole to będzie miało jasnozielony kolor tła, gdy będzie w trybie edycji.

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

B. gdy będzie na nie najechane kursorem bez kliknięcia.

C. w każdej sytuacji.

D. po naciśnięciu na nie myszką w celu wpisania tekstu.

Inne odpowiedzi mogą wydawać się logiczne na pierwszy rzut oka, jednak każda z nich ma swoje wady. Stwierdzenie, że tło zmienia się "gdy zostanie wskazane kursorem myszy bez kliknięcia" jest nieprawidłowe, ponieważ stan "focus" wymaga interakcji użytkownika poprzez kliknięcie. W przeciwnym razie, pole nie będzie miało przypisanego stylu. Możliwość ustawienia tła przy najechaniu kursorem myszy można osiągnąć za pomocą pseudo-klasy :hover, ale to zupełnie inny kontekst. Twierdzenie, że tło zmienia się "w każdym przypadku" jest również mylące, ponieważ reguła CSS dotyczy tylko specyficznego stanu, a nie wszystkich stanów. Ostatecznie, stwierdzenie, że zmiana tła zachodzi "jeśli jest to pierwsze wystąpienie tego znacznika w dokumencie" jest nieprawdziwe, ponieważ reguła CSS odnosi się do każdego elementu <input>, który znajdzie się w stanie "focus", niezależnie od jego miejsca w dokumencie. Tego rodzaju myślenie prowadzi do nieporozumień dotyczących zastosowania selektorów CSS oraz ich właściwości. Dlatego ważne jest, aby mieć jasność co do mechanizmów działania CSS i zrozumieć, że odpowiednie style są stosowane w oparciu o interakcje użytkownika, a nie tylko na podstawie struktury dokumentu.

Pytanie 31

W trakcie walidacji dokumentu HTML5 napotkano komunikat o treści: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. element <title> nie jest konieczny.

B. element <title> nie został poprawnie zamknięty przez </title>.

C. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>.

D. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

Wskazanie, że element <title> nie jest wymagany, jest niezgodne z obowiązującymi standardami HTML5, które jednoznacznie nakładają obowiązek jego obecności w sekcji <head>. Uzyskanie poprawnego HTML-a wymaga zrozumienia struktury dokumentu i obowiązkowych elementów, które muszą być zawarte. Twierdzenie, że element <title> nie został zamknięty przez </title>, sugeruje zamieszanie z pojęciem prawidłowego składania tagów. W przypadku HTML, błędy składniowe muszą być zawsze korygowane, jednak obecność elementu <title> jest kluczowa niezależnie od sposobu jego zamknięcia. Stwierdzenie, że nie zdefiniowano obowiązkowego atrybutu title w znaczniku <img> jest całkowicie mylące, ponieważ atrybut title w znaczniku <img> nie ma związku z tytułem strony i jego brak nie powoduje błędu w walidacji HTML. Zamiast tego, powinno się skupić na tym, że atrybut title w znaczniku <img> jest opcjonalny, ale jego zawartość może poprawić dostępność, co jest istotne w kontekście zgodności z WCAG. Dlatego kluczowe jest zrozumienie roli i funkcji poszczególnych elementów w HTML oraz unikanie mylnych interpretacji ich znaczenia.

Pytanie 32

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

A. różnicy.

B. części wspólnej.

C. wykluczenia.

D. sumy.

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

Pytanie 33

Określ właściwą sekwencję stylów CSS, biorąc pod uwagę ich priorytet w formatowaniu elementów strony WWW?

A. Styl lokalny, Styl wewnętrzny, Styl zewnętrzny

B. Styl wewnętrzny, Styl zewnętrzny, Rozciąganie stylu

C. Rozciąganie stylu, Styl zewnętrzny, Styl lokalny

D. Styl zewnętrzny, Wydzielone bloki, Styl lokalny

Wskazana odpowiedź, czyli Lokalny, Wewnętrzny, Zewnętrzny, jest zgodna z zasadami kaskadowego stylu arkuszy CSS. Istotą kaskadowości jest to, że style są stosowane według określonej hierarchii. Style lokalne (wbudowane) mają najwyższy priorytet, co oznacza, że jeśli na danym elemencie zastosowano styl lokalny, to zdominuje on wszelkie inne style. Przykład użycia stylu lokalnego to nadanie koloru tła dla konkretnego przycisku poprzez atrybut 'style': <button style='background-color: red;'>Przycisk</button>. W przypadku, gdy nie ma stylu lokalnego, przetwarzany jest styl wewnętrzny, który można zdefiniować w sekcji <style> w nagłówku dokumentu HTML. Na przykład: <style>p { color: blue; }</style> sprawi, że wszystkie akapity będą miały niebieski kolor. Dopiero na końcu brane są pod uwagę style zewnętrzne, które są definiowane w osobnych plikach CSS, na przykład: <link rel='stylesheet' href='style.css'>. Dlatego znajomość tej hierarchii jest kluczowa dla skutecznego tworzenia stylów, co przekłada się na lepsze zarządzanie wyglądem strony oraz unikanie konfliktów stylów. Warto również pamiętać o zasadzie „specyficzności”, która dodatkowo komplikuje temat, ponieważ style mogą mieć różny priorytet w zależności od ich specyfikacji.

Pytanie 34

Która para znaczników HTML daje (bez stylów CSS) taki sam efekt wizualny - pogrubienie tekstu?

A. <b> i <strong>

B. <b> i <big>

C. <p> i <h2>

D. <meta> i <title>

Znaczniki <b> i <strong> domyślnie dają ten sam efekt wizualny - pogrubienie tekstu. Różnią się jednak znaczeniem (semantyką): <b> to czysto wizualne pogrubienie, a <strong> oznacza treść WAŻNĄ, co wykorzystują m.in. czytniki ekranu i wyszukiwarki. Podobna para to <i> i <em> (pochylenie). Dlatego wizualnie identyczny efekt daje para <b> i <strong>.

Pytanie 35

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

<meta name="author">

B. przynajmniej jednego <h1>

<title>

<link>

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

Pytanie 36

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. tr { background-color: Pink; }

D. td, th { background-color: Pink; }

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek.

W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony.

Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 37

Strona internetowa powinna mieć zorganizowaną strukturę bloków. Aby osiągnąć ten układ, należy przypisać sekcjom odpowiednie właściwości w ten sposób:

A. float tylko dla bloku 2; clear dla bloków: 3, 4

B. float jedynie dla bloków: 3, 4; clear dla bloku 5

C. float tylko dla bloków: 2, 3, 4; clear dla bloku 5

D. float wyłącznie dla bloku 5; clear dla bloku 2

Stosowanie float tylko dla bloku 5 i clear dla bloku 2 nie jest właściwe, ponieważ float jest używane do umieszczania elementów obok siebie, a clear do zapobiegania takiemu zachowaniu. W przypadku float dla bloków 3 i 4 oraz clear dla bloku 5, blok 2 nie miałby żadnej właściwości float, co oznacza, że nie mógłby być poprawnie umieszczony obok bloków 3 i 4, a to prowadziłoby do nieprawidłowego ułożenia bloku 5. Użycie float tylko dla bloku 2 i clear dla bloków 3 i 4 byłoby błędne, ponieważ clear zapobiega przyleganiu elementów do boku, co jest niezgodne z celem floatowania bloków 2, 3 i 4 w jednej linii. Typowym błędem myślowym jest traktowanie clear jako narzędzia do rozmieszczania bloków w poziomie, co jest funkcją float. Zamiast tego, clear blokuje wpływ elementów pływających, co może być użyteczne w końcowych elementach układu jak blok 5, ale nie w środku. Dobre zrozumienie działania float i clear jest kluczowe dla efektywnego tworzenia layoutów stron internetowych, gdzie precyzyjne kontrolowanie pozycji bloków jest istotne dla estetyki i funkcjonalności projektu.

Pytanie 38

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

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

<img src=mojPiesek.jpg alt=pies>

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

<img src="mojPiesek.jpg">

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 39

Jaką właściwość CSS należy zastosować, aby uzyskać linie przerywaną w obramowaniu?

A. double

B. dotted

C. solid

D. dashed

Odpowiedź dashed jest poprawna ponieważ w CSS właściwość ta służy do definiowania stylu obramowania w postaci linii kreskowanej Jest to często używane do wizualnego oddzielenia zawartości na stronie internetowej bez zbytniego skupiania uwagi Użycie dashed sprawia że linia jest bardziej subtelna w porównaniu do solid co czyni ją dobrym wyborem w przypadku chęci zachowania minimalistycznego wyglądu Zgodnie ze standardami CSS właściwość border-style może przyjmować kilka wartości w tym solid dotted double i dashed Każda z tych wartości ma swoje unikalne zastosowania na przykład solid tworzy ciągłą linię natomiast dotted tworzy linię z kropkami Linia dashed składa się z krótkich kresek co różni ją od linii double która jest podwójną linią W praktyce dashed jest często stosowane w projektach gdzie ważne jest wskazanie na określone sekcje lub elementy bez przytłaczania użytkownika Zgodnie z dobrymi praktykami można dostosować szerokość i kolor obramowania co pozwala na lepszą integrację z ogólnym stylem strony CSS daje dużą elastyczność w projektowaniu co pozwala na tworzenie różnorodnych i responsywnych interfejsów użytkownika

Pytanie 40

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu. <h6>CSS</h6>
<p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</b></i>)<br>to język służący...</p>

A. Znak br nie został prawidłowo zamknięty.

B. Znak br nie może być użyty wewnątrz znacznika p.

C. Znak zamykający /b jest niezgodny z zasadą zagnieżdżania.

D. Znacznik h6 jest nieznany.

W analizowanym fragmencie kodu HTML występuje błąd związany z niewłaściwym zagnieżdżeniem znaczników. W szczególności, znacznik zamykający </b> został umieszczony przed zamknięciem znacznika <i>, co narusza zasady zagnieżdżania elementów w HTML. Zgodnie z wytycznymi W3C (World Wide Web Consortium), każdy znacznik otwierający musi mieć odpowiedni znacznik zamykający w odpowiedniej kolejności, a zagnieżdżanie elementów musi być przestrzegane, aby zapewnić poprawną strukturę dokumentu. W tym przypadku poprawna sekwencja powinna wyglądać następująco: <i>...</i><b>...</b>, co oznacza, że znacznik <i> powinien być zamknięty po znaczniku <b>. Przykładowo, prawidłowy zapis mógłby wyglądać tak: <p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</i></b> to język służący...</p>. Taka struktura zapewnia, że znaczniki są poprawnie zagnieżdżone, co przekłada się na lepszą interpretację przez przeglądarki oraz narzędzia do walidacji HTML.

Rozpocznij nowy egzamin

Powrót do strony głównej