Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 13 maja 2026 15:45
Data zakończenia: 13 maja 2026 16:11

Egzamin zdany!

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

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby obraz w filmie zmieniał się gładko, liczba klatek (niezachodzących na siebie) w ciągu sekundy musi mieścić się przynajmniej w zakresie

A. 20 do 23 fps

B. 24 do 30 fps

C. 16 do 19 fps

D. 31 do 36 fps

Odpowiedź '24 do 30 fps' jest na miejscu, bo w tym zakresie klatki na sekundę zapewniają naprawdę płynny obraz w filmach. Standard to 24 fps, co uznaje się za minimalną liczbę klatek, aby widzowie widzieli ruch jako gładki, a nie poskakujący. W praktyce w telewizji oraz przy niektórych formatach wideo można spotkać się z 30 fps, co jeszcze bardziej poprawia wrażenia wizualne. Warto tu wspomnieć, że wiele produkcji, zwłaszcza animacji, trzyma się tych standardów. Na przykład, filmy animowane z 24 fps mają dobrą dynamikę, ale w transmisjach sportowych często korzysta się z 30 fps, żeby lepiej uchwycić szybko poruszające się obiekty. Ostatecznie, trzymanie się tych standardów w filmach i telewizji to klucz do dobrego odbioru wizualnego.

Pytanie 2

Narzędzie zaprezentowane na ilustracji służy do

A. debugowania strony internetowej

B. walidacji stylów CSS

C. sprawdzania zgodności witryny ze standardem HTML5

D. walidacji kodu HTML i XHTML

Narzędzie przedstawione na ilustracji to usługa walidacji CSS stworzona przez World Wide Web Consortium (W3C). Jego głównym celem jest sprawdzanie poprawności arkuszy stylów CSS pod kątem zgodności z obowiązującymi standardami. Walidacja CSS pozwala na identyfikację błędów składniowych oraz niepoprawnych wartości, co jest kluczowe dla zapewnienia spójności wyglądu strony w różnych przeglądarkach. Korzystanie z walidatora CSS jest częścią dobrych praktyk w procesie tworzenia stron internetowych, ponieważ poprawny kod CSS zwiększa dostępność i użyteczność serwisów. Praktycznym przykładem użycia tego narzędzia jest proces optymalizacji strony internetowej, gdzie walidator pomaga w eliminacji błędów, które mogą prowadzić do nieprzewidywalnego zachowania witryny. Dzięki walidacji możemy również upewnić się, że nasze arkusze stylów są zgodne z najnowszymi standardami, co jest istotne dla przyszłej kompatybilności serwisu.

Pytanie 3

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. tła całej witryny

B. czcionki nagłówka drugiego poziomu

C. czcionki wszystkich nagłówków na stronie

D. tła tekstu nagłówka drugiego poziomu

Zapis CSS h2 { background-color: green; } oznacza, że każdemu elementowi nagłówka drugiego stopnia przypisany zostanie zielony kolor tła. W CSS selektor h2 odnosi się bezpośrednio do wszystkich elementów HTML o tagu <h2>. Właściwość background-color służy do definiowania koloru tła elementu, nie wpływając na kolor czcionki samego nagłówka. W praktyce takie podejście pozwala na wyraźne wyróżnienie nagłówków na tle innych elementów strony, co może być kluczowe dla poprawy czytelności. Przyjęte w kodzie standardy zapewniają zgodność z najnowszymi wytycznymi W3C, pozwalając na efektywne zarządzanie stylami w projekcie. Wiedza o tym jak stylizować nagłówki za pomocą background-color jest fundamentalna dla każdego web developera, umożliwiając tworzenie atrakcyjnych i czytelnych interfejsów użytkownika w sposób zgodny z zasadami responsywnego projektowania. Ponadto, stosowanie takich stylizacji wspiera semantyczne podejście do strukturyzacji treści, co jest ważne dla optymalizacji SEO.

Pytanie 4

Do czego służy znacznik <i> w języku HTML?

A. umieszczania obrazu

B. zdefiniowania nagłówka w treści

C. zdefiniowania formularza

D. zmiany kroju pisma na pochylony

Znacznik <i> w języku HTML jest używany do przedstawienia tekstu w stylu kursywy. Jest to jeden z najprostszych znaczników, który jest często stosowany do podkreślenia pewnych elementów tekstowych, takich jak tytuły książek, nazwy filmów czy inne wyrazy, które mają znaczenie kontekstowe. Użycie tego znacznika jest zgodne z zasadami semantyki HTML, co oznacza, że zachowuje on znaczenie treści, a nie tylko jej wygląd. Warto również zauważyć, że w CSS istnieje wiele możliwości stylizacji tekstu, a znacznik <i> jest jednym z elementów, które w łatwy sposób można połączyć z regułami stylów, aby stworzyć atrakcyjne wizualnie strony internetowe. Przykładem zastosowania może być: <p>Ostatnio przeczytałem <i>Harry'ego Pottera</i> i bardzo mi się podobał.</p>. W tym przypadku tytuł książki jest wyróżniony, co przyciąga uwagę czytelnika. Warto pamiętać, że w nowoczesnym HTML zamiast <i> dla stylizacji można używać CSS, jednak <i> pozostaje ważnym elementem dla zachowania semantyki treści.

Pytanie 5

Który z poniższych znaczników HTML nie służy do formatowania tekstu?

A. <sub>

B. <em>

C. <div>

D. <strong>

Znacznik <div> jest używany w HTML do dzielenia dokumentu na sekcje, co czyni go elementem blokowym, który nie formatuje tekstu w sensie stylizacji, ale organizuje strukturę dokumentu. Użycie <div> jest zgodne z dobrymi praktykami tworzenia przejrzystych i semantycznych kodów HTML, co jest fundamentem w budowie responsywnych oraz dostępnych stron internetowych. Na przykład, <div> może być użyty do grupowania elementów w sekcję strony, co ułatwia ich stylizację za pomocą CSS. Można tworzyć klasy lub identyfikatory dla <div>, co pozwala na dalsze formatowanie i manipulację jego zawartością. Warto pamiętać, że stosowanie <div> jest kluczowe w kontekście nowoczesnych ram CSS, takich jak Flexbox czy Grid, które umożliwiają bardziej zaawansowane układanie elementów na stronie.

