Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 8 czerwca 2026 15:49
Data zakończenia: 8 czerwca 2026 16:13

Egzamin zdany!

Wynik: 31/40 punktów (77,5%)

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

Który kod oznacza kolor o odcieniu NIEBIESKIM?

#00EE00

#0000EE

#EE0000

#EE00EE

W zapisie #RRGGBB ostatnia para to niebieski. #0000EE ma zerowy czerwony i zielony, a wysoką składową niebieską - więc kolor jest NIEBIESKI. Dlatego niebieski to #0000EE.

Pytanie 2

Aby obraz umieszczony na stronie internetowej mógł automatycznie dostosowywać się do rozmiaru ekranu, na którym jest prezentowana strona, trzeba

A. nie zmieniać obu jego wymiarów za pomocą stylów CSS

B. jego szerokość ustawić w wartościach procentowych

C. jeden z jego wymiarów określić w pikselach

D. oba jego wymiary ustawić w pikselach

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowe dla zapewnienia responsywności strony internetowej. Gdy szerokość obrazu wyrażona jest w procentach, automatycznie dostosowuje się ona do szerokości kontenera, w którym się znajduje. To oznacza, że obraz będzie skalował się do rozmiaru ekranu użytkownika, co jest szczególnie ważne w kontekście urządzeń mobilnych oraz różnych rozdzielczości ekranów. Przykładem może być użycie stylu CSS: `img { width: 100%; height: auto; }`, co pozwala na zachowanie proporcji obrazu, jednocześnie dostosowując jego szerokość do kontenera. Tego rodzaju praktyki są zgodne z zasadami responsywnego projektowania (Responsive Web Design) i są zalecane przez standardy W3C. Dzięki takim rozwiązaniom użytkownik zyskuje lepsze doświadczenie, a strona wygląda estetycznie na różnych urządzeniach. Dobrą praktyką jest również testowanie strony na różnych ekranach, aby upewnić się, że wszystkie obrazy i inne elementy dostosowują się do zmieniających się warunków wyświetlania.

Pytanie 3

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

A. Kod 2

B. Kod 1

C. Kod 3

D. Kod 4

Kod 2 jest prawidłowy, ponieważ dla bloków 2 i 3 stosowane jest ustawienie float: left; co pozwala na ich ułożenie w jednym wierszu z lewej strony. Blok 4 z float: right; umiejscawia się po prawej stronie, co umożliwia uzyskanie układu bloków 2-4 w jednej linii, odpowiadając schematowi. Blok 5 z float: left; rozpoczyna nowy wiersz poniżej, zgodnie z założonym układem. Takie użycie właściwości float oraz width pozwala na zorganizowanie elementów na stronie bez użycia flexbox lub grid, co jest klasycznym podejściem do układu strony w CSS. Dobrym przykładem praktycznego zastosowania jest tworzenie responsywnych layoutów, gdzie float można używać do kontrolowania przepływu elementów na mniejszych ekranach. Mimo że obecnie technologia flexbox i grid jest bardziej popularna, znajomość stosowania float nadal jest istotna, zwłaszcza w kontekście starszych projektów, które mogą wymagać utrzymania zgodności z wcześniejszymi wersjami CSS. To rozwiązanie zapewnia zgodność z wieloma starszymi przeglądarkami, co jest kluczowe w przypadku długoterminowych projektów webowych.

Pytanie 4

Który zapis w dokumencie HTML połączy stronę z zewnętrznym arkuszem stylów style.css?

<a src="/style.css">

<a href="/style.css">

<link rel="stylesheet' src="/style.css">

<link rel="stylesheet" href="/style.css">

Pozostałe zapisy są błędne. <link> używa atrybutu href, a nie src (do tego w jednym wariancie jest niedomknięty cudzysłów). <a> tworzy hiperłącze, a nie dołącza arkusza stylów. Arkusz podłącza <link rel="stylesheet" href="/style.css">.

Pytanie 5

Wskaż, który paragraf jest sformatowany przy użyciu podanego stylu CSS:

p {
    font-family: serif;
    background-color: Teal;
    color: white;
    font-style: italic;
}

A. Paragraf 3

B. Paragraf 2

C. Paragraf 1

D. Paragraf 4

Paragraf 4 jest prawidłowo sformatowany zgodnie z przedstawionym stylem CSS. W stylu tym zastosowano cztery właściwości: font-family o wartości serif co sugeruje użycie czcionki o kroju szeryfowym background-color ustawiony na Teal co ustawia tło na ciemnozielony kolor color ustawiony na White co oznacza że tekst powinien być biały oraz font-style ustawiony na italic co powoduje że tekst jest pochylony. Paragraf 4 spełnia te kryteria jest napisany czcionką szeryfową ma ciemnozielone tło biały tekst i jest kursywą. Zastosowanie takich stylów jest częste w projektowaniu stron internetowych gdzie ważne jest czytelne i estetyczne przedstawienie informacji. Używanie odpowiednich stylów CSS pozwala na lepszą organizację wizualną treści co jest kluczowe w tworzeniu interfejsów przyjaznych dla użytkownika. Stylowanie w CSS wspiera standardy takie jak CSS3 które wprowadzają nowe właściwości i ulepszenia umożliwiające bardziej zaawansowane i wydajne metody formatowania.

