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: 28 kwietnia 2026 13:20
Data zakończenia: 28 kwietnia 2026 13:49

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby strona internetowa była dostosowana do różnych urządzeń, należy między innymi ustalać

A. tylko znane fonty, takie jak Arial

B. wielkości obrazów wyłącznie w pikselach

C. wielkości obrazów w procentach

D. układ strony wyłącznie przy użyciu tabel

Aby strona WWW była responsywna, kluczowym aspektem jest definiowanie rozmiarów obrazów w procentach. Taki sposób umożliwia dynamiczne skalowanie elementów graficznych w zależności od rozmiaru ekranu urządzenia, co jest istotne w kontekście różnorodnych rozdzielczości oraz urządzeń mobilnych. Ustalając szerokość obrazów w procentach, na przykład 'width: 50%', zapewniamy, że obraz zajmuje połowę dostępnej szerokości kontenera, co pozwala na zachowanie proporcji i estetyki strony niezależnie od wielkości okna przeglądarki. Praktyczne zastosowanie takiej metody można zaobserwować w projektach wykorzystujących CSS Flexbox czy Grid, gdzie elastyczność układu jest kluczowa. Ponadto, stosowanie obrazów responsywnych wspiera standardy W3C oraz wytyczne dotyczące dostępności, co wpływa na lepsze doświadczenie użytkownika oraz poprawia SEO. W rezultacie, dobrze zaprojektowana strona responsywna przyczynia się do zwiększenia konwersji oraz zadowolenia odwiedzających, co jest niezbędne w dzisiejszym internecie.

Pytanie 2

Przedstawiono fragment kodu HTML, który nie waliduje się poprawnie. Błąd walidacji tego fragmentu kodu będzie dotyczył:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <img src="/obraz.gif alt="Obrazek">
    <h1>Rozdział 1</h1>
    <p>To jest tekst paragrafu, ...</p>
    <br>
    <img src="/obraz.gif" alt="Obrazek">
</body>
</html>

A. niedomknięcia znacznika br

B. niedomknięcia znacznika img

C. braku cudzysłowu

D. powtórzenia nazwy pliku graficznego

Niepoprawność w zakresie braku cudzysłowu w atrybucie 'src' znacznika 'img' wyklucza inne błędy, o których mowa w odpowiedziach. Znacznik 'br' jest jednym z nielicznych znaczników, które są samodomykające, co oznacza, że nie wymaga pary otwierającej i zamykającej. Dlatego informacja o niedomknięciu tego znacznika jest błędna, ponieważ poprawny zapis to po prostu . Ponadto, znacznik 'img' również nie wymaga zamknięcia, ponieważ podobnie jak 'br', jest znakiem samodomykającym, co czyni obie te odpowiedzi niepoprawnymi w kontekście analizy błędów kodu HTML. Dodatkowo, kwestia powtórzenia nazwy pliku graficznego w kodzie nie jest błędem walidacji, lecz jedynie stylem programowania. Jeżeli plik graficzny jest używany wielokrotnie, jest to całkowicie akceptowalne. Dlatego te trzy odpowiedzi nie odnoszą się do rzeczywistego problemu, który występuje w przedstawionym kodzie, co podkreśla znaczenie ścisłej znajomości składni HTML oraz zasad walidacji dla prawidłowego tworzenia stron internetowych.

Pytanie 3

W trakcie edycji grafiki rastrowej w aplikacji obsługującej kanały, dodanie kanału alfa oznacza

A. ustalenie właściwego balansu bieli

B. powiększenie głębi ostrości obrazu

C. wzmocnienie krawędzi obrazu

D. wprowadzenie warstwy z przezroczystością

Dodanie kanału alfa do grafiki rastrowej jest kluczowym krokiem w procesie zarządzania przezroczystością w obrazach. Kanał alfa to dodatkowy kanał, który przechowuje informacje o przezroczystości pikseli, co pozwala na tworzenie efektów wizualnych, takich jak miękkie krawędzie i złożone kompozycje. W praktyce, zastosowanie kanału alfa umożliwia na przykład nałożenie obiektów na różne tła bez wyraźnych granic, co jest szczególnie przydatne w grafice komputerowej, projektowaniu stron internetowych czy produkcji wideo. Dobrą praktyką w branży jest korzystanie z programów graficznych, takich jak Adobe Photoshop czy GIMP, gdzie dodanie kanału alfa można zrealizować poprzez stworzenie warstwy maski. Podczas pracy w takich programach warto również pamiętać o wykorzystaniu formatu PNG, który obsługuje przezroczystość, co jest standardem w zapewnieniu wysokiej jakości grafiki w sieci.

Pytanie 4

W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika

A. D

B. B

C. C

D. A

Wszystkie podane odpowiedzi są błędne, ponieważ nie odzwierciedlają one właściwego wykorzystania stylizacji dla znacznika h1 zgodnie z przedstawionym kodem CSS. Po pierwsze, ważne jest zrozumienie, że każda z tych odpowiedzi powinna być zgodna z określonymi właściwościami CSS. W przypadku zastosowania 'font-style: oblique;', nie można oczekiwać, że tekst pozostanie w standardowym, prostym stylu. Odpowiedzi podają powtarzający się tekst, który nie jest związany z obliczonym formatowaniem. Po drugie, 'font-variant: small-caps;' nadaje tekstowi unikalny charakter, co znacznie różni się od normalnego zapisu. Odpowiedzi, które jedynie powtarzają fragmenty tekstu, nie odzwierciedlają użycia małych kapitałków, co czyni je niepoprawnymi. Po trzecie, 'text-align: right;' wyraźnie definiuje położenie tekstu w kontekście całej strony. W przypadku tych odpowiedzi brak jest zrozumienia, że wyrównanie tekstu do prawej krawędzi wprowadza dodatkowe zmiany w układzie, co powinno być uwzględnione w odpowiedziach. W efekcie, każda z tych odpowiedzi nie odnosi się do rzeczywistych efektów stylizacji zastosowanych w kodzie CSS, co czyni je nieadekwatnymi.

Pytanie 5

Aby uzyskać płynne przejścia obrazów w filmie, liczba klatek (niewchodzących w interakcję ze sobą) na sekundę powinna znajdować się w co najmniej takim zakresie

A. 20 - 23 fps

B. 16 - 19 fps

C. 31 - 36 fps

D. 24 - 30 fps

