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: 12 maja 2026 15:51
Data zakończenia: 12 maja 2026 15:54

Egzamin niezdany

Wynik: 11/40 punktów (27,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}

Na stronie będą wyświetlane czcionką w kolorze niebieskim:

A. paragrafy, do których została przypisana klasa uzytkownik.

B. wszystkim elementom w sekcji <body> z przypisaną klasą uzytkownik.

C. tylko elementy tekstowe typu <p>, <h1>.

D. wszystkie akapity.

Deklaracja selektora p.uzytkownik oznacza w CSS połączenie selektora typu z selektorem klasy. Innymi słowy: przeglądarka wybierze tylko te elementy <p>, które mają w atrybucie class wpisaną klasę uzytkownik, np. <p class="uzytkownik">Treść</p>. Sama kropka przed nazwą klasy definiuje selektor klasy, a litera p przed kropką zawęża go wyłącznie do paragrafów. Gdyby w stylu było samo .uzytkownik { color: blue; }, wtedy reguła objęłaby wszystkie elementy z tą klasą, niezależnie czy to <p>, <div>, <h1> czy cokolwiek innego. Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł. Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.

Pytanie 2

W języku HTML, dane dotyczące autora, opisu oraz słów kluczowych strony powinny być zamieszczone

A. pomiędzy znacznikami <body> i </body>, w znaczniku <meta>

B. pomiędzy znacznikami <head> i </head>, w znaczniku <style>

C. pomiędzy znacznikami <body> i </body>, w znaczniku <html>

D. pomiędzy znacznikami <head> i </head>, w znaczniku <meta>

W HTML informacje dotyczące autora, streszczenia i słów kluczowych strony powinny być umieszczone pomiędzy znacznikami <head> i </head>, w znaczniku <meta>. Znacznik <head> jest przeznaczony do przechowywania metadanych strony, które nie są wyświetlane bezpośrednio na stronie, ale są istotne dla przeglądarek internetowych oraz wyszukiwarek. Informacje te pomagają w indeksowaniu strony, co ma kluczowe znaczenie dla SEO. Przykładowe metadane to <meta name='author' content='Imię Nazwisko'>, które wskazuje autora treści, <meta name='description' content='Opis strony'>, które dostarcza krótkie streszczenie jej zawartości oraz <meta name='keywords' content='słowo1, słowo2'>, które definiuje słowa kluczowe związane z treścią. Umieszczanie tych informacji w sekcji <head> jest standardem w HTML, co zapewnia ich poprawne rozpoznanie przez roboty wyszukiwarki, a także pozwala na odpowiednie wyświetlanie w wynikach wyszukiwania. Dlatego kluczowe jest, aby stosować się do tych zaleceń, aby poprawić widoczność strony w Internecie.

Pytanie 3

W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?

A. CSS

B. JavaScript

C. AJAX

D. PHP

CSS (Cascading Style Sheets) to język stylów, który służy do opisywania wyglądu i formatu dokumentów HTML. Jego głównym celem jest kontrolowanie układu, kolorów, czcionek oraz innych aspektów wizualnych strony internetowej. CSS nie ma możliwości przetwarzania danych wprowadzanych przez użytkowników, gdyż nie posiada funkcji logiki programistycznej ani operacji na danych. Przykładowo, CSS może zmieniać kolor tła lub rozmiar tekstu, ale nie może zbierać informacji z formularzy ani reagować na interakcje użytkownika w sposób, w jaki robią to języki programowania takie jak JavaScript czy PHP. Może to prowadzić do mylnych przekonań, że CSS jest bardziej wszechstronny, niż jest w rzeczywistości, jednak jego zastosowanie ogranicza się wyłącznie do aspektów stylistycznych. W praktyce, aby przetwarzać dane użytkownika, niezbędne są inne technologie, które mogą współpracować z CSS, ale same w sobie nie są w stanie tego zrobić.

Pytanie 4

Który z znaczników ma na celu organizację struktury tekstu w HTML?

A. <head>

B. <u>

C. <style>

D. <h6>

Znacznik <h6> jest jednym z sześciu poziomów nagłówków w HTML, które służą do tworzenia hierarchii tekstu w dokumentach internetowych. Użycie nagłówków, takich jak <h1> do <h6>, jest zgodne z zasadami semantycznego HTML, co ma kluczowe znaczenie dla dostępności i SEO. Poprawne użycie tych znaczników pozwala wyszukiwarkom lepiej zrozumieć strukturę treści na stronie, a także ułatwia nawigację osobom korzystającym z technologii asystujących. Na przykład, <h1> powinien być używany dla głównego tytułu strony, a <h2>, <h3> itd. do podtytułów w hierarchii, gdzie <h6> jest najmniej istotnym nagłówkiem. Dzięki temu każdy nagłówek odzwierciedla poziom ważności treści, co zwiększa przejrzystość i użyteczność strony. Dobrą praktyką jest również ograniczenie liczby nagłówków na stronie, aby uniknąć zamieszania w strukturze. Właściwe stosowanie znaczników nagłówków jest istotne nie tylko z punktu widzenia organizacji treści, ale również wpływa na wydajność SEO, ponieważ wyszukiwarki preferują strony o klarownej hierarchii i dobrze zorganizowanej treści.

Pytanie 5

Z jakich elementów składa się tabela generowana przez poniższy kod?

<table border="1">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>

A. dwóch wierszy i dwóch kolumn

B. dwóch wierszy oraz jednej kolumny

C. jednego wiersza oraz dwóch kolumn

D. jednego wiersza oraz jednej kolumny

Podstawowe zrozumienie struktury HTML jest kluczowe do prawidłowego interpretowania kodu tabeli. Zrozumienie ilości wierszy i kolumn wymaga analizy znaczników <tr> i <td>. Często popełniany błąd polega na myleniu ilości wierszy i kolumn z ilością znaczników <td> w jednym <tr>. Znacznik <tr> definiuje wiersz w tabeli, a każdy <td> wewnątrz <tr> to oddzielna kolumna. W przedstawionym przykładzie mamy jeden wiersz z dwoma kolumnami, co jest podstawową konfiguracją tabeli. Mylenie tej koncepcji z dwoma wierszami lub inną liczbą kolumn jest często wynikiem niepełnej analizy struktury kodu. Warto zwrócić uwagę na semantykę HTML, która jest istotna z punktu widzenia dostępności i SEO. Stosowanie tabeli powinno być ograniczone do prezentacji danych tabularycznych, a nie jako narzędzie do ogólnej struktury strony, co jest niezgodne z nowoczesnymi standardami. Poznanie i zrozumienie tych zasad jest niezbędne dla efektywnego tworzenia stron internetowych i unikania typowych błędów w kodzie HTML. W przypadku tworzenia bardziej złożonych układów, zaleca się korzystanie z CSS Grid lub Flexboxa, które oferują większą elastyczność i kontrolę nad wyglądem strony.

Pytanie 6

Portal internetowy dysponuje bardzo złożonym systemem stylów, który obejmuje style zewnętrzne, wewnętrzne oraz lokalne. Jak można zagwarantować, że określona cecha zdefiniowana w zewnętrznym stylu jest zawsze stosowana do elementu HTML, niezależnie od bardziej priorytetowych stylów?

