Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 17 kwietnia 2026 08:59
Data zakończenia: 17 kwietnia 2026 09:24

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W języku HTML w celu określenia słów kluczowych dla danej strony, należy zastosować następujący zapis

A. <meta name="description" content="psy, koty, gryzonie">

B. <meta name="keywords" content="psy, koty, gryzonie">

C. <meta name="keywords" = "psy, koty, gryzonie">

D. <meta keywords="psy, koty, gryzonie">

Poprawna odpowiedź to <meta name="keywords" content="psy, koty, gryzonie">, ponieważ jest to zgodne z aktualnymi standardami HTML i poprawną składnią. Element <meta> jest używany do dostarczania metadanych, które nie są wyświetlane bezpośrednio na stronie, ale mają kluczowe znaczenie dla wyszukiwarek internetowych i innych aplikacji. Atrybut 'name' definiuje typ metadanych, a 'content' zawiera konkretne informacje, w tym przypadku słowa kluczowe, które mają być używane przez wyszukiwarki do indeksowania strony. Przykład zastosowania tego elementu w kodzie HTML wyglądałby następująco: <head><meta name="keywords" content="psy, koty, gryzonie"></head>. Warto zauważyć, że chociaż atrybut 'keywords' nie jest już tak istotny jak kiedyś ze względu na zmiany w algorytmach wyszukiwarek, to jego poprawne zdefiniowanie wciąż pokazuje dbałość o standardy HTML. Dobrą praktyką jest aktualizowanie i dostosowywanie metadanych do aktualnych trendów SEO, co może zwiększyć widoczność strony w wynikach wyszukiwania.

Pytanie 2

Jakie wyjście zostanie pokazane po zrealizowaniu podanego kodu HTML?

A. Rys.A

B. Rys. D

C. Rys. C

D. Rys. B

Nieprawidłowe odpowiedzi mogą wynikać z niezrozumienia struktury zagnieżdżonych list w HTML. Zrozumienie jak różne typy list i atrybuty wpływają na ich wyświetlanie jest kluczowe. Lista uporządkowana <ol> domyślnie numeruje swoje elementy co często prowadzi do założenia że wszystkie elementy muszą być numerowane w standardowy sposób. Jednak HTML pozwala na dostosowanie tego zachowania poprzez atrybuty type i start co może zmieniać domyślną numerację na litery czy inne formy. Kolejnym źródłem błędu jest zignorowanie zagnieżdżonej listy nieuporządkowanej <ul> która używa kropki jako punktora co różni się od standardowego kółka. Bez znajomości tych aspektów łatwo jest błędnie zinterpretować strukturę i wyświetlanie kodu. Typowe błędy myślowe wynikają z założeń że każda lista zachowa domyślną formę co nie zawsze jest prawdą w zaawansowanym HTML. Poprawne zrozumienie wymaga eksperymentowania i testowania różnych konfiguracji atrybutów aby w pełni wykorzystać potencjał HTML w tworzeniu elastycznych i dostosowanych interfejsów.

Pytanie 3

Aby dostosować dźwięk do określonego poziomu głośności, trzeba zastosować efekt

A. wyciszenia

B. podbicia basów

C. normalizacji

D. usuwania szumów

Wyciszenie, podbicie basów oraz usuwanie szumów to różne techniki przetwarzania dźwięku, które mają odmienne cele i funkcje. Wyciszenie jest procesem, w którym poziom głośności dźwięku jest redukowany, co nie prowadzi do normalizacji, a wręcz przeciwnie, zmniejsza ogólną głośność materiału audio. Użytkownicy mogą mylić wyciszenie z normalizacją, myśląc, że obie techniki mają na celu zwiększenie głośności, podczas gdy w rzeczywistości wyciszenie jest stosowane w celu eliminacji dźwięków niepożądanych lub cichszych fragmentów nagrania. Podbicie basów to proces, który koncentruje się na wzmocnieniu niskich częstotliwości w dźwięku, co może prowadzić do nieproporcjonalnej głośności, ale nie dostosowuje ogólnego poziomu głośności materiału. To podejście często skutkuje zniekształceniem dźwięku, co jest sprzeczne z zasadą normalizacji. Z kolei usuwanie szumów polega na eliminacji niechcianych dźwięków tła, co z kolei wpływa na jakość nagrania, ale nie ma bezpośredniego związku z poziomem głośności dźwięku. Użytkownicy mogą błędnie sądzić, że redukcja szumów zwiększa głośność, co jest mylnym przekonaniem. Właściwa normalizacja dźwięku jest kluczowym krokiem w produkcji audio, który zapewnia spójność i jakość dźwięku, a techniki takie jak wyciszenie, podbicie basów i usuwanie szumów pełnią inne role w tym procesie.

Pytanie 4

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

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

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek. W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony. Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 5

Aby obraz umieszczony na stronie internetowej mógł automatycznie dostosowywać się do rozmiaru ekranu, na którym jest prezentowana strona, trzeba

A. jego szerokość ustawić w wartościach procentowych

B. jeden z jego wymiarów określić w pikselach

C. oba jego wymiary ustawić w pikselach

D. nie zmieniać obu jego wymiarów za pomocą stylów CSS

Ustawienie szerokości obrazu w wartościach procentowych jest kluczowe dla zapewnienia responsywności strony internetowej. Gdy szerokość obrazu wyrażona jest w procentach, automatycznie dostosowuje się ona do szerokości kontenera, w którym się znajduje. To oznacza, że obraz będzie skalował się do rozmiaru ekranu użytkownika, co jest szczególnie ważne w kontekście urządzeń mobilnych oraz różnych rozdzielczości ekranów. Przykładem może być użycie stylu CSS: `img { width: 100%; height: auto; }`, co pozwala na zachowanie proporcji obrazu, jednocześnie dostosowując jego szerokość do kontenera. Tego rodzaju praktyki są zgodne z zasadami responsywnego projektowania (Responsive Web Design) i są zalecane przez standardy W3C. Dzięki takim rozwiązaniom użytkownik zyskuje lepsze doświadczenie, a strona wygląda estetycznie na różnych urządzeniach. Dobrą praktyką jest również testowanie strony na różnych ekranach, aby upewnić się, że wszystkie obrazy i inne elementy dostosowują się do zmieniających się warunków wyświetlania.

Pytanie 6

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu

A. <head>Moja strona</head>

B. <title>Moja strona</title>

C. <meta title="Moja strona">

D. <meta name="title" content="Moja strona">

Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.

Pytanie 7

Logo platformy CMS noszącej nazwę Joomla! to

A. C

B. D

C. A

D. B

