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: 8 czerwca 2026 09:54
  • Data zakończenia: 8 czerwca 2026 10:22

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Pochwal się swoim wynikiem!
Szczegółowe wyniki:
Pytanie 1

W języku działającym po stronie serwera tworzysz ankietę, której wynik ma być zapamiętany w postaci małego pliku po stronie użytkownika. Jaki mechanizm wykorzystasz?

A. sesję
B. bazę danych SQL
C. tablicę globalną $_FILES
D. ciasteczka (cookies)
Ciasteczko (cookie) to niewielki plik zapisywany przez serwer w przeglądarce użytkownika i odsyłany przy kolejnych żądaniach. Idealnie nadaje się do zapamiętania drobnej informacji po stronie klienta, np. że ktoś wziął już udział w ankiecie. W PHP ustawia się je funkcją setcookie(). Dlatego dane zapisywane w małym pliku u użytkownika to ciasteczka.

Pytanie 2

Strona internetowa została napisana w języku XHTML. Który z poniższych kodów przedstawia implementację zamieszczonego fragmentu strony, przy założeniu, że nie zdefiniowano żadnych stylów CSS?

Ilustracja do pytania
A. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<i>prototyp hipertekstowego systemu informacyjnego - <b>ENQUIRE</b></i></p>
B. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
C. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
D. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>
Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.

Pytanie 3

Podczas walidacji witryn internetowych nie analizuje się

A. błędów w składni kodu
B. działania hiperlinków
C. źródła pochodzenia narzędzi edycyjnych
D. zgodności z różnymi przeglądarkami
W procesie walidacji stron internetowych, źródło pochodzenia narzędzi edytorskich nie jest przedmiotem analizy, ponieważ walidacja koncentruje się na technicznych aspektach kodu HTML, CSS i JavaScript, które wpływają na funkcjonalność oraz dostępność strony. Główne obszary walidacji obejmują zgodność z przeglądarkami, co oznacza, że strona powinna działać poprawnie w różnych środowiskach przeglądarkowych. Działania linków są również monitorowane, aby zapewnić, że wszystkie odnośniki kierują do właściwych lokalizacji oraz nie prowadzą do błędów 404. Błędy składni kodu są kluczowe, ponieważ mogą znacząco wpłynąć na sposób, w jaki strona jest renderowana przez przeglądarki. Przykładowo, walidatory HTML, takie jak W3C Validator, pomagają identyfikować błędy i ostrzegają o problemach, które mogą wpłynąć na dostępność i SEO strony. Dobre praktyki wymuszają, aby każda strona internetowa była nie tylko estetyczna, ale przede wszystkim funkcjonalna i zgodna z obowiązującymi standardami, co przekłada się na lepsze doświadczenia użytkowników.

Pytanie 4

Zawartość kodu w języku HTML umieszczona w ramce ilustruje zestaw

<ol>
<li>Pierwszy</li>
<li>Drugi</li>
<li>Trzeci</li>
</ol>
A. skróconych
B. wypunktowanej
C. linków
D. numerowanej
W przypadku odpowiedzi sugerujących że kod przedstawia listę odnośników wypunktowaną lub skrótów dochodzi do błędnego zrozumienia funkcji tagów HTML. Tag <ol> oznacza ordered list co wskazuje na listę numerowaną. Dla listy odnośników w HTML używa się zazwyczaj połączenia tagów <ul> dla listy wypunktowanej oraz <a> dla samych odnośników. Lista wypunktowana która jest tworzona przy pomocy tagu <ul> różni się od listy numerowanej tym że przed każdym elementem wyświetlany jest punkt bądź inny symbol zamiast numeru. Natomiast lista skrótów oznaczana jest za pomocą tagu <dl> dla całej listy oraz <dt> i <dd> dla poszczególnych elementów co pozwala na prezentację par termin-definicja. Mylenie tych struktur wynika z nieuwzględnienia roli i znaczenia poszczególnych tagów co może prowadzić do błędnej interpretacji kodu i jego funkcji w przeglądarce. Właściwe zrozumienie różnic między tymi elementami jest kluczowe w projektowaniu intuicyjnych i zgodnych ze standardami interfejsów użytkownika w sieci co wpływa na użyteczność i dostępność stron internetowych.

Pytanie 5

Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?

<style> td {padding: 30px; } </style>

<td style="padding: 10px;">Anna</td>
<td>Ewa</td>
A. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 px
B. marginesy wewnętrzne wszystkich komórek wyniosą 30 px
C. marginesy wewnętrzne wszystkich komórek wyniosą 10 px
D. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px
Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.

Pytanie 6

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

A. Photoshop, Gimp, JavaScript
B. CMS PrestaShop, CSS, Gimp
C. HTML, CSS, Photoshop
D. CMS WordPress, HTML, Gimp
Podczas analizy innych odpowiedzi można zauważyć, że każda z nich zawiera nieodpowiednie elementy, które nie odpowiadają wymaganiom pracy administratora sklepu internetowego. W przypadku odpowiedzi zawierających Photoshop, Gimp oraz JavaScript, chociaż umiejętności graficzne są ważne, JavaScript nie jest priorytetowy w kontekście zarządzania treścią w systemach e-commerce, takich jak PrestaShop. JavaScript głównie służy do tworzenia dynamicznych interfejsów użytkownika, co może być mniej istotne, gdyż wiele funkcjonalności jest już zintegrowanych w CMS. Z kolei Photoshop i Gimp, choć przydatne, nie są kluczowe w administracji samego systemu. Ponadto, odpowiedzi związane z CMS WordPress, HTML i Gimp również mijają się z celem, ponieważ WordPress nie jest dedykowany wyłącznie do e-commerce, podczas gdy PrestaShop został stworzony specjalnie dla sklepów internetowych. HTML jest użyteczny, ale nie jest wystarczający dla administratora, który musi również znać specyfikę CMS-a. W rezultacie, brak pełnego zrozumienia różnic między platformami oraz ich zastosowaniami prowadzi do błędnych wniosków o wymaganych umiejętnościach, co podkreśla znaczenie dokładnej analizy potrzeb w kontekście danej roli zawodowej.

Pytanie 7

