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: 17 kwietnia 2026 08:53
  • Data zakończenia: 17 kwietnia 2026 09:04

Egzamin zdany!

Wynik: 25/40 punktów (62,5%)

Wymagane minimum: 20 punktów (50%)

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

Jaki zestaw terminów określa interfejs użytkownika witryny internetowej?

A. Przesyłanie zapytań do bazy, skrypty PHP
B. Obróbka danych, system zarządzania treścią, projektowanie informacji
C. Szkic strony, diagram witryny, diagram przepływu informacji
D. Przyciski, menu, interakcja użytkownika z aplikacją
Pierwszy zestaw pojęć, obejmujący wysyłanie kwerend do bazy oraz skrypty PHP, odnosi się do technologii backendowych, które nie są bezpośrednio związane z interfejsem użytkownika. Wysyłanie kwerend do bazy danych to proces, w którym aplikacja zyskuje dostęp do informacji przechowywanych w bazie, co jest kluczowe dla funkcjonalności strony, ale nie definiuje, jak użytkownik będzie korzystał z tej strony. Również skrypty PHP, będące językiem programowania po stronie serwera, odpowiadają za logikę aplikacji, a nie za wizualizację i interakcję z użytkownikiem. Kolejny zestaw pojęć, składający się ze szkicu strony, diagramu witryny oraz diagramu przepływu informacji, dotyczy planowania i architektury informacji, co jest niezbędne w procesie projektowania, ale nie odnosi się bezpośrednio do komponentów interfejsu użytkownika. Te narzędzia pomagają zrozumieć strukturę i organizację treści, ale same w sobie nie definiują sposobu, w jaki użytkownik będzie wchodził w interakcję z danym systemem. Ostatni zestaw pojęć, obejmujący przetwarzanie informacji, system zarządzania treścią i projektowanie informacji, również nie odnosi się bezpośrednio do interfejsu. Przetwarzanie informacji to proces dotyczący obróbki danych, a system zarządzania treścią skupia się na tworzeniu i publikowaniu treści, co, mimo że jest istotne, nie definiuje fizycznych elementów interfejsu, które są niezbędne do interakcji z użytkownikiem. Wszystkie te odpowiedzi pomijają kluczowy aspekt UI, jakim jest bezpośrednia interakcja z użytkownikiem.
Pytanie 2

Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px.

input[type=submit] {
  background-color: #000000;
  border: none;
  padding: 5px;
}                         A.

input[type=submit] {
  background-color: #ffffff;
  border: none;
  padding: 5px;
}                         B.

input=submit {
  background-color: #000000;
  border: none;
  margin: 5px;
}                         C.

input=submit {
  background-color: #000000;
  border: 0px;
  margin: 5px;
}                         D.
A. B.
B. A.
C. C.
D. D.
Wybrana przez Ciebie odpowiedź nie jest prawidłowa, ale nie martw się, ważne jest, żeby zrozumieć dlaczego. CSS to kaskadowe arkusze stylów, które umożliwiają określenie stylu strony internetowej. Kluczowym aspektem CSS jest składnia, która obejmuje selektor, właściwość i wartość. W przypadku przycisku typu 'submit', selektorem jest 'input[type='submit']'. Właściwością jest 'background-color', 'border' lub 'padding', a wartością jest 'black', 'none' lub '5px' odpowiednio. Niepoprawne odpowiedzi nie spełniają wszystkich lub niektórych z tych wymagań. Mogą one ignorować wymagany czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px lub wszystkie te elementy. Inne błędne odpowiedzi mogą zawierać nieprawidłowe selektory, właściwości lub wartości. Pamiętaj, że praktyka prowadzi do mistrzostwa, więc nie zniechęcaj się, jeśli nie udało ci się tego dostrzec za pierwszym razem.
Pytanie 3

Który zapis znacznika <meta> jest poprawny w kontekście użytych atrybutów?

A. <meta name = 'description' content = 'Masz jakieś hobby? To jest strona dla Ciebie!'>
B. <meta background = blue>
C. <meta title = 'Strona dla hobbystów'>
D. <meta name = '!DOCTYPE'>
Poprawny zapis znacznika <meta> to <meta name = "description" content = "Masz jakieś hobby? To jest strona dla Ciebie!">. Ten znacznik odgrywa kluczową rolę w SEO, ponieważ pozwala na dostarczenie wyszukiwarkom informacji o treści strony. Atrybut 'name' definiuje typ informacji, którą dostarczamy, w tym przypadku 'description', co pozwala wyszukiwarkom zrozumieć, co znajduje się na stronie. Atrybut 'content' zawiera właściwą treść, która powinna być zwięzła i trafna, aby przyciągnąć użytkowników. Zgodnie z najlepszymi praktykami SEO, opis powinien mieć od 150 do 160 znaków, aby był w pełni widoczny w wynikach wyszukiwania. Poprawne użycie tego znacznika zwiększa szanse na wyższe pozycje w wynikach wyszukiwania oraz poprawia współczynnik klikalności (CTR) poprzez przyciągający opis, który może zachęcić użytkowników do odwiedzenia strony. Zgodność z tymi standardami jest niezbędna dla skutecznej optymalizacji witryn internetowych oraz poprawy ich widoczności w Internecie.
Pytanie 4

Gdzie powinien być umieszczony znacznik meta w języku HTML?

