Wyniki egzaminu

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:07

Egzamin zdany!

Wynik: 20/40 punktów (50,0%)

Wymagane minimum: 20 punktów (50%)

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

Jakie są etapy w odpowiedniej kolejności przy tworzeniu aplikacji?

A. Określenie wymagań, analiza oczekiwań klienta, programowanie, wdrożenie, testowanie
B. Programowanie, analiza oczekiwań klienta, określenie wymagań, wdrożenie, testowanie
C. Analiza oczekiwań klienta, określenie wymagań, programowanie, wdrożenie, testowanie
D. Analiza oczekiwań klienta, określenie wymagań, programowanie, testowanie, wdrożenie
Zrozumienie procesu tworzenia aplikacji wymaga znajomości właściwej sekwencji działań, co często bywa źródłem nieporozumień. Wiele osób uważa, że proces rozpoczyna się od samoistnego tworzenia aplikacji, co jest fundamentalnie błędne. Bez wcześniejszej analizy wymagań klienta, trudno jest określić, co tak naprawdę jest potrzebne. Przykładem tego błędnego myślenia jest odpowiedź, która zakłada, że tworzenie aplikacji może nastąpić przed zdefiniowaniem wymagań. Taki krok może prowadzić do stworzenia produktu, który nie spełnia oczekiwań użytkowników końcowych, co wiąże się z niepotrzebnymi kosztami korekcji i opóźnieniami w dostarczeniu finalnego rozwiązania. Wiele projektów zakończonych niepowodzeniem miało właśnie swoje źródło w braku odpowiednich faz analizy i specyfikacji, co jest wyraźnie widoczne w metodykach projektowych takich jak Waterfall. Nieprzemyślane wdrożenie bez wcześniejszych testów stanowi kolejny poważny błąd, ponieważ może prowadzić do sytuacji, w której użytkownicy otrzymują produkt pełen błędów i niedociągnięć. Zastosowanie podejścia opartego na solidnych praktykach inżynieryjnych, takich jak zbieranie wymagań, ich dokumentacja oraz przeprowadzanie testów przed wdrożeniem, jest kluczowe dla zapewnienia sukcesu projektu i satysfakcji użytkowników.

Pytanie 2

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

Ilustracja do pytania
A. Rys. D
B. Rys. A
C. Rys. B
D. Rys. C
Pierwszy wiersz tabeli HTML zazwyczaj zawiera nagłówki kolumn i jest oznaczony za pomocą znaczników <th> (table header). Zgodnie z dobrymi praktykami tworzenia tabel w HTML, nagłówki powinny być oddzielone od danych, aby poprawić zarówno estetykę, jak i funkcjonalność tabeli. W odpowiedzi Rys. D użyto znaczników <th> co poprawnie definiuje nagłówki kolumn. W ten sposób przeglądarki potrafią wyróżnić nagłówki, np. poprzez pogrubienie tekstu, co jest domyślnym zachowaniem. Zastosowanie <th> poprawia również dostępność tabel, ponieważ technologie asystujące lepiej interpretują strukturę danych w tabelach, co jest zgodne z wytycznymi WCAG (Web Content Accessibility Guidelines). Korzystając z <th>, można dodatkowo określić atrybut scope, który jeszcze bardziej precyzuje relacje w tabeli, co jest szczególnie przydatne w bardziej złożonych strukturach. W praktyce, kiedy projektujemy strony internetowe, stosowanie prawidłowych znaczników semantycznych jest kluczowe dla tworzenia zrozumiałego i dostępnego interfejsu użytkownika. Dlatego też wybór fragmentu z <th> jako reprezentującego pierwszy wiersz tabeli jest zgodny z zaleceniami i standardami nowoczesnego front-endu.

Pytanie 3

Jak w CSS ustawić, aby hiperłącze nieodwiedzone było żółte, a odwiedzone zielone?

A.
a:visited { color: yellow; } a:link { color: green; }
B.
a:hover { color: yellow; } a:visited { color: green; }
C.
a:link { color: yellow; } a:visited { color: green; }
D.
a:hover { color: green; } a:link { color: yellow; }
Pozostałe zapisy mylą pseudoklasy lub kolory. Wariant z a:visited { color: yellow; } i a:link { color: green; } zamienia kolory miejscami - nieodwiedzony wyszedłby zielony zamiast żółty. Dwie inne odpowiedzi używają :hover, które reaguje na najechanie kursorem, a nie na to, czy link był odwiedzony, i pomijają regułę dla stanu :link. Stan nieodwiedzony opisuje :link, a odwiedzony :visited, dlatego poprawny jest zapis a:link { color: yellow; } a:visited { color: green; }.

Pytanie 4

W dokumencie XHTML znajduje się fragment kodu, w którym występuje błąd walidacyjny. Co jest przyczyną tego błędu?

Ilustracja do pytania
A. Nie ma nagłówka szóstego poziomu
B. Znacznik <br> musi być zamknięty
C. Znaczniki powinny być pisane dużymi literami
D. Znacznik <b> nie może być umieszczany wewnątrz znacznika <p>
Wybór odpowiedzi, że nie istnieje nagłówek szóstego stopnia, jest błędny, ponieważ w specyfikacji XHTML nagłówek szóstego stopnia <h6> jest jak najbardziej dopuszczalny i służy do oznaczania najmniej ważnych nagłówków, w hierarchii od <h1> do <h6>. Pisanie znaczników wielkimi literami nie jest wymogiem XHTML. Chociaż XHTML jest wrażliwy na wielkość liter, co oznacza, że nazwy znaczników i atrybutów muszą być pisane małymi literami, odpowiedź sugerująca, że tylko wielkie litery są poprawne, jest błędna. Użycie <b> jako zagnieżdżonego w <p> jest standardową praktyką i jest zgodne z normami XHTML, ponieważ <b> służy do pogrubienia tekstu wewnątrz elementu blokowego, jakim jest <p>. Problem z tą odpowiedzią polega na błędnym zrozumieniu struktury HTML, gdzie zagnieżdżanie elementów inline w elementach blokowych jest dozwolone. Ważnym aspektem jest umiejętność rozpoznania, które elementy są inline, a które blokowe, i jak mogą być poprawnie zagnieżdżane w kontekście specyfikacji XHTML. Poprawne zrozumienie tych zasad pomaga w tworzeniu wydajniejszych i bardziej zgodnych dokumentów internetowych.