Pozostałe logotypy reprezentują inne popularne systemy CMS i platformy. Logo oznaczone literą A przedstawia Drupala który jest także systemem zarządzania treścią napisanym w PHP. Drupal jest znany z dużej elastyczności oraz możliwości tworzenia zaawansowanych aplikacji webowych. Jest często używany przez duże organizacje i rządy ze względu na swoje zaawansowane opcje bezpieczeństwa i możliwość personalizacji. Logo C przedstawia inny mniej znany system który nie jest tak popularny jak Joomla! czy Drupal ale może być wykorzystywany w specyficznych przypadkach. Z kolei logo D to symbol WordPressa najbardziej rozpowszechnionego systemu CMS na świecie. WordPress jest znany z prostoty obsługi i ogromnej liczby dostępnych wtyczek i motywów co czyni go idealnym wyborem dla blogerów i małych przedsiębiorstw. Wybór niewłaściwego logo wynika często z niewiedzy lub pomylenia różnych systemów CMS które różnią się funkcjonalnością i zastosowaniem. Każdy z tych systemów ma swoje unikalne zalety i jest przeznaczony do różnych rodzajów zastosowań dlatego ważne jest aby znać i rozumieć ich specyfikę przed podjęciem decyzji o wyborze odpowiedniego dla danego projektu. Porównując te systemy Joomla! oferuje unikalne funkcje które wyróżniają ją na tle innych co czyni ją doskonałym wyborem dla średnich i dużych projektów wymagających solidnej bazy danych i wsparcia społeczności użytkowników

Pytanie 8

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

A. tylko znane fonty, takie jak Arial

B. wymiary obrazów jedynie w pikselach

C. wymiary obrazów w procentach

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

Definiowanie rozmiarów obrazów w procentach jest kluczowym elementem tworzenia responsywnych stron internetowych. Dzięki temu obrazy mogą dostosowywać się do różnych rozmiarów ekranów, co jest niezbędne w erze urządzeń mobilnych. Używając procentów, możemy zapewnić, że obrazy zachowają swoje proporcje w ramach kontenera, co eliminuje problem z rozciąganiem lub zniekształceniem grafiki. Na przykład, ustawiając szerokość obrazu na 50%, obraz zajmie połowę szerokości kontenera, niezależnie od tego, czy jest to telefon, tablet, czy komputer stacjonarny. Taki sposób definiowania rozmiarów jest zgodny z zasadami projektowania responsywnego, w tym z technikami, które określają elastyczne układy oparte na jednostkach względnych, takich jak em, rem, czy vw. W praktyce przyjęcie takiego podejścia nie tylko poprawia doświadczenie użytkownika, ale również zwiększa dostępność strony, co jest istotnym aspektem w kontekście standardów WCAG (Web Content Accessibility Guidelines).

Pytanie 9

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby dodać do tego tekstu kilka słów sformatowanych innym stylem, należy użyć znacznika

A. <section>

B. <span>

C. <hr>

D. <table>

Znaczniki <hr>, <table> oraz <section> nie są odpowiednie do wtrącania fragmentów tekstu w innym stylu. <hr> to znacznik, który wprowadza poziomą linię, służący do wizualnego oddzielania elementów na stronie, a nie do formatowania tekstu. Stosowanie go w miejscu, gdzie chcemy zmienić styl fragmentu tekstu, byłoby nieefektywne i zmniejszałoby czytelność. Z kolei <table> jest używane do tworzenia tabel, co oznacza, że jego zastosowanie ogranicza się do strukturyzowania danych w formie wierszy i kolumn. Tego znacznika nie można użyć do lokalnego formatowania tekstu, ponieważ wprowadza on zupełnie inny kontekst i zmienia sposób, w jaki przeglądarka interpretuje i wyświetla zawartość. Ostatecznie <section> jest stosowane do grupowania powiązanych treści w sekcję dokumentu, co jest przydatne w kontekście organizacji treści, ale nie ma zastosowania w przypadku, gdy chcemy zmienić styl pojedynczych wyrazów lub fraz. Każdy z tych znaczników ma swoje specyficzne zastosowanie w HTML, które nie odpowiada potrzebie lokalnego formatowania tekstu, co czyni je niewłaściwymi wyborami w tym kontekście.

Pytanie 10

Jakie oznaczenie powinno się zastosować, aby umieścić film na stronie internetowej?

A. <movie>

B. <video>

C. <audio>

D. <media>

Znacznik <video> jest właściwym elementem HTML używanym do osadzania filmów na stronach internetowych. Jest on częścią standardu HTML5, który wprowadził nowoczesne podejścia do multimediów w sieci. Umożliwia on nie tylko osadzanie wideo, ale także dostosowywanie jego odtwarzania, takie jak automatyczne odtwarzanie, powtarzanie oraz kontrolowanie głośności. Przykład użycia znacznika <video>: <video src='film.mp4' controls>Odtwarzacz wideo</video>. Warto również dodać atrybuty, takie jak 'controls', które dodają przyciski do odtwarzania, pauzowania i regulacji głośności, co znacząco poprawia użyteczność dla użytkowników. Dobrą praktyką jest również używanie atrybutu 'poster' do określenia miniatury, która będzie wyświetlana przed rozpoczęciem odtwarzania, co przyciąga uwagę i zwiększa estetykę strony. Znacznik <video> wspiera różne formaty plików, takie jak MP4, WebM i Ogg, co zapewnia szeroką kompatybilność z różnymi przeglądarkami internetowymi, co jest kluczowe w dzisiejszym zróżnicowanym środowisku online.

Pytanie 11

Dla strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Jak można wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, używając znacznika?

A. <img src="rysunek.png" style="width: 50px">

B. <img src="rysunek.png">

C. <img src="rysunek.png" style="width: 25px; height:50px;">

D. <img src="rysunek.png" style="width: 25px; height:25px;">

Pozostałe odpowiedzi niestety nie trzymają się zasady zachowania proporcji, jak zmniejszamy grafikę. W pierwszej opcji, <img src="rysunek.png" style="width: 25px; height:50px"> zestawione wartości szerokości i wysokości są krzywe, co powoduje zniekształcenie obrazu. Oryginalny rysunek ma proporcje 2:1, a tu wychodzi 1:2, co może wprowadzać ludzi w błąd. W trzeciej opcji, <img src="rysunek.png"> brak wskazania szerokości i wysokości sprawia, że obrazek wyświetla się w swoim pierwotnym rozmiarze, a to nie jest cel, bo chcemy mieć miniaturę. A ostatnia odpowiedź, <img src="rysunek.png" style="width: 25px; height:25px;"> ustala jednakowe wymiary, przez co wychodzi kwadratowa miniaturka, co nie zgadza się z oryginalnymi proporcjami. Generalnie, niepoprawne odpowiedzi mogą wynikać z braku zrozumienia, dlaczego dbanie o proporcje w grafikach jest takie ważne. To kluczowe zagadnienie w projektowaniu stron, bo dobre proporcje to podstawa estetyki i funkcjonalności wizualnych elementów na stronie.