A. w sekcji nagłówkowej strony.
B. w dolnej części witryny internetowej.
C. w obrębie znaczników <body> ... </body>
D. w obrębie znaczników paragrafu.
Znacznik meta języka HTML jest kluczowym elementem, który powinien znajdować się w sekcji nagłówkowej witryny, oznaczonej znacznikami <head> ... </head>. Znaczniki meta dostarczają przeglądarkom oraz wyszukiwarkom internetowym informacji o stronie, takich jak jej opis, słowa kluczowe, a także informacje dotyczące kodowania czy autorstwa. Przykładowo, znacznik <meta charset="UTF-8"> informuje przeglądarkę o używanym kodowaniu znaków, co jest istotne dla prawidłowego wyświetlania tekstu w różnych językach. Dodatkowo, metadane takie jak <meta name="description" content="Opis strony"> są często wykorzystywane przez wyszukiwarki do generowania opisów w wynikach wyszukiwania, co może wpłynąć na wskaźnik klikalności (CTR) w SERP. Warto również dodać, że znaczniki meta mogą być używane do definiowania polityki prywatności i zabezpieczeń, na przykład poprzez <meta http-equiv="X-UA-Compatible" content="IE=edge">. Użycie odpowiednich metadanych w nagłówku jest zatem kluczowe dla optymalizacji SEO oraz zapewnienia odpowiedniej interakcji użytkowników z witryną.
Pytanie 5

Systemy CMS charakteryzują się

A. wbudowanym serwerem poczty elektronicznej.
B. możliwością programowania w zaawansowanych frameworkach dla aplikacji Web.
C. wbudowanym edytorem grafiki wektorowej.
D. możliwością edycji treści bez konieczności znajomości HTML.
Systemy CMS bywają czasem mylone z kombajnem do wszystkiego, ale ich główne zadanie jest dość konkretne: zarządzanie treścią strony internetowej. Stąd łatwo wpaść w pułapkę myślenia, że skoro to rozbudowany system, to na pewno ma wbudowany edytor grafiki wektorowej albo serwer poczty. W praktyce wygląda to inaczej. CMS zazwyczaj pozwala wgrywać obrazy, zmniejszać je, czasem przyciąć czy skompresować, ale pełnoprawny edytor grafiki wektorowej (jak Inkscape czy Illustrator) to zupełnie inna kategoria narzędzi. Projektowanie logotypów, ikon SVG czy ilustracji robi się w zewnętrznych programach, a do CMS wgrywa gotowe pliki. Wbudowanie takiego edytora do CMS byłoby przerostem formy nad treścią i łamaniem zasady podziału odpowiedzialności na wyspecjalizowane narzędzia. Podobnie jest z serwerem poczty elektronicznej. CMS może wysyłać e‑maile (powiadomienia, reset hasła, newsletter), ale technicznie opiera się na zewnętrznym serwerze SMTP lub konfiguracji serwera WWW. Sam w sobie nie pełni roli pełnoprawnego MTA jak Postfix czy Exim. To częsty błąd myślowy: skoro system coś „wysyła”, to ludzie zakładają, że musi mieć wbudowaną pełną infrastrukturę pocztową. W rzeczywistości są to tylko funkcje klienckie. Jeśli chodzi o programowanie w zaawansowanych frameworkach, tu też łatwo się pomylić. CMS może być napisany w jakimś frameworku lub mieć własne API, ale to nie jest jego wyróżnik jako systemu. Programowanie w frameworkach typu Laravel, Symfony czy React to domena deweloperów tworzących aplikacje webowe, a nie typowa funkcja dostarczana redaktorowi treści. Użytkownik CMS raczej klika w panel, ustawia moduły, pluginy, szablony, niż pisze rozbudowany kod aplikacyjny. Kluczową, charakterystyczną cechą CMS jest właśnie to, że pozwala na edycję treści bez konieczności znajomości HTML. Cała reszta – grafika, poczta, frameworki – to albo funkcje zewnętrzne, albo techniczne szczegóły implementacji, które nie definiują idei systemu zarządzania treścią.
Pytanie 6

Jakie polecenie powinno być zastosowane, aby tekst TEKST był widoczny w kolorze czarnym w oknie przeglądarki internetowej?

A. <body color="black">TEKST</font>
B. <body bgcolor="black">TEKST</body>
C. <font color="#000000">TEKST</font>
D. <font color="czarny">TEKST</font>
Odpowiedzi zawierające <body color="black">TEKST</font> oraz <body bgcolor="black">TEKST</body> są błędne z kilku powodów. Przede wszystkim, atrybut color nie jest obsługiwany w tagu <body>, co oznacza, że nie wpłynie on na kolor tekstu w jego wnętrzu. Zamiast tego, właściwym podejściem byłoby stosowanie CSS do definiowania kolorów tła i tekstu. Dodatkowo, używanie <body bgcolor="black"> nie jest zalecane w nowoczesnym HTML5, gdyż powinno się stosować CSS do nadawania stylów. Używanie atrybutów w tagach HTML w sposób, który nie jest zgodny z aktualnymi standardami, może prowadzić do problemów z dostępnością i kompatybilnością między różnymi przeglądarkami. Z kolei zastosowanie <font color="czarny">TEKST</font> jest również niepoprawne, ponieważ kolor czarny powinien być określony w formacie heksadecymalnym lub RGB, a nie w wersji z nazwą koloru w języku polskim. Takie podejście ogranicza jego stosowalność w przeglądarkach, które mogą nie rozpoznać polskich nazw kolorów. Z tych powodów kluczowe jest stosowanie właściwych standardów i rekomendacji technicznych dla uzyskania spójnych i poprawnych wyników wizualnych w aplikacjach internetowych.
Pytanie 7

Kolor zielony w skróconej notacji szesnastkowej można zapisać w CSS jako sekwencję

