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 czerwca 2026 12:09
Data zakończenia: 10 czerwca 2026 12:30

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jakiego elementu w języku HTML brakuje, aby walidator HTML zgłosił ostrzeżenie lub błąd?

A. <meta name="author" content=". . . .">

B. przynajmniej jednego <h1>

C. <title>

D. <link>

Odpowiedzi związane z elementami <link>, przynajmniej jednym <h1> oraz <meta name="author" content="..."> mogą wydawać się istotne w kontekście tworzenia strony internetowej, jednak nie są one obowiązkowe dla poprawnej walidacji dokumentu HTML. Element <link> jest używany do łączenia dokumentu HTML z zewnętrznymi zasobami, takimi jak arkusze stylów CSS, ale jego brak nie powoduje błędów walidacyjnych. W przypadku <h1>, jest to istotny element struktury nagłówków w HTML, ale nie ma wymogu, aby na stronie znajdował się przynajmniej jeden taki element. Choć warto stosować nagłówki do hierarchizacji treści, ich brak nie skutkuje ostrzeżeniem. Z kolei element <meta name="author"> dostarcza informacji o autorze strony, ale również nie jest obowiązkowy dla walidacji HTML. Nieprawidłowe podejście do wnioskowania o znaczeniu tych elementów może prowadzić do błędnych założeń o ich krytycznej roli w strukturze HTML. Ważne jest, aby zrozumieć, że standardy HTML definiują zasady walidacji, a element <title> jest jednym z nielicznych, które są uznawane za obligatoryjne w każdym dokumencie. Zrozumienie tych zasad pozwala na lepsze projektowanie stron, które są zgodne z najlepszymi praktykami oraz wymaganiami SEO.

Pytanie 2

W CSS zapis w postaci

 h1::first-letter {color: red;}

spowoduje, że kolor czerwony zostanie zastosowany do

A. tekstu nagłówka w pierwszym stopniu

B. pierwszej litery nagłówka w drugim stopniu

C. pierwszej litery nagłówka w pierwszym stopniu

D. pierwszej linii akapitu

Zapis <span>h1::first-letter {color: red;} </span> jest w porządku, bo korzysta z pseudoelementu :first-letter, który działa na pierwszą literkę w nagłówku h1. To całkiem fajne, bo możemy w ten sposób stylizować tę pierwszą literę i nadać nagłówkom ciekawszy wygląd. Na przykład, jeśli mamy nagłówek h1 z napisem 'Witaj świecie', to dzięki temu kodowi, litera 'W' zrobi się czerwona. W CSS warto ogarnąć, że :first-letter działa tylko na bloki, takie jak nagłówki czy akapity, więc warto to mieć na uwadze, gdy coś stylizujemy. Używanie pseudoelementów to dobre podejście do tworzenia ładnych i funkcjonalnych interfejsów, a przy okazji daje nam większą kontrolę nad tym, jak wyglądają nasze elementy.

Pytanie 3

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. tło będzie szare

C. kolor tekstu będzie szary

D. kolor tekstu będzie pomarańczowy

W kaskadowych arkuszach stylów CSS ważna jest zasada kaskadowania, która mówi o tym, jakie style powinny obowiązywać w przypadku konfliktów. Oparcie się na specyficzności selektorów i ich kolejności w kodzie to podstawa. W tym pytaniu mówimy o stylizacji nagłówka przy użyciu zewnętrznego stylu CSS i stylu wbudowanego. Styl wbudowany ma najwyższą specyficzność, czyli zawsze wygrywa z regułami z sekcji style, nawet jeśli są one globalne. To znaczy, że niezależnie od tego, co napisano w stylach dla nagłówka h3, to jednak styl wbudowany ustawi tło na pomarańczowe. Nie można zakładać, że zewnętrzne reguły mają wyższy priorytet, gdy nie są bardziej specyficzne albo nie używają !important. Zrozumienie tych zasad pozwala uniknąć typowych błędów w stylizacji, co jest wyjątkowo istotne w tworzeniu stron. Żeby wszystko ładnie wyglądało i było łatwe do zarządzania, lepiej unikać stylów wbudowanych przy większych projektach, gdzie oddzielenie struktury od prezentacji jest kluczowe dla utrzymania kodu. Lepiej skupić się na stylach zewnętrznych, mając na uwadze specyficzność i zasady kaskadowe, co zapewnia większą kontrolę nad wyglądem strony.

Pytanie 4

Jaką barwę przedstawia kolor określony w modelu RGB (255, 0, 0)?

A. zielona

B. niebieska

C. żółta

D. czerwona

Barwa zapisana w modelu RGB (255, 0, 0) odnosi się do intensywnego koloru czerwonego. Model RGB (Red, Green, Blue) jest standardem używanym w cyfrowym przetwarzaniu obrazu, gdzie natężenie światła w trzech podstawowych kolorach: czerwonym, zielonym i niebieskim, definiuje ostateczny kolor. Wartości w zakresie od 0 do 255 wskazują na poziom intensywności każdego z tych kolorów, gdzie 0 oznacza brak intensywności, a 255 maksymalną intensywność. W przypadku (255, 0, 0) maksymalne natężenie czerwieni (255) i brak zieleni oraz niebieskiego skutkuje czystym kolorem czerwonym. Przykładem zastosowania koloru czerwonego w praktyce są znaki drogowe, sygnały alarmowe oraz elementy graficzne w interfejsach użytkownika, które mają na celu przyciągnięcie uwagi. Standardy związane z kolorem, takie jak sRGB, definiują sposób, w jaki kolory są reprezentowane na różnych urządzeniach, co zapewnia spójność wizualną. Czerwony jest także jednym z kolorów podstawowych w modelu adytywnym, co podkreśla jego fundamentalne znaczenie w szerokim zakresie zastosowań wizualnych.

Pytanie 5

W semantycznym HTML odpowiednikiem tagu <b>, który nie tylko pogrubia tekst, ale również oznacza go jako istotniejszy, jest

A. <mark>

B. <em>

C. <ins>

D. <strong>

Znacznik <strong> w języku HTML semantycznym służy do oznaczania tekstu, który ma szczególne znaczenie w kontekście treści. Oprócz stylistycznego pogrubienia czcionki, <strong> wskazuje, że dany fragment tekstu jest ważny dla zrozumienia treści dokumentu. Przykładowo, w artykule omawiającym bezpieczeństwo w Internecie, można użyć <strong> do wyróżnienia kluczowych terminów, takich jak 'szyfrowanie' czy 'firewall', co podkreśla ich znaczenie w ochronie danych. Użycie znaczników semantycznych, takich jak <strong>, jest zgodne z najlepszymi praktykami dostępności, co zapewnia lepszą interpretację treści przez technologie asystujące, takie jak czytniki ekranu. Takie podejście poprawia nie tylko nawigację po stronie, ale również SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst i hierarchię treści. Warto również zauważyć, że w przeciwieństwie do <b>, który jedynie zmienia wygląd tekstu, <strong> wnosi dodatkowy sens do struktury dokumentu, co jest szczególnie istotne w kontekście tworzenia witryn internetowych, które są zarówno estetyczne, jak i funkcjonalne.