Pytanie 6

W języku CSS stworzono określony styl. Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości

div {
     border: solid 2px blue;
     margin: 20px;
 }

A. 2 px oraz marginesy zewnętrzne tego obramowania

B. 20 px oraz marginesy wewnętrzne tego obramowania

C. 20 px oraz marginesy zewnętrzne tego obramowania

D. 2 px oraz marginesy wewnętrzne tego obramowania

Odpowiedź 2 px oraz marginesy na zewnątrz tego obramowania jest prawidłowa ponieważ w definicji stylu CSS ustawiono właściwość border z wartością solid 2px blue co oznacza że element będzie miał obramowanie o grubości 2 pikseli z niebieskim kolorem Dodatkowo użyto właściwości margin z wartością 20px co wskazuje że element ma margines zewnętrzny o szerokości 20 pikseli na każdej stronie Właściwość margin w CSS odnosi się zawsze do przestrzeni na zewnątrz granic elementu co odróżnia ją od padding który dotyczy marginesu wewnętrznego Praktyczne zastosowanie takiego stylu można znaleźć w projektach gdzie projektant chce oddzielić elementy od siebie zachowując równomierne odstępy W ten sposób można tworzyć przejrzyste i estetyczne układy na stronach internetowych Zastosowanie border pozwala również na wizualne wyróżnienie elementów co jest często wykorzystywane w interfejsach użytkownika aby podkreślić ważne informacje Dobrą praktyką jest używanie takich stylizacji aby poprawić czytelność i funkcjonalność strony poprzez jasne rozgraniczenie sekcji oraz zapewnienie odpowiednich odstępów między nimi zgodnie z zasadami UX

Pytanie 7

W języku HTML kolor biały można przedstawić przy użyciu wartości

A. #255255

B. #000000

C. rgb(FFFF,FF)

D. rgb(255,255,255)

Biały kolor w HTML zapisujemy jako rgb(255,255,255). W systemie RGB kolory tworzą się z trzech podstawowych barw: czerwonej, zielonej i niebieskiej. Każda z nich ma wartość od 0 do 255, więc maksymalna intensywność danego koloru to 255, a najniższa to 0. W przypadku białego koloru wszystkie trzy barwy są na maksa, stąd właśnie rgb(255,255,255) oznacza pełną moc czerwonego, zielonego i niebieskiego, co razem daje kolor biały. Wartości RGB są super ważne w CSS i w różnych programach do grafiki. Moim zdaniem, warto je znać, bo to podstawy przy robieniu stron internetowych. Warto też zwrócić uwagę na standardy W3C dotyczące kolorów w HTML, bo pomagają zadbać o estetykę i dostępność stron.

Pytanie 8

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

A. D

B. C

C. B

D. A

Niepoprawne podejścia w odpowiedziach A, B i C wynikają z błędnego zastosowania znaczników HTML, co wpływa na sposób, w jaki przeglądarka interpretuje dane w tabeli. Odpowiedź A używa znaczników <td> zamiast <th> do definiowania nagłówków kolumn. Znacznik <td> jest przeznaczony do zwykłych komórek tabeli, co sprawia, że przeglądarka nie traktuje ich jako nagłówków, przez co nie są wstępnie formatowane jako pogrubione i wyśrodkowane. To podejście narusza zasady semantyki HTML, ponieważ nagłówki powinny być jasno zdefiniowane za pomocą <th>, co wspiera dostępność i zrozumienie struktury danych. Odpowiedź B, mimo że używa <th>, stosuje dodatkowo <i>, co zmienia styl na kursywę, a to nie odpowiada formatowi wizualnemu przedstawionemu w pytaniu. Użycie <i> może być mylące, jeśli nie jest to zgodne z oczekiwanym stylem, i może powodować problemy z dostępnością. Wreszcie, odpowiedź C używa <center>, co jest przestarzałym sposobem na wyrównanie treści w HTML. Zamiast tego, stylowanie powinno być osiągane za pomocą CSS, co jest zgodne z nowoczesnymi standardami projektowania stron i wspiera lepszą separację struktury od prezentacji. Wszystkie te podejścia pokazują, jak ważne jest stosowanie semantycznych elementów HTML dla poprawności i dostępności stron internetowych, a jednocześnie podkreślają znaczenie zgodności z aktualnymi standardami sieciowymi.

Pytanie 9

Aby grupować obszary na poziomie bloków, które będą stylizowane za pomocą znacznika: należy wykorzystać

A. <param>

B. <div>

C. <span>

D. <p>

Element <div> to naprawdę ważna część HTML-a, bo pozwala na porządne grupowanie treści na stronie. Dzięki niemu możemy lepiej zorganizować dokument, co nie tylko wygląda estetycznie, ale też ma znaczenie dla semantyki. Używając <div>, łatwiej podpinamy style CSS i skrypty JavaScript, co bardzo pomaga w budowaniu responsywnych układów. Na przykład, gdy tworzymy stronę z nagłówkiem, głównym tekstem i stopką, to dobrze jest wrzucić te sekcje w odpowiednie <div>, bo potem łatwiej je stylizować i edytować. Trzeba pamiętać, że <div> nie ma swojej domyślnej semantyki, więc jego znaczenie zależy tylko od kontekstu, w jakim go użyjemy, co czyni go naprawdę wygodnym narzędziem w tworzeniu nowoczesnych stron.

Pytanie 10

Które znaczniki HTML umożliwiają wyświetlenie tekstu w jednym wierszu na stronie, zakładając brak zdefiniowanego formatu CSS?

Dobre strony m o j e j  s t r o n y

A. <div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

B. <p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

C. <h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

D. <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