Jakiej opcji w edytorze grafiki rastrowej należy użyć, aby przygotować obraz do wyświetlenia na stronie w taki sposób, aby widoczna była tylko część znajdująca się w obrębie ramki?

Ilustracja do pytania
A. Perspektywa
B. Kadrowanie
C. Skalowanie
D. Odbicie
Odbicie polega na symetrycznym odwróceniu obrazu i choć jest użyteczne w niektórych kontekstach artystycznych, nie ma związku z wyborem fragmentu obrazu do wyświetlania. Perspektywa to technika zmieniająca głębię i kąt widzenia, co może być użyteczne w tworzeniu wrażenia trójwymiarowości, ale nie rozwiązuje problemu selekcji widocznych elementów. Skalowanie dotyczy zmiany rozmiaru obrazu, co jest przydatne przy dostosowywaniu grafiki do różnych rozdzielczości, ale nie zapewnia wycięcia określonego fragmentu. Często błędem jest myślenie, że skalowanie zastępuje kadrowanie, jednak zmniejsza ono cały obraz, nie pozwalając na skupienie się na wybranej części. Te nieporozumienia mogą wynikać z braku zrozumienia różnych narzędzi edycji, które mają swoje specyficzne zastosowania. Kadrowanie jest jedyną metodą, która pozwala na selektywne wycięcie i prezentację obszaru obrazu, co jest niezbędne przy projektowaniu elementów stron internetowych. Właściwe opanowanie różnych funkcji edytora grafiki jest kluczowe dla osiągnięcia profesjonalnych efektów wizualnych i optymalizacji projektu. Każda technika ma swoje unikalne zastosowania, a umiejętność ich odpowiedniego użycia wpływa na jakość końcowego produktu multimedialnego. Dlatego zrozumienie różnic między tymi funkcjami jest istotne dla skutecznej pracy z grafiką cyfrową.

Pytanie 8

Jaki minimalny kontrast tekstu (standardowego rozmiaru) do tła wymaga WCAG 2.x na poziomie AA?

A. 4,5 : 1
B. 2,5 : 1
C. 2,0 : 1
D. 1,5 : 1
Pozostałe wartości są zbyt niskie, by spełnić AA dla zwykłego tekstu. Kontrasty 1,5:1, 2,0:1 czy 2,5:1 dają tekst trudny do odczytania na tle. Wymagane minimum WCAG AA dla standardowego tekstu to 4,5:1.

Pytanie 9

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

A. jedynie small, smaller, large, larger
B. wyłącznie small, medium, large
C. zaledwie big oraz small
D. z zestawu xx-small, x-small, medium, large, x-large, xx-large
W kontekście właściwości font-size w CSS, niektóre odpowiedzi zawierają błędne założenia, które mogą prowadzić do niepełnego zrozumienia możliwości tej właściwości. Warto zauważyć, że ograniczenie się jedynie do wartości small, smaller, large i larger ignoruje szerszy zestaw dostępnych opcji, które są kluczowe dla dokładnego dostosowania rozmiaru tekstu. Wartości takie jak medium, small, and large są jedynie częścią zdefiniowanego standardu, który obejmuje również bardziej szczegółowe rozmiary, takie jak xx-small, x-small, x-large oraz xx-large. Użytkownicy często mylą pojęcia związane z nazwami wartości, co prowadzi do mniejszych możliwości stylizacji. Przykładem jest niewłaściwe skupienie się na biedniejszych zasobach słownych, takich jak big i small, które nie są standardowymi wartościami CSS. Taki błąd myślowy ogranicza możliwość pełnego wykorzystania CSS, co jest kluczowe dla tworzenia nowoczesnych, responsywnych stron internetowych. W praktyce, pełne zrozumienie i umiejętność wykorzystania wszystkich dostępnych wartości w CSS nie tylko ułatwia pracę nad projektem, ale również przyczynia się do lepszej dostępności i doświadczeń użytkowników. Zastosowanie poprawnych terminów i wartości jest niezbędne, aby zachować profesjonalizm w projektowaniu stron.

Pytanie 10

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. stylizację tekstu za pomocą dostępnych znaczników
B. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych
C. określenie kaskadowych arkuszy stylów przypisanych do strony
D. przygotowanie szablonu witryny internetowej
Wybór odpowiedzi dotyczącej definiowania kaskadowych arkuszy stylów (CSS) w kontekście funkcji drzewa kontekstowego w Adobe Dreamweaver jest mylący. Kaskadowe arkusze stylów są narzędziem służącym do stylizacji stron internetowych, ale nie są bezpośrednio związane z funkcjonalnością drzewa kontekstowego, które koncentruje się na przedstawieniu struktury HTML dokumentu. Kiedy projektant korzysta z edytora, może wprowadzać zmiany w stylach CSS, jednak drzewo kontekstowe nie jest dedykowane temu procesowi. Ponadto, zrozumienie struktury HTML jest kluczowe do efektywnego stosowania CSS, ale to nie oznacza, że można je mylić. Druga odpowiedź, dotycząca tworzenia szablonu strony internetowej, jest również nieprecyzyjna. Szablony są narzędziem do ułatwienia konstrukcji stron, ale drzewo kontekstowe nie jest bezpośrednio związane z ich tworzeniem. Podobnie, formatowanie tekstu przy pomocy znaczników nie jest funkcją drzewa kontekstowego; jest to zadanie edytora WYSIWYG jako całości. Zrozumienie tych koncepcji technicznych jest kluczowe, aby uniknąć typowych pułapek myślowych, takich jak mylenie różnych funkcji edytorów oraz ich zastosowań w procesie tworzenia stron internetowych. Osoby pracujące w branży powinny być dobrze zaznajomione z odpowiedzialnością, jaką niesie ze sobą poprawne stosowanie narzędzi i technologii, aby efektywnie realizować projekty webowe.

Pytanie 11

Która wartość tekstowa nie pasuje do podanego w ramce wzorca wyrażenia regularnego?

