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: 15 czerwca 2026 09:13
Data zakończenia: 15 czerwca 2026 09:57

Egzamin zdany!

Wynik: 35/40 punktów (87,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Które z pól są umieszczone w formularzu?

A. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)

B. Input(Text), Select, Input(Radio), Input(Radio), Input (Submit), Input(Reset)

C. Textarea, Option, Input(Checkbox), Input(Checkbox), Input (Submit), Input(Reset)

D. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)

Dobrze zrozumiałeś różne typy pól, które mogą pojawić się w formularzu html. Wybrana przez Ciebie odpowiedź składa się z różnych typów pól, które są często używane w formularzach internetowych. Pierwsze, Input(Text), jest podstawowym polem do wprowadzania tekstu, które jest szeroko stosowane do zbierania informacji od użytkowników, takich jak imię, nazwisko itp. Pole Select to lista rozwijana, która pozwala użytkownikowi wybrać jedną z wielu opcji. W tym przypadku, używane jest do wyboru województwa. Input(Radio) to przyciski wyboru, które umożliwiają wybór jednej opcji z kilku. W formularzu, są one używane do wyboru między 'Studia podyplomowe' a 'Kurs'. Input(Submit) to przycisk służący do wysyłania formularza, a Input (Reset) pozwala na wyczyszczenie wszystkich pól formularza. Wszystkie te elementy są zgodne ze standardami i dobrymi praktykami tworzenia formularzy html. Dobre zrozumienie tych elementów jest kluczowe do tworzenia efektywnych i użytkowników formularzy.

Pytanie 2

p { font-family: Arial, Helvetica, sans-serif; }

Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:

A. szeryfową.

B. bezszeryfową.

C. maszynową.

D. dekoracyjną.

W podanym fragmencie CSS deklaracja font-family: Arial, Helvetica, sans-serif oznacza, że przeglądarka ma najpierw spróbować użyć czcionki Arial, jeśli jej nie znajdzie – Helvetica, a jeśli żadna z tych nazwanych czcionek nie będzie dostępna w systemie użytkownika, to sięgnie po dowolną domyślną czcionkę z rodziny sans-serif. I to właśnie jest klucz: słowo kluczowe sans-serif na końcu definiuje rodzinę kroju pisma, czyli czcionkę bezszeryfową.
Czcionki bezszeryfowe (sans-serif) nie mają tzw. szeryfów, czyli małych ozdobników na końcach liter. Przykłady takich krojów to właśnie Arial, Helvetica, Verdana, Roboto. W specyfikacji CSS (np. CSS Fonts Module Level 3) wyraźnie wyróżnia się generics: serif, sans-serif, monospace, cursive, fantasy itp. Zapis użyty w pytaniu jest zgodny z dobrymi praktykami: najpierw konkretne fonty, potem ogólna rodzina.
W praktyce taki zapis stosuje się niemal wszędzie w projektowaniu stron WWW: dla tekstów w interfejsach, nagłówków, opisów przycisków, bo krój bezszeryfowy jest bardziej czytelny na ekranach, szczególnie przy małych rozdzielczościach i na urządzeniach mobilnych. Moim zdaniem warto zapamiętać ten schemat: najpierw nazwy konkretnych fontów, na końcu zawsze jeden z generycznych typów (sans-serif, serif, monospace itd.). Dzięki temu masz pewność, że nawet jeśli użytkownik nie ma zainstalowanego Ariala czy Helvetiki, i tak zobaczy tekst w odpowiednim rodzaju czcionki – w tym wypadku właśnie bezszeryfowej. To jest standardowa i rekomendowana praktyka w CSS, stosowana praktycznie w każdym profesjonalnym projekcie webowym.

Pytanie 3

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. obraz1.png zastąpi obraz2.png

B. obraz2.png zostanie schowany

C. obraz1.png zostanie schowany

D. obraz2.png zastąpi obraz1.png

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 4

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:

A. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>

B. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2

C. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>

D. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>

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 5

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr:active { background-color: Pink; }

B. tr:hover { background-color: Pink; }

C. td, th { background-color: Pink; }

D. tr { background-color: Pink; }

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek.

W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony.

Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 6

Który z atrybutów obrazu jest niezbędny w znaczniku

<img src="nowa_lektura.jpg" ...>

aby ułatwić korzystanie ze strony użytkownikom z niepełnosprawnością narządu wzroku?

A. align="middle"

B. usemap="#lekturamap"

C. "height="42" width="42"

D. alt="technik informatyk"

