Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 17 kwietnia 2026 08:15
Data zakończenia: 17 kwietnia 2026 09:06

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Wskaż zapis warunku w języku JavaScript, który ma na celu sprawdzenie, czy spełniony jest przynajmniej jeden z poniższych przypadków:
1) dowolna liczba naturalna a jest liczbą trzycyfrową
2) dowolna liczba całkowita b ma wartość ujemną

A. ((a > 99) && (a < 1000)) || (b < 0)

B. ((a > 99) || (a < 1000)) && (b < 0)

C. ((a > 99) && (a < 1000)) && (b < 0)

D. ((a > 99) || (a < 1000)) || (b < 0)

Odpowiedź ((a > 99) && (a < 1000)) || (b < 0) jest poprawna, ponieważ spełnia wymagania dotyczące sprawdzenia dwóch warunków. Pierwsza część warunku, czyli (a > 99) && (a < 1000), precyzyjnie weryfikuje, czy liczba 'a' jest trzycyfrowa. Wartości, które spełniają ten warunek, to liczby od 100 do 999. Druga część warunku, czyli (b < 0), efektywnie sprawdza, czy liczba 'b' jest liczbą ujemną. Połączenie tych dwóch warunków za pomocą operatora logicznego OR (||) oznacza, że wystarczy, iż jeden z nich będzie prawdziwy, aby cały warunek został uznany za spełniony. To podejście jest zgodne z dobrymi praktykami programowania, gdzie klarowność i zwięzłość kodu są kluczowe, co ułatwia jego późniejsze utrzymanie. W zastosowaniach praktycznych, taki warunek mógłby być użyty w walidacji danych wejściowych, na przykład w formularzach, gdzie użytkownicy wprowadzają różne wartości, a program musi zapewnić, że przynajmniej jeden z warunków jest spełniony.

Pytanie 2

W języku CSS atrybut font-size przyjmuje, zgodnie z nazwami, wartości

A. wyłącznie small, medium, large

B. zaledwie big oraz small

C. jedynie small, smaller, large, larger

D. z zestawu xx-small, x-small, medium, large, x-large, xx-large

Właściwość font-size w CSS pozwala na określenie rozmiaru czcionki za pomocą różnych wartości, w tym predefiniowanych słów kluczowych, które umożliwiają łatwe dostosowanie wielkości tekstu w dokumentach HTML. Oprócz typowych wartości takich jak small, medium i large, CSS oferuje również bardziej szczegółowe opcje, takie jak xx-small, x-small, x-large oraz xx-large. Dzięki temu projektanci mogą lepiej dopasować rozmiar tekstu do kontekstu wizualnego strony. Użycie tych wartości pozwala na uniknięcie problemów z uniwersalnością, gdyż są one zrozumiałe i zgodne z różnymi rozdzielczościami ekranów. Na przykład, podczas projektowania responsywnej witryny, zastosowanie wartości xx-large dla nagłówków oraz x-small dla przypisów skutecznie poprawia czytelność i estetykę. Zgodnie z najlepszymi praktykami, warto również rozważyć użycie jednostek względnych, takich jak em czy rem, co pozwala na jeszcze większą elastyczność w dostosowywaniu rozmiarów tekstu do preferencji użytkownika oraz rozmiaru ekranu.

Pytanie 3

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

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

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

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

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

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

Pytanie 4

Funkcja colspan umożliwia łączenie komórek tabeli w układzie poziomym, natomiast rowspan w układzie pionowym. Która z poniższych tabel odpowiada fragmentowi kodu w języku HTML?

A. Odpowiedź B

B. Odpowiedź D

C. Odpowiedź C

D. Odpowiedź A

Polecenie rowspan w języku HTML służy do łączenia komórek tabeli w pionie. W podanym fragmencie kodu HTML, atrybut rowspan jest użyty z wartością 2 w pierwszej komórce pierwszego wiersza. Oznacza to, że ta komórka będzie się rozciągać na dwa wiersze, co jest widoczne w odpowiedzi B. Tabelę HTML można wykorzystać do tworzenia złożonych struktur danych, gdzie rowspan jest kluczowe w przypadku, gdy chcemy zminimalizować liczbę komórek i lepiej zorganizować dane w pionowe bloki. Użycie rowspan jest zgodne ze standardami HTML5, które zalecają semantyczne i logiczne układanie danych. Praktyczne zastosowanie rowspan można znaleźć w projektach takich jak raporty finansowe czy skomplikowane formularze, gdzie często wymagane jest łączenie komórek w pionie. W projektowaniu stron internetowych zaleca się stosowanie tabel w przypadkach rzeczywistych danych tabelarycznych, a nie do układu strony, co jest zgodne z wytycznymi dotyczącymi dostępności WCAG.

Pytanie 5

Kod został napisany w języku JavaScript. W podanej definicji obiektu metodą jest element o nazwie.

var obj1 = {
  czescUlamkowa: 10,
  czescCalkowita: 20,
  oblicz: function() {.....}
}

A. oblicz

B. czescCalkowita

C. czescUlamkowa

D. obj1

W podanym kodzie JavaScript obiekt obj1 zawiera trzy elementy czescUlamkowa czescCalkowita i oblicz Istotnym aspektem definicji obiektów w JavaScript jest możliwość definiowania metod czyli funkcji będących częścią obiektu W podanym obiekcie metoda oblicz zdefiniowana jest jako funkcja przypisana do klucza o tej samej nazwie To właśnie odróżnia metodę od zwykłych właściwości obiektu czyli czescUlamkowa i czescCalkowita które są wartościami liczbowymi Metody w JavaScript są wykorzystywane do wykonywania operacji wewnątrz obiektu co pozwala na manipulację jego danymi i zachowaniami Przykładowo metoda oblicz może służyć do kalkulacji bazującej na innych właściwościach obiektu takich jak czescUlamkowa i czescCalkowita Definiując metody w obiektach uzyskujemy spójność i enkapsulację dzięki czemu obiekt może sam zarządzać swoimi danymi i operacjami Rozumienie metod w kontekście obiektów jest kluczowe zwłaszcza w paradygmacie programowania obiektowego gdzie obiekty mogą posiadać zarówno dane jak i funkcjonalności związane z tymi danymi

Pytanie 6

W języku JavaScript trzeba sformułować warunek, który będzie spełniony, gdy zmienna a będzie dowolną liczbą naturalną dodatnią (więcej niż 0) lub gdy zmienna b będzie dowolną liczbą z przedziału domkniętego od 10 do 100. Wyrażenie logiczne w tym warunku powinno mieć postać

