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 07:42
Data zakończenia: 17 kwietnia 2026 07:50

Egzamin niezdany

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

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

Arkusze stylów w formacie kaskadowym są tworzone w celu

A. blokowania wszelkich zmian w wartościach znaczników już przypisanych w pliku CSS

B. ułatwienia formatowania strony

C. nadpisywania wartości znaczników, które już zostały ustawione na stronie

D. połączenia struktury dokumentu strony z odpowiednią formą jej wizualizacji

Wybór błędnych odpowiedzi może wynikać z nieporozumienia dotyczącego funkcji kaskadowych arkuszy stylów i ich zastosowania w procesie tworzenia stron internetowych. Odpowiedzi sugerujące blokowanie jakichkolwiek zmian w wartościach znaczników w pliku CSS są mylące, ponieważ CSS zaprojektowane jest właśnie po to, aby umożliwiać modyfikacje stylów. Arkusze stylów nie blokują zmian, tylko lepiej organizują i strukturalizują kod, co sprzyja łatwiejszemu wprowadzaniu przyszłych poprawek. Z kolei połączenie struktury dokumentu strony z właściwą formą prezentacji jest bardziej związane z HTML, który odpowiada za strukturę treści strony. CSS natomiast odpowiada głównie za stylizację i nie ma na celu bezpośredniego łączenia tych aspektów, lecz oddzielenie ich. Warto również zauważyć, że nadpisywanie wartości znaczników na stronie to szczególna funkcjonalność CSS, ale nie jest to jej główny cel. Główna idea CSS polega na uproszczeniu procesu formatowania, co podkreśla znaczenie kaskadowości, gdzie reguły mogą być dziedziczone i nadpisywane w sposób przemyślany i kontrolowany. Typowymi błędami myślowymi w tym kontekście są zamiana celów CSS z HTML oraz brak zrozumienia mechanizmów kaskadowości, co prowadzi do nieprawidłowych wniosków na temat roli, jaką CSS odgrywa w projektowaniu stron internetowych.

Pytanie 2

W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?

A. XHTML1.0

B. HTML5

C. XHTML 2.0

D. HTML4

Tak, znaczników <footer>, <header> i <nav> zaczęto używać w HTML5, który zadebiutował w październiku 2014 roku. To jest ciekawe, bo HTML5 wprowadził sporo nowych semantycznych elementów, które pomagają w lepszej organizacji dokumentów HTML. Dzięki nim, przeglądarki i roboty wyszukiwarek mogą lepiej zrozumieć strukturę stron. Na przykład, <header> to nagłówek strony lub sekcji, <nav> tworzy menu nawigacyjne, a <footer> to stopka. Myślę, że to super sprawa, bo poprawia dostępność strony i jej SEO, bo tak naprawdę pomaga wyszukiwarkom w lepszym indeksowaniu treści, co może prowadzić do lepszych wyników w wyszukiwarkach. Dodatkowo, HTML5 ma też inne ciekawe nowinki, jak wsparcie dla multimediów, lokalne przechowywanie danych, a także lepszą kompatybilność z aplikacjami mobilnymi, więc zdecydowanie warto go wykorzystywać do budowy stron internetowych.

Pytanie 3

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

A. Ogg, AVI, MPEG

B. MP4, Ogg, WebM

C. MP4, AVI

D. Ogg, QuickTime

Wybór odpowiedzi MP4, AVI, Ogg czy Ogg, AVI, MPEG jest błędny z kilku powodów. Format AVI, mimo swojej popularności, nie jest obsługiwany w standardzie HTML5. AVI to stary format, który nie jest zoptymalizowany do użytku w sieci, co prowadzi do problemów z kompatybilnością i wydajnością. Z kolei QuickTime, chociaż używany w niektórych aplikacjach, nie jest standardowo wspierany przez HTML5, co ogranicza jego zastosowanie w nowoczesnych stronach internetowych. W przypadku formatu MPEG, choć jest on dość powszechnie stosowany, to nie jest preferowany w kontekście HTML5, a jego wsparcie jest ograniczone w porównaniu do MP4, Ogg i WebM. Warto zaznaczyć, że najnowsze przeglądarki internetowe szybko przechodzą na otwarte standardy, co sprawia, że formaty, które opierają się na patencie, stają się mniej popularne. W związku z tym, korzystanie z formatów takich jak MP4, Ogg czy WebM nie tylko zapewnia lepszą jakość i wydajność, ale również zwiększa dostępność treści w sieci. Wybór niewłaściwych formatów może prowadzić do problemów z odtwarzaniem na różnych platformach, co negatywnie wpływa na doświadczenia użytkowników oraz zasięg treści. W efekcie, aby zachować optymalne standardy w tworzeniu stron internetowych, kluczowe jest stosowanie formatów zgodnych ze specyfikacją HTML5.

Pytanie 4

Kolor wyrażony w modelu RGB(255, 0, 0) to

A. żółty.

B. niebieski.

C. czerwony.

D. zielony.

Barwa zapisana w modelu RGB(255, 0, 0) oznacza maksymalne natężenie kanału czerwonego, co wskazuje, że jest to czysta czerwień. Model RGB, czyli Red, Green, Blue, jest powszechnie stosowany w technologii cyfrowej, w tym w monitorach, telewizorach i urządzeniach mobilnych. W praktyce, wartości w zakresie od 0 do 255 określają intensywność poszczególnych kolorów, gdzie 0 oznacza brak koloru, a 255 jego maksymalną intensywność. Wartości dla zielonego i niebieskiego są zerowe, co oznacza, że nie wpływają na ostateczny kolor. Czerwień (RGB(255, 0, 0)) jest często wykorzystywana w projektowaniu graficznym, na przykład w tworzeniu logo, gdzie symbolizuje energię i pasję. W standardzie sRGB, który jest najczęściej stosowanym profilem kolorów w Internecie, barwy są definiowane w ten sposób, co gwarantuje ich spójność na różnych urządzeniach. Zrozumienie tego modelu kolorów jest kluczowe dla każdej osoby pracującej w dziedzinie grafiki komputerowej, projektowania UI/UX czy programowania webowego.

Pytanie 5

Które z poniższego oprogramowania nie jest zaliczane do systemów zarządzania treścią (CMS)?

A. WordPress

B. Joomla

C. Mambo

D. Apache

