Wyniki egzaminu

Nowy egzamin
Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 8 kwietnia 2026 11:45
  • Data zakończenia: 8 kwietnia 2026 11:46

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik
Facebook
X.com
LinkedIn
Szczegółowe wyniki:
Pytanie 1

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

<input type="password" size="30" maxlength="20">
A. 20 znaków, które nie będą widoczne w polu tekstowym
B. 30 znaków, które nie będą widoczne w polu tekstowym
C. 30 znaków, które będą widoczne podczas wpisywania
D. 20 znaków, które będą widoczne w trakcie wprowadzania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <input type="password"> w HTML jest rzeczywiście super ważny. Umożliwia on użytkownikom wpisywanie haseł, a to, co najfajniejsze, to że znaki są ukryte, więc nikt nie zobaczy, co piszesz. Atrybut maxlength="20" jest tutaj pomocny, bo ogranicza liczbę znaków do 20, co jest praktyczne - zbyt długie hasła ciężko zapamiętać, a krótkie mogą być niebezpieczne. Natomiast size="30" to tylko kwestia szerokości pola, więc nie wpływa na ilość znaków, które można wpisać. Generalnie, dobrze jest trzymać się tych ograniczeń, bo to pomaga w projektowaniu formularzy i utrzymywaniu porządku w interfejsie. Z mojej perspektywy, znajomość tych atrybutów jest naprawdę przydatna przy tworzeniu stron, bo można lepiej zrozumieć, jak to wszystko działa.
Pytanie 2

Strona internetowa została wyświetlona przez przeglądarkę w poniższy sposób. Wskaż kod HTML, który prawidłowo reprezentuje zaprezentowaną hierarchiczną strukturę tekstu:

Ilustracja do pytania
A. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>
B. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2
C. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>
D. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest w porządku! Użycie znaczników <h1> i <h2> wraz z <p> to dobry krok, bo to właśnie tak powinno wyglądać semantyczne formatowanie w HTML. Znacznik <h1> to taki główny nagłówek, który mówi, o czym jest cała strona lub sekcja, a to naprawdę kluczowe dla porządku w treści i SEO. Dzięki nagłówkom w HTML łatwiej jest zrozumieć, co jest na stronie, zarówno dla ludzi, jak i programów, które przeszukują internet. Jak już masz <h2>, to świetnie, bo to pokazuje podrozdziały, a więc hierarchię informacji. Użycie <p> dla tekstu to też dobry pomysł, bo sprawia, że tekst jest bardziej czytelny. Warto pamiętać, że semantyczne znaczniki HTML pomagają osobom z niepełnosprawnościami korzystać z internetu. Według wytycznych WCAG powinno się je stosować, żeby poprawić dostępność. A jak to robić z głową, to łatwiej potem stylować stronę przy użyciu CSS, bo możesz zmieniać wygląd bez bawienia się w treść HTML. Generalnie, dobrze jest, gdy dokumenty są jasne zarówno dla ludzi, jak i dla maszyn – to standard w nowoczesnym webdesignie.
Pytanie 3

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 &lt;. 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 &lt; 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 &gt; dla znaku większości oraz &amp; 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 4

W języku CSS atrybut font-size przyjmuje, zgodnie z nazwami, wartości

A. jedynie small, smaller, large, larger
B. z zestawu xx-small, x-small, medium, large, x-large, xx-large
C. wyłącznie small, medium, large
D. zaledwie big oraz small

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą różnych wartości, w tym predefiniowanych słów kluczowych, które umożliwiają łatwe dostosowanie wielkości tekstu w dokumentach HTML. Oprócz typowych wartości takich jak small, medium i large, CSS oferuje również bardziej szczegółowe opcje, takie jak xx-small, x-small, x-large oraz xx-large. Dzięki temu projektanci mogą lepiej dopasować rozmiar tekstu do kontekstu wizualnego strony. Użycie tych wartości pozwala na uniknięcie problemów z uniwersalnością, gdyż są one zrozumiałe i zgodne z różnymi rozdzielczościami ekranów. Na przykład, podczas projektowania responsywnej witryny, zastosowanie wartości xx-large dla nagłówków oraz x-small dla przypisów skutecznie poprawia czytelność i estetykę. Zgodnie z najlepszymi praktykami, warto również rozważyć użycie jednostek względnych, takich jak em czy rem, co pozwala na jeszcze większą elastyczność w dostosowywaniu rozmiarów tekstu do preferencji użytkownika oraz rozmiaru ekranu.
Pytanie 5

Wskaż problem z walidacją w podanym fragmencie kodu HTML

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący... </p>
A. Znacznik br nie został poprawnie zamknięty
B. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania
C. Znacznik br nie może występować wewnątrz znacznika p
D. Nieznany znacznik h6

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik zamykający b niezgodny z zasadą zagnieżdżania czyli poprawna odpowiedź 1 odnosi się do zasady poprawnego zagnieżdżania znaczników HTML Zasada ta mówi że znaczniki muszą być zamykane w odwrotnej kolejności do ich otwarcia W naszym przykładzie mamy otwierający znacznik b a następnie i co oznacza że najpierw powinien być zamknięty znacznik i a potem b Tego typu błąd jest często spotykany w kodzie HTML i może prowadzić do nieoczekiwanych problemów z wyświetlaniem strony Warto pamiętać że poprawne zagnieżdżanie znaczników wpływa na czytelność i utrzymanie kodu co jest kluczowe w większych projektach HTML jest językiem opartym na strukturze drzewiastej i każda niezgodność w zagnieżdżaniu może wpłynąć na sposób przetwarzania dokumentu przez przeglądarki Dbałość o szczegóły w strukturze dokumentu HTML jest zgodna z dobrymi praktykami branżowymi i wspomaga zgodność z różnymi przeglądarkami i urządzeniami co w konsekwencji poprawia dostępność i użyteczność strony internetowej
Pytanie 6

Walidacja formularzowych pól polega na zweryfikowaniu

