Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 17 czerwca 2026 14:41
  • Data zakończenia: 17 czerwca 2026 15:06

Egzamin zdany!

Wynik: 26/40 punktów (65,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

Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?

Dobre strony mojej strony

A. <h3>Dobre strony </h3><h3 style=”letter-spacing:3px”>mojej strony</h3>
B. <span>Dobre strony </span><span style=”letter-spacing:3px”>mojej strony</span>
C. <div>Dobre strony </div><div style=”letter-spacing:3px”>mojej strony</div>
D. <p>Dobre strony </p><p style=”letter-spacing:3px”>mojej strony</p>
Niestety, Twoja odpowiedź nie była prawidłowa. Wybrałeś jedną z odpowiedzi zawierających znaczniki blokowe: <p>, <h3> lub <div>. Te znaczniki domyślnie zaczynają nowy wiersz przed i po swoim zakończeniu, co oznacza, że tekst zawarty w kolejnych takich znacznikach będzie wyświetlany w oddzielnych wierszach. To jest dobre podejście, kiedy chcemy utworzyć strukturę dokumentu z wyraźnie zdefiniowanymi sekcjami. Jednak w przypadku pytania, które polegało na wyświetlaniu tekstu w jednym wierszu bez dodatkowego formatowania CSS, odpowiedzi z użyciem tych znaczników są niepoprawne. W takim przypadku powinniśmy skorzystać z znacznika liniowego <span>, który nie wprowadza nowych linii. Ważne jest, aby dobrze rozumieć różnice między znacznikami liniowymi i blokowymi, ponieważ mają one istotne znaczenie dla struktury i wyglądu naszej strony internetowej.

Pytanie 2

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

A. nav { float: right; } section { float: right; }
B. aside {float: left; }
C. nav { float: left; } aside { float: left; }
D. nav { float: right; }
W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi.

Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego.

Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 3

Jak system CMS realizuje oddzielenie treści serwisu od jego wyglądu?

A. treść generuje z bazy danych, a wygląd ze zdefiniowanego szablonu
B. treść ze statycznych plików HTML, a wygląd ze szablonu
C. treść ze statycznych plików HTML, a wygląd we Flashu
D. treść z bazy danych, a wygląd za pomocą atrybutów HTML
Istotą CMS jest rozdział treści (baza) i wyglądu (szablon). Warianty z treścią w statycznych plikach HTML przeczą dynamicznemu zarządzaniu treścią. Wygląd nie powstaje z atrybutów HTML ani we Flashu (technologia przestarzała), lecz z szablonu. CMS generuje treść z bazy danych, a wygląd ze zdefiniowanego szablonu.

Pytanie 4

Podczas przygotowywania grafiki do umieszczenia na stronie internetowej konieczne jest wycięcie tylko pewnego fragmentu. Jak nazywa się ta czynność?

A. zmiana rozmiaru.
B. odwracanie obrazu.
C. kadrowanie.
D. łączanie warstw.
Kadrowanie to taka technika, która pomaga nam lepiej uchwycić to, co najważniejsze w obrazie. Wycinając niektóre fragmenty grafiki, skupiamy uwagę na tym, co naprawdę się liczy. Dobrze jest to mieć na uwadze, zwłaszcza przy zdjęciach portretowych, gdzie chcemy, żeby wzrok przyciągała twarz modela, a nie jakieś niepotrzebne tło. Kiedy kadrujemy, warto pamiętać o takich zasadach jak zasada trzecich, bo to pomaga zrobić fajną kompozycję. Można to robić w wielu programach graficznych, jak na przykład Adobe Photoshop czy GIMP. Tak w ogóle, dobrze jest dbać o proporcje i rozdzielczość, żeby obraz nie stracił na jakości. Gadżetem kadrowania można się też posługiwać w projektowaniu stron www, bo odpowiednie wybory graficzne poprawiają estetykę i funkcjonalność strony.

Pytanie 5

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

Ilustracja do pytania
A. Rys. B
B. Rys. D
C. Rys. A
D. Rys. C
Poprawna odpowiedź, Rys. C, przedstawia styl CSS, który prawidłowo definiuje marginesy i marginesy wewnętrzne obrazu. W tym przypadku margines wewnętrzny wynosi 50px, a zewnętrzny 20px, co jest zgodne z wymaganiami zawartymi w pytaniu. Kod CSS zawiera solidną linię graniczną o wartości 4px w kolorze czarnym, co jest dobrze praktykowane w projektowaniu stron internetowych, ponieważ solidna linia jest bardziej widoczna i profesjonalna niż linia przerywana. Kolor tła teal zapewnia atrakcyjny kontrast. Zastosowanie właściwego marginesu i marginesu wewnętrznego jest kluczowe w tworzeniu responsywnych układów, które są teraz standardem w branży. Poprawne ustawienie tych parametrów zapewnia estetyczny wygląd oraz prawidłowe rozmieszczenie elementów na stronie. Praktyczne zastosowanie tej wiedzy obejmuje projektowanie layoutów w CSS Grid czy Flexbox, gdzie marginesy i marginesy wewnętrzne pełnią kluczową rolę w zarządzaniu przestrzenią elementów. Właściwe wykorzystanie tych stylów wspiera tworzenie stron zgodnych ze standardami W3C, co jest fundamentem profesjonalnego web developmentu.

Pytanie 6

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

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

Pytanie 7

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

Ilustracja do pytania
A. <p><strike>Duży tekst</strike> zwykły tekst</p>
B. <p><strike>Duży tekst zwykły tekst</p>
C. <p><big>Duży tekst</p> zwykły tekst
D. <p><big>Duży tekst</big> zwykły tekst</p>
Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 8

Strona internetowa została wyświetlona przez przeglądarkę w poniższy sposób. Wskaż kod HTML, który prawidłowo reprezentuje zaprezentowaną hierarchiczną strukturę tekstu:

Ilustracja do pytania
A. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
B. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
C. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
D. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>
Odpowiedź jest w porządku! Użycie znaczników <h1> i <h2> wraz z <p> to dobry krok, bo to właśnie tak powinno wyglądać semantyczne formatowanie w HTML. Znacznik <h1> to taki główny nagłówek, który mówi, o czym jest cała strona lub sekcja, a to naprawdę kluczowe dla porządku w treści i SEO. Dzięki nagłówkom w HTML łatwiej jest zrozumieć, co jest na stronie, zarówno dla ludzi, jak i programów, które przeszukują internet. Jak już masz <h2>, to świetnie, bo to pokazuje podrozdziały, a więc hierarchię informacji. Użycie <p> dla tekstu to też dobry pomysł, bo sprawia, że tekst jest bardziej czytelny. Warto pamiętać, że semantyczne znaczniki HTML pomagają osobom z niepełnosprawnościami korzystać z internetu. Według wytycznych WCAG powinno się je stosować, żeby poprawić dostępność. A jak to robić z głową, to łatwiej potem stylować stronę przy użyciu CSS, bo możesz zmieniać wygląd bez bawienia się w treść HTML. Generalnie, dobrze jest, gdy dokumenty są jasne zarówno dla ludzi, jak i dla maszyn – to standard w nowoczesnym webdesignie.

Pytanie 9

W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?

A. HTML5
B. XHTML1.0
C. XHTML 2.0
D. HTML4
Tak, znaczników <footer>, <header> i <nav> zaczęto używać w HTML5, który zadebiutował w październiku 2014 roku. To jest ciekawe, bo HTML5 wprowadził sporo nowych semantycznych elementów, które pomagają w lepszej organizacji dokumentów HTML. Dzięki nim, przeglądarki i roboty wyszukiwarek mogą lepiej zrozumieć strukturę stron. Na przykład, <header> to nagłówek strony lub sekcji, <nav> tworzy menu nawigacyjne, a <footer> to stopka. Myślę, że to super sprawa, bo poprawia dostępność strony i jej SEO, bo tak naprawdę pomaga wyszukiwarkom w lepszym indeksowaniu treści, co może prowadzić do lepszych wyników w wyszukiwarkach. Dodatkowo, HTML5 ma też inne ciekawe nowinki, jak wsparcie dla multimediów, lokalne przechowywanie danych, a także lepszą kompatybilność z aplikacjami mobilnymi, więc zdecydowanie warto go wykorzystywać do budowy stron internetowych.

Pytanie 10

<source src="plik.mp4" type="video/mp4">
Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:
A. <section> </section>
B. <video> </video>
C. <div> </div>
D. <embed> </embed>
Poprawna odpowiedź to umieszczenie znacznika `<source>` wewnątrz `<video>...</video>`. W HTML5 to właśnie element `<video>` jest kontenerem odpowiedzialnym za osadzanie plików wideo na stronie WWW. Atrybuty takie jak `controls`, `autoplay`, `loop`, `muted`, `width` czy `height` przypisujemy właśnie do `<video>`, a nie do `<source>`. Znacznik `<source>` służy głównie do wskazania konkretnego pliku multimedialnego i jego typu MIME, np.: `<video controls width="640" height="360"><source src="film.mp4" type="video/mp4"><source src="film.webm" type="video/webm">Twoja przeglądarka nie obsługuje elementu video.</video>`. Przeglądarka przechodzi po kolei po elementach `<source>` i wybiera pierwszy format, który potrafi odtworzyć. To jest zgodne ze specyfikacją HTML Living Standard (WHATWG) oraz zaleceniami W3C dotyczącymi multimediów w sieci. W praktyce, w projektach komercyjnych, często dodaje się kilka formatów (np. MP4, WebM), właśnie po to, by zapewnić maksymalną kompatybilność między różnymi przeglądarkami i systemami. Moim zdaniem warto od razu wyrabiać sobie nawyk pisania pełnej, semantycznie poprawnej struktury: `<video>` jako główny element odtwarzacza, w środku jeden lub więcej `<source>` i ewentualnie tekst alternatywny. Dzięki temu kod jest czytelny, łatwiej go stylować w CSS, a także lepiej zachowuje się w kontekście dostępności (np. czytniki ekranu widzą, że to element wideo). Dodatkowo, `<video>` można łatwo obsługiwać z poziomu JavaScript, korzystając z jego API (play, pause, currentTime, volume itd.), co w praktyce daje sporą kontrolę nad odtwarzaniem multimediów na stronie.

Pytanie 11

Dla przedstawionego fragmentu dokumentu HTML:

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

Pytanie 12

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}
Na stronie będą wyświetlane czcionką w kolorze niebieskim:
A. paragrafy, do których została przypisana klasa uzytkownik.
B. wszystkim elementom w sekcji <body> z przypisaną klasą uzytkownik.
C. tylko elementy tekstowe typu <p>, <h1>.
D. wszystkie akapity.
Deklaracja selektora p.uzytkownik oznacza w CSS połączenie selektora typu z selektorem klasy. Innymi słowy: przeglądarka wybierze tylko te elementy <p>, które mają w atrybucie class wpisaną klasę uzytkownik, np. <p class="uzytkownik">Treść</p>. Sama kropka przed nazwą klasy definiuje selektor klasy, a litera p przed kropką zawęża go wyłącznie do paragrafów. Gdyby w stylu było samo .uzytkownik { color: blue; }, wtedy reguła objęłaby wszystkie elementy z tą klasą, niezależnie czy to <p>, <div>, <h1> czy cokolwiek innego.
Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł.
Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.

