Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 25 czerwca 2026 12:03
  • Data zakończenia: 25 czerwca 2026 12:06

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Szczegółowe wyniki:
Pytanie 1

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu:

<STYLE type="text/css">
<!--
   P {color:blue; font-size:14pt; font-style:italic;}
   A {font-size:16pt; text-transform:lowercase;}
   TD.niebieski {color:blue}
   TD.czerwony {color:red}
-->
</STYLE>
A. Jest to styl zasięg lokalny
B. Akapit będzie przekształcany na małe litery
C. Zdefiniowano dwie klasy
D. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów
W tym kodzie CSS masz zdefiniowane dwie klasy: 'niebieski' i 'czerwony', które są przypisane do elementów TD. To super, bo te klasy zmieniają kolor tekstu w tabeli, a to jest zgodne z tym, jak działają kaskadowe arkusze stylów (CSS). Klasa 'niebieski' ustawia tekst na niebiesko, a 'czerwony' na czerwono. Dzięki takim klasom można zaoszczędzić sporo czasu, bo używasz tych samych stylów w różnych miejscach w HTML. Widać, że pomyślałeś o organizacji swojego kodu. Dodatkowo, masz też style dla elementów P i A — P jest niebieski i ma czcionkę 14 punktów w kursywie, a A ma większą 16-punktową czcionkę. To pokazuje, jak elastyczne jest CSS w stylizacji różnych elementów. Fajnie, że trzymasz się dobrych praktyk w programowaniu, bo to naprawdę ułatwia późniejsze modyfikacje.

Pytanie 2

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

border-radius: 20%;

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

A

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

B

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

C

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

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

Pytanie 3

Jakie pola znajdują się w formularzu?

Ilustracja do pytania
A. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)
B. Textarea, Option, Input(Checkbox), Input(Checkbox), Input(Submit), Input(Reset)
C. Input(Text), Select, Input(Radio), Input(Radio), Input(Submit), Input(Reset)
D. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)
Odpowiedź, którą wybrałeś, jest ok, bo wszystko trzyma się zasady formularzy z obrazka. Input(Text) to właśnie pole, w którym wpisujesz swoje nazwisko. Potem mamy Input(Select), który pozwala wybrać jedno z województw z listy – to też jest na plus. Przy Input(Radio) można wybrać jedną opcję, co dobrze pasuje do wyboru między Studiami podyplomowymi a Kursem. Input(Submit) jest do wysyłania formularza, więc tu też wszystko gra. Na końcu Input(Reset) zeruje wszystko, co jest przydatne, kiedy chcesz wyczyścić formularz. Wszystkie te elementy są zgodne z HTML5, co jest teraz standardem w tworzeniu stron. Fajnie, że formularz ma logiczne ułożenie, bo ułatwia to korzystanie z niego.

Moim zdaniem, dobrze wiedzieć, jakie elementy są stosowane w formularzach, żeby wszystko działało tak jak powinno.

Pytanie 4

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

a:hover { font-weight: bold; }
A. wszystkim odnośnikom, które nie były odwiedzane
B. wszystkim odnośnikom, które były wcześniej odwiedzane
C. odnośnikowi, gdy kursor myszy na niego najedzie
D. każdemu odnośnikowi bez względu na jego bieżący stan
Pseudoklasa hover jest jedną z najczęściej używanych pseudoklas w CSS stosowaną do stylizacji elementów HTML w momencie, gdy użytkownik najeżdża kursorem myszy na dany element. W podanym przykładzie kodu CSS zastosowano pseudoklasę hover dla elementów a czyli odnośników. Oznacza to, że gdy kursor myszy znajdzie się nad jakimkolwiek odnośnikiem, jego styl zmieni się na pogrubiony dzięki właściwości font-weight: bold. Jest to bardzo przydatne w interaktywnej stylizacji stron internetowych, ponieważ pozwala użytkownikom na wizualne odróżnienie elementów, z którymi mogą wchodzić w interakcję. Praktycznym zastosowaniem tej pseudoklasy jest zwiększenie użyteczności i estetyki strony poprzez subtelne wskazanie elementów interaktywnych, takich jak menu nawigacyjne czy linki w treści. Warto pamiętać o zachowaniu spójności stylizacji dla wszystkich stanów odnośników, co jest zalecane jako dobra praktyka w projektowaniu responsywnych interfejsów użytkownika. Pseudoklasa hover, jako część kaskadowego arkusza stylów, pozwala na dynamiczną interakcję z elementami strony, co znacząco wpływa na doświadczenia użytkownika.

Pytanie 5

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

A. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```
B. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.
C. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```
D. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```
Odpowiedź dotycząca kolejności atrybutów w znacznikach HTML jest poprawna, ponieważ nie ma wymogu, aby atrybuty w znacznikach były uporządkowane alfabetycznie. W rzeczywistości, HTML pozwala na dowolną kolejność atrybutów, co czyni tę regułę błędną. Przykładowo, znacznik <img src="/path/to/image.jpg" alt="Opis obrazu" /> jest poprawny niezależnie od kolejności atrybutów. Ważne jest, aby atrybuty były odpowiednio używane w kontekście ich przeznaczenia, a nie w kontekście kolejności alfabetycznej. Dobrą praktyką jest również stosowanie atrybutów w sposób, który zwiększa czytelność kodu, jednak nie jest to wymóg techniczny. Zgodnie z zaleceniami W3C, kluczowym aspektem jest poprawność semantyczna i zgodność ze standardami, a nie kolejność atrybutów.

Pytanie 6

Na ilustracji pokazano strukturę bloków witryny internetowej. Który z elementów stylu strony jest zgodny z podanym układem? Dla uproszczenia pominięto cechy koloru tła, wysokości oraz czcionki)

Ilustracja do pytania
A. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }
B. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }
C. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }
D. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź numer 2 jest prawidłowa, ponieważ doskonale odpowiada układowi bloków przedstawionych na rysunku. Zastosowanie właściwości CSS float:left dla wszystkich trzech pierwszych bloków pozwala na ich ułożenie w jednym rzędzie w ramach dostępnej szerokości. Pierwszy blok zajmuje 30 procent, natomiast drugi i trzeci po 70 procent szerokości, co jest zgodne z przedstawionym układem. Dodatkowo, zastosowanie clear:both dla czwartego bloku spowoduje, że rozpocznie on nowy wiersz i zajmie całą szerokość dostępną poniżej poprzednich elementów. Takie rozwiązanie jest efektywne w tworzeniu responsywnych i elastycznych układów stron internetowych. Wykorzystanie float jest powszechnie stosowane w projektowaniu front-end, choć w nowych projektach coraz częściej zastępowane przez flexbox i grid. Warto zrozumieć działanie float i clear, ponieważ pozwalają na manipulację układem elementów na stronie, co jest kluczowe w tworzeniu czytelnych i estetycznych interfejsów użytkownika. Zrozumienie tych koncepcji jest niezbędne dla profesjonalistów zajmujących się tworzeniem stron internetowych.

Pytanie 7

Kolor zaprezentowany na ilustracji, zapisany w modelu RGB, w formacie szesnastkowym będzie określony w następujący sposób

Ilustracja do pytania
A. 77A0C1
B. 77A1C1
C. 71A0B2
D. 76A3C1

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor w modelu RGB zapisany jako 119 160 193 odpowiada wartości szesnastkowej 77A0C1. W systemie RGB każda z trzech składowych kolorów czerwonego zielonego i niebieskiego jest reprezentowana przez wartość od 0 do 255. Przy konwersji do systemu szesnastkowego używamy par znaków dla każdej z wartości. Dla wartości 119 uzyskujemy 77 dla 160 otrzymujemy A0 a dla 193 wynik to C1. Sumując te wartości uzyskujemy kod 77A0C1 który jest szeroko stosowany w projektach graficznych i webowych. W praktyce znajomość zapisu szesnastkowego jest niezbędna w branży IT zwłaszcza w web designie oraz przy tworzeniu interfejsów użytkownika. Standardem jest wykorzystywanie tego zapisu w stylach CSS gdzie precyzyjne określenie koloru ma kluczowe znaczenie dla estetyki i funkcjonalności projektu. Prawidłowy dobór i zapis kolorów wpływa na UX i branding dlatego znajomość sposobów konwersji i czytania kolorów w różnych systemach jest kluczowa dla profesjonalistów w tej dziedzinie.

Pytanie 8

Który rastrowy format graficzny jest obsługiwany przez przeglądarki internetowe?

A. FLIF
B. PNG
C. TGA
D. PCX

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Spośród wymienionych to PNG jest rastrowym formatem obsługiwanym natywnie przez przeglądarki internetowe - obok JPG i GIF tworzy zestaw bezpiecznych formatów webowych. Wyświetli się bez wtyczek i konwersji. Zapamiętaj webowe rastry: JPG (zdjęcia), PNG (jakość + przezroczystość), GIF (proste animacje).

Pytanie 9

Który z poniższych znaczników wchodzi w skład sekcji <head> dokumentu HTML?

A. <section>
B. <span>
C. <title>
D. <img>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<title> jest jednym z kluczowych znaczników w sekcji <head> dokumentu HTML. Odpowiada za definiowanie tytułu strony, który jest wyświetlany w pasku tytułu przeglądarki oraz w wynikach wyszukiwania. Tytuł jest istotnym elementem SEO, ponieważ informuje zarówno użytkowników, jak i wyszukiwarki o tematyce strony. Przykład użycia znacznika <title>: <head><title>Moja Strona Internetowa</title></head>. Należy pamiętać, że tytuł powinien być zwięzły, ale jednocześnie opisowy, zazwyczaj nie powinien przekraczać 60 znaków. W kontekście standardów, HTML5, który jest obecnie najnowszą wersją HTML, wciąż podkreśla znaczenie znacznika <title> jako fundamentalnego dla struktury dokumentu. Odpowiedni tytuł nie tylko poprawia doświadczenia użytkowników, ale również zwiększa widoczność strony w wynikach wyszukiwania, dlatego jego prawidłowe użycie ma kluczowe znaczenie w web designie i marketingu internetowym.

Pytanie 10

Jak ustawić w CSS, by link NIEodwiedzony był żółty, a odwiedzony - zielony?

A.
a:hover { color: green; } a.link { color: yellow; }
B.
a:hover { color: yellow; } a:visited { color: green; }
C.
a:link { color: yellow; } a:visited { color: green; }
D.
a:visited { color: yellow; } a:link { color: green; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Stan odnośnika opisują pseudoklasy: <code><span class="code-keyword">a</span><span class="code-text">:</span><span class="code-variable">link</span></code> dotyczy linku jeszcze NIEodwiedzonego, a <code><span class="code-keyword">a</span><span class="code-text">:</span><span class="code-variable">visited</span></code> już odwiedzonego. Aby pierwszy był żółty, a drugi zielony, przypisuje się oba kolory osobno: <code><span class="code-keyword">a</span><span class="code-text">:</span><span class="code-variable">link</span> <span class="code-text">{</span> <span class="code-keyword">color</span><span class="code-text">:</span> <span class="code-variable">yellow</span><span class="code-text">;</span> <span class="code-text">}</span> <span class="code-keyword">a</span><span class="code-text">:</span><span class="code-variable">visited</span> <span class="code-text">{</span> <span class="code-keyword">color</span><span class="code-text">:</span> <span class="code-variable">green</span><span class="code-text">;</span> <span class="code-text">}</span></code>. Warto trzymać kolejność LVHA (link, visited, hover, active), bo przy nakładających się regułach decyduje ona o pierwszeństwie. Dlatego poprawny jest ten zestaw.

Pytanie 11

Którą funkcję z menu Kolory programu GIMP użyto, w celu uzyskania efektu przedstawionego w filmie?

A. Progowanie.
B. Barwienie.
C. Krzywe.
D. Inwersja.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowo wskazana funkcja to „Progowanie”, bo dokładnie ona zamienia obraz kolorowy lub w odcieniach szarości na obraz dwuwartościowy: piksel jest albo czarny, albo biały, w zależności od tego, czy jego jasność przekracza ustawiony próg. W GIMP-ie znajdziesz ją w menu Kolory → Progowanie. Suwakami ustalasz zakres poziomów jasności, które mają zostać potraktowane jako „białe”, a wszystko poza tym zakresem staje się „czarne”. Efekt, który się wtedy uzyskuje, jest bardzo charakterystyczny: mocno kontrastowy, bez półtonów, coś w stylu skanu czarno-białego lub grafiki do druku na ploterze tnącym. Z mojego doświadczenia progowanie świetnie nadaje się do przygotowania logotypów, szkiców technicznych, schematów, a także do wyciągania konturów z lekko rozmytych zdjęć. Często używa się go też przed wektoryzacją, żeby program śledzący krawędzie miał wyraźne granice między czernią a bielą. W pracy z grafiką na potrzeby stron WWW próg bywa stosowany np. przy tworzeniu prostych ikon, piktogramów albo masek (maski przezroczystości można przygotować właśnie na bazie obrazu progowanego). Dobrą praktyką jest najpierw sprowadzenie obrazu do odcieni szarości i dopiero potem użycie progowania, bo wtedy masz większą kontrolę nad tym, jak rozkłada się jasność i gdzie wypadnie granica progu. Warto też pamiętać, że progowanie jest operacją destrukcyjną – traci się informacje o półtonach – więc najlepiej pracować na kopii warstwy, żeby w razie czego móc wrócić do oryginału i poprawić ustawienia progu.

Pytanie 12

Oznaczenie barwy w postaci #FF00E0 jest równoważne zapisowi

A. rgb(F, 0, E0)
B. rgb(255, 0, 128)
C. rgb(255, 0, 224)
D. rgb(FF, 0, E0)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Oznaczenie #FF00E0 to zapis koloru w systemie szesnastkowym (hex), bardzo typowym w CSS i ogólnie w tworzeniu interfejsów. Składa się ono z trzech par znaków: FF (czerwony), 00 (zielony), E0 (niebieski). Każda para to jedna składowa kanału RGB zapisana w systemie szesnastkowym, czyli w bazie 16. Zakres dla każdej składowej to od 00 do FF, co odpowiada wartościom dziesiętnym od 0 do 255. FF w systemie szesnastkowym to 15×16 + 15 = 255 w systemie dziesiętnym. 00 to po prostu 0. Natomiast E0 to 14×16 + 0 = 224. Dlatego zapis #FF00E0 jest równoważny rgb(255, 0, 224). To jest dokładnie ten sam kolor, tylko zapisany w innym formacie. W CSS możesz używać obu zapisów zamiennie: np. `color: #FF00E0;` oraz `color: rgb(255, 0, 224);` dadzą identyczny efekt w przeglądarce. W praktyce, przy projektowaniu stron i interfejsów, warto rozumieć oba zapisy, bo narzędzia graficzne (Photoshop, GIMP, Figma) często podają kolory w hex, a dokumentacja front-endowa i tutoriale bardzo często używają rgb() albo nawet rgba(). Dobra praktyka w branży jest taka, żeby umieć szybko w głowie lub z pomocą prostego kalkulatora przeliczyć wartości hex na dziesiętne, szczególnie przy drobnych korektach kolorów. Moim zdaniem świadomość, że hex to po prostu inna reprezentacja tych samych liczb 0–255, bardzo ułatwia później rozumienie gradientów, filtrów, a nawet pracy z kolorami w JavaScript, gdzie możesz programowo generować wartości rgb().

