Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 17 czerwca 2026 14:40
  • Data zakończenia: 17 czerwca 2026 15:00

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

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

Fragment kodu w języku HTML zawarty w ramce ilustruje zestawienie

Ilustracja do pytania
A. numerowaną.
B. skrótów.
C. odnośników.
D. wypunktowaną.
Znaczniki HTML <ul> i <ol> są często mylone przez początkujących deweloperów co prowadzi do nieporozumień związanych z prezentacją danych. <ul> reprezentuje listę wypunktowaną używaną gdy kolejność elementów nie ma znaczenia a celem jest po prostu grupowanie powiązanych elementów. Z kolei <ol> tworzy listę numerowaną co jest istotne gdy chronologia lub priorytet poszczególnych elementów są kluczowe. Struktura <ol> jest preferowana w dokumentach gdzie ważne jest zachowanie kolejności jak na przykład w instrukcjach krok po kroku lub w raportach podsumowujących. Mylenie tych dwóch znaczników może prowadzić do zamieszania w zrozumieniu prezentacji danych. Kolejną błędną interpretacją jest uznawanie list za odnośniki co jest domeną znacznika <a> używanego do tworzenia hiperłączy między stronami. Jest to kluczowe w nawigacji strony i budowie struktury sieciowej. Z kolei skróty w HTML są reprezentowane za pomocą <abbr> co pomaga w dostarczaniu pełnych form skrótów przy zachowaniu ich kompaktowej postaci w tekście. Poprawne rozróżnianie i stosowanie tych znaczników jest fundamentem dobrych praktyk w projektowaniu stron internetowych zgodnie z zasadami semantyki i dostępności co jest kluczowe dla tworzenia przejrzystych i przyjaznych użytkownikowi interfejsów. Dodatkowo przekłada się to na lepsze wyniki SEO oraz wyższy poziom użyteczności aplikacji webowych który jest coraz częściej oczekiwany na współczesnym rynku IT. Właściwe wykorzystanie semantycznych znaczników wpływa korzystnie na przyszłą konserwację i rozbudowę kodu co jest nieocenione w długoterminowych projektach informatycznych. Poprawne zrozumienie tych różnic jest zatem kluczowe dla każdego kto aspiruje do profesjonalnego tworzenia stron internetowych i aplikacji webowych zgodnie z nowoczesnymi standardami branżowymi.

Pytanie 2

W zapisie rgba(100, 40, 50, 0.2) czego dotyczy OSTATNIA wartość?

A. nasycenia koloru czarnego
B. przezroczystości, gdzie 1 = pełna przezroczystość, 0 = brak
C. saturacji barw RGB
D. przezroczystości, gdzie 0 = pełna przezroczystość, 1 = brak
Pozostałe opisy są błędne. Ostatnia wartość nie dotyczy nasycenia ani saturacji - te należą do modelu HSL/HSV, a nie RGBA. Myląca jest też odwrócona skala: to 0 daje PEŁNĄ przezroczystość, a 1 jej brak (nie odwrotnie). Czwarta wartość rgba to alfa: 0 = przezroczyste, 1 = kryjące.

Pytanie 3

W CSS określono styl dla pola do edycji, które będzie miało tło w kolorze jasnozielonym po aktywacji.

input:focus { background-color: LightGreen; }
A. po kliknięciu myszką w celu wprowadzenia tekstu
B. gdy jest to pierwsze użycie tego elementu w dokumencie
C. w każdej sytuacji
D. jeśli zostanie na nie najechane kursorem bez kliknięcia
Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest poprawna, ponieważ reguła CSS `input:focus { background-color: LightGreen; }` definiuje styl, który ma zastosowanie, gdy pole edycyjne (input) jest w stanie "focus". Stan ten jest aktywowany, gdy użytkownik klika na pole, co pozwala na wpisywanie tekstu. To podejście jest zgodne z zasadami dostępności i użyteczności interfejsów, ułatwiając użytkownikom interakcję z formularzami. Przykładowo, w formularzach online, takie wizualne wskazanie na aktywne pole poprawia doświadczenie użytkownika, zwiększa czytelność oraz umożliwia łatwiejsze wprowadzanie danych. Warto również pamiętać, że dobrym standardem jest stosowanie kolorów tła, które są kontrastowe w stosunku do kolorów tekstu, aby zapewnić ich czytelność. Ponadto, w praktyce developerskiej, często wykorzystuje się dodatkowe efekty, takie jak animacje, które mogą poprawić interaktywność i wyrazistość reakcji na działania użytkownika. Właściwe stosowanie stylów CSS w kontekście stanu focus jest więc kluczowe dla tworzenia przyjaznych dla użytkownika interfejsów.

Pytanie 4

Która operacja NIE zmieni rozmiaru (wagi) pliku graficznego?

A. interpolacja
B. kompresja
C. zmiana rozdzielczości obrazu
D. zmiana rozmiaru WYŚWIETLANIA obrazu atrybutami HTML
Atrybuty HTML (np. width, height) zmieniają tylko ROZMIAR WYŚWIETLANIA obrazu w przeglądarce - plik na serwerze pozostaje ten sam, więc jego waga się nie zmienia. To dlatego „zmniejszenie” obrazka atrybutem nie przyspiesza ładowania. Dlatego wagi pliku nie zmieni skalowanie atrybutami HTML.

Pytanie 5

Aby strona poprawnie skalowała się na urządzeniach mobilnych, rozmiar czcionki należy zdefiniować:

A. tylko znacznikami big i small
B. w pikselach
C. w milimetrach
D. w procentach
Pozostałe sposoby nie zapewniają responsywności. Rozmiar w pikselach jest stały - na małym ekranie tekst nie zmaleje proporcjonalnie i może być za duży lub za mały. Milimetry to jednostka fizyczna, praktycznie nieużywana do skalowania tekstu na ekranie i również sztywna. Znaczniki <big> i <small> dają tylko zgrubną zmianę względem domyślnego rozmiaru, są przestarzałe i nie pozwalają precyzyjnie skalować. Responsywny rozmiar czcionki uzyskuje się jednostkami względnymi, czyli w procentach.

Pytanie 6

Grafika, która ma być umieszczona na stronie, powinna mieć przezroczyste tło. Jakim formatem graficznym powinien być zapisany taki plik?

A. JPEG
B. BMP
C. CDR
D. PNG
Format PNG (Portable Network Graphics) jest szczególnie ceniony w kontekście grafiki internetowej, ponieważ obsługuje przezroczystość, co czyni go idealnym wyborem dla obrazów, które wymagają tła transparentnego. Przezroczystość w formacie PNG jest realizowana poprzez zastosowanie kanału alfa, co pozwala na uzyskanie różnorodnych efektów wizualnych, takich jak cienie, gradienty czy delikatne przejścia między kolorami. Przykłady zastosowania to ikony, logo, grafiki na stronach internetowych, które muszą harmonizować z różnymi kolorami tła. W przeciwieństwie do formatów takich jak JPEG, który nie obsługuje przezroczystości i używa kompresji stratnej, PNG oferuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu po zapisaniu. W kontekście praktyk webowych, użycie PNG jest zgodne z zaleceniami dotyczącymi optymalizacji obrazów w sieci, co przyczynia się do szybszego ładowania stron i lepszej jakości wizualnej.

Pytanie 7

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

A.
rgb(0, 128, 0)
B.
rgb(0, 100, 0)
C.
rgb(0, 80, 0)
D.
rgb(0, 160, 0)
W zapisie szesnastkowym #008000 pary oznaczają kolejno czerwony, zielony i niebieski. Środkowa para 80 to szesnastkowo 128 (8×16), a skrajne 00 to zera - więc w RGB jest to rgb(0, 128, 0). Dlatego to zielony rgb(0, 128, 0).

Pytanie 8

Dokument HTML określa akapit oraz obrazek. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit po jego lewej stronie, należy w stylu CSS obrazka uwzględnić właściwość

A. alt: left;
B. float: left;
C. style: left;
D. align: left;
Odpowiedź "float: left;" jest naprawdę trafna. Ta właściwość w CSS sprawia, że elementy układają się obok siebie, co w tym przypadku oznacza, że rysunek wyląduje po lewej stronie akapitu. Jak użyjemy float, to rysunek 'przesuwa się' na lewo, a tekst z akapitu otacza go z prawej strony. To taki popularny sposób w webdesignie, który pozwala na ładniejsze połączenie obrazków z tekstem. Warto pamiętać, że czasem trzeba zastosować clearfix, zwłaszcza gdy mamy pływające elementy w większym układzie, żeby uniknąć problemów z rozmieszczeniem. Stosowanie float w CSS to dobra praktyka, bo pomaga zachować czytelność i estetykę tekstu. Na przykład, jeśli mamy sekcję artykułu z obrazem, który ilustruje omawiany temat, to zastosowanie float: left; sprawi, że treść będzie ładnie się układać i poprawi wrażenia użytkownika.

Pytanie 9

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

Ilustracja do pytania
A. <p><strike>Duży tekst</strike> zwykły tekst</p>
B. <p><strike>Duży tekst zwykły tekst</p>
C. <p><big>Duży tekst</big> zwykły tekst</p>
D. <p><big>Duży tekst</p> zwykły tekst
Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 10

Aby sprawdzić poprawność składni kodu CSS, można skorzystać z:

A. debuggera
B. konsolidatora
C. optymalizatora
D. walidatora
Poprawność składni CSS sprawdza walidator - na przykład walidator CSS organizacji W3C (jigsaw.w3.org/css-validator). Analizuje arkusz pod kątem zgodności ze standardem i wypisuje błędy oraz ostrzeżenia: literówki we właściwościach, nieprawidłowe wartości czy brakujące średniki. Dlatego do kontroli składni CSS służy walidator.

Pytanie 11

Weryfikację kompletności formularza, działającą po stronie przeglądarki, należy zrealizować w języku

