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 maja 2026 13:43
Data zakończenia: 12 maja 2026 13:47

Egzamin niezdany

Wynik: 15/40 punktów (37,5%)

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

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

border-radius: 20%;

To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf

A. B.

B. C.

C. A.

D. D.

Dobra robota! Zgadłeś, że chodziło o akapit z tą właściwością CSS 'border-radius: 20%;'. Ta właściwość faktycznie zaokrągla rogi elementów, co wygląda super i sprawia, że strona jest bardziej przyjemna dla oka. Widzisz, akapit B ma te zaokrąglone rogi, a to dokładnie to, co daje nam ten styl CSS. W rzeczywistości, tylko B jest tak zrobiony na obrazku, więc wiesz, że tam zastosowano 'border-radius'. Ta wartość '20%;' mówi nam, jak mocno rogi mają być zaokrąglone. Takie rzeczy są ważne w CSS, żeby strony wyglądały estetycznie i nowocześnie.

Pytanie 2

Aby obraz wstawiony na stronę internetową mógł dostosować się automatycznie do wymiarów ekranu, na którym jest wyświetlany, konieczne jest

A. niezmienianie obu jego wymiarów za pomocą stylów CSS

B. ustawienie obu jego rozmiarów w pikselach

C. ustawienie jednego z jego wymiarów w pikselach

D. ustawienie jego szerokości w wartościach procentowych

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowym aspektem responsywnego projektowania stron internetowych. Dzięki temu obraz automatycznie dostosowuje się do szerokości kontenera, w którym jest umieszczony, co pozwala na płynne skalowanie w zależności od rozmiaru ekranu. Na przykład, jeśli szerokość obrazu ustawimy na 100%, to obraz będzie zawsze zajmował całą szerokość swojego kontenera, co jest szczególnie ważne w przypadku urządzeń mobilnych oraz różnych rozdzielczości ekranów. To podejście wspiera zasady projektowania responsywnego, które są fundamentem nowoczesnych stron internetowych. Dodatkowo, stosowanie jednostek procentowych zamiast pikseli umożliwia lepszą dostępność i poprawia doświadczenia użytkowników, eliminując problemy związane z przewijaniem lub wyświetlaniem treści poza ekranem. Obrazy ustawione w procentach pozwalają na bardziej elastyczne układy, które lepiej reagują na zmiany rozmiarów okien przeglądarki, co jest zgodne z najlepszymi praktykami w branży, takimi jak użycie Frameworków CSS, jak Bootstrap, które bazują na responsywnych gridach.

Pytanie 3

W dokumencie HTML utworzono formularz wysyłający dane do skryptu formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka przekierowuje nas do określonego adresu. Na podstawie podanego linku można wywnioskować, że dane do pliku formularz.php przesłano metodą

.../formularz.php?imie=Anna&nazwisko=Kowalska

A. GET

B. COOKIE

C. SESSION

D. POST

W kontekście przesyłania danych z formularza do pliku PHP metoda COOKIE nie jest bezpośrednio związana z formularzami HTML. Cookies to małe pliki przechowywane w przeglądarce użytkownika, służące do śledzenia sesji lub przechowywania danych użytkownika. Nie są one używane do bezpośredniego przesyłania danych formularza. Metoda POST, używana w formularzach HTML, wysyła dane jako treść żądania HTTP, co nie jest widoczne w adresie URL. POST jest preferowaną metodą dla przesyłania dużych ilości danych lub danych poufnych, ponieważ nie ogranicza ich ilości i lepiej zabezpiecza przed przypadkowym ujawnieniem. Metoda SESSION odnosi się do mechanizmu przechowywania danych o stanie użytkownika po stronie serwera, który umożliwia śledzenie sesji użytkownika między różnymi żądaniami HTTP. Dane sesji nie są bezpośrednio przesyłane przez formularze HTML, ale mogą być używane do przechowywania informacji po przesłaniu formularza. Często dochodzi do nieporozumień dotyczących tych metod, ponieważ każda z nich pełni inną funkcję w kontekście zarządzania danymi użytkownika w aplikacjach webowych. Kluczowym błędem jest założenie, że wszystkie wymienione metody mogą być używane wymiennie z formularzami HTML, co prowadzi do niepoprawnych wniosków w kontekście tego pytania.

Pytanie 4

Która z czynności NIE WPŁYNIE na wielkość zajmowanej pamięci pliku graficznego?

A. Interpolacja

B. Kompresja

C. Skalowanie obrazu przy użyciu atrybutów HTML

D. Zmiana rozdzielczości obrazu

Skalowanie obrazu za pomocą atrybutów HTML nie wpływa na rozmiar pliku graficznego, ponieważ ta operacja odbywa się po stronie klienta, w przeglądarce, a nie na samym pliku. Gdy obraz jest wyświetlany w HTML, atrybuty takie jak 'width' i 'height' mogą zmienić jego wizualny rozmiar na stronie, ale nie modyfikują samego pliku. W praktyce oznacza to, że niezależnie od tego, jak duży lub mały wyświetlany jest obraz, jego rzeczywisty rozmiar na dysku pozostaje niezmieniony. Dobrą praktyką w web designie jest stosowanie odpowiednich rozmiarów i formatów obrazów w zależności od kontekstu, co może poprawić szybkość ładowania strony i doświadczenie użytkownika. Warto również pamiętać, że zbyt duże obrazy mogą powodować dłuższy czas ładowania, co wpływa na SEO i oceny wydajności witryny. Dlatego zaleca się optymalizację obrazów przed ich dodaniem do strony, co jest bardziej efektywne niż poleganie na zmianie rozmiarów przez HTML.

Pytanie 5

Aby przekształcić obraz z formatu JPEG do PNG bez utraty jakości, tak aby kolor biały w oryginalnym obrazie został zastąpiony przezroczystością w wersji docelowej, należy najpierw

A. obniżyć rozdzielczość obrazu

B. usunięcie gumką wszystkich białych miejsc

C. załadować obraz do programu do edycji grafiki wektorowej

D. dodać kanał alfa

Żeby zmienić obrazek z formatu JPEG na PNG i zachować przezroczystość tam, gdzie wcześniej był biały kolor, ważny krok to dodanie kanału alfa. To w zasadzie taka dodatkowa warstwa w obrazie, która mówi, które piksele mają być przezroczyste. JPEG nie umie obsługiwać przezroczystości, więc białe obszary będą się pokazywać jako nieprzezroczyste. Jak już dodasz ten kanał alfa, możesz ustawić przezroczystość dla białych pikseli, co pozwoli na ich ukrycie lub zamianę na przezroczystość w końcowym obrazku. Na przykład, w programach jak Adobe Photoshop można użyć narzędzia do zaznaczania kolorów, żeby wybrać wszystkie białe piksele i potem je usunąć, zostawiając tylko przezroczystość. W ten sposób dostajesz efekt, którego chcesz w obrazie PNG, co jest zgodne z dobrą praktyką w obróbce grafiki i pomaga utrzymać wysoką jakość obrazu bez żadnych strat.

Pytanie 6

Co należy zrobić, gdy rozmiar pliku graficznego jest zbyt duży do umieszczenia w Internecie?

A. zapisać w formacie BMP

B. dodać kanał alfa

C. zmniejszyć jego rozdzielczość

D. zwiększyć jego głębię kolorów

