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: 13 czerwca 2026 18:43
Data zakończenia: 13 czerwca 2026 18:43

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Która operacja NIE zmieni rozmiaru (wagi) pliku graficznego?

A. kompresja

B. interpolacja

C. zmiana rozmiaru WYŚWIETLANIA obrazu atrybutami HTML

D. zmiana rozdzielczości obrazu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybuty HTML (np. <code>width</code>, <code>height</code>) zmieniają tylko ROZMIAR WYŚWIETLANIA obrazu w przeglądarce - plik na serwerze pozostaje ten sam, więc jego waga się nie zmienia. To dlatego „zmniejszenie” obrazka atrybutem nie przyspiesza ładowania. Dlatego wagi pliku nie zmieni skalowanie atrybutami HTML.

Pytanie 2

Jakiej funkcji w edytorze grafiki rastrowej należy użyć, aby przygotować obraz do wyświetlenia na stronie tak, aby widoczne było jedynie to, co mieści się w ramce?

A. Zmiana rozmiaru

B. Lustro

C. Kadrowanie

D. Perspektywa

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kadrowanie w edytorze grafiki rastrowej to naprawdę fajna technika, bo pozwala nam na wycięcie konkretnej części obrazu, którą chcemy pokazać. Dzięki temu skupiamy uwagę na tym, co w grafice najważniejsze, eliminując to, co jest zbędne. Przygotowując grafikę do wrzucenia na stronę www, dobrze jest pomyśleć o kadrowaniu, bo nie tylko poprawia estetykę, ale też sprawia, że strona działa szybciej. Mniejsza grafika to krótszy czas ładowania, co wszyscy lubią. Kadrowanie jest kluczowe, zwłaszcza w responsywnym web designie, gdzie musimy dostosować obrazy do różnych ekranów. Z praktyki wiem, że dobrze wykadrowany obraz to lepsza jakość przy mniejszej wadze pliku, co korzystnie wpływa na SEO i wrażenia użytkowników. W programach jak Adobe Photoshop czy GIMP kadrowanie jest dość proste i pozwala na szybkie dostosowanie obrazu do potrzeb projektu.

Pytanie 3

Jak określa się proces przedstawiania informacji zawartych w dokumencie elektronicznym w formie odpowiedniej dla konkretnego środowiska?

A. Mapowanie

B. Rasteryzacja

C. Renderowanie

D. Teksturowanie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Renderowanie to proces, w którym dane zawarte w dokumencie elektronicznym są przekształcane w formę wizualną, która jest zrozumiała dla użytkownika. W praktyce oznacza to przekształcenie informacji na ekranie w sposób odpowiedni do kontekstu, w jakim są prezentowane. Renderowanie jest kluczowe w takich technologiach jak HTML, CSS oraz JavaScript, gdzie przetwarzane są dokumenty webowe, a ich wygląd oraz interaktywność są dostosowywane do możliwości przeglądarek. Przykładem zastosowania renderowania może być proces wyświetlania stron internetowych, gdzie przeglądarka interpretując kod HTML, CSS i JavaScript, renderuje dynamiczne treści, obrazy oraz elementy interaktywne. Rekomendowane praktyki branżowe dotyczące renderowania obejmują optymalizację czasu ładowania stron poprzez techniki, takie jak lazy loading, a także zapewnienie dostępności poprzez poprawne użycie znaczników semantycznych. W kontekście grafiki komputerowej, renderowanie jest również używane do generowania obrazów z modeli 3D, gdzie zaawansowane algorytmy renderujące tworzą realistyczne obrazy w grach komputerowych czy symulacjach wizualnych. Zrozumienie procesu renderowania jest kluczowe dla twórców treści cyfrowych, programistów oraz specjalistów od UX/UI.

Pytanie 4

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

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

A. <video> </video>

B. <embed> </embed>

C. <section> </section>

D. <div> </div>

Brak odpowiedzi na to pytanie.

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