Wybór wartości spośród opcji takich jak 16 - 19 fps lub 20 - 23 fps nie zapewnia wystarczającej płynności obrazu w filmie. Kiedy liczba klatek na sekundę spada poniżej 24 fps, widzowie mogą doświadczyć efektów skoków w ruchu, co negatywnie wpływa na postrzeganie całości obrazu. Wartości te są przypisane do starszych technologii filmowych oraz do zastosowań, w których nie zależało na pełnej płynności. Na przykład, 18 fps był używany w niektórych wczesnych filmach niemych, ale ze względu na niewystarczającą ilość klatek na sekundę może prowadzić do niedoskonałości wizualnych. Podobnie, wybór 20 - 23 fps, chociaż teoretycznie bliższy standardowi 24 fps, w praktyce nie zapewnia odpowiedniej płynności dla współczesnych produkcji filmowych. W przypadku transmisji telewizyjnych, 30 fps jest bardziej akceptowalnym standardem, jednak nadal nie jest to idealne dla kinematografii, gdzie 24 fps preferuje się ze względu na estetykę i bardziej naturalne odwzorowanie ruchu. Wybierając niższe liczby klatek, można także napotkać problemy z synchronizacją dźwięku i obrazu, co skutkuje nieprzyjemnymi doświadczeniami wizualnymi. Dlatego warto pamiętać, że standardowe praktyki w branży filmowej są oparte na wieloletnich badaniach i doświadczeniach, które podkreślają znaczenie płynności w odbiorze wizualnym.

Pytanie 6

Aby obraz umieszczony na stronie internetowej mógł automatycznie dostosowywać się do rozmiaru ekranu, na którym jest prezentowana strona, trzeba

A. jeden z jego wymiarów określić w pikselach

B. jego szerokość ustawić w wartościach procentowych

C. oba jego wymiary ustawić w pikselach

D. nie zmieniać obu jego wymiarów za pomocą stylów CSS

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowe dla zapewnienia responsywności strony internetowej. Gdy szerokość obrazu wyrażona jest w procentach, automatycznie dostosowuje się ona do szerokości kontenera, w którym się znajduje. To oznacza, że obraz będzie skalował się do rozmiaru ekranu użytkownika, co jest szczególnie ważne w kontekście urządzeń mobilnych oraz różnych rozdzielczości ekranów. Przykładem może być użycie stylu CSS: `img { width: 100%; height: auto; }`, co pozwala na zachowanie proporcji obrazu, jednocześnie dostosowując jego szerokość do kontenera. Tego rodzaju praktyki są zgodne z zasadami responsywnego projektowania (Responsive Web Design) i są zalecane przez standardy W3C. Dzięki takim rozwiązaniom użytkownik zyskuje lepsze doświadczenie, a strona wygląda estetycznie na różnych urządzeniach. Dobrą praktyką jest również testowanie strony na różnych ekranach, aby upewnić się, że wszystkie obrazy i inne elementy dostosowują się do zmieniających się warunków wyświetlania.

Pytanie 7

Jaki program jest wykorzystywany do edycji dźwięku?

A. CorelDRAW

B. GIMP

C. Inkscape

D. Audacity

Audacity to naprawdę fajny program do obróbki dźwięku, który jest używany przez wielu, zarówno hobbystów, jak i profesjonalistów. Jest to open-source, więc można go ściągnąć za darmo. Dzięki niemu możesz nagrywać dźwięki z mikrofonu lub z innych źródeł, co jest super przydatne. Możliwości edytowania ścieżek dźwiękowych są ogromne – masz różne efekty, jak kompresja, EQ czy reverb, które naprawdę mogą wzbogacić Twoje nagrania. Obsługuje też wiele formatów plików, jak WAV, MP3 czy OGG, co sprawia, że jest wszechstronny. Sam z niego korzystam do nagrywania podcastów i muszę przyznać, że dobrze się sprawdza. Ważne, żeby pamiętać, że Audacity jest popularne w branży, bo pozwala na solidną pracę z dźwiękiem, co jest kluczowe, jeśli planujesz coś profesjonalnego. Jest też duża społeczność użytkowników, więc program ciągle się rozwija i aktualizuje. To na pewno coś, czego warto spróbować!

Pytanie 8

Które z poniższych zdań charakteryzuje grafikę wektorową?

A. Służy do zapisu zdjęć cyfrowych

B. Może być zapisywana w formatach JPG lub PNG

C. Jest to reprezentacja obrazu przy pomocy siatki pikseli o różnych kolorach układających się w poziomie i pionie na monitorze komputera, drukarce lub innym urządzeniu wyjściowym

D. Zapisywany obraz jest opisywany za pośrednictwem figur geometrycznych umieszczonych w układzie współrzędnych

Grafika wektorowa to technika obrazowania, która polega na reprezentowaniu obrazów za pomocą figur geometrycznych, takich jak punkty, linie, krzywe i wielokąty, które są zdefiniowane matematycznie i umieszczone w układzie współrzędnych. Dzięki temu obrazy wektorowe są skalowalne bez utraty jakości, co jest ich kluczową zaletą. Zastosowanie grafiki wektorowej znajduje się w wielu dziedzinach, takich jak projektowanie logo, ilustracje, animacje oraz wszędzie tam, gdzie potrzebna jest elastyczność w edycji i skalowaniu obrazów. W przeciwieństwie do grafiki rastrowej, która jest oparta na siatce pikseli, grafika wektorowa zapewnia lepszą ostrość i jakość w dowolnym rozmiarze. Dobrymi przykładami formatów wektorowych są SVG (Scalable Vector Graphics) oraz AI (Adobe Illustrator), które są standardami branżowymi wykorzystywanymi przez profesjonalnych projektantów. W praktyce, podczas projektowania, grafika wektorowa umożliwia łatwe wprowadzanie zmian kolorystycznych, kształtowych czy nawet animacyjnych bez negatywnego wpływu na jakość obrazu.

Pytanie 9

Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:

border: solid 1px;
border-color: red blue green yellow;

A. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego

B. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty

C. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty

D. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty

Błędne zrozumienie przypisania kolorów do krawędzi obramowania w CSS wynika z niewłaściwego interpretowania kolejności, w jakiej te kolory są przypisywane. W standardach CSS, kiedy używamy składni takiej jak border-color: red blue green yellow; kolory są przypisywane zaczynając od krawędzi górnej, a następnie zgodnie z kierunkiem wskazówek zegara. Stąd czerwona krawędź to górna, niebieska to prawa, zielona to dolna, a żółta to lewa. Błędne odpowiedzi wynikają z niepoprawnego przypisania kolorów do krawędzi w innej kolejności. Typowym błędem jest myślenie, że kolory są przypisane w porządku lewa-prawa-dół-góra, co jest sprzeczne z domyślną kolejnością CSS. Bez poprawnego zrozumienia tej logiki, projektanci mogą doświadczyć trudności w przewidywaniu jakich efektów wizualnych oczekiwać od swojej pracy, co może prowadzić do błędów w projektach. Aby uniknąć takich problemów, kluczowe jest zapoznanie się i zrozumienie zasad określających jak style CSS są interpretowane przez przeglądarki, co pozwala na pełne wykorzystanie możliwości jakie oferują style kaskadowe. Poprawne stosowanie tych zasad jest niezbędne do tworzenia profesjonalnych i spójnych projektów internetowych, które są zgodne z najlepszymi praktykami w branży.

Pytanie 10

Jaką funkcję w edytorze grafiki rastrowej trzeba wykorzystać, żeby przygotować rysunek do publikacji na stronie tak, aby widoczne było jedynie to, co znajduje się w obrębie ramki?

A. Perspektywa

B. Odbicie

C. Kadrowanie

D. Skalowanie