Prawidłowy atrybut to alt="technik informatyk", bo właśnie atrybut alt opisuje treść lub funkcję obrazu i jest kluczowy dla dostępności (accessibility). Czytniki ekranu, z których korzystają osoby niewidome lub słabowidzące, nie „widzą” grafiki – one odczytują tekst alternatywny. Jeśli alt jest dobrze uzupełniony, użytkownik wie, co przedstawia obraz, albo jaką pełni funkcję (np. przycisk, link, ikona). Bez tego opisowego tekstu obraz jest dla takiej osoby po prostu pustym miejscem na stronie. Z punktu widzenia standardów W3C i WCAG jest to jedna z absolutnie podstawowych dobrych praktyk. W wytycznych WCAG 2.x masz wprost zapisane, że treści nietekstowe muszą mieć tekst alternatywny. W praktyce: dla zdjęcia osoby można dać alt="Nauczyciel programowania przy komputerze", dla logo firmy alt="Logo firmy X" (albo pusty alt, jeśli logo jest tylko dekoracją, ale wtedy ważne są inne konteksty), dla przycisku w formie ikonki lupy alt="Szukaj". Moim zdaniem w realnych projektach najczęstszy błąd to wrzucanie przypadkowych tekstów w alt albo zostawianie go pustego, bo „przecież widać na obrazku”. Właśnie w takich sytuacjach użytkownik z niepełnosprawnością jest totalnie wykluczony. Dobrze opisany alt pomaga też, gdy grafika się nie załaduje (słaby internet, błąd ścieżki), bo przeglądarka wyświetli tekst zamiast obrazka. Warto też pamiętać, żeby nie powtarzać w alt tego, co już widać w podpisie bezpośrednio obok, tylko raczej go uzupełnić. W skrócie: alt jest obowiązkowy z punktu widzenia dostępności i jakościowo napisany tekst alternatywny to znak profesjonalnie zrobionej strony WWW.

Pytanie 7

W języku CSS zapis selektora

p > i { color: red; }

wskazuje, że kolorem czerwonym będzie sformatowany

A. wszystkie teksty w znaczniku <p> oprócz tych w znaczniku <i>

B. tylko ten tekst w znaczniku <p>, który ma przypisaną klasę o nazwie i

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

D. wszystki tekst w znaczniku <p> lub wszelkie treści w znaczniku <i>

Zapis selektora CSS p > i mówi, że styl ma być zastosowany tylko do elementów <i>, które są bezpośrednimi dziećmi znacznika <p>. W praktyce oznacza to tyle, że jeśli w <p> mamy <i>, to tylko ten <i> weźmie czerwony kolor. To jest w porządku, bo w CSS style mogą się dziedziczyć, ale można je też dokładnie określić z użyciem selektorów. Znak '>' wskazuje na relację rodzic-dziecko, co jest istotne, gdy patrzymy na strukturę dokumentu HTML. Na przykład, w kodzie: <p>To jest <i>przykład</i> tekstu.</p>, słowo „przykład” będzie czerwone. Dodatkowo, korzystanie z takich selektorów to dobra praktyka, bo ogranicza wpływ stylów tylko do konkretnego kontekstu, co bardzo ułatwia zrozumienie kodu. Tego typu selektory pomagają unikać niechcianych efektów, które mogą się zdarzyć przy bardziej ogólnych zasadach CSS, a także poprawiają wydajność przeglądarki przy stylizacji.

Pytanie 8

Który z poniższych formatów NIE pozwala na zapis plików animowanych?

A. SWF

B. SVG

C. ACE

D. GIF

Pozostałe formaty obsługują animację, więc nie są odpowiedzią. GIF przechowuje sekwencję klatek wyświetlanych w pętli - to klasyczny format prostych animacji. SWF to format technologii Flash, stworzony właśnie do animacji i interaktywnych aplikacji. SVG, choć wektorowy, również pozwala animować elementy obrazu. Formatem niesłużącym do animacji jest ACE - to archiwum do kompresji plików - dlatego ta odpowiedź jest poprawna.

Pytanie 9

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

#stopka { ... }

A. <div class="stopka">

B. <div title="stopka">

C. <div "stopka">

D. <div id="stopka">

