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: 12 czerwca 2026 08:24
Data zakończenia: 12 czerwca 2026 08:28

Egzamin niezdany

Wynik: 14/40 punktów (35,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

DOM udostępnia metody i właściwości, które w języku JavaScript umożliwiają:

A. manipulowanie łańcuchami znaków zadeklarowanymi w kodzie

B. wysłanie danych formularza bezpośrednio do bazy danych

C. wykonywanie operacji na zmiennych liczbowych

D. pobieranie i modyfikowanie elementów wyświetlonej strony

Pozostałe odpowiedzi dotyczą rzeczy niezwiązanych z DOM. Manipulowanie łańcuchami znaków zapewniają wbudowane metody typu string (np. length, slice()), a nie DOM. Wysłanie danych formularza do bazy danych realizuje kod po stronie serwera (np. PHP) - przeglądarkowy DOM nie ma bezpośredniego dostępu do bazy. Operacje na zmiennych liczbowych to podstawowe działania języka, dostępne niezależnie od dokumentu. DOM służy do odczytywania i zmieniania elementów wyświetlonej strony, dlatego to ta odpowiedź jest poprawna.

Pytanie 2

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

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

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

C. <script>przyklad.js</script>

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

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 3

Jakie wyrażenie logiczne powinno zostać użyte w języku JavaScript, aby przeprowadzić operacje wyłącznie na dowolnych liczbach ujemnych z zakresu jednostronnie domkniętego <-200, -100)?

A. (liczba >= -200) || (liczba > -100)

B. (liczba >= -200) && (liczba < -100)

C. (liczba <= -200) && (liczba < -100)

D. (liczba <= -200) || (liczba > -100)

Poprawna odpowiedź, (liczba >= -200) && (liczba < -100), jest zgodna z wymaganym zakresem liczb ujemnych. Wyrażenie to sprawdza, czy wartość zmiennej 'liczba' jest większa lub równa -200, a jednocześnie mniejsza niż -100. Oznacza to, że przyjmuje wszystkie liczby z przedziału, w tym -200, ale nie uwzględnia -100. To podejście jest zgodne z praktykami programowania, gdzie istotne jest dokładne definiowanie zakresów. W JavaScript stosowanie operatorów logicznych, takich jak &&, umożliwia precyzyjne warunkowanie wykonania kodu, co jest niezbędne do sprawnego zarządzania błędami oraz zwiększa czytelność kodu. Przykładowo, w kontekście walidacji danych, takie wyrażenie można wykorzystać do filtrowania nieprawidłowych wartości przed ich przetwarzaniem. Umożliwia to lepsze zarządzanie danymi oraz zapobiega błędom w aplikacjach. Zastosowanie tego wyrażenia w praktyce pokazuje, jak ważne jest precyzyjne formułowanie warunków, co jest kluczowym elementem skutecznego programowania.

Pytanie 4

W wyniku wykonania przedstawionego poniżej kodu JavaScript zmienna x ma wartość:

<script>
    var x = 10;
    x++;
    console.log(x);
</script>

A. 10 i zostanie wypisana w głównym oknie przeglądarki internetowej.

B. 11 i zostanie wypisana w oknie pop-up.

C. 10 i zostanie wypisana w dokumencie HTML.

D. 11 i zostanie wypisana w konsoli przeglądarki internetowej.

W tym zadaniu łatwo się pomylić, bo miesza się tutaj kilka różnych sposobów wyprowadzania informacji w JavaScript i jednocześnie trzeba poprawnie zinterpretować działanie operatora inkrementacji. Kod wygląda niewinnie, ale kryje w sobie typowe pułapki: `var x = 10; x++; console.log(x);`. Kluczowe są dwa elementy: co robi `x++` oraz gdzie faktycznie pojawia się wynik działania programu.

Zaczynając od wartości zmiennej: zapis `var x = 10;` nadaje zmiennej `x` wartość początkową 10. Potem pojawia się operator `x++`, czyli inkrementacja postfiksowa. W JavaScript (podobnie jak w wielu językach z rodziny C) `++` zwiększa wartość zmiennej o 1. Po wykonaniu tej instrukcji wewnętrzny stan programu się zmienia: `x` nie ma już wartości 10, tylko 11. Błędne odpowiedzi zakładają, że `x` pozostaje równe 10, co wynika zazwyczaj z nieuwagi albo z mylenia operatora przypisania `=` z porównaniem, albo z całkowitego pominięcia działania `x++`.

Druga część problemu to miejsce wyświetlenia wyniku. Wiele osób odruchowo kojarzy JavaScript z `alert()` i oknami popup, albo z wypisywaniem czegoś bezpośrednio w HTML-u przez `document.write()`. Tymczasem w kodzie użyte jest `console.log(x);`. Ta funkcja nie pokazuje wyniku ani w oknie popup, ani w treści dokumentu, ani w głównym oknie przeglądarki. Zgodnie z praktyką programistyczną i dokumentacją przeglądarek, `console.log()` służy do logowania informacji w konsoli deweloperskiej (narzędziach programistycznych). To jest typowy mechanizm debugowania, niewidoczny dla zwykłego użytkownika strony.

Mylenie `console.log()` z wyświetlaniem na stronie wynika często z tego, że ktoś patrzy tylko na efekt w trakcie nauki i nie rozróżnia warstwy interfejsu użytkownika od warstwy debugowania. W prawidłowym rozumieniu: wartość zmiennej zmienia się z 10 na 11 dzięki `x++`, a wynik jest kierowany do konsoli, a nie do HTML ani do popupu. Dlatego wszystkie odpowiedzi, które mówią o wartości 10 lub o innym miejscu wyświetlania niż konsola przeglądarki, są po prostu niezgodne z faktycznym działaniem tego fragmentu kodu.

Pytanie 5

Emblemat systemu CMS o nazwie Joomla! to

A. Rys. B

B. Rys. D

C. Rys. C

D. Rys. A