Odbicie w edytorze grafiki rastrowej zmienia kierunek obrazu w pionie lub poziomie co jest użyteczne gdy chcemy uzyskać lustrzane odbicie elementów grafiki. Choć jest to przydatne narzędzie nie spełnia ono funkcji wybiórczego wyświetlania części obrazu tak jak kadrowanie. Skalowanie natomiast polega na zmianie rozmiaru obrazu poprzez zwiększenie lub zmniejszenie jego wymiarów przy jednoczesnym zachowaniu proporcji lub ich modyfikacji. Skalowanie jest istotne w kontekście dostosowywania obrazów do różnych rozdzielczości ekranów i formatów jednak nie eliminuje niechcianych fragmentów obrazu tak jak kadrowanie. Z kolei perspektywa odnosi się do zmiany kąta widzenia obrazu co pozwala na symulowanie widoku z różnych punktów obserwacji. Narzędzie perspektywy umożliwia tworzenie efektów przestrzennych ale nie ogranicza treści obrazu do konkretnego obszaru. Wszystkie te funkcje mają swoje zastosowanie w edycji grafiki lecz żadne z nich nie oferuje możliwości selektywnego wycinania fragmentu obrazu w celu jego dalszego wykorzystania co jest kluczową cechą kadrowania. Kadrowanie pozostaje narzędziem podstawowym do przygotowania obrazów do publikacji gdzie istotne jest skoncentrowanie uwagi odbiorcy na najważniejszych elementach grafiki eliminując zbędne szczegóły.

Pytanie 11

W zaprezentowanym fragmencie dokumentu HTML ustalono stylowanie CSS dla selektora klasy "menu", aby kolor tła tego elementu był zielony. Które z poniższych określeń stylu CSS odpowiada temu stylowaniu?

<div class="menu"></div>

A. div.menu { background-color: green; }

B. #menu { background-color: rgb(0,255,0); }

C. menu { background-color: rgb(0,255,0); }

D. div:menu { color: green; }

Błędne odpowiedzi wynikają z niewłaściwego zastosowania selektorów w języku CSS. Selektor #menu sugeruje użycie ID, jednak w HTML identyfikator musi być unikalny, a zadanie dotyczy klasy, co implikuje użycie selektora klasy poprzedzonego kropką. Takie błędne użycie prowadzi do niezrozumienia podstawowej różnicy między klasami a identyfikatorami w CSS, co jest kluczowe w projektowaniu stron internetowych. Z kolei selektor menu { background-color: rgb(0,255,0); } jest niepoprawny, ponieważ nie odnosi się do konkretnego elementu. Chociaż specyfikacja CSS pozwala na selektory nazwane, najczęściej stosuje się je w kontekście semantycznym dla elementów HTML, a nie tych określonych przez klasy. Wreszcie, definicja div:menu { color: green; } używa błędnej składni, ponieważ pseudo-klasy w CSS są używane do stylizacji specyficznych stanów elementów, takich jak hover, active czy focus, a nie do stylizacji klas. Istotne jest zrozumienie, że użycie pseudo-klas wymaga odpowiedniego kontekstu, który w tym przypadku jest niepoprawnie użyty. Kluczem do poprawnego stosowania CSS jest zrozumienie specyfiki selektorów i ich właściwe wykorzystanie, co pozwala na efektywne zarządzanie stylem w projekcie webowym. Podstawową zasadą powinno być projektowanie stylów z myślą o ich wielokrotnym wykorzystaniu i utrzymaniu czystości kodu.

Pytanie 12

Który efekt został zaprezentowany na filmie?

A. Zwiększenie ostrości zdjęcia.

B. Zmiana jasności zdjęć.

C. Przenikanie zdjęć.

D. Zmniejszenie kontrastu zdjęcia.

Poprawnie wskazany efekt to przenikanie zdjęć, często nazywane też płynnym przejściem (ang. crossfade). Polega to na tym, że jedno zdjęcie stopniowo zanika, jednocześnie drugie pojawia się z narastającą widocznością. W praktyce technicznej realizuje się to najczęściej przez zmianę przezroczystości (opacity) dwóch warstw – jedna warstwa z pierwszym obrazem ma zmniejszaną wartość opacity z 1 do 0, a druga z kolejnym zdjęciem zwiększaną z 0 do 1. Na stronach WWW taki efekt robi się zwykle za pomocą CSS (transition, animation, keyframes) albo JavaScriptu, czasem z użyciem bibliotek typu jQuery czy gotowych sliderów. Moim zdaniem to jest jeden z podstawowych efektów, który warto umieć odtworzyć, bo pojawia się w galeriach, sliderach na stronach głównych, prezentacjach produktów czy prostych pokazach slajdów. W materiałach multimedialnych, np. w edycji wideo, dokładnie ten sam efekt nazywa się przejściem typu „cross dissolve” lub „fade”, i zasada działania jest identyczna – płynne nakładanie się dwóch klatek obrazu w czasie. Dobre praktyki mówią, żeby nie przesadzać z czasem trwania przenikania: zwykle 0,5–1,5 sekundy daje przyjemny, profesjonalny wygląd, bez wrażenia „zamulenia” interfejsu. Warto też pilnować spójności – jeśli na stronie używasz przenikania w jednym miejscu, dobrze jest utrzymać podobny styl animacji w innych elementach, żeby całość wyglądała konsekwentnie i nie rozpraszała użytkownika. W kontekście multimediów na WWW przenikanie jest też korzystne wydajnościowo, bo operuje głównie na właściwości opacity i transformacjach, które przeglądarki potrafią optymalizować sprzętowo.

Pytanie 13

Ikona przedstawiająca funkcję w edytorze grafiki rastrowej, znana jako „kubełek”, pozwala na

A. wypełnienie obszaru, który został zaznaczony kolorem

B. zmianę bieżących kolorów

C. wybór obszaru o identycznym kolorze

D. pobranie wybranej barwy i ustawienie jej jako aktywnej

Narzędzie 'kubełek', często spotykane w edytorach grafiki rastrowej takich jak Adobe Photoshop czy GIMP, służy do wypełniania zaznaczonego obszaru kolorem. Jest to szczególnie przydatne w sytuacjach, gdy chcemy szybko zapełnić jednolitym kolorem duże powierzchnie, takie jak tła lub obiekty. Działa na zasadzie zalewania najbliższych pikseli wybranym kolorem, uwzględniając podobieństwo kolorów, co można regulować za pomocą opcji tolerancji. W praktyce, narzędzie to usprawnia proces tworzenia grafik, ponieważ eliminuje potrzebę ręcznego kolorowania każdego piksela. Dodatkowo 'kubełek' może być stosowany w połączeniu z różnymi trybami mieszania, co pozwala na uzyskanie bardziej zaawansowanych efektów wizualnych. Praca z 'kubełkiem' wymaga zrozumienia koncepcji warstw, ponieważ wypełnianie na konkretnej warstwie ma wpływ na finalny wygląd projektu. Wiedza o tym, jak skutecznie używać narzędzia 'kubełek', jest niezbędna dla każdego grafika cyfrowego, który chce pracować efektywnie i profesjonalnie, realizując projekty zgodnie z najlepszymi praktykami branżowymi.

