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: 10 maja 2026 09:33
  • Data zakończenia: 10 maja 2026 10:02

Egzamin zdany!

Wynik: 35/40 punktów (87,5%)

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Pochwal się swoim wynikiem!
Facebook
X.com
LinkedIn
Szczegółowe wyniki:
Pytanie 1

Dla przedstawionego fragmentu dokumentu HTML:

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

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW. W której z jej sekcji zazwyczaj znajduje się stopka strony?

Ilustracja do pytania
A. 4
B. 1
C. 2
D. 5
Odpowiedź 5 jest poprawna ponieważ w standardach projektowania stron internetowych stopka strony zazwyczaj znajduje się na dole każdej podstrony. Stopka to miejsce gdzie umieszczane są informacje takie jak prawa autorskie prywatność i linki do kontaktu. Dobrze zaprojektowana stopka może także zawierać skróty nawigacyjne które pomagają użytkownikowi szybko przemieszczać się po stronie. W praktyce projektanci stron WWW stosują podejście oparte na responsywnym designie co oznacza że stopka powinna być łatwo dostępna i czytelna na różnych urządzeniach. Wykorzystanie CSS Grid lub Flexbox pozwala na elastyczne zarządzanie układem strony co jest szczególnie przydatne przy projektowaniu stopki. Ponadto stopki są elementami które odpowiadają za spójność wizualną całej strony internetowej zapewniając użytkownikowi intuicyjne doświadczenie. Umieszczanie stopki w dolnej części strony jest zgodne z oczekiwaniami użytkowników co zwiększa użyteczność serwisu i pozytywnie wpływa na jego odbiór. Praktyczne zastosowanie tego podejścia można zauważyć na wielu profesjonalnych stronach gdzie stopka jest wyraźnie oddzielona i przejrzysta co ułatwia użytkownikowi odnalezienie potrzebnych informacji.
Pytanie 3

Zaprezentowano rezultat zastosowania CSS oraz odpowiadający mu kod HTML. W jaki sposób trzeba zdefiniować styl, aby uzyskać takie formatowanie?

Ilustracja do pytania
A. .first-letter { font-size: 400%; color: blue; }
B. #first-letter { font-size: 400%; color: blue; }
C. p.first-letter { font-size: 400%; color: blue; }
D. p::first-letter { font-size: 400%; color: blue; }
Odpowiedź jest prawidłowa, ponieważ selektor CSS p::first-letter precyzyjnie określa, że stylizacja ma być zastosowana do pierwszej litery każdego akapitu, który jest oznaczony tagiem p. Jest to pseudo-element CSS, który umożliwia dostęp do pierwszej litery bloku tekstu w celu nadania jej unikalnego wyglądu. W tym przypadku zmieniono jej rozmiar na 400% oraz kolor na niebieski. Użycie ::first-letter jest zgodne z najlepszymi praktykami, gdyż pozwala na zachowanie semantyczności HTML i oddzielenie warstwy prezentacyjnej od treści, co jest kluczowe w responsywnym projektowaniu stron internetowych. Pseudo-elementy jak ::first-letter są niezwykle przydatne w tworzeniu estetycznych i czytelnych interfejsów użytkownika, zwłaszcza w przypadku publikacji zawierających dużo tekstu. Dobrą praktyką jest stosowanie pseudo-elementów w połączeniu z klasami i identyfikatorami, aby stylizacja była elastyczna i mogła być łatwo dostosowywana zgodnie z potrzebami projektu.
Pytanie 4

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }
B. td, th { background-color: Pink; }
C. tr:hover { background-color: Pink; }
D. tr:active { background-color: Pink; }
Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.
Pytanie 5

W HTML znacznik <i> wywołuje taki sam efekt wizualny jak znacznik

A. <u>
B. <strong>
C. <em>
D. <pre>
Znacznik <em> (emphasis) w języku HTML jest używany do podkreślenia znaczenia słów lub fraz w kontekście tekstu, co jest zgodne z semantyką sieci. Użycie tego znacznika nie tylko zmienia styl prezentacji tekstu na kursywę, ale także wskazuje, że dany fragment tekstu jest istotny dla zrozumienia całości. Znacznik <i> (italic) również stosuje kursywę, ale nie ma znaczenia semantycznego, co oznacza, że nie informuje przeglądarek ani technologii wspomagających o istotności tego tekstu. W praktyce, stosując <em> w miejscach, gdzie chcemy zaakcentować ważne elementy, pomagamy w poprawie dostępności strony oraz w jej SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę i kontekst treści. Warto pamiętać, że według standardów W3C, stosowanie znaczników semantycznych, takich jak <em>, jest zalecane dla poprawy struktury dokumentu HTML oraz dla lepszej interakcji z użytkownikami wykorzystującymi technologie asystujące. Przykład: <p>W tej książce <em>odkryjesz</em> nowe możliwości.</p>
Pytanie 6

Rozmiary ekranu w formacie 16:9 (zakładając, że piksel jest kwadratem) można osiągnąć przy rozdzielczości

A. 800 na 480 pikseli
B. 1366 na 768 pikseli
C. 320 na 240 pikseli
D. 2560 na 2048 pikseli
Odpowiedź 1366 na 768 pikseli jest poprawna, ponieważ proporcja szerokości do wysokości wynosi dokładnie 16:9. Aby to obliczyć, dzielimy szerokość przez wysokość: 1366 / 768 = 1,78, co jest bliskie wartości 1,77 (16:9). Proporcje 16:9 stały się standardem w telewizji wysokiej rozdzielczości oraz w produkcji wideo, co oznacza, że są szeroko stosowane w przemysłach związanych z mediami i technologią. Przykładem zastosowania tej rozdzielczości może być wyświetlanie filmów na nowoczesnych telewizorach, gdzie forma obrazu 16:9 pozwala na pełne wykorzystanie ekranu bez czarnych pasków po bokach. Stosując to w projektach multimedialnych, warto zawsze dążyć do zgodności z tymi standardami, aby zapewnić optymalne wrażenia wizualne dla użytkowników. Zrozumienie tych proporcji jest kluczowe dla profesjonalistów zajmujących się grafiką, filmem i projektowaniem UX/UI.
Pytanie 7

Formaty wideo, które są wspierane przez standard HTML5, to

A. MP4, Ogg, WebM
B. Ogg, QuickTime
C. MP4, AVI
D. Ogg, AVI, MPEG
Odpowiedź MP4, Ogg, WebM jest poprawna, ponieważ te trzy formaty wideo są oficjalnie obsługiwane przez standard HTML5, co oznacza, że są zgodne z różnymi przeglądarkami internetowymi bez potrzeby używania dodatkowych wtyczek. Format MP4, oparty na kontenerze MPEG-4, jest szeroko stosowany z uwagi na jego efektywność w kompresji oraz wysoką jakość obrazu i dźwięku. Ogg to otwarty format, który wspiera kodek VP8, co czyni go popularnym wśród projektów o otwartym oprogramowaniu. WebM, z kolei, jest również formatem otwartym, zoptymalizowanym dla wideo w Internecie, co czyni go dobrym wyborem dla zastosowań webowych. Te formaty są zgodne z najlepszymi praktykami w zakresie wydajności i dostępności, co sprawia, że są preferowane podczas tworzenia treści wideo do zastosowań online. Przykładem ich użycia może być osadzanie wideo na stronach internetowych, gdzie różnorodność formatów pozwala na ich odtwarzanie na różnych urządzeniach oraz w różnych systemach operacyjnych.
Pytanie 8