Pytanie 5

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Wskazana odpowiedź, czyli Lokalny, Wewnętrzny, Zewnętrzny, jest zgodna z zasadami kaskadowego stylu arkuszy CSS. Istotą kaskadowości jest to, że style są stosowane według określonej hierarchii. Style lokalne (wbudowane) mają najwyższy priorytet, co oznacza, że jeśli na danym elemencie zastosowano styl lokalny, to zdominuje on wszelkie inne style. Przykład użycia stylu lokalnego to nadanie koloru tła dla konkretnego przycisku poprzez atrybut 'style': <button style='background-color: red;'>Przycisk</button>. W przypadku, gdy nie ma stylu lokalnego, przetwarzany jest styl wewnętrzny, który można zdefiniować w sekcji <style> w nagłówku dokumentu HTML. Na przykład: <style>p { color: blue; }</style> sprawi, że wszystkie akapity będą miały niebieski kolor. Dopiero na końcu brane są pod uwagę style zewnętrzne, które są definiowane w osobnych plikach CSS, na przykład: <link rel='stylesheet' href='style.css'>. Dlatego znajomość tej hierarchii jest kluczowa dla skutecznego tworzenia stylów, co przekłada się na lepsze zarządzanie wyglądem strony oraz unikanie konfliktów stylów. Warto również pamiętać o zasadzie „specyficzności”, która dodatkowo komplikuje temat, ponieważ style mogą mieć różny priorytet w zależności od ich specyfikacji.

Pytanie 6

Który atrybut pozwala na wskazanie lokalizacji pliku graficznego w znaczniku <img>?

A. link

B. alt

C. src

D. href

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut 'src' w znaczniku <img> jest kluczowy, ponieważ określa lokalizację pliku graficznego, który ma być wyświetlany na stronie. Oznacza to, że wartość tego atrybutu to URL (Uniform Resource Locator), który wskazuje na lokalizację obrazu w internecie lub na lokalnym serwerze. Przykładowo, jeśli chcemy wyświetlić obrazek o nazwie 'zdjecie.jpg' znajdujący się w folderze 'obrazy', użyjemy: <img src='obrazy/zdjecie.jpg' alt='Opis obrazka'>. Zastosowanie odpowiedniego atrybutu 'src' jest zgodne z najlepszymi praktykami HTML, co zapewnia, że przeglądarki internetowe prawidłowo interpretują nasze zamierzenia co do wyświetlania treści wizualnych. Nieprawidłowe określenie lokalizacji obrazu może prowadzić do błędów '404 Not Found', co negatywnie wpływa na doświadczenie użytkownika. Dobrze zaprojektowane strony internetowe powinny również uwzględniać atrybut 'alt', który zapewnia dostępność oraz opisuje zawartość obrazu osobom korzystającym z czytników ekranu, ale to 'src' jest odpowiedzialny za wyświetlanie samego obrazu.

Pytanie 7

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 8

Jak ustawić tło body obrazem rys.png, powtarzanym TYLKO w poziomie?

background-image: url("rys.png"); background-repeat: round;

background-image: url("rys.png"); background-repeat: repeat-y;

background-image: url("rys.png"); background-repeat: repeat;

background-image: url("rys.png"); background-repeat: repeat-x;

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Powtarzanie obrazu tła reguluje <code>background-repeat</code>. Wartość <code>repeat-x</code> powiela obraz TYLKO w poziomie (wzdłuż osi X), tworząc poziomy pas. Dlatego tło powtarzane jedynie w poziomie daje <code>background-repeat: repeat-x</code>.

Pytanie 9

Co oznacza selektor CSS p > i { color: red; }?

A. tekst w  znajdującym się BEZPOŚREDNIO wewnątrz 

B. tekst w  z klasą o nazwie i

C. każdy tekst w  lub w 

D. każdy tekst w  oprócz tego w 

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znak <code>></code> w selektorze oznacza „bezpośrednie dziecko”, więc <code>p > i</code> trafia tylko w te <code><i></code>, które leżą wprost wewnątrz <code><p></code> (na pierwszym poziomie zagnieżdżenia), a nie głębiej. Reguła <code>p > i { color: red; }</code> pokoloruje taki tekst na czerwono. Dlatego selektor dotyczy <code><i></code> bezpośrednio w <code><p></code>.

Pytanie 10

W języku CSS wprowadzone zostało następujące formatowanie:

h1 i {color:red;}

Kolor czerwony będzie stosowany do

A. wyłącznie pochylonego tekstu w każdym rodzaju nagłówka

B. całego tekstu nagłówka pierwszego stopnia oraz całego tekstu pochylonego, niezależnie od lokalizacji na stronie

C. tylko tekstu pochylonego nagłówka pierwszego poziomu