Pytanie 5

System informatyczny umożliwiający tworzenie, edycję i publikację treści na stronach internetowych bez konieczności posiadania zaawansowanej wiedzy technicznej, to

A. ERP
B. CMS
C. RDBMS
D. DBMS
W tym pytaniu łatwo się pomylić, bo wszystkie skróty brzmią dość podobnie i kojarzą się z systemami informatycznymi, ale ich przeznaczenie jest zupełnie inne niż w opisie. Kluczowe w treści pytania jest to, że chodzi o tworzenie, edycję i publikację treści na stronach WWW, bez wymagania zaawansowanej wiedzy technicznej. Innymi słowy – użytkownik ma mieć wygodny panel, formularze, edytor tekstu, przyciski do wstawiania obrazków, a cała techniczna „magia” ma dziać się w tle.

DBMS, czyli Database Management System, to system zarządzania bazą danych. Takie oprogramowanie jak MySQL, PostgreSQL, Oracle Database czy Microsoft SQL Server służy do tworzenia baz danych, tabel, wykonywania zapytań SQL, nadawania uprawnień użytkownikom. To jest narzędzie typowo dla administratorów baz i programistów, a nie dla redaktorów treści. DBMS sam w sobie nie udostępnia prostego interfejsu do publikowania artykułów na stronie WWW, tylko przechowuje dane, na których później może pracować aplikacja, np. CMS.

RDBMS (Relational Database Management System) to po prostu szczególny rodzaj DBMS, który opiera się na modelu relacyjnym – tabele, klucze główne, klucze obce, relacje między tabelami. Z punktu widzenia pytania to jeszcze bardziej techniczny poziom. RDBMS to „zaplecze” wielu systemów, także CMS-ów, ale nie narzędzie, z którego korzysta zwykły użytkownik do edycji treści. Typowym błędem myślowym jest utożsamianie „systemu informatycznego” z czymkolwiek, co pracuje na danych, bez rozróżnienia, czy to jest warstwa bazy danych, czy aplikacja użytkownika.

ERP (Enterprise Resource Planning) to z kolei rozbudowany system do zarządzania zasobami przedsiębiorstwa: magazyn, sprzedaż, księgowość, kadry, produkcja. Owszem, ERP może mieć moduł do wystawiania dokumentów, raportów, czasem nawet prosty portal B2B, ale jego głównym celem nie jest publikowanie treści na publicznej stronie WWW. To rozwiązanie skierowane do działów finansowych, logistycznych, produkcyjnych, a nie do webredaktorów. Mylenie ERP z CMS-em zwykle wynika z tego, że oba są „dużymi systemami” i czasem integrują się ze stroną internetową, ale pełnią inne role.

Właściwy system opisany w pytaniu to CMS – Content Management System – który łączy się zazwyczaj z bazą danych (często właśnie RDBMS), ale daje użytkownikowi przyjazny interfejs do zarządzania treścią. Jeżeli więc w opisie pojawia się tworzenie stron, artykułów, wpisów blogowych, galerii i to wszystko bez znajomości HTML czy SQL, to jest bardzo silna wskazówka, że chodzi właśnie o CMS, a nie DBMS, RDBMS czy ERP.

Pytanie 6

W HTML, aby utworzyć hiperłącze, które otworzy się w nowej karcie przeglądarki, należy użyć atrybutu

A. target = "_new"
B. rel = "external"
C. target = "_blank"
D. rel = "prev"
Atrybut target="_blank" to standard w HTML, który pozwala otwierać linki w nowej karcie przeglądarki. W praktyce jest to bardzo popularne rozwiązanie, bo dzięki temu użytkownik może sobie przeglądać stronę, a jednocześnie otworzyć coś nowego. Działa to tak, że jeśli dodasz ten atrybut do linku, przeglądarka po prostu otworzy go w nowej karcie lub oknie - to już zależy od ustawień. To naprawdę przydaje się, gdy linkujesz do dokumentacji, stron zewnętrznych albo mediów społecznościowych, gdzie chcesz, żeby użytkownik nie musiał zamykać tego, co aktualnie ogląda. Ale uwaga! Trzeba z tym atrybutem uważać i stosować go z głową, bo czasem lepiej dać użytkownikowi wybór, czy chce otworzyć link w nowej karcie, czy nie, żeby nie czuł się zdezorientowany.

Pytanie 7

Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?

Ilustracja do pytania
A. Rys. B
B. Rys.A
C. Rys. C
D. Rys. D
Nieprawidłowe odpowiedzi mogą wynikać z niezrozumienia struktury zagnieżdżonych list w HTML. Zrozumienie jak różne typy list i atrybuty wpływają na ich wyświetlanie jest kluczowe. Lista uporządkowana <ol> domyślnie numeruje swoje elementy co często prowadzi do założenia że wszystkie elementy muszą być numerowane w standardowy sposób. Jednak HTML pozwala na dostosowanie tego zachowania poprzez atrybuty type i start co może zmieniać domyślną numerację na litery czy inne formy. Kolejnym źródłem błędu jest zignorowanie zagnieżdżonej listy nieuporządkowanej <ul> która używa kropki jako punktora co różni się od standardowego kółka. Bez znajomości tych aspektów łatwo jest błędnie zinterpretować strukturę i wyświetlanie kodu. Typowe błędy myślowe wynikają z założeń że każda lista zachowa domyślną formę co nie zawsze jest prawdą w zaawansowanym HTML. Poprawne zrozumienie wymaga eksperymentowania i testowania różnych konfiguracji atrybutów aby w pełni wykorzystać potencjał HTML w tworzeniu elastycznych i dostosowanych interfejsów.

Pytanie 8

Logo platformy CMS noszącej nazwę Joomla! to