Pytanie 13

Jak powinien być poprawnie zapisany znacznik <img>, służący do umieszczenia na stronie internetowej obrazu rys.jpg, przeskalowanego do szerokości 120 px oraz wysokości 80 px z tekstem alternatywnym "krajobraz"?

A. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>
B. <img src="rys.jpg" height="120px" width="80px" info="krajobraz"/>
C. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz"/>
D. <img href="rys.jpg" height="120px" width="80px" info="krajobraz"/>
Odpowiedź <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/> jest poprawna z kilku powodów. Przede wszystkim, atrybut 'src' wskazuje na lokalizację pliku graficznego, co jest kluczowe dla poprawnego wyświetlania obrazu na stronie internetowej. Atrybuty 'width' oraz 'height' pozwalają na precyzyjne określenie rozmiarów obrazu, co jest istotne zarówno dla responsywności strony, jak i dla optymalizacji czasu ładowania. Użycie jednostki 'px' (pikseli) jest poprawne, jednak w HTML5 można pominąć tę jednostkę, wpisując jedynie wartość liczbową. Atrybut 'alt' jest niezwykle ważny dla dostępności, ponieważ dostarcza alternatywny opis obrazu dla użytkowników, którzy nie mogą go zobaczyć, na przykład osób niewidomych korzystających z czytników ekranu. Używanie odpowiednich atrybutów oraz wartości jest zgodne z najlepszymi praktykami w tworzeniu stron WWW oraz standardami W3C, co wpływa na lepszą użyteczność oraz SEO strony. Przykładem praktycznym może być umieszczenie grafiki w nagłówku strony, gdzie obraz jest widoczny, a opis alternatywny wspiera dostępność i kontekst treści.