A. #0F0
B. #00F
C. #FFF
D. #F00
Kolor zielony w notacji szesnastkowej skróconej, zapisany jako #0F0, jest standardowym sposobem reprezentacji koloru w CSS. W tej notacji każdy kanał koloru (czerwony, zielony, niebieski) jest reprezentowany przez dwucyfrową liczbę szesnastkową. W przypadku koloru zielonego, kanał czerwony jest ustawiony na 0, kanał zielony na maksymalną wartość (FF) i kanał niebieski na 0. Wartości te odpowiadają skali RGB, gdzie 0 oznacza brak koloru, a FF oznacza pełną intensywność. Przykładowo, w CSS można wykorzystać ten kolor w stylach dla elementów HTML, np. dla tła: 'background-color: #0F0;'. Dzięki temu możliwe jest osiągnięcie jasnego, intensywnego zielonego koloru. Notacja szesnastkowa jest powszechnie używana w projektowaniu webowym i jest zgodna ze standardami W3C, co czyni ją uniwersalnym narzędziem dla programistów i projektantów stron internetowych. Kolor zielony, uzyskiwany przez kombinację pełnej intensywności zielonego i braku czerwonego oraz niebieskiego, jest często wykorzystywany w interfejsach użytkownika, co czyni jego znajomość kluczową dla efektywnego projektowania stron.
Pytanie 8

Kaskadowe arkusze stylów są tworzone w celu

A. połączenia struktury dokumentu strony z odpowiednią formą jego wyświetlania
B. blokowania wszelkich zmian w wartościach znaczników już przypisanych w pliku CSS
C. nadpisywania wartości znaczników, które już funkcjonują na stronie
D. ułatwienia formatowania strony
Wszystkie pozostałe odpowiedzi nie odzwierciedlają prawidłowego zrozumienia roli, jaką pełnią kaskadowe arkusze stylów w procesie tworzenia stron internetowych. Nadpisywanie wartości znaczników już ustawionych na stronie jest jednym z aspektów działania CSS, ale nie jest to jego główny cel. CSS pozwala na nadpisanie stylów, jednak kluczowym elementem jest możliwość łatwego zarządzania oraz modyfikacji wyglądu całej witryny poprzez centralne arkusze, a nie jedynie lokalne zmiany. Połączenie struktury dokumentu z formą jego prezentacji to w rzeczy samej cel CSS, ale nie jest to odpowiednia odpowiedź, ponieważ bardziej odnosi się do ogólnej koncepcji tworzenia stron internetowych niż do konkretnej funkcji CSS. Ostatnia z propozycji, czyli blokowanie zmian w wartościach znaczników, jest mylna, ponieważ CSS ma na celu umożliwienie, a nie blokowanie, wprowadzania zmian. Rola CSS polega na tym, że dzięki niemu można swobodnie modyfikować wygląd strony bez wpływania na samą strukturę HTML, co czyni go niezwykle elastycznym narzędziem w rękach web deweloperów.
Pytanie 9

Wskaż problem z walidacją w podanym fragmencie kodu HTML

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący... </p>
A. Znacznik br nie może występować wewnątrz znacznika p
B. Nieznany znacznik h6
C. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania
D. Znacznik br nie został poprawnie zamknięty
Znacznik zamykający b niezgodny z zasadą zagnieżdżania czyli poprawna odpowiedź 1 odnosi się do zasady poprawnego zagnieżdżania znaczników HTML Zasada ta mówi że znaczniki muszą być zamykane w odwrotnej kolejności do ich otwarcia W naszym przykładzie mamy otwierający znacznik b a następnie i co oznacza że najpierw powinien być zamknięty znacznik i a potem b Tego typu błąd jest często spotykany w kodzie HTML i może prowadzić do nieoczekiwanych problemów z wyświetlaniem strony Warto pamiętać że poprawne zagnieżdżanie znaczników wpływa na czytelność i utrzymanie kodu co jest kluczowe w większych projektach HTML jest językiem opartym na strukturze drzewiastej i każda niezgodność w zagnieżdżaniu może wpłynąć na sposób przetwarzania dokumentu przez przeglądarki Dbałość o szczegóły w strukturze dokumentu HTML jest zgodna z dobrymi praktykami branżowymi i wspomaga zgodność z różnymi przeglądarkami i urządzeniami co w konsekwencji poprawia dostępność i użyteczność strony internetowej
Pytanie 10

Który z przedstawionych poniżej fragmentów kodu HTML5 zostanie uznany przez walidator HTML za niepoprawny?