Aby wykonać przycisk na stronę internetową zgodnie z wzorem, potrzebne jest skorzystanie z opcji w programie do grafiki rastrowej

Ilustracja do pytania
A. selekcja eliptyczna
B. zniekształcenia i deformacja
C. zaokrąglenie lub wybór opcji prostokąt z zaokrąglonymi rogami
D. propagacja wartości
Opcja zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami jest prawidłowa, ponieważ pozwala na stworzenie przycisku o nowoczesnym i estetycznym wyglądzie. W programach graficznych takich jak Adobe Photoshop lub GIMP opcja ta umożliwia użytkownikowi szybkie utworzenie prostokąta, którego rogi są zaokrąglone według określonego promienia. Jest to szczególnie przydatne w projektowaniu elementów interfejsu użytkownika, gdzie zaokrąglone rogi nadają wrażenie łagodności i nowoczesności. Stosowanie zaokrąglonych rogów jest zgodne z aktualnymi trendami UX/UI, które kładą nacisk na przyjazność i intuicyjność interfejsu. Praktyczne zastosowanie to nie tylko przyciski, ale również inne elementy graficzne takie jak pola tekstowe, karty czy okna dialogowe. Zaokrąglone rogi są również bardziej przyjazne dla oka, co jest istotne w kontekście użyteczności. Technicznie osiąga się to przez modyfikację kształtu obiektu wektorowego lub przez zastosowanie odpowiednich filtrów w grafice rastrowej. Warto też pamiętać o dostosowaniu promienia zaokrągleń do ogólnej estetyki projektu, co jest dobrą praktyką w projektowaniu graficznym.
Pytanie 9

Jak nazywa się element systemu zarządzania treścią, który jest bezpośrednio odpowiedzialny za wygląd strony internetowej?

A. Wtyczka w systemie WordPress lub dodatek w systemie Joomla!
B. Kokpit w systemie WordPress lub panel administracyjny w systemie Joomla!
C. Motyw w systemie WordPress lub szablon w systemie Joomla!
D. Widżet w systemie WordPress lub moduł w systemie Joomla!
Motyw w systemie WordPress oraz szablon w systemie Joomla! odgrywają kluczową rolę w kreowaniu wizualnej tożsamości witryny internetowej. To właśnie one determinują, jak treści są prezentowane użytkownikom - od układu graficznego, przez kolory, czcionki, aż po elementy interaktywne. Dzięki motywom użytkownicy mogą wykorzystywać gotowe rozwiązania, co znacząco przyspiesza proces tworzenia strony. W przypadku WordPressa, motyw można łatwo zmieniać, co pozwala na dynamiczne dostosowywanie wyglądu witryny do zmieniających się trendów i potrzeb. Z kolei w Joomla!, szablony zapewniają elastyczność i możliwość personalizacji, co jest kluczowe dla dostosowania się do różnych grup docelowych. Dobrze zaprojektowane motywy i szablony powinny być zgodne z zasadami responsywnego web designu, co oznacza, że strona powinna wyglądać dobrze na różnych urządzeniach i rozdzielczościach ekranu. Warto również zwrócić uwagę na optymalizację SEO, która może być wpływana przez wybór motywu. Właściwy wybór oraz umiejętne wykorzystanie motywów i szablonów jest fundamentem skutecznego zarządzania treścią w sieci.
Pytanie 10

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