Zmniejszenie rozdzielczości pliku graficznego to jedna z najskuteczniejszych metod redukcji jego rozmiaru, co jest kluczowe przy publikacji w Internecie. Rozdzielczość odnosi się do ilości pikseli, które tworzą obraz, a jej zmniejszenie prowadzi do mniejszej ilości danych do przechowania. Przykładowo, zamiast publikować obraz o rozdzielczości 4000x3000 pikseli, można zmniejszyć go do 1920x1080, co drastycznie zmniejszy wielkość pliku bez zauważalnej utraty jakości wizualnej na ekranach komputera czy urządzeń mobilnych. Zmniejszenie rozdzielczości jest zgodne z najlepszymi praktykami w zakresie optymalizacji zasobów internetowych, w tym zasadami dotyczącymi czasu ładowania strony i wydajności. Dodatkowo, odpowiednia rozdzielczość może poprawić doświadczenia użytkowników, zmniejszając czas ładowania i zwiększając responsywność witryn. Warto również pamiętać o formatowaniu plików graficznych, gdzie JPEG jest często preferowanym formatem dla zdjęć, a PNG dla obrazów z przezroczystością. Stosowanie technologii takich jak responsywne obrazy również przyczynia się do efektywnej prezentacji graficznej w sieci, co ma kluczowe znaczenie w dzisiejszym świecie online.

Pytanie 7

Aby tworzyć strony internetowe w sposób graficzny, należy skorzystać z

A. programu typu WYSIWYG

B. przeglądarki internetowej

C. edytora CSS

D. programu MS Office Picture Manager

Korzystanie z przeglądarek internetowych do tworzenia stron internetowych jest fundamentalnie niepoprawne, ponieważ przeglądarki są narzędziami do wyświetlania stron, a nie ich tworzenia. Użytkownicy mogą jedynie przeglądać treści, które zostały już opracowane w innych aplikacjach i zamieszczone w Internecie. Również edytory CSS, choć ważne w procesie stylizowania stron, nie są wystarczające do graficznego tworzenia stron internetowych. Edytory te skupiają się jedynie na aspekcie wizualnym poprzez stylowanie elementów HTML, ale nie oferują możliwości łatwego i intuicyjnego projektowania układu strony, co jest kluczowe dla grafików i projektantów stron. Co więcej, program MS Office Picture Manager jest aplikacją do zarządzania i edytowania zdjęć, a nie do tworzenia stron internetowych. Użytkownicy mogą popełniać błąd, myśląc, że podobne programy mogą być używane do projektowania stron, jednak nie są one zaprojektowane do integracji z HTML, CSS czy JavaScript. Zrozumienie tych różnic jest kluczowe dla efektywnego tworzenia stron internetowych, które są nie tylko estetyczne, ale również funkcjonalne i zgodne z nowoczesnymi standardami.

Pytanie 8

Jaki selektor stylizuje akapity tekstu z klasą tekst oraz element blokowy z identyfikatorem obrazki?

A. p.tekst, div#obrazki

B. p#tekst + div.obrazki

C. p#tekst, div.obrazki

D. p.tekst + div#obrazki

Poprawna odpowiedź to 'p.tekst, div#obrazki', ponieważ selektor 'p.tekst' odnosi się do wszystkich elementów , które mają klasę 'tekst'. To podejście jest zgodne z zasadami CSS, gdzie '.' oznacza klasę. Z kolei 'div#obrazki' to selektor, który odnosi się do elementu <div> o ID 'obrazki'. W tym przypadku '#' jest używane do wskazania unikalnego identyfikatora. Dzięki temu możemy dostosować style do konkretnych elementów w HTML. Przykład zastosowania: jeżeli chcemy, aby akapity z klasą 'tekst' miały określony kolor tła oraz aby element <div> z ID 'obrazki' był wyśrodkowany na stronie, możemy napisać odpowiednie reguły CSS, które zastosują te style tylko do wskazanych elementów. Praktyka ta zwiększa przejrzystość kodu oraz ułatwia jego późniejsze zarządzanie. Zastosowanie odpowiednich selektorów zgodnych z zasadami CSS to klucz do efektywnego stylizowania stron internetowych oraz dobrych praktyk w zakresie tworzenia responsywnych interfejsów użytkownika.

Pytanie 9

Dla strony internetowej stworzono styl, który będzie stosowany tylko do wybranych znaczników, takich jak niektóre nagłówki oraz kilka akapitów. W tej sytuacji, aby przypisać styl do konkretnych znaczników, najodpowiedniejsze będzie użycie

A. pseudoklasy

B. identyfikatora

C. selektora akapitu

D. klasy

Pseudoklasy w CSS są używane do stylizowania elementów w określonym stanie, np. :hover dla zmiany stylu po najechaniu myszą. Nie są odpowiednie do przypisywania unikalnych stylów do konkretnych elementów. Identyfikator w CSS, oznaczany przez #, jest używany do stylizowania jednego unikalnego elementu na stronie. Jego użycie jest ograniczone do jednego elementu, co jest zgodne z zasadą unikalności identyfikatorów w dokumencie HTML. Nie nadaje się do sytuacji, gdy ten sam styl ma być stosowany do wielu elementów, ponieważ zmuszałoby to do definiowania i przypisywania wielu unikalnych identyfikatorów do każdego z nich, co jest przeciwieństwem DRY (Don't Repeat Yourself). Selektor akapitu bezpośrednio odnosi się do wszystkich elementów danego typu, np. p dla wszystkich akapitów. Nie jest on elastyczny, gdy chcemy zastosować styl tylko do niektórych elementów danego typu. Klasy oferują większą elastyczność w zarządzaniu stylami wielu elementów, ponieważ mogą być stosowane do różnych typów elementów w różnych miejscach dokumentu HTML. Ponadto, klasy są bardziej czytelne i ułatwiają utrzymanie kodu, co jest zgodne z najlepszymi praktykami w programowaniu front-endowym. Użycie klas wspiera również lepszą strukturę i modularność kodu CSS, co jest istotne w kontekście pracy zespołowej oraz skalowalności projektu.

Pytanie 10

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. getElement('p')

B. getElementById('p1')

C. getElementsByTagName('p')[0]

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

Metoda getElementsByClassName("p.1")[0]; jest niepoprawna, ponieważ jej użycie zakłada, że w dokumencie HTML występuje element z klasą "p.1", a w podanym fragmencie HTML nie ma żadnego elementu, który spełniałby ten warunek. Klasy w HTML definiuje się za pomocą atrybutu class, a nie poprzez dotację z kropką w nazwie. W przypadku użycia getElementById("p1");, ta metoda zakłada, że istnieje element z unikalnym identyfikatorem "p1". W przedstawionym fragmencie również tego identyfikatora nie ma, co czyni tę odpowiedź błędną. Metoda getElement("p"); jest nieprawidłowa, ponieważ takiej metody nie ma w standardowym obiekcie document w JavaScript. Programista, zamiast tego, powinien użyć getElementById lub getElementsByTagName. Użycie getElementsByTagName jest najlepszą praktyką, ponieważ pozwala na selekcję wszystkich elementów danego typu. Często mylące są koncepcje związane z selekcją elementów; kluczowe jest zrozumienie, że metody JavaScript są czułe na typy i struktury dokumentu. Dlatego ważne jest, aby dokładnie wiedzieć, jakie elementy chcemy wybrać i jakie metody są do tego dostępne w standardzie DOM.

Pytanie 11