Poprawna odpowiedź to <div id="stopka"> ponieważ w CSS użycie selektora ID poprzedzonego znakiem # oznacza, że styl jest stosowany do elementu o określonym identyfikatorze. W HTML atrybut id jest unikalny w obrębie całego dokumentu co oznacza, że może być przypisany tylko do jednego elementu. Stosowanie identyfikatorów jest powszechną praktyką w przypadku stylizacji elementów, które pojawiają się tylko raz na stronie jak stopka nagłówek czy główny kontener treści. Przykład praktycznego zastosowania obejmuje sytuacje gdzie chcesz stylizować konkretną część strony internetowej zachowując jednorodność w całym projekcie. Dobrą praktyką jest również unikanie zbyt częstego używania id na rzecz klas które są bardziej elastyczne i mogą być stosowane do wielu elementów. Jednak w przypadku elementów unikalnych takich jak stopka użycie id jest zgodne z najlepszymi praktykami projektowania stron internetowych. Warto również pamiętać że selektory ID mają wyższy priorytet w CSS co oznacza że ich stylizacje nadpisują te zdefiniowane dla klas o tej samej specyfikacji.

Pytanie 10

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

<article>

<main>

<header>

<section>

Znacznik <main> obejmuje główną, unikalną treść strony - tę specyficzną dla danej podstrony, bez powtarzalnych elementów jak nagłówek czy menu. Zgodnie ze standardem na stronie powinien wystąpić tylko jeden widoczny <main>, co ułatwia nawigację technologiom wspomagającym (czytniki ekranu mogą od razu przejść do treści głównej). Pozostałe znaczniki semantyczne mogą się powtarzać. Dlatego tylko raz na stronie występuje <main>.

Pytanie 11

Aby za pomocą CSS zdefiniować przedstawione na rysunku opływanie obrazu tekstem należy w stylu obrazu wprowadzić zapis

A. float: left;

B. clear: both;

C. float: right;

D. table: left;

Gratulacje, Twoja odpowiedź jest prawidłowa! Właściwość CSS 'float' z wartością 'right' jest kluczowa, gdy chcemy, aby obraz był przesunięty na prawą stronę, a tekst opływał obraz od lewej strony. Jest to zgodne ze standardami tworzenia stron internetowych i jest dobrą praktyką, aby uzyskać czysty i profesjonalny wygląd strony. Właściwość 'float' jest niezwykle ważna w kontekście układu strony, pozwala na manipulację elementami i ich pozycją względem siebie. Wartością tej właściwości, oprócz 'right', może być także 'left' lub 'none', które odpowiednio spowodują opływanie obrazu przez tekst z prawej strony lub uniemożliwią opływanie. Pamiętaj, że umiejętność manipulacji tekstem i obrazami jest kluczowa do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 12

Wskaż styl CSS za pomocą którego został uzyskany przedstawiony efekt.

psy
koty
chomiki
świnki morskie
rybki

A. ul li:nth-child(odd) { background-color: DodgerBlue; }

B. ul li:active { background-color: DodgerBlue; }

C. ul li:nth-child(even) { background-color: DodgerBlue; }

D. ul li:hover { background-color: DodgerBlue; }

Dokładnie tak, poprawna odpowiedź to 'ul li:nth-child(even) { background-color: DodgerBlue; }'. Użycie selektora :nth-child(even) pozwala na zastosowanie stylu CSS do każdego parzystego elementu listy, co można zaobserwować na załączonym obrazku - każdy drugi (parzysty) element ma niebieskie tło. Jest to praktyczne rozwiązanie stosowane m.in. w celu poprawy czytelności długich list danych, gdzie koloryzmowanie na przemian pozwala na łatwiejsze zlokalizowanie poszczególnych elementów. Pamiętaj, że CSS oferuje wiele innych pseudoklas pozwalających na zastosowanie różnych efektów w zależności od stanu lub położenia elementu na stronie. Przy wykorzystaniu pseudoklas CSS warto odwoływać się do standardów i dobrych praktyk branżowych, takich jak unikanie nadmiernego zagnieżdżania selektorów, co może utrudniać czytelność i utrzymanie kodu.

Pytanie 13

Która z wartości tekstowych nie odpowiada podanemu wzorcowi wyrażenia regularnego?

(([A-ZŁŻ][a-ząęóżźćńłś]{2,})(-[A-ZŁŻ][a-ząęóżźćńłś]{2,}))?

A. Kowalski

B. Jelenia Góra

C. Kasprowicza

D. Nowakowska-Kowalska