color: #008000;
A. szesnastkowej
B. CMYK
C. dziesiętnej
D. HSL
W CSS kolory często zapisywane są w postaci szesnastkowej ponieważ jest to krótki i precyzyjny sposób definiowania koloru. Kod szesnastkowy składa się zazwyczaj z sześciu znaków poprzedzonych znakiem hash (#) gdzie pierwsze dwa znaki odpowiadają czerwonej składowej następne dwa zielonej a ostatnie dwa niebieskiej. Na przykład #008000 oznacza kolor zielony gdzie czerwona składowa wynosi 0 zielona 128 a niebieska 0. Wartości te są zapisane w systemie szesnastkowym co oznacza że mogą przyjmować wartości od 00 do FF odpowiadające wartościom dziesiętnym od 0 do 255. Korzystanie z formatu szesnastkowego jest powszechnie uznawane za dobrą praktykę w web designie ponieważ jest szeroko wspierane przez przeglądarki internetowe i umożliwia łatwe definiowanie szerokiej gamy kolorów. Dzięki swojej zwięzłości i jednoznaczności jest preferowane w projektach gdzie każda linijka kodu ma znaczenie. Przy wyborze koloru warto korzystać z narzędzi które mogą pomóc w konwersji wartości RGB na szesnastkowe co ułatwia dokładne odwzorowanie wybranych kolorów
Pytanie 11

Jakie polecenie w CSS umożliwia dodanie zewnętrznego arkusza stylów?

A. include
B. require
C. open
D. import
Polecenie 'import' w CSS służy do załączenia zewnętrznego arkusza stylów, co jest kluczowe dla organizacji i modularności kodu CSS. Użycie '@import' pozwala na ładowanie stylów z innych plików CSS na początku arkusza stylów, co ułatwia zarządzanie dużymi projektami. Na przykład, jeśli mamy plik 'style.css' i chcemy zaimportować 'reset.css', możemy użyć następującej składni: '@import 'reset.css';'. Dzięki temu możemy utrzymać rozdzielenie różnych stylów, co sprzyja lepszej organizacji kodu oraz jego ponownemu użyciu w przyszłości. Warto również zaznaczyć, że standardy CSS sugerują, aby używać '@import' z rozwagą, gdyż każde zaimportowanie pliku powoduje dodatkowe żądanie HTTP, co może wpłynąć na czas ładowania strony. Z tego powodu, dla większych projektów, często lepiej jest łączyć wszystkie style w jeden plik podczas produkcji, co można osiągnąć za pomocą narzędzi do kompresji CSS. Użycie '@import' jest zatem zgodne z dobrymi praktykami, szczególnie w fazie rozwoju, gdzie modularność i łatwość w zarządzaniu kodem są priorytetowe.
Pytanie 12

W CSS zastosowano regułę: float:left; dla bloku. Jakie będzie jej zastosowanie?

A. ustawienie bloku na lewo względem innych
B. wyrównanie tekstu do lewej strony
C. dopasowanie elementów tabeli do lewej krawędzi
D. umieszczanie bloków jeden pod drugim
Reguła CSS 'float: left;' jest kluczowym narzędziem do zarządzania układem elementów na stronach internetowych. Gdy zastosujemy tę regułę do bloku, powoduje to, że blok zostaje przesunięty do lewej strony swojego kontenera, co pozwala na przyleganie innych elementów po prawej stronie. Przykładowo, jeżeli mamy obrazek jako blok z regułą 'float: left;', tekst umieszczony obok tego obrazka będzie 'przeplatał' się z nim, co jest często wykorzystywane w projektowaniu stron dla uzyskania efektu estetycznego i funkcjonalnego. Stosowanie floata jest zgodne z dobrymi praktykami CSS, ale należy pamiętać, że może prowadzić do problemów z układem, szczególnie w przypadku elementów o różnej wysokości. Aby zniwelować efekty uboczne, często stosuje się regułę 'clear', aby kontrolować przepływ elementów. Warto również zwrócić uwagę, że w nowoczesnym CSS często zyskują na znaczeniu flexbox i grid, które oferują bardziej elastyczne i wydajne metody układania elementów, jednak 'float' nadal pozostaje istotnym narzędziem w arsenale front-end developera.
Pytanie 13

Ikona, która pojawia się przed adresem w oknie adresowym przeglądarki internetowej lub przy tytule aktywnej karty, nazywana jest

A. iConji.
B. webicon.
C. favicon.
D. emoticon.
iConji, webicon i emoticon to terminy, które nie odnoszą się do właściwego pojęcia favicon, a ich użycie w kontekście ikon w przeglądarkach jest mylące. iConji to termin, który nie ma uznania w standardach webowych ani w dokumentacji dotyczącej projektowania stron internetowych. Może być mylony z pojęciem ikony, ale nie odnosi się bezpośrednio do ikon w kontekście przeglądarek. Webicon to również nieformalne odniesienie, które nie jest szeroko stosowane w branży. W rzeczywistości nie ma ustalonej definicji tego terminu w dokumentacji dotyczącej projektowania stron. Emoticon to zaś symbol wyrażający emocje, często stosowany w komunikacji internetowej (np. :) lub :( ), a nie w kontekście ikon reprezentujących strony internetowe. Emoticony są używane głównie w tekstach, czatach i na forach internetowych, aby wyrazić uczucia, podczas gdy favicony są elementem interfejsu użytkownika, mającym na celu identyfikację wizualną strony. Z tego względu ani iConji, ani webicon, ani emoticon nie mogą być poprawnymi odpowiedziami na pytanie dotyczące ikony przed adresem URL w przeglądarkach.
Pytanie 14

Co można powiedzieć o stylu hiperłącza na podstawie opisu CSS, zakładając, że żadne inne style nie zostały zdefiniowane?

a:link {
  color: green;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}
A. Gdy hiperłącze jest nieodwiedzone, jego tekst jest koloru niebieskiego z podkreśleniem.
B. Hiperłącze jest zawsze podkreślone.
C. Gdy kursor znajdzie się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony.
D. Tekst odwiedzonego hiperłącza jest koloru czerwonego.
Twoja odpowiedź jest poprawna. W przypadku hiperłącza, w momencie, gdy kursor znajduje się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony. Jest to efekt zastosowania stylu CSS w stanie 'hover'. Styl ten umożliwia dynamiczną zmianę wyglądu elementu, kiedy kursor myszy znajduje się nad nim. Jest to praktyka powszechnie stosowana w celu zwiększenia użyteczności i interaktywności stron internetowych. Dobrą praktyką jest również zapewnienie kontrastu między kolorem tła a tekstem dla lepszej czytelności. W tym przypadku, kolor tekstu zmienia się na czerwony, co zapewnia wyraźny kontrast i zwraca uwagę użytkownika. Równocześnie dodanie podkreślenia jest dodatkowym wizualnym wskaźnikiem, że dany element jest hiperłączem. Zastosowanie takiego stylu pozwala na intuicyjne i efektywne poruszanie się po stronie internetowej.
Pytanie 15

Jaką wartość w formacie szesnastkowym ma kolor określony kodem RGB o wartościach rgb(128,16,8)?

A. #801008
B. #FF1008
C. #800F80
D. #FF0F80
Jeśli mamy kolor RGB zapisany jako rgb(128, 16, 8), to możemy go przerobić na format szesnastkowy, co jest bardzo przydatne w grafice i web designie. W tym przypadku mamy czerwony na poziomie 128, zielony 16, a niebieski 8. Z każdą z tych wartości robimy tak, że dzielimy je na 16 i szukamy odpowiadających im cyfr hex. I tak dla 128 dostajemy 80, dla 16 to 10, a 8 to 08. Końcowy kolor w formacie szesnastkowym to #801008. To umiejętność, którą dobrze znać w IT, zwłaszcza jeśli chodzi o robienie stron www, bo kody hex są szeroko używane w CSS. Dzięki temu można zaoszczędzić miejsce i naprawdę ułatwić sobie życie przy pisaniu kodu. Zrozumienie jak to działa jest mega ważne dla projektantów i programistów, żeby dobrze zarządzać kolorami w swoich projektach.
Pytanie 16

Który z wymienionych formatów wideo nie jest wspierany przez standard HTML5?

A. B. Ogg
B. A. AVI
C. C. MP4
D. D. WebM
Odpowiedź A. AVI jest trafna, bo format AVI (Audio Video Interleave) nie jest wspierany przez HTML5. W HTML5 mamy trzy główne formaty wideo, które przeglądarki akceptują: Ogg, MP4 i WebM. AVI to starszy format od Microsoftu, który nie spełnia dzisiejszych standardów. Warto używać formatów, które pasują do HTML5, takich jak MP4 (z kodekiem H.264) czy WebM (z kodekiem VP8), bo to zapewnia lepszą wydajność i szeroką kompatybilność z różnymi urządzeniami i przeglądarkami. Na przykład, kiedy osadzamy filmy na stronach, ważne jest, żeby wszystko działało płynnie na różnych platformach, bez potrzeby dodatkowych wtyczek. Dodatkowo, korzystanie z tych formatów wspiera SEO i poprawia wrażenia użytkowników, co w dzisiejszym cyfrowym świecie jest naprawdę istotne.
Pytanie 17

Fragment kodu w języku JavaScript realizujący dodawanie dwóch liczb ma poniższą postać. Aby dodawanie wykonane było po kliknięciu przycisku o nazwie "dodaj", należy w wykropkowane miejsce wstawić

Podaj pierwszą liczbę: <input type="text" name="liczba1" />
Podaj drugą liczbę: <input type="text" name="liczba2" />
….
<script type=text/javascript>
function dodaj()
{
    // ta funkcja realizuje dodawanie i podaje jego wynik
}
</script>
A. <button onselect="return dodaj()">oblicz</button>
B. <button onselect="return dodaj()">dodaj</button>
C. <button onclick="return dodaj()">dodaj</button>
D. <button onclick="return oblicz()">dodaj</button>
Gratulacje, wybrałeś poprawną odpowiedź. Przycisk w JavaScript jest aktywowany poprzez zdarzenie onclick, które jest wyzwalane po kliknięciu przycisku. Właściwość onclick jest jednym z wielu zdarzeń w JavaScript, które są używane do obsługi interakcji użytkownika. Kiedy użytkownik kliknie przycisk, zdarzenie onclick jest wywoływane i kod zawarty w tym zdarzeniu jest wykonany. W tym przypadku, kod to 'return dodaj()', co oznacza, że funkcja 'dodaj' jest wywoływana. Ta funkcja została zdefiniowana w skrypcie JavaScript i realizuje dodawanie dwóch liczb. Zdarzenie onclick jest często używane w praktycznych zastosowaniach, takich jak przyciski subskrybcji, przyciski do logowania czy przyciski do przesyłania formularzy. Zasada ta jest zgodna z dobrymi praktykami programowania, które zalecają utrzymanie interakcji użytkownika w kodzie JavaScript zamiast HTML.
Pytanie 18

Formatowanie CSS dla akapitu określa styl szarej ramki z następującymi właściwościami:

p {
    padding: 15px;
    border: 2px dotted gray;
}
A. Linia kreskowa; grubość 2 px; odległości poza ramką 15 px
B. Linia kropkowa; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px
C. Linia ciągła; grubość 2 px; odległości poza ramką 15 px
D. Linia ciągła; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px
Odpowiedź ta jest prawidłowa, ponieważ w CSS stylizowanie elementu akapitu za pomocą podanego kodu definiuje ramkę o linii kropkowej, grubości 2 pikseli oraz paddingu wynoszącym 15 pikseli. Padding to przestrzeń wewnętrzna pomiędzy zawartością elementu a jego ramką, co oznacza, że tekst w akapicie będzie oddalony od krawędzi ramki o 15 pikseli. Styl ramki 'dotted' jest często używany w projektach webowych, aby stworzyć efekt wizualny, który jest mniej formalny, a zarazem estetyczny. Można go wykorzystać w kontekście wyróżniania ważnych informacji lub sekcji strony, co zwiększa czytelność i przyciąga uwagę użytkowników. Przykładem zastosowania może być sekcja z informacjami o promocjach, gdzie forma wizualna ma na celu przyciągnięcie wzroku. Używając standardów CSS, dobrego podejścia do UX (User Experience) oraz wytycznych W3C, projektanci stron internetowych mogą efektywnie komunikować intencje i priorytety poprzez stylowanie wizualne.
Pytanie 19

Ustalenie w języku CSS wartości background-attachment: scroll oznacza, że

A. tło witryny będzie przesuwane wraz z przewijaniem strony
B. obraz tła pojawi się w prawym górnym rogu witryny
C. tło witryny pozostanie nieruchome i nie będzie się przesuwać podczas przewijania strony
D. obrazek tła będzie się powtarzać (kafelki)
Odpowiedź 2 jest poprawna, ponieważ zdefiniowana przez właściwość CSS 'background-attachment: scroll' oznacza, że tło strony przewija się razem z zawartością strony. W praktyce oznacza to, że gdy użytkownik przewija stronę w dół lub w górę, tło porusza się w tym samym kierunku, co inne elementy na stronie. Ta właściwość jest szczególnie przydatna w sytuacjach, kiedy chcemy, aby tło było bardziej zintegrowane z treścią, dając bardziej dynamiczny efekt wizualny. Zastosowanie 'scroll' jest zgodne z zachowaniem większości stron internetowych, gdzie tło i zawartość poruszają się synchronizacyjnie. Dobrym przykładem może być użycie tła w postaci gradientu lub subtelnego obrazu, który nie odwraca uwagi od treści, a jednocześnie wprowadza estetyczny element do projektu. Warto pamiętać, że w przypadku większych projektów, właściwość ta powinna być używana z rozwagą, aby uniknąć nieczytelności tekstu na tle lub nadmiernego rozpraszania uwagi użytkowników. Dobrą praktyką jest również testowanie różnych ustawień tła na różnych urządzeniach, aby zapewnić spójne doświadczenie użytkownika.
Pytanie 20

Znacznik <i> w języku HTML ma na celu

A. zmianę czcionki na kursywę
B. ustalenie nagłówka w treści
C. dodanie grafiki
D. określenie formularza
Znacznik <i> w języku HTML jest używany do formatowania tekstu, aby uzyskać efekt pochylonego kroju pisma. Jest to element semantyczny, który wprowadza do dokumentu wizualną różnicę, ale także ma swoje miejsce w kontekście znaczeniowym. Użycie <i> może wskazywać na zmianę intonacji w tekście, taką jak nazwy książek, filmów, czy obcych wyrazów. W standardach HTML5, <i> jest zalecany do użytku, aby wyróżnić elementy tekstowe w sposób, który jest zgodny z zasadami dostępności i semantyki. Przykład zastosowania: <p>W książce <i>W pustyni i w puszczy</i> autorstwa Henryka Sienkiewicza...</p>. Oznaczanie tekstu w ten sposób wspiera nie tylko estetykę strony, ale również poprawia doświadczenie użytkowników korzystających z technologii asystujących, które mogą interpretować znaczenie tak oznaczonego tekstu. Warto również pamiętać o odpowiednich stylach CSS, które można zastosować do tego znacznika, aby dostosować jego wygląd do reszty witryny.
Pytanie 21

p { font-family: Arial, Helvetica, sans-serif; }
Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:
A. dekoracyjną.
B. szeryfową.
C. maszynową.
D. bezszeryfową.
W podanym fragmencie CSS deklaracja font-family: Arial, Helvetica, sans-serif oznacza, że przeglądarka ma najpierw spróbować użyć czcionki Arial, jeśli jej nie znajdzie – Helvetica, a jeśli żadna z tych nazwanych czcionek nie będzie dostępna w systemie użytkownika, to sięgnie po dowolną domyślną czcionkę z rodziny sans-serif. I to właśnie jest klucz: słowo kluczowe sans-serif na końcu definiuje rodzinę kroju pisma, czyli czcionkę bezszeryfową. Czcionki bezszeryfowe (sans-serif) nie mają tzw. szeryfów, czyli małych ozdobników na końcach liter. Przykłady takich krojów to właśnie Arial, Helvetica, Verdana, Roboto. W specyfikacji CSS (np. CSS Fonts Module Level 3) wyraźnie wyróżnia się generics: serif, sans-serif, monospace, cursive, fantasy itp. Zapis użyty w pytaniu jest zgodny z dobrymi praktykami: najpierw konkretne fonty, potem ogólna rodzina. W praktyce taki zapis stosuje się niemal wszędzie w projektowaniu stron WWW: dla tekstów w interfejsach, nagłówków, opisów przycisków, bo krój bezszeryfowy jest bardziej czytelny na ekranach, szczególnie przy małych rozdzielczościach i na urządzeniach mobilnych. Moim zdaniem warto zapamiętać ten schemat: najpierw nazwy konkretnych fontów, na końcu zawsze jeden z generycznych typów (sans-serif, serif, monospace itd.). Dzięki temu masz pewność, że nawet jeśli użytkownik nie ma zainstalowanego Ariala czy Helvetiki, i tak zobaczy tekst w odpowiednim rodzaju czcionki – w tym wypadku właśnie bezszeryfowej. To jest standardowa i rekomendowana praktyka w CSS, stosowana praktycznie w każdym profesjonalnym projekcie webowym.
Pytanie 22

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

Ilustracja do pytania
A. ma wskaźnik myszy ustawiony nad nim
B. był już odwiedzany
C. posiada niepoprawny adres URL
D. jeszcze nie był odwiedzany
W języku CSS selektor a:visited odnosi się do linków, które użytkownik już odwiedził. To pseudo-klasa, która umożliwia projektantom stron internetowych kontrolowanie wyglądu linków po ich kliknięciu, co poprawia doświadczenia użytkownika i umożliwia łatwiejszą nawigację. W przykładzie a:visited{color:orange;} wszystkie odwiedzone linki zostaną pokolorowane na pomarańczowo, co wizualnie odróżnia je od nieodwiedzonych linków. To podejście jest zgodne z zasadami dostępności, które sugerują, aby odwiedzone linki były w jakiś sposób wyróżnione. Praktycznym zastosowaniem tej wiedzy jest tworzenie stron, które są bardziej przejrzyste i intuicyjne dla użytkowników. Dobre praktyki zalecają, by różnica między odwiedzonymi a nieodwiedzonymi linkami była subtelna, ale zauważalna. Ustawianie różnych kolorów dla tych stanów linków jest popularnym rozwiązaniem. Prawidłowe użycie pseudo-klasy :visited wspiera także budowanie stron responsywnych, które poprawiają UX i spełniają standardy nowoczesnego designu, jednocześnie biorąc pod uwagę kwestie związane z prywatnością użytkowników, ponieważ CSS nie pozwala na stylizowanie niektórych właściwości odwiedzonych linków.
Pytanie 23

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

Ilustracja do pytania
A. Efekt 1
B. Efekt 2
C. Efekt 3
D. Efekt 4
Efekt 2 jest prawidłowy, ponieważ odpowiada dokładnemu odwzorowaniu HTML. Kod zawiera element <textarea> oraz dwa pola typu checkbox. Przeglądarka wyświetla pole tekstowe o określonym rozmiarze, gdzie użytkownik może wpisać tekst. Checkboxy pozwalają na wybór opcji, niezależnych od siebie, co odróżnia je od radiobuttonów. Przykładowy text wpisany w pole <textarea> zostanie wyświetlony w miejscu tego pola, co jest dobrze widoczne na obrazie odpowiadającym efektowi 2. Warto pamiętać, że <textarea> stosuje się do dłuższych form tekstu, co jest standardem w projektowaniu formularzy. Użycie checkboxów jest zgodne z dobrymi praktykami, gdy użytkownik może zaznaczyć dowolną liczbę opcji. Jest to ważne, aby dostarczyć użytkownikowi intuicyjny interfejs do wprowadzania i wyboru danych. W HTML ważne jest, aby kod był semantyczny i zgodny z oczekiwaniami użytkowników, co ten przykład dobrze ilustruje. Formularze powinny być zawsze testowane pod kątem użyteczności i poprawności w różnych przeglądarkach.
Pytanie 24

Znacznik <ins> w HTML ma na celu wskazanie

A. bloku tekstu, który jest cytowany
B. tekstu, który został przerobiony
C. tekstu, który został dodany
D. tekstu, który został usunięty
Znacznik <ins> w HTML jest używany do oznaczania tekstu, który został dodany w kontekście edytowania treści. Zgodnie ze standardem HTML5, element <ins> reprezentuje wprowadzenie nowego tekstu, co jest szczególnie przydatne w kontekście śledzenia zmian w dokumentach. Używając <ins>, możemy nie tylko oznaczyć dodany tekst, ale także dostarczyć kontekstu dla jego wprowadzenia, na przykład poprzez dodanie atrybutu datetime, który wskazuje, kiedy zmiana została wprowadzona. Praktyczne zastosowanie tego znacznika można zauważyć w edytorach treści, gdzie użytkownicy mogą wprowadzać poprawki, a powstałe zmiany są wizualizowane. Dzięki temu osoby przeglądające dokument mogą łatwo zauważyć, co zostało dodane. Warto również wspomnieć, że w połączeniu z odpowiednim stylem CSS, zmiany te mogą być wyróżnione w sposób, który zwiększa czytelność tekstu. Standardy W3C zalecają stosowanie znaczników semantycznych, takich jak <ins>, aby poprawić dostępność oraz zrozumiałość treści.
Pytanie 25

Jaki wynik pojawi się po wykonaniu zaprezentowanego kodu HTML?

Ilustracja do pytania
A. Odpowiedź D
B. Odpowiedź A
C. Odpowiedź B
D. Odpowiedź C
W analizie kodu HTML istotne jest zrozumienie struktury zagnieżdżonych list. Błędne odpowiedzi wynikają z niedokładnej interpretacji hierarchii i stylizacji list. Listy uporządkowane oznaczone tagiem ol oraz nieuporządkowane ul są podstawą do strukturalizacji informacji w HTML. Częsty błąd polega na nieuwzględnieniu, jak przeglądarki interpretują zagnieżdżone listy. Element ol z atrybutami type i start zmienia styl numeracji. Wersje z atrybutem type=A zmieniają numerację na literową, a start=4 decyduje o punkcie startowym. Pominięcie tego aspektu prowadzi do błędnych wniosków. Dobre praktyki obejmują klarowność struktury HTML poprzez właściwe użycie tagów i atrybutów, co jest kluczowe dla dostępności i użyteczności stron. Przy projektowaniu, warto pamiętać o spójności formatowania i zgodności z semantyką HTML, co poprawia doświadczenia użytkowników i wydajność SEO. Właściwe zrozumienie i zastosowanie atrybutów list ułatwia zarządzanie złożonymi strukturami na stronach internetowych.
Pytanie 26

W języku HTML zdefiniowano znacznik a oraz atrybut rel nofollow.

A. jest wskazówką dla robota wyszukiwarki Google, aby nie śledził tego linku
B. oznacza, że kliknięcie w link nie przekieruje na stronę website.com
C. oznacza, że kliknięcie w link otworzy go w nowej karcie przeglądarki
D. jest poleceniem dla przeglądarki internetowej, aby nie traktowała słowa "link" jako hiperłącza
Pierwsza odpowiedź sugeruje, że kliknięcie w link nie przeniesie użytkownika do strony website.com, co jest absolutnie błędne. Użycie atrybutu nofollow nie zmienia funkcji samego linku w kontekście przeglądarki internetowej. Użytkownicy nadal mogą klikać w link, a przeglądarka otworzy stronę docelową. Atrybut nofollow ma zastosowanie wyłącznie do robotów wyszukiwarek, a nie do rzeczywistego zachowania linku w przeglądarkach. Druga odpowiedź myli również rolę atrybutu nofollow, sugerując, że link otworzy się w osobnej karcie przeglądarki. Rzeczywiście, aby link został otwarty w nowej karcie, powinien on zawierać atrybut target z wartością '_blank', a nie rel nofollow. Ostatnia odpowiedź sugeruje, że nofollow informuje przeglądarkę, aby nie formatowała słowa 'link' jako odnośnika. To również jest niepoprawne, ponieważ rel nofollow nie ma wpływu na sposób wyświetlania linków w przeglądarkach, a jego rola ogranicza się wyłącznie do komunikacji z robotami wyszukiwarek. W skrócie, wszystkie trzy odpowiedzi mylnie interpretują funkcję atrybutu nofollow, co może prowadzić do poważnych nieporozumień w zakresie SEO i zarządzania linkami.
Pytanie 27

Jakie polecenie w CSS wykorzystuje się do dołączenia zewnętrznego arkusza stylów?

A. import
B. open
C. require
D. include
W CSS, polecenie 'import' jest używane do załączenia zewnętrznego arkusza stylów. Pozwala na włączenie jednego arkusza CSS do innego, co umożliwia modularność i lepszą organizację stylów w projektach. Składnia polecenia 'import' jest następująca: @import url('ścieżka/do/arkusza.css');. Umożliwia to dynamiczne ładowanie stylów, co jest szczególnie przydatne w dużych projektach, gdzie może być konieczne podzielenie stylów na mniejsze, bardziej zarządzalne pliki. Warto również pamiętać, że polecenie powinno znajdować się na początku arkusza CSS, przed jakimikolwiek innymi regułami, aby mogło być prawidłowo przetworzone przez przeglądarki. Zgodnie z normami W3C, 'import' jest uznawane za standardową metodę organizacji stylów, jednak nadmierne jego użycie może wpłynąć na wydajność, ponieważ może prowadzić do zwiększenia liczby zapytań HTTP. W praktyce, najlepszym podejściem jest ograniczenie użycia 'import' do sytuacji, w których jest to rzeczywiście konieczne, a w miarę możliwości korzystanie z bezpośrednich linków do arkuszy stylów w sekcji <head> dokumentu HTML.
Pytanie 28

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. rysunku umieszczonego w tle strony w poziomie
B. rysunku znajdującego się w tle strony w pionie
C. rysunku osadzonego znacznikiem img
D. tła każdego znacznika akapitu
W definicji stylu CSS, zastosowane tło z rysunkiem 'rysunek.gif' jest powtarzane w pionie dzięki właściwości 'background-repeat: repeat-y'. Oznacza to, że obrazek będzie powielany wzdłuż osi Y, co skutkuje tym, że obrazek jest umieszczany jeden nad drugim, tworząc wrażenie ciągłości. Aby lepiej zrozumieć działanie tej właściwości, warto przyjrzeć się innym ustawieniom tła. Na przykład, właściwość 'background-repeat: repeat' powtarza obraz zarówno w poziomie, jak i w pionie, natomiast 'background-repeat: no-repeat' zapobiega jakimkolwiek powtórzeniom. W standardach CSS, takich jak CSS3, definiowanie tła w ten sposób jest zgodne z zasadami, które pozwalają na elastyczne projektowanie stron internetowych. W praktyce, użycie powtarzającego się tła może być przydatne w przypadku prostych wzorów, które mają stworzyć efekt wizualny, nie obciążając jednocześnie zbytnio zasobów, co jest istotne dla wydajności ładowania strony.
Pytanie 29

Wskaż zapis stylu CSS formatujący punktor list numerowanych na wielkie cyfry rzymskie, a list punktowanych na kwadraty.

A. ol { list-style-type: upper-alpha; }
   ul { list-style-type: disc; }

B. ol { list-style-type: square; }
   ul { list-style-type: upper-roman; }

C. ol { list-style-type: disc; }
   ul { list-style-type: upper-alpha; }

D. ol { list-style-type: upper-roman; }
   ul { list-style-type: square; }
A. C.
B. B.
C. A.
D. D.
Gratulacje, twoja odpowiedź jest poprawna! Wybór opcji D. odnosi się do poprawnego formatowania list w CSS. Odpowiedź pokazuje dobrą znajomość właściwości list-style-type, która jest kluczowa do formatowania typów list. W tym przypadku, dla listy numerowanej (ol), jest ustawiona wartość upper-roman, która reprezentuje wielkie cyfry rzymskie. Dla listy punktowanej (ul) ustawiamy wartość square, co daje efekt punktów w formie kwadratów. To właśnie takie formatowanie list jest preferowane w branży ze względu na jego estetykę i czytelność. Pamiętaj, że zrozumienie i umiejętność manipulacji różnymi właściwościami CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.
Pytanie 30

Który z przedstawionych kodów HTML sformatuje tekst według wzoru?
(uwaga: słowo "stacji" jest zapisane większą czcionką niż reszta słów w tej linii)

Lokomotywa

Stoi na stacji lokomotywa ...

A.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji lokomotywa ...</p>

B.
<h1>Lokomotywa</h1>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

C.
<h1>Lokomotywa</p>
<p>Stoi na <big>stacji</big> lokomotywa ...</p>

D.
<p><small>Lokomotywa</small></p>
<p>Stoi na <big>stacji<big> lokomotywa ...</p>
A. D.
B. C.
C. B.
D. A.
Brawo! Wybrałeś prawidłową odpowiedź, która jest kodem HTML formatującym słowo 'stacji' większą czcionką niż reszta tekstu. Wykorzystuje ona znacznik <big>, który jest wyjątkowo przydatny w sytuacjach, gdy chcemy podkreślić pewną część tekstu i sprawić, że będzie ona wyglądać na większą niż reszta. Jest to praktyka często stosowana na stronach internetowych, by przyciągnąć uwagę użytkownika do konkretnych informacji. Pamiętaj jednak, że znacznik <big> jest przestarzały i nie jest zalecany do stosowania w nowoczesnym kodowaniu HTML. Zamiast tego, w dzisiejszych czasach lepiej jest używać CSS do zmiany rozmiaru czcionki. Niemniej jednak, znajomość różnych znaczników HTML, w tym <big>, jest nadal ważna, zwłaszcza do zrozumienia i utrzymania starszych stron internetowych.
Pytanie 31

Jakie skutki przyniesie zastosowanie przedstawionego formatowania CSS dla nagłówka trzeciego stopnia?

<style> h3 { background-color: grey; } </style> ... <h3 style="background-color: orange;"> Rozdział 1.2.2. </h3>
A. tło będzie pomarańczowe
B. kolor tekstu będzie szary
C. tło będzie szare
D. kolor tekstu będzie pomarańczowy
W tym przykładzie pokazano dwa różne sposoby stylizacji za pomocą CSS: styl wbudowany i styl zewnętrzny. Styl wbudowany ma wyższy priorytet, bo jest przypisany bezpośrednio do elementu HTML, a to oznacza, że w nagłówku trzeciego stopnia kolor tła będzie pomarańczowy. To ma sens, bo czasem musimy przeskoczyć ogólne reguły stylizacji, żeby wprowadzić jakieś szczególne zmiany. Używanie stylów wbudowanych może być jednak ryzykowne, bo jak się ich nagromadzi, to ciężko się potem w tym połapać. Dlatego lepiej korzystać z zewnętrznych stylów – są bardziej uporządkowane i pozwalają na łatwe powtarzanie kodu CSS. Ważne jest też, żeby nie łączyć HTML z CSS w sposób, który wprowadza zamęt, bo to ułatwia życie i sprawia, że kod jest bardziej zrozumiały. Wiedza na temat priorytetów w CSS jest kluczowa dla każdego, kto chce dobrze projektować strony i mieć wszystko ładnie poukładane.
Pytanie 32

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }
A. każdy punkt listy zyska osobne tło z grafiki rys.gif
B. rys.gif wyświetli się jako tło dla listy nienumerowanej
C. punkt listy nienumerowanej będzie rys.gif
D. rys.gif stanie się ramką dla listy nienumerowanej
Zrozumienie właściwości CSS jest kluczowe dla tworzenia poprawnych i estetycznych stron internetowych. List-style-image to właściwość, która zastępuje domyślny punktor listy nienumerowanej obrazkiem, co było poprawnie wskazane w pierwszej odpowiedzi. Błędne jest jednak myślenie, że obraz rys.gif stanie się ramką dla listy. Taka funkcjonalność wymaga użycia właściwości CSS border, a nie list-style-image. Ramki wokół elementów HTML definiowane są za pomocą właściwości takich jak border-style, border-width i border-color. Następne nieporozumienie dotyczy myśli, że każdy punkt listy będzie miał osobne tło z obrazkiem. Aby osiągnąć ten efekt, należałoby użyć właściwości background-image dla każdego elementu listy (li), a nie list-style-image na poziomie ul. Ostatnim błędnym wnioskiem jest przypuszczenie, że rys.gif stanie się tłem całej listy nienumerowanej. Właściwość, która to umożliwia, to background-image, a nie list-style-image. Wybierając właściwą metodę, można precyzyjnie dostosować styl listy do zamierzonych efektów graficznych. Poprawne zrozumienie i zastosowanie tych właściwości jest kluczowe dla poprawnego tworzenia arkuszy stylów CSS i uniknięcia nieporozumień w projektowaniu wizualnym stron.
Pytanie 33