Znacznik <span> jest elementem inline HTML który pozwala na wyświetlanie tekstu w jednym wierszu. Oznacza to że elementy te nie wprowadzają automatycznych przerw liniowych przed i po sobie co jest typowe dla elementów block-level takich jak <div> czy <p>. W praktycznych zastosowaniach <span> jest często używany do stylizacji i formatowania fragmentów tekstu bez zmiany struktury dokumentu HTML. Użycie <span> jest zgodne z dobrymi praktykami dla elementów które wymagają jedynie lekkiej modyfikacji wizualnej bez naruszenia układu strony. Jest to element niezwykle elastyczny często łączony z CSS i JavaScript w celu wpływania na wygląd i interaktywność stron internetowych. Znaczniki inline takie jak <span> są kluczowe w responsywnym web designie ponieważ pozwalają na dokładne kontrolowanie stylu i zachowania tekstu w ramach szerszej struktury strony. Umożliwiają także semantyczne i dostępnościowe ulepszenia pomagając w tworzeniu bardziej zrozumiałych i przyjaznych dla użytkownika interfejsów. Wiedza o różnicy między elementami inline i block-level jest fundamentem w profesjonalnym tworzeniu stron internetowych i pozwala unikać powszechnych błędów w układzie treści.

Pytanie 11

Znacznik <s> w HTML generuje

A. pochylenie tekstu

B. migotanie tekstu

C. przekreślenie tekstu

D. podkreślenie tekstu

Znacznik <s> w HTML służy do oznaczania tekstu, który jest przekreślony. To daje znać, że dany fragment już nie jest aktualny albo jest błędny. Myślę, że to bardzo ważne, bo z perspektywy semantyki w HTML, pozwala lepiej zrozumieć, co się dzieje na stronie. Użytkownicy korzystający z czytników ekranu mogą łatwiej zrozumieć, że coś jest nieaktualne. Przykładem mogą być sklepy internetowe, gdzie przekreślenie starej ceny pokazuje, że produkt jest teraz w promocji. Dobrze jest pamiętać, że stosowanie tych znaczników dobrze wpływa na strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność w sieci.

Pytanie 12

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

A. znacznik <p> z formatowaniem

B. znaczniki <h1>, <h2> oraz <p>

C. znacznik <div>

D. znaczniki <frame> i <table>

Aby poprawnie zdefiniować hierarchiczną strukturę tekstu witryny internetowej, kluczowe jest zastosowanie znaczników <h1>, <h2>, oraz <p>. Znacznik <h1> jest najważniejszym nagłówkiem na stronie i powinien być używany tylko raz, aby wskazać główny temat treści. Z kolei znaczniki <h2> służą do wyodrębnienia podtematów, co pozwala na tworzenie czytelnej i logicznej struktury dokumentu. Dzięki tym znacznikom, zarówno użytkownicy, jak i wyszukiwarki internetowe mogą łatwiej zrozumieć hierarchię treści. Znacznik <p> jest używany do definiowania akapitów, co dodatkowo poprawia czytelność tekstu. Zastosowanie tej struktury jest zgodne z wytycznymi W3C oraz zasadami SEO, co przyczynia się do lepszego indeksowania przez wyszukiwarki. Przykładowo, strona internetowa poświęcona zdrowemu stylowi życia może mieć <h1> jako 'Zdrowy Styl Życia', a <h2> jako 'Dieta' i 'Ćwiczenia', co ułatwia użytkownikom nawigację oraz przyswajanie treści.

Pytanie 13

W CSS, aby ustawić wcięcie pierwszej linii akapitu na 30 pikseli, należy użyć zapisu

A. p {line-height: 30px;}

B. p {line-indent: 30px;}

C. p {text-spacing: 30px;}

D. p {text-indent: 30px;}

Odpowiedź p {text-indent: 30px;} jest prawidłowa, ponieważ właściwość text-indent w CSS służy do określenia wcięcia pierwszej linii akapitu. Wartość 30px oznacza, że pierwsza linia każdego akapitu zostanie przesunięta o 30 pikseli w prawo, co jest często stosowaną praktyką w celu poprawy czytelności tekstu. Dobrą praktyką jest stosowanie wcięć w dłuższych tekstach, co pozwala na bardziej uporządkowane i estetyczne przedstawienie treści. Przykładem zastosowania może być wcięcie w blogach czy artykułach, gdzie struktura tekstu ma znaczenie dla odbiorcy. Warto pamiętać, że właściwość text-indent działa tylko na pierwszą linię akapitu, co oznacza, że kolejne linie pozostają w standardowej pozycji. Używanie text-indent jest zgodne z dobrymi praktykami projektowania stron internetowych, które podkreślają znaczenie czytelności i estetyki tekstu.

Pytanie 14

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

A. treści, która zostanie pokazana, gdy grafika nie może być załadowana

B. opisu, który pojawi się pod grafiką

C. lokalizacji i nazwy pliku źródłowego grafiki

D. parametrów grafiki, takich jak wymiary, ramka, wyrównanie

Atrybut <b>alt</b> znacznika <b>img</b> w języku HTML jest niezwykle istotnym elementem, który ma na celu zapewnienie dostępności treści wizualnych dla użytkowników. Gdy obrazek nie może zostać załadowany (np. z powodu problemów z siecią lub błędnej ścieżki do pliku), tekst zawarty w atrybucie <b>alt</b> zostaje wyświetlony zamiast obrazu. W praktyce oznacza to, że osoba korzystająca z technologii asystujących, takich jak czytniki ekranu, będzie miała możliwość zrozumienia, co miało się pojawić w danym miejscu na stronie. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), stosowanie atrybutu <b>alt</b> jest kluczowe dla zapewnienia dostępności stron internetowych. Przykładem może być sytuacja, w której na stronie internetowej znajduje się obrazek przedstawiający produkt. Atrybut <b>alt</b> powinien zawierać opis tego produktu, co pozwoli użytkownikom, którzy nie widzą obrazu, zrozumieć jego znaczenie. Prawidłowe użycie atrybutu <b>alt</b> nie tylko poprawia dostępność, ale także może wpłynąć na SEO strony, ponieważ wyszukiwarki traktują ten atrybut jako dodatkowy kontekst dla treści wizualnych.

Pytanie 15

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. A.

B. C.

C. B.

D. D.

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 16

Parametr face znacznika <font> jest używany do wskazania

A. nazwa czcionki

B. rozmiaru czcionki

C. koloru czcionki

D. efektów czcionki