D. całego tekstu nagłówka pierwszego stopnia oraz tekstu pochylonego w akapicie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W języku CSS, zapis 'h1 i {color:red;}' wskazuje na regułę stylowania, która dotyczy elementów 'i' znajdujących się wewnątrz nagłówka pierwszego stopnia 'h1'. W związku z tym, tylko tekst, który jest oznaczone jako pochylony (italic) w obrębie h1, zostanie wyświetlony na czerwono. W CSS, selektor 'h1 i' jest przykładem selektora potomka, który działa na zasadzie dziedziczenia stylów przez elementy znajdujące się w danym kontekście. Przykładowo, skoro element 'i' jest bezpośrednio związany z 'h1', to tylko tekst w tym elemencie zyska czerwony kolor. W praktyce, jeśli w nagłówku pierwszego stopnia mamy tekst 'To jest nagłówek pochylony', to jedynie słowo 'pochylony' będzie czerwone, podczas gdy pozostała część nagłówka pozostanie w domyślnym kolorze. Tego typu stylizacje są zgodne z standardami CSS, które promują modularność i precyzyjność w określaniu stylów dla różnych elementów dokumentu.

Pytanie 11

Weryfikację kompletności formularza, działającą po stronie przeglądarki, należy zrealizować w języku

A. PHP

B. CSS

C. JavaScript

D. Ruby on Rails

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to JavaScript, bo właśnie ten język działa bezpośrednio w przeglądarce użytkownika i pozwala na dynamiczną weryfikację formularzy jeszcze przed wysłaniem danych na serwer. JavaScript ma dostęp do drzewa DOM, więc może odczytać wartości pól, sprawdzić, czy nie są puste, czy e‑mail ma poprawny format, czy hasło ma odpowiednią długość, a nawet czy dwa pola hasła są identyczne. Z mojego doświadczenia to jest absolutny standard w nowoczesnych aplikacjach webowych: najpierw lekka walidacja po stronie klienta w JS, a dopiero potem solidna walidacja po stronie serwera. Dobrym przykładem jest formularz rejestracji: po wpisaniu zbyt krótkiego hasła JavaScript może od razu wyświetlić komunikat pod polem, bez przeładowania strony. Można też blokować przycisk „Wyślij”, dopóki wszystkie wymagane pola nie są poprawnie wypełnione. W praktyce często używa się zdarzeń takich jak onsubmit na formularzu albo input/blur na polach, żeby na bieżąco sprawdzać dane. Można też korzystać z gotowych bibliotek walidacyjnych, ale pod spodem i tak pracuje JavaScript. W dobrych praktykach przyjmuje się zasadę: walidacja po stronie klienta poprawia wygodę i szybkość obsługi (user experience), ale nie zastępuje walidacji po stronie serwera. JavaScript służy więc do „pierwszej linii obrony” i podpowiedzi użytkownikowi, a serwer (np. w PHP czy innym języku backendowym) musi i tak wszystko jeszcze raz sprawdzić ze względów bezpieczeństwa. Warto też pamiętać o wykorzystaniu wbudowanych mechanizmów HTML5 (atrybuty required, type="email" itd.), ale to JavaScript daje pełną kontrolę nad logiką i komunikatami błędów, bo pozwala tworzyć własne reguły i reagować na konkretne zachowania użytkownika.

Pytanie 12

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

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

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 13

Taki styl CSS sprawi, że na stronie internetowej

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

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

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

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

D. punkt listy nienumerowanej będzie rys.gif

Brak odpowiedzi na to pytanie.

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

Pytanie 14

Grafika, która ma być pokazana na stronie, powinna mieć transparentne tło. Podaj format pliku graficznego, w którym należy go zapisać.

A. CDR

B. JPEG

C. PNG

D. BMP

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla obrazów z przezroczystym tłem, ponieważ obsługuje kanał alpha, który umożliwia definiowanie przezroczystości poszczególnych pikseli. Dzięki temu, gdy obraz PNG jest umieszczany na różnym tle, zachowuje naturalny wygląd i nie wymaga dodatkowego dostosowywania, co jest szczególnie ważne w projektach graficznych, które wymagają elastyczności w prezentacji. Przykładowe zastosowania PNG obejmują ikony, logo oraz wszelkie grafiki, które muszą być nałożone na inne elementy wizualne bez widocznych krawędzi czy tła. W branży grafiki komputerowej oraz web designu, PNG stał się standardem dla materiałów wymagających wysokiej jakości obrazu z zachowaniem przezroczystości. Dobrą praktyką jest również stosowanie PNG w przypadku grafik, które zawierają tekst, ponieważ format ten nie wprowadza strat jakości, co może mieć miejsce w przypadku innych formatów kompresji. Warto również zaznaczyć, że PNG nie traci jakości przy wielokrotnym zapisywaniu, co czyni go preferowanym wyborem tam, gdzie jakość jest kluczowa.