A. czy istnieje plik PHP, który odbierze dane.
B. czy użytkownik jest zalogowany.
C. który użytkownik wprowadził informacje.
D. czy wprowadzone dane spełniają określone reguły.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Walidacja pól formularza to mega ważny krok, kiedy zbieramy dane od użytkowników. Dzięki niej możemy mieć pewność, że wszystko, co użytkownik wprowadza, jest zgodne z pewnymi zasadami. To sprawia, że aplikacja działa jak należy i że dane są w miarę bezpieczne. Na przykład, walidacja może sprawdzać, czy użytkownik wpisał coś w pole tekstowe, czy adres e-mail wygląda jak należy, albo czy hasło ma odpowiednią długość i trudność. Fajnie jest, jak walidacja działa zarówno po stronie klienta, jak i serwera. Ta po stronie klienta jest super, bo użytkownik od razu widzi, że coś poszło nie tak i nie musi czekać na odpowiedź z serwera. A walidacja po stronie serwera dodaje jeszcze więcej bezpieczeństwa, bo broni aplikacji przed błędnymi danymi i różnymi atakami, jak na przykład SQL injection. Dlatego walidacja danych to absolutna podstawa w nowoczesnych systemach przetwarzania informacji.
Pytanie 7

Który paragraf w przedstawionym kodzie zostanie wyświetlony czcionką o kolorze niebieskim?

<!DOCTYPE html>
<html>
<head>
<style>
div~p { color: blue; }
</style>
</head>
<body>
  <div>
    <p>pierwszy paragraf</p>
      <div>
        <p>drugi paragraf</p>
        <p>trzeci paragraf</p>
      </div>
    <p>czwarty paragraf</p>
  </div>
</body>
</html>
A. Trzeci.
B. Pierwszy.
C. Drugi.
D. Czwarty.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wskazany został czwarty paragraf, bo dokładnie tak działa selektor CSS użyty w tym przykładzie. Zapis `div~p` to tzw. selektor rodzeństwa (general sibling selector). Oznacza on: „wybierz każdy element `<p>`, który jest młodszym rodzeństwem jakiegokolwiek elementu `<div>` i znajduje się z nim na tym samym poziomie drzewa DOM (ma tego samego rodzica)”. Kluczowe są tu dwie rzeczy: ten sam rodzic oraz to, że dany element musi występować w kodzie **po** elemencie `div`. W podanym fragmencie HTML wszystkie paragrafy znajdują się wewnątrz jednego głównego `<div>`. Jednak tylko „czwarty paragraf” jest rodzeństwem zewnętrznego `<div>` i jednocześnie pojawia się po nim jako element `<p>` na tym samym poziomie zagnieżdżenia. „Pierwszy”, „drugi” i „trzeci” paragraf są zagnieżdżone wewnątrz divów, więc nie są rodzeństwem dla tagu `div`, do którego odnosi się selektor. W praktyce selektor `A~B` często stosuje się np. do stylowania elementów formularza i opisów, które pojawiają się po jakimś polu, albo do tworzenia efektów typu: „wszystkie akapity po tym bloku mają inny kolor”. Warto też znać różnicę między `div p` (wszystkie potomne akapity w divie), `div>p` (tylko bezpośrednie dzieci) oraz `div+p` (tylko pierwszy akapit bezpośrednio po divie). To są podstawowe narzędzia przy precyzyjnym stylowaniu struktury HTML zgodnie z dobrymi praktykami CSS i zaleceniami specyfikacji W3C.
Pytanie 8

Edytor, który spełnia kryteria WYSIWYG, powinien umożliwiać

A. przygotowanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej
B. osiągnięcie zbliżonego rezultatu tworzonej strony do jej wyglądu w przeglądarce internetowej
C. tworzenie podstawowych grafik wektorowych
D. publikację strony na serwerze za pomocą wbudowanego klienta FTP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Edytory WYSIWYG (What You See Is What You Get) mają na celu umożliwienie użytkownikom tworzenia i edytowania treści w sposób, który przypomina ostateczny wygląd strony internetowej. Odpowiedź dotycząca uzyskania zbliżonego wyniku tworzonej strony do jej obrazu w przeglądarce internetowej jest kluczowym aspektem działania takich edytorów. Umożliwiają one użytkownikom natychmiastowe podglądanie efektów wprowadzanych zmian, co jest nieocenione przy projektowaniu stron. Przykładem może być edytor tak jak Adobe Dreamweaver czy WordPress, które pozwalają na wizualne projektowanie układu, co redukuje potrzebę ręcznego kodowania. Przy tworzeniu stron internetowych zgodnie z dobrymi praktykami, edytory WYSIWYG powinny wspierać standardy HTML i CSS, co zapewnia, że efekty wizualne są zgodne z tym, co użytkownik zobaczy w przeglądarce. Takie podejście zwiększa efektywność pracy, a także ułatwia współpracę między programistami a designerami.
Pytanie 9

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem? 

<table>
  <tr>
    <td style="border: solid 1px;">Komórka 1</td>
    <td style="border: solid 1px;">Komórka 2</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 3</td>
    <td style="border: solid 1px;">Komórka 4</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 5</td>
    <td style="border: solid 1px;">Komórka 6</td>
  </tr>
</table>
Komórka 1Komórka 2
Komórka 3Komórka 4
Komórka 5Komórka 6
A. <tr style="visibility: hidden">
B. <tr style="display: none">
C. <tr style="clear: none">
D. <tr style="display: table-cell">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'visibility: hidden' jest używana do ukrycia elementu, ale jednocześnie zachowuje ona jego miejsce w układzie strony. Jest to idealne dla sytuacji, kiedy chcemy ukryć konkretny element, ale nie chcemy wpływać na układ pozostałych elementów. W kontekście naszego pytania, jeśli chcielibyśmy ukryć drugi wiersz tabeli, ale nie chcemy, aby pozostałe wiersze zmieniały swoje położenie, 'visibility: hidden' jest idealnym rozwiązaniem. W przeciwnym razie, gdybyśmy użyli 'display: none', wiersz zostałby całkowicie usunięty z układu strony, a pozostałe wiersze przesunęłyby się do góry, aby zapełnić puste miejsce. W praktyce, właściwość 'visibility: hidden' jest często używana w połączeniu z JavaScript do tworzenia efektów 'hide/show', gdzie ukryte elementy mogą być później odkrywane bez wpływu na układ strony.
Pytanie 10

Który kod HTML spowoduje identyczne formatowanie jak przedstawione na obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML


  1. <p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p>

  2. <p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p>

  3. <p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p>

  4. <p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p>