Logo przedstawione na Rys. A nie jest związane z Joomla!, ale z systemem Drupal. Drupal, podobnie jak Joomla!, jest systemem zarządzania treścią, ale różnią się one filozofią i strukturą. Drupal często wybierany jest do bardziej złożonych projektów, które wymagają dużej elastyczności i skalowalności, jednak jego administracja może być bardziej skomplikowana w porównaniu do Joomla!. Rys. C przedstawia logo mniej znanego systemu CMS o nazwie Mambo, który był pierwowzorem Joomla!, ale obecnie jest rzadko używany z powodu społeczności, która przeniosła się do Joomla!. Z kolei Rys. D to logo WordPressa, najpopularniejszego CMS na świecie, znanego z prostoty użycia i ogromnej liczby dostępnych wtyczek oraz motywów, co czyni go idealnym wyborem dla blogów i stron komercyjnych. Łatwość, z jaką można zmieniać wygląd i funkcjonalności WordPressa, przyciąga użytkowników, którzy preferują szybkie wdrożenie i łatwość obsługi. Rozpoznanie, które logo reprezentuje dany CMS, jest ważne dla specjalistów IT, ponieważ pozwala na szybki wybór odpowiedniej platformy do określonych potrzeb projektowych oraz unikanie potencjalnych błędów związanych z wyborem nieodpowiedniego narzędzia do realizacji zamierzonych celów. Zrozumienie tych różnic jest kluczowe dla efektywnego zarządzania projektami webowymi i dostosowania technologii do specyfiki zadania oraz wymagań klienta. Wybór odpowiedniego systemu CMS powinien być oparty na analizie potrzeb projektu oraz kompetencjach zespołu, co pozwala na optymalizację workflow i osiągnięcie zamierzonych celów biznesowych w sposób efektywny i zrównoważony.

Pytanie 6

Jak zapisać w JS warunek: a i b są UJEMNE, a a jest większe od -50?

if (a < 0 && b < 0 && a > -50)

if (a < 0 || (b < 0 && a > -50))

if (a < 0 || b < 0 || a > -50)

if (a < 0 && b < 0 || a > -50)

Pozostałe zapisy źle łączą warunki. || wystarczyłoby spełnić jeden z nich, więc przeszłyby też liczby dodatnie. Mieszanie || z && zmienia sens („a ujemne LUB (b ujemne i a > -50)”). Wszystkie trzy naraz wymusza a < 0 && b < 0 && a > -50.

Pytanie 7

W HTML formularzu użyto elementu <input>. Pole, które się pojawi, ma pozwalać na wprowadzenie maksymalnie

<input type="password" size="30" maxlength="20">

A. 20 znaków, które będą widoczne w trakcie wprowadzania

B. 30 znaków, które nie będą widoczne w polu tekstowym

C. 30 znaków, które będą widoczne podczas wpisywania

D. 20 znaków, które nie będą widoczne w polu tekstowym

Jeśli mówimy o znaczniku <input> w HTML, to dobrze jest wiedzieć, jak działają atrybuty typu maxlength i type. Atrybut maxlength pozwala ustawić maksymalną liczbę znaków w polu tekstowym. W polu typu password użytkownik może wpisać max 20 znaków, ale to, co widzisz, może być inne. Często myli się atrybut size z ograniczeniem liczby wprowadzanych znaków, ale tak naprawdę chodzi tylko o to, jak szerokie jest pole, więc nie zmienia jego funkcjonalności. Pole typu password ma na celu ukrycie wpisywanych znaków, co zazwyczaj oznacza, że to, co wpisujesz, zastąpione jest gwiazdkami lub kropkami, by nie było widać tego, co piszesz. Te rzeczy są ważne dla bezpieczeństwa aplikacji webowych. Ostatnio zauważyłem, że niektórzy mają problemy z rozumieniem tych atrybutów, co może prowadzić do błędów w obsłudze danych użytkowników i problemów z bezpieczeństwem.

Pytanie 8

W języku JavaScript zapisano kod, którego wynikiem działania jest?

var osoba=prompt("Podaj imię", "Adam");

A. wyświetlenie okna z polem do edycji, w którym domyślnie znajduje się tekst "Adam"

B. uzyskanie z formularza wyświetlonego na stronie HTML imienia "Adam"

C. pokazanie okna z pustym polem do edycji

D. bezpośrednie przypisanie do zmiennej osoba wartości "Adam"

W kodzie JavaScript zapisano wywołanie funkcji prompt, która jest standardową metodą do interakcji z użytkownikiem poprzez wyświetlenie okna dialogowego. Funkcja ta przyjmuje dwa argumenty: pierwszy to tekst, który będzie wyświetlony jako prośba o dane, a drugi to opcjonalna wartość domyślna, która pojawi się w polu edycyjnym okna dialogowego. W przykładzie użytkownik proszony jest o podanie imienia, a domyślną wartością, która jest predefiniowana w tym przypadku, jest 'Adam'. Działanie tego kodu spowoduje otwarcie okna z polem edycyjnym, w którym już znajduje się 'Adam', co ułatwia użytkownikowi wprowadzenie danych. Ponadto, gdy użytkownik kliknie 'OK' lub 'Anuluj', wynik (czyli wartość wpisana przez użytkownika lub null, jeśli anulował) zostanie przypisany do zmiennej 'osoba'. Warto zaznaczyć, że funkcja prompt jest powszechnie używana w aplikacjach webowych do szybkiego zbierania informacji od użytkowników. Dzięki temu kodowi programiści mogą efektywnie interactować z użytkownikami, co jest zgodne z duchem nowoczesnych aplikacji internetowych opartych na JavaScript.

Pytanie 9

Strona internetowa została napisana w języku XHTML. Który z poniższych kodów przedstawia implementację zamieszczonego fragmentu strony, przy założeniu, że nie zdefiniowano żadnych stylów CSS?

A. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

B. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

C. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<i>prototyp hipertekstowego systemu informacyjnego - <b>ENQUIRE</b></i></p>

D. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.

Pytanie 10

W języku JavaScript rezultat wykonania instrukcji zmienna++; będzie równy wynikowi instrukcji

A. zmienna = zmienna + 10;

B. zmienna += 1;

C. zmienna === zmienna + 1;

D. zmienna--;

