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: 10 czerwca 2026 16:16
Data zakończenia: 10 czerwca 2026 16:16

Egzamin niezdany

Wynik: 0/40 punktów (0,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 HTML atrybut znacznika video, który umożliwia ciągłe odtwarzanie, to

A. muted

B. poster

C. loop

D. controls

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut loop w znaczniku video jest kluczowy dla zapewnienia, że wideo będzie odtwarzane w nieskończoność, co jest szczególnie przydatne w przypadku prezentacji multimedialnych czy tła w aplikacjach webowych. Umożliwia to automatyczne powtarzanie treści bez interwencji użytkownika, co może poprawić doświadczenia użytkownika oraz skuteczność przekazu. Zgodnie z dokumentacją HTML5, aby użyć atrybutu loop, wystarczy dodać go do znacznika video, co pozwala na osiągnięcie zamierzonego efektu. Przykładem może być: <video src='video.mp4' loop autoplay></video>, gdzie wideo będzie się odtwarzać automatycznie i w kółko. Użycie tego atrybutu jest szczególnie istotne w kontekście interaktywnych aplikacji i gier, gdzie ciągłość odtwarzania może być kluczowa dla zaangażowania odbiorcy. Atrybut loop jest częścią specyfikacji W3C dotyczącej HTML5, która promuje dostępność i elastyczność w tworzeniu nowoczesnych aplikacji internetowych.

Pytanie 2

Podczas walidacji witryn internetowych nie analizuje się

A. działania hiperlinków

B. błędów w składni kodu

C. zgodności z różnymi przeglądarkami

D. źródła pochodzenia narzędzi edycyjnych

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 3

Przedstawiony serwis internetowy służy do walidacji

A. arkuszy stylów.

B. bazy danych SQL.

C. skryptów JavaScript.

D. dokumentów HTML.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Strona internetowa 'CSS Validation Service' jest narzędziem stworzonym przez konsorcjum W3C do walidacji arkuszy stylów CSS. W3C, czyli World Wide Web Consortium, to międzynarodowa społeczność, która rozwija otwarte standardy mające na celu długoterminowe wzrost i rozwój sieci WWW. Narzędzie do walidacji CSS zapewnia mechanizm sprawdzania kodu CSS pod kątem zgodności ze standardami W3C. Dzięki temu deweloperzy mogą upewnić się, że ich arkusze stylów są poprawne, co jest kluczowe dla zapewnienia prawidłowego wyglądu i działania stron internetowych na różnych platformach i przeglądarkach. Walidator CSS pomaga także naprawić ewentualne błędy w kodzie. To jest praktyczne zastosowanie tej usługi - utrzymanie jednolitych standardów kodowania, co prowadzi do większej interoperacyjności pomiędzy różnymi technologiami i narzędziami.

Pytanie 4

W HTML znacznik tekst będzie wyświetlany przez przeglądarkę w taki sam sposób jak znacznik

A. <b>tekst</b>

B. <big>tekst</big>

C. <sub>tekst</sub>

D. <h1>tekst</h1>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> jest używany w HTML do oznaczania tekstu, który ma być wyróżniony ze względu na jego ważność. Jest to związane z semantyką dokumentu. Chociaż <strong> i <b> wyświetlają tekst w podobny sposób (zazwyczaj pogrubiony), mają inne znaczenie. Znacznik <b> jest używany do czysto wizualnego wyróżnienia, bez przypisywania wartości semantycznej. Dlatego, gdy używamy <strong>, nie tylko zmieniamy wygląd tekstu, lecz także informujemy przeglądarkę i dostępne technologie, że ten element ma szczególne znaczenie. Przykładem praktycznego zastosowania <strong> może być wyróżnienie kluczowych informacji w artykule, co wpływa na zrozumienie treści przez użytkowników oraz poprawia dostępność strony. Warto pamiętać, że stosowanie odpowiednich znaczników zgodnie z ich przeznaczeniem jest zgodne z zasadami HTML5 i poprawia SEO, ponieważ wyszukiwarki lepiej rozumieją kontekst strony, co jest kluczowe dla jej indeksacji.

Pytanie 5

Aby stworzyć układ strony z trzema kolumnami obok siebie, można wykorzystać styl CSS

A. B

B. C

C. A

D. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź A wykorzystuje właściwość float CSS ustawioną na left oraz szerokość width na 33 procent co pozwala na umieszczenie trzech kolumn obok siebie na stronie internetowej Float jest często używany do tworzenia układów wielokolumnowych gdyż pozwala na pływające rozmieszczenie elementów blokowych wewnątrz kontenera Dzięki ustawieniu szerokości na 33 procent zapewniamy że trzy kolumny będą mogły się zmieścić obok siebie w jednym rzędzie w ramach dostępnej szerokości kontenera Jest to efektywne podejście w przypadku responsywnych projektów gdzie nie zawsze znamy dokładną szerokość dostępnej przestrzeni Floating jest klasycznym podejściem w CSS i chociaż nowe technologie jak flexbox czy grid oferują więcej możliwości jest wciąż powszechnie stosowany w wielu projektach szczególnie gdy chodzi o proste układy Dodatkowo float left jest zgodny z wielu przeglądarkami co zapewnia większą uniwersalność kodu Przy projektowaniu stron zawsze warto pamiętać o dodaniu clearfix lub overflow hidden do rodzica elementów pływających aby uniknąć problemów z zawijaniem się kontenera wokół elementów pływających

Pytanie 6

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr { background-color: Pink; }

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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 7

Aby prawidłowo zorganizować hierarchiczną strukturę tekstu na stronie internetowej, powinno się wykorzystać

A. znaczniki <h1>, <h2> oraz <p>

B. znaczniki <frame> i <table>

C. znacznik <div>

D. znacznik <p> z formatowaniem

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby poprawnie zdefiniować hierarchiczną strukturę tekstu witryny internetowej, kluczowe jest zastosowanie znaczników <h1>, <h2>, oraz <p>. Znacznik <h1> jest najważniejszym nagłówkiem na stronie i powinien być używany tylko raz, aby wskazać główny temat treści. Z kolei znaczniki <h2> służą do wyodrębnienia podtematów, co pozwala na tworzenie czytelnej i logicznej struktury dokumentu. Dzięki tym znacznikom, zarówno użytkownicy, jak i wyszukiwarki internetowe mogą łatwiej zrozumieć hierarchię treści. Znacznik <p> jest używany do definiowania akapitów, co dodatkowo poprawia czytelność tekstu. Zastosowanie tej struktury jest zgodne z wytycznymi W3C oraz zasadami SEO, co przyczynia się do lepszego indeksowania przez wyszukiwarki. Przykładowo, strona internetowa poświęcona zdrowemu stylowi życia może mieć <h1> jako 'Zdrowy Styl Życia', a <h2> jako 'Dieta' i 'Ćwiczenia', co ułatwia użytkownikom nawigację oraz przyswajanie treści.

Pytanie 8

W dołączonym fragmencie kodu CSS kolor został przedstawiony w formie

A. dziesiętnej

B. HSL

C. szesnastkowej

D. CMYK

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor zapisany w postaci szesnastkowej w CSS to popularny sposób definiowania barw na stronach internetowych. Szesnastkowy format koloru wykorzystuje sześć znaków, które są kombinacją cyfr oraz liter od A do F, poprzedzone znakiem hash (#). Każda para znaków reprezentuje wartość jednego z trzech podstawowych kolorów RGB: czerwonego, zielonego i niebieskiego. Na przykład kolor #008000 składa się z czerwonego o wartości 00, zielonego o wartości 80 i niebieskiego o wartości 00. Szesnastkowy zapis jest preferowany ze względu na swoją kompaktowość i zgodność ze standardami sieciowymi. W praktyce, projektanci często używają narzędzi do konwersji kolorów, aby uzyskać pożądane odcienie, co ułatwia zastosowanie odpowiednich wartości szesnastkowych w kodzie. Format ten pozwala także na tworzenie skróconych wersji, jak #FFF dla bieli. Jego użycie jest powszechne i dobrze zrozumiałe w branży, co czyni go uniwersalnym wyborem w projektach webowych.

Pytanie 9

W języku CSS zdefiniowano styl. Sformatowana tym stylem sekcja będzie zawierała obramowanie o szerokości:

div { border: solid 2px blue;
       margin: 20px;}

A. 2 px oraz marginesy zewnętrzne tego obramowania

B. 20 px oraz marginesy wewnętrzne tego obramowania

C. 2 px oraz marginesy wewnętrzne tego obramowania

D. 20 px oraz marginesy zewnętrzne tego obramowania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W definicji stylu CSS podano, że sekcja div będzie miała obramowanie o szerokości 2 pikseli oraz marginesy zewnętrzne o wartości 20 pikseli. Obramowanie jest definiowane przez właściwość 'border', gdzie 'solid' oznacza typ obramowania i '2px' to jego szerokość, a 'blue' to kolor. Marginesy zewnętrzne są definiowane za pomocą właściwości 'margin', która w tym przypadku ma wartość 20 pikseli. Jest to odległość między brzegiem obiektu a innymi elementami na stronie. Zrozumienie tych właściwości jest kluczowe w projektowaniu responsywnych i dobrze zorganizowanych układów stron internetowych. Stosując te właściwości, twórcy stron mogą łatwo kontrolować wygląd i odległości między elementami, co jest szczególnie ważne w kontekście użyteczności i estetyki witryny. Przykładowo, jeśli chciałbyś dodać więcej przestrzeni pomiędzy sekcjami, wystarczy zwiększyć wartość 'margin'. Warto również zaznaczyć, że te właściwości są zgodne z aktualnymi standardami CSS, co pozwala na ich wszechstronne wykorzystanie w praktyce.

Pytanie 10

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

A. <ul>

B. <dl>

C. <li>

D. <ol>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <ol> służy do wstawiania list numerowanych (uporządkowanych) w dokumentach HTML. Jego zastosowanie pozwala na tworzenie list, gdzie każdy element jest automatycznie numerowany, co jest szczególnie przydatne w sytuacjach, gdy kolejność elementów ma znaczenie, na przykład w przepisach kulinarnych, instrukcjach czy krokach do wykonania. Warto pamiętać, że elementy listy umieszczane są w znaczniku <li>, który określa każdy pojedynczy wpis na liście. Stosowanie znaczników zgodnych z zaleceniami W3C zapewnia, że strona jest zgodna z zasadami dostępności oraz ułatwia interpretację treści przez wyszukiwarki. Przykład użycia: <ol><li>Krok pierwszy</li><li>Krok drugi</li></ol>, co wygeneruje numerowaną listę z dwoma krokami. Przestrzeganie standardów oraz dobrych praktyk w tworzeniu struktury HTML jest kluczowe dla zapewnienia przejrzystości i efektywności strony internetowej.

Pytanie 11

Aby na witrynie internetowej pokazać logo z przezroczystym tłem, należy użyć formatu

A. JPG

B. PNG

C. CDR

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest najbardziej odpowiednim wyborem do wyświetlania logo z przezroczystym tłem na stronie internetowej. Główną zaletą formatu PNG jest jego zdolność do obsługi przezroczystości, co oznacza, że tło logo może być całkowicie przezroczyste, pozwalając na bezproblemowe wkomponowanie go w różnorodne tła. W praktyce oznacza to, że logo w formacie PNG nie będzie miało niepożądanych białych lub kolorowych ramek, co ma kluczowe znaczenie dla estetyki i profesjonalnego wyglądu strony. Dodatkowo, PNG obsługuje wysoką jakość obrazu oraz kompresję bezstratną, co pozwala na zachowanie detali w grafice. Format ten jest powszechnie stosowany w projektowaniu stron internetowych oraz aplikacji mobilnych, zwłaszcza w przypadku ikon i grafik, które wymagają zachowania wyrazistości i przezroczystości. Warto również wspomnieć, że PNG stał się standardem w branży, szczególnie w kontekście użycia w sieci, co czyni go najlepszym wyborem dla projektantów i deweloperów.

Pytanie 12

W CSS określono stylizację dla paragrafu, która nada mu następujące właściwości:

A. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px

B. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px

C. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

D. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W CSS stylizacja elementów HTML jest kluczowa dla tworzenia estetycznych i funkcjonalnych stron internetowych W przypadku tego pytania analizujemy przypisanie właściwości stylu do elementu paragrafu Kod CSS background-color red ustawia tło na czerwone color blue przypisuje niebieski kolor tekstu natomiast margin 40px ustawia marginesy zewnętrzne wokół elementu na 40 pikseli Każda z tych właściwości pełni określoną rolę background-color odnosi się do koloru tła całego elementu co jest przydatne w wyróżnianiu lub oddzielaniu sekcji strony color zmienia kolor tekstu co jest istotne dla czytelności i estetyki treści natomiast margin wpływa na odstęp pomiędzy elementami zapewniając przejrzystość i poprawne rozmieszczenie na stronie Zrozumienie tych właściwości jest kluczowe dla projektowania responsywnych i estetycznych stron internetowych W praktyce używa się ich do tworzenia interfejsów które są atrakcyjne wizualnie i funkcjonalne dla użytkowników Zgodnie z dobrymi praktykami warto dbać o kontrast i spójność wizualną co jest bezpośrednio związane z omawianymi właściwościami

Pytanie 13

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Który z poniższych fragmentów kodu HTML odnosi się do pierwszego wiersza tabeli?

A. B

B. A

C. C

D. D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to D. W tym kodzie HTML użyto znaczników <th> zamiast <td> do zdefiniowania pierwszego wiersza tabeli co jest zgodne z dobrą praktyką formatowania wierszy nagłówkowych tabel. Znaczniki <th> oznaczają header cells czyli komórki nagłówkowe które z definicji są ustawione jako pogrubione i wyśrodkowane w przeglądarce. Użycie <th> zamiast <td> dla nagłówków tabeli wspiera dostępność ponieważ oprogramowanie wspomagające takie jak czytniki ekranowe rozpoznaje te znaczniki jako nagłówki co ułatwia nawigację osobom z ograniczeniami wzrokowymi. Ponadto standard HTML zaleca użycie <th> dla komórek opisujących dane które znajdują się poniżej w wierszach tabeli co pomaga w semantycznym oznaczeniu struktury dokumentu. Zastosowanie poprawnej semantyki w kodzie HTML nie tylko zwiększa dostępność ale również poprawia SEO oraz ułatwia utrzymanie kodu w przyszłości. Przy projektowaniu tabel w HTML ważne jest również rozważenie stylizacji za pomocą CSS aby zachować czystość i czytelność kodu HTML.

Pytanie 14

Jakie skutki przyniesie zastosowanie przedstawionego formatowania CSS dla nagłówka trzeciego stopnia?

<style> h3 { background-color: grey; } </style> ... <h3 style="background-color: orange;"> Rozdział 1.2.2. </h3>

A. tło będzie pomarańczowe

B. kolor tekstu będzie pomarańczowy

C. kolor tekstu będzie szary

D. tło będzie szare

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym przykładzie pokazano dwa różne sposoby stylizacji za pomocą CSS: styl wbudowany i styl zewnętrzny. Styl wbudowany ma wyższy priorytet, bo jest przypisany bezpośrednio do elementu HTML, a to oznacza, że w nagłówku trzeciego stopnia kolor tła będzie pomarańczowy. To ma sens, bo czasem musimy przeskoczyć ogólne reguły stylizacji, żeby wprowadzić jakieś szczególne zmiany. Używanie stylów wbudowanych może być jednak ryzykowne, bo jak się ich nagromadzi, to ciężko się potem w tym połapać. Dlatego lepiej korzystać z zewnętrznych stylów – są bardziej uporządkowane i pozwalają na łatwe powtarzanie kodu CSS. Ważne jest też, żeby nie łączyć HTML z CSS w sposób, który wprowadza zamęt, bo to ułatwia życie i sprawia, że kod jest bardziej zrozumiały. Wiedza na temat priorytetów w CSS jest kluczowa dla każdego, kto chce dobrze projektować strony i mieć wszystko ładnie poukładane.

Pytanie 15

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }

A. rys.gif stanie się ramką dla listy nienumerowanej

B. rys.gif wyświetli się jako tło dla listy nienumerowanej

C. każdy punkt listy zyska osobne tło z grafiki rys.gif

D. punkt listy nienumerowanej będzie rys.gif

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Deklaracja CSS ul{ list-style-image: url('rys.gif'); } powoduje, że każdy element listy nienumerowanej (ul) używa obrazu rys.gif jako punktora. Właściwość list-style-image pozwala na zamianę domyślnego stylu punktów listy, takiego jak kropki czy kwadraty, na dowolny obrazek. Jest to przydatne, gdy chcemy nadać stronie unikalny wygląd lub dostosować ją do identyfikacji wizualnej marki. W praktyce oznacza to, że zamiast klasycznego punktora, użytkownicy zobaczą wybrany obraz, co może wpłynąć na estetykę i czytelność strony. Ważne jest, aby obraz był odpowiednio skalowany, aby nie zaburzał układu listy. List-style-image to standardowa właściwość CSS uznawana przez większość przeglądarek, co czyni ją uniwersalnym narzędziem w rękach projektanta stron. W procesie projektowania warto upewnić się, że wybrany obrazek jest dostępny dla wszystkich użytkowników, co można osiągnąć np. poprzez dodanie atrybutu alt w wersji tekstowej listy dla lepszej dostępności.

Pytanie 16

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

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

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

A. align="middle"

B. alt="technik informatyk"

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

D. usemap="#lekturamap"

Brak odpowiedzi na to pytanie.

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

Pytanie 17

W przedstawionej regule CSS ```h1 {color : blue}``` h1 reprezentuje

A. selektor

B. wartość

C. deklarację

D. klasę

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Selekcja elementów w CSS jest naprawdę ważna, jeśli chodzi o tworzenie stron www. W regule CSS `h1 {color: blue}` mamy do czynienia z selektorem `h1`, który mówi nam, jak stylizować nagłówki pierwszego poziomu. Dzięki selekcji można fajnie dopasować wygląd strony do swoich potrzeb. No i w tym przypadku każdy nagłówek `h1` na stronie będzie miał niebieski kolor, co jest dość prostą i czytelną metodą. warto pamiętać, że CSS oferuje różne typy selektorów, jak klasy czy identyfikatory, a nie tylko tagi. W dużych projektach lepiej używać klasowych czy identyfikatorowych selektorów, bo daje to większą kontrolę nad stylizacją i łatwiejsze zarządzanie kodem.

Pytanie 18

W CSS zastosowano poniższe formatowanie. Kolorem czerwonym będzie wyświetlony

h1 i {
   color: red;
}

A. tylko tekst italic nagłówka pierwszego stopnia

B. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu

C. jedynie tekst italic we wszystkich poziomach nagłówków

D. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W stylach CSS selektor złożony h1 i oznacza, że formatowanie będzie stosowane tylko do elementów pochylonych i znajdujących się wewnątrz nagłówka pierwszego poziomu h1. W praktyce oznacza to, że taki zapis CSS zmienia kolor na czerwony tylko dla tekstu wewnątrz tagu <i> znajdującego się w <h1>. Selekcja złożona umożliwia precyzyjne określanie, które elementy są formatowane, co jest kluczowe w przypadku dużych i złożonych stron internetowych. Zrozumienie działania selektorów jest fundamentem efektywnego stylizowania dokumentów HTML. Pozwala to na zachowanie spójności wizualnej oraz lepszą kontrolę nad wyglądem strony. Dobór odpowiednich selektorów w CSS to również jedna z dobrych praktyk, które sprzyjają czytelności kodu oraz jego łatwiejszej konserwacji w przyszłości. Taki zapis pozwala na minimalizację konfliktów stylów, które mogą się pojawić przy bardziej ogólnych selektorach. Praktyczne użycie selektorów złożonych jest więc zalecane w celu uzyskania bardziej kontrolowanego i przewidywalnego wyglądu strony internetowej, co jest zgodne ze standardami webowymi promującymi semantyczne i uporządkowane kodowanie.

Pytanie 19

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. zaimportować obraz do edytora grafiki wektorowej

B. obniżyć rozdzielczość obrazu

C. dodać kanał alfa

D. przekształcić obraz w odcienie szarości

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dodanie kanału alfa do obrazu jest kluczowym krokiem, aby przekształcić JPEG w PNG z zachowaniem przezroczystości. Format PNG obsługuje kanał alfa, który może przechowywać informacje o przezroczystości każdego piksela, co oznacza, że można zdefiniować, które części obrazu są w pełni widoczne, a które są całkowicie przezroczyste. W praktyce, po dodaniu kanału alfa, można użyć narzędzi edycyjnych, aby ustawić białe obszary na przezroczyste. Na przykład w programie GIMP lub Adobe Photoshop, można użyć narzędzia 'Magiczne różdżka' do zaznaczenia białego tła, a następnie usunąć je, co zamieni białe piksele na przezroczystość. Istotne jest, aby pamiętać, że JPEG nie wspiera przezroczystości, dlatego przekształcenie do formatu PNG jest niezbędne. Dobrą praktyką jest zawsze pracować na kopii oryginalnego obrazu, aby móc wrócić do źródłowego pliku, jeśli zajdzie taka potrzeba.

Pytanie 20

W którym z poniższych przykładów walidacja fragmentu kodu CSS zakończy się sukcesem?

A. p { text-size:bold; }

B. p { font-weight:bold; }

C. <p style="font-style:bold;">

D. <p style="font-size:bold;">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź p { font-weight:bold; } jest poprawna, ponieważ jest zgodna z obowiązującą składnią CSS. W tym przypadku użyto selektora typu, który odnosi się do wszystkich elementów <p> w dokumencie HTML, a właściwość font-weight umożliwia ustawienie grubości czcionki. Wartością 'bold' informujemy przeglądarkę, aby wyświetliła tekst w pogrubionej formie, co jest częstą praktyką w stylizacji tekstu. Stosowanie selektorów typu w CSS pozwala na efektywne zarządzanie stylami w całym dokumencie, zatem jest to zgodne z najlepszymi praktykami projektowania stron internetowych. Przykładowo, w celu nadania pogrubienia wszystkim nagłówkom w dokumencie, można by użyć: h1, h2, h3 { font-weight: bold; }. Zastosowanie takiej reguły pozwala na łatwe i szybkie wprowadzenie zmian w stylu dokumentu, co jest kluczowe w kontekście responsywnego projektowania i modernizacji stron. Dobre praktyki wskazują, aby unikać inline styles (stylów wewnętrznych) na rzecz zewnętrznych arkuszy stylów, co poprawia przejrzystość i utrzymanie kodu.

Pytanie 21

Aby obraz wstawiony na stronę internetową mógł dostosować się automatycznie do wymiarów ekranu, na którym jest wyświetlany, konieczne jest

A. ustawienie jego szerokości w wartościach procentowych

B. ustawienie jednego z jego wymiarów w pikselach

C. ustawienie obu jego rozmiarów w pikselach

D. niezmienianie obu jego wymiarów za pomocą stylów CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Ustawienie szerokości obrazu w wartościach procentowych jest kluczowym aspektem responsywnego projektowania stron internetowych. Dzięki temu obraz automatycznie dostosowuje się do szerokości kontenera, w którym jest umieszczony, co pozwala na płynne skalowanie w zależności od rozmiaru ekranu. Na przykład, jeśli szerokość obrazu ustawimy na 100%, to obraz będzie zawsze zajmował całą szerokość swojego kontenera, co jest szczególnie ważne w przypadku urządzeń mobilnych oraz różnych rozdzielczości ekranów. To podejście wspiera zasady projektowania responsywnego, które są fundamentem nowoczesnych stron internetowych. Dodatkowo, stosowanie jednostek procentowych zamiast pikseli umożliwia lepszą dostępność i poprawia doświadczenia użytkowników, eliminując problemy związane z przewijaniem lub wyświetlaniem treści poza ekranem. Obrazy ustawione w procentach pozwalają na bardziej elastyczne układy, które lepiej reagują na zmiany rozmiarów okien przeglądarki, co jest zgodne z najlepszymi praktykami w branży, takimi jak użycie Frameworków CSS, jak Bootstrap, które bazują na responsywnych gridach.

Pytanie 22

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

<!DOCTYPE html>
<html>
<head>
<style>
div~p { color: blue; }
</style>
</head>
<body>
  <div>
    <p>pierwszy paragraf</p>
      <div>
        <p>drugi paragraf</p>
        <p>trzeci paragraf</p>
      </div>
    <p>czwarty paragraf</p>
  </div>
</body>
</html>

A. Pierwszy.

B. Drugi.

C. Trzeci.

D. Czwarty.

Brak odpowiedzi na to pytanie.

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

Pytanie 23

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

<ol>
 <li>Pierwszy</li>
 <li>Drugi</li>
 <li>Trzeci</li>
 </ol>

A. numerowanej

B. linków

C. skróconych

D. wypunktowanej

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Fragment kodu HTML używa tagu <ol> co oznacza listę numerowaną. Tag <ol> jest skrótem od ordered list i jest używany do tworzenia listy elementów, które są automatycznie numerowane przez przeglądarkę. Wewnątrz tego tagu znajdują się tagi <li>, które oznaczają poszczególne elementy listy. Każdy z tych elementów będzie wyświetlany z kolejnym numerem w przeglądarce internetowej. Na przykład w przypadku zamieszczonego kodu HTML przeglądarka wyświetli listę z numerami 1 2 3 przed elementami Pierwszy Drugi Trzeci. Listy numerowane są użyteczne w sytuacjach gdy ważna jest kolejność elementów na przykład w instrukcjach krok po kroku lub rankingach. Tworzenie list numerowanych z użyciem <ol> jest zgodne ze standardami HTML i jest dobrym rozwiązaniem gdyż pozwala na łatwe zarządzanie kolejnością elementów bez konieczności ręcznego numerowania co redukuje ryzyko błędów i automatycznie aktualizuje numerację w przypadku dodania bądź usunięcia elementów z listy.

Pytanie 24

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

A. <img src = mojPiesek.jpg alt = pies>

B. <img src = "mojPiesek.jpg" >

C. <img src = mojPiesek.jpg" alt = "pies>

D. <img src = "mojPiesek.jpg" alt = "pies">

Brak odpowiedzi na to pytanie.

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

Pytanie 25

W jakim typie pliku powinno się zapisać zdjęcie, aby mogło być wyświetlane na stronie WWW z zachowaniem efektu przezroczystości?

A. CDR

B. JPG

C. PNG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest idealnym wyborem do przechowywania obrazów z przezroczystością, ponieważ obsługuje kanał alfa, który pozwala na reprezentację przezroczystości w obrazach. Ta cecha jest szczególnie cenna w projektowaniu stron internetowych, gdzie grafiki muszą być dopasowane do różnych tła bez widocznych krawędzi. Przykładowo, logo firmy zapisane w formacie PNG może być umieszczone na stronie o różnych kolorach tła, zachowując estetyczny wygląd i nie zaburzając kompozycji. Ponadto, PNG jest formatem bezstratnym, co oznacza, że zachowuje jakość oryginalnego obrazu podczas kompresji, co jest ważne, gdy zależy nam na zachowaniu szczegółów i kolorów. W praktyce, wiele przeglądarek internetowych i edytorów graficznych obsługuje ten format, co czyni go standardem w branży. Dlatego dla grafik z przezroczystością PNG jest najczęściej zalecanym formatem, zgodnym z aktualnymi standardami i najlepszymi praktykami w dziedzinie projektowania stron internetowych.

Pytanie 26

Czy automatyczna weryfikacja właściciela witryny korzystającej z protokołu HTTPS jest możliwa dzięki

A. informacjom whois

B. prywatnym kluczom

C. danym kontaktowym zamieszczonym na stronie

D. certyfikatowi SSL

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Certyfikat SSL (Secure Sockets Layer) jest kluczowym elementem w automatycznej weryfikacji właściciela strony internetowej, który jest udostępniany przez protokół HTTPS. Głównym zadaniem certyfikatu SSL jest zapewnienie, że komunikacja między przeglądarką a serwerem jest zaszyfrowana oraz że tożsamość serwera została potwierdzona przez zaufaną stronę trzecią, czyli urząd certyfikacji (CA - Certificate Authority). Certyfikaty SSL są wydawane po przeprowadzeniu odpowiednich weryfikacji tożsamości wnioskodawcy, co może obejmować sprawdzenie danych WHOIS, ale również inne procesy weryfikacyjne, takie jak potwierdzenie adresu e-mail lub dokumentów właściciela firmy. Przykładowo, witryny e-commerce korzystają z certyfikatów SSL, aby zapewnić bezpieczeństwo transakcji finansowych, co zwiększa zaufanie użytkowników do sklepu. Na poziomie technicznym, certyfikat SSL implementuje protokoły kryptograficzne, takie jak TLS (Transport Layer Security), co nie tylko zabezpiecza transmisję danych, ale także umożliwia autoryzację strony. W praktyce, posiadanie certyfikatu SSL wpływa również na pozycjonowanie w wyszukiwarkach, ponieważ Google promuje strony z bezpiecznym połączeniem HTTPS.

Pytanie 27

Jaki zestaw terminów określa interfejs użytkownika witryny internetowej?

A. Przesyłanie zapytań do bazy, skrypty PHP

B. Szkic strony, diagram witryny, diagram przepływu informacji

C. Przyciski, menu, interakcja użytkownika z aplikacją

D. Obróbka danych, system zarządzania treścią, projektowanie informacji

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Interfejs użytkownika (UI) strony internetowej to kluczowy element, który odpowiada za interakcję użytkownika z aplikacją internetową. W jego skład wchodzą różnorodne elementy, takie jak przyciski, menu, formularze, ikony oraz inne komponenty, które umożliwiają użytkownikowi nawigację, wprowadzanie danych oraz podejmowanie akcji. Zastosowanie standardów projektowania, takich jak Material Design czy Human Interface Guidelines, pozwala na tworzenie intuicyjnych i estetycznych interfejsów, co zwiększa użyteczność strony. Przykładowo, przycisk „Zatwierdź” umieszczony w formularzu powinien być wyraźnie oznaczony i łatwo dostępny, aby użytkownicy mogli szybko zakończyć proces rejestracji lub zakupu. Dobre praktyki w zakresie projektowania UI obejmują także responsywność, co oznacza, że interfejs powinien dostosowywać się do różnych rozmiarów ekranów, zapewniając optymalne wrażenia użytkownika na urządzeniach mobilnych oraz desktopowych. Interakcja użytkownika z aplikacją jest kluczowym aspektem, a właściwie zaprojektowany interfejs wpływa na satysfakcję użytkowników oraz ich skłonność do powrotu na stronę.

Pytanie 28

Na ilustracji przedstawiono kompozycję bloków strony www. Który z elementów formatowania strony odpowiada temu układowi? (Dla uproszczenia pominięto właściwości dotyczące koloru tła, wysokości oraz czcionki)

A. Odpowiedź 4: D

B. Odpowiedź 3: C

C. Odpowiedź 2: B

D. Odpowiedź 1: A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest naprawdę na czasie! Widzisz, użyto tutaj techniki pływającego układu z CSS, czyli float i clear. Pierwszy blok pływa w lewo, ma 30% szerokości, dzięki czemu obok niego mogą stać drugi i trzeci blok, które też pływają w lewo i zajmują 70%. To pozwala na ułożenie elementów w jednej linii, o ile kontener ma wystarczająco miejsca. W sumie, float to klasyka przy układach wielokolumnowych, chociaż obecnie sporo osób korzysta z Flexboxa lub Grid Layout. Zauważ, że blok czwarty ma clear:both, więc zacznie się poniżej wcześniejszych elementów pływających. To ważne, bo dzięki temu unikamy problemów z nałożeniem się treści. Zachowanie porządku w układzie jest kluczowe, szczególnie w responsywnym web designie. Tego typu układy są całkiem popularne na stronach z wieloma kolumnami, gdzie elastyczność szerokości ma duże znaczenie.

Pytanie 29

Fragment kodu w języku JavaScript realizujący dodawanie dwóch liczb ma poniższą postać. Aby dodawanie wykonane było po kliknięciu przycisku o nazwie "dodaj", należy w wykropkowane miejsce wstawić

Podaj pierwszą liczbę: <input type="text" name="liczba1" />
 Podaj drugą liczbę: <input type="text" name="liczba2" />
 ….
 <script type=text/javascript>
 function dodaj()
 {
     // ta funkcja realizuje dodawanie i podaje jego wynik
 }
 </script>

A. <button onselect="return dodaj()">oblicz</button>

B. <button onclick="return oblicz()">dodaj</button>

C. <button onclick="return dodaj()">dodaj</button>

D. <button onselect="return dodaj()">dodaj</button>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, wybrałeś poprawną odpowiedź. Przycisk w JavaScript jest aktywowany poprzez zdarzenie onclick, które jest wyzwalane po kliknięciu przycisku. Właściwość onclick jest jednym z wielu zdarzeń w JavaScript, które są używane do obsługi interakcji użytkownika. Kiedy użytkownik kliknie przycisk, zdarzenie onclick jest wywoływane i kod zawarty w tym zdarzeniu jest wykonany. W tym przypadku, kod to 'return dodaj()', co oznacza, że funkcja 'dodaj' jest wywoływana. Ta funkcja została zdefiniowana w skrypcie JavaScript i realizuje dodawanie dwóch liczb. Zdarzenie onclick jest często używane w praktycznych zastosowaniach, takich jak przyciski subskrybcji, przyciski do logowania czy przyciski do przesyłania formularzy. Zasada ta jest zgodna z dobrymi praktykami programowania, które zalecają utrzymanie interakcji użytkownika w kodzie JavaScript zamiast HTML.

Pytanie 30

Znaczniki HTML <strong> oraz <em>, które mają na celu podkreślenie istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. <u> oraz <sup>

B. <i> oraz <mark>

C. <b> oraz <u>

D. <b> oraz <i>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znaczniki HTML <strong> oraz <em> mają kluczowe znaczenie w kontekście semantyki i formatowania tekstu w dokumentach HTML. Znacznik <strong> wskazuje na tekst o zwiększonej ważności, co jest zgodne z jego domyślnym formatowaniem, które w większości przeglądarek wyświetla tekst pogrubiony. Z kolei znacznik <em> sugeruje tekst, który powinien być akcentowany w odpowiedni sposób, a jego domyślne formatowanie to kursywa. W związku z tym, ich odpowiednikami pod względem formatowania są znaczniki <b> oraz <i>. Znacznik <b> służy do pogrubienia tekstu, ale nie niesie ze sobą żadnej dodatkowej semantyki, natomiast <i> używany jest do kursywy bez wskazania na ważność. W praktyce, należy używać <strong> i <em> tam, gdzie semantyka jest kluczowa dla zrozumienia treści, a dodatkowe znaczenie przekłada się na lepsze pozycjonowanie w wyszukiwarkach oraz dostępność dla osób korzystających z technologii asystujących. Ważne jest, by przestrzegać dobrych praktyk webowych i stosować znaczniki semantyczne, co pozwoli na efektywne przekazywanie informacji zarówno użytkownikom, jak i robotom indeksującym.

Pytanie 31

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

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

A. Jelenia Góra

B. Nowakowska-Kowalska

C. Kowalski

D. Kasprowicza

Brak odpowiedzi na to pytanie.

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

Pytanie 32

Aby w języku HTML uzyskać formatowanie paragrafu przedstawione w ramce, należy zastosować kod

A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

B. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>

C. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>

D. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik <p> tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): <mark> do zaznaczenia fragmentu tekstu jak zakreślaczem oraz <em> do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 <mark> służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. <em> natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz <mark>, potem go zamykasz </mark>, dopiero później otwierasz <em> i zamykasz </em>. Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe (<mark>) i jednocześnie podkreślić termin ważny dla autora lub kontekstu (<em>). Moim zdaniem lepiej stosować <em> zamiast <i>, bo <em> niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.