A. <p class= "stl" id= "a">tekst</p>
B. <p class= "stl" style= "color: #F00 ">tekst</p>
C. <p class= "stl">tekst</p>
D. <p class= "stl"><style>.a{color:#F00}</style>tekst</p>
Pozostałe odpowiedzi nie zawierają błędów, które mogłyby skutkować odrzuceniem przez walidator HTML5. W pierwszym przypadku użycie atrybutu class w tagu <p> jest w pełni zgodne z HTML5, co pozwala na przypisanie stylu do elementu. Atrybut class jest standardowym sposobem klasyfikacji elementów, co umożliwia ich stylizację z użyciem CSS. W drugim przykładzie, dodanie atrybutu id do tagu <p> również nie narusza zasad poprawności HTML i pozwala na jednoznaczne identyfikowanie elementu na stronie. Identyfikatory są istotnym narzędziem w programowaniu front-end i są często wykorzystywane w JavaScript oraz przy stylizacji CSS. W trzecim przypadku stylowanie bezpośrednie na elemencie <p> przy użyciu atrybutu style jest akceptowalne w HTML5, mimo że nie jest to najlepsza praktyka ze względu na zasady separacji treści i stylu. Współczesne podejścia do programowania zalecają korzystanie z zewnętrznych arkuszy stylów, aby poprawić organizację kodu i jego ponowne użycie. Wszystkie te przykłady ilustrują biegłość w korzystaniu z HTML5 i jego atrybutów, co jest niezbędne do tworzenia semantycznych i dostępnych stron internetowych.
Pytanie 11

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. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>
C. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>
D. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
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 12

Aby właściwie przystosować stronę internetową dla osób niewidomych, należy przypisać wyświetlanym za pomocą znacznika img obrazom atrybut

A. style
B. alt
C. src
D. text
Atrybut 'alt' w znaczniku <img> to naprawdę ważny element, jeśli chodzi o dostępność stron internetowych dla osób niewidomych. Głównie chodzi o to, żeby zapewnić opis obrazka, który mogą zrozumieć technologie asystujące, tak jak czytniki ekranu. Dzięki temu, osoby niewidome mają możliwość dowiedzieć się, co znajduje się na zdjęciu. Na przykład, jeśli mamy zdjęcie czerwonego swetra w sklepie internetowym, to warto wpisać coś takiego jak 'Czerwony sweter z wełny' w tym atrybucie. To też pomaga w SEO, bo wyszukiwarki lubią takie opisy. W skrócie, dobrze jest stosować atrybut 'alt' przy każdym obrazie, by każdy użytkownik mógł zrozumieć treść strony.
Pytanie 13

Kod CSS można włączyć do dokumentu HTML, używając znacznika

A. <meta>
B. <body>
C. <style>
D. <head>
Odpowiedź <style> jest prawidłowa, ponieważ ten znacznik HTML jest dedykowany do osadzania kodu CSS wewnątrz dokumentu HTML. Znacznik <style> powinien być umieszczony w sekcji <head> dokumentu, co umożliwia przeglądarkom interpretację stylów przed renderowaniem treści strony. Dzięki temu można definiować różne reguły CSS, które modyfikują wygląd elementów HTML, co jest kluczowe w tworzeniu estetycznych i funkcjonalnych stron internetowych. Przykładowo, można użyć <style> do określenia koloru tła, rozmiaru czcionki czy marginesów. Ważne jest, aby stosować zasady dotyczące kaskadowości, ponieważ style zdefiniowane w <style> mają priorytet nad stylem zewnętrznym, jeśli są tak samo specyficzne. Dodatkowo, korzystanie z <style> jest zgodne z zasadami dobrych praktyk, takich jak unikanie nadmiarowego ładowania zewnętrznych plików CSS w przypadku prostych projekty, co przyspiesza czas ładowania strony.
Pytanie 14

Co można powiedzieć o wyświetlonym przez witrynę tekście "test kolorów"?

<p id="p1" style="color:blue;">test kolorów</p>
<button type="button"
  onclick="document.getElementById('p1').style.color='red'">
  test</button>
A. Wciskanie przycisku test sprawia, że kolor tekstu jest na przemian niebieski i czerwony.
B. Po wciśnięciu przycisku test kolor tekstu jest niebieski.
C. Po wciśnięciu przycisku test kolor tekstu jest czerwony.
D. Zaraz po załadowaniu witryny kolor tekstu jest czerwony.
Zauważyłem, że w kodzie HTML kolor tekstu na początku jest niebieski. Jest to ustawione w atrybucie style dla elementu o id='p1'. Po kliknięciu w przycisk, uruchamia się funkcja JavaScript, która zmienia kolor na czerwony. Ta funkcja jest przypisana w atrybucie onclick. Takie podejście to świetny sposób na interakcję użytkownika z witryną, korzystając ze skryptów JavaScript. Myślę, że to bardzo dobry przykład, który pokazuje, jak można robić interaktywne elementy na stronach. Wiedza na ten temat może pomóc lepiej zrozumieć, jak działają strony internetowe i co można zrobić z JavaScriptem.
Pytanie 15

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }
A. każdemu odnośnikowi niezależnie od aktualnego stanu.
B. wszystkim odnośnikom nieodwiedzonym.
C. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.
D. wszystkim odnośnikom odwiedzonym.
Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.
Pytanie 16

Parametr face elementu <font> jest używany do wskazania

A. nazwa czcionki
B. rozmiaru czcionki
C. koloru czcionki
D. efektów czcionki
Parametr face znacznika <font> w HTML definiuje konkretną nazwę czcionki, która ma być używana do wyświetlania tekstu. Umożliwia to projektantom stron internetowych precyzyjne określenie, jak tekst będzie wyglądał, co jest istotne dla estetyki oraz czytelności strony. W praktyce, zamiast stosować ogólne czcionki systemowe, projektanci mogą wskazać konkretne nazwy czcionek, jak 'Arial', 'Verdana' czy 'Times New Roman', aby osiągnąć zamierzony efekt wizualny. Warto jednak pamiętać, że stosowanie znacznika <font> oraz jego atrybutu face jest już przestarzałe, a w nowoczesnym kodowaniu lepiej jest korzystać z CSS, gdzie właściwość 'font-family' pełni tę samą funkcję, ale z większą elastycznością i lepszym wsparciem dla różnych urządzeń. Przykładowo, zamiast <font face='Arial'>Tekst</font>, w CSS można użyć: <style> p { font-family: Arial; } </style>. Z perspektywy dobrych praktyk, zaleca się używanie CSS do stylizacji tekstu, co pozwala na lepszą separację treści od prezentacji oraz łatwiejsze zarządzanie stylami w całym dokumencie.
Pytanie 17

W poniższym kodzie CSS zdefiniowano cztery klasy formatowania, które następnie zostały użyte do formatowania paragrafów. Efekt widoczny na rysunku powstał po zastosowaniu klasy o nazwie:

.format1 {    text-decoration: overline;     }
.format2 {    text-decoration: line-through; }
.format3 {    text-decoration: underline;    }
.format4 {    text-decoration: none;         }
formatowanie
A. format1
B. format3
C. format2
D. format4
Odpowiedź z klasy format2 jest trafna, bo definiuje styl text-decoration line-through, który służy do przekreślenia tekstu. W CSS ta właściwość jest mega przydatna, bo pozwala zmieniać wygląd tekstu, dodając różne linie, takie jak podkreślenie czy nadkreślenie. Przekreślenie stosuje się często, żeby pokazać, że coś zostało usunięte lub jest już nieaktualne. Na przykład w sklepach online, gdzie można oznaczyć przecenione ceny. Według standardów CSS, warto stawiać na prostotę i czytelność definicji stylów, bo to ułatwia później zrozumienie kodu dla innych programistów. Takie podejście jest zgodne z dobrymi praktykami kodowania, które mówią, że kod powinien być łatwy do zrozumienia. A co ważne, jeśli chodzi o dostępność, to przekreślony tekst jest znany narzędziom wspierającym, jak czytniki ekranowe, co zwiększa dostępność treści dla osób z niepełnosprawnościami.
Pytanie 18

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

A. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny
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. użycie emulatora przeglądarek internetowych, np. Browser Sandbox
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 19

Znak <s> w HTML powoduje

A. skreślenie tekstu
B. pochylenie tekstu
C. migotanie tekstu
D. podkreślenie tekstu
Znacznik <s> w języku HTML jest używany do oznaczania tekstu, który jest przekreślony, co jest przydatne, gdy chcemy wskazać, że dana treść nie jest już aktualna lub jest nieprawidłowa. Na przykład, w dokumencie HTML możemy użyć znacznika <s> do przekreślenia starej ceny produktu, aby podkreślić, że cena została obniżona. Taki sposób prezentacji informacji jest zgodny z zasadami dostępności, ponieważ przekreślony tekst wciąż jest czytelny przez technologie asystujące, co pozwala użytkownikom na zrozumienie zmiany w kontekście treści. W praktyce zastosowanie tego znacznika może również wpłynąć na estetykę strony, eliminując potrzebę stosowania stylów CSS do osiągnięcia tego samego efektu.
Pytanie 20

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. stylizację tekstu za pomocą dostępnych znaczników
B. określenie kaskadowych arkuszy stylów przypisanych do strony
C. przygotowanie szablonu witryny internetowej
D. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych
Wybór odpowiedzi dotyczącej definiowania kaskadowych arkuszy stylów (CSS) w kontekście funkcji drzewa kontekstowego w Adobe Dreamweaver jest mylący. Kaskadowe arkusze stylów są narzędziem służącym do stylizacji stron internetowych, ale nie są bezpośrednio związane z funkcjonalnością drzewa kontekstowego, które koncentruje się na przedstawieniu struktury HTML dokumentu. Kiedy projektant korzysta z edytora, może wprowadzać zmiany w stylach CSS, jednak drzewo kontekstowe nie jest dedykowane temu procesowi. Ponadto, zrozumienie struktury HTML jest kluczowe do efektywnego stosowania CSS, ale to nie oznacza, że można je mylić. Druga odpowiedź, dotycząca tworzenia szablonu strony internetowej, jest również nieprecyzyjna. Szablony są narzędziem do ułatwienia konstrukcji stron, ale drzewo kontekstowe nie jest bezpośrednio związane z ich tworzeniem. Podobnie, formatowanie tekstu przy pomocy znaczników nie jest funkcją drzewa kontekstowego; jest to zadanie edytora WYSIWYG jako całości. Zrozumienie tych koncepcji technicznych jest kluczowe, aby uniknąć typowych pułapek myślowych, takich jak mylenie różnych funkcji edytorów oraz ich zastosowań w procesie tworzenia stron internetowych. Osoby pracujące w branży powinny być dobrze zaznajomione z odpowiedzialnością, jaką niesie ze sobą poprawne stosowanie narzędzi i technologii, aby efektywnie realizować projekty webowe.
Pytanie 21

Który atrybut należy wstawić w miejsce kropek, aby przeglądarka wyświetliła komunikat o błędzie w przypadku kliknięcia przycisku "Zapisz" bez wypełnionego pola nazwisko?

<form action="/skrypt.php" method="post">
  <input type="text" name="nazwisko" ...>
  <input type="submit" value="Zapisz">
</form>
A. required
B. checked
C. pattern
D. disable
W tym zadaniu chodzi o wbudowaną walidację formularza w HTML, a dokładniej o to, żeby przeglądarka sama z siebie zablokowała wysłanie formularza, gdy pole nazwisko jest puste. Kluczowe jest zrozumienie, które atrybuty faktycznie wpływają na walidację, a które tylko zmieniają zachowanie lub wygląd elementu. Atrybut „disable” brzmi podobnie do „disabled”, więc część osób może go kojarzyć z blokowaniem pola lub przycisku. Problem w tym, że poprawny atrybut HTML to „disabled”, a nie „disable”. Po drugie, disabled nie służy do wymuszania wypełnienia pola, tylko wręcz przeciwnie – całkowicie je wyłącza z użycia. Pole disabled nie jest edytowalne i w ogóle nie jest wysyłane z formularzem, więc absolutnie nie nadaje się do sprawdzania, czy użytkownik coś wpisał. „Pattern” to już coś związanego z walidacją, ale działa inaczej niż required. Pattern przyjmuje wyrażenie regularne i sprawdza poprawność formatu wprowadzonej wartości, ale tylko wtedy, gdy w polu coś jest wpisane. Jeżeli pole jest puste i nie ma atrybutu required, przeglądarka uzna to za poprawne i formularz zostanie wysłany bez żadnego ostrzeżenia. Pattern nadaje się np. do weryfikacji numeru telefonu, kodu pocztowego czy konkretnego formatu identyfikatora, ale nie wymusza samo w sobie obowiązkowego wypełnienia. Atrybut „checked” z kolei dotyczy zupełnie innego typu elementów formularza. Używa się go wyłącznie przy input type="checkbox" oraz input type="radio", aby zaznaczyć domyślnie daną opcję. Nie ma on żadnego wpływu na pola tekstowe typu text. Wstawienie checked do input type="text" jest po prostu błędem semantycznym i nie wywoła żadnego efektu walidacyjnego. Typowym błędem myślowym przy tym pytaniu jest mieszanie pojęć: „coś blokuje” z „coś wymusza”. Required nie blokuje pola, tylko blokuje wysłanie formularza, jeśli pole jest puste. Disabled blokuje pole, ale nie ma nic wspólnego z wymaganiem danych. Pattern sprawdza format, ale nie wymusza istnienia wartości. Checked ustawia stan zaznaczenia, a nie obowiązkowość. Właśnie dlatego jedynym poprawnym atrybutem, który informuje przeglądarkę, że dane pole musi być wypełnione przed wysłaniem formularza, jest „required”.
Pytanie 22