Odpowiedź 'Jelenia Góra' jest nietrafiona. Wzór wyrażenia regularnego wymaga, żeby ciąg zaczynał się od wielkiej litery, a potem miał przynajmniej dwie małe litery. Dodatkowo, może być tam segment po myślniku z kolejną wielką literą, a na końcu małe litery. No i tutaj problem, bo 'Jelenia Góra' ma spację, a wzór nie lubi takich rzeczy, bo nie rozpoznaje spacji jako separatora. Z mojego doświadczenia w pracy z regexami, ważne jest, żeby takie elementy jak spacje były dokładnie przemyślane, szczególnie przy pracy z danymi. Im lepiej zrozumiesz te zasady, tym łatwiej będzie Ci pracować z różnymi przykładami i sytuacjami przy programowaniu. Także, warto pomyśleć o tym, jak optymalizować wzorce, żeby nasza praca była wydajniejsza i bezbłędna.

Pytanie 14

Wskaż zapis stylu CSS formatujący punktor list numerowanych na wielkie cyfry rzymskie, a list punktowanych na kwadraty.

A. ol { list-style-type: upper-alpha; }
   ul { list-style-type: disc; }

B. ol { list-style-type: square; }
   ul { list-style-type: upper-roman; }

C. ol { list-style-type: disc; }
   ul { list-style-type: upper-alpha; }

D. ol { list-style-type: upper-roman; }
   ul { list-style-type: square; }

A. C.

B. B.

C. A.

D. D.

Gratulacje, twoja odpowiedź jest poprawna! Wybór opcji D. odnosi się do poprawnego formatowania list w CSS. Odpowiedź pokazuje dobrą znajomość właściwości list-style-type, która jest kluczowa do formatowania typów list. W tym przypadku, dla listy numerowanej (ol), jest ustawiona wartość upper-roman, która reprezentuje wielkie cyfry rzymskie. Dla listy punktowanej (ul) ustawiamy wartość square, co daje efekt punktów w formie kwadratów. To właśnie takie formatowanie list jest preferowane w branży ze względu na jego estetykę i czytelność. Pamiętaj, że zrozumienie i umiejętność manipulacji różnymi właściwościami CSS jest kluczem do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 15

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

A. kadrowanie.

B. łączanie warstw.

C. odwracanie obrazu.

D. zmiana rozmiaru.

Kadrowanie to taka technika, która pomaga nam lepiej uchwycić to, co najważniejsze w obrazie. Wycinając niektóre fragmenty grafiki, skupiamy uwagę na tym, co naprawdę się liczy. Dobrze jest to mieć na uwadze, zwłaszcza przy zdjęciach portretowych, gdzie chcemy, żeby wzrok przyciągała twarz modela, a nie jakieś niepotrzebne tło. Kiedy kadrujemy, warto pamiętać o takich zasadach jak zasada trzecich, bo to pomaga zrobić fajną kompozycję. Można to robić w wielu programach graficznych, jak na przykład Adobe Photoshop czy GIMP. Tak w ogóle, dobrze jest dbać o proporcje i rozdzielczość, żeby obraz nie stracił na jakości. Gadżetem kadrowania można się też posługiwać w projektowaniu stron www, bo odpowiednie wybory graficzne poprawiają estetykę i funkcjonalność strony.

Pytanie 16

Którym znacznikiem wstawić listę NUMEROWANĄ (uporządkowaną)?

<ul>

<dl>

<ol>

<li>

Listę numerowaną (uporządkowaną) tworzy <ol> (ordered list), a każdą pozycję wpisujesz w <li>: <ol><li>Pierwszy</li><li>Drugi</li></ol> wyświetli kolejne punkty z numerami 1, 2... Numerację można zmienić atrybutem type lub CSS-em list-style-type. Zapamiętaj: „ol” = ordered (uporządkowana), „ul” = unordered (punktowana).

Pytanie 17

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

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

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

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

D. <script>przyklad.js</script>

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

Pytanie 18

Którym znacznikiem osadzić kod CSS wewnątrz dokumentu HTML?

<style>

<body>

<meta>

<head>

Kod CSS osadza się wewnątrz dokumentu HTML w znaczniku <style>, umieszczanym zwykle w sekcji <head>. Reguły zapisane między <style> a </style> stylują elementy całej strony. Dlatego CSS osadza się znacznikiem <style>.

Pytanie 19

Jaką wartość w systemie szesnastkowym przyjmie kolor określony kodem RGB rgb(255, 128, 16)?

A. #008010

B. #ff8010

C. #ff0f10

D. #ff8011