Pytanie 33

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. nav

B. div

C. header

D. aside

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <nav> w HTML5 jest przeznaczony do definiowania sekcji nawigacyjnych na stronie internetowej, takich jak menu. Użycie semantycznego znacznika <nav> jest zgodne z dobrą praktyką projektowania stron, ponieważ pomaga przeglądarkom i technologiom wspomagającym, takim jak czytniki ekranowe, lepiej zrozumieć strukturę dokumentu. Dzięki zastosowaniu <nav>, silniki wyszukiwarek mogą również bardziej efektywnie indeksować zawartość strony. Przykład użycia <nav> w praktyce: html <nav> <ul> <li><a href='#'>Strona główna</a></li> <li><a href='#'>O nas</a></li> <li><a href='#'>Kontakt</a></li> </ul> </nav>. Ten znacznik powinien być używany wszędzie tam, gdzie mamy do czynienia z głównymi elementami nawigacyjnymi strony. Semantyczne tagi w HTML5, takie jak <nav>, ułatwiają utrzymanie i obsługę kodu oraz wspierają dostępność stron internetowych zgodnie ze standardami WCAG.

Pytanie 34

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #2551022

B. #FF1016

C. #251022

D. #FF0A16

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #FF0A16 jest poprawna, ponieważ kod RGB (255, 10, 22) jest konwertowany na format heksadecymalny, gdzie każdy z trzech kanałów (czerwony, zielony, niebieski) jest przedstawiany przez dwie cyfry szesnastkowe. W kodzie RGB wartość 255 dla kanału czerwonego odpowiada szesnastkowej wartości FF, wartość 10 dla kanału zielonego odpowiada wartości 0A, a wartość 22 dla kanału niebieskiego odpowiada wartości 16. Łącząc te wartości, otrzymujemy #FF0A16. Praktyczne zastosowania kodów kolorów w formacie heksadecymalnym są powszechne w projektowaniu stron internetowych oraz grafice komputerowej, gdzie umożliwiają precyzyjne definiowanie kolorów. Warto również pamiętać, że standard W3C zaleca używanie formatu heksadecymalnego w CSS, co czyni go bardziej efektywnym dla deweloperów. Ponadto, znajomość konwersji kolorów RGB na heksadecymalny jest kluczowa dla każdego, kto zajmuje się designem i programowaniem wizualnych interfejsów użytkownika.

