Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 12 maja 2026 13:42
Data zakończenia: 12 maja 2026 13:46

Egzamin niezdany

Wynik: 6/40 punktów (15,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

A. 800 na 480 pikseli

B. 1366 na 768 pikseli

C. 2560 na 2048 pikseli

D. 320 na 240 pikseli

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

Pytanie 2

Podczas weryfikacji pliku HTML5 pojawił się komunikat brzmiący: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. element <title> nie jest konieczny.

B. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

C. element <title> nie został prawidłowo zamknięty przez </title>.

D. nie zdefiniowano obowiązkowego atrybutu title w tagu <img>.

Twoja odpowiedź jest całkowicie trafna! Zgodnie z tym, co mówi specyfikacja HTML5, element <title> rzeczywiście jest obowiązkowy i musi znaleźć się w sekcji <head>. To bardzo ważne, bo tytuł strony to coś, co pokazuje się na karcie przeglądarki, a także w wynikach wyszukiwania. Jak go brakuje, to strona nie spełnia podstawowych wymogów i pojawia się błąd walidacji. Fajnie jest mieć unikalne i opisowe tytuły dla każdej strony, bo to korzystnie wpływa na SEO i użyteczność. Na przykład, jeśli robiłbyś stronę o kulinariach, to tytuł mógłby być "Przepisy na zdrowe obiady", co od razu informuje użytkowników i wyszukiwarki, o co chodzi. Dobrze dobrany tytuł to naprawdę kluczowa sprawa, bo ma duży wpływ na to, jak użytkownicy postrzegają Twoją stronę i czy klikną w link. Pamiętaj też, że element <title> powinien być krótki, ale wystarczająco informacyjny, zazwyczaj nie dłuższy niż 60 znaków.

Pytanie 3

Wskaż, który zapis należy zastosować w celu wyświetlenia grafiki obrazek.png na stronie WWW w pliku plik.html.

A. <img src="/../katalog_2/katalog_B/obrazek.png">

B. <img src="/../katalog_1/katalog_B/obrazek.png">

C. <img src="../../katalog_2/katalog_B/obrazek.png">

D. <img src="obrazek.png">

Problem z niepoprawnymi odpowiedziami wynika z niezrozumienia, skąd dokładnie liczona jest ścieżka do pliku oraz jak działa nawigacja po katalogach w adresach względnych. Przeglądarka zawsze interpretuje wartość atrybutu src w <img> zaczynając od lokalizacji aktualnego dokumentu HTML, czyli w tym przypadku od katalogu katalog_1/katalog_A. Jeżeli wpiszemy po prostu nazwę pliku, bez żadnych katalogów, to przeglądarka szuka go w tym samym folderze co plik HTML. Zapis <img src="obrazek.png"> sugeruje więc, że obrazek.png leży obok plik.html w katalogu_A. Ponieważ w przedstawionej strukturze plik graficzny znajduje się zupełnie gdzie indziej, taka ścieżka po prostu nie może zadziałać. Kolejny typ błędu to nieprawidłowe użycie sekwencji /../ na początku ścieżki. W kontekście URL-a ukośnik na początku oznacza ścieżkę absolutną liczoną od katalogu głównego serwera (tzw. root). Dodawanie zaraz po nim .. jest w praktyce bez sensu, bo nie możemy cofnąć się powyżej katalogu głównego. Takie konstrukcje typu "/../katalog_1/..." czy "/../katalog_2/..." nie odzwierciedlają realnej struktury katalogów widzianej przez serwer WWW. To częsty błąd: mieszanie myślenia systemu plików w eksploratorze z zasadami adresacji URL. W systemie operacyjnym czasem zobaczymy .. na początku ścieżki względnej, ale w URL po wiodącym slashu ścieżka jest już traktowana jako absolutna. Prawidłowe podejście polega na świadomym liczeniu poziomów: pojedyncze .. cofa o jeden katalog w górę, podwójne ../../ o dwa, i dopiero potem dokładamy kolejne katalogi prowadzące do docelowego pliku. Warto też pamiętać, że w projektach webowych lepiej unikać "dziwnych" konstrukcji ze zbędnym /../, bo to utrudnia debugowanie i rodzi problemy przy przenoszeniu strony na inny serwer. Typowym błędem myślowym jest też założenie, że jak coś wygląda logicznie w drzewku folderów na ekranie, to tak samo zadziała w URL, bez dokładnego prześledzenia, od jakiego katalogu liczymy ścieżkę. Dlatego dobrą praktyką jest narysowanie sobie tej struktury i ręczne przejście krok po kroku: tu jest plik.html, tu jest obrazek.png, ile razy muszę się cofnąć .. i gdzie potem wejść, żeby dojść dokładnie do tego pliku.

Pytanie 4

Termin „front-end” w kontekście budowy stron internetowych odnosi się do

A. interfejsu witryny internetowej powiązanego z technologiami działającymi w przeglądarkach internetowych

B. działania skryptów i aplikacji realizowanych po stronie serwera WWW

C. bazy danych zawierającej informacje prezentowane na stronie

D. organizacji danych na serwerze WWW

Pojęcie „front-end” odnosi się do części aplikacji webowej, która jest widoczna dla użytkownika i z którą użytkownik może wchodzić w interakcję. Front-end obejmuje wszystkie elementy interfejsu użytkownika, takie jak układ graficzny, teksty, obrazki oraz wszelkie interaktywne elementy, takie jak przyciski i formularze. Technologie używane w front-endzie obejmują HTML, CSS oraz JavaScript, które są standardami stosowanymi w tworzeniu stron internetowych. Dobrze zaprojektowany front-end nie tylko wygląda estetycznie, ale również jest responsywny, co oznacza, że dostosowuje się do różnych rozmiarów ekranów, co jest istotne w dobie urządzeń mobilnych. Przykłady zastosowania tej wiedzy obejmują tworzenie stron internetowych, rozwijanie aplikacji webowych oraz optymalizację doświadczeń użytkowników poprzez testy A/B oraz analizy UX. Dobre praktyki w front-endzie to także dostępność (wcag) oraz optymalizacja wydajności, co przekłada się na lepsze doświadczenia użytkowników oraz wyższe pozycje w wynikach wyszukiwania.

Pytanie 5

Do zapisania prostej animacji na stronę internetową można zastosować format

A. JPG

B. PNG

C. GIF

D. CDR

Format GIF (Graphics Interchange Format) jest idealny do zapisywania prostych animacji na potrzeby stron internetowych. GIF obsługuje do 256 kolorów w palecie, co czyni go odpowiednim do animacji o niskiej rozdzielczości i małej liczbie kolorów. Animacje GIF składają się z serii klatek, które są wyświetlane w szybkim tempie, co pozwala na płynne przejścia między różnymi etapami animacji. Dzięki swojej powszechności i wsparciu w większości przeglądarek internetowych, GIF stał się standardem dla prostych animacji w sieci. Format ten wspiera również przezroczystość, co pozwala na umiejscowienie animacji na różnych tłach bez widocznego prostokątnego obramowania. Przykłady zastosowania GIF obejmują ikony ładowania, animacje przycisków czy krótkie klipy wideo zamienione na animacje. GIF jest także często wykorzystywany w marketingu internetowym i mediach społecznościowych, aby przyciągnąć uwagę użytkowników. Standardy dotyczące GIF są określone przez specyfikacje formatów obrazów i są szeroko akceptowane przez deweloperów webowych, co czyni go wygodnym wyborem dla twórców stron internetowych.

Pytanie 6

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

A. nav { float: right; }

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

C. aside {float: left; }

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

W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi. Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego. Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 7

Znacznik <ins> w HTML jest używany do wskazywania

A. tekstu, który został dodany

B. tekstu, który został usunięty

C. cytowanego fragmentu tekstu

D. tekstu, który został przeformatowany

Wybierając błędne odpowiedzi, pokazujesz, że coś może być niejasne, jeśli chodzi o znaczniki HTML. Na przykład, myślenie, że <ins> to znacznik do oznaczania cytatów, to pomyłka. Do tego zadania służy <blockquote> albo <q>, które mają swoje własne, zupełnie inne znaczenie. Jeśli wybrałeś opcję mówiącą o oznaczaniu usuniętego tekstu, to też jest błąd, bo do tego mamy znacznik <del>. A użycie <ins> w kontekście zmiany formatu tekstu to jeszcze jedna pomyłka, bo ten znacznik nie mówi nic o formatowaniu. Tak naprawdę, <ins> tylko wskazuje nowe fragmenty tekstu, a nie zmienia ich stylu. Jeżeli nie rozumiesz tych funkcji różnych znaczników HTML, to łatwo można wpaść w pułapkę błędów w kodzie, co później będzie miało wpływ na semantykę stron oraz ich dostępność. Dlatego tak ważne jest, żeby znać różnice między tymi znacznikami i korzystać z nich, jak należy.

Pytanie 8

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

A. Formatowanie 1

B. Formatowanie 2

C. Formatowanie 4

D. Formatowanie 3

Styl obramowania w CSS pozwala na precyzyjne określenie wyglądu krawędzi elementu na stronie internetowej. W przypadku „border-style: dotted solid;” mamy do czynienia z kombinacją dwóch różnych stylów obramowania. Pierwsza wartość „dotted” odnosi się do obramowania o kropkowanej strukturze, co jest często stosowane w celu nadania lekkości i subtelności wizualnej. Druga wartość „solid” oznacza jednolite obramowanie, które jest bardziej wyraźne i stosowane, gdy wymagana jest wyraźna separacja elementów. Formatowanie 2 odpowiada właśnie temu stylowi, ponieważ przedstawia górne i dolne obramowanie jako kropkowane, a boczne jako jednolite. Takie zastosowanie jest typowe w sytuacjach, gdzie potrzebny jest kompromis między estetyką a funkcjonalnością, np. w tabelach danych, gdzie górne i dolne obramowanie może być delikatniejsze, by nie przytłaczać, a boczne wyraźne dla czytelności. Wybór właściwego stylu obramowania jest kluczowy dla użyteczności i estetyki strony, zgodnie z zasadami projektowania zorientowanego na użytkownika.

Pytanie 9

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

A. tła każdego znacznika akapitu

B. rysunku umieszczonego w tle strony w poziomie

C. rysunku znajdującego się w tle strony w pionie

D. rysunku osadzonego znacznikiem img

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

Pytanie 10

Edytor, który spełnia kryteria WYSIWYG, powinien umożliwiać

A. osiągnięcie zbliżonego rezultatu tworzonej strony do jej wyglądu w przeglądarce internetowej

B. publikację strony na serwerze za pomocą wbudowanego klienta FTP

C. przygotowanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej

D. tworzenie podstawowych grafik wektorowych

Odpowiedzi dotyczące obróbki plików dźwiękowych, publikacji na serwerze FTP oraz tworzenia podstawowej grafiki wektorowej nie są zgodne z podstawowymi funkcjonalnościami edytorów WYSIWYG. Edytory te koncentrują się na treści wizualnej i układzie strony, a nie na specyficznych zadaniach związanych z multimediami czy publikacją. Obróbka plików dźwiękowych wymaga zaawansowanych narzędzi audio, które są poza zakresem WYSIWYG. Takie programy są projektowane do edycji treści tekstowych i graficznych w kontekście układu, a nie jako kompleksowe środowiska do pracy z dźwiękiem. Publikacja stron internetowych na serwerze FTP jest aspektem bardziej związanym z hostingiem i zarządzaniem plikami, a nie z samym tworzeniem treści. Ponadto, tworzenie grafiki wektorowej wymaga wyspecjalizowanych narzędzi graficznych, takich jak Adobe Illustrator, które są dedykowane do grafiki wektorowej, a nie funkcji edytorów WYSIWYG. Błędne wnioski wynikają często z mylnego postrzegania roli edytora WYSIWYG, który nie powinien być traktowany jako uniwersalne narzędzie do wszelkich aspektów tworzenia stron internetowych. Właściwe zrozumienie jego funkcji pozwala na efektywne wykorzystanie edytorów do projektowania stron, a nie do zadań, do których nie zostały zaprojektowane.

Pytanie 11

Na ilustracji zaprezentowano koncepcję układu bloków strony internetowej. Przyjmując, że bloki są realizowane za pomocą znaczników sekcji, a szerokość jest określona tylko dla bloków 2, 3 oraz 4, ich stylowanie powinno uwzględniać właściwość

A. clear: both dla bloku 5 i float: left jedynie dla bloków 2, 3 oraz 4

B. float: left jedynie dla bloków 3 i 4 oraz clear: both dla bloku 2

C. float: left dla wszystkich bloków

D. clear: both dla wszystkich bloków

Odpowiedź jest prawidłowa, ponieważ wykorzystanie float: left dla bloków 2, 3 i 4 pozwala na ich ustawienie obok siebie w poziomie. Jest to klasyczna technika stosowana w CSS do tworzenia layoutów, gdzie elementy mają płynąć obok siebie. Definiując float: left, elementy zaczynają od lewej krawędzi rodzica i układają się w linii poziomej. Użycie clear: both dla bloku 5 zapewnia, że blok ten zacznie się poniżej pływających bloków 2, 3 i 4, a nie obok nich. Clear: both jest konieczne, aby zapewnić, że blok 5 nie zostanie zakłócony przez floating, co jest powszechną praktyką przy tworzeniu wielokolumnowych layoutów. Kiedy float jest używany bez clear, może prowadzić do overlapania elementów, co jest niepożądane w strukturze layoutu. Praktyczne zastosowanie tego podejścia obejmuje układy z nagłówkiem, treścią i stopką, gdzie nagłówek i stopka powinny być pełnej szerokości, a treść podzielona na kolumny obok siebie. To podejście jest zgodne z tradycyjnymi metodami budowania stron przed wprowadzeniem flexboxa i grida, gdzie float był jednym z podstawowych narzędzi do zarządzania układem strony. Współczesne dobre praktyki wciąż uznają jego istotność, zwłaszcza w kontekście starszych projektów utrzymywanych z biegiem czasu.

Pytanie 12

Do zdefiniowania listy nienumerowanej w języku HTML, jaki znacznik należy zastosować?

A. <dt>

B. <ul>

C. <ol>

D. <dd>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby zdefiniować w języku HTML listę nienumerowaną, należy użyć znacznika <ul>, co jest standardem w HTML. Znacznik <ul> oznacza "unordered list", czyli listę, w której poszczególne elementy nie są uporządkowane w kolejności numeracyjnej. Elementy tej listy są zazwyczaj wyświetlane z ikoną (punktami) przed każdym elementem, co podkreśla ich nienumerowany charakter. Każdy element listy jest definiowany za pomocą znacznika <li> (list item). Przykładowo, pełna struktura HTML dla listy nienumerowanej może wyglądać następująco: <ul><li>Pierwszy element</li><li>Drugi element</li></ul>. Używanie list nienumerowanych jest szczególnie pomocne w organizowaniu treści w sposób, który nie wymaga hierarchii, ale raczej prezentuje różne elementy na równym poziomie. W standardach W3C HTML5, <ul> jest zalecanym znakiem do tworzenia takich struktur, co czyni go kluczowym elementem w budowie przejrzystych i zrozumiałych stron internetowych. Implementacja list nienumerowanych w HTML jest istotnym krokiem w tworzeniu semantycznie poprawnych dokumentów, co wpływa na dostępność oraz SEO.

Pytanie 13

W semantycznym HTML odpowiednikiem elementu <b>, który nie tylko pogrubia tekst, ale także wskazuje na jego większe znaczenie, jest

A. <em>

B. <ins>

C. <mark>

D. <strong>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> w HTML semantycznym służy nie tylko do pogrubienia tekstu, ale także do wskazania, że dany fragment ma większe znaczenie w kontekście semantycznym. Zgodnie z zaleceniami W3C, użycie tego znacznika poprawia dostępność treści, ponieważ technologie wspomagające, takie jak czytniki ekranu, interpretują <strong> jako tekst o podwyższonej wadze, co może pomóc w lepszym zrozumieniu struktury dokumentu przez osoby z niepełnosprawnościami. Przykładem zastosowania może być podkreślenie ważnych informacji na stronie, takich jak zasady, ostrzeżenia czy kluczowe dane, które użytkownicy powinni zauważyć. W praktyce, stosowanie elementów semantycznych, takich jak <strong>, zamiast czysto stylistycznych, jest zgodne z zasadami budowania stron przyjaznych dla użytkowników i poprawia SEO, ponieważ wyszukiwarki mogą lepiej analizować kontekst treści. Warto pamiętać, że w przypadku użycia <strong>, nie zmienia to tylko sposobu wyświetlania, ale także wzbogaca znaczenie tekstu w kontekście całej strony.

Pytanie 14

W języku CSS określono styl dla stopki. Aby zastosować to formatowanie do bloku oznaczonego znacznikiem div, należy wpisać

#stopka { ... }

A. <div "stopka">

B. <div id="stopka">

C. <div class="stopka">

D. <div title="stopka">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <div id="stopka"> ponieważ w CSS użycie selektora ID poprzedzonego znakiem # oznacza, że styl jest stosowany do elementu o określonym identyfikatorze. W HTML atrybut id jest unikalny w obrębie całego dokumentu co oznacza, że może być przypisany tylko do jednego elementu. Stosowanie identyfikatorów jest powszechną praktyką w przypadku stylizacji elementów, które pojawiają się tylko raz na stronie jak stopka nagłówek czy główny kontener treści. Przykład praktycznego zastosowania obejmuje sytuacje gdzie chcesz stylizować konkretną część strony internetowej zachowując jednorodność w całym projekcie. Dobrą praktyką jest również unikanie zbyt częstego używania id na rzecz klas które są bardziej elastyczne i mogą być stosowane do wielu elementów. Jednak w przypadku elementów unikalnych takich jak stopka użycie id jest zgodne z najlepszymi praktykami projektowania stron internetowych. Warto również pamiętać że selektory ID mają wyższy priorytet w CSS co oznacza że ich stylizacje nadpisują te zdefiniowane dla klas o tej samej specyfikacji.

Pytanie 15

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>

A. C

B. D

C. B

D. A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to D ponieważ kod HTML formularza definiuje trzy pola wyboru typu checkbox z różnymi atrybutami wpływającymi na ich stan początkowy. Pierwsze pole wyboru dotyczące sporządzania dokumentacji posiada atrybuty disabled i checked co oznacza że będzie zaznaczone ale nieaktywne dla użytkownika. Oznacza to że użytkownik nie może zmienić jego stanu w przeglądarce. Drugie pole dotyczące pisania kodu ma tylko atrybut checked co oznacza że będzie zaznaczone i dostępne do edycji. Trzecie pole dotyczące testów oprogramowania nie posiada żadnego z tych atrybutów więc będzie domyślnie niezaznaczone i edytowalne. To zachowanie jest zgodne ze standardami HTML i dobrymi praktykami kodowania gdzie atrybuty kontrolują interakcje użytkownika z formularzami. Wiedza ta jest kluczowa dla projektantów stron internetowych aby zapewnić prawidłowe działanie formularzy i poprawne doświadczenie użytkownika. Formularze są podstawowym elementem interakcji z użytkownikiem dlatego zrozumienie ich działania jest niezbędne w tworzeniu funkcjonalnych i intuicyjnych interfejsów użytkownika.

Pytanie 16

Można przypisać wartości: static, relative, fixed, absolute oraz sticky do właściwości

A. list-style-type

B. position

C. text-transform

D. display

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'position' służy do określenia, w jaki sposób element jest pozycjonowany na stronie. Wartości takie jak static, relative, fixed, absolute oraz sticky definiują różne metody pozycjonowania elementów w kontekście innych obiektów oraz w kontekście samego okna przeglądarki. Na przykład, 'static' jest wartością domyślną, co oznacza, że elementy są umieszczane w naturalnym porządku w dokumencie HTML. 'Relative' pozwala na przesunięcie elementu względem jego normalnej pozycji, co daje większą elastyczność w projektowaniu layoutów. 'Absolute' pozycjonuje element względem najbliższego przodka, który również ma ustawioną właściwość 'position' różną od 'static', co umożliwia precyzyjne umiejscowienie elementów. 'Fixed' sprawia, że element pozostaje w tym samym miejscu w oknie przeglądarki, nawet podczas przewijania strony, co jest często wykorzystywane w przypadku nagłówków i stopki. 'Sticky' łączy cechy 'relative' i 'fixed', umożliwiając elementowi bycie na stałe w zasięgu widoku, ale tylko do momentu, gdy nie zostanie przewinięty poza jego kontener. Używanie tych wartości w praktyce pozwala na tworzenie responsywnych i dynamicznych interfejsów użytkownika, które są zgodne z dobrymi praktykami projektowania stron internetowych.

Pytanie 17

Który znacznik lub grupa znaczników nie są stosowane do definiowania struktury strony HTML?

A. <i>, <b>, <u>

B. <section>

C. <div>

D. <header>, <footer>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <i>, <b>, <u> jest stosowany głównie do celów prezentacyjnych, a nie do definiowania struktury dokumentu HTML. <i> oznacza tekst kursywą, <b> tekst pogrubiony, a <u> tekst podkreślony. Te znaczniki są częścią HTML, ale ich główną funkcją jest wzbogacenie wizualne treści, co nie ma związku z logiczną strukturą strony. W kontekście dobrych praktyk webowych, zaleca się stosowanie znaczników semantycznych, które dostarczają bardziej zrozumiałych informacji o treści strony wyszukiwarkom i asystentom technologicznym. Przykładowo, zamiast używać <b> dla podkreślenia znaczenia tekstu, warto skorzystać z <strong>, który również pogrubia tekst, ale dodatkowo wskazuje, że jest on istotny. Dobre praktyki sugerują, aby struktura strony była wyraźna i zrozumiała, co ułatwia nawigację oraz dostępność. Właściwe użycie znaczników takich jak <header>, <footer> czy <section> pomaga w tworzeniu jasnej i logicznej hierarchii dokumentu.

Pytanie 18

Walidacja strony internetowej polega na

A. zestawie działań mających na celu zwiększenie liczby odwiedzin

B. umieszczaniu treści w sieci

C. reklamowaniu strony

D. sprawdzeniu jej w celu usunięcia błędów

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Proces walidacji strony internetowej polega na systematycznym sprawdzeniu jej zawartości oraz struktury w celu identyfikacji i eliminacji błędów, które mogą wpływać na jej funkcjonalność oraz użyteczność. Walidacja to kluczowy etap w cyklu życia strony, ponieważ zapewnia, że strona działa zgodnie z wymaganiami technicznymi i standardami branżowymi, takimi jak W3C. Przykłady zastosowania walidacji obejmują sprawdzanie poprawności kodu HTML, CSS oraz dostępności, co jest istotne dla zapewnienia pozytywnego doświadczenia użytkowników. Strony internetowe, które są walidowane, mają większe szanse na lepsze pozycjonowanie w wyszukiwarkach, co przekłada się na wyższą oglądalność. Regularna walidacja jest również zgodna z najlepszymi praktykami w zakresie utrzymania jakości i bezpieczeństwa, co w dłuższej perspektywie wspiera reputację marki i zaufanie użytkowników.

Pytanie 19

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

A. obraz tła pojawi się w prawym górnym rogu witryny

B. tło witryny pozostanie nieruchome i nie będzie się przesuwać podczas przewijania strony

C. obrazek tła będzie się powtarzać (kafelki)

D. tło witryny będzie przesuwane wraz z przewijaniem strony

Brak odpowiedzi na to pytanie.

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

Pytanie 20

Jak wygląda poprawny zapis znaczników, który jest zgodny z normami języka XHTML i odpowiada za łamanie linii?

A. <br/>

B. </ br>

C. <br/>

D. </br/>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis samozamykającego się znacznika <br/> jest poprawny zgodnie z standardem XHTML, który wymaga, aby znaczniki, które nie mają zawartości, były zapisane w sposób, który jednoznacznie wskazuje na ich samozamykającą się naturę. W XHTML każdy znacznik powinien być zamknięty, co oznacza, że nawet tagi samo zamykające się, takie jak <br/>, muszą zawierać ukośnik przed zamknięciem znacznika. Daje to pewność, że parsery XHTML poprawnie interpretują kod, co jest szczególnie ważne w kontekście obsługi różnorodnych przeglądarek, które mogą różnie reagować na błędnie sformatowany kod. Przykładem zastosowania <br/> jest łamanie linii w tekstach, gdzie chcemy uzyskać efekt nowego wiersza bez tworzenia nowego bloku, co jest typowe w celu zachowania struktury dokumentu HTML. Dobrą praktyką jest zawsze stosowanie poprawnych form zapisów zgodnych z obowiązującymi standardami, co nie tylko wpływa na poprawność działania kodu, ale również na jego czytelność i długoterminową utrzymywaność.

Pytanie 21

W języku HTML kolor biały można przedstawić przy użyciu wartości

A. rgb(FFFF,FF)

B. #000000

C. #255255

D. rgb(255,255,255)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Biały kolor w HTML zapisujemy jako rgb(255,255,255). W systemie RGB kolory tworzą się z trzech podstawowych barw: czerwonej, zielonej i niebieskiej. Każda z nich ma wartość od 0 do 255, więc maksymalna intensywność danego koloru to 255, a najniższa to 0. W przypadku białego koloru wszystkie trzy barwy są na maksa, stąd właśnie rgb(255,255,255) oznacza pełną moc czerwonego, zielonego i niebieskiego, co razem daje kolor biały. Wartości RGB są super ważne w CSS i w różnych programach do grafiki. Moim zdaniem, warto je znać, bo to podstawy przy robieniu stron internetowych. Warto też zwrócić uwagę na standardy W3C dotyczące kolorów w HTML, bo pomagają zadbać o estetykę i dostępność stron.

Pytanie 22

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

A. Kod 2

B. Kod 4

C. Kod 1

D. Kod 3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod 2 jest prawidłowy, ponieważ dla bloków 2 i 3 stosowane jest ustawienie float: left; co pozwala na ich ułożenie w jednym wierszu z lewej strony. Blok 4 z float: right; umiejscawia się po prawej stronie, co umożliwia uzyskanie układu bloków 2-4 w jednej linii, odpowiadając schematowi. Blok 5 z float: left; rozpoczyna nowy wiersz poniżej, zgodnie z założonym układem. Takie użycie właściwości float oraz width pozwala na zorganizowanie elementów na stronie bez użycia flexbox lub grid, co jest klasycznym podejściem do układu strony w CSS. Dobrym przykładem praktycznego zastosowania jest tworzenie responsywnych layoutów, gdzie float można używać do kontrolowania przepływu elementów na mniejszych ekranach. Mimo że obecnie technologia flexbox i grid jest bardziej popularna, znajomość stosowania float nadal jest istotna, zwłaszcza w kontekście starszych projektów, które mogą wymagać utrzymania zgodności z wcześniejszymi wersjami CSS. To rozwiązanie zapewnia zgodność z wieloma starszymi przeglądarkami, co jest kluczowe w przypadku długoterminowych projektów webowych.

Pytanie 23

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. header

B. nav

C. aside

D. div

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <nav> w HTML5 jest przeznaczony do definiowania sekcji nawigacyjnych na stronie internetowej, takich jak menu. Użycie semantycznego znacznika <nav> jest zgodne z dobrą praktyką projektowania stron, ponieważ pomaga przeglądarkom i technologiom wspomagającym, takim jak czytniki ekranowe, lepiej zrozumieć strukturę dokumentu. Dzięki zastosowaniu <nav>, silniki wyszukiwarek mogą również bardziej efektywnie indeksować zawartość strony. Przykład użycia <nav> w praktyce: html <nav> <ul> <li><a href='#'>Strona główna</a></li> <li><a href='#'>O nas</a></li> <li><a href='#'>Kontakt</a></li> </ul> </nav>. Ten znacznik powinien być używany wszędzie tam, gdzie mamy do czynienia z głównymi elementami nawigacyjnymi strony. Semantyczne tagi w HTML5, takie jak <nav>, ułatwiają utrzymanie i obsługę kodu oraz wspierają dostępność stron internetowych zgodnie ze standardami WCAG.

Pytanie 24

Opracowanie logicznego układu strony internetowej wiąże się z

A. umiejscowieniem elementów w konkretnych punktach strony.

B. zdefiniowaniem adresów URL dla podstron strony.

C. stworzeniem zbioru grafik dla strony.

D. określeniem zawartości strony.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Projektowanie logicznego układu witryny polega na efektywnym rozmieszczeniu elementów w konkretnych miejscach witryny, co jest kluczowe dla zapewnienia optymalnej użyteczności oraz nawigacji. Proces ten obejmuje analizę interakcji użytkowników z treścią oraz zaprojektowanie układu, który umożliwia intuicyjne poruszanie się po stronie. Przykładowo, umiejscowienie menu nawigacyjnego w górnej części strony oraz umieszczenie najważniejszych informacji w widocznych miejscach zwiększa szanse na konwersję. Warto również uwzględnić zasady projektowania responsywnego, co oznacza, że układ powinien być dostosowany do różnych rozmiarów ekranów, zapewniając spójne doświadczenie na urządzeniach mobilnych i stacjonarnych. Standardy takie jak WCAG (Web Content Accessibility Guidelines) również podkreślają znaczenie logicznego rozmieszczenia elementów, aby zapewnić dostępność dla osób z niepełnosprawnościami. Ponadto, dobrze zaprojektowany układ pomaga w optymalizacji SEO, umożliwiając lepsze indeksowanie przez wyszukiwarki.

Pytanie 25

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 <span class="code-text">br</span>

B. powtórzenia nazwy pliku graficznego

C. niedomknięcia znacznika <span class="code-text">img</span>

D. braku cudzysłowu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Fragment kodu HTML zawiera istotny błąd, który polega na braku cudzysłowu w atrybucie 'src' znacznika 'img'. Poprawna składnia wymaga, aby wszystkie wartości atrybutów były otoczone cudzysłowami, zarówno pojedynczymi, jak i podwójnymi. W tym przypadku występuje problem w linii, gdzie atrybut 'src' ma przypisaną wartość '/obraz.gif', ale brakuje zamykającego cudzysłowu, co powoduje, że przeglądarka może niepoprawnie interpretować ten fragment kodu. Aby poprawić kod, należy dodać cudzysłów, co zapewni zgodność z normami HTML, takimi jak W3C. Przykładowo, poprawny zapis powinien wyglądać następująco: <img src="/obraz.gif" alt="Obrazek">. Walidacja kodu HTML jest kluczowa, ponieważ umożliwia uniknięcie problemów z wyświetlaniem strony oraz zapewnia lepszą dostępność treści dla użytkowników oraz robotów wyszukiwarek. Użycie odpowiednich znaczników oraz poprawna składnia sprzyja również lepszym wynikom SEO, co jest istotne w kontekście widoczności w Internecie.

Pytanie 26

W notacji szesnastkowej kolor zielony reprezentowany jest jako #008000. Jaką wartość przyjmuje on w notacji RGB?

A. rgb(0, 128, 0)

B. rgb(0, 160, 0)

C. rgb(0, 100, 0)

D. rgb(0, 80, 0)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wartość koloru zielonego w notacji szesnastkowej #008000 odpowiada w notacji RGB wartości rgb(0, 128, 0). W tym systemie kolorów każda składowa koloru (czerwony, zielony, niebieski) jest reprezentowana jako liczba całkowita w przedziale od 0 do 255, co odpowiada 8-bitowym wartościom. W przypadku koloru zielonego, składowa czerwonego ma wartość 0, składowa zielonego 128, a składowa niebieskiego także 0. W praktyce, RGB jest powszechnie stosowane w projektowaniu graficznym, programowaniu oraz w tworzeniu stron internetowych, gdzie kolory są definiowane w taki sposób, aby zapewnić szeroką gamę odcieni. Wartości RGB mogą być wykorzystywane w CSS do stylizacji elementów, co pozwala na precyzyjne odwzorowanie zamierzonych kolorów oraz estetyki. Stosując standardy webowe, umiejętność konwersji między różnymi formatami kolorów jest niezbędna, zwłaszcza w kontekście zapewnienia spójności wizualnej na różnych urządzeniach i platformach.

Pytanie 27

W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu

A. rowspan

B. colspan

C. cellpadding

D. cellspacing

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut rowspan w języku HTML jest kluczowy do scalania komórek tabeli w pionie, co oznacza, że pozwala na połączenie dwóch lub więcej komórek w jednej kolumnie w jedną, większą komórkę. Dzięki temu, można uzyskać bardziej przejrzysty i zorganizowany układ informacji w tabelach, zwłaszcza w przypadku danych, które są ze sobą powiązane. Na przykład, jeśli mamy tabelę, w której jeden z wierszy odnosi się do tytułu kategorii, a poniżej znajdują się różne elementy tej kategorii, użycie atrybutu rowspan w pierwszej komórce umożliwi jej rozszerzenie na kilka wierszy, co wizualnie połączy te dane. Standard HTML5 definiuje atrybut rowspan jako atrybut, który przyjmuje wartość liczbową, określającą liczbę wierszy, które mają zostać scalone. Przykładowy kod HTML mógłby wyglądać następująco: <table><tr><td rowspan='3'>Kategoria</td><td>Element 1</td></tr><tr><td>Element 2</td></tr><tr><td>Element 3</td></tr></table>, co w efekcie tworzy jedną komórkę o wysokości trzech wierszy oraz trzy osobne komórki w drugiej kolumnie. Użycie rowspan w praktyce jest nie tylko estetyczne, ale również poprawia czytelność danych, co jest niezmiernie ważne w interfejsach użytkownika.

Pytanie 28

Zapis CSS

margin: auto;

wskazuje, że marginesy są

A. dziedziczone z elementu nadrzędnego dla danego obiektu

B. obliczane przez przeglądarkę w taki sposób, aby element został wyśrodkowany poziomo

C. równe domyślnym wartościom marginesów elementu, do którego są przypisane

D. stałe dla konkretnej przeglądarki, niezależnie od rozmiaru jej okna

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS 'margin: auto;' jest kluczowy w kontekście wyśrodkowywania elementów blokowych w poziomie w ich rodzicach. Gdy zastosujemy ten styl, przeglądarka dynamicznie oblicza wartość marginesów po lewej i prawej stronie elementu, aby równomiernie rozłożyć pozostałą przestrzeń w kontenerze. W praktyce oznacza to, że jeśli mamy element o stałej szerokości umieszczony w szerszym kontenerze, zastosowanie 'margin: auto;' spowoduje, że ten element zostanie wyśrodkowany, co jest szczególnie przydatne w responsywnym projektowaniu stron internetowych. Dobrym przykładem może być użycie 'margin: auto;' w przypadku kontenera obrazka, gdzie chcemy, aby obrazek był zawsze wyśrodkowany na stronie niezależnie od rozmiaru okna przeglądarki. To podejście jest zgodne z najlepszymi praktykami CSS i jest szeroko stosowane w nowoczesnym web designie, co czyni strony bardziej estetycznymi i przyjaznymi dla użytkowników.

Pytanie 29

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

A. div {background-color:blue;}

B. div {shadow:blue;}

C. div {border-color:blue;}

D. div {color:blue;}

Brak odpowiedzi na to pytanie.

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

Pytanie 30

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

A. A.

B. C.

C. B.

D. D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź C wskazuje na właściwe zastosowanie właściwości CSS z użyciem solidnego czarnego obramowania o grubości 4 pikseli oraz marginesów wewnętrznych i zewnętrznych. Właściwa konfiguracja stylów CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, co jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych. Użycie właściwości background-color z wartością Teal pozwala na ustawienie koloru tła, co może być istotne dla zachowania spójności wizualnej projektu. Padding ustawia wewnętrzne marginesy elementu umożliwiając kontrolę nad przestrzenią wokół zawartości, co może wpływać na czytelność i estetykę. Margins z kolei określają przestrzeń zewnętrzną oddzielając element od innych sąsiednich elementów. Poprawne zrozumienie tych stylów pozwala na efektywne projektowanie UI z myślą o użytkowniku końcowym. Dodatkowo praktyczne zastosowanie solidnych obramowań jest powszechne w podkreślaniu istotnych sekcji wizualnych, co jest zgodne z dobrymi praktykami w projektowaniu stron.

Pytanie 31

Wskaż problem z walidacją w podanym fragmencie kodu HTML

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący... </p>

A. Znacznik br nie może występować wewnątrz znacznika p

B. Nieznany znacznik h6

C. Znacznik br nie został poprawnie zamknięty

D. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik zamykający b niezgodny z zasadą zagnieżdżania czyli poprawna odpowiedź 1 odnosi się do zasady poprawnego zagnieżdżania znaczników HTML Zasada ta mówi że znaczniki muszą być zamykane w odwrotnej kolejności do ich otwarcia W naszym przykładzie mamy otwierający znacznik b a następnie i co oznacza że najpierw powinien być zamknięty znacznik i a potem b Tego typu błąd jest często spotykany w kodzie HTML i może prowadzić do nieoczekiwanych problemów z wyświetlaniem strony Warto pamiętać że poprawne zagnieżdżanie znaczników wpływa na czytelność i utrzymanie kodu co jest kluczowe w większych projektach HTML jest językiem opartym na strukturze drzewiastej i każda niezgodność w zagnieżdżaniu może wpłynąć na sposób przetwarzania dokumentu przez przeglądarki Dbałość o szczegóły w strukturze dokumentu HTML jest zgodna z dobrymi praktykami branżowymi i wspomaga zgodność z różnymi przeglądarkami i urządzeniami co w konsekwencji poprawia dostępność i użyteczność strony internetowej

Pytanie 32

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. #menu { background-color: rgb(0,255,0); }

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

C. div:menu { color: green; }

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

Brak odpowiedzi na to pytanie.

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

Pytanie 33

Który z poniższych języków jest zazwyczaj używany do programowania front-endowego (wykonywanego po stronie klienta)?

A. CSS

B. PHP

C. Node.js

D. Perl

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
CSS, czyli Kaskadowe Arkusze Stylów, jest fundamentalnym językiem używanym do stylizacji stron internetowych. Jest to język front-endowy, co oznacza, że jego kod jest wykonywany po stronie klienta, czyli w przeglądarkach internetowych użytkowników. CSS pozwala na definiowanie wyglądu elementów HTML, takich jak kolory, czcionki, układ czy odstępy, co ma kluczowe znaczenie dla tworzenia atrakcyjnych i responsywnych interfejsów użytkownika. Przykładem może być zastosowanie CSS do stylizacji przycisku, gdzie można zmienić jego kolor, dodać cień oraz animacje przy najechaniu myszką. W standardach webowych CSS współpracuje z HTML oraz JavaScript, co zapewnia dynamiczne i interaktywne doświadczenia. Dobry projektant front-endowy powinien znać zasady związane z kaskadowością i dziedziczeniem w CSS, aby optymalnie wykorzystywać ten język do tworzenia estetycznych i użytecznych stron internetowych.

Pytanie 34

Wskaż prawidłowe twierdzenie odnoszące się do zaprezentowanego kodu HTML.

<video width="640" height="480" controls>
    <source src="animacja.mp4" type="video/mp4">
</video>

A. Ścieżka do pliku jest niepoprawna, nie zawiera pełnej ścieżki.

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

C. Kod może nie działać w przeglądarkach, które nie wspierają HTML5.

D. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby można go było odtworzyć.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź wskazująca, że kod może nie działać w przeglądarce, jeśli nie obsługuje ona HTML5, jest poprawna, ponieważ standard HTML5 wprowadził wiele nowych elementów, w tym znacznik <video>, który umożliwia osadzanie materiałów wideo w stronach internetowych. Przeglądarki, które nie obsługują HTML5, nie będą w stanie poprawnie interpretować tego kodu, co skutkuje brakiem możliwości odtworzenia wideo. Przykładem mogą być starsze wersje Internet Explorera, które nie były zgodne z HTML5. Dobrą praktyką jest testowanie strony w różnych przeglądarkach oraz wykorzystywanie polyfilli, które mogą wspierać starsze przeglądarki w obsłudze nowych funkcjonalności. Warto również zrozumieć, że aby zapewnić szeroką dostępność treści wideo, użycie znaczników HTML5 powinno być wspierane dodatkowymi informacjami o alternatywnych formatach oraz kodowaniu wideo, co zwiększa szanse na poprawne wyświetlenie treści na różnych platformach.

Pytanie 35

Elementarna animacja może być zapisana w formacie

A. TIFF

B. GIF

C. PSD

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format GIF (Graphics Interchange Format) jest powszechnie stosowany do tworzenia prostych animacji ze względu na swoją zdolność do kompresji obrazów i obsługi przez większość przeglądarek internetowych. GIF pozwala na zapisanie sekwencji obrazów w jednej pliku, co umożliwia ich wyświetlanie jako animacji. Standard GIF obsługuje maksymalnie 256 kolorów z palety, co czyni go idealnym do prostych grafik, takich jak ikony czy animacje internetowe. Dzięki metodzie kompresji Lempel-Ziv-Welch (LZW) możliwe jest zmniejszenie rozmiaru pliku bez utraty jakości, co jest kluczowe w kontekście transferu danych przez sieć. Przykłady zastosowania formatu GIF obejmują animowane banery reklamowe, emotikony oraz krótkie klipy wideo w formie GIF, które stały się popularne na platformach społecznościowych. Ponadto GIF wspiera przezroczystość i animacje w cyklu, co podnosi jego użyteczność w wielu aplikacjach multimedialnych. Z tego powodu GIF jest formatem, który oferuje zarówno funkcjonalność, jak i kompatybilność, co czyni go najlepszym wyborem dla prostych animacji.

Pytanie 36

Jaka linia w języku HTML wskazuje kodowanie znaków używane w dokumencie?

A. <meta charset="UTF-8">

B. <charset="UTF-8">

C. <meta encoding="UTF-8">

D. <encoding="UTF-8">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis <meta charset="UTF-8"> jest poprawną deklaracją kodowania znaków w dokumencie HTML, ponieważ jest zgodny z aktualnymi standardami W3C. Element <meta> powinien znajdować się w sekcji <head> dokumentu HTML i pozwala przeglądarkom na właściwe interpretowanie znaków w treści strony. Kodowanie UTF-8 jest szeroko stosowane, ponieważ obsługuje wszystkie znaki w standardzie Unicode, co czyni go idealnym dla aplikacji wielojęzycznych. Użycie poprawnego kodowania jest kluczowe, aby uniknąć problemów z wyświetlaniem tekstu, takich jak błędne znaki lub krzaki, które pojawiają się, gdy przeglądarka nie wie, jak zinterpretować dane. Przykładowo, jeżeli mamy stronę internetową w kilku językach, użycie UTF-8 zapewnia, że znaki diakrytyczne w języku polskim, czeskim czy niemieckim będą poprawnie wyświetlane. Warto również pamiętać, aby zawsze umieszczać tę deklarację jako pierwszą w sekcji <head>, aby zapewnić, że przeglądarka prawidłowo zinterpretuje wszystkie inne elementy. W kontekście SEO oraz dostępności, poprawne kodowanie jest istotne, ponieważ wpływa na indeksowanie treści przez wyszukiwarki oraz ich prezentację dla użytkowników.

Pytanie 37

W trakcie walidacji dokumentu HTML5 napotkano komunikat o treści: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>.

B. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

C. element <title> nie jest konieczny.

D. element <title> nie został poprawnie zamknięty przez </title>.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element <title> jest kluczowym składnikiem sekcji <head> każdego dokumentu HTML, zgodnie z wytycznymi W3C. Jego głównym zadaniem jest określenie tytułu strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Brak tego elementu w dokumencie skutkuje błędem walidacji, ponieważ HTML5 wymaga, aby każdy dokument miał zdefiniowany tytuł. Przykładowo, poprawny fragment dokumentu HTML5 powinien wyglądać następująco: <head><title>Mój dokument</title></head>. Niezdefiniowanie elementu <title> może negatywnie wpłynąć na SEO, ponieważ wyszukiwarki często używają tytułu strony do określenia jej zawartości. W praktyce oznacza to, że każda strona internetowa powinna mieć unikalny tytuł odzwierciedlający jej tematykę, co nie tylko poprawi doświadczenie użytkownika, ale także pomoże w pozycjonowaniu w wynikach wyszukiwania.

Pytanie 38

Projektant stworzył logo dla witryny internetowej. Jest to czarny symbol na przezroczystym tle. Aby zachować wszystkie cechy obrazu i umieścić go na stronie, projektant powinien zapisać obraz w formacie

A. JPEG

B. CDR

C. PNG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla grafiki internetowej, zwłaszcza gdy zależy nam na zachowaniu przezroczystości tła, co jest kluczowe w przypadku logotypów. PNG obsługuje kompresję bezstratną, co oznacza, że nie utracimy jakości obrazu przy zapisywaniu go. To szczególnie ważne w kontekście logo, które często musi być skalowane do różnych rozmiarów, a wszelkie zniekształcenia mogą wpłynąć na jego rozpoznawalność. Dodatkowo, format PNG pozwala na uzyskanie pełnej gamy kolorów, w tym przezroczystości w formacie RGBA. W praktyce oznacza to, że możesz umieścić czarny znak na dowolnym tle, a jego kształt zawsze zachowa wyrazistość oraz ostrość. Warto również zauważyć, że PNG jest wspierany przez wszystkie nowoczesne przeglądarki internetowe i systemy operacyjne, co czyni go wszechstronnym wyborem dla twórców stron internetowych. Standard PNG, opublikowany przez W3C, jest uznawany za jedno z najbardziej efektywnych rozwiązań dla grafiki w sieci.

Pytanie 39

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

A. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }

B. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }

C. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }

D. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest prawidłowa, ponieważ doskonale odpowiada układowi bloków przedstawionych na rysunku. Zastosowanie właściwości CSS float:left dla wszystkich trzech pierwszych bloków pozwala na ich ułożenie w jednym rzędzie w ramach dostępnej szerokości. Pierwszy blok zajmuje 30 procent, natomiast drugi i trzeci po 70 procent szerokości, co jest zgodne z przedstawionym układem. Dodatkowo, zastosowanie clear:both dla czwartego bloku spowoduje, że rozpocznie on nowy wiersz i zajmie całą szerokość dostępną poniżej poprzednich elementów. Takie rozwiązanie jest efektywne w tworzeniu responsywnych i elastycznych układów stron internetowych. Wykorzystanie float jest powszechnie stosowane w projektowaniu front-end, choć w nowych projektach coraz częściej zastępowane przez flexbox i grid. Warto zrozumieć działanie float i clear, ponieważ pozwalają na manipulację układem elementów na stronie, co jest kluczowe w tworzeniu czytelnych i estetycznych interfejsów użytkownika. Zrozumienie tych koncepcji jest niezbędne dla profesjonalistów zajmujących się tworzeniem stron internetowych.

Pytanie 40

Jakie oprogramowanie do zarządzania treścią umożliwia proste tworzenie oraz aktualizację witryny internetowej?

A. PHP

B. SQL

C. CMS

D. CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Systemy zarządzania treścią, znane jako CMS (Content Management System), są narzędziami stworzonymi specjalnie do łatwego tworzenia, edycji oraz zarządzania treściami na stronach internetowych. Dzięki CMS użytkownicy, nawet ci bez zaawansowanej wiedzy technicznej, mogą z łatwością aktualizować swoje witryny, dodawać nowe artykuły, zdjęcia oraz inne multimedia. Przykładami popularnych systemów CMS są WordPress, Joomla, czy Drupal. Te platformy oferują szeroką gamę wtyczek oraz szablonów, co pozwala na dostosowanie wyglądu i funkcjonalności strony do indywidualnych potrzeb. Standardy branżowe, takie jak WCAG dla dostępności czy SEO dla optymalizacji pod kątem wyszukiwarek, są również wspierane przez wiele systemów CMS, co czyni je idealnym rozwiązaniem dla osób chcących prowadzić profesjonalne serwisy internetowe. Zastosowanie CMS-u znacząco przyspiesza proces tworzenia stron oraz umożliwia ich łatwe dostosowywanie do zmieniających się potrzeb rynku.

Rozpocznij nowy egzamin

Powrót do strony głównej