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: 28 października 2025 10:55
Data zakończenia: 28 października 2025 11:26

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby zastosować w CSS wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć zapisu

A. p{text-indent: 30px;}

B. p{line-indent: 30px;}

C. p{line-height: 30px;}

D. p{text-spacing: 30px;}

Właściwość 'text-spacing' nie istnieje w standardzie CSS, dlatego odpowiedź ta jest niepoprawna. W CSS nie ma definicji dla 'text-spacing', co oznacza, że nie można jej wykorzystać do modyfikacji odstępów w akapitach. Zamiast tego, do regulacji przestrzeni między znakami i wierszami stosuje się inne właściwości, takie jak 'letter-spacing' czy 'line-height'. Dodatkowo, 'line-height' służy do kontrolowania wysokości linii tekstu, co wpływa na odstęp między poszczególnymi liniami w akapicie, ale nie na wcięcie pierwszej linii. Użycie 'line-height' z wartością 30px nie osiągnie zamierzonego efektu, gdyż wpływa to tylko na wysokość wiersza, a nie na wcięcie. Z kolei 'line-indent' to kolejna fikcyjna właściwość, która nie jest częścią CSS, więc nie można jej używać w żadnym kontekście kodowania CSS. Poprawne formatowanie akapitów wymaga znajomości właściwych technik i terminologii, a użycie nieistniejących właściwości prowadzi do błędów w stylizacji i może negatywnie wpływać na interpretację stylów przez przeglądarki, co w efekcie może obniżyć jakość wyświetlania treści w sieci.

Pytanie 2

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

A. alt

B. name

C. title

D. dfn

Znacznik <abbr> w HTML pełni rolę semantyczną, pomagając w oznaczaniu skrótów i akronimów. Atrybut alt jest stosowany w znacznikach <img> do opisywania obrazów, co jest istotne dla dostępności i SEO, ale nie ma związku ze znacznikami tekstowymi jak <abbr>. Alt informuje o treści obrazu, co jest kluczowe dla użytkowników niewidzących, lecz nie pełni funkcji rozwijania skrótów tekstowych. Atrybut dfn służy do definiowania terminów w tekście, zazwyczaj używany w połączeniu ze znacznikiem <dfn>, a nie <abbr>. Chociaż dfn dostarcza definicji, nie jest używany do rozwijania skrótów. Atrybut name nie jest związany z rozwijaniem tekstu ani z <abbr>. Jest on stosowany głównie w formularzach HTML do identyfikacji elementów, takich jak <input>, umożliwiając ich rozróżnienie. Mylenie tych atrybutów wynika często z braku zrozumienia ich specyficznych zastosowań w kontekście HTML i dostępności. Właściwe używanie atrybutów to klucz do tworzenia semantycznie poprawnych i dostępnych stron internetowych.

Pytanie 3

Znacznik <strong> tekst</strong> w HTML będzie ukazywany przez przeglądarkę w identyczny sposób, jak znacznik

A. <h1>tekst</h1>

B. <b>tekst</b>

C. <big>tekst</big>

D. <sub>tekst</sub>

Znacznik <h1> jest używany do definiowania nagłówków na stronie internetowej. Oznacza on najwyższy poziom nagłówka i jest kluczowy dla struktury dokumentów HTML. Użycie <h1> dla wyróżnienia tekstu nie jest odpowiednie, ponieważ ten znacznik powinien być zarezerwowany dla tytułów oraz głównych nagłówków strony, co wpłynie na SEO, ponieważ wyszukiwarki traktują go jako istotny element hierarchii treści. Z kolei znacznik <big> jest używany do zwiększenia rozmiaru czcionki tekstu, co również nie odpowiada funkcji wyróżnienia semantycznego, które realizuje <strong>. W przypadku <big> nie zmienia się znaczenie tekstu, a jedynie jego rozmiar, co czyni go mniej przydatnym w kontekście semantyki. Ostatecznie, znacznik <sub> jest przeznaczony do dodawania tekstu dolnego, czyli subscript, co w żaden sposób nie wpływa na wyróżnienie tekstu jako takiego. Znaczniki te nie mają na celu podkreślenia znaczenia treści, co jest główną funkcją zarówno <strong>, jak i <b>. Dlatego, każde z wymienionych znaczników nie spełnia oczekiwań związanych z semantyką i wyróżnianiem tekstu w HTML.

Pytanie 4

W języku HTML zdefiniowano znacznik a oraz atrybut rel nofollow.

A. oznacza, że kliknięcie w link otworzy go w nowej karcie przeglądarki

B. jest wskazówką dla robota wyszukiwarki Google, aby nie śledził tego linku

C. oznacza, że kliknięcie w link nie przekieruje na stronę website.com

D. jest poleceniem dla przeglądarki internetowej, aby nie traktowała słowa "link" jako hiperłącza

Atrybut rel z wartością nofollow w znaczniku a w języku HTML jest kluczowym narzędziem w obszarze SEO i zarządzania linkami na stronach internetowych. Jego głównym celem jest wskazanie robotom wyszukiwarek, że nie powinny one śledzić danego linku ani przekazywać mu wartości PageRank, co jest ważnym czynnikiem w rankingach wyszukiwarek. Zastosowanie nofollow jest powszechne w kontekście linków zewnętrznych, aby zapobiec ewentualnym nadużyciom, takim jak spam czy niechciane linki. Przykładowo, jeśli strona internetowa prowadzi do innej witryny, której treść nie jest w pełni zaufana, dodanie atrybutu nofollow zabezpiecza nas przed negatywnym wpływem na naszą własną reputację w oczach wyszukiwarek. Warto także zauważyć, że nofollow nie uniemożliwia użytkownikom kliknięcia w link, a jedynie informuje roboty wyszukiwarek o braku konieczności śledzenia tego linku. Taki mechanizm wpływa na algorytmy indeksowania, co może przyczynić się do lepszej kontroli nad tym, jakie źródła są promowane przez daną stronę.

Pytanie 5

Komunikat błędu generowany przez walidator HTML może wskazywać na

A. niezgodną ilość znaczników <p> otwartych i zamkniętych

B. brak zamknięcia znacznika <p>

C. brak zamknięcia znaczników zagnieżdżonych wewnątrz znacznika <p> przed jego zakończeniem

D. zamknięciu znacznika <p>, mimo że wcześniej nie był on otwarty

Błąd mówi, że zamknąłeś znacznik <p>, ale niektóre znaczniki wewnętrzne, jak <a>, pozostają otwarte. To nie chodzi o to, żeby zamknąć <p> bez wcześniejszego otwarcia, ale o to, że musisz zamknąć wszystkie zagnieżdżone znaczniki przed zamykaniem nadrzędnego. Jeśli to zrobisz, to wszystko powinno działać lepiej i strona powinna się wyświetlać tak, jak chcesz.

Pytanie 6

Przedstawiony styl generuje pojedyncze obramowanie, które posiada następujące właściwości:

border: solid 1px;
 border-color: red blue green yellow;

A. krawędź lewa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź prawa w odcieniu zielonym, krawędź górna w kolorze żółtym

B. krawędź górna ma kolor czerwony, krawędź lewa w kolorze niebieskim, krawędź dolna w odcieniu zielonym, krawędź prawa w kolorze żółtym