Pytanie 6

Jakie polecenie HTML powinno być zastosowane, aby sformatować akapit tekstu?

Tekst może być zaznaczony albo istotny dla autora

A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

B. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>

C. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>

D. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>

Odpowiedź druga jest prawidłowa, ponieważ stosuje poprawną składnię HTML do oznaczenia fragmentów tekstu z różnym formatowaniem. Element <p> służy do definiowania paragrafu, w którym tekst jest umieszczony. Element <mark> używany jest do oznaczania tekstu, który powinien być zwrócony uwagę czytelnika, poprzez podkreślenie go kolorem tła. Z kolei <em> jest przeznaczony do oznaczenia tekstu, który ma zostać wyróżniony jako istotny, zazwyczaj poprzez użycie kursywy. Użycie tych elementów w połączeniu z zamykającymi tagami, jak w odpowiedzi drugiej, jest zgodne z zaleceniami standardów HTML5, które kładą nacisk na semantyczne znaczenie znaczników. To podejście wspiera dostępność oraz SEO, ponieważ pomaga czytnikom ekranowym i wyszukiwarkom lepiej zrozumieć strukturę i znaczenie treści. Praktyczne zastosowanie tych znaczników można zobaczyć na stronach internetowych, gdzie kluczowe informacje muszą być odpowiednio wyróżnione, aby poprawić doświadczenie użytkownika i przekazać istotne dane w czytelny sposób.

Pytanie 7

Aby wykorzystać skrypt znajdujący się w pliku przyklad.js, konieczne jest połączenie go ze stroną przy użyciu kodu

A. <script>przyklad.js</script>

B. <script src="przyklad.js"></script>

C. <script link="przyklad.js"></script>

D. <link rel="script" href="przyklad.js">

Odpowiedź <script src="przyklad.js"></script> jest naprawdę na miejscu, bo użycie atrybutu 'src' w znaczniku <script> to taki standardowy sposób dołączania zewnętrznych skryptów JS do HTML-a. Atrybut 'src' mówi przeglądarce, gdzie znaleźć ten skrypt, więc może go załadować i wykonać. Dzięki temu, skrypt z pliku 'przyklad.js' wchodzi w interakcję ze stroną i może dodawać różne funkcje, jak na przykład reagowanie na działania użytkownika czy manipulowanie elementami na stronie. Pamiętaj, że najlepiej dołączać skrypty na końcu dokumentu, zaraz przed </body>, bo wtedy cała zawartość strony ładuje się najpierw. Warto też pomyśleć o atrybucie 'defer' lub 'async', żeby lepiej zoptymalizować ładowanie skryptów i nie blokować renderowania strony. Na przykład, <script src="przyklad.js" defer></script> pozwoli na asynchroniczne ładowanie, co z pewnością poprawia wydajność.

Pytanie 8

Aby sprawdzić poprawność składni kodu CSS, można skorzystać z:

A. optymalizatora

B. konsolidatora

C. walidatora

D. debuggera

Poprawność składni CSS sprawdza walidator - na przykład walidator CSS organizacji W3C (jigsaw.w3.org/css-validator). Analizuje arkusz pod kątem zgodności ze standardem i wypisuje błędy oraz ostrzeżenia: literówki we właściwościach, nieprawidłowe wartości czy brakujące średniki. Dlatego do kontroli składni CSS służy walidator.

Pytanie 9

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. HTML 4.01 Transitional

B. HTML 5

C. HTML 4.01 Strict

D. XHTML 1.1

Odpowiedź HTML 5 jest prawidłowa, ponieważ to właśnie w tej wersji języka HTML wprowadzono nowe semantyczne znaczniki, takie jak <header>, <article>, <section> oraz <footer>. Te znaczniki mają na celu lepsze strukturalne organizowanie treści w dokumentach internetowych, co ułatwia zarówno odczyt zrozumienia przez przeglądarki, jak i poprawia dostępność dla osób korzystających z technologii wspomagających. Na przykład, <header> zazwyczaj zawiera nagłówki i elementy nawigacyjne, podczas gdy <article> służy do oznaczenia niezależnej jednostki treści, np. artykułu prasowego. <section> jest używane do grupowania powiązanych sekcji, a <footer> zawiera informacje takie jak prawa autorskie czy linki do polityki prywatności. Wdrożenie tych znaczników zgodnie z najlepszymi praktykami zwiększa semantykę strony, co jest korzystne dla SEO, a także pozwala na lepsze zrozumienie struktury strony przez roboty indeksujące. HTML 5 jest obecnie standardem w tworzeniu stron internetowych i jego znajomość jest kluczowa dla współczesnych deweloperów.

Pytanie 10

Którego znacznika HTML użyć, aby tekst miał czcionkę o stałej szerokości i zachował dodatkowe spacje, tabulacje oraz znaki końca linii?

<code> ... </code>