Apache to popularny serwer HTTP, który jest odpowiedzialny za zarządzanie i dostarczanie stron internetowych do przeglądarek użytkowników. Choć Apache może być używany w połączeniu z systemami zarządzania treścią (CMS) takimi jak WordPress, Joomla czy Mambo, sam w sobie nie jest systemem CMS. Systemy zarządzania treścią, takie jak Joomla, WordPress i Mambo, są platformami, które umożliwiają użytkownikom łatwe tworzenie, edytowanie i zarządzanie treściami na stronach internetowych bez potrzeby posiadania zaawansowanej wiedzy programistycznej. Apache działa na poziomie serwera, obsługując żądania HTTP i wysyłając odpowiednie pliki, podczas gdy CMS zajmuje się strukturą treści, interfejsem użytkownika oraz zarządzaniem bazą danych. Ponadto, Apache zapewnia wsparcie dla różnych języków programowania oraz technologii webowych, ale nie oferuje funkcji zarządzania treścią, które są kluczowe dla systemów CMS. Dlatego odpowiedź na pytanie jest jednoznaczna – Apache nie jest systemem zarządzania treścią, lecz serwerem, który wspiera ich działanie.

Pytanie 6

Aby utworzyć styl strony responsywnej dla ekranów o szerokości od 600 px do 800 px należy zastosować regułę CSS

A. @media (min-width: 800px){/*style css*/}

B. @media (max-width: 800px) (min-width: 600px){/*style css*/}

C. @media screen and (max-width: 800px) and (min-width: 600px){/*style css*/}

D. @media screen (min-width: 800px) and (max-width: 600px){/*style css*/}

W tym zadaniu cała trudność kręci się wokół poprawnego zapisania media queries i zrozumienia, jak działają warunki min-width oraz max-width. Wiele osób intuicyjnie czuje, o co chodzi z responsywnością, ale potyka się na szczegółach składni, a przeglądarka niestety jest bardzo „zero-jedynkowa” i najmniejszy błąd powoduje, że reguła po prostu nie zadziała. Jedno z podejść polega na użyciu tylko min-width, np. @media (min-width: 800px){...}. Taki zapis oznacza jednak: stosuj te style dla szerokości 800 px i większych, czyli w górę, bez żadnej górnej granicy. To jest typowy breakpoint dla większych ekranów, np. laptopów, a nie dla przedziału 600–800 px. To nie jest logicznie to, o co chodziło w pytaniu, bo nie ma tu żadnego ograniczenia od góry. Inny typ błędu to próba połączenia max-width i min-width bez słowa and, jak w @media (max-width: 800px) (min-width: 600px){...}. Taka składnia jest po prostu niepoprawna z punktu widzenia specyfikacji CSS – między warunkami musi wystąpić operator logiczny and, not lub only. Bez tego parser traktuje zapis jako błąd, więc reguła zostanie zignorowana. Kolejna pułapka to pomieszanie kolejności i logiki warunków, np. @media screen (min-width: 800px) and (max-width: 600px){...}. Tutaj po pierwsze brakuje and po słowie screen, więc typ medium nie jest poprawnie połączony z warunkami, a po drugie zakres jest nielogiczny: min-width: 800px i max-width: 600px tworzą zestaw warunków, którego żaden ekran nie spełni, bo nie może mieć jednocześnie szerokości co najmniej 800 px i maksymalnie 600 px. W praktyce oznacza to media query, które nigdy się nie aktywuje. To zresztą typowy błąd: ktoś zna pojęcia min i max, ale nie zastanawia się nad realnym przedziałem wartości. Dobra praktyka w responsywnym projektowaniu to zawsze sprawdzić: czy zakres ma sens matematyczny, czy składnia zawiera wszystkie konieczne słowa kluczowe (screen, and), oraz czy zapis jest spójny z resztą kodu. Wtedy media queries stają się przewidywalne i łatwiejsze do debugowania w narzędziach deweloperskich przeglądarki.

Pytanie 7

Co można powiedzieć o przedstawionym zapisie języka HTML5?

<title>Strona o psach</title>

A. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.

B. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.

C. Pojawi się na karcie dokumentu w przeglądarce.

D. Zostanie wyświetlony w treści strony, na samej górze.

Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.

Pytanie 8

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. czcionki nagłówka drugiego poziomu

B. tła całej witryny

C. tła tekstu nagłówka drugiego poziomu

D. czcionki wszystkich nagłówków na stronie

Zapis CSS h2 { background-color: green; } oznacza, że każdemu elementowi nagłówka drugiego stopnia przypisany zostanie zielony kolor tła. W CSS selektor h2 odnosi się bezpośrednio do wszystkich elementów HTML o tagu <h2>. Właściwość background-color służy do definiowania koloru tła elementu, nie wpływając na kolor czcionki samego nagłówka. W praktyce takie podejście pozwala na wyraźne wyróżnienie nagłówków na tle innych elementów strony, co może być kluczowe dla poprawy czytelności. Przyjęte w kodzie standardy zapewniają zgodność z najnowszymi wytycznymi W3C, pozwalając na efektywne zarządzanie stylami w projekcie. Wiedza o tym jak stylizować nagłówki za pomocą background-color jest fundamentalna dla każdego web developera, umożliwiając tworzenie atrakcyjnych i czytelnych interfejsów użytkownika w sposób zgodny z zasadami responsywnego projektowania. Ponadto, stosowanie takich stylizacji wspiera semantyczne podejście do strukturyzacji treści, co jest ważne dla optymalizacji SEO.

Pytanie 9

W języku CSS, sformatowanie dowolnego elementu języka HTML w ten sposób, że po najechaniu na niego kursorem zmienia on kolor czcionki, wymaga zastosowania pseudoklasy

A. :coursor

B. :active

C. :hover

D. :visited