C. krawędź górna jest koloru czerwonego, krawędź prawa koloru niebieskiego, krawędź dolna koloru zielonego, krawędź lewa koloru żółtego

D. krawędź prawa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź lewa w odcieniu zielonym, krawędź górna w kolorze żółtym

Niewłaściwe zrozumienie składni border-color prowadzi do błędnych odpowiedzi. Właściwość border-color pozwala przypisać do każdej krawędzi elementu osobne kolory według kolejności: góra prawa dół lewa. Przy czterech wartościach każda odpowiada innej krawędzi rozpoczynając od górnej w ruchu zgodnym z ruchem wskazówek zegara. Niektórzy mogą błędnie założyć że kolejność zaczyna się od lewej krawędzi co prowadzi do niepoprawnych wniosków. Podanie wyłącznie dwóch kolorów skutkuje ich przypisaniem do przeciwległych krawędzi ale w przypadku czterech wartości każda odpowiada innej krawędzi. Typowy błąd polega na myleniu kolejności przypisania kolorów co komplikuje interpretację i prowadzi do niepoprawnego zrozumienia jak właściwość border-color działa w praktyce. Dla poprawności i zgodności z standardami CSS niezbędne jest precyzyjne i dokładne analizowanie dokumentacji oraz przykładów co pozwala uniknąć typowych błędów i ułatwia poprawne wdrażanie stylów na stronach internetowych. Zrozumienie właściwości CSS i ich poprawne zastosowanie jest kluczowe w projektowaniu nowoczesnych stron internetowych co zapewnia zarówno estetyczny wygląd jak i funkcjonalność interfejsu użytkownika. Właściwe używanie border-color wspiera tworzenie atrakcyjnych i dostępnych projektów co jest nieocenione w pracy każdego specjalisty od front-endu.

Pytanie 7

Do stworzenia układu strony z trzema kolumnami umieszczonymi obok siebie, można wykorzystać styl CSS

A. .kolumny{ float: left; width: 33%; }

B. .kolumny{ float: right; height: 33%; }

C. .kolumny{ clear: both; height: 33%; }

D. .kolumny{ float: left; width: 40%;}

Aby stworzyć szablon strony internetowej z trzema kolumnami obok siebie, kluczowe jest zastosowanie odpowiednich właściwości CSS. Właściwość 'float' z wartością 'left' pozwala na przesunięcie elementów w lewo, co umożliwia ich równoległe wyświetlanie w poziomie. Ustawienie szerokości każdej kolumny na 33% zapewnia, że wszystkie trzy kolumny zajmą równą część dostępnej przestrzeni w kontenerze. To podejście jest zgodne z zasadami projektowania responsywnego, umożliwiając dostosowanie układu do różnych rozmiarów ekranów. Przykładowo, definiując klasę .kolumny w CSS jako '.kolumny{ float: left; width: 33%; }', uzyskujemy pożądany efekt trzech kolumn. Warto również zdefiniować kontener dla kolumn, aby uniknąć problemów z 'clearfix'. Takie podejście wspiera standardy W3C dotyczące budowy stron internetowych oraz ułatwia przyszłe modyfikacje w układzie. Dodatkowo, istotne jest, aby pamiętać o odpowiednim 'clearfix', aby kontener dostosował swoje wymiary do elementów wewnętrznych, co zapobiega problemom z układem.

Pytanie 8

Zapis tagu HTML w formie <a href="#hobby">przejdź</a>?

A. jest poprawny, po kliknięciu w odnośnik aktualna strona zostanie przewinięta do elementu o nazwie "hobby"

B. jest błędny, w atrybucie href trzeba wpisać adres URL

C. jest błędny, niepoprawnie użyto znaku "#" w atrybucie href

D. jest poprawny, po kliknięciu w odnośnik otworzy się strona internetowa o adresie "hobby"

Myślenie, że znacznik <a href="#hobby">przejdź</a> jest błędny, bo używasz znaku '#' w href, jest trochę mylące. Ten znak '#' to normalny sposób, żeby wskazać lokalne odnośniki na tej samej stronie, co jest zgodne z regułami HTML. Nie jest prawdą, że musi być cały adres URL, bo lokalne identyfikatory są jak najbardziej w porządku. Często spotykam się z przekonaniem, że href zawsze powinien prowadzić do zewnętrznego linku, a to nieprawda. Wiele stron korzysta z lokalnych linków, co naprawdę sprawdza się w długich treściach, pozwalając użytkownikom szybko przechodzić do tych sekcji, które ich interesują. Nie można też myśleć, że tylko absolutne identyfikatory w href są jedynym słusznym rozwiązaniem, bo to podejście z lokalnymi odnośnikami jest powszechnie akceptowane i sprawdza się w praktyce.

Pytanie 9

Który z przedstawionych obrazów ma zastosowany poniższy styl CSS?

img {
    padding: 5px;
    border: 1px solid grey;
    border-radius: 10px;
}

A. D.

B. B.

C. C.

D. A.

Obraz A został sformatowany za pomocą stylu CSS, który określa podstawowe cechy estetyczne elementu graficznego. Pierwszym aspektem jest zastosowanie właściwości padding wynoszącej 5px, co oznacza, że wokół obrazu znajduje się wewnętrzny margines o szerokości 5 pikseli. To zapewnia przestrzeń między obrazem a jego ramką, zwiększając czytelność i estetykę wizualną. Następnie, użyto border o grubości 1px z kolorem solid grey. Ten cienki, szary obrys dodaje subtelny akcent, który pomaga wyróżnić obraz na tle strony. Wartość border-radius wynosi 10px, co dodaje zaokrąglone rogi, nadając nowoczesny wygląd. Takie zaokrąglenie jest często stosowane w nowoczesnym designie, aby nadać strony bardziej przyjazny i estetyczny wygląd. Stylizacja obrazów w ten sposób jest zgodna z zasadami responsywności i dostępności, co jest istotne w projektowaniu interfejsów użytkownika. Stosowanie takich technik pozwala na tworzenie spójnych i estetycznych stron internetowych, które są zgodne z obecnymi standardami UX i UI.

Pytanie 10

Jaki zapis w HTML służy do określenia kodowania znaków w dokumencie?

A. <encoding="UTF-8">

B. <charset="UTF-8">

C. <meta encoding="UTF-8">

D. <meta charset="UTF-8">

Wszystkie zapisy w pozostałych odpowiedziach są niepoprawne, ponieważ nie stosują przyjętej przez standardy HTML metody deklarowania kodowania znaków. Na przykład, zapis <encoding="UTF-8"> nie jest zgodny z HTML, ponieważ nie istnieje taki element w tej specyfikacji. Kodowanie znaków powinno być zawsze deklarowane przez element <meta> z atrybutem 'charset', co stanowi dobre praktyki w web development. Ponadto, zapis <meta encoding="UTF-8"> również zawiera błędne przypisanie atrybutu, gdyż 'encoding' nie jest rozpoznawanym atrybutem w kontekście tagu <meta>. Takie nieprawidłowe deklaracje mogą prowadzić do problemów z wyświetlaniem treści, co z kolei wpływa na doświadczenie użytkowników. Można też zauważyć, że zapis <charset="UTF-8"> w ogóle nie jest poprawnym elementem HTML, ponieważ nie istnieje tag na poziomie dokumentu o takiej formie. Tego rodzaju nieprawidłowości mogą wyniknąć z nieznajomości aktualnych standardów HTML oraz podstawowych zasad dotyczących kodowania znaków. Dlatego kluczowe jest, aby twórcy stron internetowych byli dobrze zaznajomieni z obowiązującymi normami i potrafili je stosować w praktyce, aby uniknąć błędów, które mogą wpłynąć na funkcjonalność i dostępność ich witryn.