Pytanie 14

W jakich formatach można przechować wideo razem z dźwiękiem?

A. AAC

B. WAV

C. MP4

D. WMA

MP4 to jeden z najbardziej popularnych formatów plików multimedialnych, który jest szeroko stosowany do zapisywania materiałów wideo wraz ze ścieżkami dźwiękowymi. MP4, jako kontener, obsługuje różne kodeki wideo, takie jak H.264, a także kodeki audio, w tym AAC. Dzięki tej wszechstronności, format MP4 jest idealny do przechowywania zarówno obrazu, jak i dźwięku w jednym pliku, co jest kluczowe dla wielu zastosowań, od streamingu wideo po przechowywanie lokalne. MP4 jest zgodny z wieloma platformami i urządzeniami, co czyni go standardem dla treści wideo w Internecie. Przykładem zastosowania MP4 mogą być platformy takie jak YouTube, gdzie użytkownicy przesyłają filmy w tym formacie, aby zapewnić wysoką jakość obrazu i dźwięku. Warto również zauważyć, że MP4 wspiera różne metadane, co umożliwia dodawanie informacji o pliku, takich jak tytuł, artysta czy okładka albumu. Dzięki tym wszystkim właściwościom, MP4 jest niezastąpionym formatem w dziedzinie multimediów.

Pytanie 15

Który program służy do obróbki dźwięku?

A. Inkscape

B. Audacity

C. CorelDRAW

D. GIMP

Prawidłowo wskazany został Audacity, bo jest to specjalistyczny program przeznaczony właśnie do obróbki dźwięku. W praktyce oznacza to, że pozwala nagrywać, edytować, montować i eksportować ścieżki audio w różnych formatach, np. WAV, MP3, OGG. W typowym workflow technika czy realizatora dźwięku w małym studiu używa się Audacity do wycinania fragmentów nagrania, usuwania szumów tła, normalizacji głośności, stosowania efektów takich jak kompresor, korektor (EQ), pogłos, a także do miksowania kilku ścieżek w jeden gotowy plik. Moim zdaniem to jeden z najwygodniejszych programów na start, bo jest darmowy, wieloplatformowy i ma dość czytelny interfejs, a jednocześnie obsługuje dość zaawansowane operacje na sygnale audio. W środowisku webowym i multimedialnym Audacity bardzo często wykorzystuje się do przygotowania materiałów dźwiękowych na strony WWW, kursy e‑learningowe, podcasty czy krótkie reklamy internetowe. Dobre praktyki mówią, żeby przed publikacją dźwięk oczyścić z trzasków, wyrównać poziomy głośności (np. normalizacja do ok. −1 dB lub do standardu głośności LUFS) i dopiero potem eksportować do skompresowanego formatu, który łatwo osadzić w HTML5 audio. Audacity idealnie się do tego nadaje, bo pozwala precyzyjnie przybliżać przebieg fali, pracować na zaznaczeniach, a także cofać wiele kroków edycji, co jest bardzo wygodne przy nauce. W technikum czy w pracy przy prostych projektach multimedialnych ten program spokojnie wystarcza do większości typowych zadań związanych z obróbką dźwięku, od prostego przycięcia pliku MP3 aż po przygotowanie lektora do filmu instruktażowego.

Pytanie 16

Którą rozdzielczość należy ustawić w opcjach kodera, aby przygotować do publikacji film w rozdzielczości HD Ready?

A. 1920x1080

B. 1280x720

C. 720x480

D. 480x360

Prawidłowo – rozdzielczość 1280x720 to standard HD Ready, czyli tzw. 720p. W praktyce oznacza to obraz o proporcjach 16:9 i wysokości 720 linii, co jest przyjętym minimum dla materiału w jakości HD w wielu systemach publikacji wideo. W ustawieniach kodera (np. Adobe Media Encoder, HandBrake, FFmpeg, czy w panelach kodowania na platformach VOD) wybór 1280x720 zapewnia zgodność z typowymi profilami „HD Ready” albo po prostu „720p”. To jest ważne, bo wiele serwisów, od playerów osadzanych na stronach WWW, po YouTube czy Vimeo, rozpoznaje takie predefiniowane rozdzielczości i ustawia je jako osobne profile jakości. 1280x720 daje rozsądny kompromis między jakością a wagą pliku. Przy poprawnym bitrate (np. 3–5 Mbps dla H.264 przy typowym materiale) uzyskuje się obraz wystarczająco ostry do oglądania na monitorach, laptopach i telewizorach HD Ready, a jednocześnie nie „zabija” łącza przy streamingu. Z mojego doświadczenia, przy przygotowaniu wideo do osadzenia na stronach WWW, 720p jest bardzo bezpiecznym wyborem, szczególnie jeśli użytkownicy korzystają ze słabszego internetu lub urządzeń mobilnych. Warto też pamiętać, że HD Ready (1280x720) to inny standard niż Full HD (1920x1080). Częsty błąd to wrzucanie wszystkiego w jedno „HD”, ale w praktyce ma to znaczenie dla obciążenia serwera, zużycia transferu i wygody użytkownika. Dlatego jeśli w wymaganiach projektu albo klient mówi konkretnie o HD Ready, w opcjach kodera ustawiamy dokładnie 1280x720, pilnujemy proporcji 16:9 i dobieramy sensowny bitrate oraz kodek (obecnie najczęściej H.264 lub H.265 w kontenerze MP4).

Pytanie 17

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość

A. clear: both dla wszystkich bloków.

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

C. float: left dla wszystkich bloków.

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

Twoja odpowiedź nie jest poprawna, ale nie przejmuj się, błąd może wynikać z niepełnego zrozumienia zastosowania właściwości 'float' i 'clear' w CSS. Zastosowanie 'float: left' dla wszystkich bloków nie jest dobrym pomysłem, ponieważ spowoduje to, że wszystkie bloki będą się starały zmieścić w jednym rzędzie, co jest niezgodne z założonym układem. Podobnie, dodawanie 'clear: both' do wszystkich bloków też nie jest poprawne, ponieważ spowoduje to, że wszystkie bloki będą wyświetlane jeden pod drugim, zamiast obok siebie. Właściwość 'clear' powinna być stosowana do bloków, które chcemy wyświetlić poniżej innych bloków, natomiast 'float: left' powinien być stosowany do bloków, które chcemy wyświetlić obok siebie. Pamiętaj, że zrozumienie tych właściwości i umiejętność ich stosowania jest kluczowe dla tworzenia efektywnych i atrakcyjnych layoutów stron internetowych.

Pytanie 18

Jakiego elementu musisz użyć, aby rozpocząć nową linię tekstu bez tworzenia akapitu na stronie internetowej?

A.

B.

C.

D.