Pytanie 13

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

A. <b> oraz <i>
B. <u> oraz <sup>
C. <b> oraz <u>
D. <i> oraz <mark>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik HTML <strong> jest używany do oznaczenia tekstu, który jest ważny, podczas gdy <em> służy do podkreślenia, że tekst powinien być akcentowany w kontekście. Odpowiednikami tych znaczników, pod względem formatowania, są <b> oraz <i>. Znacznik <b> stosuje się do wyróżnienia tekstu, nadając mu pogrubienie, co zazwyczaj oznacza, że tekst jest istotny. Z kolei <i> używamy do kursywy, co również może wskazywać na akcentowanie lub wyróżnienie pewnych słów, jednak w sposób bardziej subtelny niż przy pomocy pogrubienia. W praktyce, stosując <strong> oraz <em>, dbamy o to, aby nasza treść była bardziej dostępna dla użytkowników, zwłaszcza dla osób korzystających z technologii wspomagających, takich jak czytniki ekranu. Stosowanie znaczników semantycznych zgodnie z dobrymi praktykami zapewnia lepszą interpretację treści przez wyszukiwarki, co może wpływać na SEO. Warto również pamiętać, że pomimo że <b> i <i> mają swoje zastosowania, znacznie lepiej jest używać <strong> i <em> w kontekście semantycznym, aby poprawić zrozumienie treści przez maszyny i użytkowników.

Pytanie 14

Którego atrybutu użyć, aby scalić w PIONIE dwie sąsiednie komórki tabeli?

A.
cellpadding
B.
rowspan
C.
cellspacing
D.
colspan

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Komórki tabeli scala się dwoma atrybutami: poziomo <code><span class="code-variable">colspan</span></code>, a pionowo <code><span class="code-variable">rowspan</span></code>. Zapis <code><span class="code-variable">rowspan</span><span class="code-text">=</span><span class="code-string">"2"</span></code> sprawia, że komórka rozciąga się na dwa wiersze, „wchłaniając” komórkę poniżej - dzięki temu np. jeden nagłówek może obejmować kilka rzędów tabeli. Dlatego do scalania w pionie służy <code><span class="code-variable">rowspan</span></code>.

Pytanie 15

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. widoczny obok każdego akapitu
B. wyświetlony, jeśli w kodzie użyty zostanie znacznik img
C. tłem każdego akapitu
D. tłem całej witryny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego <p> w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 16

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