Jakie formaty wideo są obsługiwane przez standard HTML5?

A. MP4, Ogg, WebM

B. MP4, AVI

C. Ogg, AVI, MPEG

D. Ogg, QuickTime

Wybór odpowiedzi MP4, AVI, Ogg czy Ogg, AVI, MPEG jest błędny z kilku powodów. Format AVI, mimo swojej popularności, nie jest obsługiwany w standardzie HTML5. AVI to stary format, który nie jest zoptymalizowany do użytku w sieci, co prowadzi do problemów z kompatybilnością i wydajnością. Z kolei QuickTime, chociaż używany w niektórych aplikacjach, nie jest standardowo wspierany przez HTML5, co ogranicza jego zastosowanie w nowoczesnych stronach internetowych. W przypadku formatu MPEG, choć jest on dość powszechnie stosowany, to nie jest preferowany w kontekście HTML5, a jego wsparcie jest ograniczone w porównaniu do MP4, Ogg i WebM. Warto zaznaczyć, że najnowsze przeglądarki internetowe szybko przechodzą na otwarte standardy, co sprawia, że formaty, które opierają się na patencie, stają się mniej popularne. W związku z tym, korzystanie z formatów takich jak MP4, Ogg czy WebM nie tylko zapewnia lepszą jakość i wydajność, ale również zwiększa dostępność treści w sieci. Wybór niewłaściwych formatów może prowadzić do problemów z odtwarzaniem na różnych platformach, co negatywnie wpływa na doświadczenia użytkowników oraz zasięg treści. W efekcie, aby zachować optymalne standardy w tworzeniu stron internetowych, kluczowe jest stosowanie formatów zgodnych ze specyfikacją HTML5.

Pytanie 12

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

A. nav { float: right; }

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

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

D. 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 13

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Ta metoda odniesie się do akapitu

A. akapit4

B. akapit3

C. akapit

D. akapit2

Selekcja elementów DOM na podstawie ich klas jest kluczowym aspektem w pracy z JavaScript, jednak nie wszystkie odpowiedzi w tym teście są poprawnie skonstruowane. Odpowiedzi takie jak akapit, akapit2 oraz akapit3 mają istotne braki w kontekście wykorzystania metody getElementsByClassName. Element akapit nie ma przypisanej klasy, co uniemożliwia jego selekcję przez tę metodę. Ważne jest, aby pamiętać, że getElementsByClassName wymaga, aby elementy miały przypisaną klasę, a nie aby były zdefiniowane przez inne atrybuty. Z kolei akapit2 posiada identyfikator, a nie klasę, co również nie umożliwia jego odnalezienia przez tę metodę. Identyfikatory są unikalne w kontekście dokumentu HTML i są bardziej odpowiednie do selekcji z wykorzystaniem metody getElementById. Ostatnia odpowiedź akapit3 jest niewłaściwa, ponieważ atrybut href nie jest przypisany do elementów typu p, co jest technicznie błędne. Tego rodzaju błędy mogą wynikać z nieporozumień dotyczących struktury DOM i atrybutów HTML, co jest kluczowe do efektywnego programowania w JavaScript. Właściwe rozumienie różnic między klasami, identyfikatorami i innymi atrybutami jest fundamentalne dla skutecznego zarządzania elementami w kodzie skryptowym.

Pytanie 14

Którego związku selektorów CSS należy użyć w miejscu znaków zapytania, aby zdefiniowany styl został zastosowany tylko do tekstu „paragrafie”?

<!DOCTYPE html>
<html>
  <head>
    <style>
      ???{letter-spacing: 10px; color: red;}
    </style>
  </head>
  <body>
    <p>Styl <b>tekstu</b> w pierwszym <i>paragrafie</i></p>
  </body>
</html>

A. b i

B. b > i

C. p + i

D. p > i

W tym zadaniu kluczowe jest zrozumienie, jak działają różne związki (kombinatory) selektorów w CSS i jak przekładają się one na strukturę drzewa DOM. Cały problem sprowadza się do relacji między znacznikami , i . W kodzie jest bezpośrednim dzieckiem paragrafu, natomiast jest zupełnie osobnym elementem, który nie zawiera w sobie . Jeżeli wybierzemy selektor oparty wyłącznie na listingu nazw znaczników obok siebie, typu „b i”, to w CSS oznacza on: „dowolny element znajdujący się gdziekolwiek wewnątrz elementu ”. W naszym HTML nie ma takiej relacji, bo nie jest potomkiem , więc taki selektor zwyczajnie nie trafi w żaden element. To jest dość typowe myślenie: ktoś patrzy na kolejność znaczników w jednej linii i myli ją z hierarchią zagnieżdżenia. Podobny problem występuje przy użyciu selektora „b > i”. Kombinator „>” oznacza dziecko bezpośrednie, więc „b > i” wybiera tylko te elementy , które są jednym poziomem niżej w środku . Ponownie, w naszym drzewie DOM nie jest dzieckiem , więc reguła w ogóle się nie zastosuje. Z mojego doświadczenia to częsty błąd: patrzymy na tekst „tekstu w pierwszym paragrafie” i intuicyjnie kojarzymy słowa, zamiast spojrzeć, jak naprawdę są zagnieżdżone tagi. Jeszcze inna sytuacja dotyczy selektora „p + i”. Znak „+” to tzw. selektor sąsiadującego rodzeństwa (adjacent sibling). Oznacza: „wybierz element , który stoi w DOM bezpośrednio po elemencie , na tym samym poziomie zagnieżdżenia”. W naszym przykładzie nie jest rodzeństwem , tylko jego wnętrzem, więc ten kombinator kompletnie tu nie pasuje. To też jest dość mylące, bo część osób kojarzy „+” z jakimś rodzajem powiązania, ale nie pamięta, że chodzi o dwa znaczniki obok siebie, a nie jeden w środku drugiego. Podsumowując, wszystkie błędne odpowiedzi ignorują faktyczną strukturę HTML i relacje rodzic–dziecko między elementami. Dobra praktyka jest taka, żeby przed wyborem selektora wyobrazić sobie drzewo DOM albo wręcz rozpisać je w formie wcięć. Dopiero potem dobiera się odpowiedni kombinator: spacja dla dowolnego potomka, „>” dla dziecka, „+” dla sąsiada, „~” dla dalszego rodzeństwa. Świadome korzystanie z tych narzędzi pozwala tworzyć precyzyjne, czytelne i łatwe w utrzymaniu arkusze CSS, zgodne z rekomendacjami W3C i dobrymi praktykami front-endowymi.

Pytanie 15

Element

<meta charset="utf-8">

służy do definiowania metadanych witryny internetowej związanych z

A. kodowaniem znaków

B. słowami kluczowymi

C. językiem witryny

D. opisem witryny

Element <meta charset="utf-8"> jest kluczowym fragmentem kodu HTML, który definiuje kodowanie znaków używane na stronie internetowej. Ustawienie kodowania na UTF-8 jest obecnie standardem branżowym, który pozwala na prawidłowe wyświetlanie tekstów w różnych językach, a także obsługę różnorodnych znaków specjalnych. Dzięki temu strona będzie renderować się poprawnie niezależnie od używanego języka, co jest szczególnie istotne w kontekście globalizacji i dostępności treści dla szerokiego grona użytkowników. W praktyce, poprawne kodowanie znaków eliminuje problemy z wyświetlaniem polskich znaków diakrytycznych, takich jak ą, ć, ę, ł czy ź. Warto także zauważyć, że błędne ustawienie kodowania może prowadzić do tzw. "krzaków" w treści, co znacząco obniża jakość prezentacji strony oraz jej użyteczność. Dlatego zaleca się zawsze stosować <meta charset="utf-8"> w nagłówku dokumentu HTML, aby zapewnić pełną kompatybilność i poprawność wyświetlania treści w różnych przeglądarkach i systemach operacyjnych.