W wyniku walidacji strony został wygenerowany błąd. Oznacza on, że

Ilustracja do pytania
A. oznaczenie ISO-8859-2 nie istnieje.
B. w atrybucie charset jest dozwolona wyłącznie wartość "utf-8".
C. oznaczenie kodowania znaków powinno być zapisane bez myślników.
D. w znaczniku meta nie występuje atrybut charset.
Dobra robota! Twoja odpowiedź jest na miejscu. To, co się stało z błędem walidacji, to fakt, że przy atrybucie charset w znaczniku meta musisz zawsze podać 'utf-8'. To standard kodowania Unicode, który w sieci jest bardzo popularny. Kodowanie UTF-8 ma to do siebie, że obsługuje mnóstwo znaków, co sprawia, że nadaje się do prawie wszystkich języków na świecie. Dlatego warto to stosować przy tworzeniu nowoczesnych stron. HTML5 jasno mówi, że każdy dokument powinien mieć ten znacznik w sekcji head, czyli na przykład: <meta charset='utf-8'>.
Pytanie 34

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

Ilustracja do pytania
A. B
B. D
C. C
D. A
Odpowiedź C jest prawidłowa, ponieważ atrybut bgcolor jest przestarzałą metodą określania koloru tła w HTML i nie jest częścią CSS. CSS (Cascading Style Sheets) zostało stworzone, aby oddzielić prezentację dokumentu od jego struktury. Korzystanie z CSS pozwala na lepsze zarządzanie stylem i spójność w wyglądzie wielu stron internetowych. Atrybuty HTML związane z wyglądem, takie jak bgcolor, zostały zastąpione przez deklaracje w CSS. Na przykład w CSS można ustawić kolor tła całej strony za pomocą selektora body i właściwości background-color. Takie podejście jest bardziej elastyczne i zgodne z nowoczesnymi standardami. Dzięki CSS możliwe jest stosowanie zaawansowanych stylizacji, takich jak gradienty czy obrazy tła, które nie były dostępne w prostych atrybutach HTML. Przy projektowaniu stron internetowych zaleca się, aby unikać przestarzałych atrybutów HTML, które mogą być niekompatybilne z nowoczesnymi przeglądarkami i powodować problemy z dostępnością.
Pytanie 35

