Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 kwietnia 2026 11:45
Data zakończenia: 8 kwietnia 2026 11:45

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>

A. href = "r2"

B. href = "sekcja2"

C. href = "#r2"

D. href = "#sekcja2"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś 'href="#r2"', co jest poprawne, ponieważ w HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. W tym przypadku, miejsce docelowe to identyfikator (id) elementu na tej samej stronie. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. W tym konkretnym przypadku, 'r2' jest identyfikatorem rozdziału 2 na stronie, dlatego 'href="#r2"' skieruje odnośnik do tego rozdziału. W praktyce, używanie identyfikatorów pozwala na tworzenie skomplikowanych stron z wieloma sekcjami, gdzie odsyłacze umożliwiają łatwe i szybkie nawigowanie. To jest zgodne ze standardami i dobrymi praktykami dla tworzenia stron internetowych.

Pytanie 2

Aby wyciszyć dźwięk w filmie odtwarzanym w przeglądarce, do podanej definicji znacznika <video> powinien zostać dodany atrybut <video> <source src="film.mp4" type="video/mp4"> </video>

A. muted

B. loop

C. controls

D. autoplay

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'muted' w znaczniku <video> jest kluczowy dla zarządzania dźwiękiem w odtwarzanych filmach. Gdy dodamy atrybut 'muted', zapewniamy, że film będzie odtwarzany bez dźwięku, co jest szczególnie istotne w kontekście doświadczenia użytkownika na stronie internetowej. W praktyce, wiele stron korzysta z automatycznego odtwarzania filmów w tle, co jest popularne w serwisach informacyjnych oraz mediach społecznościowych. Bez dźwięku, użytkownicy nie są rozpraszani, a strona nie wpływa negatywnie na ich doświadczenie przeglądania. Zgodnie z najlepszymi praktykami, należy również pamiętać o dostępności – filmy bez dźwięku mogą być łatwiej przyswajalne dla osób z problemami ze słuchem, a także unikamy sytuacji, w której nagłe dźwięki mogłyby wywołać dyskomfort. Atrybut 'muted' jest więc nie tylko funkcjonalny, ale także zgodny z zasadami projektowania stron internetowych, które stawiają na komfort użytkownika.

Pytanie 3

Symbol, który pojawia się przed adresem w pasku adresowym przeglądarki internetowej lub przy tytule otwartej karty, określany jest mianem

A. favicon

B. iConji

C. webicon

D. emoticon

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Favicon, czyli ikona ulubionej strony, to mały obrazek wyświetlany w przeglądarkach internetowych obok adresu URL, w zakładkach oraz na kartach przeglądarki. Favicon jest istotnym elementem identyfikacji wizualnej witryny, ponieważ pozwala użytkownikom na szybkie rozpoznawanie stron, które odwiedzają. Tworzenie faviconu wiąże się z określonymi standardami, ponieważ rozmiar pliku powinien wynosić 16x16 lub 32x32 pikseli. Można go zapisać w formacie .ico, .png, .gif, co zapewnia szeroką kompatybilność z różnymi przeglądarkami. Wdrożenie faviconu poprawia UX, zwiększa profesjonalizm strony i wpływa na jej rozpoznawalność. Dobrym przykładem zastosowania faviconu jest umieszczanie go na stronie głównej, co ułatwia zapamiętywanie marki oraz zwiększa szanse na powrót użytkowników do witryny. Właściwe przygotowanie faviconu oraz jego umiejscowienie w kodzie HTML (z wykorzystaniem tagu <link rel="icon" href="ścieżka_do_faviconu">) to dobrych praktyk, które warto stosować w każdej nowoczesnej aplikacji webowej.

Pytanie 4

Cechy przedstawione w tabeli dotyczą?

Strony ustalają dążenie do konkretnego wyniku
Ważny jest efekt pracy, a nie sposób jej realizacji
Zleceniodawca przekazuje za wykonawcę zaliczkę na podatek dochodowy

A. umowy o pracę

B. umowy agencyjnej

C. umowy zlecenia

D. umowy o dzieło

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Umowa o dzieło to rodzaj umowy cywilnoprawnej, która koncentruje się na osiągnięciu określonego rezultatu pracy, a nie na samym procesie jej wykonywania. Jest to typowy kontrakt, w którym strony uzgadniają konkretny efekt, jaki ma być osiągnięty, na przykład stworzenie projektu architektonicznego, wykonanie rzeźby czy napisanie programu komputerowego. W ramach tego typu umowy, wykonawca, czyli osoba realizująca zamówienie, nie podlega typowym regulacjom dotyczącym czasu pracy, które są charakterystyczne dla umów o pracę. Zleceniodawca zobowiązany jest natomiast do odprowadzenia zaliczki na podatek dochodowy, co odróżnia tę umowę od innych typów umów cywilnoprawnych, takich jak na przykład umowa zlecenia, gdzie obowiązek podatkowy może być regulowany odmiennie. Umowa o dzieło jest często wybierana w sytuacjach, gdzie kluczowe jest dostarczenie konkretnego produktu lub usługi, a czas i sposób realizacji mają mniejsze znaczenie.

Pytanie 5

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #FF1016

B. #251022

C. #FF0A16

D. #2551022

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #FF0A16 jest poprawna, ponieważ kod RGB (255, 10, 22) jest konwertowany na format heksadecymalny, gdzie każdy z trzech kanałów (czerwony, zielony, niebieski) jest przedstawiany przez dwie cyfry szesnastkowe. W kodzie RGB wartość 255 dla kanału czerwonego odpowiada szesnastkowej wartości FF, wartość 10 dla kanału zielonego odpowiada wartości 0A, a wartość 22 dla kanału niebieskiego odpowiada wartości 16. Łącząc te wartości, otrzymujemy #FF0A16. Praktyczne zastosowania kodów kolorów w formacie heksadecymalnym są powszechne w projektowaniu stron internetowych oraz grafice komputerowej, gdzie umożliwiają precyzyjne definiowanie kolorów. Warto również pamiętać, że standard W3C zaleca używanie formatu heksadecymalnego w CSS, co czyni go bardziej efektywnym dla deweloperów. Ponadto, znajomość konwersji kolorów RGB na heksadecymalny jest kluczowa dla każdego, kto zajmuje się designem i programowaniem wizualnych interfejsów użytkownika.

Pytanie 6

Na ilustracji przedstawiono strukturę bloków na stronie internetowej. Który z poniższych fragmentów CSS odpowiada takim ustawieniom? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. #pierwszy {float:left; width:30%; } #drugi {clear:both; width:70%; } #trzeci {float:left; width:70%; } #czwarty {clear:both; }