Pytanie 16

W CSS zapis selektora

p > i { color: red;}

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

A. każdy tekst w znaczniku z wyjątkiem tych w znaczniku

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

C. jedynie tekst w znaczniku , który znajduje się bezpośrednio wewnątrz znacznika

D. wszystkie teksty w znaczniku lub każdy tekst w znaczniku

Odpowiedzi, które nie uznają znaczenia operatora > oraz kontekstu, w jakim elementy są umieszczone, mogą prowadzić do błędnych wniosków. Przykładowo, stwierdzenie, że każdy tekst w znaczniku za wyjątkiem tych w znaczniku zostanie sformatowany, jest niezgodne z zasadami działania CSS, ponieważ selektor ten nie wyklucza jedynie , lecz odnosi się do hierarchii struktury DOM. W praktyce, jeśli nie jest bezpośrednim dzieckiem , 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 lub że dotyczy on klasy , 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 17

Jakie polecenie należy zastosować, aby słowo TEKST pojawiło się w kolorze czarnym w oknie przeglądarki internetowej?

A. TEKST

B. <body bgcolor="black">TEKST</body>

C. TEKST

D. <body color="black">TEKST

Odpowiedzi, które nie są poprawne, bazują na nieadekwatnych atrybutach i błędnych koncepcjach związanych z formatowaniem tekstu w HTML. Przykładowo, użycie <body color="black">TEKST jest niepoprawne, ponieważ tag <body> nie obsługuje atrybutu 'color'. Zamiast tego, aby ustawić kolor tła całej strony, powinno się używać 'bgcolor' w tagu <body>, co jest również przestarzałym podejściem w kontekście nowoczesnego HTML i CSS. Współczesne standardy promują separację treści od prezentacji, co oznacza, że stylizację powinno się realizować głównie za pomocą CSS. Kolejny błąd to użycie <body bgcolor="black">TEKST</body>, gdzie 'bgcolor' ustawia kolor tła, a nie kolor tekstu. Takie myślenie może prowadzić do nieporozumień i nieefektywnego kodowania, co jest sprzeczne z zasadą minimalizacji i efektywności w tworzeniu stron internetowych. Odpowiedź TEKST jest również błędna, ponieważ 'czarny' nie jest standardową nazwą koloru w HTML, a w kontekście koloru tekstu powinna być używana wartość szesnastkowa lub jedno z predefiniowanych angielskich słów kluczowych, takich jak 'black'. Dlatego ważne jest, aby podstawy HTML znać z dużą dokładnością oraz korzystać z aktualnych standardów dotyczących stylizacji, co zapewnia zarówno funkcjonalność, jak i estetykę w projektowaniu stron internetowych.

Pytanie 18

Wskaż prawidłowe twierdzenie odnoszące się do zaprezentowanego kodu HTML.

<video width="640" height="480" controls>
    <source src="animacja.mp4" type="video/mp4">
</video>

A. Kod może nie działać w przeglądarkach, które nie wspierają HTML5.

B. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.

C. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby można go było odtworzyć.

D. Ścieżka do pliku jest niepoprawna, nie zawiera pełnej ścieżki.

Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć rozdzielczość 640x480 pikseli, co jest nieprawdziwe, ponieważ atrybuty width i height w znaczniku <video> nie narzucają wymagań rozdzielczości dla samego pliku wideo, lecz jedynie definiują rozmiar ramki odtwarzacza w przeglądarce. Jeśli plik ma inną rozdzielczość, przeglądarka odpowiednio go przeskaluje. Drugie stwierdzenie, że użytkownik nie będzie miał możliwości sterowania odtwarzaniem animacji, jest błędne, ponieważ atrybut controls w znaczniku <video> dokładnie to umożliwia, dostarczając przyciski do odtwarzania, pauzowania oraz regulacji głośności. Ostatnie stwierdzenie dotyczące lokalizacji pliku jest również mylne, ponieważ kod nie wymaga ścieżki bezwzględnej dla pliku animacja.mp4. W przypadku gdy plik znajduje się w tym samym katalogu co strona HTML, wystarczy podać jego nazwę. W przeciwnym razie można zastosować ścieżkę względną, co jest zgodne z dobrymi praktykami w zakresie organizacji plików na serwerze. Te nieporozumienia mogą prowadzić do mylnych wniosków, dlatego ważne jest zrozumienie zasad działania znaczników HTML oraz podstawowych koncepcji związanych z odtwarzaniem multimediów w sieci.

Pytanie 19

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. czcionki nagłówka drugiego poziomu

B. tła całej witryny

C. czcionki wszystkich nagłówków na stronie

D. tła tekstu nagłówka drugiego poziomu

Zapis CSS h2 { background-color: green; } oznacza, że każdemu elementowi nagłówka drugiego stopnia przypisany zostanie zielony kolor tła. W CSS selektor h2 odnosi się bezpośrednio do wszystkich elementów HTML o tagu <h2>. Właściwość background-color służy do definiowania koloru tła elementu, nie wpływając na kolor czcionki samego nagłówka. W praktyce takie podejście pozwala na wyraźne wyróżnienie nagłówków na tle innych elementów strony, co może być kluczowe dla poprawy czytelności. Przyjęte w kodzie standardy zapewniają zgodność z najnowszymi wytycznymi W3C, pozwalając na efektywne zarządzanie stylami w projekcie. Wiedza o tym jak stylizować nagłówki za pomocą background-color jest fundamentalna dla każdego web developera, umożliwiając tworzenie atrakcyjnych i czytelnych interfejsów użytkownika w sposób zgodny z zasadami responsywnego projektowania. Ponadto, stosowanie takich stylizacji wspiera semantyczne podejście do strukturyzacji treści, co jest ważne dla optymalizacji SEO.

Pytanie 20

Aby uzyskać płynne przejścia obrazów w filmie, liczba klatek (niewchodzących w interakcję ze sobą) na sekundę powinna znajdować się w co najmniej takim zakresie

A. 16 - 19 fps

B. 24 - 30 fps

C. 20 - 23 fps

D. 31 - 36 fps

Odpowiedź 24 - 30 fps jest prawidłowa, ponieważ to właśnie w tym zakresie klatek na sekundę (fps) uzyskuje się płynność ruchu, która jest akceptowana w większości produkcji filmowych i telewizyjnych. Standard 24 fps jest powszechnie stosowany w kinematografii, ponieważ pozwala na naturalne odwzorowanie ruchu, a także jest zgodny z technologią filmową. W praktyce, filmy kręcone w tym standardzie mają charakterystyczną estetykę, która jest ceniona przez widzów. Dodatkowo, przy 30 fps można uzyskać płynniejsze efekty w produkcjach telewizyjnych, szczególnie w transmisjach na żywo i sportowych, gdzie dynamika ruchu jest kluczowa. Utrzymanie liczby klatek w tym zakresie zmniejsza ryzyko efektów stroboskopowych, które mogą wystąpić przy niższych liczbach klatek. Warto również dodać, że nowoczesne technologie filmowe i animacyjne często korzystają z wyższych wartości fps, jednak standardowe ramy dla klasycznych produkcji pozostają w tym zakresie, co czyni je uniwersalnym punktem odniesienia dla twórców.