Odpowiedź #ff8010 jest prawidłowa, ponieważ kolor o wartości rgb(255, 128, 16) w systemie szesnastkowym przekłada się na poszczególne wartości RGB. Wartości te są konwertowane w sposób następujący: 255 w systemie dziesiętnym odpowiada FF w systemie szesnastkowym, 128 to 80, a 16 to 10. Zatem, łącząc te składniki, otrzymujemy #ff8010. W praktyce, kolory te są często stosowane w projektowaniu graficznym oraz tworzeniu stron internetowych, gdzie dokładne odwzorowanie kolorów jest kluczowe. Kod szesnastkowy jest powszechnie używany ze względu na swoją kompaktowość i łatwość odczytu dla programistów. Warto więc zaznaczyć, że znajomość konwersji kolorów między różnymi systemami jest ważnym elementem w pracy nad kolorystyką w projektach cyfrowych oraz w branżach zajmujących się grafiką i designem. Dobre praktyki obejmują stosowanie narzędzi do wizualizacji kolorów oraz testowanie ich na różnych urządzeniach, aby zapewnić spójność wizualną.

Pytanie 20

W języku JavaScript funkcja getElementById odnosi się do

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

B. klasy zdefiniowanej w CSS

C. zmiennej numerycznej

D. elementu HTML z podanym id

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 21

W dokumencie XHTML znajduje się fragment kodu, który posiada błąd w walidacji. Na czym ten błąd polega?

<h6>tekst</h6>
<p>pierwsza <b>linia</b> <br>
Druga linia</p>

A. Znacznik <br> musi być zamknięty

B. Znaczniki powinny być zapisywane dużymi literami

C. Nie ma nagłówka szóstego stopnia

D. Znacznik <b> nie może być umieszczany wewnątrz znacznika <p>

W odpowiedzi wskazano, że znacznik <br> powinien być zamknięty, co jest zgodne z zasadami XHTML. W przeciwieństwie do HTML, w XHTML każdy znacznik musi być poprawnie zamknięty, aby kod był zgodny ze standardami. W przypadku znacznika <br>, który służy do wstawienia łamania linii, powinien być zapisany jako <br /> w XHTML. Taki sposób zapisu zapewnia, że dokument jest poprawnie zinterpretowany przez przeglądarki i inne narzędzia przetwarzające. Warto również zaznaczyć, że poprawne zamykanie znaczników jest kluczowe dla utrzymania struktury dokumentu i jego walidacji, co wpływa na dostępność i SEO. Praktyczne przykłady obejmują tworzenie dokumentów XHTML, w których konsekwentnie stosuje się poprawną składnię, co ułatwia ich przyszłą edycję i utrzymanie. Zastosowanie poprawnych standardów, takich jak XHTML, jest również dobre dla interoperacyjności między różnymi platformami i aplikacjami.

Pytanie 22

Kolor zapisany w systemie RGB, o wartościach rgb(255,128,16), jaki będzie miał odpowiednik w kodzie szesnastkowym?

A. #ff0f10

B. #ff8010

C. #ff8011

D. #008010

Kod RGB (Red, Green, Blue) to model barw wykorzystywany w grafice komputerowej oraz w technologii wyświetlania. Wartości RGB są określane na podstawie trzech składowych: czerwonej, zielonej i niebieskiej. Każda z tych składowych może przyjmować wartości w zakresie od 0 do 255. W przypadku koloru zapisanym jako rgb(255,128,16), wartość 255 oznacza pełne nasycenie koloru czerwonego, 128 to średnie nasycenie koloru zielonego, a 16 to stosunkowo niskie nasycenie koloru niebieskiego. Aby przekonwertować wartości RGB na format szesnastkowy, należy przekształcić każdą z trzech składowych na system szesnastkowy, co w przypadku podanego koloru daje nam: 255 w systemie dziesiętnym to FF w szesnastkowym, 128 to 80, a 16 to 10. Łącząc te wartości, otrzymujemy #ff8010, co dokładnie odpowiada wartości RGB podanej w pytaniu. Taki zapis jest powszechnie stosowany w CSS i innych formatach związanych z web designem, a jego znajomość jest kluczowa dla każdego projektanta lub developera webowego.

Pytanie 23

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 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="visibility: hidden">

B. <tr style="display: none">

C. <tr style="display: table-cell">

D. <tr style="clear: none">

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 24

Której pseudoklasy/pseudoelementu użyć, aby wyróżnić kolorem wiersz tabeli, NAD którym jest kursor?

:hover

::first-line

::marker

:visited