A. jako selektor potomka

B. przy pomocy reguły !important

C. jako pseudoklasę :active

D. przy pomocy pseudoelementu ::after

Odpowiedź, że cechę opisaną w zewnętrznym stylu należy zdefiniować przy pomocy reguły !important jest poprawna. Reguła !important w CSS jest używana do nadania określonej właściwości najwyższego priorytetu. Oznacza to, że nawet jeśli inne reguły CSS mają wyższy specyficzność lub są zdefiniowane później, właściwość oznaczona jako !important zostanie zastosowana. Przykład zastosowania to sytuacja, gdy styl globalny dla elementu przyjmuje kolor tła, ale chcemy, aby dany element zawsze miał czerwony kolor tła, niezależnie od innych reguł. W takim przypadku możemy zdefiniować ten styl jako: `.example { background-color: red !important; }`. Ważne jest, aby stosować !important z rozwagą, ponieważ może to prowadzić do trudności w utrzymaniu kodu oraz nadpisywaniu stylów w nieprzewidywalny sposób. Dobrym podejściem jest najpierw spróbować zwiększyć specyficzność selektora, a dopiero potem, w nagłych wypadkach, używać !important, aby unikać problemów z dziedziczeniem stylów.

Pytanie 7

Jakie polecenie jest poprawne w kontekście walidacji HTML5?

A. <img src = "mojPiesek.jpg" alt = "pies">

B. <img src = mojPiesek.jpg" alt = "pies>

C. <img src = mojPiesek.jpg alt = pies>

D. <img src = "mojPiesek.jpg" >

Odpowiedzi, które nie spełniają wymogów walidacji HTML5, często wynikają z niewłaściwego zrozumienia zasad pisania kodu. W przypadku pierwszej odpowiedzi, brakujący cudzysłów przed atrybutem 'src' oraz nieprawidłowe zakończenie atrybutu 'alt' skutkują błędną składnią. Brak cudzysłowów jest jednym z najczęstszych błędów, który może prowadzić do problemów z interpretacją kodu przez przeglądarki. Ponadto, omijanie atrybutu 'alt' w niektórych przypadkach, tak jak w czwartej odpowiedzi, może wpływać na dostępność strony, co jest zgodne z wytycznymi WCAG (Web Content Accessibility Guidelines). Prawidłowe użycie atrybutu 'alt' jest nie tylko zalecane, ale wręcz wymagane, aby zapewnić pełne zrozumienie treści wizualnych przez osoby z niepełnosprawnościami. Kolejnym błędem jest niepoprawne formatowanie atrybutów, jak w drugiej odpowiedzi, gdzie wartości atrybutów nie są otoczone cudzysłowami, co jest wymagane przez HTML5. Dbanie o poprawność syntaktyczną kodu jest kluczowe dla jego funkcjonalności oraz dla stosowania najlepszych praktyk w programowaniu. Zachowanie odpowiednich zasad walidacji nie tylko chroni przed błędami w wyświetlaniu, ale także zwiększa wydajność strony oraz jej przyjazność dla użytkowników.

Pytanie 8

Znacznik <s> w HTML skutkuje

A. pochylaniem tekstu

B. migotaniem tekstu

C. przekreślaniem tekstu

D. podkreślaniem tekstu

Migotanie tekstu nie ma nic wspólnego ze znacznikiem <s>. W HTML nie ma znaczników, które migają, a takie efekty osiąga się zwykle dzięki CSS albo JavaScript. Można na przykład użyć CSS do animacji, żeby tekst migał. Pochylanie tekstu robi się za pomocą <em> lub <i>, które stosuje się do stylizacji, żeby tekst był w kursywie. Te znaczniki służą, żeby wyróżnić słowa w kontekście, ale nie mają nic wspólnego z przekreślaniem. Podkreślanie tekstu w HTML uzyskuje się używając znaku <u>, który wizualnie podkreśla tekst, ale nie przekreśla go. Zwykle używa się tego do linków albo do wyodrębnienia jakichś fragmentów tekstu na stronie, więc też nie ma związku z <s>. Dlatego wszystkie te odpowiedzi są błędne, bo nie rozumieją, jak działają odpowiednie znaczniki w HTML.

Pytanie 9

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

A. src

B. style

C. alt

D. text

Wybór niewłaściwych atrybutów do oznaczania obrazów może prowadzić do dużych problemów w dostępności stron internetowych. Atrybut src, który jest używany do określenia źródła pliku graficznego, nie dostarcza żadnych informacji o treści obrazu, co czyni go nieodpowiednim do zastosowania w kontekście dostępności. Atrybut ten jest zasadniczo informacyjny dla przeglądarki, ale nie dla użytkowników z dysfunkcją wzroku. Z kolei atrybut text, który w ogóle nie istnieje w kontekście znaczników img, wskazuje na brak zrozumienia standardów HTML, co może prowadzić do poważnych błędów w kodzie. Atrybut style, służący do definiowania stylów CSS dla elementu, również nie ma zastosowania w kontekście dostępności treści graficznych. Właściwe zrozumienie roli atrybutów w HTML jest kluczowe dla tworzenia stron internetowych, które są zarówno estetyczne, jak i funkcjonalne dla wszystkich użytkowników. Ignorowanie odpowiednich praktyk i standardów w zakresie dostępności, jak zasady WCAG, prowadzi do wykluczenia wielu użytkowników, co jest nie tylko nieetyczne, ale także sprzeczne z coraz bardziej wprowadzanymi regulacjami prawnymi dotyczącymi dostępności w Internecie. Dlatego kluczowe jest, aby projektanci i deweloperzy stron internetowych posiadali solidną wiedzę na temat dostępności oraz stosowali się do najlepszych praktyk w tym zakresie.

Pytanie 10

Podczas sprawdzania poprawności dokumentu HTML5 wyświetlił się komunikat: "Error: Element head is missing a required instance of child element title". Co to oznacza w dokumencie?

A. nie zdefiniowano wymaganego atrybutu title w znaczniku <img>

B. element <title> nie został zakończony przez </title>

C. element <title> nie jest konieczny

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

Stwierdzenie, że element <title> nie jest wymagany, jest błędne, ponieważ w standardzie HTML5 tytuł jest jednym z kluczowych składników, które powinny być zdefiniowane dla każdej strony. Bez elementu <title> przeglądarka nie będzie miała informacji o tym, jaką treść reprezentuje strona, co jest istotne zarówno dla użytkowników, jak i dla wyszukiwarek internetowych. Inna myląca koncepcja sugerująca, że <title> nie został zamknięty przez </title>, nie uwzględnia faktu, że w przypadku braku elementu <title> w ogóle nie ma co zamykać. W HTML5 struktura dokumentu jest bardziej elastyczna, ale brak elementu <title> kończy się błędami walidacji, co wskazuje na niekompletną definicję <head>. Argumentacja dotycząca obowiązkowego atrybutu title w znaczniku <img> jest również niepoprawna, ponieważ atrybut title w tym kontekście nie jest wymagany i nie ma wpływu na prawidłowość dokumentu HTML. Atrybut ten służy jedynie do dostarczenia dodatkowych informacji o obrazie, podczas gdy <title> pełni kluczową rolę w identyfikacji strony. Dlatego ważne jest, aby zawsze umieszczać element <title> we właściwej sekcji <head>, aby zapewnić poprawność dokumentu oraz optymalizację dla wyszukiwarek.