Pytanie 11

Która z poniżej wymienionych zasad nie przyczyni się do poprawy czytelności kodu?

A. Nazwy zmiennych muszą odzwierciedlać ich funkcję

B. W każdej linii kodu powinna znaleźć się tylko jedna komenda

C. Trzeba dodawać komentarze w trudniejszych fragmentach kodu

D. Kod powinien być napisany bez wcięć i nadmiarowych enterów

Odpowiedź "Kod powinien być napisany bez wcięć i zbędnych enterów" jest prawidłowa, ponieważ brak wcięć i odpowiednich przerw w kodzie negatywnie wpływa na jego czytelność. Właściwe formatowanie kodu, w tym stosowanie wcięć, jest kluczowe dla zrozumienia struktury programu. Pomaga to programistom w szybkim zlokalizowaniu bloków kodu, a także wzmacnia hierarchię i powiązania między funkcjami i klasami. Na przykład w języku Python, wcięcia są integralną częścią składni, co oznacza, że brak wcięć skutkuje błędami wykonania. W praktyce, pisząc kod, warto zastosować konwencje formatowania takie jak PEP 8 dla Pythona lub Google Java Style Guide dla Javy, które promują przejrzystość i jednoznaczność. W związku z tym, aby zwiększyć czytelność i zrozumiałość kodu, należy stosować wcięcia oraz logiczne podziały. Dobrze sformatowany kod nie tylko ułatwia jego przeglądanie, ale również późniejsze utrzymanie oraz współpracę z innymi programistami.

Pytanie 12

Określ właściwą sekwencję stylów CSS, biorąc pod uwagę ich priorytet w formatowaniu elementów strony WWW?

A. Styl wewnętrzny, Styl zewnętrzny, Rozciąganie stylu

B. Rozciąganie stylu, Styl zewnętrzny, Styl lokalny

C. Styl zewnętrzny, Wydzielone bloki, Styl lokalny

D. Styl lokalny, Styl wewnętrzny, Styl zewnętrzny

Analizując inne odpowiedzi, można zauważyć, że w wielu przypadkach nie uwzględniają one podstawowych zasad kaskadowości CSS. Przykładowo, pierwsza odpowiedź sugeruje, że styl wewnętrzny powinien mieć pierwszeństwo przed zewnętrznym, co jest niepoprawne. W rzeczywistości, style zewnętrzne, które są ładowane z zewnętrznych arkuszy stylów, mogą być nadpisywane przez style lokalne i wewnętrzne, ale nie powinny być ignorowane w kontekście hierarchii. Następnie, opcja odnosząca się do wydzielonych bloków w kontekście stylów CSS nie ma podstaw teoretycznych, ponieważ nie istnieje uznawana terminologia w standardach CSS, która opisywałaby 'wydzielone bloki'. Każdy styl w CSS ma swoje miejsce w kolejności kaskadowej, a style lokalne powinny być definiowane jako najwyższe w hierarchii. Może to prowadzić do nieporozumień, zwłaszcza w przypadku początkujących programistów, którzy mogą nie rozumieć, dlaczego ich style zewnętrzne nie działają zgodnie z oczekiwaniami. Ważne jest, aby pamiętać, że odpowiednia specyfikacja i zrozumienie, które style mają pierwszeństwo, są kluczowe dla skutecznego i efektywnego projektowania stron internetowych. W przeciwnym razie, projektanci mogą napotkać problemy z nieoczekiwanym zachowaniem stylów oraz trudnościami w utrzymaniu i aktualizacji kodu CSS.

Pytanie 13

Jaką właściwość CSS należy zastosować, aby uzyskać linie przerywaną w obramowaniu?

A. dashed

B. double

C. dotted

D. solid

Odpowiedź dashed jest poprawna ponieważ w CSS właściwość ta służy do definiowania stylu obramowania w postaci linii kreskowanej Jest to często używane do wizualnego oddzielenia zawartości na stronie internetowej bez zbytniego skupiania uwagi Użycie dashed sprawia że linia jest bardziej subtelna w porównaniu do solid co czyni ją dobrym wyborem w przypadku chęci zachowania minimalistycznego wyglądu Zgodnie ze standardami CSS właściwość border-style może przyjmować kilka wartości w tym solid dotted double i dashed Każda z tych wartości ma swoje unikalne zastosowania na przykład solid tworzy ciągłą linię natomiast dotted tworzy linię z kropkami Linia dashed składa się z krótkich kresek co różni ją od linii double która jest podwójną linią W praktyce dashed jest często stosowane w projektach gdzie ważne jest wskazanie na określone sekcje lub elementy bez przytłaczania użytkownika Zgodnie z dobrymi praktykami można dostosować szerokość i kolor obramowania co pozwala na lepszą integrację z ogólnym stylem strony CSS daje dużą elastyczność w projektowaniu co pozwala na tworzenie różnorodnych i responsywnych interfejsów użytkownika

Pytanie 14

W jaki sposób można ustawić w CSS wygląd hiperłącza, aby linki nieodwiedzone miały kolor żółty, a odwiedzone kolor zielony?

A. a:link {color: yellow;} a:visited{color: green;}

B. a:hover {color: green;} a:link{color: yellow;}

C. a:visited {color: yellow;} a:link{color: green;}

D. a:hover {color: yellow;} a:visited{color: green;}

Aby zdefiniować w języku CSS formatowanie hiperłączy, które różnią się kolorem w zależności od ich stanu (odwiedzone lub nieodwiedzone), należy zastosować odpowiednie selektory CSS. W standardzie CSS wyróżniamy kilka pseudo-klas, które pozwalają na stylizację linków: :link, :visited, :hover, oraz :active. Pseudo-klasa :link odnosi się do linków, które jeszcze nie zostały odwiedzone przez użytkownika, a jej stylizację możemy zdefiniować za pomocą a:link {color: yellow;}. Z kolei pseudo-klasa :visited odnosi się do linków, które zostały już odwiedzone, a ich kolor możemy ustawić jako zielony, co realizuje reguła a:visited {color: green;}. W ten sposób, gdy użytkownik przegląda stronę, linki, które jeszcze nie były klikane, będą wyświetlane w kolorze żółtym, natomiast te, które zostały odwiedzone, zmienią swój kolor na zielony. To podejście jest zgodne z zasadami dostępności i użyteczności w Internecie, a także spełnia wymagania WCAG (Web Content Accessibility Guidelines), które zachęcają do jasnego oznaczania stanu linków. Przykład zastosowania CSS w pliku stylów może wyglądać następująco: .linki {text-decoration: none;} a:link {color: yellow;} a:visited {color: green;}. Takie podejście pozwala na intuicyjne odczytanie stanu linku przez użytkowników, co zwiększa komfort korzystania z serwisów internetowych.

Pytanie 15

Aby obraz umieszczony za pomocą kodu HTML mógł być rozpoznawany przez programy wspierające osoby niewidome, konieczne jest określenie atrybutu

A. sizes

B. alt

C. border