A. (a > 0) || ((b >= 10) && (b <= 100))

B. (a > 0) && ((b >= 10) || (b <= 100))

C. (a > 0) && ((b >= 10) && (b <= 100))

D. (a > 0) || ((b >= 10) || (b <= 100))

Poprawna odpowiedź (a > 0) || ((b >= 10) && (b <= 100)) uwzględnia wymaganie, aby warunek był spełniony, gdy zmienna a jest liczbą naturalną dodatnią bądź zmienna b znajduje się w przedziale od 10 do 100, włącznie. W tym przypadku użycie operatora logicznego '||' (lub) jest kluczowe, ponieważ wystarczy, że jeden z warunków będzie prawdziwy, aby cały warunek był spełniony. Przykładem może być skrypt walidujący dane wejściowe użytkownika: jeśli zmienna a przechowuje wartość 5 (czyli liczbę naturalną dodatnią), to niezależnie od wartości zmiennej b, warunek będzie prawdziwy. Analogicznie, jeśli a wynosi 0, a b = 15, warunek również będzie spełniony, ponieważ b mieści się w wymaganym przedziale. Taka konstrukcja warunku jest zgodna z dobrą praktyką programistyczną, gdyż pozwala na jasne i zrozumiałe określenie, kiedy pewne zasady powinny być stosowane. Zastosowanie operatorów logicznych w taki sposób wspiera tworzenie czytelnych i elastycznych warunków, co jest istotne w kontekście utrzymania kodu i jego przyszłych modyfikacji.

Pytanie 7

Czy przedstawione w języku CSS ustawienia czcionki będą dotyczyć dla ```* { font-family: Tahoma; color: Teal; }```?

A. całego dokumentu HTML, niezależnie od późniejszych reguł CSS

B. znaczników z klasą przypisaną równą *

C. całego dokumentu HTML, jako domyślne formatowanie dla wszystkich elementów strony

D. znaczników o id równym *

Właściwość CSS zastosowana w podanym kodzie dotyczy wszystkich elementów HTML na stronie, ponieważ użycie selektora * oznacza, że formatowanie będzie miało zastosowanie do każdego elementu, niezależnie od jego typu. Oznacza to, że czcionka Tahoma oraz kolor Teal będą domyślnie stosowane do tekstu we wszystkich znacznikach HTML. Tego rodzaju podejście jest zgodne z dobrymi praktykami w projektowaniu stron, ponieważ pozwala na jednolite formatowanie bez konieczności stylizowania każdego elementu z osobna. Przykładem zastosowania może być stworzenie spójnego wyglądu strony, gdzie wszystkie nagłówki, akapity i inne teksty mają ten sam styl, co poprawia czytelność i estetykę. Dodatkowo, takie zastosowanie stylów jest efektywne, gdyż zmiana stylu w kontekście całej strony odbywa się poprzez edytowanie jednego miejsca w kodzie CSS, co oszczędza czas i zmniejsza ryzyko błędów.

Pytanie 8

Zaprezentowano tabelę stworzoną za pomocą kodu HTML, bez zastosowania stylów CSS. Która część kodu HTML odnosi się do pierwszego wiersza tabeli?

A. A

B. B

C. D

D. C

Odpowiedź D jest prawidłowa, ponieważ używa znaczników <th> do zdefiniowania nagłówków kolumn w tabeli. Znaczniki <th> są używane w tabelach HTML do określania komórek nagłówkowych, które domyślnie są pogrubione i wyśrodkowane. Taki format jest zgodny z zasadami dostępności i użyteczności, ponieważ przeglądarki i czytniki ekranowe traktują <th> jako nagłówki, co poprawia zrozumienie struktury tabeli przez użytkowników. Znaczniki <b> w <th> dodatkowo stylizują tekst, co jest zgodne z przedstawionym obrazem. Używanie odpowiednich znaczników semantycznych to dobra praktyka, która zwiększa czytelność kodu i wspiera dostępność. W kontekście praktycznym, poprawne użycie <th> umożliwia lepsze formatowanie i interpretację danych w tabeli podczas renderowania w przeglądarkach, a także wspiera responsywne projektowanie, gdzie układ tabeli automatycznie dostosowuje się do różnych rozmiarów ekranów. Dlatego korzystanie z <th> do definiowania pierwszego wiersza jako nagłówka jest zgodne z najlepszymi praktykami projektowania stron internetowych.

Pytanie 9

W CSS, aby ustalić różne formatowanie dla pierwszej litery w akapicie, trzeba użyć selektora

A. dziecka p + first-letter

B. klasy p.first-letter

C. pseudoelementu p::first-letter

D. atrybutu p [first-letter]

Aby zdefiniować odmienne formatowanie dla pierwszej litery akapitu w CSS, używamy pseudoelementu p::first-letter. Ten pseudoelement pozwala na stosowanie unikalnych stylów tylko do pierwszej litery pierwszego bloku tekstu w danym elemencie akapitu. Dzięki temu, możemy na przykład zwiększyć rozmiar czcionki, zmienić kolor, dodać marginesy lub inne efekty wizualne, które wyróżnią tę literę. Użycie p::first-letter jest zgodne z aktualnymi standardami CSS, co zapewnia szeroką kompatybilność z różnymi przeglądarkami. Przykładowe zastosowanie to: p::first-letter { font-size: 200%; color: red; } co spowoduje, że pierwsza litera każdego akapitu będzie większa i czerwona. Pseudoelementy, takie jak ::first-letter, są niezwykle użyteczne w projektowaniu typograficznym, umożliwiając artystyczne podejście do prezentacji tekstu, co może przyciągnąć uwagę czytelników i nadać stronie unikalny charakter.

Pytanie 10

Jakie oznaczenie powinno się zastosować, aby umieścić film na stronie internetowej?

A. <media>

B. <video>

C. <audio>

D. <movie>