Pseudoklasa :hover stylizuje element, NAD którym znajduje się kursor - np. tr:hover { background: #eee; } podświetli wiersz tabeli pod myszą. Dlatego do tego efektu służy :hover.

Pytanie 25

Który semantyczny znacznik HTML5 przeznaczony jest na stopkę strony?

<header>

<footer>

<figcaption>

<aside>

Stopkę strony lub sekcji opisuje semantyczny znacznik <footer> - zwykle zawiera prawa autorskie, kontakt czy linki dodatkowe. Dlatego stopką jest <footer>.

Pytanie 26

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML:

<meta charset="styl.css">

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

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

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

Poprawny jest znacznik <link rel="stylesheet" type="text/css" href="styl.css">. Zewnętrzny arkusz stylów to osobny plik .css, który dołączasz do strony w sekcji <head> dokumentu HTML właśnie znacznikiem <link>. Atrybut rel="stylesheet" mówi przeglądarce, że powiązany plik to arkusz stylów, href wskazuje jego ścieżkę, a type="text/css" (opcjonalny w HTML5) określa typ zawartości. Taki sposób dołączania CSS oddziela wygląd od treści i pozwala użyć jednego arkusza na wielu podstronach.

Pytanie 27

Funkcji session_start() w PHP należy użyć przy realizacji:

A. obsługi pojedynczego formularza

B. wczytywania danych z plików zewnętrznych

C. strony wielostronicowej, która musi pamiętać dane przy przechodzeniu między stronami

D. dowolnej strony obsługującej ciasteczka

Pozostałe sytuacje nie wymagają uruchamiania sesji. Sama obsługa ciasteczek nie potrzebuje session_start() - cookies można ustawiać i czytać niezależnie (setcookie, $_COOKIE). Wczytywanie danych z plików zewnętrznych realizują funkcje plikowe (np. fopen czy file_get_contents), a nie sesje. Odebranie pojedynczego formularza odbywa się przez $_POST/$_GET w obrębie jednego żądania. Sesja jest potrzebna, gdy dane mają być pamiętane przy przechodzeniu między stronami, dlatego ta odpowiedź jest poprawna.

Pytanie 28

Parametr face elementu <font> jest używany do wskazania

A. rozmiaru czcionki

B. koloru czcionki

C. efektów czcionki

D. nazwa czcionki

Parametr face znacznika <font> w HTML definiuje konkretną nazwę czcionki, która ma być używana do wyświetlania tekstu. Umożliwia to projektantom stron internetowych precyzyjne określenie, jak tekst będzie wyglądał, co jest istotne dla estetyki oraz czytelności strony. W praktyce, zamiast stosować ogólne czcionki systemowe, projektanci mogą wskazać konkretne nazwy czcionek, jak 'Arial', 'Verdana' czy 'Times New Roman', aby osiągnąć zamierzony efekt wizualny. Warto jednak pamiętać, że stosowanie znacznika <font> oraz jego atrybutu face jest już przestarzałe, a w nowoczesnym kodowaniu lepiej jest korzystać z CSS, gdzie właściwość 'font-family' pełni tę samą funkcję, ale z większą elastycznością i lepszym wsparciem dla różnych urządzeń. Przykładowo, zamiast <font face='Arial'>Tekst</font>, w CSS można użyć: <style> p { font-family: Arial; } </style>. Z perspektywy dobrych praktyk, zaleca się używanie CSS do stylizacji tekstu, co pozwala na lepszą separację treści od prezentacji oraz łatwiejsze zarządzanie stylami w całym dokumencie.

Pytanie 29

Która reguła dotycząca sekcji <head> w HTML jest poprawna?

A. w sekcji <head> nie można umieszczać kodu CSS, a jedynie odwołanie do pliku CSS

B. w sekcji <head> definiuje się szablon strony znacznikami <div>

C. w sekcji <head> zawiera się sekcja <body>

D. w sekcji <head> mogą wystąpić znaczniki <meta>, <title>, <link>

Sekcja <head> zawiera metadane dokumentu - informacje o stronie, a nie jej widoczną treść. Mieszczą się w niej m.in. <title> (tytuł karty), <meta> (np. kodowanie znaków, opis), <link> (dołączenie zewnętrznego arkusza CSS lub favikony) oraz <style> i <script>. Widoczną zawartość strony - nagłówki, akapity, obrazy, <div> - umieszcza się w odrębnej sekcji <body>. Dlatego poprawna jest reguła o <meta>, <title> i <link> w <head>.

Pytanie 30

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

C. D

D. A

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 31

W znaczniku meta w miejsce kropek należy wpisać

A. język dokumentu

B. streszczenie treści strony

C. nazwa edytora

D. informację o dostosowaniu do urządzeń mobilnych

Znacznik meta opatrzony atrybutem name="description" służy do zamieszczenia streszczenia treści strony internetowej. Jest to element HTML używany w nagłówku dokumentu, który dostarcza wyszukiwarkom i innym usługom internetowym informacji o zawartości strony. Opis ten pomaga w lepszym indeksowaniu strony przez wyszukiwarki oraz może wpływać na to, jak strona jest prezentowana w wynikach wyszukiwania. Dzięki dobrze sformułowanemu opisowi użytkownicy mogą szybciej zrozumieć, czego mogą się spodziewać po odwiedzeniu danej strony. Jest to dobra praktyka SEO, ponieważ poprawia widoczność strony w wyszukiwarkach. Zawartość opisana w znaczniku meta description nie powinna przekraczać 160 znaków, aby zapewnić odpowiednie wyświetlanie w wynikach wyszukiwania. Użycie streszczenia w odpowiedni sposób zwiększa atrakcyjność kliknięcia przez potencjalnych odwiedzających. To podejście jest zgodne z wytycznymi Google, które zaleca tworzenie unikalnych i treściwych opisów dla każdej strony w serwisie.

Pytanie 32

W nagłówku dokumentu HTML umieszczono

<title>Strona miłośników psów</title>

Tekst ten pojawi się

A. w zawartości strony, w pierwszym widocznym nagłówku

B. na pasku tytułowym przeglądarki

C. w polu adresowym, przy podanym adresie URL

D. w zawartości strony, na banerze

Tag <title> w HTML to naprawdę istotny element dla każdej strony internetowej. Jest to coś, co pomaga ludziom szybko zorientować się, o co chodzi na danej stronie, zwłaszcza gdy mamy otwartych kilka kart w przeglądarce. Dobry tytuł nie tylko ułatwia nawigację, ale także ma spory wpływ na to, jak strona wypada w wyszukiwarkach. Z własnego doświadczenia mogę powiedzieć, że jeśli tytuł jest konkretny i zawiera ważne słowa kluczowe, to zwiększa szanse na przyciągnięcie użytkowników. Na przykład, jeśli strona jest dla miłośników psów, to warto w tytule umieścić słowa takie jak 'psy' czy 'opiekunowie psów'. Taki przykład mógłby wyglądać tak: <title>Miłośnicy psów - Porady, opieka, zdrowie</title>. Dobrze zrobiony tytuł może też poprawić CTR, czyli współczynnik klikalności, co jest ważne, żeby przyciągnąć więcej odwiedzających.

Pytanie 33

Grafika, która ma być umieszczona na stronie, powinna mieć przezroczyste tło. Jakim formatem graficznym powinien być zapisany taki plik?

A. PNG

B. JPEG

C. BMP

D. CDR

Wybór formatu graficznego może istotnie wpływać na jakość oraz funkcjonalność obrazów w różnych zastosowaniach. CDR, czyli format plików CorelDRAW, jest używany głównie w projektowaniu wektorowym i nie jest powszechnie stosowany w kontekście wyświetlania obrazów w internecie. Pliki CDR mogą zawierać różnorodne elementy graficzne, ale nie są optymalizowane pod kątem przezroczystości tła w kontekście sieci. Z kolei BMP to format bitmapowy, który charakteryzuje się dużymi rozmiarami plików oraz brakiem kompresji, co sprawia, że nie jest efektywny w zastosowaniach internetowych, gdzie szybkość ładowania i optymalizacja są kluczowe. Format JPEG, mimo że jest powszechnie stosowany do fotografii ze względu na efektywną kompresję, nie obsługuje przezroczystości i wprowadza niepożądane artefakty, co czyni go niewłaściwym wyborem dla obrazów z transparentnym tłem. Wybierając format graficzny, warto kierować się nie tylko estetyką, ale również technicznymi wymaganiami, jakie stawia konkretne zastosowanie. Zrozumienie różnic między formatami i ich zastosowaniem jest kluczowe, aby uniknąć problemów związanych z jakością i funkcjonalnością wyświetlanych obrazów.

Pytanie 34

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW

B. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej

C. organizacji informacji na serwerze WWW

D. bazy danych z danymi publikowanymi na stronie

Front-end to wszystko to, co widzisz w przeglądarce, czyli ogólnie mówiąc, wygląd strony i to, jak się z nią bawisz. Mówię tu o kolorach, czcionkach, układzie czy różnych akcjach, które możesz wykonać. Technologie jak HTML, CSS i JavaScript są tu na czołowej pozycji, bo to dzięki nim strona jest taka interaktywna i przyjemna dla oka. Przykłady? Budowa responsywnych interfejsów, które zmieniają rozmiar na różnych ekranach, albo skrypty, które potrafią zmieniać treści na stronie bez przeładowania jej. Dobrze jest też pomyśleć o tym, żeby strona ładowała się jak najszybciej, bo to wpływa na to, jak użytkownicy będą ją odbierać. A jeśli znasz nowe frameworki, jak React czy Angular, to naprawdę ułatwia stworzenie bardziej złożonych aplikacji webowych, co w dzisiejszych czasach jest mega ważne.

Pytanie 35

Który znacznik umieszcza się w sekcji <body> dokumentu HTML?

<h2>

<meta>

<title>

<link>

Znacznik <h2> to widoczna TREŚĆ strony (nagłówek drugiego poziomu), więc umieszcza się go w sekcji <body>. Dlatego do <body> należy <h2>.

Pytanie 36

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}