Parametr face znacznika <font> w HTML służy do określenia nazwy czcionki, co jest kluczowym elementem stylizacji tekstu na stronach internetowych. Umożliwia on programistom i projektantom graficznym wskazanie konkretnej czcionki, która ma być używana do wyświetlania tekstu, co wpływa na jego czytelność oraz estetykę. Przykładowo, aby ustawić czcionkę na 'Arial', użyjemy znacznika <font face='Arial'>tekst</font>. Warto zauważyć, że ten parametr nie jest już zalecany w nowoczesnym HTML, ponieważ stylizacje powinny być realizowane za pomocą CSS, które oferuje znacznie większe możliwości i elastyczność. W CSS można określić czcionkę na przykład w ten sposób: p { font-family: 'Arial', sans-serif; }. Zgodnie z wytycznymi W3C, stosowanie CSS zamiast znaczników HTML dla stylizacji jest najlepszą praktyką, ponieważ pozwala na oddzielenie treści od prezentacji. W kontekście SEO, właściwe użycie czcionek i ich nazw może wpływać na wygodę użytkowników oraz ogólną estetykę strony, co pośrednio może przyczynić się do lepszego rankingu w wyszukiwarkach. Warto jednak pamiętać, że niektóre czcionki mogą nie być zainstalowane na wszystkich systemach, dlatego rekomenduje się używanie czcionek webowych oraz zabezpieczeń w postaci alternatyw w CSS.

Pytanie 17

Aby graficznie tworzyć strony internetowe, należy skorzystać z.

A. program typu WYSIWYG

B. program MS Office Picture Manager

C. edytor CSS

D. przeglądarka internetowa

Programy typu WYSIWYG (What You See Is What You Get) są narzędziami, które umożliwiają tworzenie stron internetowych w sposób wizualny, co oznacza, że użytkownik widzi na ekranie efekty swojej pracy w czasie rzeczywistym. Takie oprogramowanie, jak Adobe Dreamweaver czy WordPress, pozwala na łatwe przeciąganie elementów, edytowanie tekstów oraz dodawanie grafik bez konieczności bezpośredniego pisania kodu HTML czy CSS. Dzięki temu, osoby bez zaawansowanej wiedzy programistycznej mogą tworzyć profesjonalnie wyglądające strony internetowe. Programy WYSIWYG wspierają standardy webowe i dobre praktyki, co pomaga w tworzeniu responsywnych i dostępnych serwisów. Używanie tych narzędzi przyspiesza także proces prototypowania oraz umożliwia szybkie wprowadzanie zmian, co jest niezwykle cenne w dynamicznym środowisku projektowym. Oprócz tego, dobrze zaprojektowane programy WYSIWYG oferują funkcje podglądu na różnych urządzeniach, co jest kluczowe w dobie rosnącej liczby rozdzielczości ekranów i urządzeń mobilnych.

Pytanie 18

Aby strona internetowa była dostosowana do różnych urządzeń, należy między innymi określać

A. wymiary obrazów w procentach

B. tylko znane fonty, takie jak Arial

C. układ strony wyłącznie przy pomocy tabel

D. wymiary obrazów jedynie w pikselach

Definiowanie rozmiarów obrazów w procentach jest kluczowym elementem tworzenia responsywnych stron internetowych. Dzięki temu obrazy mogą dostosowywać się do różnych rozmiarów ekranów, co jest niezbędne w erze urządzeń mobilnych. Używając procentów, możemy zapewnić, że obrazy zachowają swoje proporcje w ramach kontenera, co eliminuje problem z rozciąganiem lub zniekształceniem grafiki. Na przykład, ustawiając szerokość obrazu na 50%, obraz zajmie połowę szerokości kontenera, niezależnie od tego, czy jest to telefon, tablet, czy komputer stacjonarny. Taki sposób definiowania rozmiarów jest zgodny z zasadami projektowania responsywnego, w tym z technikami, które określają elastyczne układy oparte na jednostkach względnych, takich jak em, rem, czy vw. W praktyce przyjęcie takiego podejścia nie tylko poprawia doświadczenie użytkownika, ale również zwiększa dostępność strony, co jest istotnym aspektem w kontekście standardów WCAG (Web Content Accessibility Guidelines).

Pytanie 19

input:focus { background-color: LightGreen; } W Ciebie CSS określono stylizację dla pola wejściowego. Tak przygotowane pole wejściowe będzie miało tło w odcieniu jasnozielonym?

A. jeżeli jest to pierwsza obecność tego elementu w dokumencie

B. w każdej sytuacji

C. po naciśnięciu przycisku myszy w celu wprowadzenia tekstu

D. kiedy zostanie najechane kursorem myszy bez jego klikania

Odpowiedź 'po kliknięciu myszą w celu zapisania w nim tekstu' jest poprawna, ponieważ styl CSS zdefiniowany jako 'input:focus' odnosi się do stanu, w którym pole edycyjne jest aktywne i gotowe do wprowadzania danych. Kiedy użytkownik klika w pole edycyjne, przeglądarka przełącza jego stan na 'focus', co skutkuje zastosowaniem zdefiniowanego stylu, w tym przypadku jasnozielonego tła. Dzięki temu użytkownicy mogą wizualnie zidentyfikować, które pole edycyjne jest aktualnie wybrane, co znacząco poprawia użyteczność i interaktywność formularzy na stronach internetowych. W praktyce, jest to kluczowe podczas projektowania formularzy, aby zapewnić użytkownikom wyraźne wskazówki dotyczące aktualnego stanu interfejsu. Dobrym przykładem zastosowania jest formularz rejestracyjny, gdzie aktywne pole edycyjne wyróżnia się kolorem, ułatwiając użytkownikom wprowadzanie danych. Zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), takie wizualne wskazówki są istotne dla zapewnienia dostępności aplikacji webowych, co czyni je standardem branżowym.

Pytanie 20

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

A. MediaWiki

B. Joomla!

C. WordPress

D. Drupal