<ins> ... </ins>

<blockquote> ... </blockquote>

<pre> ... </pre>

Pozostałe znaczniki nie zachowują białych znaków tak jak <pre>. <code> oznacza kod i daje czcionkę monospace, ale sam NIE zachowuje wielu spacji i łamań linii (często łączy się go z <pre>). <ins> oznacza tekst wstawiony (podkreślony), a <blockquote> to cytat blokowy z wcięciem. Formatowanie i białe znaki zachowuje <pre>.

Pytanie 11

W HTML-u atrybut shape w znaczniku area, który definiuje kształt obszaru, może przyjąć wartość

A. poly, square, circle

B. rect, poly, circle

C. rect, square, circle

D. rect, triangle, circle

Atrybut shape znacznika area w języku HTML jest wykorzystywany do określenia kształtu obszaru, który jest aktywny w mapie obrazów. Przyjmuje on wartości rect (prostokąt), poly (wielokąt) oraz circle (okrąg). Każda z tych wartości definiuje sposób, w jaki kształt obszaru jest interpretowany przez przeglądarkę. Na przykład, wartość 'rect' wymaga czterech parametrów, które określają lewy górny i prawy dolny róg prostokąta. W przypadku 'circle', musimy podać współrzędne środka oraz promień okręgu, a 'poly' wymaga podania współrzędnych wszystkich punktów wierzchołków wielokąta. Praktyczne zastosowanie atrybutu shape pozwala na tworzenie interaktywnych map obrazów, gdzie użytkownik może klikać w różne obszary, co zwiększa dostępność i użyteczność strony. Warto pamiętać, że korzystanie z map obrazów i odpowiedniego atrybutu shape powinno być zgodne z aktualnymi standardami W3C, co wpływa na poprawność i wydajność strony internetowej.

Pytanie 12

Model barw o parametrach: odcień, nasycenie, jasność i przezroczystość to:

A. HSLA

B. RGBA

C. CMYK

D. sRGB

Model o parametrach odcień, nasycenie, jasność ORAZ przezroczystość (alfa) to HSLA - rozszerzenie HSL o kanał alfa. Dlatego mowa o modelu HSLA.

Pytanie 13

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

background-color

font-color

color

text-color

Kolor TEKSTU elementu ustawia w CSS właściwość color, np. color: #000000; daje czarny tekst. Tła dotyczy osobna właściwość background-color. Dlatego kolor tekstu ustawia color.

Pytanie 14

Która właściwość CSS przyjmuje wartości underline, overline, line-through?

text-decoration

text-style

font-weight

font-style

Właściwość text-decoration steruje ozdobą tekstu liniami: underline (podkreślenie), overline (nadkreślenie), line-through (przekreślenie) oraz none. Dlatego te wartości przyjmuje text-decoration.

Pytanie 15

Który znacznik HTML umożliwia DYNAMICZNE generowanie grafiki na stronie (bez dodatkowych plików)?

<img>

<canvas>

<embed>

<object>

Element <canvas> to obszar, na którym JavaScript dynamicznie rysuje grafikę (kształty, wykresy, animacje, gry) bez dołączania zewnętrznych plików obrazu. Sam znacznik jest pustym „płótnem”, a treść powstaje skryptem. Dlatego dynamiczną grafikę umożliwia <canvas>.

Pytanie 16

O czym informuje przeglądarkę internetową zapis <!DOCTYPE html>?

A. Dokument jest zapisany w wersji HTML 4.

B. Dokument został zapisany w języku HTML 5.

C. W dokumencie wszystkie tagi są zapisane wielkimi literami.

D. W dokumencie każda etykieta musi być zamknięta, nawet te samozamykające.

Wszystkie zaproponowane odpowiedzi poza tą właściwą opierają się na nieaktualnych lub błędnych założeniach dotyczących HTML. Kiedy mówimy o dokumentach HTML, istotnym elementem jest zrozumienie znaczenia deklaracji <!DOCTYPE html>. Odpowiedź sugerująca, że dokument powinien być zapisany w wielkich literach, jest nieuzasadniona, ponieważ HTML jest językiem, który nie rozróżnia wielkości liter, a stosowanie wielkich liter nie wpływa na interpretację kodu przez przeglądarki. Z kolei twierdzenie, że dokument został zapisany w HTML 4, jest przestarzałe, ponieważ HTML5 jest następcom HTML 4.1 i jego wprowadzenie oznacza znaczne zmiany w architekturze i możliwościach języka. Dodatkowo, koncepcja, że każdy znacznik musi być zamykany, również nie jest precyzyjna; HTML5 wprowadza elementy samozamykające się, takie jak <img> czy <br>, które nie wymagają zamykania, co różni się od wcześniejszych standardów. Zrozumienie tych podstawowych koncepcji jest kluczowe dla tworzenia nowoczesnych stron internetowych, a nieprawidłowe interpretacje mogą prowadzić do błędów w kodowaniu i niezgodności w wyświetlaniu treści.

Pytanie 17