Pytanie 6

Reprezentacja znacznika HTML w formacie ```przejdź```

A. jest błędny, w atrybucie href należy wpisać adres URL

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

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

D. jest poprawny, po kliknięciu w odnośnik otworzy się strona internetowa o URL "hobby"

W odpowiedziach, które wskazują na błędy w zapisie znacznika HTML, pojawiają się nieporozumienia dotyczące funkcji atrybutu href w tagu <a>. Niepoprawne są twierdzenia sugerujące, że użycie znaku '#' w atrybucie href jest błędne. Wręcz przeciwnie, znak '#' jest standardowym sposobem definiowania odnośników do identyfikatorów na tej samej stronie. Zastosowanie atrybutu href w takiej formie jest powszechnie akceptowane i stosowane w praktyce web developerskiej. Kolejnym błędnym wnioskiem jest stwierdzenie, że w atrybucie href należy podać pełny adres URL. W rzeczywistości, gdy celem jest nawigacja do sekcji na tej samej stronie, wystarczy użyć symbolu '#' i odpowiedniego identyfikatora. Dodatkowo, pominięcie praktyki użycia href do nawigacji wewnętrznej prowadzi do mniejszych korzyści w zakresie użyteczności strony. Użytkownicy oczekują, że będą mogli łatwo przemieszczać się pomiędzy różnymi sekcjami długich treści, a niewłaściwe podejście do definiowania odnośników może prowadzić do frustracji i obniżenia jakości doświadczeń użytkowników. Warto zatem zrozumieć, że poprawne stosowanie takich odnośników jest kluczowe dla skutecznego projektowania stron internetowych.

Pytanie 7

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

a:hover { font-weight: bold; }

A. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

B. każdemu odnośnikowi niezależnie od aktualnego stanu.

C. wszystkim odnośnikom nieodwiedzonym.

D. wszystkim odnośnikom odwiedzonym.

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

Pytanie 8

Zgodnie z wytycznymi WCAG 2.x na poziomie AA minimalny kontrast tekstu (o standardowym rozmiarze) do tła, spełniający wymogi dostępności serwisu WWW dla osób z ograniczoną percepcją wzrokową wynosi

A. 4,5 : 1

B. 1,5 : 1

C. 2,0 : 1

D. 2,5 : 1

W tym pytaniu łatwo wpaść w pułapkę myślenia, że „jakikolwiek” kontrast wystarczy, by tekst był czytelny. Warto jednak oprzeć się na twardych definicjach z WCAG 2.x, a nie na subiektywnym wrażeniu, że coś „da się przeczytać”. Propozycje niższych wartości kontrastu, takich jak 1,5 : 1, 2,0 : 1 czy 2,5 : 1, odzwierciedlają typowy błąd: ocenianie czytelności tylko własnymi oczami, najczęściej osoby młodej, bez problemów ze wzrokiem, siedzącej przy dobrym monitorze i w dobrych warunkach oświetleniowych. Współczynniki zbyt niskie, rzędu 1,5 : 1 czy 2,0 : 1, oznaczają bardzo małą różnicę jasności między tekstem a tłem. Na ekranie będzie to wyglądało jak delikatne „rozmycie” tekstu w tle. Osoby z obniżonym kontrastem widzenia, z wadami refrakcji, a nawet użytkownicy korzystający ze słabszych ekranów lub w mocnym słońcu, zwyczajnie nie odczytają takiego tekstu bez dużego wysiłku. To nie jest tylko kwestia komfortu – przy dłuższej pracy może to powodować zmęczenie oczu, bóle głowy i zniechęcenie do korzystania z serwisu. Warto też zauważyć, że wartości 2,5 : 1 czasem „intuicyjnie” wydają się już całkiem niezłe, szczególnie gdy projektant przyzwyczajony jest do bardzo delikatnych, pastelowych palet. Ale WCAG 2.0 i 2.1 w kryterium 1.4.3 wyraźnie mówią: dla zwykłego tekstu poziom AA wymaga minimum 4,5 : 1. Niższe liczby mogą być stosowane tylko w określonych sytuacjach, np. dla dużego tekstu (wtedy próg 3 : 1) albo na poziomie AAA, gdzie są jeszcze ostrzejsze wymagania dla niektórych elementów. Wszelkie niższe wartości dla małego tekstu są po prostu niezgodne ze standardem. Kolejny typowy błąd myślowy to mieszanie wymagań estetycznych z wymogami dostępności. Projektanci często boją się „zbyt mocnych” kontrastów, bo wydaje im się, że interfejs będzie wyglądał zbyt ciężko, zbyt ostro. Przez to sięgają po bardzo jasne szarości albo blade kolory tekstu. Tymczasem branżowe dobre praktyki projektowania dostępnych interfejsów mówią jasno: kontrast minimum 4,5 : 1 dla podstawowego tekstu to absolutne minimum, a w wielu serwisach (np. administracja publiczna, systemy B2B używane godzinami) warto iść jeszcze wyżej. Trzymanie się zbyt niskich wartości nie tylko łamie standard WCAG, ale też realnie wyklucza część użytkowników z komfortowego korzystania z serwisu.

Pytanie 9

Który z poniższych znaczników jest używany do definiowania list w HTML?

A. <td>

B. <th>

C. <tr>

D. <ul>

<ul> jest znacznikami HTML, które definiuje nieuporządkowaną listę. Użycie tego znacznika pozwala na przedstawienie elementów listy w formie graficznej, gdzie każdy element jest oznaczony punktem. Jest to podstawowy element w HTML, który jest zgodny z wytycznymi W3C i szeroko stosowany w tworzeniu responsywnych i estetycznych interfejsów użytkownika. Przykładowe zastosowanie <ul> może obejmować listy składników, funkcji, czy też elementów menu na stronie internetowej. Stosując <ul>, można także użyć znacznika <li>, aby określić poszczególne elementy listy, co zwiększa czytelność i strukturalizację treści. Znajomość i umiejętność stosowania tych znaczników jest kluczowa dla każdego web developera, aby tworzyć dostępne i zrozumiałe dla użytkowników interfejsy, a także wspierać praktyki SEO poprzez odpowiednią organizację treści.