Joomla! to popularny system zarządzania treścią CMS który jest szeroko stosowany do tworzenia stron internetowych aplikacji online i portali. Dzięki swojej elastyczności Joomla! jest wybierany przez wiele firm i organizacji do zarządzania treścią online. System ten charakteryzuje się modułową architekturą która umożliwia łatwe rozszerzanie jego funkcjonalności za pomocą komponentów modułów i wtyczek. Jednym z głównych atutów Joomla! jest intuicyjny interfejs użytkownika który umożliwia zarządzanie treścią bez potrzeby głębokiej wiedzy technicznej. Dodatkowo Joomla! wspiera wiele języków co czyni go idealnym wyborem dla międzynarodowych organizacji. Warto również zaznaczyć że Joomla! jest open-source co oznacza że jest rozwijany przez społeczność programistów z całego świata którzy regularnie aktualizują i ulepszają oprogramowanie. Wybranie Joomla! jako CMS pozwala na korzystanie z dużej liczby szablonów i dodatków które umożliwiają personalizację witryny zgodnie z wymaganiami klienta. Dzięki solidnej bazie użytkowników i deweloperów Joomla! oferuje wsparcie techniczne i dokumentację która ułatwia rozwiązywanie problemów. W praktyce Joomla! jest wykorzystywany przez różnorodne witryny od małych blogów po rozbudowane platformy e-commerce co potwierdza jego wszechstronność i skuteczność.

Pytanie 21

Jak brzmi nazwa edytora, który wspiera proces tworzenia stron internetowych i którego działanie można określić w polskim tłumaczeniu słowami: widzisz to, co otrzymujesz?

A. VISUAL EDITOR

B. IDE

C. WEB STUDIO

D. WYSIWYG

Termin WYSIWYG to skrót od "What You See Is What You Get", co w dosłownym tłumaczeniu oznacza "to, co widzisz, to, co otrzymasz". Odnosi się to do edytorów graficznych, które pozwalają użytkownikowi na wizualne projektowanie stron internetowych w sposób, który odzwierciedla finalny wygląd strony. Dzięki edytorom WYSIWYG, użytkownicy mogą tworzyć i edytować treści bez konieczności znajomości języków programowania, takich jak HTML czy CSS. Przykładem takiego edytora może być Adobe Dreamweaver, które oferuje zarówno tryb wizualny, jak i możliwość edycji kodu. W praktyce, korzystanie z edytora WYSIWYG przyspiesza proces tworzenia stron, ponieważ pozwala na szybkie wprowadzanie zmian, przetestowanie ich w czasie rzeczywistym oraz łatwe zarządzanie elementami graficznymi. Standardy branżowe promują takie podejście, ponieważ zwiększa ono dostępność tworzenia stron internetowych dla osób bez technicznego wykształcenia, co jest szczególnie istotne w kontekście rozwijającej się digitalizacji i rosnącego zapotrzebowania na treści online.

Pytanie 22

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

A. kolor tekstu będzie szary

B. tło będzie w odcieniu szarym

C. tło będzie pomarańczowe

D. kolor tekstu będzie pomarańczowy

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 23

W języku CSS wprowadzone zostało następujące formatowanie: ```h1 i {color:red;}``` Kolor czerwony będzie stosowany do

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

B. tylko tekstu pochylonego nagłówka pierwszego poziomu

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

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

Wszystkie odpowiedzi, które nie odpowiadają na pytanie, wynikają z niepoprawnego zrozumienia selektora CSS. Odpowiedzi, które sugerują, że kolor czerwony dotyczy całego tekstu nagłówka pierwszego stopnia, są błędne, ponieważ kolor czerwony jest przypisany jedynie do elementów 'i' znajdujących się w 'h1'. Nieprawidłowe jest także sugerowanie, że stylizacja dotyczy tekstu pochylonego we wszystkich poziomach nagłówków, ponieważ selektor odnosi się wyłącznie do 'h1', co wyklucza inne nagłówki. Dodatkowo, stwierdzenie, że styl obejmuje cały tekst nagłówka oraz wszelki tekst pochylony, nie jest zgodne z zasadami dziedziczenia stylów CSS. W rzeczywistości, selektor ogranicza się do określonego kontekstu, co oznacza, że tylko elementy 'i' w ramach 'h1' podlegają tym regułom. W związku z tym, jakiekolwiek inne elementy czy nagłówki nie są brane pod uwagę w tej regule stylizacji, co z kolei podkreśla precyzyjność i zastosowanie selektorów w CSS.

Pytanie 24

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: left; } aside { float: left; }

B. nav { float: right; }

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

D. 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 25

Jak powinien być poprawnie zapisany znacznik <img>, służący do umieszczenia na stronie internetowej obrazu rys.jpg, przeskalowanego do szerokości 120 px oraz wysokości 80 px z tekstem alternatywnym "krajobraz"?

A. <img href="rys.jpg" height="120px" width="80px" info="krajobraz"/>

B. <img image="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

C. <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

D. <img src="rys.jpg" height="120px" width="80px" info="krajobraz"/>

Odpowiedzi, które nie są zgodne z poprawnym zapisem znacznika <img>, wykazują kilka kluczowych błędów, które wpływają na ich nieprawidłowość. W pierwszej z błędnych odpowiedzi zamiast atrybutu 'src' użyto 'image', co jest błędem w kontekście HTML. 'src' jest standardowym atrybutem, który określa źródło obrazu, podczas gdy 'image' nie jest rozpoznawane przez przeglądarki i nie prowadzi do wyświetlenia żadnej grafiki. W drugiej odpowiedzi zamiast 'alt' zastosowano 'info', co również jest nieprawidłowe, ponieważ 'alt' jest kluczowym atrybutem, który zapewnia opis alternatywny obrazu, istotny dla dostępności. Ponadto, w obu przypadkach zostały błędnie zamienione wartości 'width' i 'height', co może prowadzić do nieproporcjonalnego wyświetlania obrazów, co z kolei negatywnie wpływa na estetykę i użyteczność strony. Warto również zaznaczyć, że jednostka 'px' w kontekście atrybutów rozmiaru nie jest wymagana w HTML5, więc nawet jeśli byłoby to zastosowane w poprawny sposób, nie jest to konieczne. Te nieporozumienia mogą wynikać z braku znajomości aktualnych standardów HTML, co może prowadzić do problemów z wyświetlaniem i dostępnością treści na stronach internetowych. Zastosowanie odpowiednich atrybutów oraz ich wartości jest kluczowe dla tworzenia stron internetowych zgodnych z aktualnymi standardami i praktykami, co w dłuższym okresie przekłada się na lepsze doświadczenia użytkowników.

Pytanie 26

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

A. wyłącznie small, medium, large

B. jedynie small, smaller, large, larger

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

D. zaledwie big oraz small

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

Pytanie 27