A. A.

B. B.

C. D.

D. C.

Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.

Pytanie 37

Jak w CSS ustawić, aby hiperłącze nieodwiedzone było żółte, a odwiedzone zielone?

a:visited { color: yellow; } a:link { color: green; }

a:hover { color: green; } a:link { color: yellow; }

a:link { color: yellow; } a:visited { color: green; }

a:hover { color: yellow; } a:visited { color: green; }

Pozostałe zapisy mylą pseudoklasy lub kolory. Wariant z a:visited { color: yellow; } i a:link { color: green; } zamienia kolory miejscami - nieodwiedzony wyszedłby zielony zamiast żółty. Dwie inne odpowiedzi używają :hover, które reaguje na najechanie kursorem, a nie na to, czy link był odwiedzony, i pomijają regułę dla stanu :link. Stan nieodwiedzony opisuje :link, a odwiedzony :visited, dlatego poprawny jest zapis a:link { color: yellow; } a:visited { color: green; }.

Pytanie 38

Co się stanie po kliknięciu w link z HTML zawierający znak #?

<a href="#dane">

A. Zostanie wybrany względny adres URL o nazwie dane

B. Strona przeskoczy do elementu o identyfikatorze równym dane

C. Zostanie uruchomiony skrypt o nazwie dane

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