B. #pierwszy {float:left; width:30%;} #drugi {float:left; width:70%;} #trzeci {float:left; width:70%;} #czwarty {clear:both; }

C. #pierwszy { width: 30%; } #drugi { width: 70%; } #trzeci { width: 70%; } #czwarty { width: 100%; }

D. #pierwszy{float:left; width:30%;} #drugi {clear:both; width:70%;} #trzeci {clear:both; width:70%;} #czwarty {float:left; width:100%;}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź pierwsza jest prawidłowa, gdyż prawidłowo wykorzystuje właściwość float w stylach CSS, aby uzyskać pożądany układ bloków na stronie internetowej. Float pozwala elementom przemieszczać się na lewą lub prawą stronę kontenera, co jest kluczowe w tworzeniu layoutów. W tym przypadku #pierwszy, #drugi i #trzeci mają ustawione float:left, co umożliwia ich równoległe ustawienie w poziomie aż do momentu, gdy szerokości kontenera są zapełnione. Następnie blok #czwarty wymaga clear:both, aby przemieszczać się poniżej wszystkich poprzednich elementów z ustawionym float. To powszechna technika stosowana w projektowaniu responsywnych układów stron, gdzie równoległe pozycjonowanie elementów pozwala na efektywne wykorzystanie przestrzeni. Float w połączeniu z odpowiednimi szerokościami procentowymi pomaga tworzyć elastyczne projekty, które dobrze skalują się na różnych urządzeniach, co jest zgodne z nowoczesnymi standardami web developmentu. Ponadto zrozumienie działania float i clear jest fundamentem przy tworzeniu klasycznych layoutów typu grid przed wprowadzeniem nowoczesnych rozwiązań takich jak Flexbox czy CSS Grid, co pokazuje zrozumienie podstawowych zasad CSS.

Pytanie 7

W CSS należy ustawić tło dokumentu na obraz rys.png, który powinien się powtarzać tylko w poziomie. Którą definicję trzeba przypisać selektorowi body?

A. {background-image: url("rys.png"); background-repeat: repeat;}

B. {background-image: url("rys.png"); background-repeat: repeat-x;}

C. {background-image: url("rys.png"); background-repeat: round;}

D. {background-image: url("rys.png"); background-repeat: repeat-y;}

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź {background-image: url("rys.png"); background-repeat: repeat-x;} jest poprawna, ponieważ dokładnie definiuje sposób wyświetlania tła w dokumencie HTML. W języku CSS, właściwość background-image ustala źródło obrazu, który ma być użyty jako tło, a background-repeat kontroluje, jak ten obraz się powtarza. Ustawienie repeat-x sprawia, że obraz będzie powtarzany tylko w poziomie, co oznacza, że będzie się ukazywał wielokrotnie od lewej do prawej, ale nie będzie powtarzany w pionie. Taki sposób wyświetlania tła jest przydatny w wielu kontekstach, na przykład w projektowaniu stron internetowych, gdzie chcemy uzyskać efekt pasów lub linii w poziomie, bez nadmiaru treści w pionie. Szereg dobrych praktyk w CSS wskazuje, że należy dbać o efektywność i estetykę, a odpowiednie powtarzanie tła może znacząco wpłynąć na wizualną atrakcyjność strony. Ponadto, użycie właściwego formatu URL i umiejętne stosowanie obrazów tła może poprawić doświadczenia użytkowników, podczas gdy nieodpowiednie podejście może prowadzić do problemów z wydajnością, szczególnie na urządzeniach mobilnych, gdzie ładowanie zbyt dużych lub nieoptymalnych obrazów może obniżyć responsywność strony.

Pytanie 8

W kaskadowych arkuszach stylów do oznaczenia selektora klasy wykorzystuje się symbol

A. . (kropka)

B. #

C. : (dwukropek)