Pytanie 21

Który z poniższych formatów plików nie jest używany do publikacji grafiki lub animacji w internecie?

A. PNG

B. SVG

C. AIFF

D. SWF

Wybór formatów PNG, SWF i SVG jako odpowiedzi nie jest właściwy, ponieważ każdy z nich jest ściśle związany z publikacją grafiki lub animacji na stronach internetowych. PNG to format plików rastrowych, który zapewnia wysoką jakość obrazu, wspiera przezroczystość i kompresję bezstratną. Z tego powodu jest często wykorzystywany w projektowaniu stron internetowych, gdzie ważne jest zachowanie detali w grafice, a także w sytuacjach, gdy potrzebne są przezroczyste tła. Z kolei SWF jest to format, który był szeroko stosowany do tworzenia animacji, gier i interaktywnych aplikacji w środowisku Adobe Flash. Choć technologia Flash jest obecnie mniej popularna z powodu rozwoju HTML5, SWF wciąż ma swoje miejsce w historii publikacji multimedialnych. Natomiast SVG, jako format wektorowy, umożliwia tworzenie grafiki, która jest skalowalna i dostosowuje się do różnych rozmiarów ekranów, co czyni go idealnym do responsywnych designów. Wszystkie te formaty są kluczowe w kontekście tworzenia atrakcyjnych wizualnie i funkcjonalnych stron internetowych, dlatego nie mogą być uznane za błędne odpowiedzi w kontekście publikacji grafiki i animacji.

Pytanie 22

Jaki zapis w dokumencie HTML umożliwia powiązanie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <a href="style.css">

B. <a src="style.css">

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

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

Zapis <link rel="stylesheet" href="style.css"> jest poprawnym sposobem na dołączenie zewnętrznego arkusza stylów do dokumentu HTML. Atrybut 'rel' określa relację między dokumentem a zewnętrznym zasobem, w tym przypadku wskazując, że jest to arkusz stylów. Atrybut 'href' z kolei wskazuje ścieżkę do pliku CSS, który ma być użyty. Użycie znacznika <link> jest zgodne z standardem W3C i jest najlepszą praktyką w tworzeniu stron internetowych. Dzięki temu przeglądarka może załadować style z zewnętrznego pliku, co pozwala na łatwiejsze zarządzanie stylami oraz ich ponowne użycie w różnych dokumentach HTML. Umożliwia to także separację treści od stylizacji, co jest kluczowe w koncepcji wzorców projektowych, takich jak MVC (Model-View-Controller). Przykładowo, aby zmienić wygląd całej strony, wystarczy edytować jeden plik CSS, co znacząco upraszcza proces tworzenia i utrzymania witryn.

Pytanie 23

W instrukcjach mających na celu odtwarzanie dźwięku na witrynie internetowej jako podkładu muzycznego nie stosuje się atrybutu

A. loop="10"

B. balance="-10"

C. volume="-100"

D. href="C:/100.wav">

Odpowiedź 'href="C:/100.wav"' jest prawidłowa, ponieważ atrybut 'href' nie jest używany w kontekście odtwarzania dźwięku na stronie internetowej. Atrybut ten jest przeznaczony do definiowania hiperłączy w elementach, takich jak <a> (linki). W przypadku odtwarzania dźwięków na stronach internetowych, stosuje się atrybuty, takie jak 'src' w elemencie <audio> lub <embed>, które wskazują lokalizację pliku audio, który ma być odtwarzany. Dobre praktyki webowe zalecają korzystanie z elementu <audio>, który pozwala na kontrolowanie odtwarzania dźwięku przy pomocy takich atrybutów jak 'controls', 'autoplay', 'loop' itp. Na przykład, aby odtworzyć plik audio, można użyć znacznika <audio src="C:/100.wav" controls></audio>, co pozwala na interaktywne sterowanie odtwarzaniem. Zrozumienie różnicy między atrybutami i ich zastosowaniem w kontekście HTML jest kluczowe dla projektowania funkcjonalnych i dostępnych stron internetowych.

Pytanie 24

Elementarna animacja może być zapisana w formacie

A. TIFF

B. PSD

C. GIF

D. BMP

Wybór formatu TIFF (Tagged Image File Format) do zapisywania animacji jest niewłaściwy, ponieważ jest on głównie stosowany do przechowywania statycznych obrazów o wysokiej jakości, często wykorzystywanych w drukowaniu i skanowaniu. TIFF obsługuje bogate kolory i jest idealny do archiwizacji zdjęć oraz grafiki, jednak nie ma możliwości zapisu sekwencji obrazów jako animacji. Co więcej, pliki TIFF są zazwyczaj większe niż pliki GIF, co sprawia, że są mniej praktyczne w kontekście animacji internetowych, gdzie szybkość ładowania jest kluczowa. Format BMP (Bitmap) również nie jest odpowiedni do animacji. BMP to format plików bitmapowych, który przechowuje dane o każdym pikselu w obrazie, co prowadzi do dużych rozmiarów plików oraz braku kompresji. BMP nie oferuje żadnej funkcji animacji i jest używany głównie do przechowywania pojedynczych, statycznych obrazów, co czyni go nieefektywnym wyborem dla jakiejkolwiek formy ruchomej grafiki. Z kolei PSD (Photoshop Document) to format plików stworzony przez Adobe Photoshop, który służy do przechowywania wszystkich warstw projektu graficznego. Chociaż umożliwia tworzenie złożonych grafik i edycję w różnorodnych warstwach, PSD nie nadaje się do zapisania animacji w standardowym rozumieniu tego terminu. Tylko w Adobe Photoshop można tworzyć animacje w formacie PSD, ale i tak nie są one kompatybilne z większością platform internetowych, co ogranicza ich użyteczność do zastosowań profesjonalnych.

Pytanie 25

Formaty wideo, które są wspierane przez standard HTML5, to

A. Ogg, AVI, MPEG

B. Ogg, QuickTime

C. MP4, AVI

D. MP4, Ogg, WebM

Wybór odpowiedzi takiej jak MP4, AVI, nie uwzględnia faktu, że format AVI nie jest obsługiwany przez HTML5. AVI to starszy format kontenera, który wymaga zainstalowanych kodeków, co czyni go mniej przydatnym w kontekście nowoczesnych aplikacji webowych, które stawiają na zgodność i łatwość użycia. Podobnie, wybór Ogg, QuickTime również jest błędny, ponieważ format QuickTime, choć popularny, nie jest częścią standardu HTML5 i wymaga korzystania z dodatkowych wtyczek lub komponentów w przeglądarkach, co nie sprzyja wydajności ani wygodzie użytkowników. W przypadku Ogg, choć jest to format otwarty, jego zastosowanie w praktyce jest ograniczone w porównaniu z MP4 czy WebM. Również zestawienie Ogg, AVI, MPEG jest mylące, ponieważ MPEG to bardziej ogólne określenie dla różnych standardów kompresji wideo, a nie konkretny format pliku. Współczesne praktyki programistyczne i standardy internetowe preferują formaty, które są natywnie wspierane przez przeglądarki, a te, które wymagają dodatkowych wtyczek lub nie są powszechnie używane, są odrzucane. Zrozumienie, które formaty są zgodne z HTML5, jest kluczowe dla zapewnienia optymalnych doświadczeń użytkownika.