Znacznik <strong> tekst</strong> w HTML będzie ukazywany przez przeglądarkę w identyczny sposób, jak znacznik

A. <b>tekst</b>
B. <big>tekst</big>
C. <sub>tekst</sub>
D. <h1>tekst</h1>
Znacznik <strong> w języku HTML jest używany do oznaczania tekstu, który ma być wyświetlany w sposób wyróżniony, co sugeruje jego większe znaczenie, natomiast znacznik <b> jest używany tylko do pogrubienia tekstu, bez dodatkowego kontekstu semantycznego. Oba znaczniki są wizualnie identyczne w większości przeglądarek, co powoduje, że można je stosować zamiennie w niektórych przypadkach. Jednakże, zgodnie z najnowszymi standardami HTML, zaleca się używanie <strong> dla tekstu, który ma większe znaczenie, ponieważ to pomaga w SEO i dostępności. Na przykład, tekst umieszczony w znaczniku <strong> może być lepiej interpretowany przez technologie wspomagające, takie jak czytniki ekranu, co czyni go bardziej dostępnym dla osób z niepełnosprawnościami. Przykład użycia: <strong>ważne informacje</strong> w odróżnieniu od <b>ważne informacje</b>, gdzie znaczenie semantyczne jest pominięte. Dlatego, mimo że wizualnie nie widać różnicy, semantyka HTML jest kluczowym aspektem, który wpływa na sposób, w jaki treść jest interpretowana i przetwarzana przez różnorodne systemy.
Pytanie 36