Pytanie 11

W jaki sposób można w języku CSS ustawić takie stylizowanie tabeli, aby wiersz, na którym obecnie znajduje się kursor myszki, zmieniał kolor tła na szary?

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

B. tr:hover { color: gray; }

C. tr:active { color: gray; }

D. tr:hover { background-color: gray; }

Odpowiedzi tr:hover { color: gray; }, tr:active { color: gray; } i tr:active { background-color: gray; } są w tym kontekście niewłaściwe. W pierwszej odpowiedzi, jak używasz pseudoklasy :hover z właściwością color, zmieniasz tylko kolor tekstu, a nie tła, co nie spełnia wymogu modyfikacji koloru tła wiersza. Użytkownicy naprawdę oczekują, że jak najadą kursorem na wiersz, to zobaczą wyraźną zmianę w jego wyglądzie, a zmiana koloru tekstu to nie jest zbyt skuteczny sygnał wizualny. Druga i trzecia odpowiedź wykorzystują pseudoklasę :active, która działa tylko wtedy, gdy na element klikniemy. To pomija interakcję z myszką, co jest kluczowe w tym zadaniu. :active powinno być stosowane, gdy chcemy zmienić styl elementów podczas aktywacji, ale to nie działa w przypadku najechania kursorem. Użytkownicy mogą się mylić między tymi pseudoklasami, co prowadzi do kiepskiego projektowania interfejsu, który nie reaguje na intuicyjne działania, takie jak najeżdżanie myszą. W praktyce, dobrze jest używać właściwych pseudoklas, żeby osiągnąć zamierzony efekt i poprawić interaktywność aplikacji internetowych.

Pytanie 12

Jakiego znacznika w HTML użyjemy, aby uzyskać tekst wyświetlany czcionką o stałej szerokości znaku, który również uwzględnia dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <blockquote>…</blockquote>

B. <ins>…</ins>

C. <code>…</code>

D. <pre>…</pre>

Znaczniki <code>, <ins> i <blockquote> mają swoje unikalne zastosowania, ale nie nadają się do zachowania formatowania tekstu, jak to robi <pre>. Znacznik <code> jest przeznaczony do oznaczania fragmentów kodu, jednak nie utrzymuje przestrzeni i formatowania. Kiedy używasz <code>, przeglądarka wyświetli tekst w inny sposób, ale nie uwzględni dodatkowych odstępów lub tabulacji, co może prowadzić do nieczytelności w przypadku dłuższych fragmentów kodu. Z kolei znacznik <ins> służy do wskazywania wstawionego tekstu, co ma znaczenie w kontekście edycji lub zmian, ale nie zmienia jego formatowania ani nie zachowuje układów, co ogranicza jego użyteczność w przypadku tekstów wymagających precyzyjnego formatowania. Wreszcie, <blockquote> jest używane do cytowania dłuższych fragmentów tekstu z innego źródła, co również nie związane jest z zachowaniem konkretnego formatowania, a jego celem jest raczej stylistyczne wyróżnienie cytatu. W praktyce, mylenie tych znaczników może prowadzić do frustracji użytkowników, którzy oczekują zachowania konkretnych układów, zwłaszcza w kontekście programowania lub prezentacji danych. Ważne jest, aby zrozumieć, że każdy znacznik ma swoje specyficzne zastosowanie i powinien być używany zgodnie z jego przeznaczeniem, aby zapewnić spójność i czytelność prezentowanych treści.

Pytanie 13

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

A. WordPress

B. Mambo

C. Joomla

D. Apache

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

Pytanie 14

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

A. kolor Maroon obejmie co drugi element listy

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

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

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

W przypadku innych odpowiedzi występuje pewne nieporozumienie dotyczące zasad działania selektorów CSS. Pierwsza odpowiedź sugeruje, że wszystkie elementy z przypisanym id hover zmienią kolor, co jest nieprawidłowe, ponieważ w podanym kodzie nie ma odwołania do id, ale do pseudoklasy :hover. Przypisywanie stylów z użyciem id wymagałoby użycia selektora z hashtagiem, jak na przykład #hover. Kolejna koncepcja sugeruje, że wszystkie elementy listy będą miały kolor maroon. Aby to było prawdziwe, deklaracja CSS musiałaby dotyczyć selektora li bez pseudoklasy :hover. Innymi słowy, aby wszystkie elementy listy były stale w kolorze maroon, kod powinien wyglądać jak li { color: maroon; }. Ostatnia opcja zakłada, że co drugi element listy zmieni kolor. Do takiego działania niezbędne byłoby użycie selektora nth-child w połączeniu z :hover i odpowiednim stylem, na przykład li:nth-child(even):hover { color: maroon; }, co nie jest obecne w dostarczonym kodzie. W związku z tym, prawidłowe zrozumienie funkcji pseudoklas i selektorów CSS jest kluczowe do właściwego interpretowania kodu stylów i unikania typowych błędów w zastosowaniach praktycznych. Dlatego ważne jest, by projektanci stron internetowych dobrze rozumieli różne aspekty CSS, aby efektywnie wykorzystywać możliwości, jakie oferuje ten język stylów, jednocześnie dążąc do osiągnięcia optymalnej funkcjonalności i estetyki w projektach webowych. Poprawne stosowanie selektorów umożliwia tworzenie intuicyjnych i responsywnych interfejsów użytkownika, co stanowi jedno z głównych celów nowoczesnego web designu. Rozumienie tych zasad minimalizuje także ryzyko błędów i nieporozumień w zespole projektowym, przyczyniając się do lepszej współpracy i realizacji projektów.

Pytanie 15

W poniższym kodzie CSS czcionka zmieni kolor na żółty

a[target="_blank"]
{
  color: yellow;
}

A. odnośników, które otwierają się w tej samej karcie

B. tekstu akapitu

C. każdego linku

D. odnośników, które otwierają się w nowej karcie

Prawidłowa odpowiedź wskazuje na zastosowanie selektora a[target="_blank"] w języku CSS. Ten selektor odnosi się do wszystkich odnośników HTML, które otwierają się w nowej karcie przeglądarki dzięki użyciu atrybutu target z wartością "_blank". Stylizacja tych odnośników na kolor żółty jest możliwa przez przypisanie właściwości color z odpowiednią wartością. Jest to praktyczne podejście, które pozwala na wizualne wyróżnienie linków otwierających się w osobnych zakładkach. Takie podejście jest zgodne z dobrymi praktykami projektowania stron internetowych, gdzie wskazane jest, aby użytkownicy mieli wyraźne sygnały o nietypowych działaniach linków. W kontekście dostępności webowej, takie stylizowanie wspiera użytkowników w szybszym orientowaniu się w sposobie działania poszczególnych elementów interfejsu. Separacja stylu i treści zgodnie z zasadami CSS umożliwia bardziej elastyczne zarządzanie wyglądem strony i ułatwia utrzymanie spójności wizualnej na całej witrynie. Przykład ten ilustruje, jak CSS może wpływać na interakcję użytkownika z elementami strony, co jest kluczowe w procesie tworzenia przyjaznych i intuicyjnych interfejsów użytkownika.