A. Ruby on Rails
B. JavaScript
C. CSS
D. PHP
W tym pytaniu łatwo się pomylić, bo wszystkie wymienione technologie występują w kontekście stron WWW, ale pełnią zupełnie różne role. Weryfikacja kompletności formularza „po stronie przeglądarki” oznacza, że logika musi działać u użytkownika, w jego browserze, zanim dane trafią na serwer. I tu kluczowe jest rozróżnienie: co działa po stronie klienta, a co po stronie serwera.
CSS służy wyłącznie do opisu wyglądu – kolory, marginesy, rozmiary czcionek, układ elementów. Nie ma dostępu do wartości pól formularza w sensie logicznym. Można co najwyżej zmieniać styl w zależności od pseudo-klas (np. :valid, :invalid w HTML5), ale to są wbudowane mechanizmy przeglądarki, a nie „logika programu” w CSS. CSS nie umożliwia napisania warunku typu: jeśli pole A i pole B są puste, to pokaż taki komunikat i zablokuj wysłanie formularza.
PHP z kolei jest językiem typowo serwerowym. Kod PHP wykonuje się na serwerze, po wysłaniu formularza, a nie w przeglądarce. To świetne narzędzie do walidacji danych po stronie serwera, zapisania ich do bazy, obsługi sesji i całej logiki backendowej, ale nie zrealizuje walidacji „na żywo” w momencie, gdy użytkownik dopiero wypełnia formularz. Typowym błędem myślowym jest założenie, że skoro PHP często pracuje z formularzami, to „sprawdza formularz”. Owszem, ale dopiero po jego wysłaniu.
Ruby on Rails to natomiast framework backendowy napisany w Ruby, również działający na serwerze. On także ma bogate mechanizmy walidacji modeli i danych, ale znowu – wszystko dzieje się po stronie serwera. Framework może generować formularze, przyjmować dane, walidować je i zwracać błędy, ale przeglądarka sama z siebie nie uruchamia kodu Railsów.
Jeżeli w treści pytania pojawia się wyraźny zapis „po stronie przeglądarki”, to praktycznie zawsze chodzi o technologię kliencką, czyli JavaScript lub ewentualnie rozwiązania na nim oparte (np. frameworki front-endowe). Warto o tym pamiętać, bo rozróżnienie klient–serwer to jedna z podstaw w programowaniu webowym i często decyduje o poprawności odpowiedzi w takich zadaniach.

Pytanie 12

Dostosowanie wyglądu witryny do indywidualnych preferencji użytkownika oraz jego identyfikacja w systemie są możliwe dzięki mechanizmowi

A. formularzy
B. łączenia z bazą
C. obiektów DOM
D. cookie
Wybór formularzy, DOM i łączenia z bazą danych jako sposobów na personalizację strony i identyfikację użytkownika to trochę nieporozumienie. Formularze pozwalają na wysyłanie danych, jak logowanie czy rejestracja, ale same w sobie nie przechowują informacji o użytkownikach. Ich głównym celem jest interakcja z użytkownikiem. Obiekty DOM to właściwie struktura dokumentu HTML i umożliwiają modyfikację elementów na stronie, ale nie służą do identyfikacji użytkownika. Łączenie z bazą danych jest ważne dla przechowywania danych, ale to nie to samo co lokalne przechowywanie, które jest kluczowe dla personalizacji. Jeśli chcesz dobrze projektować aplikacje webowe, warto zrozumieć te różnice, bo błędy mogą się zdarzyć, zwłaszcza jeśli chodzi o cookies.

Pytanie 13

Który z podanych znaczników HTML nie jest używany do formatowania tekstu?

A. <strong>
B. <div>
C. <em>
D. <sub>
<div> jest znacznikiem HTML, który służy do grupowania elementów na stronie, co ułatwia ich stylizację i manipulację w CSS oraz JavaScript. W przeciwieństwie do znaczników takich jak <em>, <sub> i <strong>, które mają konkretne zastosowania związane z formatowaniem tekstu, <div> pełni rolę kontenera, co czyni go bardziej uniwersalnym narzędziem do strukturyzacji treści. Przykładowo, można użyć <div> do utworzenia sekcji nagłówka, stopki lub bocznego panelu na stronie. Zgodnie z standardami W3C, <div> jest elementem blokowym, co oznacza, że zajmuje całą szerokość dostępną w swoim rodzicu. W praktyce, <div> pozwala na efektywne zarządzanie układem strony i jest często stosowany w połączeniu z CSS w celu uzyskania pożądanej prezentacji wizualnej. Przykład zastosowania: <div class='container'>...</div> może być użyty do zawarcia innych elementów jak <h1>, <p> czy <img>. Dzięki temu można łatwo manipulować stylem i zachowaniem tych elementów, co czyni <div> kluczowym narzędziem w nowoczesnym web designie.

Pytanie 14

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

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

Pytanie 15

Który znacznik służy do budowania hierarchii (struktury) tekstu nagłówkami?

A.
<h6>
B.
<head>
C.
<u>
D.
<style>
Hierarchię tekstu buduje się nagłówkami <h1> do <h6> - od najważniejszego do najmniej ważnego. <h6> to nagłówek najniższego poziomu, ale wciąż element tej struktury. Dlatego do hierarchii nagłówków należy <h6>.

Pytanie 16

Dla przedstawionego fragmentu kodu

<img src="kwiat.jpg alt="kwiat">
walidator HTML zwróci błąd, ponieważ
A. nie zamknięto cudzysłowu
B. użyto niewłaściwego znacznika do wyświetlenia grafiki
C. użyto nieznanego atrybutu alt
D. nie odnaleziono pliku kwiat.jpg
W kodzie HTML zauważyłem mały błąd - brakuje ci domknięcia cudzysłowu dla atrybutu src. Powinno to wyglądać tak: <img src="kwiat.jpg" alt="kwiat">. No, cudzysłów jest ważny, bo bez niego przeglądarka może mieć problem z odczytaniem, gdzie kończy się wartość atrybutu. To może prowadzić do różnych, nieprzewidzianych efektów przy wyświetlaniu strony. Zasady W3C mówią, że każdy atrybut powinien być poprawnie sformatowany, żeby działało to na różnych przeglądarkach i urządzeniach. Pamiętaj też o atrybucie alt - jest kluczowy dla dostępności. Właściwe użycie cudzysłowów i dbałość o format kodu też wpływają na jego czytelność, a my przecież chcemy pisać jak najlepiej.