Znak jest standardowym elementem HTML używanym do wprowadzenia przerwy w tekście, która nie tworzy nowego akapitu. W przeciwieństwie do znacznika , który definiuje akapit i dodaje dodatkową przestrzeń przed i po nim, po prostu przenosi tekst do nowej linii, co jest szczególnie przydatne w takich sytuacjach jak adresy, wiersze piosenek czy fragmenty tekstu, gdzie formatowanie linii jest kluczowe. Przykład użycia: Adam Mickiewicz, Pan Tadeusz. W powyższym przykładzie tekst "Pan Tadeusz" zostanie wyświetlony w nowej linii, ale nie jako nowy akapit. Warto pamiętać, że stosowanie zbyt wielu w kodzie HTML może prowadzić do chaotycznego formatowania, dlatego zaleca się ich użycie z umiarem, zgodnie z zasadami dobrego projektowania stron i przystosowywania ich do różnych urządzeń, co jest zgodne z zasadami responsywnego designu. Zastosowanie jest zgodne z HTML5 i uznawane za najlepszą praktykę przy tworzeniu prostych układów tekstowych.

Pytanie 19

.format1 {
    …
}

W CSS określono wspólne style dla pewnej grupy elementów. Użycie takich stylów w kodzie HTML odbywa się za pomocą atrybutu:

A. div = "format1"

B. style = "format1"

C. class = "format1"

D. id = "format1"

Inne odpowiedzi odnoszą się do atrybutów lub metod, które nie są optymalne lub poprawne w kontekście wspólnego formatowania znaczników za pomocą CSS. Użycie atrybutu style do bezpośredniego stylowania elementów może być nieefektywne i prowadzi do powielania kodu, co utrudnia utrzymanie. W przypadku większych projektów takie podejście skutkuje chaosem i zwiększa ryzyko błędów. Definiowanie stylów bezpośrednio w każdym elemencie HTML utrudnia wprowadzanie globalnych zmian w wyglądzie strony. Z kolei atrybut id jest przeznaczony do unikalnego identyfikowania pojedynczego elementu na stronie. Choć można by teoretycznie użyć go do stylowania, nie jest to zalecane, gdyż każdy id musi być unikalny w ramach całego dokumentu HTML, co wyklucza jego stosowanie dla grupy elementów dzielących ten sam styl. W praktyce id używa się do celów, takich jak manipulacja specyficznymi elementami przez JavaScript lub do nawigacji wewnętrznej strony z użyciem kotwic. Źle zrozumiane przez programistów są także strategie, które polegają na przypisaniu znaczników do odmiennych grup bez właściwego użycia klas, co prowadzi do nieczytelnego kodu i utrudnia przyszłe zmiany w projekcie. Zastosowanie atrybutu div w taki sposób nie jest poprawne, ponieważ div jest elementem blokowym HTML, a nie atrybutem, co powoduje błędne zrozumienie struktury HTML i CSS. Kluczem do zrozumienia poprawnych praktyk jest świadomość różnic w zastosowaniu poszczególnych atrybutów i elementów, co prowadzi do tworzenia lepiej zorganizowanego i efektywnego kodu w projektach webowych.

Pytanie 20

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

A. hight

B. width

C. padding

D. margin

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 21

Którego atrybutu należy użyć w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby zdefiniować źródło cytatu?

<blockquote ...="https://pl.wikipedia.org">
Pokojowa Nagroda Nobla jest przyznawana kandydatom, którzy wykonali największą lub najlepszą
pracę na rzecz braterstwa między narodami
</blockquote>

A. href

B. src

C. alt

D. cite

Niestety, twoja odpowiedź nie jest poprawna. Atrybut 'cite' w znaczniku <blockquote> jest używany do definiowania źródła cytatu, a nie 'alt', 'src' ani 'href'. Atrybut 'alt' jest używany w obrazach jako tekst alternatywny, który jest wyświetlany, gdy obraz nie może być ładowany lub jest odczytywany przez czytniki ekranowe. Z kolei 'src' jest atrybutem, który określa ścieżkę do obrazu lub innego zasobu multimedialnego. 'href' jest używany w znacznikach 'a' i 'link' do określenia URL strony lub innego zasobu, do którego prowadzi link. Pomyłka ta może wynikać z braku zrozumienia różnych zastosowań atrybutów w HTML. Pamiętaj, że każdy atrybut ma swoje specyficzne zastosowanie i nie są one zamienne.

Pytanie 22

Aby grupować obszary na poziomie bloków, które będą stylizowane za pomocą znacznika: należy wykorzystać

A. <param>

B.

C.

D. <div>

Znaczniki , <param> i mają różne funkcje, ale nie nadają się do grupowania elementów w poziomie bloków. Element jest używany głównie do akapitów tekstu, więc nie można go wykorzystać do organizowania innych rzeczy jak obrazy czy formularze. To znaczy, że nie sprawdzi się w bardziej złożonych strukturach, gdzie potrzebujesz elastyczności i różnych typów treści. Z jest podobnie, bo on grupuje tekst w obrębie bloku, ale działa w linii, więc nie tworzy nowych wierszy ani nie zmienia układu. A <param> jest do osadzania obiektów, jak wideo, więc nie ma tu nic wspólnego z grupowaniem treści. Przypisywanie tych funkcji tym znacznikom to błąd, bo każdy z nich ma swoje konkretne zastosowanie, które musisz znać, żeby dobrze projektować strony zgodnie z nowoczesnymi standardami.

Pytanie 23

Co należy zrobić, gdy rozmiar pliku graficznego jest zbyt duży do umieszczenia w Internecie?

A. dodać kanał alfa

B. zapisać w formacie BMP

C. zmniejszyć jego rozdzielczość

D. zwiększyć jego głębię kolorów

Zmniejszenie rozdzielczości pliku graficznego to jedna z najskuteczniejszych metod redukcji jego rozmiaru, co jest kluczowe przy publikacji w Internecie. Rozdzielczość odnosi się do ilości pikseli, które tworzą obraz, a jej zmniejszenie prowadzi do mniejszej ilości danych do przechowania. Przykładowo, zamiast publikować obraz o rozdzielczości 4000x3000 pikseli, można zmniejszyć go do 1920x1080, co drastycznie zmniejszy wielkość pliku bez zauważalnej utraty jakości wizualnej na ekranach komputera czy urządzeń mobilnych. Zmniejszenie rozdzielczości jest zgodne z najlepszymi praktykami w zakresie optymalizacji zasobów internetowych, w tym zasadami dotyczącymi czasu ładowania strony i wydajności. Dodatkowo, odpowiednia rozdzielczość może poprawić doświadczenia użytkowników, zmniejszając czas ładowania i zwiększając responsywność witryn. Warto również pamiętać o formatowaniu plików graficznych, gdzie JPEG jest często preferowanym formatem dla zdjęć, a PNG dla obrazów z przezroczystością. Stosowanie technologii takich jak responsywne obrazy również przyczynia się do efektywnej prezentacji graficznej w sieci, co ma kluczowe znaczenie w dzisiejszym świecie online.

Pytanie 24

Aby przekształcić obraz z formatu JPEG do PNG bez utraty jakości, tak aby kolor biały w oryginalnym obrazie został zastąpiony przezroczystością w wersji docelowej, należy najpierw

A. załadować obraz do programu do edycji grafiki wektorowej

B. dodać kanał alfa