A. Odpowiedź B
B. Odpowiedź A
C. Odpowiedź D
D. Odpowiedź C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór odpowiedzi C jest trafny, bo stosujesz odpowiednie znaczniki HTML, aby osiągnąć zamierzony efekt formatowania. Przykład świetnie pokazuje, jak używać znaczników <i> i <b>, które służą do pochylania i pogrubiania tekstu. Znak <p> to z kolei paragraf, który odseparowuje tekst i zaczyna nową linię. Tutaj znacznik <i> przed słowem 'paragrafie' sprawia, że jest ono kursywą, a <b> wokół 'zobaczysz' wyróżnia go na pogrubionym tle. To takie podstawowe zasady HTML, które pokazują, jak można różne style formatowania łączyć, żeby uczynić treści bardziej estetycznymi i przyjemnymi do czytania. Warto pamiętać o odpowiednim używaniu znaczników, bo to nie tylko poprawia wygląd, ale też dostępność treści, co jest ważne dla osób korzystających z czytników ekranu. Z mojego doświadczenia, im lepiej rozumiesz te zasady, tym łatwiej tworzyć strony, które będą dobrze odbierane przez użytkowników.
Pytanie 11

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: left; } aside { float: left; }
C. nav { float: right; } section { float: right; }
D. 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. &lt;aside&gt;, potem &lt;section&gt;, a na końcu &lt;nav&gt;, 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 12

Które z poniższych poleceń jest poprawne w kontekście walidacji HTML5?

A. &lt;img src = mojPiesek.jpg&quot; alt = &quot;pies&gt;
B. &lt;img src = &quot;mojPiesek.jpg&quot; alt = &quot;pies&quot;&gt;
C. &lt;img src = &quot;mojPiesek.jpg&quot; &gt;
D. &lt;img src = mojPiesek.jpg alt = pies&gt;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź &lt;img src = &quot;mojPiesek.jpg&quot; alt = &quot;pies&quot;&gt; jest poprawna zgodnie z wymaganiami HTML5, ponieważ przestrzega zasad dotyczących składni znaczników. W HTML5 atrybuty powinny być stosowane w formacie klucz-wartość, gdzie klucz jest nazwą atrybutu, a wartość jest przypisana w cudzysłowach. W tym przypadku atrybut 'src' wskazuje na źródło obrazu, a 'alt' dostarcza tekst alternatywny, co jest istotne z punktu widzenia dostępności. Tekst alternatywny jest używany przez technologie asystujące oraz wyświetlany, gdy obraz nie może być załadowany. Przykład użycia: &lt;img src=&quot;logo.png&quot; alt=&quot;Logo firmy&quot;&gt; jest zgodny z dobrymi praktykami, ponieważ informuje użytkowników o zawartości obrazu. Warto również pamiętać, że w HTML5 nie jest wymagane zamykanie tagu &lt;img&gt;, co czyni go bardziej elastycznym w użyciu. Poprawne stosowanie atrybutów oraz odpowiedzialność za dostępność treści to kluczowe aspekty projektowania stron internetowych w dzisiejszych czasach.
Pytanie 13

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. style="margin-bottom: 0cm;">rect, triangle, circle
B. rect, poły, circle
C. style="margin-bottom: 0cm;">poły, square, circle
D. rect, sąuare, circle

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut shape znacznika area w języku HTML jest kluczowy dla określenia kształtu interaktywnego obszaru na mapie obrazów. Przyjmuje on wartości, które definiują geometrię obszaru w kontekście mapy, a do najpopularniejszych z nich należą 'rect', 'circle' oraz 'poly'. Wartość 'rect' definiuje prostokątny obszar, gdzie użytkownik może kliknąć w dowolnym miejscu w obrębie prostokąta. 'Circle' z kolei pozwala na stworzenie okrągłego obszaru kliknięcia, definiując jego środek oraz promień. Z kolei 'poly' umożliwia zdefiniowanie wielokątnego obszaru poprzez podanie współrzędnych wierzchołków. Te wartości są zgodne z definicjami przedstawionymi w standardach W3C, które określają sposób, w jaki przeglądarki interpretują te atrybuty. Przykładowo, dla atrybutu shape='rect' można podać współrzędne lewego górnego i prawego dolnego narożnika prostokąta, co sprawia, że jest to użyteczne w implementacji interaktywnych map. Zrozumienie tych wartości jest istotne dla programistów webowych, którzy chcą tworzyć dostępne i interaktywne treści.
Pytanie 14

Najłatwiejszym i najmniej czasochłonnym sposobem na przetestowanie działania strony internetowej w różnych przeglądarkach i ich wersjach jest

A. wykorzystanie walidatora kodu HTML
B. sprawdzenie działania strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne
C. zainstalowanie różnych przeglądarek na kilku komputerach i testowanie strony
D. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Emulatory przeglądarek internetowych, takie jak Browser Sandbox, stanowią najefektywniejsze narzędzie do testowania witryn w różnych środowiskach. Dzięki nim można symulować działanie witryny w wielu przeglądarkach oraz ich wersjach bez potrzeby fizycznej instalacji. To podejście jest zgodne z najlepszymi praktykami w zakresie testowania oprogramowania, ponieważ pozwala na oszczędność czasu i zasobów. W przypadku użycia emulatora, programiści mogą szybko przetestować i porównać, jak strona zachowuje się w różnych przeglądarkach, co jest kluczowe dla zapewnienia spójności działania i doświadczeń użytkownika. Przykładem zastosowania emulatorów jest możliwość weryfikacji responsywności witryny na różnych rozmiarach ekranów oraz dostosowanie stylów CSS dla różnych przeglądarek. To pozwala na identyfikację problemów z kompatybilnością, które mogą występować w starszych wersjach przeglądarek, a także w zapewnieniu, że nowoczesne standardy webowe są poprawnie interpretowane. Praktyczne wykorzystanie emulatorów w codziennym procesie tworzenia oprogramowania powinno być integralną częścią każdej strategii testowania, aby zapewnić optymalne działanie witryny na wszystkich platformach.
Pytanie 15

Aby strona WWW była responsywna, należy między innymi definiować