Pytanie 35

W kodzie HTML 5, w celu walidacji wartości pola <input type="text"> za pomocą wyrażenia regularnego, należy użyć atrybutu

A. readonly

B. step

C. value

D. pattern

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to „pattern”, bo właśnie ten atrybut w HTML5 służy do walidacji zawartości pola tekstowego za pomocą wyrażeń regularnych po stronie przeglądarki. Atrybut pattern przyjmuje jako wartość wyrażenie regularne w składni zbliżonej do tej znanej z JavaScript (ECMAScript). Przeglądarka sprawdza, czy wpisany tekst pasuje do wzorca i jeśli nie, to nie pozwoli wysłać formularza, o ile pole ma ustawiony atrybut required lub użytkownik wywoła standardową walidację formularza. Przykład praktyczny: jeśli chcemy wymusić, żeby użytkownik wpisał dokładnie 3 cyfry, możemy napisać: <input type="text" name="kod" pattern="\d{3}" required> Wtedy poprawne będą wartości typu „123”, a „12a” czy „1234” zostaną odrzucone. Dla adresu e‑mail (prostej wersji) można użyć np.: <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"> W praktyce i tak często łączy się walidację HTML5 (pattern) z walidacją po stronie serwera, bo walidacja w przeglądarce jest tylko pierwszą linią obrony i użytkownik może ją wyłączyć. Z mojego doświadczenia warto pamiętać, że pattern działa tylko na tekst (input type="text", „search”, „tel”, „email”, „url” itd.) i jest walidowany dopiero w momencie wysyłki formularza lub wywołania metody checkValidity() w JavaScript. Dobrą praktyką jest też dodanie atrybutu title z opisem formatu danych, np. title="Wpisz 3 cyfry", żeby użytkownik zrozumiał, czemu formularz go nie przepuszcza. W projektach komercyjnych pattern bardzo pomaga szybko ogarnąć proste reguły, jak kody pocztowe, numery indeksów, proste loginy itp., bez konieczności pisania dodatkowego skryptu JS.