Pytanie 26

Zgodnie z zasadami walidacji HTML5, prawidłowy zapis tagu hr to

A. <hr>

B. </ hr>

C. </hr?>

D. </ hr />

Zarówno </ hr>, </hr?>, jak i </ hr /> są przykładami niepoprawnych składni w kontekście HTML5. Element <hr> jest samodzielny i nie wymaga zamknięcia, co oznacza, że dodawanie znaku zamykającego jest zbędne i w rzeczywistości stanowi błąd. Użycie </ hr> sugeruje, że <hr> byłoby elementem, który wymaga zamknięcia, co jest sprzeczne z jego definicją w HTML5. Z kolei </hr?> to przykład błędnej składni, ponieważ zawiera niepoprawny znak zapytania, który nie ma uzasadnienia w HTML i może prowadzić do nieprzewidywalnych efektów w renderowaniu strony przez przeglądarki. Ostatecznie, </ hr /> również jest nieprawidłowe, ponieważ dodanie ukośnika przed zamknięciem nie jest potrzebne w przypadku elementów samodzielnych. Takie błędne wykorzystanie składni może prowadzić do niepoprawnego wyświetlania strony i problemów z jej interpretacją przez programy przetwarzające HTML. Dlatego ważne jest, aby dobrze znać zasady walidacji HTML i stosować się do nich, aby zapewnić poprawne działanie i zgodność ze standardami sieciowymi.

Pytanie 27

Aby włączyć kaskadowy arkusz stylów zapisany w oddzielnym pliku, należy zastosować poniższy fragment kodu HTML

A. <link rel="stylesheet" type="text/css" href= "styl.css" />

B. <option value="styl.css" type="text/css" />

C. <div id="styl.css" relation="css" />

D. <meta charset="styl.css" />

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, poprawnie używamy tagu <link>. Ten tag pozwala na powiązanie zewnętrznego pliku CSS z dokumentem HTML, co jest kluczowe dla zarządzania stylem witryny internetowej. W atrybucie 'rel' określamy, że jest to arkusz stylów ('stylesheet'), a w atrybucie 'type' informujemy przeglądarkę, że plik jest typu 'text/css'. Atrybut 'href' wskazuje lokalizację pliku CSS. To podejście jest zgodne z zaleceniami W3C, co zapewnia kompatybilność z różnymi przeglądarkami. Przykładowe użycie wygląda następująco: <link rel='stylesheet' type='text/css' href='styl.css'>. Dzięki temu możemy oddzielić strukturę dokumentu HTML od jego stylizacji, co ułatwia zarządzanie kodem oraz poprawia efektywność ładowania stron. Praktyczne zastosowanie tego rozwiązania pozwala na łatwe wprowadzanie globalnych zmian w stylach, co jest szczególnie przydatne w dużych projektach, gdzie wiele stron korzysta z tego samego pliku CSS.

Pytanie 28

W sekcji <head> (w elemencie <meta ... >) witryny www nie umieszcza się danych dotyczących

A. automatycznego odświeżania

B. typu dokumentu

C. kodowania

D. autora

Umieszczanie informacji o autorze, kodowaniu oraz automatycznym odświeżaniu w znaczniku <head> jest praktyką zgodną ze standardami, jednak występują nieporozumienia co do roli i miejsca deklaracji typu dokumentu. Wiele osób może błędnie zakładać, że typ dokumentu można umieścić w sekcji <head>, co jest nieprawidłowe. Deklaracja DOCTYPE, która informuje przeglądarkę o wersji HTML, musi być umieszczona przed znacznikiem <html> w kodzie. Tymczasem w sekcji <head> umieszczamy metadane, które mają bezpośredni wpływ na interpretację zawartości strony i jej interakcję z użytkownikami oraz wyszukiwarkami. Często popełnianym błędem jest mylenie tych dwóch elementów, co prowadzi do nieprawidłowego kodowania strony. Odpowiednie zrozumienie struktury dokumentu HTML jest kluczowe dla jego prawidłowego funkcjonowania; nieprawidłowe umiejscowienie deklaracji DOCTYPE może prowadzić do nieoczekiwanych zachowań w przeglądarkach, takich jak błędy w renderowaniu lub problemy z kompatybilnością. Dlatego ważne jest, aby znać zasady dotyczące tworzenia struktury dokumentów HTML, co przyczynia się do lepszej jakości kodu oraz większej wydajności stron internetowych.

Pytanie 29

Tekst można pogrubić za pomocą znacznika , a także stosując odpowiednie właściwości CSS.

A. font-weight

B. font-size

C. text-weight

D. text-size

Wybór 'text-weight' jako właściwości CSS jest błędny, ponieważ nie istnieje taka właściwość w standardzie CSS. Użytkownicy mogą mylić ją z 'font-weight', co prowadzi do frustracji i błędnych implementacji w kodzie. Kolejna odpowiedź, 'font-size', odnosi się do rozmiaru tekstu, a nie do jego grubości. Użytkownicy mogą popełniać błąd myślowy, sądząc, że zmiana rozmiaru tekstu wpłynie na jego wagę, jednak te dwie właściwości są od siebie niezależne. Wreszcie, 'text-size' również nie jest uznawana za standardową właściwość CSS; właściwą terminologią w kontekście stylizacji tekstu jest 'font-size'. Takie mylne przekonania mogą wynikać z nieznajomości pełnej terminologii CSS lub z braku praktycznego doświadczenia w stylizacji stron. Kluczowe znaczenie ma zrozumienie, że CSS posiada precyzyjne określenia dla każdego aspektu stylizacji, a używanie niepoprawnych terminów może prowadzić do błędów w kodzie oraz do niepoprawnego wyświetlania elementów na stronie. Warto inwestować czas w naukę odpowiednich właściwości CSS, aby tworzyć bardziej profesjonalne i funkcjonalne strony internetowe.

Pytanie 30

W CSS zapis w postaci

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

spowoduje, że kolor czerwony zostanie zastosowany do

A. pierwszej litery nagłówka w pierwszym stopniu

B. pierwszej litery nagłówka w drugim stopniu

C. pierwszej linii akapitu

D. tekstu nagłówka w pierwszym stopniu

Jak coś nie wyszło, to ważne jest, żeby wiedzieć, że pseudoelement :first-letter tylko stylizuje pierwszą literę danego elementu, a nie inne części tekstu. Więc jak ktoś mówi, że czerwony kolor ma dotyczyć pierwszej linii paragrafu czy nagłówka drugiego stopnia, to jest błędne. Często nowi w CSS mylą, jak działają pseudoelementy i co mogą zrobić. :first-letter działa tylko w kontekście bloku, w którym jest użyty, a tu chodzi o h1. Dlatego kolor czerwony nie będzie dotyczyć tekstu w innych elementach jak p czy h2. Mówiąc szczerze, takie spekulacje mogą prowadzić do nieporozumień, co może być frustrujące, jak się pracuje z CSS. Fajnie jest czytać dokumentację i po prostu zrozumieć, gdzie dany pseudoelement działa. I pamiętaj, że stylizacja w CSS polega na hierarchii i kontekście, więc styl przypisany do jednego elementu nie zadziała automatycznie na inne, chyba że to jasno zapiszesz w regułach CSS. To ogarniecie jest mega ważne, by dobrze używać CSS przy projektowaniu stron.