Wybór odpowiedzi sugerujących <span>zmienna--;</span> jest mylny, ponieważ operator <span>--</span> to operator dekrementacji, który zmniejsza wartość zmiennej o 1, co stoi w sprzeczności z celem inkrementacji. Implementacja <span>zmienna === zmienna + 1;</span> jest także błędna z dwóch powodów. Po pierwsze, porównuje wartość zmiennej z wartością zmiennej zwiększonej o 1, co w większości przypadków zwróci <span>false</span>, a nie zwiększa samej zmiennej. Takie porównania są używane w logice warunkowej, jednak nie mają zastosowania w kontekście zwiększania wartości zmiennej. Ostatnia propozycja <span>zmienna = zmienna + 10;</span> jest niepoprawna, ponieważ zwiększa wartość o 10, a nie o 1, co diametralnie zmienia wynik działania. Warto pamiętać, że w programowaniu istotne jest zrozumienie działania operatorów i ich zastosowania, aby uniknąć błędów logicznych, które mogą prowadzić do nieprzewidzianych wyników. Używając typowych konstrukcji w JavaScript, jak pętle czy funkcje, programiści często korzystają z operatorów inkrementacji i przypisania, co sprawia, że ich prawidłowe wykorzystanie jest kluczowe w codziennej pracy. Zrozumienie różnic między tymi operatorami jest zatem fundamentem w nauce programowania w JavaScript.

Pytanie 11

W języku JavaScript, aby zmienić wartość atrybutu elementu HTML, po uzyskaniu obiektu za pomocą metody getElementById, należy zastosować

A. metodę getAttribute

B. pole innerHTML

C. metodę setAttribute

D. pole attribute i podać nazwę atrybutu

Metoda setAttribute w JavaScript jest kluczowym narzędziem do modyfikacji atrybutów elementów DOM. Po uzyskaniu referencji do elementu za pomocą metody getElementById, możemy wykorzystać setAttribute do ustawienia lub zmiany wartości dowolnego atrybutu HTML. Na przykład, aby zmienić atrybut 'src' obrazka, można użyć następującego kodu: const img = document.getElementById('myImage'); img.setAttribute('src', 'newImage.png');. Takie podejście jest zgodne z najlepszymi praktykami, zapewniając elastyczność i kontrolę nad elementami DOM. Metoda ta przyjmuje dwa argumenty: nazwę atrybutu oraz jego nową wartość. Warto pamiętać, że setAttribute działa nie tylko z atrybutami standardowymi, ale również z niestandardowymi i danymi atrybutami, co pozwala na dynamiczne rozszerzanie możliwości HTML. Dobre praktyki zalecają również użycie setAttribute, gdy chcemy zapewnić pełną zgodność z HTML5 i zachować semantykę dokumentu, co jest kluczowe dla dostępności i SEO.

Pytanie 12

Który semantyczny znacznik HTML5 powinien wystąpić na stronie tylko raz?

<header>

<section>

<article>

<main>

Pozostałe znaczniki mogą pojawić się wielokrotnie. <header> oznacza nagłówek - może być jeden dla całej strony, ale też osobny dla każdej sekcji czy artykułu. <article> reprezentuje samodzielną treść (np. wpis, wiadomość), więc na jednej stronie może ich być wiele. <section> grupuje treść tematycznie i również występuje dowolną liczbę razy. Tylko główna treść <main> powinna pojawić się raz, dlatego ta odpowiedź jest poprawna.

Pytanie 13

Aby grupować sekcje na poziomie bloków, które będą stilizowane za pomocą znaczników, jakiego należy użyć?

A. <div>

B. <p>

C. <span>

D. <param>

Znak <p> jest przeznaczony wyłącznie do definiowania akapitów tekstowych, co czyni go niewłaściwym narzędziem do ogólnego grupowania obszarów. Nie jest to element blokowy, który mógłby pomieścić inne znaczniki w sposób, który umożliwiałby ich efektywne stylizowanie jako całości. Zastosowanie <p> do grupowania elementów np. obrazków i przycisków mogłoby prowadzić do nieoczekiwanych rezultatów w prezentacji treści oraz problemów z dostępnością. Z kolei znacznik <span> jest elementem inline, co oznacza, że nie łamie linii i może być używany do stylizacji mniejszych fragmentów tekstu. Jego zastosowanie do grupowania bloków treści byłoby nieodpowiednie, ponieważ nie potrafi on zarządzać rozkładem elementów na stronie. Ostatnim błędem w wyborze niepoprawnych odpowiedzi jest <param>, który jest znakiem używanym do definiowania parametrów dla obiektów w znaczeniu <object>. Jest on całkowicie nieadekwatny w kontekście grupowania treści, ponieważ nie służy do stylizacji ani strukturalizacji dokumentu HTML. Użycie <param> w tym kontekście jest mylące i nie odzwierciedla rzeczywistych potrzeb związanych z organizacją treści w dokumentach webowych.

Pytanie 14

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

link

meta

style

title

Pozostałe znaczniki <head> są opcjonalne. <link> dołącza zasoby (np. CSS), <meta> podaje metadane, a <style> zawiera reguły CSS - żaden nie jest wymagany. Obowiązkowy jest <title>.

Pytanie 15

Jak nazywa się metoda dodawania arkusza stylów do dokumentu HTML zastosowana w poniższym kodzie?

<p style="color: red;">tekst paragrafu</p>

A. Styl wewnętrzny

B. Styl wpisany, lokalny

C. Styl alternatywny, zewnętrzny

D. Styl zewnętrzny