D. *

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź . (kropka) jest prawidłowa, ponieważ w kaskadowych arkuszach stylów (CSS) selektor klasy definiuje się poprzez użycie symbolu kropki przed nazwą klasy. Przykład: jeśli mamy klasę o nazwie 'przyklad', to w CSS zapisujemy selektor jako '.przyklad'. Taki selektor pozwala na stosowanie określonych stylów do wszystkich elementów HTML, które zawierają tę klasę. Dobrą praktyką jest używanie klas do grupowania elementów, co ułatwia zarządzanie stylami oraz zwiększa czytelność kodu. Na przykład, możemy zdefiniować wspólny wygląd dla przycisków: .przycisk { background-color: blue; color: white; }. Ponadto, korzystanie z klas zamiast identyfikatorów (które definiuje się przez symbol #) pozwala na wielokrotne stosowanie jednego stylu w różnych miejscach dokumentu. Klasy są bardziej elastyczne i umożliwiają lepszą organizację kodu, co jest zgodne z zasadami DRY (Don't Repeat Yourself) w programowaniu.

A. D.

B. C.

C. B.

D. A.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dokładnie tak powinien wyglądać ten formularz! Zwróć uwagę, jak HTML interpretuje znaczniki – one wymuszają przejście do nowej linii, więc w kodzie wyjściowym każda sekcja obowiązków pojawi się osobno, pod sobą. To, że jeden z checkboxów ma atrybuty disabled oraz checked, powoduje, że jest domyślnie zaznaczony, ale nie można go odznaczyć ani zaznaczyć ponownie – to ważny niuans, bo czasem zapomina się, że disabled nie oznacza tylko „wyszarzony”, ale też „nie bierz udziału w wysyłaniu formularza”. Takie wykorzystanie checkboxów jest powszechne, szczególnie jeśli chcesz pokazać użytkownikowi pewne stałe informacje (np. obowiązek, którego nie można uniknąć). Z mojego doświadczenia, bardzo często w praktycznych projektach „disabled” stosuje się np. przy wymaganych oświadczeniach, gdzie użytkownik ma tylko do wglądu informację, że coś już jest włączone i nie może tego zmienić. No i jeszcze – checked przy pisaniu kodu powoduje, że checkbox jest domyślnie zaznaczony, co jest zgodne z kodem źródłowym. Same nazwy pól (czyli atrybuty name i value) zostaną wysłane do serwera tylko dla tych pól, które nie są disabled i użytkownik je zaznaczył. To też jest bardzo praktyczna rzecz, bo pozwala precyzyjnie sterować tym, co trafia do backendu. Moim zdaniem taka forma zapisu formularza to dobry punkt wyjścia do dalszej rozbudowy – łatwo dodać tutaj walidację, obsługę JavaScript czy zastosować style CSS. Trzymanie się tej składni ułatwia też potem pracę zespołową, bo jest czytelna i zgodna z oczekiwaniami innych programistów. Podsumowując, wybrałeś opcję najbliższą temu, co wyświetli przeglądarka na bazie danego kodu HTML – i to jest podejście zgodne ze standardami, doceniane w branży.

Pytanie 10

Która lista jest interpretacją przedstawionego kodu?

<ol>
    <li>muzyka
        <ul>
            <li>Wpis1</li>
            <li>Wpis2</li>
        </ul>
    </li>
    <li>filmy
        <ul>
            <li>Wpis3</li>
            <li>Wpis4</li>
        </ul>
    </li>
</ol>

A. Lista uporządkowana z dwoma składnikami, z których każdy ma wewnętrzną listę nieuporządkowaną.

B. Lista nieuporządkowana zawierająca wszystkie składniki, jeden za drugim.

C. Lista uporządkowana z podpunktami zapisanymi w formie numeracji dziesiętnej (np. 1.1, 1.2).

D. Lista uporządkowana z sześcioma następującymi elementami.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Przedstawiony kod HTML jest przykładem zagnieżdżonych list uporządkowanych i nieuporządkowanych. Na poziomie głównym użyto listy uporządkowanej oznaczonej tagiem <ol> która tworzy listę numerowaną. Listy zagnieżdżone opisane są za pomocą tagu <ul> co oznacza listy nieuporządkowane punktowane. Wewnętrzna struktura kodu pokazuje jak zagnieżdżać listy aby tworzyć hierarchiczne struktury które są często stosowane na stronach internetowych do organizowania treści. Taka organizacja danych jest szczególnie przydatna w przypadku tworzenia menu rozwijanych lub katalogów. Aby zrozumieć prawidłowość tej struktury należy zapoznać się z zasadą zagnieżdżania elementów w HTML gdzie jeden element może zawierać inne w celu tworzenia bardziej złożonych układów. Popularnymi zastosowaniami są również generowanie drzew katalogów oraz nawigacji w witrynach. Standardy HTML sugerują takie podejście do strukturyzacji danych aby były one semantycznie poprawne a zarazem łatwe do odczytania przez przeglądarki internetowe co zwiększa ich dostępność i użyteczność. Praktyka ta jest zgodna z dobrymi praktykami projektowania webowego gdzie zrozumiałość kodu oraz jego struktura są kluczowe dla dalszego rozwoju czy utrzymania aplikacji.

Pytanie 11

Po przeprowadzeniu walidacji dokumentu HTML pojawił się błąd przedstawiony na zrzucie. Jak można go usunąć?

A. dodać atrybut alt do grafiki

B. w znaczniku img zmienić nazwę atrybutu src na href

C. w znaczniku img zmienić nazwę atrybutu src na alt

D. zmienić zapis </h1> na <h1>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut alt w znaczniku img jest kluczowym elementem poprawnego i dostępnego kodu HTML. Służy on do dostarczenia tekstowego opisu zawartości obrazu co jest niezwykle ważne dla osób korzystających z technologii asystujących takich jak czytniki ekranu. Dodanie atrybutu alt poprawia również indeksowanie strony przez wyszukiwarki internetowe co wpływa na SEO. Zgodnie z wytycznymi W3C oraz WCAG każda grafika powinna posiadać ten atrybut aby zapewnić dostępność treści. Przykładowo jeśli obraz przedstawia logo firmy alt powinien zawierać nazwę firmy. W przypadku obrazów dekoracyjnych atrybut alt może być pusty co sygnalizuje że obraz nie niesie istotnej informacji. Takie praktyki wspierają budowanie witryn przyjaznych i zgodnych ze standardami co jest nie tylko wymogiem prawnym w wielu jurysdykcjach ale także dobrym nawykiem programistycznym. W związku z tym dodanie atrybutu alt jest nie tylko środkiem do eliminacji błędu walidacji ale również krokiem w stronę odpowiedzialnego tworzenia treści internetowych.

Pytanie 12

W przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ

<img src="kwiat.jpg alt="kwiat">

A. wprowadzono nieznany atrybut alt

B. nie zamknięto cudzysłowu

C. nie odnaleziono pliku kwiat.jpg

D. użyto niewłaściwego znacznika do wyświetlenia obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to nie domknięto cudzysłowu ponieważ w kodzie HTML atrybuty muszą być poprawnie zamknięte aby poprawnie interpretować ich wartości. W przedstawionym fragmencie kodu dla znacznika img brakuje końcowego cudzysłowu po wartości src co stanowi błąd składniowy. Tego typu błędy mogą prowadzić do nieprawidłowego działania strony ponieważ przeglądarka nie jest w stanie jednoznacznie określić końca wartości atrybutu co może skutkować nieprawidłowym renderowaniem danych. Zgodnie z najlepszymi praktykami każde otwarte cudzysłowie powinno być zamknięte aby zapewnić poprawną interpretację kodu. Ponadto stosowanie poprawnego zamykania cudzysłowów zwiększa czytelność kodu co jest istotne przy współpracy zespołowej i ułatwia jego utrzymanie. Warto także korzystać z walidatorów HTML które automatycznie wykrywają takie błędy pomagając w ich szybkim usunięciu. Tego rodzaju narzędzia są kluczowe w procesie tworzenia stron internetowych ponieważ umożliwiają weryfikację zgodności kodu z obowiązującymi standardami co ma bezpośredni wpływ na jego wydajność i kompatybilność z różnymi przeglądarkami.

Pytanie 13

Kolor reprezentowany w formacie heksadecymalnym #0000FF to

A. czarny

B. niebieski

C. czerwony

D. zielony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor zapisany w notacji heksadecymalnej #0000FF to odcień niebieskiego. Notacja heksadecymalna jest powszechnie stosowana w projektowaniu stron internetowych oraz grafice komputerowej do definicji kolorów w systemie RGB. W tej notacji sześć znaków reprezentuje wartości czerwonego, zielonego i niebieskiego (RGB), gdzie pierwsze dwa znaki to wartość czerwonego, kolejne dwa to wartość zielonego, a ostatnie dwa to wartość niebieskiego. W przypadku #0000FF, wartości są następujące: 00 (czerwony), 00 (zielony), FF (niebieski), co oznacza maksymalny poziom niebieskiego światła. Taki kolor jest czystym niebieskim, uzyskiwanym gdy intensywność czerwonego i zielonego jest zerowa, a niebieskiego maksymalna. Przykładami użycia niebieskiego w designie mogą być logo Facebooka, które wykorzystuje podobny odcień, czy tła niektórych stron internetowych. Heksadecymalne kody kolorów są zgodne z standardem W3C, co zapewnia ich uniwersalność i spójność w różnych aplikacjach graficznych i interfejsach użytkownika.

Pytanie 14

W języku HTML zapis < spowoduje w przeglądarki wyświetlenie znaku

A. >

B. <

C. &

D. "

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znak < w HTML ma specjalne znaczenie, ponieważ jest używany do oznaczania początku znaczników, które są fundamentem struktury dokumentów HTML. Aby prawidłowo wyświetlić ten znak w przeglądarce, należy użyć encji HTML, która dla znaku mniejszości to <. Użycie encji pozwala na uniknięcie nieporozumień, ponieważ przeglądarka mogłaby zinterpretować znak < jako początek nowego znacznika. Przykładowo, aby wyświetlić tekst 'A < B' w HTML, kod powinien wyglądać następująco: A < B. Zgodnie z dokumentacją W3C, stosowanie encji jest kluczowe dla zachowania poprawności kodu. Dzięki temu użytkownicy mogą zobaczyć zamierzony tekst, zamiast nieprawidłowo interpretowanego oznaczenia. Warto również zauważyć, że istnieją inne encje, takie jak > dla znaku większości oraz & dla znaku ampersand, które również pełnią istotne funkcje w kontekście HTML. Poprawne użycie encji przyczynia się do lepszej dostępności i zobrazowania treści na stronach internetowych."

Pytanie 15

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. i + b

B. b > i

C. b + i

D. b i

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowy selektor to „b + i”, ponieważ wykorzystuje tzw. selektor sąsiedniego rodzeństwa (adjacent sibling selector). Ten zapis oznacza: wybierz element , który znajduje się bezpośrednio po elemencie , na tym samym poziomie drzewa DOM, czyli ma tego samego rodzica. W naszym przykładzie struktura jest prosta: wewnątrz paragrafu znajduje się tekstu, a zaraz po nim paragrafie. Dokładnie taki układ idealnie pasuje do selektora „b + i”. Dzięki temu styl letter-spacing: 10px i color: red zostanie zastosowany tylko do tekstu w znaczniku , czyli do słowa „paragrafie”, a nie do całego akapitu, ani do . Moim zdaniem to jeden z bardziej niedocenianych selektorów, bo pozwala bardzo precyzyjnie stylować elementy na podstawie ich kontekstu w dokumencie, bez dodawania klas czy identyfikatorów. W praktyce stosuje się go np. do stylowania pierwszego po nagłówku, zmiany wyglądu etykiety formularza, która następuje po jakimś polu, albo do drobnych efektów typograficznych w treści artykułów. W specyfikacji CSS (np. CSS Selectors Level 3 i 4) selektory rodzeństwa są opisane jako mechanizm do zaznaczania elementów na podstawie relacji strukturalnych, co jest dużo bardziej eleganckie niż ręczne „oklejanie” wszystkiego klasami. Warto też pamiętać różnicę między „+” a „~”. „b + i” działa tylko na najbliższe sąsiednie , natomiast „b ~ i” objęłoby wszystkie elementy będące późniejszym rodzeństwem . W tym zadaniu zależy nam tylko na jednym, konkretnym słowie, więc wybór „b + i” jest jak najbardziej zgodny z dobrymi praktykami – selektor jest możliwie wąski i jednoznaczny. To potem procentuje w większych projektach, gdzie czytelne i precyzyjne selektory bardzo ułatwiają utrzymanie arkusza stylów.

Pytanie 16

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. Tuż po otwarciu strony kolor tekstu jest czerwony.

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

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.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna ponieważ w kodzie HTML znajduje się element typu przycisk który po kliknięciu wykonuje akcję zmieniającą kolor tekstu w paragrafie z niebieskiego na czerwony Za pomocą atrybutu onclick przypisano do niego funkcję JavaScript documentgetElementById'p1'stylecolor'red' co oznacza że po naciśnięciu przycisku zmienia się styl koloru elementu o identyfikatorze p1 na czerwony Ta technika jest powszechnie stosowana do dynamicznej interakcji z użytkownikami na stronach internetowych Mając na uwadze dobre praktyki warto pamiętać o oddzieleniu logiki JavaScript od kodu HTML co zwiększa czytelność i utrzymanie kodu Można to osiągnąć poprzez przypisanie funkcji JavaScript w zewnętrznym pliku js co jest zgodne z zasadą oddzielania warstw logiki stylowania i struktury strony Zastosowanie JavaScript w taki sposób umożliwia dynamiczną zmianę stylów co jest istotne w kontekście tworzenia interaktywnych aplikacji webowych Tego typu manipulacje DOM są fundamentalne dla rozwoju nowoczesnych aplikacji internetowych co czyni je kluczowym elementem nauki i praktyki w zawodach związanych z programowaniem frontendowym

Pytanie 17

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <img src="/kotek.jpg" alt="obrazek kotka">, ponieważ stosuje właściwe atrybuty do wyświetlania obrazów w HTML. Atrybut 'src' wskazuje na źródło obrazu, a 'alt' zawiera tekst alternatywny, który jest ważny dla dostępności oraz SEO. Standardy WCAG (Web Content Accessibility Guidelines) podkreślają znaczenie atrybutu 'alt', który zapewnia kontekst dla użytkowników korzystających z czytników ekranu. Ponadto, zastosowanie tego zapisu jest zgodne z dobrymi praktykami, które zachęcają do dostarczania informacji o obrazie, gdy nie może on być wyświetlony. Przykładem zastosowania może być dodanie obrazów w artykułach blogowych, gdzie 'alt' opisuje zawartość obrazu, co poprawia ogólne wrażenie oraz dostępność treści. Prawidłowe użycie atrybutów jest kluczowe dla stworzenia semantycznego i dostępnego kodu HTML.

Pytanie 18

Jakie polecenie należy zastosować, aby słowo TEKST pojawiło się w kolorze czarnym w oknie przeglądarki internetowej?

A. TEKST

B. <body bgcolor="black">TEKST</body>

C. <body color="black">TEKST

D. TEKST

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź TEKST jest poprawna, ponieważ wykorzystuje standardowy atrybut HTML do zmiany koloru tekstu. Atrybut 'color' w tagu pozwala na określenie koloru, w tym przypadku użyto wartości szesnastkowej '#000000', co odpowiada kolorowi czarnemu. Użycie wartości szesnastkowej jest uznaną praktyką w projektowaniu stron internetowych, ponieważ pozwala na precyzyjne określenie kolorów, a także wspiera szeroką gamę barw. Wartości szesnastkowe są bardziej uniwersalne i umożliwiają zastosowanie dowolnego koloru, co jest bardziej elastyczne niż nazwy kolorów w języku angielskim. Warto zauważyć, że od HTML5 tag jest przestarzały, dlatego zaleca się korzystanie z CSS do stylizacji tekstu, co jest bardziej zgodne z zasadami semantycznego HTML. Przykładowo, aby uzyskać ten sam efekt w CSS, można zastosować regułę: <style> .czarny { color: #000000; } </style> i użyć TEKST.

Pytanie 19

Fragment dokumentu HTML sugeruje, że

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A. znaczniki końcowe są wymagane w kodzie HTML, także dla znaczników samozamykających się.

B. kod HTML zapisano w wersji 4 języka.

C. wszystkie znaczniki w kodzie HTML powinny być zapisywane wielkimi literami.

D. kod HTML zapisano w wersji 5 języka.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Deklaracja DOCTYPE wskazuje na to że dokument HTML wykorzystuje standard HTML 4.01 w trybie ścisłym. HTML 4.01 jest jedną z wersji języka HTML wprowadzoną przez World Wide Web Consortium w 1999 roku i zawiera trzy warianty: Strict Transitional i Frameset. Tryb Strict oznacza ścisłe przestrzeganie zasad standardu bez użycia przestarzałych elementów i atrybutów takich jak tagi związane z formatowaniem stron które stały się przestarzałe w miarę rozwoju kaskadowych arkuszy stylów CSS. W kontekście praktycznym oznacza to że projektując stronę zgodną z tą specyfikacją należy unikać znaczników odpowiedzialnych za prezentację które były powszechnie stosowane w poprzednich wersjach HTML. Zamiast tego zaleca się korzystanie z CSS do określania wyglądu strony co nie tylko wspiera separację struktury treści od jej wyglądu ale także ułatwia przenoszenie i aktualizację stylów. Używając deklaracji DOCTYPE HTML 4.01 Strict można zapewnić lepszą zgodność z najnowszymi wersjami przeglądarek oraz ułatwić przyszłe aktualizacje kodu do nowoczesnych standardów takich jak HTML5 który wprowadza dodatkowe funkcjonalności i uproszczenia mające na celu poprawę semantyki i użyteczności stron WWW

Pytanie 20

Jakie polecenie 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" >

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src = "mojPiesek.jpg" alt = "pies"> jest poprawna zgodnie z zasadami walidacji HTML5. W tej konstrukcji atrybut 'src' jest prawidłowo sformatowany, z odpowiednimi cudzysłowami otaczającymi wartość, co jest wymagane przez standardy HTML. Dodatkowo atrybut 'alt' również jest poprawnie użyty, co jest kluczowe z perspektywy dostępności. Atrybut 'alt' zapewnia tekst alternatywny, który jest istotny dla osób korzystających z czytników ekranu oraz w sytuacjach, gdy obrazek nie może zostać załadowany. Odpowiednia walidacja kodu HTML jest nie tylko wymagana dla poprawnego działania strony, ale także wpływa na SEO i ogólną użyteczność witryny. Przykład ten pokazuje, jak ważne jest przestrzeganie standardów, aby zapewnić lepsze doświadczenia użytkowników oraz uniwersalność strony internetowej. W praktyce, stosowanie właściwych atrybutów i ich wartości powinno być zawsze brane pod uwagę podczas tworzenia treści webowych.

Pytanie 21

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

p {background-image: url("rysunek.png");}

A. widoczny, jeśli zastosowany zostanie znacznik img w kodzie

B. pokazany obok każdego akapitu

C. tłem całej witryny

D. tłem dla każdego akapitu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź jest poprawna ponieważ w arkuszach stylów CSS zastosowanie selektora elementu p z właściwością background-image powoduje że obraz rysunek.png zostanie ustawiony jako tło dla każdego elementu paragrafu na stronie. Jest to przydatna technika gdy chcemy nadać spójny wygląd wszystkim paragrafom w dokumencie. Tło to może być używane do celów estetycznych lub jako część identyfikacji wizualnej strony. Warto pamiętać że w CSS można dodatkowo kontrolować sposób wyświetlania obrazka tła za pomocą właściwości takich jak background-repeat background-size i background-position co pozwala na precyzyjne dostosowanie wyświetlania. Dobre praktyki zalecają aby obrazy tła były odpowiednio zoptymalizowane pod kątem rozmiaru aby nie wpływały negatywnie na szybkość ładowania strony. W praktyce stosowanie obrazów jako tła w paragrafach może wspierać wizualne narracje oraz zwiększać zaangażowanie użytkowników szczególnie gdy są stosowane w przemyślany sposób w kontekście projektowania doświadczeń użytkownika UX.

Pytanie 22

Arkusze stylów w formacie kaskadowym są tworzone w celu

A. połączenia struktury dokumentu strony z odpowiednią formą jej wizualizacji

B. blokowania wszelkich zmian w wartościach znaczników już przypisanych w pliku CSS

C. ułatwienia formatowania strony

D. nadpisywania wartości znaczników, które już zostały ustawione na stronie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kaskadowe arkusze stylów (CSS) stanowią kluczowy element w tworzeniu nowoczesnych stron internetowych, umożliwiając deweloperom separację zawartości od stylizacji. Poprawna odpowiedź, dotycząca ułatwienia formatowania strony, odnosi się do głównej funkcji CSS, która polega na umożliwieniu precyzyjnego stylizowania elementów HTML przy użyciu różnych właściwości, takich jak kolor, czcionka, marginesy czy tło. Dzięki CSS, można łatwo zmieniać wygląd całej strony lub jej części, co znacznie upraszcza proces utrzymania i aktualizacji. Na przykład, jeśli chcemy zmienić kolor tła całej witryny, wystarczy zaktualizować jedną regułę w arkuszu stylów, zamiast edytować każdy element osobno. Dodatkowo, CSS wspiera responsywność, co oznacza, że możemy dostosować wygląd strony do różnych rozmiarów ekranów, co jest istotne w dobie urządzeń mobilnych. Takie podejście do rozwijania stron internetowych jest zgodne z najlepszymi praktykami branżowymi, co pozwala na bardziej efektywne zarządzanie projektem oraz zapewnienie spójnego wyglądu witryny.

Pytanie 23

Jaki styl CSS umożliwia ustawienie wyrównania tekstu do prawej strony?

A. tekst

B. tekst

C. tekst

D. tekst

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź tekst jest poprawna, ponieważ właściwość CSS 'text-align' jest standardowym sposobem definiowania wyrównania tekstu w elemencie blokowym, takim jak . Używając 'text-align: right', tekst wewnątrz elementu zostanie wyrównany do prawej strony, co jest szczególnie przydatne w przypadku projektów webowych, gdzie estetyka i układ treści mają kluczowe znaczenie. Dzięki CSS można z łatwością zmieniać wyrównanie tekstu w zależności od wymagań projektu, co pozwala na elastyczne dostosowywanie stylów do różnych urządzeń i rozmiarów ekranów. Warto również wspomnieć, że stosowanie CSS do stylizacji dokumentów HTML jest zgodne z zasadami kaskadowych arkuszy stylów, co zapewnia separację treści od prezentacji i ułatwia zarządzanie stylami w większych projektach. Dobrą praktyką jest stosowanie zewnętrznych lub wewnętrznych arkuszy stylów zamiast inline stylingu, co zwiększa czytelność kodu i ułatwia jego utrzymanie.

Pytanie 24

W języku CSS zdefiniowano style dla znacznika h1 zgodnie z podanym wzorem. Przy założeniu, że żadne inne style nie są zastosowane do znacznika h1, wskaż właściwy sposób stylizacji tego elementu

A. D

B. A

C. C

D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź C jest prawidłowa, ponieważ zastosowane style CSS poprawnie odzwierciedlają zasady formatowania zdefiniowane w pytaniu. Styl font-style: oblique; powoduje, że tekst jest pochylony, ale nie jest to zwykła kursywa używana w normalnym tekście. Oblique jest bardziej subtelne i mniej formalne. Font-variant: small-caps; przekształca małe litery w małe kapitaliki, co nadaje tekstowi bardziej formalny i elegancki wygląd. Jest to użyteczne w nagłówkach, które często wymagają wyrazistości i czytelności. Text-align: right; wyrównuje tekst do prawej, co może być stosowane do tworzenia asymetrycznych, nowoczesnych projektów stron internetowych. Takie formatowanie stosowane jest dla zwiększenia czytelności lub dostosowania tekstu do innych elementów strony. Właściwe stosowanie CSS pozwala na pełne kontrolowanie wyglądu i prezentacji treści, co jest kluczowe w profesjonalnym tworzeniu stron internetowych. Przykładowo, użycie oblique i small-caps może być stosowane w projektach graficznych, takich jak logotypy, gdzie pożądany jest specyficzny styl wizualny. Dobre praktyki w CSS to unikanie nadmiernego użycia stylów, które mogą wpłynąć negatywnie na dostępność i użyteczność strony. W tym kontekście, wybrane style są skutecznie zastosowane, zapewniając zarówno estetykę, jak i funkcjonalność.

Pytanie 25

W HTML umieszczono formularz. Jakie skutki działania tego kodu zostaną pokazane przez przeglądarkę, jeśli użytkownik w drugim polu wprowadzi wartość "ala ma kota"?

A. Efekt 3

B. Efekt 1

C. Efekt 2

D. Efekt 4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Efekt 2 jest prawidłowy, ponieważ kod HTML używa elementu select do stworzenia listy rozwijanej z trzema opcjami: Kraków, Poznań i Szczecin. Użytkownik może wybrać jedną z tych opcji, co jest standardowym zastosowaniem elementu select w formularzach HTML. Drugim elementem jest pole input typu password które maskuje wpisywany tekst. W formularzach HTML pole typu password jest używane do ukrywania wprowadzanego tekstu co jest szczególnie ważne przy wprowadzaniu danych wrażliwych takich jak hasła. Gdy użytkownik wpisuje hasło widoczne są tylko znaki maskujące często kropki lub gwiazdki co zapewnia prywatność danych. Stosowanie takich elementów jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika w sieci co zwiększa bezpieczeństwo i wygodę użytkowania formularzy. Właściwe korzystanie z elementów HTML jak select i input type=password jest kluczowe w tworzeniu efektywnych i bezpiecznych stron internetowych co jest szczególnie istotne w kontekście e-commerce i aplikacji bankowych.

Pytanie 26

Jakie polecenie HTML powinno być zastosowane, aby sformatować akapit tekstu?

Tekst może być zaznaczony albo istotny dla autora

A. Tekst może być zaznaczony albo istotny dla autora

B. Tekst może być zaznaczony albo istotny dla autora

C. Tekst może być zaznaczony albo istotny dla autora

D. Tekst może być zaznaczony albo istotny dla autora

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź druga jest prawidłowa, ponieważ stosuje poprawną składnię HTML do oznaczenia fragmentów tekstu z różnym formatowaniem. Element służy do definiowania paragrafu, w którym tekst jest umieszczony. Element używany jest do oznaczania tekstu, który powinien być zwrócony uwagę czytelnika, poprzez podkreślenie go kolorem tła. Z kolei jest przeznaczony do oznaczenia tekstu, który ma zostać wyróżniony jako istotny, zazwyczaj poprzez użycie kursywy. Użycie tych elementów w połączeniu z zamykającymi tagami, jak w odpowiedzi drugiej, jest zgodne z zaleceniami standardów HTML5, które kładą nacisk na semantyczne znaczenie znaczników. To podejście wspiera dostępność oraz SEO, ponieważ pomaga czytnikom ekranowym i wyszukiwarkom lepiej zrozumieć strukturę i znaczenie treści. Praktyczne zastosowanie tych znaczników można zobaczyć na stronach internetowych, gdzie kluczowe informacje muszą być odpowiednio wyróżnione, aby poprawić doświadczenie użytkownika i przekazać istotne dane w czytelny sposób.

Pytanie 27

Co można powiedzieć o przedstawionym zapisie języka HTML5?

<title>Strona o psach</title>

A. Zostanie wyświetlony w treści strony, na samej górze.

B. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.

C. Pojawi się na karcie dokumentu w przeglądarce.

D. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.

Pytanie 28

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

A. Kod 1

B. Kod 3

C. Kod 2

D. Kod 4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod 2 jest prawidłowy, ponieważ dla bloków 2 i 3 stosowane jest ustawienie float: left; co pozwala na ich ułożenie w jednym wierszu z lewej strony. Blok 4 z float: right; umiejscawia się po prawej stronie, co umożliwia uzyskanie układu bloków 2-4 w jednej linii, odpowiadając schematowi. Blok 5 z float: left; rozpoczyna nowy wiersz poniżej, zgodnie z założonym układem. Takie użycie właściwości float oraz width pozwala na zorganizowanie elementów na stronie bez użycia flexbox lub grid, co jest klasycznym podejściem do układu strony w CSS. Dobrym przykładem praktycznego zastosowania jest tworzenie responsywnych layoutów, gdzie float można używać do kontrolowania przepływu elementów na mniejszych ekranach. Mimo że obecnie technologia flexbox i grid jest bardziej popularna, znajomość stosowania float nadal jest istotna, zwłaszcza w kontekście starszych projektów, które mogą wymagać utrzymania zgodności z wcześniejszymi wersjami CSS. To rozwiązanie zapewnia zgodność z wieloma starszymi przeglądarkami, co jest kluczowe w przypadku długoterminowych projektów webowych.

Pytanie 29

Do ilu pól edycyjnych zostanie przypisane tło Teal dla przedstawionego fragmentu dokumentu HTML i stylu CSS?

<input type="text">
<input type="number">
<input type="email">
<input type="number">
<input>

input[type="number"] {
    background-color: Teal;
}

A. Do dwóch.

B. Do żadnego.

C. Do trzech.

D. Do wszystkich.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Bardzo dobrze! Wybrałeś prawidłową odpowiedź, mówiącą, że tło Teal zostanie przypisane do dwóch pól edycyjnych. W przedstawionym fragmencie dokumentu HTML mamy pięć pól edycyjnych (input), z których tylko dwa mają typ 'number'. Tło Teal jest zdefiniowane w stylu CSS i ma być zastosowane tylko do pól typu 'number'. Jest to zgodne z dobrymi praktykami stosowania selektorów atrybutów w CSS, które pozwalają na precyzyjne określenie, do jakich elementów strony internetowej powinien być zastosowany dany styl. Dzięki temu możemy na przykład zastosować różne style dla różnych typów pól wejściowych, jak to jest w tym przypadku. To jest przykład, jak możemy wykorzystać moc CSS do kontroli wyglądu różnych elementów na naszej stronie.

Pytanie 30

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 31

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

A. <s> </s>

B.

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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: Stara cena: <s>199 zł</s> Nowa cena: 149 zł 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 32

Która z poniższych zasad nie przyczyni się pozytywnie do poprawy czytelności kodu?

A. Kod powinien być napisany bez wcięć i zbędnych przejść do nowej linii

B. Każda linia kodu powinna zawierać jedynie jedną instrukcję

C. Należy dodawać komentarze w bardziej skomplikowanych fragmentach kodu

D. Nazwy zmiennych muszą odzwierciedlać ich funkcję

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że kod powinien być napisany bez wcięć i zbędnych enterów jest prawidłowa, ponieważ brak odpowiedniego formatowania negatywnie wpływa na czytelność kodu. Wcięcia są kluczowe w wielu językach programowania, takich jak Python, gdzie struktura kodu jest oparta na przestrzeniach, a nie na nawiasach. Wcięcia pomagają zaznaczyć hierarchię oraz zagnieżdżenie bloków kodu, co jest niezbędne do zrozumienia logiki działania programu. W praktyce, dobrze sformatowany kod, z użyciem wcięć i odpowiednich przerw, pozwala programistom szybko zrozumieć jego strukturę i funkcjonalność. Przykładem mogą być fragmenty kodu, gdzie funkcje są wyraźnie oddzielone od siebie, a pętle i warunki są poprawnie wcięte, co ułatwia ich analizę i modyfikację. Zgodnie z konwencjami PEP 8 dla Pythona oraz zasadami wielu innych języków, stosowanie wcięć oraz przestrzeni między blokami kodu to standardy, które znacznie poprawiają jakość kodu oraz jego czytelność.

Pytanie 33

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości, powinno zawierać właściwość

BLOK 1		BLOK 2
BLOK 3	BLOK 4
BLOK 5

A. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

B. float: left dla wszystkich bloków.

C. clear: both dla wszystkich bloków.

D. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobra robota, odpowiedź jest na pewno poprawna! Żeby uzyskać taki układ bloków jak na obrazku, musisz użyć w CSS `float: left` dla wszystkich bloków. To świetny sposób na ułożenie elementów w poziomie. Jak bloki mają stałą szerokość, to wtedy ułożą się obok siebie od lewej do prawej, tak jak na rysunku. To narzędzie jest naprawdę przydatne dla web developerów, zwłaszcza kiedy pracują nad responsywnymi layoutami. Warto pamiętać, że `float: left` zadziała tylko wtedy, gdy bloki mają określoną szerokość. Jeśli jej nie ustawisz, to mogą się nieustawić tak jakbyś chciał. Wtedy trzeba pomyśleć o innych opcjach, jak Flexbox czy CSS Grid.

Pytanie 34

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

A. src

B. alt

C. cite

D. href

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'cite' jest prawidłowa, ponieważ atrybut ten służy do wskazania źródła cytatu w znaczniku <blockquote>. Atrybut cite pozwala dostarczyć dodatkowych informacji o autorze lub miejscu pochodzenia cytatu, co jest zgodne z zasadami semantycznego HTML5. Użycie atrybutu cite jest ważne dla poprawnej interpretacji treści przez przeglądarki oraz narzędzia przetwarzające dane, takie jak wyszukiwarki internetowe. Przykład zastosowania: <blockquote cite="https://pl.wikipedia.org">...cytat...</blockquote>. Dzięki temu można łatwo zidentyfikować źródło, co zwiększa wiarygodność prezentowanych informacji. W praktyce, dokumenty HTML powinny być tak przygotowane, aby były zarówno przyjazne dla użytkowników, jak i zgodne z wytycznymi standardów W3C, co ma kluczowe znaczenie w kontekście dostępności i SEO.

Pytanie 35

W nagłówku dokumentu HTML umieszczono ```Strona miłośników psów``` Tekst ten pojawi się

A. w polu adresowym, przy podanym adresie URL

B. w zawartości strony, w pierwszym widocznym nagłówku

C. na pasku tytułowym przeglądarki

D. w zawartości strony, na banerze

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Tag <title> w HTML to naprawdę istotny element dla każdej strony internetowej. Jest to coś, co pomaga ludziom szybko zorientować się, o co chodzi na danej stronie, zwłaszcza gdy mamy otwartych kilka kart w przeglądarce. Dobry tytuł nie tylko ułatwia nawigację, ale także ma spory wpływ na to, jak strona wypada w wyszukiwarkach. Z własnego doświadczenia mogę powiedzieć, że jeśli tytuł jest konkretny i zawiera ważne słowa kluczowe, to zwiększa szanse na przyciągnięcie użytkowników. Na przykład, jeśli strona jest dla miłośników psów, to warto w tytule umieścić słowa takie jak 'psy' czy 'opiekunowie psów'. Taki przykład mógłby wyglądać tak: <title>Miłośnicy psów - Porady, opieka, zdrowie</title>. Dobrze zrobiony tytuł może też poprawić CTR, czyli współczynnik klikalności, co jest ważne, żeby przyciągnąć więcej odwiedzających.

Pytanie 36

W trakcie weryfikacji stron internetowych nie analizuje się

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

B. funkcjonowania linków

C. źródeł pochodzenia narzędzi edytorskich

D. błędów składniowych w kodzie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W procesie walidacji stron internetowych kluczowym celem jest upewnienie się, że kod HTML, CSS i inne zasoby są zgodne z obowiązującymi standardami W3C (World Wide Web Consortium). Walidacja skutecznie identyfikuje błędy składniowe, które mogą wpływać na renderowanie strony, analizuje działanie linków, a także sprawdza, jak strona zachowuje się w różnych przeglądarkach. Jednak aspekty związane z pochodzeniem narzędzi edytorskich nie są istotnym elementem tego procesu. Narzędzia edytorskie, takie jak edytory tekstowe czy IDE, są jedynie środkiem do tworzenia kodu, a ich źródło nie powinno wpływać na to, czy strona jest poprawnie zaimplementowana. Na przykład, strona może być poprawnie zwalidowana niezależnie od tego, czy została zbudowana w popularnym edytorze, takim jak Visual Studio Code, czy innym mniej znanym narzędziu. Dlatego koncentrowanie się na źródłach narzędzi edytorskich w kontekście walidacji byłoby nieuzasadnione i nieprzydatne.

Pytanie 37

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

A. rgb(21, 16, 255)

B. rgb(21, 16, 254)

C. rgb(15, 10, FE)

D. rgb(21, 16, FE)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rgb(21, 16, 254) jest dobra, bo te wartości RGB pochodzą z kodu heksadecymalnego #1510FE. W tym kodzie każda para cyfr pokazuje, jak mocno świeci dany kolor: od 00, co oznacza brak koloru, do FF, gdzie mamy pełną intensywność. W naszym przypadku, pierwsza para '15' to kolor czerwony, '10' to zielony, a 'FE' to niebieski. Jak to przeliczymy na dziesiętny, to '15' daje nam 21, '10' daje 16, a 'FE' to 254. I stąd mamy rgb(21, 16, 254). Te wartości są super przydatne, na przykład przy tworzeniu stylów CSS, gdzie kolory są podstawą. Warto ogarnąć, jak przerabiać kolory z jednego formatu na drugi – to naprawdę pomaga w projektowaniu grafiki i stron www.

Pytanie 38

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

A. wszystkiego tekstu w znaczniku z wyjątkiem tekstu w znaczniku

B. wyłącznie tekstu w znaczniku , który znajduje się bezpośrednio wewnątrz znacznika

C. tylko tego tekstu w znaczniku , który ma przypisaną klasę o nazwie i

D. wszelkiego tekstu w znaczniku lub wszelkiego tekstu w znaczniku

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis selektora CSS p > i { color: red; } jest precyzyjny i wskazuje, że kolor czerwony zostanie zastosowany wyłącznie do elementów , które znajdują się bezpośrednio w obrębie elementu . Warto zrozumieć, że symbol '>' oznacza selektor dziecka, co oznacza, że styl dotyczy tylko tych , które są bezpośrednimi potomkami . Przykładowo, jeśli mamy strukturę HTML:To jest przykład tekstu z zagnieżdżonym elementem., to tylko pierwszy znacznik (czyli "przykład") będzie miał kolor czerwony, ponieważ drugi znacznik jest zagnieżdżony i nie jest bezpośrednim dzieckiem . 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 39

Jaką szerokość przeznaczono dla treści strony według podanej definicji CSS?

body {
   border: 2px;
   height: 600px;
   width: 560px;
}

A. 640 px

B. 560 px

C. 600 px

D. 2 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Szerokość strony została zdefiniowana na 560 pikseli w kodzie CSS. W kontekście strony internetowej, to oznacza, że cała zawartość strony będzie wyświetlana w obszarze o szerokości nie większej niż 560 pikseli. To jest bardzo ważne podczas projektowania stron internetowych. Szerokość strony często jest ustalana na stałą wartość, aby zapewnić spójność wyglądu strony na różnych urządzeniach. W praktyce, jeśli chcesz, aby strona była 'responsywna', szerokość powinna być ustawiona na wartość procentową, co pozwoli na dynamiczne dostosowanie się strony do rozmiaru okna przeglądarki. Jednak w niektórych sytuacjach, jak na przykład w przypadku określonego układu strony, możliwe jest użycie stałej wartości szerokości. W każdym razie, zapamiętaj, że szerokość strony jest jednym z najważniejszych aspektów przy projektowaniu stron internetowych, który ma bezpośredni wpływ na doświadczenia użytkownika.

Pytanie 40

Walidacja formularzowych pól polega na zweryfikowaniu

A. czy wprowadzone dane spełniają określone reguły.

B. który użytkownik wprowadził informacje.

C. czy istnieje plik PHP, który odbierze dane.

D. czy użytkownik jest zalogowany.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Walidacja pól formularza to mega ważny krok, kiedy zbieramy dane od użytkowników. Dzięki niej możemy mieć pewność, że wszystko, co użytkownik wprowadza, jest zgodne z pewnymi zasadami. To sprawia, że aplikacja działa jak należy i że dane są w miarę bezpieczne. Na przykład, walidacja może sprawdzać, czy użytkownik wpisał coś w pole tekstowe, czy adres e-mail wygląda jak należy, albo czy hasło ma odpowiednią długość i trudność. Fajnie jest, jak walidacja działa zarówno po stronie klienta, jak i serwera. Ta po stronie klienta jest super, bo użytkownik od razu widzi, że coś poszło nie tak i nie musi czekać na odpowiedź z serwera. A walidacja po stronie serwera dodaje jeszcze więcej bezpieczeństwa, bo broni aplikacji przed błędnymi danymi i różnymi atakami, jak na przykład SQL injection. Dlatego walidacja danych to absolutna podstawa w nowoczesnych systemach przetwarzania informacji.

Rozpocznij nowy egzamin

Powrót do strony głównej

Wyniki egzaminu

Informacje o egzaminie:

Egzamin niezdany

Udostępnij swój wynik

Szczegółowe wyniki:

Pytanie 1

Pytanie 2

Pytanie 3

Pytanie 4

Pytanie 5

Pytanie 6

Pytanie 7

Pytanie 8

Pytanie 9

Pytanie 10

Pytanie 11

Pytanie 12

Pytanie 13

Pytanie 14

Pytanie 15

Pytanie 16

Pytanie 17

Pytanie 18

Pytanie 19

Pytanie 20

Pytanie 21

Pytanie 22

Pytanie 23

Pytanie 24

Pytanie 25

Pytanie 26

Pytanie 27

Pytanie 28

Pytanie 29

Pytanie 30

Pytanie 31

Pytanie 32

Pytanie 33

Pytanie 34

Pytanie 35

Pytanie 36

Pytanie 37

Pytanie 38

Pytanie 39

Pytanie 40