(([A-ZŁŻ][a-ząęóżźćńłś]{2,})(-[A-ZŁŻ][a-ząęóżźćńłś]{2,})?)
A. Nowakowska-Kowalska
B. Kasprowicza
C. Jelenia Góra
D. Kowalski
Wszystkie pozostałe wartości tekstowe, takie jak Kowalski, Kasprowicza oraz Nowakowska-Kowalska, spełniają wymagania określone przez wzorzec wyrażenia regularnego. Kowalski to przykład pojedynczego nazwiska, które zaczyna się od dużej litery oraz zawiera wystarczającą liczbę małych liter, co czyni je poprawnym. Kasprowicza również jest poprawne, gdyż zawiera dużą literę na początku, a następnie dwa znaki małe, co jest zgodne z wymaganiami. Dodatkowo, oba nazwiska nie zawierają spacji ani innych znaków, które mogłyby zakłócić strukturę wyrażenia regularnego. Nowakowska-Kowalska jest przykładem podwójnego nazwiska, które jest również zgodne z wzorcem, ponieważ składa się z dwóch części, oddzielonych znakiem '-' i każda z nich zaczyna się od dużej litery, a następnie zawiera co najmniej dwa znaki małe. Obie części nazwiska spełniają wymagania dotyczące polskich znaków diakrytycznych oraz ilości liter, dlatego są one uznawane za poprawne. W związku z tym, nieprawidłowa odpowiedź 'Jelenia Góra' wyróżnia się jako jedyna, która narusza zasady ustalone przez wzorzec.

Pytanie 12

Portal internetowy dysponuje bardzo złożonym systemem stylów, który obejmuje style zewnętrzne, wewnętrzne oraz lokalne. Jak można zagwarantować, że określona cecha zdefiniowana w zewnętrznym stylu jest zawsze stosowana do elementu HTML, niezależnie od bardziej priorytetowych stylów?

A. jako pseudoklasę :active
B. przy pomocy pseudoelementu ::after
C. jako selektor potomka
D. przy pomocy reguły !important
Zdefiniowanie cechy za pomocą selektora potomka, pseudoklasy :active lub pseudoelementu ::after to podejścia, które nie spełniają wymaganego celu w kontekście priorytetyzacji stylów CSS. Selektor potomka odnosi się do elementów, które są zagnieżdżone wewnątrz innych elementów i nie zapewnia on wyższego priorytetu. Na przykład, jeśli mamy regułę `div p { color: blue; }`, a później w innym miejscu `p { color: red; }`, kolor tekstu w elemencie <p> będzie czerwony, niezależnie od tego, że jest on dzieckiem <div>. Pseudoklasa :active dotyczy stanu interakcji z elementem, jak naciśnięcie przycisku. Nie można jej używać do stawiania stylów jako domyślnych, ponieważ działa tylko w momencie aktywacji, co nie spełnia wymogu stałego przypisania stylu. Pseudoelement ::after służy do dodawania treści po elemencie, ale również nie wpływa na priorytet wyświetlania stylów. Użycie tych metod w kontekście prób ustalenia stałych cech stylów może prowadzić do nieporozumień i błędów w kodzie, ponieważ nie zapewniają one odpowiedniej kontroli nad priorytetami, co jest kluczowe w projektowaniu stylów CSS. W praktyce, aby uniknąć konfliktów i nieprzewidywalnych rezultatów, zaleca się odpowiednie planowanie struktury styli oraz przejrzystość w używaniu reguły !important tylko tam, gdzie to absolutnie konieczne.

Pytanie 13

W przedstawionym filmie, aby połączyć tekst i wielokąt w jeden obiekt tak, aby operacja ta była odwracalna zastosowano funkcję

A. części wspólnej.
B. sumy.
C. wykluczenia.
D. grupowania.
Prawidłowo – w filmie została użyta funkcja grupowania. W grafice wektorowej, np. w programach typu Inkscape, CorelDRAW czy Illustrator, grupowanie służy właśnie do logicznego połączenia kilku obiektów w jeden „zestaw”, ale bez trwałego mieszania ich geometrii. To znaczy: tekst dalej pozostaje tekstem, wielokąt dalej jest wielokątem, tylko są traktowane jak jeden obiekt przy przesuwaniu, skalowaniu czy obracaniu. Dzięki temu operacja jest w pełni odwracalna – w każdej chwili możesz rozgrupować elementy i edytować każdy osobno.
Moim zdaniem to jest podstawowa dobra praktyka w pracy z projektami, które mogą wymagać późniejszych poprawek: podpisy, etykiety, logotypy, schematy techniczne. Jeśli połączysz tekst z kształtem za pomocą operacji boolowskich (suma, część wspólna, wykluczenie), to tekst zwykle zamienia się na krzywe, przestaje być edytowalny jako tekst. To bywa potrzebne przy przygotowaniu do druku czy eksportu do formatu, który nie obsługuje fontów, ale nie wtedy, gdy zależy nam na łatwej edycji.
Z mojego doświadczenia: przy projektowaniu interfejsów, ikon, prostych banerów na WWW czy grafik do multimediów, najrozsądniej jest najpierw grupować logicznie elementy (np. ikona + podpis), a dopiero na samym końcu, gdy projekt jest ostateczny, ewentualnie zamieniać tekst na krzywe. Grupowanie pozwala też szybko zaznaczać całe moduły projektu, wyrównywać je względem siebie, duplikować całe zestawy (np. kafelki menu, przyciski z opisami) bez ryzyka, że coś się rozjedzie. W grafice komputerowej to taka podstawowa „organizacja pracy” – mniej destrukcyjna niż różne operacje na kształtach i zdecydowanie bardziej elastyczna przy późniejszych zmianach.

Pytanie 14

Aby wybrać z bazy danych rekordy spełniające określone kryteria, należy utworzyć:

A. formularz
B. raport
C. makro
D. kwerendę (zapytanie)
Kwerenda (zapytanie) to obiekt bazy danych, który wybiera rekordy spełniające zadane warunki - odpowiada zapytaniu SELECT ... WHERE w SQL. Można w niej wskazać kolumny, kryteria filtrowania i sortowanie, a wynik wykorzystać dalej w formularzu czy raporcie. Dlatego do wybrania danych wg kryteriów tworzy się kwerendę.

Pytanie 15

Domyślna CAPTCHA
CAPTCHA - reCAPTCHA