Poprawna odpowiedź to pseudoklasa :hover. W CSS służy ona dokładnie do tego, o co chodzi w pytaniu: do zmiany wyglądu elementu w momencie, gdy użytkownik najedzie na niego kursorem myszy (albo innym wskaźnikiem). Mechanizm jest prosty: przeglądarka śledzi pozycję kursora i kiedy znajduje się on nad danym elementem, do selektora z :hover zostają zastosowane zdefiniowane tam style. Przykładowo, żeby po najechaniu zmienić kolor tekstu linku, wystarczy napisać: a:hover { color: red; } Można tak samo stylować dowolny element HTML, nie tylko <a>: button:hover { color: white; background-color: #007bff; cursor: pointer; } W nowoczesnych interfejsach :hover jest podstawą efektów „podświetlenia” przycisków, kart, menu rozwijanych itp. Z mojego doświadczenia warto pamiętać o kolejności pseudoklas dla linków: a:link, a:visited, a:hover, a:active – to jest klasyczna dobra praktyka (czasem zapisywana jako LVHA), żeby style się nie nadpisywały w dziwny sposób. Trzeba też mieć w głowie, że na urządzeniach mobilnych :hover działa inaczej lub wcale, bo tam nie ma typowego kursora. Dlatego sensowne jest, żeby najważniejsze informacje nie były dostępne tylko po najechaniu, a :hover traktować bardziej jako poprawę wygody i estetyki, a nie jedyne źródło funkcjonalności. Mimo to w klasycznym desktopowym webie :hover jest absolutnym standardem do reakcji na najechanie kursorem.

Pytanie 10

W notacji szesnastkowej kolor zielony reprezentowany jest jako #008000. Jaką wartość przyjmuje on w notacji RGB?

A. rgb(0, 100, 0)

B. rgb(0, 160, 0)

C. rgb(0, 128, 0)

D. rgb(0, 80, 0)

Wartość koloru zielonego w notacji szesnastkowej #008000 odpowiada w notacji RGB wartości rgb(0, 128, 0). W tym systemie kolorów każda składowa koloru (czerwony, zielony, niebieski) jest reprezentowana jako liczba całkowita w przedziale od 0 do 255, co odpowiada 8-bitowym wartościom. W przypadku koloru zielonego, składowa czerwonego ma wartość 0, składowa zielonego 128, a składowa niebieskiego także 0. W praktyce, RGB jest powszechnie stosowane w projektowaniu graficznym, programowaniu oraz w tworzeniu stron internetowych, gdzie kolory są definiowane w taki sposób, aby zapewnić szeroką gamę odcieni. Wartości RGB mogą być wykorzystywane w CSS do stylizacji elementów, co pozwala na precyzyjne odwzorowanie zamierzonych kolorów oraz estetyki. Stosując standardy webowe, umiejętność konwersji między różnymi formatami kolorów jest niezbędna, zwłaszcza w kontekście zapewnienia spójności wizualnej na różnych urządzeniach i platformach.

Pytanie 11

Aby uczynić stronę internetową bardziej dostępną dla osób niewidomych, należy przypisać obrazom wyświetlanym za pomocą znacznika img odpowiedni atrybut

A. alt

B. src

C. style

D. text

Atrybut alt (alternatywny) jest niezbędnym elementem w kontekście dostępności stron internetowych. Jego podstawową funkcją jest dostarczenie opisu graficznego treści zawartych w obrazach dla użytkowników korzystających z czytników ekranu. Dzięki temu niewidomi lub słabo widzący użytkownicy mogą zrozumieć, co przedstawia dany obraz. Przykładowo, jeśli na stronie znajduje się zdjęcie przedstawiające psa bawiącego się w parku, atrybut alt mógłby mieć wartość "Pies bawiący się w parku na zielonej trawie". To pozwala użytkownikowi na mentalne odtworzenie obrazu i kontekstu. W praktyce, zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), każdy obraz użyty na stronie internetowej powinien mieć przypisany opis w atrybucie alt, co zwiększa dostępność i użyteczność treści. Warto również pamiętać, że atrybut alt powinien być używany tylko w sytuacjach, gdy obraz ma znaczenie dla treści; obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""). Dobre praktyki w zakresie dostępności podkreślają, że właściwe stosowanie atrybutów alt nie tylko wspiera użytkowników z niepełnosprawnościami, ale także poprawia SEO, gdyż wyszukiwarki lepiej rozumieją treści obrazów.

Pytanie 12

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

A. rgb(128, 255, 0)

B. rgb(64, 255, 0)

C. rgb(192, 255, 0)

D. rgb(127, 255, 0)

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

Pytanie 13

W wyniku walidacji strony został wygenerowany błąd. Oznacza on, że

A. oznaczenie ISO-8859-2 nie istnieje.

B. w atrybucie charset jest dozwolona wyłącznie wartość "utf-8".

C. oznaczenie kodowania znaków powinno być zapisane bez myślników.

D. w znaczniku meta nie występuje atrybut charset.

Dobra robota! Twoja odpowiedź jest na miejscu. To, co się stało z błędem walidacji, to fakt, że przy atrybucie charset w znaczniku meta musisz zawsze podać 'utf-8'. To standard kodowania Unicode, który w sieci jest bardzo popularny. Kodowanie UTF-8 ma to do siebie, że obsługuje mnóstwo znaków, co sprawia, że nadaje się do prawie wszystkich języków na świecie. Dlatego warto to stosować przy tworzeniu nowoczesnych stron. HTML5 jasno mówi, że każdy dokument powinien mieć ten znacznik w sekcji head, czyli na przykład: <meta charset='utf-8'>.

Pytanie 14

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

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

B. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

C. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny

D. skorzystanie z narzędzia do walidacji kodu HTML

Wykorzystywanie walidatora języka HTML do testowania witryny w różnych przeglądarkach nie jest wystarczającą metodą. Walidatory są narzędziami, które sprawdzają poprawność kodu HTML pod kątem zgodności ze standardami W3C, ale nie oceniają, jak rzeczywiście strona będzie działać w różnych przeglądarkach. Możliwe jest, że strona przejdzie test walidacji, ale w rzeczywistości może wyświetlać się inaczej w różnych przeglądarkach z powodu różnych silników renderujących. Instalowanie różnych przeglądarek na wielu komputerach również nie jest efektywnym rozwiązaniem, gdyż wymaga znacznych nakładów czasu i zasobów, a także trudności w utrzymaniu aktualizacji i wersji. Testowanie jedynie w programie Internet Explorer, zakładając, że inne przeglądarki będą działać podobnie, jest mylne, gdyż różnice w implementacji standardów HTML, CSS i JavaScript w różnych przeglądarkach mogą prowadzić do nieoczekiwanych błędów. Takie podejście może skutkować poważnymi problemami z użytecznością, a także obniżyć jakość doświadczenia użytkownika. Istnieje zatem ryzyko, że aplikacja webowa nie będzie działać prawidłowo na kluczowych platformach, co w dzisiejszym zróżnicowanym środowisku przeglądarek stanowi istotne zagrożenie dla reputacji i funkcjonalności witryny.

Pytanie 15

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. tło będzie szare

C. kolor tekstu będzie pomarańczowy

D. kolor tekstu będzie szary

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 16

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 keywords="psy, koty, gryzonie">

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

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