C. usunięcie gumką wszystkich białych miejsc

D. obniżyć rozdzielczość obrazu

Żeby zmienić obrazek z formatu JPEG na PNG i zachować przezroczystość tam, gdzie wcześniej był biały kolor, ważny krok to dodanie kanału alfa. To w zasadzie taka dodatkowa warstwa w obrazie, która mówi, które piksele mają być przezroczyste. JPEG nie umie obsługiwać przezroczystości, więc białe obszary będą się pokazywać jako nieprzezroczyste. Jak już dodasz ten kanał alfa, możesz ustawić przezroczystość dla białych pikseli, co pozwoli na ich ukrycie lub zamianę na przezroczystość w końcowym obrazku. Na przykład, w programach jak Adobe Photoshop można użyć narzędzia do zaznaczania kolorów, żeby wybrać wszystkie białe piksele i potem je usunąć, zostawiając tylko przezroczystość. W ten sposób dostajesz efekt, którego chcesz w obrazie PNG, co jest zgodne z dobrą praktyką w obróbce grafiki i pomaga utrzymać wysoką jakość obrazu bez żadnych strat.

Pytanie 25

Jaką transformację w CSS zastosujemy, aby tylko pierwsze litery wszystkich słów stały się wielkie?

A. uppercase

B. capitalize

C. underline

D. lowercase

Odpowiedź 'capitalize' jest prawidłowa, ponieważ w CSS odnosi się do właściwości text-transform, która umożliwia manipulację sposobem wyświetlania tekstu. Użycie 'capitalize' powoduje, że pierwsza litera każdego wyrazu w danym elemencie HTML zostaje zmieniona na wielką literę. Na przykład, jeśli mamy tekst "przykład tekstu", zastosowanie 'text-transform: capitalize;' przekształci go na "Przykład Tekstu". Jest to szczególnie przydatne w tworzeniu estetycznych nagłówków lub list, gdzie chcemy, aby każde słowo zaczynało się od wielkiej litery. W kontekście dobrych praktyk, używanie transformacji tekstu powinno być zgodne z zasadami dostępności, aby nie wpłynęło negatywnie na odczyt tekstu przez technologie wspomagające. Warto także pamiętać, że 'capitalize' działa na każdy wyraz, co czyni go bardziej elastycznym w kontekście stylizacji niż inne opcje, takie jak 'uppercase', które zmieniają wszystkie litery na duże, co mogłoby zniekształcić zamierzony przekaz tekstowy.

Pytanie 26

Przy konwersji obrazu o 8 bitowej głębi kolorów na 4 bitową, liczba dostępnych kolorów zmniejszy się o

A. 24

B. 256

C. 16

D. 240

Wszystkie odpowiedzi, które nie są poprawne, wynikają z nieprawidłowych obliczeń związanych z ilością dostępnych kolorów w różnych głębokościach bitowych. W przypadku odpowiedzi wskazujących na 16, 24 i 256 kolorów, każda z tych wartości nie odzwierciedla rzeczywistych możliwości kolorystycznych wynikających z konwersji. 16 kolorów to dokładna liczba dostępna w 4-bitowym formacie, ale nie jest to wartość, o którą zmniejsza się liczba kolorów, a to właśnie ona jest końcową liczbą kolorów w 4-bitowym obrazie. 24 kolory nie mają sensu w kontekście 8-bitowego obrazu, ponieważ 24 kolory sugerowałyby, że redukujemy z 8-bitowego obrazu do jeszcze niższego poziomu, co jest niepoprawne. Mówiąc o 256 kolorach, to liczba ta odnosi się do początkowej ilości kolorów w obrazie 8-bitowym, a nie do liczby kolorów, które zostają po konwersji. Dla pełnego zrozumienia, warto zaznaczyć, że każdy poziom głębi kolorów w obrazach rastrowych określa liczbę kolorów, które mogą być wyświetlane i przetwarzane, a konwersja pomiędzy nimi wymaga precyzyjnych obliczeń, które uwzględniają te wartości.

Pytanie 27

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

background: linear-gradient(to right, LightBlue, DarkBlue);

A. Blok 3

B. Blok 2

C. Blok 4

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 28

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

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

A. nie odnaleziono pliku kwiat.jpg

B. wprowadzono nieznany atrybut alt

C. nie zamknięto cudzysłowu

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

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

Pytanie 29

W języku HTML stworzono odnośnik z symbolem #. Co się wydarzy po kliknięciu na podany link?

A. Strona przewinie się do elementu z id o nazwie dane

B. Otworzy się nowa karta przeglądarki zatytułowana dane

C. Zostanie użyty względny adres URL o nazwie dane

D. Uruchomi się skrypt o nazwie dane

Pierwsza z niepoprawnych odpowiedzi sugeruje, że po kliknięciu w odsyłacz zostanie wywołany skrypt o nazwie 'dane'. To podejście jest nieprawidłowe, ponieważ odsyłacz w HTML ze znakiem # nie wywołuje żadnych skryptów. Hiperłącza z # są używane wyłącznie do nawigacji po stronie i nie mają związku z uruchamianiem skryptów. Druga odpowiedź wskazuje, że otworzy się osobna karta przeglądarki o nazwie 'dane', co również jest błędne. Hiperłącza zaczynające się od # nie prowadzą do nowych kart ani okien; zamiast tego zmieniają lokalizację w bieżącej karcie przeglądarki. Kolejna z niepoprawnych koncepcji sugeruje, że zostanie wybrany adres względny URL o nazwie 'dane'. Jednakże wykorzystanie # odnosi się do lokalizacji na tej samej stronie, a nie do adresów względnych. Warto zrozumieć, że adresy względne są używane do nawigacji pomiędzy różnymi stronami, a nie do lokalizacji na tej samej stronie. Typowym błędem myślowym w takich przypadkach jest mylenie funkcji hiperłączy z różnymi innymi mechanizmami, takimi jak skrypty, nowe karty czy adresy względne. Zrozumienie tych różnic jest kluczowe dla skutecznego projektowania stron internetowych oraz optymalizacji ich nawigacji.

Pytanie 30

W znaczniku meta w miejsce kropek należy wpisać

<meta name="description" content="…">

A. język dokumentu.

B. informację o dostosowaniu do urządzeń mobilnych.

C. nazwę edytora.

D. streszczenie treści strony.

W meta tagu, w polu 'content' powinno być streszczenie tego, co jest na stronie. To bardzo ważne dla SEO, czyli optymalizacji strony pod kątem wyszukiwarek. Taki opis pojawia się w wynikach wyszukiwania, co wpływa na to, jak użytkownicy postrzegają stronę i czy klikną w link. Fajnie by było, gdyby był krótki, zrozumiały i zawierał ważne słowa kluczowe dotyczące tematu strony. Na przykład, jeśli strona jest o zdrowym jedzeniu, można napisać coś w stylu: 'Poradnik zdrowego odżywiania z przepisami i wskazówkami na lepszy styl życia'. Użycie tych znaczników meta zgodnie z zaleceniami Google i innych wyszukiwarek zwiększa szansę, że strona będzie lepiej widoczna w sieci. Dlatego dobrze, żeby używać tego znacznika w odpowiedni sposób, bo to naprawdę pomaga w poprawie widoczności strony w internecie.