Do którego akapitu przypisano podaną właściwość stylu CSS?
border-radius: 20%;

A. Rys. D

B. Rys. C

C. Rys. A

D. Rys. B

Właściwość CSS border-radius służy do zaokrąglania rogów elementu na stronie internetowej. W przypadku wartości procentowej jak 20% zaokrąglenie jest obliczane w stosunku do wymiarów elementu co pozwala na uzyskanie proporcjonalnego wyglądu niezależnie od rozmiaru ramki. Wybranie odpowiedzi Rys. B jest poprawne ponieważ widoczny jest tam efekt zaokrąglonych rogów co jednoznacznie wskazuje na zastosowanie border-radius. Takie stylizacje są powszechnie używane w projektowaniu nowoczesnych interfejsów użytkownika aby nadać im bardziej miękki i przyjazny wygląd. Dobre praktyki projektowe zalecają umiarkowane stosowanie zaokrągleń aby nie przesadzić z efektami wizualnymi co mogłoby pogorszyć czytelność i funkcjonalność. Warto również pamiętać o aspekcie responsywności – używanie wartości procentowych pozwala na lepsze dostosowanie się do różnych rozdzielczości ekranów co jest kluczowe w nowoczesnym web designie. Dzięki border-radius można także tworzyć zaawansowane efekty graficzne łącząc go z innymi właściwościami CSS jak cienie czy gradienty co pozwala na osiągnięcie atrakcyjnych wizualnie elementów bez potrzeby użycia obrazów.

Pytanie 28

Jakie oprogramowanie NIE JEST systemem do zarządzania treścią (CMS)?

A. Mambo

B. Joomla

C. Apache

D. WordPress

Apache to serwer HTTP, który jest wykorzystywany do hostowania stron internetowych. Nie jest to system zarządzania treścią (CMS), ponieważ jego głównym zadaniem jest obsługa żądań HTTP i dostarczanie plików do przeglądarek internetowych. Systemy zarządzania treścią, takie jak Joomla, WordPress czy Mambo, to aplikacje, które umożliwiają użytkownikom łatwe tworzenie, edytowanie i zarządzanie treściami na stronach internetowych bez konieczności posiadania zaawansowanej wiedzy technicznej. Przykładem zastosowania Apache może być hostowanie strony internetowej stworzonej w jednym z wymienionych CMS, gdzie Apache dostarcza zasoby, a CMS zarządza treścią i logiką aplikacji. Dobrą praktyką w branży jest oddzielanie warstwy serwera od warstwy aplikacji, co pozwala na lepszą skalowalność i utrzymanie, a także na łatwiejszą aktualizację i zarządzanie bezpieczeństwem.

Pytanie 29

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

<table>
  <tr>
    <td style="border: solid 1px;">Komórka 1</td>
    <td style="border: solid 1px;">Komórka 2</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 3</td>
    <td style="border: solid 1px;">Komórka 4</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 5</td>
    <td style="border: solid 1px;">Komórka 6</td>
  </tr>
</table>

Komórka 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="display: none">

B. <tr style="visibility: hidden">

C. <tr style="clear: none">

D. <tr style="display: table-cell">

Właściwość CSS 'visibility: hidden' jest używana do ukrycia elementu, ale jednocześnie zachowuje ona jego miejsce w układzie strony. Jest to idealne dla sytuacji, kiedy chcemy ukryć konkretny element, ale nie chcemy wpływać na układ pozostałych elementów. W kontekście naszego pytania, jeśli chcielibyśmy ukryć drugi wiersz tabeli, ale nie chcemy, aby pozostałe wiersze zmieniały swoje położenie, 'visibility: hidden' jest idealnym rozwiązaniem. W przeciwnym razie, gdybyśmy użyli 'display: none', wiersz zostałby całkowicie usunięty z układu strony, a pozostałe wiersze przesunęłyby się do góry, aby zapełnić puste miejsce. W praktyce, właściwość 'visibility: hidden' jest często używana w połączeniu z JavaScript do tworzenia efektów 'hide/show', gdzie ukryte elementy mogą być później odkrywane bez wpływu na układ strony.

Pytanie 30

Która z wartości tekstowych nie odpowiada podanemu wzorcowi wyrażenia regularnego?

(([A-ZŁŻ][a-ząęóżźćńłś]{2,})(-[A-ZŁŻ][a-ząęóżźćńłś]{2,}))?

A. Kasprowicza

B. Jelenia Góra

C. Kowalski

D. Nowakowska-Kowalska

Odpowiedzi takie jak 'Kasprowicza', 'Nowakowska-Kowalska' i 'Kowalski' są w porządku, bo pasują do wzoru wyrażenia regularnego. Wzór mówi, że tekst musi zaczynać się od wielkiej litery i mieć przynajmniej dwie małe litery zaraz po. 'Kasprowicza' to nazwisko, które zaczyna się od wielkiej litery, więc jest ok. 'Nowakowska-Kowalska' też jest good, bo ma segment po myślniku z kolejną wielką literą. Z 'Kowalskim' sprawa wygląda podobnie, bo również spełnia wymogi. Często ludzie mylą, co dokładnie oznacza wzór i co przynależne do niego. Wydaje się, że każde słowo z wielką literą pasuje, ale nie do końca tak to działa. Kluczowe jest, żeby zrozumieć dokładne zasady, bo wyrażenia regularne są bardzo precyzyjne i wymagają zwrócenia uwagi na detale. Dobrze jest też testować swoje wzory, by sprawdzić, czy działają w różnych sytuacjach.

Pytanie 31

W języku CSS zapis selektora

p > i { color: red; }

wskazuje, że kolorem czerwonym będzie sformatowany

A. wszystki tekst w znaczniku <p> lub wszelkie treści w znaczniku <i>

B. tylko ten tekst w znaczniku <p>, który ma przypisaną klasę o nazwie i

C. wszystkie teksty w znaczniku <p> oprócz tych w znaczniku <i>

D. jedynie ten tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