Pierwsza z niepoprawnych odpowiedzi, <meta keywords="psy, koty, gryzonie">, jest błędna z powodu braku atrybutu 'name'. W standardzie HTML każdy element <meta> powinien zawierać atrybut 'name' lub 'property', który określa, jakiego rodzaju metadane są dostarczane. Pominięcie tego atrybutu sprawia, że przeglądarki mogą nieprawidłowo interpretować ten element, co negatywnie wpływa na SEO strony. Druga odpowiedź, <meta name="keywords" = "psy, koty, gryzonie">, zawiera błędną składnię. Równanie atrybutu w HTML powinno być zapisane z wykorzystaniem znaku ' ', a nie '='. Poprawny zapis powinien wyglądać: <meta name="keywords" content="psy, koty, gryzonie">. Błąd ten jest częstym źródłem problemów w kodzie HTML, prowadzącym do niezrozumienia przez przeglądarki, co może skutkować ignorowaniem tego elementu przez algorytmy wyszukiwarek. Ostatnia odpowiedź, <meta name="description" content="psy, koty, gryzonie">, jest niepoprawna, ponieważ nie dotyczy słów kluczowych, lecz opisu strony. Chociaż atrybut 'description' również jest istotny i wpływa na SEO, to jego zastosowanie w tym kontekście nie odpowiada na pytanie o definicję słów kluczowych. Poprawne użycie metadanych polega na precyzyjnym dobraniu atrybutów do ich funkcji, co jest kluczowe dla efektywnej optymalizacji strony.

Pytanie 17

W języku HTML zdefiniowano znacznik ```link``` Wartość nofollow atrybutu rel

A. jest informacją dla przeglądarki internetowej, aby nie formatowała słowa "link" jako odnośnika.

B. jest informacją dla robota wyszukiwarki Google, aby nie podążał za tym linkiem.

C. oznacza, że kliknięcie na link otworzy go w osobnej karcie przeglądarki.

D. oznacza, że kliknięcie na link nie przeniesie do strony website.com.

Dobrze, że to wybrałeś! Atrybut rel='nofollow' w tagu <a> w HTML mówi robotom wyszukiwarek, jak Google, żeby nie śledziły tego linku. Często używa się go w SEO, czyli w optymalizacji stron. Dzięki temu możemy zdecydować, które linki na naszej stronie są ważne, a które nie. Jeśli mamy na myśli, żeby dana strona była mniej widoczna w wyszukiwarkach, to ten atrybut się przyda. Tylko musisz pamiętać, że zbyt wiele linków z 'nofollow' może sprawić, że wyszukiwarki nie będą patrzyły na naszą stronę za dobrze. Moim zdaniem, warto to dobrze przemyśleć!

Pytanie 18

Jakie polecenie HTML poprawnie odwzorowuje przedstawioną hierarchiczną strukturę tekstu, która została wyświetlona przez przeglądarkę w następujący sposób: Rozdział 1 tekst Podrozdział 1.1 tekst Podrozdział 1.2?

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

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

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

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

Poprawny kod HTML do definiowania hierarchicznej struktury tekstu oparty jest na semantycznym znaczeniu tagów. W tym przypadku, użycie <h1> dla 'Rozdział 1' jako głównego nagłówka jest zgodne z zasadami projektowania stron internetowych, gdyż <h1> powinien być używany dla najważniejszego nagłówka na stronie. Następnie zastosowanie <h2> dla 'Podrozdział 1.1' i 'Podrozdział 1.2' wskazuje na hierarchię, gdzie te podrozdziały są podkategoriami głównego rozdziału. Tag <p> jest użyty do definiowania paragrafów tekstowych, co zapewnia odpowiednie formatowanie i czytelność. Taki układ jest zgodny z wytycznymi W3C, które rekomendują używanie nagłówków w strukturze dokumentu HTML, co ułatwia zarówno przeglądarkom, jak i użytkownikom zrozumienie hierarchii treści. Przykładowo, strona internetowa z taką strukturą będzie lepiej indeksowana przez wyszukiwarki, co przyczyni się do poprawy SEO.

Pytanie 19

Który z poniższych fragmentów kodu HTML sformatuje tekst zgodnie z wymaganiami? (zauważ, że słowo "stacji" jest wyświetlane w większej czcionce niż pozostałe słowa w tej linii)

A. Odpowiedź 1: A

B. Odpowiedź 2: B

C. Odpowiedź 4: D

D. Odpowiedź 3: C

Odpowiedź B jest prawidłowa ponieważ używa znacznika big do zwiększenia rozmiaru czcionki dla słowa stacji wewnątrz paragrafu. Znacznik big jest standardowym sposobem na zwiększenie tekstu w HTML chociaż obecnie rekomendowane jest stosowanie CSS do takich stylizacji co pozwala na oddzielenie treści od prezentacji. Przykładowo można użyć CSS w stylu inline lub w oddzielnym arkuszu stylów aby uzyskać ten sam efekt co zwiększa elastyczność i spójność projektu. Warto pamiętać że HTML5 wprowadza pewne zmiany i deprecjonuje niektóre znaczniki co wymaga ciągłego aktualizowania wiedzy dewelopera. Znacznik big mimo że działa w większości przeglądarek może być mniej przewidywalny w przyszłości w porównaniu z CSS. Rozdzielenie stylów od struktury dokumentu jest dobrą praktyką programistyczną co ułatwia zarządzanie kodem oraz poprawia dostępność stron internetowych. Pamiętaj by regularnie analizować i aktualizować swoje projekty zgodnie z najnowszymi standardami HTML i CSS.

Pytanie 20

Metainformacja “Description" zawarta w pliku źródłowym HTML powinna zawierać

<head>
     <meta name="Description" content="..." >
 </head>

A. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

B. informację, kto jest autorem strony.

C. nazwę programu, przy użyciu którego została stworzona strona.

D. opis, co znajduje się na stronie.

Poprawna odpowiedź to 'opis, co znajduje się na stronie'. Metainformacja 'Description' w pliku źródłowym HTML jest wykorzystywana przez wyszukiwarki internetowe do wyświetlania opisu strony w wynikach wyszukiwania. Dzięki temu użytkownik może zobaczyć na pierwszy rzut oka, czy strona jest związana z jego zapytaniem, czy też nie. Jest to jedno z kluczowych narzędzi w SEO (Search Engine Optimization), które ma na celu zwiększenie widoczności strony w wynikach wyszukiwania. W praktyce, opis powinien być krótki, zwięzły i zawierać ważne informacje o treści strony. Dobrą praktyką jest również uwzględnienie kluczowych słów, na które użytkownicy mogą szukać. Opis ten powinien być zrozumiały dla użytkowników, a także jest to miejsce, gdzie można wykorzystać strategie marketingowe, aby zachęcić do odwiedzenia strony.