Pytanie 10

Wskaż poprawne stwierdzenie dotyczące przedstawionego kodu HTML.
<video width="640" height="480" controls>
<source src="animacja.mp4" type="video/mp4">
</video>

A. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.

B. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.

C. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

D. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.

Kod HTML przedstawiony w pytaniu wykorzystuje znacznik <video>, który jest elementem HTML5 pozwalającym na osadzanie filmów w dokumentach internetowych. W kontekście poprawnej odpowiedzi, kluczowym jest zrozumienie, że przeglądarki muszą obsługiwać HTML5, aby mogły w pełni funkcjonować z tym kodem. W przypadku starszych przeglądarek, które nie wspierają HTML5, element <video> może nie być wyświetlany lub nie będzie działał prawidłowo. Dlatego istotne jest, aby deweloperzy testowali swoje aplikacje w różnych środowiskach oraz aby korzystali z odpowiednich polyfilli dla starszych przeglądarek, które mogą poprawić ich funkcjonalność. Przykładowo, użycie biblioteki JavaScript takiej jak Video.js może pomóc w zapewnieniu wsparcia dla elementów wideo w szerszym zakresie przeglądarek. Dbałość o kompatybilność z różnymi wersjami przeglądarek to nie tylko kwestia estetyki, ale również użyteczności i dostępności aplikacji internetowych.

Pytanie 11

Który z poniższych zapisów CSS zmieni tło bloku na odcień niebieskiego?

A. div {border-color:blue;}

B. div {color:blue;}

C. div {shadow:blue;}

D. div {background-color:blue;}

