Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 19 czerwca 2026 13:45
Data zakończenia: 19 czerwca 2026 14:12

Egzamin niezdany

Wynik: 19/40 punktów (47,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W zaprezentowanym fragmencie kodu HTML zdefiniowano pole input, które można opisać jako

<input type="password" name="pole">

A. dopuszcza jedynie wprowadzanie wartości liczbowych

B. zawiera domyślny tekst „pole”

C. pokazuje znaki, które zostały do niego wprowadzone

D. ukrywa znaki, które zostały do niego wprowadzone

W formularzach HTML często spotykamy różne typy pól input, mające specyficzne zastosowania. Pole input z atrybutem type="text" pozwala na wpisywanie dowolnego tekstu, co sprawia, że jest ono bardziej elastyczne, ale nie zapewnia żadnej ochrony dla wprowadzanych danych. Problematyczne mogą być sytuacje, gdzie takie pole jest używane dla danych wrażliwych, ponieważ nie oferuje ono żadnego poziomu prywatności. Wprowadzenie domyślnego tekstu w polu input jest realizowane poprzez atrybut value, który ustawia początkową wartość, widoczną dla użytkownika. To rozwiązanie bywa mylone z placeholderem, który służy jako podpowiedź wewnątrz pola, ale nie jest domyślną wartością samego pola. Input o typie "number" w HTML ogranicza wprowadzane dane wyłącznie do liczb, co jest przydatne w przypadku pól wymagających wartości liczbowych, takich jak wiek czy ilość. Choć to ograniczenie jest zasadne i chroni przed błędami użytkownika, nie ma zastosowania w kontekście ochrony prywatności danych. Typ password natomiast nie tylko ogranicza wprowadzone dane, ale również ukrywa je przed wglądem, co jest kluczowe dla zapewnienia bezpieczeństwa. Tym samym, zrozumienie różnic w funkcjonalności i zastosowaniu tych różnych typów pól pozwala na lepsze projektowanie bezpiecznych i funkcjonalnych formularzy w aplikacjach webowych. Błędem jest zakładanie, że każde pole input domyślnie zabezpiecza dane, co często prowadzi do niepoprawnych implementacji, które mogą narazić użytkowników na ryzyko wycieku danych.

Pytanie 2

Który selektor stylizuje akapity z klasą tekst ORAZ element blokowy z identyfikatorem obrazki?

p#tekst, div.obrazki

p.tekst + div#obrazki

p.tekst, div#obrazki

p#tekst + div.obrazki

Klasę oznacza kropka (p.tekst = akapity klasy tekst), a identyfikator krzyżyk (div#obrazki = <div> o id obrazki). PRZECINEK łączy oba selektory w grupę, więc reguła obejmie jedno i drugie. Dlatego poprawny jest p.tekst, div#obrazki.

Pytanie 3

W semantycznym HTML odpowiednikiem tagu <b>, który nie tylko pogrubia tekst, ale również oznacza go jako istotniejszy, jest

A. <strong>

B. <ins>

C. <em>

D. <mark>

Znaczniki HTML pełnią różne funkcje, a ich wybór przekłada się na semantykę oraz dostępność treści w sieci. Odpowiedzi, które nie są związane z <strong>, mogą wprowadzać w błąd co do prawidłowego użycia semantyki w HTML. Znak <ins> oznacza tekst, który został dodany do dokumentu, ale nie wskazuje na jego wadliwość ani nie nadaje mu specjalnego znaczenia w kontekście treści. Stosowanie <ins> w miejscu <strong> może prowadzić do nieporozumień co do roli danego tekstu, jako że jego głównym celem jest zaznaczenie nowo dodanych informacji, a nie akcentowanie ważności. Z kolei <mark> służy do wyróżniania tekstu na tle innych w celu wskazania jego istotności, ale nie definiuje go jako bardziej znaczącego w kontekście treści, co oznacza, że jego zastosowanie nie jest zgodne z wymaganiami semantyki. Natomiast <em> wskazuje na tekst, który powinien być akcentowany, ale w innym sensie – nie chodzi o znaczenie samego tekstu, a raczej o jego intonację w przypadku mowy, co w kontekście dokumentów HTML jest niewłaściwe. Błędy te są wynikiem nieporozumienia, gdzie użytkownicy mogą mylić różne znaczniki, nie rozumiejąc ich semantycznych różnic. Warto świadomie stosować odpowiednie znaczniki, by poprawić jakość i dostępność tworzonych treści w sieci.

Pytanie 4

Aby uzyskać przedstawiony efekt napisu w programie INKSCAPE / COREL, należy

A. zastosować opcję sumy z kołem

B. skorzystać z opcji gradientu

C. zastosować opcję wykluczenia z kołem

D. skorzystać z opcji wstaw / dopasuj tekst do ścieżki

Zastosowanie funkcji wykluczenia z kołem nie jest właściwe w kontekście dopasowywania tekstu do ścieżki ponieważ funkcja ta służy do tworzenia efektów wycinania w których elementy jednego obiektu są wykluczane z drugiego. Jest to przydatne w sytuacjach gdzie potrzebujemy stworzyć złożone kształty poprzez odejmowanie jednego obiektu od drugiego. Natomiast zastosowanie funkcji sumy z kołem odnosi się do łączenia kilku obiektów w jeden nowy kształt co jest użyteczne przy tworzeniu złożonych kompozycji graficznych ale nie ma związku z manipulowaniem kształtem tekstu. Funkcja gradientu jest związana z kolorowaniem obiektów przez stopniowe przechodzenie jednego koloru w drugi co nadaje obiektom atrakcyjny efekt wizualny ale nie wpływa na kształtowanie liter wzdłuż ścieżki. Typowym błędem jest myślenie że te funkcje mogą być używane wymiennie z narzędziami do tekstu co wynika z niepełnego zrozumienia ich specyficznych zastosowań i ograniczeń w kontekście projektowania grafiki wektorowej. Zrozumienie różnych funkcji dostępnych w programach do grafiki wektorowej jak Inkscape czy CorelDRAW jest kluczowe dla efektywnego tworzenia projektów które są zarówno estetyczne jak i funkcjonalne. Profesjonalne wykorzystanie tych narzędzi wymaga nie tylko znajomości ich podstawowych funkcji ale także świadomości kontekstu ich użycia oraz możliwości jakie oferują w tworzeniu zaawansowanych projektów graficznych które spełniają określone wymagania wizualne i techniczne.

Pytanie 5

Jakie narzędzie jest używane do organizowania oraz przedstawiania danych z wielu rekordów w celu ich wydruku lub dystrybucji?

A. raport

B. kwerenda

C. formularz

D. makropolecenie

Raport to narzędzie, które umożliwia zgrupowanie i prezentowanie informacji z wielu rekordów, co jest kluczowe w kontekście analizy danych oraz podejmowania decyzji biznesowych. Tworzenie raportów pozwala na syntetyzowanie informacji, co sprawia, że są one bardziej zrozumiałe dla odbiorców. W praktyce raporty mogą być wykorzystywane do monitorowania wyników sprzedaży, analiz finansowych, badań rynkowych czy oceny efektywności działań marketingowych. Dzięki zastosowaniu narzędzi do raportowania, takich jak systemy Business Intelligence, możliwe jest generowanie szczegółowych zestawień oraz wizualizacji, które wspierają decyzje strategiczne. Dobre praktyki w zakresie raportowania obejmują jasne definiowanie celów raportu, dobór odpowiednich wskaźników KPI oraz zastosowanie wizualizacji danych, co pozwala na lepsze zrozumienie przedstawianych informacji. W kontekście standardów branżowych, raporty powinny być tworzone zgodnie z zasadami klarowności, precyzji i adekwatności, aby skutecznie odpowiadały na potrzeby użytkowników.

Pytanie 6

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

A. DBMS

B. RDBMS

C. ERP

D. CMS

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 7

Którą wartość atrybutu name znacznika <meta> wykorzystuje się do kontrolowania obszaru widzialnego na różnych urządzeniach, na których jest wyświetlana strona internetowa?

A. viewport

B. keywords

C. description

D. generator

Poprawnie wskazana została wartość „viewport”. W praktyce właśnie meta name="viewport" służy do kontrolowania tzw. obszaru widzialnego (ang. viewport) na urządzeniach mobilnych i desktopowych. Przeglądarka mobilna domyślnie zakłada szeroką stronę i sztucznie ją pomniejsza, żeby „zmieściła się” na ekranie telefonu. Dopiero meta viewport mówi jej: potraktuj szerokość ekranu urządzenia jako bazową szerokość strony.
Najczęściej spotykana, zgodna z dobrymi praktykami konstrukcja to: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Parametr width=device-width ustawia szerokość obszaru widzialnego na szerokość ekranu urządzenia, a initial-scale=1.0 definiuje początkowe powiększenie. Dzięki temu layout responsywny oparty na media queries w CSS działa poprawnie, bez dziwnych przeskalowań i zbyt małej czcionki.
W nowoczesnym front-endzie przyjmuje się, że każda strona, która ma być używalna na telefonach, tabletach i laptopach, powinna mieć prawidłowo ustawiony meta viewport. Moim zdaniem to jest absolutna podstawa RWD, zaraz obok poprawnego użycia jednostek względnych (np. %, vw, em) i zaprojektowania siatki w CSS. Warto też pamiętać, żeby nie przesadzać z blokowaniem powiększania (np. user-scalable=no), bo to pogarsza dostępność strony dla osób słabiej widzących i jest uznawane za złą praktykę. Podsumowując: jeśli chcesz mieć stronę, która naprawdę „żyje” na różnych ekranach, meta name="viewport" to obowiązkowy element w sekcji <head>.

Pytanie 8

W sekcji <head> (w elemencie <meta ... >) witryny www nie umieszcza się danych dotyczących

A. autora

B. automatycznego odświeżania

C. kodowania

D. typu dokumentu

Umieszczanie informacji o autorze, kodowaniu oraz automatycznym odświeżaniu w znaczniku <head> jest praktyką zgodną ze standardami, jednak występują nieporozumienia co do roli i miejsca deklaracji typu dokumentu. Wiele osób może błędnie zakładać, że typ dokumentu można umieścić w sekcji <head>, co jest nieprawidłowe. Deklaracja DOCTYPE, która informuje przeglądarkę o wersji HTML, musi być umieszczona przed znacznikiem <html> w kodzie. Tymczasem w sekcji <head> umieszczamy metadane, które mają bezpośredni wpływ na interpretację zawartości strony i jej interakcję z użytkownikami oraz wyszukiwarkami. Często popełnianym błędem jest mylenie tych dwóch elementów, co prowadzi do nieprawidłowego kodowania strony. Odpowiednie zrozumienie struktury dokumentu HTML jest kluczowe dla jego prawidłowego funkcjonowania; nieprawidłowe umiejscowienie deklaracji DOCTYPE może prowadzić do nieoczekiwanych zachowań w przeglądarkach, takich jak błędy w renderowaniu lub problemy z kompatybilnością. Dlatego ważne jest, aby znać zasady dotyczące tworzenia struktury dokumentów HTML, co przyczynia się do lepszej jakości kodu oraz większej wydajności stron internetowych.

Pytanie 9

Zakładając, że żadne style CSS nie zostały zdefiniowane, przedstawiony efekt zostanie uzyskany przy pomocy

Tytuł
    Znaczniki języka HTML
Autor
    Ewa Konieczna
Słowa kluczowe
    witryny internetowe, HTML

Kod 1.
<ul>
  <li>Tytuł</li>
  <li>Znaczniki języka HTML</li>
  <li>Autor</li>
  <li>Ewa Konieczna</li>
  <li>Słowa kluczowe</li>
  <li>witryny internetowe, HTML</li>
</ul>

Kod 2.
<dl>
  <dt>Tytuł</dt>
  <dd>Znaczniki języka HTML</dd>
  <dt>Autor</dt>
  <dd>Ewa Konieczna</dd>
  <dt>Słowa kluczowe</dt>
  <dd>witryny internetowe, HTML</dd>
</dl>

Kod 3.
<ol>
  <li>Tytuł</li>
  <dl>Znaczniki języka HTML</dl>
  <li>Autor</li>
  <dl>Ewa Konieczna</dl>
  <li>Słowa kluczowe</li>
  <dl>witryny internetowe, HTML</dl>
</ol>

Kod 4.
<table>
  <tr>Tytuł</tr>
  <td>Znaczniki języka HTML</td>
  <tr>Autor</tr>
  <td>Ewa Konieczna</td>
  <tr>Słowa kluczowe</tr>
  <td>witryny internetowe, HTML</td>
</table>

A. Kodu 3.

B. Kodu 4.

C. Kodu 2.

D. Kodu 1.

Niestety, Twoja odpowiedź nie jest poprawna. Na podstawie analizy załączonego obrazka można stwierdzić, że efekt przedstawiony na zdjęciu zostanie uzyskany przy użyciu 'Kodu 2', który jest kodem HTML definiującym tabelę. Wybierając inne opcje, pomijasz ważną rolę, jaką tabele odgrywają w prezentowaniu informacji w strukturze danych. Tabele HTML są przydatne do prezentowania zestawów danych, które mają związek ze sobą. Za pomocą tabeli można łatwo zorganizować takie dane w czytelny sposób. Zwróć uwagę, że wybór nieodpowiedniego kodu do osiągnięcia określonego efektu może prowadzić do niepotrzebnych komplikacji, takich jak trudności w utrzymaniu kodu, problemów z dostępnością i nieprawidłowego wyświetlania na różnych urządzeniach czy przeglądarkach. Pamiętaj, że ważne jest zrozumienie podstawowych koncepcji HTML i CSS, aby być w stanie tworzyć efektywne i dostępne strony internetowe.

Pytanie 10

Która technologia zapewnia SZYFROWANE połączenie ze stroną (HTTPS)?

A. SSL

B. FTP

C. SEO

D. CMS

Szyfrowane połączenie ze stroną (HTTPS) zapewnia technologia SSL (dziś jej następca TLS) - szyfruje dane przesyłane między przeglądarką a serwerem, tak że przechwycone w drodze są nieczytelne, oraz potwierdza tożsamość witryny certyfikatem. Dlatego za HTTPS odpowiada SSL.

Pytanie 11

Który z linków ma prawidłową budowę?

A. <a href='http://adres'> tekst </a>

B. <a href='mailto:adres'> tekst </a>

C. <a href="http://adres"> tekst <a>

D. <a href="mailto:adres"> tekst </a>

Odpowiedzi, które nie spełniają standardów HTML, prowadzą do niepoprawnych wyników. Na przykład, użycie pojedynczych cudzysłowów w atrybucie href, jak w konstrukcji <a href='mailto:adres'> tekst </a>, choć działa w wielu przeglądarkach, nie jest zgodne z zaleceniami HTML5, które preferują podwójne cudzysłowy. Ten błąd może prowadzić do problemów z interpretacją przez parsery HTML, a w ekstremalnych przypadkach może uniemożliwić poprawne wyświetlanie odsyłaczy. Dodatkowo, ostatnia odpowiedź <a href="http://adres"> tekst <a> jest błędna, ponieważ nie zamyka znacznika <a>, co skutkuje usunięciem semantycznego znaczenia linku i może prowadzić do problemów z dostępnością oraz indeksowaniem przez wyszukiwarki. Tego typu błędy są często wynikiem niedbałości lub braku zrozumienia podstaw HTML. Poprawna konstrukcja odsyłaczy jest kluczowa w budowaniu dostępnych stron internetowych, które są łatwe do nawigacji i interpretacji przez różne urządzenia i technologie asystujące. Przykłady błędów w HTML mogą również prowadzić do frustracji użytkowników, którzy mogą mieć problemy z interakcją z witryną, co w efekcie wpływa na ich postrzeganie jakości i profesjonalizmu danej strony.

Pytanie 12

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

A. multiple

B. size

C. disabled

D. value

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

Pytanie 13

W CSS właściwość font-size może przyjmować wartości według słów kluczowych

A. tylko smali, smaller, large, larger

B. jedynie big i smali

C. wyłącznie smali, medium, large

D. z zestawu xx-small, x-small, smali, medium, large, x-large, xx-large

Zrozumienie różnych wartości, które mogą być zastosowane w właściwości font-size, jest kluczowe dla efektywnego stylizowania tekstu w CSS. Pierwsza z nieprawidłowych odpowiedzi ogranicza się do zaledwie czterech terminów: smali, smaller, large oraz larger, co jest niewłaściwe, ponieważ właściwość font-size posiada znacznie szerszy zestaw wartości. Warto zauważyć, że 'smaller' oraz 'larger' są względnymi jednostkami, które odnoszą się do rozmiaru czcionki elementu nadrzędnego, a nie są one samodzielnymi wartościami słownikowymi. Dodatkowo, w odpowiedzi mowa jest o 'medium' i 'large', ale pomija się inne ważne terminy. Utrata kontekstu tych wartości prowadzi do ograniczonego zrozumienia typografii w web designie. Następna błędna odpowiedź zawiera jedynie trzy wartości: smali, medium i large, co nie pokrywa pełnego zestawu opcji dostępnych w CSS. Można zauważyć, że brak uwzględnienia pozostałych terminów, takich jak xx-small czy x-large, ogranicza możliwości projektanta w zakresie elastyczności i precyzji stylizacji tekstu. Tego rodzaju niedopatrzenie może prowadzić do niejednolitego wyglądu tekstów na różnych urządzeniach. Ostatnia fałszywa odpowiedź, która sugeruje, że font-size może przyjmować tylko wartości big i smali, jest całkowicie błędna. 'Big' nie jest uznawane za standardową wartość w CSS, co pokazuje brak zrozumienia podstawowych zasad dotyczących typografii. Przykłady te ilustrują, jak ważne jest zapoznanie się z pełnym zakresem opcji dostępnych w CSS oraz jak niewłaściwe interpretacje mogą prowadzić do nieefektywnego stylizowania elementów tekstowych.

Pytanie 14

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. C

B. rys. B

C. rys. A

D. rys. D

Odpowiedzi inne niż rys. C nie są poprawne z powodu błędnego zrozumienia jak działa atrybut rowspan w języku HTML. Gdy komórka tabeli posiada atrybut rowspan oznacza to że komórka ta rozciąga się pionowo na określoną liczbę wierszy. W przypadku braku zrozumienia tego mechanizmu można błędnie przypuszczać że każda komórka zaczyna się i kończy w obrębie jednego wiersza. Taki tok myślenia prowadzi do niepoprawnego rozmieszczenia elementów tabeli jak w rys. A lub D gdzie nie wzięto pod uwagę łączenia komórek w pionie. W odpowiedzi A pierwsza komórka nie obejmuje dwóch wierszy co jest sprzeczne z kodem. W odpowiedzi B z kolei drugi wiersz zawiera dwie komórki co również jest sprzeczne z kodem który definiuje tylko jedną. Takie błędy często wynikają z braku doświadczenia w używaniu zaawansowanych funkcji HTML co może prowadzić do mylnych wyobrażeń o tym jak kod przekłada się na widok strony. Atrybuty rowspan i colspan są kluczowe w kontekście strukturalnego podejścia do budowy stron internetowych i ich poprawne użycie ma istotne znaczenie dla dostępności oraz zrozumienia danych przez użytkowników i technologie wspomagające. Ważne jest także zrozumienie różnic między tworzeniem struktury a prezentacją co jest możliwe dzięki CSS zamiast nadużywania tabel do layoutów.

Pytanie 15

Jaki jest najłatwiejszy i najmniej czasochłonny sposób przetestowania strony w różnych przeglądarkach i ich wersjach?

A. użycie emulatora przeglądarek (np. usługi typu Browser Sandbox)

B. użycie walidatora kodu HTML

C. instalacja różnych przeglądarek na kilku komputerach i testowanie

D. test tylko w jednej przeglądarce, zakładając zgodność pozostałych

Najszybszym sposobem sprawdzenia strony w wielu przeglądarkach i ich wersjach jest emulator przeglądarek (np. usługa typu Browser Sandbox) - bez instalowania każdej z nich osobno otrzymujemy podgląd w różnych środowiskach. Dlatego najwygodniejsze jest użycie emulatora przeglądarek.

Pytanie 16

W programie do edytowania grafiki rastrowej zmieniono krzywe kolorów w sposób zaznaczony ramką na pokazanym obrazie. Jakie jest to działanie?

A. przyciemnienie całego obrazu

B. rozjaśnienie całego obrazu

C. modyfikację najjaśniejszych i najciemniejszych kolorów obrazu

D. wygładzenie krawędzi na obrazie

Rozjaśnienie całego obrazu za pomocą krzywych kolorów polegałoby na proporcjonalnym przesunięciu całej krzywej w górę, co nie jest widoczne na załączonym obrazie. W rzeczywistości, rozjaśnianie zmienia globalnie wartości tonów, co może prowadzić do utraty szczegółów w jasnych partiach, jeśli nie zostanie wykonane z należytą uwagą. Z kolei przyciemnienie obrazu wymagałoby przesunięcia krzywej w dół, co również nie jest widoczne w przypadku opisanym na obrazku. Przyciemnianie może skutkować zanikaniem szczegółów w cieniach, co jest niepożądane w profesjonalnej obróbce obrazu. Wygładzenie krawędzi na obrazie odnosi się do operacji takich jak rozmycie czy redukcja szumów, które nie są realizowane poprzez modyfikację krzywych kolorów. Wygładzanie to operacja stosowana w celu zmniejszenia szumów czy zmiękczenia szczegółów, często realizowana przy użyciu filtrów i narzędzi takich jak maski wyostrzające. Krzywe kolorów służą do manipulacji tonalnych i kolorystycznych, co jest zupełnie inną operacją. Typowym błędem jest mylenie narzędzi służących do ogólnej edycji obrazu z bardziej precyzyjnymi narzędziami tonalnymi. Wiedza o tym, jak każde narzędzie wpływa na obraz, jest kluczowa w profesjonalnej edycji graficznej, a niepoprawne zrozumienie ich funkcji może prowadzić do niepożądanych efektów wizualnych oraz strat w jakości obrazu.

Pytanie 17

Jak nazywa się nadrzędny formularz służący do nawigacji między formularzami i kwerendami bazy?

A. sterującym

B. głównym

C. zagnieżdżonym

D. pierwotnym

Pozostałe nazwy nie są poprawne w tym znaczeniu. „Główny”, „pierwotny” czy „zagnieżdżony” nie określają formularza-menu (zagnieżdżony to formularz osadzony w innym). Nadrzędny formularz nawigacyjny to formularz sterujący.

Pytanie 18

W języku CSS zapis selektora

p > i { color: red; }

wskazuje, że kolorem czerwonym będzie sformatowany

A. wszystki tekst w znaczniku <p> lub wszelkie treści w znaczniku <i>

B. wszystkie teksty w znaczniku <p> oprócz tych w znaczniku <i>

C. tylko ten tekst w znaczniku <p>, który ma przypisaną klasę o nazwie i

D. jedynie ten tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

Jeśli wybrałeś inne odpowiedzi, to pewnie wynika to z nieporozumienia co do tego, jak działają selektory w CSS i co się dzieje w hierarchii dokumentów HTML. Gdy wybierasz błędne opcje, często wynika to z niejasnego pojmowania relacji między różnymi elementami na stronie. Na przykład, myślenie, że każdy tekst w <p> lub <i> dostanie ten sam styl, zupełnie pomija to, że selektor '>' mówi, że styl dotyczy tylko bezpośrednich dzieci. Odrzucenie tej relacji rodzic-dziecko prowadzi do błędnego wniosku, że wszystkie elementy <p> i <i> są równorzędne. Poza tym, twierdzenie, że tekst w <p>, z wyjątkiem <i>, będzie czerwony, jest nieprawidłowe, bo selektor '>' mówi, że nie obejmuje innych elementów, a nie, że je włącza. Błędne jest również myślenie, że styl dotyczy tekstu w <p> z określoną klasą, ponieważ tu chodzi o strukturę, a nie o klasy. Warto wiedzieć, że precyzyjne selektory, jak ten w pytaniu, są bardzo ważne dla tworzenia sensownych arkuszy stylów, a ich złe zrozumienie może prowadzić do bałaganu w stylach i kłopotów w projektach webowych.

Pytanie 19

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

A. SEO

B. FTP

C. SSL

D. CMS

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

Pytanie 20

Które reguły CSS poprawnie ustawiają dla akapitu czcionkę Arial, rozmiar 16 pt i pochylenie (kursywę)?

p { font-style: Arial; size: 16px; font-weight: normal; }

p { font-family: Arial; font-size: 16px; font-variant: normal; }

p { font-family: Arial; font-size: 16pt; font-style: italic; }

p { font-style: Arial; font-size: 16pt; font-variant: normal; }

Wygląd czcionki opisują w CSS trzy osobne właściwości: font-family ustala krój (np. Arial), font-size - rozmiar (tu 16pt, bo zadano punkty, a nie piksele), a font-style: italic włącza pochylenie. Razem daje to p { font-family: Arial; font-size: 16pt; font-style: italic; }. Warto pamiętać, że font-style odpowiada za kursywę, a font-weight za grubość - to częste źródło pomyłek. Dlatego poprawny jest ten zestaw reguł.

Pytanie 21

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

<table>
  <tr>
    <td style="border: solid 1px;">Komórka 1</td>
    <td style="border: solid 1px;">Komórka 2</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 3</td>
    <td style="border: solid 1px;">Komórka 4</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 5</td>
    <td style="border: solid 1px;">Komórka 6</td>
  </tr>
</table>

Komórka 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="visibility: hidden">

B. <tr style="display: none">

C. <tr style="display: table-cell">

D. <tr style="clear: none">

Wybrana odpowiedź jest niepoprawna, ale nie martw się, to jest okazja do nauki. Jeśli chcesz ukryć element na stronie, ale zachować jego miejsce w układzie, powinieneś użyć właściwości CSS 'visibility: hidden'. Takie podejście jest zgodne z dobrymi praktykami w tworzeniu stron internetowych. Inne opcje, takie jak 'display: none', 'display: table-cell' i 'clear: none' nie są odpowiednie w tym kontekście. 'display: none' całkowicie usuwa element z układu strony, co powoduje przesunięcie pozostałych elementów, aby zapełnić puste miejsce. 'display: table-cell' jest właściwością, która pozwala elementowi zachowywać się jak komórka tabeli, co nie ma tutaj zastosowania, gdyż chcemy ukryć cały wiersz, a nie pojedynczą komórkę. 'clear: none' jest właściwością używaną do kontroli przepływu elementów w stosunku do elementów z lewej lub prawej strony, ale nie ma wpływu na ukrywanie elementów. Dobra praktyka polega na zrozumieniu i właściwym stosowaniu różnych właściwości CSS, aby uzyskać zamierzony efekt na stronie.

Pytanie 22

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. znaków zarezerwowanych dla języka opisu strony

B. polskich znaków, takich jak: ś, ć, ń, ó, ą

C. symboli matematycznych

D. specjalnych znaków przeznaczonych dla języka kodu strony

Wybór znaków matematycznych jako celu kodowania w standardzie ISO-8859-2 jest błędny, ponieważ ten standard nie koncentruje się na symbolach matematycznych, a raczej na literach i znakach typowych dla języków łacińskich, w tym polskiego. Mylne jest również stwierdzenie, że ISO-8859-2 jest używane do wyświetlania znaków specjalnych dla języka kodu strony, ponieważ te znaki są ogólnie obsługiwane przez różne standardy kodowania, w tym UTF-8, a ich obecność w ISO-8859-2 jest ograniczona. W przypadku znaków zarezerwowanych dla języka opisu strony, takich jak HTML, ich interpretacja nie zależy od konkretnego kodowania, lecz od zgodności z określonymi standardami HTML i CSS. Warto zwrócić uwagę, że wiele osób zapomina o różnicy między kodowaniem a samym językiem programowania; kodowanie dotyczy sposobu reprezentacji znaków, podczas gdy języki programowania definiują logikę oraz składnię. Często stosowanym błędem jest założenie, że każda strona internetowa musi wykorzystywać ISO-8859-2, co nie jest prawdą, zwłaszcza w dobie globalizacji i różnorodności językowej, gdzie coraz powszechniejsze staje się kodowanie UTF-8, które jest bardziej elastyczne i obsługuje szerszy zakres znaków.

Pytanie 23

Jakie jest zadanie funkcji desaturacji w edytorze grafiki?

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

B. zwiększenie liczby kolorów w obrazie

C. rozjaśnienie obrazu

D. przekształcenie barw do odcieni szarości

Pozostałe odpowiedzi opisują inne operacje na obrazie. Zwiększenie jaskrawości barw to saturacja - działanie dokładnie odwrotne do desaturacji, która nasycenie odbiera. Rozjaśnienie obrazu dotyczy jasności i reguluje się je osobnymi narzędziami (poziomy, krzywe, jasność/kontrast), nie usuwaniem koloru. Zwiększanie liczby kolorów również nie pasuje - desaturacja redukuje barwy do szarości, a nie poszerza paletę. Przekształcenie do odcieni szarości wykonuje właśnie desaturacja, dlatego ta odpowiedź jest poprawna.

Pytanie 24

Jak brzmi nazwa edytora, który wspiera proces tworzenia stron internetowych i którego działanie można określić w polskim tłumaczeniu słowami: widzisz to, co otrzymujesz?

A. WEB STUDIO

B. VISUAL EDITOR

C. IDE

D. WYSIWYG

IDE, czyli Integrated Development Environment, to zintegrowane środowisko programistyczne, które oferuje narzędzia dla programistów do pisania, testowania i debugowania kodu. IDE zazwyczaj skupia się na językach programowania i wymaga od użytkownika znajomości takich języków jak C++, Java czy Python, co znacznie różni się od podejścia WYSIWYG, które ma na celu umożliwienie edycji treści bez potrzeby pisania kodu. Wybór IDE zamiast edytora WYSIWYG może prowadzić do błędnych wniosków dotyczących procesu tworzenia stron internetowych, ponieważ programiści i twórcy treści mają różne potrzeby i umiejętności. WEB STUDIO to termin, który zazwyczaj odnosi się do kompleksowych narzędzi do tworzenia stron internetowych, ale niekoniecznie oznacza edytor WYSIWYG. Niektóre z tych narzędzi mogą wymagać znajomości kodu, co również nie pasuje do koncepcji WYSIWYG. VISUAL EDITOR to termin ogólny, który może odnosić się do różnych typów edytorów, ale nie jest ściśle związany z ideą WYSIWYG. Pominięcie tego aspektu może prowadzić do mylnych wyobrażeń o możliwościach i funkcjonalności tych narzędzi. Dlatego ważne jest, aby zrozumieć różnice między tymi pojęciami i znać ich zastosowanie w praktyce. W przeciwnym razie można łatwo wpaść w pułapkę myślenia, że wszystkie narzędzia do tworzenia treści są sobie równe, co jest dalekie od prawdy.

Pytanie 25

W języku CSS przedstawione w ramce stylizacje będą miały następujące zastosowanie. Kolorem czerwonym zostanie zapisany

h1 i {color: red;}

A. pełny tekst nagłówka pierwszego stopnia oraz cały tekst pochylony, bez względu na jego lokalizację na stronie

B. wyłącznie tekst pochylony we wszystkich nagłówkach

C. kompletny tekst nagłówka pierwszego stopnia oraz pochylony tekst akapitu

D. jedynie tekst pochylony w nagłówku pierwszego stopnia

Odpowiedź 1 jest poprawna, ponieważ selektor CSS 'h1 i' odnosi się do wszystkich elementów <i> (czyli tekstu pochylonego) znajdujących się wewnątrz elementów nagłówka <h1>. Oznacza to, że tylko tekst pochylony w nagłówkach pierwszego stopnia zostanie sformatowany na kolor czerwony. Jest to przykład selektora złożonego, który jest używany do stylizowania elementów zagnieżdżonych w określonym kontekście. W praktyce, takie podejście pozwala na precyzyjne kontrolowanie stylów na poziomie struktury dokumentu HTML, co jest zgodne z dobrymi praktykami w zakresie utrzymania i czytelności kodu CSS. Podczas projektowania arkuszy stylów ważne jest, aby stosować specyficzne selektory tylko tam, gdzie jest to konieczne, aby uniknąć nadmiernego komplikowania stylów i zapewnić lepszą wydajność renderowania stron w przeglądarkach. Dodatkowo, używając właściwości 'color', możemy definiować sposób, w jaki kolor tekstu prezentuje się na stronie, co jest kluczowe dla tworzenia dostępnych i estetycznych interfejsów użytkownika.

Pytanie 26

Wskaż element, który definiuje pole edycyjne formularza zgodne z ilustracją

A. <input type="month" id="hh" name="mm">

B. <input type="number" id="mm" name="hh" min="0" max="24">

C. <input type="time" id="minutes" name="hours">

D. <input type="date" id=" minutes" name="hours">

Prawidłowy wybór to <input type="time" id="minutes" name="hours">, ponieważ dokładnie taki element HTML5 służy do wprowadzania godziny w formacie hh:mm, czyli tak jak na ilustracji. Atrybut type="time" mówi przeglądarce, że pole ma przyjmować tylko wartości czasu, bez daty, miesięcy czy liczb dowolnego typu. Zgodnie ze specyfikacją HTML Living Standard oraz HTML5, przeglądarka powinna wtedy wyświetlić natywne kontrolki do wyboru godziny (np. rozwijane listy, suwak, mały zegarek – zależy od systemu i przeglądarki). Dzięki temu użytkownik ma mniejsze ryzyko pomyłki, a walidacja odbywa się częściowo automatycznie.
Z mojego doświadczenia warto korzystać z type="time" zawsze, gdy formularz dotyczy konkretnych godzin, np. godzina rozpoczęcia pracy, rezerwacja wizyty, planowanie spotkania online. Po stronie serwera (np. w PHP) to pole przychodzi jako tekst w formacie „HH:MM”, co jest łatwe do dalszego przetwarzania, parsowania do obiektu DateTime albo zapisu w bazie danych w typie TIME.
Dobra praktyka jest też taka, żeby nazwy atrybutów id i name były semantyczne. W tym zadaniu nie ma to wpływu na poprawność odpowiedzi, ale w realnym projekcie lepiej byłoby użyć np. id="endTime" i name="end_time". Ułatwia to później pracę z JavaScriptem i po stronie backendu. Warto też pamiętać o dodaniu atrybutów min i max, jeśli chcemy ograniczyć zakres godzin (np. od 08:00 do 20:00), oraz pattern lub dodatkowej walidacji JS, jeśli mamy specyficzne wymagania. Mimo że ilustracja nie pokazuje tych szczegółów, sam mechanizm type="time" jest tu absolutnie kluczowy i zgodny z dobrymi praktykami front-endowymi.

Pytanie 27

Które z poniższych stwierdzeń odnosi się prawidłowo do grafiki rastrowej?

A. Obraz zapisywany jest w postaci figur geometrycznych zorganizowanych w układzie współrzędnych

B. Jest to forma przedstawienia obrazu za pomocą siatki pikseli, które są odpowiednio kolorowane w układzie pionowo-poziomym na monitorze, drukarce lub innym urządzeniu wyjściowym

C. W trakcie procesu skalowania, jakość obrazu nie ulega zmianie

D. Grafika rastrowa nie jest zapisana w formacie WMF (ang. Windows Metafile Format - format metaplików w Windows)

Pierwsze zdanie sugerujące, że grafika rastrowa polega na opisywaniu obrazu za pomocą figur geometrycznych w układzie współrzędnych, odnosi się do grafiki wektorowej, a nie rastrowej. Grafika wektorowa opisuje obrazy przy użyciu matematycznych równań i figur geometrycznych, takich jak linie, krzywe oraz wielokąty. To podejście pozwala na skalowanie obrazu bez utraty jakości, ponieważ nie jest on zdefiniowany w oparciu o piksele. Z drugiej strony, grafika rastrowa nie ma tej elastyczności, ponieważ rozdzielczość i jakość obrazu są ściśle związane z ilością pikseli w danym obrazie; przy skalowaniu do większych rozmiarów następuje rozmycie oraz utrata szczegółów. Kolejna niepoprawna koncepcja dotyczy formatu WMF, który jest formatem metaplików wykorzystywanym w systemach Windows. Grafika rastrowa może być zapisana w różnych formatach, w tym rasteryzowanych formatach takich jak BMP, JPEG, PNG, a także w formatach wektorowych. Ostatecznie, błędne jest przekonanie, że skalowanie obrazu nie zmienia jakości. Dla grafiki rastrowej, powiększenie obrazu skutkuje gorszą jakością, co jest fundamentalną cechą rastrowych technik graficznych. Zrozumienie tych różnic jest kluczowe dla każdego, kto pracuje z grafiką komputerową, ponieważ wpływa to na wybór odpowiedniej techniki w zależności od potrzeb projektu.

Pytanie 28

Który atrybut znacznika <video> włącza ciągłe odtwarzanie (w pętli)?

muted

poster

controls

loop

Atrybut loop w <video> (i <audio>) sprawia, że nagranie po zakończeniu odtwarza się od początku, czyli w pętli. To atrybut logiczny - sama jego obecność włącza tę funkcję. Dlatego ciągłe odtwarzanie włącza loop.

Pytanie 29

Na przedstawionym obrazie zobrazowano wybór formatu pliku do zaimportowania bazy danych. Który z formatów należy wybrać, jeśli dane zostały wyeksportowane z programu Excel i zapisane w formie tekstowej z użyciem przecinka do oddzielania wartości pól?

A. CSV

B. XML

C. SQL

D. ESRI

CSV to skrót od Comma-Separated Values czyli wartości oddzielone przecinkami Jest to powszechnie stosowany format plików tekstowych używany do przechowywania danych tabelarycznych Takie pliki są łatwe do utworzenia edytowania i odczytu przez różnorodne aplikacje co czyni je wszechstronnym wyborem dla transferu danych między różnymi systemami i programami Główną zaletą formatu CSV jest jego prostota i szeroka kompatybilność zwłaszcza z programami do obsługi arkuszy kalkulacyjnych takimi jak Microsoft Excel czy Google Sheets Kiedy dane są eksportowane z Excela jako tekst z przecinkami oddzielającymi wartości CSV to optymalny wybór dla importu do baz danych czy innych aplikacji gdzie dane muszą być szybko i bezproblemowo przetworzone Standard ten nie zawiera informacji o typach danych kolorach czy formatach co sprawia że jest lekki i niezawodny CSV jest również obsługiwany przez większość języków programowania co znacznie ułatwia jego obsługę i integrację w procesach automatyzacji Jest to idealne rozwiązanie gdy potrzebujemy prostego i szybkiego sposobu na przeniesienie danych bez skomplikowanych zależności

Pytanie 30

W kodzie HTML zdefiniowano formularz, który wysyła dane do pliku formularz.php. Po naciśnięciu przycisku typu submit przeglądarka przechodzi do poniższego adresu:

../formularz.php?imie=Anna&nazwisko=Kowalska

Na podstawie podanego adresu można stwierdzić, że dane do pliku formularz.php zostały przesłane metodą:

A. SESSION

B. GET

C. POST

D. COOKIE

Wybrana przez ciebie odpowiedź jest nieprawidłowa. Wybrałeś metodę POST, COOKIE lub SESSION jako sposób przesyłania danych do pliku formularz.php, ale na podstawie widocznego adresu URL, który zawiera parametry przekazane po znaku zapytania (?), odpowiedź jest GET. Metoda POST jest również popularna w przesyłaniu danych, ale różni się od GET tym, że dane są przesyłane w ciele żądania, nie są widoczne w pasku adresu. COOKIE to mechanizm, który pozwala na przechowywanie danych na stronie klienta, nie jest to metoda przesyłania danych do serwera. SESSION to technika, która pozwala na przechowywanie informacji po stronie serwera, która jest powiązana z konkretnym użytkownikiem za pomocą identyfikatora sesji. Żadna z tych technik (POST, COOKIE, SESSION) nie powoduje, że parametry są widoczne w adresie URL, co jest charakterystyczne dla metody GET.

Pytanie 31

Które usługi są niezbędne do udostępnienia strony pod adresem https://zawodowe.edu.pl?

A. DNS, FTP

B. DNS, serwer WWW, certyfikat SSL

C. SMTP, FTP

D. serwer WWW, SMTP, POP3

Aby strona działała pod https://zawodowe.edu.pl, potrzebny jest serwer WWW (udostępnia pliki), DNS (tłumaczy nazwę domeny na adres IP) oraz certyfikat SSL (umożliwia szyfrowane połączenie HTTPS). Dlatego niezbędne są DNS, serwer WWW i certyfikat SSL.

Pytanie 32

Który efekt został zaprezentowany na filmie?

A. Zmniejszenie kontrastu zdjęcia.

B. Przenikanie zdjęć.

C. Zmiana jasności zdjęć.

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

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

Pytanie 33

Wskaż poprawne stwierdzenie dotyczące przedstawionego kodu HTML.
<video width="640" height="480" controls>
<source src="animacja.mp4" type="video/mp4">
</video>

A. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.

B. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.

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

D. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.

Kod HTML przedstawiony w pytaniu wykorzystuje znacznik <video>, który jest elementem HTML5 pozwalającym na osadzanie filmów w dokumentach internetowych. W kontekście poprawnej odpowiedzi, kluczowym jest zrozumienie, że przeglądarki muszą obsługiwać HTML5, aby mogły w pełni funkcjonować z tym kodem. W przypadku starszych przeglądarek, które nie wspierają HTML5, element <video> może nie być wyświetlany lub nie będzie działał prawidłowo. Dlatego istotne jest, aby deweloperzy testowali swoje aplikacje w różnych środowiskach oraz aby korzystali z odpowiednich polyfilli dla starszych przeglądarek, które mogą poprawić ich funkcjonalność. Przykładowo, użycie biblioteki JavaScript takiej jak Video.js może pomóc w zapewnieniu wsparcia dla elementów wideo w szerszym zakresie przeglądarek. Dbałość o kompatybilność z różnymi wersjami przeglądarek to nie tylko kwestia estetyki, ale również użyteczności i dostępności aplikacji internetowych.

Pytanie 34

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

A. <p>

B. <div>

C. <param>

D. <span>

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

Pytanie 35

W języku CSS, sformatowanie dowolnego elementu języka HTML w ten sposób, że po najechaniu na niego kursorem zmienia on kolor czcionki, wymaga zastosowania pseudoklasy

A. :visited

B. :coursor

C. :hover

D. :active

W tym zadaniu kluczowe jest zrozumienie, co dokładnie oznaczają poszczególne pseudoklasy CSS i w jakim momencie są aktywowane przez przeglądarkę. Pytanie dotyczy sytuacji, gdy element ma zmienić kolor czcionki po najechaniu na niego kursorem, czyli chodzi o reakcję na samo „zawieszenie” wskaźnika myszy nad elementem, bez klikania. Właśnie do tego została zaprojektowana pseudoklasa :hover i to ona jest poprawnym wyborem.

Częsty błąd polega na myleniu :hover z :active. Pseudoklasa :active nie oznacza „aktywnego” w sensie podświetlonego czy zaznaczonego, tylko stan elementu w momencie aktywacji, najczęściej podczas klikania – dokładnie wtedy, gdy przycisk myszy jest wciśnięty. Typowy przykład to przyciski, które na czas kliknięcia lekko się „wciskają” wizualnie. Jeśli ktoś użyje :active do efektu po najechaniu, będzie zawiedziony, bo styl pojawi się tylko na ułamek sekundy w trakcie kliku, a nie podczas samego trzymania kursora nad elementem.

Z kolei :visited jest ściśle powiązana z linkami i historią przeglądania. Ta pseudoklasa działa tylko dla odnośników z a[href] i tylko wtedy, gdy przeglądarka uzna, że dany adres został już wcześniej odwiedzony. Służy do odróżniania linków odwiedzonych od nieodwiedzonych, np. zmiana ich koloru. Nie ma ona żadnego związku z pozycją kursora. Dodatkowo, ze względów bezpieczeństwa i prywatności, możliwości stylowania :visited są w przeglądarkach celowo ograniczone.

Odpowiedź :coursor jest po prostu nieprawidłowa składniowo – taka pseudoklasa w CSS nie istnieje. Prawdopodobnie jest to efekt skojarzenia z angielskim słowem „cursor”. W CSS za zmianę kształtu kursora odpowiada właściwość cursor (np. cursor: pointer;), ale to zupełnie inny mechanizm niż pseudoklasy. Można ją oczywiście łączyć z :hover, np. button:hover { cursor: pointer; }, ale sama nazwa :coursor jest błędna i nie zostanie zinterpretowana przez przeglądarkę.

Typowy tok myślenia, który prowadzi do złej odpowiedzi, to właśnie intuicyjne zgadywanie po nazwie zamiast odwołania się do faktycznego działania według specyfikacji CSS. W praktyce warto zapamiętać proste skojarzenie: „hover” = „zawisnąć nad czymś”, czyli najechanie kursorem, „active” = moment kliknięcia, „visited” = stan linku po odwiedzeniu strony. Takie uporządkowanie znacznie ułatwia późniejsze projektowanie interfejsu zgodnie z dobrymi praktykami front-endowymi.

Pytanie 36

Który znacznik lub zestaw znaczników nie jest używany do określenia struktury dokumentu HTML?

A. <header>, <footer>

B. <div>

C. <i>, <b>, <u>

D. <section>

Te znaczniki, czyli <i>, <b> i <u>, nie są jakby do tworzenia struktury dokumentu HTML, ale bardziej do formatowania tekstu. Zgodnie z nowymi standardami HTML5, są to elementy semantyczne, które wpływają na to, jak coś wygląda, a nie na to, jak jest zorganizowane. Znacznik <i> używamy, jak chcemy coś napisać kursywą, <b>, żeby coś podkreślić, a <u>, żeby coś podkreślić. Często korzysta się z nich w stylach CSS, ale nie nadają one hierarchii ani kontekstu dokumentu. Jak chcesz wyróżnić jakiś tekst w kontekście kodu czy tytułu rozdziału, lepiej skorzystać z bardziej semantycznych znaczników, jak <em> dla podkreślenia znaczenia albo <strong> dla podkreślenia wagi. W czasach, kiedy dostępność i SEO są coraz ważniejsze, używanie semantycznych elementów to klucz do tworzenia lepszych i bardziej przejrzystych stron.

Pytanie 37

Kompresja bezstratna pliku graficznego zapewnia:

A. wyższą jakość niż oryginał

B. mniejszą liczbę warstw

C. zachowanie pierwotnej jakości grafiki

D. plik większy niż oryginał

Kompresja bezstratna zmniejsza rozmiar pliku, ale w taki sposób, że po dekompresji odzyskuje się dane identyczne z oryginałem - jakość obrazu nie spada. Działa, eliminując nadmiarowość danych (np. powtarzające się ciągi), a nie odrzucając informacje. Stosują ją formaty takie jak PNG i GIF; przeciwieństwem jest kompresja stratna (JPEG), która dla mniejszego pliku odrzuca część szczegółów. Dlatego kompresja bezstratna zachowuje pierwotną jakość grafiki.

Pytanie 38

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

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

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

A. Do wszystkich.

B. Do trzech.

C. Do dwóch.

D. Do żadnego.

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

Pytanie 39

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

A. <strong>

B. <div>

C. <em>

D. <sub>

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

Pytanie 40

Które znaczniki HTML umożliwiają wyświetlenie tekstu w jednym wierszu na stronie, zakładając brak zdefiniowanego formatu CSS?

Dobre strony m o j e j  s t r o n y

A. <h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

B. <div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

C. <p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

D. <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

Elementy <h3> <p> i <div> są znacznikami HTML które domyślnie zachowują się jako elementy block-level co oznacza że każdy z nich zaczyna się w nowej linii i wprowadza przerwę przed i po sobie. Element <h3> jest używany do oznaczania nagłówków trzeciego poziomu co nadaje mu dodatkowego semantycznego znaczenia w strukturze dokumentu ale nie jest odpowiedni do użycia tam gdzie wymagane jest wyświetlenie tekstu w jednym wierszu. Podobnie <p> jest przeznaczony do oznaczania akapitów tekstu i dlatego również wprowadza przerwy przed i po swoim zawartości. Znacznik <div> jest uniwersalnym kontenerem w HTML używanym do grupowania elementów w celu stylizacji lub manipulacji za pomocą CSS i JavaScript ale także działa jako element block-level. Typowym błędem przy nauce HTML jest niezdawanie sobie sprawy z różnicy między elementami inline i block-level co prowadzi do problemów z układem strony gdy elementy block-level są stosowane tam gdzie potrzebny jest płynny układ w jednym wierszu. Zrozumienie i umiejętność właściwego zastosowania tych znaczników jest kluczowe dla każdej osoby zajmującej się profesjonalnie tworzeniem stron internetowych pozwalając na tworzenie bardziej intuicyjnych i estetycznych interfejsów użytkownika. Właściwe stosowanie elementów inline i block-level jest również istotne w kontekście responsywności i dostępności stron internetowych co ma kluczowe znaczenie we współczesnym środowisku webowym. Umiejętność rozróżniania i stosowania odpowiednich elementów w kodzie HTML jest kluczowym aspektem w tworzeniu wydajnych i semantycznie poprawnych stron internetowych które są zarówno estetyczne jak i funkcjonalne dla szerokiego grona użytkowników i urządzeń.

Rozpocznij nowy egzamin

Powrót do strony głównej