Ilustracja do pytania
A. C
B. A
C. D
D. B
Logo Joomla! jest charakterystyczne z uwagi na swoją kolorystykę i kształt symbolizujący współpracę oraz integrację. Zawiera cztery kolorowe elementy splecione w formie kwiatka lub wiru co często jest interpretowane jako symbol integracji społeczności i otwartości na różnorodność. Joomla! to system zarządzania treścią (CMS) napisany w PHP który wykorzystywany jest do tworzenia stron internetowych blogów i aplikacji internetowych. Jest jednym z najpopularniejszych CMS na świecie dzięki swojej elastyczności modułom oraz dużej społeczności wspierającej rozwój. Joomla! jest wykorzystywany zarówno przez małe przedsiębiorstwa jak i duże organizacje dzięki swojej możliwości skalowania i dostosowywania do indywidualnych potrzeb. Dodatkowo jego open-source'owy charakter pozwala na szerokie dostosowanie kodu do specyficznych wymagań co jest cenione przez programistów i deweloperów. Dobry wybór Joomla! jako CMS może znacząco przyspieszyć proces tworzenia i zarządzania treścią na stronie internetowej oferując jednocześnie wsparcie licznych rozszerzeń i szablonów

Pytanie 9

tr:nth-child(even) {background-color: #F2F2F2;}
Zastosowane formatowanie selektora tr:nth-child(even) spowoduje:
A. wypełnienie szarym tłem nieparzystych wierszy tabeli.
B. wypełnienie szarym tłem parzystych wierszy tabeli.
C. oddzielenie wierszy nieparzystych od parzystych wierszem z szarym tłem.
D. wypełnienie wszystkich wierszy tabeli szarym tłem.
Selektor CSS tr:nth-child(even) oznacza dokładnie: wybierz wszystkie elementy <tr>, które są parzystymi dziećmi swojego rodzica, licząc od 1 w górę. W CSS funkcja nth-child() przyjmuje słowo kluczowe even dla elementów parzystych (2, 4, 6, …) i odd dla elementów nieparzystych (1, 3, 5, …). To jest zdefiniowane w specyfikacji CSS Selectors Level 3. W Twoim przykładzie even powoduje, że przeglądarka nadaje styl background-color: #F2F2F2; wszystkim parzystym wierszom tabeli, czyli 2., 4., 6. itd. wierszowi <tr>. Dzięki temu powstaje tzw. zebra-striping, czyli naprzemienne kolorowanie wierszy tabeli, bardzo często stosowane w interfejsach webowych, bo poprawia czytelność danych i ułatwia śledzenie wiersza wzrokiem. W praktyce używa się tego zwykle razem z drugim stylem, np. tr:nth-child(odd) { background-color: white; }, żeby wyraźnie rozróżnić wiersze. Warto też pamiętać, że nth-child() liczy wszystkie dzieci danego rodzica, a nie tylko te z określoną klasą, więc jeżeli w tabeli pojawią się np. wiersze nagłówkowe <tr> w <thead>, to selektor tr:nth-child(even) zastosowany globalnie może dać trochę inne efekty niż się spodziewasz. Dobrą praktyką jest zawężanie selektora, np. tbody tr:nth-child(even), żeby kolorowanie dotyczyło tylko części z danymi, bez nagłówków. Z mojego doświadczenia warto też używać kolorów o niewielkim kontraście, tak jak #F2F2F2, żeby nie męczyć wzroku użytkownika przy długich tabelach.

Pytanie 10

W CSS wartości takie jak: underline, overline, line-through oraz blink odnoszą się do właściwości

A. text-align
B. font-style
C. text-decoration
D. font-decoration
Właściwość CSS 'text-decoration' jest używana do określenia dekoracji tekstu. Do jej wartości zaliczają się między innymi: 'underline' (podkreślenie), 'overline' (nadpisanie), 'line-through' (przekreślenie) oraz 'blink' (miganie), chociaż ostatnia z nich jest obecnie rzadko używana z powodu problemów z dostępnością i wsparciem w nowoczesnych przeglądarkach. W praktyce, użycie 'text-decoration' pozwala na poprawę czytelności tekstu oraz jego wyróżnienie w kontekście estetyki strony internetowej. Na przykład, stosując 'text-decoration: underline;' możemy podkreślić linki, co jest powszechną praktyką w projektowaniu stron. Zgodnie z wytycznymi W3C, stosowanie dekoracji tekstu powinno być przemyślane, aby nie wprowadzać zamieszania w interpretacji treści przez użytkowników. Przykładowo, nadpisanie może być użyte w kontekście wskazywania błędów, co wprowadza dodatkowe znaczenie do przekazu. Zrozumienie i umiejętne stosowanie 'text-decoration' jest kluczowe dla tworzenia profesjonalnych i funkcjonalnych interfejsów użytkownika.

Pytanie 11

Zamieszczony kod HTML formularza zostanie wyświetlony przez przeglądarkę w sposób:

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

stanowisko: obowiązki: sporządzanie dokumentacji
pisanie kodu
testy oprogramowania

B.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania

C.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania

D.

stanowisko:
obowiązki:
sporządzanie dokumentacji
pisanie kodu
testy oprogramowania
A. A.
B. B.
C. D.
D. C.
Przy ocenie, jak przeglądarka wyświetli formularz HTML, warto mieć na uwadze, że przeglądarki internetowe trzymają się dość sztywno tego, co wynika bezpośrednio z kodu źródłowego. Bardzo typowym błędem jest nadmierne skupienie się na samych polach wyboru czy zawartości formularza, bez uwzględnienia układu wynikającego z użycia znaczników <br> – to właściwie one decydują o tym, gdzie pojawiają się nowe linie. Ktoś może sądzić, że kolejność checked lub disabled zmieni znacząco wygląd – ale to nieprawda, bo atrybuty te wpływają na stan i interaktywność, a nie na rozmieszczenie. W jednej z błędnych propozycji pomieszano, które checkboxy są zaznaczone, a które nie, co prowadzi do przekłamań względem rzeczywistego kodu. Zdarza się też, że przy kopiowaniu kodu pomija się disabled lub checked przy konkretnym polu i całość wygląda inaczej niż powinna – tak po prostu nie działa przeglądarka. Ważne jest też zrozumienie, że disabled powoduje, iż pole jest wyszarzone i nie można na nim operować, natomiast checked przy polu checkbox ustawia je domyślnie jako zaznaczone. Pominięcie <br> po polu tekstowym sprawia, że kolejne elementy formularza lądują w jednej linii – co w praktyce bardzo rzadko się zdarza, bo narusza czytelność, a kod źródłowy wyraźnie tego nie przewiduje. Z mojego doświadczenia widziałem wiele formularzy, które przez nieuwagę programistów wprowadzały użytkownika w błąd przez złe rozmieszczenie elementów – nie chodzi tylko o „ładny wygląd”, ale też o funkcjonalność i dostępność. W praktyce branżowej trzymanie się tego, co wynika z kodu HTML, to podstawa, bo zapewnia przewidywalność działania na wszystkich platformach. Dobrym zwyczajem jest zawsze sprawdzić, jak kod wyświetla się w przeglądarce i porównać go z tym, co chcieliśmy osiągnąć. Dzięki temu unikamy nieporozumień i nieprawidłowych założeń, które mogą prowadzić do błędów zarówno w warstwie frontendowej, jak i podczas przetwarzania danych na serwerze.

Pytanie 12

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

A. Ruby on Rails
B. PHP
C. CSS
D. JavaScript
Poprawna odpowiedź to JavaScript, bo właśnie ten język działa bezpośrednio w przeglądarce użytkownika i pozwala na dynamiczną weryfikację formularzy jeszcze przed wysłaniem danych na serwer. JavaScript ma dostęp do drzewa DOM, więc może odczytać wartości pól, sprawdzić, czy nie są puste, czy e‑mail ma poprawny format, czy hasło ma odpowiednią długość, a nawet czy dwa pola hasła są identyczne. Z mojego doświadczenia to jest absolutny standard w nowoczesnych aplikacjach webowych: najpierw lekka walidacja po stronie klienta w JS, a dopiero potem solidna walidacja po stronie serwera.
Dobrym przykładem jest formularz rejestracji: po wpisaniu zbyt krótkiego hasła JavaScript może od razu wyświetlić komunikat pod polem, bez przeładowania strony. Można też blokować przycisk „Wyślij”, dopóki wszystkie wymagane pola nie są poprawnie wypełnione. W praktyce często używa się zdarzeń takich jak onsubmit na formularzu albo input/blur na polach, żeby na bieżąco sprawdzać dane. Można też korzystać z gotowych bibliotek walidacyjnych, ale pod spodem i tak pracuje JavaScript.
W dobrych praktykach przyjmuje się zasadę: walidacja po stronie klienta poprawia wygodę i szybkość obsługi (user experience), ale nie zastępuje walidacji po stronie serwera. JavaScript służy więc do „pierwszej linii obrony” i podpowiedzi użytkownikowi, a serwer (np. w PHP czy innym języku backendowym) musi i tak wszystko jeszcze raz sprawdzić ze względów bezpieczeństwa. Warto też pamiętać o wykorzystaniu wbudowanych mechanizmów HTML5 (atrybuty required, type="email" itd.), ale to JavaScript daje pełną kontrolę nad logiką i komunikatami błędów, bo pozwala tworzyć własne reguły i reagować na konkretne zachowania użytkownika.

Pytanie 13

Jak zapisać marginesy zewnętrzne: górny i dolny 20 px, lewy i prawy 40 px?

A.
margin: 20px 40px 40px 20px;
B.
margin: 20px 20px 40px 40px;
C.
margin: 40px 20px;
D.
margin: 20px 40px;
W zapisie skróconym z dwiema wartościami margin: pion poziom pierwsza dotyczy góry i dołu, druga lewej i prawej. Górny i dolny 20px, boczne 40px daje więc margin: 20px 40px;. Dlatego poprawny jest margin: 20px 40px;.

Pytanie 14

Jak wstawić obrazek tak, aby przylegający tekst znalazł się POŚRODKU wysokości obrazka?

A.
<img src="obrazek.png" alt="obraz" align="middle"> tekst
B.
<img src="obrazek.png" alt="obraz"> tekst
C.
<img src="obrazek.png" alt="obraz" hspace="30px"> tekst
D.
<img src="obrazek.png" alt="obraz" height="50%"> tekst
Aby przylegający tekst znalazł się POŚRODKU wysokości obrazka, dawniej używano atrybutu align="middle" w <img>. Dlatego poprawny jest zapis z align="middle". Warto wiedzieć, że atrybut align jest przestarzały - dziś robi się to przez CSS (vertical-align).

Pytanie 15

Ikona funkcji w edytorze grafiki rastrowej oznaczona jako „różdżka” pozwala na

Ilustracja do pytania
A. ręczne zaznaczanie fragmentów poprzez przeciąganie kursora
B. zaznaczenie obszaru w oparciu o kolor
C. wybranie konkretnego koloru i ustawienie go jako aktywnego
D. wybiórcze nakładanie koloru przy użyciu pędzla
Pierwsza odpowiedź sugeruje, że narzędzie różdżki służy do rozsmarowywania koloru za pomocą pędzla, co jest nieprawidłowym zrozumieniem jego funkcji. Rozsmarowywanie koloru to technika, która zwykle wykorzystuje narzędzie smudge, które jest przeznaczone do symulacji efektu fizycznego rozmazywania farby na płótnie. Różdżka nie ma tej zdolności, jej działanie opiera się na zaznaczaniu pikseli o zbliżonej kolorystyce. Odręczne zaznaczanie obszarów przez przeciąganie kursora, jak to opisano w drugiej odpowiedzi, jest zadaniem wykonywanym przez narzędzie lasso lub pióro. Różdżka działa automatycznie na podstawie koloru, nie wymaga ręcznego prowadzenia kursora po krawędziach obszaru. Czwarta odpowiedź odnosi się do funkcji pipety, która służy do pobierania koloru z obrazu i ustawiania go jako aktywnego do dalszego użytku w projekcie. Różdżka nie modyfikuje aktywnego koloru, ale pomaga w identyfikacji i zaznaczeniu obszarów o podobnej kolorystyce w celu ich edycji. Błędne postrzeganie tych funkcji często wynika z nieuwagi lub braku zrozumienia specyfiki narzędzi graficznych, co jest kluczowe w profesjonalnej pracy z obrazami i wymaga jasnego zrozumienia różnic oraz zastosowań poszczególnych narzędzi w edytorze graficznym. Aby unikać takich nieporozumień, zaleca się regularną praktykę oraz zapoznanie się z dokumentacją i tutorialami dotyczącymi używanego oprogramowania graficznego, co pozwoli na bardziej efektywne wykorzystanie potencjału dostępnych narzędzi.

Pytanie 16

Który format wideo NIE jest natywnie obsługiwany przez element <video> w HTML5?

A. MP4
B. AVI
C. WebM
D. Ogg
Pozostałe formaty należą do standardu HTML5 dla <video>. MP4, WebM i Ogg działają bez wtyczek w przeglądarkach. AVI, choć popularny na dyskach, nie należy do tej grupy. Dlatego natywnie nieobsługiwany jest AVI.

Pytanie 17

Aby wyeliminować nienaturalne odwzorowanie ukośnych krawędzi w grafice rastrowej, czyli tak zwane schodkowanie, należy zastosować filtr:

A. antyaliasingu
B. gradientu
C. szumu
D. pikselizacji
Każda z tych odpowiedzi nazywa realne pojęcie z grafiki, ale tylko jedno dotyczy wygładzania krawędzi. Filtr szumu pracuje na ziarnistości całego obrazu - dodaje lub redukuje losowe zakłócenia, a nie ostre schodki. Gradient to technika płynnego przejścia kolorów, używana do teł i efektów, która z problemem ukośnych linii nie ma nic wspólnego. Pikselizacja działa wręcz odwrotnie do tego, czego szukamy: celowo powiększa piksele, by ukryć szczegóły, więc krawędzie stają się jeszcze bardziej kanciaste. Wygładzeniem schodkowania zajmuje się antyaliasing, który na granicy kształtu wstawia piksele pośrednich kolorów i sprawia, że ukośna krawędź wydaje się gładka.

Pytanie 18

Którego atrybutu HTML5 użyć, aby w polu edycyjnym wyświetlić podpowiedź (tekst zastępczy)?

A.
required
B.
autofocus
C.
pattern
D.
placeholder
Pozostałe atrybuty pól robią co innego. pattern zadaje wzorzec (wyrażenie regularne) do walidacji wpisanej wartości. required wymusza wypełnienie pola przed wysłaniem. autofocus automatycznie ustawia kursor w polu po załadowaniu strony. Podpowiedź w polu pokazuje placeholder.

Pytanie 19

Aby strona WWW była przesyłana do przeglądarki w postaci zaszyfrowanej, należy zastosować protokół:

A. HTTP
B. SSH
C. HTTPS
D. SFTP
HTTPS to protokół HTTP działający przez szyfrowane połączenie TLS. Dane wymieniane między serwerem a przeglądarką - treść strony, dane logowania, formularze - są szyfrowane, więc osoba podsłuchująca ruch nie odczyta ich ani nie podmieni. Certyfikat serwera pozwala też przeglądarce potwierdzić tożsamość witryny (kłódka w pasku adresu). Dlatego do bezpiecznego, zaszyfrowanego przesyłania strony WWW stosuje się właśnie HTTPS.

Pytanie 20

Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?

Ilustracja do pytania
A. float: left;
B. clear: both;
C. table: left;
D. float: right;
Stosowanie table: left; w tym kontekście to strzał w kolano, bo taka właściwość nie istnieje. W CSS do tabel używamy innych właściwości jak display: table; lub display: table-cell;, ale nie do opływania elementów. A clear: both; jest używane, żeby zlikwidować opływ po float, więc to ważna sprawa, bo inaczej wszystko się sypie. Float: left; może opływać, ale w tej sytuacji nie postawi obrazka po prawej, bo ustawia go po lewej stronie. Wiele osób myśli, że float działa na osi Y, ale tak naprawdę dotyczy tylko osi X. Pamiętaj, że float, chociaż przydatny, to nie jedyny sposób na układanie elementów w CSS. Flexbox i grid to nowoczesne metody, które często są znacznie lepsze. By zbudować ładne interfejsy, musimy rozumieć jak różne właściwości CSS ze sobą współpracują.

Pytanie 21

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

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

Pytanie 22

Jakie kolory wchodzą w skład modelu barw CMYK?

A. cyjan, magenta, żółty i czarny
B. cyjan, magenta, żółty i karmazyn
C. czerwony, zielony, niebieski i kanał alfa
D. czerwony, zielony i niebieski
Czerwony, zielony i niebieski to model RGB (ekrany), a nie CMYK. „Karmazyn” zamiast czarnego jest błędny - czwartą składową CMYK jest CZARNY (K). Kanał alfa to przezroczystość, nie barwa modelu. CMYK to cyjan, magenta, żółty i czarny.

Pytanie 23

Który z akapitów został zapisany w wskazanym stylu, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

Ilustracja do pytania
A. Efekt 1
B. Efekt 3
C. Efekt 4
D. Efekt 2
W analizowanym pytaniu trzy efekty nie spełniają wszystkich warunków zdefiniowanych w stylu CSS dla paragrafu. Pierwszy efekt pokazuje tekst z niebieskim tłem który nie jest zgodny z zadanym stylem ponieważ kolor tła nie został określony w stylizacji. Zastosowanie niebieskiego tła często wynika z chęci wizualnego wyróżnienia elementu ale w tym przypadku styl określa jedynie kolor tekstu na niebieski a nie tła. Drugi efekt charakteryzuje się użyciem kursywy co również nie jest zgodne z deklaracją stylu CSS. Stylizacja paragrafu nie zawiera property font-style co oznacza że tekst powinien być w domyślnej formie czyli zwykły a nie kursywa. Trzeci i czwarty efekt mają niezgodne kolory tekstu i inne elementy które nie pasują do zadanego stylu. Typowym błędem w interpretacji stylów CSS jest niedokładne odczytanie wszystkich zdefiniowanych parametrów co prowadzi do błędnych założeń ostatecznego wyglądu elementu. Poprawne zrozumienie stylów wymaga zwrócenia uwagi na wszystkie atrybuty nawet jeśli nie są one wyraźnie widoczne na pierwszy rzut oka. W związku z tym kluczowe jest dokładne zapoznanie się z każdą definicją w stylu aby prawidłowo dopasować wygląd do specyfikacji.

Pytanie 24

Który program przekształca kod źródłowy napisany w danym języku programowania na język zrozumiały dla komputera?

A. edytor kodu źródłowego
B. środowisko programistyczne (IDE)
C. kompilator
D. debugger
Pozostałe odpowiedzi nie tłumaczą kodu na język maszynowy. Debugger służy do analizy działającego programu i wyszukiwania przyczyn błędów - nie zajmuje się przekładem kodu. Edytor kodu źródłowego to narzędzie do pisania i formatowania kodu (z podświetlaniem składni), ale samo nie przetwarza go na postać wykonywalną. Środowisko programistyczne (IDE) łączy wiele narzędzi w jednym, jednak właściwą kompilację wykonuje dopiero wbudowany w nie kompilator. Tłumaczenie kodu źródłowego na język komputera to zadanie kompilatora, dlatego ta odpowiedź jest poprawna.

Pytanie 25

Który z wymienionych programów służy do tworzenia i edycji grafiki wektorowej?

A. WordPad
B. Paint
C. Audacity
D. Corel Draw
Corel Draw to popularny program do tworzenia i edycji grafiki wektorowej, w której obraz opisują krzywe i kształty (a nie piksele), więc można go dowolnie skalować bez utraty jakości. Wykorzystuje się go m.in. do logotypów, ilustracji i materiałów do druku. Do tej samej kategorii należą Inkscape (darmowy) i Adobe Illustrator, a przeciwieństwem są edytory rastrowe, takie jak GIMP czy Photoshop. Dlatego do grafiki wektorowej służy Corel Draw.

Pytanie 26

W CSS zdefiniowano styl dla pola edycji. Taki obszar będzie miał jasnozielone tło

input:focus { background-color: LightGreen; }
A. po kliknięciu myszą w celu wprowadzenia tekstu
B. gdy zostanie na niego najechane kursorem myszy bez kliknięcia
C. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie
D. w każdej sytuacji
W języku CSS pseudoklasa :focus jest używana do definiowania stylów dla elementów, które są w stanie aktywnego fokusu. W przypadku elementów formularza, takich jak pola tekstowe input, fokus uzyskuje się poprzez kliknięcie myszą lub użycie klawisza tab, co pozwala na wprowadzenie tekstu. Pseudoklasa :focus umożliwia stylizację elementu tylko wtedy, gdy jest aktywny, co jest kluczowe dla poprawy użyteczności interfejsu użytkownika. W przykładzie podanym w pytaniu, gdy pole edycyjne input uzyska fokus, jego tło zmieni się na jasnozielone dzięki właściwości background-color ustawionej na LightGreen. Takie zastosowanie stylów CSS jest powszechne w projektowaniu formularzy, gdzie wizualne wskazanie aktywnego elementu jest istotne dla użytkownika. Dobre praktyki projektowania interfejsów kładą nacisk na czytelność i intuicyjność, co zwiększa dostępność i wygodę użytkowania aplikacji webowych. Stylowanie z wykorzystaniem pseudoklasy :focus pozwala projektantom i deweloperom tworzyć interfejsy, które są nie tylko estetyczne, ale także funkcjonalne, wspierając użytkowników w efektywnym korzystaniu z aplikacji.

Pytanie 27

Której wartości text-transform użyć, aby każda pierwsza litera wyrazu była wielka?

A.
underline
B.
capitalize
C.
lowercase
D.
uppercase
Wartość capitalize właściwości text-transform sprawia, że każda pierwsza litera WYRAZU staje się wielka (np. „ala ma psa” → „Ala Ma Psa”). Dlatego do tego efektu służy capitalize.

Pytanie 28

Aby strona internetowa była bardziej dostępna dla osób niewidomych, obrazom wstawianym znacznikiem img należy nadać atrybut:

A.
src
B.
style
C.
text
D.
alt
Atrybut alt znacznika <img> zawiera tekst alternatywny - krótki opis tego, co przedstawia obraz. Czytnik ekranu, z którego korzystają osoby niewidome, odczytuje tę treść na głos, dzięki czemu użytkownik wie, co jest na obrazku. Tekst alternatywny pokazuje się też, gdy obraz się nie wczyta. Dlatego dla dostępności obrazom nadaje się atrybut alt.

Pytanie 29

Którego narzędzia użyć, aby usunąć szum tła z nagrania (z taniego mikrofonu)?

A. echa
B. wyciszenia
C. usuwania szumów
D. obwiedni
Stały szum tła z taniego mikrofonu usuwa się narzędziem „usuwania szumów” (np. Noise Reduction w Audacity) - analizuje ono próbkę samego szumu i odejmuje go z całego nagrania. Dlatego należy użyć usuwania szumów.

Pytanie 30

Jaką funkcję pełni atrybut value w polu formularza, np. <input type="text" name="name" value="value">?

A. określa nazwę pola
B. określa domyślną wartość pola
C. ustawia pole jako tylko do odczytu
D. ogranicza maksymalną długość pola
Atrybut value w polu formularza ustala jego wartość początkową - tekst, który pojawia się w polu zaraz po załadowaniu strony i zostanie wysłany, jeśli użytkownik go nie zmieni. W przykładzie value="value" pole tekstowe od razu zawiera słowo „value”. Dlatego value określa domyślną wartość pola.

Pytanie 31

Na ilustracji przedstawiono konfigurację serwera Apache dla środowiska XAMPP. Pod jakim lokalnym adresem jest on dostępny?

Ilustracja do pytania
A. localhost:80
B. 127.0.0.1:70
C. 192.168.0.1:3306
D. htdocs
W tym zadaniu kluczowe jest zrozumienie różnicy między katalogiem serwera, adresem IP, nazwą hosta i numerem portu. W XAMPP-ie Apache udostępnia pliki z katalogu „htdocs”, ale ten katalog nie jest adresem, pod który łączy się przeglądarka. To tylko folder w systemie plików, fizyczna lokalizacja plików strony. Adres, którego używamy w pasku URL, zawsze składa się z protokołu (np. http), nazwy hosta lub adresu IP oraz opcjonalnie numeru portu. Dlatego wpisanie samego „htdocs” w przeglądarce nie ma sensu – to nie jest ani host, ani protokół. Częsty błąd polega na myleniu ścieżki na dysku z adresem URL. Kolejna pułapka to założenie, że Apache w XAMPP zawsze działa na domyślnym porcie 80, więc „localhost:80” będzie na pewno poprawny. W teorii HTTP faktycznie używa domyślnie portu 80, ale w praktyce w środowisku deweloperskim bardzo często port jest zmieniany, np. gdy port 80 jest zajęty przez inny proces. Na zrzucie ekranu w kolumnie „Port(s)” wyraźnie widać, że Apache nasłuchuje na porcie 70, więc użycie „localhost:80” wskazywałoby na inny port niż rzeczywiście skonfigurowany. To powoduje brak połączenia lub połączenie z zupełnie inną usługą. Podobnie adres „127.0.0.1:70” jest poprawną kombinacją hosta lokalnego i właściwego portu, ale przykład „127.0.0.1:70” w zadaniu jest właśnie tą właściwą odpowiedzią, a nie jej modyfikacją z innym portem. Z kolei „192.168.0.1:3306” to już zupełnie inna bajka: adres z puli prywatnej sieci LAN i port 3306, który standardowo jest używany przez serwer MySQL, a nie przez serwer WWW Apache. Taki adres może wskazywać na bazę danych, do której łączy się aplikacja, ale nie jest to adres, pod który użytkownik wchodzi w przeglądarce, żeby zobaczyć stronę. Typowy błąd myślowy polega tutaj na mieszaniu pojęć: katalogu dokumentów, portu HTTP, portu MySQL oraz lokalnego adresu IP. Dobra praktyka jest taka, żeby zawsze patrzeć w panelu XAMPP konkretnie na kolumnę „Port(s)” przy module Apache i na tej podstawie budować URL, np. http://127.0.0.1:port lub http://localhost:port. Dzięki temu unikasz zgadywania i szybko wychwytujesz, czy problem leży w złym porcie, czy gdzie indziej.

Pytanie 32

Aby dołączyć do strony zewnętrzny skrypt JavaScript o nazwie skrypt.js, należy zapisać w kodzie HTML:

A.
<link rel="JavaScript" href="skrypt.js">
B.
<link rel="script" href="skrypt.js">
C.
<script src="skrypt.js"></script>
D.
<script>skrypt.js</script>
Pozostałe zapisy nie wczytają pliku ze skryptem. <script>skrypt.js</script> bez atrybutu src potraktuje napis „skrypt.js” jak kod JavaScript, a nie jak ścieżkę do pliku, więc nic sensownego się nie wykona. Oba warianty z <link> są błędne, bo ten znacznik służy do dołączania zasobów takich jak arkusze stylów (CSS), a nie skryptów - żadna wartość atrybutu rel tego nie zmieni. Zewnętrzny skrypt podpina się przez <script src="...">, dlatego to ono jest poprawne.

Pytanie 33

Który z czterech podstawowych kolorów modelu CMYK to:

A. brązowy
B. pomarańczowy
C. zielony
D. czarny
CMYK to model barw stosowany w druku, oparty na czterech kolorach: Cyan (niebieskozielony), Magenta (purpurowy), Yellow (żółty) oraz Key/blacK, czyli CZARNY. Dlatego jednym z czterech kolorów CMYK jest czarny.

Pytanie 34

Którą funkcję z menu Kolory programu GIMP użyto, w celu uzyskania efektu przedstawionego w filmie?

A. Inwersja.
B. Progowanie.
C. Krzywe.
D. Barwienie.
Wiele osób myli w GIMP-ie różne narzędzia z menu Kolory, bo na pierwszy rzut oka kilka z nich „mocno zmienia” obraz. Jednak efekt pokazany na filmie, gdzie obraz staje się dwuwartościowy (czarno-biały, bez półtonów), jest typowym działaniem funkcji Progowanie. Kluczowe jest tu zrozumienie, czym różnią się od siebie dostępne operacje. Krzywe służą do zaawansowanej korekcji tonalnej i kontrastu. Można nimi mocno przyciemnić lub rozjaśnić wybrane zakresy jasności, robić tzw. efekt kontrastu „S”, korygować prześwietlenia itd. Ale nawet przy bardzo agresywnych ustawieniach krzywych obraz nadal zawiera półtony – pojawiają się stopniowe przejścia między odcieniami, a nie ostre odcięcie na zasadzie czarne/białe. To świetne narzędzie do retuszu zdjęć, ale nie do uzyskania efektu progowania. Inwersja (Kolory → Inwersja) po prostu odwraca wartości kolorów lub jasności: jasne staje się ciemne, czerwony zmienia się na cyjan, zielony na magentę itd. To jak negatyw fotograficzny. Struktura szczegółów pozostaje identyczna, zmienia się tylko ich „biegun”. Nie pojawia się żadne odcięcie progowe, więc obraz wciąż ma pełne spektrum odcieni. W praktyce inwersja przydaje się np. przy przygotowaniu masek lub pracy z materiałami skanowanymi, ale nie generuje typowego, „plakatowego” efektu czerni i bieli jak progowanie. Barwienie z kolei (Kolory → Barwienie) służy do nadania całemu obrazowi jednolitego odcienia, zwykle po wcześniejszym sprowadzeniu go do skali szarości. Można w ten sposób uzyskać np. sepię, niebieski ton nocny albo dowolny kolorystyczny „filtr”. Jasność i kontrast lokalny pozostają bardzo podobne, zmienia się dominująca barwa. To zupełnie inna kategoria operacji niż progowanie, które pracuje na poziomie progów jasności, a nie na poziomie koloru. Typowym błędem jest patrzenie tylko na to, że „obraz bardzo się zmienił” i przypisywanie tego narzędziom takim jak krzywe czy inwersja. W pracy z grafiką warto zawsze zadać sobie pytanie: czy efekt polega na zmianie rozkładu jasności, na odwróceniu kolorów, czy na twardym podziale na dwa poziomy? Jeśli widzisz brak półtonów i ostre granice, praktycznie zawsze chodzi o progowanie, które zostało wskazane jako poprawna funkcja.

Pytanie 35

Którego elementu nie powinno się umieszczać w nagłówku pliku HTML?

A. <title>
B. <link>
C. <h2>
D. <meta>
Udzielenie odpowiedzi na pytanie o znaczniki w nagłówku dokumentu HTML może prowadzić do nieporozumień, jeśli nie zrozumie się właściwego kontekstu użycia każdej z opcji. Znacznik <link>, używany do powiązania dokumentu HTML z zasobami zewnętrznymi, takimi jak arkusze stylów CSS, powinien być umieszczany w sekcji <head>, a nie w <body>. Jego zastosowanie ma kluczowe znaczenie dla ładowania stylów na stronie, co wpływa na jej wygląd i układ. Z kolei znaczniki <title> i <meta> również są przeznaczone do umieszczania w sekcji <head> i dostarczają istotnych informacji o stronie, takich jak tytuł, opis i słowa kluczowe. Tytuł wyświetlany jest na pasku tytułowym przeglądarki oraz w wynikach wyszukiwania, a metadane wpływają na SEO oraz udostępnianie treści w serwisach społecznościowych. Niepoprawne byłoby zatem umieszczanie tych znaczników w sekcji <body>, ponieważ nie spełniają swojej funkcji w kontekście strukturalnym dokumentu. Warto pamiętać, że nieprawidłowe umiejscowienie znaczników w HTML narusza standardy W3C, co może prowadzić do problemów z renderowaniem strony i jej użytecznością. Zrozumienie, gdzie i jak stosować różne znaczniki, jest niezbędne dla tworzenia poprawnych i efektywnych stron internetowych.

Pytanie 36

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

A. grupowania.
B. sumy.
C. części wspólnej.
D. wykluczenia.
Prawidłowo – w filmie została użyta funkcja grupowania. W grafice wektorowej, np. w programach typu Inkscape, CorelDRAW czy Illustrator, grupowanie służy właśnie do logicznego połączenia kilku obiektów w jeden „zestaw”, ale bez trwałego mieszania ich geometrii. To znaczy: tekst dalej pozostaje tekstem, wielokąt dalej jest wielokątem, tylko są traktowane jak jeden obiekt przy przesuwaniu, skalowaniu czy obracaniu. Dzięki temu operacja jest w pełni odwracalna – w każdej chwili możesz rozgrupować elementy i edytować każdy osobno.
Moim zdaniem to jest podstawowa dobra praktyka w pracy z projektami, które mogą wymagać późniejszych poprawek: podpisy, etykiety, logotypy, schematy techniczne. Jeśli połączysz tekst z kształtem za pomocą operacji boolowskich (suma, część wspólna, wykluczenie), to tekst zwykle zamienia się na krzywe, przestaje być edytowalny jako tekst. To bywa potrzebne przy przygotowaniu do druku czy eksportu do formatu, który nie obsługuje fontów, ale nie wtedy, gdy zależy nam na łatwej edycji.
Z mojego doświadczenia: przy projektowaniu interfejsów, ikon, prostych banerów na WWW czy grafik do multimediów, najrozsądniej jest najpierw grupować logicznie elementy (np. ikona + podpis), a dopiero na samym końcu, gdy projekt jest ostateczny, ewentualnie zamieniać tekst na krzywe. Grupowanie pozwala też szybko zaznaczać całe moduły projektu, wyrównywać je względem siebie, duplikować całe zestawy (np. kafelki menu, przyciski z opisami) bez ryzyka, że coś się rozjedzie. W grafice komputerowej to taka podstawowa „organizacja pracy” – mniej destrukcyjna niż różne operacje na kształtach i zdecydowanie bardziej elastyczna przy późniejszych zmianach.

Pytanie 37

W języku HTML stworzono definicję tabeli. Który z rysunków ilustruje jej działanie?

Ilustracja do pytania
A. Rysunek 3
B. Rysunek 1
C. Rysunek 4
D. Rysunek 2
Prawidłowa odpowiedź to Rysunek 1 ponieważ odwzorowuje on strukturę tabeli opisaną w kodzie HTML zaprezentowanym w pytaniu. Kod HTML przedstawia tabelę z dwoma wierszami. Pierwszy wiersz zawiera dwie komórki z tekstami 'pierwszy' i 'drugi'. Drugi wiersz posiada jedną komórkę z tekstem 'trzeci' która zajmuje szerokość dwóch kolumn dzięki zastosowaniu atrybutu colspan=2. Właśnie ta cecha sprawia że drugi rysunek jest poprawny gdyż w nim komórka z tekstem 'trzeci' rozciąga się na szerokość dwóch kolumn tabeli. Takie podejście jest zgodne z zasadami projektowania tabel w HTML gdzie atrybut colspan pozwala na łączenie kolumn co jest szczególnie przydatne przy tworzeniu złożonych układów danych w tabelach. Dzięki zastosowaniu tego atrybutu można efektywnie zarządzać szerokością komórek i ich położeniem co zwiększa elastyczność w projektowaniu układów na stronach internetowych. Warto zwrócić uwagę na fakt że użycie atrybutu 'border' z wartością 1 powoduje wyświetlenie widocznej ramki co jest dobrze zilustrowane na Rysunku 1. Zrozumienie i umiejętne zastosowanie takich technik w projektowaniu stron jest kluczowe dla tworzenia przejrzystych i funkcjonalnych interfejsów użytkownika.

Pytanie 38

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

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

Pytanie 39

Który znacznik HTML jest elementem BLOKOWYM?

A.
<p>
B.
<span>
C.
<img>
D.
<strong>
Element BLOKOWY zajmuje całą szerokość i zaczyna się od nowej linii - takim elementem jest akapit <p>. Dlatego elementem blokowym jest <p>.

Pytanie 40

Aby uzyskać płynne przejście pomiędzy dwoma kolorami w grafice, należy zastosować:

A. pikselizację
B. filtr szumu
C. antyaliasing
D. gradient
Pozostałe pojęcia dotyczą innych operacji na obrazie. Antyaliasing wygładza „schodki” na ukośnych krawędziach, mieszając kolory tylko na ich granicy - nie tworzy rozciągniętego przejścia barw. Filtr szumu pracuje na ziarnistości: dodaje lub usuwa losowe zakłócenia, co z płynnym przejściem kolorów nie ma związku. Pikselizacja celowo powiększa piksele, by ukryć szczegóły, więc raczej psuje gładkość, niż ją tworzy. Płynne przejście jednego koloru w drugi daje gradient, dlatego to on jest poprawną odpowiedzią.