W CMS Joomla! opcja konfiguracji globalnej, pokazana na ilustracji, służy do
A. zapobiegania atakom typu SQL Injection.
B. wyświetlenia okna umożliwiającego wyszukiwanie tekstu na stronie.
C. wyświetlania okna informującego o zgodzie użytkownika na pliki cookie.
D. dopuszczenia do przesyłania danych z formularzy wypełnionych tylko przez człowieka.
Opcja pokazana na zrzucie w Joomla! dotyczy domyślnej CAPTCHA, czyli mechanizmu weryfikującego, czy formularz wypełnia człowiek, a nie automat (bot). W praktyce, gdy w konfiguracji globalnej wybierzesz np. „CAPTCHA – reCAPTCHA”, Joomla! będzie mogła używać tego mechanizmu we wszystkich formularzach, które potrafią z CAPTCHA współpracować, np. formularz rejestracji użytkownika, formularz kontaktowy, czasem logowanie czy dodawanie komentarzy w rozszerzeniach.

CAPTCHA działa tak, że dodaje do formularza dodatkowy krok: użytkownik musi zaznaczyć odpowiednie pole („Nie jestem robotem”) albo rozwiązać proste zadanie typu rozpoznanie obrazków. Po stronie serwera (tu: Joomla! + Google reCAPTCHA) sprawdzany jest specjalny token. Jeżeli token jest poprawny, dane z formularza są przyjmowane. Jeżeli nie – formularz jest odrzucany. Dzięki temu znacząco ogranicza się spam, masowe rejestracje fałszywych kont i automatyczne wysyłki z formularzy.

Moim zdaniem w każdym publicznym formularzu, szczególnie na stronach firmowych czy szkolnych, warto mieć poprawnie skonfigurowaną CAPTCHA. To jest jeden z podstawowych elementów dobrych praktyk bezpieczeństwa aplikacji webowych – obok filtrowania danych, ograniczania liczby żądań czy stosowania firewalli aplikacyjnych (WAF). Sama CAPTCHA nie zastąpi innych zabezpieczeń, ale bardzo skutecznie zmniejsza liczbę automatycznych ataków i spamu.

W Joomla! konfiguracja globalna jest o tyle wygodna, że ustawiasz raz domyślny typ CAPTCHA, a potem w poszczególnych komponentach (np. „Użytkownicy”, „Kontakty”) tylko zaznaczasz, że chcesz jej używać. W praktyce oznacza to, że formularze będą przyjmować dane tylko wtedy, gdy człowiek poprawnie przejdzie test CAPTCHA – dokładnie tak, jak opisuje poprawna odpowiedź.

Pytanie 16

Którego znacznika HTML5 użyć do GRUPOWANIA powiązanych elementów formularza?

A.
<option>
B.
<optgroup>
C.
<fieldset>
D.
<summary>
Pozostałe znaczniki dotyczą czego innego. <summary> to nagłówek rozwijanego <details>. <option> to pojedyncza pozycja listy <select>, a <optgroup> grupuje opcje WEWNĄTRZ listy rozwijanej, a nie pola formularza. Powiązane pola formularza grupuje <fieldset>.

Pytanie 17

Która technologia zapewnia SZYFROWANE połączenie ze stroną (HTTPS)?

A. FTP
B. SEO
C. CMS
D. SSL
Pozostałe skróty dotyczą czego innego. CMS to system zarządzania treścią, SEO to optymalizacja pod wyszukiwarki, a FTP to protokół przesyłania plików na serwer. Szyfrowanie połączenia HTTPS zapewnia SSL.

Pytanie 18

Znacznik <pre> </pre> służy do wyświetlania

A. znaku skreślenia
B. znaku wielokropkowego
C. treści czcionką w języku polskim
D. treści czcionką o stałej szerokości
Znacznik <pre> </pre> jest używany do wyświetlania treści w formacie, który zachowuje oryginalny układ oraz czcionkę o stałej szerokości. Umożliwia on prezentację tekstu w takiej formie, w jakiej został wprowadzony, co jest szczególnie przydatne w kontekście kodu źródłowego, danych tabelarycznych lub innych elementów, gdzie zachowanie spacji, łamań linii i innych formatów jest istotne. Przykładem zastosowania znacznika <pre> może być wyświetlanie fragmentów kodu w dokumentacji HTML lub na stronach internetowych, gdzie istotne jest, aby użytkownik mógł widzieć dokładnie, jak kod wygląda, bez modyfikacji przestrzeni lub układu, co jest często problematyczne w przypadku standardowego tekstu HTML. Używanie tego znacznika jest zgodne z dobrymi praktykami w tworzeniu przejrzystych i czytelnych interfejsów, zwłaszcza w kontekście tworzenia stron internetowych o charakterze technicznym.

Pytanie 19

Grafika, która ma być pokazana na stronie, powinna mieć transparentne tło. Podaj format pliku graficznego, w którym należy go zapisać.

A. JPEG
B. PNG
C. BMP
D. CDR
Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla obrazów z przezroczystym tłem, ponieważ obsługuje kanał alpha, który umożliwia definiowanie przezroczystości poszczególnych pikseli. Dzięki temu, gdy obraz PNG jest umieszczany na różnym tle, zachowuje naturalny wygląd i nie wymaga dodatkowego dostosowywania, co jest szczególnie ważne w projektach graficznych, które wymagają elastyczności w prezentacji. Przykładowe zastosowania PNG obejmują ikony, logo oraz wszelkie grafiki, które muszą być nałożone na inne elementy wizualne bez widocznych krawędzi czy tła. W branży grafiki komputerowej oraz web designu, PNG stał się standardem dla materiałów wymagających wysokiej jakości obrazu z zachowaniem przezroczystości. Dobrą praktyką jest również stosowanie PNG w przypadku grafik, które zawierają tekst, ponieważ format ten nie wprowadza strat jakości, co może mieć miejsce w przypadku innych formatów kompresji. Warto również zaznaczyć, że PNG nie traci jakości przy wielokrotnym zapisywaniu, co czyni go preferowanym wyborem tam, gdzie jakość jest kluczowa.

