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: 8 czerwca 2026 10:04
Data zakończenia: 8 czerwca 2026 10:17

Egzamin zdany!

Wynik: 24/40 punktów (60,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Gdzie umieścić informacje o autorze, opisie i słowach kluczowych strony?

A. w <head>, w znaczniku <meta>

B. w <body>, w znaczniku <meta>

C. w <body>, w znaczniku <html>

D. w <head>, w znaczniku <style>

Informacje o autorze, opisie i słowach kluczowych to METADANE strony - umieszcza się je w sekcji <head> w znaczniku <meta> (np. <meta name="author" ...>). Dlatego należą do <head>, w <meta>.

Pytanie 2

Której właściwości CSS użyć, aby ustawić wewnętrzny GÓRNY odstęp (między treścią a obramowaniem)?

outline-top

border-top

padding-top

local-top

Wewnętrzny GÓRNY odstęp - między treścią a górną krawędzią obramowania - ustawia padding-top, np. padding-top: 15px;. To jedna z czterech stron padding (padding-top, -right, -bottom, -left). Zapamiętaj: „padding” = wnętrze, „top” = góra.

Pytanie 3

CMYK to kombinacja czterech podstawowych kolorów stosowanych w druku:

A. turkusowego, purpurowego, żółtego, czarnego

B. turkusowego, błękitnego, białego, różowego

C. turkusowego, purpurowego, białego, czarnego

D. czerwonego, purpurowego, żółtego, szarego

Odpowiedź zawierająca kolory turkusowy, purpurowy, żółty i czarny jest poprawna, ponieważ CMYK to standardowy model kolorów stosowany w druku. Składa się on z czterech podstawowych kolorów: cyjan (turkusowy), magenta (purpurowy), żółty i czarny (key). Model ten jest powszechnie wykorzystywany w przemyśle poligraficznym, ponieważ pozwala na uzyskanie szerokiej gamy kolorów poprzez mieszanie tych czterech odcieni. Przykładem zastosowania CMYK jest druk ulotek, plakatów czy książek, gdzie precyzyjne odwzorowanie kolorów jest kluczowe dla jakości i estetyki produktu. W praktyce, mieszanie kolorów w tym modelu odbywa się przez stosowanie różnych proporcji farb, co pozwala na uzyskanie pożądanych odcieni. Warto również zauważyć, że standard CMYK jest podstawą wielu systemów druku cyfrowego oraz offsetowego, co czyni go fundamentalnym narzędziem w pracy projektantów graficznych oraz drukarzy, którzy muszą zrozumieć jego zasady, aby efektywnie realizować projekty graficzne.

Pytanie 4

Wskaż blok sformatowany poniższym stylem CSS:

background: linear-gradient(to right, LightBlue, DarkBlue);

A. Blok 1.

B. Blok 2.

C. Blok 4.

D. Blok 3.

Niestety, wybrana odpowiedź nie jest poprawna. Zrozumienie jak działają style CSS, zwłaszcza gradienty, jest kluczowe dla tworzenia atrakcyjnych stron internetowych. W stylach CSS, 'background: linear-gradient(to right, LightBlue, DarkBlue);' tworzy gradient liniowy, który przechodzi od koloru jasnoniebieskiego (LightBlue) do ciemnoniebieskiego (DarkBlue) od lewej do prawej strony. Ważnym aspektem jest zrozumienie, że gradient liniowy to płynne przejście kolorów wzdłuż linii prostej, co oznacza, że kolor tła danego elementu stopniowo zmienia się od jednego koloru do drugiego w określonym kierunku. Pomyłka mogła wynikać z niezrozumienia tego, jak działa gradient liniowy lub z błędnego zidentyfikowania kierunku gradientu. Pamiętaj, że kierunek gradientu może być określany za pomocą słów (jak 'to right') lub za pomocą stopni. Przykładowo, 'to right' odpowiada '90deg'. Spośród przedstawionych bloków, tylko Blok 2. ma gradient, który przechodzi poziomo od jasnoniebieskiego do ciemnoniebieskiego, co oznacza, że jest on sformatowany zgodnie z podanym stylem CSS.

Pytanie 5

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

A. Rysunek 2

B. Rysunek 3

C. Rysunek 4

D. Rysunek 1

Odpowiedzi które nie są zgodne z kodem HTML wynikają z błędnej interpretacji atrybutu colspan lub struktury tabeli. Na przykład jeden z rysunków przedstawia sytuację w której drugi wiersz tabeli zawiera dwie odrębne komórki podczas gdy kod HTML wyraźnie wskazuje na użycie atrybutu colspan=2 co powinno skutkować rozciągnięciem komórki z tekstem 'trzeci' na szerokość dwóch kolumn. Taki błąd często wynika z niepełnego zrozumienia jak działa atrybut colspan co jest kluczowe dla poprawnego tworzenia układów tabeli w HTML. Inny rysunek z kolei może przedstawiać brak rozciągnięcia komórki w dolnym wierszu co sugeruje brak zastosowania atrybutu colspan i wskazuje na brak synchronizacji między strukturą kodu a jego wizualizacją. Często spotykanym błędem jest także niezrozumienie różnicy między atrybutami colspan i rowspan które choć podobne mają zupełnie odmienne zastosowanie w kontekście organizacji układu tabeli. Zrozumienie tych różnic i umiejętne zastosowanie odpowiednich atrybutów pozwala na tworzenie bardziej złożonych i responsywnych układów stron internetowych w zgodzie z najlepszymi praktykami projektowymi. Analiza błędów w rozumieniu struktury tabeli i ich wizualizacji pomaga unikać takich pomyłek w przyszłości i sprzyja lepszemu projektowaniu interfejsów użytkownika które są nie tylko funkcjonalne ale i estetyczne co jest jednym z kluczowych wymogów nowoczesnego webdesignu. Poprawna interpretacja atrybutów i ich zastosowanie są fundamentalne w tworzeniu przejrzystych i łatwych w nawigacji stron co przekłada się bezpośrednio na lepsze doświadczenie użytkownika.

Pytanie 6

Aby nałożyć na zdjęcie półprzezroczysty znak wodny (logo prześwitujące przez obraz), należy:

A. zastosować filtr Gaussa

B. poprawić nasycenie kolorów

C. odpowiednio przyciąć obraz

D. wykorzystać kanał alfa

Aby logo prześwitywało przez zdjęcie (półprzezroczysty znak wodny), wykorzystuje się KANAŁ ALFA - steruje on stopniem przezroczystości pikseli, więc nakładana warstwa może być częściowo widoczna. Dlatego należy wykorzystać kanał alfa.

Pytanie 7

W której z technologii NIE da się przetwarzać danych wprowadzonych przez użytkownika na stronie WWW?

A. JavaScript

B. AJAX

C. CSS

D. PHP

CSS służy wyłącznie do opisu WYGLĄDU - nie ma logiki ani dostępu do danych, więc nie da się nim przetworzyć tego, co wpisał użytkownik. Dlatego danych użytkownika nie przetworzysz w CSS.

Pytanie 8

Grafik chce zamienić obraz JPG na PNG tak, by białe miejsca stały się przezroczyste. Co powinien zrobić?

A. obniżyć rozdzielczość obrazu

B. zaimportować obraz do edytora wektorowego

C. dodać kanał alfa

D. zamienić obraz na odcienie szarości

Aby białe miejsca stały się przezroczyste po zapisie do PNG, trzeba dodać KANAŁ ALFA - czyli warstwę przezroczystości, w której piksele można uczynić niewidocznymi. Dlatego należy dodać kanał alfa.

Pytanie 9

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

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

B. tylko smali, smaller, large, larger

C. jedynie big i smali

D. wyłącznie smali, medium, large

Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą zestawu wartości słownikowych, które obejmują xx-small, x-small, small, medium, large, x-large oraz xx-large. Użycie tych słów kluczowych jest zgodne z wytycznymi CSS i zapewnia spójne i zrozumiałe podejście do projektowania. Przykładowo, definiując klasę CSS dla nagłówka, możemy zastosować: h1 { font-size: large; } co skutkuje odpowiednim zwiększeniem rozmiaru czcionki, co jest zgodne z hierarchią typograficzną dokumentu. Zastosowanie wartości słownikowych zwiększa czytelność i dostępność treści, ponieważ są one zrozumiałe zarówno dla programistów, jak i dla przeglądarek. Ponadto, korzystając z tych wartości, projektanci mogą łatwiej dostosować wygląd strony do różnych urządzeń, co jest kluczowe w kontekście responsywnego web designu. Warto również wspomnieć, że wartości te są niezależne od jednostek miary, takich jak em czy px, co sprawia, że są bardziej elastyczne w użyciu.

Pytanie 10

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

A. SSH

B. SFTP

C. HTTPS

D. HTTP

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

Pytanie 11

Jaką informację przekazuje przeglądarce internetowej zapis <!DOCTYPE html> ?

A. W dokumencie wymagane jest zamknięcie każdego taga, nawet samozamykającego

B. Dokument został zapisany w wersji HTML 5

C. Dokument został zapisany w wersji HTML 4

D. W dokumencie wszystkie tagi są zapisane wielkimi literami

Odpowiedź, że dokument został zapisany w języku HTML 5, jest prawidłowa, ponieważ zapis <DOCTYPE html> jest standardowym nagłówkiem deklarującym, że dokument jest napisany w najnowszej wersji HTML, czyli HTML 5. Taki zapis informuje przeglądarkę, że ma interpretować zawartość dokumentu zgodnie z zasadami i funkcjami określonymi w HTML 5. Wprowadzenie HTML 5 przyniosło wiele ulepszeń, takich jak nowe elementy semantyczne (np. <header>, <footer>, <article>), które ułatwiają tworzenie strukturalnie poprawnych i bardziej dostępnych stron internetowych. Dodatkowo, HTML 5 wprowadza wsparcie dla multimediów (np. <video>, <audio>) oraz API, które umożliwiają bardziej interaktywne podejście do tworzenia aplikacji webowych. Warto pamiętać, że stosowanie aktualnych standardów jest kluczowe dla zapewnienia kompatybilności z nowymi przeglądarkami oraz urządzeniami mobilnymi, a także dla zwiększenia wydajności i bezpieczeństwa aplikacji webowych.

Pytanie 12

Która kolejność stylów CSS jest poprawna pod względem priorytetu (od najwyższego)?

A. rozciąganie stylu → zewnętrzny → lokalny

B. zewnętrzny → wydzielone bloki → lokalny

C. lokalny → wewnętrzny → zewnętrzny

D. wewnętrzny → zewnętrzny → rozciąganie stylu

Przy kaskadzie CSS najwyższy priorytet ma styl LOKALNY (inline, w atrybucie style), potem WEWNĘTRZNY (w <style> w nagłówku), a najniższy ZEWNĘTRZNY (dołączony plik CSS). Dlatego kolejność to: lokalny, wewnętrzny, zewnętrzny.

Pytanie 13

Do czego służy znacznik <i> w języku HTML?

A. umieszczania obrazu

B. zdefiniowania formularza

C. zdefiniowania nagłówka w treści

D. zmiany kroju pisma na pochylony

Znacznik <i> w języku HTML jest używany do przedstawienia tekstu w stylu kursywy. Jest to jeden z najprostszych znaczników, który jest często stosowany do podkreślenia pewnych elementów tekstowych, takich jak tytuły książek, nazwy filmów czy inne wyrazy, które mają znaczenie kontekstowe. Użycie tego znacznika jest zgodne z zasadami semantyki HTML, co oznacza, że zachowuje on znaczenie treści, a nie tylko jej wygląd. Warto również zauważyć, że w CSS istnieje wiele możliwości stylizacji tekstu, a znacznik <i> jest jednym z elementów, które w łatwy sposób można połączyć z regułami stylów, aby stworzyć atrakcyjne wizualnie strony internetowe. Przykładem zastosowania może być: <p>Ostatnio przeczytałem <i>Harry'ego Pottera</i> i bardzo mi się podobał.</p>. W tym przypadku tytuł książki jest wyróżniony, co przyciąga uwagę czytelnika. Warto pamiętać, że w nowoczesnym HTML zamiast <i> dla stylizacji można używać CSS, jednak <i> pozostaje ważnym elementem dla zachowania semantyki treści.

Pytanie 14

Której właściwości CSS użyć, aby dodać tekstowi podkreślenie (dolne lub górne)?

text-align

text-transform

text-indent

text-decoration

Podkreślenie (oraz nadkreślenie i przekreślenie) tekstu dodaje w CSS właściwość text-decoration, np. text-decoration: underline;. Steruje ona liniami zdobiącymi tekst. Dlatego podkreślenie ustawia text-decoration.

Pytanie 15

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: left; } aside { float: left; }

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