Pytanie 31

Deklaracja z właściwością background-attachment: scroll sprawia, że

A. grafika tła będzie się powtarzać (kafelki)

B. tło strony będzie przesuwane razem z zawartością tekstową

C. tło strony zostanie zamocowane, a tekst będzie się poruszał

D. grafika tła będzie widoczna w prawym górnym rogu strony

Pierwsza niepoprawna odpowiedź sugeruje, że grafika tła będzie powtarzana, co właściwie jest realizowane przez inne ustawienie CSS, takie jak 'background-repeat'. Użycie 'background-attachment: scroll' nie wpływa bezpośrednio na powtarzanie tła, a jedynie na jego zachowanie podczas przewijania strony. Druga niepoprawna odpowiedź odnosi się do stałości tła, co jest sprzeczne z definicją 'scroll'. Właściwość 'fixed' zablokowałaby tło w jednym miejscu, co oznacza, że nie przesuwałoby się ono z zawartością, co jest przeciwieństwem tego, co oferuje 'scroll'. Ostatnia niepoprawna odpowiedź sugeruje, że grafika tła będzie wyświetlona w prawym górnym rogu strony. Tło w CSS nie ma przypisanego miejsca w ten sposób; jego pozycjonowanie reguluje się za pomocą 'background-position'. 'background-attachment: scroll' nie definiuje ani nie wpływa na położenie tła, a jedynie na to, jak się zachowuje podczas przewijania. W związku z tym wszystkie te odpowiedzi są niepoprawne, ponieważ mylą różne aspekty właściwości CSS i ich funkcjonalność.

Pytanie 32

<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. może być puste.

B. nie powinno zawierać znaków numerycznych.

C. wymaga wpisania jedynie znaków alfanumerycznych.

D. nie może być puste i wymaga wpisania tekstu ze znakiem @.

Kod formularza, który został pokazany w pytaniu, wykorzystuje dwa mechanizmy walidacji wbudowane w HTML5: typ pola ustawiony na email oraz atrybut required. Jeśli się je dobrze rozumie, to łatwo odrzucić wszystkie błędne interpretacje. Spójrzmy na to bardziej od strony tego, co faktycznie robi przeglądarka. Pomysł, że pole może być puste, jest sprzeczny z działaniem atrybutu required. Ten atrybut wprost oznacza, że użytkownik musi coś wpisać. Jeżeli zostawi pole puste i kliknie przycisk „Zapisz”, przeglądarka zablokuje wysłanie formularza i wyświetli swój komunikat, np. „Wypełnij to pole”. To nie jest kwestia „dobrej praktyki”, tylko twardej reguły zapisanej w specyfikacji HTML. W praktyce to bardzo przydatne, bo od razu na froncie wymusza uzupełnienie danych. Stwierdzenie, że pole nie powinno zawierać znaków numerycznych, też jest błędne. Pole typu email dopuszcza cyfry, bo wiele poprawnych adresów e‑mail zawiera liczby, np. [email protected]. Przeglądarka nie ma żadnego zakazu cyfr w takim polu, patrzy tylko na ogólny format adresu. Nieprawidłowy jest też pogląd, że wymagane są „jedynie znaki alfanumeryczne”. Adres e‑mail zawiera zwykle kropki, znak @, czasem myślniki, podkreślenia i inne dopuszczalne znaki. Gdyby przeglądarka pozwalała tylko na litery i cyfry, większość realnych adresów zostałaby odrzucona. Walidacja typu email jest skoncentrowana na strukturze (część przed @, znak @, część po @), a nie na tak prymitywnym ograniczeniu jak „tylko litery i cyfry”. Typowy błąd myślowy przy takich pytaniach to mylenie różnych poziomów walidacji: jedni zakładają, że HTML w ogóle nie sprawdza formatu, inni z kolei wyobrażają sobie zbyt restrykcyjne reguły, które w praktyce by uniemożliwiły wpisanie normalnego adresu. Dobrym nawykiem jest patrzenie na to, co gwarantuje przeglądarka: w tym wypadku wymagane jest, żeby pole nie było puste (required) oraz żeby wpisany tekst przypominał adres e‑mail, czyli zawierał m.in. znak @ w odpowiednim miejscu. Wszystkie inne interpretacje wychodzą poza to, co naprawdę wynika z kodu formularza.

Pytanie 33

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

A. CSS

B. JavaScript

C. AJAX

D. PHP

CSS (Cascading Style Sheets) to język stylów, który służy do opisywania wyglądu i formatu dokumentów HTML. Jego głównym celem jest kontrolowanie układu, kolorów, czcionek oraz innych aspektów wizualnych strony internetowej. CSS nie ma możliwości przetwarzania danych wprowadzanych przez użytkowników, gdyż nie posiada funkcji logiki programistycznej ani operacji na danych. Przykładowo, CSS może zmieniać kolor tła lub rozmiar tekstu, ale nie może zbierać informacji z formularzy ani reagować na interakcje użytkownika w sposób, w jaki robią to języki programowania takie jak JavaScript czy PHP. Może to prowadzić do mylnych przekonań, że CSS jest bardziej wszechstronny, niż jest w rzeczywistości, jednak jego zastosowanie ogranicza się wyłącznie do aspektów stylistycznych. W praktyce, aby przetwarzać dane użytkownika, niezbędne są inne technologie, które mogą współpracować z CSS, ale same w sobie nie są w stanie tego zrobić.

Pytanie 34

Który z przedstawionych obrazów został przetworzony przy użyciu podanego stylu CSS?

A. Rys. C

B. Rys. D

C. Rys. B

D. Rys. A

Analizując inne odpowiedzi, możemy zidentyfikować kluczowe błędy wynikające z niezrozumienia bądź błędnej interpretacji właściwości CSS zastosowanych w stylu. Należy zwrócić uwagę na rozbieżności między oczekiwanym efektem a rzeczywistym wyglądem obrazów. W przypadku Rys. B, obraz nie posiada żadnego marginesu ani zaokrąglonych rogów, co świadczy o nieobecności zastosowanego stylu border-radius oraz padding. Ten brak zaokrąglenia sugeruje pominięcie istotnego aspektu estetycznego, jakim jest border-radius w CSS, który jest często używany do poprawienia odbioru wizualnego. Rys. C z kolei może mieć prawidłowy kolor obramowania, ale brak zaokrąglonych rogów również sygnalizuje, że styl nie został w pełni zastosowany zgodnie z założeniami CSS. Natomiast Rys. D wykazuje zastosowanie obramowania przerywanego, co wskazuje na nieodpowiednie użycie właściwości border-style, która w zadaniu powinna być ustawiona na solid. To błędne użycie stylu obramowania pokazuje złą interpretację specyfikacji CSS, gdzie ciągła linia jest wymagana. Podsumowując, wybór innej niż Rys. A odpowiedzi wskazuje na pominięcie kluczowych cech stylu CSS, takich jak padding i border-radius, które są istotne dla poprawnego renderowania wizualnego elementów interfejsu w zgodności z projektowymi standardami i praktykami branżowymi.