Pytanie 31

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

A. odwracanie obrazu.

B. łączanie warstw.

C. zmiana rozmiaru.

D. kadrowanie.

Skalowanie to po prostu zmiana rozmiaru obrazka, ale nie zmienia on jego zawartości. Jak robimy grafikę na stronę, to może to się nie najlepiej skończyć, bo obraz może się zniekształcić, a tego chyba nikt nie chce w profesjonalnych projektach. Odbicie obrazu to lustrzane odwzorowanie grafiki, które tak naprawdę nie ma nic wspólnego z kadrowaniem. Może w sztuce się przyda, ale do wycinania nie pasuje. Łączenie warstw to technika, gdzie nakładamy różne elementy na siebie i to też nie ma nic wspólnego z wycinaniem, a bardziej z integracją. Ogólnie rzecz biorąc, to wszystko wynika z mylenia podstawowych pojęć związanych z edycją grafiki. Ludzie mogą myśleć, że te techniki są podobne, co prowadzi do nieporozumień. Ważne jest, żeby wiedzieć, że każda z tych technik ma swoje cele, a kadrowanie to coś, co skupia się na wycinaniu i kompozycji.

Pytanie 32

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Który z poniższych fragmentów kodu HTML odnosi się do pierwszego wiersza tabeli?

A. D

B. A

C. C

D. B

W przypadku odpowiedzi A zastosowano znaczniki <td> co jest błędną praktyką dla nagłówków tabeli. Znaczniki <td> służą do definiowania zwykłych komórek danych a nie komórek nagłówkowych. Użycie <td> w nagłówkach pozbawia tabelę odpowiednich walorów semantycznych co utrudnia jej późniejsze stylizowanie oraz dostępność. W odpowiedzi B użyto znacznika jako części nagłówków co jest nieoptymalne ponieważ znacznik ten semantycznie oznacza zmianę tonu lub stylu i nie jest przeznaczony do formatowania komórek tabeli. Oznacza to że formatowanie takie może być odebrane jako nieodpowiednie przez czytniki ekranowe co dodatkowo wpływa na dostępność. Natomiast w odpowiedzi C zastosowano znacznik <center> wewnątrz <td> co jest przestarzałą techniką HTML oraz nie jest zalecane we współczesnym tworzeniu stron internetowych. Znacznik <center> został zdeprecjonowany w HTML 4.01 i nie powinien być używany ponieważ jego funkcjonalność można osiągnąć za pomocą CSS. Wszystkie te podejścia pomijają aspekty semantycznego tworzenia stron internetowych co jest kluczowe dla utrzymania prawidłowej struktury dokumentu oraz dostępności dla użytkowników z różnymi potrzebami.

Pytanie 33

W semantycznym HTML odpowiednikiem tagu , który nie tylko pogrubia tekst, ale również oznacza go jako istotniejszy, jest

A. <ins>

B.

C.

D.

Znaczniki HTML pełnią różne funkcje, a ich wybór przekłada się na semantykę oraz dostępność treści w sieci. Odpowiedzi, które nie są związane z , mogą wprowadzać w błąd co do prawidłowego użycia semantyki w HTML. Znak <ins> oznacza tekst, który został dodany do dokumentu, ale nie wskazuje na jego wadliwość ani nie nadaje mu specjalnego znaczenia w kontekście treści. Stosowanie <ins> w miejscu może prowadzić do nieporozumień co do roli danego tekstu, jako że jego głównym celem jest zaznaczenie nowo dodanych informacji, a nie akcentowanie ważności. Z kolei służy do wyróżniania tekstu na tle innych w celu wskazania jego istotności, ale nie definiuje go jako bardziej znaczącego w kontekście treści, co oznacza, że jego zastosowanie nie jest zgodne z wymaganiami semantyki. Natomiast wskazuje na tekst, który powinien być akcentowany, ale w innym sensie – nie chodzi o znaczenie samego tekstu, a raczej o jego intonację w przypadku mowy, co w kontekście dokumentów HTML jest niewłaściwe. Błędy te są wynikiem nieporozumienia, gdzie użytkownicy mogą mylić różne znaczniki, nie rozumiejąc ich semantycznych różnic. Warto świadomie stosować odpowiednie znaczniki, by poprawić jakość i dostępność tworzonych treści w sieci.

Pytanie 34

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć 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">

Wybór innych opcji, takich jak <img src="/rysunek.png" style="width: 25px; height:50px;"> czy <img src="/rysunek.png" style="width: 25px; height:25px;"> prowadzi do nieproporcjonalnego wyświetlenia obrazu, co skutkuje jego zniekształceniem. Ustalenie zarówno szerokości, jak i wysokości w stylach CSS sprawia, że obrazek jest zmuszony do dopasowania się do tych wymiarów, co narusza jego naturalne proporcje. To podejście jest niezgodne z zaleceniami dotyczącymi responsywności, które sugerują, aby ograniczać się do jednego wymiaru, co pozwala drugiemu na automatyczne dostosowanie. Typowym błędem jest przyjęcie, że podanie obu wymiarów w pikselach zawsze przyniesie optymalny efekt wizualny, co jest mylące i może prowadzić do złego doświadczenia użytkownika. Zniekształcenie obrazów nie tylko obniża estetykę strony, ale także może wpływać na jej użyteczność oraz SEO. Dobrą praktyką jest również używanie atrybutów 'alt' w znacznikach obrazów, aby poprawić dostępność i SEO, co nie zostało uwzględnione w żadnej z opcji. Warto także zauważyć, że stosowanie odpowiednich formatów obrazów i ich optymalizacja pod względem rozmiaru pliku są kluczowe dla przyspieszenia ładowania strony.

Pytanie 35

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

A. nie zmieniać obu jego wymiarów przy użyciu stylów CSS

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

C. ustawić oba jego wymiaru w pikselach

D. ustawić jeden z jego wymiarów w pikselach

Ustalenie szerokości obrazu w procentach jest kluczowym krokiem w responsywnym projektowaniu stron internetowych. Pozwala to na automatyczne dopasowanie szerokości obrazu do szerokości kontenera, w którym się znajduje, co jest istotne w przypadku różnych rozmiarów ekranów, od komputerów stacjonarnych po urządzenia mobilne. Kiedy szerokość obrazu jest zadana w procentach, np. 'width: 100%;', obraz będzie zajmował 100% szerokości swojego rodzica, co umożliwia rozciąganie lub zmniejszanie obrazu w zależności od dostępnej przestrzeni. Jest to zgodne z zasadami responsywnego web designu (RWD), które zakładają elastyczność i dostosowanie UI do różnych warunków wyświetlania. Dodatkowo, stosowanie jednostek procentowych jest praktyką zalecaną przez W3C w kontekście utrzymania proporcji i jakości obrazu na różnych urządzeniach. Warto również dodać, że w przypadku używania CSS warto określić maksymalną szerokość obrazu (max-width), aby uniknąć nadmiernego rozciągania na dużych ekranach.

Pytanie 36

Poniżej zaprezentowano fragment kodu w języku HTML:
<ol>
<li>punkt 1</li>
<li>punkt 2</li>
<ul>
<li>podpunkt1</li>
<li>podpunkt2</li>
<li>podpunkt3</li>
</ul>
<li>punkt3</li>
</ol>

A. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

B. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3