W znaczniku (w sekcji ) strony internetowej nie zamieszcza się informacji odnoszących się do

A. kodowania
B. rodzaju dokumentu
C. autora
D. automatycznego przeładowania
Odpowiedź "typu dokumentu" jest trafna, bo znacznik <meta> w HTML jest używany do ustawiania metadanych, które nie mówią nam bezpośrednio o typie dokumentu. W praktyce, to co znajdziemy w <meta>, dotyczy głównie takich rzeczy jak automatyczne odświeżanie strony (przez tag http-equiv="refresh"), kodowanie (gdzie definiujemy zestaw znaków, np. UTF-8) czy informacje o autorze strony (poprzez tag name="author"). Typ dokumentu jest ustalany w deklaracji DOCTYPE na początku dokumentu HTML, a nie w <meta>. Znaczniki <meta> mogą też pomóc w SEO i lepszym indeksowaniu przez wyszukiwarki. Na przykład, używając tagu <meta name="description" content="Opis strony">, możemy pomóc wyszukiwarkom lepiej zrozumieć, o czym jest nasza strona, co może zachęcić do kliknięcia w link w wynikach wyszukiwania.
Pytanie 23

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 1.
D. Efekt 3.
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 24

Wskaź poprawną formę kodowania polskich znaków w pliku HTML?

A. <meta char set= "UTF-8">
B. <meta content='UTF8'>
C. <meta charset="UTF-8">
D. <meta "content=UTF-8">
Odpowiedź <meta charset="UTF-8"> to strzał w dziesiątkę! To zgodny z nowoczesnymi standardami HTML sposób na określenie kodowania znaków w dokumencie. Dzięki temu, że używamy atrybutu 'charset' z wartością 'UTF-8', mówimy przeglądarkom, że tekst powinien być interpretowany według tego kodowania. UTF-8 jest super popularne, bo obsługuje wszystkie znaki w Unicode. To oznacza, że możemy pisać wszystkie polskie znaki diakrytyczne, czyli te jak ą, ć, ę, ł itd., bez obaw o błędy w wyświetlaniu. Jeśli wstawisz ten tag w sekcji <head> swojego dokumentu HTML, masz pewność, że strona będzie dobrze wyglądać w różnych przeglądarkach i na różnych urządzeniach. Dobrze jest umieszczać go na początku sekcji <head>, żeby uniknąć problemów z pokazywaniem treści. Co więcej, korzystanie z UTF-8 jest rekomendowane przez W3C, więc to naprawdę dobry wybór dla nowoczesnych aplikacji webowych.
Pytanie 25

Zastosowanie bloku deklaracji background-attachment: scroll sprawia, że

A. tło strony pozostanie statyczne, a tekst będzie się przesuwał
B. grafika tła będzie się powtarzać (kafelki)
C. grafika tła znajdzie się w prawym górnym rogu strony
D. tło strony będzie się przesuwać razem z tekstem
Odpowiedź, że tło strony będzie przewijane razem z tekstem, jest prawidłowa, ponieważ właściwość 'background-attachment: scroll' definiuje, jak tło elementu powinno się zachowywać podczas przewijania strony. Kiedy używamy tej właściwości, tło jest związane z zawartością strony, co oznacza, że przewija się ono w tym samym tempie, co tekst i inne elementy. To podejście jest często wykorzystywane w projektowaniu stron internetowych, gdzie chcemy uzyskać efekt płynności i spójności. Na przykład, w przypadku długich artykułów, które wymagają przewijania, zastosowanie 'background-attachment: scroll' sprawia, że użytkownik nie jest rozpraszany przez statyczną grafikę tła, co może prowadzić do lepszego doświadczenia podczas czytania. Dobrą praktyką jest również testowanie różnych efektów tła w responsywnych projektach, aby zapewnić, że zawartość pozostaje czytelna na różnych urządzeniach. Warto również pamiętać, że styl tła można łączyć z innymi właściwościami CSS, aby osiągnąć pożądany efekt wizualny, co jest kluczowe w nowoczesnym web designie.
Pytanie 26

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 7
B. 4
C. 6
D. 5
Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.
Pytanie 27

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr:hover { background-color: Pink; }
B. tr { background-color: Pink; }
C. td, th { background-color: Pink; }
D. tr:active { background-color: Pink; }
Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.
Pytanie 28

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 24-30 fps
B. 31-36 fps
C. 20-23 fps
D. 16-19 fps
Wybór wartości poniżej 24 fps, takich jak 20-23 fps czy 16-19 fps, na pewno nie zapewni płynności obrazu w filmie. Klatkaż 20-23 fps nie tylko nie osiąga standardów branżowych, ale również wprowadza widza w kłopotliwy stan, ponieważ takie niskie wartości skutkują widocznymi skokami między klatkami. Kiedy klatkaż spada poniżej 24 fps, efekt staje się zbliżony do stroboskopu, co może być bardzo nieprzyjemne dla widza. Na przykład, przy 16-19 fps widać wyraźnie, że ruchy są zbyt szarpane, co prowadzi do utraty immersji w filmie. Ponadto, niektóre produkcje telewizyjne mogą wykorzystywać wyższe klatkaże, aby uzyskać lepszą jakość obrazu, jednak wybór 24-30 fps pozostaje kluczowy w kontekście klasycznych filmów. W przemyśle filmowym kluczowe jest, aby zrozumieć, jak liczba klatek wpływa na postrzeganie obrazu przez widza i jak standardy ustalone przez organizacje takie jak SMPTE wpływają na techniki produkcji. Niewłaściwy klatkaż nie tylko wpłynie na estetykę filmu, ale również na jego odbiór przez publiczność, co czyni ten temat krytycznym dla każdego, kto chce zrozumieć sztukę filmową.
Pytanie 29