Pytanie 35

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,5 : 1

D. 2,0 : 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 36

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

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

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

A. Do trzech.

B. Do żadnego.

C. Do dwóch.

D. Do wszystkich.

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

Pytanie 37

W edytorze grafiki wektorowej zbudowano kształt, który składa się z dwóch figur: trójkąta oraz koła. Aby uzyskać ten kształt, po narysowaniu figur i ich odpowiednim ustawieniu, trzeba użyć funkcji

A. różnicy

B. sumy

C. wykluczenia

D. rozdzielenia

Funkcja sumy w programach do grafiki wektorowej, takich jak Adobe Illustrator czy CorelDRAW, pozwala na połączenie dwóch lub więcej kształtów w jeden obiekt. To takie sprytne narzędzie! Sumowanie, znane też jako unia lub łączenie ścieżek, integruje geometrię wszystkich wybranych kształtów. Na przykład, jak narysujesz trójkąt i koło, a potem je odpowiednio ustawisz, to używając funkcji sumy, stworzysz nowy kształt, który obejmuje całą powierzchnię obu figur. Często to robi się przy projektowaniu logo, gdzie trzeba uprościć złożone kształty do jednej ścieżki. Taki sposób działania jest przyjęty w branży, bo ułatwia tworzenie czytelnych grafik, które są łatwe do edytowania. A co najważniejsze, połączenie figur w jedną upraszcza późniejsze zmiany i wpisuje się w zasady projektowania minimalistycznego, dzięki czemu można robić przejrzyste kompozycje. Warto mieć na uwadze, że takie podejście też ułatwia drukowanie i wycinanie, co jest mega ważne w produkcji materiałów reklamowych czy wyrobów przemysłowych.

Pytanie 38

W CSS zapisany w ten sposób:

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

spowoduje, że rysunek.png stanie się

A. widoczny obok każdego akapitu

B. tłem całej witryny

C. tłem każdego akapitu

D. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

W przypadku stylowania elementów za pomocą CSS, bardzo łatwo popełnić błąd interpretacyjny, jeśli nie zna się szczegółów działania selektorów czy właściwości stylów. Zapis p { background-image: url("rysunek.png"); } dotyczy wyłącznie elementów , czyli akapitów, a nie całej witryny. Popularnym nieporozumieniem jest myślenie, że taka reguła zmieni tło całej strony — w rzeczywistości, aby osiągnąć taki efekt, należałoby użyć selektora body, np. body { background-image: ... }, bo to body odpowiada za tło całego dokumentu. Jeśli ktoś zakłada, że obrazek pojawi się tylko wtedy, gdy w HTML użyjemy <img src="rysunek.png">, to miesza dwie zupełnie osobne koncepcje: background-image ustawia grafikę w tle elementu, a <img> osadza ją w strukturze treści jako samodzielny obiekt — to dwie różne rzeczy. Sam background-image nie potrzebuje obecności znacznika <img>; przeglądarka pobierze i wyświetli grafikę tylko jako tło elementu. Natomiast odpowiedź sugerująca, że obrazek będzie widoczny obok każdego akapitu, wynika chyba z niezrozumienia mechanizmu renderowania tła: CSS nie wstawia obrazka "obok" treści, tylko pod nią, w tle elementu, wypełniając całą jego powierzchnię (lub jej fragment w zależności od innych właściwości tła, np. background-repeat czy background-position). To często mylone z dekoracjami typu list-style-image w listach, gdzie obrazek rzeczywiście pojawia się obok tekstu listy. Warto zawsze czytać dokumentację i testować takie rzeczy samodzielnie — praktyka bardzo pomaga zrozumieć niuanse w CSS. Przemyślenie działania selektorów i właściwości to podstawa unikania takich nieporozumień podczas projektowania layoutów.

Pytanie 39

Przedstawiony styl generuje pojedyncze obramowanie, które posiada następujące właściwości:

border: solid 1px;
 border-color: red blue green yellow;

A. krawędź lewa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź prawa w odcieniu zielonym, krawędź górna w kolorze żółtym

B. krawędź prawa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź lewa w odcieniu zielonym, krawędź górna w kolorze żółtym

C. krawędź górna ma kolor czerwony, krawędź lewa w kolorze niebieskim, krawędź dolna w odcieniu zielonym, krawędź prawa w kolorze żółtym

D. krawędź górna jest koloru czerwonego, krawędź prawa koloru niebieskiego, krawędź dolna koloru zielonego, krawędź lewa koloru żółtego

Prawidłowa odpowiedź wynika z użycia właściwości CSS border-color z czterema wartościami przypisanymi kolejno do górnej prawej dolnej i lewej krawędzi elementu. W tym przypadku border-color: red blue green yellow; przypisuje kolor czerwony do górnej krawędzi kolor niebieski do prawej zielony do dolnej i żółty do lewej. Jest to powszechna praktyka w stylizacji stron internetowych gdzie cztery wartości podane dla border-color definiują odpowiednio kolory górnej prawej dolnej i lewej krawędzi. Taki styl umożliwia projektantom tworzenie wizualnie interesujących i wyróżniających się elementów poprzez łatwe manipulowanie kolorami i szerokościami obramowań. Zastosowanie tego w praktyce może być wykorzystane do zaznaczenia ważnych sekcji strony lub wyróżnienia określonych elementów. Tego rodzaju technika stylizacji jest zgodna z dobrymi praktykami i standardami CSS co pozwala na uzyskanie estetycznego i funkcjonalnego interfejsu użytkownika. Wiedza o przypisaniu kolorów do poszczególnych krawędzi jest kluczowa w projektowaniu elastycznych i responsywnych układów stron.

Pytanie 40

W przedstawionej regule CSS: h1 {color: blue} h1 symbolizuje

A. wartość

B. deklarację

C. selektor

D. klasę

W podanej regule CSS, h1 {color: blue}, h1 jest selektorem, który identyfikuje elementy HTML, na które ma być zastosowany styl. Selektory są kluczowym elementem w CSS, ponieważ pozwalają na precyzyjne określenie, do których elementów stosować dane style. W tym przypadku h1 wskazuje na wszystkie nagłówki pierwszego poziomu w dokumentach HTML. Używając selektora h1, możemy na przykład zmienić kolor wszystkich tytułów na niebieski, co jest istotne dla poprawy estetyki i czytelności strony. Dobrą praktyką jest stosowanie odpowiednich selektorów, aby unikać niepotrzebnej redundancji w kodzie, co przyczynia się do lepszej wydajności ładowania strony. Zrozumienie selektorów CSS jest niezbędne do efektywnego stylizowania stron internetowych i jest zgodne z najlepszymi standardami w branży, takimi jak W3C. Na przykład, możemy również używać selektorów klas lub identyfikatorów, aby stosować różne style do konkretnych elementów, co pozwala na większą elastyczność i kontrolę nad wyglądem strony.

Rozpocznij nowy egzamin

Powrót do strony głównej