D. src

Atrybut 'alt' (alternatywny tekst) jest kluczowym elementem w kontekście dostępności stron internetowych, szczególnie dla osób niewidzących. Jego głównym celem jest dostarczenie opisowej informacji o obrazie, który nie może być bezpośrednio widziany. W przypadku obrazów, które nie są widoczne z różnych powodów (np. uszkodzenie pliku, brak połączenia internetowego lub korzystanie z czytników ekranu), tekst alternatywny pomaga zrozumieć kontekst i znaczenie danego obrazu. Przykład zastosowania: dla obrazka przedstawiającego logo firmy, można użyć atrybutu alt w następujący sposób: <img src='logo.png' alt='Logo firmy XYZ'>. W ten sposób, jeśli obrazek nie załadowałby się, użytkownik korzystający z czytnika ekranu otrzyma informację o tym, co ten obraz przedstawia. Definiowanie atrybutu 'alt' jest zgodne z wytycznymi WCAG (Web Content Accessibility Guidelines), które zalecają, aby wszystkie obrazki, które pełnią funkcję informacyjną, były opisane w taki sposób, aby zapewnić pełny dostęp do treści wszystkim użytkownikom. W praktyce takie podejście nie tylko poprawia dostępność, ale również pozytywnie wpływa na SEO, ponieważ wyszukiwarki również analizują ten atrybut.

Pytanie 16

W trakcie weryfikacji stron internetowych nie uwzględnia się

A. działania hiperłączy

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

C. źródła pochodzenia narzędzi edytorskich

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

Walidacja stron internetowych obejmuje różnorodne aspekty techniczne, które są kluczowe dla prawidłowego funkcjonowania witryn w sieci. Analiza działania linków jest istotna, ponieważ sprawdza, czy odnośniki prowadzą do właściwych lokalizacji i czy nie prowadzą do stron błędów 404. Użytkownicy oczekują, że wszystkie interaktywne elementy na stronie będą działały bezproblemowo, a ich analiza pozwala na identyfikację potencjalnych problemów oraz ich szybką naprawę. Błędy składniowe w kodzie HTML lub CSS mogą prowadzić do nieprawidłowego renderowania strony w przeglądarkach, przez co użytkownicy mogą mieć trudności w jej przeglądaniu. Walidacja składni jest zatem niezbędna, aby zapewnić poprawne wyświetlanie zawartości oraz dostępność dla wszystkich użytkowników. Zgodność z przeglądarkami jest równie ważnym aspektem walidacji, ponieważ różne przeglądarki mogą interpretować kod na różne sposoby, co może prowadzić do niezgodności w wyświetlaniu strony. Testowanie zgodności z popularnymi przeglądarkami, takimi jak Chrome, Firefox, Safari czy Edge, jest kluczowe, aby zapewnić spójne doświadczenie użytkowników niezależnie od wybranego narzędzia do przeglądania internetu. W związku z tym, walidacja to kompleksowy proces, który koncentruje się na aspektach technicznych związanych z jakością kodu i doświadczeniem użytkownika.

Pytanie 17

Który z podanych kodów XHTML sformatuje tekst zgodnie z określonym schematem?

A. Odpowiedź A

B. Odpowiedź C

C. Odpowiedź D

D. Odpowiedź B

Poprawna odpowiedź D zawiera poprawne znaczniki XHTML i HTML, które umożliwiają formatowanie tekstu według wzoru. W pierwszym wierszu tekst Ala ma kota używa znacznika b do pogrubienia słowa kota, co jest zgodne ze standardami, ponieważ b jest szeroko stosowanym tagiem HTML do semantycznego pogrubienia tekstu. Następnie użyty jest znacznik br do wstawienia przerwy w linii, co sprawia, że kolejna część tekstu pojawia się w nowej linii, odzwierciedlając układ zaprezentowany na obrazku. W drugim wierszu tekst a kot ma Alę, znacznik i został użyty do pochylania słowa kot, co jest zgodne z praktykami formatowania tekstu, gdzie i oznacza kursywę. Zamknięcie całego tekstu w znacznikach p paragrafu zapewnia również odpowiedni odstęp i formatowanie, co jest zgodne z semantycznym i strukturalnym organizowaniem treści w dokumencie XHTML. Podejście to odzwierciedla dobre praktyki kodowania, w tym stosowanie właściwych znaczników dla odpowiednich stylów oraz zapewnienie kompatybilności z różnymi przeglądarkami.

Pytanie 18

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

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

A. Nowakowska-Kowalska

B. Kowalski

C. Jelenia Góra

D. Kasprowicza

Odpowiedzi takie jak 'Kasprowicza', 'Nowakowska-Kowalska' i 'Kowalski' są w porządku, bo pasują do wzoru wyrażenia regularnego. Wzór mówi, że tekst musi zaczynać się od wielkiej litery i mieć przynajmniej dwie małe litery zaraz po. 'Kasprowicza' to nazwisko, które zaczyna się od wielkiej litery, więc jest ok. 'Nowakowska-Kowalska' też jest good, bo ma segment po myślniku z kolejną wielką literą. Z 'Kowalskim' sprawa wygląda podobnie, bo również spełnia wymogi. Często ludzie mylą, co dokładnie oznacza wzór i co przynależne do niego. Wydaje się, że każde słowo z wielką literą pasuje, ale nie do końca tak to działa. Kluczowe jest, żeby zrozumieć dokładne zasady, bo wyrażenia regularne są bardzo precyzyjne i wymagają zwrócenia uwagi na detale. Dobrze jest też testować swoje wzory, by sprawdzić, czy działają w różnych sytuacjach.

Pytanie 19

Który format graficzny najlepiej nadaje się do zapisu obrazu z przezroczystością do zastosowania w serwisie internetowym?

A. SVG

B. JPG

C. PNG

D. BMP

Format PNG (Portable Network Graphics) jest najlepszym wyborem do zapisu obrazów z przezroczystością przeznaczonych na strony internetowe. PNG obsługuje przezroczystość alpha, co oznacza, że można uzyskać dowolny stopień przezroczystości na pikselach, co jest szczególnie przydatne w przypadku grafik wymagających gładkich przejść lub cieni. Dzięki temu grafiki mogą być umieszczane na różnych tłach bez widocznych krawędzi, co jest kluczowe w designie stron internetowych. Warto również zauważyć, że PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas zapisu. W praktyce, format PNG jest idealny do logo, ikon, obrazów z tekstem oraz ilustracji, gdzie ważna jest jakość i przezroczystość. Standardy webowe, takie jak WCAG, również zalecają używanie formatów, które zapewniają dostępność, a PNG doskonale wpisuje się w te wymagania, umożliwiając tworzenie estetycznych i funkcjonalnych stron. Ponadto, wsparcie dla formatu PNG jest szerokie, co zapewnia jego uniwersalność w różnych przeglądarkach i na różnych urządzeniach.

Pytanie 20

Podany fragment dokumentu HTML zawierający kod JavaScript sprawi, że po naciśnięciu przycisku

A. obraz2.png zostanie zniknięty

B. obraz1.png zostanie zniknięty

C. obraz1.png zostanie wymieniony na obraz2.png

D. obraz2.png zostanie wymieniony na obraz1.png