Pytanie 14

Gdzie należy umieścić znacznik <meta> w dokumencie HTML?

A. w sekcji nagłówkowej (<head>)
B. w stopce strony
C. między <body> a </body>
D. między znacznikami akapitu
Znacznik <meta> przekazuje metadane dokumentu, więc umieszcza się go w sekcji nagłówkowej <head>. Dlatego <meta> należy do <head>.

Pytanie 15

Najłatwiejszym i najmniej czasochłonnym sposobem na przetestowanie funkcjonowania strony internetowej w różnych przeglądarkach oraz ich wersjach jest

A. użycie emulatora przeglądarek internetowych, np. Browser Sandbox
B. skorzystanie z narzędzia do walidacji kodu HTML
C. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne
D. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny
Wykorzystywanie walidatora języka HTML do testowania witryny w różnych przeglądarkach nie jest wystarczającą metodą. Walidatory są narzędziami, które sprawdzają poprawność kodu HTML pod kątem zgodności ze standardami W3C, ale nie oceniają, jak rzeczywiście strona będzie działać w różnych przeglądarkach. Możliwe jest, że strona przejdzie test walidacji, ale w rzeczywistości może wyświetlać się inaczej w różnych przeglądarkach z powodu różnych silników renderujących. Instalowanie różnych przeglądarek na wielu komputerach również nie jest efektywnym rozwiązaniem, gdyż wymaga znacznych nakładów czasu i zasobów, a także trudności w utrzymaniu aktualizacji i wersji. Testowanie jedynie w programie Internet Explorer, zakładając, że inne przeglądarki będą działać podobnie, jest mylne, gdyż różnice w implementacji standardów HTML, CSS i JavaScript w różnych przeglądarkach mogą prowadzić do nieoczekiwanych błędów. Takie podejście może skutkować poważnymi problemami z użytecznością, a także obniżyć jakość doświadczenia użytkownika. Istnieje zatem ryzyko, że aplikacja webowa nie będzie działać prawidłowo na kluczowych platformach, co w dzisiejszym zróżnicowanym środowisku przeglądarek stanowi istotne zagrożenie dla reputacji i funkcjonalności witryny.