Pytanie 17

Aby przygotować szablon strony z trzema kolumnami ustawionymi obok siebie, należy posłużyć się stylem CSS:

A.
.kolumny {
  float: right;
  height: 33%;
}
B.
.kolumny {
  float: left;
  width: 33%;
}
C.
.kolumny {
  float: left;
  width: 40%;
}
D.
.kolumny {
  clear: both;
  height: 33%;
}
Aby ustawić trzy kolumny obok siebie metodą opływania, każdej nadaje się float: left oraz szerokość około jednej trzeciej kontenera, czyli width: 33%. Dzięki float elementy blokowe układają się w jednym rzędzie zamiast jeden pod drugim, a szerokość 33% sprawia, że trzy kolumny wypełniają całą szerokość. Dlatego poprawny jest styl .kolumny { float: left; width: 33%; }.

Pytanie 18

Na stronie umieszczono obrazek, a po nim akapit. Aby obrazek znalazł się w tej samej linii, po LEWEJ stronie tekstu, w stylu CSS obrazka należy ustawić:

A.
style: left;
B.
align: left;
C.
float: left;
D.
alt: left;
Aby obrazek znalazł się po LEWEJ stronie, a tekst go oblewał z prawej, stosuje się w CSS float: left;. Właściwość float „wypycha” element w bok i pozwala innej treści ułożyć się obok. Dlatego potrzebne jest float: left;.

Pytanie 19

Której właściwości CSS użyć, aby ustawić odstępy między WYRAZAMI?

A.
letter-space
B.
word-spacing
C.
line-spacing
D.
white-space
Odstępy między WYRAZAMI ustawia w CSS właściwość word-spacing, np. word-spacing: 5px; rozsuwa słowa. Dlatego do odstępów między wyrazami służy word-spacing.

Pytanie 20

Aby wykorzystać skrypt znajdujący się w pliku przyklad.js, konieczne jest połączenie go ze stroną przy użyciu kodu

A. <script src="przyklad.js"></script>
B. <script>przyklad.js</script>
C. <link rel="script" href="przyklad.js">
D. <script link="przyklad.js"></script>
No, odpowiedzi bez atrybutu 'src' są nie na miejscu, bo nie spełniają standardów HTML dołączania skryptów. W pierwszej odpowiedzi, w <script>przyklad.js</script>, użycie tego zapisu jest błędne, bo tag <script> musi mieć 'src', żeby pokazać, gdzie skrypt się znajduje. Po prostu dodanie samej nazwy pliku w środku znacznika nic nie zdziała, bo przeglądarka go nie załaduje. W drugiej odpowiedzi, <script link="przyklad.js"></script>, to też nie jest zgodne z HTML, bo 'link' nie istnieje w kontekście skryptów; powinno być tylko 'src'. Odpowiedź <link rel="script" href="przyklad.js"> jest całkiem myląca, bo <link> zazwyczaj służy do CSS, a nie do JavaScriptu. Nawet jeśli 'rel' można użyć, to nie ma sensu w kontekście skryptów JS. To może prowadzić do tego, że deweloperzy nie zrozumieją, jak poprawnie dodawać zasoby do HTML-a, a to może w przyszłości rodzić problemy z wydajnością i działaniem strony. Zrozumienie i stosowanie standardów HTML jest mega ważne przy projektach webowych, bo wpływa na jakość kodu i jego przyszłą obsługę.

Pytanie 21

Jaką właściwość CSS należy zastosować, aby ustawić wewnętrzne marginesy dla danego elementu?

A. padding
B. margin
C. width
D. hight
Chociaż odpowiedzi hight, width i margin mają swoje zastosowania w CSS, nie są one odpowiednie do definiowania marginesów wewnętrznych elementu. Właściwość hight jest błędna, ponieważ nie istnieje taka właściwość w CSS; prawidłowa forma to height, która określa wysokość elementu, a nie jego wewnętrzne marginesy. width z kolei definiuje szerokość elementu, co również nie ma związku z przestrzenią wewnętrzną. Użytkownicy często mylą te właściwości, co prowadzi do nieprawidłowych założeń dotyczących stylizacji elementów na stronie. Zrozumienie różnicy między padding a margin jest również kluczowe. Margin definiuje przestrzeń zewnętrzną, oddzielając elementy od siebie, podczas gdy padding działa wewnątrz elementu, wpływając na układ zawartości. Tego typu błędy mogą prowadzić do nieprzewidzianych efektów wizualnych w projektach. W praktyce, aby prawidłowo dostosować wygląd strony, istotne jest zrozumienie, jakie właściwości można stosować w różnych kontekstach, oraz ich wzajemne relacje. Właściwe zarządzanie przestrzenią wewnętrzną i zewnętrzną elementów jest fundamentem efektywnego i estetycznego projektowania stron internetowych.

Pytanie 22

Kolor zapisany w notacji szesnastkowej #0000FF to:

A. czarny
B. niebieski
C. czerwony
D. zielony
Zapis szesnastkowy koloru ma postać #RRGGBB, gdzie każda para cyfr (00-FF) to składowa: czerwona, zielona i niebieska. W #0000FF składowe R i G są zerowe (00), a niebieska maksymalna (FF = 255), więc powstaje czysty niebieski. To odpowiednik zapisu rgb(0, 0, 255). Znajomość skrajnych wartości (00 i FF) pozwala szybko rozpoznać kolory podstawowe. Dlatego #0000FF to niebieski.

Pytanie 23

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. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu
C. jedynie tekst italic we wszystkich poziomach nagłówków
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 24

W stylu CSS zdefiniowano klasę uzytkownik:

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

Pytanie 25

Portal internetowy dysponuje bardzo złożonym systemem stylów, który obejmuje style zewnętrzne, wewnętrzne oraz lokalne. Jak można zagwarantować, że określona cecha zdefiniowana w zewnętrznym stylu jest zawsze stosowana do elementu HTML, niezależnie od bardziej priorytetowych stylów?

A. jako pseudoklasę :active
B. przy pomocy pseudoelementu ::after
C. jako selektor potomka
D. przy pomocy reguły !important
Zdefiniowanie cechy za pomocą selektora potomka, pseudoklasy :active lub pseudoelementu ::after to podejścia, które nie spełniają wymaganego celu w kontekście priorytetyzacji stylów CSS. Selektor potomka odnosi się do elementów, które są zagnieżdżone wewnątrz innych elementów i nie zapewnia on wyższego priorytetu. Na przykład, jeśli mamy regułę `div p { color: blue; }`, a później w innym miejscu `p { color: red; }`, kolor tekstu w elemencie <p> będzie czerwony, niezależnie od tego, że jest on dzieckiem <div>. Pseudoklasa :active dotyczy stanu interakcji z elementem, jak naciśnięcie przycisku. Nie można jej używać do stawiania stylów jako domyślnych, ponieważ działa tylko w momencie aktywacji, co nie spełnia wymogu stałego przypisania stylu. Pseudoelement ::after służy do dodawania treści po elemencie, ale również nie wpływa na priorytet wyświetlania stylów. Użycie tych metod w kontekście prób ustalenia stałych cech stylów może prowadzić do nieporozumień i błędów w kodzie, ponieważ nie zapewniają one odpowiedniej kontroli nad priorytetami, co jest kluczowe w projektowaniu stylów CSS. W praktyce, aby uniknąć konfliktów i nieprzewidywalnych rezultatów, zaleca się odpowiednie planowanie struktury styli oraz przejrzystość w używaniu reguły !important tylko tam, gdzie to absolutnie konieczne.

Pytanie 26

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. A
C. B
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 27

<form>
  <input type="email" id="addr" required>
  <input type="submit" value="Zapisz">
</form>
Na podstawie przedstawionego kodu formularza HTML można powiedzieć, że pole edycyjne:
A. nie może być puste i wymaga wpisania tekstu ze znakiem @.
B. wymaga wpisania jedynie znaków alfanumerycznych.
C. może być puste.
D. nie powinno zawierać znaków numerycznych.
W tym fragmencie kodu HTML masz dwa bardzo ważne atrybuty: type="email" oraz required. To właśnie one razem powodują, że poprawna jest odpowiedź, że pole nie może być puste i wymaga wpisania tekstu ze znakiem @.

Atrybut required oznacza, że pole jest obowiązkowe. Przeglądarka, zgodnie ze specyfikacją HTML5, nie pozwoli wysłać formularza, dopóki pole nie będzie wypełnione. Użytkownik kliknie przycisk „Zapisz”, a formularz po prostu się nie wyśle – pojawi się komunikat walidacyjny po stronie przeglądarki. To jest tzw. walidacja po stronie klienta, domyślnie wbudowana w HTML.

Z kolei type="email" uruchamia specjalny mechanizm sprawdzania formatu wpisanego tekstu. Przeglądarka sprawdza, czy ciąg znaków wygląda jak adres e‑mail: musi zawierać co najmniej znak @ i jakąś część przed i po nim. To nie jest super zaawansowana walidacja, ale wystarcza jako pierwszy filtr, np. "[email protected]" przejdzie, a "jan.domena.pl" już nie. Moim zdaniem to bardzo wygodne, bo nie trzeba od razu pisać własnego JavaScriptu tylko po to, żeby odsiać oczywiste błędy.

W praktyce w aplikacjach webowych zwykle łączy się tę prostą walidację HTML5 z dodatkowymi sprawdzeniami po stronie serwera (np. w PHP czy w innym backendzie), bo dane z formularza zawsze trzeba traktować z ograniczonym zaufaniem. Dobrym nawykiem jest też dodanie atrybutu name, np. name="email", żeby serwer mógł poprawnie odebrać wartość pola.

Warto też wiedzieć, że niektóre przeglądarki mobilne, gdy widzą type="email", podpowiadają użytkownikowi specjalną klawiaturę z łatwym dostępem do znaku @ i kropki, co realnie poprawia wygodę wpisywania adresu. To taki mały szczegół, ale w profesjonalnych projektach UX ma znaczenie. Podsumowując: required blokuje puste wysłanie formularza, a type="email" wymusza poprawny, podstawowy format adresu ze znakiem @ – dokładnie to opisuje poprawna odpowiedź.

Pytanie 28

Aplikacja o nazwie FileZilla umożliwia