Pytanie 16

Aby w HTML uzyskać odpowiednie formatowanie paragrafu dla tekstu:

Tekst może być zaznaczony albo istotny dla autora

A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

B. <p>Tekst może być <mark>wyróżniony albo <em>istotny</em> dla autora</mark></p>

C. <p>Tekst może być <mark>wyróżniony albo <i>istotny</i> dla autora</mark></p>

D. <p>Tekst może być <mark>wyróżniony</mark> albo <em>istotny dla autora</p>

W analizie niepoprawnych odpowiedzi zauważamy różne problemy związane z używanymi znacznikami i ich organizacją w kodzie HTML. W pierwszym przypadku zastosowano znacznik <em> w niewłaściwy sposób, ponieważ nie zamknięto go przed zakończeniem akapitu <p>, co prowadzi do potencjalnych błędów w renderowaniu strony. W HTML wszystkie znaczniki muszą być poprawnie zagnieżdżone, aby uniknąć problemów z interpretacją przez przeglądarki. Kolejna odpowiedź pokazuje, że znacznik <mark> zajmuje nieodpowiednią pozycję, przez co obie części zdania są ze sobą złączone, co może wprowadzać w błąd i utrudniać zrozumienie treści. Trzeci problem polega na tym, że znacznik <mark> otacza cały tekst, co nie jest zgodne z przeznaczeniem tego znacznika, który powinien jedynie wyróżniać konkretne fragmenty. Użycie <mark> w taki sposób może powodować zniekształcenie sensu zdania. Wszystkie te niewłaściwe praktyki mogą negatywnie wpływać na dostępność, a także na SEO, ponieważ niepoprawne znaczniki mogą prowadzić do nieprawidłowego przetwarzania strony przez roboty wyszukiwarek, co w rezultacie może obniżyć jej pozycję w wynikach wyszukiwania.

Pytanie 17

W JavaScript metoda getElementById odnosi się do

A. znacznika HTML o podanej nazwie klasy

B. klasy zdefiniowanej w CSS

C. znacznika HTML o wskazanym id

D. zmiennej numerycznej

Wybór innych opcji może wynikać z nieporozumień dotyczących funkcjonalności metody getElementById oraz jej roli w kontekście manipulacji DOM. Odpowiedzi wskazujące na zmienne liczbowe sugerują, że JavaScript może być używany w sposób przypominający inne języki programowania, w których zmienne mogą być wykorzystywane do identyfikacji elementów. W rzeczywistości jednak, JavaScript operuje na strukturach DOM, co oznacza, że identyfikacja elementów opiera się na ich atrybutach HTML, a nie na zmiennych jako takich. Klasa zdefiniowana w CSS to kolejny temat, który często wprowadza w błąd. getElementById nie może odwoływać się do klasy, nawet jeśli elementy mogą być stylowane za pomocą CSS. Warto zauważyć, że do odwołania się do elementów klasy w JavaScript służy metoda getElementsByClassName lub querySelectorAll, ale to nie jest funkcjonalność metody getElementById. Mylne jest również założenie, że metoda ta może odnosić się do znaczników HTML na podstawie ich nazw klasy. Identyfikatory są unikalne, więc próbując uzyskać dostęp do elementu przez nazwę klasy, można napotkać trudności, gdyż wiele elementów może dzielić tę samą klasę. Podsumowując, zrozumienie różnic pomiędzy identyfikatorem a klasą jest kluczowe dla efektywnego wykorzystania JavaScript w projektach webowych. Nieprawidłowe podejście do tych zasad prowadzi do błędów w kodzie oraz do problemów z jego utrzymywaniem.

Pytanie 18

Który semantyczny znacznik języka HTML 5 może wystąpić tylko raz na stronie?

A. <section>

B. <main>

C. <header>

D. <article>

Poprawna odpowiedź to <main>, bo zgodnie ze specyfikacją HTML5 ten znacznik powinien pojawić się w dokumencie najwyżej raz. Element <main> reprezentuje główną, unikalną treść strony, czyli to, co jest najważniejsze dla konkretnego adresu URL. Przeglądarki, czytniki ekranu i inne narzędzia asystujące zakładają, że istnieje jedno główne miejsce, do którego użytkownik może szybko „przeskoczyć”, omijając nagłówek, menu czy stopkę. Dlatego pojedynczy <main> ma duże znaczenie dla dostępności (a11y) i użyteczności serwisu. W praktyce dobrym wzorcem jest struktura: <header> na górę, poniżej <nav> (jeśli jest), potem jeden <main>, a w nim np. <article>, <section>, <aside>, a na końcu <footer>. Wewnątrz <main> możesz mieć kilka artykułów, sekcji, nawet różne widoki aplikacji SPA, ale sam <main> jest tylko jeden. Moim zdaniem warto od początku wyrabiać sobie nawyk: dokładnie jeden <main> na stronę i absolutnie nie zagnieżdżać go wewnątrz <header>, <footer> czy <article>. To jest też zgodne z dobrymi praktykami SEO – wyszukiwarki łatwiej rozumieją, co jest esencją danej podstrony. Dodatkowo, wiele frameworków front‑endowych i systemów CMS zakłada w layoutach pojedynczy kontener na treść główną, który semantycznie powinien być właśnie <main>, a nie np. zwykłym <div id="content">. Taka semantyka sprawia, że kod wygląda czyściej, jest bardziej przyszłościowy i po prostu profesjonalny.

Pytanie 19

Który zapis CSS wprowadzi niebieskie tło dla bloku?

A. div {color: blue;}

B. div {background-color: blue;}

C. div {shadow: blue;}

D. div {border-color: blue;}

Odpowiedzi div {border-color: blue;}, div {color: blue;} oraz div {shadow: blue;} nie są poprawne z kilku powodów, które warto szczegółowo omówić. Pierwsza z tych odpowiedzi odnosi się do właściwości 'border-color', która zmienia kolor obramowania elementu. Chociaż może to wpłynąć na wygląd bloku, nie ma wpływu na tło, co jest celem pytania. Z kolei 'color' to właściwość, która definiuje kolor tekstu wewnątrz elementu, a nie tła. Oznacza to, że użycie tej właściwości zmieni tylko kolor tekstu, pozostawiając tło bez zmian. Wreszcie, zapis 'shadow' nie istnieje w standardzie CSS, co wskazuje na nieporozumienie dotyczące właściwości stylizacji. Możliwe, że użytkownik miał na myśli 'box-shadow', która stosuje cień do elementu, ale nie dotyczy to koloru tła. Kluczowym błędem jest brak zrozumienia podstawowych właściwości CSS oraz ich zastosowania. Warto pamiętać, że CSS ma określone zasady i właściwości, które należy stosować zgodnie z ich przeznaczeniem, aby osiągnąć zamierzony efekt wizualny. Zrozumienie tych różnic jest fundamentalne dla każdego, kto chce efektywnie posługiwać się CSS i projektować atrakcyjne oraz funkcjonalne strony internetowe.