Jaki znacznik z sekcji head dokumentu HTML w wersji 5 jest wymagany przez walidator HTML i jego brak skutkuje zgłoszeniem błędu error?

A. title
B. style
C. meta
D. link
Znacznik <title> jest kluczowym elementem każdej strony internetowej, który znajduje się w sekcji <head> dokumentu HTML. Jego podstawową funkcją jest określenie tytułu strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Wersja HTML5 podkreśla znaczenie tego znacznika, czyniąc go wymaganym do poprawnej walidacji dokumentu. Brak znacznika <title> prowadzi do błędu walidacji, co może wpływać na SEO oraz użyteczność strony. Dobrze zaprojektowany tytuł powinien być krótki, ale zwięzły, zawierać kluczowe słowa związane z treścią strony, co pozytywnie wpływa na pozycjonowanie w wyszukiwarkach. Przykład poprawnego znacznika to: <title>Moja Strona Internetowa</title>. Ważne jest, aby tytuł był unikalny dla każdej podstrony, co ułatwia użytkownikom oraz wyszukiwarkom identyfikację treści. W praktyce, zrozumienie roli znacznika <title> jest kluczowe dla każdego, kto tworzy strony internetowe, ponieważ jego obecność ma istotny wpływ na wrażenia użytkowników oraz sukces witryny w Internecie.
Pytanie 30

Którego znacznika nie powinno się umieszczać w nagłówku dokumentu HTML?

A. <h2>
B. <title>
C. <meta>
D. <link>
Znacznik <h2> jest używany do definiowania nagłówków drugiego poziomu w dokumencie HTML. Jest to element, który powinien być umieszczony w treści dokumentu, a nie w jego nagłówku. Wartości semantyczne nagłówków od <h1> do <h6> są istotne z punktu widzenia SEO oraz dostępności stron internetowych. Poprawne użycie nagłówków pomaga w organizacji treści oraz umożliwia lepszą nawigację zarówno dla użytkowników, jak i dla wyszukiwarek internetowych. Przykładowo, jeśli mamy artykuł na blogu, <h1> może być tytułem artykułu, <h2> może być użyte do oznaczenia sekcji, a <h3> do podsekcji. Użycie tych znaczników w odpowiednich miejscach nie tylko poprawia strukturę dokumentu, ale także przyczynia się do lepszego indeksowania treści przez roboty wyszukiwarek. Zgodnie z wytycznymi W3C, nagłówki powinny być stosowane hierarchicznie, co oznacza, że nie możemy stosować <h2> przed <h1>.
Pytanie 31

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 32

W HTML-u, aby umieścić animację FLASH (z rozszerzeniem .swf) na stronie www, powinno się wykorzystać znacznik

A. <object>
B. <img>
C. <audio>
D. <video>
Użycie <audio>, <img> i <video> do wstawiania animacji FLASH jest błędne z kilku powodów. Znacznik <audio> jest tylko do dźwięku, więc nie załatwia sprawy z animacjami. <img> to tylko do wyświetlania statycznych obrazków, a nie czegoś interaktywnego jak animacje FLASH. A <video> też jest tylko dla plików wideo i w ogóle nie obsługuje FLASH. Wiesz, to wszystko często wynika z tego, że nie do końca wiadomo, jak te znaczniki działają. Ważne, żeby wiedzieć, jakie elementy HTML można użyć do różnych treści. No i nie oszukujmy się – technologia FLASH jest coraz mniej na czasie, lepiej iść w kierunku HTML5, bo to jest bezpieczniejsze i działa lepiej z obecnymi przeglądarkami. Użycie starszych technologii, jak FLASH, może przynieść problemy z kompatybilnością i bezpieczeństwem, więc to nie jest najlepszy pomysł w nowoczesnym web developmencie.
Pytanie 33

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}
Ilustracja do pytania
A. D.
B. C.
C. A.
D. B.
Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.
Pytanie 34

W kodzie HTML stworzono formularz, który wysyła informacje do pliku formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka zostaje przekierowana na wskazany adres. Na podstawie podanego adresu /formularz.php?imie=Anna&nazwisko=Kowalska można stwierdzić, że dane do pliku formularz.php zostały wysłane za pomocą metody:

A. GET
B. SESSION
C. POST
D. COOKIE
Niepoprawne odpowiedzi sugerują użycie metod POST, SESSION i COOKIE do przesyłania danych do pliku formularz.php. Metoda POST, podobnie jak GET, jest podstawową metodą przesyłania danych w protokole HTTP, jednak różni się od GET tym, że dane są przesyłane w ciele żądania, a nie w adresie URL. Dlatego, jeżeli widzimy dane w adresie URL, to nie mogą one pochodzić z metody POST. Z kolei metody SESSION i COOKIE nie są w ogóle metodami przesyłania danych. SESSION to mechanizm, który pozwala na przechowywanie danych między różnymi żądaniami w sesji użytkownika, a COOKIE to małe pliki tekstowe przechowywane na komputerze użytkownika, które mogą być używane do przechowywania danych między żądaniami. Żadna z tych metod nie przesyła jednak danych poprzez adres URL, co jest kluczowe dla odpowiedzi na to pytanie. Błędne odpowiedzi mogą wynikać z niezrozumienia różnic między tymi metodami i jak są one używane do przesyłania danych w aplikacjach internetowych.
Pytanie 35

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

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

W języku HTML5 do wypełniania podpowiedzią kontrolki pola edycyjnego stosuje się atrybut