Pytanie 12

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. treści akapitu.

B. linków, które otwierają się w nowej karcie.

C. wszystkich linków.

D. linków, które otwierają się w tej samej karcie.

Odpowiedzi sugerujące, że kolor żółty dotyczy 'wszystkich odnośników', 'tekstu paragrafu' lub 'odnośników, które otwierają się w tej samej karcie' są błędne z kilku powodów. Po pierwsze, selektor CSS 'a[target="_blank"]' jest specyficzny dla odnośników, które otwierają się w nowej karcie, a więc nie obejmuje on wszystkich odnośników. Każdy odnośnik zdefiniowany w HTML jako <a> może mieć różne cele, a atrybut 'target' odgrywa kluczową rolę w tym, jak te odnośniki są obsługiwane przez przeglądarkę. Po drugie, nie istnieje możliwość, aby tekst paragrafu był objęty tym selektorem, ponieważ jest on dedykowany wyłącznie linkom. Warto pamiętać, że CSS służy do stylizacji elementów HTML, a nie do zachowania ich struktury semantycznej. Kolejną nieprawidłową koncepcją jest to, że kolor tekstu dotyczy odnośników otwierających się w tej samej karcie, ponieważ żaden z tych odnośników nie ma przypisanego atrybutu 'target="_blank"'. W praktyce, ważne jest, aby dobrze rozumieć selektory CSS oraz ich zastosowanie, co pozwoli na bardziej precyzyjne projektowanie interfejsów użytkownika oraz zapewnienie lepszej użyteczności i dostępności stron internetowych.

Pytanie 13

Które z wymienionych rozszerzeń NIE JEST związane z plikiem wideo?

A. MP4

B. MOV

C. GIF

D. AVI

Wybierając inne odpowiedzi, można popełnić kilka typowych błędów myślowych. AVI, MP4 oraz MOV to uznawane standardy dla plików wideo, co może prowadzić do mylnego wrażenia, że wszystkie wymienione rozszerzenia dotyczą wideo. AVI (Audio Video Interleave) to format opracowany przez Microsoft, który integruje dźwięk i obraz w jeden plik. Jest to format bezstratny, co oznacza, że jakość wideo pozostaje wysoka, ale pliki te mogą być znacznie większe. MP4 (MPEG-4 Part 14) to bardziej nowoczesny format, który łączy wysoką jakość z efektywnym kompresowaniem, co czyni go bardzo popularnym w transmisji strumieniowej i przechowywaniu wideo na różnych urządzeniach. MOV to natomiast format związany z ekosystemem Apple, znany z wysokiej jakości wideo, który jest idealny do edycji w oprogramowaniu takim jak Final Cut Pro. Wybierając odpowiedzi, które są faktycznie formatami wideo, można nie docenić unikalnych właściwości GIF-a, co prowadzi do pomyłki oraz niezrozumienia różnicy między tymi formatami. Ważne jest zrozumienie, że wybór formatu pliku powinien opierać się na specyficznych potrzebach projektu, a także na wymaganiach dotyczących jakości, rozmiaru pliku i wsparcia dla dźwięku, co substancjalnie różni różne formaty plików.

Pytanie 14

W HTML-u znacznik tekst będzie prezentowany przez przeglądarkę w sposób identyczny do znacznika

A. <b>tekst</b>

B. <h1>tekst</h1>

C. <big>tekst</big>

D. <sub>tekst</sub>

Znacznik <strong> w HTML jest używany do oznaczania tekstu, który ma być wyróżniony jako ważny. Jego domyślne stylizowanie w przeglądarkach polega na pogrubieniu tekstu, co jest również funkcją znacznika <b>. Oba znaczniki mają podobne zastosowanie, ale <strong> niesie dodatkowe znaczenie semantyczne, co oznacza, że informuje przeglądarki i maszyny o tym, że dany tekst jest istotny. Przykładem może być użycie <strong> w nagłówkach lub w miejscach, gdzie chcemy zwrócić uwagę na kluczowe informacje, jak np. 'Zamówienie <strong>pilne</strong> musi być dostarczone do jutra.' W kontekście dobrych praktyk zaleca się używanie znaku <strong> zamiast <b>, gdyż wspiera to dostępność i SEO - wyszukiwarki lepiej interpretują semantykę treści, co może wpłynąć na pozycjonowanie strony. Warto również pamiętać, że zgodnie z W3C, semantyka HTML ma kluczowe znaczenie dla strukturyzacji dokumentów oraz ich dostępności.

Pytanie 15

W przedstawionym kodzie HTML ukazany styl CSS to styl:

<p style="color: red;">To jest przykładowy akapit.</p>

A. lokalny.

B. zewnętrzny.

C. dynamiczny.

D. nagłówkowy.

Odpowiedź "lokalnym" jest prawidłowa, ponieważ styl CSS zastosowany w podanym kodzie HTML definiuje właściwości stylu bezpośrednio w elemencie HTML, co określamy jako styl lokalny (inline style). W tym przypadku, styl "color: red;" został zastosowany bezpośrednio w tagu <p>, co wpływa wyłącznie na ten konkretny akapit. Praktyczne zastosowanie lokalnych stylów polega na tym, że można je szybko dodać do pojedynczych elementów, ale należy pamiętać, że nadmiar lokalnych stylów może prowadzić do problemów z utrzymywaniem i zarządzaniem kodem. Zamiast tego zaleca się stosowanie zewnętrznych arkuszy stylów CSS, co pozwala na centralne zarządzanie stylami dla całej strony. Warto zauważyć, że lokalne style mają wyższy priorytet niż style zewnętrzne, co może prowadzić do konfliktów, jeśli nie zostaną odpowiednio użyte. Aby zapewnić zgodność z najlepszymi praktykami, zaleca się ograniczanie stosowania lokalnych stylów tam, gdzie to możliwe, na rzecz bardziej zorganizowanego podejścia z użyciem klas i identyfikatorów w zewnętrznych arkuszach stylów.

Pytanie 16

Aby obraz umieszczony na stronie www automatycznie dostosowywał się do rozmiaru ekranu, na którym strona jest wyświetlana, należy

A. ustawić jeden z jego wymiarów w pikselach