Pytanie 20

Który selektor stosuje formatowanie dla akapitów tekstu z klasą tekst oraz dla elementu blokowego o ID obrazki?

A. p.tekst, div#obrazki

B. p.tekst + div#obrazki

C. p#tekst, div.obrazki

D. p#tekst + div.obrazki

Wybór selektorów w odpowiedziach niepoprawnych często wynika z nieporozumienia dotyczącego składni CSS oraz specyfiki selektorów. W przypadku selektora 'p#tekst', należy zauważyć, że nie jest on poprawny, ponieważ identyfikator (ID) nie może być użyty w kontekście elementu, który już ma przypisaną klasę. W CSS, ID powinno być unikalne dla danego dokumentu, a klasa może być stosowana wielokrotnie. W ten sposób, 'p#tekst' sugeruje element <p> z ID 'tekst', co koliduje z ideą używania klas. Dalsza analiza selektorów jak 'p.tekst + div.obrazki' wskazuje na zastosowanie kombinacji selektorów, co nie pasuje do wymagań zadania. Operator '+' wskazuje na sąsiednie elementy, co oznacza, że styl będzie stosowany tylko do <div> bezpośrednio po <p>, co w przypadku tej konkretnej logiki nie wprowadza pożądanych efektów. Podobnie, selektor 'div.obrazki' sugeruje, że klasa 'obrazki' może być stosowana do każdego elementu <div>, co nie odnosi się do konkretnego ID. W praktyce, aby wyeliminować błędy, zaleca się gruntowne zrozumienie hierarchii i specyfiki selektorów w CSS oraz ich zastosowania w kontekście HTML. Przykładowo, stosując poprawny selektor, można uniknąć nadpisywania stylów przez inne reguły i zapewnić, że wszystkie elementy są odpowiednio stylizowane zgodnie z zamierzeniami projektowymi.

Pytanie 21

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

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

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

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

D. znaczników o id równym *

W przypadku pierwszej odpowiedzi, sugeruje ona, że klasa lub identyfikator oznaczony znakiem * odnosi się do formatowania, co jest niepoprawne. W CSS znaki * nie są stosowane do selektorów z identyfikatorem, gdyż identyfikatory muszą być unikalne i określone za pomocą #. Stąd, gdybyśmy mieli stylować elementy o określonym id, musielibyśmy użyć odpowiedniego identyfikatora, co wyklucza uniwersalne zastosowanie. Druga odpowiedź sugeruje, że formatowanie dotyczy elementów z przypisaną klasą *, co również nie jest prawdą. W CSS, klasy są oznaczane kropką, a nie znakiem *. Dlatego żaden element z taką klasą nie będzie objęty formatowaniem, ponieważ literalny znak * nie jest używany w kontekście klas. Trzecia odpowiedź myli pojęcia, sugerując, że formatowanie CSS ma zastosowanie do całego kodu HTML, co nie jest precyzyjne. Choć formatowanie zostanie zastosowane do wszystkich elementów, to jednak nie oznacza to, że cały kod HTML zostanie zmieniony. Kod HTML pozostaje niezmienny, a jedynie sposób prezentacji tych elementów w przeglądarce jest kształtowany przez CSS. Podsumowując, zrozumienie selektorów i ich zastosowania jest kluczowe dla poprawnego stylizowania stron internetowych. Wiele osób myli te pojęcia, co prowadzi do niepoprawnych konstrukcji w stylach CSS.

Pytanie 22

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

A. nav { float: right; }

B. aside {float: left; }

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

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

W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi. Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego. Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 23

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

A. <p class="akapit">akapit4</p>

B. <p>akapit</p>

C. <p href="/akapit">akapit3</p>

D. <p id="akapit">akapit2</p>

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 <p class="akapit">akapit4</p>, 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 24

Logo platformy CMS noszącej nazwę Joomla! to

A. B

B. C

C. D

D. A

Logo Joomla! jest charakterystyczne z uwagi na swoją kolorystykę i kształt symbolizujący współpracę oraz integrację. Zawiera cztery kolorowe elementy splecione w formie kwiatka lub wiru co często jest interpretowane jako symbol integracji społeczności i otwartości na różnorodność. Joomla! to system zarządzania treścią (CMS) napisany w PHP który wykorzystywany jest do tworzenia stron internetowych blogów i aplikacji internetowych. Jest jednym z najpopularniejszych CMS na świecie dzięki swojej elastyczności modułom oraz dużej społeczności wspierającej rozwój. Joomla! jest wykorzystywany zarówno przez małe przedsiębiorstwa jak i duże organizacje dzięki swojej możliwości skalowania i dostosowywania do indywidualnych potrzeb. Dodatkowo jego open-source'owy charakter pozwala na szerokie dostosowanie kodu do specyficznych wymagań co jest cenione przez programistów i deweloperów. Dobry wybór Joomla! jako CMS może znacząco przyspieszyć proces tworzenia i zarządzania treścią na stronie internetowej oferując jednocześnie wsparcie licznych rozszerzeń i szablonów

Pytanie 25

W języku HTML w celu określenia słów kluczowych dla danej strony, należy zastosować następujący zapis

A. <meta name="description" content="psy, koty, gryzonie">

B. <meta keywords="psy, koty, gryzonie">

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

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

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

Pytanie 26

W celu stylizacji strony internetowej stworzono odpowiednie reguły. Reguły te będą stosowane tylko do wybranych znaczników (np. niektóre nagłówki, kilka akapitów). W tej sytuacji, aby zastosować styl do kilku wybranych znaczników, najlepiej będzie użyć

{ text-align: right; }

A. klasy.

B. pseudoklasy.

C. selektora akapitu.

D. identyfikatora.

Zastosowanie pseudoklas, identyfikatorów czy selektorów akapitów w sytuacji, gdy potrzebujemy przypisać ten sam styl do różnych elementów, nie jest efektywnym rozwiązaniem. Pseudoklasy, takie jak :hover, :focus czy :nth-child, służą do stylizacji elementów w szczególnych stanach lub według ich pozycji w dokumencie. Nie są one przeznaczone do grupowego przypisywania stylów do wielu elementów, przez co ich użycie w tym kontekście obniża elastyczność i powtarzalność kodu. Identyfikatory, chociaż mogą przypisać unikalny styl do konkretnego elementu, są ograniczone do jednego miejsca w dokumencie HTML. Oznacza to, że ich użycie jest nieefektywne w kontekście wielokrotnego stylizowania, co jest sprzeczne z zasadami semantycznego HTML i CSS. Selektor akapitu, z kolei, odnosi się do elementów <p> i pozwala na stylizację tych elementów w sposób globalny, jednak nie pozwala na precyzyjne dostosowanie stylów do wybranych akapitów w sposób, w jaki może to zrobić klasa. Właściwe zrozumienie koncepcji klas w CSS stanowi podstawę efektywnej stylizacji dokumentów HTML, a ich niewłaściwe zastąpienie innymi metodami może prowadzić do złożonych, mniej czytelnych i trudnych w zarządzaniu arkuszy stylów.