Podczas analizy alternatywnych metod dołączania arkuszy stylów do HTML, warto skupić się na ich kontekście i funkcjonalności. Styl alternatywny, zewnętrzny, najczęściej odnosi się do zewnętrznych plików CSS, które są dołączane do dokumentu HTML przy użyciu tagu <link>. Jest to podejście, które pozwala na centralne zarządzanie stylami dla całej strony, co zwiększa modularność i ułatwia aktualizacje. Styl wewnętrzny to metoda, w której style są umieszczane w sekcji <style> w nagłówku dokumentu. Chociaż oba te podejścia mają swoje zastosowania, ich niepoprawne zrozumienie może prowadzić do chaosu w kodzie. Styl wpisany, lokalny, z kolei, jest odpowiedni tylko dla niewielkich, jednorazowych stylizacji. W przypadku bardziej złożonych projektów, poleganie na stylach wpisanych może prowadzić do problemów z zarządzaniem i duplikacją kodu. Użytkownicy mogą mylić styl wpisany z innymi metodami, co może wynikać z braku wiedzy na temat ich zastosowań. Kluczowym błędem jest utożsamianie lokalnych stylów z bardziej uniwersalnymi rozwiązaniami, co w dłuższej perspektywie może prowadzić do trudności w utrzymaniu i aktualizacji projektów. Teoretyczne podejście do stylizacji w HTML wymaga zrozumienia, że różne metody mają swoje miejsce i zastosowanie, a ich wybór powinien być uzależniony od specyfiki projektu.

Pytanie 16

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

A. Odpowiedź D

B. Odpowiedź A

C. Odpowiedź B

D. Odpowiedź C

W koncepcji struktury tabeli HTML, zrozumienie atrybutów rowspan i colspan jest kluczowe dla poprawnego tworzenia układu danych. W analizie dostępnych odpowiedzi, niektóre z nich błędnie stosują te atrybuty lub ich nie używają, co prowadzi do niepoprawnego renderowania tabeli. Na przykład, w niektórych przypadkach, gdy użycie colspan lub rowspan jest niepotrzebne, może to prowadzić do nieporządku wizualnego i semantycznego. W odpowiedziach, w których zaniedbano atrybut rowspan, nie osiągnięto prawidłowego połączenia wierszy w kolumnie, co powoduje, że dane są wyświetlane w sposób nieczytelny. Typowym błędem myślowym jest zakładanie, że zagnieżdżenie danych w kolejnych komórkach wystarczy do ich poprawnej prezentacji, jednak w praktyce to prowadzi do rozbicia logicznej ciągłości informacji. Takie podejście może zaburzać użytkownikom interakcję z danymi, zwłaszcza gdy przeglądają oni tabele na urządzeniach mobilnych, gdzie przestrzeń jest ograniczona. Właściwe użycie rowspan zapewnia jednolitą prezentację, poprawiając zarówno estetykę, jak i funkcjonalność tabeli, zgodnie z dobrymi praktykami projektowania interfejsów użytkownika.

Pytanie 17

Jakie znaki <header>, <article>, <section>, <footer> są typowe dla tego języka?

A. HTML 5

B. HTML 4.01 Transitional

C. HTML 4.01 Strict

D. XHTML 1.1

Znaczniki <header>, <article>, <section>, <footer> są częścią specyfikacji HTML5, która wprowadziła bardziej semantyczne podejście do strukturyzacji dokumentów webowych. Te elementy umożliwiają programistom tworzenie bardziej przejrzystych i zrozumiałych dokumentów, zarówno dla ludzi, jak i dla maszyn. Na przykład, znacznik <header> definiuje nagłówek strony lub sekcji, <article> służy do oznaczania samodzielnych treści, które mogą być niezależnie dystrybuowane, <section> grupuje powiązane tematycznie elementy, a <footer> zawiera informacje o końcu strony lub sekcji. Użycie tych znaczników ma kluczowe znaczenie dla SEO, ponieważ wyszukiwarki mogą lepiej zrozumieć strukturę treści na stronie. Dodatkowo, zastosowanie tych elementów wspiera dostępność, ułatwiając nawigację osobom korzystającym z czytników ekranu. W praktyce, stosując te znaczniki, programiści tworzą bardziej uporządkowane i zrozumiałe strony, co jest zgodne z najlepszymi praktykami w branży.

Pytanie 18

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; }

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

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

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 19

Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?

A. clear: both;

B. float: right;

C. table: left;

D. float: left;

Właściwość float: right; w CSS to naprawdę fajne narzędzie, bo pozwala na umieszczenie rzeczy, jak na przykład obrazek, z prawej strony kontenera. Dzięki temu tekst ładnie opływa go z lewej strony, co jest super w responsywnych projektach. Często to widzę na stronach, gdzie musimy dostosować układ do różnych ekranów. Użycie float: right; zgodne jest z dobrymi praktykami CSS i daje nam większą kontrolę nad tym, jak wygląda strona. Przykładowo, w artykułach, gdzie obrazki są często po jednej stronie tekstu, float naprawdę ułatwia życie. Tylko pamiętaj, żeby używać clearfix, bo elementy pływające mogą czasami zamieszać w układzie. Dobrze jest też wiedzieć, że float zmienia sposób, w jaki przeglądarka wyświetla elementy, więc znajomość jego wpływu na model pudełkowy CSS jest bardzo ważna. Dzięki float: right; możemy ładnie oprawić tekst wokół obrazków w blogach, co sprawia, że wygląda to estetycznie i jest bardziej czytelne.

Pytanie 20

Kolor zielony to szesnastkowo #008000. Jaki to zapis RGB?

rgb(0, 128, 0)

rgb(0, 80, 0)

rgb(0, 160, 0)

rgb(0, 100, 0)