Zapis 'div {background-color:blue;}' jest jak najbardziej na miejscu. Właściwość 'background-color' jest kluczowa, bo ustawia kolor tła dla elementów blokowych w CSS. Kiedy używasz 'blue' jako wartości, to mówisz, że tło ma być niebieskie. Ta właściwość jest częścią tego całego systemu CSS, który decyduje, jak powinny wyglądać elementy HTML. Ustawienie koloru tła jest ważne, bo wpływa na wygląd strony i to, jak kontrastują ze sobą tekst i tło, co jest istotne, by strona była dostępna dla każdego. Jeśli chciałbyś zmienić kolor tła, możesz korzystać z różnych wartości, takich jak kody HEX (np. #0000FF) albo RGB (np. rgb(0, 0, 255)). Możesz to zobaczyć w praktyce, na przykład: <div style='background-color:blue;'>Treść</div>, co ustawi tło 'diva' na niebieskie.

Pytanie 12

W CSS zapis

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

spowoduje, że tekst linków przybierze kolor żółty.

A. linków, które otwierają się w tej samej karcie.

B. treści akapitu.

C. linków, które otwierają się w nowej karcie.

D. wszystkich linków.

Odpowiedzi sugerujące, że kolor żółty dotyczy 'wszystkich odnośników', 'tekstu paragrafu' lub 'odnośników, które otwierają się w tej samej karcie' są błędne z kilku powodów. Po pierwsze, selektor CSS 'a[target="_blank"]' jest specyficzny dla odnośników, które otwierają się w nowej karcie, a więc nie obejmuje on wszystkich odnośników. Każdy odnośnik zdefiniowany w HTML jako <a> może mieć różne cele, a atrybut 'target' odgrywa kluczową rolę w tym, jak te odnośniki są obsługiwane przez przeglądarkę. Po drugie, nie istnieje możliwość, aby tekst paragrafu był objęty tym selektorem, ponieważ jest on dedykowany wyłącznie linkom. Warto pamiętać, że CSS służy do stylizacji elementów HTML, a nie do zachowania ich struktury semantycznej. Kolejną nieprawidłową koncepcją jest to, że kolor tekstu dotyczy odnośników otwierających się w tej samej karcie, ponieważ żaden z tych odnośników nie ma przypisanego atrybutu 'target="_blank"'. W praktyce, ważne jest, aby dobrze rozumieć selektory CSS oraz ich zastosowanie, co pozwoli na bardziej precyzyjne projektowanie interfejsów użytkownika oraz zapewnienie lepszej użyteczności i dostępności stron internetowych.

Pytanie 13

Aby umożliwić wybór kilku opcji jednocześnie w rozwijanej liście formularza HTML, należy dodać atrybut do znacznika select

A. disabled

B. size

C. multiple

D. value

Atrybut multiple w znaczniku select w HTML to super sprawa, bo dzięki niemu można zaznaczyć więcej niż jedną opcję z listy rozwijalnej. To się przydaje, jak ktoś musi wybrać kilka elementów w formularzu. Jak dodasz atrybut multiple, to przeglądarka pokazuje to jako pole do wyboru, gdzie można klikać na kilka wartości za pomocą klawiszy Ctrl albo Shift. Fajnie, że ten atrybut nie wymaga żadnych dodatkowych wartości, wystarczy, że go wrzucisz do znacznika select. To zgodne z dobrymi praktykami UX, bo pozwala na większą elastyczność i interaktywność formularzy. Co więcej, nie trzeba być programistycznym guru, żeby to wdrożyć, więc każdy może to zrobić. Używa się go w różnych aplikacjach webowych, zwłaszcza tam, gdzie zbieranie danych od użytkowników w prosty i przejrzysty sposób jest ważne.

Pytanie 14

Która z czynności nie wpłynie na objętość zajmowanej pamięci pliku graficznego?

A. Modyfikacja rozdzielczości obrazu

B. Zmiana rozmiaru obrazu przy użyciu atrybutów HTML

C. Kompresja

D. Interpolacja

Zmiana rozdzielczości obrazu, kompresja oraz interpolacja to techniki, które zdecydowanie wpływają na rozmiar pliku graficznego. Zmiana rozdzielczości obrazu polega na modyfikacji liczby pikseli w obrazie, co bezpośrednio wpływa na jego wagę. Im większa rozdzielczość, tym więcej danych jest przechowywanych, co skutkuje większym plikiem. W praktyce, jeśli zredukujemy rozdzielczość obrazu, jego rozmiar pliku również zmaleje, co może być przydatne w kontekście optymalizacji stron internetowych. Kompresja to kolejny kluczowy proces, który może znacznie wpłynąć na rozmiar pliku. Polega ona na zmniejszeniu ilości danych w pliku graficznym, co może być realizowane bez widocznej utraty jakości. Istnieją różne metody kompresji, takie jak JPEG, PNG czy WebP, z których każda ma swoje zastosowania w zależności od rodzaju obrazu i wymagań projektu. Interpolacja, z kolei, to technika stosowana podczas zmiany rozmiaru obrazów, która polega na obliczaniu nowych wartości pikseli na podstawie istniejących. W procesie tym może dojść do degradacji jakości obrazu, co w przypadku niewłaściwego zastosowania prowadzi do niepożądanych efektów wizualnych. Zrozumienie, jak te techniki wpływają na pliki graficzne, jest kluczowe dla każdego twórcy treści, który pragnie optymalizować swoje zasoby i zapewniać użytkownikom jak najlepsze doświadczenia podczas przeglądania stron internetowych.

Pytanie 15

Do którego akapitu przypisano podaną właściwość stylu CSS?
border-radius: 20%;

A. Rys. C

B. Rys. A

C. Rys. D

D. Rys. B

Właściwość border-radius ma specyficzne zastosowanie do zaokrąglania rogów elementów HTML i w tym kontekście inne odpowiedzi jak Rys. A Rys. C i Rys. D nie wykazują cech związanych z tą właściwością. Rys. A ma ostre krawędzie co sugeruje brak użycia zaokrągleń. To pokazuje że border-radius nie został tam zastosowany co jest często spotykanym błędem w przypadku gdy nie rozumie się działania tej właściwości. Rys. C z kolei ma przerywaną linię obramowania co może wskazywać na użycie innej właściwości CSS np. border-style a nie border-radius. Stylizacja taka jest przydatna do wizualnego oddzielenia sekcji ale nie dotyczy bezpośrednio zaokrąglania rogów. Z kolei Rys. D ma efekt cienia co sugeruje raczej użycie właściwości box-shadow niż border-radius. Często myli się te dwie właściwości ponieważ obie wpływają na wygląd ramki jednak działają na zupełnie innych zasadach. Rozpoznanie użycia właściwej właściwości CSS jest kluczowe w projektowaniu intuicyjnych i estetycznych interfejsów co wymaga zrozumienia jak i kiedy każda z nich powinna być zastosowana. Właściwe wykorzystanie border-radius jako elementu stylizacji jest istotnym aspektem profesjonalnego projektowania stron internetowych co wymaga dokładnego zrozumienia jego wpływu na wygląd i funkcjonalność strony.

Pytanie 16

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

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

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

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

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

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

Pytanie 17

input:focus { background-color: LightGreen; } W Ciebie CSS określono stylizację dla pola wejściowego. Tak przygotowane pole wejściowe będzie miało tło w odcieniu jasnozielonym?

A. kiedy zostanie najechane kursorem myszy bez jego klikania

B. po naciśnięciu przycisku myszy w celu wprowadzenia tekstu

C. w każdej sytuacji

D. jeżeli jest to pierwsza obecność tego elementu w dokumencie

Odpowiedzi, które wskazują na inne stany pól edycyjnych, nie są zgodne z definicją pseudoklasy :focus w CSS. Stan :focus jest aktywowany wyłącznie w momencie, gdy użytkownik klika w pole edycyjne lub przemieszcza się do niego za pomocą klawiatury (np. poprzez naciśnięcie klawisza Tab). Odpowiedzi takie jak 'gdy zostanie wskazane kursorem myszy bez kliknięcia' pomijają kluczowy element aktywacji, którym jest kliknięcie lub nawigacja za pomocą klawiatury. Wskazanie kursorem nie generuje stanu :focus, chyba że użytkownik rzeczywiście kliknie w pole. Z kolei stwierdzenie, że :focus dotyczy 'pierwszego wystąpienia tego znacznika w dokumencie', jest mylne, ponieważ stan :focus jest niezależny od lokalizacji elementu w DOM (Document Object Model) i odnosi się do konkretnego elementu, który jest aktualnie aktywny, a nie jego położenia. Odpowiedź 'w każdym przypadku' jest również niepoprawna, gdyż stan :focus jest aktywowany tylko w konkretnych okolicznościach, a nie zawsze. Takie błędne zrozumienie może prowadzić do problemów z użytecznością interfejsów użytkownika, ponieważ użytkownicy mogą nie otrzymywać właściwych wskazówek dotyczących aktywnych pól, co w konsekwencji obniża komfort korzystania z aplikacji. Kluczowe jest zrozumienie, że :focus jest jednym z wielu stanów, które mogą być zastosowane w CSS, co podkreśla znaczenie precyzyjnego definiowania interakcji w projektowaniu stron internetowych.

Pytanie 18

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

h1 i {
   color: red;
}

A. tylko tekst italic nagłówka pierwszego stopnia

B. jedynie tekst italic we wszystkich poziomach nagłówków

C. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu

D. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie

Analizując dostępne odpowiedzi, widzimy, że tylko jedna poprawnie interpretuje zastosowanie selektora CSS. Pierwsza odpowiedź sugeruje, że kolor czerwony zostanie zastosowany jedynie do tekstu pochylonego we wszystkich poziomach nagłówków, co jest błędne. Selekcja h1 i odnosi się wyłącznie do pochylonych elementów wewnątrz nagłówka pierwszego poziomu, a nie w innych nagłówkach. Druga odpowiedź zakłada, że cały tekst nagłówka pierwszego poziomu oraz pochylony tekst akapitu będzie czerwony. To nieprawda, ponieważ selektor dotyczy wyłącznie tekstu w tagu <i> wewnątrz <h1>, a nie oddzielnie pochyłych akapitów. Trzecia odpowiedź również źle interpretuje zakres selektora, twierdząc, że każdy pochyły tekst na stronie zostanie sformatowany na czerwono, co jest niezgodne z koncepcją selektorów złożonych, które w tym przypadku działają tylko w kontekście <h1>. Podstawowy błąd we wszystkich niepoprawnych odpowiedziach polega na nieprawidłowym rozumieniu, jak precyzyjnie działają selektory CSS, co jest kluczowe dla efektywnego zarządzania stylami w projektowaniu stron internetowych. Dobra znajomość selektorów pozwala na uniknięcie nadmiernego użycia klas czy identyfikatorów oraz sprzyja tworzeniu bardziej semantycznego kodu CSS, co jest zgodne z najlepszymi praktykami w branży. Precyzyjna wiedza na temat działania selektorów złożonych pozwala na bardziej efektywne stylizowanie stron oraz minimalizowanie niepożądanych konfliktów stylów.

Pytanie 19

Jakie jest właściwe określenie stylu CSS dla przycisku typu submit z czarnym tłem, bez ramki oraz z marginesami wewnętrznymi równymi 5 px?

input[type=submit] {
    background-color: #000000;
    border: none;
    padding: 5px;
} A

input[type=submit] {
    background-color: #ffffff;
    border: none;
    padding: 5px;
} B

input=submit {
    background-color: #000000;
    border: none;
    margin: 5px;
} C

input=submit {
    background-color: #000000;
    border: 0px;
    margin: 5px;
} D

A. D

B. B

C. A

D. C

Niepoprawne odpowiedzi wynikają głównie z błędnego użycia właściwości CSS lub z nieprawidłowej struktury selektora. W odpowiedzi B mamy kolor tła #ffffff, a to nie spełnia wymogu czarnego tła. To może być spowodowane nieuwagą albo brakiem zrozumienia wymagań. Odpowiedzi C i D z kolei używają margin zamiast padding, co zdecydowanie jest błędem w kontekście tego pytania. Margin dotyczy zewnętrznych odstępów między elementami i nie ma wpływu na wewnętrzne wymiary przycisku, co może efektem być brzydki wygląd przycisku w interfejsie. Ponadto w odpowiedziach C i D widzimy niepoprawny format selektora input=submit; co jest syntaktycznie złe. Poprawna składnia to input[type=submit], bo to wskazuje na element formularza o typie submit. Nie zrozumienie różnicy miedzy padding a margin oraz selektorami CSS może prowadzić do zamieszania i problemów w stylizacji. Ważne jest, żeby każda właściwość CSS była używana z pełnym zrozumieniem, jak wpływa na elementy interfejsu, by osiągnąć zamierzony efekt wizualny i funkcjonalny. Dobrą praktyką jest też sprawdzenie styli w różnych przeglądarkach, żeby upewnić się, że wszystko działa jak należy w różnych środowiskach. Rozumienie i stosowanie CSS jest kluczowe, by tworzyć profesjonalne i funkcjonalne strony.

Pytanie 20

Jakie formatowanie obramowania jest zgodne ze stylem border-style: dotted solid;?

A. Formatowanie 1

B. Formatowanie 3

C. Formatowanie 2

D. Formatowanie 4

Obramowanie w CSS może mieć różne style, które wpływają na estetykę i funkcjonalność projektów webowych. Styl „dotted” oznacza kropkowane obramowanie, które nadaje elementom lekkość i subtelność. Z kolei „solid” oznacza jednolite, ciągłe obramowanie, zapewniające wyraźną separację. W przypadku mieszanych stylów, jak „border-style: dotted solid;”, mamy kombinację, która często stosowana jest dla efektu wizualnego, gdzie różne krawędzie mają różny charakter. Obramowanie typu „dashed” jest mylące dla „dotted”, ponieważ oba są przerywane, ale „dashed” jest bardziej surowe i strukturalne, używane, gdy potrzeba mniej subtelnych, lecz nadal nie ciągłych obramowań. Natomiast styl „double” jest złożony z dwóch linii równoległych, co tworzy elegancki, ale wyrazisty efekt, używany w celach dekoracyjnych. Typowym błędem jest nieodróżnianie tych stylów, co prowadzi do niezamierzonych efektów wizualnych. W praktyce, wybór stylu obramowania powinien być świadomy i dostosowany do kontekstu użytkowego oraz estetycznego, co ma kluczowe znaczenie w projektowaniu stron internetowych zgodnie z zasadami user experience.

Pytanie 21

Wskaż znacznik, który umożliwia zapis tekstu, który jest niepoprawny lub niewłaściwy, w formie przekreślonej?

A. <em> </em>

B. <s> </s>

C. <b> </b>

D. <sub> </sub>

Znaczniki <b>, <em> i <sub> nie mają na celu przekreślania tekstu, co czyni je nieodpowiednimi w kontekście pytania. Znak <b> jest używany do oznaczania tekstu pogrubionego, co ma na celu wyróżnienie go wizualnie, ale nie przekazuje informacji o zmianie statusu treści. Przykład użycia <b> to: <b>ważna informacja</b>, co wyraźnie wskazuje na znaczenie tekstu, jednak nie informuje czy informacja jest aktualna czy nie. Znak <em> z kolei jest stosowany do oznaczania tekstu w formie kursywy, co zazwyczaj służy do podkreślenia znaczenia lub intonacji, na przykład: <em>ważne</em>. Jednak, podobnie jak w przypadku <b>, nie sygnalizuje on, że tekst jest nieaktualny lub odrzucony. Ostatni z wymienionych znaczników, <sub>, służy do umieszczania tekstu w dolnym indeksie, co jest przydatne w kontekście wzorów chemicznych lub matematycznych, np. H<sub>2</sub>O, ale nie ma zastosowania w kontekście przekreślania tekstu. W związku z tym, zastosowanie tych znaczników w tym kontekście jest niepoprawne, ponieważ nie spełniają one funkcji przekreślenia, co jest kluczowym elementem zdefiniowanym w pytaniu.

Pytanie 22

Wskaż przycisk sformatowany przedstawionym stylem CSS.

#przycisk {
    background-color: white;
    padding: 10px;
    border-width: 2px;
    border-bottom-style: dashed;
}