Pytanie 21

Semantyczny znacznik sekcji języka HTML 5 przeznaczony do umieszczenia stopki strony WWW to

A. <header>

B. <footer>

C. <figcaption>

D. <aside>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <footer>, bo właśnie ten znacznik w HTML5 jest semantycznie przeznaczony na stopkę strony lub stopkę sekcji. W specyfikacji HTML5 wyraźnie podkreślono, że <footer> służy do umieszczania informacji końcowych: praw autorskich (copyright), linków do polityki prywatności, kontaktu, autorów, krótkich podsumowań czy nawigacji pomocniczej. Moim zdaniem warto traktować <footer> jak miejsce na „meta‑informacje” o stronie albo o danej części dokumentu. Co ważne, <footer> nie musi występować tylko raz – możesz mieć stopkę całej strony w obrębie <body>, ale też osobne stopki np. dla artykułu (<article>) czy sekcji (<section>). To jest dobra praktyka, bo poprawia strukturę dokumentu i czytelność kodu. W praktyce wygląda to np. tak: <footer><p>© 2026 Firma XYZ</p><nav><a href="/regulamin">Regulamin</a> | <a href="/kontakt">Kontakt</a></nav></footer>. Czytniki ekranowe i roboty wyszukiwarek lepiej rozumieją wtedy, że ta część strony to zakończenie i informacje dodatkowe. To się przekłada na lepszą dostępność (WCAG) i trochę sensowniejsze SEO. Z mojego doświadczenia warto pilnować, żeby nie wrzucać do <footer> całej reszty layoutu, tylko właśnie elementy typowo „stopkowe”. Dobrą praktyką jest też trzymanie się spójnej struktury na wszystkich podstronach, żeby użytkownik intuicyjnie wiedział, że w stopce znajdzie np. link do pliku RODO albo dane firmy. HTML5 mocno stawia na semantykę, więc używanie <footer> zamiast jakiegoś bezsensownego <div id="stopka"> to po prostu nowocześniejsze i zgodne ze standardami podejście.

Pytanie 22

Który z podanych znaczników HTML nie jest używany do formatowania tekstu?

A. <em>

B. <div>

C. <sub>

D. <strong>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
<div> jest znacznikiem HTML, który służy do grupowania elementów na stronie, co ułatwia ich stylizację i manipulację w CSS oraz JavaScript. W przeciwieństwie do znaczników takich jak <em>, <sub> i <strong>, które mają konkretne zastosowania związane z formatowaniem tekstu, <div> pełni rolę kontenera, co czyni go bardziej uniwersalnym narzędziem do strukturyzacji treści. Przykładowo, można użyć <div> do utworzenia sekcji nagłówka, stopki lub bocznego panelu na stronie. Zgodnie z standardami W3C, <div> jest elementem blokowym, co oznacza, że zajmuje całą szerokość dostępną w swoim rodzicu. W praktyce, <div> pozwala na efektywne zarządzanie układem strony i jest często stosowany w połączeniu z CSS w celu uzyskania pożądanej prezentacji wizualnej. Przykład zastosowania: <div class='container'>...</div> może być użyty do zawarcia innych elementów jak <h1>, <p> czy <img>. Dzięki temu można łatwo manipulować stylem i zachowaniem tych elementów, co czyni <div> kluczowym narzędziem w nowoczesnym web designie.

Pytanie 23

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. Rys. D

B. Rys. B

C. Rys. C

D. Rys. A

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź, Rys. C, przedstawia styl CSS, który prawidłowo definiuje marginesy i marginesy wewnętrzne obrazu. W tym przypadku margines wewnętrzny wynosi 50px, a zewnętrzny 20px, co jest zgodne z wymaganiami zawartymi w pytaniu. Kod CSS zawiera solidną linię graniczną o wartości 4px w kolorze czarnym, co jest dobrze praktykowane w projektowaniu stron internetowych, ponieważ solidna linia jest bardziej widoczna i profesjonalna niż linia przerywana. Kolor tła teal zapewnia atrakcyjny kontrast. Zastosowanie właściwego marginesu i marginesu wewnętrznego jest kluczowe w tworzeniu responsywnych układów, które są teraz standardem w branży. Poprawne ustawienie tych parametrów zapewnia estetyczny wygląd oraz prawidłowe rozmieszczenie elementów na stronie. Praktyczne zastosowanie tej wiedzy obejmuje projektowanie layoutów w CSS Grid czy Flexbox, gdzie marginesy i marginesy wewnętrzne pełnią kluczową rolę w zarządzaniu przestrzenią elementów. Właściwe wykorzystanie tych stylów wspiera tworzenie stron zgodnych ze standardami W3C, co jest fundamentem profesjonalnego web developmentu.

Pytanie 24

Która z czynności nie wpłynie na objętość zajmowanej pamięci pliku graficznego?

A. Modyfikacja rozdzielczości obrazu

B. Kompresja

C. Zmiana rozmiaru obrazu przy użyciu atrybutów HTML

D. Interpolacja

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Skalowanie obrazu za pomocą atrybutów HTML to technika, która pozwala na dostosowanie rozmiaru wyświetlanego obrazu w przeglądarce internetowej bez zmiany jego rzeczywistego rozmiaru pliku. Atrybuty takie jak 'width' i 'height' w tagach <img> wpływają jedynie na to, jak obraz jest prezentowany na stronie, a nie na jego fizyczne właściwości. Przykładem może być użycie <img src='obraz.jpg' width='300' height='200'>, co sprawia, że obraz wyświetla się w określonych wymiarach, ale plik graficzny pozostaje niezmieniony. Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, ponieważ pozwala na utrzymanie jakości obrazu bez dodatkowego obciążania serwera. W sytuacjach, gdy szybkość ładowania strony jest kluczowa, użycie odpowiednich atrybutów HTML może przyczynić się do lepszego doświadczenia użytkownika bez potrzeby modyfikacji oryginalnych plików graficznych. Warto również zaznaczyć, że w przypadku responsywnych stron internetowych stosuje się techniki CSS, które umożliwiają dalsze dostosowanie wielkości obrazów, ale także nie wpływają na ich wagę w pamięci.

Pytanie 25

W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu

A. colspan

B. cellspacing

C. rowspan

