Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 18 kwietnia 2026 00:45
Data zakończenia: 18 kwietnia 2026 01:00

Egzamin niezdany

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Jak zdefiniować formatowanie tabeli w języku CSS, aby wyróżnić wiersz, na który aktualnie najeżdża kursor myszy, korzystając z innego koloru?

A. pseudoklasę :hover

B. pseudoklasę :visited

C. pseudoelement ::first-line

D. pseudoelement ::marker

Prawidłową odpowiedzią jest użycie pseudoklasy :hover, która jest standardowym rozwiązaniem w CSS do stylizacji elementów, gdy użytkownik na nie najedzie kursorem myszy. Pseudoklasa :hover pozwala na dynamiczną modyfikację wyglądu elementów, co jest szczególnie użyteczne w kontekście interaktywności stron internetowych. Na przykład, można zastosować tę pseudoklasę do wierszy tabeli, aby zmienić ich kolor tła na inny, co podnosi czytelność i estetykę interfejsu użytkownika. Implementacja może wyglądać następująco: table tr:hover { background-color: #f2f2f2; } - dzięki temu, gdy użytkownik najedzie myszką na wiersz tabeli, jego tło zmieni się na jasno szare, co zwraca uwagę na ten wiersz. Użycie :hover jest zgodne z dobrymi praktykami w projektowaniu UI, gdyż poprawia doświadczenia użytkownika oraz umożliwia intuicyjne korzystanie z interakcji na stronie. Pseudoklasa :hover wspiera również responsywność, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcje z elementami, co jest kluczowe w nowoczesnym projektowaniu stron.

Pytanie 2

Która z reguł dotyczących sekcji w języku HTML jest poprawna?

A. W sekcji <head> nie można umieszczać kodu CSS, jedynie odwołanie do pliku CSS

B. W sekcji <head> umieszcza się część <body>

C. W sekcji <head> można zdefiniować szablon strony przy użyciu znaczników <div>

D. W sekcji <head> mogą znajdować się znaczniki <meta>, <title>, <link>

Wybór tej odpowiedzi jest słuszny, ponieważ w części <head> dokumentu HTML mogą występować różne znaczniki, które są kluczowe dla poprawnej struktury i funkcjonalności strony. Znaczniki <meta> służą do dostarczania danych o stronie, takich jak opis, słowa kluczowe czy informacje o autorze, co jest istotne dla SEO (optymalizacji pod kątem wyszukiwarek). Znacznik <title> definiuje tytuł strony, który jest wyświetlany w zakładkach przeglądarki oraz w wynikach wyszukiwania, co ma wpływ na wrażenia użytkowników oraz ich decyzje. Z kolei znacznik <link> jest używany do odwoływania się do zewnętrznych arkuszy stylów CSS, co pozwala na oddzielenie struktury HTML od stylizacji. Dobre praktyki wskazują, że umieszczanie CSS w <head> zamiast w <body> poprawia czas ładowania strony oraz zapewnia, że style są stosowane jeszcze przed renderowaniem zawartości, co wpływa na lepszą użyteczność i wygląd strony. Dobrze zorganizowana sekcja <head> może przyczynić się do lepszego pozycjonowania w wyszukiwarkach oraz poprawy doświadczeń użytkowników.

Pytanie 3

W dokumencie XHTML znajduje się fragment kodu, który posiada błąd w walidacji. Na czym ten błąd polega? ```

tekst

pierwsza linia
Druga linia

```

A. Znacznik musi być zamknięty

B. Znacznik nie może być umieszczany wewnątrz znacznika

C. Znaczniki powinny być zapisywane dużymi literami

D. Nie ma nagłówka szóstego stopnia

W odpowiedzi wskazano, że znacznik powinien być zamknięty, co jest zgodne z zasadami XHTML. W przeciwieństwie do HTML, w XHTML każdy znacznik musi być poprawnie zamknięty, aby kod był zgodny ze standardami. W przypadku znacznika , który służy do wstawienia łamania linii, powinien być zapisany jako w XHTML. Taki sposób zapisu zapewnia, że dokument jest poprawnie zinterpretowany przez przeglądarki i inne narzędzia przetwarzające. Warto również zaznaczyć, że poprawne zamykanie znaczników jest kluczowe dla utrzymania struktury dokumentu i jego walidacji, co wpływa na dostępność i SEO. Praktyczne przykłady obejmują tworzenie dokumentów XHTML, w których konsekwentnie stosuje się poprawną składnię, co ułatwia ich przyszłą edycję i utrzymanie. Zastosowanie poprawnych standardów, takich jak XHTML, jest również dobre dla interoperacyjności między różnymi platformami i aplikacjami.

Pytanie 4

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

A. treści polską czcionką

B. znaku przekreślenia

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

D. znaku wielokropka

Wybór znaków przekreślenia, znaków wielokropka czy treści polską czcionką jest niepoprawny, ponieważ żaden z tych elementów nie jest związany z funkcją znacznika <pre>. Po pierwsze, znaki przekreślenia są używane w HTML do zaznaczania tekstu, który ma być przedstawiony jako przekreślony, co nie ma nic wspólnego z preformatowaniem tekstu. Element <s> lub <del> jest odpowiedzialny za takie formatowanie, a nie <pre>. Kolejną pomyłką jest zrozumienie roli wielokropka. W HTML nie istnieje znacznik, który odpowiada za wyświetlanie wielokropka w specyficzny sposób poza standardowym tekstem. W rzeczywistości wielokropek jest jedynie trzema kropkami i nie ma potrzeby go formatować w kontekście preformatowanego tekstu. Ostatnia z wymienionych odpowiedzi, sugerująca, że <pre> służy do wyświetlania treści polską czcionką, jest również błędna. HTML nie definiuje czcionek narodowych; zamiast tego, czcionki są kontrolowane przez CSS, a nie przez znaczniki HTML. Z tego powodu znaczniki <pre> nie mają żadnego wpływu na wybrany styl czcionki, a ich główną funkcją jest zachowanie formatowania tekstu, co czyni je idealnym narzędziem do wyświetlania kodu źródłowego, a nie do stylizacji typograficznej.

Pytanie 5

Aby prawidłowo zorganizować hierarchiczną strukturę tekstu na stronie internetowej, powinno się wykorzystać

A. znacznik z formatowaniem

B. znacznik <div>

C. znaczniki <h1>, <h2> oraz

D. znaczniki <frame> i <table>

Zastosowanie znaczników <div> do definiowania hierarchicznej struktury treści jest niewłaściwe, ponieważ znacznik ten jest semantycznie neutralny i służy głównie do grupowania elementów w celu stosowania stylów CSS lub skryptów JavaScript. Nie dostarcza on informacji o strukturze treści, co negatywnie wpływa na SEO oraz dostępność strony. Ponadto, znaczniki <frame> i <table> również nie są odpowiednie do definiowania hierarchii treści. Znacznik <frame> jest przestarzały i niezalecany w nowoczesnym HTML, a jego użycie może prowadzić do problemów z nawigacją oraz indeksowaniem przez wyszukiwarki. Z kolei znaczniki <table> powinny być stosowane wyłącznie do prezentacji danych w formacie tabelarycznym, a nie do strukturyzacji treści, co także wpływa na czytelność i dostępność witryny. Formatowanie akapitów za pomocą znaczników jest istotne, jednak użycie ich wyłącznie w połączeniu z innymi znacznikami, które brakują w kontekście hierarchii, nie zapewnia klarownej struktury dla użytkowników oraz robotów wyszukiwarek. Dlatego odpowiednia hierarchia z użyciem <h1>, <h2> oraz jest kluczowa dla poprawnego zdefiniowania treści na stronie.

Pytanie 6

Podczas definiowania koloru w formacie RGBA, na przykład rgba(100, 40, 50, 0.2), ostatnia liczba odnosi się do

A. nasycenia koloru czarnego

B. przezroczystości, gdzie 0 oznacza pełną przezroczystość, a 1 jej brak

C. przezroczystości, gdzie 1 oznacza pełną przezroczystość, a 0 jej brak

D. saturacji barw RGB

Wybór wartości, które nie odnoszą się do przezroczystości, może prowadzić do nieporozumień w zakresie interpretacji koloru w grafice komputerowej. Nasycenie koloru czarnego lub saturacja barw RGB są terminami, które odnoszą się do intensywności koloru lub jego czystości, ale nie mają nic wspólnego z przezroczystością. Saturacja określa, jak bardzo dany kolor jest odległy od szarości; im wyższa saturacja, tym kolor jest bardziej intensywny. Wartości takie jak nasycenie i jasność są kluczowe w kontekście modelu HSL (Hue, Saturation, Lightness), który jest alternatywną metodą reprezentacji kolorów, ale nie mają zastosowania w notacji RGBA. Często występującym błędem w myśleniu jest mylenie przezroczystości z intensywnością koloru; należy pamiętać, że stopień przezroczystości dotyczy widoczności koloru na tle innych elementów, a nie jego czystości czy głębokości. Użycie niewłaściwych terminów w kontekście grafiki komputerowej może prowadzić do błędnych rozwiązań w procesie projektowania, dlatego tak ważne jest zrozumienie podstawowych pojęć związanych z kolorami oraz znajomość standardów i dobrych praktyk w branży.

Pytanie 7

Który z przedstawionych kodów XHTML sformatuje tekst według podanego wzorca?
Ala ma kota
a kot ma Alę

A. Ala ma kota a kot ma Alę

B. Ala ma kota a kot ma Alę

C. Ala ma kota a kot ma Alę

D. Ala ma kota a kot ma Alę

Poprawna odpowiedź to Ala ma kota a kot ma Alę. W tym kodzie XHTML tekst 'Ala ma kota' jest odpowiednio sformatowany dzięki zastosowaniu znaku , który definiuje tekst pogrubiony, oraz , który oznacza tekst kursywą. Ponadto jest używane do wstawienia przerwy w linii, co jest zgodne z praktykami formatowania tekstu w HTML/XHTML. Zgodnie ze standardami W3C, XHTML jest stricte oparty na XML, co oznacza, że wszystkie elementy muszą być poprawnie zagnieżdżone i zamknięte. Użycie w drugiej części tekstu jest poprawne, ponieważ wskazuje na pewną formę wyróżnienia, a jednocześnie zachowuje semantykę. Przy tworzeniu stron internetowych ważne jest, aby formatowanie tekstu było zarówno estetyczne, jak i zgodne z regułami semantycznymi, co ta odpowiedź spełnia. Przykładowo, tekst ten można umieścić w dowolnym dokumencie HTML, aby zachować poprawne formatowanie, co wpływa na czytelność.

Pytanie 8

Który z podanych formatów pozwala na zapis zarówno dźwięku, jak i obrazu?

A. MP3

B. WAV

C. MP4

D. PNG

W przypadku formatów MP3, PNG i WAV, każdy z nich jest zaprojektowany do przechowywania jedynie jednego typu danych, co wyklucza ich zdolność do jednoczesnego zapisu dźwięku i obrazu. MP3 to format kompresji dźwięku opracowany głównie do przechowywania muzyki i innych nagrań audio. Choć jest szeroko stosowany i oferuje wysoką jakość dźwięku przy niewielkim rozmiarze pliku, nie ma możliwości zapisu danych wizualnych. Z kolei PNG jest formatem graficznym, który obsługuje przechowywanie obrazów rastrowych, oferując przezroczystość i bezstratną kompresję, ale nie jest przeznaczony do przechowywania dźwięku. Format WAV, z drugiej strony, jest standardem dla przechowywania dźwięku w postaci nieskompresowanej, co zapewnia wysoką jakość audio, ale również nie wspiera zapisu wideo. W związku z tym, wszystkie te formaty mają swoje specyficzne zastosowania, ale żaden z nich nie jest w stanie zrealizować funkcji zapisu zarówno dźwięku, jak i obrazu, co czyni MP4 jedynym odpowiednim wyborem w tym kontekście.

Pytanie 9

Jakie polecenie należy zastosować, aby słowo TEKST pojawiło się w kolorze czarnym w oknie przeglądarki internetowej?

A. TEKST

B. TEKST

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

D. <body color="black">TEKST

Odpowiedź TEKST jest poprawna, ponieważ wykorzystuje standardowy atrybut HTML do zmiany koloru tekstu. Atrybut 'color' w tagu pozwala na określenie koloru, w tym przypadku użyto wartości szesnastkowej '#000000', co odpowiada kolorowi czarnemu. Użycie wartości szesnastkowej jest uznaną praktyką w projektowaniu stron internetowych, ponieważ pozwala na precyzyjne określenie kolorów, a także wspiera szeroką gamę barw. Wartości szesnastkowe są bardziej uniwersalne i umożliwiają zastosowanie dowolnego koloru, co jest bardziej elastyczne niż nazwy kolorów w języku angielskim. Warto zauważyć, że od HTML5 tag jest przestarzały, dlatego zaleca się korzystanie z CSS do stylizacji tekstu, co jest bardziej zgodne z zasadami semantycznego HTML. Przykładowo, aby uzyskać ten sam efekt w CSS, można zastosować regułę: <style> .czarny { color: #000000; } </style> i użyć TEKST.

Pytanie 10

Standard kodowania ISO-8859-2 jest używany do poprawnego wyświetlania

A. znaków zarezerwowanych dla języka opisu strony

B. symboli matematycznych

C. polskich liter, takich jak: ś, ć, ń, ó, ą

D. znaków specjalnych dla języka kodu strony

Wybór odpowiedzi dotyczący znaków specjalnych dla języka kodu strony sugeruje, że ISO-8859-2 byłoby używane do obsługi elementów związanych z kodowaniem strony, co jest mylące. Chociaż kodowanie znaków jest istotne dla wyświetlania treści, odnosi się ono głównie do sposobu, w jaki znaki są reprezentowane w kodzie komputerowym, a nie do języka kodu strony. Z kolei odpowiedź dotycząca znaków zarezerwowanych dla języka opisu strony wprowadza dodatkowy zamęt, ponieważ zarezerwowane znaki nie mają związku z kodowaniem znaków, lecz dotyczy to specyficznych symboli i elementów w języku HTML, które mogą być interpretowane przez przeglądarki. Ostatnia odpowiedź sugerująca, że ISO-8859-2 jest używane dla symboli matematycznych nie ma podstaw, ponieważ ten standard koncentruje się na znakach używanych w językach europejskich. Takie nieprawidłowe podejścia mogą wynikać z braku zrozumienia specyfikacji standardów kodowania, co prowadzi do nieporozumień w zakresie ich zastosowania w praktyce. Należy pamiętać, że w kontekście tworzenia stron internetowych kluczowe jest wykorzystanie odpowiedniego kodowania, które zapewnia prawidłowe wyświetlanie treści, a nie symboli specyficznych dla danej dziedziny. Dlatego, dla zrozumienia znaczenia kodowania znaków, niezbędne jest zapoznanie się z dokumentacją oraz standardami, które definiują, jak różne znaki są reprezentowane w różnych kodowaniach.

Pytanie 11

Fragment dokumentu HTML sugeruje, że

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

A. kod HTML zapisano w wersji 5 języka.

B. kod HTML zapisano w wersji 4 języka.

C. znaczniki końcowe są wymagane w kodzie HTML, także dla znaczników samozamykających się.

D. wszystkie znaczniki w kodzie HTML powinny być zapisywane wielkimi literami.

Deklaracja DOCTYPE wskazuje na to że dokument HTML wykorzystuje standard HTML 4.01 w trybie ścisłym. HTML 4.01 jest jedną z wersji języka HTML wprowadzoną przez World Wide Web Consortium w 1999 roku i zawiera trzy warianty: Strict Transitional i Frameset. Tryb Strict oznacza ścisłe przestrzeganie zasad standardu bez użycia przestarzałych elementów i atrybutów takich jak tagi związane z formatowaniem stron które stały się przestarzałe w miarę rozwoju kaskadowych arkuszy stylów CSS. W kontekście praktycznym oznacza to że projektując stronę zgodną z tą specyfikacją należy unikać znaczników odpowiedzialnych za prezentację które były powszechnie stosowane w poprzednich wersjach HTML. Zamiast tego zaleca się korzystanie z CSS do określania wyglądu strony co nie tylko wspiera separację struktury treści od jej wyglądu ale także ułatwia przenoszenie i aktualizację stylów. Używając deklaracji DOCTYPE HTML 4.01 Strict można zapewnić lepszą zgodność z najnowszymi wersjami przeglądarek oraz ułatwić przyszłe aktualizacje kodu do nowoczesnych standardów takich jak HTML5 który wprowadza dodatkowe funkcjonalności i uproszczenia mające na celu poprawę semantyki i użyteczności stron WWW

Pytanie 12

Który link jest poprawnie sformułowany?

A. <a src="/www.strona.pl">strona</a>

B. <a href="http://strona.pl">strona</a>

C. <a href=http://strona.pl>strona</a>

D. <a href="http::/strona.pl>strona</a>

Odpowiedź <a href="http://strona.pl">strona</a> jest poprawna, ponieważ używa atrybutu "href" do definiowania odnośnika. Atrybut ten jest standardem w języku HTML i służy do określenia docelowego adresu URL, do którego ma prowadzić link. W przypadku tej odpowiedzi, składnia jest prawidłowa: adres URL jest umieszczony w cudzysłowach, a prefiks HTTP jest poprawny. W praktyce, poprawne użycie atrybutu href jest kluczowe dla zapewnienia, że użytkownicy mogą bezproblemowo nawigować po stronie internetowej. Na przykład, w dokumentacji HTML5, wyraźnie zaznaczone jest, że atrybut href powinien być używany, aby wskazać lokalizację zasobu. W rezultacie, stosując tę poprawną składnię, można uniknąć potencjalnych błędów w działaniu strony oraz poprawić jej dostępność, co jest istotne z punktu widzenia najlepszych praktyk webowych oraz SEO.

Pytanie 13

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

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

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

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

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

A. A.

B. D.

C. B.

D. C.

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

Pytanie 14

W CSS, żeby uzyskać efekt kursywy dla tekstu, należy zastosować właściwość

A. font-family

B. font-size

C. font-style

D. font-variant

W kontekście podanego pytania, inne dostępne odpowiedzi nie spełniają roli w uzyskiwaniu efektu pochylenia tekstu. Właściwość font-size jest używana do określania wielkości czcionki, co nie ma wpływu na jej nachylenie. Zmiana rozmiaru tekstu może wpłynąć na jego wyrazistość, ale nie spowoduje efektu pochylenia. Podobnie, font-family definiuje typ czcionki, co oznacza, jaką czcionkę użyjemy do wyświetlenia tekstu, ale nie zmienia jej stylu w kontekście nachylenia. Ze względu na to, że różne czcionki mogą mieć różne style, ważne jest, by rozróżnić te elementy. Z kolei font-variant dotyczy wariantów czcionek, takich jak małe wielkie litery, i również nie ma wpływu na nachylenie tekstu. Użycie niewłaściwych właściwości CSS może prowadzić do nieporozumień w stylizacji dokumentów, dlatego kluczowe jest zrozumienie roli każdej z nich. Warto więc zapoznać się z dokumentacją CSS oraz najlepszymi praktykami w zakresie stylizacji tekstów, aby właściwie wykorzystać dostępne właściwości.

Pytanie 15

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?

A. WordPress

B. Joomla!

C. MediaWiki

D. Drupal

Podczas wyboru systemu zarządzania treścią istotne jest zrozumienie różnic między różnymi platformami. Drupal jest potężnym CMS-em często wybieranym do budowy złożonych stron gdzie wymagane są skomplikowane struktury danych i zaawansowana kontrola uprawnień użytkowników. Jednak jego zaawansowane funkcje mogą sprawić że krzywa uczenia się będzie bardziej stroma szczególnie dla początkujących użytkowników. Drupal jest jednak doskonałym wyborem dla dużych organizacji które potrzebują niezawodności i skalowalności. Z kolei WordPress jest najbardziej popularnym CMS-em na świecie znanym ze swojej prostoty i ogromnej liczby dostępnych wtyczek i motywów co czyni go idealnym wyborem dla blogów i prostych stron internetowych. Jego przystępność i łatwość użycia sprawiają że jest on preferowany przez początkujących ale może być niewystarczający dla bardziej rozbudowanych projektów. MediaWiki to platforma stworzona dla projektów typu wiki i jest najlepiej znana z napędzania Wikipedii. Jej funkcje są skoncentrowane na umożliwieniu wielu użytkownikom współpracy i edycji treści co czyni ją mniej odpowiednią dla tradycyjnych stron internetowych. Typowym błędem podczas wyboru CMS-a jest kierowanie się wyłącznie popularnością zamiast analizowania specyficznych potrzeb projektu i odpowiednich funkcji jakie oferuje dany CMS. Dlatego kluczowe jest zrozumienie że wybór CMS-a powinien być podyktowany konkretnymi wymaganiami dotyczącymi funkcjonalności i zarządzania treścią.

Pytanie 16

Rozmiary ekranu w formacie 16:9 (zakładając, że piksel jest kwadratem) można osiągnąć przy rozdzielczości

A. 2560 na 2048 pikseli

B. 320 na 240 pikseli

C. 800 na 480 pikseli

D. 1366 na 768 pikseli

Inne podane rozdzielczości, takie jak 320 na 240 pikseli, 800 na 480 pikseli oraz 2560 na 2048 pikseli, nie spełniają wymogu proporcji 16:9, co skutkuje niewłaściwym wyświetleniem obrazu. Proporcje 320 na 240 pikseli to 4:3, co oznacza, że jest to starszy format, stosowany głównie w telewizorach CRT i niektórych wideo w internecie. Przy takim formacie, film emitowany w trybie panoramicznym może być wyświetlany z czarnymi pasami u góry i dołu ekranu, co jest niepożądane w przypadku współczesnych produkcji. Z kolei rozdzielczość 800 na 480 pikseli również nie odpowiada proporcji 16:9, a jej stosunek wynosi około 1,67, co czyni ją bardziej zbliżoną do 15:9. Na koniec, 2560 na 2048 pikseli, mimo że ma dużą rozdzielczość, tworzy stosunek 5:4, co w przypadku wyświetlania nowoczesnych treści wideo również prowadzi do problemów z proporcjami. W przypadku projektów multimedialnych, nieprzestrzeganie standardów proporcji może prowadzić do negatywnych wrażeń wizualnych oraz obniżenia jakości prezentacji, dlatego ważne jest, aby dobrze zrozumieć, jakie proporcje są odpowiednie dla konkretnego zastosowania.

Pytanie 17

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. przy pomocy reguły !important

B. przy pomocy pseudoelementu ::after

C. jako selektor potomka

D. jako pseudoklasę :active

Zdefiniowanie cechy za pomocą selektora potomka, pseudoklasy :active lub pseudoelementu ::after to podejścia, które nie spełniają wymaganego celu w kontekście priorytetyzacji stylów CSS. Selektor potomka odnosi się do elementów, które są zagnieżdżone wewnątrz innych elementów i nie zapewnia on wyższego priorytetu. Na przykład, jeśli mamy regułę `div p { color: blue; }`, a później w innym miejscu `p { color: red; }`, kolor tekstu w elemencie będzie czerwony, niezależnie od tego, że jest on dzieckiem <div>. Pseudoklasa :active dotyczy stanu interakcji z elementem, jak naciśnięcie przycisku. Nie można jej używać do stawiania stylów jako domyślnych, ponieważ działa tylko w momencie aktywacji, co nie spełnia wymogu stałego przypisania stylu. Pseudoelement ::after służy do dodawania treści po elemencie, ale również nie wpływa na priorytet wyświetlania stylów. Użycie tych metod w kontekście prób ustalenia stałych cech stylów może prowadzić do nieporozumień i błędów w kodzie, ponieważ nie zapewniają one odpowiedniej kontroli nad priorytetami, co jest kluczowe w projektowaniu stylów CSS. W praktyce, aby uniknąć konfliktów i nieprzewidywalnych rezultatów, zaleca się odpowiednie planowanie struktury styli oraz przejrzystość w używaniu reguły !important tylko tam, gdzie to absolutnie konieczne.

Pytanie 18

Jaki zapis w dokumencie HTML umożliwia powiązanie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <link rel="stylesheet' src="style.css">

B. <a src="style.css">

C. <link rel="stylesheet" href="style.css">

D. <a href="style.css">

Zapis <link rel="stylesheet" href="style.css"> jest poprawnym sposobem na dołączenie zewnętrznego arkusza stylów do dokumentu HTML. Atrybut 'rel' określa relację między dokumentem a zewnętrznym zasobem, w tym przypadku wskazując, że jest to arkusz stylów. Atrybut 'href' z kolei wskazuje ścieżkę do pliku CSS, który ma być użyty. Użycie znacznika <link> jest zgodne z standardem W3C i jest najlepszą praktyką w tworzeniu stron internetowych. Dzięki temu przeglądarka może załadować style z zewnętrznego pliku, co pozwala na łatwiejsze zarządzanie stylami oraz ich ponowne użycie w różnych dokumentach HTML. Umożliwia to także separację treści od stylizacji, co jest kluczowe w koncepcji wzorców projektowych, takich jak MVC (Model-View-Controller). Przykładowo, aby zmienić wygląd całej strony, wystarczy edytować jeden plik CSS, co znacząco upraszcza proces tworzenia i utrzymania witryn.

Pytanie 19

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 7

B. 5

C. 6

D. 4

Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 20

Który kod HTML zapewni identyczny efekt formatowania jak na przedstawionym obrazku?

W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

A. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

B. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

C. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

D. W tym paragrafie zobaczysz sposoby formatowania tekstu w HTML

Wybór niepoprawnych odpowiedzi wynika z błędnego użycia znaczników HTML, co wpływa na końcowe formatowanie tekstu. Pierwsza odpowiedź zawiera błąd polegający na niewłaściwym zamknięciu znacznika przez dodanie spacji przed ukośnikiem, co powoduje, że przeglądarki mogą błędnie interpretować strukturę HTML. W konsekwencji, tekst może nie być prawidłowo pogrubiony, ponieważ przeglądarka nie rozpoznaje zamknięcia znacznika. Trzecia odpowiedź całkowicie pomija znacznik , co oznacza, że tekst 'zobaczysz' nie zostanie pogrubiony, co jest niezgodne z wymaganym efektem wizualnym. Brak zastosowania odpowiednich znaczników wpływa na semantyczne znaczenie zawartości, co jest kluczowe w kontekście dostępności i dobrych praktyk w web designie. Czwarta odpowiedź błędnie rozdziela znaczniki wokół słowa 'zobaczysz', co nie tworzy efektu jednoczesnej kursywy i pogrubienia. Wiedza dotycząca zagnieżdżania znaczników jest istotna, aby uzyskać pożądany efekt wizualny, a także utrzymać semantykę i dostępność zgodnie z nowoczesnymi standardami tworzenia stron internetowych. Rozumienie hierarchii i poprawne zamykanie znaczników ma kluczowe znaczenie dla renderowania strony zgodnie z oczekiwaniami, jak również dla zachowania zgodności z HTML5.

Pytanie 21

Jeżeli rozmiar pliku graficznego jest zbyt duży do publikacji w sieci, co należy zrobić?

A. zwiększyć jego głębię kolorów

B. zapisać w formacie BMP

C. dodać kanał alfa

D. zmniejszyć jego rozdzielczość

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zmniejszenie rozdzielczości pliku graficznego jest jedną z najskuteczniejszych metod na zmniejszenie jego rozmiaru, co jest niezwykle ważne w kontekście publikacji w Internecie. Rozdzielczość obrazu odnosi się do liczby pikseli, które składają się na dany obraz, wyrażoną zazwyczaj w pikselach na cal (PPI) lub w całkowitej liczbie pikseli w szerokości i wysokości. Zmniejszając rozdzielczość, obniżamy liczbę pikseli, co w efekcie prowadzi do mniejszego rozmiaru pliku. Na przykład, obraz o rozdzielczości 4000x3000 pikseli ma 12 milionów pikseli, podczas gdy obraz o rozdzielczości 2000x1500 pikseli zaledwie 3 miliony pikseli. Oprócz zmniejszenia rozdzielczości, można również zastosować inne techniki kompresji, takie jak zmiana formatu pliku na JPEG, który jest bardziej efektywny w kompresji zdjęć, a także wykorzystanie narzędzi do optymalizacji grafiki, takich jak TinyPNG czy ImageOptim. Zmniejszając rozdzielczość, należy jednak pamiętać o zachowaniu odpowiedniej jakości obrazu, aby nie wpłynęło to negatywnie na jego czytelność i estetykę, co jest kluczowe w kontekście publikacji online.

Pytanie 22

Które z formatowań nie jest wyrażone w języku CSS?

A. Fragment pliku strona.html:

<style>
body { background-color: yellow; }
</style>

B. Fragment pliku formatowanie.css:

body { background-color: yellow; }

C. Fragment pliku strona.html:

<body bgcolor="yellow">

D. Fragment pliku strona.html:

<body style="background-color: yellow;" >

A. A.

B. B.

C. D.

D. C.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, prawidłowo wybrałeś odpowiedź C. To pytanie dotyczyło zrozumienia, które formatowania nie są wyrażone w języku CSS. W CSS wykorzystuje się różnego rodzaju selektory, aby określić elementy strony, do których mają być stosowane określone style. Fragmenty A i B przedstawiają formatowanie w języku CSS. Fragment A demonstruje styl wewnątrz dokumentu HTML, co jest jednym z trzech sposobów dodawania styli CSS do dokumentu HTML. Natomiast fragment B pokazuje styl z zewnętrznego pliku CSS, co jest zgodne ze standardami i uważane za najlepszą praktykę, ponieważ pozwala na utrzymanie oddzielenia struktury i prezentacji. Fragment D również wykorzystuje CSS, ale jest to tzw. "inline CSS", który jest stosowany bezpośrednio do elementu HTML. Ostatecznie, jedynie fragment C nie używa CSS. Zamiast tego, wykorzystuje przestarzały atrybut HTML "bgcolor" do określenia koloru tła, co obecnie jest uważane za złą praktykę. Pamiętaj, że zrozumienie różnicy pomiędzy HTML a CSS jest kluczowe w budowaniu poprawnie działających i dobrze zaprojektowanych stron internetowych.

Pytanie 23

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

A. Efekt 4

B. Efekt 1

C. Efekt 3

D. Efekt 2

Brak odpowiedzi na to pytanie.

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

Pytanie 24

Zaprezentowano rezultat zastosowania CSS oraz odpowiadający mu kod HTML. W jaki sposób trzeba zdefiniować styl, aby uzyskać takie formatowanie?

A. p::first-letter { font-size: 400%; color: blue; }

B. p.first-letter { font-size: 400%; color: blue; }

C. .first-letter { font-size: 400%; color: blue; }

D. #first-letter { font-size: 400%; color: blue; }

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ selektor CSS p::first-letter precyzyjnie określa, że stylizacja ma być zastosowana do pierwszej litery każdego akapitu, który jest oznaczony tagiem p. Jest to pseudo-element CSS, który umożliwia dostęp do pierwszej litery bloku tekstu w celu nadania jej unikalnego wyglądu. W tym przypadku zmieniono jej rozmiar na 400% oraz kolor na niebieski. Użycie ::first-letter jest zgodne z najlepszymi praktykami, gdyż pozwala na zachowanie semantyczności HTML i oddzielenie warstwy prezentacyjnej od treści, co jest kluczowe w responsywnym projektowaniu stron internetowych. Pseudo-elementy jak ::first-letter są niezwykle przydatne w tworzeniu estetycznych i czytelnych interfejsów użytkownika, zwłaszcza w przypadku publikacji zawierających dużo tekstu. Dobrą praktyką jest stosowanie pseudo-elementów w połączeniu z klasami i identyfikatorami, aby stylizacja była elastyczna i mogła być łatwo dostosowywana zgodnie z potrzebami projektu.

Pytanie 25

Przedstawiony serwis internetowy służy do walidacji

A. dokumentów HTML.

B. skryptów JavaScript.

C. bazy danych SQL.

D. arkuszy stylów.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest prawidłowa. Strona internetowa 'CSS Validation Service' jest narzędziem stworzonym przez konsorcjum W3C do walidacji arkuszy stylów CSS. W3C, czyli World Wide Web Consortium, to międzynarodowa społeczność, która rozwija otwarte standardy mające na celu długoterminowe wzrost i rozwój sieci WWW. Narzędzie do walidacji CSS zapewnia mechanizm sprawdzania kodu CSS pod kątem zgodności ze standardami W3C. Dzięki temu deweloperzy mogą upewnić się, że ich arkusze stylów są poprawne, co jest kluczowe dla zapewnienia prawidłowego wyglądu i działania stron internetowych na różnych platformach i przeglądarkach. Walidator CSS pomaga także naprawić ewentualne błędy w kodzie. To jest praktyczne zastosowanie tej usługi - utrzymanie jednolitych standardów kodowania, co prowadzi do większej interoperacyjności pomiędzy różnymi technologiami i narzędziami.

Pytanie 26

Który z wymienionych formatów wideo nie jest wspierany przez standard HTML5?

A. D. WebM

B. A. AVI

C. B. Ogg

D. C. MP4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź A. AVI jest trafna, bo format AVI (Audio Video Interleave) nie jest wspierany przez HTML5. W HTML5 mamy trzy główne formaty wideo, które przeglądarki akceptują: Ogg, MP4 i WebM. AVI to starszy format od Microsoftu, który nie spełnia dzisiejszych standardów. Warto używać formatów, które pasują do HTML5, takich jak MP4 (z kodekiem H.264) czy WebM (z kodekiem VP8), bo to zapewnia lepszą wydajność i szeroką kompatybilność z różnymi urządzeniami i przeglądarkami. Na przykład, kiedy osadzamy filmy na stronach, ważne jest, żeby wszystko działało płynnie na różnych platformach, bez potrzeby dodatkowych wtyczek. Dodatkowo, korzystanie z tych formatów wspiera SEO i poprawia wrażenia użytkowników, co w dzisiejszym cyfrowym świecie jest naprawdę istotne.

Pytanie 27

Jakie efekt osiągnie się za pomocą przedstawionego formatowania CSS dla nagłówka trzeciego poziomu?

A. kolor tekstu będzie pomarańczowy

B. kolor tekstu będzie szary

C. tło będzie w odcieniu szarym

D. tło będzie pomarańczowe

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź dotycząca tła pomarańczowego wynika z zasady specyficzności CSS W przedstawionym przykładzie stylu dla elementu h3 zastosowano właściwość background-color przypisując jej wartość orange bezpośrednio w znaczniku HTML co zwiększa specyficzność takiego stylu nad stylem zdefiniowanym w sekcji style w nagłówku strony Specyficzność w CSS to mechanizm określający który styl ma pierwszeństwo w przypadku konfliktu stylów dla tego samego elementu Styl wbudowany inline ma wyższą specyficzność niż style określone w sekcjach style co oznacza że definiując background-color inline jako orange nadpisuje on wcześniej zdefiniowane style Dzięki temu można precyzyjnie kontrolować wygląd poszczególnych elementów na stronie co jest dobrą praktyką w przypadku gdy konieczne są jednorazowe zmiany stylu dla konkretnego elementu Warto jednak pamiętać że nadmierne wykorzystywanie stylów inline może prowadzić do trudności w zarządzaniu wyglądem całej strony dlatego dobrą praktyką jest używanie ich oszczędnie oraz stosowanie zewnętrznych arkuszy stylów CSS tam gdzie to możliwe

Pytanie 28

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

Brak odpowiedzi na to pytanie.

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

W nagłówku dokumentu HTML umieszczono ```Strona miłośników psów``` Tekst ten pojawi się

A. w zawartości strony, w pierwszym widocznym nagłówku

B. w polu adresowym, przy podanym adresie URL

C. w zawartości strony, na banerze

D. na pasku tytułowym przeglądarki

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Tag <title> w HTML to naprawdę istotny element dla każdej strony internetowej. Jest to coś, co pomaga ludziom szybko zorientować się, o co chodzi na danej stronie, zwłaszcza gdy mamy otwartych kilka kart w przeglądarce. Dobry tytuł nie tylko ułatwia nawigację, ale także ma spory wpływ na to, jak strona wypada w wyszukiwarkach. Z własnego doświadczenia mogę powiedzieć, że jeśli tytuł jest konkretny i zawiera ważne słowa kluczowe, to zwiększa szanse na przyciągnięcie użytkowników. Na przykład, jeśli strona jest dla miłośników psów, to warto w tytule umieścić słowa takie jak 'psy' czy 'opiekunowie psów'. Taki przykład mógłby wyglądać tak: <title>Miłośnicy psów - Porady, opieka, zdrowie</title>. Dobrze zrobiony tytuł może też poprawić CTR, czyli współczynnik klikalności, co jest ważne, żeby przyciągnąć więcej odwiedzających.

Pytanie 30

Które z pól edycyjnych zostało przedstawione w opisanym stylu, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

A. Pole 1

B. Pole 4

C. Pole 2

D. Pole 3

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Dobrze, że dopasowałeś Pole 2 do stylu z kodu CSS. Widać, że dobrze ogarniasz te rzeczy! Ten padding 10px, co dałeś, naprawdę robi różnicę. Dzięki temu tekst ma więcej przestrzeni wokół siebie. A kolor tła Teal? Super wybór, bo to taki fajny pośredni odcień między niebieskim a zielonym. Biały tekst na tym tle jest świetnie widoczny, co jest mega ważne. No i brak obramowania, czyli border none, dodaje nowoczesności! Zaokrąglenie krawędzi, które ustawiłeś na 7px, sprawia, że pole wygląda przyjemniej. Takie rzeczy są często stosowane, by przygotować interfejsy, które są estetyczne i funkcjonalne. Jak projektujesz, pamiętaj o kontrastach, bo to naprawdę podnosi jakość aplikacji. Troska o estetykę i użyteczność to kluczowa sprawa. Dobra robota!

Pytanie 31

Oznaczenie barwy w postaci #FF00E0 jest równoważne zapisowi

A. rgb(F, 0, E0)

B. rgb(255, 0, 224)

C. rgb(FF, 0, E0)

D. rgb(255, 0, 128)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Oznaczenie #FF00E0 to zapis koloru w systemie szesnastkowym (hex), bardzo typowym w CSS i ogólnie w tworzeniu interfejsów. Składa się ono z trzech par znaków: FF (czerwony), 00 (zielony), E0 (niebieski). Każda para to jedna składowa kanału RGB zapisana w systemie szesnastkowym, czyli w bazie 16. Zakres dla każdej składowej to od 00 do FF, co odpowiada wartościom dziesiętnym od 0 do 255. FF w systemie szesnastkowym to 15×16 + 15 = 255 w systemie dziesiętnym. 00 to po prostu 0. Natomiast E0 to 14×16 + 0 = 224. Dlatego zapis #FF00E0 jest równoważny rgb(255, 0, 224). To jest dokładnie ten sam kolor, tylko zapisany w innym formacie. W CSS możesz używać obu zapisów zamiennie: np. `color: #FF00E0;` oraz `color: rgb(255, 0, 224);` dadzą identyczny efekt w przeglądarce. W praktyce, przy projektowaniu stron i interfejsów, warto rozumieć oba zapisy, bo narzędzia graficzne (Photoshop, GIMP, Figma) często podają kolory w hex, a dokumentacja front-endowa i tutoriale bardzo często używają rgb() albo nawet rgba(). Dobra praktyka w branży jest taka, żeby umieć szybko w głowie lub z pomocą prostego kalkulatora przeliczyć wartości hex na dziesiętne, szczególnie przy drobnych korektach kolorów. Moim zdaniem świadomość, że hex to po prostu inna reprezentacja tych samych liczb 0–255, bardzo ułatwia później rozumienie gradientów, filtrów, a nawet pracy z kolorami w JavaScript, gdzie możesz programowo generować wartości rgb().

Pytanie 32

Metainformacja "Description" zawarta w pliku HTML powinna zawierać ``` ```

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

B. opis zawartości strony

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

D. informację o autorze strony

Brak odpowiedzi na to pytanie.

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

Pytanie 33

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

A. Każda linia kodu powinna zawierać jedynie jedną instrukcję

B. Należy dodawać komentarze w bardziej skomplikowanych fragmentach kodu

C. Nazwy zmiennych muszą odzwierciedlać ich funkcję

D. Kod powinien być napisany bez wcięć i zbędnych przejść do nowej linii

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że kod powinien być napisany bez wcięć i zbędnych enterów jest prawidłowa, ponieważ brak odpowiedniego formatowania negatywnie wpływa na czytelność kodu. Wcięcia są kluczowe w wielu językach programowania, takich jak Python, gdzie struktura kodu jest oparta na przestrzeniach, a nie na nawiasach. Wcięcia pomagają zaznaczyć hierarchię oraz zagnieżdżenie bloków kodu, co jest niezbędne do zrozumienia logiki działania programu. W praktyce, dobrze sformatowany kod, z użyciem wcięć i odpowiednich przerw, pozwala programistom szybko zrozumieć jego strukturę i funkcjonalność. Przykładem mogą być fragmenty kodu, gdzie funkcje są wyraźnie oddzielone od siebie, a pętle i warunki są poprawnie wcięte, co ułatwia ich analizę i modyfikację. Zgodnie z konwencjami PEP 8 dla Pythona oraz zasadami wielu innych języków, stosowanie wcięć oraz przestrzeni między blokami kodu to standardy, które znacznie poprawiają jakość kodu oraz jego czytelność.

Pytanie 34

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

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

Brak odpowiedzi na to pytanie.

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

Pytanie 35

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

A. JavaScript

B. PHP

C. CSS

D. AJAX

Brak odpowiedzi na to pytanie.

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

Deklaracja z właściwością background-attachment: scroll sprawia, że

A. grafika tła będzie widoczna w prawym górnym rogu strony

B. tło strony zostanie zamocowane, a tekst będzie się poruszał

C. tło strony będzie przesuwane razem z zawartością tekstową

D. grafika tła będzie się powtarzać (kafelki)

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Właściwość CSS 'background-attachment: scroll' oznacza, że tło elementu będzie przewijane w równym tempie z treścią na stronie. Kiedy użytkownik przegląda stronę i przewija ją w dół lub w górę, tło przesuwa się razem z zawartością, co tworzy wrażenie głębokości i dynamiki. Przykładem zastosowania tej właściwości może być strona internetowa z długim tekstem, gdzie tło, takie jak kolor lub obraz, jest częścią estetyki projektu, ale nie powinno być statyczne. Warto zauważyć, że można to osiągnąć, ustawiając 'background-attachment' na 'scroll', co jest najczęściej stosowanym ustawieniem. W standardach CSS3 'background-attachment' ma cztery możliwe wartości: 'scroll', 'fixed', 'local', oraz 'inherit'. Stosowanie 'scroll' jest najbardziej intuicyjne i wspiera responsywność, ponieważ zmienia się w zależności od interakcji użytkownika z zawartością. To podejście jest zgodne z praktykami projektowania stron internetowych, które kładą nacisk na użytkownika i interaktywność.

Pytanie 37

W przypadku podanego fragmentu kodu walidator HTML zgłosi błąd, ponieważ <img src="kwiat.jpg alt="kwiat">

A. zastosowano nieznany atrybut alt

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

C. brak obrazu kwiat.jpg

D. nie zamknięto cudzysłowu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W przedstawionym kodzie HTML występuje błąd związany z niedomknięciem cudzysłowu dla atrybutu 'src'. Prawidłowa składnia powinna wyglądać następująco: <img src="kwiat.jpg" alt="kwiat">. Brak cudzysłowu po 'kwiat.jpg' uniemożliwia poprawne zinterpretowanie kodu przez przeglądarki, co skutkuje błędem walidacji. Zasady walidacji kodu HTML są zgodne z wytycznymi W3C, które zalecają, aby każdy atrybut był zamknięty cudzysłowem. Poprawność kodu nie tylko wpływa na jego działanie, ale również na dostępność strony oraz SEO. Użytkownicy, którzy poruszają się po stronach bez pełnej obsługi HTML, mogą napotkać problemy z wyświetlaniem obrazów. W praktyce, zawsze warto stosować dobregi praktyki kodowania, takie jak użycie linterów do sprawdzania poprawności kodu przed jego publikacją, aby uniknąć takich błędów.

Pytanie 38

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. D

B. rys. B

C. rys. A

D. rys. C

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź rys. C jest prawidłowa, ponieważ kod HTML przedstawia tabelę z dwiema komórkami w pierwszym wierszu, gdzie pierwsza komórka ma atrybut rowspan o wartości 2. Oznacza to, że komórka ta rozciąga się na dwa wiersze. Efektem tego jest układ, w którym pierwszy element znajduje się w jednej kolumnie ale zajmuje miejsce w dwóch wierszach. Pozostałe komórki są umieszczone zgodnie z kolejnością ich definicji w kodzie. W praktyce rowspan jest często używany do tworzenia bardziej złożonych układów tabeli, gdzie potrzebne jest łączenie komórek w pionie. Jest to ważne w kontekście dostępności i czytelności danych, szczególnie przy prezentacji skomplikowanych zestawień. Stosowanie rowspan powinno być dobrze przemyślane i zgodne z semantyką HTML ułatwiając interpretację danych przez przeglądarki i technologie wspomagające. Ważne jest także, aby używać tabel zgodnie z ich przeznaczeniem czyli do prezentacji danych tabelarycznych a nie do tworzenia layoutu strony co jest uznawane za złą praktykę od czasu wprowadzenia CSS

Pytanie 39

Jaką szerokość przeznaczono dla treści strony według podanej definicji CSS?

body {
   border: 2px;
   height: 600px;
   width: 560px;
}

A. 600 px

B. 640 px

C. 2 px

D. 560 px

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Szerokość strony została zdefiniowana na 560 pikseli w kodzie CSS. W kontekście strony internetowej, to oznacza, że cała zawartość strony będzie wyświetlana w obszarze o szerokości nie większej niż 560 pikseli. To jest bardzo ważne podczas projektowania stron internetowych. Szerokość strony często jest ustalana na stałą wartość, aby zapewnić spójność wyglądu strony na różnych urządzeniach. W praktyce, jeśli chcesz, aby strona była 'responsywna', szerokość powinna być ustawiona na wartość procentową, co pozwoli na dynamiczne dostosowanie się strony do rozmiaru okna przeglądarki. Jednak w niektórych sytuacjach, jak na przykład w przypadku określonego układu strony, możliwe jest użycie stałej wartości szerokości. W każdym razie, zapamiętaj, że szerokość strony jest jednym z najważniejszych aspektów przy projektowaniu stron internetowych, który ma bezpośredni wpływ na doświadczenia użytkownika.

Pytanie 40

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

A. Odpowiedź 2: B

B. Odpowiedź 4: D

C. Odpowiedź 3: C

D. Odpowiedź 1: A

Brak odpowiedzi na to pytanie.

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

Rozpocznij nowy egzamin

Powrót do strony głównej