B. ustawić oba jego wymiaru w pikselach

C. nie zmieniać obu jego wymiarów przy użyciu stylów CSS

D. ustawić jego szerokość w wartościach procentowych

Ustalanie wymiarów obrazu w pikselach ogranicza jego responsywność, co prowadzi do problemów z wyświetlaniem na różnych urządzeniach. Ustawienie obu wymiarów w pikselach sprawia, że obraz będzie miał stałe wymiary, niezależnie od rozmiaru ekranu, co jest sprzeczne z zasadami responsywnego projektowania. W takich przypadkach, na mniejszych ekranach, obraz może być zbyt duży lub zbyt mały, co negatywnie wpływa na użyteczność i estetykę strony. Ponadto, nie modyfikowanie wymiarów obrazów za pomocą CSS nie jest optymalnym podejściem w dzisiejszym świecie web designu. Użytkownicy mogą korzystać z różnych przeglądarek i urządzeń, a brak odpowiednich stylów CSS może prowadzić do nieprzewidywalnych efektów. Ustawienie jednego z wymiarów w pikselach również nie rozwiązuje problemu responsywności; nawet jeśli uda się uzyskać odpowiednie wymiary w niektórych przypadkach, wciąż istnieje ryzyko, że obraz nie będzie wyświetlany prawidłowo na innych urządzeniach. Typowym błędem jest myślenie, że stałe wymiary zapewniają lepszą kontrolę nad wyglądem strony, podczas gdy elastyczność i dopasowanie są kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 17

W CSS, aby ustalić różne formatowanie dla pierwszej litery w akapicie, trzeba użyć selektora

A. klasy p.first-letter

B. dziecka p + first-letter

C. atrybutu p [first-letter]

D. pseudoelementu p::first-letter

Wybór klasy p.first-letter nie jest poprawny, ponieważ klasy w CSS są używane do grupowania elementów i stylizacji ich w zbiorach, a nie do selekcji poszczególnych części tekstu, jak pierwsza litera akapitu. Klasa ta będzie odnosić się do wszystkich elementów z przypisaną daną klasą, co nie spełnia celu stylizacji wyłącznie pierwszej litery. Selekcja dziecka p + first-letter jest również błędna, gdyż operator + w CSS odnosi się do sąsiadujących ze sobą elementów. Oznacza to, że ten kombinat nie jest użyteczny w kontekście pierwszej litery akapitu, ponieważ nie zapewnia odpowiedniego targetowania. Z kolei atrybutu p [first-letter] nie funkcjonuje w CSS, ponieważ atrybuty są używane do selekcji elementów na podstawie ich atrybutów HTML, takich jak klasy czy identyfikatory, a nie do selekcji pseudoelementów, jak w przypadku first-letter. Zrozumienie różnicy pomiędzy tymi koncepcjami jest kluczowe dla skutecznego stylizowania dokumentów w CSS oraz dla tworzenia estetycznych i funkcjonalnych interfejsów użytkownika.

Pytanie 18

W HTML 5 atrybut action jest wykorzystywany w znaczniku

A. <form>

B. <head>

C. <body>

D. <code>

Atrybut action w znaczniku <form> jest kluczowym elementem w kontekście przesyłania danych formularzy w HTML5. Określa on adres URL, do którego zostaną wysłane dane po złożeniu formularza przez użytkownika. Przykładowo, jeżeli mamy formularz do logowania, atrybut action mógłby mieć wartość 'login.php', co oznacza, że po kliknięciu przycisku 'Zaloguj', dane z formularza zostaną przesłane do skryptu PHP obsługującego logowanie. Podczas projektowania formularzy warto przestrzegać zasad bezpieczeństwa, takich jak walidacja danych zarówno po stronie klienta, jak i serwera. Dobrą praktyką jest także stosowanie metod przesyłania danych, takich jak POST, aby ukryć dane użytkownika w URL. Dodatkowo, w ramach HTML5 wprowadzono atrybuty, takie jak novalidate, które pozwalają na wyłączenie domyślnej walidacji w przeglądarkach, co może być przydatne w określonych sytuacjach. Używanie znaczników formularzy zgodnie z ich przeznaczeniem zwiększa dostępność i użyteczność stron internetowych, co jest kluczowe w nowoczesnym web designie.

Pytanie 19

W CSS właściwość font-size może przyjmować wartości według słów kluczowych

A. z zestawu xx-small, x-small, smali, medium, large, x-large, xx-large

B. tylko smali, smaller, large, larger

C. wyłącznie smali, medium, large

D. jedynie big i smali

Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą zestawu wartości słownikowych, które obejmują xx-small, x-small, small, medium, large, x-large oraz xx-large. Użycie tych słów kluczowych jest zgodne z wytycznymi CSS i zapewnia spójne i zrozumiałe podejście do projektowania. Przykładowo, definiując klasę CSS dla nagłówka, możemy zastosować: h1 { font-size: large; } co skutkuje odpowiednim zwiększeniem rozmiaru czcionki, co jest zgodne z hierarchią typograficzną dokumentu. Zastosowanie wartości słownikowych zwiększa czytelność i dostępność treści, ponieważ są one zrozumiałe zarówno dla programistów, jak i dla przeglądarek. Ponadto, korzystając z tych wartości, projektanci mogą łatwiej dostosować wygląd strony do różnych urządzeń, co jest kluczowe w kontekście responsywnego web designu. Warto również wspomnieć, że wartości te są niezależne od jednostek miary, takich jak em czy px, co sprawia, że są bardziej elastyczne w użyciu.

Pytanie 20

Zestawienie dwóch kolorów znajdujących się po przeciwnych stronach na kole barw stanowi zestawienie

A. sąsiednim

B. trójkątnym

C. dopełniającym

D. monochromatycznym

Wybór sąsiadujących barw oznaczałby połączenie kolorów, które leżą obok siebie na kole barw, co prowadzi do efektu harmonijnego i spokojnego, ale nie intensywnego, jak w przypadku barw dopełniających. Tego typu zestawienia są często stosowane w projektach wymagających łagodnych przejść kolorystycznych, np. w architekturze wnętrz. Monochromatyczne zestawienia, z drugiej strony, polegają na używaniu różnych odcieni, tonów lub nasycenia jednej barwy, uzyskując efekt spójności, ale bez kontrastu. Takie podejście może być stosowane w minimalistycznych projektach, ale nie wykorzystuje pełnego potencjału kontrastów. Natomiast koncepcja trójkątnych zestawień kolorystycznych odnosi się do używania trzech kolorów, które tworzą trójkąt równoboczny na kole barw, co także prowadzi do harmonii, ale niekoniecznie do dynamiki i intensywności, które charakteryzują połączenia dopełniające. Typowym błędem myślowym jest pomylenie pojęcia kontrastu z harmonią, co prowadzi do niepoprawnych wniosków o funkcji poszczególnych zestawień kolorystycznych w praktyce projektowej.