Znacznik <video> jest właściwym elementem HTML używanym do osadzania filmów na stronach internetowych. Jest on częścią standardu HTML5, który wprowadził nowoczesne podejścia do multimediów w sieci. Umożliwia on nie tylko osadzanie wideo, ale także dostosowywanie jego odtwarzania, takie jak automatyczne odtwarzanie, powtarzanie oraz kontrolowanie głośności. Przykład użycia znacznika <video>: <video src='film.mp4' controls>Odtwarzacz wideo</video>. Warto również dodać atrybuty, takie jak 'controls', które dodają przyciski do odtwarzania, pauzowania i regulacji głośności, co znacząco poprawia użyteczność dla użytkowników. Dobrą praktyką jest również używanie atrybutu 'poster' do określenia miniatury, która będzie wyświetlana przed rozpoczęciem odtwarzania, co przyciąga uwagę i zwiększa estetykę strony. Znacznik <video> wspiera różne formaty plików, takie jak MP4, WebM i Ogg, co zapewnia szeroką kompatybilność z różnymi przeglądarkami internetowymi, co jest kluczowe w dzisiejszym zróżnicowanym środowisku online.

Pytanie 11

Aby tworzyć strony internetowe w sposób graficzny, należy skorzystać z

A. edytora CSS

B. przeglądarki internetowej

C. programu typu WYSIWYG

D. programu MS Office Picture Manager

Programy typu WYSIWYG (What You See Is What You Get) są narzędziami umożliwiającymi tworzenie stron internetowych w sposób wizualny, co znacznie ułatwia proces projektowania. Użytkownik może edytować strony bez konieczności znajomości języków programowania, takich jak HTML czy CSS, ponieważ te programy generują kod automatycznie na podstawie działań użytkownika. Przykładami takich aplikacji są Adobe Dreamweaver, Wix czy WordPress, które pozwalają na łatwe dodawanie treści, stylów i multimediów. Dzięki zastosowaniu programów WYSIWYG, projektanci mogą skupić się na estetyce i funkcjonalności stron, co jest zgodne z dobrymi praktykami branżowymi, które promują użyteczność i dostępność. Warto również zauważyć, że wiele z tych narzędzi oferuje szereg szablonów i komponentów, które przyspieszają proces tworzenia i zapewniają zgodność z aktualnymi standardami webowymi (np. W3C).

Pytanie 12

Fragment kodu w języku HTML zawarty w ramce ilustruje zestawienie

A. numerowaną.

B. wypunktowaną.

C. skrótów.

D. odnośników.

Kod HTML zawierający znaczniki <ol> oraz <li> tworzy listę numerowaną ponieważ <ol> oznacza ordered list czyli listę uporządkowaną co skutkuje automatycznym numerowaniem każdego elementu w przeglądarkach internetowych. Znaczniki <li> reprezentują pojedyncze elementy listy zapewniając organizację danych w czytelnej formie. Taki sposób przedstawiania informacji jest powszechnie stosowany w tworzeniu dokumentów HTML i stron internetowych gdzie hierarchia i kolejność elementów ma kluczowe znaczenie. Za pomocą CSS można dodatkowo dostosować styl numerowania oraz wizualne aspekty listy co pozwala na większą elastyczność w projektowaniu interfejsu użytkownika. Standardy internetowe takie jak te rekomendowane przez W3C zachęcają do stosowania semantycznych znaczników co poprawia dostępność i SEO strony. Ponadto listy numerowane są użyteczne w sytuacjach gdy wymagana jest jasna kolejność wykonywania zadań lub prezentacja kroków w procesie co czyni je idealnym narzędziem zarówno w dokumentacji technicznej jak i w interaktywnych przewodnikach online.

Pytanie 13

Opracowanie logicznego układu strony internetowej wiąże się z

A. zdefiniowaniem adresów URL dla podstron strony.

B. umiejscowieniem elementów w konkretnych punktach strony.

C. określeniem zawartości strony.

D. stworzeniem zbioru grafik dla strony.

Projektowanie logicznego układu witryny polega na efektywnym rozmieszczeniu elementów w konkretnych miejscach witryny, co jest kluczowe dla zapewnienia optymalnej użyteczności oraz nawigacji. Proces ten obejmuje analizę interakcji użytkowników z treścią oraz zaprojektowanie układu, który umożliwia intuicyjne poruszanie się po stronie. Przykładowo, umiejscowienie menu nawigacyjnego w górnej części strony oraz umieszczenie najważniejszych informacji w widocznych miejscach zwiększa szanse na konwersję. Warto również uwzględnić zasady projektowania responsywnego, co oznacza, że układ powinien być dostosowany do różnych rozmiarów ekranów, zapewniając spójne doświadczenie na urządzeniach mobilnych i stacjonarnych. Standardy takie jak WCAG (Web Content Accessibility Guidelines) również podkreślają znaczenie logicznego rozmieszczenia elementów, aby zapewnić dostępność dla osób z niepełnosprawnościami. Ponadto, dobrze zaprojektowany układ pomaga w optymalizacji SEO, umożliwiając lepsze indeksowanie przez wyszukiwarki.

Pytanie 14

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr { background-color: Pink; }

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

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

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 15

Wskaż, który zapis należy zastosować w celu wyświetlenia grafiki obrazek.png na stronie WWW w pliku plik.html.

A. <img src="obrazek.png">

B. <img src="/../katalog_1/katalog_B/obrazek.png">

C. <img src="/../katalog_2/katalog_B/obrazek.png">

D. <img src="../../katalog_2/katalog_B/obrazek.png">

Poprawny zapis <img src="../../katalog_2/katalog_B/obrazek.png"> wynika bezpośrednio z położenia pliku HTML i grafiki w strukturze katalogów. plik.html znajduje się w katalogu_1/katalog_A, a obrazek.png w katalogu_2/katalog_B. Żeby przeglądarka mogła odnaleźć plik graficzny, ścieżka względna musi krok po kroku „przejść” po tej strukturze. Najpierw ../../ cofa nas dwa poziomy w górę: z katalog_A do katalog_1, a potem z katalog_1 do katalogu głównego, w którym znajdują się katalog_1 i katalog_2. Następnie wchodzimy do katalog_2, potem do katalog_B i dopiero tam leży obrazek.png. To dokładnie odzwierciedla poprawną, relatywną drogę od pliku HTML do zasobu graficznego. Z mojego doświadczenia w projektach webowych używanie poprawnych ścieżek względnych jest kluczowe, szczególnie gdy serwis ma rozbudowaną strukturę folderów albo jest później przenoszony między środowiskami (np. localhost, serwer testowy, produkcja). Dzięki ścieżkom względnym, takim jak ../../katalog_2/katalog_B/obrazek.png, kod HTML jest bardziej przenośny i nie trzeba modyfikować adresów po każdej zmianie domeny czy katalogu głównego. Warto też pamiętać, że atrybut src w znaczniku <img> zawsze wskazuje na zasób, który przeglądarka ma pobrać – może to być ścieżka względna, bezwzględna w obrębie serwera lub pełny URL z protokołem. W praktyce przy większych projektach dobrze jest utrzymywać spójną konwencję nazewnictwa katalogów (np. img, assets, static) i stosować logiczną strukturę, żeby takie ścieżki były łatwe do ogarnięcia. Moim zdaniem warto też na wczesnym etapie przyzwyczaić się do „ręcznego” analizowania, skąd jest liczona ścieżka – zawsze od lokalizacji aktualnego dokumentu HTML, chyba że używamy ścieżek absolutnych od katalogu głównego serwera.