Model barw o parametrach: odcień, nasycenie, jasność i przezroczystość, to

A. HSLA
B. RGBA
C. SRGB
D. CMYK
Prawidłowa odpowiedź to HSLA, bo dokładnie ten model opisuje kolor za pomocą czterech parametrów: odcień (Hue), nasycenie (Saturation), jasność (Lightness) i przezroczystość (Alpha). W praktyce w CSS zapis wygląda na przykład tak: `hsla(210, 50%, 40%, 0.7)`. Pierwsza wartość, odcień, to kąt na kole barw w stopniach (0–360), gdzie 0 to czerwony, 120 to zielony, 240 to niebieski itd. Nasycenie i jasność zapisujemy w procentach – nasycenie określa „intensywność” koloru, a jasność to to, czy kolor jest ciemny czy bardzo rozjaśniony. Ostatni parametr, alpha, to kanał przezroczystości w zakresie od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty). Moim zdaniem HSLA jest dużo wygodniejszy od klasycznego RGB przy projektowaniu interfejsów, bo łatwiej myśleć w kategoriach „przyciemnij ten kolor o 20%” albo „zmniejsz trochę nasycenie”, niż ręcznie kombinować z trzema składowymi R, G i B. W nowoczesnym front-endzie często stosuje się HSLA do definiowania palet kolorów, np. w zmiennych CSS, właśnie dlatego, że łatwo jest tworzyć spójne warianty: hover, focus, disabled, tła, obramowania. Dobre praktyki w UI/UX mówią, żeby trzymać stały odcień (Hue) dla jednego typu akcji, a zmieniać głównie jasność i nasycenie, żeby uzyskać różne stany tego samego koloru. Warto też wiedzieć, że HSLA to tak naprawdę tylko inny sposób zapisu kolorów w przestrzeni RGB, ale dużo bardziej „ludzki” w obsłudze. Przeglądarki zgodne ze standardami CSS3 i nowszymi w pełni wspierają HSLA, więc spokojnie można go używać w projektach komercyjnych. Dobrą praktyką jest także świadome korzystanie z kanału alpha, np. do półprzezroczystych nakładek, cieni czy tła pod modale, zamiast używania grafik PNG z przezroczystością.
Pytanie 37