A. wniesienie bazy danych na stronę CMS Joomla!
B. sprawdzanie poprawności plików HTML oraz CSS
C. przeprowadzenie testów aplikacji
D. publikację witryny internetowej na zdalnym serwerze
FileZilla to popularny program typu FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików między komputerem a serwerem internetowym. Jego głównym celem jest publikacja stron internetowych na odległych serwerach, co jest kluczowe dla procesu tworzenia i utrzymania stron w sieci. Program obsługuje różne protokoły, takie jak FTP, FTPS oraz SFTP, co zapewnia elastyczność i bezpieczeństwo podczas transferu danych. W praktyce, aby opublikować stronę, użytkownik może przeciągnąć pliki z lokalnego folderu do odpowiedniego katalogu na serwerze, co jest intuicyjne i efektywne. FileZilla wspiera również funkcje takie jak synchronizacja folderów, co pozwala na łatwe aktualizowanie zawartości strony. Zgodnie z branżowymi standardami, korzystanie z odpowiednich narzędzi do przesyłania plików, takich jak FileZilla, jest niezbędne dla każdego dewelopera webowego, aby zapewnić bezpieczeństwo i zgodność z najlepszymi praktykami w zakresie publikacji stron internetowych.

Pytanie 29

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: left; } aside { float: left; }
C. nav { float: right; }
D. nav { float: right; } section { 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. &lt;aside&gt;, potem &lt;section&gt;, a na końcu &lt;nav&gt;, 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 30

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

A. <s> </s>
B. <u> </u>
C. <em> </em>
D. <b> </b>
W tym pytaniu łatwo pomylić różne znaczniki HTML, bo wiele z nich wpływa na wygląd tekstu, ale pełnią zupełnie inne role semantyczne. W standardzie HTML <b> odpowiada głównie za pogrubienie tekstu, bez nadawania mu specjalnego znaczenia. To po prostu wizualne wyróżnienie, coś jak podkręcenie czcionki w edytorze tekstu. Nie informuje jednak, że treść jest błędna, nieaktualna czy powinna być zignorowana. W nowoczesnym kodzie, jeśli chcemy podkreślić ważność treści, lepszym wyborem jest <strong>, a nie <b>. Podobnie <em> nie ma nic wspólnego z przekreśleniem – ten znacznik służy do emfazy, czyli zaakcentowania fragmentu zdania, zwykle renderowany jest kursywą. Semantycznie oznacza, że dany fragment ma inne brzmienie albo nacisk w wypowiedzi, co jest istotne np. dla czytników ekranu czy tłumaczeń. Z kolei <u> historycznie kojarzy się z podkreślaniem tekstu, ale w HTML5 jego znaczenie zostało doprecyzowane: używa się go raczej do oznaczania treści, które są w jakiś sposób wyróżnione konwencjonalnie (np. błąd ortograficzny, nazwa własna w tekście innym alfabetem), a nie do dekoracyjnego podkreślania wszystkiego jak leci. Typowym błędem jest myślenie kategoriami „jak to wygląda”, zamiast „co to oznacza”. Wiele osób wybiera <b> albo <u>, bo kojarzy im się to z edytorem Word i zmianą stylu, a w HTML powinniśmy bardziej zwracać uwagę na semantykę i zgodność ze specyfikacją. Do oznaczania tekstu jako błędnego lub nieaktualnego używa się <s> (lub w bardziej formalnych zmianach <del>), bo te znaczniki jednoznacznie wskazują, że dana treść nie jest już obowiązująca. Dzięki temu narzędzia do dostępności, wyszukiwarki i style CSS mogą poprawnie interpretować znaczenie tego fragmentu, a nie tylko jego wygląd.

Pytanie 31

Wskaż blok, który jest sformatowany zgodnie z podanym stylem CSS.

background: linear-gradient(to right, LightBlue, DarkBlue);
Ilustracja do pytania
A. Blok 4
B. Blok 2
C. Blok 3
D. Blok 1
Blok 2 jest poprawną odpowiedzią ponieważ wykorzystuje styl CSS background linear-gradient(to right LightBlue DarkBlue) co oznacza że gradient kolorów rozciąga się od lewej do prawej strony elementu CSS linear-gradient pozwala na tworzenie gładkich przejść między kolorami co jest popularną techniką w projektowaniu stron internetowych Styl ten dodaje wizualnej atrakcyjności i może być użyty w różnych częściach witryny takich jak przyciski nagłówki czy tła sekcji Właściwość gradientu pozwala na zastosowanie wielu kolorów i kontrolowanie ich punktów początkowych i końcowych co zwiększa elastyczność projektowania Ponadto gradienty są wspierane przez wszystkie nowoczesne przeglądarki co czyni je doskonałym wyborem dla responsywnych stron internetowych Wykorzystanie gradientów zamiast obrazów tła pomaga także w optymalizacji strony zmniejszając czas ładowania co jest zgodne z najlepszymi praktykami branżowymi i wpływa pozytywnie na doświadczenie użytkownika CSS oferuje również inne typy gradientów takie jak radial-gradient i conic-gradient które mogą być używane w zależności od potrzeb projektowych

Pytanie 32

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Ta metoda odniesie się do akapitu

A. <p id="akapit">akapit2</p>
B. <p class="akapit">akapit4</p>
C. <p href="/akapit">akapit3</p>
D. <p>akapit</p>
Selekcja elementów DOM na podstawie ich klas jest kluczowym aspektem w pracy z JavaScript, jednak nie wszystkie odpowiedzi w tym teście są poprawnie skonstruowane. Odpowiedzi takie jak <p>akapit</p>, <p id="akapit">akapit2</p> oraz <p href="/akapit">akapit3</p> mają istotne braki w kontekście wykorzystania metody getElementsByClassName. Element <p>akapit</p> nie ma przypisanej klasy, co uniemożliwia jego selekcję przez tę metodę. Ważne jest, aby pamiętać, że getElementsByClassName wymaga, aby elementy miały przypisaną klasę, a nie aby były zdefiniowane przez inne atrybuty. Z kolei <p id="akapit">akapit2</p> posiada identyfikator, a nie klasę, co również nie umożliwia jego odnalezienia przez tę metodę. Identyfikatory są unikalne w kontekście dokumentu HTML i są bardziej odpowiednie do selekcji z wykorzystaniem metody getElementById. Ostatnia odpowiedź <p href="/akapit">akapit3</p> jest niewłaściwa, ponieważ atrybut href nie jest przypisany do elementów typu p, co jest technicznie błędne. Tego rodzaju błędy mogą wynikać z nieporozumień dotyczących struktury DOM i atrybutów HTML, co jest kluczowe do efektywnego programowania w JavaScript. Właściwe rozumienie różnic między klasami, identyfikatorami i innymi atrybutami jest fundamentalne dla skutecznego zarządzania elementami w kodzie skryptowym.

Pytanie 33

W CSS, aby zastosować efekt przekreślenia, a także podkreślenia dolnego lub górnego w tekście, należy użyć

A. text-decoration
B. text-indent
C. text-align
D. text-transform
Wybór innych odpowiedzi wskazuje na pewne nieporozumienia dotyczące zastosowania poszczególnych właściwości CSS w kontekście formatowania tekstu. 'text-align' dotyczy wyrównania tekstu w obrębie kontenera, co oznacza, że definiuje, jak tekst jest rozmieszczany w poziomie, na przykład do lewej, prawej lub do środka. Nie ma on wpływu na dekorację tekstu, co czyni go nieadekwatnym do zadania. Z kolei 'text-transform' służy do zmiany wielkości liter w tekście, co obejmuje operacje takie jak zamiana na wielkie litery czy małe litery. Chociaż jest to istotna właściwość w kontekście stylizacji tekstu, nie ma związku z efektami dekoracyjnymi, jakimi są przekreślenie czy podkreślenie. Z kolei 'text-indent' kontroluje wcięcie tekstu na początku akapitu, ale nie modyfikuje jego dekoracji w żaden sposób. Typowym błędem jest mylenie tych właściwości, co może prowadzić do nieefektywnego stylizowania stron internetowych i wprowadzać w błąd w kontekście pożądanych efektów wizualnych. Istotne jest zrozumienie, że każda z tych właściwości ma swoją specyfikę i zastosowanie, które należy dobierać zgodnie z zamierzonym efektem wizualnym oraz standardami projektowania stron internetowych. Używanie niewłaściwych właściwości może prowadzić do chaosu w stylizacji, co zdecydowanie należy unikać w profesjonalnym podejściu do tworzenia stron.

Pytanie 34

Którą technologię poleca się, aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania?

A. SEO
B. SSL
C. CMS
D. FTP
Aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania, stosuje się system CMS - zarządza się nią przez gotowy panel, bez pisania kodu. Dlatego poleca się CMS.

Pytanie 35

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

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

Pytanie 36

Na ilustracji pokazano strukturę bloków witryny internetowej. Który z elementów stylu strony jest zgodny z podanym układem? Dla uproszczenia pominięto cechy koloru tła, wysokości oraz czcionki)