C. aside {float: left; }

D. nav { float: right; }

Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie.

W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie.

Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 16

Który znacznik sekcji <head> jest wymagany w HTML5, a jego brak walidator zgłasza jako błąd?

style

link

title

meta

Spośród znaczników sekcji <head> obowiązkowy w HTML5 jest <title> - każdy dokument musi mieć tytuł, więc jego brak walidator traktuje jak błąd. Dlatego wymagany jest <title>.

Pytanie 17

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

A. SSL

B. FTP

C. CMS

D. SEO

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

Pytanie 18

Który element blokowy HTML5 jest przeznaczony na nawigację witryny?

header

aside

nav

main

Element semantyczny <nav> wydziela blok NAWIGACJI witryny - zwykle menu główne lub zestaw linków do najważniejszych podstron, np. <nav><a href="/">Start</a> <a href="/kontakt">Kontakt</a></nav>. Semantyka jest ważna nie tylko porządkowo: czytniki ekranu i wyszukiwarki rozpoznają po <nav>, że to nawigacja. Zapamiętaj: „nav” jak nawigacja.

Pytanie 19

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

A. między znacznikami akapitu

B. w stopce strony

C. między <body> a </body>

D. w sekcji nagłówkowej (<head>)

Znacznik <meta> przekazuje metadane dokumentu, więc umieszcza się go w sekcji nagłówkowej <head>. Dlatego <meta> należy do <head>.

