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: 23 kwietnia 2026 08:15
Data zakończenia: 23 kwietnia 2026 08:36

Egzamin niezdany

Wynik: 17/40 punktów (42,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Projektant stworzył logo dla witryny internetowej. Jest to czarny symbol na przezroczystym tle. Aby zachować wszystkie cechy obrazu i umieścić go na stronie, projektant powinien zapisać obraz w formacie

A. CDR

B. PNG

C. JPEG

D. BMP

Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla grafiki internetowej, zwłaszcza gdy zależy nam na zachowaniu przezroczystości tła, co jest kluczowe w przypadku logotypów. PNG obsługuje kompresję bezstratną, co oznacza, że nie utracimy jakości obrazu przy zapisywaniu go. To szczególnie ważne w kontekście logo, które często musi być skalowane do różnych rozmiarów, a wszelkie zniekształcenia mogą wpłynąć na jego rozpoznawalność. Dodatkowo, format PNG pozwala na uzyskanie pełnej gamy kolorów, w tym przezroczystości w formacie RGBA. W praktyce oznacza to, że możesz umieścić czarny znak na dowolnym tle, a jego kształt zawsze zachowa wyrazistość oraz ostrość. Warto również zauważyć, że PNG jest wspierany przez wszystkie nowoczesne przeglądarki internetowe i systemy operacyjne, co czyni go wszechstronnym wyborem dla twórców stron internetowych. Standard PNG, opublikowany przez W3C, jest uznawany za jedno z najbardziej efektywnych rozwiązań dla grafiki w sieci.

Pytanie 2

W notacji szesnastkowej kolor zielony reprezentowany jest jako #008000. Jaką wartość przyjmuje on w notacji RGB?

A. rgb(0, 100, 0)

B. rgb(0, 160, 0)

C. rgb(0, 128, 0)

D. rgb(0, 80, 0)

Wartości rgb(0, 80, 0), rgb(0, 160, 0) oraz rgb(0, 100, 0) są niepoprawnymi reprezentacjami koloru zielonego w notacji RGB, ponieważ nie odwzorowują one prawidłowej kombinacji składowych odpowiadających wartości szesnastkowej #008000. Wartość ta jest wyrażona jako sześć cyfr, gdzie dwie pierwsze reprezentują składową czerwoną, dwie kolejne składową zieloną, a ostatnie dwie składową niebieską. W przypadku #008000, składowa czerwona wynosi 0, składowa zielona wynosi 128, a składowa niebieska również wynosi 0. Typowym błędem, prowadzącym do błędnych odpowiedzi, jest mylenie zakresu wartości składowych. Na przykład, rgb(0, 80, 0) sugeruje, że składowa zielona wynosi 80, co jest znacznie niższą wartością niż 128, przez co kolor staje się ciemniejszy i mniej nasycony. Podobnie, rgb(0, 160, 0) i rgb(0, 100, 0) modyfikują intensywność koloru zielonego, co prowadzi do zupełnie innych odcieni, które nie odpowiadają standardowemu zielonemu. Znajomość konwersji między tymi formatami oraz ich zastosowanie w praktyce, np. w grafikach komputerowych czy web designie, jest kluczowa dla uzyskania pożądanych efektów wizualnych. Dobrą praktyką jest zawsze sprawdzanie wartości za pomocą narzędzi do wyboru kolorów, które mogą pomóc uniknąć takich pomyłek.

Pytanie 3

W HTML znacznik tekst będzie wyświetlany przez przeglądarkę w taki sam sposób jak znacznik

A. <big>tekst</big>

B. <sub>tekst</sub>

C. <h1>tekst</h1>

D. <b>tekst</b>

Znacznik <strong> jest używany w HTML do oznaczania tekstu, który ma być wyróżniony ze względu na jego ważność. Jest to związane z semantyką dokumentu. Chociaż <strong> i <b> wyświetlają tekst w podobny sposób (zazwyczaj pogrubiony), mają inne znaczenie. Znacznik <b> jest używany do czysto wizualnego wyróżnienia, bez przypisywania wartości semantycznej. Dlatego, gdy używamy <strong>, nie tylko zmieniamy wygląd tekstu, lecz także informujemy przeglądarkę i dostępne technologie, że ten element ma szczególne znaczenie. Przykładem praktycznego zastosowania <strong> może być wyróżnienie kluczowych informacji w artykule, co wpływa na zrozumienie treści przez użytkowników oraz poprawia dostępność strony. Warto pamiętać, że stosowanie odpowiednich znaczników zgodnie z ich przeznaczeniem jest zgodne z zasadami HTML5 i poprawia SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst strony, co jest kluczowe dla jej indeksacji.

Pytanie 4

Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?

A. Rys. D

B. Rys. C

C. Rys. B

D. Rys.A

Nieprawidłowe odpowiedzi mogą wynikać z niezrozumienia struktury zagnieżdżonych list w HTML. Zrozumienie jak różne typy list i atrybuty wpływają na ich wyświetlanie jest kluczowe. Lista uporządkowana <ol> domyślnie numeruje swoje elementy co często prowadzi do założenia że wszystkie elementy muszą być numerowane w standardowy sposób. Jednak HTML pozwala na dostosowanie tego zachowania poprzez atrybuty type i start co może zmieniać domyślną numerację na litery czy inne formy. Kolejnym źródłem błędu jest zignorowanie zagnieżdżonej listy nieuporządkowanej <ul> która używa kropki jako punktora co różni się od standardowego kółka. Bez znajomości tych aspektów łatwo jest błędnie zinterpretować strukturę i wyświetlanie kodu. Typowe błędy myślowe wynikają z założeń że każda lista zachowa domyślną formę co nie zawsze jest prawdą w zaawansowanym HTML. Poprawne zrozumienie wymaga eksperymentowania i testowania różnych konfiguracji atrybutów aby w pełni wykorzystać potencjał HTML w tworzeniu elastycznych i dostosowanych interfejsów.

Pytanie 5

Obraz przedstawia formatowanie CSS paragrafu. Aby otrzymać czerwony kolor poza obramowaniem, tak jak przedstawiono na obrazie, należy zdefiniować własność

Oto przykład paragrafu który poza ramką ma kolor grubości 10 px

A. background

B. border

C. padding

D. outline

Niestety, to nie jest poprawna odpowiedź. Możliwe, że pomyliłeś niektóre właściwości CSS. 'Padding' zwiększa wewnętrzny odstęp w elemencie, ale nie zmienia koloru obramowania. Z kolei 'background' odpowiada za tło elementu. Pamiętaj, że 'border' tworzy obramowanie i to wpływa na rozmiar elementu. Natomiast 'outline' to kontur, który tylko otacza element bez wpływania na jego układ. Warto przemyśleć tę różnicę, bo to kluczowe, żeby dobrze ogarniać CSS. Pracuj nad tym i spróbuj jeszcze raz.

Pytanie 6

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

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

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

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

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

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 7

Przedstawiono efekt formatowania CSS oraz kod HTML. Jak należy zdefiniować styl, aby osiągnąć takie formatowanie?

<p>
Mimozami jesień się zaczyna,<br>
Złotawa, krucha i miła.<br>
To ty, to ty jesteś ta dziewczyna,<br>
Która do mnie na ulicę wychodziła.
</p>

A. p.first-line { font-size: 200%; color: brown; }

B. .first-line { font-size: 200%; color: brown; }

C. p::first-line { font-size: 200%; color: brown; }

D. #first-line { font-size: 200%; color: brown; }

Gratulacje! Wybrałeś prawidłową odpowiedź. Pseudoelement ::first-line jest specyficznym selektorem CSS służącym do formatowania pierwszej linii wewnątrz bloku tekstu. Jest to zgodne ze standardami CSS3. Wszystkie style zdefiniowane za pomocą ::first-line będą miały wpływ tylko na pierwszą linię paragrafu, niezależnie od tego, ile zdań zawiera. W tym konkretnym przypadku, zastosowanie selektora `p::first-line` powoduje powiększenie czcionki do 200% oraz zmianę jej koloru na brązowy, ale tylko dla pierwszej linii tekstu zawartego w paragrafie (znacznik `<p>`). Jest to przydatne, gdy chcemy wyróżnić pierwszą linię tekstu, na przykład w dużej ilości tekstu lub artykułach. Pseudoelementy, takie jak ::first-line, pomagają w tworzeniu bardziej złożonych i precyzyjnych stylów bez konieczności dodawania dodatkowych znaczników do naszego kodu HTML.

Pytanie 8

Który z akapitów wykorzystuje opisaną właściwość stylu CSS?

A. D

B. A

C. C

D. B

Odpowiedź B jest poprawna, ponieważ właściwość CSS border-radius: 20% określa zaokrąglenie narożników elementu. W tym przypadku zastosowanie 20% promienia powoduje, że narożniki akapitu są zaokrąglone w umiarkowanym stopniu. Właściwość ta jest powszechnie wykorzystywana w projektowaniu stron internetowych, aby nadać elementom bardziej łagodny, przyjazny wygląd. Użycie procentowej wartości oznacza, że wielkość zaokrąglenia zależy od wymiarów elementu, co pozwala na zachowanie proporcji na różnych urządzeniach i przy różnych rozmiarach ekranu. Zaokrąglenie w CSS jest istotnym aspektem responsywnego designu, ponieważ może poprawiać czytelność i estetykę interfejsu użytkownika. Praktyczne zastosowania obejmują przyciski, karty, obrazki i inne elementy interfejsu, gdzie płynne linie mogą wpływać na ogólne wrażenie wizualne strony. Zrozumienie i umiejętne wykorzystanie border-radius jest częścią standardowych umiejętności projektanta stron internetowych, co również wspiera zgodność ze współczesnymi trendami w UI/UX.

Pytanie 9

W przedstawionym kodzie HTML, zaprezentowany styl CSS jest stylem:

<p style="color:red;">To jest przykładowy akapit.</p>

A. nagłówkowym

B. lokalnym

C. zewnętrznym

D. dynamicznym

Styl CSS określony wewnątrz elementu HTML poprzez atrybut style jest przykładem stylu lokalnego. Styl lokalny pozwala na bezpośrednie przypisanie konkretnych własności CSS do pojedynczego elementu co umożliwia szybkie i łatwe testowanie oraz modyfikacje wyglądu bez potrzeby edytowania zewnętrznych plików CSS. Praktyczne zastosowanie stylów lokalnych odnajdujemy w sytuacjach gdy chcemy wprowadzić zmiany dla pojedynczego elementu na stronie nie wpływając na inne elementy. Na przykład jeśli w jednym miejscu chcemy podkreślić wagę tekstu stosując kolor czerwony możemy użyć stylu lokalnego jak pokazano w pytaniu. Jednak styl lokalny nie jest zalecany dla większych projektów czy skomplikowanych stron ze względu na fakt że utrudnia zarządzanie i utrzymywanie spójnego stylu w całym projekcie. W takich przypadkach lepiej korzystać ze stylów zewnętrznych lub nagłówkowych które oferują lepszą organizację i elastyczność. Warto również pamiętać że implementacja stylu lokalnego może nadpisywać inne style co jest istotne przy rozwiązywaniu problemów związanych z dziedziczeniem stylów CSS.

Pytanie 10

Element

<meta charset="utf-8">

służy do definiowania metadanych witryny internetowej związanych z

A. kodowaniem znaków

B. językiem witryny

C. opisem witryny

D. słowami kluczowymi

Element <meta charset="utf-8"> jest kluczowym fragmentem kodu HTML, który definiuje kodowanie znaków używane na stronie internetowej. Ustawienie kodowania na UTF-8 jest obecnie standardem branżowym, który pozwala na prawidłowe wyświetlanie tekstów w różnych językach, a także obsługę różnorodnych znaków specjalnych. Dzięki temu strona będzie renderować się poprawnie niezależnie od używanego języka, co jest szczególnie istotne w kontekście globalizacji i dostępności treści dla szerokiego grona użytkowników. W praktyce, poprawne kodowanie znaków eliminuje problemy z wyświetlaniem polskich znaków diakrytycznych, takich jak ą, ć, ę, ł czy ź. Warto także zauważyć, że błędne ustawienie kodowania może prowadzić do tzw. "krzaków" w treści, co znacząco obniża jakość prezentacji strony oraz jej użyteczność. Dlatego zaleca się zawsze stosować <meta charset="utf-8"> w nagłówku dokumentu HTML, aby zapewnić pełną kompatybilność i poprawność wyświetlania treści w różnych przeglądarkach i systemach operacyjnych.

Pytanie 11

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

A. nav { float: right; }

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

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

D. aside {float: left; }

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

Pytanie 12

Na stronie internetowej dodano grafikę w kodzie HTML. Co się stanie, jeśli plik rysunek.png nie zostanie odnaleziony przez przeglądarkę?

<img src="rysunek.png" alt="pejzaż">

A. zademonstruje błąd wyświetlania strony w miejscu grafiki

B. nie pokaże strony internetowej

C. wstawi tekst "rysunek.png" zamiast grafiki

D. wyświetli tekst "pejzaż" w miejscu grafiki

Kiedy używasz elementu <img> w HTML, warto ogarnąć, jak przeglądarka radzi sobie z jego atrybutami. Gdy obrazek pod danym adresem nie jest dostępny, przeglądarka nie wyświetli błędu dla całej strony. Strona dalej będzie działać normalnie, a przeglądarka po prostu nie wyświetli obrazka. W takim przypadku dostaniesz tekst z atrybutu alt jako zamiennik. Jeśli zapomniałbyś o tym atrybucie, to użytkownik nie dowie się, co tam miało być na tym obrazku. Może się wydawać, że przeglądarka wyświetli nazwę brakującego pliku graficznego, ale tak nie jest. Często wynika to z tego, że nie wszyscy znają zasady poprawnego projektowania stron, gdzie stosowanie tekstu alternatywnego to standardowa praktyka, która wspiera dostępność i użyteczność aplikacji webowych.

Pytanie 13

Jakie jest poprawne zapisanie tagu HTML?

<a href="#hobby">przejdź</a>

A. jest błędny, użyto niewłaściwego znaku # w atrybucie href

B. jest błędny, w atrybucie href powinien być podany adres URL

C. jest poprawny, po kliknięciu w odnośnik strona zostanie przewinięta do elementu o nazwie "hobby"

D. jest prawidłowy, po kliknięciu w odnośnik otworzy się strona pod adresem "hobby"

Znaczniki HTML są podstawowym narzędziem tworzenia stron internetowych a ich prawidłowe zastosowanie ma kluczowe znaczenie dla funkcjonalności i użyteczności witryny. W omawianym przypadku atrybut href='#hobby' używa tzw. kotwicy która służy do nawigacji wewnętrznej w obrębie jednej strony. Linki wewnętrzne są istotne gdyż pozwalają na szybkie przeskakiwanie do określonych sekcji dokumentu. W odpowiedziach błędnych zauważalne są pewne nieporozumienia. Po pierwsze jeśli w href użyto adresu URL bez znaku hash oznacza to próbę przekierowania na zupełnie inną stronę co jest niepoprawne w kontekście nawigacji wewnętrznej. Podanie pełnego adresu URL jest wymagane jedynie gdy chcemy przejść do innej strony internetowej. Znak hash w tym kontekście jest poprawny gdyż wskazuje na docelowy identyfikator wewnątrz tej samej strony. Jest to zgodne z praktykami tworzenia przejrzystych i funkcjonalnych interfejsów użytkownika. Nieprawidłowe interpretacje mogą wynikać z braku zrozumienia jak działają kotwice w HTML co może prowadzić do błędów w projektowaniu doświadczenia użytkownika oraz kodu o niskiej użyteczności. Edukacja i praktyka w używaniu standardowych znaczników HTML jest niezbędna dla tworzenia profesjonalnych projektów internetowych które są przyjazne dla użytkowników i działają zgodnie z oczekiwaniami. Rozumienie tych zasad pozwala na tworzenie stron zgodnych z najlepszymi praktykami branżowymi co ma kluczowe znaczenie dla współczesnych wymagań projektowych i użytkowych.

Pytanie 14

Aby na stronie internetowej umieścić logo z przezroczystym tłem, jaki format powinien być zastosowany?

A. CDR

B. BMP

C. PNG

D. JPG

Wybór formatu JPG (Joint Photographic Experts Group) do prezentacji logo z przezroczystym tłem jest błędny, ponieważ JPG nie obsługuje przezroczystości. Obrazy w tym formacie są kompresowane z utratą danych, co może prowadzić do pogorszenia jakości grafiki, szczególnie w obszarach z delikatnymi szczegółami i przejrzystością. Użytkownicy często myślą, że JPG może być stosowany w każdej sytuacji, jednak jego głównym przeznaczeniem są fotografie, gdzie bogate kolory i detale są kluczowe. Z kolei format CDR (CorelDRAW) jest formatem wektorowym, który nie jest przeznaczony do użytku w sieci bezpośrednio, ponieważ wymaga specjalnego oprogramowania do edycji, co czyni go mniej praktycznym dla stron internetowych. BMP (Bitmap) to format obrazu, który również nie wspiera przezroczystości, a dodatkowo ma dużą objętość plików, co może spowalniać ładowanie strony. Użytkownicy często mylą formaty, co prowadzi do wyborów, które nie tylko zmieniają jakość wizualną, ale także wpływają na wydajność strony internetowej. Dlatego kluczowe jest zrozumienie odpowiednich aplikacji dla różnych formatów graficznych, aby uniknąć typowych pułapek projektowych.

Pytanie 15

Który link jest poprawnie sformułowany?

A. <a href="http::/strona.pl>strona</a>

B. <a href=http://strona.pl>strona</a>

C. <a href="http://strona.pl">strona</a>

D. <a src="/www.strona.pl">strona</a>

Odpowiedź <a href="http://strona.pl">strona</a> jest poprawna, ponieważ używa atrybutu "href" do definiowania odnośnika. Atrybut ten jest standardem w języku HTML i służy do określenia docelowego adresu URL, do którego ma prowadzić link. W przypadku tej odpowiedzi, składnia jest prawidłowa: adres URL jest umieszczony w cudzysłowach, a prefiks HTTP jest poprawny. W praktyce, poprawne użycie atrybutu href jest kluczowe dla zapewnienia, że użytkownicy mogą bezproblemowo nawigować po stronie internetowej. Na przykład, w dokumentacji HTML5, wyraźnie zaznaczone jest, że atrybut href powinien być używany, aby wskazać lokalizację zasobu. W rezultacie, stosując tę poprawną składnię, można uniknąć potencjalnych błędów w działaniu strony oraz poprawić jej dostępność, co jest istotne z punktu widzenia najlepszych praktyk webowych oraz SEO.

Pytanie 16

Którego związku selektorów CSS należy użyć w miejscu znaków zapytania, aby zdefiniowany styl został zastosowany tylko do tekstu „paragrafie”?

<!DOCTYPE html>
<html>
  <head>
    <style>
      ???{letter-spacing: 10px; color: red;}
    </style>
  </head>
  <body>
    <p>Styl <b>tekstu</b> w pierwszym <i>paragrafie</i></p>
  </body>
</html>

A. p > i

B. b i

C. p + i

D. b > i

W tym zadaniu kluczowe jest zrozumienie, jak działają różne związki (kombinatory) selektorów w CSS i jak przekładają się one na strukturę drzewa DOM. Cały problem sprowadza się do relacji między znacznikami <p>, <b> i <i>. W kodzie <i> jest bezpośrednim dzieckiem paragrafu, natomiast <b> jest zupełnie osobnym elementem, który nie zawiera w sobie <i>. Jeżeli wybierzemy selektor oparty wyłącznie na listingu nazw znaczników obok siebie, typu „b i”, to w CSS oznacza on: „dowolny element <i> znajdujący się gdziekolwiek wewnątrz elementu <b>”. W naszym HTML nie ma takiej relacji, bo <i> nie jest potomkiem <b>, więc taki selektor zwyczajnie nie trafi w żaden element. To jest dość typowe myślenie: ktoś patrzy na kolejność znaczników w jednej linii i myli ją z hierarchią zagnieżdżenia. Podobny problem występuje przy użyciu selektora „b > i”. Kombinator „>” oznacza dziecko bezpośrednie, więc „b > i” wybiera tylko te elementy <i>, które są jednym poziomem niżej w środku <b>. Ponownie, w naszym drzewie DOM <i> nie jest dzieckiem <b>, więc reguła w ogóle się nie zastosuje. Z mojego doświadczenia to częsty błąd: patrzymy na tekst „tekstu w pierwszym paragrafie” i intuicyjnie kojarzymy słowa, zamiast spojrzeć, jak naprawdę są zagnieżdżone tagi. Jeszcze inna sytuacja dotyczy selektora „p + i”. Znak „+” to tzw. selektor sąsiadującego rodzeństwa (adjacent sibling). Oznacza: „wybierz element <i>, który stoi w DOM bezpośrednio po elemencie <p>, na tym samym poziomie zagnieżdżenia”. W naszym przykładzie <i> nie jest rodzeństwem <p>, tylko jego wnętrzem, więc ten kombinator kompletnie tu nie pasuje. To też jest dość mylące, bo część osób kojarzy „+” z jakimś rodzajem powiązania, ale nie pamięta, że chodzi o dwa znaczniki obok siebie, a nie jeden w środku drugiego. Podsumowując, wszystkie błędne odpowiedzi ignorują faktyczną strukturę HTML i relacje rodzic–dziecko między elementami. Dobra praktyka jest taka, żeby przed wyborem selektora wyobrazić sobie drzewo DOM albo wręcz rozpisać je w formie wcięć. Dopiero potem dobiera się odpowiedni kombinator: spacja dla dowolnego potomka, „>” dla dziecka, „+” dla sąsiada, „~” dla dalszego rodzeństwa. Świadome korzystanie z tych narzędzi pozwala tworzyć precyzyjne, czytelne i łatwe w utrzymaniu arkusze CSS, zgodne z rekomendacjami W3C i dobrymi praktykami front-endowymi.

Pytanie 17

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. tła tekstu nagłówka drugiego poziomu

B. czcionki wszystkich nagłówków na stronie

C. czcionki nagłówka drugiego poziomu

D. tła całej witryny

Zrozumienie różnicy między background-color a innymi właściwościami CSS jest kluczowe dla poprawnego stylizowania elementów na stronach internetowych. Właściwość background-color nie wpływa na kolor czcionki, lecz jedynie na kolor tła określonego elementu. Dlatego zapis background-color: green; dla selektora h2 ustawia zielone tło dla wszystkich nagłówków drugiego stopnia na stronie. To skutecznie wyklucza możliwość, by dotyczyło to samej czcionki czy całej strony. Idea, że mógłby to być kolor czcionki dla nagłówków bądź całej strony, jest błędna, ponieważ do zmiany koloru czcionki używa się właściwości color, a nie background-color. Mylenie tych właściwości jest częstym błędem, jednak ich prawidłowe rozróżnienie pozwala na precyzyjne sterowanie wyglądem elementów. Przy zastosowaniu właściwych stylów można zyskać nie tylko na atrakcyjności wizualnej, ale także na dostępności i użyteczności. Warto też pamiętać o znaczeniu semantycznym tagów HTML, co w połączeniu z odpowiednim stylizowaniem wspiera lepszą indeksację przez wyszukiwarki internetowe oraz poprawia doświadczenie użytkownika w nawigacji po stronie. Takie zrozumienie pozwala na tworzenie stron zgodnych z aktualnymi standardami webowymi, promując dobre praktyki w projektowaniu interfejsów użytkownika. Zastosowanie zielonego tła dla <h2> jest zgodne z zasadami CSS, co pozwala na dokładne kontrolowanie stylu w nowoczesnych aplikacjach internetowych.

Pytanie 18

Jaką właściwość należy zastosować w stylu CSS, aby określić krój czcionki?

A. text-family

B. text-style

C. font-style

D. font-family

Odpowiedź 'font-family' jest poprawna, ponieważ w CSS to właśnie ta właściwość służy do określenia rodziny czcionek, które mają być używane w danym elemencie. Właściwość 'font-family' pozwala na zdefiniowanie podstawowych czcionek, a także alternatywnych, które mogą być użyte, jeśli preferowana czcionka nie jest dostępna. Przykładowo, zapisywanie: `font-family: Arial, sans-serif;` wskazuje, że przeglądarka powinna używać czcionki Arial, a w przypadku jej braku - czcionki z rodziny sans-serif. To podejście jest szczególnie ważne w kontekście tworzenia responsywnych i dostępnych interfejsów użytkownika, gdzie różne urządzenia mogą obsługiwać różne czcionki. Dodatkowo, zgodnie z wytycznymi W3C i zasadami projektowania, zaleca się określanie co najmniej dwóch czcionek: głównej i alternatywnej, aby zapewnić odpowiednią estetykę i czytelność tekstu. Znajomość właściwości 'font-family' jest kluczowa dla każdego, kto zajmuje się projektowaniem stron internetowych, pozwalając na lepsze dostosowanie wyglądu i funkcjonalności serwisów oraz aplikacji webowych.

Pytanie 19

W CSS wprowadzono formatowanie

p > i {color: blue}

Co oznacza, że tekst zapisany będzie w kolorze niebieskim

A. pogrubiony tekst akapitu

B. cały tekst akapitu bez względu na jego formatowanie

C. pochylony tekst akapitu

D. cały tekst nagłówków bez względu na ich formatowanie

Przy analizowaniu dostępnych odpowiedzi, warto zauważyć, że niektóre z nich opierają się na błędnych założeniach dotyczących działania selektorów CSS. Odpowiedź, która sugeruje, że <code>p > i</code> dotyczy całego tekstu paragrafu, jest nieprawidłowa, ponieważ selektor w tym przypadku odnosi się wyłącznie do elementów <code><i></code>, które są bezpośrednimi dziećmi elementu <code><p></code>. W CSS, operator > wskazuje na relację rodzica do dziecka, co oznacza, że tylko bezpośrednie potomki będą podlegały zastosowanemu stylowi. W związku z tym, odpowiedzi, które mówią o całym tekście paragrafu, nie uwzględniają tej kluczowej zasady działania CSS. Podobnie, odpowiedź mówiąca o pogrubionym tekście również jest mylna - stylizacja <code>color: blue</code> nie wpływa na grubość tekstu, a jedynie na kolor, co ilustruje nieporozumienie związane z właściwościami CSS. Ostatecznie, koncepcje dotyczące nagłówków w odpowiedzi również są niedokładne, ponieważ w analizowanym selektorze nie ma odniesienia do jakiegokolwiek nagłówka. Warto zatem pamiętać, że CSS wymaga precyzyjnego rozumienia struktury dokumentu oraz zastosowania odpowiednich selektorów, aby móc skutecznie modyfikować style elementów HTML.

Pytanie 20

W załączonym kodzie CSS, kolor został zapisany w formacie

color: #008000;

A. HSL

B. dziesiętnej

C. szesnastkowej

D. CMYK

Kolor w CSS może być definiowany na wiele sposobów jednak nie wszystkie formaty są odpowiednie w każdym kontekście. Format HSL reprezentuje kolory za pomocą trzech wartości: odcienia (Hue) nasycenia (Saturation) i jasności (Lightness). Choć jest intuicyjny i pozwala na łatwą manipulację jasnością i nasyceniem nie jest tak powszechnie stosowany jak format szesnastkowy zwłaszcza w dokumentach gdzie każdy bajt ma znaczenie. Format dziesiętny nie jest stosowany w CSS do reprezentacji kolorów ponieważ kolory w CSS nie są zapisywane jako wartości dziesiętne. Zamiast tego używa się systemu szesnastkowego lub funkcji takich jak rgb() lub rgba(). CMYK to przestrzeń barw stosowana w druku oparta na czterech kolorach: cyjanie magencie żółtym i czarnym (key). CMYK nie jest bezpośrednio używany w CSS ponieważ przeglądarki internetowe stosują przestrzeń barw RGB która jest lepiej dopasowana do wyświetlaczy ekranowych. Zrozumienie tych różnic jest kluczowe dla profesjonalnego zarządzania kolorami w projektach webowych. Wybór niewłaściwego formatu może prowadzić do błędów stylistycznych i niezamierzonych odstępstw od projektu dlatego ważne jest by zawsze dostosować sposób zapisu koloru do specyficznego kontekstu i wymagań projektu

Pytanie 21

W CSS zapis selektora p > i { color: red; } wskazuje, że kolor czerwony zostanie zastosowany do

A. tylko tego tekstu w znaczniku <p>, który ma przypisaną klasę o nazwie i

B. wszystkiego tekstu w znaczniku <p> z wyjątkiem tekstu w znaczniku <i>

C. wyłącznie tekstu w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

D. wszelkiego tekstu w znaczniku <p> lub wszelkiego tekstu w znaczniku <i>

Zapis selektora CSS p > i { color: red; } jest precyzyjny i wskazuje, że kolor czerwony zostanie zastosowany wyłącznie do elementów <i>, które znajdują się bezpośrednio w obrębie elementu <p>. Warto zrozumieć, że symbol '>' oznacza selektor dziecka, co oznacza, że styl dotyczy tylko tych <i>, które są bezpośrednimi potomkami <p>. Przykładowo, jeśli mamy strukturę HTML:<p>To jest <i>przykład</i> tekstu <i>z <i>zagnieżdżonym</i> elementem</i>.</p>, to tylko pierwszy znacznik <i> (czyli "przykład") będzie miał kolor czerwony, ponieważ drugi znacznik <i> jest zagnieżdżony i nie jest bezpośrednim dzieckiem <p>. W kontekście standardów CSS, stosowanie selektorów dziecka jest zalecane, gdyż pozwala na precyzyjniejsze określenie, do których elementów styl ma być zastosowany, co w praktyce ułatwia zarządzanie stylami na stronach z bardziej złożoną strukturą HTML.

Pytanie 22

Zapis CSS w postaci: ```ul{ list-style-image:url('rys.gif');}``` spowoduje, że na stronie internetowej

A. rys.gif będzie służyć jako tło dla nienumerowanej listy

B. rysunek rys.gif zostanie wyświetlony jako punkt listy nienumerowanej

C. każdy element listy zyska indywidualne tło pochodzące z grafiki rys.gif

D. punktorem nienumerowanej listy stanie się rys.gif

Podane odpowiedzi, które sugerują alternatywne interpretacje, nie są zgodne z rzeczywistością techniczną CSS. Przede wszystkim, twierdzenie, że rys.gif będzie stanowił ramkę dla listy nienumerowanej, jest błędne, ponieważ właściwość 'list-style-image' nie ma wpływu na obramowanie listy, a jedynie na sposób, w jaki są wyświetlane punkty listy. CSS do definiowania obramowań używa innych właściwości, takich jak 'border'. Z kolei stwierdzenie o wyświetlaniu rysunku rys.gif jako tł listy nienumerowanej jest mylące; to nie jest tło całej listy, ale pojedyncze punkty, które zastępują tradycyjne znaczniki. Ostatnia niepoprawna odpowiedź sugeruje, że każdy punkt listy miałby osobne tło pobrane z grafiki rys.gif. Jest to błędne, ponieważ definicja tła w CSS dotyczy całego elementu, a nie poszczególnych znaczników. Aby uzyskać różne tła dla elementów listy, należałoby użyć oddzielnych właściwości CSS dla każdego z nich zamiast 'list-style-image'. Dlatego wszystkie te odpowiedzi nie uwzględniają zasadniczej funkcji właściwości CSS, jaką jest kontrolowanie wizualnych markerów listy.

Pytanie 23

Który zapis znacznika <meta> jest poprawny w kontekście użytych atrybutów?

A. <meta name = 'description' content = 'Masz jakieś hobby? To jest strona dla Ciebie!'>

B. <meta name = '!DOCTYPE'>

C. <meta title = 'Strona dla hobbystów'>

D. <meta background = blue>

Wszystkie inne podane odpowiedzi są niepoprawne z różnych powodów. Przede wszystkim, znacznik <meta background = blue> nie jest poprawny, ponieważ atrybut 'background' nie jest standardowym atrybutem dla znacznika <meta>. W znaczniki <meta> stosuje się atrybuty takie jak 'name', 'content' czy 'http-equiv', a nie atrybuty związane z CSS, które powinny być używane w tagach takich jak <style> lub bezpośrednio w atrybutach stylu HTML. Dodatkowo, zapis <meta name = "!DOCTYPE"> jest całkowicie błędny, ponieważ 'DOCTYPE' nie jest nazwą atrybutu, który można by użyć w znaczniku <meta>. 'DOCTYPE' jest deklaracją, która informuje przeglądarkę o wersji HTML używanej w dokumencie, a nie metadanymi. Wreszcie, zapis <meta title = "Strona dla hobbystów"> jest również niepoprawny, ponieważ 'title' nie jest atrybutem akceptowanym przez znacznik <meta>. Tytuł strony powinien być umieszczony w znaczniki <title>, który znajduje się w sekcji <head> dokumentu HTML. Te błędy pokazują, jak ważne jest przestrzeganie standardów i zrozumienie struktury HTML, aby skutecznie wykorzystywać znaczniki <meta> w optymalizacji stron internetowych.

Pytanie 24

Do zdefiniowania listy nienumerowanej w języku HTML, jaki znacznik należy zastosować?

A. <ul>

B. <ol>

C. <dt>

D. <dd>

Znaczniki <dd> i <dt> są używane w kontekście definicji terminów w listach definicyjnych. <dd> oznacza definicję, a <dt> służy do oznaczania terminu, który jest definiowany. Te znaczniki są częścią struktury definicyjnej <dl> (definition list), która nie jest odpowiednia do tworzenia list nienumerowanych. Użycie tych znaczników w kontekście list nienumerowanych może prowadzić do niejasności w interpretacji treści przez przeglądarki oraz narzędzia SEO, które analizują strukturę dokumentu. Z kolei znacznik <ol> oznacza listę uporządkowaną, gdzie elementy są numerowane w określonej kolejności. Użycie <ol> w miejsce <ul> byłoby błędne, gdyż nie spełniałoby celu stworzenia listy nienumerowanej. Każdy z tych znaczników pełni wyspecjalizowaną funkcję w HTML i ich użycie w niewłaściwym kontekście może prowadzić do problemów z dostępnością, a także negatywnie wpłynąć na pozycję strony w wynikach wyszukiwania.

Pytanie 25

Przedstawiony serwis internetowy służy do walidacji

A. dokumentów HTML.

B. skryptów JavaScript.

C. bazy danych SQL.

D. arkuszy stylów.

Twoja odpowiedź jest prawidłowa. Strona internetowa 'CSS Validation Service' jest narzędziem stworzonym przez konsorcjum W3C do walidacji arkuszy stylów CSS. W3C, czyli World Wide Web Consortium, to międzynarodowa społeczność, która rozwija otwarte standardy mające na celu długoterminowe wzrost i rozwój sieci WWW. Narzędzie do walidacji CSS zapewnia mechanizm sprawdzania kodu CSS pod kątem zgodności ze standardami W3C. Dzięki temu deweloperzy mogą upewnić się, że ich arkusze stylów są poprawne, co jest kluczowe dla zapewnienia prawidłowego wyglądu i działania stron internetowych na różnych platformach i przeglądarkach. Walidator CSS pomaga także naprawić ewentualne błędy w kodzie. To jest praktyczne zastosowanie tej usługi - utrzymanie jednolitych standardów kodowania, co prowadzi do większej interoperacyjności pomiędzy różnymi technologiami i narzędziami.

Pytanie 26

Która z wartości tekstowych nie odpowiada podanemu wzorcowi wyrażenia regularnego?

(([A-ZŁŻ][a-ząęóżźćńłś]{2,})(-[A-ZŁŻ][a-ząęóżźćńłś]{2,}))?

A. Jelenia Góra

B. Nowakowska-Kowalska

C. Kowalski

D. Kasprowicza

Odpowiedzi takie jak 'Kasprowicza', 'Nowakowska-Kowalska' i 'Kowalski' są w porządku, bo pasują do wzoru wyrażenia regularnego. Wzór mówi, że tekst musi zaczynać się od wielkiej litery i mieć przynajmniej dwie małe litery zaraz po. 'Kasprowicza' to nazwisko, które zaczyna się od wielkiej litery, więc jest ok. 'Nowakowska-Kowalska' też jest good, bo ma segment po myślniku z kolejną wielką literą. Z 'Kowalskim' sprawa wygląda podobnie, bo również spełnia wymogi. Często ludzie mylą, co dokładnie oznacza wzór i co przynależne do niego. Wydaje się, że każde słowo z wielką literą pasuje, ale nie do końca tak to działa. Kluczowe jest, żeby zrozumieć dokładne zasady, bo wyrażenia regularne są bardzo precyzyjne i wymagają zwrócenia uwagi na detale. Dobrze jest też testować swoje wzory, by sprawdzić, czy działają w różnych sytuacjach.

Pytanie 27

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

A. title

B. dfn

C. alt

D. name

Znacznik <abbr> w HTML pełni rolę semantyczną, pomagając w oznaczaniu skrótów i akronimów. Atrybut alt jest stosowany w znacznikach <img> do opisywania obrazów, co jest istotne dla dostępności i SEO, ale nie ma związku ze znacznikami tekstowymi jak <abbr>. Alt informuje o treści obrazu, co jest kluczowe dla użytkowników niewidzących, lecz nie pełni funkcji rozwijania skrótów tekstowych. Atrybut dfn służy do definiowania terminów w tekście, zazwyczaj używany w połączeniu ze znacznikiem <dfn>, a nie <abbr>. Chociaż dfn dostarcza definicji, nie jest używany do rozwijania skrótów. Atrybut name nie jest związany z rozwijaniem tekstu ani z <abbr>. Jest on stosowany głównie w formularzach HTML do identyfikacji elementów, takich jak <input>, umożliwiając ich rozróżnienie. Mylenie tych atrybutów wynika często z braku zrozumienia ich specyficznych zastosowań w kontekście HTML i dostępności. Właściwe używanie atrybutów to klucz do tworzenia semantycznie poprawnych i dostępnych stron internetowych.

Pytanie 28

Jaką wartość w formacie RGB będzie miała barwa oznaczona kodem heksadecymalnym: #1510FE?

A. rgb(21, 16, FE)

B. rgb(21, 16, 254)

C. rgb(15, 10, FE)

D. rgb(21, 16, 255)

Wartości RGB w heksadecymalnym nie zawsze są oczywiste i często trzeba je przeliczać. Odpowiedzi rgb(15, 10, FE) i rgb(21, 16, 255) nie są do końca poprawne, bo źle zinterpretowano wartości z formatu hex. W pierwszym przypadku użyto dobrego formatu, ale liczby 15 i 10 zostały źle przeliczone na dziesiętny. '15' z hex to 21, '10' to 16, więc to jest ok, ale 'FE' powinno dać 254, a nie zostać jako 'FE' lub przeliczone na 255. W drugiej błędnej odpowiedzi, pamiętaj, że wartości RGB muszą się mieścić w przedziale 0-255, a przeliczenie 'FE' na 255 to duża pomyłka. Często się zdarza, że ludzie pomijają te obliczenia i przyjmują wartości hex bez konwersji, co powoduje zamieszanie w kolorach w projektach graficznych i aplikacjach. Zrozumienie przeliczenia heksadecymalnych wartości na RGB to klucz do tworzenia fajnych wizualizacji.

Pytanie 29

Element

<meta charset="utf-8">

definiuje metadane dotyczące strony internetowej, odnosząc się do

A. opisu witryny

B. słów kluczowych

C. języka witryny

D. kodowania znaków

Ten element <meta charset="utf-8"> jest naprawdę ważny w nagłówku stron HTML, bo to on mówi przeglądarkom, jak odczytywać znaki w Twoim dokumencie. Dzięki temu tekst wyświetla się poprawnie na różnych urządzeniach. UTF-8 jest najbardziej popularnym kodowaniem, bo obsługuje niemal wszystkie znaki z różnych języków, co sprawia, że Twoja strona może być bardziej uniwersalna. Na przykład, jeśli masz tekst po polsku, to użycie UTF-8 upewnia się, że takie znaki jak ą czy ć będą prawidłowo pokazane. Właśnie dlatego warto stosować UTF-8, bo to, co zaleca W3C, jest bardzo sensowne - chodzi przecież o to, żeby strona była dostępna dla każdego, niezależnie od tego, z jakiego języka korzysta.

Pytanie 30

Aby umieścić plik wideo na stronie internetowej z widocznymi przyciskami sterującymi oraz zapętlonym odtwarzaniem, należy w znaczniku <video> użyć atrybutów

A. controls i autoplay

B. loop i muted

C. autoplay i preload

D. controls i loop

Odpowiedzi, które wybrałeś, opierają się na nie do końca trafnych założeniach co do funkcji atrybutów w znaczniku <video>. Wybór "loop" i "muted" to nietrafny strzał, bo choć "loop" jest potrzebny do zapętlenia, to atrybut "muted" w ogóle nie wpływa na dostępność przycisków sterujących. Wyciszenie wideo jest fajne, zwłaszcza przy automatycznym odtwarzaniu, ale nie jest konieczne, żeby przyciski były widoczne. Jeśli chodzi o "autoplay" i "preload", to sprawa wygląda podobnie - "autoplay" uruchamia wideo samo, ale bez przycisków to raczej nie jest komfortowe dla użytkownika. A "preload" odnosi się do wstępnego ładowania, co może pomóc w wydajności, ale znowu, nie ma to wpływu na to, jak możemy z tym wideo interagować. Te błędne odpowiedzi pokazują typowe nieporozumienia co do funkcji atrybutów, które są naprawdę ważne do stworzenia dobrego doświadczenia na stronach. Ludzie czasami myślą, że inne atrybuty mogą zastąpić konieczność interakcji z materiałem wideo, co może prowadzić do frustracji i złego odbioru treści.

Pytanie 31

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. B

B. rys. C

C. rys. A

D. rys. D

Odpowiedzi inne niż rys. C nie są poprawne z powodu błędnego zrozumienia jak działa atrybut rowspan w języku HTML. Gdy komórka tabeli posiada atrybut rowspan oznacza to że komórka ta rozciąga się pionowo na określoną liczbę wierszy. W przypadku braku zrozumienia tego mechanizmu można błędnie przypuszczać że każda komórka zaczyna się i kończy w obrębie jednego wiersza. Taki tok myślenia prowadzi do niepoprawnego rozmieszczenia elementów tabeli jak w rys. A lub D gdzie nie wzięto pod uwagę łączenia komórek w pionie. W odpowiedzi A pierwsza komórka nie obejmuje dwóch wierszy co jest sprzeczne z kodem. W odpowiedzi B z kolei drugi wiersz zawiera dwie komórki co również jest sprzeczne z kodem który definiuje tylko jedną. Takie błędy często wynikają z braku doświadczenia w używaniu zaawansowanych funkcji HTML co może prowadzić do mylnych wyobrażeń o tym jak kod przekłada się na widok strony. Atrybuty rowspan i colspan są kluczowe w kontekście strukturalnego podejścia do budowy stron internetowych i ich poprawne użycie ma istotne znaczenie dla dostępności oraz zrozumienia danych przez użytkowników i technologie wspomagające. Ważne jest także zrozumienie różnic między tworzeniem struktury a prezentacją co jest możliwe dzięki CSS zamiast nadużywania tabel do layoutów.

Pytanie 32

Który selektor stosuje formatowanie dla akapitów tekstu z klasą tekst oraz dla elementu blokowego o ID obrazki?

A. p#tekst + div.obrazki

B. p.tekst + div#obrazki

C. p.tekst, div#obrazki

D. p#tekst, div.obrazki

Wybór selektorów w odpowiedziach niepoprawnych często wynika z nieporozumienia dotyczącego składni CSS oraz specyfiki selektorów. W przypadku selektora 'p#tekst', należy zauważyć, że nie jest on poprawny, ponieważ identyfikator (ID) nie może być użyty w kontekście elementu, który już ma przypisaną klasę. W CSS, ID powinno być unikalne dla danego dokumentu, a klasa może być stosowana wielokrotnie. W ten sposób, 'p#tekst' sugeruje element <p> z ID 'tekst', co koliduje z ideą używania klas. Dalsza analiza selektorów jak 'p.tekst + div.obrazki' wskazuje na zastosowanie kombinacji selektorów, co nie pasuje do wymagań zadania. Operator '+' wskazuje na sąsiednie elementy, co oznacza, że styl będzie stosowany tylko do <div> bezpośrednio po <p>, co w przypadku tej konkretnej logiki nie wprowadza pożądanych efektów. Podobnie, selektor 'div.obrazki' sugeruje, że klasa 'obrazki' może być stosowana do każdego elementu <div>, co nie odnosi się do konkretnego ID. W praktyce, aby wyeliminować błędy, zaleca się gruntowne zrozumienie hierarchii i specyfiki selektorów w CSS oraz ich zastosowania w kontekście HTML. Przykładowo, stosując poprawny selektor, można uniknąć nadpisywania stylów przez inne reguły i zapewnić, że wszystkie elementy są odpowiednio stylizowane zgodnie z zamierzeniami projektowymi.

Pytanie 33

Jaki znacznik w HTML jest używany do oznaczania fragmentów tekstu jako kodu programistycznego?

A. <blockquote> </blockquote>

B. <span> </span>

C. <code> </code>

D. <em> </em>

<code> to znacznik w HTML, który służy do oznaczania fragmentów tekstu jako kodu komputerowego. Użycie tego znacznika jest zgodne z wytycznymi W3C i stanowi istotny element semantycznej struktury dokumentów HTML. Zastosowanie <code> pozwala na wyróżnienie fragmentów tekstu, takich jak kawałki kodu źródłowego czy polecenia, co jest niezwykle ważne w kontekście programowania oraz dokumentacji technicznej. Przykłady użycia obejmują: <code>console.log('Hello, World!');</code> w JavaScript, co przekłada się na lepszą czytelność i zrozumienie dla programistów. Stosując <code>, przeglądarki często renderują ten tekst w sposób wyróżniający, na przykład z użyciem czcionki monospace, co dodatkowo podkreśla jego znaczenie w kontekście kodowania. Oprócz tego, znacznik <code> ma korzystny wpływ na SEO, ponieważ poprawia semantykę treści, co jest doceniane przez wyszukiwarki. W kontekście standardów W3C, <code> należy do rodziny znaczników, które mają na celu ułatwienie prezentacji i interpretacji treści webowych.

Pytanie 34

Podczas walidacji witryn internetowych nie analizuje się

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

B. działania hiperlinków

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

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

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

Pytanie 35

W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie zastosowany

A. odnośnikowi, gdy kursor myszy na nim spocznie

B. dla każdego odnośnika bez względu na jego aktualny stan

C. dla wszystkich nieodwiedzonych odnośników

D. dla wszystkich odwiedzonych odnośników

Pseudoklasa hover w CSS jest stosowana do definiowania stylu elementu, gdy użytkownik umieszcza nad nim kursor myszy. W kontekście odnośników, stosowanie pseudoklasy hover pozwala na dynamiczne dostosowywanie ich wyglądu, co jest kluczowe dla poprawy interaktywności i użyteczności stron internetowych. W przykładzie a:hover { font-weight: bold; } styl pogrubiony zostanie zastosowany do odnośnika, gdy użytkownik najedzie na niego kursorem myszy. Jest to częsta praktyka w projektowaniu stron, która pomaga użytkownikom łatwiej identyfikować aktywne elementy nawigacyjne. Standardy sieciowe, takie jak W3C, rekomendują stosowanie takich interakcji w celu poprawy doświadczenia użytkownika. Praktyczne zastosowanie pseudoklasy hover jest szerokie, od prostych efektów wizualnych, po skomplikowane animacje i przejścia. Ważne jest jednak, aby pamiętać o zapewnieniu alternatywnych metod interakcji dla użytkowników korzystających z urządzeń dotykowych, gdzie hover nie jest obsługiwany. Zrozumienie i właściwe stosowanie pseudoklas w CSS jest podstawą tworzenia nowoczesnych i dostępnych interfejsów użytkownika.

Pytanie 36

W języku HTML 5 do grupowania powiązanych ze sobą elementów formularza używa się znacznika

A. <fieldset>

B. <option>

C. <optgroup>

D. <summary>

W tym pytaniu chodzi o semantykę HTML5 związaną z formularzami, więc warto spokojnie rozłożyć na czynniki wszystkie podane znaczniki. Częsty błąd polega na tym, że widząc kilka tagów kojarzonych luźno z formularzami, wybieramy któryś „na czuja”, zamiast zastanowić się, do czego dokładnie został zaprojektowany w specyfikacji HTML. Znacznik <summary> w ogóle nie służy do obsługi formularzy. Jest on elementem używanym wewnątrz <details> i odpowiada za nagłówek rozwijanego bloku. To bardziej narzędzie do tworzenia prostych elementów typu „pokaż/ukryj treść”, a nie do grupowania pól formularza. W formularzu można go użyć tylko jako zwykły element HTML, ale nie nadaje on żadnej specjalnej semantyki powiązanej z inputami czy etykietami. Znacznik <option> jest ściśle związany z kontrolką <select>. Reprezentuje pojedynczą opcję do wyboru w liście rozwijanej. On nie grupuje niczego, raczej sam jest elementem składowym większej struktury. Mylenie <option> z elementami grupującymi wynika często z tego, że w formularzach pojawia się dużo nawiasów ostrych i człowiek podświadomie kojarzy wszystkie z „formularzem”, ale rola <option> jest bardzo wąska: pojedyncza wartość w <select>. Z kolei <optgroup> faktycznie coś grupuje, ale tylko wewnątrz listy <select>. Umożliwia pogrupowanie opcji w logiczne sekcje, np. „Polska”, „Niemcy”, „Czechy” jako grupy krajów w jednym polu wyboru. To jednak nie jest ogólny mechanizm do grupowania różnych elementów formularza, tylko specjalistyczny element przeznaczony wyłącznie do porządkowania <option>. Dlatego nie zastąpi <fieldset>, który może otaczać wiele różnych kontrolek: inputy, selecty, textarea, przyciski itd. Podstawą dobrej odpowiedzi jest zrozumienie, że tylko <fieldset> ma w specyfikacji HTML5 jasno zdefiniowaną rolę „grouping form controls”. Pozostałe znaczniki pełnią inne, wyspecjalizowane funkcje i nie nadają całej grupie pól formularza właściwej semantyki ani nie współpracują tak dobrze z technologiami asystującymi. W praktyce, jeśli chcesz logicznie podzielić formularz na sekcje, zawsze myśl w pierwszej kolejności o <fieldset> + <legend>, a dopiero potem o innych elementach, które pełnią bardziej szczegółowe role.

Pytanie 37

Które z podanych formatów NIE JEST zapisane w języku CSS?

A. A

B. C

C. B

D. D

Odpowiedzi A, B i D przedstawiają metody formatowania za pomocą CSS, które są zgodne z nowoczesnymi standardami projektowania stron internetowych. W odpowiedzi A mamy do czynienia z osadzonym stylem CSS w elemencie style, co pozwala na definiowanie wyglądu elementów HTML bezpośrednio w znaczniku strony. Choć nie jest to najczęściej zalecana metoda, ma swoje zastosowanie w przypadku prostych stron lub pojedynczych dokumentów. Odpowiedź B przedstawia zewnętrzny plik CSS, co jest najlepszą praktyką w projektowaniu stron, ponieważ oddziela stylowanie od struktury, ułatwiając zarządzanie i zmiany w wyglądzie całej witryny. Odpowiedź D ukazuje użycie atrybutu style w elemencie HTML, co jest formą stylizacji inline. Ta metoda jest użyteczna w sytuacjach, gdy chcemy zastosować unikalny styl do pojedynczego elementu bez wpływu na resztę strony, choć nie jest zalecana do powszechnego użycia z powodu utrudnionego zarządzania i potencjalnych problemów z dostępnością. Wszystkie te metody wykorzystują CSS, co zapewnia spójność i elastyczność w zastosowaniu stylów, a także zgodność z najnowszymi standardami internetowymi. Główne nieporozumienie związane z odpowiedzią C wynika z faktu, że atrybut bgcolor pochodzi z HTML i nie jest częścią CSS, co czyni go przestarzałym w kontekście nowoczesnego projektowania stron internetowych. Zrozumienie tych różnic jest kluczowe dla efektywnego wykorzystania CSS w projektach webowych.

Pytanie 38

W HTML atrybut znacznika video, który umożliwia ciągłe odtwarzanie, to

A. muted

B. loop

C. poster

D. controls

Atrybut loop w znaczniku video jest kluczowy dla zapewnienia, że wideo będzie odtwarzane w nieskończoność, co jest szczególnie przydatne w przypadku prezentacji multimedialnych czy tła w aplikacjach webowych. Umożliwia to automatyczne powtarzanie treści bez interwencji użytkownika, co może poprawić doświadczenia użytkownika oraz skuteczność przekazu. Zgodnie z dokumentacją HTML5, aby użyć atrybutu loop, wystarczy dodać go do znacznika video, co pozwala na osiągnięcie zamierzonego efektu. Przykładem może być: <video src='video.mp4' loop autoplay></video>, gdzie wideo będzie się odtwarzać automatycznie i w kółko. Użycie tego atrybutu jest szczególnie istotne w kontekście interaktywnych aplikacji i gier, gdzie ciągłość odtwarzania może być kluczowa dla zaangażowania odbiorcy. Atrybut loop jest częścią specyfikacji W3C dotyczącej HTML5, która promuje dostępność i elastyczność w tworzeniu nowoczesnych aplikacji internetowych.

Pytanie 39

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}

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

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