W języku CSS określono styl dla pola edycyjnego. Pole to będzie miało jasnozielony kolor tła, gdy będzie w trybie edycji.

A. gdy będzie na nie najechane kursorem bez kliknięcia.

B. w każdej sytuacji.

C. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie.

D. po naciśnięciu na nie myszką w celu wpisania tekstu.

Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest prawidłowa, ponieważ reguła CSS <pre>input:focus { background-color: LightGreen; }</pre> odnosi się do stanu "focus" elementu formularza, który występuje, gdy pole edycyjne jest aktywne. To znaczy, że użytkownik musi kliknąć na pole, aby je aktywować, co pozwala na wprowadzenie danych. W momencie, gdy pole ma stan "focus", jego tło zmienia się na jasnozielone, co jest pomocne dla użytkowników, aby zidentyfikować, które pole aktualnie edytują. To zachowanie jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika, które promują klarowność i intuicyjność. Dzięki zastosowaniu kolorów i wizualnych wskazówek, użytkownicy mogą łatwiej poruszać się po formularzach, co zwiększa ich efektywność. Ponadto, stosowanie takich reguł CSS jest zgodne z zaleceniami WCAG (Web Content Accessibility Guidelines), które składają się z wytycznych dotyczących dostępności treści internetowych, co sprawia, że aplikacje są bardziej przyjazne dla użytkowników z różnymi potrzebami.

Pytanie 18

Który znacznik HTML jest elementem BLOKOWYM?

<strong>

<img>

<p>

<span>

Element BLOKOWY zajmuje całą szerokość i zaczyna się od nowej linii - takim elementem jest akapit <p>. Dlatego elementem blokowym jest <p>.

Pytanie 19

W CSS, stosowanie poniższego kodu na stronie z kilkoma akapitami, gdzie każdy składa się z kilku linijek, spowoduje, że

p::first-line
 {
     font-size: 150%;
 }

A. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

B. cały tekst w paragrafie zostanie powiększony o 150%

C. pierwsza linia każdego z paragrafów będzie miała mniejszą wielkość czcionki od pozostałych linii

D. pierwszy paragraf na stronie będzie miał powiększoną czcionkę w całości

Zapis CSS p::first-line { font-size: 150%; } używa selektora pseudo-elementu ::first-line który stosuje stylizację do pierwszej linii każdego paragrafu. W tym przypadku zmieniamy rozmiar czcionki pierwszej linii na 150% jej domyślnej wartości co oznacza że będzie ona o 50% większa niż reszta tekstu. Pseudo-element ::first-line jest często stosowany w projektowaniu stron internetowych aby wyróżnić pierwsze zdanie lub akapit co może pomóc w lepszej organizacji treści i zwiększeniu czytelności. Ten sposób formatowania jest zgodny ze standardami CSS i jest wspierany przez większość nowoczesnych przeglądarek internetowych. Takie podejście może być użyteczne w projektach gdzie istotne jest nadanie unikalnego wyglądu nagłówkom sekcji lub wprowadzeniom bez zmieniania struktury HTML. Ważne jest aby pamiętać że ::first-line stosuje się tylko do elementów blokowych takich jak paragrafy co ogranicza jego użycie do tych specyficznych scenariuszy ale jednocześnie pozwala na precyzyjne dostosowanie stylu tekstu w dokumencie.

Pytanie 20

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

A. IDE

B. WYSIWYG

C. WEB STUDIO

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 21

Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?

A. <img src="rysunek.png" style="width: 50px">

B. <img src="rysunek.png" style="width: 25px; height:25px;">

C. <img src="rysunek.png" style="width: 25px; height:50px;">

D. <img src="rysunek.png">

No dobra, ta odpowiedź <img src="rysunek.png" style="width: 50px"> jest w porządku, bo ustawia szerokość grafiki na 50 pikseli. Dzięki temu zachowujemy proporcje oryginalnego rysunku, który ma rozmiar 200x100 pikseli. Jak zmniejszymy szerokość do 50 px, to automatycznie zmniejsza się też wysokość, więc dostajemy miniaturkę 50x25 px. To jest mega istotne, kiedy budujemy responsywne strony, które muszą się dobrze wyświetlać na różnych urządzeniach. Korzystanie z CSS do ogarniania wielkości obrazków to najlepsza praktyka w web devie, bo dzięki temu możemy elastycznie dopasować treści do różnych ekranów. No i nie zapominajmy o dostępności – zasady mówią, że zachowanie proporcji jest ważne, bo źle skompresowane lub rozciągnięte obrazy mogą sprawić problem osobom z ograniczeniami wzrokowymi.

Pytanie 22

Który selektor sformatuje jednocześnie akapity z klasą „tekst” oraz element blokowy o ID „obrazki”?

p#tekst, div.obrazki

p#tekst + div.obrazki

p.tekst, div#obrazki

p.tekst + div#obrazki

Kropka oznacza klasę, a krzyżyk identyfikator: p.tekst to akapity z klasą „tekst”, a div#obrazki to <div> o id „obrazki”. Przecinek między selektorami GRUPUJE je, więc p.tekst, div#obrazki zastosuje tę samą regułę do obu zestawów elementów naraz. Dlatego to ten selektor jest poprawny.

