Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 czerwca 2026 09:54
Data zakończenia: 8 czerwca 2026 10:26

Egzamin niezdany

Wynik: 17/40 punktów (42,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Głównym celem systemu CMS jest oddzielenie treści serwisu informacyjnego od jego wizualnej formy. Ten efekt osiągany jest przez generowanie zawartości

A. z bazy danych oraz wizualizacji poprzez atrybuty HTML

B. z bazy danych oraz wyglądu ze zdefiniowanego szablonu

C. z plików HTML o stałej zawartości oraz wizualizacji z użyciem ustalonego szablonu

D. z plików HTML o stałej zawartości oraz wizualizacji przy pomocy technologii FLASH

Wybór odpowiedzi, która sugeruje wykorzystanie ze statycznych plików HTML, jest w istocie niezgodny z ideą systemów CMS. stosowanie statycznych plików HTML oznacza, że każda zmiana treści serwisu wymagałaby ręcznej edycji plików, co jest czasochłonne i podatne na błędy. Takie podejście ogranicza elastyczność i możliwość szybkiej aktualizacji treści. Z kolei odpowiedzi wskazujące na wykorzystanie technologii FLASH są przestarzałe, ponieważ Flash nie jest już wspierany przez większość nowoczesnych przeglądarek i nie spełnia wymogów dostępności, co stawia pod znakiem zapytania jego użyteczność w kontekście nowoczesnych stron internetowych. Ponadto, odpowiedzi sugerujące wykorzystanie atrybutów HTML do definiowania wyglądu również są niewłaściwe, ponieważ atrybuty HTML nie są wystarczające do efektywnego kształtowania i zarządzania stylem aplikacji. W praktyce do definiowania wyglądu stosuje się arkusze stylów CSS, a nie tylko atrybuty. W konsekwencji, błędne koncepcje opierające się na statycznych plikach czy przestarzałych technologiach prowadzą do sytuacji, w której serwis staje się trudny w utrzymaniu i mało elastyczny, co jest sprzeczne z głównymi zaletami systemów zarządzania treścią.

Pytanie 2

Który format najlepiej nadaje się do zapisu RASTROWEGO obrazu z przezroczystością na stronę WWW?

A. SVG

B. JPG

C. BMP

D. PNG

Pozostałe formaty nie pasują. JPG nie obsługuje przezroczystości i kompresuje stratnie. BMP jest nieskompresowany i bez kanału alfa. SVG owszem obsługuje przezroczystość, ale to format WEKTOROWY, a pytanie dotyczy obrazu RASTROWEGO. Rastrowa grafika z przezroczystością na web to PNG.

Pytanie 3

Kaskadowe arkusze stylów są tworzone w celu

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

B. nadpisywania wartości znaczników, które już funkcjonują na stronie

C. połączenia struktury dokumentu strony z odpowiednią formą jego wyświetlania

D. ułatwienia formatowania strony

Kaskadowe arkusze stylów (CSS) są kluczowym narzędziem w tworzeniu i zarządzaniu wyglądem stron internetowych. Głównym celem CSS jest ułatwienie formatowania strony, co oznacza, że pozwala to deweloperom na oddzielenie treści od prezentacji. Dzięki zastosowaniu CSS, programiści mogą stosować style do wielu elementów jednocześnie, co znacząco przyspiesza proces tworzenia stron. Na przykład, zamiast dodawać atrybuty stylów bezpośrednio do każdego znacznika HTML, można zdefiniować klasy i identyfikatory w arkuszu stylów, co czyni kod bardziej zorganizowanym i łatwiejszym w utrzymaniu. Dodatkowo, CSS umożliwia stosowanie reguł kaskadowych, co oznacza, że style mogą być dziedziczone, a ich kolejność może wpływać na sposób ich zastosowania. Odwołując się do standardów, CSS jest definiowany przez W3C, co zapewnia jego uniwersalność i możliwość szerokiego użycia w różnych przeglądarkach oraz na różnych urządzeniach. Przykładami z praktyki mogą być zmiana koloru tekstu, rozmiaru czcionki czy rozmieszczenia elementów, co jest realizowane w prosty sposób poprzez zmiany w CSS, zamiast modyfikacji samego HTML.

Pytanie 4

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

A. Odpowiedź B

B. Odpowiedź A

C. Odpowiedź D

D. Odpowiedź C

Paragraf oznaczony jako C został poprawnie sformatowany według przedstawionego stylu CSS. Styl ten określa kilka kluczowych właściwości: padding na poziomie 20 pikseli, kolor tekstu jako niebieski, pogrubienie tekstu ustawione na 900 oraz obramowanie o grubości 1 piksela z pełną linią. Padding określa wewnętrzne wcięcie, które wpływa na zwiększenie odległości między tekstem a krawędzią kontenera, co widać w odpowiedzi C jako przestrzeń wokół tekstu. Kolor tekstu zmienia się na niebieski, co również jest zgodne z wyglądem tej odpowiedzi. Font-weight ustawiony na 900 oznacza, że tekst powinien być wyraźnie pogrubiony, co jest zauważalne w porównaniu do innych opcji. Obramowanie wokół tekstu jest delikatne, ale widoczne, co odpowiada deklaracji border: 1px solid. Te właściwości są zgodne z powszechnymi praktykami projektowania stron internetowych, gdzie czytelność i estetyka odgrywają kluczową rolę. Praktyczne zastosowanie takich reguł CSS można znaleźć w projektowaniu intuicyjnych interfejsów użytkownika, gdzie spójność stylów ułatwia nawigację.

Pytanie 5

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu:

<STYLE type="text/css">
<!--
   P {color:blue; font-size:14pt; font-style:italic;}
   A {font-size:16pt; text-transform:lowercase;}
   TD.niebieski {color:blue}
   TD.czerwony {color:red}
-->
</STYLE>

A. Akapit będzie przekształcany na małe litery

B. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów

C. Jest to styl zasięg lokalny

D. Zdefiniowano dwie klasy

W tym kodzie CSS masz zdefiniowane dwie klasy: 'niebieski' i 'czerwony', które są przypisane do elementów TD. To super, bo te klasy zmieniają kolor tekstu w tabeli, a to jest zgodne z tym, jak działają kaskadowe arkusze stylów (CSS). Klasa 'niebieski' ustawia tekst na niebiesko, a 'czerwony' na czerwono. Dzięki takim klasom można zaoszczędzić sporo czasu, bo używasz tych samych stylów w różnych miejscach w HTML. Widać, że pomyślałeś o organizacji swojego kodu. Dodatkowo, masz też style dla elementów P i A — P jest niebieski i ma czcionkę 14 punktów w kursywie, a A ma większą 16-punktową czcionkę. To pokazuje, jak elastyczne jest CSS w stylizacji różnych elementów. Fajnie, że trzymasz się dobrych praktyk w programowaniu, bo to naprawdę ułatwia późniejsze modyfikacje.

Pytanie 6

Na stronie internetowej zdefiniowano styl, który ma być stosowany tylko do określonych znaczników (takich jak niektóre nagłówki i wybrane akapity). W takim kontekście, aby przypisać styl do konkretnych elementów, najlepiej jest użyć

{ text-align: right; }

A. identyfikatora

B. pseudoklasy

C. klasy

D. seletora akapitu

Użycie selektora akapitu nie jest odpowiednie w sytuacji gdy chcemy przypisać styl tylko do niektórych znaczników tego typu ponieważ selektory takie jak p stylizują wszystkie elementy danego typu na stronie bez rozróżnienia Jeżeli chcemy stylizować tylko określone akapity musielibyśmy użyć klas lub identyfikatorów Identyfikator z kolei charakteryzuje się tym że powinien być unikalny dla każdego elementu na stronie Stosowanie identyfikatora do stylizowania grupy elementów naruszałoby zasadę unikalności co może prowadzić do problemów z walidacją HTML oraz trudności w przyszłej modyfikacji kodu Pseudoklasy są używane do stylizowania elementów w konkretnych stanach takich jak hover focus czy active i nie nadają się do przypisywania ogólnych stylów do grupy elementów Ich głównym przeznaczeniem jest reagowanie na interakcje użytkownika a nie stylizacja stała W kontekście pytania najlepszym podejściem jest użycie klas które pozwalają na przypisanie stylów dokładnie tam gdzie są potrzebne bez konieczności nadmiernego komplikowania kodu i naruszania dobrych praktyk Kod staje się bardziej elastyczny i łatwiejszy w zarządzaniu co jest kluczowe dla długoterminowego utrzymania projektu Krótko mówiąc klasy oferują najskuteczniejszy sposób na przypisanie stylu do określonych grup elementów zapewniając przy tym zgodność ze standardami i najlepsze praktyki w tworzeniu stron internetowych

Pytanie 7

W HTML wprowadzono tag a. Co oznacza wartość nofollow w atrybucie rel?

<a href="http://website.com" rel="nofollow">link</a>

A. oznacza, że naciśnięcie na link spowoduje jego otwarcie w nowej karcie przeglądarki

B. jest komunikatem dla robota wyszukiwarki Google, by nie śledził tego linku

C. oznacza, że kliknięcie na link nie przekieruje do strony website.com

D. jest wskazówką dla przeglądarki internetowej, aby nie interpretowała słowa 'link' jako hiperłącza

Atrybut nofollow w linkach jest bardzo ważny dla tego, jak wyszukiwarki podchodzą do linków na stronach. Wprowadzenie go miało na celu ograniczenie spamu w komentarzach i w miejscach, gdzie autorzy stron nie chcieli, żeby te linki były traktowane jako polecenia. Gdy Google napotyka link z nofollow, to nie przekaże PageRank do strony, do której prowadzi. W praktyce oznacza to, że taki link nie pomoże w pozycjonowaniu tej docelowej strony. To jest super przydatne dla adminów, szczególnie przy linkach w komentarzach czy reklamach, gdzie nie zawsze można sprawdzić jakość tych linków. Dobrze jest stosować nofollow, kiedy link pojawia się automatycznie lub gdy nie jesteśmy pewni jego wartości merytorycznej.

Pytanie 8

Grafik pragnie zmienić obraz JPG na format PNG bez utraty jakości, tak aby w obszarach, gdzie pierwotnie był kolor biały, w finalnym obrazie występowała przezroczystość. W tym celu powinien

A. zmniejszyć rozdzielczość obrazu

B. dodać kanał alfa

C. zaimportować obraz do edytora grafiki wektorowej

D. przekształcić obraz w odcienie szarości

Zarówno zmniejszenie rozdzielczości obrazu, jak i przekształcenie go w odcienie szarości są podejściami, które nie spełniają wymagań postawionych w pytaniu. Zmniejszenie rozdzielczości oznacza, że zmniejszamy liczbę pikseli w obrazie, co skutkuje utratą detali i jakości, co jest zupełnie niezgodne z celem przekształcenia bez utraty jakości. Takie działanie nie ma również związku z dodawaniem przezroczystości, a może wręcz pogorszyć wizualną jakość końcowego obrazu. Ponadto, konwersja obrazu do odcieni szarości eliminuje wszystkie kolory, co sprawia, że problem z białym kolorem, który ma zostać przekształcony w przezroczystość, staje się bezprzedmiotowy. Importowanie obrazu do edytora grafiki wektorowej, chociaż może być użyteczne w niektórych przypadkach, nie jest odpowiednim narzędziem do przekształcania bitmapy z JPG na PNG z przezroczystością. Grafika wektorowa jest oparta na matematycznych formułach, a nie na pikselach, więc nie można w prosty sposób przenieść bitmapowych właściwości obrazu. Podejścia te mogą prowadzić do błędnych wniosków, w których użytkownicy mogą sadzić, że redukcja jakości i przekształcanie kolorów są wystarczającymi krokami do osiągnięcia zamierzonych efektów graficznych.

Pytanie 9

Które kolory tła zostały przypisane odpowiednio do akapitów o identyfikatorach 1, 2, 3, 4?

<p id="1" style="background-color:rgb(128,128,128);"> Akapit 1</p>
<p id="2" style="background-color:rgb(255,255,0);"> Akapit 2</p>
<p id="3" style="background-color:rgb(0,128,0);"> Akapit 3</p>
<p id="4" style="background-color:rgb(0,0,255);"> Akapit 4</p>

A. Szary, niebieski, czerwony, żółty.

B. Szary, żółty, zielony, niebieski.

C. Żółty, zielony, czerwony, szary.

D. Żółty, czerwony, zielony, szary.

W tym zadaniu kluczowe jest poprawne odczytanie notacji RGB używanej w CSS, a nie zgadywanie koloru „na oko”. Model RGB opisuje kolor jako kombinację trzech składowych: czerwonej (R), zielonej (G) i niebieskiej (B), każda w zakresie od 0 do 255. Typowym błędem jest patrzenie tylko na jedną liczbę albo kojarzenie samej obecności składowej czerwonej z kolorem czerwonym, bez uwzględniania pozostałych kanałów. Na przykład zapis rgb(128,128,128) ma wszystkie trzy składowe jednakowe, więc nie może wyjść czysta czerwień, zieleń czy niebieski – zawsze otrzymamy jakiś odcień szarości. Jeżeli ktoś odczyta ten kolor jako żółty lub czerwony, to zwykle wynika to z braku nawyku analizowania wszystkich trzech wartości naraz. Podobnie rgb(255,255,0) często bywa mylone z czerwonym, bo widać tam 255 przy pierwszej składowej, ale kluczowe jest to, że druga też ma 255, a trzecia ma 0. Połączenie maksymalnej czerwieni i maksymalnej zieleni daje właśnie żółty, nie czerwony. Warto zapamiętać ten przykład, bo często pojawia się w zadaniach i w realnym CSS. Z kolei rgb(0,128,0) to wyłącznie składowa zielona o średniej intensywności, więc nie może to być ani żółty (brak czerwonego), ani szary (brak równych wartości we wszystkich kanałach). To po prostu ciemniejsza zieleń. Ostatni zapis rgb(0,0,255) jest chyba najprostszy: tylko kanał niebieski jest maksymalny, więc wynik to czysty niebieski. Pomieszanie tych kolorów w odpowiedziach zwykle wynika z intuicyjnego kojarzenia liczb bez zrozumienia, jak działa mieszanie barw w RGB. W pracy front-endowca dobrze jest wyrobić sobie nawyk czytania rgb() systematycznie: najpierw R, potem G, potem B, i analizowania, które kanały są wysokie, które niskie. To bardzo ułatwia zarówno debugowanie CSS, jak i świadome dobieranie kolorystyki interfejsu.

Pytanie 10

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

A. CSS

B. AJAX

C. JavaScript

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 11

Które stwierdzenie jest poprawne w odniesieniu do grafiki rastrowej?

A. obraz opisany jest figurami geometrycznymi w układzie współrzędnych

B. podczas skalowania obraz nie traci na jakości

C. to obraz przedstawiony jako siatka odpowiednio kolorowanych pikseli

D. nie jest zapisywana w formacie WMF

Pozostałe zdania są fałszywe lub dotyczą grafiki WEKTOROWEJ. Przy skalowaniu rastrowy obraz TRACI jakość (piksele się powiększają). Opis figurami geometrycznymi w układzie współrzędnych to cecha grafiki wektorowej. WMF to format wektorowy. Grafikę rastrową opisuje siatka kolorowanych pikseli.

Pytanie 12

CAPTCHA to technika zabezpieczeń stosowana na stronach WWW, która pozwala:

A. pominąć proces uwierzytelniania w aplikacji

B. automatycznie wypełnić formularz danymi użytkownika

C. potwierdzić, że dane z formularza wysyła człowiek, a nie program

D. przyspieszyć logowanie do aplikacji internetowej

CAPTCHA to test, który ma odróżnić człowieka od programu (bota) - np. przepisanie zniekształconego tekstu, wskazanie obrazków czy proste zadanie. Stosuje się ją w formularzach (rejestracja, komentarze, logowanie), by utrudnić masowe, automatyczne wysyłanie danych przez boty i spam. Dlatego CAPTCHA potwierdza, że dane z formularza wysyła człowiek.

Pytanie 13

W regule CSS h1 { color: blue } czym jest h1?

A. deklaracją

B. wartością

C. klasą

D. selektorem

Trzeba odróżnić części reguły CSS. To, co w klamrach (np. color: blue), to DEKLARACJA, złożona z właściwości (color) i WARTOŚCI (blue). Klasa zaczyna się od kropki. Element wskazujący cel reguły to selektor, więc h1 jest selektorem.

Pytanie 14

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

A. multiple

B. value

C. disabled

D. size

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

Pytanie 15

Który atrybut pola <input> ogranicza maksymalną liczbę znaków, jaką można w nim wpisać?

A. value

B. name

C. readonly

D. maxlength

Atrybut maxlength ogranicza maksymalną liczbę znaków, jaką użytkownik może wpisać w pole tekstowe, np. <input type="text" maxlength="10"> pozwoli wprowadzić najwyżej 10 znaków. Przydaje się przy polach o ustalonej długości, takich jak kod pocztowy czy PESEL. Dlatego limit znaków ustala maxlength.

Pytanie 16

W ramce przedstawiono właściwości pliku graficznego:

Wymiary:	4272 x 2848px
Rozdzielczość:	72 dpi
Format:	JPG

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

A. zmniejszyć wymiary rysunku.

B. zmienić proporcje szerokości do wysokości.

C. zwiększyć rozdzielczość.

D. zmienić format grafiki na CDR.

Wybór niepoprawnej odpowiedzi wskazuje na nieporozumienie dotyczące optymalizacji czasu ładowania obrazów na stronie WWW. Zmiana formatu grafiki na CDR, zwiększenie rozdzielczości oraz zmiana proporcji szerokości do wysokości nie prowadzą do optymalizacji czasu ładowania. Format CDR jest specyficznym formatem firmy Corel i nie jest standardowo używany do obrazów internetowych. Zwiększenie rozdzielczości zwiększyłoby rozmiar pliku i tym samym spowolniłoby ładowanie strony, co jest przeciwne do zamierzonego celu. Zmiana proporcji obrazu może zmienić jego wygląd, ale nie wpłynie znacząco na rozmiar pliku. Optymalizacja czasu ładowania obrazów na stronę WWW jest najczęściej osiągana przez zmniejszenie ich wymiarów, co skutkuje zmniejszeniem rozmiaru pliku.

Pytanie 17

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. B

B. C

C. D

D. A

Formatowanie znacznika h1, określone w podanym kodzie CSS, wprowadza kilka charakterystycznych cech stylistycznych. Przede wszystkim, zastosowanie 'font-style: oblique;' zmienia wygląd tekstu, nadając mu ukośny styl. To oznacza, że tekst będzie wyświetlany w wyraźnie przechylonej formie, co jest często używane do podkreślenia ważnych elementów. Dodatkowo, 'font-variant: small-caps;' odpowiedzialne jest za przekształcenie małych liter w małe kapitałki, co nadaje tekstowi elegancki i formalny wygląd. Taki zabieg jest często wykorzystywany w tytułach lub nagłówkach, aby wyróżnić je wśród pozostałego tekstu. Ostatni element, 'text-align: right;', wyrównuje tekst do prawej krawędzi kontenera, co jest mniej powszechnie stosowane w porównaniu do wyrównania do lewej lub wyśrodkowanego, ale może być użyteczne w specyficznych układach strony. W przypadku, gdyby były dodatkowe style CSS przypisane do tego znacznika, mogłyby one wpłynąć na ostateczny wygląd, jednak w tym przypadku zakładamy, że są to jedyne zastosowane style. Standardy CSS jasno określają, jak różne właściwości mogą być używane do stylizacji elementów HTML, co czyni je niezwykle potężnym narzędziem w tworzeniu estetycznych i funkcjonalnych stron internetowych.

Pytanie 18

Walidator HTML5 zgłosił: „Error: Element head is missing a required instance of child element title”. Co to oznacza?

A. że w <head> nie zdefiniowano elementu <title>

B. że brakuje atrybutu title w <img>

C. że element <title> nie jest wymagany

D. że <title> nie został zamknięty </title>

Pozostałe interpretacje są błędne. Komunikat nie mówi, że <title> jest zbędny - przeciwnie, że jest WYMAGANY. Nie chodzi też o niezamknięty </title> ani o atrybut title w <img>. Błąd oznacza brak elementu <title> w <head>.

Pytanie 19

<img src="/rysunek.png" alt="pejzaż"> Zapisany został kod HTML, który wstawia obrazek na stronę. Jeśli rysunek.png nie zostanie znaleziony, przeglądarka

A. wyświetli w miejscu grafiki tekst "pejzaż"

B. w miejscu grafiki zasygnalizuje błąd wyświetlania strony

C. nie załaduje strony internetowej

D. w miejscu grafiki pokaże tekst "rysunek.png"

Kiedy przeglądarka internetowa napotyka na kod HTML, który zawiera element graficzny, w takim przypadku, jeśli wskazany plik nie jest dostępny, następuje zachowanie określone przez atrybut 'alt'. W omawianym przykładzie, gdy przeglądarka nie może znaleźć pliku 'rysunek.png', wyświetli tekst alternatywny 'pejzaż'. Atrybut 'alt' jest niezwykle ważny z perspektywy dostępności oraz SEO, ponieważ pozwala na dostarczenie informacji o obrazie osobom, które nie mogą go zobaczyć, takim jak osoby niewidome korzystające z czytników ekranu. Z punktu widzenia standardów W3C, atrybut 'alt' jest zalecany dla każdego elementu <img>, aby poprawić użyteczność strony. W praktyce, dobrze skonstruowane opisy w atrybucie 'alt' mogą również wpłynąć pozytywnie na pozycjonowanie witryny w wyszukiwarkach, co czyni go kluczowym elementem podczas tworzenia treści na stronie internetowej. Z tego powodu umieszczanie informacyjnych i zrozumiałych opisów w tym atrybucie jest niezbędne nie tylko dla poprawy dostępności, ale także dla efektywnej optymalizacji SEO.

Pytanie 20

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML:

<meta charset="styl.css">

<option value="styl.css" type="text/css">

<div id="styl.css" relation="css">

<link rel="stylesheet" type="text/css" href="styl.css">

Poprawny jest znacznik <link rel="stylesheet" type="text/css" href="styl.css">. Zewnętrzny arkusz stylów to osobny plik .css, który dołączasz do strony w sekcji <head> dokumentu HTML właśnie znacznikiem <link>. Atrybut rel="stylesheet" mówi przeglądarce, że powiązany plik to arkusz stylów, href wskazuje jego ścieżkę, a type="text/css" (opcjonalny w HTML5) określa typ zawartości. Taki sposób dołączania CSS oddziela wygląd od treści i pozwala użyć jednego arkusza na wielu podstronach.

Pytanie 21

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

var a = 5;
var b = a--;
a *= 3;
document.write(a + "," + b);

A. 12,4

B. 15,4

C. 15,5

D. 12,5

W tym skrypcie JavaScript mamy operator dekrementacji a--, gdzie najpierw wartość zmiennej a jest przypisana do zmiennej b, a dekrementacja następuje później. Jeśli tego nie rozumiesz, może to prowadzić do różnych nieporozumień co do wynikowych wartości. Czyli po a-- b przyjmuje pierwotną wartość a, która wynosi 5. Warto zrozumieć kolejność operacji, bo przy operatorze postfix zmiana wartości następuje po przypisaniu. Później, po dekrementacji, a staje się 4, co czasem jest źle interpretowane, bo ludzie myślą, że b też by się zmieniło. Potem jest a *= 3, gdzie 4 mnożymy przez 3 i dostajemy 12. Często ludzie popełniają błąd, zakładając, że operatory działają równocześnie w jednym wierszu kodu. Ważne jest, żeby znać te subtelności, bo pomaga to w lepszym programowaniu i kontrolowaniu, jak zmienne się zmieniają.

Pytanie 22

Wskaż fragment kodu CSS, który odpowiada układowi bloków 2 - 5, zakładając, że są one oparte na poniższym kodzie HTML.

A. C

B. B

C. D

D. A

Niepoprawne odpowiedzi często wynikają z błędnego zrozumienia działania właściwości float oraz szerokości elementów w układzie blokowym. Float jest potężnym narzędziem które pozwala na pływające rozmieszczenie elementów ale wymaga precyzyjnego planowania aby uniknąć niepożądanych efektów takich jak elementy wychodzące poza przewidywane miejsca. Przy wyborze błędnych odpowiedzi można zauważyć że nieodpowiednie użycie float może prowadzić do nieprawidłowego wyświetlania bloków. Na przykład brak odpowiedniego ustawienia float left lub right dla niektórych bloków może skutkować ich przesunięciem poza zamierzony układ. Dodatkowo nieprawidłowe zarządzanie szerokością bloków może spowodować że układ przekroczy dostępny obszar wyświetlania co szczególnie jest problematyczne w responsywnym projektowaniu stron. Typowym błędem jest również brak uwzględnienia clearfix co może prowadzić do nieprawidłowego przepływu kolejnych elementów w układzie. Zrozumienie jak float wpływa na otaczające elementy oraz jak kontrolować szerokość i przepływ elementów jest kluczowe w tworzeniu stabilnych i przewidywalnych układów stron internetowych. Poprawne zastosowanie tych zasad jest kluczowe dla zgodnego z dobrymi praktykami projektowania stron które są nie tylko estetyczne ale i funkcjonalne w różnych kontekstach urządzeń i środowisk użytkownika.

Pytanie 23

Jakie jest zadanie funkcji desaturacji w edytorze grafiki?

A. przekształcenie barw do odcieni szarości

B. zwiększenie liczby kolorów w obrazie

C. zwiększenie jaskrawości (nasycenia) barw

D. rozjaśnienie obrazu

Desaturacja to obróbka, która zmniejsza nasycenie barw aż do zera, przez co kolorowy obraz staje się czarno-biały (w odcieniach szarości). Zachowuje przy tym jasność pikseli - zmienia się tylko „kolorowość”, a nie to, jak jasny jest dany punkt. Stosuje się ją, gdy chcemy uzyskać efekt monochromatyczny albo przygotować obraz do dalszej obróbki. Pojęciowo jest przeciwieństwem zwiększania nasycenia (saturacji). Dlatego zadaniem desaturacji jest przekształcenie barw do odcieni szarości.

Pytanie 24

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. HTML 5

B. HTML 4.01 Strict

C. XHTML 1.1

D. HTML 4.01 Transitional

Wybór XHTML 1.1, HTML 4.01 Transitional lub HTML 4.01 Strict jako odpowiedzi na pytanie jest błędny, ponieważ te wersje języka HTML nie mają zdefiniowanych znaczników semantycznych, które są charakterystyczne dla HTML 5. XHTML 1.1, będący bardziej rygorystyczną wersją HTML, koncentruje się na zgodności z XML, co utrudnia elastyczność w projektowaniu i wprowadza dodatkowe wymagania dotyczące składni, ale nie oferuje nowych znaczników semantycznych. HTML 4.01 Transitional to wersja, która umożliwia stosowanie zarówno nowych, jak i starych technik HTML, jednak nie zawiera semantycznych elementów, które zostały wprowadzone w HTML 5. Z kolei HTML 4.01 Strict wprowadza ścisłe zasady dotyczące struktury dokumentu, ale również nie obejmuje nowych znaczników semantycznych. Istotnym błędem myślowym jest przekonanie, że wcześniejsze wersje HTML, które koncentrują się na zgodności z przeglądarkami, mogą dostarczyć takiej samej funkcjonalności jak HTML 5. Znaczniki semantyczne, takie jak <header>, <article>, <section> i <footer>, są kluczowe dla nowoczesnego podejścia do tworzenia stron internetowych, które koncentrują się na dostępności, SEO oraz lepszej organizacji treści. Wybierając nieodpowiednią wersję HTML, można nie tylko utracić na semantyce, ale również narazić projekt na problemy z przyszłą kompatybilnością i utrzymaniem.

Pytanie 25

Dla przedstawionego fragmentu dokumentu HTML:

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

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

A. div:menu { color: green; }

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

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

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

Podstawowy problem w niepoprawnych odpowiedziach wynika z mylenia różnych rodzajów selektorów CSS: typu, klasy i identyfikatora, a także pseudo-klas. W HTML mamy wyraźnie wskazany element `<div class="menu"></div>`. Atrybut `class` mówi wprost, że do stylowania należy użyć selektora klasy, czyli zapisu z kropką: `.menu` lub bardziej precyzyjnie `div.menu`. Użycie dwukropka w zapisie `div:menu` wygląda jak próba zastosowania pseudo-klasy, ale `menu` nie jest żadną standardową pseudo-klasą CSS. Pseudo-klasy to np. `:hover`, `:active`, `:first-child`. Przeglądarka taki selektor po prostu zignoruje, więc styl się nie zastosuje.
Kolejnym typowym nieporozumieniem jest zamiana klasy na identyfikator. Znak `#` w CSS oznacza selektor id, więc `#menu` pasowałby do elementu `<div id="menu">`, a nie do `<div class="menu">`. Id i klasa to dwie różne rzeczy: id powinno być unikalne w całym dokumencie, a klasę można stosować wielokrotnie. W realnych projektach front-endowych mieszanie tych dwóch mechanizmów prowadzi do chaosu w kodzie i trudnych do wykrycia błędów, dlatego warto od początku rozróżniać `.` od `#` bardzo świadomie.
Pojawia się też zapis `menu { background-color: rgb(0,255,0); }`. Taki selektor odnosi się do znacznika HTML o nazwie `menu`, czyli do `<menu>...</menu>`. Istnieje taki tag w HTML5, ale w pytaniu nie ma go w ogóle, jest zwykły `<div>`. Sam fakt, że klasa nazywa się „menu”, nie oznacza, że selektor typu `menu` będzie pasował. CSS nie „zgaduje” naszych intencji, tylko ściśle dopasowuje selektor do struktury dokumentu. To częsty błąd myślowy: patrzymy na nazwę klasy i podświadomie traktujemy ją jak nazwę znacznika.
Moim zdaniem kluczowa lekcja z tego pytania jest taka: najpierw patrzymy na HTML i dokładnie identyfikujemy, czy mamy do czynienia z klasą (`class`), identyfikatorem (`id`), czy konkretnym tagiem (`div`, `p`, `nav` itd.). Dopiero potem dobieramy odpowiedni selektor CSS: `.` dla klasy, `#` dla id, samą nazwę znacznika dla selektora typu. Takie systematyczne podejście bardzo ułatwia dalszą pracę z arkuszami stylów i pomaga budować czytelne, skalowalne style zgodnie z dobrymi praktykami branżowymi.

Pytanie 26

W przedstawionym filmie, aby połączyć tekst i wielokąt w jeden obiekt tak, aby operacja ta była odwracalna zastosowano funkcję

A. wykluczenia.

B. grupowania.

C. sumy.

D. części wspólnej.

W tym zadaniu łatwo się pomylić, bo w grafice wektorowej mamy kilka różnych funkcji, które na pierwszy rzut oka wyglądają podobnie: łączą obiekty w coś, co zachowuje się jak jeden element. Jednak ich działanie „pod maską” jest zupełnie inne. Funkcje typu suma, wykluczenie czy część wspólna to klasyczne operacje boolowskie na kształtach. One zmieniają geometrię obiektów, czyli tworzą nową ścieżkę wynikową na podstawie przecięcia lub połączenia istniejących. W praktyce oznacza to, że jeśli zastosujesz sumę na tekście i wielokącie, program najczęściej zamieni tekst na krzywe i połączy wszystko w jedną ścieżkę. Efekt wizualny może być fajny, ale edytowalność tekstu przepada. Nie możesz już po prostu zmienić czcionki czy liter, bo to nie jest tekst, tylko zestaw węzłów.
Podobnie z wykluczeniem: ta operacja tworzy „dziurę” jednego obiektu w drugim. Używa się jej np. do wycinania napisu z tła lub tworzenia maski. To jest typowy trik przy projektach logotypów albo efektach dekoracyjnych. Ale z punktu widzenia pytania – to działanie jest destrukcyjne dla tekstu, bo znowu zamienia go na kształt i łączy z wielokątem w sposób nieodwracalny (poza cofnięciem operacji). Część wspólna działa jeszcze ostrzej: zostawia tylko obszar, w którym obiekty się nakładają. Reszta jest tracona. To też jest operacja geometryczna, a nie organizacyjna.
Typowy błąd myślowy polega na założeniu, że „skoro po operacji mam jeden obiekt, to znaczy, że to jest to samo co grupowanie”. Niestety nie. Grupowanie nie modyfikuje kształtów, tylko tworzy kontener logiczny – tak jakbyś w folderze trzymał kilka plików. Możesz je potem rozgrupować i wszystko wraca do stanu sprzed grupowania. Operacje suma, wykluczenie, część wspólna są destrukcyjne względem oryginalnych obiektów, bo generują nową ścieżkę zamiast starych. W kontekście dobrych praktyk w grafice komputerowej i multimediach przyjmuje się, że dopóki chcesz zachować pełną edytowalność (szczególnie tekstów), używasz grupowania, warstw i wyrównywania, a dopiero na późnym etapie projektu stosujesz operacje boolowskie, i to świadomie, wiedząc, że cofasz się już tylko historią edycji. Dlatego w pytaniu, gdzie mowa jest wprost o połączeniu tekstu i wielokąta w jeden obiekt w sposób odwracalny, jedyną sensowną odpowiedzią jest funkcja grupowania, a nie suma, wykluczenie czy część wspólna.

Pytanie 27

Który z protokołów umożliwia publikację strony internetowej na serwerze?

A. SMTP

B. FTP

C. ICMP

D. NNTP

ICMP (Internet Control Message Protocol) to protokół, który używany jest głównie do przesyłania komunikatów kontrolnych w sieci, np. błędów czy informacji o tym, czy hosty są dostępne. I teraz tak - nie jest to protokół do transferu plików, więc nie nadaje się do publikowania stron. Więc używanie ICMP w tym kontekście może prowadzić do złych wniosków, bo nie jest to jego rola. Z drugiej strony, SMTP (Simple Mail Transfer Protocol) jest do wysyłania e-maili, a nie do publikacji stron. Przesyła wiadomości między serwerami pocztowymi, więc też nie ma zastosowania w transferze plików na serwery WWW. A NNTP (Network News Transfer Protocol) to natomiast protokół do rozsyłania wiadomości w grupach dyskusyjnych, co też nie ma związku z publikowaniem stron. Ważne jest, żeby rozumieć te protokoły, żeby unikać nieporozumień. Kiedy mówimy o publikacji, to najważniejsze są te protokoły, które obsługują transfer plików, jak FTP, oraz metody ich zabezpieczania. Błędny wybór protokołu może prowadzić do różnych problemów w publikacji.

Pytanie 28

Który zbiór znaczników, określających projekt strony internetowej w sposób semantyczny, jest zgodny z normą HTML 5?

A. Zbiór 1

B. Zbiór 2

C. Zbiór 4

D. Zbiór 3

Zrozumienie semantyki HTML jest kluczowe dla tworzenia zoptymalizowanych stron internetowych, a wybór odpowiednich znaczników ma duży wpływ na strukturę i dostępność dokumentu. W niepoprawnych odpowiedziach brak jest semantycznej spójności z założeniami HTML5. Wykaz 1 używa <article> w Bloku 2, co oznaczałoby samodzielną jednostkę, np. wpis na blogu lub artykuł prasowy, co nie jest odpowiednie w kontekście głównej treści strony. Wykaz 2 używa <div>, co jest niezalecane, gdyż divy są ogólnymi kontenerami, a HTML5 promuje użycie bardziej szczegółowych znaczników semantycznych. Wykaz 3 zastosował <main> dwukrotnie, co jest błędem, ponieważ <main> powinien być użyty tylko raz na stronie, jako główny element zawartości. Pominięcie znaczników takich jak <aside> lub <header> w odpowiednich miejscach zubaża strukturę dokumentu, co wpływa negatywnie na SEO i dostępność. Zasady semantyczności w HTML5 mają na celu ułatwienie interpretacji kodu zarówno przez przeglądarki, jak i przez urządzenia wspomagające, co jest kluczowe w nowoczesnym projektowaniu stron internetowych. Właściwe oznaczenie elementów strony pozwala na lepszą organizację treści i ułatwia nawigację, co jest ważne dla użytkowników i wyszukiwarek internetowych.

Pytanie 29

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

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

A. dwóch wierszy oraz jednej kolumny

B. jednego wiersza oraz dwóch kolumn

C. jednego wiersza oraz jednej kolumny

D. dwóch wierszy i dwóch kolumn

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

Pytanie 30

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym wpisywany tekst będzie ukrywany (zastępowany kropkami), należy zastosować znacznik

A. <input type="password" />

B. <form="password" type="password" />

C. <input name="password" />

D. <form input type="password" />

W przypadku odpowiedzi <input name="password" /> brakuje kluczowego atrybutu 'type', co uniemożliwia prawidłowe zdefiniowanie pola do wprowadzania hasła. Standard HTML wymaga, aby każdy input miał określony typ, aby przeglądarka wiedziała, jak ma obsługiwać dane wejściowe. Użycie tylko 'name' bez 'type' sprawia, że przeglądarka interpretuje to pole jako standardowe pole tekstowe, co nie maskuje wprowadzanych danych i naraża hasło na nieautoryzowany dostęp. W przypadku zastosowania <form="password" type="password" /> oraz <form input type="password" /> zawężamy logikę do niewłaściwego użycia znaczników formularzy. 'form' jest elementem kontenerowym dla grupy inputów, a jego atrybuty powinny odnosić się do dodatkowych informacji, ale nie pozwalają na umieszczenie inputa wewnątrz samego formularza w taki sposób. Te błędne konstrukcje mogą prowadzić do nieczytelności kodu i problemów z interpretacją przez przeglądarki, co jest szczególnie niekorzystne w kontekście dostępności i użyteczności. Warto przy projektowaniu formularzy przestrzegać standardów HTML oraz praktyk takich jak semantyczne użycie elementów, aby poprawić zarówno SEO, jak i UX.

Pytanie 31

Który ze znaczników HTML NIE służy do formatowania tekstu?

A. <strong>

B. <div>

C. <sub>

D. <em>

Znacznik <div> to uniwersalny pojemnik blokowy - grupuje elementy w sekcję, którą można wspólnie ostylować czy spozycjonować, ale sam w żaden sposób nie zmienia wyglądu tekstu. Pozostałe znaczniki dotyczą właśnie formatowania treści: <em> i <strong> nadają tekstowi znaczenie (i domyślnie kursywę oraz pogrubienie), a <sub> tworzy indeks dolny. Dlatego do formatowania tekstu NIE służy <div>.

Pytanie 32

W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć zapisu

A. p {text-spacing: 30px;}

B. p {text-indent: 30px;}

C. p {line-indent: 30px;}

D. p {line-height: 30px;}

Pierwsza z odpowiedzi, p {line-height: 30px;}, odnosi się do interlinii, czyli przestrzeni między poszczególnymi liniami tekstu. Ustawienie line-height na 30 pikseli wpłynie na odległość między liniami, ale nie wprowadzi wcięcia, co jest kluczowe w przypadku tego pytania. Użytkownicy często mylą te właściwości, co prowadzi do nieporozumień w zakresie formatowania tekstu. Druga odpowiedź, p {text-spacing: 30px;}, jest błędna, ponieważ text-spacing nie jest standardową właściwością CSS. CSS nie definiuje takiej właściwości, co może prowadzić do frustracji podczas pracy nad stylizacją dokumentów. W przypadku trzeciej odpowiedzi, p {line-indent: 30px;}, również nie jest to poprawne podejście, gdyż line-indent nie jest uznawane za standardową właściwość CSS, więc jego zastosowanie nie przyniesie oczekiwanych efektów. Typowym błędem jest zakładanie, że każda właściwość związana z tekstem może być zastosowana w podobny sposób, co prowadzi do niepoprawnych wyników. Kluczowe jest zrozumienie różnicy między właściwościami, takimi jak line-height, text-indent i inne, aby skutecznie stylizować tekst na stronach internetowych.

Pytanie 33

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

A. Akapit 2

B. Akapit 3

C. Akapit 1

D. Akapit 4

Twoja odpowiedź jest prawidłowa. Właściwość CSS 'border-radius: 20%;' jest faktycznie zastosowana do drugiego akapitu, co jest widoczne na załączonym obrazie. Akapit ten ma zaokrąglone rogi, co jest efektem działania tej właściwości CSS. Zaokrąglenie rogów elementów HTML jest często stosowaną techniką, która dodaje estetyki i wyrafinowania do projektu strony internetowej. Pozwala to na łamanie monotonii sześciokątnych zmian i dodaje unikalności do ogólnego wyglądu. Dobrą praktyką jest stosowanie 'border-radius' z umiarem, aby nie przesadzić z zaokrągleniem, które może zakłócić spójność całego projektu. Oprócz zaokrąglania rogów, właściwość 'border-radius' pozwala również na tworzenie kształtów eliptycznych czy okrągłych, co potrafi bardzo ciekawie odmienić charakter strony.

Pytanie 34

Zastosowana w dokumencie HTML definicja multimediów sprawi, że na stronie:

<video controls>
    <source src="video1.mp4" type="video/mp4">
    <source src="video1.ogg" type="video/ogg">
    Komunikat dotyczący video
</video>

A. zostaną wyświetlone obok siebie dwa filmy z plików: video1.mp4 oraz video1.ogg.

B. pod wyświetlanym filmem zostanie wyświetlony napis „Komunikat dotyczący video”.

C. zostanie wyświetlony film z pliku video1.mp4 lub, w przypadku nierozpoznania formatu MPEG-4, film z pliku video1.ogg.

D. wyświetlony film zostanie automatycznie uruchomiony zaraz po załadowaniu strony internetowej.

Niestety, twoja odpowiedź nie jest prawidłowa. Kod HTML, który analizowaliśmy, nie sugeruje, że pod wyświetlanym filmem zostanie wyświetlony napis 'Komunikat dotyczący video' ani że zostaną wyświetlone obok siebie dwa filmy. Takie zachowanie strony wymagałoby dodatkowego kodu HTML i CSS. Także automatyczne uruchomienie filmu po załadowaniu strony nie jest domyślnym zachowaniem elementu video. Warto zauważyć, że takie automatyczne odtwarzanie może być uciążliwe dla użytkowników i jest często uważane za niezgodne z dobrymi praktykami projektowania stron internetowych. Również, aby film automatycznie się odtwarzał, w elemencie video powinien być umieszczony atrybut 'autoplay'. Zrozumienie, jak działa element video HTML i jakie ma atrybuty, jest kluczowe do tworzenia efektywnych i użytecznych stron internetowych.

Pytanie 35

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ź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna 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ź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa 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 36

Której właściwości CSS użyć, aby określić KRÓJ (rodzaj) czcionki?

font-face

font-size

font-style

font-family

Pozostałe właściwości dotyczą czego innego. font-size ustawia ROZMIAR, font-style - styl (np. kursywę), a font-face nie jest właściwością (jest reguła @font-face do osadzania czcionek). Krój czcionki ustawia font-family.

Pytanie 37

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. stylizację tekstu za pomocą dostępnych znaczników

B. określenie kaskadowych arkuszy stylów przypisanych do strony

C. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych

D. przygotowanie szablonu witryny internetowej

Drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver jest narzędziem, które umożliwia wizualne przedstawienie struktury HTML dokumentu. Użytkownicy mogą za jego pomocą łatwo nawigować po elementach strony, zarówno tych statycznych, jak i dynamicznych. Tego typu rozwiązanie jest nieocenione w procesie projektowania strony internetowej, ponieważ pozwala programistom na szybkie zrozumienie hierarchii elementów, co jest kluczowe dla efektywnego zarządzania kodem. Na przykład, podczas tworzenia złożonych stron internetowych z wieloma sekcjami, drzewa kontekstowe ułatwiają identyfikację i modyfikację poszczególnych komponentów, co może przyspieszyć proces tworzenia oraz debugowania. Dodatkowo, przestrzeganie dobrych praktyk, takich jak stosowanie semantycznych znaczników HTML i odpowiedniego formatowania kodu, może poprawić dostępność i SEO strony, co jest szczególnie ważne w kontekście konkurencji w internecie.

Pytanie 38

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

A. 1

B. 4

C. 2

D. 5

Pozycje 1 2 3 i 4 w schemacie rozmieszczenia bloków na stronie WWW nie są odpowiednie do umieszczenia stopki strony z kilku powodów związanych z zasadami projektowania interfejsów użytkownika. W tradycyjnym i intuicyjnym układzie strony internetowej stopka znajduje się na samym dole strony ponieważ jest to miejsce gdzie użytkownicy spodziewają się znaleźć długoterminowe informacje takie jak kontakt polityka prywatności czy prawa autorskie. Umieszczenie stopki w miejscach oznaczonych numerami 1 lub 2 sugeruje że pełniłaby ona rolę nagłówka lub sekcji nawigacyjnej co nie pokrywa się z jej podstawowym przeznaczeniem. Blok 3 z boku strony mógłby być mylony z panelem bocznym który często zawiera treści dodatkowe lub reklamy a nie kluczowe elementy informacyjne jakie znajdują się w stopce. Blok 4 z kolei zwykle przeznaczony jest na główną treść strony przez co jego użycie dla stopki mogłoby zaburzyć przejrzystość przekazu. Przestrzeganie tych zasad jest kluczowe dla stworzenia strony intuicyjnej i zgodnej z oczekiwaniami użytkowników co wpływa na pozytywne ich doświadczenie z korzystania z serwisu. Poprawne rozmieszczenie elementów zgodnie z ich funkcją na stronie jest podstawą udanego projektu UX.

Pytanie 39

Wskaż NIEPRAWIDŁOWE stwierdzenie dotyczące normalizacji dźwięku

A. Jeśli najgłośniejszy element dźwięku osiąga połowę skali, wszystko zostanie zwiększone razy dwa - tak, aby najgłośniejszy element dotarł do maksimum na skali

B. W wyniku normalizacji następuje wyrównanie poziomu głośności całego nagrania

C. Opcja normalizacja znajduje się w menu programu do edycji dźwięku

D. Normalizacja polega na obniżeniu poziomu najgłośniejszej próbki w sygnale do ustalonej wartości, a następnie proporcjonalnym zwiększeniu głośności pozostałych części sygnału

Odpowiedź jest prawidłowa, ponieważ proces normalizacji sygnału dźwiękowego faktycznie polega na dostosowywaniu głośności nagrania w taki sposób, aby najgłośniejszy fragment osiągał maksymalny poziom na skali. W praktyce, jeżeli najgłośniejszy element sygnału osiąga połowę skali, program do obróbki dźwięku zwiększa głośność wszystkich innych fragmentów, aby najgłośniejszy osiągnął pełną głośność. To działanie jest zgodne z powszechnie przyjętymi standardami normalizacji dźwięku, które zapewniają, że nagrania mają spójny poziom głośności, co jest istotne w produkcji audio, aby nie występowały nagłe zmiany głośności pomiędzy różnymi utworami. Normalizacja jest szczególnie przydatna w kontekście przygotowywania materiałów do publikacji, takich jak albumy muzyczne czy podcasty, gdzie istotne jest, by słuchacz nie musiał regulować głośności podczas odtwarzania różnych nagrań. Przykładem może być album muzyczny, gdzie różne utwory mogą mieć różne poziomy nagrania, a normalizacja pozwala na ich wyrównanie w celu uzyskania jednolitego doświadczenia słuchowego.

Pytanie 40

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

A. CSS

B. JavaScript

C. Ruby on Rails

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.

Rozpocznij nowy egzamin

Powrót do strony głównej