Pytanie 20

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>
Ilustracja do pytania
A. D
B. A
C. C
D. B
Zrozumienie jak działają atrybuty HTML takie jak disabled i checked jest kluczowe dla prawidłowego wyświetlania i funkcjonalności formularzy w przeglądarce. Niektóre z odpowiedzi zawierają błędne interpretacje tych atrybutów co prowadzi do niepoprawnego rozumienia jak formularz będzie prezentowany. Na przykład jeśli pole checkbox nie ma ustawionego atrybutu checked to domyślnie będzie niezaznaczone a użytkownik będzie mógł to zmienić. Dodanie atrybutu checked oznacza że pole będzie zaznaczone od razu po załadowaniu strony. Atrybut disabled uniemożliwia interakcję użytkownika z danym elementem co oznacza że użytkownik nie będzie mógł zmienić jego stanu. Częstym błędem jest założenie że wszystkie pola wyboru mogą być domyślnie edytowalne co nie jest prawdą w przypadku zastosowania atrybutu disabled. Również brak zrozumienia jak kolejność elementów i ich atrybutów wpływa na wizualne i funkcjonalne aspekty formularza może prowadzić do błędnych wniosków dotyczących ich zachowania. Warto pamiętać że prawidłowe zrozumienie tych zasad pozwala na tworzenie bardziej intuicyjnych i użytecznych aplikacji internetowych które spełniają oczekiwania użytkowników i standardy branżowe. Poprawna interpretacja kodu HTML jest więc niezbędna dla każdego profesjonalisty zajmującego się tworzeniem stron i aplikacji internetowych aby zapewnić bezbłędne działanie i łatwość obsługi formularzy przez końcowego użytkownika. Powinno się też zwracać uwagę na dostępność i użyteczność formularzy co jest kluczowym aspektem w procesie projektowania stron internetowych.

Pytanie 21

Jakie formatowanie obramowania jest zgodne ze stylem border-style: dotted solid;?

Ilustracja do pytania
A. Formatowanie 4
B. Formatowanie 2
C. Formatowanie 3
D. Formatowanie 1
Styl obramowania w CSS pozwala na precyzyjne określenie wyglądu krawędzi elementu na stronie internetowej. W przypadku „border-style: dotted solid;” mamy do czynienia z kombinacją dwóch różnych stylów obramowania. Pierwsza wartość „dotted” odnosi się do obramowania o kropkowanej strukturze, co jest często stosowane w celu nadania lekkości i subtelności wizualnej. Druga wartość „solid” oznacza jednolite obramowanie, które jest bardziej wyraźne i stosowane, gdy wymagana jest wyraźna separacja elementów. Formatowanie 2 odpowiada właśnie temu stylowi, ponieważ przedstawia górne i dolne obramowanie jako kropkowane, a boczne jako jednolite. Takie zastosowanie jest typowe w sytuacjach, gdzie potrzebny jest kompromis między estetyką a funkcjonalnością, np. w tabelach danych, gdzie górne i dolne obramowanie może być delikatniejsze, by nie przytłaczać, a boczne wyraźne dla czytelności. Wybór właściwego stylu obramowania jest kluczowy dla użyteczności i estetyki strony, zgodnie z zasadami projektowania zorientowanego na użytkownika.

Pytanie 22

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

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

Pytanie 23

Pokazane pole input pozwala na  

<input type = "checkbox" name = "text1" value = "text2">

A. wprowadzenie dowolnego tekstu
B. wprowadzenie hasła
C. wybranie opcji
D. selekcja opcji z listy o wartościach text1 i text2
Odpowiedź "zaznaczenie opcji" jest na pewno trafna, bo pole checkbox (<input type='checkbox'>) jest stworzone do tego, żeby użytkownicy mogli wybrać jedną lub więcej opcji z danej grupy. Widzisz, checkboxy są bardzo popularne w formularzach internetowych, bo pozwalają na różnorodność wyborów, w przeciwieństwie do przycisków radiowych, które pozwalają na zaznaczenie tylko jednej opcji. Na przykład, jak się rejestrujesz na stronie, możesz zaznaczyć różne zgody na przetwarzanie danych, co daje możliwość wyboru więcej niż jednej opcji. Z punktu widzenia HTML i najlepszych praktyk w projektowaniu formularzy, warto dodać odpowiednie etykiety (label) do checkboxów, żeby ułatwić korzystanie z nich osobom, które używają technologii asystujących. Jeśli dobrze ustalimy atrybuty 'name' i 'value', to dane po przesłaniu formularza będą odpowiednio przetworzone. Pamiętaj, że wartość checkboxa jest przesyłana tylko wtedy, gdy jest zaznaczony, co jest zgodne z oczekiwaniami użytkowników oraz standardami W3C.

Pytanie 24

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW. W której z jej sekcji zazwyczaj znajduje się stopka strony?

Ilustracja do pytania
A. 1
B. 5
C. 4
D. 2
Odpowiedź 5 jest poprawna ponieważ w standardach projektowania stron internetowych stopka strony zazwyczaj znajduje się na dole każdej podstrony. Stopka to miejsce gdzie umieszczane są informacje takie jak prawa autorskie prywatność i linki do kontaktu. Dobrze zaprojektowana stopka może także zawierać skróty nawigacyjne które pomagają użytkownikowi szybko przemieszczać się po stronie. W praktyce projektanci stron WWW stosują podejście oparte na responsywnym designie co oznacza że stopka powinna być łatwo dostępna i czytelna na różnych urządzeniach. Wykorzystanie CSS Grid lub Flexbox pozwala na elastyczne zarządzanie układem strony co jest szczególnie przydatne przy projektowaniu stopki. Ponadto stopki są elementami które odpowiadają za spójność wizualną całej strony internetowej zapewniając użytkownikowi intuicyjne doświadczenie. Umieszczanie stopki w dolnej części strony jest zgodne z oczekiwaniami użytkowników co zwiększa użyteczność serwisu i pozytywnie wpływa na jego odbiór. Praktyczne zastosowanie tego podejścia można zauważyć na wielu profesjonalnych stronach gdzie stopka jest wyraźnie oddzielona i przejrzysta co ułatwia użytkownikowi odnalezienie potrzebnych informacji.

Pytanie 25

Przy konwersji obrazu z 8-bitowej głębi kolorów na 4-bitową, liczba dostępnych kolorów zmniejszy się o:

A. 256
B. 24
C. 240
D. 16
Trzeba policzyć RÓŻNICĘ liczby kolorów, a nie samej głębi czy liczby bitów. 8 bitów to 256 kolorów, 4 bity to 16 - sama liczba 256 to stan początkowy, a 16 to końcowy, nie spadek. Różnica wynosi 256 - 16 = 240, więc liczba kolorów zmniejszy się o 240.

Pytanie 26

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>
zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?
A. menu { background-color: rgb(0,255,0); }
B. div:menu { color: green; }
C. div.menu { background-color: green; }
D. #menu { background-color: rgb(0,255,0); }
Podstawowy problem w niepoprawnych odpowiedziach wynika z mylenia różnych rodzajów selektorów CSS: typu, klasy i identyfikatora, a także pseudo-klas. W HTML mamy wyraźnie wskazany element `<div class="menu"></div>`. Atrybut `class` mówi wprost, że do stylowania należy użyć selektora klasy, czyli zapisu z kropką: `.menu` lub bardziej precyzyjnie `div.menu`. Użycie dwukropka w zapisie `div:menu` wygląda jak próba zastosowania pseudo-klasy, ale `menu` nie jest żadną standardową pseudo-klasą CSS. Pseudo-klasy to np. `:hover`, `:active`, `:first-child`. Przeglądarka taki selektor po prostu zignoruje, więc styl się nie zastosuje.
Kolejnym typowym nieporozumieniem jest zamiana klasy na identyfikator. Znak `#` w CSS oznacza selektor id, więc `#menu` pasowałby do elementu `<div id="menu">`, a nie do `<div class="menu">`. Id i klasa to dwie różne rzeczy: id powinno być unikalne w całym dokumencie, a klasę można stosować wielokrotnie. W realnych projektach front-endowych mieszanie tych dwóch mechanizmów prowadzi do chaosu w kodzie i trudnych do wykrycia błędów, dlatego warto od początku rozróżniać `.` od `#` bardzo świadomie.
Pojawia się też zapis `menu { background-color: rgb(0,255,0); }`. Taki selektor odnosi się do znacznika HTML o nazwie `menu`, czyli do `<menu>...</menu>`. Istnieje taki tag w HTML5, ale w pytaniu nie ma go w ogóle, jest zwykły `<div>`. Sam fakt, że klasa nazywa się „menu”, nie oznacza, że selektor typu `menu` będzie pasował. CSS nie „zgaduje” naszych intencji, tylko ściśle dopasowuje selektor do struktury dokumentu. To częsty błąd myślowy: patrzymy na nazwę klasy i podświadomie traktujemy ją jak nazwę znacznika.
Moim zdaniem kluczowa lekcja z tego pytania jest taka: najpierw patrzymy na HTML i dokładnie identyfikujemy, czy mamy do czynienia z klasą (`class`), identyfikatorem (`id`), czy konkretnym tagiem (`div`, `p`, `nav` itd.). Dopiero potem dobieramy odpowiedni selektor CSS: `.` dla klasy, `#` dla id, samą nazwę znacznika dla selektora typu. Takie systematyczne podejście bardzo ułatwia dalszą pracę z arkuszami stylów i pomaga budować czytelne, skalowalne style zgodnie z dobrymi praktykami branżowymi.

Pytanie 27

W którym przypadku plik graficzny należy zapisać w formacie GIF?

A. gdy trzeba zapisać obraz lub prostą animację
B. gdy jest to grafika wektorowa
C. gdy jest to obraz stereoskopowy (3D)
D. gdy potrzebny jest zapis bez kompresji
Format GIF nadaje się do zapisu prostej grafiki i krótkich ANIMACJI - obsługuje ograniczoną paletę (256 kolorów) i sekwencje klatek. Dlatego GIF stosuje się, gdy trzeba zapisać obraz lub prostą animację.

Pytanie 28

Aby zdefiniować w języku HTML listę nienumerowaną (wypunktowaną), należy użyć znacznika:

A.
<dd>
B.
<ul>
C.
<dt>
D.
<ol>
Pozostałe znaczniki dotyczą innych list lub elementów. <dd> i <dt> należą do listy definicji (<dl>): <dt> to definiowany termin, a <dd> jego opis - nie tworzą listy wypunktowanej. <ol> buduje listę uporządkowaną, w której pozycje są ponumerowane, a nie oznaczone punktorami. Listę nienumerowaną daje <ul> z pozycjami <li>, dlatego to on jest poprawny.

Pytanie 29

Które z poniższych oprogramowań nie jest systemem do zarządzania treścią (CMS)?

A. Mambo
B. Apache
C. Joomla
D. WordPress
Mambo, Joomla i WordPress to systemy zarządzania treścią (CMS), które umożliwiają użytkownikom tworzenie oraz zarządzanie treściami na stronach internetowych bez potrzeby posiadania specjalistycznej wiedzy technicznej. Mimo że wszystkie te platformy mają różne funkcje i podejścia do zarządzania treścią, ich wspólną cechą jest to, że są zaprojektowane do ułatwiania publikowania treści online. Często mylone jest pojęcie CMS z innymi technologiami wykorzystywanymi w rozwoju stron, co może prowadzić do nieporozumień. Na przykład, Apache, jako serwer HTTP, odgrywa kluczową rolę w udostępnianiu tych treści, ale sam w sobie nie zapewnia narzędzi do ich tworzenia ani zarządzania. Typowym błędem myślowym jest przyjęcie, że każdy komponent technologii webowej może pełnić rolę CMS-u, podczas gdy tylko te oprogramowania, które oferują intuicyjne interfejsy do edycji oraz organizacji treści, kwalifikują się jako systemy zarządzania treścią. Znajomość różnic między tymi technologiami jest kluczowa dla skutecznego tworzenia i utrzymywania stron internetowych oraz dla wykorzystania ich pełnego potencjału w zgodzie z najlepszymi praktykami w branży.

Pytanie 30

Który format zapewnia największą kompresję (najmniejszy rozmiar) pliku dźwiękowego?

A. WAV
B. CD-Audio
C. PCM
D. MP3
MP3 stosuje kompresję stratną - usuwa dane mniej słyszalne dla ucha, dzięki czemu plik jest wielokrotnie mniejszy niż zapis nieskompresowany. Dlatego najmniejszy plik dźwiękowy daje MP3.