A. rozmiary obrazów w procentach.
B. rozmiary obrazów wyłącznie w pikselach.
C. jedynie czcionki bezszeryfowe.
D. układ strony wyłącznie za pomocą tabel.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź wskazuje na jedną z kluczowych zasad projektowania responsywnych stron WWW: elementy, w tym obrazy, powinny skalować się razem z szerokością dostępnej przestrzeni. Definiowanie rozmiarów obrazów w procentach (np. width: 100% w CSS) powoduje, że grafika dopasowuje się do szerokości kontenera, a nie trzyma sztywnego rozmiaru w pikselach. Dzięki temu na dużym monitorze obraz może być szeroki, a na ekranie telefonu automatycznie się zmniejszy, nie rozwalając układu i nie powodując konieczności przewijania w poziomie. W praktyce często łączy się zapis procentowy z dodatkowymi ograniczeniami, np. img {max-width: 100%; height: auto;}. Taki zapis to standardowa, podręcznikowa technika w responsive web design. Z mojego doświadczenia to jedna z pierwszych rzeczy, jaką sprawdza się, gdy strona „rozjeżdża się” na telefonach. Procentowe wartości dobrze współpracują z elastycznymi siatkami (flexbox, grid), media queries oraz z tzw. fluid layout, czyli płynnymi układami. Warto też wiedzieć, że sam procentowy rozmiar obrazów to nie wszystko. W nowoczesnych projektach stosuje się dodatkowo atrybuty srcset i sizes, aby serwer serwował różne wersje obrazów w zależności od gęstości pikseli i szerokości ekranu. Jednak fundament pozostaje ten sam: unikanie sztywnych, pikselowych szerokości i korzystanie z jednostek względnych, takich jak procenty, vw (viewport width) czy em/rem. Jest to zgodne z dobrymi praktykami branżowymi i zaleceniami twórców frameworków typu Bootstrap czy Tailwind, gdzie wszystkie komponenty są tworzone właśnie z myślą o elastycznym skalowaniu na różnych urządzeniach.
Pytanie 16

Aby obraz w filmie zmieniał się gładko, liczba klatek (niezachodzących na siebie) w ciągu sekundy musi mieścić się przynajmniej w zakresie

A. 16 do 19 fps
B. 31 do 36 fps
C. 24 do 30 fps
D. 20 do 23 fps

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź '24 do 30 fps' jest na miejscu, bo w tym zakresie klatki na sekundę zapewniają naprawdę płynny obraz w filmach. Standard to 24 fps, co uznaje się za minimalną liczbę klatek, aby widzowie widzieli ruch jako gładki, a nie poskakujący. W praktyce w telewizji oraz przy niektórych formatach wideo można spotkać się z 30 fps, co jeszcze bardziej poprawia wrażenia wizualne. Warto tu wspomnieć, że wiele produkcji, zwłaszcza animacji, trzyma się tych standardów. Na przykład, filmy animowane z 24 fps mają dobrą dynamikę, ale w transmisjach sportowych często korzysta się z 30 fps, żeby lepiej uchwycić szybko poruszające się obiekty. Ostatecznie, trzymanie się tych standardów w filmach i telewizji to klucz do dobrego odbioru wizualnego.
Pytanie 17

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem każdego bloku tekstowego
B. pokazany, jeśli w kodzie użyty będzie znacznik img
C. tłem całej witryny
D. wyświetlany obok każdego bloku tekstowego

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis p{background-image: url('rysunek.jpg')} oznacza, że każdy <p>, czyli paragraf, dostanie jako tło obrazek o nazwie rysunek.jpg. To jest po prostu sposób, żeby nadać każdyemu paragrafowi ten sam wygląd. Działa to świetnie, gdy chcesz, żeby cały tekst miał spójny styl czy dodać coś wizualnego do treści. Ważne, żeby ten plik rysunek.jpg był w dobrym miejscu, bo jak go nie znajdziesz, to przeglądarka go nie wczyta. Można to wykorzystać, żeby strona wyglądała bardziej estetycznie i przyciągała wzrok – każdy paragraf z własnym tłem na pewno sprawi, że będzie się lepiej czytało. Możesz też bawić się dodatkowymi właściwościami w CSS, jak background-repeat czy background-size, bo to otwiera drzwi do jeszcze ciekawszych efektów wizualnych.
Pytanie 18

Który z poniższych typów plików NIE JEST używany do publikacji grafiki lub animacji na stronach www?

A. PNG
B. SWF
C. SVG
D. AIFF

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
AIFF (Audio Interchange File Format) to format plików dźwiękowych, który nie jest wykorzystywany do publikacji grafiki ani animacji na stronach internetowych. Jego głównym zastosowaniem jest przechowywanie wysokiej jakości dźwięku, dlatego znajdujemy go często w produkcjach audio i nagraniach muzycznych. W przeciwieństwie do formatów jak SVG (Scalable Vector Graphics), SWF (Shockwave Flash) czy PNG (Portable Network Graphics), które są przeznaczone do grafiki i animacji, AIFF nie jest odpowiedni do wizualizacji treści w sieci. Przykładowo, SVG jest często wykorzystywany do tworzenia skalowalnych grafik wektorowych, które są popularne w projektowaniu stron internetowych, a PNG jest formatem rastrowym, który świetnie sprawdza się w przypadku obrazów z przezroczystością. W kontekście publikacji internetowych, kluczowe jest stosowanie odpowiednich formatów, które zapewniają optymalizację i zgodność z różnymi przeglądarkami, a AIFF nie spełnia tych wymagań.
Pytanie 19

Jaką metodę zastosowano do dodania arkusza stylów do dokumentu HTML w pokazanym kodzie?

Ilustracja do pytania
A. Styl wpisany, lokalny
B. Styl zewnętrzny
C. Styl wewnętrzny
D. Styl alternatywny, zewnętrzny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Styl wpisany lokalny w HTML to metoda definiowania stylów CSS bezpośrednio wewnątrz elementów HTML za pomocą atrybutu style. Jest to często stosowane, gdy chcemy szybko zdefiniować unikalne style dla pojedynczego elementu bez tworzenia lub edytowania zewnętrznego pliku CSS. Przykładowo poniższy kod HTML pokazuje jak możemy zmienić kolor tekstu w paragrafie na czerwony używając właśnie stylu pisanego zwanego również inline. Choć jest to proste i szybkie rozwiązanie nie jest zalecane dla większych projektów ze względu na brak możliwości ponownego użycia kodu i problematyczną jego konserwację. W praktyce najlepszym podejściem jest stosowanie stylów zewnętrznych które umożliwiają centralne zarządzanie wyglądem całego dokumentu. Standardy HTML i CSS promują modularność i oddzielenie warstwy prezentacyjnej od struktury co jest bardziej efektywne i zgodne z zasadami projektowania responsywnych aplikacji internetowych. Styl wpisany może być jednak przydatny w testach szybkich prototypach lub sytuacjach gdy zmiany muszą być wprowadzone lokalnie i mają one charakter jednorazowy. Dla bardziej złożonych aplikacji zaleca się jednak stosowanie bardziej zorganizowanych metod stylizacji takich jak style zewnętrzne.
Pytanie 20

Podczas walidacji strony napotkano błąd. Co to oznacza?