W języku CSS, aby zdefiniować marginesy zewnętrzne o wartościach: margines górny i dolny 20 px, lewy i prawy 40 px należy użyć kodu

A. margin: 20px 20px 40px 40px;
B. margin: 20px 40px 40px 20px;
C. margin: 20px 40px;
D. margin: 40px 20px;
Poprawny zapis margin: 20px 40px; wynika z tzw. skróconej (shorthand) składni własności margin w CSS. Gdy podajemy dwie wartości, przeglądarka interpretuje je zawsze w ten sam sposób: pierwsza wartość dotyczy marginesu górnego i dolnego (top i bottom), a druga wartość dotyczy marginesu lewego i prawego (left i right). Czyli dokładnie tak, jak w treści pytania: 20 px góra/dół i 40 px lewo/prawo. To jest zgodne ze specyfikacją CSS (CSS Box Model) i działa we wszystkich współczesnych przeglądarkach. Moim zdaniem warto zapamiętać ogólny schemat dla margin i padding: – 1 wartość: wszystkie cztery strony jednakowe (margin: 20px;) – 2 wartości: góra/dół, lewo/prawo (margin: 20px 40px;) – 3 wartości: góra, lewo/prawo, dół (margin: 10px 20px 30px;) – 4 wartości: góra, prawo, dół, lewo – zgodnie z ruchem wskazówek zegara (margin: 10px 20px 30px 40px;) W praktyce zapis z dwiema wartościami jest bardzo często używany w layoutach responsywnych, np. przy centrowaniu kontenera: .container { margin: 20px auto; width: 80%; }. Zamiast podawać osobno margin-top, margin-right, margin-bottom i margin-left, używamy jednego, czytelnego skrótu. To nie tylko skraca kod, ale też ułatwia jego późniejsze utrzymanie. Dobrą praktyką jest też świadome korzystanie z jednostek. W przykładach szkolnych często pojawiają się piksele, ale w prawdziwych projektach produkcyjnych często stosuje się rem, em czy jednostki procentowe, żeby łatwiej skalować interfejs. Sama zasada działania shorthand margin pozostaje jednak identyczna, niezależnie od jednostki. Jeśli rozumiesz ten mechanizm, dużo łatwiej będzie Ci później ogarniać spacing w bardziej złożonych layoutach i frameworkach CSS, typu Bootstrap czy Tailwind, które bazują na tych samych regułach box modelu.
Pytanie 38

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

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);
A. 15,4
B. 12,4
C. 15,5
D. 12,5
W tym skrypcie JavaScript najpierw zmienna a zaczyna z wartością 5. Gdy używasz operatora dekrementacji, czyli a--, to jego wartość zostaje przypisana do zmiennej b, zanim a zostanie zmniejszona. Dlatego b ma wartość 5, a a staje się 4. Potem mamy a *= 3, co znaczy, że mnożymy 4 (aktualną wartość a) przez 3, co daje nam 12. Na końcu, wywołując document.write(a + ',' + b), dostajemy w wyniku 12,5. Zrozumienie tych operatorów w JavaScript jest naprawdę ważne. Operatorzy, jak ++ i --, są powszechnie używani w pętlach, więc znajomość ich działania pomoże ci pisać lepszy i bardziej przejrzysty kod, unikając typowych błędów przy przypisywaniu wartości. Fajnie też wiedzieć, że podobnie działają oni w wielu innych językach programowania, więc ta wiedza jest naprawdę uniwersalna.
Pytanie 39