Pytanie 15

Plik HTML jest w folderze www/html/, a styl.css w www/style/. Jak poprawnie (ścieżką względną) dołączyć arkusz w pliku HTML?

<link rel="stylesheet" href="style/styl.css">

<link rel="stylesheet" href="styl.css">

<link rel="stylesheet" href="../style/styl.css">

<link rel="stylesheet" href="www/style/styl.css">

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Ścieżka względna prowadzi „od miejsca, w którym jesteśmy”. Plik HTML leży w <code>www/html/</code>, a arkusz w <code>www/style/</code>, więc trzeba najpierw cofnąć się o katalog w górę (<code>../</code> prowadzi do <code>www/</code>), a potem zejść do <code>style/</code>. Daje to <code>href="../style/styl.css"</code>.

Pytanie 16

W kodzie HTML zdefiniowano formularz, który wysyła dane do pliku formularz.php. Po naciśnięciu przycisku typu submit przeglądarka przechodzi do poniższego adresu:

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

Na podstawie podanego adresu można stwierdzić, że dane do pliku formularz.php zostały przesłane metodą:

A. SESSION

B. GET

C. COOKIE

D. POST

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Dane do pliku formularz.php zostały przesłane metodą GET, co można stwierdzić na podstawie adresu URL, który zawiera parametry (imię=Anna&nazwisko=Kowalska) przekazane po znaku zapytania (?). W metodzie GET, parametry są dołączane do adresu URL i są widoczne w pasku adresu przeglądarki. Jest to uniwersalny sposób przesyłania danych, który jest zgodny ze standardem HTTP i jest szeroko stosowany w praktyce. Metoda GET jest najprostszym sposobem przesyłania danych, ale ze względu na widoczność parametrów w adresie URL, nie jest zalecana do przesyłania ważnych informacji, takich jak hasła. W praktyce, metoda GET jest często stosowana do przekazywania informacji niezbędnych do wygenerowania konkretnej strony, takich jak identyfikatory zasobów lub parametry filtrowania.

Pytanie 17

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. tr { background-color: Pink; }