Ilustracja do pytania
A. oznaczenie ISO-8859-2 jest nieprawidłowe
B. określenie kodowania znaków musi być zapisane bez użycia myślników
C. w atrybucie charset dopuszczalna jest wyłącznie wartość "utf-8"
D. znacznik meta nie zawiera atrybutu charset

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna ponieważ współczesne standardy tworzenia stron internetowych wymagają kodowania znaków w formacie UTF-8. Specyfikacja HTML5 zaleca używanie UTF-8 jako domyślnego kodowania ze względu na jego wszechstronność i szerokie wsparcie dla różnych znaków i symboli. UTF-8 jest kompatybilny z wieloma językami i zapewnia, że strony internetowe będą prawidłowo wyświetlane na różnych urządzeniach i przeglądarkach. Korzystanie z UTF-8 eliminuje również problemy związane z niepoprawnym wyświetlaniem znaków specjalnych co jest częstym problemem w kodowaniach takich jak ISO-8859-2. W praktyce oznacza to że wszystkie nowe projekty stron internetowych powinny deklarować kodowanie UTF-8 w znaczniku meta. Na przykład poprawnie zdefiniowany znacznik wyglądałby następująco meta charset="utf-8". Dobrym podejściem jest również upewnienie się że zarówno pliki HTML jak i serwer są zgodne z tym ustawieniem co zapobiega potencjalnym konfliktom Użycie UTF-8 zgodne jest z najlepszymi praktykami branżowymi wspierającymi tworzenie dostępnych i zróżnicowanych treści internetowych.
Pytanie 21

W CSS przypisano regułę: float: left; dla elementu blokowego. Jakie będzie jej zastosowanie?

A. układania bloków jeden pod drugim
B. wyrównania tekstu do lewej strony
C. ustawienia bloku na lewo w stosunku do innych
D. wyrównania elementów tabeli do lewej strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Reguła CSS 'float: left;' jest używana do ustawienia elementu blokowego po lewej stronie kontenera, co pozwala na swobodne rozmieszczanie innych elementów w otaczającym go obszarze. Elementy, które są ustawione jako 'float', nie zajmują miejsca w normalnym przepływie dokumentu, co oznacza, że inne elementy mogą 'przepływać' wokół nich. Przykładem zastosowania tej reguły może być układ strony internetowej, gdzie zdjęcia są umieszczone z lewej strony tekstu, co pozwala na estetyczne i funkcjonalne połączenie grafiki z treścią. Zgodnie z wytycznymi W3C, właściwości 'float' powinny być używane z rozwagą, aby uniknąć problemów z układaniem stron, na przykład należy pamiętać o zastosowaniu właściwości 'clear', aby uniknąć niechcianych efektów wizualnych. W praktyce, float jest często stosowany w układach siatki lub responsywnych, gdzie elastyczne i dynamiczne rozmieszczenie elementów jest kluczowe dla użyteczności i estetyki strony.
Pytanie 22

Kod CSS można włączyć do dokumentu HTML, używając znacznika

A. <head>
B. <meta>
C. <body>
D. <style>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <style> jest prawidłowa, ponieważ ten znacznik HTML jest dedykowany do osadzania kodu CSS wewnątrz dokumentu HTML. Znacznik <style> powinien być umieszczony w sekcji <head> dokumentu, co umożliwia przeglądarkom interpretację stylów przed renderowaniem treści strony. Dzięki temu można definiować różne reguły CSS, które modyfikują wygląd elementów HTML, co jest kluczowe w tworzeniu estetycznych i funkcjonalnych stron internetowych. Przykładowo, można użyć <style> do określenia koloru tła, rozmiaru czcionki czy marginesów. Ważne jest, aby stosować zasady dotyczące kaskadowości, ponieważ style zdefiniowane w <style> mają priorytet nad stylem zewnętrznym, jeśli są tak samo specyficzne. Dodatkowo, korzystanie z <style> jest zgodne z zasadami dobrych praktyk, takich jak unikanie nadmiarowego ładowania zewnętrznych plików CSS w przypadku prostych projekty, co przyspiesza czas ładowania strony.
Pytanie 23

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. tła każdego znacznika akapitu
B. rysunku znajdującego się w tle strony w pionie
C. rysunku umieszczonego w tle strony w poziomie
D. rysunku osadzonego znacznikiem img

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W definicji stylu CSS, zastosowane tło z rysunkiem 'rysunek.gif' jest powtarzane w pionie dzięki właściwości 'background-repeat: repeat-y'. Oznacza to, że obrazek będzie powielany wzdłuż osi Y, co skutkuje tym, że obrazek jest umieszczany jeden nad drugim, tworząc wrażenie ciągłości. Aby lepiej zrozumieć działanie tej właściwości, warto przyjrzeć się innym ustawieniom tła. Na przykład, właściwość 'background-repeat: repeat' powtarza obraz zarówno w poziomie, jak i w pionie, natomiast 'background-repeat: no-repeat' zapobiega jakimkolwiek powtórzeniom. W standardach CSS, takich jak CSS3, definiowanie tła w ten sposób jest zgodne z zasadami, które pozwalają na elastyczne projektowanie stron internetowych. W praktyce, użycie powtarzającego się tła może być przydatne w przypadku prostych wzorów, które mają stworzyć efekt wizualny, nie obciążając jednocześnie zbytnio zasobów, co jest istotne dla wydajności ładowania strony.
Pytanie 24

W kodzie CSS użyto stylizacji dla elementu listy, a żadne inne reguły CSS nie zostały ustalone. To zastosowane formatowanie spowoduje, że

Ilustracja do pytania
A. po najechaniu myszką na element listy, kolor tekstu zmieni się na Maroon
B. tekst wszystkich elementów listy będzie miał kolor Maroon
C. tekst wszystkich elementów, którym nadano id „hover”, będzie w kolorze Maroon
D. kolor Maroon obejmie co drugi element listy

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna, ponieważ selektor CSS li:hover odnosi się do elementów listy, które zmieniają swój styl po najechaniu kursorem. W tym przypadku zmiana dotyczy koloru tekstu, który stanie się maroon. Selektor :hover jest pseudoklasą w CSS, która odpowiada za zmiany stylu elementu, gdy użytkownik umieści nad nim kursor. Jest to powszechnie stosowana technika w projektowaniu interaktywnych i przyjaznych dla użytkownika stron internetowych, umożliwiająca na przykład wizualne podkreślenie linków lub elementów menu. Dzięki zastosowaniu takiego selektora, projektanci mogą tworzyć dynamiczne efekty, które reagują na działania użytkownika, co zwiększa atrakcyjność wizualną i funkcjonalność strony. Dobre praktyki zalecają używanie pseudoklas jak :hover do poprawy interakcji użytkownika z interfejsem, a także do zapewnienia spójności z innymi elementami strony, które mogą również reagować na najechanie kursorem. Warto także pamiętać o dostępności, zapewniając alternatywne sposoby na interakcję z elementami, np. dla urządzeń dotykowych.
Pytanie 25