Pytanie 20

Która wartość atrybutu target otwiera stronę w NOWYM oknie lub karcie?

_blank

_parent

_self

_top

Wartość _blank atrybutu target otwiera odnośnik w NOWYM oknie lub karcie przeglądarki, np. <a href="..." target="_blank">. Stosuje się ją, by nie odrywać użytkownika od bieżącej strony. Dlatego nowe okno otwiera _blank.

Pytanie 21

W kodzie HTML5 znajduje się fragment, który zawiera błąd walidacji. Jakiego rodzaju jest to błąd?

<h6>tekst</h6>
<p>pierwsza <b>linia</b><br>
<p>Druga linia</p>

A. Nagłówek szóstego poziomu nie istnieje.

B. Znacznik <br> musi być zamknięty.

C. Pierwszy znacznik <p> nie został zamknięty.

D. Znaczniki powinny być zapisane wielkimi literami.

W tym zadaniu chodziło o rozpoznanie typowego błędu związanego z poprawnym zamykaniem znaczników HTML, a dokładniej – ze znacznikiem <p>. W przedstawionym kodzie rzeczywiście pierwszy znacznik <p> nie został zamknięty przed pojawieniem się kolejnego bloku <p>, co powoduje naruszenie struktury dokumentu. Według specyfikacji HTML5, element <p> nie powinien być zagnieżdżany ani przerwany przez inny blokowy element (w tym przypadku przez drugi <p>). Przeglądarki zwykle próbują automatycznie domykać taki znacznik, ale nie jest to dobra praktyka – takie poleganie na mechanizmach autokorekty może później prowadzić do trudnych do wykrycia błędów wizualnych albo nieprzewidywalnych efektów w stylach CSS. Z mojego doświadczenia wynika, że konsekwentne zamykanie znaczników nie tylko poprawia czytelność kodu, ale i ułatwia pracę zespołową oraz skalowanie projektu. Przykład: jeśli piszesz większy artykuł i zapomnisz zamknąć <p>, cała dalsza część tekstu może zostać potraktowana jako jeden paragraf. To potrafi solidnie namieszać, nawet w prostych stronach! Branża webowa od lat promuje zasadę – pisz zgodnie ze specyfikacją, a będziesz miał mniej problemów później. Zawsze lepiej przejrzeć strukturę dokumentu dwa razy, niż potem szukać błędów na produkcji. Przy pracy z edytorami kodu warto korzystać z funkcji podświetlania składni lub walidatorów HTML, które od razu wyłapują takie potknięcia.