W składni HTML znak # w atrybucie href w odsyłaczu oznacza, że odnośnik prowadzi do elementu o określonym identyfikatorze id na tej samej stronie. Jest to funkcjonalność zwana nawigacją wewnętrzną lub kotwiczeniem. Po kliknięciu takiego linku przeglądarka automatycznie przewija stronę do elementu o id równym wartości po znaku #. W praktyce jest to bardzo użyteczny mechanizm, zwłaszcza w długich dokumentach lub stronach typu one-page, gdzie można tworzyć spis treści z odnośnikami prowadzącymi do poszczególnych sekcji. Przykładem użycia może być link do formularza na dole strony, który pozwala użytkownikowi szybko dotrzeć do ważnych informacji. Zgodnie z dobrymi praktykami należy zawsze upewnić się, że id jest unikalne w kontekście całej strony, co zapobiega nieoczekiwanym zachowaniom podczas nawigacji. Jest to zgodne ze standardami W3C, które promują semantyczne i dostępne struktury stron internetowych, co wpływa pozytywnie na doświadczenie użytkownika i dostępność stron dla osób z niepełnosprawnościami.

Pytanie 39

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości dla bloków: 1, 2,
3, 4 (blok 5 nie ma ustawionej szerokości), powinno zawierać właściwość

A. float: left dla wszystkich bloków.

B. clear: both dla wszystkich bloków.

C. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

D. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

Twoja odpowiedź jest poprawna. Bloki 1, 2, 3 i 4 powinny być ustawione obok siebie na stronie. Możemy tego dokonać, stosując dla nich właściwość 'float: left' w CSS, która sprawia, że elementy są wyświetlane po lewej stronie swojego kontenera. Często stosuje się tę technikę przy projektowaniu layoutów stron internetowych, umożliwiając rozmieszczenie bloków w jednym rzędzie. Blok 5 powinien natomiast znajdować się poniżej tych bloków, co osiągniemy stosując właściwość 'clear: both'. Ta właściwość zapewnia, że element nie będzie obok żadnego z poprzednich bloków, nawet jeśli mają one ustawiony float. Jest to szczególnie przydatne w sytuacjach, gdy chcemy, aby pewien element (np. stopka strony) był wyświetlany poniżej innych bloków, niezależnie od ich położenia czy szerokości. W praktyce, prawidłowe zastosowanie tych dwóch właściwości jest kluczowe dla tworzenia responsywnych i atrakcyjnych layoutów stron.

Pytanie 40

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

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

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

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

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

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

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

Rozpocznij nowy egzamin

Powrót do strony głównej