C. 1. punkt 1 2. punkt 2 3. punkt3 podpunkt1 podpunkt2 podpunkt1

D. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

Widzisz, w niektórych odpowiedziach pojawiły się błędy, które mogą wprowadzać zamieszanie. Na przykład, użycie <il> zamiast <ul> to spory błąd, bo w HTML nie mamy elementu <il>. To może spowodować problemy z wyświetlaniem strony w przeglądarkach. I w paru przypadkach z kolejnością podpunktów było nie tak – pamiętaj, że hierarchia jest ważna. Dobrze zdefiniowane listy powinny mieć swoje konteksty, czyli otaczać je tagami <ol> lub <ul>. Każdy błąd w tym zakresie może utrudnić nawigację po stronie, zwłaszcza dla osób z niepełnosprawnościami. Ogólnie rzecz biorąc, warto dbać o porządek w HTML, bo to jest kluczowe w tworzeniu stron, które są użyteczne i funkcjonalne.

Pytanie 37

W CSS, aby stylizować tekst przy użyciu przekreślenia, podkreślenia dolnego lub górnego, należy użyć atrybutu

A. text-indent

B. text-transform

C. text-align

D. text-decoration

Wybór atrybutów takich jak text-indent, text-transform czy text-align w kontekście formatowania tekstu poprzez przekreślenie, podkreślenie dolne lub górne jest błędny z kilku powodów. Atrybut text-indent jest używany do wcięcia pierwszego wiersza tekstu, co nie ma związku z dekoracjami tekstu. Jego zastosowanie koncentruje się na układzie tekstu w ramach kontenera, a nie na stylizacji samych słów. Z kolei text-transform służy do zmiany wielkości liter, co również nie wpływa na dekoracyjne efekty. Na przykład, jego użycie może sprawić, że tekst będzie pisany wielkimi literami, ale nie doda żadnych efektów dekoracyjnych. Natomiast text-align zarządza wyrównaniem tekstu w obrębie kontenera, co dotyczy rozmieszczenia, a nie dekoracji. Wybierając niewłaściwe atrybuty, można narazić projekt graficzny na nieczytelność oraz zmniejszyć dostępność treści. Dobrą praktyką jest stosowanie atrybutu text-decoration, gdyż jest on dedykowany do stylizacji dekoracyjnych i spełnia standardy CSS, co zapewnia lepszą kompatybilność z różnymi przeglądarkami oraz urządzeniami. Unikanie mylnych skojarzeń między dekoracją a zarządzaniem układem tekstu jest kluczowe dla efektywnego projektowania stron internetowych.

Pytanie 38

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

A. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

B. <img src="rys.jpg" height="120px" width="80px" info="krajobraz"/>

C. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

D. <img href="rys.jpg" height="120px" width="80px" info="krajobraz"/>

Odpowiedzi, które nie są zgodne z poprawnym zapisem znacznika <img>, wykazują kilka kluczowych błędów, które wpływają na ich nieprawidłowość. W pierwszej z błędnych odpowiedzi zamiast atrybutu 'src' użyto 'image', co jest błędem w kontekście HTML. 'src' jest standardowym atrybutem, który określa źródło obrazu, podczas gdy 'image' nie jest rozpoznawane przez przeglądarki i nie prowadzi do wyświetlenia żadnej grafiki. W drugiej odpowiedzi zamiast 'alt' zastosowano 'info', co również jest nieprawidłowe, ponieważ 'alt' jest kluczowym atrybutem, który zapewnia opis alternatywny obrazu, istotny dla dostępności. Ponadto, w obu przypadkach zostały błędnie zamienione wartości 'width' i 'height', co może prowadzić do nieproporcjonalnego wyświetlania obrazów, co z kolei negatywnie wpływa na estetykę i użyteczność strony. Warto również zaznaczyć, że jednostka 'px' w kontekście atrybutów rozmiaru nie jest wymagana w HTML5, więc nawet jeśli byłoby to zastosowane w poprawny sposób, nie jest to konieczne. Te nieporozumienia mogą wynikać z braku znajomości aktualnych standardów HTML, co może prowadzić do problemów z wyświetlaniem i dostępnością treści na stronach internetowych. Zastosowanie odpowiednich atrybutów oraz ich wartości jest kluczowe dla tworzenia stron internetowych zgodnych z aktualnymi standardami i praktykami, co w dłuższym okresie przekłada się na lepsze doświadczenia użytkowników.

Pytanie 39

Kolor zapisany w modelu RGB(255, 0, 0) to

A. niebieski

B. żółty

C. zielony

D. czerwony

Odpowiedź czerwona jest poprawna, ponieważ w modelu RGB kolor jest definiowany przez kombinację trzech podstawowych kolorów: czerwonego, zielonego i niebieskiego. Wartości w modelu RGB mieszczą się w zakresie od 0 do 255, gdzie 255 oznacza pełną intensywność danego koloru, a 0 brak intensywności. W przypadku RGB(255, 0, 0), maksymalna wartość oznacza, że kolor czerwony jest w pełni nasycony, podczas gdy wartości zielonej i niebieskiej są równe zeru, co skutkuje uzyskaniem czystego koloru czerwonego. W praktyce, model RGB jest powszechnie stosowany w technologii wyświetlania kolorów na ekranach komputerów, telewizorów oraz w grafice komputerowej. Zrozumienie modelu RGB jest kluczowe dla projektantów interfejsów użytkownika, grafików i specjalistów od marketingu wizualnego, którzy muszą umieć manipulować kolorami, aby osiągnąć zamierzony efekt wizualny lub brandingowy. Dobre praktyki w zakresie doboru kolorów obejmują uwzględnienie harmonii kolorystycznej oraz różnorodności percepcji kolorów przez różne osoby, co można osiągnąć poprzez testy A/B lub badania użytkowników.

Pytanie 40

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. B

B. rys. D

C. rys. C

D. rys. A

Odpowiedzi inne niż rys. C nie są poprawne z powodu błędnego zrozumienia jak działa atrybut rowspan w języku HTML. Gdy komórka tabeli posiada atrybut rowspan oznacza to że komórka ta rozciąga się pionowo na określoną liczbę wierszy. W przypadku braku zrozumienia tego mechanizmu można błędnie przypuszczać że każda komórka zaczyna się i kończy w obrębie jednego wiersza. Taki tok myślenia prowadzi do niepoprawnego rozmieszczenia elementów tabeli jak w rys. A lub D gdzie nie wzięto pod uwagę łączenia komórek w pionie. W odpowiedzi A pierwsza komórka nie obejmuje dwóch wierszy co jest sprzeczne z kodem. W odpowiedzi B z kolei drugi wiersz zawiera dwie komórki co również jest sprzeczne z kodem który definiuje tylko jedną. Takie błędy często wynikają z braku doświadczenia w używaniu zaawansowanych funkcji HTML co może prowadzić do mylnych wyobrażeń o tym jak kod przekłada się na widok strony. Atrybuty rowspan i colspan są kluczowe w kontekście strukturalnego podejścia do budowy stron internetowych i ich poprawne użycie ma istotne znaczenie dla dostępności oraz zrozumienia danych przez użytkowników i technologie wspomagające. Ważne jest także zrozumienie różnic między tworzeniem struktury a prezentacją co jest możliwe dzięki CSS zamiast nadużywania tabel do layoutów.

Rozpocznij nowy egzamin

Powrót do strony głównej