Ilustracja do pytania
A. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }
B. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }
C. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }
D. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }
Wybór błędnych odpowiedzi wynika z nieprawidłowego zastosowania właściwości CSS float i clear oraz niewłaściwego przydzielania szerokości elementów. Pierwsza odpowiedź błędnie wykorzystuje clear:both dla drugiego bloku, co spowodowałoby, że zawsze zaczynałby on nowy wiersz, niezgodnie z przedstawionym układem. Ponadto szerokości bloków zostały nieoptymalnie przypisane. Trzecia odpowiedź nie wykorzystuje float, co oznacza, że elementy będą się ustawiały w porządku blokowym, jeden pod drugim, zamiast w jednym rzędzie. Takie podejście nie pasuje do przedstawionego układu, gdzie pierwszy blok jest obok drugiego i trzeciego. Czwarta odpowiedź błędnie stosuje clear dla trzeciego bloku oraz float dla czwartego bloku, co również zaburzyłoby układ bloków, ponieważ clear:both sprawia, że element zaczyna nowy wiersz. Float w tej sytuacji nie jest potrzebny dla czwartego bloku, ponieważ powinien on zajmować całą szerokość. Typowym błędem w rozumowaniu może być niezrozumienie, jak właściwości float i clear wpływają na przepływ dokumentu oraz jak szerokości procentowe działają w kontekście układu strony. Zrozumienie tych zasad jest kluczowe dla tworzenia efektywnych i estetycznych układów stron.