A. umieszczanie bloków jeden pod drugim
B. dopasowanie elementów tabeli do lewej krawędzi
C. wyrównanie tekstu do lewej strony
D. ustawienie bloku na lewo względem innych

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Reguła CSS 'float: left;' jest kluczowym narzędziem do zarządzania układem elementów na stronach internetowych. Gdy zastosujemy tę regułę do bloku, powoduje to, że blok zostaje przesunięty do lewej strony swojego kontenera, co pozwala na przyleganie innych elementów po prawej stronie. Przykładowo, jeżeli mamy obrazek jako blok z regułą 'float: left;', tekst umieszczony obok tego obrazka będzie 'przeplatał' się z nim, co jest często wykorzystywane w projektowaniu stron dla uzyskania efektu estetycznego i funkcjonalnego. Stosowanie floata jest zgodne z dobrymi praktykami CSS, ale należy pamiętać, że może prowadzić do problemów z układem, szczególnie w przypadku elementów o różnej wysokości. Aby zniwelować efekty uboczne, często stosuje się regułę 'clear', aby kontrolować przepływ elementów. Warto również zwrócić uwagę, że w nowoczesnym CSS często zyskują na znaczeniu flexbox i grid, które oferują bardziej elastyczne i wydajne metody układania elementów, jednak 'float' nadal pozostaje istotnym narzędziem w arsenale front-end developera.

Pytanie 17

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 6
B. 7
C. 4
D. 5

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 18

Znacznik <i> w języku HTML ma na celu

A. określenie formularza
B. zmianę czcionki na kursywę
C. ustalenie nagłówka w treści
D. dodanie grafiki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <i> w języku HTML jest używany do formatowania tekstu, aby uzyskać efekt pochylonego kroju pisma. Jest to element semantyczny, który wprowadza do dokumentu wizualną różnicę, ale także ma swoje miejsce w kontekście znaczeniowym. Użycie <i> może wskazywać na zmianę intonacji w tekście, taką jak nazwy książek, filmów, czy obcych wyrazów. W standardach HTML5, <i> jest zalecany do użytku, aby wyróżnić elementy tekstowe w sposób, który jest zgodny z zasadami dostępności i semantyki. Przykład zastosowania: <p>W książce <i>W pustyni i w puszczy</i> autorstwa Henryka Sienkiewicza...</p>. Oznaczanie tekstu w ten sposób wspiera nie tylko estetykę strony, ale również poprawia doświadczenie użytkowników korzystających z technologii asystujących, które mogą interpretować znaczenie tak oznaczonego tekstu. Warto również pamiętać o odpowiednich stylach CSS, które można zastosować do tego znacznika, aby dostosować jego wygląd do reszty witryny.

Pytanie 19

Który zapis poprawnie ustawia w CSS niebieski kolor tekstu?