Przycisk 1

Przycisk 2

Przycisk 3

Przycisk 4

A. Przycisk 4

B. Przycisk 3

C. Przycisk 1

D. Przycisk 2

Niestety, twoja odpowiedź nie była prawidłowa. Wybór innego przycisku niż Przycisk 2 sugeruje, że mogłeś nie do końca zrozumieć, jak działa selekcja i stylizacja elementów za pomocą CSS. Białe tło, odstęp wewnętrzny 10 pikseli, szerokość obramowania 2 piksele oraz przerywana dolna krawędź obramowania są elementami, które zostały ustawione w stylach CSS dla przycisku 2. Pozostałe przyciski miały inne cechy, które nie były zgodne z opisanym stylem CSS. Przy niewłaściwym wyborze przycisku lub innego elementu do stylizacji, strona może nie wyglądać zgodnie z zamierzeniem, co może negatywnie wpłynąć na doświadczenie użytkownika. Dlatego ważne jest, aby zrozumieć, jak działa selekcja i stylizacja CSS. Pamiętaj, że zrozumienie CSS to klucz do tworzenia atrakcyjnych i funkcjonalnych projektów webowych.

Pytanie 23

W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?

A. JavaScript

B. AJAX

C. CSS

D. PHP

AJAX, PHP i JavaScript to języki oraz technologie, które umożliwiają przetwarzanie danych użytkownika wprowadzanych na stronach internetowych. AJAX (Asynchronous JavaScript and XML) pozwala na asynchroniczną komunikację z serwerem, co oznacza, że użytkownik może przesyłać dane, np. z formularza, bez konieczności przeładowania całej strony. Dzięki temu doświadczenie użytkownika jest bardziej płynne i interaktywne. PHP to język skryptowy po stronie serwera, który jest często używany do przetwarzania danych, takich jak zapisywanie informacji do bazy danych czy generowanie dynamicznych treści na stronie. Umożliwia on również walidację danych przed ich przesłaniem do serwera. JavaScript, z kolei, działa po stronie klienta i może reagować na interakcje użytkownika, takie jak kliknięcia, zmiany w polach formularzy czy nawigacja po stronie, pozwalając na manipulację danymi w czasie rzeczywistym. Typowym błędem myślowym jest myślenie, że CSS może pełnić funkcje, które są zarezerwowane dla języków programowania. Użytkownicy często mylą rolę CSS jako narzędzia do interakcji, podczas gdy w rzeczywistości jest on jedynie odpowiedzialny za prezentację. Uzupełniając CSS o JavaScript czy PHP, można zbudować kompletną, interaktywną aplikację webową, która efektywnie przetwarza dane użytkowników.