Pytanie 31

<source src="plik.mp4" type="video/mp4">
Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:
A. <div> </div>
B. <embed> </embed>
C. <video> </video>
D. <section> </section>
Poprawna odpowiedź to umieszczenie znacznika `<source>` wewnątrz `<video>...</video>`. W HTML5 to właśnie element `<video>` jest kontenerem odpowiedzialnym za osadzanie plików wideo na stronie WWW. Atrybuty takie jak `controls`, `autoplay`, `loop`, `muted`, `width` czy `height` przypisujemy właśnie do `<video>`, a nie do `<source>`. Znacznik `<source>` służy głównie do wskazania konkretnego pliku multimedialnego i jego typu MIME, np.: `<video controls width="640" height="360"><source src="film.mp4" type="video/mp4"><source src="film.webm" type="video/webm">Twoja przeglądarka nie obsługuje elementu video.</video>`. Przeglądarka przechodzi po kolei po elementach `<source>` i wybiera pierwszy format, który potrafi odtworzyć. To jest zgodne ze specyfikacją HTML Living Standard (WHATWG) oraz zaleceniami W3C dotyczącymi multimediów w sieci. W praktyce, w projektach komercyjnych, często dodaje się kilka formatów (np. MP4, WebM), właśnie po to, by zapewnić maksymalną kompatybilność między różnymi przeglądarkami i systemami. Moim zdaniem warto od razu wyrabiać sobie nawyk pisania pełnej, semantycznie poprawnej struktury: `<video>` jako główny element odtwarzacza, w środku jeden lub więcej `<source>` i ewentualnie tekst alternatywny. Dzięki temu kod jest czytelny, łatwiej go stylować w CSS, a także lepiej zachowuje się w kontekście dostępności (np. czytniki ekranu widzą, że to element wideo). Dodatkowo, `<video>` można łatwo obsługiwać z poziomu JavaScript, korzystając z jego API (play, pause, currentTime, volume itd.), co w praktyce daje sporą kontrolę nad odtwarzaniem multimediów na stronie.

Pytanie 32

Do czego można wykorzystać program FileZilla?

A. do interpretacji kodu PHP
B. do testowania prędkości ładowania strony
C. do publikowania strony internetowej
D. do weryfikacji strony internetowej
Odpowiedzi, które wybrałeś, niestety nie dotyczą FileZilli. Mieszają się tu różne tematy, jak interpretacja kodu PHP czy testowanie wczytywania strony, co nie ma nic wspólnego z tym narzędziem. PHP jest odrębną sprawą, bo skrypty są wykonywane na serwerze, a nie przez FileZillę. Walidacja strony też dotyczy zupełnie innych rzeczy – chodzi o to, czy strona pasuje do jakichś standardów, co robią specjalne narzędzia. A testowanie prędkości wczytywania to już w ogóle inny temat, do tego są inne aplikacje. Czasem zdarza się pomylić funkcje różnych narzędzi, co prowadzi do nieporozumień. Ważne jest, żeby zrozumieć, co naprawdę robi FileZilla i jak można z niej efektywnie korzystać przy tworzeniu stron.

Pytanie 33

Wskaż styl CSS za pomocą, którego uzyskano przedstawiony efekt

Styl 1.
img {
  width: 100px;
  border-radius: 10%;
}
Styl 2.
img {
  width: 100px;
  border-radius: 50px;
}
Styl 3.
img {
  width: 100px;
  border: 50% green;
}
Styl 4.
img {
  width: 100px;
  shape: circle;
}
Ilustracja do pytania
A. Styl 4.
B. Styl 1.
C. Styl 2.
D. Styl 3.
Niestety, wybrałeś niepoprawną odpowiedź. Poprawną odpowiedzią jest 'Styl 2.', który wykorzystuje właściwość CSS border-radius z wartością 50px do zaokrąglania rogów obrazka. Zobaczmy, dlaczego pozostałe style są niepoprawne. 'Styl 1.' ma za małą wartość zaokrąglenia, co nie daje oczekiwanego efektu. Właściwość border-radius musi mieć odpowiednią wartość, aby uzyskać pożądane zaokrąglenie. 'Styl 3.' zawiera niepoprawną wartość, a mianowicie kolor. Kolor nie jest właściwą wartością dla border-radius, co pokazuje, jak ważne jest zrozumienie, jakie wartości są akceptowane dla różnych właściwości CSS. 'Styl 4.' używa właściwości shape, która nie istnieje w CSS. To jest błąd typowy dla osób, które nie są jeszcze pewne, które właściwości są dostępne w CSS. Jest to jasnym przykładem, dlaczego nauka i praktyka CSS są tak ważne do tworzenia atrakcyjnych i funkcjonalnych stron internetowych.

Pytanie 34

Która definicja CSS wskazuje na formatowanie nagłówka h1: tekst z przekreśleniem, z odstępami między słowami wynoszącymi 10 px oraz w kolorze czerwonym?

Ilustracja do pytania
A. B
B. D
C. C
D. A
Odpowiedź A jest w porządku, bo dobrze odpowiada na to, co pytanie wymaga. Deklaracja 'text-decoration: overline;' dodaje linię nad tekstem, a nie pod nim. Właściwie to mega ważne, bo można łatwo pomylić nadkreślenie z podkreśleniem. Plus, 'word-spacing: 10px;' ustawia fajny odstęp między wyrazami, co sprawia, że nagłówki wyglądają lepiej i są bardziej czytelne. A jak ustawiłeś kolor tekstu na 'red', to wszystko jest super zgodne z tym, co miało być w zadaniu. Używanie takich definicji CSS to standard w tworzeniu stron, bo dobrze stylizowane nagłówki pomagają w organizacji treści i poprawiają wrażenia użytkowników. Pamiętaj, że sensowne i dobrze zdefiniowane style CSS to nie tylko wygoda, ale też ułatwiają późniejsze poprawki dla innych programistów.

Pytanie 35

W której z technologii NIE da się przetwarzać danych wprowadzonych przez użytkownika na stronie WWW?

