Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 22 kwietnia 2026 22:32
Data zakończenia: 22 kwietnia 2026 22:36

Egzamin niezdany

Wynik: 4/40 punktów (10,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

W CSS zastosowano regułę: float:left; dla bloku. Jakie będzie jej zastosowanie?

A. umieszczanie bloków jeden pod drugim

B. dopasowanie elementów tabeli do lewej krawędzi

C. ustawienie bloku na lewo względem innych

D. wyrównanie tekstu do lewej strony

Wybór odpowiedzi dotyczący wyrównania elementów tabeli do lewej strony jest błędny, ponieważ reguła 'float: left;' nie dotyczy bezpośrednio tabel ani ich elementów. Tabele mają swoje własne mechanizmy układowe, które są inne niż te, które kontroluje reguła float. W przypadku wyrównania tekstu do lewej strony, stosuje się regułę 'text-align: left;', która jest odpowiednia dla elementów blokowych, ale nie jest związana z 'float'. Ustawienie bloków jeden pod drugim również nie jest zgodne z działaniem float, ponieważ ta reguła nie prowadzi do takiego układu, lecz wręcz przeciwnie – float powoduje, że elementy są ustawiane obok siebie. Warto zauważyć, że float działa głównie w kontekście obszaru, w którym się znajduje, a jego zastosowanie wymaga ostrożności, by nie wprowadzać problemów z układami, co wielu początkujących web developerów nie dostrzega. Typowym błędem jest mylenie float z flexboxem, który jest bardziej intuicyjny i zapewnia lepszą kontrolę nad układem. Dlatego kluczowe jest zrozumienie, kiedy i w jaki sposób stosować float w kontekście układów CSS, aby unikać nieporozumień i problemów w realizacji projektów.

Pytanie 2

W języku JavaScript funkcja getElementById odnosi się do

A. elementu HTML z określoną nazwą klasy

B. elementu HTML z podanym id

C. klasy zdefiniowanej w CSS

D. zmiennej numerycznej

Metoda getElementById w języku JavaScript jest kluczowym narzędziem do manipulacji DOM (Document Object Model), które pozwala deweloperom na łatwe odwoływanie się do konkretnych elementów HTML za pomocą ich atrybutu id. Dzięki temu, możemy dynamicznie zmieniać treść, style lub atrybuty tych elementów, co jest niezwykle przydatne w tworzeniu interaktywnych stron internetowych. Na przykład, jeśli mamy element HTML z atrybutem id='header', możemy użyć `document.getElementById('header')` do uzyskania do niego dostępu. To podejście jest zgodne z zasadami poprawnej struktury HTML, gdzie atrybut id powinien być unikalny w obrębie dokumentu. Rekomendowane jest, aby id było zrozumiałe i jasno określało zawartość elementu, co ułatwia późniejszą nawigację i skrypty, a także poprawia dostępność strony. W praktyce, korzystając z getElementById, możemy na przykład zmieniać tekst nagłówka: `document.getElementById('header').innerText = 'Nowy nagłówek';`.

Pytanie 3

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

A. <meta background = blue>

B. <meta title = 'Strona dla hobbystów'>

C. <meta name = 'description' content = 'Masz jakieś hobby? To jest strona dla Ciebie!'>

D. <meta name = '!DOCTYPE'>

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

Pytanie 4

W kaskadowych arkuszach stylów do oznaczenia selektora klasy wykorzystuje się symbol

A. : (dwukropek)

B. . (kropka)

C. #

D. *

Odpowiedzi #, *, oraz : nie są poprawne w kontekście definicji selektorów klas w CSS. Symbol # jest używany do definiowania selektorów identyfikatorów, co oznacza, że w przypadku elementu z identyfikatorem 'element1', selektor w CSS będzie wyglądał tak: #element1. Identyfikatory są unikalne dla danego elementu w dokumencie i mogą być używane tylko raz, co sprawia, że są mniej elastyczne w porównaniu do klas. Użycie identyfikatorów jest często niezalecane, gdyż prowadzi do mniejszej reużywalności stylów. Z kolei symbol * jest selektorem uniwersalnym, który odnosi się do wszystkich elementów na stronie. Chociaż może być użyteczny w pewnych sytuacjach, jego nadużywanie może prowadzić do spadku wydajności, zwłaszcza w większych projektach, ponieważ styluje każdy element w dokumencie. Ostatni symbol : jest używany w pseudo-klasach i pseudo-elementach, takich jak :hover czy ::before, które pozwalają na stylizację elementów w specyficznych stanach lub na dodawanie stylów do części elementu. Pojęcia te są często mylone z klasami, co prowadzi do błędnych wniosków i nieefektywnego zarządzania stylem. Używanie właściwych selektorów jest kluczowe dla utrzymania dobrze zorganizowanego i wydajnego kodu CSS.

Pytanie 5

W języku HTML kolor biały można przedstawić przy użyciu wartości

A. rgb(255,255,255)

B. rgb(FFFF,FF)

C. #000000

D. #255255

Biały kolor w HTML zapisujemy jako rgb(255,255,255). W systemie RGB kolory tworzą się z trzech podstawowych barw: czerwonej, zielonej i niebieskiej. Każda z nich ma wartość od 0 do 255, więc maksymalna intensywność danego koloru to 255, a najniższa to 0. W przypadku białego koloru wszystkie trzy barwy są na maksa, stąd właśnie rgb(255,255,255) oznacza pełną moc czerwonego, zielonego i niebieskiego, co razem daje kolor biały. Wartości RGB są super ważne w CSS i w różnych programach do grafiki. Moim zdaniem, warto je znać, bo to podstawy przy robieniu stron internetowych. Warto też zwrócić uwagę na standardy W3C dotyczące kolorów w HTML, bo pomagają zadbać o estetykę i dostępność stron.

Pytanie 6

Aby strona internetowa była dostosowana do różnych urządzeń, należy między innymi określać

A. układ strony wyłącznie przy pomocy tabel

B. tylko znane fonty, takie jak Arial

C. wymiary obrazów w procentach

D. wymiary obrazów jedynie w pikselach

Różne podejścia do definiowania rozmiarów obrazów na stronach WWW mogą prowadzić do poważnych problemów z responsywnością. Używanie wyłącznie tabel do rozkładu strony to przestarzała metoda projektowania, która nie sprzyja elastyczności ani skalowalności layoutu. Tabele są statyczne i nie adaptują się do zmieniających się rozmiarów ekranów, co może powodować, że strona będzie wyglądać nieestetycznie na urządzeniach mobilnych. Z kolei definiowanie rozmiarów obrazów wyłącznie w pikselach ogranicza ich zdolność do dostosowywania się do różnych rozdzielczości. Przy stałych wartościach w pikselach obrazy mogą być zbyt małe na dużych ekranach lub zniekształcone na mniejszych urządzeniach, co negatywnie wpływa na użytkowanie. Ponadto, ograniczenie się do znanych czcionek, takich jak Arial, nie sprzyja różnorodności projektowej i może prowadzić do wizualnej monotonii strony. Współczesne praktyki projektowania zachęcają do korzystania z szerszej gamy czcionek oraz do technik takich jak @font-face, co pozwala na większą elastyczność estetyczną. Kluczowym błędem w myśleniu o responsywności jest brak zrozumienia, że wszystkie elementy strony powinny być traktowane w sposób dynamiczny i elastyczny, co jest podstawą nowoczesnego podejścia do tworzenia stron internetowych.

Pytanie 7

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. C.

C. B.

D. D.

Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 8

Jak można zmodyfikować nałożone na siebie fragmenty obrazu, nie zmieniając innych elementów?

A. Warstwy

B. Przycinanie

C. Kanał przezroczystości

D. Wykres histogramu

Kadrowanie obrazu polega na przycinaniu jego części, co negatywnie wpływa na elastyczność edycji. Gdy fragment obrazu zostanie wykadrowany, nie ma już możliwości jego modyfikacji, co jest dużym ograniczeniem, jeżeli chcemy edytować poszczególne elementy. Histogram odnosi się do analizy jasności oraz kolorystyki w obrazie, co nie ma bezpośredniego związku z edytowaniem nakładających się fragmentów obrazu. Histogram pozwala na dostosowanie tonacji i kontrastu, ale nie umożliwia precyzyjnej edycji konkretnych obszarów obrazu. Kanał alfa jest wykorzystywany do reprezentacji przezroczystości w grafice rastrowej, ale sam w sobie nie jest wystarczający do edytowania nakładających się obrazów. Choć kanał alfa może być pomocny w pracy z przezroczystościami, nie zastępuje funkcjonalności warstw, które pozwalają na pełną kontrolę nad poszczególnymi elementami obrazu. Typowe błędy myślowe prowadzące do takich niepoprawnych wniosków to mylenie różnych technik edycji oraz brak zrozumienia ich specyficznych zastosowań w praktyce graficznej. Właściwe podejście do edycji grafiki wymaga znajomości narzędzi i ich funkcji, a także umiejętności ich łączenia w celu osiągnięcia zamierzonych efektów wizualnych.

Pytanie 9

Która z poniższych zasad nie przyczyni się pozytywnie do poprawy czytelności kodu?

A. Nazwy zmiennych muszą odzwierciedlać ich funkcję

B. Kod powinien być napisany bez wcięć i zbędnych przejść do nowej linii

C. Należy dodawać komentarze w bardziej skomplikowanych fragmentach kodu

D. Każda linia kodu powinna zawierać jedynie jedną instrukcję

Sugerowanie, że kod powinien być napisany bez wcięć i zbędnych enterów prowadzi do poważnych problemów w zakresie czytelności i zrozumienia kodu. Zasady dotyczące dobrego formatowania kodu, w tym odpowiednie wcięcia, są fundamentem dobrej praktyki programistycznej. Bez wcięć, struktura kodu staje się chaotyczna, a jego logika trudna do śledzenia, co może prowadzić do błędów w obliczeniach lub nieprawidłowego działania programów. Ponadto, programiści często współpracują w zespołach, gdzie zrozumienie kodu przez innych członków zespołu jest kluczowe. Wprowadzenie wcięć oraz użycie zbędnych enterów do oddzielania funkcji czy bloków kodu zwiększa przejrzystość, co jest zgodne z najlepszymi praktykami, takimi jak Clean Code. Dobre nazewnictwo zmiennych i wprowadzanie komentarzy to ważne aspekty, ale nie wystarczą one do zapewnienia pełnej czytelności bez odpowiedniego formatowania. W praktyce, kod, który wygląda na chaotyczny i nieposortowany, może odstraszać innych programistów i prowadzić do błędów podczas dalszej pracy nad projektem. Dlatego należy unikać praktyk, które mogą podważać fundamenty czytelności kodu.

Pytanie 10

Jak powinna wyglądać prawidłowa, zgodna ze standardami języka HTML, forma samozamykającego się znacznika, który odpowiada za łamanie linii?

A. <br> </br>

B. </br>

C. <br/>

D. </ br>

Pierwsza z podanych odpowiedzi, </br>, jest błędna, ponieważ znacznik kończący nie powinien występować w kontekście samo-zamykających się znaczników. W HTML nie ma potrzeby używania tagu kończącego dla znacznika <br/>. Druga odpowiedź, <br> </br>, również jest niepoprawna, ponieważ pomimo że <br> jest poprawnym znacznikiem, jego użycie w połączeniu z dodatkowym znacznikiem końcowym nie ma sensu, jako że <br> nie wymaga zamknięcia. Tego rodzaju zapis prowadzi do niejasności w interpretacji dokumentu przez przeglądarki, a także może wpływać na wydajność renderowania strony. Ostatnia z odpowiedzi, </ br/>, jest błędna z dwóch powodów: po pierwsze, jest to niepoprawna składnia, a po drugie, ilustruje nieporozumienie dotyczące funkcji samo-zamykających się znaczników w HTML. W standardzie HTML nie stosuje się znaczników kończących dla elementów, które są zaprojektowane do samodzielnego zamykania. Rozumienie różnicy między tymi zapisami jest kluczowe dla programistów i projektantów stron, którzy dążą do tworzenia stron zgodnych z najlepszymi praktykami oraz standardami webowymi.

Pytanie 11

<form>
  <input type="email" id="addr" required>
  <input type="submit" value="Zapisz">
</form>

Na podstawie przedstawionego kodu formularza HTML można powiedzieć, że pole edycyjne:

A. może być puste.

B. nie może być puste i wymaga wpisania tekstu ze znakiem @.

C. nie powinno zawierać znaków numerycznych.

D. wymaga wpisania jedynie znaków alfanumerycznych.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym fragmencie kodu HTML masz dwa bardzo ważne atrybuty: type="email" oraz required. To właśnie one razem powodują, że poprawna jest odpowiedź, że pole nie może być puste i wymaga wpisania tekstu ze znakiem @. Atrybut required oznacza, że pole jest obowiązkowe. Przeglądarka, zgodnie ze specyfikacją HTML5, nie pozwoli wysłać formularza, dopóki pole nie będzie wypełnione. Użytkownik kliknie przycisk „Zapisz”, a formularz po prostu się nie wyśle – pojawi się komunikat walidacyjny po stronie przeglądarki. To jest tzw. walidacja po stronie klienta, domyślnie wbudowana w HTML. Z kolei type="email" uruchamia specjalny mechanizm sprawdzania formatu wpisanego tekstu. Przeglądarka sprawdza, czy ciąg znaków wygląda jak adres e‑mail: musi zawierać co najmniej znak @ i jakąś część przed i po nim. To nie jest super zaawansowana walidacja, ale wystarcza jako pierwszy filtr, np. "[email protected]" przejdzie, a "jan.domena.pl" już nie. Moim zdaniem to bardzo wygodne, bo nie trzeba od razu pisać własnego JavaScriptu tylko po to, żeby odsiać oczywiste błędy. W praktyce w aplikacjach webowych zwykle łączy się tę prostą walidację HTML5 z dodatkowymi sprawdzeniami po stronie serwera (np. w PHP czy w innym backendzie), bo dane z formularza zawsze trzeba traktować z ograniczonym zaufaniem. Dobrym nawykiem jest też dodanie atrybutu name, np. name="email", żeby serwer mógł poprawnie odebrać wartość pola. Warto też wiedzieć, że niektóre przeglądarki mobilne, gdy widzą type="email", podpowiadają użytkownikowi specjalną klawiaturę z łatwym dostępem do znaku @ i kropki, co realnie poprawia wygodę wpisywania adresu. To taki mały szczegół, ale w profesjonalnych projektach UX ma znaczenie. Podsumowując: required blokuje puste wysłanie formularza, a type="email" wymusza poprawny, podstawowy format adresu ze znakiem @ – dokładnie to opisuje poprawna odpowiedź.

Pytanie 12

Która z zasad walidacji strony internetowej jest nieprawidłowa?

A. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.

B. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```

C. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```

D. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź dotycząca kolejności atrybutów w znacznikach HTML jest poprawna, ponieważ nie ma wymogu, aby atrybuty w znacznikach były uporządkowane alfabetycznie. W rzeczywistości, HTML pozwala na dowolną kolejność atrybutów, co czyni tę regułę błędną. Przykładowo, znacznik <img src="/path/to/image.jpg" alt="Opis obrazu" /> jest poprawny niezależnie od kolejności atrybutów. Ważne jest, aby atrybuty były odpowiednio używane w kontekście ich przeznaczenia, a nie w kontekście kolejności alfabetycznej. Dobrą praktyką jest również stosowanie atrybutów w sposób, który zwiększa czytelność kodu, jednak nie jest to wymóg techniczny. Zgodnie z zaleceniami W3C, kluczowym aspektem jest poprawność semantyczna i zgodność ze standardami, a nie kolejność atrybutów.

Pytanie 13

W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie zastosowany

A. dla każdego odnośnika bez względu na jego aktualny stan

B. odnośnikowi, gdy kursor myszy na nim spocznie

C. dla wszystkich nieodwiedzonych odnośników

D. dla wszystkich odwiedzonych odnośników

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa hover w CSS jest stosowana do definiowania stylu elementu, gdy użytkownik umieszcza nad nim kursor myszy. W kontekście odnośników, stosowanie pseudoklasy hover pozwala na dynamiczne dostosowywanie ich wyglądu, co jest kluczowe dla poprawy interaktywności i użyteczności stron internetowych. W przykładzie a:hover { font-weight: bold; } styl pogrubiony zostanie zastosowany do odnośnika, gdy użytkownik najedzie na niego kursorem myszy. Jest to częsta praktyka w projektowaniu stron, która pomaga użytkownikom łatwiej identyfikować aktywne elementy nawigacyjne. Standardy sieciowe, takie jak W3C, rekomendują stosowanie takich interakcji w celu poprawy doświadczenia użytkownika. Praktyczne zastosowanie pseudoklasy hover jest szerokie, od prostych efektów wizualnych, po skomplikowane animacje i przejścia. Ważne jest jednak, aby pamiętać o zapewnieniu alternatywnych metod interakcji dla użytkowników korzystających z urządzeń dotykowych, gdzie hover nie jest obsługiwany. Zrozumienie i właściwe stosowanie pseudoklas w CSS jest podstawą tworzenia nowoczesnych i dostępnych interfejsów użytkownika.

Pytanie 14

Znaczniki HTML <strong> oraz <em> używane do wyróżniania istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. ```<i>``` oraz ```<mark>```

B. ```<b>``` oraz ```<u>```

C. ```<u>``` oraz ```<sup>```

D. ```<b>``` oraz ```<i>```

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki HTML <strong> oraz <em> są używane do podkreślenia ważności tekstu, przy czym <strong> wskazuje na silniejsze akcentowanie, a <em> na akcentowanie mniej intensywne, pełniące rolę stylizacji typograficznej. W kontekście formatowania, ich odpowiednikami są znaczniki <b> oraz <i>. Oznacznik <b> wprowadza tekst w pogrubieniu, co sygnalizuje jego ważność, ale nie ma semantycznego znaczenia, podczas gdy <i> oznacza kursywę, która jest często używana do podkreślenia tytułów, obcojęzycznych wyrazów czy terminów technicznych. W praktyce, użycie <strong> i <em> jest zgodne z zasadami semantycznego HTML, które mają na celu zrozumienie treści przez maszyny oraz poprawę dostępności, co ma fundamentalne znaczenie w projektowaniu stron internetowych. Warto także pamiętać, że stosowanie semantycznych znaczników wpływa na SEO, umożliwiając lepsze indeksowanie treści przez wyszukiwarki, a także poprawia doświadczenia osób korzystających z technologii asystujących. Przykładowo, użycie <strong> w nagłówkach lub kluczowych informacjach na stronie pozwala na lepsze zrozumienie struktury treści przez użytkowników oraz boty wyszukiwarek.

Pytanie 15

W języku CSS zapis

h2 {background-color: green;}

spowoduje, że kolor zielony będzie dotyczył:

A. tła tekstu nagłówka drugiego stopnia

B. czcionki każdego nagłówka na stronie

C. czcionki nagłówka drugiego stopnia

D. tła całej strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że kolor zielony będzie dotyczył tła tekstu nagłówka drugiego stopnia, jest poprawna. W kodzie CSS, zapis <b>h2 {background-color: green;}</b> oznacza, że wszystkie elementy <h2> na stronie będą miały tło w kolorze zielonym. W praktyce oznacza to, że każdy nagłówek drugiego stopnia będzie miał zielone tło, co może być użyteczne do wyróżnienia sekcji na stronie. Warto zauważyć, że stylowanie tła nagłówków może poprawić czytelność i estetykę dokumentu, zwłaszcza w sytuacjach, gdy chcemy podkreślić różne sekcje treści. Dobrą praktyką w CSS jest także używanie klas i identyfikatorów do bardziej precyzyjnego stylowania, co pozwala na unikanie konfliktów z innymi stylami na stronie. Dodatkowo, można eksperymentować z różnymi kolorami i przezroczystościami, aby uzyskać unikalne efekty wizualne, co jest szczególnie ważne w nowoczesnym projektowaniu stron internetowych.

Pytanie 16

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. 31 - 36 fps

C. 20 - 23 fps

D. 24 - 30 fps

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 17

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Która część kodu HTML odnosi się do pierwszego wiersza tabeli?

A. B

B. A

C. C

D. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź D jest prawidłowa, ponieważ używa znaczników <th> do zdefiniowania nagłówków kolumn w tabeli. Znaczniki <th> są używane w tabelach HTML do określania komórek nagłówkowych, które domyślnie są pogrubione i wyśrodkowane. Taki format jest zgodny z zasadami dostępności i użyteczności, ponieważ przeglądarki i czytniki ekranowe traktują <th> jako nagłówki, co poprawia zrozumienie struktury tabeli przez użytkowników. Znaczniki <b> w <th> dodatkowo stylizują tekst, co jest zgodne z przedstawionym obrazem. Używanie odpowiednich znaczników semantycznych to dobra praktyka, która zwiększa czytelność kodu i wspiera dostępność. W kontekście praktycznym, poprawne użycie <th> umożliwia lepsze formatowanie i interpretację danych w tabeli podczas renderowania w przeglądarkach, a także wspiera responsywne projektowanie, gdzie układ tabeli automatycznie dostosowuje się do różnych rozmiarów ekranów. Dlatego korzystanie z <th> do definiowania pierwszego wiersza jako nagłówka jest zgodne z najlepszymi praktykami projektowania stron internetowych.

Pytanie 18

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym tekst jest maskowany (zastąpiony kropeczkami), należy zastosować znacznik

A. <form input type="password" />

B. <input name="password" />

C. <input type="password" />

D. <form="password" type="password" />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby utworzyć pole edycyjne do wpisywania hasła w HTML, należy użyć znacznika <input> z atrybutem type ustawionym na 'password'. Taki typ pola edycyjnego zapewnia, że wprowadzany tekst jest maskowany, co w praktyce oznacza, że jest on wyświetlany jako kropki lub gwiazdki, co znacząco podnosi poziom bezpieczeństwa. Stosując <input type='password' />, zalecane jest również dodanie atrybutu name, co ułatwi przesyłanie danych na serwer. Warto zwrócić uwagę, że zgodnie z tym, co definiuje specyfikacja HTML5, pole to jest standardowo obsługiwane przez wszystkie nowoczesne przeglądarki. Przykład użycia: <input type='password' name='user_password' placeholder='Wpisz swoje hasło' />. Ponadto, dobrym praktyką jest stosowanie odpowiednich mechanizmów walidacji po stronie serwera, aby upewnić się, że dane przesyłane z formularzy są bezpieczne i chronione przed nieautoryzowanym dostępem. Maskowanie hasła w polach edycyjnych jest kluczowym elementem ochrony danych użytkowników w aplikacjach internetowych oraz stronach, które wymagają logowania.

Pytanie 19

Weryfikację kompletności formularza, działającą po stronie przeglądarki, należy zrealizować w języku

A. JavaScript

B. PHP

C. CSS

D. Ruby on Rails

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to JavaScript, bo właśnie ten język działa bezpośrednio w przeglądarce użytkownika i pozwala na dynamiczną weryfikację formularzy jeszcze przed wysłaniem danych na serwer. JavaScript ma dostęp do drzewa DOM, więc może odczytać wartości pól, sprawdzić, czy nie są puste, czy e‑mail ma poprawny format, czy hasło ma odpowiednią długość, a nawet czy dwa pola hasła są identyczne. Z mojego doświadczenia to jest absolutny standard w nowoczesnych aplikacjach webowych: najpierw lekka walidacja po stronie klienta w JS, a dopiero potem solidna walidacja po stronie serwera. Dobrym przykładem jest formularz rejestracji: po wpisaniu zbyt krótkiego hasła JavaScript może od razu wyświetlić komunikat pod polem, bez przeładowania strony. Można też blokować przycisk „Wyślij”, dopóki wszystkie wymagane pola nie są poprawnie wypełnione. W praktyce często używa się zdarzeń takich jak onsubmit na formularzu albo input/blur na polach, żeby na bieżąco sprawdzać dane. Można też korzystać z gotowych bibliotek walidacyjnych, ale pod spodem i tak pracuje JavaScript. W dobrych praktykach przyjmuje się zasadę: walidacja po stronie klienta poprawia wygodę i szybkość obsługi (user experience), ale nie zastępuje walidacji po stronie serwera. JavaScript służy więc do „pierwszej linii obrony” i podpowiedzi użytkownikowi, a serwer (np. w PHP czy innym języku backendowym) musi i tak wszystko jeszcze raz sprawdzić ze względów bezpieczeństwa. Warto też pamiętać o wykorzystaniu wbudowanych mechanizmów HTML5 (atrybuty required, type="email" itd.), ale to JavaScript daje pełną kontrolę nad logiką i komunikatami błędów, bo pozwala tworzyć własne reguły i reagować na konkretne zachowania użytkownika.

Pytanie 20

W języku HTML zapis < spowoduje w przeglądarki wyświetlenie znaku

A. <

B. "

C. >

D. &

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znak < w HTML ma specjalne znaczenie, ponieważ jest używany do oznaczania początku znaczników, które są fundamentem struktury dokumentów HTML. Aby prawidłowo wyświetlić ten znak w przeglądarce, należy użyć encji HTML, która dla znaku mniejszości to <. Użycie encji pozwala na uniknięcie nieporozumień, ponieważ przeglądarka mogłaby zinterpretować znak < jako początek nowego znacznika. Przykładowo, aby wyświetlić tekst 'A < B' w HTML, kod powinien wyglądać następująco: A < B. Zgodnie z dokumentacją W3C, stosowanie encji jest kluczowe dla zachowania poprawności kodu. Dzięki temu użytkownicy mogą zobaczyć zamierzony tekst, zamiast nieprawidłowo interpretowanego oznaczenia. Warto również zauważyć, że istnieją inne encje, takie jak > dla znaku większości oraz & dla znaku ampersand, które również pełnią istotne funkcje w kontekście HTML. Poprawne użycie encji przyczynia się do lepszej dostępności i zobrazowania treści na stronach internetowych."

Pytanie 21

W JavaScript metoda getElementById odnosi się do

A. znacznika HTML o podanej nazwie klasy

B. znacznika HTML o wskazanym id

C. zmiennej numerycznej

D. klasy zdefiniowanej w CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementById w JavaScript jest kluczowym narzędziem do interakcji z modelowaniem DOM (Document Object Model). Służy do uzyskiwania dostępu do pojedynczego elementu HTML na podstawie jego atrybutu id, co jest zgodne z zasadą unikalności identyfikatorów w dokumencie HTML. Dzięki temu programiści mogą stosunkowo łatwo manipulować pojedynczymi elementami, co jest istotne w dynamicznych aplikacjach internetowych. Przykładem zastosowania tej metody może być zmiana tekstu w elemencie <h1>, gdzie używamy getElementById('myHeader').innerHTML = 'Nowy nagłówek';. Zgodnie z dobrymi praktykami, powinno się unikać używania zduplikowanych id w dokumencie, aby zapewnić, że metoda ta zawsze zwraca jeden, a nie wiele elementów. Warto również pamiętać, że w przypadku braku elementu o podanym id, metoda zwróci null, co powinno być uwzględnione w logice aplikacji, aby uniknąć błędów. Użycie tej metody jest standardem w programowaniu JavaScript i stanowi fundament dla wielu bardziej zaawansowanych technik manipulacji DOM.

Pytanie 22

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #251022

B. #FF0A16

C. #FF1016

D. #2551022

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #FF0A16 jest poprawna, ponieważ kod RGB (255, 10, 22) jest konwertowany na format heksadecymalny, gdzie każdy z trzech kanałów (czerwony, zielony, niebieski) jest przedstawiany przez dwie cyfry szesnastkowe. W kodzie RGB wartość 255 dla kanału czerwonego odpowiada szesnastkowej wartości FF, wartość 10 dla kanału zielonego odpowiada wartości 0A, a wartość 22 dla kanału niebieskiego odpowiada wartości 16. Łącząc te wartości, otrzymujemy #FF0A16. Praktyczne zastosowania kodów kolorów w formacie heksadecymalnym są powszechne w projektowaniu stron internetowych oraz grafice komputerowej, gdzie umożliwiają precyzyjne definiowanie kolorów. Warto również pamiętać, że standard W3C zaleca używanie formatu heksadecymalnego w CSS, co czyni go bardziej efektywnym dla deweloperów. Ponadto, znajomość konwersji kolorów RGB na heksadecymalny jest kluczowa dla każdego, kto zajmuje się designem i programowaniem wizualnych interfejsów użytkownika.

Pytanie 23

Według zasad walidacji HTML5, jakie jest prawidłowe użycie znacznika hr?

A. </ hr />

B. </ hr>

C. </hr?>

D. <hr>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <hr> to taki prosty element w HTML5, który robi poziomą linię na stronie. Używa się go często do oddzielania różnych sekcji w tekście, co sprawia, że wszystko wygląda bardziej przejrzyście. Co ciekawe, to znacznik samodzielny, więc nie potrzebuje zamknięcia, a dodatkowo w HTML5 nie musimy dodawać znaku '/' na końcu, co czyni go lżejszym w użyciu. Jak użyjemy <hr>, to przeglądarki wiedzą, co z tym zrobić, a to ważne, żeby strona wyglądała spójnie. Moim zdaniem, świetnie działa w artykułach, bo gdy oddziela różne części, to czytelnik łatwiej się w tym odnajduje. No i nie zapominajmy o dostępności – ludzie, którzy korzystają z technologii wspomagających, też lepiej zrozumieją, co się dzieje na stronie dzięki takim znacznikom.

Pytanie 24

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 25

Rozmiary ekranu w formacie 16:9 (zakładając, że piksel jest kwadratem) można osiągnąć przy rozdzielczości

A. 800 na 480 pikseli

B. 2560 na 2048 pikseli

C. 320 na 240 pikseli

D. 1366 na 768 pikseli

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 1366 na 768 pikseli jest poprawna, ponieważ proporcja szerokości do wysokości wynosi dokładnie 16:9. Aby to obliczyć, dzielimy szerokość przez wysokość: 1366 / 768 = 1,78, co jest bliskie wartości 1,77 (16:9). Proporcje 16:9 stały się standardem w telewizji wysokiej rozdzielczości oraz w produkcji wideo, co oznacza, że są szeroko stosowane w przemysłach związanych z mediami i technologią. Przykładem zastosowania tej rozdzielczości może być wyświetlanie filmów na nowoczesnych telewizorach, gdzie forma obrazu 16:9 pozwala na pełne wykorzystanie ekranu bez czarnych pasków po bokach. Stosując to w projektach multimedialnych, warto zawsze dążyć do zgodności z tymi standardami, aby zapewnić optymalne wrażenia wizualne dla użytkowników. Zrozumienie tych proporcji jest kluczowe dla profesjonalistów zajmujących się grafiką, filmem i projektowaniem UX/UI.

Pytanie 26

W CSS zapis w postaci ```h1::first-letter{color:red;}``` spowoduje, że kolor czerwony będzie dotyczył

A. tekstów nagłówka pierwszego poziomu

B. pierwszej litery nagłówka drugiego poziomu

C. pierwszej litery nagłówka pierwszego poziomu

D. pierwszej linii akapitu

Brak odpowiedzi na to pytanie.

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

Pytanie 27

Jakie jest właściwe określenie stylu CSS dla przycisku typu submit z czarnym tłem, bez ramki oraz z marginesami wewnętrznymi równymi 5 px?

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

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

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

input=submit {
    background-color: #000000;
    border: 0px;
    margin: 5px;
} D

A. B

B. D

C. C

D. A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź A jest na pewno właściwa, bo definiuje styl CSS dla przycisku input o typie submit. Ustawienie background-color na #000000 to kluczowa sprawa, bo w pytaniu wymagano czarnego tła. Dodatkowo użycie selektora input[type=submit] jest naprawdę dobrym pomysłem, bo precyzyjnie wskazuje ten konkretny element formularza. Warto też zauważyć, że border: none; usuwa obramowanie, co zgadza się z wymaganiami. Padding: 5px; dodaje trochę miejsca wewnątrz przycisku, więc tekst nie przylega do krawędzi. Stylowanie przycisków typu submit jest istotne w projektowaniu, bo wpływa na estetykę i funkcjonalność. Nie zapominaj, że CSS daje możliwość naprawdę fajnego dostosowywania wyglądu, co pozwala na stworzenie atrakcyjnych i łatwych w obsłudze elementów. Dobrze jest stosować selektory z wysoką specyficznością i unikać przesadnego używania !important, bo to może skomplikować sprawy związane z kaskadą stylów. Na przykład zmienne CSS mogą pomóc uporządkować kolory w większych projektach, co jest przydatne.

Pytanie 28

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

A. <p href="/akapit">akapit3</p>

B. <p class="akapit">akapit4</p>

C. <p id="akapit">akapit2</p>

D. <p>akapit</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementsByClassName('akapit') w JavaScript jest metodą DOM, która zwraca kolekcję wszystkich elementów w dokumencie HTML, które mają przypisaną określoną klasę. W tym przypadku interesuje nas klasa 'akapit'. Poprawna odpowiedź to <p class="akapit">akapit4</p>, ponieważ ten akapit ma atrybut class ustawiony na 'akapit'. Zastosowanie klasy w HTML jest zgodne z najlepszymi praktykami programistycznymi, ponieważ pozwala na łatwe stylowanie i manipulowanie grupą elementów za pomocą CSS i JavaScript. Na przykład, jeśli chcemy zmienić kolor tekstu wszystkich akapitów z klasą 'akapit', możemy to zrobić jednym poleceniem w CSS: .akapit { color: red; }. Ponadto, metoda getElementsByClassName zwraca tzw. HTMLCollection, co oznacza, że możemy iterować po tej kolekcji i modyfikować jej elementy. Użycie klas w ten sposób wspiera zasadę separacji treści od prezentacji, co jest kluczowe w nowoczesnym podejściu do tworzenia stron internetowych.

Pytanie 29

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

A. balance="-10"

B. loop="10"

C. volume="-100"

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 30

Podaj definicję metody, którą trzeba umieścić w miejscu kropek, aby na stronie WWW pojawił się tekst: Jan Kowalski

A. B

B. A

C. D

D. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź A jest prawidłowa, ponieważ metoda osoba.dane jest zdefiniowana jako funkcja wewnątrz obiektu osoba, co pozwala na użycie słowa kluczowego this, aby odwołać się do właściwości obiektu. W JavaScript this w kontekście metody obiektu odnosi się do samego obiektu, zatem this.imie i this.nazwisko poprawnie odwołują się do właściwości imie i nazwisko obiektu osoba. Dzięki temu funkcja zwraca ciąg tekstowy Jan Kowalski, który zostaje przypisany do innerHTML elementu o id wynik. Zastosowanie this jest zgodne z dobrymi praktykami programowania obiektowego w JavaScript, ponieważ umożliwia dynamiczne odwoływanie się do właściwości obiektu w kontekście tej samej instancji. Praktyczne zastosowanie tej metody pozwala na efektywne zarządzanie danymi w obrębie złożonych aplikacji webowych, gdzie obiekty mogą mieć wiele właściwości i metod. Kluczowym aspektem jest zrozumienie, że w JavaScript this jest dynamicznie wiązane w zależności od kontekstu wywołania, co jest szczególnie ważne przy pracy z metodami i konstruktorami obiektów.

Pytanie 31

W instrukcjach, których celem jest odtwarzanie dźwięku na stronie internetowej jako tła muzycznego, nie stosuje się atrybutu

A. volume="-100"

B. balance="10"

C. loop="10"

D. href="c:/100.wav"

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut href w kontekście dźwięku na stronie internetowej jest używany w tagu <audio> lub <source>, aby wskazać lokalizację pliku audio. Pliki dźwiękowe, które mają być odtwarzane w przeglądarkach, powinny być dostępne pod adresem URL, a nie w lokalnym systemie plików, jak w przypadku href='c:/100.wav'. Standardy W3C oraz HTML5 określają, że pliki audio powinny być dostępne przez HTTP lub HTTPS, co pozwala na ich odtwarzanie zdalnie. Jeśli plik audio znajduje się na lokalnym dysku, nie będzie on dostępny dla użytkowników odwiedzających stronę poprzez Internet. Przykładem poprawnego użycia atrybutu href jest wskazanie pliku dźwiękowego, który jest hostowany na serwerze, na przykład href='http://example.com/audio/track1.mp3'. Ponadto, do kontrolowania odtwarzania dźwięku można wykorzystać inne atrybuty jak autoplay, loop, czy controls, które pozwalają na lepsze zarządzanie interakcją użytkownika z muzyką na stronie.

Pytanie 32

Formatowanie CSS dla akapitu określa styl szarej ramki z następującymi właściwościami:

p {
    padding: 15px;
    border: 2px dotted gray;
}

A. Linia ciągła; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px

B. Linia kropkowa; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px

C. Linia ciągła; grubość 2 px; odległości poza ramką 15 px

D. Linia kreskowa; grubość 2 px; odległości poza ramką 15 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź ta jest prawidłowa, ponieważ w CSS stylizowanie elementu akapitu za pomocą podanego kodu definiuje ramkę o linii kropkowej, grubości 2 pikseli oraz paddingu wynoszącym 15 pikseli. Padding to przestrzeń wewnętrzna pomiędzy zawartością elementu a jego ramką, co oznacza, że tekst w akapicie będzie oddalony od krawędzi ramki o 15 pikseli. Styl ramki 'dotted' jest często używany w projektach webowych, aby stworzyć efekt wizualny, który jest mniej formalny, a zarazem estetyczny. Można go wykorzystać w kontekście wyróżniania ważnych informacji lub sekcji strony, co zwiększa czytelność i przyciąga uwagę użytkowników. Przykładem zastosowania może być sekcja z informacjami o promocjach, gdzie forma wizualna ma na celu przyciągnięcie wzroku. Używając standardów CSS, dobrego podejścia do UX (User Experience) oraz wytycznych W3C, projektanci stron internetowych mogą efektywnie komunikować intencje i priorytety poprzez stylowanie wizualne.

Pytanie 33

Który semantyczny znacznik języka HTML 5 może wystąpić tylko raz na stronie?

A. <main>

B. <article>

C. <section>

D. <header>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <main>, bo zgodnie ze specyfikacją HTML5 ten znacznik powinien pojawić się w dokumencie najwyżej raz. Element <main> reprezentuje główną, unikalną treść strony, czyli to, co jest najważniejsze dla konkretnego adresu URL. Przeglądarki, czytniki ekranu i inne narzędzia asystujące zakładają, że istnieje jedno główne miejsce, do którego użytkownik może szybko „przeskoczyć”, omijając nagłówek, menu czy stopkę. Dlatego pojedynczy <main> ma duże znaczenie dla dostępności (a11y) i użyteczności serwisu. W praktyce dobrym wzorcem jest struktura: <header> na górę, poniżej <nav> (jeśli jest), potem jeden <main>, a w nim np. <article>, <section>, <aside>, a na końcu <footer>. Wewnątrz <main> możesz mieć kilka artykułów, sekcji, nawet różne widoki aplikacji SPA, ale sam <main> jest tylko jeden. Moim zdaniem warto od początku wyrabiać sobie nawyk: dokładnie jeden <main> na stronę i absolutnie nie zagnieżdżać go wewnątrz <header>, <footer> czy <article>. To jest też zgodne z dobrymi praktykami SEO – wyszukiwarki łatwiej rozumieją, co jest esencją danej podstrony. Dodatkowo, wiele frameworków front‑endowych i systemów CMS zakłada w layoutach pojedynczy kontener na treść główną, który semantycznie powinien być właśnie <main>, a nie np. zwykłym <div id="content">. Taka semantyka sprawia, że kod wygląda czyściej, jest bardziej przyszłościowy i po prostu profesjonalny.

Pytanie 34

Aby zdefiniować stylizację tabeli w języku CSS w sposób, który umożliwi wyróżnienie wiersza, na który aktualnie najeżdża kursor myszy np. innym kolorem, należy użyć

A. nowego selektora klasy dla wiersza tabeli

B. pseudoelementu :first-line

C. pseudoklasy :hover

D. pseudoklasy :visited

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa :hover jest techniką CSS, która pozwala na zastosowanie stylów do elementu, gdy użytkownik na niego najedzie kursorem myszy. Dzięki temu można w prosty sposób wyróżnić wiersze tabeli, co zwiększa interaktywność i czytelność danych. W przypadku tabeli, aby wyróżnić aktualnie wskazywany wiersz, należy użyć reguły CSS, która odnosi się do elementu <tr> (wiersza tabeli) z zastosowaniem pseudoklasy :hover. Przykładowy kod CSS może wyglądać następująco: table tr:hover { background-color: #f0f0f0; } co spowoduje, że tło wiersza zmieni się na jasno szare, gdy kursor myszy znajdzie się nad tym wierszem. Taki sposób formatowania jest szczególnie przydatny w przypadku długich tabel, które mogą być trudne do przeglądania. Pseudoklasa :hover jest powszechnie stosowana w projektowaniu stron internetowych, w zgodności z W3C CSS Specification, co zapewnia jej szeroką kompatybilność z różnymi przeglądarkami. Warto także zauważyć, że można łączyć pseudoklasę :hover z innymi selektorami, aby uzyskać bardziej zaawansowane efekty wizualne.

Pytanie 35

W HTML atrybut znacznika video, który umożliwia ciągłe odtwarzanie, to

A. controls

B. loop

C. poster

D. muted

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut loop w znaczniku video jest kluczowy dla zapewnienia, że wideo będzie odtwarzane w nieskończoność, co jest szczególnie przydatne w przypadku prezentacji multimedialnych czy tła w aplikacjach webowych. Umożliwia to automatyczne powtarzanie treści bez interwencji użytkownika, co może poprawić doświadczenia użytkownika oraz skuteczność przekazu. Zgodnie z dokumentacją HTML5, aby użyć atrybutu loop, wystarczy dodać go do znacznika video, co pozwala na osiągnięcie zamierzonego efektu. Przykładem może być: <video src='video.mp4' loop autoplay></video>, gdzie wideo będzie się odtwarzać automatycznie i w kółko. Użycie tego atrybutu jest szczególnie istotne w kontekście interaktywnych aplikacji i gier, gdzie ciągłość odtwarzania może być kluczowa dla zaangażowania odbiorcy. Atrybut loop jest częścią specyfikacji W3C dotyczącej HTML5, która promuje dostępność i elastyczność w tworzeniu nowoczesnych aplikacji internetowych.

Pytanie 36

W języku HTML zdefiniowano znacznik a oraz atrybut rel nofollow.

A. oznacza, że kliknięcie w link otworzy go w nowej karcie przeglądarki

B. jest poleceniem dla przeglądarki internetowej, aby nie traktowała słowa "link" jako hiperłącza

C. jest wskazówką dla robota wyszukiwarki Google, aby nie śledził tego linku

D. oznacza, że kliknięcie w link nie przekieruje na stronę website.com

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut rel z wartością nofollow w znaczniku a w języku HTML jest kluczowym narzędziem w obszarze SEO i zarządzania linkami na stronach internetowych. Jego głównym celem jest wskazanie robotom wyszukiwarek, że nie powinny one śledzić danego linku ani przekazywać mu wartości PageRank, co jest ważnym czynnikiem w rankingach wyszukiwarek. Zastosowanie nofollow jest powszechne w kontekście linków zewnętrznych, aby zapobiec ewentualnym nadużyciom, takim jak spam czy niechciane linki. Przykładowo, jeśli strona internetowa prowadzi do innej witryny, której treść nie jest w pełni zaufana, dodanie atrybutu nofollow zabezpiecza nas przed negatywnym wpływem na naszą własną reputację w oczach wyszukiwarek. Warto także zauważyć, że nofollow nie uniemożliwia użytkownikom kliknięcia w link, a jedynie informuje roboty wyszukiwarek o braku konieczności śledzenia tego linku. Taki mechanizm wpływa na algorytmy indeksowania, co może przyczynić się do lepszej kontroli nad tym, jakie źródła są promowane przez daną stronę.

Pytanie 37

W formularzu umieszczono kontrolki do podania imienia oraz nazwiska. Który z atrybutów odpowiada za wyświetlanie sugestii w polu kontrolki, która znika, gdy użytkownik zaczyna wpisywanie wartości?

<label for="imie">Imię: </label> 
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label> 
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">

A. placeholder

B. value

C. title

D. for

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut "placeholder" jest kluczowym elementem w formularzach HTML, który definiuje tekst podpowiedzi umieszczony w polu kontrolki. Tekst ten zniknie, gdy użytkownik zacznie wpisywać dane, co pozwala na zapewnienie bardziej intuicyjnego interfejsu. W przypadku przykładowego formularza, atrybut "placeholder" jest użyty w polu nazwiska, co stanowi doskonały przykład jego praktycznego zastosowania. Dobrą praktyką jest stosowanie atrybutu "placeholder" w formularzach, ponieważ wprowadza on klarowność i ułatwia użytkownikom wypełnianie formularzy, jednocześnie zmniejszając ryzyko błędów. Atrybut ten nie tylko poprawia doświadczenia użytkownika, ale także zwiększa dostępność formularzy, ponieważ pozwala osobom korzystającym z czytników ekranu lepiej zrozumieć, jakie dane są wymagane. Warto również zauważyć, że "placeholder" nie powinien być używany jako substytut etykiety, która jest niezbędna do poprawnej dostępności i użyteczności. Etykiety powinny być zawsze stosowane, a "placeholder" powinien pełnić jedynie funkcję pomocniczą.

Pytanie 38

Który z poniższych formatów nie umożliwia zapisu plików animowanych?

A. SWF

B. SVG

C. ACE

D. GIF

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format ACE, czyli ACompressor, jest formatem archiwizacji, który nie obsługuje animacji. Jego głównym celem jest kompresowanie i archiwizowanie danych, co sprawia, że nie jest zaprojektowany do przechowywania animacji w formie graficznej. W przeciwieństwie do formatów takich jak GIF, SWF, czy SVG, które są używane do tworzenia animowanych obrazów, ACE nie ma odpowiednich struktur ani standardów do reprezentacji ruchu czy zmieniających się scen. Przykładowo, GIF jest popularnym formatem, który pozwala na tworzenie prostych animacji przez wielokrotne odtwarzanie serii statycznych obrazów. SWF jest natomiast formatem stworzonym przez Adobe, który umożliwia interaktywność oraz animacje w aplikacjach internetowych. SVG, z kolei, jest formatem wektorowym, który obsługuje animacje za pomocą JavaScript i CSS. Przykładem użycia ACE może być archiwizacja plików tekstowych lub binarnych na dyskach twardych, co czyni go narzędziem do zarządzania danymi, a nie do tworzenia animacji.

Pytanie 39

Który z wymienionych formatów wideo nie jest wspierany przez standard HTML5?

A. D. WebM

B. A. AVI

C. B. Ogg

D. C. MP4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź A. AVI jest trafna, bo format AVI (Audio Video Interleave) nie jest wspierany przez HTML5. W HTML5 mamy trzy główne formaty wideo, które przeglądarki akceptują: Ogg, MP4 i WebM. AVI to starszy format od Microsoftu, który nie spełnia dzisiejszych standardów. Warto używać formatów, które pasują do HTML5, takich jak MP4 (z kodekiem H.264) czy WebM (z kodekiem VP8), bo to zapewnia lepszą wydajność i szeroką kompatybilność z różnymi urządzeniami i przeglądarkami. Na przykład, kiedy osadzamy filmy na stronach, ważne jest, żeby wszystko działało płynnie na różnych platformach, bez potrzeby dodatkowych wtyczek. Dodatkowo, korzystanie z tych formatów wspiera SEO i poprawia wrażenia użytkowników, co w dzisiejszym cyfrowym świecie jest naprawdę istotne.

Pytanie 40

Który fragment definicji dwukolumnowej tabeli odpowiada efektowi scalenia komórki 1 i 3, przedstawionemu na ilustracji?

A. <td rowspan="2">komórka1+3</td>

B. <td colspan="2">komórka1+3</td>

C. <td rowspan="3">komórka1+3</td>

D. <td colspan="3">komórka1+3</td>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wskazałeś fragment z atrybutem rowspan, czyli: <td rowspan="2">komórka1+3</td>. W HTML atrybut rowspan służy do scalania komórek tabeli w pionie, czyli wzdłuż wierszy. W tym przykładzie tabela ma dwie kolumny, a komórka „komórka1+3” zajmuje miejsce pierwszej komórki w pierwszym wierszu oraz pierwszej komórki w drugim wierszu. Dlatego właśnie wartość rowspan musi być równa 2 – ta jedna komórka rozciąga się na dwa wiersze. Gdy przeglądarka widzi taki zapis, rezerwuje dla tej komórki obszar dwóch komórek pod sobą, a w kodzie HTML w kolejnym wierszu pomijamy już odpowiednią liczbę komórek w tej kolumnie. Z mojego doświadczenia wynika, że przy projektowaniu tabel dobrze jest sobie najpierw „narysować” układ na kartce: ile wierszy, ile kolumn, które komórki się łączą. Potem łatwo dobrać czy potrzebujemy colspan (łączenie w poziomie – kolumny), czy rowspan (łączenie w pionie – wiersze). W specyfikacji HTML Living Standard dokładnie tak to jest opisane: rowspan określa, na ile wierszy rozciąga się dana komórka. W praktyce scalanie komórek przydaje się np. przy tworzeniu nagłówków tabel z opisami grup kolumn, przy harmonogramach, planach lekcji, cennikach, gdzie jedna pozycja obowiązuje przez kilka wierszy. Warto też pamiętać o semantyce: tam gdzie to możliwe, dla nagłówków stosujemy <th> z rowspan lub colspan, a dla zwykłych danych <td>. Taki porządek w kodzie ułatwia późniejsze stylowanie CSS i poprawia dostępność, bo czytniki ekranu lepiej rozumieją strukturę tabeli.

Rozpocznij nowy egzamin

Powrót do strony głównej