Pytanie 36

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

A. #pierwszy{float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {clear:both; width:70%; }#czwarty {float:left; width:100%; }

B. #pierwszy {float:left; width:30%; }#drugi {clear:both; width:70%; }#trzeci {float:left; width:70%; }#czwarty {clear:both; }

C. #pierwszy { width: 30%; }#drugi { width: 70%; }#trzeci { width: 70%; }#czwarty { width: 100%; }

D. #pierwszy {float:left; width:30%;}#drugi {float:left; width:70%;}#trzeci {float:left; width:70%;}#czwarty {clear:both; }

Brak odpowiedzi na to pytanie.

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

Pytanie 37

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

A. <i> oraz <mark>

B. <u> oraz <sup>

C. <b> oraz <i>

D. <b> oraz <u>

Brak odpowiedzi na to pytanie.

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

Pytanie 38

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <img src="/rysunek.png" style="width: 50px"> jest poprawna, ponieważ umożliwia wyświetlenie grafiki w formacie miniatury, zachowując proporcje oryginalnego obrazu. Przy zmniejszaniu rozmiaru obrazu, kluczowe jest ustawienie tylko jednego z wymiarów (szerokości lub wysokości), co pozwala na automatyczne dostosowanie drugiego wymiaru w taki sposób, aby nie zniekształcić proporcji. W tym przypadku, ustawienie szerokości na 50 px pozwala na proporcjonalne zmniejszenie wysokości do około 25 px, co jest zgodne z zasadą, że proporcje powinny pozostawać niezmienione. W praktyce, korzystanie z CSS do określenia rozmiarów obrazków poprawia responsywność strony oraz jej estetykę, co jest zgodne z dobrymi praktykami w web designie. Warto również pamiętać, że do poprawy ładowania stron i doświadczenia użytkownika, często zastosowanie rozmiarów odpowiednich do urządzeń mobilnych oraz desktopowych jest kluczowe.