W analizie odpowiedzi należy zwrócić uwagę na działanie technologii webowych w kontekście manipulacji elementami HTML. W pytaniu przedstawiono kod JavaScript używany w zdarzeniu onclick przycisku HTML co prowadzi do zmiany stylu elementu. Jeśli chodzi o odpowiedź sugerującą że obraz1.png zostanie ukryty jest to błędne ponieważ w kodzie nie ma odwołania do tego elementu poprzez identyfikator. Manipulacja stylami CSS dotyczy jedynie elementów które zostały jednoznacznie zidentyfikowane w skrypcie. Kolejna błędna odpowiedź mówi że obraz2.png zostanie zastąpiony przez obraz1.png. W rzeczywistości w kodzie nie ma żadnego mechanizmu ani funkcji które by zamieniały jeden obrazek na drugi. Skrypt jedynie ukrywa element zmieniając jego styl display więc nie dochodzi do żadnej zamiany. Odpowiedź sugerująca że obraz1.png zostanie zastąpiony przez obraz2.png również jest błędna z podobnych powodów. Manipulacja DOM w tym przypadku polega wyłącznie na zmianie stylu widoczności a nie na modyfikacji treści czy zamianie elementów. Typowym błędem jest założenie że skrypty JavaScript dokonują zamian elementów co wymaga bardziej zaawansowanych operacji niż zmiana stylu display. Kluczowe w programowaniu webowym jest zrozumienie jak selektywne odwoływanie się do elementów za pomocą funkcji takich jak getElementById pozwala na precyzyjne kontrolowanie ich właściwości i reakcji na interakcje użytkownika co jest fundamentem tworzenia dynamicznych i interaktywnych stron internetowych

Pytanie 21

Zamieszczono fragment kodu HTML, który nie przechodzi poprawnej walidacji. Błąd związany z walidacją tego fragmentu kodu dotyczy

A. niedomknięcia znacznika img

B. powtórzenia nazwy pliku graficznego

C. niedomknięcia znacznika br

D. braku cudzysłowu

Niepoprawność w zakresie braku cudzysłowu w atrybucie 'src' znacznika 'img' wyklucza inne błędy, o których mowa w odpowiedziach. Znacznik 'br' jest jednym z nielicznych znaczników, które są samodomykające, co oznacza, że nie wymaga pary otwierającej i zamykającej. Dlatego informacja o niedomknięciu tego znacznika jest błędna, ponieważ poprawny zapis to po prostu <br>. Ponadto, znacznik 'img' również nie wymaga zamknięcia, ponieważ podobnie jak 'br', jest znakiem samodomykającym, co czyni obie te odpowiedzi niepoprawnymi w kontekście analizy błędów kodu HTML. Dodatkowo, kwestia powtórzenia nazwy pliku graficznego w kodzie nie jest błędem walidacji, lecz jedynie stylem programowania. Jeżeli plik graficzny jest używany wielokrotnie, jest to całkowicie akceptowalne. Dlatego te trzy odpowiedzi nie odnoszą się do rzeczywistego problemu, który występuje w przedstawionym kodzie, co podkreśla znaczenie ścisłej znajomości składni HTML oraz zasad walidacji dla prawidłowego tworzenia stron internetowych.

Pytanie 22

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

A. kodowania

B. automatycznego odświeżania

C. autora

D. typu dokumentu

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

Pytanie 23

Po wykonaniu fragmentu kodu HTML i JavaScript na stronie będzie wyświetlony obraz z pliku

<img id="obraz" src="kol1.jpg">
<button id="przycisk">Przycisk</button>

<script>
    document.getElementById("obraz").src = "kol2.jpg";
</script>

A. kol1.jpg

B. kol1.jpg, który może być zmieniony na kol2.jpg po wciśnięciu przycisku.

C. kol2.jpg

D. kol2.jpg, który może być zmieniony na kol1.jpg po wciśnięciu przycisku.

Niestety, nie trafiłeś. Wybierając 'kol1.jpg', mylisz się co do działania JavaScript w kontekście zmiany elementów na stronie. Skrypt używa getElementById, żeby znaleźć obraz o identyfikatorze 'obraz', a potem zmienia atrybut 'src' na 'kol2.jpg'. Tutaj nie ma żadnej interakcji z użytkownikiem, która mogłaby zmienić obrazek. W praktyce jednak, JavaScript daje nam możliwość dynamicznego modyfikowania elementów na stronie, co jest kluczowe przy tworzeniu takich interaktywnych stron. Na przykład, można wykorzystać tą samą metodę do zmiany obrazu, gdy ktoś na niego najedzie albo wciśnie przycisk. W tym przypadku jednak, to nie jest to, co się dzieje. Warto też zrozumieć, że 'kol1.jpg' to nie jest dobra odpowiedź, bo to obraz, który miałby być zmieniony, a nie ten, który się wyświetli.

Pytanie 24

Jak nazywa się metoda dodawania arkusza stylów do dokumentu HTML zastosowana w poniższym kodzie?

<p style="color: red;">tekst paragrafu</p>

A. Styl wpisany, lokalny

B. Styl alternatywny, zewnętrzny

C. Styl wewnętrzny

D. Styl zewnętrzny

Podczas analizy alternatywnych metod dołączania arkuszy stylów do HTML, warto skupić się na ich kontekście i funkcjonalności. Styl alternatywny, zewnętrzny, najczęściej odnosi się do zewnętrznych plików CSS, które są dołączane do dokumentu HTML przy użyciu tagu <link>. Jest to podejście, które pozwala na centralne zarządzanie stylami dla całej strony, co zwiększa modularność i ułatwia aktualizacje. Styl wewnętrzny to metoda, w której style są umieszczane w sekcji <style> w nagłówku dokumentu. Chociaż oba te podejścia mają swoje zastosowania, ich niepoprawne zrozumienie może prowadzić do chaosu w kodzie. Styl wpisany, lokalny, z kolei, jest odpowiedni tylko dla niewielkich, jednorazowych stylizacji. W przypadku bardziej złożonych projektów, poleganie na stylach wpisanych może prowadzić do problemów z zarządzaniem i duplikacją kodu. Użytkownicy mogą mylić styl wpisany z innymi metodami, co może wynikać z braku wiedzy na temat ich zastosowań. Kluczowym błędem jest utożsamianie lokalnych stylów z bardziej uniwersalnymi rozwiązaniami, co w dłuższej perspektywie może prowadzić do trudności w utrzymaniu i aktualizacji projektów. Teoretyczne podejście do stylizacji w HTML wymaga zrozumienia, że różne metody mają swoje miejsce i zastosowanie, a ich wybór powinien być uzależniony od specyfiki projektu.

Pytanie 25

Jakie pojęcia są wykorzystywane do opisu interfejsu użytkownika serwisu internetowego?

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

B. Przetwarzanie danych, system zarządzania treścią, projektowanie informacji

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

D. Szkic strony, mapa witryny, diagram przepływu informacji