Pytanie 24

Na ilustracji ukazano rezultat stylizacji za pomocą CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. B.

B. A.

C. D.

D. C.

Wybór niewłaściwej odpowiedzi może wynikać z niepełnego zrozumienia zastosowania poszczególnych właściwości CSS. Pierwsza możliwość sugeruje użycie dotted border zamiast solid co może być mylące w kontekście estetyki i czytelności projektu. Dotted border wprowadza przerywaną linię obramowania, co nie zawsze jest pożądane w profesjonalnym wyglądzie strony. Kolejna błędna konfiguracja zmienia marginesy i padanie co wpływa na ogólny układ i spójność wizualną. Błędne ustawienie marginesów zewnętrznych na 50px przy zmniejszeniu padania do 20px może zaburzyć proporcje i układ elementów wpływając na czytelność. Stylowanie z niewłaściwymi wartościami prowadzi do nieprzewidywalnych rezultatów zwłaszcza na urządzeniach o różnych rozdzielczościach. Ważne jest zrozumienie jak CSS wpływa na model boxu i jak poszczególne właściwości oddziałują na siebie co jest kluczowe w tworzeniu responsywnych i estetycznie spójnych interfejsów. Zrozumienie tych koncepcji jest kluczowe w unikaniu typowych pułapek projektowych i budowaniu stron zgodnych z nowoczesnymi standardami.

Pytanie 25

Zapis w CSS `h2 {background-color: green;}` spowoduje, że kolor zielony będzie dotyczył

A. czcionki nagłówków drugiego poziomu

B. tła całej witryny

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

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

Zapis CSS 'h2 {background-color: green;}' ustawia styl dla nagłówków drugiego stopnia. Dzięki właściwości 'background-color' tło nagłówka zrobi się zielone, co oznacza, że obszar za tekstem tego nagłówka będzie miał kolor zielony. Ważne, żeby pamiętać, że to działa tylko na tło samego nagłówka, a nie na całą stronę. Na przykład, jeśli w elemencie h2 jest tekst 'Witamy na naszej stronie', to tło tego nagłówka dostaje zielony kolor. To podejście jest zgodne z CSS, które pozwala na precyzyjne stylizowanie różnych elementów w dokumencie. Można też używać różnych trybów kolorów jak RGB, HEX czy HSL, co daje jeszcze większe możliwości w projektowaniu.

Pytanie 26

Z jakich elementów składa się tabela generowana przez poniższy kod?

<table border="1">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>

A. jednego wiersza oraz dwóch kolumn

B. jednego wiersza oraz jednej kolumny

C. dwóch wierszy i dwóch kolumn

D. dwóch wierszy oraz jednej kolumny

Kod w pytaniu przedstawia strukturę HTML dla tabeli. Tabela składa się z jednej pary znaczników <tr>, co oznacza, że zawiera jeden wiersz. Wewnątrz tego wiersza znajdują się dwa znaczniki <td>, reprezentujące dwie komórki, czyli kolumny. Praktyczne zastosowanie tabel w HTML obejmuje prezentację danych w sposób strukturalny, co jest szczególnie użyteczne w przypadku raportów, cenników czy kalendarzy. Dobre praktyki w projektowaniu stron internetowych sugerują stosowanie tabel do prezentacji danych, nie zaś do układania treści na stronie, co było popularne w starszych wersjach HTML. W nowoczesnym podejściu do front-endu, używa się CSS i Flexbox lub Grid do układania elementów. Jednak zrozumienie podstaw HTML, takich jak prawidłowa struktura tabeli, jest kluczowe dla tworzenia semantycznych i dostępnych stron WWW. Tabele powinny być też wzbogacone o elementy takie jak <thead>, <tbody> i <tfoot> dla lepszej organizacji danych i wsparcia przez technologie asystujące dla osób z niepełnosprawnościami.

Pytanie 27

W trakcie weryfikacji stron internetowych nie uwzględnia się

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

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

C. działania hiperłączy

D. źródła pochodzenia narzędzi edytorskich

Walidacja stron internetowych obejmuje różnorodne aspekty techniczne, które są kluczowe dla prawidłowego funkcjonowania witryn w sieci. Analiza działania linków jest istotna, ponieważ sprawdza, czy odnośniki prowadzą do właściwych lokalizacji i czy nie prowadzą do stron błędów 404. Użytkownicy oczekują, że wszystkie interaktywne elementy na stronie będą działały bezproblemowo, a ich analiza pozwala na identyfikację potencjalnych problemów oraz ich szybką naprawę. Błędy składniowe w kodzie HTML lub CSS mogą prowadzić do nieprawidłowego renderowania strony w przeglądarkach, przez co użytkownicy mogą mieć trudności w jej przeglądaniu. Walidacja składni jest zatem niezbędna, aby zapewnić poprawne wyświetlanie zawartości oraz dostępność dla wszystkich użytkowników. Zgodność z przeglądarkami jest równie ważnym aspektem walidacji, ponieważ różne przeglądarki mogą interpretować kod na różne sposoby, co może prowadzić do niezgodności w wyświetlaniu strony. Testowanie zgodności z popularnymi przeglądarkami, takimi jak Chrome, Firefox, Safari czy Edge, jest kluczowe, aby zapewnić spójne doświadczenie użytkowników niezależnie od wybranego narzędzia do przeglądania internetu. W związku z tym, walidacja to kompleksowy proces, który koncentruje się na aspektach technicznych związanych z jakością kodu i doświadczeniem użytkownika.

Pytanie 28

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

A. aside {float: left; }

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

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