D. tr:hover { 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 18

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

A. oraz

B. oraz

C. oraz

D. oraz

Brak odpowiedzi na to pytanie.

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

Pytanie 19

Którą właściwość CSS należy zastosować, aby ustawić grubość (pogrubienie) czcionki?

font-weight

text-style

text-weight

font-style

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Grubość czcionki ustawia właściwość <code>font-weight</code>. Przyjmuje wartości słowne (<code>normal</code>, <code>bold</code>) lub liczbowe (100-900), np. <code>font-weight: bold</code>. Im wyższa liczba, tym grubsze znaki. Dlatego do pogrubienia tekstu służy <code>font-weight</code>.

Pytanie 20

Który znacznik służy do budowania hierarchii (struktury) tekstu nagłówkami?

<style>

<head>

<h6>

<u>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Hierarchię tekstu buduje się nagłówkami <code><h1></code> do <code><h6></code> - od najważniejszego do najmniej ważnego. <code><h6></code> to nagłówek najniższego poziomu, ale wciąż element tej struktury. Dlatego do hierarchii nagłówków należy <code><h6></code>.

Pytanie 21

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 podpunkt1 podpunkt2 podpunkt3 punkt3

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

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 22

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu:

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący ...</p>

A. Znacznik br nie został poprawnie zamknięty.

B. Znacznik br nie może występować wewnątrz znacznika p.

C. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania.

D. Nieznany znacznik h6.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Znacznik zamykający /b w badanym kodzie HTML jest niezgodny z zasadą zagnieżdżania. Zasada ta mówi, że znaczniki powinny być zamykane w odwrotnej kolejności do otwierania - zgodnie z modelem LIFO (Last In, First Out). W praktyce oznacza to, że jeśli otworzyliśmy na przykład najpierw znacznik , a następnie , to najpierw powinniśmy zamknąć , a dopiero potem . Nieprzestrzeganie tej zasady może prowadzić do nieoczekiwanych wyników podczas renderowania strony. Jest to istotne dla utrzymania czytelności i prawidłowego funkcjonowania kodu. W codziennej praktyce, szczególnie w większych projektach, stosowanie się do takich zasad pomaga utrzymać kod zrozumiałym i łatwym do zarządzania.

Pytanie 23

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

A. Odpowiedź 2: B

B. Odpowiedź 4: D

C. Odpowiedź 3: C

D. Odpowiedź 1: A

Brak odpowiedzi na to pytanie.

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

Pytanie 24

Aby sprawdzić poprawność składni kodu CSS, można skorzystać z:

A. debuggera

B. walidatora

C. optymalizatora

D. konsolidatora

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawność składni CSS sprawdza walidator - na przykład walidator CSS organizacji W3C (jigsaw.w3.org/css-validator). Analizuje arkusz pod kątem zgodności ze standardem i wypisuje błędy oraz ostrzeżenia: literówki we właściwościach, nieprawidłowe wartości czy brakujące średniki. Dlatego do kontroli składni CSS służy walidator.

Pytanie 25

Którego znacznika używa się do utworzenia listy definicji w kodzie HTML?

<td>

<dl>

<label>

<abbr>

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Listę definicji buduje znacznik <code><dl></code> (description list). Wewnątrz umieszcza się pary: definiowany termin w <code><dt></code> oraz jego opis w <code><dd></code>, na przykład <code><dl><dt>HTML</dt><dd>język znaczników</dd></dl></code>. Taka lista nadaje się do słowniczków, par nazwa-wartość czy zestawień pojęć i ich wyjaśnień. Różni się od listy nienumerowanej <code><ul></code> i numerowanej <code><ol></code> właśnie strukturą „termin - opis”. Dlatego do listy definicji służy <code><dl></code>.

Pytanie 26

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

A. p { text-size:bold; }

B.

C.

D. p { font-weight:bold; }

Brak odpowiedzi na to pytanie.

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

Pytanie 27

Którą technologię poleca się, aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania?

A. FTP

B. SEO

C. CMS

D. SSL

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Aby treść serwisu mogli edytować użytkownicy bez umiejętności programowania, stosuje się system CMS - zarządza się nią przez gotowy panel, bez pisania kodu. Dlatego poleca się CMS.

Pytanie 28

Podano fragment kodu HTML, który nie przechodzi walidacji. Problemy z walidacją tego kodu będą dotyczyć:

<!DOCTYPE HTML>
<html>
<head>
    <title>Test</title>
</head>
<body>

<img src="obraz.gif">
<br>
<img src="obraz.gif">

</body>
</html>

A. braku atrybutu alt w znaczniku <img>

B. braku zamknięcia znacznika <img>

C. duplikacji nazwy pliku graficznego

D. braku zamknięcia znacznika

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym zadaniu kluczowy był brak atrybutu alt w znaczniku <img>. To jest jeden z tych wymagań, które na pierwszy rzut oka mogą wydawać się tylko formalnością, a jednak mają ogromne znaczenie, szczególnie z punktu widzenia dostępności. Standardy W3C (zwłaszcza WCAG) jasno mówią, że każdy obrazek w HTML powinien mieć opis alternatywny, czyli właśnie atrybut alt. Dzięki temu osoby korzystające z czytników ekranu albo mające wyłączone ładowanie grafik, czy nawet boty indeksujące wyszukiwarki, wiedzą, co obrazek przedstawia lub jaką pełni funkcję. Jeżeli alt jest pusty, to też jest dozwolone, ale wtedy obrazek powinien być czysto dekoracyjny, a tutaj ewidentnie nie ma żadnego alt. Przykład praktyczny: jeśli budujesz stronę dla urzędu, sklepu internetowego albo jakąkolwiek witrynę publiczną, brak alt przy obrazkach to poważny minus jakościowy i prawny. Nawet na prostych stronach wizytówkach może się to odbić negatywnie na SEO czy po prostu na wygodzie użytkownika. Ja kiedyś przez taki drobiazg nie przeszedłem walidacji projektu, więc uczulam na to każdą osobę, która zaczyna z HTML-em – zawsze pamiętaj o atrybucie alt. To nie jest coś, co można ignorować, bo przeglądarki tego nie „wybaczą” podczas walidacji, a użytkownicy mogą na tym stracić. Szczerze, moim zdaniem to jeden z tych podstawowych nawyków, które warto sobie wyrobić już na starcie.

Pytanie 29

Który zapis CSS ustawi tło bloku <div> na kolor niebieski?

div { border-color: blue; }

div { color: blue; }

div { shadow: blue; }

div { background-color: blue; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kolor tła elementu ustawia właściwość <code>background-color</code>, więc <code>div { background-color: blue; }</code> daje niebieskie tło bloku <code><div></code>. Dlatego ten zapis jest poprawny.

Pytanie 30

Która z komórek tabeli została sformatowana przedstawionym stylem CSS zakładając, że pozostałe własności przyjmują wartości domyślne?

td {
  border: 1px solid black;
  padding: 15px;
  height: 40px;
  vertical-align: bottom;
}

dane w tabeli		dane w tabeli		dane w tabeli		dane w tabeli
Komórka 1		Komórka 2		Komórka 3		Komórka 4

A. Komórka 1.

B. Komórka 4.

C. Komórka 3.

D. Komórka 2.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, to jest prawidłowa odpowiedź! Styl CSS, który został podany, określa, że komórka tabeli ma obramowanie o grubości 1px i kolorze czarnym, wewnętrzny margines (padding) o wielkości 15px, wysokość 40px oraz wyrównanie tekstu do dołu (vertical-align: bottom). Komórka 3. jest jedyną, która spełnia te kryteria - tekst jest wyrównany do dołu, a komórka ma widoczne obramowanie i odpowiednią wysokość. Formatowanie CSS jest kluczowym aspektem projektowania stron internetowych, które pozwalają na personalizację wyglądu elementów na stronie. Kiedy formatujesz komórkę tabeli w CSS, musisz zwrócić uwagę na szczegóły, takie jak wysokość, wewnętrzny margines, narożniki i wyrównanie tekstu. Wszystko to wpływa na ostateczny wygląd i doświadczenie użytkownika na stronie. Pamiętaj, że praktyka jest kluczem do zrozumienia, jak te elementy razem pracują, dlatego zawsze warto eksperymentować z różnymi ustawieniami.

Pytanie 31

Która z zasad dotyczących poprawnego kodu HTML jest BŁĘDNA (nieprawdziwa)?

A. w nazwach znaczników nie rozróżnia się wielkości liter ( = )

B. znaczniki (poza pustymi) działają do domknięcia, np. ...

C. atrybuty trzeba podawać w kolejności ALFABETYCZNEJ

D. znaczniki zamyka się w odwrotnej kolejności niż otwierano

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Pytanie szuka zasady BŁĘDNEJ. Atrybutów w znaczniku NIE trzeba podawać w kolejności alfabetycznej - ich kolejność jest dowolna i nie wpływa na poprawność kodu. Dlatego fałszywa jest zasada o kolejności alfabetycznej atrybutów.

Pytanie 32

Jakiej informacji NIE umieszcza się w znaczniku <meta>?

A. o automatycznym odświeżaniu strony

B. o autorze strony

C. o kodowaniu znaków

D. o typie (wersji) dokumentu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Typ (wersję) dokumentu deklaruje się osobnym zapisem <code><!DOCTYPE></code> na początku pliku, a NIE w znaczniku <code><meta></code>. Dlatego w <code><meta></code> nie umieszcza się informacji o typie dokumentu.

Pytanie 33

Funkcji session_start() w PHP należy użyć przy realizacji:

A. obsługi pojedynczego formularza

B. dowolnej strony obsługującej ciasteczka

C. wczytywania danych z plików zewnętrznych

D. strony wielostronicowej, która musi pamiętać dane przy przechodzeniu między stronami

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Funkcja <code>session_start()</code> uruchamia (lub wznawia) sesję - mechanizm pozwalający zapamiętać dane użytkownika pomiędzy kolejnymi odsłonami strony. Wywołuje się ją na początku skryptu, zanim cokolwiek zostanie wypisane, a dane przechowuje się w tablicy <code>$_SESSION</code> (np. login zalogowanej osoby czy zawartość koszyka). Przeglądarka trzyma tylko identyfikator sesji w ciasteczku, a same dane zostają na serwerze. Dlatego sesji używa się w serwisach wielostronicowych, gdzie dane muszą „przechodzić” między podstronami.

Pytanie 34

Wskaż fragment CSS, który odpowiada rozkładowi bloków 2-5, zakładając, że zostały one zbudowane na podstawie podanego kodu HTML.

A. Kod 3

B. Kod 4

C. Kod 1

D. Kod 2

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Kod 2 jest prawidłowy, ponieważ dla bloków 2 i 3 stosowane jest ustawienie float: left; co pozwala na ich ułożenie w jednym wierszu z lewej strony. Blok 4 z float: right; umiejscawia się po prawej stronie, co umożliwia uzyskanie układu bloków 2-4 w jednej linii, odpowiadając schematowi. Blok 5 z float: left; rozpoczyna nowy wiersz poniżej, zgodnie z założonym układem. Takie użycie właściwości float oraz width pozwala na zorganizowanie elementów na stronie bez użycia flexbox lub grid, co jest klasycznym podejściem do układu strony w CSS. Dobrym przykładem praktycznego zastosowania jest tworzenie responsywnych layoutów, gdzie float można używać do kontrolowania przepływu elementów na mniejszych ekranach. Mimo że obecnie technologia flexbox i grid jest bardziej popularna, znajomość stosowania float nadal jest istotna, zwłaszcza w kontekście starszych projektów, które mogą wymagać utrzymania zgodności z wcześniejszymi wersjami CSS. To rozwiązanie zapewnia zgodność z wieloma starszymi przeglądarkami, co jest kluczowe w przypadku długoterminowych projektów webowych.

Pytanie 35

Metainformacja "Description" zawarta w pliku HTML powinna zawierać


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

A. opis zawartości strony

B. nazwę aplikacji, w której stworzono stronę

C. informację o autorze strony

D. listę kluczowych fraz używanych przez wyszukiwarki internetowe

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metainformacja 'Description' zawarta w pliku HTML pełni kluczową rolę w optymalizacji stron internetowych pod kątem wyszukiwarek. Jest to krótki opis treści strony, który pomaga wyszukiwarkom zrozumieć, o czym jest dana strona. Wartościowy opis powinien być zwięzły, informacyjny i zachęcający do kliknięcia, ponieważ często pojawia się w wynikach wyszukiwania jako fragment tekstu, obok tytułu strony. Przykładem dobrze skonstruowanego opisu może być 'Dowiedz się, jak skutecznie zarządzać swoimi finansami osobistymi dzięki naszym praktycznym poradnikom i wskazówkom'. Taki opis nie tylko informuje użytkownika o zawartości strony, ale również zawiera słowa kluczowe, które mogą przyciągnąć uwagę. Zgodnie z wytycznymi Google, długość opisu powinna wynosić od 150 do 160 znaków, aby uniknąć obcięcia tekstu w wynikach wyszukiwania. Posiadanie dobrze napisanej metainformacji 'Description' jest więc niezbędne dla skutecznej strategii SEO i zwiększenia widoczności strony w internecie.

Pytanie 36

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

A. <h1>tekst</h1>

B. <big>tekst</big>

C. tekst

D. tekst

Brak odpowiedzi na to pytanie.

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

Pytanie 37

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

A. akapit3

B. akapit4

C. akapit2

D. akapit

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementsByClassName('akapit') w JavaScript jest metodą DOM, która zwraca kolekcję wszystkich elementów w dokumencie HTML, które mają przypisaną określoną klasę. W tym przypadku interesuje nas klasa 'akapit'. Poprawna odpowiedź to akapit4, ponieważ ten akapit ma atrybut class ustawiony na 'akapit'. Zastosowanie klasy w HTML jest zgodne z najlepszymi praktykami programistycznymi, ponieważ pozwala na łatwe stylowanie i manipulowanie grupą elementów za pomocą CSS i JavaScript. Na przykład, jeśli chcemy zmienić kolor tekstu wszystkich akapitów z klasą 'akapit', możemy to zrobić jednym poleceniem w CSS: .akapit { color: red; }. Ponadto, metoda getElementsByClassName zwraca tzw. HTMLCollection, co oznacza, że możemy iterować po tej kolekcji i modyfikować jej elementy. Użycie klas w ten sposób wspiera zasadę separacji treści od prezentacji, co jest kluczowe w nowoczesnym podejściu do tworzenia stron internetowych.

Pytanie 38

Podczas weryfikacji pliku HTML5 pojawił się komunikat brzmiący: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

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

B. element <title> nie został prawidłowo zamknięty przez </title>.

C. nie zdefiniowano obowiązkowego atrybutu title w tagu <img>.

D. element <title> nie jest konieczny.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest całkowicie trafna! Zgodnie z tym, co mówi specyfikacja HTML5, element <title> rzeczywiście jest obowiązkowy i musi znaleźć się w sekcji <head>. To bardzo ważne, bo tytuł strony to coś, co pokazuje się na karcie przeglądarki, a także w wynikach wyszukiwania. Jak go brakuje, to strona nie spełnia podstawowych wymogów i pojawia się błąd walidacji. Fajnie jest mieć unikalne i opisowe tytuły dla każdej strony, bo to korzystnie wpływa na SEO i użyteczność. Na przykład, jeśli robiłbyś stronę o kulinariach, to tytuł mógłby być "Przepisy na zdrowe obiady", co od razu informuje użytkowników i wyszukiwarki, o co chodzi. Dobrze dobrany tytuł to naprawdę kluczowa sprawa, bo ma duży wpływ na to, jak użytkownicy postrzegają Twoją stronę i czy klikną w link. Pamiętaj też, że element <title> powinien być krótki, ale wystarczająco informacyjny, zazwyczaj nie dłuższy niż 60 znaków.

Pytanie 39

Witryna internetowa powinna mieć zaprezentowaną strukturę bloków. Aby osiągnąć ten układ, należy przypisać sekcjom odpowiednie właściwości w następujący sposób:

A. float tylko dla bloków: 3, 4; clear dla bloku 5

B. float wyłącznie dla bloku 5; clear dla bloku 2

C. float tylko dla bloków: 2, 3, 4; clear dla bloku 5

D. float tylko dla bloku 2; clear dla bloków: 3, 4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Żeby osiągnąć układ, który widzisz w pytaniu, musisz dobrze zrozumieć, jak działają właściwości CSS float i clear. Właściwość float umożliwia przesunięcie elementów w lewo lub w prawo w stosunku do ich kontenera oraz innych elementów. To jest przydatne do tworzenia układów kolumnowych. W tym przypadku bloki 2, 3 i 4 muszą być przesunięte w prawo, żeby ułożyły się obok siebie na poziomie. Blok 2 jest największy i pełni rolę ramki dla pozostałych bloków. Użycie float dla tych bloków daje oczekiwany efekt. Jednak żeby blok 5 znalazł się pod całą strukturą, musisz zastosować clear dla bloku 5. Dzięki temu clear, blok 5 nie będzie otoczony przez inne elementy z float i znajdzie się poniżej. Z mojego doświadczenia, praktyczne wykorzystanie float i clear jest świetne, bo pozwala na tworzenie responsywnych układów bez potrzeby sięgania po bardziej skomplikowane metody jak flexbox czy grid. Choć float nie jest już tak powszechnie stosowany w profesjonalnych projektach, dobrze jest znać jego działanie i ograniczenia, żeby lepiej rozumieć ewolucję CSS oraz móc pracować z kodem, który jeszcze wykorzystuje te klasyczne metody.

Pytanie 40

W HTML formularzu użyto elementu <input>. Pole, które się pojawi, ma pozwalać na wprowadzenie maksymalnie

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

A. 20 znaków, które będą widoczne w trakcie wprowadzania

B. 30 znaków, które będą widoczne podczas wpisywania

C. 30 znaków, które nie będą widoczne w polu tekstowym

D. 20 znaków, które nie będą widoczne w polu tekstowym

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Znacznik <input type="password"> w HTML jest rzeczywiście super ważny. Umożliwia on użytkownikom wpisywanie haseł, a to, co najfajniejsze, to że znaki są ukryte, więc nikt nie zobaczy, co piszesz. Atrybut maxlength="20" jest tutaj pomocny, bo ogranicza liczbę znaków do 20, co jest praktyczne - zbyt długie hasła ciężko zapamiętać, a krótkie mogą być niebezpieczne. Natomiast size="30" to tylko kwestia szerokości pola, więc nie wpływa na ilość znaków, które można wpisać. Generalnie, dobrze jest trzymać się tych ograniczeń, bo to pomaga w projektowaniu formularzy i utrzymywaniu porządku w interfejsie. Z mojej perspektywy, znajomość tych atrybutów jest naprawdę przydatna przy tworzeniu stron, bo można lepiej zrozumieć, jak to wszystko działa.

Rozpocznij nowy egzamin

Powrót do strony głównej