D. cellpadding

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut rowspan w języku HTML jest kluczowy do scalania komórek tabeli w pionie, co oznacza, że pozwala na połączenie dwóch lub więcej komórek w jednej kolumnie w jedną, większą komórkę. Dzięki temu, można uzyskać bardziej przejrzysty i zorganizowany układ informacji w tabelach, zwłaszcza w przypadku danych, które są ze sobą powiązane. Na przykład, jeśli mamy tabelę, w której jeden z wierszy odnosi się do tytułu kategorii, a poniżej znajdują się różne elementy tej kategorii, użycie atrybutu rowspan w pierwszej komórce umożliwi jej rozszerzenie na kilka wierszy, co wizualnie połączy te dane. Standard HTML5 definiuje atrybut rowspan jako atrybut, który przyjmuje wartość liczbową, określającą liczbę wierszy, które mają zostać scalone. Przykładowy kod HTML mógłby wyglądać następująco: <table><tr><td rowspan='3'>Kategoria</td><td>Element 1</td></tr><tr><td>Element 2</td></tr><tr><td>Element 3</td></tr></table>, co w efekcie tworzy jedną komórkę o wysokości trzech wierszy oraz trzy osobne komórki w drugiej kolumnie. Użycie rowspan w praktyce jest nie tylko estetyczne, ale również poprawia czytelność danych, co jest niezmiernie ważne w interfejsach użytkownika.

Pytanie 26

Plik graficzny powinien być zapisany w formacie GIF, gdy

A. jest konieczność zapisu obrazu bez kompresji

B. jest to grafika wektorowa

C. jest potrzeba zapisu obrazu lub animacji

D. jest to obraz stereoskopowy

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format GIF (Graphics Interchange Format) jest szeroko stosowany do zapisu obrazów oraz animacji. GIF obsługuje do 256 kolorów w palecie, co czyni go idealnym do grafiki komputerowej o prostych kolorach, takich jak ikony czy grafiki internetowe. Kluczową cechą GIF-a jest możliwość kompresji bezstratnej, co pozwala na zachowanie jakości obrazu przy stosunkowo niskiej wadze pliku. Jest to szczególnie istotne w przypadku animacji, gdzie różne klatki mogą być przechowywane w jednym pliku, umożliwiając płynne przejścia. GIF jest również kompatybilny z większością przeglądarek internetowych, co czyni go doskonałym wyborem do zastosowań internetowych. Przykładowo, animowane GIF-y są często wykorzystywane w mediach społecznościowych i na stronach internetowych do przyciągania uwagi, a ich prosta struktura sprawia, że są łatwe w implementacji i odtwarzaniu. Dodatkowo, standard GIF został ustalony przez Compuserve w 1987 roku i od tego czasu stał się jednym z najpopularniejszych formatów graficznych w sieci.

Pytanie 27

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

A. font-weight

B. text-style

C. font-style

D. text-decoration

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'text-decoration' jest poprawna, ponieważ właściwość ta jest używana w CSS do stylizacji tekstu, a jej wartości mogą obejmować 'underline', 'overline' i 'line-through'. Właściwość 'text-decoration' umożliwia dodawanie dekoracji do tekstu, co jest szczególnie przydatne w przypadku podkreślania, przekreślania tekstu czy dodawania linii nad tekstem. Przykład zastosowania: aby podkreślić tekst, można użyć reguły CSS: `p { text-decoration: underline; }`. Dzięki temu wszystkie akapity na stronie będą miały podkreślony tekst. Warto również zauważyć, że w ramach standardów CSS3, właściwość ta zyskała dodatkowe wartości, takie jak 'none' czy 'blink', co jeszcze bardziej rozszerza jej funkcjonalność. W praktyce, 'text-decoration' jest często stosowane w projektach webowych, aby poprawić czytelność i estetykę treści. Dobrą praktyką jest jednak używanie tej właściwości w umiarkowany sposób, aby nie przytłoczyć użytkownika zbyt wieloma dekoracjami, co mogłoby wpłynąć na ogólną użyteczność strony.

Pytanie 28

Kolorem, który ma odcień niebieski, jest kolor

A. #0000EE

B. #EE0000

C. #00EE00

D. #EE00EE

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to kolor #0000EE, który reprezentuje odcień niebieskiego w systemie RGB. Kolory w tym systemie definiowane są poprzez trzy składowe: czerwoną, zieloną i niebieską (RGB), gdzie wartości są podawane w formacie szesnastkowym. W przypadku #0000EE, pierwsze dwie pary zer oznaczają brak składowych czerwonej i zielonej, natomiast ostatnia para 'EE' wskazuje na wysoką intensywność składowej niebieskiej. Takie podejście jest powszechnie stosowane w programowaniu i projektowaniu stron internetowych, gdzie precyzyjnie określone kolory mają kluczowe znaczenie dla estetyki i użyteczności interfejsu. Przykładem zastosowania koloru niebieskiego może być jego użycie w projektach związanych z tematyką technologiczną lub finansową, gdzie niebieski symbolizuje zaufanie i profesjonalizm. Warto również zwrócić uwagę, że w kontekście dostępności barw, stosowanie odpowiednich kontrastów z tłem jest niezbędne, aby zapewnić czytelność tekstu i elementów graficznych. Odpowiednie wykorzystanie kodów koloru może znacząco wpłynąć na postrzeganie marki oraz interakcję użytkowników z treściami wizualnymi na stronach internetowych.

Pytanie 29

W semantycznym HTML odpowiednikiem elementu <b>, który nie tylko pogrubia tekst, ale także wskazuje na jego większe znaczenie, jest

A. <ins>

B. <em>

C. <mark>

D. <strong>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <strong> w HTML semantycznym służy nie tylko do pogrubienia tekstu, ale także do wskazania, że dany fragment ma większe znaczenie w kontekście semantycznym. Zgodnie z zaleceniami W3C, użycie tego znacznika poprawia dostępność treści, ponieważ technologie wspomagające, takie jak czytniki ekranu, interpretują <strong> jako tekst o podwyższonej wadze, co może pomóc w lepszym zrozumieniu struktury dokumentu przez osoby z niepełnosprawnościami. Przykładem zastosowania może być podkreślenie ważnych informacji na stronie, takich jak zasady, ostrzeżenia czy kluczowe dane, które użytkownicy powinni zauważyć. W praktyce, stosowanie elementów semantycznych, takich jak <strong>, zamiast czysto stylistycznych, jest zgodne z zasadami budowania stron przyjaznych dla użytkowników i poprawia SEO, ponieważ wyszukiwarki mogą lepiej analizować kontekst treści. Warto pamiętać, że w przypadku użycia <strong>, nie zmienia to tylko sposobu wyświetlania, ale także wzbogaca znaczenie tekstu w kontekście całej strony.