Pytanie 27

Jaki jest efekt działania programu w JavaScript?

var osoba = prompt("Podaj imię", "Adam");

A. pojawi się okno z pustym polem do edycji

B. otwarcie okna z polem do edycji, w którym znajduje się domyślny tekst "Adam"

C. uzyskanie z formularza wyświetlonego na stronie HTML imienia "Adam"

D. przypisanie do zmiennej osoba wartości "Adam"

Kod var osoba = prompt('Podaj imię' 'Adam') używa funkcji prompt która jest specyficznym mechanizmem w JavaScript. Funkcja ta nie przypisuje bezpośrednio wartości Adam do zmiennej osoba w sposób jawny ale prezentuje użytkownikowi okno dialogowe z domyślną wartością. To okno dialogowe zawiera pole tekstowe które umożliwia edycję przez użytkownika. Użytkownik może pozostawić sugerowaną wartość Adam lub ją zmienić wprowadzając dane. W przypadku gdy użytkownik kliknie anuluj zmienna osoba zostanie ustawiona na null. Z tego powodu odpowiedź sugerująca bezpośrednie przypisanie wartości do zmiennej nie jest poprawna. Koncepcja pobrania imienia z formularza HTML również jest błędna ponieważ nie jest to forma interakcji z formularzem a z oknem dialogowym. Formularze HTML mają swoją własną strukturę i sposób manipulacji danymi który różni się od metody używanej w przypadku prompt. Kolejnym błędnym założeniem jest twierdzenie że okno dialogowe jest puste. Prompt oferuje możliwość podania domyślnej wartości co zostało zrealizowane w przykładzie poprzez umieszczenie Adama jako drugiego argumentu funkcji. Zrozumienie różnic w działaniu funkcji JavaScript oraz ich ograniczeń jest kluczowe w projektowaniu efektywnych interfejsów użytkownika na stronach internetowych. Programiści powinni być świadomi standardów i dobrych praktyk związanych z używaniem różnych metod interakcji w aplikacjach webowych by zapewnić optymalne doświadczenia użytkownika i kompatybilność z nowoczesnymi przeglądarkami internetowymi. Funkcje takie jak prompt są wygodne lecz ich użycie wymaga zrozumienia kontekstu i potencjalnych ograniczeń bezpieczeństwa oraz kompatybilności z przeglądarkami które mogą wpływać na sposób ich obsługi w bardziej złożonych aplikacjach webowych. Dlatego nowoczesne rozwiązania często korzystają z bardziej złożonych mechanizmów jak formularze HTML z dynamicznymi stylami i skryptami które pozwalają na większą kontrolę i elastyczność w interakcji z użytkownikiem.

Pytanie 28

Która z definicji CSS określa formatowanie nagłówka h1: tekst nadkreślony, z odstępami między wyrazami 10 px i czerwonym kolorem tekstu?

h1{
  text-decoration: overline;
  word-spacing: 10px;
  color: red;
}                       A.

h1{
  text-decoration: overline;
  letter-spacing: 10px;
  color: red;
}                       B.

h1{
  text-transform: none;
  line-height: 10px;
  color: rgb(255,0,0);
}                       C.

h1{
  text-decoration: underline;
  line-height: 10px;
  color: rgb(255,0,0);
}                       D.

A. C.

B. B.

C. D.

D. A.

Niektóre z odpowiedzi, które wybrałeś, zawierają nieprawidłowe pojęcia i błędy w zrozumieniu CSS. Polecenie 'letter-spacing' stosowane w odpowiedzi B jest służy do określania odległości między literami, nie między wyrazami. Jest to różnica kluczowa, która ma duży wpływ na wygląd i czytelność tekstu. Odpowiedź C nie zawiera żadnego z wymaganych stylów, co pokazuje brak zrozumienia dla zadania. Używanie 'underline' zamiast 'overline', jak to miało miejsce w odpowiedzi D, prowadzi do podkreślenia tekstu zamiast nadkreślenia. To ilustruje błąd w zrozumieniu różnych stylów tekstu dostępnych w CSS. W codziennej praktyce, zrozumienie różnicy między tymi dwoma stylami jest kluczowe dla efektywnego formatowania tekstu. W CSS, jest ważne aby dokładnie rozumieć, co każde polecenie robi, oraz jak te polecenia wpływają na ostateczny wygląd strony.

Pytanie 29

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

A. rgb(0, 160, 0)

B. rgb(0, 128, 0)

C. rgb(0, 100, 0)

D. rgb(0, 80, 0)

Wartości rgb(0, 80, 0), rgb(0, 160, 0) oraz rgb(0, 100, 0) są niepoprawnymi reprezentacjami koloru zielonego w notacji RGB, ponieważ nie odwzorowują one prawidłowej kombinacji składowych odpowiadających wartości szesnastkowej #008000. Wartość ta jest wyrażona jako sześć cyfr, gdzie dwie pierwsze reprezentują składową czerwoną, dwie kolejne składową zieloną, a ostatnie dwie składową niebieską. W przypadku #008000, składowa czerwona wynosi 0, składowa zielona wynosi 128, a składowa niebieska również wynosi 0. Typowym błędem, prowadzącym do błędnych odpowiedzi, jest mylenie zakresu wartości składowych. Na przykład, rgb(0, 80, 0) sugeruje, że składowa zielona wynosi 80, co jest znacznie niższą wartością niż 128, przez co kolor staje się ciemniejszy i mniej nasycony. Podobnie, rgb(0, 160, 0) i rgb(0, 100, 0) modyfikują intensywność koloru zielonego, co prowadzi do zupełnie innych odcieni, które nie odpowiadają standardowemu zielonemu. Znajomość konwersji między tymi formatami oraz ich zastosowanie w praktyce, np. w grafikach komputerowych czy web designie, jest kluczowa dla uzyskania pożądanych efektów wizualnych. Dobrą praktyką jest zawsze sprawdzanie wartości za pomocą narzędzi do wyboru kolorów, które mogą pomóc uniknąć takich pomyłek.

Pytanie 30

Jaką właściwość należy zastosować w selektorze CSS, aby osiągnąć efekt rozrzucenia liter?

A. text-space

B. letter-spacing

C. text-decoration

D. letter-transform

W odpowiedziach, które nie są poprawne, widzimy niepoprawne właściwości CSS, które nie służą do modyfikacji odstępów pomiędzy literami. 'letter-transform' nie jest rzeczywistą właściwością CSS. W CSS nie istnieje możliwość zmiany sposobu, w jaki litery są rozdzielane za pomocą tej nieistniejącej właściwości. 'text-decoration' służy do dekorowania tekstu, co obejmuje takie efekty jak podkreślenie, przekreślenie lub zmiana koloru tekstu, ale nie wpływa na odstępy między literami. 'text-decoration' ma zatem inne zastosowanie i nie jest związana z typografią w kontekście rozstrzelenia liter. Z kolei 'text-space' również nie jest uznawane za standardową właściwość CSS; nie ma jej w dokumentacji W3C. Jej brak w specyfikacji CSS oznacza, że nie można jej używać do regulowania odstępów w tekście. Dlatego, aby skutecznie kontrolować odstępy między literami, należy korzystać z 'letter-spacing', pozostawiając inne właściwości bez zastosowania w tym kontekście.