Wybór odpowiedzi związanej z "Szkicem strony, diagramem witryny, diagramem przepływu informacji" wskazuje na pewne nieporozumienie dotyczące definicji interfejsu użytkownika. Szkice i diagramy są narzędziami służącymi do planowania i wizualizacji struktury i funkcji strony internetowej, ale same w sobie nie definiują, co stanowi interfejs użytkownika. Te pojęcia dotyczą bardziej fazy projektowania i architektury informacji, co jest istotne, ale nie odnosi się do interakcji z użytkownikiem. Podobnie, odpowiedzi związane z "wysyłaniem kwerend do bazy" oraz "skryptami PHP" również nie definiują interfejsu użytkownika. Te elementy dotyczą backendu, czyli serwera i logiki aplikacji, które są oddzielone od bezpośredniego doświadczenia użytkownika. Często pojawia się mylne założenie, że wszystkie aspekty technologii webowej są ze sobą powiązane, jednak istotne jest rozróżnienie pomiędzy frontendem a backendem. Właściwe zrozumienie tych ról jest kluczowe dla efektywnego projektowania stron internetowych, gdzie interfejs użytkownika odgrywa fundamentalną rolę w osiąganiu zamierzonych celów użytkownika i organizacji. Właściwa separacja tych koncepcji jest istotna dla efektywności procesu projektowania i tworzenia stron internetowych.

Pytanie 26

Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px.

input[type=submit] {
  background-color: #000000;
  border: none;
  padding: 5px;
}                         A.

input[type=submit] {
  background-color: #ffffff;
  border: none;
  padding: 5px;
}                         B.

input=submit {
  background-color: #000000;
  border: none;
  margin: 5px;
}                         C.

input=submit {
  background-color: #000000;
  border: 0px;
  margin: 5px;
}                         D.

A. A.

B. C.

C. D.

D. B.

Dobrze! Wybrałeś prawidłową odpowiedź. Odpowiedź A jest poprawna, ponieważ to styl CSS dla przycisku typu submit spełnia wszystkie podane wymagania. Wygląda to mniej więcej tak: 'input[type='submit'] { background-color: black; border: none; padding: 5px; }'. 'input[type='submit']' to selektor, który wskazuje elementy wejściowe o typie 'submit'. Następnie, wewnątrz nawiasów klamrowych, mamy trzy deklaracje. 'background-color: black;' określa, że przycisk ma czarne tło. 'border: none;' usuwa wszelkie obramowanie. 'padding: 5px;' ustawia marginesy wewnętrzne na 5 pikseli. Pisanie czystego i efektywnego kodu CSS jest kluczową umiejętnością dla każdego doświadczonego dewelopera front-endu. Dobrze napisane style CSS mogą znacznie poprawić wydajność strony internetowej i ułatwić jej utrzymanie.

Pytanie 27

W CSS zapis selektora p > i { color: red;} wskazuje, że kolorem czerwonym zostanie zdefiniowany

A. wszelki tekst w znaczniku <p> lub wszelki tekst w znaczniku <i>

B. wszelki tekst w znaczniku <p>, z wyjątkiem tych w znaczniku <i>

C. tylko ten tekst w znaczniku <p>, który posiada klasę o nazwie i

D. tylko ten tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

Kiedy analizujemy alternatywne odpowiedzi na to pytanie, zauważamy, że pojawiają się w nich fundamentalne nieporozumienia dotyczące selektorów CSS i ich działania. Na przykład, stwierdzenie, że każdy tekst w znaczniku <p> lub każdy tekst w znaczniku <i> zostanie sformatowany, jest błędne, ponieważ nie uwzględnia hierarchii i zależności między tymi znacznikami. CSS działa na zasadzie kaskadowości i dziedziczenia, co oznacza, że style są stosowane w kontekście struktury dokumentu HTML. W tym przypadku, ponieważ operator > wskazuje na bezpośrednie powiązania, tekst w znaczniku <i>, który nie znajduje się bezpośrednio w <p>, nie będzie stylizowany na czerwono. Z kolei stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> zostanie sformatowany, jest także mylące, jako że stylizacja dotyczy wyłącznie elementów <i>, a nie całego znacznika <p>. Takie podejście może prowadzić do chaosu w stylizacji, gdyż nie uwzględnia, jak selektory mogą wpływać na stylizację w kontekście ich hierarchii. Również stwierdzenie, że styl dotyczy tylko tekstu w <p> z klasą o nazwie i, ignoruje fakt, że selektor w ogóle nie odnosi się do klas, tylko bezpośrednich relacji między znacznikami. Zrozumienie struktury DOM i zastosowania selektorów jest kluczowe dla efektywnej pracy z CSS, a błędne interpretacje mogą prowadzić do niepożądanych rezultatów w projekcie.

Pytanie 28

Który z poniższych języków jest używany do stylizacji stron WWW?

A. HTML

B. SQL

C. CSS

D. Python

CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu dokumentu HTML. Dzięki niemu możemy określić, jak mają wyglądać elementy na stronie, takie jak kolory, czcionki, odstępy między elementami, a także układ całej strony. CSS jest nieodłącznym elementem nowoczesnego tworzenia stron internetowych, ponieważ pozwala na oddzielenie treści od formy, co jest jedną z zasad dobrych praktyk w web development. Umożliwia tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od komputerów po smartfony. Stylowanie za pomocą CSS pozwala na zdefiniowanie stylów globalnych, które mogą być zastosowane do wielu elementów na stronie, co znacznie ułatwia zarządzanie wyglądem witryny. Praktycznym zastosowaniem CSS jest na przykład zmiana koloru tekstu na stronie za pomocą prostej reguły, czy też tworzenie zaawansowanych animacji, które zwiększają interaktywność stron. CSS jest kluczowy w procesie tworzenia estetycznych i funkcjonalnych stron internetowych, co czyni go niezbędnym narzędziem dla każdego web developera.

Pytanie 29

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym tekst jest maskowany (zastąpiony kropeczkami), należy zastosować znacznik

A. <input type="password" />

B. <form="password" type="password" />

C. <form input type="password" />

D. <input name="password" />

Pierwsza z niepoprawnych odpowiedzi wskazuje na <input name='password' />. Choć znaczniki <input> mogą zawierać atrybut name, to brak ustawienia type na 'password' sprawia, że wprowadzone hasło będzie widoczne w formie tekstu jawnego, co stwarza poważne ryzyko bezpieczeństwa. Użytkownik nie będzie miał możliwości ochrony swojego hasła przed wzrokiem osób postronnych. Kolejna propozycja, <form input type='password' />, jest również błędna. Znacznik <form> jest używany do grupowania kontrolków formularzy, ale nie może zawierać atrybutu input w ten sposób. Odpowiednia składnia wymaga, aby znacznik <input> był zagnieżdżony wewnątrz znacznika <form>, co czyni tę odpowiedź niepoprawną w kontekście składni HTML. Ostatnia odpowiedź <form='password' type='password' /> narusza zasady poprawnego stosowania znaczników form oraz input. <form> nie może mieć atrybutu 'input'; zamiast tego powinien zawierać kontrolki formularza, takie jak <input>, wewnątrz swojego otwarcia. Użycie atrybutu 'type' w tej notacji jest także niewłaściwe, ponieważ powinno być stosowane wyłącznie w kontekście elementu <input>. Wszystkie te przykłady ukazują istotność poprawnej struktury kodu HTML oraz znaczenia bezpieczeństwa danych użytkowników.

Pytanie 30

W kodzie HTML znajdziemy formularz. Jaki rezultat zostanie pokazany przez przeglądarkę, jeśli użytkownik wprowadził do pierwszego pola wartość "Przykładowy text"?

A. Efekt 2

B. Efekt 3

C. Efekt 4

D. Efekt 1