Znacznik <ins> w HTML jest używany do wskazywania

A. cytowanego fragmentu tekstu
B. tekstu, który został dodany
C. tekstu, który został przeformatowany
D. tekstu, który został usunięty

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wiesz, znacznik <ins> w HTML to coś, co używamy, żeby pokazać tekst dodany w stosunku do poprzedniej wersji dokumentu. To mega przydatne, zwłaszcza kiedy edytujemy różne treści, bo od razu widać, co się zmieniło. Zastosowanie tego znacznika można znaleźć w różnych dokumentach, jak blogi czy umowy, gdzie ważne jest, żeby pokazać, co się zmieniło w treści. Zgodnie z tym, co mówią wytyczne W3C, używanie znaczników semantycznych, jak <ins>, sprzyja lepszej dostępności tekstów i ułatwia ich zrozumienie przez wyszukiwarki oraz technologie wspierające. Przykładowo, gdy robisz poprawki w dokumencie, właśnie dzięki <ins> możesz wyróżnić nowe informacje, co sprawi, że użytkownicy łatwiej ogarną, co się zmieniło. Dobrze jest też dodać odpowiedni styl CSS, żeby nadać tym elementom wyraźniejszy wygląd.
Pytanie 26

W języku HTML, aby dodać na stronę obrazek przechowywany w formacie JPG, należy użyć znacznika

A. <src>
B. <table>
C. <img>
D. <jpg>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby wstawić na stronę obraz zapisany w formacie JPG, w języku HTML stosuje się znacznik <img>. Jest to jeden z podstawowych znaczników używanych do osadzania grafiki na stronach internetowych. W skład tego znacznika wchodzą atrybuty, które pozwalają na określenie źródła obrazu, jego alternatywnego opisu oraz dodatkowych parametrów, takich jak rozmiary czy wyrównanie. Atrybut 'src' jest kluczowy, ponieważ wskazuje ścieżkę do pliku graficznego, na przykład <img src='obraz.jpg' alt='Opis obrazu'>. Atrybut 'alt' jest bardzo ważny z punktu widzenia dostępności, ponieważ umożliwia wyświetlenie tekstu alternatywnego w przypadku, gdy obraz nie może być załadowany. Ponadto, zgodnie z wytycznymi W3C, znacznik <img> jest samodzielny, co oznacza, że nie wymaga pary znaczników otwierającego i zamykającego. Warto również dodać, że stosowanie odpowiednich formatów obrazów, takich jak JPG czy PNG, ma znaczenie dla jakości i wydajności ładowania strony, co jest kluczowe z perspektywy SEO. Użycie poprawnych znaczników i atrybutów może znacząco wpłynąć na pozycję strony w wynikach wyszukiwania.
Pytanie 27

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

Ilustracja do pytania
A. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px
B. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px
C. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px
D. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ reguły CSS wyrażone w stylu są poprawnie zinterpretowane w kontekście podanej definicji. Wartość text-align: center oznacza, że tekst wewnątrz elementu h1 będzie wyśrodkowany. Centrum tekstu jest powszechnie stosowane w projektowaniu stron internetowych w celu zwiększenia czytelności i estetyki nagłówków co jest korzystne w wizualnym uporządkowaniu treści. Wartość text-transform: uppercase przekształca wszystkie litery w sekcji na wielkie litery co jest pomocne w przypadku nagłówków gdzie wyróżnienie jest kluczowe i potęguje efekt wizualny. Stosowanie wielkich liter w nagłówkach jest klasycznym podejściem w projektowaniu ponieważ przyciąga uwagę użytkownika. Dodatkowo letter-spacing: 10px zwiększa odstępy między literami co poprawia ich czytelność zwłaszcza w dużych formatach tekstu. Zastosowanie takich właściwości jest zgodne z dobrymi praktykami projektowymi które dążą do optymalizacji wizualnej i funkcjonalnej stron internetowych co jest kluczowe dla pozytywnego doświadczenia użytkownika
Pytanie 28

W firmie zajmującej się technologiami informacyjnymi otwarta jest rekrutacja na stanowisko administratora e-sklepu. Do jego zadań należy instalacja i konfiguracja systemu zarządzania treścią, który jest przeznaczony jedynie dla sklepu internetowego, zmiana szablonów wizualnych oraz dostosowanie grafiki. Jakie umiejętności powinien posiadać nowy pracownik?

A. HTML, CSS, Photoshop
B. CMS PrestaShop, CSS, Gimp
C. Photoshop, Gimp, JavaScript
D. CMS WordPress, HTML, Gimp

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybór odpowiedzi CMS PrestaShop, CSS, Gimp jest prawidłowy, ponieważ dokładnie odpowiada wymaganiom związanym z rolą administratora sklepu internetowego. PrestaShop to jeden z najpopularniejszych systemów zarządzania treścią (CMS) dedykowanych dla e-commerce. Jego znajomość jest kluczowa, gdyż pozwala na efektywną instalację i konfigurację platformy sklepowej, co jest jednym z głównych obowiązków administratora. CSS jest niezbędnym narzędziem do zmiany szablonów i dostosowania wyglądu sklepu zgodnie z wymaganiami klienta oraz standardami responsywnego designu, co zapewnia lepsze doświadczenia użytkowników na różnych urządzeniach. Gimp jako narzędzie graficzne umożliwia modyfikację grafik i tworzenie nowych elementów wizualnych, co jest istotne dla personalizacji sklepu. Dobrą praktyką w branży jest umiejętność integrowania graficznych oraz technologicznych komponentów w celu stworzenia atrakcyjnej i funkcjonalnej platformy handlowej, co znacząco wpływa na konwersje i wyniki sprzedaży. Ponadto, znajomość PrestaShop otwiera drzwi do wielu zasobów i społeczności, co dodatkowo wspiera rozwój zawodowy administratora.
Pytanie 29

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

p::first-line
{
    font-size: 150%;
}
A. cały tekst w paragrafie zostanie powiększony o 150%
B. pierwszy paragraf na stronie będzie miał powiększoną czcionkę w całości
C. pierwsza linia każdego z paragrafów będzie miała mniejszą wielkość czcionki od pozostałych linii
D. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

Brak odpowiedzi na to pytanie.

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

Znacznik <s> w HTML generuje