Pytanie 31

Aby włączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy zastosować poniższy fragment kodu HTML?

A. <link rel="stylesheet" type="text/css" href="styl.css" />

B. <optionvalue="styl.css" type="text/css" />

C. <meta charset="styl.css" />

D. <div id="styl.css" relation="css" />

Wszystkie pozostałe odpowiedzi zawierają poważne błędy w koncepcji dołączania zewnętrznych arkuszy stylów do dokumentów HTML. Odpowiedź <option value="styl.css" type="text/css" /> sugeruje użycie elementu <option>, który jest przeznaczony do tworzenia listy wyboru w formularzach, a nie do dołączania stylów. Element ten nie ma żadnego zastosowania w kontekście ładowania zewnętrznych plików CSS, co prowadzi do błędnych założeń o jego funkcjonalności. Z kolei <meta charset="styl.css" /> wykorzystuje element <meta> w niewłaściwy sposób, ponieważ służy on do definiowania zestawu znaków używanego w dokumencie HTML, a nie do dołączania stylów. Taki błąd może wynikać z nieporozumienia co do celu i zastosowania metatagów, które są kluczowe dla ustalania parametrów strony, ale nie do jej stylizacji. Ostatnia odpowiedź <div id="styl.css" relation="css" /> również nie jest poprawna, ponieważ <div> jest elementem kontenerowym, który nie ma miejsca w kontekście łączenia zewnętrznych plików CSS. Błąd w myśleniu, który prowadzi do takich odpowiedzi, często wynika z braku pełnego zrozumienia struktury HTML i roli, jaką różne elementy odgrywają w dokumentach webowych. Kluczowe jest zrozumienie, że dołączanie stylów wymaga użycia odpowiednich elementów, a ich zastosowanie powinno opierać się na standardach W3C, aby zapewnić zgodność i funkcjonalność stron internetowych.

Pytanie 32

Selektor CSS a:link {color:red} w arkuszach stylów nazywanych kaskadowymi określa

A. pseudoelement.

B. klasę.

C. pseudoklasę.

D. identyfikator.

Wybór odpowiedzi związanej z klasą, identyfikatorem lub pseudoelementem nie uwzględnia kluczowej różnicy między tymi pojęciami a pseudoklasami. Klasa w CSS definiuje grupę elementów, które mają wspólne cechy stylistyczne, natomiast identyfikator jest unikalny dla jednego elementu na stronie i powinien być używany tylko raz. Klasy i identyfikatory są przypisywane za pomocą atrybutów 'class' i 'id' w HTML, co czyni je bardziej statycznymi, podczas gdy pseudoklasy odnoszą się do konkretnego stanu elementu, co wprowadza element dynamiki. Pseudoelementy, takie jak '::before' lub '::after', również różnią się, ponieważ pozwalają na stylizację części elementu, a nie jego całego stanu. Typowe błędy myślowe związane z myleniem tych pojęć wynikają często z braku zrozumienia, jak działa kaskadowość i dziedziczenie w CSS. Kluczowe jest zrozumienie, że pseudoklasy są narzędziem do reakcji na interakcje użytkownika, co pozwala na bardziej zaawansowane i intuicyjne projektowanie stron internetowych. Ignorowanie tych różnic prowadzi do nieefektywnego stylowania i może obniżać jakość interfejsów użytkownika.

Pytanie 33

W HTML 5 atrybut action jest wykorzystywany w znaczniku

A. <form>

B. <head>

C. <body>

D. <code>

Zarówno <code>, <body>, jak i <head> to znaczniki HTML, które mają swoiste zastosowanie, ale nie są związane z funkcją przesyłania danych formularzy. Znacznik <code> służy do prezentacji kodu źródłowego w formacie tekstowym, co nie ma żadnego związku z obsługą formularzy. Stosowanie go w kontekście atrybutu action jest błędne, ponieważ jego rola ogranicza się do formatowania tekstu, a nie do interakcji z danymi użytkownika. Znacznik <body> odpowiada za zawartość widoczną na stronie, ale nie definiuje, jak te dane powinny być przetwarzane po ich przesłaniu. Atrybut action nie ma zastosowania w tym kontekście, ponieważ nie obsługuje przesyłania danych, a jego brak spowoduje, że formularz nie będzie miał określonego celu, co może prowadzić do nieefektywnego lub nieprawidłowego działania strony. Natomiast znacznik <head> jest używany do definiowania metadanych dokumentu HTML, takich jak tytuł strony czy odwołania do arkuszy stylów oraz skryptów. Nie zawiera elementów interaktywnych i nie ma związku z przesyłaniem formularzy, co czyni jego wybór całkowicie nietrafionym w tej sytuacji. Kluczowym błędem w rozumieniu tego zagadnienia jest mylenie ról poszczególnych znaczników i ich funkcji w architekturze dokumentu HTML.

Pytanie 34

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

A. XHTML1.0

B. HTML4

C. XHTML 2.0

D. HTML5

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

Pytanie 35

Jakie polecenie w CSS wykorzystuje się do dołączenia zewnętrznego arkusza stylów?

A. require

B. include

C. import

D. open

Wszystkie pozostałe opcje nie są poprawnymi poleceniami CSS do załączania zewnętrznych arkuszy stylów. 'Open' nie jest uznawanym poleceniem w kontekście CSS; nie ma takiej funkcjonalności, co czyni tę odpowiedź niewłaściwą. 'Require' to termin często używany w kontekście programowania, szczególnie w językach takich jak Ruby, ale nie ma zastosowania w CSS i nie służy do włączania stylów. Wreszcie, 'include' również nie jest zastosowaniem w CSS. Choć może być używane w innych językach programowania i systemach szablonów do włączania plików, w kontekście CSS nie odnosi się do żadnej znanej funkcji. Zrozumienie tych terminów jest kluczowe, ponieważ pomaga odróżnić znaczenie i zastosowanie terminologii w różnych językach oraz środowiskach programistycznych. Niezrozumienie różnicy między tymi terminami może prowadzić do błędów w kodowaniu i problemów z organizacją stylów, co z kolei może wpływać na wydajność oraz zarządzanie projektami webowymi.

Pytanie 36

Ustalenie w języku CSS wartości background-attachment: scroll oznacza, że

A. obraz tła pojawi się w prawym górnym rogu witryny

B. tło witryny pozostanie nieruchome i nie będzie się przesuwać podczas przewijania strony

C. obrazek tła będzie się powtarzać (kafelki)

D. tło witryny będzie przesuwane wraz z przewijaniem strony