Pytanie 16

Zidentyfikuj styl CSS, który doprowadził do uzyskania pokazanego efektu.

Ilustracja do pytania
A. Styl 4
B. Styl 2
C. Styl 1
D. Styl 3
Odpowiedź Styl 2 jest prawidłowa, ponieważ zastosowanie border-radius w wartości 50px pozwala osiągnąć efekt zaokrąglenia narożników elementu do kształtu koła, o ile element jest kwadratem. W tym przypadku obraz ma szerokość 100px, co oznacza, że promień zaokrąglenia równy 50px sprawia, że wszystkie narożniki zbiegają się w punktach centralnych ścianek kwadratu, tworząc idealny okrąg. Ta technika jest szeroko stosowana w projektowaniu stron internetowych zwłaszcza w odniesieniu do awatarów lub elementów graficznych, które wymagają zaokrąglonego kształtu. Stosowanie odpowiednich wartości border-radius jest zgodne z dobrymi praktykami w CSS, co pozwala projektantom na eleganckie i efektywne kształtowanie wyglądu witryny. Dzięki temu można tworzyć intuicyjne i estetyczne interfejsy użytkownika. Ważne jest również, aby testować wyświetlanie na różnych urządzeniach, ponieważ CSS powinien być responsywny i adaptowalny do różnorodnych rozdzielczości wyświetlaczy co zwiększa dostępność oraz użyteczność witryn.

Pytanie 17

Którego znacznika użyć, aby zgrupować elementy w jeden BLOK?

A.
<p>
B.
<span>
C.
<div>
D.
<param>
Znacznik <div> to blokowy pojemnik bez własnego znaczenia, służący do grupowania innych elementów w jeden BLOK (sekcję), który potem łatwo stylować lub pozycjonować. Dlatego do grupowania w blok służy <div>.

Pytanie 18

W znaczniku <meta ...> w sekcji <meta ...> na stronie internetowej nie zamieszcza się informacji o

A. automatycznym odświeżaniu
B. typie dokumentu
C. kodowaniu
D. autorze
Wszystkie wymienione odpowiedzi, z wyjątkiem informacji dotyczącej typu dokumentu, są poprawne i mogą być umieszczane w znaczniku <meta>. Informacja o autorze jest istotna, ponieważ pozwala wskazać osobę odpowiedzialną za treść na stronie, co może być ważne w kontekście cytowania i prawa autorskiego. Wyszukiwarki również mogą brać pod uwagę te informacje w kontekście wiarygodności źródła. Z kolei kodowanie jest kluczowe, ponieważ określa, w jaki sposób znaki są interpretowane przez przeglądarkę, co ma fundamentalne znaczenie dla prawidłowego wyświetlania treści, zwłaszcza w przypadku stron wielojęzycznych. Możliwość określenia kodowania w znaczniku <meta charset='UTF-8'> jest powszechnie stosowana, aby zapewnić, że wszystkie znaki są renderowane poprawnie. Automatyczne odświeżanie za pomocą znacznika <meta http-equiv='refresh' content='30'> jest przydatne, gdy strona potrzebuje być często aktualizowana, na przykład w przypadku stron informacyjnych czy serwisów newsowych. Dlatego też, umieszczanie tych informacji w znaczniku <meta> jest zgodne z praktykami webowymi i przyczynia się do poprawy działania strony oraz jej optymalizacji dla użytkowników i wyszukiwarek.

Pytanie 19

Który format graficzny zapisuje fotografie z kompresją stratną i nie obsługuje przezroczystości?

A. SVG
B. PNG
C. GIF
D. JPG
Pozostałe formaty różnią się od JPG sposobem zapisu. PNG koduje obraz bezstratnie i obsługuje przezroczystość - świetny do grafik i logo, ale pliki zdjęć bywają większe. GIF również jest bezstratny, lecz ogranicza paletę do 256 kolorów i służy głównie do prostych animacji oraz grafik z przezroczystością. SVG to w ogóle inny rodzaj grafiki - wektorowy, opisujący kształty za pomocą krzywych, więc nie nadaje się do fotografii. Stratną kompresję fotografii bez przezroczystości zapewnia JPG.

Pytanie 20

Aby wskazać błędy składniowe w kodzie HTML, należy zastosować:

A. walidator
B. kompilator
C. debugger
D. interpreter
Do sprawdzania poprawności kodu HTML służy walidator - na przykład walidator W3C (validator.w3.org). Analizuje on dokument pod kątem zgodności ze standardem języka i wypisuje błędy oraz ostrzeżenia: niezamknięte znaczniki, błędne zagnieżdżenia, nieprawidłowe atrybuty. HTML jest językiem znaczników, a nie programowania - nie kompiluje się go ani nie wykonuje, więc do kontroli składni używa się właśnie walidatora, a nie narzędzi typowych dla kodu programu.

Pytanie 21

Jak nazywa się edytor stron, którego działanie tłumaczy się jako „otrzymujesz to, co widzisz”?

A. IDE
B. WEB STUDIO
C. WYSIWYG
D. VISUAL EDITOR
WYSIWYG (What You See Is What You Get - „otrzymujesz to, co widzisz”) to edytor, w którym podczas pracy widać efekt zbliżony do finalnego wyglądu strony, bez konieczności pisania kodu. Dlatego mowa o edytorze WYSIWYG.

Pytanie 22

Który atrybut należy dodać do znacznika <video>, aby wyciszyć dźwięk odtwarzanego w przeglądarce filmu?

<video>
    <source src="film.mp4" type="video/mp4">
</video>
A. muted
B. controls
C. loop
D. autoplay
Twoja odpowiedź jest poprawna. Atrybut 'muted' jest używany w znaczniku <video>, aby wyłączyć dźwięk dla filmu wyświetlanego w przeglądarce. Jest to sposób na sterowanie dźwiękiem bez konieczności korzystania z dodatkowych elementów kontrolujących odtwarzanie filmu. Jest to bardzo przydatne, gdy chcemy, aby film był odtwarzany w tle bez zakłócania użytkownika dźwiękiem, co jest często stosowane na stronach internetowych. Ważne jest to, że to atrybut 'muted' jest odpowiedzialny za początkowy stan dźwięku filmu, a nie za to, czy użytkownik będzie mógł go później włączyć. Dodatkowo, dobrą praktyką jest pozostawienie użytkownikowi możliwości sterowania dźwiękiem, nawet jeśli jest on domyślnie wyłączony, co można osiągnąć dodając atrybut 'controls'.

Pytanie 23

Funkcji session_start() w PHP należy użyć przy realizacji:

A. dowolnej strony obsługującej ciasteczka
B. wczytywania danych z plików zewnętrznych
C. obsługi pojedynczego formularza
D. strony wielostronicowej, która musi pamiętać dane przy przechodzeniu między stronami
Funkcja session_start() uruchamia (lub wznawia) sesję - mechanizm pozwalający zapamiętać dane użytkownika pomiędzy kolejnymi odsłonami strony. Wywołuje się ją na początku skryptu, zanim cokolwiek zostanie wypisane, a dane przechowuje się w tablicy $_SESSION (np. login zalogowanej osoby czy zawartość koszyka). Przeglądarka trzyma tylko identyfikator sesji w ciasteczku, a same dane zostają na serwerze. Dlatego sesji używa się w serwisach wielostronicowych, gdzie dane muszą „przechodzić” między podstronami.

Pytanie 24

Aby obraz na stronie automatycznie dopasowywał się do rozmiaru ekranu, na którym strona jest wyświetlana, należy:

A. nie zmieniać jego wymiarów stylami CSS
B. jeden z wymiarów ustawić w pikselach
C. oba jego wymiary ustawić w pikselach
D. jego szerokość ustawić w wartościach procentowych
Responsywny obraz skaluje się razem z układem strony. Uzyskuje się to, ustawiając jego szerokość w jednostce względnej - w procentach, na przykład img { width: 100%; max-width: 100%; }. Obraz dopasowuje się wtedy do szerokości kontenera, a wysokość zwykle pozostawia się jako auto, by zachować proporcje. Dlatego szerokość obrazu ustawia się w wartościach procentowych.

Pytanie 25

Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)

Ilustracja do pytania
A. Odpowiedź D
B. Odpowiedź A
C. Odpowiedź C
D. Odpowiedź B
Odpowiedź B jest prawidłowa, ponieważ wykorzystuje atrybut rowspan do połączenia dwóch wierszy w jednej kolumnie tabeli. HTML zapewnia atrybuty rowspan i colspan, które umożliwiają połączenie wielu komórek tabeli w jedną, co jest niezbędne w sytuacjach, gdy dane muszą być przedstawione w sposób bardziej przejrzysty i zwarty. W przedstawionej tabeli labelka Telefon jest wspólna dla dwóch numerów, co skutkuje koniecznością użycia rowspan=2 w komórce, która łączy dwa wiersze. Ta konstrukcja jest zgodna z dobrymi praktykami tworzenia semantycznie poprawnych i wizualnie uporządkowanych tabel w dokumentach HTML. Zastosowanie atrybutu rowspan może poprawić czytelność tabel, co jest szczególnie przydatne przy prezentacji złożonych danych w aplikacjach biznesowych czy raportach. Użycie tego podejścia pozwala na bardziej efektywne wykorzystanie przestrzeni w tabeli i jest zgodne ze standardami W3C, które promują semantykę i dostępność w sieci.