Pytanie 30

W języku CSS, aby ustalić wewnętrzny górny margines, czyli przestrzeń pomiędzy elementem a jego otaczającym obramowaniem, należy zastosować komendę

A. padding-top

B. local-top

C. border-top

D. outline-top

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W języku CSS, aby zdefiniować wewnętrzny górny margines elementu, należy użyć właściwości padding-top. Marginesy wewnętrzne (padding) to przestrzeń, która znajduje się pomiędzy zawartością elementu a jego obramowaniem, co pozwala na stworzenie efektu oddzielenia treści od krawędzi. Wartości padding-top można ustalać w jednostkach takich jak px, em, rem czy %. Na przykład, kod CSS 'padding-top: 20px;' doda 20 pikseli odstępu od górnej krawędzi obramowania do zawartości elementu. Właściwość ta jest standardowo wspierana we wszystkich nowoczesnych przeglądarkach i jest częścią specyfikacji CSS Box Model, która określa, jak przestrzeń jest zorganizowana w obrębie elementów HTML. Użycie padding-top jest kluczowe, gdy chcemy, aby nasza strona była estetyczna i czytelna, co ma istotne znaczenie w projektowaniu responsywnym, gdzie różne urządzenia mogą wymagać różnych wartości paddingu, aby utrzymać spójność wizualną. Poprawne stosowanie padding-top przyczynia się również do lepszej dostępności strony, co jest istotnym aspektem w nowoczesnym web designie.

Pytanie 31

Fragmenty kodu JavaScript w dokumencie HTML mogą być umieszczone

A. wyłącznie w sekcji <head>, w znaczniku <script>

B. wyłącznie w sekcji <body>, w znaczniku <java>

C. zarówno w sekcji <head>, jak i <body>, w znaczniku <java>

D. zarówno w sekcji <head>, jak i <body>, w znaczniku <script>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wstawianie kodu JavaScript w dokumenty HTML to naprawdę istotna sprawa. Dzięki temu możemy dodawać różne interaktywne funkcje do naszych stron. Warto wiedzieć, że umiejscowienie tego kodu ma ogromne znaczenie dla tego, jak szybko strona się ładowała. Możemy wstawić skrypty w sekcji <head> albo w <body>, ale zawsze muszą być w znaczniku <script>. Kiedy wrzucamy kod do <head>, skrypty ładują się przed resztą zawartości, co może trochę spowolnić ładowanie strony, bo przeglądarka musi najpierw załadować skrypty. Z drugiej strony, jeśli wstawimy je na dole w <body>, strona ładowana jest szybciej, bo najpierw widzimy zawartość, co jest lepsze dla użytkownika. Dobrze też korzystać z atrybutów async lub defer, żeby poprawić wydajność ładowania. Zgodnie z wytycznymi W3C, używanie znacznika <script> to najlepszy sposób na zapewnienie, że wszystko działa, a skrypty są kompatybilne z przeglądarkami. Można to zobaczyć na przykład, gdy chcemy użyć biblioteki jQuery lub dodać jakieś interaktywne elementy na stronie.

Pytanie 32

W CSS, aby stylizować tekst przez dodanie podkreślenia dolnego lub górnego, należy użyć atrybutu

A. text-transform

B. text-align

C. text-indent

D. text-decoration

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut text-decoration w CSS jest używany do stylizacji tekstu poprzez dodanie efektów, takich jak podkreślenie, przekreślenie czy nadkreślenie. Jest to istotny element stylizacji, który pozwala na wyróżnienie fragmentów tekstu oraz dostosowanie ich wyglądu zgodnie z wymaganiami projektowymi. W przypadku podkreślenia dolnego tekstu, można zastosować zapis 'text-decoration: underline;', co spowoduje, że tekst będzie wyraźnie podkreślony. Warto zaznaczyć, że atrybut ten jest zgodny z standardami CSS, w tym CSS2 oraz CSS3, co zapewnia jego szeroką kompatybilność z różnymi przeglądarkami. Przykładowo, jeśli mamy element <p>, możemy dodać stylizację w sekcji CSS jak poniżej: p { text-decoration: underline; }. Dodatkowo, text-decoration przyjmuje różne wartości, takie jak 'none' (brak dekoracji), 'underline' (podkreślenie), 'overline' (nadkreślenie) oraz 'line-through' (przekreślenie), co daje programistom dużą elastyczność w projektowaniu interfejsu użytkownika. Użycie text-decoration jest nie tylko zgodne z najlepszymi praktykami w tworzeniu stron internetowych, ale również ułatwia dostępność treści dla użytkowników z ograniczeniami wzrokowymi, ponieważ wyróżnianie ważnych informacji może pomóc w ich lepszym zrozumieniu i odnalezieniu w treści.

Pytanie 33

Który z wariantów znacznika jest poprawny pod względem użytych atrybutów?

A. <meta name = "description" content = "Masz jakieś hobby? To jest strona dla Ciebie! ">

B. <meta name = "!DOCTYPE">

C. <meta background = blue>

D. <meta title = "Strona dla hobbystów">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź <meta name = "description" content = "Masz jakieś hobby? To jest strona dla Ciebie! "> jest prawidłowa, ponieważ wykorzystuje atrybuty zgodne z wymaganiami standardu HTML. Znacznik <meta> jest używany do przekazywania metadanych o stronie internetowej, które są niezwykle istotne dla wyszukiwarek internetowych oraz dla użytkowników. Atrybut 'name' definiuje typ metadanych, a 'content' zawiera wartość przypisaną do tego typu. W przypadku tej odpowiedzi, 'name' jest ustawione na 'description', co oznacza, że zawiera opis strony, a 'content' dostarcza konkretną treść, która może być wykorzystana przez wyszukiwarki do generowania podsumowań w wynikach wyszukiwania. Przykładem zastosowania tego znacznika jest optymalizacja SEO, gdzie dobrze napisany opis może przyczynić się do zwiększenia kliknięć na stronie. Warto również zauważyć, że zgodnie z praktykami SEO, opis powinien być zwięzły, atrakcyjny i dokładnie odzwierciedlać zawartość strony, co może wpłynąć na jej pozycjonowanie w wynikach wyszukiwania.

Pytanie 34