Pytanie 39

Atrybut value w elemencie formularza XHTML

 <input type="text" name="name" value="value">

A. określa domyślną wartość

B. definiuje maksymalną długość pola

C. określa nazwę pola

D. ustawia pole jako tylko do odczytu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'value' w polu formularza XHTML ma kluczowe znaczenie, ponieważ określa wartość, która będzie domyślnie wyświetlana w polu tekstowym. Kiedy użytkownik otworzy formularz, będzie widział w polu tekstowym wpisaną wartość, co ułatwia interakcję, zwłaszcza w przypadkach, gdy potrzebne są przykłady lub domyślne odpowiedzi. Na przykład, w formularzu rejestracyjnym można ustawić atrybut 'value' na 'Jan Kowalski', co sugeruje użytkownikowi, jak powinien wypełnić swoje imię i nazwisko. Jest to zgodne z dobrymi praktykami projektowania formularzy, które dążą do poprawy użyteczności i zmniejszenia liczby błędów użytkowników. Warto również zauważyć, że w przypadku formularzy, jeśli użytkownik zdecyduje się nie zmieniać tej wartości, atrybut 'value' sprawia, że odpowiedź zostanie przesłana w formularzu po jego wysłaniu. To podkreśla znaczenie predefiniowania wartości w kontekście UX, ponieważ dobrze zaprojektowane formularze mogą znacznie poprawić doświadczenia użytkowników.

Pytanie 40

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

A. rgb(192, 255, 0)

B. rgb(64, 255, 0)

C. rgb(127, 255, 0)

D. rgb(128, 255, 0)

Brak odpowiedzi na to pytanie.

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

Rozpocznij nowy egzamin

Powrót do strony głównej