Pytanie 26

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej
B. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW
C. bazy danych z danymi publikowanymi na stronie
D. organizacji informacji na serwerze WWW
Ważne jest, by zrozumieć, że front-end i back-end pełnią różne role w tworzeniu aplikacji internetowych. Back-end zajmuje się tym, co dzieje się na serwerze, czyli organizowaniem danych i logiką aplikacji. Jeśli myślisz, że front-end to wszystko, co związane z serwerem, to musisz to przemyśleć. Front-end to rzeczywiście ta warstwa, którą widzisz, ale też komunikacja z serwerem przez technologie jak AJAX. A jeśli ktoś mówi, że front-end to baza danych, to totalnie nie tak. Bazy danych to sprawa back-endu. Często można też spotkać zamieszanie między interfejsem użytkownika a logiką aplikacji, co może prowadzić do nieporozumień w tworzeniu stron. Projektując coś, musisz myśleć o obu tych warstwach, żeby wszystko razem dobrze działało.

Pytanie 27

Komunikat błędu wygenerowany przez walidator HTML może wskazywać na:

A. brak zamknięcia znacznika <p>
B. zbyt długą treść akapitu <p>
C. użycie zbyt wielu kolorów na stronie
D. zbyt wolne ładowanie strony
Walidator HTML sprawdza zgodność kodu ze standardem i zgłasza błędy składni. Typowy komunikat dotyczy niedomkniętego znacznika - np. otwartego <p> bez odpowiadającego </p>, złego zagnieżdżenia lub nieprawidłowego atrybutu. Dlatego komunikat walidatora może wskazywać na brak zamknięcia znacznika <p>.

Pytanie 28

Która właściwość języka CSS może przyjmować wartości: underline, overline, line-through?

A. text-decoration
B. font-weight
C. font-style
D. text-style
Poprawna odpowiedź to właściwość CSS `text-decoration`. To właśnie ona odpowiada za dodawanie różnych „linii” do tekstu: podkreślenia (`underline`), nadkreślenia (`overline`) oraz przekreślenia (`line-through`). W praktyce zapis wygląda np. tak: `a { text-decoration: underline; }` – klasyczny przykład dla linków, albo `del { text-decoration: line-through; }` dla tekstu usuniętego. W nowszych specyfikacjach CSS (CSS Text Decoration Module Level 3) ta właściwość została trochę rozbita na bardziej szczegółowe, jak `text-decoration-line`, `text-decoration-style`, `text-decoration-color`, ale w codziennym kodowaniu dalej bardzo często używa się skrótu `text-decoration`.
Moim zdaniem warto od razu kojarzyć, że `text-decoration` nie służy do zmiany kroju pisma, pogrubienia czy kursywy, tylko właśnie do „ozdabiania” tekstu dodatkowymi liniami. Dobra praktyka jest taka, żeby świadomie używać tej właściwości przy stylowaniu linków: np. usuwamy podkreślenie `a { text-decoration: none; }`, a potem przy najechaniu myszką dajemy `a:hover { text-decoration: underline; }`. Dzięki temu interfejs jest czytelniejszy, a użytkownik widzi, że element jest klikalny.
Warto też wiedzieć, że `text-decoration` może przyjmować kilka wartości naraz, np. `text-decoration: underline overline;`, co rzadko się używa, ale czasem w jakichś specyficznych projektach UI może się przydać. Z mojego doświadczenia w projektach komercyjnych najczęściej korzysta się z `underline`, `none` i czasem `line-through` np. przy cenach promocyjnych: stara cena przekreślona, nowa obok. To jest taki mały szczegół CSS, ale bardzo często używany w praktyce.

Pytanie 29

W przedstawionym kodzie HTML zastosowany styl CSS jest stylem

<p style="color:red;">To jest przykładowy akapit.</p>
A. zewnętrznym
B. nagłówkowym
C. dynamicznym
D. lokalnym
Styl CSS zastosowany w podanym kodzie HTML to styl lokalny, ponieważ jest zdefiniowany bezpośrednio w tagu HTML za pomocą atrybutu 'style'. Taki sposób definiowania stylów pozwala na przypisanie unikalnych stylów do konkretnego elementu na stronie, co jest szczególnie przydatne, gdy chcemy szybko zmienić wygląd jednego elementu bez wpływania na inne. Przykładem lokalnego stylu jest ustawienie koloru tekstu akapitu na czerwony, co można zaobserwować w atrybucie 'style="color:red;"'. Warto zauważyć, że lokalne style mają wyższy priorytet od stylów zewnętrznych i wewnętrznych, co oznacza, że jeśli ten sam element ma przypisany styl zewnętrzny, lokalny styl go nadpisze. W kontekście standardów CSS, lokalne style są zgodne z zasadami kaskadowości, która określa, jak łączyć różne źródła stylów. Z perspektywy użyteczności, chociaż lokalne style mogą być wygodne, ich nadmierne stosowanie prowadzi do trudności w utrzymaniu kodu, dlatego zaleca się ich używanie w ograniczonym zakresie.