D. nav { float: right; }

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

Pytanie 29

Który z przedstawionych kodów XHTML sformatuje tekst według podanego wzorca?
Ala ma kota
a kot ma Alę

A. <p>Ala ma <b>kota<br> a <i>kot</i> ma Alę</p>

B. <p>Ala ma <b>kota</b><br> a <i>kot</i> ma Alę</p>

C. <p>Ala ma <b>kota</b><br> a <b>kot</b> ma Alę</p>

D. <p>Ala ma <b>kota</i><br> a <b>kot</b> ma Alę</p>

W pozostałych odpowiedziach występują różne błędy, które wpływają na ich poprawność. W pierwszym przypadku zamknięcie tagu <b> jest poprawne, jednak brak jest prawidłowego zakończenia tagu <i>, co powoduje, że kod nie jest zgodny z zasadami XHTML. Poprawne zamykanie tagów jest kluczowe, ponieważ XHTML jest bardziej restrykcyjny niż HTML, a niepoprawne zamknięcie tagu powoduje błędne renderowanie. W drugiej analizowanej opcji, również występuje niepoprawne zamknięcie tagu <b>, gdzie użyto <i> zamiast <b>, co wprowadza zamieszanie w semantyce tekstu. W przypadku dokumentów XHTML, każdy otwarty tag musi mieć swoje odpowiadające zamknięcie, co nie zostało spełnione. W trzeciej opcji pojawia się błąd z brakiem zamknięcia tagu <p>, co jest fundamentalnym błędem strukturalnym. Nieprawidłowe zagnieżdżenie i brak zamknięcia tagów prowadzi do sytuacji, w której przeglądarki internetowe mogą niepoprawnie interpretować kod, co wpływa na ostateczny wygląd strony. W każdej z tych nieprawidłowych odpowiedzi brakuje elementarnej dbałości o zgodność z zasadami XHTML, co jest niezbędne dla uzyskania wiarygodności i prawidłowego funkcjonowania dokumentów internetowych.

Pytanie 30

Które z formatowań nie jest wyrażone w języku CSS?

A. Fragment pliku strona.html:

<style>
body { background-color: yellow; }
</style>

B. Fragment pliku formatowanie.css:

body { background-color: yellow; }

C. Fragment pliku strona.html:

<body bgcolor="yellow">

D. Fragment pliku strona.html:

<body style="background-color: yellow;" >

A. B.

B. A.

C. C.

D. D.

Gratulacje, prawidłowo wybrałeś odpowiedź C. To pytanie dotyczyło zrozumienia, które formatowania nie są wyrażone w języku CSS. W CSS wykorzystuje się różnego rodzaju selektory, aby określić elementy strony, do których mają być stosowane określone style. Fragmenty A i B przedstawiają formatowanie w języku CSS. Fragment A demonstruje styl wewnątrz dokumentu HTML, co jest jednym z trzech sposobów dodawania styli CSS do dokumentu HTML. Natomiast fragment B pokazuje styl z zewnętrznego pliku CSS, co jest zgodne ze standardami i uważane za najlepszą praktykę, ponieważ pozwala na utrzymanie oddzielenia struktury i prezentacji. Fragment D również wykorzystuje CSS, ale jest to tzw. "inline CSS", który jest stosowany bezpośrednio do elementu HTML. Ostatecznie, jedynie fragment C nie używa CSS. Zamiast tego, wykorzystuje przestarzały atrybut HTML "bgcolor" do określenia koloru tła, co obecnie jest uważane za złą praktykę. Pamiętaj, że zrozumienie różnicy pomiędzy HTML a CSS jest kluczowe w budowaniu poprawnie działających i dobrze zaprojektowanych stron internetowych.

Pytanie 31

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Która część kodu HTML odnosi się do pierwszego wiersza tabeli?

A. C

B. D

C. B

D. A

Niepoprawne podejścia w odpowiedziach A, B i C wynikają z błędnego zastosowania znaczników HTML, co wpływa na sposób, w jaki przeglądarka interpretuje dane w tabeli. Odpowiedź A używa znaczników <td> zamiast <th> do definiowania nagłówków kolumn. Znacznik <td> jest przeznaczony do zwykłych komórek tabeli, co sprawia, że przeglądarka nie traktuje ich jako nagłówków, przez co nie są wstępnie formatowane jako pogrubione i wyśrodkowane. To podejście narusza zasady semantyki HTML, ponieważ nagłówki powinny być jasno zdefiniowane za pomocą <th>, co wspiera dostępność i zrozumienie struktury danych. Odpowiedź B, mimo że używa <th>, stosuje dodatkowo <i>, co zmienia styl na kursywę, a to nie odpowiada formatowi wizualnemu przedstawionemu w pytaniu. Użycie <i> może być mylące, jeśli nie jest to zgodne z oczekiwanym stylem, i może powodować problemy z dostępnością. Wreszcie, odpowiedź C używa <center>, co jest przestarzałym sposobem na wyrównanie treści w HTML. Zamiast tego, stylowanie powinno być osiągane za pomocą CSS, co jest zgodne z nowoczesnymi standardami projektowania stron i wspiera lepszą separację struktury od prezentacji. Wszystkie te podejścia pokazują, jak ważne jest stosowanie semantycznych elementów HTML dla poprawności i dostępności stron internetowych, a jednocześnie podkreślają znaczenie zgodności z aktualnymi standardami sieciowymi.

Pytanie 32

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

A. p#tekst + div.obrazki

B. p#tekst, div.obrazki

C. p.tekst + div#obrazki

D. p.tekst, div#obrazki

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

Pytanie 33

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w drugie pole użytkownik wpisał wartość "ala ma kota"?

<form>
  <select>
    <option value="v1">Kraków</option>
    <option value="v2">Poznań</option>
    <option value="v3">Szczecin</option>
  </select> <br>
  <input type="password" />
</form>

Efekt 1

Efekt 2

Efekt 3

Efekt 4

A. Efekt 1.

B. Efekt 2.

C. Efekt 3.

D. Efekt 4.

Pozostałe odpowiedzi nie są poprawne, ponieważ nie odpowiadają one opisowi działania kodu HTML formularza. W przypadku odpowiedzi 'Efekt 1', 'Efekt 3' oraz 'Efekt 4', możemy zauważyć, że nie są one zgodne z opisanym działaniem formularza. W HTML, pole hasła reprezentowane jest jako ciąg znaków zastępczych - kropeczki. Przy wpisaniu 'ala ma kota' do pola hasła, nie jesteśmy w stanie zobaczyć tej wartości, tylko kropeczki. Przy wyborze odpowiedzi 'Efekt 1', 'Efekt 3' lub 'Efekt 4', musielibyśmy zobaczyć wpisaną wartość 'ala ma kota' zamiast kropeczek, co jest niezgodne ze standardami HTML. Dlatego też, odpowiedzi te są nieprawidłowe. Pamiętaj, że ważne jest zrozumienie, jak działają różne elementy formularza w HTML, aby poprawnie przewidzieć efekt ich działania w przeglądarce.