Pytanie 22

Zaprezentowano kod tabeli o wymiarach 3x2. Jaką zmianę wprowadzić w jej drugim wierszu, aby tabela była zgodna z obrazkiem ukazującym niewidoczny wiersz?

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

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

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

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

Stosowanie stylu display: none w tabeli spowodowałoby całkowite usunięcie wiersza z układu, co oznacza, że nie tylko zawartość, ale i przestrzeń, którą zajmuje wiersz, zniknęłaby. To wpływa na pozostałe elementy tabeli, zmieniając jej układ i potencjalnie zaburzając całość kompozycji. Z kolei użycie clear: none w tym kontekście jest błędne, ponieważ clear dotyczy przepływu floatów, a nie bezpośrednio ukrywania lub pokazywania elementów. Ustawienie display: table-cell jest także nieodpowiednie, gdyż odnosi się do właściwości display elementów, które powinny być traktowane jako komórki tabeli, a nie całe wiersze. Typowym błędem jest mylenie visibility: hidden z display: none; pierwsza opcja powoduje ukrycie zawartości, ale zachowanie miejsca, co jest ważne w kontekście dynamicznych układów stron. Błędne rozumienie, jak różne style wpływają na układ dokumentu, może prowadzić do problemów z responsywnością i dostępnością projektu. Dobrym zwyczajem jest dokładne testowanie efektów używanych właściwości CSS, aby zrozumieć ich praktyczny wpływ na HTML, co jest kluczowe w zaawansowanym projektowaniu stron internetowych.

Pytanie 23

Który kod oznacza kolor CZERWONY?

#00EEEE

#00EE00

#EE0000

#0000EE

W zapisie #RRGGBB pierwsza para to czerwony. W #EE0000 wysoka jest tylko składowa czerwona (EE), a zielona i niebieska są zerowe - więc kolor jest CZERWONY. Dlatego czerwony to #EE0000.

Pytanie 24

W przypadku podanego fragmentu kodu walidator HTML zgłosi błąd, ponieważ <img src="kwiat.jpg alt="kwiat">

A. brak obrazu kwiat.jpg

B. użyto niewłaściwego znacznika do wyświetlenia obrazu

C. nie zamknięto cudzysłowu

D. zastosowano nieznany atrybut alt