Efekt 2 jest prawidłowy, ponieważ odpowiada dokładnemu odwzorowaniu HTML. Kod zawiera element <textarea> oraz dwa pola typu checkbox. Przeglądarka wyświetla pole tekstowe o określonym rozmiarze, gdzie użytkownik może wpisać tekst. Checkboxy pozwalają na wybór opcji, niezależnych od siebie, co odróżnia je od radiobuttonów. Przykładowy text wpisany w pole <textarea> zostanie wyświetlony w miejscu tego pola, co jest dobrze widoczne na obrazie odpowiadającym efektowi 2. Warto pamiętać, że <textarea> stosuje się do dłuższych form tekstu, co jest standardem w projektowaniu formularzy. Użycie checkboxów jest zgodne z dobrymi praktykami, gdy użytkownik może zaznaczyć dowolną liczbę opcji. Jest to ważne, aby dostarczyć użytkownikowi intuicyjny interfejs do wprowadzania i wyboru danych. W HTML ważne jest, aby kod był semantyczny i zgodny z oczekiwaniami użytkowników, co ten przykład dobrze ilustruje. Formularze powinny być zawsze testowane pod kątem użyteczności i poprawności w różnych przeglądarkach.

Pytanie 31

Jakie kodowanie w języku HTML pozwala na sformatowanie paragrafu dla tekstu

 Tekst może być zaznaczony albo istotny dla autora

należy użyć polecenia?

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 <i>istotny</i> 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 <em>istotny</em> dla autora</mark></p>

Wybrana odpowiedź jest poprawna, ponieważ stosuje prawidłowe znaczniki HTML do formatowania tekstu. Użycie <mark> dla słowa 'zaznaczony' wskazuje, że jest to istotna informacja, podczas gdy <em> dla słowa 'istotny' podkreśla jego znaczenie w kontekście treści. Zgodnie z W3C i HTML5, <mark> jest używany do oznaczania części tekstu, która jest wyróżniona w kontekście przeszukiwanym lub istotnym. Oznaczenie tekstu jako <em> nie tylko wskazuje na akcent, ale również ma znaczenie semantyczne, ponieważ może wpłynąć na sposób, w jaki czytniki ekranu interpretują treść, co jest kluczowe dla dostępności. Przykładem zastosowania może być strona internetowa, na której chcemy wyróżnić ważne informacje lub kluczowe definicje, co zwiększa czytelność i funkcjonalność przekazu. Poprawne użycie znaczników HTML jest zgodne z dobrymi praktykami tworzenia stron internetowych, co sprzyja lepszej nawigacji i zrozumieniu tekstu przez użytkowników.

Pytanie 32

Walidacja strony internetowej polega na

A. udostępnianiu w Internecie

B. reklamie strony

C. zestawie działań mających na celu podniesienie liczby odwiedzin

D. sprawdzeniu jej w celu usunięcia błędów

Proces walidacji strony internetowej to kluczowy etap w cyklu życia witryny, który ma na celu identyfikację i eliminację błędów technicznych oraz zgodność z określonymi standardami. Walidacja obejmuje sprawdzenie struktury HTML, CSS oraz JavaScript, co pozwala na upewnienie się, że strona działa poprawnie na różnych przeglądarkach i urządzeniach. Techniki walidacji mogą obejmować użycie narzędzi online, takich jak W3C Validator, który ocenia zgodność kodu z aktualnymi standardami W3C. Przykładowo, błędy w składni HTML mogą prowadzić do niepoprawnego renderowania strony, co negatywnie wpływa na doświadczenia użytkowników. Dodatkowo, walidacja może obejmować testy funkcjonalności oraz bezpieczeństwa, co jest szczególnie istotne w kontekście przetwarzania danych osobowych. Niezależnie od celu witryny - czy to e-commerce, blog, czy portal informacyjny - regularna walidacja pozwala na ich optymalizację oraz zwiększenie efektywności SEO. Przestrzeganie standardów nie tylko poprawia jakość strony, ale także może wpływać na jej pozycjonowanie w wynikach wyszukiwania.

Pytanie 33

Znacznik <pre> </pre> służy do prezentacji

A. treści czcionką o stałej szerokości

B. znaku przekreślenia

C. treści polską czcionką

D. znaku wielokropka

Interpretacja znacznika <pre> jako narzędzia do wyświetlania znaku przekreślenia lub wielokropka jest błędna, ponieważ te elementy nie mają związku z funkcją, jaką pełni <pre>. W kontekście HTML, znacznik <pre> nie jest zaprojektowany do formatowania treści na podstawie stylów czcionek, takich jak 'polska czcionka', ale skupia się na zachowaniu oryginalnego formatowania tekstu. Próba zrozumienia <pre> w kontekście czcionek wyłącznie ze względu na ich wygląd prowadzi do pomyłek, ponieważ nie dotyczy to głównego celu tego znacznika. Ponadto, używanie <pre> dla treści, które nie wymagają stałej szerokości czcionki, może prowadzić do złożonych problemów w responsywności układu strony oraz trudności w dostosowaniu treści do różnych urządzeń. Znaki przekreślenia i wielokropka są raczej reprezentowane przez inne znaczniki HTML, takie jak <s> lub <span>, które są bardziej odpowiednie do stylizacji tekstu. Właściwe zrozumienie roli każdego znacznika HTML jest kluczowe dla skutecznego projektowania stron internetowych i aplikacji, co podkreśla znaczenie edukacji w zakresie web developmentu.

Pytanie 34

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby wprowadzić w treści kilka słów o zróżnicowanym stylu, należy użyć znacznika

A. <hr>

B. <span>

C. <section>

D. <table>

Wybór znaczników <section>, <table> i <hr> jako sposobów na wtrącenie fragmentów tekstu stylizowanych różnie od reszty treści jest niewłaściwy z technicznego punktu widzenia. Znacznik <section> jest przeznaczony do tworzenia sekcji dokumentu, co oznacza, że ma on znaczenie semantyczne i jest używany do grupowania treści, które dotyczą tego samego tematu. Użycie go do stylizacji pojedynczych słów może prowadzić do nieczytelności struktury dokumentu oraz negatywnie wpływać na dostępność treści. Z kolei znacznik <table> służy do tworzenia tabel, które organizują dane w wierszach i kolumnach, a więc jego zastosowanie w kontekście formatowania tekstu byłoby zarówno nieefektywne, jak i niezgodne z przeznaczeniem. Stosowanie <hr> natomiast, które definiuje poziomą linię, nie ma sensu w kontekście zmiany stylu tekstu, ponieważ jego funkcją jest oddzielanie sekcji treści, a nie stylizowanie tekstu. Wybierając nieodpowiednie znaczniki, możemy naruszyć zasady semantyki HTML, co prowadzi do problemów z dostępnością i SEO, a także do trudności w dalszej edycji oraz utrzymaniu kodu. Prawidłowe użycie znaczników jest kluczowym elementem dobrych praktyk w tworzeniu stron internetowych i wpływa na ich czytelność oraz zrozumienie przez różne urządzenia i technologie.

Pytanie 35

Wskaż poprawne stwierdzenie dotyczące przedstawionego kodu HTML.
<video width="640" height="480" controls>
<source src="animacja.mp4" type="video/mp4">
</video>

A. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.

B. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.

C. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.

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