A. pattern
B. autofocus
C. placeholder
D. required
W tym pytaniu łatwo pomylić kilka atrybutów, bo wszystkie pojawiają się często przy polach formularzy, ale pełnią zupełnie inne funkcje. W HTML5 każdy z nich ma dość precyzyjnie określone znaczenie i przeglądarki zachowują się wobec nich w konkretny sposób. Atrybut "pattern" służy do walidacji danych po stronie przeglądarki, przy użyciu wyrażeń regularnych. Definiujemy w nim wzorzec, który wprowadzony tekst musi spełniać, np. pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" dla numeru telefonu. On nie wyświetla żadnej podpowiedzi, tylko sprawdza poprawność wpisu. Częsty błąd myślowy jest taki, że skoro mówimy o "wzorcu", to ktoś kojarzy to z przykładem, a to jednak bardziej mechanizm kontroli, nie wizualna instrukcja. "Required" to natomiast atrybut, który oznacza, że pole jest obowiązkowe. Jeżeli użytkownik spróbuje wysłać formularz bez jego wypełnienia, przeglądarka wyświetli komunikat o błędzie. Nie ma tu żadnej podpowiedzi w samym polu, to tylko informacja dla silnika walidacji formularzy HTML5. Wiele osób myli to z jakąś formą "sugestii", ale to zwykłe wymaganie techniczne: albo coś wpiszesz, albo formularz się nie wyśle. "Autofocus" określa, które pole ma automatycznie dostać fokus po załadowaniu strony. Przez to kursor pojawia się od razu w tym polu i użytkownik może zaczynać pisać bez klikania. To ułatwia obsługę formularzy, ale znowu – nie ma nic wspólnego z wyświetlaniem tekstu pomocniczego w środku kontrolki. To tylko kwestia wygody i kolejności interakcji. Podpowiedź widoczna wewnątrz pola edycyjnego, zanim użytkownik zacznie wpisywać dane, jest realizowana wyłącznie przez atrybut "placeholder". Jeśli więc szukamy atrybutu odpowiedzialnego właśnie za ten efekt wizualny, inne opcje są po prostu funkcjonalnie nietrafione, nawet jeśli też dotyczą formularzy.
Pytanie 37

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. POST
B. COOKIE
C. SESSION
D. GET
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 38

Który z wariantów znacznika jest poprawny pod względem użytych atrybutów?

A. <meta name = "description" content = "Masz jakieś hobby? To jest strona dla Ciebie! ">
B. <meta title = "Strona dla hobbystów">
C. <meta background = blue>
D. <meta name = "!DOCTYPE">
Odpowiedź <meta name = "description" content = "Masz jakieś hobby? To jest strona dla Ciebie! "> jest prawidłowa, ponieważ wykorzystuje atrybuty zgodne z wymaganiami standardu HTML. Znacznik <meta> jest używany do przekazywania metadanych o stronie internetowej, które są niezwykle istotne dla wyszukiwarek internetowych oraz dla użytkowników. Atrybut 'name' definiuje typ metadanych, a 'content' zawiera wartość przypisaną do tego typu. W przypadku tej odpowiedzi, 'name' jest ustawione na 'description', co oznacza, że zawiera opis strony, a 'content' dostarcza konkretną treść, która może być wykorzystana przez wyszukiwarki do generowania podsumowań w wynikach wyszukiwania. Przykładem zastosowania tego znacznika jest optymalizacja SEO, gdzie dobrze napisany opis może przyczynić się do zwiększenia kliknięć na stronie. Warto również zauważyć, że zgodnie z praktykami SEO, opis powinien być zwięzły, atrakcyjny i dokładnie odzwierciedlać zawartość strony, co może wpłynąć na jej pozycjonowanie w wynikach wyszukiwania.
Pytanie 39

Selektor CSS a:link {color:red} użyty w kaskadowych arkuszach stylów określa

A. klasę
B. identyfikator
C. pseudoelement
D. pseudoklasę
Odpowiedź, którą wybrałeś, to pseudoklasa. W CSS jest to typowa sprawa, bo selektor a:link to właśnie przykład użycia pseudoklas. Dzięki nim możesz stylizować różne elementy na podstawie ich stanu lub tego, jak się zachowują w dokumencie. Na przykład, selektor a:link definiuje styl dla linków, które jeszcze nie zostały odwiedzone - więc jeśli ktoś kliknął na link, zmienia się jego wygląd. Używając pseudoklas, możesz znacznie poprawić estetykę stron i sprawić, że będą bardziej przyjazne dla użytkowników. Pomyśl o takich pseudoklasach jak :hover, co zmienia styl, gdy najedziemy kursorem, albo :active, która wprowadza zmiany podczas klikania. To naprawdę dobra technika, żeby nadać stronom fajny, dynamiczny charakter. Rozumienie pseudoklas to istotna sprawa w web designie, a to, co się zgadza z tym, co mówi W3C, to dodatkowy atut.
Pytanie 40

W modelu kolorów RGB kolor żółty powstaje z połączenia zielonego i czerwonego. Który kod szesnastkowy przedstawia kolor żółty?

A. #FFFF00
B. #00FFFF
C. #FF00FF
D. #F0F0F0
Pierwszy z kodów szesnastkowych, który zawiera #FF00FF, reprezentuje kolor magenta. Magenta powstaje z połączenia pełnego czerwonego i niebieskiego, przy zerowej intensywności zielonego, co sprawia, że nie jest to kolor żółty. Z kolei kod #00FFFF to kolor cyjan, który uzyskuje się z połączenia pełnego zielonego i niebieskiego, co również nie prowadzi do uzyskania żółtego. Ostatni z kodów, #F0F0F0, to odcień szarości o wysokiej jasności, co oznacza, że jego składowe RGB są prawie równe, ale zdecydowanie nie są odpowiednie dla uzyskania koloru żółtego. Warto zauważyć, że korzystając z tych kodów w projektach graficznych, można łatwo pomylić się, jeśli nie zrozumie się, jak poszczególne kolory są tworzone z podstawowych składowych RGB. Zrozumienie tego systemu kolorów jest kluczowe dla każdego, kto projektuje w cyfrowym środowisku, ponieważ różne kolory mają różne zastosowania i znaczenia, które mogą wpływać na odbiór wizualny projektu.
Rozpocznij nowy egzamin
Powrót do strony głównej