Pojawiające się nieprawidłowe odpowiedzi mogą wynikać z mylnych interpretacji zasad działania HTML. W przypadku pierwszej odpowiedzi, sugerujące zastosowanie błędnego znacznika, warto zauważyć, że znacznik <img> jest właściwym i standardowym elementem do wyświetlania obrazów w HTML. To powszechnie używany tag, który jest zgodny z normami HTML. Przywołanie drugiej odpowiedzi, dotyczącej nieznanego atrybutu alt, jest również mylące. Atrybut alt jest standardowym elementem, który służy do opisu zawartości obrazów, co jest istotne z punktu widzenia dostępności. Pomaga osobom niewidomym i słabowidzącym zrozumieć zawartość wizualną strony. Obecność tego atrybutu jest wręcz zalecana w dobrych praktykach programistycznych. Ostatnia odpowiedź, odnosząca się do problemu z odnalezieniem pliku 'kwiat.jpg', pomija fakt, że przyczyną błędu w walidacji nie jest brak pliku, ale składnia kodu. Przeglądarki, które napotykają błędy składniowe, mogą nie renderować strony zgodnie z zamierzeniem, a to prowadzi do frustracji użytkowników oraz obniżenia jakości doświadczeń na stronie. Dlatego kluczowe jest zrozumienie, jak poprawne formatowanie i przestrzeganie standardów HTML wpływa na funkcjonalność oraz dostępność stron internetowych.

Pytanie 25

Który z rysunków obrazuje efekt działania przedstawionego fragmentu kodu HTML?

<table border="1">
 <tr><td rowspan="2">pierwszy</td><td>drugi</td></tr>
 <tr><td>trzeci</td></tr>
</table>

A. C.

B. B.

C. D.

D. A.

Super, wybrałeś właściwą odpowiedź! To rysunek C. Kod HTML to taki jakby zestaw narzędzi, który pozwala tworzyć różne układy stron internetowych, w tym tabelki. W tym przypadku mamy do czynienia z tabelą, która ma dwa wiersze i dwie kolumny. Zauważ, że pierwsza komórka z tekstem 'pierwszy' zajmuje miejsce aż na dwa wiersze, dzięki atrybutowi rowspan='2'. To oznacza, że można ją rozciągnąć w pionie, co zmienia układ całej tabeli. W pierwszym wierszu obok tej komórki jest komórka z tekstem 'drugi', a w drugim wierszu mamy jedynie 'trzeci', bo obok 'pierwszy' już jest zajęte miejsce. Dzięki temu, rysunek C dokładnie pokazuje, jak to wszystko działa. Pamiętaj, że umiejętność pracy z tabelami w HTML jest naprawdę ważna, jeśli chcesz tworzyć estetyczne i funkcjonalne strony.

Pytanie 26

Do przechowywania jakich danych służy w tabeli pole typu BLOB?

A. łańcuchów znaków o nieokreślonej długości

B. danych logicznych, np. true

C. liczb całkowitych większych od zakresu INT

D. dużych danych binarnych, np. grafiki

Typ BLOB (Binary Large Object) służy do przechowywania DUŻYCH danych binarnych - np. grafiki, plików audio czy dokumentów zapisanych bezpośrednio w bazie. Trzyma surowe bajty, a nie tekst czy liczby. Dlatego BLOB przechowuje duże dane binarne.

Pytanie 27

W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę zakładając, że w drugie pole użytkownik wpisał wartość "ala ma kota"?

<form>
  <select>
    <option value="v1">Kraków</option>
    <option value="v2">Poznań</option>
    <option value="v3">Szczecin</option>
  </select> <br>
  <input type="password" />
</form>

Efekt 1

Efekt 2

Efekt 3

Efekt 4

A. Efekt 4.

B. Efekt 2.

C. Efekt 3.

D. Efekt 1.

Pozostałe odpowiedzi nie są poprawne, ponieważ nie odpowiadają one opisowi działania kodu HTML formularza. W przypadku odpowiedzi 'Efekt 1', 'Efekt 3' oraz 'Efekt 4', możemy zauważyć, że nie są one zgodne z opisanym działaniem formularza. W HTML, pole hasła reprezentowane jest jako ciąg znaków zastępczych - kropeczki. Przy wpisaniu 'ala ma kota' do pola hasła, nie jesteśmy w stanie zobaczyć tej wartości, tylko kropeczki. Przy wyborze odpowiedzi 'Efekt 1', 'Efekt 3' lub 'Efekt 4', musielibyśmy zobaczyć wpisaną wartość 'ala ma kota' zamiast kropeczek, co jest niezgodne ze standardami HTML. Dlatego też, odpowiedzi te są nieprawidłowe. Pamiętaj, że ważne jest zrozumienie, jak działają różne elementy formularza w HTML, aby poprawnie przewidzieć efekt ich działania w przeglądarce.

Pytanie 28

Który sposób zapisu stylu CSS ma najwyższy priorytet (jest stosowany w pierwszej kolejności)?

A. styl importowany do wewnętrznego arkusza

B. wewnętrzny arkusz stylów

C. styl lokalny (śródliniowy, w atrybucie style)