Pytanie 16

Podana linia kodu została napisana w języku?

document.getElementById("paragraf1").innerHTML = wynik;

A. PHP

B. C#

C. JavaScript

D. Python

Odpowiedź JavaScript jest prawidłowa, ponieważ linia kodu, którą przedstawiono, wykorzystuje standardową metodę DOM (Document Object Model) do dynamicznej manipulacji zawartością HTML. W kodzie 'document.getElementById("paragraf1").innerHTML = wynik;' funkcja 'getElementById' służy do odnajdywania elementu HTML o identyfikatorze 'paragraf1'. Następnie, przypisanie wartości zmiennej 'wynik' do 'innerHTML' tego elementu zmienia jego zawartość tekstową. JavaScript jest głównym językiem do tworzenia interaktywnych stron internetowych i umożliwia programistom tworzenie dynamicznych funkcjonalności. Przykład praktycznego użycia to sytuacja, gdy na stronie internetowej chcemy wyświetlić obliczone wyniki w czasie rzeczywistym, np. w aplikacjach kalkulatorów online. W kontekście standardów branżowych, używanie DOM do manipulacji elementami HTML w JavaScript jest uważane za dobrą praktykę, a jego znajomość jest niezbędna dla każdego web developera.

Pytanie 17

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. D.

B. A.

C. C.

D. B.

Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 18

Znak <s> w HTML powoduje

A. skreślenie tekstu

B. migotanie tekstu

C. podkreślenie tekstu

D. pochylenie tekstu

Znacznik <s> w języku HTML jest używany do oznaczania tekstu, który jest przekreślony, co jest przydatne, gdy chcemy wskazać, że dana treść nie jest już aktualna lub jest nieprawidłowa. Na przykład, w dokumencie HTML możemy użyć znacznika <s> do przekreślenia starej ceny produktu, aby podkreślić, że cena została obniżona. Taki sposób prezentacji informacji jest zgodny z zasadami dostępności, ponieważ przekreślony tekst wciąż jest czytelny przez technologie asystujące, co pozwala użytkownikom na zrozumienie zmiany w kontekście treści. W praktyce zastosowanie tego znacznika może również wpłynąć na estetykę strony, eliminując potrzebę stosowania stylów CSS do osiągnięcia tego samego efektu.

Pytanie 19

Element

<meta charset="utf-8">

definiuje metadane dotyczące strony internetowej, odnosząc się do

A. opisu witryny

B. słów kluczowych

C. kodowania znaków

D. języka witryny

Ten element <meta charset="utf-8"> jest naprawdę ważny w nagłówku stron HTML, bo to on mówi przeglądarkom, jak odczytywać znaki w Twoim dokumencie. Dzięki temu tekst wyświetla się poprawnie na różnych urządzeniach. UTF-8 jest najbardziej popularnym kodowaniem, bo obsługuje niemal wszystkie znaki z różnych języków, co sprawia, że Twoja strona może być bardziej uniwersalna. Na przykład, jeśli masz tekst po polsku, to użycie UTF-8 upewnia się, że takie znaki jak ą czy ć będą prawidłowo pokazane. Właśnie dlatego warto stosować UTF-8, bo to, co zaleca W3C, jest bardzo sensowne - chodzi przecież o to, żeby strona była dostępna dla każdego, niezależnie od tego, z jakiego języka korzysta.

Pytanie 20

W trakcie weryfikacji stron internetowych nie analizuje się

A. źródeł pochodzenia narzędzi edytorskich

B. funkcjonowania linków

C. błędów składniowych w kodzie

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

W procesie walidacji stron internetowych kluczowym celem jest upewnienie się, że kod HTML, CSS i inne zasoby są zgodne z obowiązującymi standardami W3C (World Wide Web Consortium). Walidacja skutecznie identyfikuje błędy składniowe, które mogą wpływać na renderowanie strony, analizuje działanie linków, a także sprawdza, jak strona zachowuje się w różnych przeglądarkach. Jednak aspekty związane z pochodzeniem narzędzi edytorskich nie są istotnym elementem tego procesu. Narzędzia edytorskie, takie jak edytory tekstowe czy IDE, są jedynie środkiem do tworzenia kodu, a ich źródło nie powinno wpływać na to, czy strona jest poprawnie zaimplementowana. Na przykład, strona może być poprawnie zwalidowana niezależnie od tego, czy została zbudowana w popularnym edytorze, takim jak Visual Studio Code, czy innym mniej znanym narzędziu. Dlatego koncentrowanie się na źródłach narzędzi edytorskich w kontekście walidacji byłoby nieuzasadnione i nieprzydatne.

Pytanie 21

Poniżej zamieszczony fragment skryptu w JavaScript zwróci

A. ze

B. wodzenia

C. owodzeni

D. wo

Patrząc na ten skrypt JavaScript, który działa na łańcuchach i wypisuje różne fragmenty tekstu, można się natknąć na pewne nieporozumienia związane z metodą substring. Z doświadczenia, wiem, że początkujący programiści czasem mylą się w odczytywaniu indeksów w tej metodzie. W skrócie, substring wyciąga dwa argumenty: początkowy i końcowy, ale działa tak, że bierze znaki od początkowego do przed końcowym. Więc gdy mamy substring(3,9) na 'Powodzenia na egzaminie', to zwraca 'odzeni'. Potem, jak wywołasz z.substring(2,4) na 'odzeni', to dostajesz 'ze'. Często błędnie myśli się, że substring bierze znaki do końca, co prowadzi do pomyłek. I jest jeszcze różnica między substring a substr, co też jest dość mylące. W kontekście tego egzaminu, ważne jest, aby rozumieć te drobne szczegóły i używać metod w odpowiednich sytuacjach. Z mojego doświadczenia, to klucz do efektywnej pracy z tekstem w skryptach webowych.

Pytanie 22

W języku CSS wprowadzono poniższe formatowanie:

p > i { color: blue; }

Oznacza to, że tekst w kolorze niebieskim będzie zapisany:

A. pogrubiony tekst akapitu

B. cały tekst akapitu, bez względu na jego formatowanie

C. cały tekst nagłówków, bez względu na ich formatowanie

D. pochylony tekst akapitu

W języku CSS selektor > jest używany do stylizowania bezpośrednich potomków danego elementu. W podanym przykładzie p > i oznacza, że reguła CSS będzie zastosowana do elementu i będącego bezpośrednim dzieckiem elementu p. To oznacza, że tylko tekst zapisany w tagu i wewnątrz paragrafu p będzie miał kolor niebieski. Jest to powszechnie stosowane podejście do precyzyjnego stylizowania elementów na stronach internetowych, z zachowaniem struktury dokumentu HTML. Takie rozwiązanie pozwala na lepszą kontrolę nad wyglądem i prezentacją dokumentu, co jest istotne przy tworzeniu responsywnych i estetycznych stron. Praktyczne zastosowanie tego stylu można zobaczyć w przypadku, gdy chcemy wyróżnić pewne frazy w paragrafie, na przykład cytaty lub terminy. Warto pamiętać, że używanie selektorów potomstwa poprawia czytelność i efektywność kodu CSS, co jest dobrą praktyką w profesjonalnym kodowaniu frontendowym. Zachowanie spójności i przejrzystości stylów jest kluczowe w większych projektach, gdzie wiele osób pracuje nad kodem.

Pytanie 23

Wskaż prawidłową definicję funkcji w języku JavaScript?

A. typ_funkcji nazwa_funkcji(argumenty) {instrukcje;}

B. new nazwa_funkcji(argumenty) {instrukcje;}

C. function nazwa_funkcji(argumenty) {instrukcje;}

D. nazwa_funkcji(argumenty) {instrukcje;}

Definicja funkcji w języku JavaScript przy użyciu słowa kluczowego 'function' jest standardowym sposobem deklaracji funkcji. Poprawny zapis 'function nazwa_funkcji(argumenty) {instrukcje;}' jasno wskazuje, że tworzona jest nowa funkcja, której nazwa oraz argumenty są zdefiniowane. Przykładowo, można stworzyć funkcję dodającą dwie liczby: 'function dodaj(a, b) { return a + b; }'. Funkcje w JavaScript mogą być wywoływane w dowolnym miejscu w kodzie, co czyni je niezwykle elastycznymi. Dodatkowo, dzięki temu, że JavaScript obsługuje funkcje jako obiekty pierwszej klasy, można je przekazywać jako argumenty do innych funkcji, przypisywać do zmiennych oraz zwracać z innych funkcji. Warto również zauważyć, że w kontekście dobrych praktyk, używanie funkcji z jasnymi nazwami i dobrze zdefiniowanymi argumentami zwiększa czytelność oraz utrzymanie kodu, co jest istotne w pracy zespołowej oraz przy rozwijaniu większych aplikacji.

Pytanie 24

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

<title>Strona o psach</title>

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

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. Zostanie wyświetlony w treści strony, na samej górze.

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

Pytanie 25

W CSS wartości: underline, overline, blink są powiązane z atrybutem

A. text-style

B. font-weight

C. font-style

D. text-decoration

Atrybut text-decoration w CSS jest tym, co pozwala na dodawanie różnych efektów do tekstu. Możemy dzięki niemu użyć takich rzeczy jak underline, overline czy nawet blink, chociaż to ostatnie nie jest już zbyt popularne, bo wiele przeglądarek to ignoruje ze względu na dostępność. Dzięki tym efektom tekst może wyglądać bardziej estetycznie, a czytelność też się poprawia. Na przykład, jeśli użyjesz 'p { text-decoration: underline; }', to cały tekst w tym paragrafie będzie podkreślony. W CSS3 dodano też nowe możliwości, jak text-decoration-color czy text-decoration-style, co daje jeszcze większą kontrolę nad tym, jak nasz tekst będzie wyglądał. Dlatego myślę, że umiejętność korzystania z text-decoration jest naprawdę ważna dla każdego, kto zajmuje się tworzeniem stron internetowych.

Pytanie 26

Który z obrazków ilustruje efekt działania podanego fragmentu kodu HTML?

A. Obrazek A

B. Obrazek D

C. Obrazek B

D. Obrazek C

Prawidłowa odpowiedź to C ponieważ atrybut rowspan="2" w komórce oznacza że komórka ta zajmuje miejsce w dwóch wierszach. W kodzie HTML mamy tabelę z dwoma wierszami. W pierwszym wierszu znajdują się dwie komórki pierwsza z tekstem 'pierwszy' ma ustawiony rowspan na 2 co sprawia że zajmuje miejsce w obu wierszach tabeli. Druga komórka w pierwszym wierszu zawiera tekst 'drugi'. W drugim wierszu znajduje się jedna komórka z tekstem 'trzeci'. Taki układ powoduje że komórka z 'pierwszy' rozciąga się na wysokość dwóch wierszy a pozostałe komórki 'drugi' i 'trzeci' są obok siebie w pierwszym i drugim wierszu obok tej rozciągniętej komórki. Zastosowanie atrybutu rowspan to popularna technika w tworzeniu złożonych układów tabeli i pozwala na efektywne wykorzystanie przestrzeni układu. Jest to dobra praktyka stosowana w celu zachowania czytelności danych w tabelach na stronach internetowych a także pomagająca w poprawnym renderowaniu danych w czytnikach ekranu co wspiera dostępność strony WWW.

Pytanie 27

Poniżej znajduje się fragment kodu w języku HTML. Przedstawia on definicję listy:

A. C

B. D

C. B

D. A

Odpowiedź C jest poprawna ponieważ przedstawiony fragment kodu HTML definiuje uporządkowaną listę zagnieżdżoną W tym kodzie zauważamy że główna lista jest uporządkowana oznaczona jako ol co definiuje elementy listy jako numerowane po kolei Elementy li w tej liście to punkty jeden dwa i trzy Na szczególną uwagę zasługuje fakt że drugi element li zawiera zagnieżdżoną nieuporządkowaną listę ul co jest zgodne ze standardami HTML dotyczącymi zagnieżdżania list Zgodnie z dobrymi praktykami zagnieżdżanie list w HTML powinno być stosowane w sposób przejrzysty i logiczny co ułatwia czytelność i zrozumienie kodu oraz jego późniejsze modyfikacje Praktycznym zastosowaniem takich struktur jest organizowanie treści w dokumentach internetowych w sposób hierarchiczny co ułatwia zarówno użytkownikom przeglądanie zawartości jak i programistom zarządzanie kodem Zrozumienie zagnieżdżania list jest kluczowe dla efektywnego tworzenia stron internetowych które są nie tylko estetyczne ale także funkcjonalne i dostępne dla szerokiej grupy odbiorców