Pytanie 37

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. ACE
B. SWF
C. SVG
D. GIF
Wybór formatu SWF sugeruje, że użytkownik myli zastosowania różnych formatów plików. SWF, czyli Shockwave Flash, to format, który był powszechnie używany do tworzenia animacji i interaktywnych aplikacji internetowych. Jest on oparty na wektorowej grafice i obsługuje dźwięk oraz skrypty, co czyni go idealnym do tworzenia złożonych animacji. Z kolei SVG, czyli Scalable Vector Graphics, to format oparty na XML, który pozwala na tworzenie grafiki wektorowej i również obsługuje animacje przy użyciu CSS oraz JavaScript. Poprzez błędne przypisanie funkcji animacyjnych do ACE, użytkownik może nie dostrzegać, jak różne formaty są projektowane z myślą o określonych zastosowaniach. GIF to format, który od lat jest popularny w sieci do prezentacji prostych animacji, zwłaszcza w mediach społecznościowych. Użytkownicy często mylą różne zastosowania formatów i mogą nie być świadomi, że istnieją formaty, które są specjalnie zaprojektowane do obsługi animacji, podczas gdy inne służą zupełnie innym celom, jak kompresja danych. Właściwe zrozumienie tych różnic jest kluczowe dla efektywnego projektowania treści multimedialnych oraz optymalizacji ich działania w różnych środowiskach.

Pytanie 38

Która reguła dotycząca sekcji <head> w HTML jest poprawna?

A. w sekcji <head> zawiera się sekcja <body>
B. w sekcji <head> nie można umieszczać kodu CSS, a jedynie odwołanie do pliku CSS
C. w sekcji <head> mogą wystąpić znaczniki <meta>, <title>, <link>
D. w sekcji <head> definiuje się szablon strony znacznikami <div>
Sekcja <head> zawiera metadane dokumentu - informacje o stronie, a nie jej widoczną treść. Mieszczą się w niej m.in. <title> (tytuł karty), <meta> (np. kodowanie znaków, opis), <link> (dołączenie zewnętrznego arkusza CSS lub favikony) oraz <style> i <script>. Widoczną zawartość strony - nagłówki, akapity, obrazy, <div> - umieszcza się w odrębnej sekcji <body>. Dlatego poprawna jest reguła o <meta>, <title> i <link> w <head>.

Pytanie 39

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 800 na 480 pikseli
B. 2560 na 2048 pikseli
C. 1366 na 768 pikseli
D. 320 na 240 pikseli
Pozostałe opcje rozdzielczości nie spełniają wymogów proporcji 16:9. Rozdzielczość 320 na 240 pikseli, choć popularna w starszych urządzeniach, ma proporcje 4:3, co jest niewłaściwe dla szerokokątnych zastosowań i nie oddaje pełni nowoczesnych treści wizualnych. W przypadku rozdzielczości 800 na 480 pikseli, proporcje wynoszą około 15:9, co również nie jest zgodne z wymaganym standardem 16:9. Ta rozdzielczość może być używana w niektórych telefonach komórkowych, ale nie nadaje się do oglądania współczesnych filmów i programów telewizyjnych, które są produkowane w formacie 16:9. Natomiast rozdzielczość 2560 na 2048 pikseli, mimo że oferuje wysoką jakość obrazu, ma proporcje 5:4, co jest zbliżone do formatu 4:3 i nie odpowiada wymaganiom współczesnych treści wizualnych. Proporcje te są niestandardowe i nie są idealne do wyświetlania materiałów wideo, co ogranicza ich zastosowanie w nowoczesnych mediach.

Pytanie 40

p { font-family: Arial, Helvetica, sans-serif; }
Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:
A. maszynową.
B. dekoracyjną.
C. szeryfową.
D. bezszeryfową.
W tym pytaniu łatwo się pomylić, bo wiele osób bardziej kojarzy konkretne nazwy fontów niż ich rodziny. Kluczowe jest zrozumienie, jak działa właściwość font-family w CSS. Zapis font-family: Arial, Helvetica, sans-serif definiuje listę krojów w kolejności priorytetu. Przeglądarka sprawdza po kolei: najpierw próbuje użyć Ariala, potem Helvetiki, a jeśli żaden z nich nie jest dostępny na urządzeniu, wybiera dowolny systemowy font z rodziny sans-serif. I to właśnie ostatni element – sans-serif – określa typ czcionki, czyli że ma to być krój bezszeryfowy.
Czcionka szeryfowa (serif) to np. Times New Roman czy Georgia, z charakterystycznymi „ogonami” i ozdobnikami na końcach liter. Tutaj nie ma ani nazwy serif, ani generycznego słowa serif, więc nie ma podstaw, by mówić o kroju szeryfowym. Czcionka maszynowa, nazywana w CSS monospace, to taka, w której wszystkie znaki mają tę samą szerokość, jak w starych maszynach do pisania (np. Courier New). W kodzie nie pojawia się słowo monospace ani żaden typowy font maszynowy, więc to też odpada.
Z kolei określenia typu „dekoracyjna” mogą mylić, bo w CSS istnieje kiedyś częściej używany generic fantasy, czasem kojarzony z ozdobnymi krojami, ale w tym przykładzie nie mamy ani fantasy, ani cursive, tylko wyraźnie sans-serif. Typowy błąd myślowy polega na tym, że ktoś patrzy na nazwę Arial i nie kojarzy jej z rodziną bezszeryfową, albo sugeruje się wyglądem przykładowego tekstu z jakiegoś edytora. W praktyce jednak to właśnie Arial i Helvetica są klasycznymi reprezentantami rodziny sans-serif. Warto patrzeć na ostatni człon deklaracji font-family – ten generyczny typ jest zawsze najważniejszą wskazówką, do jakiej kategorii należy krój pisma w danym stylu.