D. zewnętrzny arkusz stylów

Pozostałe sposoby mają niższy priorytet. Arkusz WEWNĘTRZNY (w <style>) i ZEWNĘTRZNY (osobny plik CSS) działają „dalej” od elementu, więc ustępują stylowi inline. Styl IMPORTOWANY do arkusza wewnętrznego (@import) jest jeszcze słabszy. Najwyższy priorytet ma styl lokalny w atrybucie style.

Pytanie 29

Określ właściwą sekwencję stylów CSS, biorąc pod uwagę ich priorytet w formatowaniu elementów strony WWW?

A. Styl lokalny, Styl wewnętrzny, Styl zewnętrzny

B. Rozciąganie stylu, Styl zewnętrzny, Styl lokalny

C. Styl zewnętrzny, Wydzielone bloki, Styl lokalny

D. Styl wewnętrzny, Styl zewnętrzny, Rozciąganie stylu

Analizując inne odpowiedzi, można zauważyć, że w wielu przypadkach nie uwzględniają one podstawowych zasad kaskadowości CSS. Przykładowo, pierwsza odpowiedź sugeruje, że styl wewnętrzny powinien mieć pierwszeństwo przed zewnętrznym, co jest niepoprawne. W rzeczywistości, style zewnętrzne, które są ładowane z zewnętrznych arkuszy stylów, mogą być nadpisywane przez style lokalne i wewnętrzne, ale nie powinny być ignorowane w kontekście hierarchii. Następnie, opcja odnosząca się do wydzielonych bloków w kontekście stylów CSS nie ma podstaw teoretycznych, ponieważ nie istnieje uznawana terminologia w standardach CSS, która opisywałaby 'wydzielone bloki'. Każdy styl w CSS ma swoje miejsce w kolejności kaskadowej, a style lokalne powinny być definiowane jako najwyższe w hierarchii. Może to prowadzić do nieporozumień, zwłaszcza w przypadku początkujących programistów, którzy mogą nie rozumieć, dlaczego ich style zewnętrzne nie działają zgodnie z oczekiwaniami. Ważne jest, aby pamiętać, że odpowiednia specyfikacja i zrozumienie, które style mają pierwszeństwo, są kluczowe dla skutecznego i efektywnego projektowania stron internetowych. W przeciwnym razie, projektanci mogą napotkać problemy z nieoczekiwanym zachowaniem stylów oraz trudnościami w utrzymaniu i aktualizacji kodu CSS.

Pytanie 30

Brak którego elementu spowoduje błąd walidatora dokumentu HTML5?

A. <meta name="author" content="...">

B. prologu <!DOCTYPE html>

C. <body>

D. przynajmniej jednego <h1>

Pozostałe elementy nie są wymagane do przejścia walidacji. <meta name="author"> to opcjonalna metadana - podaje autora strony, ale jej pominięcie niczego nie psuje. Nagłówek <h1> bywa zalecany dla struktury i SEO, lecz dokument bez niego nadal jest poprawny składniowo. Znacznika <body> walidator może domyślnie założyć, więc jego brak nie generuje błędu. Obowiązkowa jest deklaracja <!DOCTYPE html> na początku dokumentu, dlatego to ona jest poprawną odpowiedzią.

Pytanie 31

Znacznik

<pre> </pre>

służy do prezentacji:

A. treści polską czcionką

B. znaku wielokropka

C. znaku przekreślenia

D. treści czcionką o stałej szerokości

Znacznik <pre> służy do wyświetlania treści w formacie, który zachowuje oryginalne formatowanie i białe znaki. Treści umieszczone wewnątrz tego znacznika są wyświetlane czcionką o stałej szerokości (monospace), co sprawia, że każda litera i znak zajmują tę samą ilość miejsca. Jest to szczególnie przydatne przy prezentacji kodu komputerowego, danych tabelarycznych lub wszelkich innych informacji, gdzie istotne jest zachowanie struktury. Na przykład, w języku HTML, umieszczając kod CSS lub JavaScript w znaczniku <pre>, programista zapewnia, że formatowanie kodu (np. wcięcia) jest widoczne, co ułatwia czytanie i zrozumienie. Zastosowanie znacznika <pre> jest zgodne z zasadami dobrych praktyk w web designie, gdzie czytelność kodu i danych jest kluczowa dla efektywnej komunikacji z użytkownikami oraz dla poprawnego działania aplikacji webowych.

Pytanie 32

Który z protokołów umożliwia publikację strony internetowej na serwerze?

A. NNTP

B. ICMP

C. SMTP

D. FTP