Pozostałe odpowiedzi błędnie przeliczają parę 80. To nie 80 dziesiętnie (taki byłby zapis #005000), nie 160 (#00A000) ani 100 (#006400). Szesnastkowe 80 równa się 128, więc #008000 to rgb(0, 128, 0).

Pytanie 21

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. A.

B. D.

C. C.

D. B.

Niestety, Twoja odpowiedź nie jest prawidłowa. Wszystkie odpowiedzi innych niż 'C' nie spełniają kryteriów określonych dla formatowania znacznika h1 w CSS. Formatowanie styli CSS polega na zrozumieniu i zastosowaniu właściwości CSS. W tym przypadku, h1 powinien mieć pochyłą czcionkę ('font-style: oblique'), małe wielkie litery ('font-variant: small-caps') i być wyrównany do prawej ('text-align: right'). Gdybyśmy zastosowali inne właściwości, efekt końcowy niewątpliwie byłby inny. Częstym błędem jest nieuwzględnienie wszystkich właściwości podanych w definicji stylu, co prowadzi do nieprawidłowego renderowania elementu. Inny błąd to mylenie właściwości - na przykład, 'font-style: oblique' nie jest tym samym co 'font-style: italic', chociaż oba skutkują pochyleniem czcionki. Pamiętaj, że precyzyjne zrozumienie i zastosowanie właściwości CSS jest kluczem do tworzenia efektywnych i estetycznych stron internetowych.

Pytanie 22

Aby właściwie skomentować poniższą linię kodu JavaScript, po znakach // należy opisać, że powoduje ona:

document.getElementById("napis").innerHTML = Date(); //

A. wyświetlenie aktualnej daty i czasu w elemencie o id „napis”

B. wstawienie nieprawidłowych danych

C. wyświetlenie tekstu „Date()” w elemencie o id „napis”

D. zmianę stylu (CSS) elementu o id „napis”

Pozostałe opisy błędnie tłumaczą działanie linii. Kod nie wstawia „nieprawidłowych danych” - jest poprawny i pokazuje datę z czasem. Nie wyświetla też dosłownego tekstu „Date()”: nawiasy po Date oznaczają WYWOŁANIE funkcji, więc do elementu trafia jej wynik (data), a nie nazwa. Nie zmienia również stylu elementu - za wygląd odpowiada CSS lub właściwość style, podczas gdy innerHTML podmienia ZAWARTOŚĆ. Linia wyświetla aktualną datę i czas w elemencie o id „napis”, dlatego ten opis jest poprawny.

Pytanie 23

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?

<blockquote> ... </blockquote>

<ins> ... </ins>

<pre> ... </pre>

<code> ... </code>

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 24

W języku JavaScript zdefiniowano funkcję o nazwie liczba_max, która porównuje trzy liczby naturalne przekazane jako argumenty i zwraca największą z nich. Prawidłowa forma wywołania tej funkcji, razem z przypisaniem jej wyniku, powinna wyglądać następująco

A. var wynik = liczba_max(a, b, c);

B. liczba_max(a, b, c);

C. liczba_max(a, b, c, wynik);

D. liczba_max(a, b, c) = wynik;

Prawidłowe wywołanie funkcji w języku JavaScript wymaga zrozumienia podstawowych zasad dotyczących przekazywania argumentów oraz przypisywania wartości. W kontekście podanych odpowiedzi, wiele z nich nie spełnia tych wymogów. Niewłaściwe przypisanie w postaci 'liczba_max(a, b, c, wynik);' sugeruje, że funkcja oczekuje czterech parametrów, co może być mylące. Funkcje w JavaScript przyjmują argumenty, które są przekazywane poprzez użycie odpowiednich zmiennych, a nie poprzez dodatkowe wartości, co skutkuje błędnym wywołaniem. Również wyrażenie 'liczba_max(a, b, c) = wynik;' jest niezgodne z zasadami składniowymi JavaScript, ponieważ nie można przypisywać wartości do wyniku wywołania funkcji. Takie podejście prowadzi do błędów, ponieważ zwracana wartość funkcji nie jest zmienną, a sposobem na uzyskanie wyników. Kolejna koncepcja do zrozumienia to fakt, że funkcje w JavaScript zwracają wartości, które mogą być przypisywane do zmiennych, a nie ustalane na podstawie wywołania funkcji. Typowe błędy myślowe to nieporozumienie dotyczące tego, jak działa mechanizm zwracania wartości oraz niewłaściwe założenie, że funkcje mogą zmieniać wartości zewnętrznych zmiennych bezpośrednio. Zrozumienie tych zasad jest fundamentalne w programowaniu i kluczowe dla skutecznego wykorzystania funkcji w praktycznych aplikacjach.

Pytanie 25

W języku CSS określono styl dla stopki. Aby zastosować to formatowanie do bloku oznaczonego znacznikiem div, należy wpisać

#stopka { ... }

A. <div id="stopka">

B. <div "stopka">

C. <div class="stopka">

D. <div title="stopka">

W przypadku odpowiedzi <div "stopka"> brak jest poprawnej składni HTML ponieważ atrybuty w tagach HTML są zawsze parą nazwa-wartość i muszą być opatrzone znakami równości oraz cudzysłowami wokół wartości. Taka konstrukcja nie jest zgodna z zasadami HTML i nie zostanie przetworzona prawidłowo przez przeglądarki. Atrybut title czyli <div title="stopka"> używany jest do wyświetlania dodatkowych informacji w formie dymka po najechaniu kursorem i nie jest związany z selektorami CSS. Z kolei <div class="stopka"> odnosi się do użycia klasy. Klasy są bardziej elastyczne pozwalając na przypisywanie tego samego stylu do wielu elementów co jest użyteczne w przypadku powtarzających się elementów na stronie. Jednakże w pytaniu jest mowa o selektorze ID co oznacza że stylizacja dotyczy konkretnego niepowtarzalnego elementu. Selekcję przez id poprzedzamy znakiem # co jest konwencją stosowaną w projektach gdzie poszczególne elementy mają być unikalne w ramach dokumentu HTML. Zrozumienie i poprawne używanie atrybutów takich jak id i class jest kluczowe dla efektywnego zarządzania stylem w dużych i złożonych projektach internetowych. Selekcja poprzez id jest stosowana w przypadkach gdzie wymagana jest unikalna identyfikacja elementu co jest niezbędnym elementem w procesie projektowania struktury stron internetowych. Stąd też ważne jest aby unikać nadmiarowego stosowania id w miejscach gdzie powtarzalność elementów jest wymagana ponieważ prowadzi to do problemów w zakresie skalowalności i utrzymania kodu.

Pytanie 26

Której wartości text-transform użyć, aby każda pierwsza litera wyrazu była wielka?

underline

capitalize

lowercase

uppercase

Wartość capitalize właściwości text-transform sprawia, że każda pierwsza litera WYRAZU staje się wielka (np. „ala ma psa” → „Ala Ma Psa”). Dlatego do tego efektu służy capitalize.

Pytanie 27

Najprostszy sposób zamiany obiektu oznaczonego cyfrą 1 na obiekt oznaczony cyfrą 2 polega na

A. animowaniu obiektu.

B. geometrycznym transformowaniu obiektu.

C. zmianie warstwy obiektu.

D. narysowaniu docelowego obiektu.

Wybrana odpowiedź nie jest prawidłowa. Transformacja geometryczna to najprostszy sposób przekształcenia obiektu oznaczonego numerem 1 w obiekt oznaczony numerem 2, jak pokazano na obrazie. To nie jest kwestia 'zmiany warstwy obiektu' czy 'animowania obiektu'. Zmiana warstwy obiektu nie zmienia jego kształtu ani orientacji, co jest wymagane w tym przypadku. Z kolei animacja obiektu dodaje ruch, ale nie zmienia kształtu ani orientacji obiektu statycznego. Dodatkowo, 'narysowanie docelowego obiektu' jest niepotrzebnie pracochłonne i nie jest najprostszym podejściem do problemu. Przekształcenia geometryczne, takie jak skalowanie i obrót, są znacznie bardziej efektywne i praktyczne w takich sytuacjach. Wybierając jedną z tych niepoprawnych odpowiedzi, można nabrać błędne przekonanie co do natury i zastosowania transformacji geometrycznych.

Pytanie 28

W języku Javascript obiekt typu array jest używany do przechowywania

A. wielu wartości jedynie tekstowych

B. wielu wartości jedynie liczbowych

C. wielu wartości lub metod

D. wielu wartości różnych typów

Obiekt typu array w języku JavaScript jest niezwykle potężnym narzędziem, które pozwala na przechowywanie wielu wartości dowolnego typu w jednej zmiennej. W przeciwieństwie do niektórych innych języków programowania, JavaScript pozwala na umieszczanie w tablicach zarówno liczb, jak i stringów, obiektów, a nawet funkcji. Dzięki temu programiści mogą tworzyć złożone struktury danych, które są elastyczne i dopasowane do ich potrzeb. Przykładem praktycznego zastosowania tablicy może być tworzenie listy użytkowników, gdzie każdy element tablicy może być obiektem użytkownika zawierającym różne właściwości, takie jak imię, nazwisko, adres e-mail itd. Dobrymi praktykami przy korzystaniu z tablic w JavaScript są stosowanie metod takich jak map, filter, reduce, które ułatwiają manipulację danymi oraz dbałość o czytelność kodu, co sprzyja jego późniejszej konserwacji. Warto także pamiętać o tym, że tablice są dynamiczne, co oznacza, że można je modyfikować w trakcie działania programu, co daje dodatkową elastyczność.

Pytanie 29

Warunek zapisany w JavaScript będzie prawdziwy, gdy zmienna x posiada

A. wartość, która nie jest liczbą

B. pusty ciąg znaków

C. dowolną dodatnią wartość liczbową

D. dowolną całkowitą wartość liczbową

W JavaScript funkcja isNaN() jest kluczowa w sprawdzaniu, czy wartość jest liczbą. Pusty napis, mimo że nie wygląda jak liczba, w kontekście JavaScript, zostanie przekonwertowany na zero, co czyni go liczbą, ale nie dodatnią. Dlatego pusty napis nie spełnia kryterium x > 0. Zasada konwersji typów w JavaScript często prowadzi do błędów logicznych, jeśli nie jest dobrze znana. Wartość nieliczbowa, jak na przykład ciąg znaków, zwróci true dla isNaN(), co oznacza, że negacja tego wyrażenia wprowadzi błąd logiczny w tym warunku. Takie nieporozumienia są powszechne i wynikają z niepełnego zrozumienia, jak JavaScript radzi sobie z niejawnie typowanymi danymi. Z kolei dowolna całkowita wartość liczbowa obejmuje zarówno liczby dodatnie, jak i ujemne oraz zero. Tylko liczby dodatnie spełniają drugi warunek x > 0. Typowym błędem jest założenie, że każdy rodzaj liczby całkowitej spełnia kryteria warunku, co nie jest prawdą w tym przypadku. Poprawne rozumienie powyższych zasad i mechanizmów typów w JavaScript jest niezbędne do unikania błędów logicznych i optymalizacji działania kodu. Kluczowe jest zastosowanie dobrych praktyk programistycznych, takich jak walidacja danych i przemyślane struktury warunkowe, które wspierają precyzyjne i skuteczne działanie aplikacji.

Pytanie 30

W języku JavaScript zamieszczony poniżej fragment funkcji ma na celu

wynik = 0;
 for (i = 0; i < tab.length; i++) {
 wynik += tab[i];
 }

A. wyświetlenie wszystkich elementów tablicy

B. policzenie sumy wszystkich elementów tablicy

C. dodanie stałej wartości do każdego elementu tablicy

D. wprowadzenie do każdego elementu tablicy bieżącej wartości zmiennej i

Rozważając różne odpowiedzi, można dostrzec pewne błędne założenia dotyczące funkcji pętli w analizowanym kodzie JavaScript. Pierwsza z opcji zakłada, że celem kodu jest wyświetlenie wszystkich elementów tablicy. W rzeczywistości jednak kod nie zawiera żadnych instrukcji, takich jak console.log(), które pozwoliłyby na wyświetlanie wartości elementów tablicy. To powszechny błąd polegający na myleniu iteracji pętli z operacjami wejścia/wyjścia. Kolejna możliwość sugeruje dodanie do każdego elementu tablicy stałej wartości. Aby osiągnąć taki efekt, kod musiałby bezpośrednio modyfikować wartości w tablicy, co wymagałoby przypisania nowych wartości do elementów tablicy. W przedstawionym kodzie nie ma jednak żadnej manipulacji wartościami tablicy, co wskazuje na niewłaściwe zrozumienie celu operacji wykonywanych na tablicach. Ostatnia możliwość zakłada, że każdemu elementowi tablicy przypisywana jest aktualna wartość zmiennej i. Taki efekt wymagałby przypisania wartości i do elementów tablicy, co nie ma miejsca w przedstawionym fragmencie kodu. Jest to często spotykany błąd polegający na myleniu indeksu pętli z operacjami przypisania. Każda z tych odpowiedzi opiera się na niepoprawnym zrozumieniu mechanizmów iteracji i operacji na tablicach w językach programowania takich jak JavaScript co może prowadzić do błędnych wniosków dotyczących działania kodu.

Pytanie 31

Gdzie należy umieścić znacznik meta w języku HTML?

A. między znacznikami body

B. w sekcji nagłówkowej strony internetowej

C. w stopce strony internetowej

D. między znacznikami paragrafu

Umieszczanie znaczników meta w stopce witryny, pomiędzy znacznikami paragrafu lub w obrębie body jest niezgodne z zasadami tworzenia struktury HTML i może prowadzić do wielu problemów. Znaczniki meta są przeznaczone do dostarczenia metadanych, które są przetwarzane przez przeglądarki oraz roboty wyszukiwarek. Ich umiejscowienie w stopce uniemożliwia dostęp do tych informacji w momencie ładowania strony, co negatywnie wpływa na SEO i wydajność witryny. Umieszczanie ich pomiędzy znacznikami paragrafu lub body powoduje, że stają się one częścią treści wizualnej, co jest technicznie błędne, ponieważ znaczniki meta nie mają na celu wyświetlania treści, a raczej dostarczania informacji kontekstowych. Warto pamiętać, że poprawne umiejscowienie znaczników meta jest kluczowe dla efektywnego działania strony internetowej. Typowe błędy myślowe, które prowadzą do takich decyzji, często wynikają z braku zrozumienia różnicy między metadanymi a treścią strony. Zrozumienie struktury dokumentu HTML oraz zasad, które ją rządzą, jest fundamentem efektywnego projektowania stron internetowych.

Pytanie 32

Aby wyróżnić innym kolorem wiersz tabeli, na który aktualnie najeżdża kursor myszy, należy w CSS użyć:

A. pseudoelementu :first-line

B. nowego selektora klasy dla wiersza tabeli

C. pseudoklasy :hover

D. pseudoklasy :visited

Pseudoklasa :hover stosuje wybrane reguły CSS tylko wtedy, gdy kursor myszy znajduje się nad elementem. Aby podświetlić wiersz tabeli przy najechaniu, zapisuje się np. tr:hover { background: #eee; }. Po zsunięciu kursora styl znika. Dlatego do wyróżnienia wskazywanego wiersza służy pseudoklasa :hover.

Pytanie 33

W języku JavaScript, deklaracja:

var x=true;

sprawia, że zmienna x ma typ

A. numeryczny

B. logiczy

C. łańcuch znaków

D. enumeracyjny

Zmienna x w JavaScript, która została zadeklarowana jako 'var x=true;', to typ logiczny, czyli boolean. W tym języku mamy dwie możliwe wartości: true (prawda) i false (fałsz). Ten typ jest naprawdę ważny, zwłaszcza gdy mówimy o warunkach w programach, bo to właśnie one są bazą dla programowania strukturalnego i obiektowego. Kiedy piszesz instrukcje if albo pętle, typ logiczny odgrywa kluczową rolę w tym, co się dzieje w programie. Fajnie jest korzystać z zmiennych logicznych, by kontrolować, co się dzieje w kodzie, a także sprawiać, że warunki są czytelniejsze. Ciekawe jest też to, że w JavaScript inne typy, jak liczby czy ciągi znaków, mogą być używane w kontekście wartości prawdziwych i fałszywych. To czyni typ logiczny bardzo elastycznym i wszechstronnym. Im lepiej rozumiesz ten typ, tym lepiej potrafisz tworzyć dynamiczne aplikacje, które dobrze reagują na różne sytuacje.

Pytanie 34

Który z poniższych obrazów został sformatowany przy użyciu zaprezentowanego stylu CSS?

A. B

B. A

C. C

D. D

Wybór niewłaściwej odpowiedzi często wynika z niezrozumienia działania poszczególnych właściwości CSS. Styl padding wpływa na wewnętrzny margines elementu, oddzielając jego zawartość od krawędzi. W przypadku jego braku, jak w opcji B, obrazek nie posiada odstępu, co może wpływać na estetykę oraz czytelność prezentacji. Border definiuje obramowanie elementu, a jego brak, jak w opcji C, eliminuje ten element wizualny, który często służy do oddzielania treści, zwiększając ich przejrzystość. Właściwość border-radius zaś odpowiada za zaokrąglenie narożników, co nie występuje w opcji D, gdzie widoczna jest linia przerywana, co nie odpowiada specyfikacji solid grey. Typowe błędy polegają na pomijaniu wpływu nawet drobnych zmian w kodzie CSS, które jednak mogą znacząco zmieniać odbiór wizualny elementu. Kluczową umiejętnością jest umiejętność wizualizacji kodu CSS i przewidywanie, jak wpłynie on na prezentację elementów, co stanowi podstawę profesjonalnego projektowania interfejsów użytkownika. Zrozumienie tych zasad pozwala tworzyć bardziej spójne i estetyczne projekty webowe, co jest niezwykle istotne w nowoczesnym web designie.

Pytanie 35

Podczas działania skryptu JavaScript został w konsoli wygenerowany błąd związany z działaniami na atrybucie elementu DOM. Z komunikatu wynika, że próbowano ustawić atrybut dla

A. odnośnika.

B. obrazu.

C. tabeli.

D. paragrafu.

Wybrana przez Ciebie odpowiedź była niestety niepoprawna. Atrybut 'src', o którym mówi komunikat błędu, jest specyficzny dla obrazów, a nie dla tabel, paragrafów ani odnośników. W przypadku tabeli, typowy atrybut, który mógłby być manipulowany, to 'border' lub 'cellspacing'. Dla paragrafów często manipulowane są atrybuty takie jak 'align' czy 'dir'. Odnośniki, natomiast, mają charakterystyczny atrybut 'href', który wskazuje na adres URL, do którego prowadzi dany odnośnik. Manipulacja atrybutami DOM jest częstą praktyką w programowaniu JavaScript, jednak ważne jest zrozumienie, że różne elementy HTML mają różne atrybuty, i próba manipulacji nieodpowiednim atrybutem dla danego elementu skutkować będzie błędem. W tym konkretnym przypadku, błąd 'Uncaught TypeError: Cannot set property 'src' of null' wskazuje na próbę manipulacji atrybutem 'src', który jest charakterystyczny dla obrazów, a nie dla innych elementów HTML.

Pytanie 36

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW. W której z jej sekcji zazwyczaj znajduje się stopka strony?

A. 1

B. 2

C. 4

D. 5

Pozycje 1 2 3 i 4 w schemacie rozmieszczenia bloków na stronie WWW nie są odpowiednie do umieszczenia stopki strony z kilku powodów związanych z zasadami projektowania interfejsów użytkownika. W tradycyjnym i intuicyjnym układzie strony internetowej stopka znajduje się na samym dole strony ponieważ jest to miejsce gdzie użytkownicy spodziewają się znaleźć długoterminowe informacje takie jak kontakt polityka prywatności czy prawa autorskie. Umieszczenie stopki w miejscach oznaczonych numerami 1 lub 2 sugeruje że pełniłaby ona rolę nagłówka lub sekcji nawigacyjnej co nie pokrywa się z jej podstawowym przeznaczeniem. Blok 3 z boku strony mógłby być mylony z panelem bocznym który często zawiera treści dodatkowe lub reklamy a nie kluczowe elementy informacyjne jakie znajdują się w stopce. Blok 4 z kolei zwykle przeznaczony jest na główną treść strony przez co jego użycie dla stopki mogłoby zaburzyć przejrzystość przekazu. Przestrzeganie tych zasad jest kluczowe dla stworzenia strony intuicyjnej i zgodnej z oczekiwaniami użytkowników co wpływa na pozytywne ich doświadczenie z korzystania z serwisu. Poprawne rozmieszczenie elementów zgodnie z ich funkcją na stronie jest podstawą udanego projektu UX.

Pytanie 37

Na stronie internetowej znajduje się formularz, do którego trzeba zaprogramować następujące funkcje:
– walidacja: podczas wypełniania formularza na bieżąco jest kontrolowana poprawność danych
– przesyłanie danych: po wypełnieniu formularza i jego zatwierdzeniu informacje są przesyłane do bazy danych na serwerze
Aby zrealizować tę funkcjonalność w możliwie najprostszy sposób, należy zapisać

A. walidację w skrypcie PHP, a przesyłanie danych w JavaScript

B. walidację i przesyłanie danych w języku JavaScript

C. walidację w języku JavaScript, a przesyłanie danych w skrypcie PHP

D. walidację i przesyłanie danych w języku PHP

Wybór walidacji i przesyłania danych w języku PHP jest nieefektywny w kontekście nowoczesnych aplikacji webowych. Język PHP jest używany głównie po stronie serwera i nie jest przeznaczony do walidacji danych w czasie rzeczywistym. Oczekiwanie na przesłanie formularza do serwera, aby uzyskać informację o błędach, prowadzi do nieprzyjemnych doświadczeń użytkowników. Użytkownik musi czekać na odpowiedź serwera, co może być czasochłonne i frustrujące. Ponadto, walidacja po stronie serwera może sprawić, że użytkownik straci wprowadzone dane, jeśli wystąpią błędy. To podejście nie tylko obniża użyteczność formularzy, ale także może prowadzić do większych obciążeń serwera, ponieważ każde wprowadzenie danych wymaga zaangażowania zasobów serwerowych. Implementując walidację w JavaScript, można natychmiast informować użytkownika o niewłaściwych danych, co nie tylko zaspokaja potrzeby użytkownika, ale także zmniejsza ilość niepotrzebnych zapytań do serwera. Ostatecznie, korzystanie z jednego języka do obu zadań jest sprzeczne z zasadą separacji obowiązków, co jest kluczowe w inżynierii oprogramowania. Zamiast tego, prawidłową praktyką jest wykorzystanie JavaScript do walidacji danych przed ich przesłaniem, co pozwala na znacznie bardziej responsywne i przyjazne dla użytkownika doświadczenia.

Pytanie 38

Na przedstawionej grafice znajduje się struktura sekcji dla witryny internetowej. Przyjmując, że blok5 nie ma przypisanej szerokości, a bloki są określone w dokumencie HTML w kolejności ich numeracji, jak powinno wyglądać zdefiniowanie opływania?

A. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;

B. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

C. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;

D. bloki 1, 2, 4 float: left; blok 3, 5 float: right;

Odpowiedź 3 jest poprawna, ponieważ odpowiada układowi bloków na stronie i ich pozycjonowaniu. Użycie właściwości CSS float: left; dla bloków 1, 2 i 4 pozwala im ułożyć się w linii po lewej stronie. Blok 3 z float: right; zostanie umieszczony po prawej stronie, co jest zgodne z przedstawionym układem. Blok 5 natomiast, znajdujący się na dole i rozciągający się na całą szerokość, wymaga użycia clear: both;, aby nie opływały go inne bloki i mógł zająć całą dostępną przestrzeń poziomą. Takie zastosowanie float i clear jest zgodne z najlepszymi praktykami w projektowaniu układów stron internetowych. Stylowanie za pomocą float jest powszechnie używane w CSS do tworzenia dynamicznych układów, a właściwość clear zapewnia, że element nie będzie opływany przez poprzedzające elementy pływające, co jest szczególnie istotne dla elementów podsumowujących lub końcowych na stronie.

Pytanie 39

Jak wstawić obrazek tak, aby przylegający tekst znalazł się POŚRODKU wysokości obrazka?

<img src="obrazek.png" alt="obraz" height="50%"> tekst

<img src="obrazek.png" alt="obraz"> tekst

<img src="obrazek.png" alt="obraz" align="middle"> tekst

<img src="obrazek.png" alt="obraz" hspace="30px"> tekst

Pozostałe zapisy nie wyrównują tekstu w pionie. height="50%" tylko skaluje obraz. Brak atrybutu zostawia tekst przy DOLNEJ krawędzi (linii bazowej). hspace="30px" dodaje odstęp poziomy. Wyśrodkowanie tekstu względem obrazka daje align="middle".

Pytanie 40

Znak <s> w HTML powoduje

A. pochylenie tekstu

B. migotanie tekstu

C. podkreślenie tekstu

D. skreś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.

Rozpocznij nowy egzamin

Powrót do strony głównej