Pytanie 23

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

A. aside {float: left; }

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

C. nav { float: right; }

D. nav { float: left; } aside { float: left; }

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 24

Aby poprawić wydajność strony z grafiką o wymiarach 2000 px na 760 px, konieczne jest zmniejszenie jej rozmiarów

A. za pomocą właściwości CSS, podając rozmiar w procentach

B. w programie graficznym

C. za pomocą właściwości CSS, podając rozmiar w pikselach

D. za pomocą atrybutów HTML

Odpowiedź "w programie graficznym" jest prawidłowa, ponieważ zmniejszenie rozmiaru grafiki w sposób, który rzeczywiście wpływa na jej wielkość pliku oraz jakość wizualną, powinno być przeprowadzane w programie graficznym. Programy takie jak Adobe Photoshop, GIMP czy Canva umożliwiają precyzyjne dostosowanie wymiarów oraz kompresję grafiki, co pozwala na optymalizację jej do użytku w internecie. Przykładowo, zmieniając rozmiar grafiki do wymiarów 1000 px na 380 px i zapisując ją w odpowiednim formacie (np. JPEG lub PNG z odpowiednią jakością), można znacznie zmniejszyć wielkość pliku, co przyczyni się do szybszego ładowania strony. Ponadto, odpowiednia kompresja umożliwia zachowanie dobrego balansu między jakością a rozmiarem pliku, co jest istotne dla doświadczeń użytkowników. W branży internetowej stosuje się różne techniki optymalizacji grafiki, takie jak lazy loading czy formaty WebP, które wspierają szybkie ładowanie stron. Warto również zwrócić uwagę na znaczenie odpowiedniej rozdzielczości grafiki, aby uniknąć zniekształceń i zapewnić optymalną jakość wizualną.

Pytanie 25

Znaczniki HTML <strong> oraz <em>, które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. <u> oraz <sup>

B. <b> oraz <i>

C. <i> oraz <mark>

D. <b> oraz <u>

Wybór błędnych znaczników HTML często wynika z niepełnego zrozumienia różnicy między semantyką a formatowaniem. Znacznik <u> służy do podkreślenia tekstu, co może być mylące w kontekście oznaczania ważności treści. Oznaczanie tekstu w ten sposób nie dostarcza żadnej informacji o jego znaczeniu, co jest kluczowe w tworzeniu dostępnych i zrozumiałych stron internetowych. Użycie <sup> oznacza tekst w indeksie górnym, co również nie ma związku z akcentowaniem ważności. W przypadku <b> i <u>, oba znaczniki służą do formatowania, ale ignorują istotne aspekty semantyki, co może prowadzić do nieporozumień w interpretacji treści przez przeglądarki oraz urządzenia asystujące. Użycie <i> oznacza tekst w kursywie, jednak podobnie jak <b>, jest to czysto wizualne formatowanie bez znaczenia semantycznego. W praktyce, nadmierne poleganie na takich znacznikach bez zrozumienia ich ról w kontekście semantyki prowadzi do tworzenia stron, które są mniej dostępne i mniej przyjazne dla użytkowników. Kluczowym elementem budowy nowoczesnych aplikacji webowych jest stosowanie odpowiednich znaczników, które nie tylko prezentują treść, ale również przekazują jej znaczenie, co jest podstawą dobrego UX oraz SEO.

Pytanie 26

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu:

<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. Nieznany znacznik h6.

B. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania.

C. Znacznik br nie może występować wewnątrz znacznika p.

D. Znacznik br nie został poprawnie zamknięty.

Rozważmy błędne koncepcje zawarte w innych odpowiedziach. Wskazanie, że znacznik br nie został poprawnie zamknięty, jest niepoprawne, ponieważ znacznik <br> jest samozamykający i nie wymaga dodatkowego znacznika zamykającego. Często błędem jest próba zamknięcia takich znaczników, co prowadzi do niepotrzebnego zamieszania w kodzie. Dodatkowo, stwierdzenie, że znacznik br nie może występować wewnątrz znacznika p, jest nieprawidłowe. Zgodnie ze standardami HTML, znacznik <br> jest dozwolony wewnątrz <p> i służy do wprowadzenia przerwy linii. Wreszcie, znacznik <h6> jest prawidłowym znacznikiem HTML i jego użycie nie stanowi błędu. Pomyłka ta wynika prawdopodobnie z niepełnej znajomości dostępnych znaczników HTML. Dlatego zawsze warto poszerzać swoją wiedzę na ten temat i regularnie odnosić się do specyfikacji HTML.

Pytanie 27

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

A. pseudoklasę

B. klasę

C. identyfikator

D. pseudoelement

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 28

Kolorem, który ma odcień niebieski, jest kolor

A. #EE0000

B. #0000EE

C. #EE00EE

D. #00EE00