ICMP (Internet Control Message Protocol) to protokół, który używany jest głównie do przesyłania komunikatów kontrolnych w sieci, np. błędów czy informacji o tym, czy hosty są dostępne. I teraz tak - nie jest to protokół do transferu plików, więc nie nadaje się do publikowania stron. Więc używanie ICMP w tym kontekście może prowadzić do złych wniosków, bo nie jest to jego rola. Z drugiej strony, SMTP (Simple Mail Transfer Protocol) jest do wysyłania e-maili, a nie do publikacji stron. Przesyła wiadomości między serwerami pocztowymi, więc też nie ma zastosowania w transferze plików na serwery WWW. A NNTP (Network News Transfer Protocol) to natomiast protokół do rozsyłania wiadomości w grupach dyskusyjnych, co też nie ma związku z publikowaniem stron. Ważne jest, żeby rozumieć te protokoły, żeby unikać nieporozumień. Kiedy mówimy o publikacji, to najważniejsze są te protokoły, które obsługują transfer plików, jak FTP, oraz metody ich zabezpieczania. Błędny wybór protokołu może prowadzić do różnych problemów w publikacji.

Pytanie 33

Czym charakteryzują się systemy CMS?

A. możliwością programowania w zaawansowanych frameworkach

B. wbudowanym serwerem poczty

C. wbudowanym edytorem grafiki wektorowej

D. możliwością edycji treści bez znajomości HTML

CMS to system do zarządzania TREŚCIĄ, a nie edytor grafiki wektorowej czy serwer poczty. Nie wymaga też programowania w zaawansowanych frameworkach - przeciwnie, jego sens to praca osób bez wiedzy technicznej. CMS cechuje możliwość edycji treści bez znajomości HTML.

Pytanie 34

Która właściwość CSS ustawia kolor TEKSTU elementu?

text-color

background-color

font-color

color

background-color ustawia kolor TŁA, a nie tekstu. text-color i font-color to nazwy, które w CSS NIE istnieją (mimo intuicyjnego brzmienia). Kolor tekstu ustawia właściwość color.

Pytanie 35

Aby edytować nakładające się na siebie pojedyncze fragmenty grafiki, pozostawiając resztę bez zmian, należy zastosować:

A. kadrowanie

B. kanał alfa

C. warstwy

D. histogram

Pozostałe pojęcia dotyczą innych aspektów pracy z obrazem. Histogram to wykres rozkładu jasności i kolorów - pomaga ocenić ekspozycję i kontrast, ale nie służy do rozdzielania ani edytowania elementów. Kanał alfa przechowuje informację o przezroczystości pikseli, czyli decyduje, co jest widoczne, a nie pozwala niezależnie modyfikować nakładających się fragmentów. Kadrowanie jedynie przycina obraz do wybranego wycinka, odrzucając resztę. Aby edytować poszczególne, nakładające się elementy bez naruszania pozostałych, umieszcza się je na osobnych warstwach - to one dają taką niezależność.

Pytanie 36

W CSS zapis w postaci

h1::first-letter{color:red;}

spowoduje, że kolor czerwony będzie dotyczył

A. tekstów nagłówka pierwszego poziomu

B. pierwszej litery nagłówka drugiego poziomu

C. pierwszej litery nagłówka pierwszego poziomu

D. pierwszej linii akapitu

Zapis CSS h1::first-letter {color: red;} odnosi się do selektora pseudo-elementu first-letter, który jest używany do stylizacji pierwszej litery bloku tekstowego w nagłówkach. W tym wypadku, gdy selektor jest zastosowany do elementu h1, oznacza to, że kolor pierwszej litery nagłówka pierwszego stopnia (h1) zostanie zmieniony na czerwony. Pseudo-element first-letter działa tylko dla elementów blokowych, takich jak nagłówki, akapity czy listy. W praktyce, jeśli w dokumencie HTML mamy element <h1> z tekstem, np. 'Witaj świecie', to wyłącznie litera 'W' zostanie wyświetlona w kolorze czerwonym. To podejście jest zgodne ze standardami CSS, które definiują pseudo-elementy jako specyficzne fragmenty dokumentu, które można stylizować niezależnie od reszty zawartości. Warto również zauważyć, że stosowanie takich selektorów pozwala na uzyskanie bardziej złożonych efektów wizualnych bez konieczności modyfikacji struktury HTML. Umożliwia to projektantom stron internetowych większą elastyczność i kontrolę nad estetyką treści.

Pytanie 37

W języku CSS stworzono określony styl. Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości

div {
     border: solid 2px blue;
     margin: 20px;
 }

A. 2 px oraz marginesy zewnętrzne tego obramowania

B. 2 px oraz marginesy wewnętrzne tego obramowania

C. 20 px oraz marginesy zewnętrzne tego obramowania

D. 20 px oraz marginesy wewnętrzne tego obramowania