A.
color: blue;
B.
color: (blue);
C.
font-color: blue;
D.
text-color: blue;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor tekstu w CSS ustawia właściwość <code><span class="code-variable">color</span></code>. Wartość można podać jako nazwę (<code><span class="code-variable">blue</span></code>), zapis szesnastkowy (<code><span class="code-text">#</span><span class="code-number">0000</span><span class="code-variable">ff</span></code>) lub funkcję (<code><span class="code-function">rgb</span><span class="code-text">(</span><span class="code-number">0</span><span class="code-text">,</span><span class="code-number">0</span><span class="code-text">,</span><span class="code-number">255</span><span class="code-text">)</span></code>). Poprawny zapis to więc <code><span class="code-keyword">color</span><span class="code-text">:</span> <span class="code-variable">blue</span><span class="code-text">;</span></code>. Dlatego to ta deklaracja ustawia niebieski kolor tekstu.

Pytanie 20

Do czego służy reguła float: left; zastosowana do elementu blokowego?

A. do wyrównania tekstu do lewej
B. do wyrównania elementów tabeli do lewej
C. do ustawienia bloku po lewej, by inne elementy go oblewały
D. do układania bloków jeden pod drugim

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Reguła <code><span class="code-keyword">float</span><span class="code-text">:</span> <span class="code-variable">left</span><span class="code-text">;</span></code> wyjmuje element blokowy z normalnego układu i dosuwa go do LEWEJ, pozwalając pozostałej treści (np. tekstowi) opływać go z prawej strony. Dlatego <code><span class="code-keyword">float</span><span class="code-text">:</span> <span class="code-variable">left</span><span class="code-text">;</span></code> ustawia blok po lewej tak, by inne elementy go oblewały.

Pytanie 21

Jak powinien być zapisany kolor 255 12 12 w modelu RGB na stronie www?

A. #2551212
B. #EE0C0C
C. #AB1A1D
D. #FF0C0C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor 255, 12, 12 w modelu RGB oznacza maksymalne nasycenie koloru czerwonego oraz bardzo niskie wartości zielonego i niebieskiego. Zapis w postaci heksadecymalnej, który jest stosowany w projektowaniu stron internetowych, polega na konwersji wartości RGB do formatu szesnastkowego. W tym przypadku, wartość 255 w systemie dziesiętnym odpowiada FF w systemie szesnastkowym, co oznacza maksymalne nasycenie koloru czerwonego. Wartość 12 w systemie dziesiętnym odpowiada 0C, co jest zbyt niską wartością zarówno dla zielonego, jak i niebieskiego. Dlatego pełny zapis koloru RGB 255, 12, 12 w formacie heksadecymalnym to #FF0C0C. Użycie standardu heksadecymalnego (hex) jest powszechne w CSS, gdzie kolory są definiowane za pomocą szesnastkowych wartości. Przykładowo, aby ustawić tło elementu w CSS na ten kolor, można użyć zapisu: 'background-color: #FF0C0C;'. Warto zrozumieć, że poprawne użycie systemów kolorów RGB i hex jest kluczowe w projektowaniu graficznym i webowym, ponieważ wpływa na estetykę i użyteczność interfejsów użytkownika.

Pytanie 22

W programie do edytowania grafiki rastrowej zmieniono krzywe kolorów w sposób zaznaczony ramką na pokazanym obrazie. Jakie jest to działanie?

Ilustracja do pytania
A. przyciemnienie całego obrazu
B. rozjaśnienie całego obrazu
C. wygładzenie krawędzi na obrazie
D. modyfikację najjaśniejszych i najciemniejszych kolorów obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Modyfikacja krzywych kolorów w programach do obróbki grafiki rastrowej jest zaawansowanym narzędziem służącym do precyzyjnej regulacji tonalnej obrazu. Krzywe pozwalają na kontrolę nad najjaśniejszymi i najciemniejszymi partiami obrazu poprzez modyfikację kanałów RGB lub wartości jasności. W zaznaczonej na obrazku ramce widać, że punkty kontrolne krzywej zostały przesunięte, co wskazuje na zmianę tonacji skrajnych wartości jasności. Tego typu operacja jest często stosowana w celu poprawy kontrastu i ogólnego wyglądu zdjęcia. Standardową praktyką jest tu podnoszenie i opuszczanie punktów na krzywej, co daje możliwość uwydatnienia szczegółów w cieniach oraz światłach bez wpływu na średnie tony. Modyfikacja krzywych jest zgodna z profesjonalnymi standardami edycji, ponieważ umożliwia uzyskanie efektów niedostępnych przy użyciu prostych suwaków jasności lub kontrastu. Praktyczne zastosowanie znajduje m.in. w fotografii portretowej, gdzie często konieczne jest subtelne dostosowanie tonacji skóry oraz w krajobrazach, gdzie ważne jest zachowanie detali w jasnych niebie i ciemnych cieniach ziemi. Stosując krzywe, można precyzyjnie regulować każdy aspekt tonalny obrazu, co jest kluczowe w profesjonalnej edycji graficznej.

Pytanie 23

Którą operacją usuwa się zbędne krawędzie zdjęcia, wycinając z niego wybrany fragment?

A. dodaniem kanału alfa
B. zmianą saturacji
C. zmniejszeniem jasności
D. kadrowaniem

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kadrowanie (crop) to wycięcie z obrazu wybranego FRAGMENTU - usuwa zbędne krawędzie, zostawiając tylko interesujący wycinek, bez zmiany barw. Dlatego tą operacją jest kadrowanie.

Pytanie 24

W HTML, aby dodać obrazek z tekstem przylegającym, umiejscowionym na środku obrazka, trzeba użyć znacznika

A. <img src="/obrazek.png" alt="obraz1" hspace="30px">tekst
B. <img src="/obrazek.png" alt="obraz2" align="middle">tekst
C. <img src="/obrazek.png" alt="obraz4">tekst
D. <img src="/obrazek.png" alt="obraz3" height="50%">tekst

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby wstawić obrazek z tekstem przyległym w HTML, należy skorzystać ze znacznika <img> z atrybutem align ustawionym na 'middle'. Atrybut align jest przestarzały w HTML5, ale nadal może być używany w kontekście tekstów przylegających do obrazków. Ustawiając 'middle', obrazek będzie wyśrodkowany w pionie względem linii tekstu, co pozwala na estetyczne umiejscowienie obrazu w odniesieniu do towarzyszącego mu tekstu. Dobrym przykładem jest zastosowanie <img src='/obrazek.png' alt='obraz2' align='middle'>tekst, co sprawia, że obrazek staje się integralną częścią tekstu, a nie tylko jego dodatkiem. W kontekście standardów, warto zauważyć, że HTML5 zaleca stosowanie CSS do pozycjonowania, dlatego bardziej współczesnym podejściem byłoby użycie stylów CSS, np. 'vertical-align: middle'. Można to osiągnąć poprzez dodanie klasy do obrazka oraz odpowiedniego stylu CSS. Chociaż align jest przestarzały, jego rozumienie jest istotne dla osób przystosowujących starsze strony do nowych standardów.

Pytanie 25

Analizując poniższy kod HTML, jak w przeglądarce zachowa się blok B względem bloku A?

<div>A</div>
<div style="margin-top: 20px">B</div>
A. bloki A i B będą nachodzić na siebie
B. blok B będzie oddalony od bloku A o 20 px
C. zostanie ustawiony dolny margines bloku B
D. blok A zostanie przesunięty w lewo o 20 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Drugi <code><span class="code-text">&lt;</span><span class="code-keyword">div</span><span class="code-text">&gt;</span></code> (blok B) ma w atrybucie <code><span class="code-variable">style</span></code> ustawione <code><span class="code-keyword">margin-top</span><span class="code-text">:</span> <span class="code-number">20</span><span class="code-variable">px</span></code> - to margines zewnętrzny po GÓRNEJ stronie. Ponieważ blok B leży pod blokiem A, ten 20-pikselowy margines tworzy odstęp nad B, odsuwając go w dół od A. Dlatego blok B będzie oddalony od bloku A o 20 px.

Pytanie 26

W języku HTML, aby uzyskać efekt podobny do tego w przykładzie, trzeba użyć konstrukcji

Ilustracja do pytania
A. <p><big>Duży tekst</big> zwykły tekst</p>
B. <p><strike>Duży tekst</strike> zwykły tekst</p>
C. <p><big>Duży tekst</p> zwykły tekst
D. <p><strike>Duży tekst zwykły tekst</p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ w języku HTML, aby zwiększyć rozmiar czcionki dla części tekstu, można użyć znacznika <big>. Znacznik ten powoduje, że tekst wewnątrz jest wyświetlany w większym rozmiarze niż tekst otaczający. Jest to przydatne w sytuacjach, gdy chcemy wyróżnić część tekstu bez stosowania zaawansowanego stylu CSS. Chociaż <big> jest uznawany za przestarzały w nowoczesnym HTML, dla celów edukacyjnych i zgodności z starszymi dokumentami HTML wciąż może być stosowany. Praktyką zalecaną w aktualnych standardach jest używanie stylów CSS, np. poprzez przypisanie klasy lub bezpośrednie stylowanie in-line. Warto zaznaczyć, że stosowanie <big> nie jest zalecane w nowych projektach, ponieważ CSS oferuje większą elastyczność i kontrolę nad wyglądem tekstu. Niemniej jednak, znajomość takich znaczników jak <big> pomaga w zrozumieniu, jak rozwijał się HTML i jakie są różnice między starszymi a nowoczesnymi metodami formatowania tekstu.

Pytanie 27

Aplikacja o nazwie FileZilla umożliwia

A. publikację strony internetowej na zdalnym serwerze
B. przeprowadzanie testów aplikacji
C. sprawdzanie poprawności plików HTML i CSS
D. importowanie bazy danych do systemu CMS Joomla!

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
FileZilla to popularny klient FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików pomiędzy lokalnym komputerem a zdalnym serwerem. Głównym celem korzystania z FileZilla jest publikacja stron internetowych, co polega na załadowaniu plików HTML, CSS, obrazków oraz innych zasobów na serwer, gdzie strona będzie dostępna dla użytkowników w Internecie. Dzięki intuicyjnemu interfejsowi, użytkownicy mogą łatwo przeciągać i upuszczać pliki, co przyspiesza proces publikacji. FileZilla obsługuje różne protokoły, w tym FTP, FTPS oraz SFTP, co zapewnia bezpieczeństwo podczas transferu danych. Dobrą praktyką jest regularne aktualizowanie programu, aby korzystać z najnowszych funkcji i poprawek bezpieczeństwa. W kontekście publikacji stron internetowych, FileZilla stanowi kluczowe narzędzie dla web developerów, umożliwiając im szybkie i efektywne zarządzanie plikami na serwerach zdalnych. Używanie FileZilla wspiera standardy branżowe, takie jak bezpieczeństwo transferu danych oraz zdalne zarządzanie plikami, co jest niezbędne w profesjonalnym rozwoju stron internetowych.

Pytanie 28

Którego znacznika NIE NALEŻY umieszczać w nagłówku dokumentu HTML?

A. <meta>
B. <link>
C. <title>
D. <h2>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <h2> jest trafna, bo ten znacznik jest właśnie do nagłówków w HTML. Powinien być używany w sekcji <body>, nie w <head>. Jak dobrze wiesz, nagłówki, czyli <h1> do <h6>, mają spore znaczenie w organizacji tekstu i hierarchii, co wpływa później na SEO i dostępność strony. Dzięki <h2> możesz dodać podtytuł, co sprawia, że tekst jest bardziej przejrzysty i łatwiejszy do zrozumienia. Stosowanie nagłówków w odpowiedni sposób to ważna zasada, żeby dokument miał sens i był logicznie poukładany. Warto też wiedzieć, że znaczniki takie jak <link>, <meta> i <title> są super ważne dla strony, ale pełnią inne funkcje niż nagłówki. Więc ogólnie rzecz biorąc, fajnie, że to rozumiesz!

Pytanie 29

Wskaż fragment kodu CSS, który odpowiada układowi bloków 2 - 5, zakładając, że są one oparte na poniższym kodzie HTML.

Ilustracja do pytania
A. C
B. B
C. D
D. A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest poprawna, ponieważ skutecznie rozmieszcza bloki 2 5 w zgodzie z przedstawionym układem HTML. Użycie właściwości float pozwala na precyzyjne kontrolowanie położenia elementów w układzie blokowym. W tym przypadku float left dla bloków #drugi i #trzeci oraz float right dla #czwarty sprawiają że bloki są odpowiednio rozstawione. Dodatkowo #piaty z float left zapewnia jego poprawne umiejscowienie poniżej bloku #trzeci. To rozwiązanie jest zgodne z dobrymi praktykami w projektowaniu responsywnych layoutów gdzie float jest używane do budowania elastycznych struktur. Ważne jest także odpowiednie zarządzanie szerokościami elementów aby nie przekraczały 100% szerokości kontenera a także uwzględnienie zastosowania clearfix aby uniknąć problemów z przepływem elementów. Poprawne zrozumienie float oraz szerokości w CSS jest kluczowe w tworzeniu zgodnych z standardami projektów internetowych co pozwala na lepszą skalowalność i utrzymanie strony w przyszłości.

Pytanie 30

W CSS, aby ustalić wewnętrzny górny margines, czyli odstęp pomiędzy elementem a jego obramowaniem, należy zastosować komendę

A. local-top
B. padding-top
C. border-top
D. outline-top

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'padding-top' jest prawidłowa, ponieważ w CSS termin 'padding' odnosi się do wewnętrznego odstępu, który tworzy przestrzeń pomiędzy zawartością elementu a jego granicą (border). 'padding-top' specyfikuje górny odstęp wewnętrzny, co jest istotne w kontekście estetyki i układu strony. Definiując 'padding-top', możemy dostosować wygląd elementów, aby lepiej pasowały do reszty projektu i poprawiły czytelność. Na przykład, jeśli mamy przycisk z tekstem, użycie 'padding-top: 10px;' zapewni, że tekst nie będzie przyklejony do górnego brzegu przycisku, co zwiększy jego estetykę oraz użyteczność. W praktyce dobrą praktyką jest również stosowanie 'padding' w połączeniu z 'margin', aby osiągnąć odpowiednią separację między różnymi elementami w układzie. Przestrzeganie standardów CSS pomaga w tworzeniu responsywnych i dostosowanych układów, które dobrze działają na różnych urządzeniach.

Pytanie 31

Którego znacznika należy użyć, aby przejść do nowej linii tekstu, nie tworząc nowego akapitu?

A.
<p>
B.
<br>
C.
</br>
D.
</b>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <code><span class="code-text">&lt;</span><span class="code-keyword">br</span><span class="code-text">&gt;</span></code> wymusza złamanie wiersza - przenosi dalszy tekst do nowej linii, nie rozpoczynając przy tym nowego akapitu ani dodatkowych odstępów. Jest to element pusty (void), więc w HTML5 zapisuje się go bez ukośnika i bez znacznika zamykającego (poprawnie <code><span class="code-text">&lt;</span><span class="code-keyword">br</span><span class="code-text">&gt;</span></code>, a nie <code><span class="code-text">&lt;/</span><span class="code-keyword">br</span><span class="code-text">&gt;</span></code>). Używa się go np. w adresach czy wierszach wiersza, gdzie liczy się dokładny podział linii. Do oddzielania bloków tekstu właściwy jest jednak akapit <code><span class="code-text">&lt;</span><span class="code-keyword">p</span><span class="code-text">&gt;</span></code>. Dlatego nową linię bez akapitu daje <code><span class="code-text">&lt;</span><span class="code-keyword">br</span><span class="code-text">&gt;</span></code>.

Pytanie 32

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

A. HTML 4.01 Transitional
B. HTML 4.01 Strict
C. XHTML 1.1
D. HTML5

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki <header>, <article>, <section> oraz <footer> są częścią standardu HTML5, który wprowadza nowe semantyczne elementy, mające na celu poprawę struktury dokumentów HTML. Element <header> używany jest do definiowania nagłówków sekcji lub całej strony, co ułatwia nawigację i zrozumienie układu treści. <article> natomiast służy do oznaczania samodzielnych jednostek treści, które mogą być niezależnie dystrybuowane lub zrozumiane. <section> dzieli dokument na tematyczne sekcje, a <footer> zazwyczaj zawiera informacje o autorze, prawach autorskich czy linki do powiązanych materiałów. Stosowanie tych elementów zgodnie z ich przeznaczeniem sprzyja lepszej dostępności oraz optymalizacji SEO, ponieważ wyszukiwarki mogą lepiej interpretować strukturę strony. Przykładem zastosowania może być blog, w którym każdy post jest oznaczony jako <article>, co pozwala systemom wyszukiwania na łatwiejsze indeksowanie poszczególnych wpisów. Warto pamiętać, że HTML5 wspiera także inne aspekty nowoczesnego web designu, takie jak media, formularze i API, co czyni go standardem przyszłości.

Pytanie 33

Aby wyeliminować nienaturalne odwzorowanie ukośnych krawędzi w grafice rastrowej, czyli tak zwane schodkowanie, należy zastosować filtr:

A. gradientu
B. szumu
C. antyaliasingu
D. pikselizacji

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Schodkowanie (aliasing) to widoczne „schodki” na ukośnych i zaokrąglonych krawędziach w grafice rastrowej, która składa się z kwadratowych pikseli. Antyaliasing usuwa ten efekt: na granicy kształtu wprowadza piksele o kolorach pośrednich między obiektem a tłem, dzięki czemu przejście wygląda płynnie i naturalnie. Stosuje się go przy renderowaniu czcionek, kształtów i krawędzi grafiki na strony internetowe. Dlatego to właśnie filtr antyaliasingu odpowiada za wygładzenie schodkowania.

Pytanie 34

Plik HTML jest w folderze www/html/, a styl.css w www/style/. Jak poprawnie (ścieżką względną) dołączyć arkusz w pliku HTML?

A.
<link rel="stylesheet" href="../style/styl.css">
B.
<link rel="stylesheet" href="styl.css">
C.
<link rel="stylesheet" href="style/styl.css">
D.
<link rel="stylesheet" href="www/style/styl.css">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Ścieżka względna prowadzi „od miejsca, w którym jesteśmy”. Plik HTML leży w <code><span class="code-variable">www</span><span class="code-text">/</span><span class="code-variable">html</span><span class="code-text">/</span></code>, a arkusz w <code><span class="code-variable">www</span><span class="code-text">/</span><span class="code-variable">style</span><span class="code-text">/</span></code>, więc trzeba najpierw cofnąć się o katalog w górę (<code><span class="code-text">.</span><span class="code-text">.</span><span class="code-text">/</span></code> prowadzi do <code><span class="code-variable">www</span><span class="code-text">/</span></code>), a potem zejść do <code><span class="code-variable">style</span><span class="code-text">/</span></code>. Daje to <code><span class="code-variable">href</span><span class="code-text">=</span><span class="code-string">"../style/styl.css"</span></code>.

Pytanie 35

Ile maksymalnie znaczników <td> może być zastosowanych w tabeli, która ma trzy kolumny oraz trzy wiersze, nie zawierając przy tym złączeń komórek i wiersza nagłówkowego?

A. 9
B. 6
C. 3
D. 12

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 9 jest prawidłowa, ponieważ w tabeli o trzech kolumnach i trzech wierszach, gdzie nie ma złączeń komórek ani wiersza nagłówkowego, maksymalna liczba znaczników <td> wynosi 9. Każda kolumna w każdym wierszu może być wypełniona osobnym znacznikiem <td>. Tabela składająca się z 3 wierszy i 3 kolumn daje w sumie 3 x 3 = 9 komórek, które są reprezentowane przez znaczniki <td>. Przykładową strukturę HTML takiej tabeli można przedstawić następująco: <table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>. Warto również zauważyć, że zgodnie z zaleceniami W3C, użycie odpowiednich znaczników w tabelach jest kluczowe dla zapewnienia właściwej dostępności i semantyki dokumentu HTML, co jest zgodne z dobrymi praktykami tworzenia stron internetowych.

Pytanie 36

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

A. Ogg, QuickTime
B. Ogg, AVI, MPEG
C. MP4, AVI
D. MP4, Ogg, WebM

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź MP4, Ogg, WebM jest prawidłowa, ponieważ wszystkie te formaty są zgodne ze standardem HTML5 i są powszechnie stosowane w aplikacjach internetowych. MP4, z wykorzystaniem kodeka H.264, zapewnia wysoką jakość obrazu i dźwięku przy stosunkowo małych rozmiarach plików, co czyni go jednym z najpopularniejszych formatów w sieci. Ogg, szczególnie w wersji Vorbis dla audio i Theora dla wideo, jest otwartym formatem, co oznacza, że nie wymaga licencji na użycie, co sprzyja jego zastosowaniu w projektach, które preferują otwarte technologie. WebM, stworzony przez Google, również korzysta z otwartych kodeków, takich jak VP8/VP9 dla wideo oraz Vorbis/Opus dla audio, co czyni go idealnym do zastosowań w środowisku internetowym. W praktyce, korzystając z tych formatów, deweloperzy mogą zapewnić szeroką kompatybilność z różnymi przeglądarkami oraz urządzeniami, co jest kluczowe w kontekście dostępności treści multimedialnych dla użytkowników. Warto również zwrócić uwagę na dobór formatów w kontekście SEO oraz szybkości ładowania stron, gdyż odpowiednia konfiguracja może wpływać na wyniki w wyszukiwarkach oraz doświadczenie użytkownika.

Pytanie 37

Który z poniższych fragmentów kodu HTML5 zostanie uznany za niepoprawny przez walidator HTML?

A. <pre>&lt;p class= &quot;stl&quot;&gt;tekst&lt;/p&gt;</pre>
B. <pre>&lt;p class= &quot;stl&quot; id= &quot;a&quot;&gt;tekst&lt;/p&gt;</pre>
C. <pre>&lt;p class= &quot;stl&quot; style= &quot;color: #F00 &quot;&gt;tekst&lt;/p&gt;</pre>
D. <pre>&lt;p class= &quot;stl&quot;&gt;&lt;style&gt;.a{color:#F00}&lt;/style&gt;tekst&lt;/p&gt;</pre>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, która została wskazana jako błędna, jest przykładem kodu HTML5, który nie spełnia standardów walidacji, ponieważ zawiera tag &lt;style&gt; wewnątrz tagu &lt;p&gt;. Zgodnie z wytycznymi HTML, tag &lt;style&gt; powinien znajdować się w sekcji &lt;head&gt; dokumentu, a nie w treści. Wstawianie stylów CSS bezpośrednio w treści elementu blokowego jest niepraktyczne i niezgodne z dobrymi praktykami, które zalecają separację treści od prezentacji. Dobrą praktyką jest stosowanie arkuszy stylów CSS do zewnętrznego formatowania dokumentów, aby zwiększyć ich dostępność i ułatwić późniejsze modyfikacje. Przykładowo, zamiast używać tagu &lt;style&gt; wewnątrz &lt;p&gt;, należy zdefiniować style w sekcji &lt;head&gt; lub w zewnętrznym pliku CSS, a następnie odwołać się do tych klas w treści dokumentu. W ten sposób utrzymujemy porządek w kodzie i zapewniamy, że będzie on zgodny z zaleceniami W3C, co przekłada się na lepszą kompatybilność z przeglądarkami i urządzeniami. Zatem, poprawne podejście polega na unikalnym zarządzaniu stylami oraz treściami, co jest kluczowe dla efektywnego tworzenia stron internetowych.

Pytanie 38

Kolor Chartreuse przedstawiony w formie heksadecymalnej jako #7FFF00 odpowiada wartości RGB wynoszącej

A. rgb(192, 255, 0)
B. rgb(127, 255, 0)
C. rgb(128, 255, 0)
D. rgb(64, 255, 0)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rgb(127, 255, 0) jest poprawna, ponieważ odpowiada wartościom RGB z koloru Chartreuse zapisanego w postaci heksadecymalnej #7FFF00. W systemie heksadecymalnym, pierwsze dwa znaki (7F) odpowiadają wartości czerwonej (R), drugie dwa znaki (FF) wartości zielonej (G), a ostatnie dwa znaki (00) wartości niebieskiej (B). Przekształcając te wartości na system dziesiętny, 7F w heksadecymalnym to 127 w dziesiętnym, FF to 255, a 00 to 0. Użycie tego koloru w projektach graficznych, web designie czy w aplikacjach mobilnych jest szerokie, zwłaszcza w kontekście tworzenia interfejsów użytkownika, gdzie Chartreuse może być wykorzystany jako kolor akcentujący, przyciągający uwagę. Dobrą praktyką jest stosowanie kolorów o wysokim kontraście dla elementów interaktywnych, co sprawia, że korzystanie z tak żywego koloru jak Chartreuse może poprawić użyteczność oraz estetykę projektu. Warto również zaznaczyć, że znajomość konwersji kolorów między różnymi modelami (HEXA, RGB, CMYK) jest kluczowa dla każdego projektanta wizualnego, z uwagi na różne zastosowania w druku i w mediach cyfrowych.

Pytanie 39

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. GIF
B. SVG
C. SWF
D. ACE

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format ACE (Archive Compressed Enhanced) jest formatem archiwum, który służy do kompresji danych, a nie do przechowywania animacji. W przeciwieństwie do formatów takich jak SWF, SVG czy GIF, ACE nie jest projektowany do obsługi grafiki ruchomej. SWF to format opracowany przez Adobe, który jest używany do tworzenia i wyświetlania animacji we Flashu. SVG to wektorowy format grafiki, który również wspiera animacje za pomocą CSS i JavaScript. GIF, z kolei, jest jednym z najpopularniejszych formatów do zapisu prostych animacji, dzięki możliwości przechowywania wielu klatek w jednym pliku. Zrozumienie różnic między tymi formatami jest istotne w kontekście tworzenia treści multimedialnych, a także w kontekście ich zastosowań w sieci. Wybór odpowiedniego formatu do animacji może mieć wpływ na wydajność ładowania strony, jakość wizualną oraz możliwości interakcji z użytkownikami.

Pytanie 40

Którego znacznika użyć, aby umieścić na stronie animację Flash (.swf)?

A.
<audio>
B.
<video>
C.
<img>
D.
<object>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Animację Flash (plik <code><span class="code-text">.</span><span class="code-variable">swf</span></code>) osadza się na stronie znacznikiem <code><span class="code-text">&lt;</span><span class="code-keyword">object</span><span class="code-text">&gt;</span></code> - to uniwersalny kontener na obiekty zewnętrzne obsługiwane przez wtyczki (kiedyś Flash Player), z parametrami podawanymi w <code><span class="code-text">&lt;</span><span class="code-keyword">param</span><span class="code-text">&gt;</span></code>. Warto pamiętać, że Flash jest dziś technologią wycofaną i przeglądarki go nie wspierają - współcześnie animacje robi się w HTML5/CSS lub <code><span class="code-text">&lt;</span><span class="code-keyword">canvas</span><span class="code-text">&gt;</span></code>. Mimo to formalnie poprawnym kontenerem dla <code><span class="code-text">.</span><span class="code-variable">swf</span></code> jest <code><span class="code-text">&lt;</span><span class="code-keyword">object</span><span class="code-text">&gt;</span></code>.