Poprawna odpowiedź to kolor #0000EE, który reprezentuje odcień niebieskiego w systemie RGB. Kolory w tym systemie definiowane są poprzez trzy składowe: czerwoną, zieloną i niebieską (RGB), gdzie wartości są podawane w formacie szesnastkowym. W przypadku #0000EE, pierwsze dwie pary zer oznaczają brak składowych czerwonej i zielonej, natomiast ostatnia para 'EE' wskazuje na wysoką intensywność składowej niebieskiej. Takie podejście jest powszechnie stosowane w programowaniu i projektowaniu stron internetowych, gdzie precyzyjnie określone kolory mają kluczowe znaczenie dla estetyki i użyteczności interfejsu. Przykładem zastosowania koloru niebieskiego może być jego użycie w projektach związanych z tematyką technologiczną lub finansową, gdzie niebieski symbolizuje zaufanie i profesjonalizm. Warto również zwrócić uwagę, że w kontekście dostępności barw, stosowanie odpowiednich kontrastów z tłem jest niezbędne, aby zapewnić czytelność tekstu i elementów graficznych. Odpowiednie wykorzystanie kodów koloru może znacząco wpłynąć na postrzeganie marki oraz interakcję użytkowników z treściami wizualnymi na stronach internetowych.

Pytanie 29

Fragment kodu w języku JavaScript realizujący dodawanie dwóch liczb ma poniższą postać. Aby dodawanie wykonane było po kliknięciu przycisku o nazwie "dodaj", należy w wykropkowane miejsce wstawić

Podaj pierwszą liczbę: <input type="text" name="liczba1" />
 Podaj drugą liczbę: <input type="text" name="liczba2" />
 ….
 <script type=text/javascript>
 function dodaj()
 {
     // ta funkcja realizuje dodawanie i podaje jego wynik
 }
 </script>

A. <button onclick="return oblicz()">dodaj</button>

B. <button onselect="return dodaj()">dodaj</button>

C. <button onselect="return dodaj()">oblicz</button>

D. <button onclick="return dodaj()">dodaj</button>

Wybór niewłaściwej odpowiedzi sugeruje pewne nieporozumienie związane z obsługą zdarzeń w JavaScript i jak są one wywoływane w kontekście przycisków. Wszystkie pozostałe odpowiedzi używają zdarzenia 'onselect' lub wywołują nieistniejącą funkcję 'oblicz'. Zdarzenie 'onselect' jest wyzwalane, gdy użytkownik zaznacza tekst w elemencie, co jest nieodpowiednie dla przycisku. Innymi słowy, 'onselect' nie jest odpowiednim zdarzeniem do obsługi kliknięcia przycisku. Co więcej, wywołanie funkcji 'oblicz' jest błędem, ponieważ nie istnieje taka funkcja zdefiniowana w skrypcie. Ta myląca odpowiedź może wynikać z niezrozumienia, jak zdarzenia są obsługiwane w JavaScript i jakie zdarzenia są odpowiednie dla różnych elementów. Zasada ta jest zgodna z dobrymi praktykami programowania, które zalecają używanie odpowiednich zdarzeń dla różnych elementów i typów interakcji użytkownika.

Pytanie 30

W języku JavaScript potrzebne jest odwołanie się do elementu znajdującego się w pierwszym paragrafie danego fragmentu kodu HTML. Można to osiągnąć przy użyciu funkcji

<body> 
 <p>pierwszy paragraf</p> 
 <p>drugi paragraf</p> 
 <p>trzeci paragraf</p> 
 …

A. getElementById('p1')

B. getElement('p')

C. getElementsByTagName('p')[0]

D. getElementsByClassName('p.1')[0]

Odpowiedź getElementsByTagName("p")[0]; jest poprawna, ponieważ metoda getElementsByTagName zwraca kolekcję wszystkich elementów o danym tagu, w tym przypadku "p". Wywołując tę metodę, otrzymujemy tablicę wszystkich paragrafów na stronie, co pozwala na łatwy dostęp do pierwszego z nich, korzystając z indeksu [0]. Jest to standardowy sposób uzyskiwania dostępu do elementów w DOM w JavaScript. Zastosowanie tej metody jest zgodne z dobrą praktyką, umożliwiającą selekcję elementów w sposób dynamiczny i elastyczny. Przykładowo, jeśli chcemy zmienić tekst pierwszego paragrafu, możemy wykorzystać: document.getElementsByTagName("p")[0].innerText = 'Nowy tekst';. Dzięki temu możemy skutecznie manipulować zawartością stron internetowych, co jest kluczowe w rozwoju front-endu. Dodatkowo, metody takie jak getElementsByTagName są dobrze wspierane przez wszystkie nowoczesne przeglądarki, co zapewnia ich niezawodność w codziennej pracy programisty.

Pytanie 31

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>

A. href = "sekcja2"

B. href = "#r2"

C. href = "#sekcja2"

D. href = "r2"