Wybór odpowiedzi która nie uwzględnia prawidłowego połączenia właściwości border i margin prowadzi do błędnych założeń Odpowiedzi które sugerują że marginesy znajdują się wewnątrz obramowania są mylące ponieważ w CSS właściwość padding odpowiada za marginesy wewnętrzne natomiast margin dotyczy przestrzeni na zewnątrz obramowania Częstym błędem jest mylenie tych dwóch pojęć co prowadzi do niepoprawnego stylizowania elementów na stronie internetowej W przypadku definicji CSS przedstawionej na obrazku właściwość margin jest ustawiona na 20px co oznacza że do każdego z boków elementu dodawane jest 20 pikseli przestrzeni na zewnątrz jego obramowania Obramowanie samo w sobie ma 2 piksele grubości co precyzyjnie określa border 2px Próby rozumienia tej definicji w kategoriach wewnętrznych marginesów są błędne i wynikają z niepoprawnego zrozumienia struktury boksu w CSS Poprawne zrozumienie różnic między margin i padding jest kluczowe dla prawidłowego stosowania stylów CSS w praktyce projektowania stron internetowych oraz dla uzyskania estetycznych i funkcjonalnych układów które poprawiają doświadczenie użytkownika poprzez właściwe zarządzanie przestrzenią i separacją elementów

Pytanie 38

W którym z poniższych przykładów walidacja fragmentu kodu CSS zakończy się sukcesem?

A. <p style="font-size:bold;">

B. <p style="font-style:bold;">

C. p { text-size:bold; }

D. p { font-weight:bold; }

Odpowiedzi, które próbują zastosować atrybuty stylów w niepoprawny sposób, zdradzają zrozumienie składni CSS oraz zasad stylizacji dokumentów HTML. W przypadku <p style="font-style:bold;"> pojawia się błąd, ponieważ atrybut style powinien zawierać właściwość font-weight, a nie font-style. Właściwość font-style jest przeznaczona do określenia stylu czcionki, takiego jak italic czy normal, a nie do ustawiania jej grubości. Zatem użycie 'bold' w kontekście font-style jest nieprawidłowe i prowadzi do tego, że przeglądarka nie zastosuje żadnej stylizacji. W kolejnej opcji, p { text-size:bold; }, znowu widzimy błąd w nazwie właściwości. Nie istnieje właściwość CSS o nazwie text-size; powinna być użyta font-size, a wartością mogą być jednostki takie jak px, em, rem itp. Ponadto, wartość 'bold' nie jest odpowiednia dla font-size, ponieważ ta właściwość przyjmuje liczby i jednostki, a nie stylizację. Ostatnia odpowiedź, <p style="font-size:bold;">, również jest błędna z tego samego powodu co wcześniej - font-size wymaga konkretnej wartości w jednostkach, a 'bold' nie jest akceptowalną wartością. Te błędne odpowiedzi pokazują, jak ważne jest zrozumienie składni CSS i stosowanie właściwych nazw właściwości w celu efektywnego stylizowania dokumentów HTML.

Pytanie 39

W CSS zapis selektora

p > i { color: red;}

wskazuje, że kolorem czerwonym będzie wyróżniony

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

B. tylko ten tekst znacznika <p>, który ma przypisaną klasę o nazwie i

C. każdy tekst w znaczniku <p> z wyjątkiem tych w znaczniku <i>

D. wszystkie teksty w znaczniku <p> lub każdy tekst w znaczniku <i>

Odpowiedzi, które nie uznają znaczenia operatora > oraz kontekstu, w jakim elementy <i> są umieszczone, mogą prowadzić do błędnych wniosków. Przykładowo, stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> zostanie sformatowany, jest niezgodne z zasadami działania CSS, ponieważ selektor ten nie wyklucza jedynie <i>, lecz odnosi się do hierarchii struktury DOM. W praktyce, jeśli <i> nie jest bezpośrednim dzieckiem <p>, to nie będzie objęte regułą. Z kolei pomylenie selektorów może skutkować tym, że nie osiągniemy zamierzonych efektów stylizacji, co jest częstym problemem w projektach webowych. Ponadto, odpowiedzi sugerujące, że selektor dotyczy wszystkich elementów <p> lub że dotyczy on klasy <i>, wynikają z niepełnego zrozumienia podstaw CSS. Należy pamiętać, że klasy są definiowane w osnowie HTML, a nie w kontekście selektorów bezpośrednich. Właściwe zrozumienie selektorów jest kluczowe dla efektywnego stylizowania i organizacji kodu, a także dla osiągnięcia zamierzonych efektów wizualnych na stronach internetowych.

Pytanie 40

Które znaczniki HTML wyświetlą tekst „Dobre strony mojej strony” w JEDNYM wierszu, jeśli nie zastosowano żadnych reguł CSS?

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

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

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

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

Pozostałe znaczniki są BLOKOWE, więc każdy zaczyna się od nowej linii i rozbiłby tekst na osobne wiersze. Dotyczy to <p> (akapit), <h3> (nagłówek) oraz <div> (kontener). W jednym wierszu tekst utrzyma liniowy <span>.

Rozpocznij nowy egzamin

Powrót do strony głównej