B. wszystkie akapity.

C. tylko elementy tekstowe typu <p>, <h1>.

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

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

Pytanie 40

W CSS zapis selektora p > i { color: red;} wskazuje, że kolorem czerwonym zostanie zdefiniowany

A. tylko ten tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

B. wszelki tekst w znaczniku <p>, z wyjątkiem tych w znaczniku <i>

C. tylko ten tekst w znaczniku <p>, który posiada klasę o nazwie i

D. wszelki tekst w znaczniku <p> lub wszelki tekst w znaczniku <i>

Kiedy analizujemy alternatywne odpowiedzi na to pytanie, zauważamy, że pojawiają się w nich fundamentalne nieporozumienia dotyczące selektorów CSS i ich działania. Na przykład, stwierdzenie, że każdy tekst w znaczniku <p> lub każdy tekst w znaczniku <i> zostanie sformatowany, jest błędne, ponieważ nie uwzględnia hierarchii i zależności między tymi znacznikami. CSS działa na zasadzie kaskadowości i dziedziczenia, co oznacza, że style są stosowane w kontekście struktury dokumentu HTML. W tym przypadku, ponieważ operator > wskazuje na bezpośrednie powiązania, tekst w znaczniku <i>, który nie znajduje się bezpośrednio w <p>, nie będzie stylizowany na czerwono. Z kolei stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> zostanie sformatowany, jest także mylące, jako że stylizacja dotyczy wyłącznie elementów <i>, a nie całego znacznika <p>. Takie podejście może prowadzić do chaosu w stylizacji, gdyż nie uwzględnia, jak selektory mogą wpływać na stylizację w kontekście ich hierarchii. Również stwierdzenie, że styl dotyczy tylko tekstu w <p> z klasą o nazwie i, ignoruje fakt, że selektor w ogóle nie odnosi się do klas, tylko bezpośrednich relacji między znacznikami. Zrozumienie struktury DOM i zastosowania selektorów jest kluczowe dla efektywnej pracy z CSS, a błędne interpretacje mogą prowadzić do niepożądanych rezultatów w projekcie.

Rozpocznij nowy egzamin

Powrót do strony głównej