Niestety, Twoja odpowiedź nie jest prawidłowa. Prawidłowa odpowiedź 'href="#r2"' odwołuje się do identyfikatora (id) 'r2' na tej samej stronie. W HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. Błędy w niepoprawnych odpowiedziach wynikają z pominięcia znaku '#' lub zastosowania nieprawidłowego identyfikatora. Pamiętaj, że identyfikator powinien być unikalny dla każdego elementu na stronie i powinien być używany w odnośniku dokładnie w takiej samej formie. W przypadku 'href="r2"' i 'href="sekcja2"', pominięto znak '#', co sprawia, że przeglądarka będzie szukać zasobu o podanej ścieżce, a nie identyfikatora na tej samej stronie. 'href="#sekcja2"' zawiera niepoprawny identyfikator, który nie istnieje na stronie. Kluczowe jest zrozumienie, jak działają identyfikatory i jaki mają wpływ na nawigację na stronie.

Pytanie 32

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

A. autorze

B. kodowaniu

C. automatycznym odświeżaniu

D. typie dokumentu

W znaczniku <meta> na stronach WWW umieszczane są różnorodne informacje, które pomagają w optymalizacji strony dla wyszukiwarek oraz w poprawie jej użyteczności. Jednym z elementów, które można umieścić w tym znaczniku, jest opis autora strony, co jest użyteczne w kontekście SEO, gdyż umożliwia przypisanie treści do konkretnej osoby. Innym ważnym elementem jest kodowanie, które wskazuje przeglądarce, jak interpretować znaki na stronie, co jest istotne dla poprawnego wyświetlania treści. Warto również zwrócić uwagę na automatyczne odświeżanie, które można ustawić za pomocą znacznika <meta http-equiv='refresh'>, co jest przydatne w przypadku stron, które wymagają cyklicznej aktualizacji treści. Z drugiej strony, informacja dotycząca typu dokumentu, jak na przykład tekst, HTML, czy XML, nie jest umieszczana w znaczniku <meta>. Zamiast tego, typ dokumentu jest określony w nagłówku HTTP poprzez dyrektywę Content-Type, co jest zgodne z wymaganiami protokołu HTTP i spełnia standardy W3C, które zalecają oddzielać metadane od informacji o typie dokumentu. Dlatego też, umieszczanie informacji o typie dokumentu w znaczniku <meta> jest niepoprawne i niezgodne z przyjętymi normami.

Pytanie 33

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. słów kluczowych

B. opisu witryny

C. języka używanego na stronie

D. kodowania znaków

Element <meta charset="utf-8"> jest kluczowym składnikiem metadanych w dokumentach HTML, który określa sposób kodowania znaków używanych na stronie internetowej. Użycie kodowania UTF-8, które jest najczęściej stosowanym standardem, pozwala na wyświetlanie różnorodnych znaków z różnych języków, w tym znaków diakrytycznych. Dzięki temu, strony internetowe mogą być dostępne dla szerokiego grona użytkowników bez obaw o błędy związane z wyświetlaniem tekstu. Kiedy przeglądarka internetowa napotyka ten element, wie, że powinna interpretować zawartość dokumentu zgodnie z określonym kodowaniem. Jest to szczególnie ważne w kontekście globalizacji internetu, gdzie treści mogą być tworzone w wielu językach. Ustalając odpowiednie kodowanie, programiści minimalizują ryzyko wystąpienia problemów z wyświetlaniem, takich jak zamienione znaki czy nieczytelne fragmenty tekstu. Właściwe ustawienie metadanych jest zgodne z wytycznymi W3C oraz zaleceniami dla twórców stron internetowych, co czyni ten element niezbędnym w każdej współczesnej witrynie.

Pytanie 34

Metainformacja „Description” zawarta w pliku źródłowym HTML powinna zawierać

<head>
    <meta name="description" content="...">
</head>

A. informację o tym, kto jest autorem strony.

B. nazwę programu, przy użyciu którego została stworzona strona.

C. opis tego, co znajduje się na stronie.

D. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

Poprawna odpowiedź to 'opis, co znajduje się na stronie'. Metainformacja 'Description' w pliku źródłowym HTML jest wykorzystywana przez wyszukiwarki internetowe do wyświetlania opisu strony w wynikach wyszukiwania. Dzięki temu użytkownik może zobaczyć na pierwszy rzut oka, czy strona jest związana z jego zapytaniem, czy też nie. Jest to jedno z kluczowych narzędzi w SEO (Search Engine Optimization), które ma na celu zwiększenie widoczności strony w wynikach wyszukiwania. W praktyce, opis powinien być krótki, zwięzły i zawierać ważne informacje o treści strony. Dobrą praktyką jest również uwzględnienie kluczowych słów, na które użytkownicy mogą szukać. Opis ten powinien być zrozumiały dla użytkowników, a także jest to miejsce, gdzie można wykorzystać strategie marketingowe, aby zachęcić do odwiedzenia strony.

Pytanie 35

Jaką barwę przedstawia kolor zapisany w modelu RGB(255, 0, 0)?

A. zieloną

B. niebieską

C. czerwoną

D. żółtą

W modelu RGB kolor opisują trzy składowe: czerwona (R), zielona (G) i niebieska (B), każda od 0 do 255. Zapis RGB(255, 0, 0) oznacza maksymalną czerwoną i zerowe pozostałe, czyli czysty kolor czerwony. Dlatego RGB(255, 0, 0) to barwa czerwona.