Pytanie 21

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

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

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

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

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

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

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

Pytanie 22

Jaką szerokość zaplanowano dla treści strony, bazując na podanej definicji CSS?

body {
  border: 2px;
  height: 600px;
  width: 560px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

A. 600 px

B. 560 px

C. 2 px

D. 640 px

Gratulacje, udzieliłeś poprawnej odpowiedzi. W definicji CSS dla elementu body, szerokość ustawiono na 560 px. Właściwość box-sizing: border-box, gwarantuje, że szerokość ta obejmuje również obramowanie. Dlatego, w praktyce, szerokość strony pozostawiona na treść wynosi 560 px. Wartości te są bardzo ważne przy projektowaniu stron internetowych, szczególnie przy tworzeniu responsywnych layoutów, gdzie musimy precyzyjnie kontrolować szerokość i rozmieszczenie elementów. Pamiętaj, że wykorzystanie odpowiednich jednostek i precyzyjne definiowanie wymiarów jest kluczowe dla zachowania poprawnej struktury strony. Dobrym nawykiem jest również stosowanie właściwości box-sizing: border-box, która ułatwia kontrolę nad rozmiarem elementów, zwłaszcza przy komplikowanych układach strony.

Pytanie 23

Spośród wymienionych formatów, który charakteryzuje się najszerszą rozpiętością tonalną?

A. BMP

B. PNG

C. JPEG

D. RAW

Odpowiedzi, które nie są poprawne, można analizować w kontekście ich technicznych ograniczeń. Format PNG, mimo że obsługuje przezroczystość i jest bezstratnym formatem, ma ograniczoną rozpiętość tonalną, co oznacza, że nie przechowuje tak dużej ilości informacji tonalnych jak RAW. Ponadto, jego główną funkcją jest przechowywanie obrazów z dużą ilością detali w mniej skomplikowanych kolorach, co czyni go mniej odpowiednim do profesjonalnej obróbki zdjęć w trudnych warunkach oświetleniowych. Format BMP, choć prosty i łatwy w użyciu, również nie wspiera zaawansowanej obróbki kolorów, a jego duża objętość plików powoduje, że nie jest praktyczny dla profesjonalnych zastosowań. BMP nie korzysta z kompresji, co sprawia, że pliki są znacznie większe niż w przypadku innych formatów, ale nie oferuje dodatkowych korzyści w zakresie tonalności. JPEG, pomimo szerokiego zastosowania w fotografii i sieci, jest formatem stratnym, co oznacza, że podczas kompresji traci część danych, a tym samym rozpiętość tonalna jest ograniczona. JPEG jest bardziej odpowiedni do codziennego użytku ze względu na mniejszy rozmiar plików, ale nie daje takiej elastyczności w edycji jak RAW, co czyni go niewłaściwym wyborem dla profesjonalnych fotografów poszukujących najwyższej jakości obrazu.

Pytanie 24

Jakim znacznikiem można wprowadzić listę numerowaną (uporządkowaną) w dokumencie HTML?

A. <dl>

B. <ul>

C. <li>

D. <ol>

Zastosowanie znaczników <ul>, <dl> oraz <li> w kontekście tworzenia listy numerowanej w HTML prowadzi do nieporozumień, które mogą zniekształcić strukturę i semantykę dokumentu. Znacznik <ul> jest używany do tworzenia list nieuporządkowanych, co oznacza, że elementy listy nie są numerowane, lecz oznaczone punktami. To podejście jest właściwe tylko w sytuacjach, gdy porządek elementów nie jest istotny, na przykład w przypadku list zakupów. Z kolei znacznik <dl> służy do definiowania list tekstowych, w których elementy są zestawiane w pary definicji, co ma swoje zastosowanie w glosariuszach lub słownikach, ale nie jest odpowiednie do zwykłych list numerowanych. Natomiast <li> to znacznik, który jest używany w kontekście list zarówno uporządkowanych, jak i nieuporządkowanych, ale sam w sobie nie tworzy listy. Elementy <li> muszą być zagnieżdżone w odpowiednich znacznikach <ol> lub <ul>, by miały sens w ramach struktury HTML. Powszechny błąd polega na myleniu typów listy oraz ich semantycznego przeznaczenia, co może prowadzić do problemów z dostępnością oraz indeksowaniem przez wyszukiwarki. Konsekwencją niewłaściwego użycia znaczników może być również obniżona jakość nawigacji i user experience na stronie internetowej.

Pytanie 25

Najprostszy sposób przekształcenia obiektu oznaczonego cyfrą 1 w obiekt oznaczony cyfrą 2 to

A. narysowanie docelowego obiektu

B. animowanie obiektu

C. geometryczne transformowanie obiektu

D. zmiana warstwy obiektu

Geometria transformacji to niezwykle ważne pojęcie w dziedzinie grafiki komputerowej i projektowania. Polega na zmianie kształtu obiektu za pomocą operacji takich jak skalowanie, obracanie, przesuwanie czy odkształcanie. W kontekście pytania, geometria transformacji umożliwia przekształcenie obiektu oznaczonego cyfrą 1 w obiekt oznaczony cyfrą 2 poprzez zmianę jego kształtu i wielkości. Praktyczne zastosowanie transformacji geometrycznych obejmuje m.in. skalowanie w celu dostosowania rozmiarów obiektów do różnych nośników lub kontekstu wyświetlania. Obracanie jest używane do orientacji obiektów w przestrzeni, co jest niezwykle przydatne w modelowaniu 3D czy animacjach. Dobre praktyki projektowania graficznego zalecają korzystanie z transformacji geometrycznych, aby uzyskać spójną i estetyczną kompozycję. Standardy branżowe często definiują konkretne algorytmy i formaty danych dla transformacji, jak na przykład macierze przekształceń w grafice trójwymiarowej. Zrozumienie i umiejętne zastosowanie tych pojęć pozwala na efektywne tworzenie złożonych struktur wizualnych oraz interaktywnych aplikacji.

Pytanie 26

Jakie właściwości języka CSS mogą mieć wartości: underline, overline, line-through?

A. text-style

B. font-weight

C. font-style

D. text-decoration

Odpowiedzi 'text-style', 'font-style' oraz 'font-weight' są niepoprawne, ponieważ każda z tych właściwości odnosi się do innego aspektu formatuowania tekstu w CSS. 'Text-style' nie istnieje jako standardowa właściwość w CSS, co prowadzi do mylnych interpretacji. Właściwość 'font-style' służy do określenia stylu czcionki, takiego jak 'normal', 'italic' lub 'oblique', ale nie ma związku z dekoracjami tekstu. Oznacza to, że nie można jej użyć do dodawania podkreśleń, linii nad tekstem czy przekreśleń. Podobnie, 'font-weight' dotyczy grubości czcionki i przyjmuje wartości takie jak 'normal' lub 'bold', co również nie ma nic wspólnego z dekorowaniem tekstu. Typowe błędy w myśleniu polegają na myleniu tych pojęć, co często wynika z braku zrozumienia ich funkcji w CSS. Używanie niewłaściwych właściwości do osiągania zamierzonych efektów stylizacyjnych prowadzi nie tylko do niepoprawnego renderowania, ale również wpływa na dostępność treści oraz ich interpretację przez różne przeglądarki. Rozumienie różnic między tymi właściwościami jest kluczowe dla efektywnego projektowania stron internetowych zgodnie z najlepszymi praktykami branżowymi.

Pytanie 27

W dokumencie HTML utworzono formularz wysyłający dane do skryptu formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka przekierowuje nas do określonego adresu. Na podstawie podanego linku można wywnioskować, że dane do pliku formularz.php przesłano metodą

.../formularz.php?imie=Anna&nazwisko=Kowalska

A. COOKIE

B. GET

C. SESSION

D. POST

W kontekście przesyłania danych z formularza do pliku PHP metoda COOKIE nie jest bezpośrednio związana z formularzami HTML. Cookies to małe pliki przechowywane w przeglądarce użytkownika, służące do śledzenia sesji lub przechowywania danych użytkownika. Nie są one używane do bezpośredniego przesyłania danych formularza. Metoda POST, używana w formularzach HTML, wysyła dane jako treść żądania HTTP, co nie jest widoczne w adresie URL. POST jest preferowaną metodą dla przesyłania dużych ilości danych lub danych poufnych, ponieważ nie ogranicza ich ilości i lepiej zabezpiecza przed przypadkowym ujawnieniem. Metoda SESSION odnosi się do mechanizmu przechowywania danych o stanie użytkownika po stronie serwera, który umożliwia śledzenie sesji użytkownika między różnymi żądaniami HTTP. Dane sesji nie są bezpośrednio przesyłane przez formularze HTML, ale mogą być używane do przechowywania informacji po przesłaniu formularza. Często dochodzi do nieporozumień dotyczących tych metod, ponieważ każda z nich pełni inną funkcję w kontekście zarządzania danymi użytkownika w aplikacjach webowych. Kluczowym błędem jest założenie, że wszystkie wymienione metody mogą być używane wymiennie z formularzami HTML, co prowadzi do niepoprawnych wniosków w kontekście tego pytania.

Pytanie 28

Aby sformatować wszystkie obrazy w akapicie przy użyciu stylów CSS, należy zastosować selektor

A. p.img

B. p # img

C. p img

D. p + img

Jak spojrzysz na odpowiedzi, to widać, że selektor 'p # img' jest pomyłką. W CSS '#' oznacza 'id', a to powinno być unikalne dla konkretnego elementu. Nie da się tego używać z selektorem potomka, bo to by oznaczało, że szukasz <img> z unikalnym id w akapicie, co nie ma sensu. Z kolei 'p + img' odnosi się do obrazków, które są bezpośrednio po akapicie, czyli nie stylizuje wszystkich obrazków wewnątrz akapitów. Takie coś nie zadziała. A 'p.img' to błąd, bo sugeruje, że <p> ma klasę 'img', co nie jest ok. Klasa 'img' powinna być przypisana do <img>, nie do akapitu. Te wszystkie błędy w selektorach pokazują, jak ważne jest zrozumienie struktury DOM i hierarchii w HTML, żeby dobrze ogarniać CSS.

Pytanie 29

W sekcji <head> (w elemencie <meta ... >) witryny www nie umieszcza się danych dotyczących

A. kodowania

B. typu dokumentu

C. automatycznego odświeżania

D. autora

Umieszczanie informacji o autorze, kodowaniu oraz automatycznym odświeżaniu w znaczniku <head> jest praktyką zgodną ze standardami, jednak występują nieporozumienia co do roli i miejsca deklaracji typu dokumentu. Wiele osób może błędnie zakładać, że typ dokumentu można umieścić w sekcji <head>, co jest nieprawidłowe. Deklaracja DOCTYPE, która informuje przeglądarkę o wersji HTML, musi być umieszczona przed znacznikiem <html> w kodzie. Tymczasem w sekcji <head> umieszczamy metadane, które mają bezpośredni wpływ na interpretację zawartości strony i jej interakcję z użytkownikami oraz wyszukiwarkami. Często popełnianym błędem jest mylenie tych dwóch elementów, co prowadzi do nieprawidłowego kodowania strony. Odpowiednie zrozumienie struktury dokumentu HTML jest kluczowe dla jego prawidłowego funkcjonowania; nieprawidłowe umiejscowienie deklaracji DOCTYPE może prowadzić do nieoczekiwanych zachowań w przeglądarkach, takich jak błędy w renderowaniu lub problemy z kompatybilnością. Dlatego ważne jest, aby znać zasady dotyczące tworzenia struktury dokumentów HTML, co przyczynia się do lepszej jakości kodu oraz większej wydajności stron internetowych.

Pytanie 30

Jaki atrybut powinien zostać umieszczony w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby wskazać źródło cytatu?

A. src

B. href

C. alt

D. cite

Odpowiedzi 'src', 'alt' i 'href' są nieprawidłowe, ponieważ każdy z tych atrybutów pełni inną rolę w kontekście HTML. Atrybut 'src' jest wykorzystywany do określenia źródła dla elementów takich jak <img> czy <script>, a więc nie ma zastosowania w przypadku znacznika <blockquote>. Wybierając 'src', można pomylić cytat z obrazem lub skryptem, co prowadzi do błędnej interpretacji struktury dokumentu. Atrybut 'alt' jest używany do dostarczania alternatywnego tekstu dla obrazów, co również nie ma zastosowania w kontekście cytatów. Użytkownik, wybierając odpowiedź 'alt', może błędnie sądzić, że alternatywny tekst jest istotny dla przedstawienia źródła cytatu, co jest mylne. Natomiast 'href', który jest stosowany w elementach <a> do określenia adresu URL, również nie ma zastosowania w kontekście cytatów. Zastosowanie 'href' w znaczeniu cytatu mogłoby prowadzić do zamieszania związane z funkcją nawigacyjną i semantyką dokumentu. Każda z tych odpowiedzi ilustruje typowe nieporozumienia dotyczące roli atrybutów HTML, co pokazuje, jak ważne jest zrozumienie właściwych kontekstów, w których atrybuty powinny być używane. Prawidłowe zrozumienie znaczenia atrybutu 'cite' jest kluczowe dla tworzenia semantycznych i czytelnych dokumentów HTML, które poprawnie odzwierciedlają intencje autora oraz są zgodne z najlepszymi praktykami webowymi.

Pytanie 31

Podczas sprawdzania poprawności dokumentu HTML5 wyświetlił się komunikat: "Error: Element head is missing a required instance of child element title". Co to oznacza w dokumencie?

A. element <title> nie został zakończony przez </title>

B. element <title> nie jest konieczny

C. nie zdefiniowano elementu <title> w sekcji <head> dokumentu

D. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>

Element <title> jest kluczowym składnikiem sekcji <head> każdego dokumentu HTML5, ponieważ definiuje tytuł strony, który jest wyświetlany w pasku tytułowym przeglądarki oraz w wynikach wyszukiwania. Zgodnie z wytycznymi W3C, element <title> jest wymagany, co oznacza, że każda poprawna struktura dokumentu HTML5 musi go zawierać. Przykład poprawnej implementacji to: <head><title>Mój dokument</title></head>. Brak elementu <title> może prowadzić do niższej oceny SEO, ponieważ wyszukiwarki używają tego tytułu jako kluczowej informacji o zawartości strony. Dla deweloperów istotne jest, aby tytuł był krótki, ale zwięzły, dostarczający jasnych informacji o tematyce strony. Ponadto, dobrze skonstruowany tytuł może przyciągać użytkowników, co ma kluczowe znaczenie w kontekście UX i marketingu internetowego.

Pytanie 32

Znacznik <s> w HTML skutkuje

A. podkreślaniem tekstu

B. pochylaniem tekstu

C. przekreślaniem tekstu

D. migotaniem tekstu

Znacznik <s> w HTML jest używany, żeby pokazać tekst, który jest przekreślony. To zazwyczaj oznacza, że coś jest już nieaktualne lub błędne. W HTML5 ten znacznik jest semantyczny, więc poprawia czytelność strony i ułatwia korzystanie z niej. Na przykład, jeśli autor tekstu chce zaznaczyć, że cena produktu się zmieniła, to mogą użyć <s>, żeby pokazać starą cenę, jak <s>100 zł</s> obok nowej <strong>80 zł</strong>. Dzięki temu przeglądarki dobrze to wyświetlają, a to jest fajne w kontekście zakupów online, blogów czy dokumentacji. Dodatkowo, użycie <s> może pomóc w SEO, bo lepiej oznaczony tekst jest łatwiejszy do zrozumienia dla wyszukiwarek, co może przyciągnąć więcej osób na stronę.

Pytanie 33

Obraz o rozdzielczości 72 PPI oznacza, że ma 72 piksele na

A. centymetr.

B. cal.

C. megabajt.

D. milimetr.

Rozbieżność w tym pytaniu wynika głównie z nieporozumień związanych z jednostkami miary i z tym, jak opisujemy rozdzielczość w grafice komputerowej. Skrót PPI oznacza „pixels per inch”, czyli dosłownie „piksele na cal”. Kluczowy jest tutaj właśnie cal, a nie milimetr, centymetr czy – tym bardziej – megabajt. W grafice i przy specyfikacjach monitorów, tabletów graficznych czy ekranów smartfonów od lat stosuje się jednostki anglosaskie, więc standardem stał się cal. Dlatego rozdzielczość 72 PPI oznacza 72 piksele upakowane w jednym calu długości. Częsty błąd polega na próbie „uładnienia” tego do systemu metrycznego i intuicyjnym założeniu, że skoro w Polsce używamy milimetrów i centymetrów, to PPI też mogłoby się do nich odnosić. Technicznie można przeliczyć, ile to będzie pikseli na centymetr, ale wtedy zmienia się jednostka i powinniśmy używać innego zapisu, np. „ppcm” (pixels per centimeter), a nie PPI. Myślenie typu „72 PPI to 72 piksele na centymetr” jest więc błędne, bo ignoruje definicję samego skrótu. Jeszcze dalej od prawdy jest skojarzenie z megabajtami. Megabajt to jednostka pojemności danych, a nie gęstości pikseli w przestrzeni fizycznej. Rozmiar pliku w MB zależy od liczby pikseli, głębi koloru, kompresji i formatu, ale nie jest bezpośrednią jednostką rozdzielczości w sensie przestrzennym. PPI opisuje, jak gęsto piksele są rozmieszczone na fizycznej długości (calu), natomiast megabajty opisują, ile danych potrzeba do zapisania obrazu w pamięci. Typowy błąd myślowy to wrzucanie do jednego worka pojęć: rozdzielczość w pikselach (np. 1920×1080), gęstość PPI oraz wielkość pliku w MB. To są trzy różne parametry. Dobra praktyka w branży graficznej to trzymanie się poprawnych definicji: PPI zawsze odnosi się do cala, a jeśli chcemy pracować w centymetrach lub milimetrach, używamy przeliczeń, ale nie zmieniamy znaczenia skrótu.

Pytanie 34

Podczas edytowania grafiki w programie do obróbki grafiki rastrowej należy usunąć kolory z obrazu, aby uzyskać wersję w odcieniach szarości. Do osiągnięcia tego efektu można wykorzystać funkcję

A. kadrowania

B. filtru rozmycia

C. desaturacji

D. szumu RGB

Kadrowanie to proces, który polega na przycinaniu obrazu, zmieniając jego rozmiar i proporcje, co nie ma związku z eliminacją kolorów. Choć kadrowanie może poprawić kompozycję zdjęcia, nie wpływa na jego kolorystyczną zawartość. Szum RGB odnosi się do niepożądanych artefaktów w obrazie, które mogą być wynikiem zakłóceń w sygnale podczas skanowania lub przetwarzania obrazu. Szum nie jest techniką edycyjną, lecz problemem, który można zredukować za pomocą filtrów, ale nie eliminuje kolorów. Filtr rozmycia jest narzędziem służącym do wygładzania krawędzi i detali w obrazie, co przyczynia się do uzyskania miękkiego efektu. Rozmycie nie usuwa kolorów, a jedynie modyfikuje ich widoczność poprzez rozprzestrzenianie pikseli, co może prowadzić do utraty szczegółów, ale nie ma na celu uzyskania odcieni szarości. W związku z tym, żadna z tych metod nie jest odpowiednia do osiągnięcia efektu desaturacji, który jest kluczowy dla konwersji obrazu do formy monochromatycznej.

Pytanie 35

Gdzie należy umieścić znacznik meta w języku HTML?

A. w sekcji nagłówkowej strony internetowej

B. między znacznikami body

C. między znacznikami paragrafu

D. w stopce strony internetowej

Znacznik meta w języku HTML jest kluczowym elementem, który powinien być umieszczony w części nagłówkowej (head) dokumentu. Znaczniki meta służą do definiowania różnych informacji o stronie, takich jak zestaw znaków, opis, słowa kluczowe, autor oraz inne istotne dane, które nie są bezpośrednio wyświetlane na stronie. Przykładowo, znacznik meta z atrybutem 'charset' informuje przeglądarki, w jaki sposób interpretować znaki na stronie, co jest szczególnie ważne dla prawidłowego wyświetlania treści w różnych językach. Standardy HTML5 zalecają umieszczanie znaczników meta w nagłówku, aby umożliwić optymalizację SEO, co zwiększa widoczność strony w wynikach wyszukiwania. Dobrą praktyką jest również dodanie opisu strony przy pomocy znacznika meta 'description', co pozwala wyszukiwarkom na lepsze zrozumienie tematyki strony oraz zwiększa klikalność w wynikach wyszukiwania.

Pytanie 36

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

A. Ogg, AVI, MPEG

B. MP4, AVI

C. Ogg, QuickTime

D. MP4, Ogg, WebM

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

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

A. sprawdzenie działania strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

B. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

C. zainstalowanie różnych przeglądarek na kilku komputerach i testowanie strony

D. wykorzystanie walidatora kodu HTML

Zainstalowanie na kilku komputerach różnych przeglądarek i testowanie witryny, choć może wydawać się sensowne, wiąże się z wieloma wadami. Po pierwsze, taka metoda jest czasochłonna i wymaga znacznych zasobów, zarówno w zakresie sprzętu, jak i czasu. Każda przeglądarka wymaga aktualizacji, a nowe wersje mogą wprowadzać zmiany, które wpływają na sposób wyświetlania witryny. Dodatkowo, różnorodność systemów operacyjnych i ich wersji, na których mogą działać te przeglądarki, dodatkowo komplikuje proces testowania. W kontekście walidatorów języka HTML, ich zastosowanie jest przede wszystkim ograniczone do sprawdzania poprawności kodu, a nie do testowania rzeczywistego działania witryny w różnych środowiskach. Z perspektywy praktycznej, testowanie w jednej przeglądarce, takiej jak Internet Explorer, z założeniem, że inne przeglądarki będą działać podobnie, jest nierealistyczne. Różne silniki renderujące i interpretujące kod HTML, CSS oraz JavaScript mogą prowadzić do odmiennych wyników. Właściwe przetestowanie witryny wymaga kompleksowego podejścia, które uwzględnia wszystkie możliwe przeglądarki i ich wersje, co czyni emulator najlepszym wyborem. Kluczem do sukcesu w testowaniu jest efektywność, a posłużenie się emulatorami znacząco podnosi jakość i szybkość weryfikacji funkcjonalności witryny.

Pytanie 38

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

A. <b> oraz <u>

B. <b> oraz <i>

C. <i> oraz <mark>

D. <u> oraz <sup>

Odpowiedzi wskazujące na <u> oraz <sup> nie są właściwe w kontekście wyróżniania istotności tekstu. Znacznik <u> oznacza tekst podkreślony, co nie jest związane z jego semantycznym znaczeniem w HTML. W przeszłości używano go do podkreślania tekstu, ale nie ma on związku z wagi treści, co czyni go mniej odpowiednim do tworzenia treści dostępnych i zrozumiałych. Użytkownicy technologii wspomagających mogą mieć trudności w zrozumieniu, dlaczego tekst jest podkreślony, gdyż niekoniecznie oznacza to, że jest on ważny. Podobnie, <sup> jest znacznikiem używanym do oznaczania tekstu w indeksie górnym, co ma zastosowanie w kontekście matematycznym lub chemicznym, ale także nie ma związku z semantycznym wyróżnianiem treści. Z kolei odpowiedzi wskazujące na <i> oraz <mark> także są niepoprawne, ponieważ <mark> służy do oznaczania tekstu, który został wyróżniony, na przykład w kontekście wyszukiwania, ale niekoniecznie odzwierciedla istotność. Ostatecznie, znacznik <i> jest używany do stylizacji tekstu w kursywie, co także nie koresponduje z semantycznym znaczeniem wyróżnienia ważności. Przy opracowywaniu treści w HTML należy unikać stosowania znaczników jedynie do celów formatowania, a zamiast tego korzystać z semantycznych znaczników, aby poprawić dostępność oraz interpretację contentu.

Pytanie 39

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

p::first-line
 {
     font-size: 150%;
 }

A. pierwszy paragraf na stronie będzie miał powiększoną czcionkę w całości

B. pierwsza linia każdego paragrafu będzie miała większą czcionkę niż pozostałe linie

C. cały tekst w paragrafie zostanie powiększony o 150%

D. pierwsza linia każdego z paragrafów będzie miała mniejszą wielkość czcionki od pozostałych linii

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

Pytanie 40

Który atrybut należy dodać do znacznika <video>, aby wyciszyć dźwięk odtwarzanego w przeglądarce filmu?

<video>
    <source src="film.mp4" type="video/mp4">
</video>

A. controls

B. loop

C. muted

D. autoplay

Twoja odpowiedź jest poprawna. Atrybut 'muted' jest używany w znaczniku <video>, aby wyłączyć dźwięk dla filmu wyświetlanego w przeglądarce. Jest to sposób na sterowanie dźwiękiem bez konieczności korzystania z dodatkowych elementów kontrolujących odtwarzanie filmu. Jest to bardzo przydatne, gdy chcemy, aby film był odtwarzany w tle bez zakłócania użytkownika dźwiękiem, co jest często stosowane na stronach internetowych. Ważne jest to, że to atrybut 'muted' jest odpowiedzialny za początkowy stan dźwięku filmu, a nie za to, czy użytkownik będzie mógł go później włączyć. Dodatkowo, dobrą praktyką jest pozostawienie użytkownikowi możliwości sterowania dźwiękiem, nawet jeśli jest on domyślnie wyłączony, co można osiągnąć dodając atrybut 'controls'.

Rozpocznij nowy egzamin

Powrót do strony głównej