Pierwsze stwierdzenie sugeruje, że plik animacja.mp4 musi mieć dokładnie rozdzielczość 640x480 pikseli, co jest nieprawdziwe. Format <video> w HTML umożliwia odtwarzanie filmów w różnych rozdzielczościach, a przeglądarka automatycznie dostosuje odtwarzanie w zależności od dostępnych zasobów i jakości pliku wideo. Drugie stwierdzenie, że użytkownik nie będzie miał możliwości sterowania odtwarzaniem, jest sprzeczne z definicją atrybutu 'controls', który dodaje elementy sterujące do odtwarzacza, takie jak play, pause i seek. Trzecie stwierdzenie odnosi się do lokalizacji pliku, podczas gdy w rzeczywistości plik animacja.mp4 może być lokalizowany w różnych folderach, a nie tylko w ścisłej ścieżce bezwzględnej. HTML5 wprowadza wiele standardów i uproszczeń, a deweloperzy są zobowiązani do przestrzegania tych standardów, aby zapewnić, że ich treści będą dostępne na różnych platformach. Typowe błędy myślowe prowadzące do takich wniosków obejmują nieznajomość zasad działania znaczników HTML oraz niepełne zrozumienie mechanizmów, jakie przeglądarki stosują w kontekście odtwarzania multimediów.

Pytanie 36

Jaką maksymalną liczbę znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, która nie zawiera złączeń między komórkami oraz wiersza nagłówkowego?

A. 6

B. 12

C. 9

D. 3

Odpowiedź 9 jest poprawna, ponieważ w tabeli składającej się z trzech kolumn i trzech wierszy, każdy wiersz może zawierać trzy komórki danych. Zatem, aby obliczyć maksymalną liczbę znaczników <td>, należy pomnożyć liczbę kolumn przez liczbę wierszy: 3 kolumny x 3 wiersze = 9 znaczników <td>. Ważne jest, aby pamiętać, że w kontekście HTML, znacznik <td> służy do definiowania komórek tabeli i jest używany tylko do umieszczania danych w tabeli. Przy projektowaniu tabel w HTML, dobrym rozwiązaniem jest stosowanie przejrzystej struktury oraz odpowiednich znaczników, aby poprawić czytelność i dostępność stron. Zgodnie z dobrymi praktykami, zawsze warto używać znaczników <th> do nagłówków kolumn, ale w tym przypadku, zgodnie z treścią pytania, zakładamy, że nie stosujemy wiersza nagłówkowego. W efekcie maksymalna liczba komórek, które można wykorzystać w takiej tabeli, wynosi 9. Przykładem zastosowania takiej tabeli może być wyświetlanie danych o produktach, gdzie każda komórka zawierać może różne informacje, takie jak nazwa produktu, cena i ilość.

Pytanie 37

W kodzie CSS użyto stylizacji dla elementu listy, a żadne inne reguły CSS nie zostały ustalone. To zastosowane formatowanie spowoduje, że

A. po najechaniu myszką na element listy, kolor tekstu zmieni się na Maroon

B. kolor Maroon obejmie co drugi element listy

C. tekst wszystkich elementów, którym nadano id „hover”, będzie w kolorze Maroon

D. tekst wszystkich elementów listy będzie miał kolor Maroon

Odpowiedź jest poprawna, ponieważ selektor CSS li:hover odnosi się do elementów listy, które zmieniają swój styl po najechaniu kursorem. W tym przypadku zmiana dotyczy koloru tekstu, który stanie się maroon. Selektor :hover jest pseudoklasą w CSS, która odpowiada za zmiany stylu elementu, gdy użytkownik umieści nad nim kursor. Jest to powszechnie stosowana technika w projektowaniu interaktywnych i przyjaznych dla użytkownika stron internetowych, umożliwiająca na przykład wizualne podkreślenie linków lub elementów menu. Dzięki zastosowaniu takiego selektora, projektanci mogą tworzyć dynamiczne efekty, które reagują na działania użytkownika, co zwiększa atrakcyjność wizualną i funkcjonalność strony. Dobre praktyki zalecają używanie pseudoklas jak :hover do poprawy interakcji użytkownika z interfejsem, a także do zapewnienia spójności z innymi elementami strony, które mogą również reagować na najechanie kursorem. Warto także pamiętać o dostępności, zapewniając alternatywne sposoby na interakcję z elementami, np. dla urządzeń dotykowych.

Pytanie 38

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

A. 4

B. 1

C. 2

D. 5

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

Pytanie 39

Jaki styl CSS umożliwia ustawienie wyrównania tekstu do prawej strony?

A. <p style="align: right"> tekst </p>

B. <p style="font: right"> tekst </p>

C. <p style="text-align: right"> tekst </p>

D. <p style="positon: right"> tekst </p>

Odpowiedź <p style="text-align: right"> tekst </p> jest poprawna, ponieważ właściwość CSS 'text-align' jest standardowym sposobem definiowania wyrównania tekstu w elemencie blokowym, takim jak <p>. Używając 'text-align: right', tekst wewnątrz elementu <p> zostanie wyrównany do prawej strony, co jest szczególnie przydatne w przypadku projektów webowych, gdzie estetyka i układ treści mają kluczowe znaczenie. Dzięki CSS można z łatwością zmieniać wyrównanie tekstu w zależności od wymagań projektu, co pozwala na elastyczne dostosowywanie stylów do różnych urządzeń i rozmiarów ekranów. Warto również wspomnieć, że stosowanie CSS do stylizacji dokumentów HTML jest zgodne z zasadami kaskadowych arkuszy stylów, co zapewnia separację treści od prezentacji i ułatwia zarządzanie stylami w większych projektach. Dobrą praktyką jest stosowanie zewnętrznych lub wewnętrznych arkuszy stylów zamiast inline stylingu, co zwiększa czytelność kodu i ułatwia jego utrzymanie.

Pytanie 40

W jaki sposób można określić w CSS styl dla hiperłącza, aby link, który nie był odwiedzony, miał kolor żółty, natomiast odwiedzony link był w kolorze zielonym?

A. a:visited { color: yellow; } a:link { color: green; }

B. a:hover { color: yellow; } a:visited { color: green; }

C. a:link { color: yellow; } a:visited { color: green; }

D. a:hover { color: green; } a.link { color: yellow; }

Właściwa odpowiedź definiuje style CSS dla hiperłączy w sposób zgodny z ich rolą i statusami. Selektor `a:link` odpowiada za stylizację nieodwiedzonych linków, a w tym przypadku ustawia kolor tekstu na żółty. Z kolei selektor `a:visited` odnosi się do linków, które użytkownik już odwiedził, i ustawia ich kolor na zielony. Taka separacja stylizacji pozwala na intuicyjne rozróżnienie między linkami, co jest korzystne z punktu widzenia użyteczności i dostępności. Praktyczne zastosowanie tych selektorów pozwala na łatwe dostosowanie wyglądu strony internetowej w zależności od stanu hiperłączy, co może być przydatne w nawigacji. Zgodnie z dobrymi praktykami, zawsze warto testować wygląd strony w różnych przeglądarkach, ponieważ niektóre z nich mogą interpretować style CSS nieco inaczej. Dodatkowo, warto pamiętać o dostępności - kontrastujące kolory mogą znacznie poprawić czytelność i ułatwić nawigację osobom z wadami wzroku.

Rozpocznij nowy egzamin

Powrót do strony głównej