Który zapis jest selektorem pseudoklasy CSS?

A. body
B. a:link
C. p#wyroznienie
D. td.wyroznienie
W tym zadaniu wszystkie odpowiedzi wyglądają jak poprawne selektory CSS, ale tylko jedna z nich jest selektorem pseudoklasy. To dość typowa pułapka: ktoś widzi poprawny składniowo selektor i automatycznie zakłada, że skoro jest „jakiś znak specjalny”, to pewnie chodzi o pseudoklasę. W CSS warto jednak rozróżniać kilka zupełnie różnych mechanizmów: selektor typu, selektor klasy, selektor identyfikatora oraz właśnie pseudoklasy. Zapis „p#wyroznienie” łączy selektor typu z selektorem identyfikatora. Oznacza akapit <p> o konkretnym id="wyroznienie". Znak # w CSS nie ma nic wspólnego z pseudoklasami, tylko jednoznacznie wskazuje na identyfikator elementu. To jest bardzo częste nieporozumienie: część osób myli dwukropek z kratką, bo oba wyglądają jak „specjalne dopiski”. Tymczasem pseudoklasy zawsze używają dwukropka, a identyfikatory – znaku #. „td.wyroznienie” to z kolei połączenie selektora typu z selektorem klasy. Ten zapis wybierze komórki tabeli <td> posiadające class="wyroznienie". Kropka w CSS zawsze oznacza klasę, czyli coś, co definiujemy w atrybucie class w HTML. To zupełnie inny mechanizm niż pseudoklasy, bo klasę nadajemy ręcznie w kodzie HTML, a pseudoklasa opisuje stan lub cechę obliczaną przez przeglądarkę, np. czy element jest pierwszy w swoim rodzicu, czy link jest odwiedzony, czy pole formularza ma fokus. Zapis „body” to najprostszy możliwy selektor typu – wskazuje wszystkie elementy <body> w dokumencie (zwykle jest tylko jeden). Tu w ogóle nie ma żadnego symbolu wskazującego na pseudoklasę, więc traktowanie tego jako pseudoklasy to już zupełne pomieszanie pojęć: to po prostu nazwa elementu HTML. Typowy błąd myślowy przy takich pytaniach polega na tym, że zamiast skupić się na definicji pseudoklasy („selektor z dwukropkiem, opisujący stan”), uczestnik testu szuka odpowiedzi, która „najbardziej wygląda na zaawansowaną”. Tymczasem wszystkie błędne odpowiedzi są zwykłymi, podstawowymi selektorami: typu, klasy i id. Pseudoklasa zawsze ma postać coś:coś_tam, np. a:hover, button:disabled, li:first-child. Jeżeli nie ma dwukropka – to na pewno nie jest pseudoklasa, niezależnie od tego, jak bardzo skomplikowany wygląda zapis.
Pytanie 40

W CSS zastosowano poniższe formatowanie. Kolorem czerwonym będzie wyświetlony

h1 i {
   color: red;
}
A. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie
B. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu
C. jedynie tekst italic we wszystkich poziomach nagłówków
D. tylko tekst italic nagłówka pierwszego stopnia
W stylach CSS selektor złożony h1 i oznacza, że formatowanie będzie stosowane tylko do elementów pochylonych i znajdujących się wewnątrz nagłówka pierwszego poziomu h1. W praktyce oznacza to, że taki zapis CSS zmienia kolor na czerwony tylko dla tekstu wewnątrz tagu <i> znajdującego się w <h1>. Selekcja złożona umożliwia precyzyjne określanie, które elementy są formatowane, co jest kluczowe w przypadku dużych i złożonych stron internetowych. Zrozumienie działania selektorów jest fundamentem efektywnego stylizowania dokumentów HTML. Pozwala to na zachowanie spójności wizualnej oraz lepszą kontrolę nad wyglądem strony. Dobór odpowiednich selektorów w CSS to również jedna z dobrych praktyk, które sprzyjają czytelności kodu oraz jego łatwiejszej konserwacji w przyszłości. Taki zapis pozwala na minimalizację konfliktów stylów, które mogą się pojawić przy bardziej ogólnych selektorach. Praktyczne użycie selektorów złożonych jest więc zalecane w celu uzyskania bardziej kontrolowanego i przewidywalnego wyglądu strony internetowej, co jest zgodne ze standardami webowymi promującymi semantyczne i uporządkowane kodowanie.
Rozpocznij nowy egzamin
Powrót do strony głównej