Wszystkie pozostałe odpowiedzi zawierają błędne interpretacje właściwości 'background-attachment: scroll'. W pierwszej odpowiedzi sugeruje się, że ta właściwość powoduje powtarzanie grafiki tła. W rzeczywistości powtarzanie tła reguluje właściwość 'background-repeat', a nie 'background-attachment'. Właściwość ta jest odpowiedzialna za sposób, w jaki tło jest renderowane na stronie, a nie za jego przewijanie. Natomiast w odpowiedzi odnoszącej się do stałego tła, również jest to niepoprawne rozumienie. 'background-attachment: fixed' jest właściwością, która ustawia tło w taki sposób, aby pozostawało nieruchome podczas przewijania strony. Użytkownicy mogą być skłonni pomylić te dwie właściwości, co prowadzi do nieporozumień w projektowaniu stron. Warto również zauważyć, że umieszczanie grafiki w określonym miejscu, jak w odpowiedzi sugerującej umiejscowienie w prawym górnym rogu, jest regulowane przez właściwość 'background-position', a nie 'background-attachment'. Takie błędne podejście może prowadzić do nieefektywnego wykorzystania CSS oraz do problemów w interpretacji stylów przez przeglądarki. Zrozumienie różnicy między tymi właściwościami jest kluczowe dla skutecznego projektowania i implementacji stylów CSS, co jest fundamentalne w branży web developmentu. Używanie odpowiednich właściwości w odpowiednich kontekstach pozwala na uzyskanie optymalnych efektów wizualnych i funkcjonalnych na stronach internetowych.

Pytanie 37

W kodzie HTML zamieszczono link do strony internetowej:

<a href="http://google.com">strona Google</a>

Jakie dodatkowe zmiany należy wprowadzić, aby link otwierał się w nowym oknie lub zakładce przeglądarki, dodając do definicji linku odpowiedni atrybut?

A. rel = "external"

B. target = "_blank"

C. target = "_parent"

D. rel = "next"

Atrybuty rel = "next" oraz rel = "external" nie są odpowiednie dla celu otwierania strony w nowym oknie czy zakładce. Atrybut rel służy do określenia relacji między stroną źródłową a docelową, a nie do definiowania sposobu otwierania odnośników. Wartość "next" jest używana w kontekście paginacji, oznaczającej, że dany link prowadzi do następnej strony w serii, co nie ma nic wspólnego z otwieraniem w nowym oknie. Podobnie, "external" jest używane do wskazania, że link prowadzi do zewnętrznego źródła, ale nie definiuje, jak ma być otwierany. Otwieranie odnośników bez odpowiednich atrybutów, które kontrolują sposób ich wyświetlania, może prowadzić do frustracji użytkowników, gdyż są oni zmuszeni do korzystania z przycisków „wstecz” przeglądarki, aby wrócić do poprzedniej strony. Umożliwienie otwierania w nowym oknie może być lepszym rozwiązaniem dla zewnętrznych źródeł, co jest często praktykowane w standardach webowych. Użytkownik powinien mieć kontrolę nad tym, czy chce opuścić obecną stronę, czy też nie. Dlatego kluczowe jest zrozumienie znaczenia i zastosowania atrybutu target w kontekście projektowania stron internetowych oraz odpowiednich standardów, aby poprawić doświadczenia użytkowników.

Pytanie 38

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. 30 znaków, które będą widoczne podczas wpisywania

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

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

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

Jeśli mówimy o znaczniku <input> w HTML, to dobrze jest wiedzieć, jak działają atrybuty typu maxlength i type. Atrybut maxlength pozwala ustawić maksymalną liczbę znaków w polu tekstowym. W polu typu password użytkownik może wpisać max 20 znaków, ale to, co widzisz, może być inne. Często myli się atrybut size z ograniczeniem liczby wprowadzanych znaków, ale tak naprawdę chodzi tylko o to, jak szerokie jest pole, więc nie zmienia jego funkcjonalności. Pole typu password ma na celu ukrycie wpisywanych znaków, co zazwyczaj oznacza, że to, co wpisujesz, zastąpione jest gwiazdkami lub kropkami, by nie było widać tego, co piszesz. Te rzeczy są ważne dla bezpieczeństwa aplikacji webowych. Ostatnio zauważyłem, że niektórzy mają problemy z rozumieniem tych atrybutów, co może prowadzić do błędów w obsłudze danych użytkowników i problemów z bezpieczeństwem.

Pytanie 39

W kodzie CSS stworzono cztery klasy stylizacji, które zostały wykorzystane do formatowania akapitów. Efekt widoczny na ilustracji uzyskano dzięki zastosowaniu klasy o nazwie

A. format1

B. format3

C. format4

D. format2

Niepoprawne odpowiedzi wynikają z błędnego rozumienia właściwości CSS text-decoration. Klasa format1 stosuje overline, czyli nadkreślenie, które jest rzadziej używane, ale może służyć do podkreślania ważności tekstu. Format3 wykorzystuje underline, popularne do oznaczania linków lub podkreślania ważnych sekcji, jednak nie jest to styl widoczny na obrazie. Format4 to brak dekoracji, co oznacza, że tekst pozostaje bez jakichkolwiek dodatkowych linii, co jest częstą praktyką w celu zachowania prostoty wizualnej. Niezrozumienie różnic pomiędzy tymi stylami może prowadzić do błędnego zastosowania w projektach webowych, co wpływa na czytelność i dostępność treści. Przy projektowaniu stron ważne jest, aby odpowiednio korzystać z właściwości CSS, aby dostosować wygląd tekstu do potrzeb użytkownika, jednocześnie przestrzegając wytycznych dotyczących dostępności, takich jak WCAG, które promują użycie semantycznego oznaczania i odpowiedniego kontrastu tekstu dla użytkowników z różnymi potrzebami.

Pytanie 40

Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:

<style type="text/css">
 <!--
   p {color: blue; font-size: 14pt; font-style: italic}
   a { font-size: 16pt; text-transform: lowercase; }
   td.niebieski { color: blue }
   td.czerwony { color: red }
 -->
 </style>

A. Akapit będzie transponowany na małe litery.

B. Jest to styl lokalny.

C. Odnośnik będzie pisany czcionką 14 punktów.

D. Zdefiniowano dwie klasy.

Niestety, twoja odpowiedź nie była prawidłowa. Pierwsze stwierdzenie, że jest to styl lokalny, jest nieprawidłowe, ponieważ kod CSS jest zdefiniowany w osobnym pliku, a nie bezpośrednio w tagu style wewnątrz pliku HTML, co oznacza, że jest to styl zewnętrzny, a nie lokalny. Trzecie stwierdzenie, że akapit będzie transponowany na małe litery, jest błędne, ponieważ w kodzie nie ma takiej instrukcji. Ostatnie stwierdzenie, że odnośnik będzie pisany czcionką 14 punktów, jest nieprawidłowe, ponieważ w kodzie nie ma instrukcji dotyczących rozmiaru czcionki dla odnośników. Wszystkie te odpowiedzi wynikają z niezrozumienia kodu CSS. CSS jest potężnym narzędziem do kontrolowania wyglądu strony internetowej i wymaga zrozumienia różnych selektorów, właściwości i wartości. Ważne jest, aby pamiętać, że nie wszystkie elementy HTML są stylizowane w ten sam sposób, a różne selektory CSS mają różne priorytety. To pomoże uniknąć błędów w przyszłości.

Rozpocznij nowy egzamin

Powrót do strony głównej