Pytanie 34

Aby wykorzystać skrypt zapisany w pliku przyklad.js, trzeba połączyć go ze stroną używając kodu

A. <script src="/przyklad.js"></script>

B. <script link="przyklad.js"></script>

C. <script>przyklad.js</script>

D. <link rel="script" href="/przyklad.js">

Niepoprawne odpowiedzi opierają się na nieprawidłowym zrozumieniu sposobu łączenia plików JavaScript z dokumentem HTML. Na przykład, użycie <script>przyklad.js</script> jest błędne, ponieważ nie zawiera atrybutu 'src', który jest niezbędny do wskazania źródła pliku. Bez tego atrybutu przeglądarka nie wie, gdzie znaleźć skrypt, co skutkuje błędem ładowania. Podobnie, <script link="przyklad.js"></script> nie jest poprawnym sposobem na dołączenie skryptu. Atrybut 'link' nie istnieje w kontekście tagu <script>, co prowadzi do kompletnego zignorowania tego wpisu przez przeglądarkę. Dodatkowo, <link rel="script" href="/przyklad.js"> jest również błędny, ponieważ tag <link> jest przeznaczony do łączenia z arkuszami stylów CSS, a nie z plikami JavaScript. Prawidłowy kontekst użycia tych tagów jest kluczowy dla skutecznego zarządzania zasobami w dokumentach HTML. W praktyce, nieprzestrzeganie tych zasad może prowadzić do wielu problemów, takich jak błędy w działaniu skryptów, opóźnienia w ładowaniu strony oraz trudności w debugowaniu, co podkreśla znaczenie stosowania standardów i dobrych praktyk w programowaniu webowym.

Pytanie 35

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

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

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

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

D. w każdej sytuacji.

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

Pytanie 36

W przedstawionej regule CSS ```h1 {color : blue}``` h1 reprezentuje

A. wartość

B. klasę

C. deklarację

D. selektor

Wybierając błędną odpowiedź odnośnie reguły CSS `h1 {color: blue}`, można zauważyć, że czasami nie rozumiemy dobrze podstawowych terminów w CSS. Deklaracja to nie tylko selektor, ale wszystkie właściwości i wartości, które zmieniają dany element. Przykład `blue` to tylko kolor, nie jest selektorem. Klasa to inny rodzaj selektora, który zaczyna się od kropki i pozwala stylizować wiele elementów naraz, a nie tylko pojedyncze tagi HTML. Problemem często jest mylenie tych pojęć i nieznajomość ich definicji w CSS. Musisz wiedzieć, że selektory wskazują, do jakich elementów stosujemy style, a inne rzeczy, jak klasy czy różne wartości, mają inne zadania. Lepiej zrozumieć te różnice, bo to podstawa, żeby efektywnie pracować z CSS i tworzyć strony www. Fajnie byłoby także poczytać dokumentację CSS, żeby lepiej poznać różne selektory i ich zastosowanie w stylizacji.

Pytanie 37

Który z akapitów został sformatowany zgodnie z przedstawionym stylem, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Odpowiedź B

B. Odpowiedź D

C. Odpowiedź C

D. Odpowiedź A

Wybór nieprawidłowych odpowiedzi może wynikać z niezrozumienia specyfiki stylów CSS zastosowanych w tym pytaniu. Opcja A stosuje pełne wypełnienie kolorem tła, co nie jest zgodne z przedstawionym stylem, ponieważ styl ten nie obejmuje background-color. Wybór taki mógł być spowodowany błędnym przekonaniem, że kolor tekstu zmienia również kolor tła. Opcja B nie posiada odpowiedniego pogrubienia tekstu, co może wynikać z niepełnego zrozumienia znaczenia właściwości font-weight, która w tym przypadku wynosi 900, wskazując na bardzo pogrubiony tekst. Brak tego efektu w opcji B sugeruje, że tekst nie był stylizowany zgodnie z wymaganiami, stąd wybór tej opcji jest błędny. Odpowiedź D, chociaż posiada pewne podobieństwa, zbyt słabo przedstawia efekt paddingu, który powinien wynosić 20 pikseli, co oznacza znaczne wcięcie wewnętrzne. To może wynikać z nieuświadomienia sobie, jak padding wpływa na przestrzeń wokół tekstu. Znajomość tych podstawowych zasad CSS jest kluczowa w profesjonalnym projektowaniu stron internetowych, gdzie poprawne zastosowanie stylów wpływa na funkcjonalność i estetykę interfejsu użytkownika. Typowym błędem w zrozumieniu może być założenie, że wszystkie style wpływają na wygląd tak samo, podczas gdy ich działanie jest często bardzo specyficzne.

Pytanie 38

Która z list jest interpretacją podanego kodu?

A. Rys. A

B. Rys. B

C. Rys. C

D. Rys. D

Częstym błędem przy interpretacji kodu HTML jest niepoprawne rozumienie zagnieżdżania list lub ich typów. W przypadku pytania mamy do czynienia z jedną listą uporządkowaną ol która zawiera inne listy nieuporządkowane ul W niektórych odpowiedziach przewidziano błędnie że wszystkie elementy są częścią jednej listy nieuporządkowanej co nie jest zgodne z przedstawionym kodem Listy ol i ul pełnią różne role w HTML Specyfikacja HTML jasno określa że uporządkowane listy ol są używane wtedy gdy kolejność elementów ma znaczenie zaś nieuporządkowane ul gdy kolejność jest nieważna Źle zidentyfikowanie tych typów może prowadzić do błędów w prezentacji danych i wpływać na ich semantyczne znaczenie w dokumentach Aby uniknąć takich błędów warto zapoznać się z dokumentacją W3C oraz stosować się do dobrych praktyk kodowania takich jak wyraźne zagnieżdżanie list i zachowanie ich semantycznego sensu Utrzymywanie przejrzystości kodu zwiększa również jego dostępność i SEO co jest ważne w profesjonalnym tworzeniu stron internetowych

Pytanie 39

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

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

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

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

D. punktorem nienumerowanej listy stanie się rys.gif

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

Pytanie 40

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

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

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

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

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

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.

Rozpocznij nowy egzamin

Powrót do strony głównej