A. CSS
B. JavaScript
C. PHP
D. AJAX
Przetwarzanie danych wymaga logiki programistycznej. PHP robi to na serwerze, JavaScript w przeglądarce, a AJAX wymienia dane z serwerem w tle. CSS jako język stylów nie przetwarza danych wejściowych - odpowiada tylko za wygląd.

Pytanie 36

Aby umieścić plik wideo na stronie internetowej z widocznymi przyciskami sterującymi oraz zapętlonym odtwarzaniem, należy w znaczniku <video> użyć atrybutów

A. controls i loop
B. controls i autoplay
C. autoplay i preload
D. loop i muted
Odpowiedź "controls i loop" jest całkiem dobra, bo te dwa atrybuty są naprawdę istotne, żeby wideo działało jak należy na stronie. Atrybut "controls" dodaje do odtwarzacza przyciski, które pozwalają na zatrzymywanie, odtwarzanie i regulowanie głośności, co jest bardzo wygodne dla ludzi. Z kolei "loop" sprawia, że filmik odtwarza się w kółko, co może być super użyteczne, szczególnie w prezentacjach albo reklamach, które chcemy pokazać kilka razy. Przykładowo, <video src='video.mp4' controls loop> wstawia wideo z przyciskami, które można łatwo obsługiwać, no i od razu się zapętla. W ogóle, korzystanie z tych atrybutów to dobra praktyka, bo sprawia, że strony są bardziej przyjazne dla użytkowników oraz poprawia ich doświadczenia.

Pytanie 37

Którego znacznika NIE należy umieszczać w sekcji <head> dokumentu HTML?

A. <meta>
B. <link>
C. <title>
D. <h2>
Pozostałe znaczniki należą do <head>. <link> służy m.in. do dołączenia zewnętrznego arkusza stylów lub favikony i jest typowym elementem nagłówka. <title> definiuje tytuł strony widoczny na karcie przeglądarki - musi znaleźć się w <head>. <meta> przekazuje metadane, np. kodowanie znaków czy opis dla wyszukiwarek. Nagłówek treści <h2> jest natomiast elementem widocznej zawartości i należy do <body>, dlatego to on nie powinien trafić do <head>.

Pytanie 38

Które oprogramowanie jest typowe do obróbki grafiki WEKTOROWEJ?

A. Audacity
B. Inkscape
C. Paint
D. Brasero
Inkscape to darmowy edytor grafiki WEKTOROWEJ - tworzy obrazy opisane krzywymi i kształtami (format SVG), skalowalne bez utraty jakości. Dlatego do grafiki wektorowej służy Inkscape.

Pytanie 39

W CSS zapis selektora

p > i { color: red;} 
wskazuje, że kolorem czerwonym będzie wyróżniony
A. jedynie tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>
B. każdy tekst w znaczniku <p> z wyjątkiem tych w znaczniku <i>
C. wszystkie teksty w znaczniku <p> lub każdy tekst w znaczniku <i>
D. tylko ten tekst znacznika <p>, który ma przypisaną klasę o nazwie i
Odpowiedzi, które nie uznają znaczenia operatora > oraz kontekstu, w jakim elementy <i> są umieszczone, mogą prowadzić do błędnych wniosków. Przykładowo, stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> zostanie sformatowany, jest niezgodne z zasadami działania CSS, ponieważ selektor ten nie wyklucza jedynie <i>, lecz odnosi się do hierarchii struktury DOM. W praktyce, jeśli <i> nie jest bezpośrednim dzieckiem <p>, to nie będzie objęte regułą. Z kolei pomylenie selektorów może skutkować tym, że nie osiągniemy zamierzonych efektów stylizacji, co jest częstym problemem w projektach webowych. Ponadto, odpowiedzi sugerujące, że selektor dotyczy wszystkich elementów <p> lub że dotyczy on klasy <i>, wynikają z niepełnego zrozumienia podstaw CSS. Należy pamiętać, że klasy są definiowane w osnowie HTML, a nie w kontekście selektorów bezpośrednich. Właściwe zrozumienie selektorów jest kluczowe dla efektywnego stylizowania i organizacji kodu, a także dla osiągnięcia zamierzonych efektów wizualnych na stronach internetowych.

Pytanie 40

Wszelkie dane, które dostarczają informacji o innych danych, nazywane są

A. databus.
B. markup language.
C. metalanguage.
D. metadata.
Poprawna odpowiedź to „metadata”, czyli po polsku metadane. Metadane to wszystkie dane, które opisują inne dane. Można powiedzieć, że są to „informacje o informacji”. Przykład z życia: plik zdjęcia JPG. Sam obraz to dane, a takie elementy jak data wykonania, model aparatu, rozdzielczość, lokalizacja GPS, autor – to właśnie metadane zapisane np. w formacie EXIF. Podobnie w świecie WWW: w dokumencie HTML mamy sekcję <head>, a w niej znaczniki <meta>. Te znaczniki nie są wyświetlane użytkownikowi jako treść strony, ale przekazują wyszukiwarkom i przeglądarkom informacje o stronie, np. opis, słowa kluczowe, kodowanie znaków, język. To jest klasyczny przykład metadanych w praktyce. W bazach danych metadane to np. definicje tabel, typy kolumn, klucze główne, indeksy, ograniczenia. System zarządzania bazą danych przechowuje je w tzw. katalogach systemowych. Dzięki temu wie, jak interpretować rekordy, jakie są relacje między tabelami, jakie są dopuszczalne wartości. Bez metadanych dane byłyby po prostu chaotycznym zbiorem bitów, z którego niewiele da się wyciągnąć. W standardach branżowych stosuje się różne schematy metadanych, np. Dublin Core dla zasobów cyfrowych, czy schema.org dla stron internetowych, aby wyszukiwarki lepiej rozumiały zawartość. Z mojego doświadczenia warto od początku myśleć o metadanych jako o czymś, co podnosi jakość systemu: ułatwia wyszukiwanie, integrację, automatyczne przetwarzanie danych. Dobra praktyka jest taka, żeby dla ważnych zasobów (pliki, rekordy w bazie, strony WWW, API) zawsze planować strukturę metadanych: kto utworzył, kiedy, jaki typ, wersja, status. To bardzo pomaga przy utrzymaniu aplikacji, debugowaniu i rozwoju systemu.