Pytanie 30

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

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

Pytanie 31

W sekcji nagłówka dokumentu HTML umieszczono

<title>Strona miłośników psów</title>
Zawarty tekst będzie widoczny
A. w treści witryny, na banerze witryny
B. w polu adresowym, za wprowadzonym adresem URL
C. na pasku tytułu w przeglądarce
D. w treści witryny, w pierwszym ukazanym nagłówku
Wybór odpowiedzi, która sugeruje, że tytuł strony wyświetlany jest w treści strony, jest błędny. Tytuł nie jest częścią treści, na przykład w nagłówku, ani nie jest umieszczany na banerze witryny, co sugeruje inna odpowiedź. Tytuł strony jest wyświetlany na pasku tytułu przeglądarki, a jego podstawowym zadaniem jest identyfikacja strony w kontekście użytkowania przeglądarki. Błędne założenie, że tytuł może być częścią treści strony, wynika z nieporozumienia dotyczącego struktury dokumentu HTML oraz roli, jaką różne elementy odgrywają w prezentacji stron. Tytuł jest istotnym elementem metadanych, co oznacza, że nie jest przeznaczony do bezpośredniego wyświetlania na stronie, ale ma kluczowe znaczenie dla SEO oraz ułatwienia nawigacji. Właściwe zrozumienie roli tagu <title> jest kluczowe, aby uniknąć typowych błędów w tworzeniu witryn internetowych, takich jak używanie wygenerowanych tytułów, które mogą być zbyt ogólne lub mylące dla użytkowników oraz wyszukiwarek. W praktyce, tytuły stron powinny być odzwierciedleniem ich zawartości, co zwiększa ich użyteczność i efektywność w przyciąganiu odwiedzających.

Pytanie 32

W HTML atrybut alt w tagu img służy do określenia

A. tekstu, który pojawi się, gdy obrazek nie może być załadowany
B. napisu, który będzie widoczny pod obrazem
C. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie
D. lokalizacji i nazwy pliku źródłowego obrazu
Odpowiedź, która wskazuje, że atrybut alt znacznika img w języku HTML definiuje tekst, który będzie wyświetlony, jeśli grafika nie może być poprawnie załadowana, jest całkowicie poprawna. Atrybut alt jest kluczowym elementem dostępności w sieci, ponieważ dostarcza użytkownikom alternatywne informacje o zawartości obrazu, co jest szczególnie ważne dla osób korzystających z czytników ekranu. Na przykład, jeśli zdjęcie w artykule nie jest dostępne z powodu problemów z łączem internetowym, atrybut alt zapewnia kontekst, dzięki czemu użytkownik jest informowany o tym, co miało być przedstawione. Dobre praktyki zalecają, aby tekst w atrybucie alt był zwięzły, ale jednocześnie dostarczał wystarczających informacji o obrazie. Warto również zauważyć, że stosowanie atrybutu alt wspiera SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki mogą używać tych informacji do indeksowania treści. Przykład: <img src='example.jpg' alt='Zdjęcie pięknego krajobrazu górskiego'>.

Pytanie 33

Czym charakteryzują się systemy CMS?

A. wbudowanym serwerem poczty
B. wbudowanym edytorem grafiki wektorowej
C. możliwością edycji treści bez znajomości HTML
D. możliwością programowania w zaawansowanych frameworkach
Systemy CMS (Content Management System) pozwalają zarządzać treścią serwisu przez panel administracyjny, BEZ znajomości HTML i programowania - tekst i media dodaje się jak w edytorze tekstu. Przykłady to WordPress czy Joomla!. Dlatego CMS cechuje możliwość edycji treści bez znajomości HTML.

Pytanie 34

W języku HTML zapisano formularz. Który z efektów działania poniższego kodu zostanie wyświetlony przez przeglądarkę, zakładając, że w pierwsze pole użytkownik wpisał wartość "Przykładowy tekst"?

<form>
    <textarea rows="3" cols="30"></textarea><br>
    <input type="checkbox"> Opcja1<br>
    <input type="checkbox"> Opcja2