Która jednostka miary CSS ma charakter względny i wyraża wielkość proporcjonalną do rozmiaru aktualnej czcionki?

A. in

B. em

C. pt

D. px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna jest jednostka „em”, bo w CSS jest to jednostka względna, która odnosi się do aktualnego rozmiaru czcionki elementu. Mówiąc prościej: 1em to 100% bieżącego font-size. Jeśli na przykład dla body ustawisz font-size: 16px, to 1em w środku body będzie równe 16px, 2em to 32px, 0.75em to 12px itd. Co ważne, w wielu projektach stosuje się em właśnie po to, żeby interfejs był elastyczny i skalował się razem z tekstem. Dzięki temu, gdy użytkownik zwiększy rozmiar czcionki w przeglądarce, odstępy, marginesy czy wcięcia oparte na em też się proporcjonalnie zmienią. To jest zgodne z dobrymi praktykami dostępności (WCAG) i ogólnie z nowoczesnym podejściem do RWD. Moim zdaniem em jest szczególnie wygodne do definiowania np. paddingów i line-height w komponentach, które mają być spójne wizualnie niezależnie od miejsca użycia. Na przykład: przycisk może mieć font-size: 1rem, padding: 0.5em 1em; wtedy gdy zmienisz rozmiar tekstu w tym przycisku, jego wewnętrzne odstępy automatycznie się dostosują. To dość eleganckie i bardzo często spotykane w profesjonalnych arkuszach stylów. W odróżnieniu od jednostek absolutnych, takich jak px, pt czy in, em zawsze patrzy na kontekst – czyli na bieżący element lub jego rodzica, w zależności od właściwości. W efekcie projekt jest bardziej responsywny, a kod CSS łatwiej utrzymać i ponownie wykorzystać w różnych miejscach serwisu.

Pytanie 35

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

B. D

C. B

D. C

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 36

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

Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:

A. <video> </video>

B. <section> </section>

C. <embed> </embed>

D. <div> </div>

Brak odpowiedzi na to pytanie.

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

Pytanie 37

input:focus { background-color: LightGreen; } W Ciebie CSS określono stylizację dla pola wejściowego. Tak przygotowane pole wejściowe będzie miało tło w odcieniu jasnozielonym?

A. w każdej sytuacji

B. po naciśnięciu przycisku myszy w celu wprowadzenia tekstu

C. jeżeli jest to pierwsza obecność tego elementu w dokumencie

D. kiedy zostanie najechane kursorem myszy bez jego klikania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 'po kliknięciu myszą w celu zapisania w nim tekstu' jest poprawna, ponieważ styl CSS zdefiniowany jako 'input:focus' odnosi się do stanu, w którym pole edycyjne jest aktywne i gotowe do wprowadzania danych. Kiedy użytkownik klika w pole edycyjne, przeglądarka przełącza jego stan na 'focus', co skutkuje zastosowaniem zdefiniowanego stylu, w tym przypadku jasnozielonego tła. Dzięki temu użytkownicy mogą wizualnie zidentyfikować, które pole edycyjne jest aktualnie wybrane, co znacząco poprawia użyteczność i interaktywność formularzy na stronach internetowych. W praktyce, jest to kluczowe podczas projektowania formularzy, aby zapewnić użytkownikom wyraźne wskazówki dotyczące aktualnego stanu interfejsu. Dobrym przykładem zastosowania jest formularz rejestracyjny, gdzie aktywne pole edycyjne wyróżnia się kolorem, ułatwiając użytkownikom wprowadzanie danych. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), takie wizualne wskazówki są istotne dla zapewnienia dostępności aplikacji webowych, co czyni je standardem branżowym.

Pytanie 38

W jakiej technologii niemożliwe jest przetwarzanie danych wprowadzanych przez użytkownika na stronie WWW?

A. AJAX

B. JavaScript

C. PHP

D. CSS

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
CSS, czyli Kaskadowe Arkusze Stylów, jest technologią używaną do stylizacji stron internetowych. Jego głównym celem jest określenie, jak elementy HTML powinny wyglądać, w tym ich wygląd, kolor, rozmiar oraz układ na stronie. CSS nie ma możliwości przetwarzania danych użytkownika, ponieważ działa wyłącznie po stronie klienta i nie posiada funkcji interakcji z danymi użytkowników. Przykładem zastosowania CSS jest nadanie stylu nawigacji w serwisie internetowym, gdzie style mogą być określone w pliku CSS, ale nie mają zdolności do przechwytywania i przetwarzania informacji wprowadzonych przez użytkowników w formularzach. Standardy CSS rozwijane przez World Wide Web Consortium (W3C) podkreślają jego rolę w stylizacji i prezentacji, a nie w logice aplikacji czy przetwarzaniu danych. Użytkownicy mogą korzystać z CSS do tworzenia responsywnych układów, jednak bez zdolności do interakcji z danymi, co czyni go technologią czysto wizualną.

Pytanie 39

Poniżej zaprezentowano fragment kodu w języku HTML:
<ol>
<li>punkt 1</li>
<li>punkt 2</li>
<ul>
<li>podpunkt1</li>
<li>podpunkt2</li>
<li>podpunkt3</li>
</ul>
<li>punkt3</li>
</ol>

A. 1. punkt 1 2. punkt 2 3. punkt3 podpunkt1 podpunkt2 podpunkt1

B. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

C. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

D. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Fajnie, że wybrałeś poprawną odpowiedź! To pokazuje, że rozumiesz, jak działa struktura list w HTML. W Twoim kodzie mamy uporządkowaną listę z trzema głównymi punktami, co jest świetne. Te pierwsze dwa są dobrze zdefiniowane jako elementy <li>, tak jak powinny być. A w punkcie 2 masz zagnieżdżoną listę nieuporządkowaną, co dodaje trochę ekstra informacji – super sprawa! Pamiętaj, że to zagnieżdżenie ma znaczenie, bo pomaga to w organizacji treści. Każdy podpunkt też jest elementem <li>, więc wszystko się zgadza. Tego typu struktury są mega przydatne, zwłaszcza w spisach treści czy menu nawigacyjnych. Pamiętaj, że dobrze zbudowany HTML jest ważny dla czytelności, a także dla osób, które korzystają z różnych technologii do przeglądania stron. Trzymaj tak dalej!

Pytanie 40

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. nav { float: left; } aside { float: left; }

B. aside {float: left; }

C. nav { float: right; } section { float: right; }

D. nav { float: right; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Rozpocznij nowy egzamin

Powrót do strony głównej