Pytanie 36

W formularzu HTML wykorzystano znacznik <input>. Wyświetlane pole będzie przeznaczone do wprowadzania maksymalnie

A. 20 znaków, które nie są widoczne w polu tekstowym

B. 30 znaków, które nie są widoczne w polu tekstowym

C. 30 znaków, które są widoczne podczas wpisywania

D. 20 znaków, które są widoczne podczas wpisywania

Podany znacznik <input> definiuje element formularza HTML typu password. Gdy używasz typu password, wprowadzone znaki są maskowane, zazwyczaj używając symboli takich jak kropki lub gwiazdki, co oznacza, że nie są widoczne podczas wprowadzania. Atrybut maxlength określa maksymalną liczbę znaków, które użytkownik może wprowadzić. W tym przypadku wartość maxlength równa 20 oznacza, że użytkownik może wprowadzić do 20 znaków, nawet jeśli więcej znaków można by zobaczyć w polu dzięki atrybutowi size. Rozdzielając te dwa aspekty, atrybut size określa jedynie widoczną szerokość pola, co w przypadku tego inputu wynosi 30, ale nie wpływa na ilość możliwych do wpisania znaków. Zastosowanie pola password jest powszechne w formularzach logowania, gdzie bezpieczeństwo wprowadzanych danych jest priorytetem. Użycie maxlength pozwala kontrolować długość hasła, co może być częścią strategii zabezpieczeń, eliminując zbyt długie lub zbyt krótkie hasła, które są łatwiejsze do złamania. Takie podejście jest zgodne z najlepszymi praktykami w zakresie bezpieczeństwa aplikacji webowych.

Pytanie 37

Poniżej znajduje się fragment kodu w języku HTML. Przedstawia on definicję listy:

A. B

B. D

C. A

D. C

Odpowiedź C jest poprawna ponieważ przedstawiony fragment kodu HTML definiuje uporządkowaną listę zagnieżdżoną W tym kodzie zauważamy że główna lista jest uporządkowana oznaczona jako ol co definiuje elementy listy jako numerowane po kolei Elementy li w tej liście to punkty jeden dwa i trzy Na szczególną uwagę zasługuje fakt że drugi element li zawiera zagnieżdżoną nieuporządkowaną listę ul co jest zgodne ze standardami HTML dotyczącymi zagnieżdżania list Zgodnie z dobrymi praktykami zagnieżdżanie list w HTML powinno być stosowane w sposób przejrzysty i logiczny co ułatwia czytelność i zrozumienie kodu oraz jego późniejsze modyfikacje Praktycznym zastosowaniem takich struktur jest organizowanie treści w dokumentach internetowych w sposób hierarchiczny co ułatwia zarówno użytkownikom przeglądanie zawartości jak i programistom zarządzanie kodem Zrozumienie zagnieżdżania list jest kluczowe dla efektywnego tworzenia stron internetowych które są nie tylko estetyczne ale także funkcjonalne i dostępne dla szerokiej grupy odbiorców

Pytanie 38

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

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

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

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

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

Metadane należą do nagłówka, nie do treści. <style> zawiera reguły CSS, a nie opis strony. <meta> w <body> jest niepoprawne, a <html> to znacznik nadrzędny całego dokumentu. Autora, opis i słowa kluczowe podaje <meta> w <head>.

Pytanie 39

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

A. PHP

B. CSS

C. JavaScript

D. AJAX

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 40

W języku HTML stworzono odnośnik z symbolem #. Co się wydarzy po kliknięciu na podany link?

A. Zostanie użyty względny adres URL o nazwie dane

B. Strona przewinie się do elementu z id o nazwie dane

C. Uruchomi się skrypt o nazwie dane

D. Otworzy się nowa karta przeglądarki zatytułowana dane

Hiperłącze z użyciem znaku # w języku HTML odnosi się do identyfikatora (id) na tej samej stronie. Gdy użytkownik kliknie ten odsyłacz, przeglądarka przewinie stronę do elementu, który ma przypisany identyfikator 'dane'. To podejście jest powszechnie stosowane w celu ułatwienia nawigacji na długich stronach, gdzie użytkownicy mogą szybko przeskakiwać do interesujących ich sekcji. Przykład praktyczny może obejmować stronę z informacjami o produkcie, gdzie poszczególne sekcje, takie jak 'Specyfikacje', 'Opinie' czy 'FAQ', mają przypisane unikalne identyfikatory. Używając hiperłączy z #, użytkownicy mogą z łatwością dotrzeć do tych sekcji bez przewijania strony manualnie. Tego typu implementacja jest zgodna z zasadami dostępności i ułatwia nawigację, co jest szczególnie ważne w projektowaniu stron przyjaznych dla użytkownika. Ważne jest również, aby identyfikatory były unikalne w obrębie strony, co zapobiega potencjalnym konfliktom i pozwala na prawidłowe przewijanie.

Rozpocznij nowy egzamin

Powrót do strony głównej