Pytanie 28

W formularzu zdefiniowano kontrolki do wpisania imienia i nazwiska. Który atrybut reprezentuje podpowiedź umiejscowioną w polu kontrolki, znikającą w momencie, gdy użytkownik rozpocznie wpisywanie wartości?

<label for="imie">Imię: </label>
<input id="imie" value="Wpisz dane" title="Wpisz imię"><br>
<label for="nazw">Nazwisko: </label>
<input id="nazw" placeholder="Wpisz dane" title="Wpisz nazwisko">

A. title

B. for

C. placeholder

D. value

Dobrze! Poprawna odpowiedź to 'placeholder'. Atrybut 'placeholder' w elemencie input HTML jest używany do wyświetlania podpowiedzi wewnątrz pola formularza, która znika, gdy użytkownik zaczyna wpisywanie danych. Jest to zgodne z pytaniem, w którym poproszono o atrybut reprezentujący podpowiedź w polu formularza, która znika, gdy użytkownik rozpoczyna wpisywanie. Przykładem może być formularz logowania, gdzie w polach 'Użytkownik' i 'Hasło' można umieścić podpowiedzi 'Wpisz nazwę użytkownika' i 'Wpisz hasło' odpowiednio. Atrybut 'placeholder' jest bardzo przydatny w interaktywnym designie, pomagając użytkownikom zrozumieć, jakie informacje są od nich oczekiwane w danym polu formularza.

Pytanie 29

Po wykonaniu poniższego kodu JavaScript, który operuje na wcześniej przygotowanej tablicy liczby, w zmiennej wynik znajduje się suma

var wynik = 0;
for (i = 0; i < 100; i++)
  if (liczby[i] % 2 == 0)
    wynik += liczby[i];

A. parzystych elementów tablicy

B. wszystkich elementów tablicy

C. dodatnich elementów tablicy

D. nieparzystych elementów tablicy

Przedstawiony kod JavaScript oblicza sumę wszystkich parzystych elementów tablicy liczby. W języku JavaScript operator modulo (%) jest używany do obliczania reszty z dzielenia. W tym przypadku liczby[i] % 2 == 0 sprawdza, czy dany element tablicy liczby jest parzysty. Jeśli reszta z dzielenia przez 2 wynosi 0, oznacza to, że liczba jest parzysta. Dlatego każda parzysta liczba z tablicy jest dodawana do zmiennej wynik. Warto zauważyć, że pętla for przechodzi przez pierwsze 100 elementów tablicy, co sugeruje, że tablica liczby musi mieć co najmniej 100 elementów. Tego typu operacje są często wykorzystywane w praktycznych zastosowaniach, takich jak analiza danych, gdzie konieczne jest filtrowanie i przetwarzanie określonych wartości z dużych zbiorów danych. Dobre praktyki zalecają, aby zrozumieć zarówno składnię, jak i zastosowanie operacji warunkowych i pętli, co jest kluczowe w efektywnym programowaniu. Takie rozwiązania są fundamentem optymalnego przetwarzania danych, a ich zrozumienie umożliwia tworzenie bardziej złożonych algorytmów.

Pytanie 30

Na stronie www znajduje się formularz, do którego należy zaimplementować następujące funkcje: walidacja: podczas wypełniania formularza w czasie rzeczywistym sprawdzana jest poprawność danych, oraz przesyłanie danych: po wypełnieniu formularza i jego zatwierdzeniu informacje są przesyłane do bazy danych na serwerze. Aby wprowadzić tę funkcjonalność w najprostszy sposób, trzeba zapisać

A. walidację w skrypcie PHP, a przesyłanie danych w JavaScript

B. walidację i przesyłanie danych w języku PHP

C. walidację i przesyłanie danych w języku JavaScript

D. walidację w języku JavaScript, a przesyłanie danych w skrypcie PHP

Mówiąc szczerze, podejście, które zakłada walidację i przesyłanie danych tylko w PHP, to nie za bardzo dobry pomysł. Dlaczego? Bo każde weryfikowanie danych po stronie serwera wymaga przesyłania ich tam, co powoduje zbędne obciążenie. To z kolei może spowalniać interakcję z użytkownikiem, co jest frustrujące, zwłaszcza w przypadku większych formularzy. A walidacja w PHP i przesyłanie w JavaScript? Znowu nie jest to najlepsze rozwiązanie. Walidacja po stronie serwera nie jest natychmiastowa, więc użytkownik może czekać, co zazwyczaj nie jest fajne. Gdy ktoś weźmie niepoprawne dane, to musi czekać na odpowiedź serwera i to jest czasochłonne. Najlepiej łączyć walidację w JavaScript, bo to poprawia interakcję, a wysyłanie danych do serwera robić w PHP, bo on dba o bezpieczeństwo i kontakt z bazą danych. Takie rozdysponowanie zadań sprawia, że wszystko chodzi sprawnie i łatwiej to potem rozwijać, co jest zgodne z aktualnymi standardami.

Pytanie 31

Jaki kolor reprezentuje zapis heksadecymalny #0000FF?

A. zielony

B. niebieski

C. czarny

D. czerwony

Kolor zapisany w notacji heksadecymalnej #0000FF oznacza niebieski. Notacja heksadecymalna używana jest w technologii webowej, szczególnie w CSS i HTML, do definiowania kolorów. W tej notacji każdy kolor składa się z sześciu znaków, gdzie pierwsze dwie cyfry reprezentują intensywność koloru czerwonego, drugie dwie zielonego, a ostatnie dwie niebieskiego. W przypadku #0000FF, '00' oznacza brak czerwonego, '00' brak zielonego, a 'FF' maksymalną intensywność niebieskiego. Dzięki temu systemowi można dokładnie określić kolory, co jest przydatne w projektowaniu stron internetowych oraz w grafice komputerowej. Zrozumienie tej notacji jest kluczowe dla każdego, kto pracuje w obszarze projektowania stron WWW, ponieważ pozwala na precyzyjne dostosowanie palet kolorów do estetyki projektu oraz zgodności z zasadami dostępności. Przykładowo, stosując odpowiednie kolory w notacji heksadecymalnej, możemy zapewnić lepszą czytelność tekstu na tle, co jest istotne w kontekście użyteczności stron internetowych.