Zapis selektora CSS p > i mówi, że styl ma być zastosowany tylko do elementów <i>, które są bezpośrednimi dziećmi znacznika <p>. W praktyce oznacza to tyle, że jeśli w <p> mamy <i>, to tylko ten <i> weźmie czerwony kolor. To jest w porządku, bo w CSS style mogą się dziedziczyć, ale można je też dokładnie określić z użyciem selektorów. Znak '>' wskazuje na relację rodzic-dziecko, co jest istotne, gdy patrzymy na strukturę dokumentu HTML. Na przykład, w kodzie: <p>To jest <i>przykład</i> tekstu.</p>, słowo „przykład” będzie czerwone. Dodatkowo, korzystanie z takich selektorów to dobra praktyka, bo ogranicza wpływ stylów tylko do konkretnego kontekstu, co bardzo ułatwia zrozumienie kodu. Tego typu selektory pomagają unikać niechcianych efektów, które mogą się zdarzyć przy bardziej ogólnych zasadach CSS, a także poprawiają wydajność przeglądarki przy stylizacji.

Pytanie 32

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

Odpowiedź 'p.tekst, div#obrazki' jest poprawna, ponieważ selektor 'p.tekst' odnosi się do elementów <p> z klasą 'tekst', a selektor 'div#obrazki' odnosi się do elementu <div> z identyfikatorem 'obrazki'. Oba selektory są zgodne z zasadami CSS, które pozwalają na stylizację elementów na podstawie ich klas i ID. Na przykład, jeśli chcemy zmienić kolor tekstu w akapitach oraz dodać ramkę do elementu div, możemy zastosować następujący kod: css p.tekst { color: blue; } div#obrazki { border: 1px solid black; } Praktyczne zastosowanie selektorów klas i ID w CSS pozwala na precyzyjne dostosowanie stylu poszczególnych elementów na stronie. Zgodność z najlepszymi praktykami oznacza, że stosujemy jednoznaczne i czytelne nazwy klas oraz ID, co ułatwia późniejszą konserwację kodu oraz współpracę z innymi deweloperami. Warto także pamiętać, że wyższej specyfiki selektory, takie jak ID, mają pierwszeństwo wobec klas, co może wpłynąć na końcowy wygląd elementów na stronie.

Pytanie 33

Przedstawiono fragment kodu HTML, który nie waliduje się poprawnie. Błąd walidacji tego fragmentu kodu będzie dotyczył:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
    <img src="/obraz.gif alt="Obrazek">
    <h1>Rozdział 1</h1>
    <p>To jest tekst paragrafu, ...</p>
    <br>
    <img src="/obraz.gif" alt="Obrazek">
</body>
</html>

A. powtórzenia nazwy pliku graficznego

B. niedomknięcia znacznika <span class="code-text">img</span>

C. niedomknięcia znacznika <span class="code-text">br</span>

D. braku cudzysłowu

Niepoprawność w zakresie braku cudzysłowu w atrybucie 'src' znacznika 'img' wyklucza inne błędy, o których mowa w odpowiedziach. Znacznik 'br' jest jednym z nielicznych znaczników, które są samodomykające, co oznacza, że nie wymaga pary otwierającej i zamykającej. Dlatego informacja o niedomknięciu tego znacznika jest błędna, ponieważ poprawny zapis to po prostu <br>. Ponadto, znacznik 'img' również nie wymaga zamknięcia, ponieważ podobnie jak 'br', jest znakiem samodomykającym, co czyni obie te odpowiedzi niepoprawnymi w kontekście analizy błędów kodu HTML. Dodatkowo, kwestia powtórzenia nazwy pliku graficznego w kodzie nie jest błędem walidacji, lecz jedynie stylem programowania. Jeżeli plik graficzny jest używany wielokrotnie, jest to całkowicie akceptowalne. Dlatego te trzy odpowiedzi nie odnoszą się do rzeczywistego problemu, który występuje w przedstawionym kodzie, co podkreśla znaczenie ścisłej znajomości składni HTML oraz zasad walidacji dla prawidłowego tworzenia stron internetowych.

Pytanie 34

Co można powiedzieć o stylu hiperłącza na podstawie opisu CSS, zakładając, że żadne inne style nie zostały zdefiniowane?