A. przekreślenie tekstu
B. podkreślenie tekstu
C. pochylenie tekstu
D. migotanie tekstu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <s> w HTML służy do oznaczania tekstu, który jest przekreślony. To daje znać, że dany fragment już nie jest aktualny albo jest błędny. Myślę, że to bardzo ważne, bo z perspektywy semantyki w HTML, pozwala lepiej zrozumieć, co się dzieje na stronie. Użytkownicy korzystający z czytników ekranu mogą łatwiej zrozumieć, że coś jest nieaktualne. Przykładem mogą być sklepy internetowe, gdzie przekreślenie starej ceny pokazuje, że produkt jest teraz w promocji. Dobrze jest pamiętać, że stosowanie tych znaczników dobrze wpływa na strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność w sieci.
Pytanie 31

Fragment kodu HTML z JavaScript spowoduje, że po kliknięciu przycisku

<img src="obraz1.png">
<img src="obraz2.png" id="id1">
<button onclick="document.getElementById('id1').style.display='none'">Przycisk</button>
A. obraz2.png zostanie schowany
B. obraz2.png zastąpi obraz1.png
C. obraz1.png zostanie schowany
D. obraz1.png zastąpi obraz2.png

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź dotyczy ukrycia obrazu obraz2.png poprzez jego identyfikację za pomocą unikalnego atrybutu id. W kodzie HTML każdy element może być zidentyfikowany przez atrybut id, co pozwala na bezpośrednią manipulację jego własnościami w JavaScript. Funkcja document.getElementById służy do wyszukiwania elementu o podanym id w strukturze DOM dokumentu. Następnie, używając stylowania CSS poprzez właściwość style, możliwe jest zmienienie wartości display na 'none', co skutkuje ukryciem elementu w przeglądarce. Taka technika jest często wykorzystywana w interaktywnych aplikacjach webowych, gdzie użytkownik musi mieć możliwość dynamicznego manipulowania elementami interfejsu. Praktyka ta jest zgodna ze standardami W3C i pozwala na tworzenie responsywnych, przyjaznych użytkownikowi aplikacji. Dobrym przykładem zastosowania jest tworzenie galeria obrazów, gdzie tylko wybrane zdjęcia są wyświetlane w danym momencie. Taka funkcjonalność sprzyja również poprawie czytelności strony, ponieważ użytkownik może ukrywać i odkrywać treści według własnych potrzeb. Zrozumienie tego mechanizmu jest kluczowe dla każdego, kto chce budować nowoczesne strony internetowe z użyciem HTML, CSS i JavaScript.
Pytanie 32

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

A. <meta charset="styl.css">
B. <link rel="stylesheet" type="text/css" href="styl.css">
C. <div id="styl.css" relation="css">
D. <optionvalue="styl.css" type="text/css">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <link rel="stylesheet" type="text/css" href="styl.css" />. Ten fragment kodu HTML jest standardowym sposobem dołączania zewnętrznych arkuszy stylów do dokumentu HTML. Atrybut 'rel' określa relację pomiędzy dokumentem a zewnętrznym plikiem, w tym przypadku jest to 'stylesheet', co informuje przeglądarkę, że plik ma zawierać style CSS. Atrybut 'type' wskazuje typ zawartości, a 'href' zawiera ścieżkę do pliku CSS, w tym przypadku 'styl.css'. Zewnętrzne arkusze stylów są zalecane, ponieważ umożliwiają oddzielenie treści od stylizacji, co jest zgodne z zasadą separacji obowiązków w inżynierii oprogramowania. Umożliwia to łatwe zarządzanie i aktualizowanie stylów bez konieczności modyfikowania samego HTML-a. Przykładem zastosowania może być stworzenie pliku styl.css, który zawiera wszystkie style dla danej strony, co pozwala na ponowne wykorzystanie tych samych stylów w różnych częściach serwisu, co zwiększa spójność i ułatwia utrzymanie kodu.
Pytanie 33

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym wpisywany tekst będzie ukrywany (zastępowany kropkami), należy zastosować znacznik

A. <form="password" type="password" />
B. <input type="password" />
C. <input name="password" />
D. <form input type="password" />

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <input type="password" /> jest poprawna, ponieważ ten znacznik HTML służy do tworzenia pola edycyjnego, w którym wprowadzane dane są maskowane. W przypadku pól do wpisywania haseł, istotne jest, aby użytkownik nie mógł zobaczyć wpisywanego tekstu, co zwiększa poziom bezpieczeństwa. W HTML, atrybut 'type' z wartością 'password' instruuje przeglądarkę, aby ukrywała znaki wprowadzane przez użytkownika, zastępując je zazwyczaj kropkami lub gwiazdkami. Przykładem zastosowania tego typu znacznika może być formularz logowania, gdzie użytkownicy wpisują swoje hasła. Dobrą praktyką jest również zastosowanie odpowiednich etykiet i walidacji, aby zapewnić, że formularz jest użyteczny i zgodny z WCAG (Web Content Accessibility Guidelines). Warto pamiętać, że bezpieczeństwo haseł powinno być również wspierane przez odpowiednie zabezpieczenia po stronie serwera, w tym haszowanie haseł oraz ochrona przed atakami typu brute force.
Pytanie 34

Edytor, który realizuje zasady WYSIWYG, powinien umożliwiać

A. osiągnięcie podobnego rezultatu tworzonej strony do jej wizualizacji w przeglądarce internetowej
B. tworzenie elementów podstawowej grafiki wektorowej
C. publikację serwisów na serwerze przy użyciu wbudowanego klienta FTP
D. przetwarzanie plików dźwiękowych przed ich umieszczeniem na stronie internetowej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Edytor WYSIWYG (What You See Is What You Get) jest narzędziem, które umożliwia użytkownikom tworzenie treści internetowych w sposób intuicyjny, bez konieczności znajomości kodu HTML czy CSS. Kluczowym założeniem tego typu edytora jest to, że użytkownik widzi na ekranie dokładny obraz tego, co będzie wyświetlane w przeglądarce. Uzyskanie zbliżonego wyniku tworzonej strony do jej obrazu w przeglądarce internetowej oznacza, że edytor powinien umożliwiać podgląd na żywo oraz edytowanie treści w sposób, który bezpośrednio odzwierciedla rezultaty. Przykładem takiego edytora jest WordPress, który pozwala na tworzenie stron za pomocą edytora blokowego, gdzie użytkownik może na bieżąco widzieć, jak jego strona będzie wyglądać. Standardy, takie jak HTML5 oraz CSS3, są kluczowe w kontekście tworzenia responsywnych i interaktywnych stron, a edytory WYSIWYG powinny wspierać te standardy, aby zapewniać zgodność z nowoczesnymi praktykami webowymi. Dodatkowo, funkcje takie jak przeciąganie i upuszczanie elementów, możliwość dodawania multimediów oraz formatowania tekstu są nieodłącznymi elementami, które przyczyniają się do efektywności edytorów WYSIWYG.
Pytanie 35