</form>
Ilustracja do pytania
A. Efekt 4.
B. Efekt 2.
C. Efekt 3.
D. Efekt 1.
Twoja odpowiedź jest poprawna. Wybrałeś odpowiedź 'Efekt 2', która jest zgodna z zachowaniem formularza HTML w opisanym scenariuszu. Formularz zawiera pole tekstowe i dwa pola typu checkbox. Kiedy wpiszesz do pola tekstowego wartość 'Przykładowy tekst' i wyświetlisz formularz w przeglądarce, zobaczysz ten tekst w polu tekstowym oraz dwa pola wyboru typu checkbox poniżej z etykietami 'Opcja1' i 'Opcja2'. To dokładnie taki układ, co pokazuje Efekt 2. Tworzenie formularzy HTML to ważna umiejętność w projektowaniu stron internetowych. Pozwalają one na interakcję z użytkownikiem oraz zbieranie od niego informacji. Pamiętaj, że dobry formularz powinien być intuicyjny w użyciu i jasno prezentować swoje funkcje użytkownikowi.

Pytanie 35

Co powinien umożliwiać edytor działający w trybie WYSIWYG?

A. uzyskanie wyglądu strony zbliżonego do jej obrazu w przeglądarce
B. obróbkę plików dźwiękowych
C. tworzenie podstawowej grafiki wektorowej
D. publikację strony przez wbudowany klient FTP
WYSIWYG dotyczy edycji z podglądem wyglądu, a nie innych funkcji. Tworzenie grafiki wektorowej, klient FTP do publikacji czy obróbka dźwięku to osobne narzędzia. Istotą WYSIWYG jest uzyskanie wyglądu zbliżonego do obrazu strony w przeglądarce.

Pytanie 36

W którym znaczniku HTML5 stosuje się atrybut action?

A.
<head>
B.
<form>
C.
<code>
D.
<body>
Pozostałe znaczniki nie obsługują wysyłki danych. <code> prezentuje fragment kodu, <body> to kontener całej treści strony, a <head> zawiera metadane dokumentu. Atrybut action należy do <form>.

Pytanie 37

Który znacznik HTML służy do budowy STRUKTURY (układu) strony?

A.
<em>
B.
<input>
C.
<mark>
D.
<aside>
Element <aside> to semantyczny znacznik HTML5 budujący STRUKTURĘ strony - wydziela treść poboczną powiązaną z głównym tematem, np. notki na marginesie czy panel boczny. Razem z <header>, <nav>, <section> i <footer> porządkuje układ dokumentu. Dlatego znacznikiem strukturalnym jest <aside>.

Pytanie 38

Jak wygląda poprawny zapis samozamykającego się znacznika łamania linii?

A.
</ br>
B.
<br> </br>
C.
</br>
D.
<br/>
Pozostałe zapisy łamią zasady void-elementów. </br> i </ br> to znaczniki ZAMYKAJĄCE, a element pusty takiego nie posiada (do tego spacja w drugim jest niedozwolona). <br></br> próbuje domknąć go osobną parą, jakby miał zawartość. Poprawna samozamykająca forma to <br/>.

Pytanie 39

Aby nadać styl CSS bezpośrednio pojedynczemu elementowi HTML (styl śródliniowy), należy użyć atrybutu:

A.
id
B.
css
C.
class
D.
style
Styl śródliniowy (inline) zapisuje się w atrybucie style danego znacznika, na przykład <p style="color: red">. Reguły podane w tym atrybucie dotyczą wyłącznie tego jednego elementu i mają najwyższą specyficzność. Stosuje się go oszczędnie, do pojedynczych wyjątków, bo miesza treść ze stylem. Dlatego do ostylowania jednego elementu wprost służy atrybut style.

Pytanie 40

Jaką formę ma kolor przedstawiony w systemie szesnastkowym jako #11FE07 w formacie RGB?

A. rgb(17,255,7)
B. rgb(11,127,7)
C. rgb(17,FE,7)
D. rgb(17,254,7)
Wszystkie trzy niepoprawne odpowiedzi odzwierciedlają błędne konwersje wartości szesnastkowych na wartości dziesiętne w systemie RGB. Pierwsza z odpowiedzi sugeruje użycie rgb(17, FE, 7), co jest niepoprawne, ponieważ 'FE' nie zostało przekształcone na wartość dziesiętną. W systemie szesnastkowym 'FE' odpowiada wartości 254, więc ta odpowiedź nie oddaje prawidłowej wartości dla koloru. W drugiej odpowiedzi, rgb(11, 127, 7), również występuje nieprawidłowa konwersja - '11' powinno być 17, a '127' nie ma odpowiadającej wartości w kolorze #11FE07, ponieważ powinno to być 254. Ostatnia odpowiedź, rgb(17, 254, 7), jest bliska prawidłowej, ale nie jest uznawana za poprawną, co może budzić wątpliwości. Kluczowe w całym procesie jest zrozumienie, że każda para szesnastkowa musi być konwertowana na odpowiednią wartość dziesiętną, a błędne konwersje prowadzą do nieprawidłowych reprezentacji kolorów. Właściwe rozumienie i precyzyjne stosowanie konwersji jest fundamentalne w pracy z kolorami w różnych projektach graficznych.