Pytanie 32

W języku HTML5 do wypełniania podpowiedzią kontrolki pola edycyjnego stosuje się atrybut

A. required

B. placeholder

C. pattern

D. autofocus

Poprawny atrybut to "placeholder". W HTML5 ten atrybut służy do wyświetlania tymczasowej podpowiedzi wewnątrz pola tekstowego, zanim użytkownik cokolwiek wpisze. Przeglądarka pokazuje ten tekst jaśniejszym kolorem i znika on automatycznie w momencie rozpoczęcia edycji. Z mojego doświadczenia to jest podstawowe narzędzie do delikatnego sugerowania użytkownikowi, czego dokładnie oczekujemy w danym polu. Przykład praktyczny: <input type="text" name="email" placeholder="np. [email protected]"> Tutaj placeholder pokazuje przykładowy format adresu e-mail, ale nie jest to domyślna wartość formularza – ten tekst nie zostanie wysłany na serwer, jeśli użytkownik nic nie wpisze. To ważne: placeholder to tylko wskazówka wizualna, nie zastępuje etykiety <label> ani walidacji. Dobre praktyki mówią, żeby używać placeholdera do krótkich, konkretnych podpowiedzi: format danych, przykład wpisu, skrócona instrukcja. Nie powinno się tam wrzucać długich opisów, bo użytkownik i tak ich nie zapamięta. W standardach dostępności (WCAG) podkreśla się też, że placeholder nie może zastępować labelki, bo osoby z niektórymi niepełnosprawnościami mogą mieć problem z jego odczytaniem. W realnych projektach stosuje się więc układ: opis pola w <label>, a w placeholderze tylko przykład, np. "123-456-789" dla telefonu albo "2024-12-31" dla daty. Taki sposób użycia jest uznawany za poprawny i profesjonalny.

Pytanie 33

W języku HTML, aby dodać na stronę obrazek przechowywany w formacie JPG, należy użyć znacznika

A. <img>

B. <src>

C. <jpg>

D. <table>

Aby wstawić na stronę obraz zapisany w formacie JPG, w języku HTML stosuje się znacznik <img>. Jest to jeden z podstawowych znaczników używanych do osadzania grafiki na stronach internetowych. W skład tego znacznika wchodzą atrybuty, które pozwalają na określenie źródła obrazu, jego alternatywnego opisu oraz dodatkowych parametrów, takich jak rozmiary czy wyrównanie. Atrybut 'src' jest kluczowy, ponieważ wskazuje ścieżkę do pliku graficznego, na przykład <img src='obraz.jpg' alt='Opis obrazu'>. Atrybut 'alt' jest bardzo ważny z punktu widzenia dostępności, ponieważ umożliwia wyświetlenie tekstu alternatywnego w przypadku, gdy obraz nie może być załadowany. Ponadto, zgodnie z wytycznymi W3C, znacznik <img> jest samodzielny, co oznacza, że nie wymaga pary znaczników otwierającego i zamykającego. Warto również dodać, że stosowanie odpowiednich formatów obrazów, takich jak JPG czy PNG, ma znaczenie dla jakości i wydajności ładowania strony, co jest kluczowe z perspektywy SEO. Użycie poprawnych znaczników i atrybutów może znacząco wpłynąć na pozycję strony w wynikach wyszukiwania.

Pytanie 34

DOM oferuje metody oraz właściwości, które w języku JavaScript umożliwiają

A. przesyłanie danych formularzy bezpośrednio do bazy danych

B. manipulację łańcuchami zdefiniowanymi w kodzie

C. pobieranie i zmianę elementów strony, która jest wyświetlana przez przeglądarkę

D. przeprowadzanie operacji na zmiennych zawierających liczby

Dobra robota! Odpowiedź jest poprawna, bo to właśnie DOM, czyli Document Object Model, pozwala programistom na zmianę struktury i stylu dokumentów HTML i XML. Dzięki DOM w JavaScript można na bieżąco zmieniać treść i układ strony bez konieczności jej przeładowania. Weźmy na przykład taki przypadek: chcemy zmienić tekst w elemencie <h1>. Robimy to, wybierając ten element metodą `document.getElementById()` i przypisując nową wartość do `innerHTML`. Standardy W3C mówią, jak to wszystko ma działać, dzięki czemu DOM jest uznawany w branży. Umiejętność manipulacji DOM jest mega ważna przy tworzeniu interaktywnych aplikacji webowych, jak różne formularze, które pozwalają użytkownikom dodawać i edytować dane. Dobrze wykorzystany DOM sprawia, że aplikacje są szybsze i bardziej responsywne, co jest kluczowe w nowoczesnym programowaniu front-end.

Pytanie 35

Wybierz prawidłowy sposób umieszczania komentarzy w kodzie źródłowym HTML

A.

B. "" informacje komentarza ""

C. /* informacje komentarza */

D. -- informacje komentarza --

Poprawny komentarz w HTML musi być zapisany dokładnie w formie: . To jest jedyny format zgodny ze specyfikacją HTML (HTML5, ale też starsze wersje). Przeglądarka traktuje wszystko, co znajduje się między ciągiem znaków , jako komentarz, czyli tego nie wyświetla użytkownikowi i nie interpretuje jako kod. Dzięki temu można w kodzie zostawiać sobie uwagi, opisy sekcji, tymczasowo coś „wyłączyć” albo oznaczyć fragment do późniejszej edycji. W praktyce stosuje się np.:  albo . Moim zdaniem komentarze są szczególnie ważne w większych projektach, bo po miesiącu naprawdę trudno pamiętać, po co była jakaś dziwna konstrukcja w HTML. Warto też wiedzieć, że w HTML nie stosujemy ani //, ani /* */ jak w JavaScript czy CSS. To są inne języki, inne reguły. Jeżeli wstawisz coś w stylu , to cały ten akapit jest ignorowany przez przeglądarkę, co jest wygodne przy testowaniu. Dobra praktyka jest też taka, żeby nie przesadzać z ilością komentarzy, ale tam gdzie struktura jest mniej oczywista (np. zagnieżdżone divy, rozbudowane formularze), lepiej dodać krótki, konkretny opis. W projektach komercyjnych często używa się komentarzy do oznaczania sekcji layoutu, np. , , co ułatwia pracę całemu zespołowi. W skrócie: tylko zapis z nawiasami ostrymi i myślnikami, czyli , jest w HTML prawidłowy i rozpoznawany jako komentarz.