W stylach CSS, aby ustalić styl linii obramowania jako linię kreskową, należy zastosować wartość

A. dashed
B. solid
C. dotted
D. groove

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W stylach CSS, właściwość 'border-style' pozwala na określenie stylu obramowania elementu. Aby ustawić obramowanie jako linię kreskową, stosuje się wartość 'dashed'. Linia kreskowa jest jedną z opcji, które pozwalają na wizualne odróżnienie elementów na stronie internetowej. Wartość 'dashed' generuje obramowanie składające się z przerywanych linii, co czyni go idealnym do wyróżniania elementów, które wymagają uwagi lub są w pewien sposób odrębne. Przykład zastosowania: 'border: 2px dashed black;' tworzy obramowanie o grubości 2 pikseli, w kolorze czarnym, składające się z przerywanej linii. Wartości 'solid', 'dotted', oraz 'groove' oferują inne style obramowania, ale nie generują efektu linii kreskowej. 'Solid' tworzy jednolitą linię, 'dotted' składa się z kropek, a 'groove' daje efekt trójwymiarowego wgłębienia. Standardy CSS, w tym CSS3, precyzują te style, umożliwiając projektantom elastyczność w dostosowywaniu wyglądu stron internetowych, co jest kluczowe dla UX i UI designu.
Pytanie 36

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

p {
    font-family: serif;
    background-color: Teal;
    color: white;
    font-style: italic;
}
Ilustracja do pytania
A. Paragraf 3
B. Paragraf 2
C. Paragraf 4
D. Paragraf 1

Brak odpowiedzi na to pytanie.

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

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }
A. wszystkim odnośnikom odwiedzonym.
B. każdemu odnośnikowi niezależnie od aktualnego stanu.
C. wszystkim odnośnikom nieodwiedzonym.
D. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.
Pytanie 38

Standard kodowania ISO-8859-2 jest używany do poprawnego wyświetlania

A. znaków specjalnych dla języka kodu strony
B. symboli matematycznych
C. polskich liter, takich jak: ś, ć, ń, ó, ą
D. znaków zarezerwowanych dla języka opisu strony

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kodowanie w standardzie ISO-8859-2, znane również jako Latin-2, jest szczególnie istotne dla poprawnego wyświetlania znaków diakrytycznych, które są charakterystyczne dla języków słowiańskich, w tym polskiego. W standardzie tym zdefiniowane są znaki reprezentujące polskie litery takie jak: ś, ć, ń, ó, ą oraz inne znaki diakrytyczne. Przykładem zastosowania tego kodowania może być strona internetowa zawierająca treści w języku polskim, która wymaga użycia odpowiednich znaków w swoich nagłówkach, akapitach czy formularzach. Stosowanie ISO-8859-2 w HTML-u, np. poprzez deklarację w metatagach, zapewnia, że przeglądarki internetowe będą w stanie prawidłowo interpretować i wyświetlać te znaki, co zwiększa czytelność i dostępność treści dla użytkowników. W kontekście dobrych praktyk, warto zauważyć, że dla nowych projektów często zaleca się korzystanie z kodowania UTF-8, które obejmuje znaki ze wszystkich języków, jednak ISO-8859-2 nadal znajduje zastosowanie w wielu starszych systemach i aplikacjach, gdzie zachowanie zgodności z istniejącymi danymi jest kluczowe.
Pytanie 39

Które z wymienionych par znaczników HTML mają identyczny efekt wizualny na stronie internetowej, jeśli nie zastosowano żadnych stylów CSS?

A. <b> i <big>
B. <p> oraz <h2>
C. <meta> oraz <title>
D. <b> i <strong>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <b> i <strong> jest poprawna, ponieważ oba znaczniki służą do wyróżniania tekstu, przy czym nie mają one różnicy w wizualizacji, jeśli nie zastosowano żadnych stylów CSS. Z punktu widzenia semantyki HTML, <strong> jest znacznikiem, który wyraża większe znaczenie dla zawartego w nim tekstu, co jest korzystne dla dostępności oraz SEO, ale wizualnie, bez dodatkowych stylów, obie etykiety wykazują te same cechy. Przykładowo, można ich używać w sytuacjach, gdy chcemy wyróżnić ważne informacje w artykule lub nagłówku. Zastosowanie tych znaczników zgodnie z dobrymi praktykami HTML pozwala na lepsze zrozumienie struktury strony przez wyszukiwarki oraz czytniki ekranu, co ma znaczenie w kontekście dostępności. W związku z tym, wyróżnianie tekstu za pomocą <b> i <strong> jest nie tylko estetyczne, ale także funkcjonalne, wspierając zarówno użytkowników, jak i algorytmy wyszukiwania.
Pytanie 40

Aby obraz dodany za pomocą kodu HTML był zrozumiały dla programów wspierających osoby niewidome, konieczne jest zdefiniowanie atrybutu

A. src
B. alt
C. border
D. sizes

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'alt' w znaczniku <img> jest kluczowy dla dostępności treści internetowych. Jego główną funkcją jest dostarczenie alternatywnego opisu obrazu, który jest odczytywany przez programy wspierające osoby niewidome i niedowidzące, takie jak czytniki ekranu. Dzięki atrybutowi 'alt', użytkownicy, którzy nie mogą zobaczyć obrazu, są w stanie zrozumieć, co on przedstawia. Na przykład, jeśli obrazek przedstawia psa bawiącego się w parku, odpowiednia treść atrybutu 'alt' mogłaby brzmieć: 'Pies bawiący się w parku'. To nie tylko zwiększa dostępność strony, ale również poprawia doświadczenia użytkowników. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), dostarczenie tekstu alternatywnego dla wszystkich obrazów jest niezbędne do zapewnienia pełnej dostępności treści. Przykład zastosowania: W przypadku strony e-commerce, gdzie obrazy produktów są kluczowe, odpowiednio zdefiniowany atrybut 'alt' pozwala osobom z ograniczeniami wzrokowymi na pełne zrozumienie oferty, co może wpłynąć na ich decyzje zakupowe.
Rozpocznij nowy egzamin
Powrót do strony głównej