a:link {
  color: green;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

A. Hiperłącze jest zawsze podkreślone.

B. Gdy kursor znajdzie się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony.

C. Tekst odwiedzonego hiperłącza jest koloru czerwonego.

D. Gdy hiperłącze jest nieodwiedzone, jego tekst jest koloru niebieskiego z podkreśleniem.

Twoja odpowiedź jest poprawna. W przypadku hiperłącza, w momencie, gdy kursor znajduje się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony. Jest to efekt zastosowania stylu CSS w stanie 'hover'. Styl ten umożliwia dynamiczną zmianę wyglądu elementu, kiedy kursor myszy znajduje się nad nim. Jest to praktyka powszechnie stosowana w celu zwiększenia użyteczności i interaktywności stron internetowych. Dobrą praktyką jest również zapewnienie kontrastu między kolorem tła a tekstem dla lepszej czytelności. W tym przypadku, kolor tekstu zmienia się na czerwony, co zapewnia wyraźny kontrast i zwraca uwagę użytkownika. Równocześnie dodanie podkreślenia jest dodatkowym wizualnym wskaźnikiem, że dany element jest hiperłączem. Zastosowanie takiego stylu pozwala na intuicyjne i efektywne poruszanie się po stronie internetowej.

Pytanie 35

Jaki atrybut powinien zostać umieszczony w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby wskazać źródło cytatu?

A. alt

B. cite

C. href

D. src

Odpowiedź 'cite' jest prawidłowa, ponieważ atrybut ten służy do wskazania źródła cytatu w znaczniku <blockquote>. Atrybut cite pozwala dostarczyć dodatkowych informacji o autorze lub miejscu pochodzenia cytatu, co jest zgodne z zasadami semantycznego HTML5. Użycie atrybutu cite jest ważne dla poprawnej interpretacji treści przez przeglądarki oraz narzędzia przetwarzające dane, takie jak wyszukiwarki internetowe. Przykład zastosowania: <blockquote cite="https://pl.wikipedia.org">...cytat...</blockquote>. Dzięki temu można łatwo zidentyfikować źródło, co zwiększa wiarygodność prezentowanych informacji. W praktyce, dokumenty HTML powinny być tak przygotowane, aby były zarówno przyjazne dla użytkowników, jak i zgodne z wytycznymi standardów W3C, co ma kluczowe znaczenie w kontekście dostępności i SEO.

Pytanie 36

Wskaż znacznik, który umożliwia zapis tekstu, który jest niepoprawny lub niewłaściwy, w formie przekreślonej?

A. <s> </s>

B. <b> </b>

C. <sub> </sub>

D. <em> </em>

<s> jest znacznikiem HTML, który służy do oznaczania tekstu jako przekreślonego, co wskazuje na to, że dany fragment tekstu jest nieprawidłowy lub nieaktualny. Zastosowanie tego znacznika ma na celu poprawę czytelności oraz zrozumiałości treści, informując użytkowników o tym, że pewne informacje są już nieaktualne. Użycie <s> w dokumentach HTML jest zgodne z wytycznymi W3C, co zapewnia jego wszechstronność w kontekście standardów sieciowych. Przykładem zastosowania tego znacznika może być sytuacja, gdy na stronie internetowej prezentowane są wyniki, a niektóre z nich uległy zmianie, na przykład: <s>Stara cena: 100 PLN</s> Nowa cena: 80 PLN. W ten sposób użytkownicy mają jasny obraz, co uległo zmianie. Warto również dodać, że zastosowanie <s> może mieć zastosowanie w kontekście SEO, gdyż poprawia dostępność treści dla osób korzystających z technologii wspomagających, co może pozytywnie wpłynąć na ranking strony w wynikach wyszukiwania.

Pytanie 37

W języku CSS zdefiniowano styl. Sformatowana tym stylem sekcja będzie zawierała obramowanie o szerokości:

div { border: solid 2px blue;
       margin: 20px;}

A. 2 px oraz marginesy wewnętrzne tego obramowania

B. 2 px oraz marginesy zewnętrzne tego obramowania

C. 20 px oraz marginesy wewnętrzne tego obramowania

D. 20 px oraz marginesy zewnętrzne tego obramowania

W definicji stylu CSS podano, że sekcja div będzie miała obramowanie o szerokości 2 pikseli oraz marginesy zewnętrzne o wartości 20 pikseli. Obramowanie jest definiowane przez właściwość 'border', gdzie 'solid' oznacza typ obramowania i '2px' to jego szerokość, a 'blue' to kolor. Marginesy zewnętrzne są definiowane za pomocą właściwości 'margin', która w tym przypadku ma wartość 20 pikseli. Jest to odległość między brzegiem obiektu a innymi elementami na stronie. Zrozumienie tych właściwości jest kluczowe w projektowaniu responsywnych i dobrze zorganizowanych układów stron internetowych. Stosując te właściwości, twórcy stron mogą łatwo kontrolować wygląd i odległości między elementami, co jest szczególnie ważne w kontekście użyteczności i estetyki witryny. Przykładowo, jeśli chciałbyś dodać więcej przestrzeni pomiędzy sekcjami, wystarczy zwiększyć wartość 'margin'. Warto również zaznaczyć, że te właściwości są zgodne z aktualnymi standardami CSS, co pozwala na ich wszechstronne wykorzystanie w praktyce.

Pytanie 38

Który z przedstawionych obrazów został przetworzony przy użyciu podanego stylu CSS?

A. Rys. C

B. Rys. B

C. Rys. A

D. Rys. D

Analizując inne odpowiedzi, możemy zidentyfikować kluczowe błędy wynikające z niezrozumienia bądź błędnej interpretacji właściwości CSS zastosowanych w stylu. Należy zwrócić uwagę na rozbieżności między oczekiwanym efektem a rzeczywistym wyglądem obrazów. W przypadku Rys. B, obraz nie posiada żadnego marginesu ani zaokrąglonych rogów, co świadczy o nieobecności zastosowanego stylu border-radius oraz padding. Ten brak zaokrąglenia sugeruje pominięcie istotnego aspektu estetycznego, jakim jest border-radius w CSS, który jest często używany do poprawienia odbioru wizualnego. Rys. C z kolei może mieć prawidłowy kolor obramowania, ale brak zaokrąglonych rogów również sygnalizuje, że styl nie został w pełni zastosowany zgodnie z założeniami CSS. Natomiast Rys. D wykazuje zastosowanie obramowania przerywanego, co wskazuje na nieodpowiednie użycie właściwości border-style, która w zadaniu powinna być ustawiona na solid. To błędne użycie stylu obramowania pokazuje złą interpretację specyfikacji CSS, gdzie ciągła linia jest wymagana. Podsumowując, wybór innej niż Rys. A odpowiedzi wskazuje na pominięcie kluczowych cech stylu CSS, takich jak padding i border-radius, które są istotne dla poprawnego renderowania wizualnego elementów interfejsu w zgodności z projektowymi standardami i praktykami branżowymi.

Pytanie 39

Który z wartości atrybutu background-attachment w CSS powinien być użyty, aby tło strony pozostało nieruchome w stosunku do okna przeglądarki?

A. Local

B. Fixed

C. Inherit

D. Scroll

Atrybut background-attachment w języku CSS służy do określenia, w jaki sposób tło elementu jest powiązane z przewijaniem okna przeglądarki. Wybór wartości 'fixed' sprawia, że tło jest nieruchome w stosunku do widoku przeglądarki, co oznacza, że podczas przewijania zawartości strony tło pozostaje na swoim miejscu. Przykładowo, jeśli ustawimy tło za pomocą 'background-attachment: fixed;' w naszym arkuszu stylów, efekt wizualny pozwoli na stworzenie głębi oraz wrażenia trójwymiarowości, co jest często wykorzystywane w projektach graficznych i stronach internetowych. Ta technika jest zgodna z standardami CSS, które umożliwiają deweloperom tworzenie atrakcyjnych interfejsów użytkownika. Ponadto, zastosowanie tła nieruchomego może wpłynąć na doświadczenia użytkownika, zwłaszcza w przypadku stron zawierających dużą ilość przewijanej treści. Warto również wspomnieć, że background-attachment: fixed; może być używane z innymi atrybutami, takimi jak background-image, background-size czy background-position, aby uzyskać jeszcze lepsze efekty wizualne.

Pytanie 40

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. B.

B. C.

C. A.

D. D.

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.

Rozpocznij nowy egzamin

Powrót do strony głównej