Pytanie 36

Wskaż fragment kodu HTML5, który zostanie uznany przez walidator za niepoprawny?

A. <p class="stl"><style>.a{color:#F00}</style>tekst</p>

B. <p class="stl" style="color: #F00">tekst</p>

C. <p class="stl">tekst</p>

D. <p class="stl" id="a">tekst</p>

Odpowiedź <p class="stl"><style>.a{color:#F00}</style>tekst</p> jest błędna, ponieważ zawiera element <style>, który jest nieprawidłowo umieszczony wewnątrz znacznika <p>. W HTML5, elementy <style> powinny występować w sekcji <head> dokumentu lub w kontekście, gdzie są dozwolone, a nie wewnątrz elementów blokowych takich jak <p>. Walidatory HTML5, zgodne z standardami W3C, wskazują na to jako błąd, ponieważ takie umiejscowienie stylu może prowadzić do nieprzewidzianych efektów wizualnych oraz problemów z rozumieniem struktury dokumentu. Zamiast tego, właściwe byłoby umieszczenie stylu w sekcji <head> lub zastosowanie atrybutu style bezpośrednio w elemencie, co jest zgodne z dobrymi praktykami projektowania stron internetowych. Umożliwia to zachowanie semantyki HTML oraz lepszą organizację kodu.

Pytanie 37

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

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

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

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

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

Prawidłowa reguła to @media screen and (max-width: 800px) and (min-width: 600px){/*style css*/}, bo dokładnie określa zakres szerokości ekranu od 600 px do 800 px i robi to w sposób zgodny ze składnią CSS. Kluczowe są tu trzy elementy: słowo kluczowe screen, operator and oraz poprawna kolejność i zapis warunków min-width i max-width. Media queries działają tak, że przeglądarka sprawdza, czy wszystkie warunki połączone słowem and są spełnione. W tym przypadku styl zadziała tylko wtedy, gdy typ urządzenia to ekran (screen) i szerokość widoku (viewport) jest jednocześnie nie mniejsza niż 600 px i nie większa niż 800 px. To jest właśnie typowy zapis tzw. przedziału (range) w responsywnym CSS. W praktyce taki zakres wykorzystuje się np. do stylowania widoków tabletów w pozycji pionowej lub poziomej, w zależności od projektu. Możesz tam zmieniać układ kolumn z trzech na dwie, powiększać przyciski, dostosowywać rozmiary czcionek, marginesy, czy ukrywać mniej ważne elementy. Co ważne, użycie screen ogranicza stosowanie tych styli tylko do ekranów, a nie np. do wydruku (print), co jest zgodne z dobrą praktyką opisaną w specyfikacji CSS Media Queries Level 3 i nowszych. Z mojego doświadczenia dobrym nawykiem jest zawsze pilnować spójnych breakpointów, np. 480 px, 600 px, 768 px, 1024 px, i dla każdego z nich pisać media queries w dokładnie takim formacie, jak w tej poprawnej odpowiedzi. Ułatwia to późniejsze utrzymanie kodu i eliminuje dziwne „przeskoki” layoutu między rozdzielczościami. Dodatkowo warto pamiętać, że kolejność min-width i max-width nie ma znaczenia dla działania, ale przyjęcie jednej konwencji w projekcie mocno poprawia czytelność kodu zespołowego.

Pytanie 38

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

A. Odpowiedź B

B. Odpowiedź A

C. Odpowiedź C

D. Odpowiedź D

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

Pytanie 39

W języku JavaScript wartość typu boolean może być przedstawiana przez

A. –20

B. null

C. true

D. 45.3

Typ boolean w języku JavaScript jest jednym z podstawowych typów danych, reprezentującym jedynie dwie możliwe wartości: true (prawda) oraz false (fałsz). Typ ten jest kluczowy w programowaniu, umożliwiając tworzenie warunków oraz podejmowanie decyzji w kodzie. W praktyce, boolean jest wykorzystywany w instrukcjach warunkowych, takich jak if, gdzie wyrażenia zwracające wartość logiczną decydują o dalszym przebiegu programu. Na przykład, wyrażenie 'if (x > 10)' zwraca true, jeśli x jest większe od 10, i false w przeciwnym razie. JavaScript, zgodnie ze specyfikacją ECMA-262, nie tylko definiuje typ boolean, ale również określa sposób konwersji innych typów danych na boolean. Funkcje takie jak Boolean() oraz operatory logiczne (&&, ||, !) są używane do uzyskania wartości boolean z innych typów. Warto również zauważyć, że JavaScript stosuje tzw. "truthy" i "falsy" wartości, co oznacza, że niemal każdy typ danych może być interpretowany jako boolean w kontekście warunków, jednak tylko true i false są typowymi wartościami tego typu. Zrozumienie działania typu boolean jest fundamentalne dla programistów, umożliwiając skuteczne kontrolowanie przepływu programu oraz implementację logiki decyzyjnej."

Pytanie 40

W JavaScript zdarzenie onKeydown zostanie wywołane, gdy klawisz

A. klawiatury będzie zwolniony

B. myszki będzie zwolniony

C. klawiatury będzie wciśnięty

D. myszki będzie wciśnięty

Odpowiedź, że zdarzenie onKeydown jest wywoływane, gdy klawisz klawiatury został naciśnięty, jest prawidłowa, ponieważ onKeydown jest zdarzeniem, które reaguje na pierwszą interakcję użytkownika z klawiaturą. W praktyce oznacza to, że gdy użytkownik naciśnie dowolny klawisz na klawiaturze, np. literę, cyfrę lub klawisz funkcyjny, zdarzenie onKeydown zostanie wywołane. Jest to kluczowe w kontekście tworzenia interaktywnych aplikacji webowych, ponieważ pozwala programistom na obsługę wejścia użytkownika w czasie rzeczywistym. Na przykład, w aplikacji do edycji tekstu, można wykorzystać onKeydown do aktualizacji zawartości edytora na podstawie wprowadzanego tekstu, co zapewnia płynne doświadczenie użytkownika. Dobrym przykładem zastosowania tego zdarzenia jest również implementacja gier, w których ruchy postaci lub akcje są wykonywane w odpowiedzi na naciśnięcia klawiszy. W standardach W3C dotyczących dostępu i interakcji z użytkownikiem, zdarzenie onKeydown uwzględnia również kwestie dostępności, co jest istotne dla projektowania inkluzywnych aplikacji.

Rozpocznij nowy egzamin

Powrót do strony głównej