Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 13 sierpnia 2026 21:53
Data zakończenia: 13 sierpnia 2026 22:07

Egzamin niezdany

Wynik: 7/40 punktów (17,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

Jaką informację przekazuje przeglądarce internetowej zapis <!DOCTYPE html> ?

A. W dokumencie wszystkie tagi są zapisane wielkimi literami

B. W dokumencie wymagane jest zamknięcie każdego taga, nawet samozamykającego

C. Dokument został zapisany w wersji HTML 5

D. Dokument został zapisany w wersji HTML 4

Wszystkie niepoprawne odpowiedzi opierają się na nieprawidłowych założeniach dotyczących definicji i funkcji deklaracji typu dokumentu (DOCTYPE). Odpowiedź sugerująca, że dokument został zapisany w HTML 4, ignoruje fakt, że HTML 5 jest wersją, która wprowadza wiele istotnych zmian oraz nowych elementów w porównaniu do starszych wersji. HTML 4 był szeroko stosowany, ale obecnie jest przestarzały, a jego zastosowanie nie jest zgodne z nowoczesnymi praktykami. Kolejna odpowiedź, która stwierdza, że wszystkie znaczniki w dokumencie muszą być zapisane wielkimi literami, jest błędna, ponieważ HTML jest językiem, który nie jest wrażliwy na wielkość liter. Znaczniki mogą być zapisywane zarówno małymi, jak i wielkimi literami, co jest zgodne z zasadami dobrych praktyk, które zalecają stosowanie małych liter dla większej czytelności. Wreszcie, stwierdzenie, że każdy znacznik musi być zamykany, jest również mylne, ponieważ HTML 5 wprowadza elementy samozamykające, takie jak czy <img>, które nie wymagają zamknięcia. Zrozumienie tych różnic jest kluczowe dla efektywnego posługiwania się HTML i tworzenia poprawnych dokumentów webowych.

Pytanie 2

Jaką funkcję pełni atrybut name w polu formularza, np. <input type="text" name="login">?

A. ogranicza maksymalną długość pola

B. ustawia pole jako tylko do odczytu

C. określa nazwę pola, pod którą dane trafiają na serwer

D. określa wartość domyślną pola

Atrybut name nadaje polu formularza nazwę, pod którą jego wartość jest przesyłana na serwer. To po niej skrypt odbierający (np. w PHP przez $_POST["login"]) rozpoznaje konkretne pole. Bez name wartość pola zwykle nie zostanie wysłana. Dlatego name określa nazwę pola w formularzu.

Pytanie 3

Atrybut wskazujący na lokalizację pliku graficznego w znaczniku <img> to

A. link

B. src

C. href

D. alt

Atrybut 'src' (source) jest kluczowym elementem znacznika <img>, ponieważ wskazuje lokalizację pliku graficznego, który ma być wyświetlony na stronie internetowej. Użycie tego atrybutu jest niezbędne, aby przeglądarka mogła zlokalizować i załadować odpowiedni obraz. Na przykład, jeśli chcesz wyświetlić grafikę logo na stronie, możesz użyć znacznika <img src='logo.png'>, gdzie 'logo.png' jest ścieżką do pliku graficznego. Ważne jest, aby pamiętać o dokładnym podaniu ścieżki, która może być względna lub absolutna. Zgodnie z najlepszymi praktykami, ważne jest również użycie atrybutu 'alt', który opisuje obraz dla osób z problemami wzrokowymi oraz w przypadku, gdy obraz nie może być załadowany. Przestrzeganie standardów W3C w zakresie HTML zapewnia lepszą dostępność i użyteczność stron internetowych.

Pytanie 4

Który z akapitów został zapisany w wskazanym stylu, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 3

B. Efekt 2

C. Efekt 4

D. Efekt 1

Odpowiedź Efekt 3 jest poprawna, ponieważ odzwierciedla wszystkie zadane style CSS. Styl zawiera padding 20px co oznacza, że wewnętrzna przestrzeń wokół tekstu w paragrafie powinna wynosić 20 pikseli. Daje to efekt przestrzeni pomiędzy tekstem a obramowaniem. Kolor tekstu został ustawiony na niebieski co powoduje, że sam tekst przyjmuje niebieską barwę. Parametr font-weight jest ustawiony na 900 co oznacza, że tekst powinien być bardzo pogrubiony. Obecnie jest to maksymalna wartość dla własności font-weight w standardzie CSS która powoduje, że tekst wygląda na bardzo wyrazisty i wyróżnia się na tle innych elementów. Dodatkowo border ustawiono na 1px solid co oznacza, że paragraf powinien mieć jednolitą linię o grubości jednego piksela otaczającą jego obszar. Wszystkie te style są poprawnie zastosowane w Efekcie 3 gdzie tekst jest niebieski bardzo pogrubiony z przestrzenią 20 pikseli do obramowania oraz otoczony cienką linią. Taki styl jest często wykorzystywany w projektach stron internetowych dla wyraźnego wyróżnienia ważnych sekcji co zgodne jest z dobrymi praktykami projektowania interfejsów użytkownika.

Pytanie 5

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

Styl 1.
img {
  width: 100px;
  border-radius: 10%;
}

Styl 2.
img {
  width: 100px;
  border-radius: 50px;
}

Styl 3.
img {
  width: 100px;
  border: 50% green;
}

Styl 4.
img {
  width: 100px;
  shape: circle;
}

A. Styl 3.

B. Styl 4.

C. Styl 2.

D. Styl 1.

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

Pytanie 6

W języku HTML zapis < spowoduje w przeglądarki wyświetlenie znaku

A. &

B. <

C. "

D. >

Znak < w HTML ma specjalne znaczenie, ponieważ jest używany do oznaczania początku znaczników, które są fundamentem struktury dokumentów HTML. Aby prawidłowo wyświetlić ten znak w przeglądarce, należy użyć encji HTML, która dla znaku mniejszości to <. Użycie encji pozwala na uniknięcie nieporozumień, ponieważ przeglądarka mogłaby zinterpretować znak < jako początek nowego znacznika. Przykładowo, aby wyświetlić tekst 'A < B' w HTML, kod powinien wyglądać następująco: A < B. Zgodnie z dokumentacją W3C, stosowanie encji jest kluczowe dla zachowania poprawności kodu. Dzięki temu użytkownicy mogą zobaczyć zamierzony tekst, zamiast nieprawidłowo interpretowanego oznaczenia. Warto również zauważyć, że istnieją inne encje, takie jak > dla znaku większości oraz & dla znaku ampersand, które również pełnią istotne funkcje w kontekście HTML. Poprawne użycie encji przyczynia się do lepszej dostępności i zobrazowania treści na stronach internetowych."

Pytanie 7

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

A. autora

B. typu dokumentu

C. automatycznego odświeżania

D. kodowania

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 8

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. opisu witryny

B. kodowania znaków

C. języka używanego na stronie

D. słów kluczowych

Element <meta charset="utf-8"> jest kluczowym składnikiem metadanych w dokumentach HTML, który określa sposób kodowania znaków używanych na stronie internetowej. Użycie kodowania UTF-8, które jest najczęściej stosowanym standardem, pozwala na wyświetlanie różnorodnych znaków z różnych języków, w tym znaków diakrytycznych. Dzięki temu, strony internetowe mogą być dostępne dla szerokiego grona użytkowników bez obaw o błędy związane z wyświetlaniem tekstu. Kiedy przeglądarka internetowa napotyka ten element, wie, że powinna interpretować zawartość dokumentu zgodnie z określonym kodowaniem. Jest to szczególnie ważne w kontekście globalizacji internetu, gdzie treści mogą być tworzone w wielu językach. Ustalając odpowiednie kodowanie, programiści minimalizują ryzyko wystąpienia problemów z wyświetlaniem, takich jak zamienione znaki czy nieczytelne fragmenty tekstu. Właściwe ustawienie metadanych jest zgodne z wytycznymi W3C oraz zaleceniami dla twórców stron internetowych, co czyni ten element niezbędnym w każdej współczesnej witrynie.

Pytanie 9

W HTML atrybut alt w tagu img służy do określenia

A. lokalizacji i nazwy pliku źródłowego obrazu

B. tekstu, który pojawi się, gdy obrazek nie może być załadowany

C. napisu, który będzie widoczny pod obrazem

D. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie

Odpowiedź, która wskazuje, że atrybut alt znacznika img w języku HTML definiuje tekst, który będzie wyświetlony, jeśli grafika nie może być poprawnie załadowana, jest całkowicie poprawna. Atrybut alt jest kluczowym elementem dostępności w sieci, ponieważ dostarcza użytkownikom alternatywne informacje o zawartości obrazu, co jest szczególnie ważne dla osób korzystających z czytników ekranu. Na przykład, jeśli zdjęcie w artykule nie jest dostępne z powodu problemów z łączem internetowym, atrybut alt zapewnia kontekst, dzięki czemu użytkownik jest informowany o tym, co miało być przedstawione. Dobre praktyki zalecają, aby tekst w atrybucie alt był zwięzły, ale jednocześnie dostarczał wystarczających informacji o obrazie. Warto również zauważyć, że stosowanie atrybutu alt wspiera SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki mogą używać tych informacji do indeksowania treści. Przykład: <img src='example.jpg' alt='Zdjęcie pięknego krajobrazu górskiego'>.

Pytanie 10

Aby w jezyku CSS ustawic czerwony kolor dla tekstu, mozna uzyc stylu:

text-color: rgb(#FF0000);

text-color: rgb(255,0,0);

color: rgb(#FF0000);

color: rgb(255,0,0);

Latwo tu wpasc w dwie rozne pulapki. Pierwsza dotyczy nazwy wlasciwosci: text-color brzmi sensownie, ale taka wlasciwosc w CSS nie istnieje, wiec przegladarka po prostu zignoruje cala deklaracje i kolor tekstu sie nie zmieni. Barwe znakow ustawia wlasciwosc color. Druga pulapka to mieszanie zapisow koloru: rgb(#FF0000) laczy funkcje rgb() z zapisem szesnastkowym. Znak # rozpoczyna kolor w formacie hex (np. #FF0000), ktory podaje sie samodzielnie, bez rgb(). Funkcja rgb() oczekuje natomiast trzech liczb dziesietnych 0-255 oddzielonych przecinkami. Poprawnie laczy obie rzeczy tylko color: rgb(255,0,0); - wlasciwa wlasciwosc i prawidlowo zapisana funkcja rgb, gdzie 255 to pelna czerwien, a oba zera to brak zieleni i blekitu.

Pytanie 11

W przedstawionym stylu CSS w ramce zdefiniowano klasę uzytkownik. Tekst na stronie będzie wyświetlany czcionką w kolorze niebieskim dla

p.uzytkownik { color: blue; }

A. wszystkich akapitów

B. dowolnych znaczników w sekcji <body>, które mają przypisaną klasę uzytkownik

C. akapitów, którym przypisano klasę uzytkownik

D. wyłącznie znaczników tekstowych takich jak , <h1>

Zrozumienie, dlaczego niektóre odpowiedzi są niepoprawne, wymaga wiedzy o podstawach stylowania CSS. Odpowiedzi błędne mogą wynikać z nieprawidłowego rozumienia, jak działają selektory w CSS. CSS pozwala na precyzyjne określenie, które elementy HTML będą podlegały określonemu stylowi, dzięki użyciu selektorów. W przedstawionym przykładzie p.uzytkownik jest selektorem specyficznym, który oznacza wszystkie elementy (paragrafy) z klasą uzytkownik. Selekcje te nie dotyczą wszystkich paragrafów, a jedynie tych z określoną klasą. Błędne przekonanie, że styl dotyczy wszystkich paragrafów, wynika z pominięcia faktu, że klasa jest specyfikatorem. Podobnie, twierdzenie, że dowolne znaczniki w sekcji <body> z klasą uzytkownik zostaną sformatowane, ignoruje fakt, że selektor dotyczy konkretnie paragrafów. Kluczową kwestią jest rozróżnienie między selektorami tagów, klas, ID i ich kombinacjami. Właściwe zrozumienie tych zasad pozwala na efektywne i precyzyjne stosowanie reguł CSS, co jest fundamentem tworzenia spójnych i estetycznych interfejsów użytkownika.

Pytanie 12

Którego selektora użyć, aby sformatować WSZYSTKIE obrazy znajdujące się w akapicie?

p img

p.img

p # img

p + img

Pozostałe zapisy znaczą co innego. p + img to selektor SĄSIADA - obraz stojący zaraz PO akapicie, nie w nim. p.img celuje w akapit z klasą „img”, a nie w obrazy. p # img jest składniowo błędny. Obrazy wewnątrz akapitu obejmuje p img.

Pytanie 13

Który z poniższych znaczników HTML jest używany do tworzenia struktury strony internetowej?

A.

B. <input>

C. <aside>

D.

Znacznik <aside> jest poprawnym rozwiązaniem, ponieważ jest używany do definiowania treści, która jest powiązana z otaczającym kontekstem, ale nie jest kluczowa dla głównego przebiegu informacji. Z perspektywy budowy struktury strony internetowej, <aside> doskonale wpisuje się w koncepcję bocznych paneli, przypisów, lub dodatkowych informacji, które wzbogacają główną treść. Przykładem zastosowania może być umieszczenie sekcji z cytatami, powiązanymi artykułami lub innymi treściami uzupełniającymi. Zgodnie z zasadami semantyki HTML5, <aside> pozwala na lepszą interpretację treści przez przeglądarki oraz narzędzia do analizy SEO, co przyczynia się do poprawy dostępności i użyteczności strony. W praktyce, korzystanie z semantycznych znaczników, takich jak <aside>, wspiera także tworzenie bardziej czytelnych i strukturalnych dokumentów, co jest zgodne z najlepszymi praktykami w tworzeniu stron internetowych.

Pytanie 14

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

A. sąsiednim

B. trójkątnym

C. dopełniającym

D. monochromatycznym

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

Pytanie 15

Aby umieścić kod JavaScript bezpośrednio w dokumencie HTML, należy użyć znacznika:

<js>

<script>

<code>

<style>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod JavaScript osadza się w dokumencie wewnątrz znacznika <code><script></code>. Wszystko między <code><script></code> a <code></script></code> przeglądarka traktuje jako kod do wykonania. Tym samym znacznikiem (z atrybutem <code>src</code>) dołącza się też skrypty zewnętrzne. Dlatego do umieszczenia JS w stronie służy <code><script></code>.

Pytanie 16

Jak wygląda prawidłowy zapis samozamykającego się znacznika w zgodzie ze standardem języka XHTML, który odpowiada za łamanie linii?

A.

B.

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowym zapisem samozamykającego się znacznika w standardzie XHTML. XHTML, czyli eXtensible HyperText Markup Language, wymaga, aby znaczniki były poprawnie zamknięte. W przypadku znaczników, które nie mają zawartości, jak , stosuje się specjalną składnię. Oznaczenie wskazuje na przełamanie linii w dokumencie HTML. Ważne jest, aby podać ukośnik przed zakończeniem znacznika, co jest zgodne z zasadami XHTML. Przykładowo, w dokumentach XHTML, prawidłowe użycie może wyglądać tak: Tekst przed łamaniem linii. Tekst po łamaniu linii.. Przestrzeganie tych zasad zapewnia, że dokumenty będą poprawnie interpretowane przez przeglądarki oraz będą zgodne z standardami W3C, co jest kluczowe dla zachowania wysokiej jakości kodu oraz jego dostępności.

Pytanie 17

Grafik chce zamienić obraz JPG na PNG tak, by białe miejsca stały się przezroczyste. Co powinien zrobić?

A. dodać kanał alfa

B. zamienić obraz na odcienie szarości

C. obniżyć rozdzielczość obrazu

D. zaimportować obraz do edytora wektorowego

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby białe miejsca stały się przezroczyste po zapisie do PNG, trzeba dodać KANAŁ ALFA - czyli warstwę przezroczystości, w której piksele można uczynić niewidocznymi. Dlatego należy dodać kanał alfa.

Pytanie 18

Dostosowanie wyglądu witryny do indywidualnych preferencji użytkownika oraz jego identyfikacja w systemie są możliwe dzięki mechanizmowi

A. cookie

B. łączenia z bazą

C. formularzy

D. obiektów DOM

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź dotycząca cookies jest dobra. To ważny element, bo dzięki nim można lepiej dopasować serwis do użytkowników. Cookies to takie małe pliki, które przeglądarka zapisuje na naszym urządzeniu. Pozwalają na zbieranie różnych informacji, jak na przykład co użytkownik lubi, co robi na stronie czy jego dane do logowania. Dzięki temu, gdy wracasz na stronę, serwis może sam dostosować, co widzisz, do tego, co robiłeś wcześniej. Przykłady to zapamiętywanie języka, zawartości koszyka w sklepach online czy automatyczne logowanie. Ważne jest, żeby serwisy informowały użytkowników o cookies i prosiły o zgodę, zwłaszcza w kontekście RODO. Znanie tych zasad jest istotne, jeśli myślisz o pracy w tworzeniu aplikacji webowych, bo to pomaga w lepszym zrozumieniu potrzeb użytkowników.

Pytanie 19

W zaprezentowanym fragmencie kodu HTML zdefiniowano pole input, które można opisać jako

<input type="password" name="pole">

A. ukrywa znaki, które zostały do niego wprowadzone

B. pokazuje znaki, które zostały do niego wprowadzone

C. dopuszcza jedynie wprowadzanie wartości liczbowych

D. zawiera domyślny tekst „pole”

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pole input z atrybutem type="password" służy do wprowadzania danych, które powinny być ukryte przed wglądem osób trzecich, takich jak hasła. Wprowadzone znaki są zastępowane na ekranie innymi symbolami, najczęściej kropkami lub gwiazdkami, co zabezpiecza przed odczytem hasła przez osoby patrzące na ekran. Ten mechanizm jest standardem w aplikacjach webowych, dbającym o bezpieczeństwo użytkowników. W praktyce, pola typu password są używane w formularzach logowania oraz rejestracji, gdzie ochrona danych osobowych i wrażliwych jest priorytetem. Ważne jest również, aby takie pola były osadzone w bezpiecznych kontekstach, np. na stronach korzystających z protokołu HTTPS, co zapewnia szyfrowanie przesyłanych informacji. Ponadto, deweloperzy powinni stosować się do dobrych praktyk, takich jak implementacja mechanizmów zapobiegających atakom typu shoulder surfing poprzez odpowiednie umiejscowienie i stylowanie pól password. Warto również pamiętać o testowaniu funkcjonalności takich pól, aby upewnić się, że ukrywanie znaków działa prawidłowo na różnych urządzeniach i przeglądarkach, co jest kluczowe w zapewnieniu spójnego doświadczenia użytkownika oraz zachowania bezpieczeństwa.

Pytanie 20

Która jednostka rozmiaru w CSS jest WZGLĘDNA (skaluje się względem rozmiaru odniesienia)?

pt

cm

em

px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Jednostki względne skalują się w stosunku do innej wartości, dzięki czemu układ łatwiej dopasować do urządzenia. <code>em</code> odnosi się do rozmiaru czcionki elementu (a <code>rem</code> do rozmiaru korzenia dokumentu); podobnie względne są procenty. Dlatego względną jednostką spośród podanych jest <code>em</code>.

Pytanie 21

W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika

A. C

B. A

C. D

D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Formatowanie znacznika h1, określone w podanym kodzie CSS, wprowadza kilka charakterystycznych cech stylistycznych. Przede wszystkim, zastosowanie 'font-style: oblique;' zmienia wygląd tekstu, nadając mu ukośny styl. To oznacza, że tekst będzie wyświetlany w wyraźnie przechylonej formie, co jest często używane do podkreślenia ważnych elementów. Dodatkowo, 'font-variant: small-caps;' odpowiedzialne jest za przekształcenie małych liter w małe kapitałki, co nadaje tekstowi elegancki i formalny wygląd. Taki zabieg jest często wykorzystywany w tytułach lub nagłówkach, aby wyróżnić je wśród pozostałego tekstu. Ostatni element, 'text-align: right;', wyrównuje tekst do prawej krawędzi kontenera, co jest mniej powszechnie stosowane w porównaniu do wyrównania do lewej lub wyśrodkowanego, ale może być użyteczne w specyficznych układach strony. W przypadku, gdyby były dodatkowe style CSS przypisane do tego znacznika, mogłyby one wpłynąć na ostateczny wygląd, jednak w tym przypadku zakładamy, że są to jedyne zastosowane style. Standardy CSS jasno określają, jak różne właściwości mogą być używane do stylizacji elementów HTML, co czyni je niezwykle potężnym narzędziem w tworzeniu estetycznych i funkcjonalnych stron internetowych.

Pytanie 22

Który zapis wyświetli słowo „TEKST” w kolorze czarnym?

<font color="#000000">TEKST</font>

<body bgcolor="black">TEKST</body>

<font color="czarny">TEKST</font>

<body color="black">TEKST</font>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor czarny w zapisie szesnastkowym to <code>#000000</code>, więc poprawny jest <code><font color="#000000">TEKST</font></code>. Warto wiedzieć, że <code><font></code> jest dziś przestarzały - kolor ustawia się właściwością CSS <code>color</code>. Dlatego czarny tekst daje zapis z <code>color="#000000"</code>.

Pytanie 23

Parametr face w znaczniku  jest używany do określenia

A. koloru czcionki

B. typy czcionki

C. rozmiaru czcionki

D. stylów czcionki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Parametr face znacznika jest używany do określenia nazwy czcionki, co jest kluczowe dla stylizacji tekstu w dokumentach HTML. Umożliwia on deweloperom wybór konkretnej czcionki, która będzie używana do wyświetlania tekstu, co wpływa na jego estetykę oraz czytelność. Przykładowo, można użyć wartości takiej jak 'Arial', 'Times New Roman' czy 'Courier New', aby zdefiniować preferowaną czcionkę, co jest szczególnie ważne w przypadku identyfikacji wizualnej brandu. W praktyce, dobór odpowiedniej czcionki wpływa na doświadczenie użytkownika, a także na dostępność treści. Warto zaznaczyć, że w nowoczesnych praktykach webowych, stosowanie CSS do stylizacji tekstu stało się bardziej zalecane niż używanie znaczników , co wynika z dążenia do separacji treści od prezentacji. Dobre praktyki wskazują na użycie właściwości CSS takich jak 'font-family', co jest bardziej elastyczne i zgodne z aktualnymi standardami sieciowymi.

Pytanie 24

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

A. menu { background-color: rgb(0,255,0); }

B. div:menu { color: green; }

C. #menu { background-color: rgb(0,255,0); }

D. div.menu { background-color: green; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrany selektor `div.menu { background-color: green; }` dokładnie pasuje do podanego fragmentu HTML: `<div class="menu"></div>`. W CSS zapis `div.menu` oznacza element typu `<div>`, który ma atrybut `class` ustawiony na `menu`. Kropka w selektorze zawsze oznacza klasę, więc `menu` po kropce to nazwa klasy, a nie nazwa znacznika. Dzięki temu styl zostanie zastosowany tylko do tych elementów `div`, które mają klasę `menu`, a nie do wszystkich divów na stronie. Właśnie tak zgodnie ze standardami CSS definiuje się wygląd elementów z konkretną klasą. Własność `background-color: green;` ustawia kolor tła danego bloku na zielony. Można tu używać różnych zapisów kolorów: nazw (green), wartości heksadecymalnych (`#00ff00`), funkcji `rgb()` czy `hsl()`. W tym pytaniu istotne jest jednak nie tyle to, jak dokładnie zapisano kolor, tylko czy selektor trafia w odpowiedni element HTML. W praktyce bardzo często używa się klas do stylowania wielu podobnych elementów, np. `.menu`, `.btn-primary`, `.card`. Z mojego doświadczenia lepiej unikać nadmiernego używania identyfikatorów (`id`) do stylowania, a zamiast tego bazować właśnie na klasach, bo klasy można wielokrotnie powtarzać w dokumencie i są bardziej elastyczne. Dodatkowo selektor z typem elementu (`div.menu`) jest trochę bardziej precyzyjny niż samo `.menu`, co bywa przydatne, gdy ta sama klasa pojawia się na różnych znacznikach, a chcemy kontrolować konkretne przypadki. W nowoczesnym front-endzie takie podejście jest zgodne z dobrymi praktykami: czytelne, przewidywalne i zgodne ze specyfikacją CSS.

Pytanie 25

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. tr { background-color: Pink; }

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

Brak odpowiedzi na to pytanie.

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

Pytanie 26

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

p {background-image: url("rysunek.png");}

A. tłem dla każdego akapitu

B. pokazany obok każdego akapitu

C. tłem całej witryny

D. widoczny, jeśli zastosowany zostanie znacznik img w kodzie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wybrana odpowiedź jest poprawna ponieważ w arkuszach stylów CSS zastosowanie selektora elementu p z właściwością background-image powoduje że obraz rysunek.png zostanie ustawiony jako tło dla każdego elementu paragrafu na stronie. Jest to przydatna technika gdy chcemy nadać spójny wygląd wszystkim paragrafom w dokumencie. Tło to może być używane do celów estetycznych lub jako część identyfikacji wizualnej strony. Warto pamiętać że w CSS można dodatkowo kontrolować sposób wyświetlania obrazka tła za pomocą właściwości takich jak background-repeat background-size i background-position co pozwala na precyzyjne dostosowanie wyświetlania. Dobre praktyki zalecają aby obrazy tła były odpowiednio zoptymalizowane pod kątem rozmiaru aby nie wpływały negatywnie na szybkość ładowania strony. W praktyce stosowanie obrazów jako tła w paragrafach może wspierać wizualne narracje oraz zwiększać zaangażowanie użytkowników szczególnie gdy są stosowane w przemyślany sposób w kontekście projektowania doświadczeń użytkownika UX.

Pytanie 27

Zaprezentowane pole input daje możliwość

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

A. wybrania opcji

B. zaznaczenia opcji z listy zawierającej wartości text1 i text2

C. wpisania dowolnego tekstu

D. wprowadzenia hasła

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Element HTML z atrybutem type="checkbox" jest używany do tworzenia pól wyboru które pozwalają użytkownikowi zaznaczać jedną lub więcej opcji. Checkboxy są częstym elementem formularzy internetowych gdyż umożliwiają elastyczne zbieranie danych od użytkowników. Przykładowo w formularzach rejestracyjnych można używać ich do akceptacji regulaminu zapisów na newslettery czy wyboru zainteresowań. Składnia takiego elementu jest prosta: tag <input> z atrybutami name i value. Atrybut name jest niezbędny do grupowania checkboxów a value do przekazywania wartości zaznaczonej opcji do serwera podczas wysyłania formularza. Dobre praktyki zalecają dodawanie etykiet opisujących znaczenie checkboxa co poprawia dostępność dla osób korzystających z czytników ekranowych. Stosowanie checkboxów powinno być przemyślane by nie przeciążać użytkownika zbyt dużą liczbą opcji co mogłoby negatywnie wpłynąć na UX. Właściwe użycie checkboxów zgodne ze standardami HTML i UX jest kluczowe dla intuicyjnego interfejsu użytkownika.

Pytanie 28

W skrypcie JavaScript użyto metody DOM getElementsByClassName('akapit'). Ta metoda odniesie się do akapitu

A. akapit3

B. akapit

C. akapit4

D. akapit2

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda DOM getElementsByClassName jest jedną z najważniejszych funkcji w JavaScript, która pozwala na selekcję elementów na stronie internetowej na podstawie ich klas CSS. W tym przypadku, odpowiedź akapit4 jest poprawna, ponieważ element ten ma przypisaną klasę "akapit", co czyni go bezpośrednim kandydatem do selekcji przez metodę getElementsByClassName('akapit'). Metoda ta zwraca kolekcję elementów (HTMLCollection), które mają podaną klasę, a następnie można z nimi pracować w kodzie JavaScript. Na przykład, możemy zmieniać ich style, zawartość lub dodawać zdarzenia. Dobrą praktyką jest stosowanie klas do stylizacji oraz manipulacji DOM, co pozwala na lepszą organizację kodu i zwiększa jego czytelność. Pamiętaj, że klasy są bardziej uniwersalne i elastyczne niż identyfikatory (ID), które powinny być unikalne na stronie. W przypadku konieczności stosowania metod do manipulacji elementami DOM, warto znać również inne metody, takie jak querySelector i querySelectorAll, które oferują bardziej zaawansowane opcje selekcji, umożliwiające wykorzystanie kombinacji klas, identyfikatorów i innych atrybutów.

Pytanie 29

Której właściwości CSS użyć, aby ustawić wewnętrzny GÓRNY odstęp (między treścią a obramowaniem)?

local-top

padding-top

border-top

outline-top

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wewnętrzny GÓRNY odstęp - między treścią a górną krawędzią obramowania - ustawia <code>padding-top</code>, np. <code>padding-top: 15px;</code>. To jedna z czterech stron <code>padding</code> (<code>padding-top</code>, <code>-right</code>, <code>-bottom</code>, <code>-left</code>). Zapamiętaj: „padding” = wnętrze, „top” = góra.

Pytanie 30

Jaką barwę przedstawia kolor zapisany w modelu RGB(255, 0, 0)?

A. żółtą

B. czerwoną

C. niebieską

D. zieloną

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W modelu RGB kolor opisują trzy składowe: czerwona (R), zielona (G) i niebieska (B), każda od 0 do 255. Zapis RGB(255, 0, 0) oznacza maksymalną czerwoną i zerowe pozostałe, czyli czysty kolor czerwony. Dlatego RGB(255, 0, 0) to barwa czerwona.

Pytanie 31

W CSS określono styl dla stopki. Jak można zastosować to formatowanie do bloku oznaczonego znacznikiem div?

#stopka { ... }

A. <div "stopka"> …

B. <div class = "stopka"> …

C. <div id = "stopka"> …

D. <div title = "stopka"> …

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie – zapis #stopka w CSS oznacza selektor identyfikatora (ID), więc w HTML musimy użyć atrybutu id="stopka" dokładnie z tą samą nazwą. W CSS znak # wskazuje, że styl jest przypisany do elementu o konkretnym identyfikatorze, a nie do klasy czy czegokolwiek innego. Dlatego jedynym prawidłowym sposobem podpięcia tego stylu do bloku div jest konstrukcja: <div id="stopka">…</div>. W praktyce wygląda to tak: CSS: #stopka { background-color: #333; color: white; padding: 20px; } HTML: <div id="stopka">To jest stopka strony</div> Przeglądarka łączy selektor #stopka z elementem, który ma id="stopka" i nakłada na niego zdefiniowane właściwości. Identyfikator powinien być unikalny w obrębie całego dokumentu HTML, co jest zgodne z zaleceniami W3C i ogólnie przyjętą dobrą praktyką. Do jednego ID odwołujemy się w CSS przez #, a w JavaScript przez document.getElementById("stopka"). Moim zdaniem warto zapamiętać prostą zasadę: # w CSS = id w HTML, kropka (.) w CSS = class w HTML. Gdy projektujesz layout strony, zwykle elementy typu nagłówek, stopka, główna nawigacja mają unikalne ID, bo występują raz na stronie. Natomiast powtarzalne elementy (np. kafelki z produktami) dostają klasy. Dzięki temu kod jest czytelniejszy, łatwiej się go utrzymuje i unikamy dziwnych konfliktów stylów. Dobrą praktyką jest też używanie opisowych nazw, np. id="stopka" zamiast skrótów typu id="s1", bo po miesiącu nikt nie pamięta, co to znaczyło.

Pytanie 32

W sekcji nagłówka dokumentu HTML umieszczono

<title>Strona miłośników psów</title>

Zawarty tekst będzie widoczny

A. w polu adresowym, za wprowadzonym adresem URL

B. w treści witryny, w pierwszym ukazanym nagłówku

C. na pasku tytułu w przeglądarce

D. w treści witryny, na banerze witryny

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna, ponieważ zawartość tagu <title> w kodzie HTML określa tytuł dokumentu, który jest wyświetlany na pasku tytułu przeglądarki. Tytuł ten jest kluczowym elementem SEO, ponieważ wpływa na sposób, w jaki użytkownicy postrzegają stronę w wynikach wyszukiwania. W praktyce, dobrze dobrany tytuł zwiększa szansę na kliknięcia i poprawia widoczność strony w internecie. Warto pamiętać, że tytuł powinien być krótki, zwięzły i zawierać najważniejsze słowa kluczowe, aby skutecznie komunikować, o czym jest strona. Dobre praktyki zalecają, aby długość tytułu nie przekraczała 60 znaków, aby uniknąć jego obcięcia w wynikach wyszukiwania. Dodatkowo, tytuł powinien być unikalny dla każdej podstrony, co ułatwia użytkownikom i wyszukiwarkom zrozumienie zawartości witryny.

Pytanie 33

Który zapis CSS wyrówna tekst akapitu do PRAWEJ strony?

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

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

<p style="position: right">tekst</p>

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poziome wyrównanie tekstu ustawia właściwość <code>text-align</code>, więc <code>text-align: right</code> dosuwa treść akapitu do prawej krawędzi. Dlatego poprawny jest zapis <code><p style="text-align: right"></code>.

Pytanie 34

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

A. znaku skreślenia

B. znaku wielokropkowego

C. treści czcionką w języku polskim

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

Brak odpowiedzi na to pytanie.

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

A. C.

B. D.

C. A.

D. B.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dokładnie tak powinien wyglądać ten formularz! Zwróć uwagę, jak HTML interpretuje znaczniki – one wymuszają przejście do nowej linii, więc w kodzie wyjściowym każda sekcja obowiązków pojawi się osobno, pod sobą. To, że jeden z checkboxów ma atrybuty disabled oraz checked, powoduje, że jest domyślnie zaznaczony, ale nie można go odznaczyć ani zaznaczyć ponownie – to ważny niuans, bo czasem zapomina się, że disabled nie oznacza tylko „wyszarzony”, ale też „nie bierz udziału w wysyłaniu formularza”. Takie wykorzystanie checkboxów jest powszechne, szczególnie jeśli chcesz pokazać użytkownikowi pewne stałe informacje (np. obowiązek, którego nie można uniknąć). Z mojego doświadczenia, bardzo często w praktycznych projektach „disabled” stosuje się np. przy wymaganych oświadczeniach, gdzie użytkownik ma tylko do wglądu informację, że coś już jest włączone i nie może tego zmienić. No i jeszcze – checked przy pisaniu kodu powoduje, że checkbox jest domyślnie zaznaczony, co jest zgodne z kodem źródłowym. Same nazwy pól (czyli atrybuty name i value) zostaną wysłane do serwera tylko dla tych pól, które nie są disabled i użytkownik je zaznaczył. To też jest bardzo praktyczna rzecz, bo pozwala precyzyjnie sterować tym, co trafia do backendu. Moim zdaniem taka forma zapisu formularza to dobry punkt wyjścia do dalszej rozbudowy – łatwo dodać tutaj walidację, obsługę JavaScript czy zastosować style CSS. Trzymanie się tej składni ułatwia też potem pracę zespołową, bo jest czytelna i zgodna z oczekiwaniami innych programistów. Podsumowując, wybrałeś opcję najbliższą temu, co wyświetli przeglądarka na bazie danego kodu HTML – i to jest podejście zgodne ze standardami, doceniane w branży.

Pytanie 36

W przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ

<img src="kwiat.jpg alt="kwiat">

A. nie odnaleziono pliku kwiat.jpg

B. nie zamknięto cudzysłowu

C. wprowadzono nieznany atrybut alt

D. użyto niewłaściwego znacznika do wyświetlenia obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to nie domknięto cudzysłowu ponieważ w kodzie HTML atrybuty muszą być poprawnie zamknięte aby poprawnie interpretować ich wartości. W przedstawionym fragmencie kodu dla znacznika img brakuje końcowego cudzysłowu po wartości src co stanowi błąd składniowy. Tego typu błędy mogą prowadzić do nieprawidłowego działania strony ponieważ przeglądarka nie jest w stanie jednoznacznie określić końca wartości atrybutu co może skutkować nieprawidłowym renderowaniem danych. Zgodnie z najlepszymi praktykami każde otwarte cudzysłowie powinno być zamknięte aby zapewnić poprawną interpretację kodu. Ponadto stosowanie poprawnego zamykania cudzysłowów zwiększa czytelność kodu co jest istotne przy współpracy zespołowej i ułatwia jego utrzymanie. Warto także korzystać z walidatorów HTML które automatycznie wykrywają takie błędy pomagając w ich szybkim usunięciu. Tego rodzaju narzędzia są kluczowe w procesie tworzenia stron internetowych ponieważ umożliwiają weryfikację zgodności kodu z obowiązującymi standardami co ma bezpośredni wpływ na jego wydajność i kompatybilność z różnymi przeglądarkami.

Pytanie 37

Deklaracja background-attachment: scroll sprawia, że:

A. tło będzie przewijane razem z zawartością strony

B. grafika tła pojawi się w prawym górnym rogu

C. tło będzie nieruchome, a treść będzie się przewijać

D. grafika tła będzie powtarzana (kafelki)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość <code>background-attachment</code> określa, jak zachowuje się tło podczas przewijania strony. Wartość <code>scroll</code> (domyślna) sprawia, że tło przewija się razem z zawartością elementu - znika z widoku, gdy przewiniemy stronę. Przeciwna wartość <code>fixed</code> „przykleja” tło do okna, więc treść przesuwa się po nieruchomym tle. Dlatego <code>scroll</code> oznacza, że tło przewija się z treścią.

Pytanie 38

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. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt1 3. punkt3

C. punkt 1 punkt 2 podpunkt1 podpunkt2 podpunkt3 punkt3

D. 1. punkt 1 2. punkt 2 podpunkt1 podpunkt2 podpunkt3 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 39

W formularzu HTML użyto znacznika <input>. Pole to będzie służyło do wprowadzania maksymalnie

<input type="password" size="30" maxlength="20">

A. 20 znaków, które są widoczne w trakcie wprowadzania

B. 20 znaków, które nie są widoczne w polu tekstowym

C. 30 znaków, które nie są widoczne w polu tekstowym

D. 30 znaków, które są widoczne w trakcie wprowadzania

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to 20 znaków, które nie są widoczne w polu tekstowym. Znacznik <input type="password"> w HTML jest używany do tworzenia pól wprowadzania, w których hasła lub inne wrażliwe dane są maskowane, co oznacza, że wpisywane znaki są pokazywane jako symbole, zwykle kropki. W atrybucie 'maxlength' określa się maksymalną liczbę znaków, które użytkownik może wprowadzić. W tym przypadku, atrybut 'maxlength="20"' oznacza, że użytkownik może wprowadzić maksymalnie 20 znaków, ale nie będą one widoczne w polu tekstowym, co zwiększa bezpieczeństwo. Dobrym przykładem zastosowania tego typu pola jest logowanie do systemów, gdzie ochrona danych użytkownika jest kluczowa. Stosowanie pól typu 'password' jest zgodne z zasadami ochrony prywatności i dobrymi praktykami w zakresie projektowania interfejsów użytkownika, które wymagają maskowania danych w celu minimalizacji ryzyka ich ujawnienia.

Pytanie 40

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

<title>Strona o psach</title>

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Rozpocznij nowy egzamin

Powrót do strony głównej

Wyniki egzaminu

Informacje o egzaminie:

Egzamin niezdany

Udostępnij swój wynik

Szczegółowe wyniki:

Pytanie 1

Pytanie 2

Pytanie 3

Pytanie 4

Pytanie 5

Pytanie 6

Pytanie 7

Pytanie 8

Pytanie 9

Pytanie 10

Pytanie 11

Pytanie 12

Pytanie 13

Pytanie 14

Pytanie 15

Pytanie 16

Pytanie 17

Pytanie 18

Pytanie 19

Pytanie 20

Pytanie 21

Pytanie 22

Pytanie 23

Pytanie 24

Pytanie 25

Pytanie 26

Pytanie 27

Pytanie 28

Pytanie 29

Pytanie 30

Pytanie 31

Pytanie 32

Pytanie 33

Pytanie 34

Pytanie 35

Pytanie 36

Pytanie 37

Pytanie 38

Pytanie 39

Pytanie 40