Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 28 kwietnia 2026 13:22
Data zakończenia: 28 kwietnia 2026 14:00

Egzamin zdany!

Wynik: 22/40 punktów (55,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

Kolor, który ma odcień niebieski to kolor

A. #EE0000

B. #0000EE

C. #EE00EE

D. #00EE00

Kolor niebieski, który oznaczamy kodem #0000EE, to naprawdę ciekawa sprawa. W systemie hex to oznacza, że składowa niebieska (B) ma najwyższą możliwą wartość, czyli 238, a czerwony (R) i zielony (G) są na poziomie 0. To jest typowy sposób klasyfikacji kolorów w RGB, który jest super przydatny w grafice czy web designie. Niebieski świetnie nadaje się na tła stron czy różne elementy interfejsu, bo przyciąga wzrok i jest dość przejrzysty. Na przykład w CSS możemy napisać: `background-color: #0000EE;`. Fajnie jest znać te kody kolorów, bo ułatwia to komunikację w zespole i realizację pomysłów artystycznych.

Pytanie 2

Przedstawiony styl generuje pojedyncze obramowanie, które posiada następujące właściwości:

border: solid 1px;
 border-color: red blue green yellow;

A. krawędź lewa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź prawa w odcieniu zielonym, krawędź górna w kolorze żółtym

B. krawędź prawa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź lewa w odcieniu zielonym, krawędź górna w kolorze żółtym

C. krawędź górna jest koloru czerwonego, krawędź prawa koloru niebieskiego, krawędź dolna koloru zielonego, krawędź lewa koloru żółtego

D. krawędź górna ma kolor czerwony, krawędź lewa w kolorze niebieskim, krawędź dolna w odcieniu zielonym, krawędź prawa w kolorze żółtym

Prawidłowa odpowiedź wynika z użycia właściwości CSS border-color z czterema wartościami przypisanymi kolejno do górnej prawej dolnej i lewej krawędzi elementu. W tym przypadku border-color: red blue green yellow; przypisuje kolor czerwony do górnej krawędzi kolor niebieski do prawej zielony do dolnej i żółty do lewej. Jest to powszechna praktyka w stylizacji stron internetowych gdzie cztery wartości podane dla border-color definiują odpowiednio kolory górnej prawej dolnej i lewej krawędzi. Taki styl umożliwia projektantom tworzenie wizualnie interesujących i wyróżniających się elementów poprzez łatwe manipulowanie kolorami i szerokościami obramowań. Zastosowanie tego w praktyce może być wykorzystane do zaznaczenia ważnych sekcji strony lub wyróżnienia określonych elementów. Tego rodzaju technika stylizacji jest zgodna z dobrymi praktykami i standardami CSS co pozwala na uzyskanie estetycznego i funkcjonalnego interfejsu użytkownika. Wiedza o przypisaniu kolorów do poszczególnych krawędzi jest kluczowa w projektowaniu elastycznych i responsywnych układów stron.

Pytanie 3

Zaprezentowano kod dla tabeli 3x2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela przypominała tę z obrazka, gdzie wiersz jest niewidoczny?

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

/efekt jest na obrazie - nie dołączam - nie analizuj/

A. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"clear: none"</span>></pre>

B. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"visibility: hidden"</span>></pre>

C. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: none"</span>></pre>

D. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: table-cell"</span>></pre>

Zastosowanie niewłaściwych właściwości CSS w tabelach może prowadzić do niezamierzonych efektów wizualnych i funkcjonalnych. 'Display: none' usunąłby wiersz z układu dokumentu, co skutkowałoby przesunięciem w górę wierszy poniżej. To podejście jest użyteczne, gdy element powinien być całkowicie usunięty z przestrzeni wizualnej i układu, ale nie spełniałoby celu przedstawionego w pytaniu, gdzie układ ma pozostać niezmieniony. Z kolei 'clear: none' jest właściwością CSS dotyczącą floatów, a nie widoczności, co oznacza, że nie miałoby żadnego wpływu na wyświetlanie wiersza tabeli. Jest to typowy błąd polegający na myleniu właściwości CSS w kontekście ukrywania elementów. Właściwość 'display: table-cell' jest stosowana dla elementów traktowanych jako komórki tabeli, co nie jest odpowiednie dla wierszy tabeli. Wybierając tę właściwość, użytkownik mógłby mylnie sądzić, że ma to wpływ na widoczność, podczas gdy w rzeczywistości zmienia jedynie sposób renderowania elementu. Prawidłowe rozumienie różnic między 'visibility' a 'display' jest kluczowe w tworzeniu przewidywalnych i stabilnych interfejsów użytkownika, co jest jednym z fundamentów dobrego projektowania front-endu. Wybór niewłaściwego podejścia do ukrywania elementów może prowadzić do niepożądanych zmian w interfejsie, co wpływa na użyteczność i estetykę strony.

Pytanie 4

W HTML umieszczono formularz. Jakie skutki działania tego kodu zostaną pokazane przez przeglądarkę, jeśli użytkownik w drugim polu wprowadzi wartość "ala ma kota"?

A. Efekt 3

B. Efekt 4

C. Efekt 1

D. Efekt 2

Efekt 2 jest prawidłowy, ponieważ kod HTML używa elementu select do stworzenia listy rozwijanej z trzema opcjami: Kraków, Poznań i Szczecin. Użytkownik może wybrać jedną z tych opcji, co jest standardowym zastosowaniem elementu select w formularzach HTML. Drugim elementem jest pole input typu password które maskuje wpisywany tekst. W formularzach HTML pole typu password jest używane do ukrywania wprowadzanego tekstu co jest szczególnie ważne przy wprowadzaniu danych wrażliwych takich jak hasła. Gdy użytkownik wpisuje hasło widoczne są tylko znaki maskujące często kropki lub gwiazdki co zapewnia prywatność danych. Stosowanie takich elementów jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika w sieci co zwiększa bezpieczeństwo i wygodę użytkowania formularzy. Właściwe korzystanie z elementów HTML jak select i input type=password jest kluczowe w tworzeniu efektywnych i bezpiecznych stron internetowych co jest szczególnie istotne w kontekście e-commerce i aplikacji bankowych.

Pytanie 5

Podczas tworzenia witryny internetowej zastosowano kod definiujący jej wygląd. Jaką szerokość przeznaczono na zawartość strony?

A. 640 px

B. 600 px

C. 560 px

D. 2 px

Definiowanie szerokości elementu w CSS jest kluczowym aspektem projektowania responsywnych stron internetowych. W przedstawionym kodzie CSS zauważamy definicję width 560px która określa szerokość elementu body. Ta wartość bezpośrednio przekłada się na dostępną przestrzeń dla treści wewnętrznej tego elementu. W praktyce definiowanie szerokości w pikselach pozwala na precyzyjne kontrolowanie układu strony co jest szczególnie istotne w kontekście projektowania interfejsów użytkownika. Takie podejście jest jednak najczęściej stosowane w środowiskach gdzie mamy pełną kontrolę nad urządzeniami wyświetlającymi stronę. W kontekście nowoczesnych praktyk często stosuje się jednostki względne lub techniki takie jak media queries aby zapewnić lepszą responsywność i elastyczność. Ważne jest także rozważanie dodatkowych aspektów takich jak marginesy i wypełnienia które mogą wpływać na rzeczywistą ilość dostępnej przestrzeni na treść. Właściwe zrozumienie i zastosowanie szerokości jest kluczowe dla tworzenia estetycznych i funkcjonalnych układów strony internetowej.

Pytanie 6

W języku HTML, aby połączyć w pionie dwie sąsiadujące komórki w kolumnie tabeli, należy użyć atrybutu

A. cellspacing

B. colspan

C. rowspan

D. cellpadding

W kontekście scalania komórek w pionie w HTML, inne proponowane atrybuty są nieodpowiednie. Atrybut colspan służy do scalania komórek w poziomie, co oznacza, że pozwala na połączenie kilku komórek w jednym wierszu, co jest zupełnie inną operacją niż scalanie w pionie. Używanie colspan byłoby nieodpowiednie w sytuacji, gdy celem jest połączenie komórek w kolumnie. Atrybut cellpadding dotyczy natomiast przestrzeni wewnętrznej, określającej odstęp pomiędzy zawartością komórki a jej krawędziami. Jego zastosowanie nie wpływa na scalanie komórek, a jedynie na ich wygląd, co sprawia, że jest to zupełnie inny aspekt formatowania tabeli. Podobnie atrybut cellspacing, który jest używany do definiowania odstępów między komórkami tabeli, również nie ma zastosowania w procesie scalania komórek. Obydwa te atrybuty mogą być użyte do poprawy estetyki tabeli, ale nie wpływają na strukturę danych w sposób, który byłby wymagany do osiągnięcia pionowego scalania komórek. Użycie ich zamiast rowspan jest błędne i prowadzi do niepoprawnego zrozumienia struktury HTML oraz sposobu, w jaki tabele powinny być zbudowane.

Pytanie 7

Aby sformatować wszystkie obrazy w akapicie przy użyciu stylów CSS, należy zastosować selektor

A. p.img

B. p + img

C. p img

D. p # img

Jak spojrzysz na odpowiedzi, to widać, że selektor 'p # img' jest pomyłką. W CSS '#' oznacza 'id', a to powinno być unikalne dla konkretnego elementu. Nie da się tego używać z selektorem potomka, bo to by oznaczało, że szukasz <img> z unikalnym id w akapicie, co nie ma sensu. Z kolei 'p + img' odnosi się do obrazków, które są bezpośrednio po akapicie, czyli nie stylizuje wszystkich obrazków wewnątrz akapitów. Takie coś nie zadziała. A 'p.img' to błąd, bo sugeruje, że <p> ma klasę 'img', co nie jest ok. Klasa 'img' powinna być przypisana do <img>, nie do akapitu. Te wszystkie błędy w selektorach pokazują, jak ważne jest zrozumienie struktury DOM i hierarchii w HTML, żeby dobrze ogarniać CSS.

Pytanie 8

Jakie oprogramowanie służy do obróbki dźwięku?

A. RealPlayer

B. Brasero

C. Winamp

D. Audacity

Audacity jest wszechstronnym, darmowym programem typu open source, który służy do edycji dźwięku. Jego funkcjonalność obejmuje nagrywanie, edytowanie i przetwarzanie dźwięku w różnych formatach. Program ten jest często wykorzystywany przez muzyków, podcasterów oraz profesjonalistów zajmujących się dźwiękiem, co czyni go niezwykle popularnym w branży. Audacity obsługuje wiele efektów dźwiękowych, takich jak kompresja, reverb oraz equalizacja, co pozwala na zaawansowaną obróbkę nagrań. Dzięki intuicyjnemu interfejsowi użytkownika, użytkownicy mogą łatwo nawigować w programie oraz korzystać z funkcji takich jak wielościeżkowe nagrywanie i edytowanie. Warto również wspomnieć, że Audacity działa na różnych systemach operacyjnych, w tym Windows, macOS oraz Linux, co zapewnia dostępność dla szerszego kręgu użytkowników. Użytkownicy mogą również korzystać z dodatkowych wtyczek, które rozszerzają możliwości programu, co jest zgodne z najlepszymi praktykami w branży, gdzie elastyczność i rozszerzalność oprogramowania są kluczowe dla profesjonalnych zastosowań.

Pytanie 9

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. tr { background-color: Pink; }

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

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

Pytanie 10

Wskaż zapis stylu CSS, który formatuje punktor listy numerowanej na wielkie cyfry rzymskie oraz listy punktowanej na kwadraty?

A. ol { list-style-type: disc; } ul { list-style-type: upper-alpha; }

B. ol { list-style-type: upper-roman; } ul { list-style-type: square; }

C. ol { list-style-type: upper-alpha; } ul { list-style-type: disc; }

D. ol { list-style-type: square; } ul { list-style-type: upper-roman; }

Wszystkie pozostałe odpowiedzi zawierają błędne przypisania typów markerów do list. W przypadku odpowiedzi, która sugeruje `ol { list-style-type: disc; }` oraz `ul { list-style-type: upper-alpha; }`, mylone są rodzaje list. Lista uporządkowana (`ol`) powinna być formatowana w taki sposób, aby zawierała numery, a nie dyski, które są zarezerwowane dla list nieuporządkowanych. Z kolei styl `upper-alpha` dla listy nieuporządkowanej również jest niewłaściwy, ponieważ oczekiwano kwadratów. Tego typu błędy często wynikają z niepełnego zrozumienia zastosowania różnych stylów list w CSS oraz ich klasyfikacji. Koncepcja używania `upper-alpha` do listy uporządkowanej jest także błędna, ponieważ z definicji `upper-alpha` odnosi się do liter, co jest sprzeczne z zastosowaniem dla numeracji. Kolejna odpowiedź, wykorzystująca `square` dla listy uporządkowanej również nie jest zgodna z konwencjami CSS. Tego rodzaju nieporozumienia mogą prowadzić do niespójności w projektach webowych, gdzie jasne przedstawienie hierarchii treści jest kluczowe. Dobrze jest także znać standardy CSS przy projektowaniu, aby unikać takich błędów i tworzyć bardziej funkcjonalne i atrakcyjne wizualnie strony internetowe.

Pytanie 11

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

A. Mambo

B. Joomla

C. WordPress

D. Apache

Joomla, Mambo i WordPress to przykłady systemów zarządzania treścią, które umożliwiają użytkownikom łatwe tworzenie i zarządzanie treściami na stronach internetowych. Joomla to rozbudowany CMS, który oferuje zaawansowane funkcje zarządzania treścią oraz rozbudowany system rozbudowy za pomocą komponentów i modułów, co czyni go idealnym narzędziem dla średnich i dużych serwisów internetowych. Mambo, będący jednym z pierwszych systemów tego typu, również dostarcza szereg funkcji umożliwiających tworzenie i zarządzanie treściami, jednak został w dużej mierze wycofany na rzecz bardziej nowoczesnych platform, jak Joomla. WordPress, z kolei, jest najpopularniejszym systemem zarządzania treścią na świecie, znanym z prostoty obsługi oraz ogromnej społeczności deweloperów, co pozwala na łatwe dostosowywanie i rozszerzanie funkcji poprzez wtyczki. Każdy z tych systemów jest zaprojektowany z myślą o użytkownikach, którzy chcą efektywnie zarządzać treściami bez konieczności programowania, oferując przy tym różne możliwości personalizacji i wsparcie dla różnych rodzajów treści, co czyni je idealnymi narzędziami w tworzeniu nowoczesnych stron internetowych.

Pytanie 12

Podaj definicję metody, którą trzeba umieścić w miejscu kropek, aby na stronie WWW pojawił się tekst: Jan Kowalski

A. D

B. A

C. C

D. B

Pozostałe odpowiedzi zawierają błędy związane z niepoprawnym użyciem kontekstu this lub niekompletną definicją funkcji. W opcji B metoda dane została zdefiniowana jako funkcja globalna, co powoduje, że this nie odnosi się do obiektu osoba, ale do obiektu globalnego, co uniemożliwia poprawne odwołanie się do właściwości imie i nazwisko. To prowadzi do błędnych lub niezdefiniowanych wyników, ponieważ this w tym kontekście nie zawiera oczekiwanych właściwości. Opcja C nie używa słowa kluczowego this, co oznacza, że zmienne imie i nazwisko są traktowane jako zmienne globalne, a nie właściwości obiektu osoba. Jeżeli takie zmienne globalne nie istnieją, powoduje to błąd w wykonaniu, ponieważ kod próbuje odwołać się do niezdefiniowanych zmiennych. W opcji D użycie funkcji bez return powoduje, że metoda dane nie zwraca żadnej wartości, co skutkuje przypisaniem undefined do innerHTML, co jest oczywistym błędem w kontekście oczekiwanego wyświetlenia tekstu. Wszystkie te błędne podejścia wynikają z niepoprawnego zarządzania kontekstem obiektowym w JavaScript, co podkreśla znaczenie zrozumienia wiązania dynamicznego słowa kluczowego this i dobrych praktyk w projektowaniu metod obiektowych w JavaScript. Kluczowym aspektem jest zapewnienie, że metody mają dostęp do właściwości obiektu, w ramach którego zostały zdefiniowane, co jest osiągane przez poprawne użycie this w kontekście metody wewnętrznej obiektu.

Pytanie 13

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. <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

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

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

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

Elementy <h3> <p> i <div> są znacznikami HTML które domyślnie zachowują się jako elementy block-level co oznacza że każdy z nich zaczyna się w nowej linii i wprowadza przerwę przed i po sobie. Element <h3> jest używany do oznaczania nagłówków trzeciego poziomu co nadaje mu dodatkowego semantycznego znaczenia w strukturze dokumentu ale nie jest odpowiedni do użycia tam gdzie wymagane jest wyświetlenie tekstu w jednym wierszu. Podobnie <p> jest przeznaczony do oznaczania akapitów tekstu i dlatego również wprowadza przerwy przed i po swoim zawartości. Znacznik <div> jest uniwersalnym kontenerem w HTML używanym do grupowania elementów w celu stylizacji lub manipulacji za pomocą CSS i JavaScript ale także działa jako element block-level. Typowym błędem przy nauce HTML jest niezdawanie sobie sprawy z różnicy między elementami inline i block-level co prowadzi do problemów z układem strony gdy elementy block-level są stosowane tam gdzie potrzebny jest płynny układ w jednym wierszu. Zrozumienie i umiejętność właściwego zastosowania tych znaczników jest kluczowe dla każdej osoby zajmującej się profesjonalnie tworzeniem stron internetowych pozwalając na tworzenie bardziej intuicyjnych i estetycznych interfejsów użytkownika. Właściwe stosowanie elementów inline i block-level jest również istotne w kontekście responsywności i dostępności stron internetowych co ma kluczowe znaczenie we współczesnym środowisku webowym. Umiejętność rozróżniania i stosowania odpowiednich elementów w kodzie HTML jest kluczowym aspektem w tworzeniu wydajnych i semantycznie poprawnych stron internetowych które są zarówno estetyczne jak i funkcjonalne dla szerokiego grona użytkowników i urządzeń.

Pytanie 14

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 src="rys.jpg" width="120px" height="80px" alt="krajobraz"/>

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

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

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

Odpowiedź <img src="rys.jpg" width="120px" height="80px" alt="krajobraz"/> jest poprawna z kilku powodów. Przede wszystkim, atrybut 'src' wskazuje na lokalizację pliku graficznego, co jest kluczowe dla poprawnego wyświetlania obrazu na stronie internetowej. Atrybuty 'width' oraz 'height' pozwalają na precyzyjne określenie rozmiarów obrazu, co jest istotne zarówno dla responsywności strony, jak i dla optymalizacji czasu ładowania. Użycie jednostki 'px' (pikseli) jest poprawne, jednak w HTML5 można pominąć tę jednostkę, wpisując jedynie wartość liczbową. Atrybut 'alt' jest niezwykle ważny dla dostępności, ponieważ dostarcza alternatywny opis obrazu dla użytkowników, którzy nie mogą go zobaczyć, na przykład osób niewidomych korzystających z czytników ekranu. Używanie odpowiednich atrybutów oraz wartości jest zgodne z najlepszymi praktykami w tworzeniu stron WWW oraz standardami W3C, co wpływa na lepszą użyteczność oraz SEO strony. Przykładem praktycznym może być umieszczenie grafiki w nagłówku strony, gdzie obraz jest widoczny, a opis alternatywny wspiera dostępność i kontekst treści.

Pytanie 15

W przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ

<img src="kwiat.jpg alt="kwiat">

A. wprowadzono nieznany atrybut alt

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

C. nie odnaleziono pliku kwiat.jpg

D. nie zamknięto cudzysłowu

Poprawna odpowiedź to nie domknięto cudzysłowu ponieważ w kodzie HTML atrybuty muszą być poprawnie zamknięte aby poprawnie interpretować ich wartości. W przedstawionym fragmencie kodu dla znacznika img brakuje końcowego cudzysłowu po wartości src co stanowi błąd składniowy. Tego typu błędy mogą prowadzić do nieprawidłowego działania strony ponieważ przeglądarka nie jest w stanie jednoznacznie określić końca wartości atrybutu co może skutkować nieprawidłowym renderowaniem danych. Zgodnie z najlepszymi praktykami każde otwarte cudzysłowie powinno być zamknięte aby zapewnić poprawną interpretację kodu. Ponadto stosowanie poprawnego zamykania cudzysłowów zwiększa czytelność kodu co jest istotne przy współpracy zespołowej i ułatwia jego utrzymanie. Warto także korzystać z walidatorów HTML które automatycznie wykrywają takie błędy pomagając w ich szybkim usunięciu. Tego rodzaju narzędzia są kluczowe w procesie tworzenia stron internetowych ponieważ umożliwiają weryfikację zgodności kodu z obowiązującymi standardami co ma bezpośredni wpływ na jego wydajność i kompatybilność z różnymi przeglądarkami.

Pytanie 16

Jakie pola znajdują się w formularzu?

A. Textarea, Option, Input(Checkbox), Input(Checkbox), Input(Submit), Input(Reset)

B. Input(Text), Select, Input(Radio), Input(Radio), Input(Submit), Input(Reset)

C. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)

D. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)

Odpowiedź, którą wybrałeś, jest ok, bo wszystko trzyma się zasady formularzy z obrazka. Input(Text) to właśnie pole, w którym wpisujesz swoje nazwisko. Potem mamy Input(Select), który pozwala wybrać jedno z województw z listy – to też jest na plus. Przy Input(Radio) można wybrać jedną opcję, co dobrze pasuje do wyboru między Studiami podyplomowymi a Kursem. Input(Submit) jest do wysyłania formularza, więc tu też wszystko gra. Na końcu Input(Reset) zeruje wszystko, co jest przydatne, kiedy chcesz wyczyścić formularz. Wszystkie te elementy są zgodne z HTML5, co jest teraz standardem w tworzeniu stron. Fajnie, że formularz ma logiczne ułożenie, bo ułatwia to korzystanie z niego. Moim zdaniem, dobrze wiedzieć, jakie elementy są stosowane w formularzach, żeby wszystko działało tak jak powinno.

Pytanie 17

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

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

A. 2 px oraz marginesy na zewnątrz tego obramowania.

B. 2 px oraz marginesy wewnątrz tego obramowania.

C. 20 px oraz marginesy na zewnątrz tego obramowania.

D. 20 px oraz marginesy wewnątrz tego obramowania.

Wygląda na to, że niepoprawnie zrozumiałeś, jak działają obramowania i marginesy w CSS. W tym języku obramowanie (border) i margines (margin) to dwie różne typy przestrzeni, które możemy zdefiniować wokół elementu. Obramowanie jest linią otaczającą element, natomiast margines to przestrzeń między obramowaniem a następnym elementem. Marginesy są zawsze na zewnątrz obramowania, nie wewnątrz. Powiedzenie, że margines jest 'wewnątrz' obramowania, to fundamentalne nieporozumienie dotyczące tego, jak te dwie właściwości działają. Poza tym, szerokość obramowania została zdefiniowana jako 2 piksele, a nie 20. To może być łatwo pomylone, ale pamiętaj, że w CSS jednostki są ważne i mogą znacząco wpływać na wygląd strony. W praktyce, szczegółowe zrozumienie obramowania i marginesów jest kluczowe do precyzyjnego ułożenia elementów na stronie internetowej.

Pytanie 18

Która z poniższych grup znaczników HTML zawiera tagi używane do grupowania elementów oraz organizacji struktury dokumentu?

A. span, strong, em

B. div, article, header

C. table, tr, td

D. br, img, hr

Odpowiedź z <div>, <article> i <header> jest naprawdę trafna. Te znaczniki HTML są super ważne, bo pomagają w sensownym grupowaniu treści. <div> to taki uniwersalny kontener, który świetnie nadaje się do organizowania elementów, a zwłaszcza przy stylach CSS. Można nim łatwo zarządzać całymi sekcjami, co jest spoko. <article> z kolei to coś jak kawałek treści, który może działać samodzielnie, na przykład artykuł czy post na blogu. A <header>? On zdefiniuje nagłówki dla różnych sekcji, co ułatwia nawigację po stronie. To nie tylko pomaga użytkownikom, ale też robotom indeksującym. Fajnie też pamiętać, że korzystając z odpowiednich znaczników, nie tylko sprawiamy, że strona jest bardziej dostępna, ale też poprawiamy SEO, co jest kluczowe, żeby nasza witryna była widoczna w sieci.

Pytanie 19

Jaki styl CSS umożliwia ustawienie wyrównania tekstu do prawej strony?

A. <p style="align: right"> tekst </p>

B. <p style="text-align: right"> tekst </p>

C. <p style="font: right"> tekst </p>

D. <p style="positon: right"> tekst </p>

Odpowiedź <p style="text-align: right"> tekst </p> jest poprawna, ponieważ właściwość CSS 'text-align' jest standardowym sposobem definiowania wyrównania tekstu w elemencie blokowym, takim jak <p>. Używając 'text-align: right', tekst wewnątrz elementu <p> zostanie wyrównany do prawej strony, co jest szczególnie przydatne w przypadku projektów webowych, gdzie estetyka i układ treści mają kluczowe znaczenie. Dzięki CSS można z łatwością zmieniać wyrównanie tekstu w zależności od wymagań projektu, co pozwala na elastyczne dostosowywanie stylów do różnych urządzeń i rozmiarów ekranów. Warto również wspomnieć, że stosowanie CSS do stylizacji dokumentów HTML jest zgodne z zasadami kaskadowych arkuszy stylów, co zapewnia separację treści od prezentacji i ułatwia zarządzanie stylami w większych projektach. Dobrą praktyką jest stosowanie zewnętrznych lub wewnętrznych arkuszy stylów zamiast inline stylingu, co zwiększa czytelność kodu i ułatwia jego utrzymanie.

Pytanie 20

Atrybut, który definiuje lokalizację pliku graficznego w znaczniku <img>, to

A. alt

B. link

C. src

D. href

Atrybut 'src' (source) w znaczniku <img> jest kluczowy, ponieważ określa lokalizację pliku graficznego, który ma być wyświetlany na stronie internetowej. Bez tego atrybutu przeglądarka nie byłaby w stanie załadować i wyświetlić obrazka, co skutkowałoby pustym miejscem w interfejsie użytkownika. Dobrym przykładem zastosowania atrybutu 'src' jest umieszczanie zdjęć produktów w sklepie internetowym, gdzie obrazek jest kluczowym elementem zachęcającym do zakupu. Na przykład, używając znacznika <img src='ścieżka/do/obrazka.jpg' alt='opis obrazka'>, programiści mogą nie tylko wyświetlić grafikę, ale także dostarczyć opis alternatywny, co jest zgodne z zasadami dostępności w sieci. W praktyce, dobrym zwyczajem jest przechowywanie grafik w odpowiednich katalogach oraz dbanie o optymalizację ich rozmiaru, aby poprawić czas ładowania strony oraz doświadczenia użytkownika. Warto również zwrócić uwagę na poprawne wykorzystanie protokołów, takich jak HTTPS, co zwiększa bezpieczeństwo przesyłanych danych oraz zaufanie użytkowników.

Pytanie 21

Wymiary:	4272x2848px
Rozdzielczość:	72 dpi
Format:	JPG

W ramce przedstawiono właściwości pliku graficznego. W celu optymalizacji czasu ładowania rysunku na stronę WWW należy

A. zmienić format grafiki na CDR

B. dostosować proporcje szerokości do wysokości

C. zmniejszyć rozmiary obrazu

D. zwiększyć rozdzielczość

Zmniejszenie wymiarów rysunku to kluczowy krok w optymalizacji czasu ładowania grafiki na stronę internetową. Wymiary rysunku 4272x2848px są znaczące, co oznacza, że obraz ma dużą ilość pikseli, co przekłada się na większy rozmiar pliku. Przy standardowej rozdzielczości 72 dpi, która jest odpowiednia do wyświetlania na ekranach, mniejsze wymiary skutkują zmniejszeniem liczby pikseli, co automatycznie obniża wagę pliku. Przykładem może być przeskalowanie obrazu do wymiarów 800x600px, co może znacznie przyspieszyć czas ładowania strony. W praktyce, witryny internetowe powinny dążyć do używania obrazów o wymiarach dostosowanych do wyświetlacza, a optymalne wymiary to te, które są zgodne z responsywnym designem. Ponadto, standardy dotyczące wydajności stron, takie jak Web Page Test czy Google PageSpeed Insights, zalecają minimalizację rozmiaru plików graficznych jako kluczowy element poprawy szybkości ładowania. Zmniejszenie wymiarów rysunku jest zatem jednym z najprostszych i najbardziej efektywnych rozwiązań, które mogą przynieść znaczące korzyści w zakresie wydajności stron internetowych.

Pytanie 22

.format1 {
    …
}

W CSS określono wspólne style dla pewnej grupy elementów. Użycie takich stylów w kodzie HTML odbywa się za pomocą atrybutu:

A. id = "format1"

B. class = "format1"

C. div = "format1"

D. style = "format1"

Inne odpowiedzi odnoszą się do atrybutów lub metod, które nie są optymalne lub poprawne w kontekście wspólnego formatowania znaczników za pomocą CSS. Użycie atrybutu style do bezpośredniego stylowania elementów może być nieefektywne i prowadzi do powielania kodu, co utrudnia utrzymanie. W przypadku większych projektów takie podejście skutkuje chaosem i zwiększa ryzyko błędów. Definiowanie stylów bezpośrednio w każdym elemencie HTML utrudnia wprowadzanie globalnych zmian w wyglądzie strony. Z kolei atrybut id jest przeznaczony do unikalnego identyfikowania pojedynczego elementu na stronie. Choć można by teoretycznie użyć go do stylowania, nie jest to zalecane, gdyż każdy id musi być unikalny w ramach całego dokumentu HTML, co wyklucza jego stosowanie dla grupy elementów dzielących ten sam styl. W praktyce id używa się do celów, takich jak manipulacja specyficznymi elementami przez JavaScript lub do nawigacji wewnętrznej strony z użyciem kotwic. Źle zrozumiane przez programistów są także strategie, które polegają na przypisaniu znaczników do odmiennych grup bez właściwego użycia klas, co prowadzi do nieczytelnego kodu i utrudnia przyszłe zmiany w projekcie. Zastosowanie atrybutu div w taki sposób nie jest poprawne, ponieważ div jest elementem blokowym HTML, a nie atrybutem, co powoduje błędne zrozumienie struktury HTML i CSS. Kluczem do zrozumienia poprawnych praktyk jest świadomość różnic w zastosowaniu poszczególnych atrybutów i elementów, co prowadzi do tworzenia lepiej zorganizowanego i efektywnego kodu w projektach webowych.

Pytanie 23

W CSS wartości underline, overline, blink są przypisane do atrybutu

A. font-weight

B. text-style

C. text-decoration

D. font-style

Zwracając uwagę na 'text-style', 'font-style' i 'font-weight', można się pogubić, bo to są różne rzeczy. Po pierwsze, 'text-style' w ogóle nie istnieje w CSS, więc jeśli ktoś tego użyje, to nie uzyska zamierzonych efektów. Często ludzie mylą 'font-style' z 'text-decoration', a to są zupełnie różne rzeczy. 'Font-style' odpowiada za styl czcionki, taki jak normalny czy kursywa, a 'text-decoration' dodaje różne efekty dekoracyjne do tekstu. Z kolei 'font-weight' to grubość czcionki, co wpływa na to, jak tekst wygląda, ale nie ma nic wspólnego z podkreślaniem. Jest to typowy błąd, bo niektórzy myślą, że te właściwości można wymieniać bez konsekwencji. Żeby dobrze stylizować tekst, trzeba rozumieć, co każda z tych właściwości robi i jak ich używać. To naprawdę pomaga w tworzeniu ładnych i funkcjonalnych stron internetowych.

Pytanie 24

Do której właściwości można przypisać wartości: static, relative, fixed, absolute oraz sticky?

A. text-transform

B. list-style-type

C. display

D. position

Wybór czegoś innego niż 'position' pokazuje, że mogło dojść do małego miszmaszu z rozumieniem CSS. Na przykład, 'display' decyduje, jak elementy się wyświetlają – czy są blokowe, czy liniowe – ale nie ma nic wspólnego z ich pozycjonowaniem. 'display: block' sprawia, że element zajmuje całą szerokość, a 'display: inline' pozwala na mniejszy wpływ na inne elementy, co może wprowadzić w błąd, jeśli chodzi o pozycjonowanie. 'list-style-type' to kwestia stylizacji list, więc to też nie ma związku z układem elementów na stronie. Tak samo, 'text-transform' zmienia wygląd tekstu, na przykład na wielkie litery, ale nie wpływa na to, gdzie elementy są umieszczone. Wydaje mi się, że warto by było jeszcze raz przestudiować, jak działa pozycjonowanie w CSS. Fajnie by było też zajrzeć do dokumentacji i zobaczyć konkretne przykłady, żeby lepiej to zrozumieć.

Pytanie 25

Strona internetowa została stworzona w języku XHTML. Który z poniższych kodów reprezentuje realizację zaprezentowanego fragmentu strony, jeśli nie zdefiniowano żadnych stylów CSS?

A. C

B. B

C. A

D. D

Odpowiedzi nieprawidłowe nie spełniają wymogów semantycznych oraz składniowych XHTML. XHTML wymaga, aby dokumenty były poprawne pod względem składniowym, co oznacza między innymi zamykanie wszystkich znaczników oraz stosowanie poprawnej struktury dokumentu. Warianty odpowiedzi, które używają znacznika <b> zamiast semantycznych nagłówków jak <h1>, nie są zgodne z dobrymi praktykami, ponieważ <h1> nadaje kontekst semantyczny, informując o hierarchii treści. W przypadku XHTML, znaczniki powinny być zamykane, a ich nazwy pisane małymi literami, co jest kluczowe dla zgodności z XML. Brak odpowiedniej struktury, jak w przypadku użycia <b> do nagłówków, może prowadzić do niepoprawnej interpretacji przez przeglądarki oraz problemy z dostępnością dla technologii wspomagających. Ponadto, używanie znaczników inline jak <br> do wizualnego formatowania tekstu nie jest zalecane, gdyż nie oddziela treści od prezentacji, co jest jednym z fundamentalnych założeń nowoczesnego tworzenia stron internetowych. To może prowadzić do problemów z dostępnością oraz negatywnie wpływać na SEO, jako że wyszukiwarki lepiej interpretują treści poprawnie zorganizowane i semantycznie poprawne.

Pytanie 26

W języku HTML, aby uzyskać następujący efekt formatowania, należy zapisać kod:

pogrubiony pochylony lub w ^{górnym indeksie}

A. <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>

B. <i>pogrubiony <b>pochylony lub w </i><sup>górnym indeksie</sup>

C. <i>pogrubiony </i><b>pochylony</b> lub w <sub>górnym indeksie</sub>

D. <b>pogrubiony <i>pochylony</i></b> lub w <sub>górnym indeksie</sub>

Poprawna odpowiedź to: <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>. Ta odpowiedź prawidłowo wykorzystuje trzy kluczowe tagi HTML do formatowania tekstu: <b>, <i> i <sup>. Tag <b> służy do wyświetlania tekstu w pogrubionym formacie, co pozwala na podkreślenie istotnych fragmentów tekstu. Przykładem może być wyróżnienie tytułów, nagłówków lub kluczowych punktów w treści. Tag <i> jest używany do wyświetlania tekstu w formacie kursywy, co jest często używane do wyróżnienia tytułów książek, filmów, cytowań lub podkreślenia ważnych punktów. Tag <sup> jest używany do wyświetlania napisów jako tekst górnego indeksu, co jest często używane do wskazania numerów stron, przypisów, lub dla oznaczeń matematycznych lub naukowych. Pamiętaj, że prawidłowe użycie tych tagów jest kluczowe dla tworzenia jasnej, czytelnej i profesjonalnie wyglądającej strony internetowej.

Pytanie 27

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

A. C

B. D

C. B

D. A

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

Pytanie 28

W HTML-u utworzono formularz. Jaki efekt działania poniższego kodu zostanie pokazany przez przeglądarkę, jeśli w drugie pole użytkownik wprowadził tekst "ala ma kota"?

<form>
    <select>
        <option value="v1">Kraków</option>
        <option value="v2">Poznań</option>
        <option value="v3">Szczecin</option>
    </select><br>
    <input type="password" />
</form>

A. A

B. C

C. D

D. B

Pozostałe odpowiedzi są niepoprawne z kilku powodów związanych z różnym renderowaniem elementów formularza HTML. Odpowiedź A pokazuje zastosowanie checkboxów, które są używane do wyboru wielu opcji z zestawu, ale nie są obecne w podanym kodzie HTML. Kod formularza zawiera element select, co sugeruje użycie rozwijanego menu, a nie checkboxów. Tym samym, A jest niepoprawna, ponieważ nie odzwierciedla struktury kodu. W odpowiedzi C widoczny jest poprawny element select, jednak pole hasła nie jest zamaskowane co nie jest zgodne z typowym zachowaniem pola input typu password w przeglądarkach. Hasła wprowadzane do formularzy są z reguły maskowane w celu ochrony danych użytkownika. Odpowiedź D przedstawia przyciski radiowe, które są stosowane, gdy użytkownik może wybrać tylko jedną opcję z grupy, co również nie odpowiada strukturze kodu HTML gdzie użyto rozwijanego menu poprzez element select. W HTMLu nie ma przycisków radiowych, co czyni tę odpowiedź niepoprawną. Typowe błędy myślowe prowadzące do wyboru nieprawidłowych odpowiedzi obejmują nieznajomość standardowego odwzorowania elementów HTML w przeglądarkach oraz brak zrozumienia różnicy między rodzajami pól wyboru i ich zastosowaniami. Znajomość tych podstawowych zasad pozwala na prawidłowe zrozumienie działania kodu HTML i jego reprezentacji w interfejsie użytkownika.

Pytanie 29

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

D. A.

Wybrana przez Ciebie odpowiedź nie jest prawidłowa, ale nie martw się, ważne jest, żeby zrozumieć dlaczego. CSS to kaskadowe arkusze stylów, które umożliwiają określenie stylu strony internetowej. Kluczowym aspektem CSS jest składnia, która obejmuje selektor, właściwość i wartość. W przypadku przycisku typu 'submit', selektorem jest 'input[type='submit']'. Właściwością jest 'background-color', 'border' lub 'padding', a wartością jest 'black', 'none' lub '5px' odpowiednio. Niepoprawne odpowiedzi nie spełniają wszystkich lub niektórych z tych wymagań. Mogą one ignorować wymagany czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px lub wszystkie te elementy. Inne błędne odpowiedzi mogą zawierać nieprawidłowe selektory, właściwości lub wartości. Pamiętaj, że praktyka prowadzi do mistrzostwa, więc nie zniechęcaj się, jeśli nie udało ci się tego dostrzec za pierwszym razem.

Pytanie 30

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}

A. znaczników z klasą przypisaną jako *.

B. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.

C. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.

D. znaczników o identyfikatorze równym *.

Nieprawidłowe odpowiedzi wskazują na nieporozumienie dotyczące działania selektorów w CSS oraz hierarchii stylów. Przykłady wskazujące na znaczenie id lub klas w kontekście selektora * są mylące, gdyż id i klasy są w CSS bardziej specyficznymi selektorami, które służą do stylizowania konkretnej grupy elementów, podczas gdy selektor uniwersalny działa na wszystkie elementy. Argumentowanie, że formatowanie dotyczy elementów o id równym * jest błędne, ponieważ id nie może być równy znaku *, a jego zastosowanie ogranicza się do unikalnych identyfikatorów. Podobnie, przypisanie klasy równą * jest niemożliwe do zrealizowania w praktyce. Odpowiedź sugerująca, że styl dotyczy całego kodu HTML w kontekście specyficznych ustawień CSS jest również myląca, ponieważ nie uwzględnia faktu, że późniejsze reguły CSS mogą nadpisywać wcześniejsze style. W praktyce oznacza to, że jeśli na elementach zastosowane zostaną bardziej szczegółowe selektory, mogą one zmienić wygląd tych elementów, co obala tezę o domyślnym formatowaniu. Takie podejście nie uwzględnia także koncepcji kaskadowości stylów, która jest kluczowym elementem funkcjonowania CSS, gdzie kolejność i specyficzność selektorów odgrywają kluczową rolę w aplikowaniu stylów. W efekcie, zrozumienie działania selektorów i ich hierarchii jest niezbędne dla efektywnego wykorzystania CSS w projektowaniu stron internetowych.

Pytanie 31

Jaką informację przekazuje przeglądarce internetowej zapis <!DOCTYPE html> ?

A. Dokument został zapisany w wersji HTML 5

B. W dokumencie wszystkie tagi są zapisane wielkimi literami

C. Dokument został zapisany w wersji HTML 4

D. W dokumencie wymagane jest zamknięcie każdego taga, nawet samozamykającego

Odpowiedź, że dokument został zapisany w języku HTML 5, jest prawidłowa, ponieważ zapis <DOCTYPE html> jest standardowym nagłówkiem deklarującym, że dokument jest napisany w najnowszej wersji HTML, czyli HTML 5. Taki zapis informuje przeglądarkę, że ma interpretować zawartość dokumentu zgodnie z zasadami i funkcjami określonymi w HTML 5. Wprowadzenie HTML 5 przyniosło wiele ulepszeń, takich jak nowe elementy semantyczne (np. <header>, <footer>, <article>), które ułatwiają tworzenie strukturalnie poprawnych i bardziej dostępnych stron internetowych. Dodatkowo, HTML 5 wprowadza wsparcie dla multimediów (np. <video>, <audio>) oraz API, które umożliwiają bardziej interaktywne podejście do tworzenia aplikacji webowych. Warto pamiętać, że stosowanie aktualnych standardów jest kluczowe dla zapewnienia kompatybilności z nowymi przeglądarkami oraz urządzeniami mobilnymi, a także dla zwiększenia wydajności i bezpieczeństwa aplikacji webowych.

Pytanie 32

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. zmiana rozmiaru.

B. lustrzane odbicie obrazu.

C. łączenie warstw.

D. kadrowanie.

Skalowanie obrazu odnosi się do zmiany jego rozmiaru, co może prowadzić do utraty jakości, jeśli obraz jest powiększany bez zachowania odpowiednich proporcji. To działanie nie koncentruje się na wyborze konkretnego fragmentu obrazu, a na ogólnym dostosowaniu jego wymiarów do określonych potrzeb. Odbicie obrazu polega na lustrzanym odwzorowaniu zdjęcia, co zmienia jego perspektywę, ale nie wpływa na kompozycję w ramach oryginalnych krawędzi. Z kolei łączenie warstw to technika używana w programach graficznych do zestawiania różnych elementów wizualnych w jedną całość. Wymaga to umiejętności pracy z warstwami, ich maskowaniem i edytowaniem, co jest zupełnie innym procesem niż kadrowanie. Błędem myślowym jest utożsamianie tych operacji z kadrowaniem, co może wynikać z niepełnego zrozumienia pojęć związanych z obróbką grafiki. Kluczowe jest, aby w procesie tworzenia grafiki internetowej zrozumieć, że każda z tych operacji ma swoją specyfikę i zastosowanie, co wpływa na końcowy efekt wizualny. Użycie odpowiednich technik w odpowiednich sytuacjach jest niezbędne do osiągnięcia profesjonalnych rezultatów.

Pytanie 33

Podczas obróbki dźwięku, aby eliminować niepożądane dźwięki wynikające z niskiej jakości mikrofonu, należy użyć narzędzia

A. wyciszenia

B. usuwania szumów

C. echa

D. obwiedni

Usuwanie szumów to kluczowa technika w przetwarzaniu dźwięku, pozwalająca na eliminację niepożądanych dźwięków, które mogą zakłócać jakość nagrania. Techniki te opierają się na analizie sygnału i identyfikacji częstotliwości, które nie są związane z pożądanym dźwiękiem. Narzędzia do usuwania szumów często wykorzystują algorytmy takie jak filtrowanie adaptacyjne, które dostosowują się do zmieniającego się środowiska akustycznego. Przykładem zastosowania usuwania szumów jest nagrywanie podcastów, gdzie tło dźwiękowe, takie jak hałas uliczny, jest usuwane, co pozwala na uzyskanie czystego i profesjonalnego brzmienia. Przy użyciu oprogramowania takiego jak Audacity czy Adobe Audition, użytkownicy mogą przeprowadzić analizę spektralną, aby zidentyfikować i usunąć niepożądane częstotliwości. Standardy dotyczące przetwarzania dźwięku, takie jak ITU-R BS.1387, podkreślają znaczenie eliminacji szumów dla poprawy jakości słyszalności i wrażeń akustycznych. W ten sposób usuwanie szumów nie tylko poprawia jakość dźwięku, ale także zwiększa zrozumiałość mowy i klarowność nagrań.

Pytanie 34

Jaki znacznik powinien być zastosowany, aby wprowadzić nową linię tekstu bez tworzenia akapitu w dokumencie internetowym?

A. <p>

B. </b>

C. <br>

D. </br>

Znaczniki <p> i </b> oraz </br> są błędnymi odpowiedziami w kontekście przełamania linii tekstu. Znacznik <p> służy do definiowania akapitu, co oznacza, że każdorazowe jego użycie powoduje wprowadzenie przerwy między akapitami. W związku z tym, jego zastosowanie do przełamania linii nie byłoby odpowiednie, ponieważ nie umożliwia kontynuacji tekstu w tym samym kontekście. Podobnie, znacznik </b> jest używany do zamykania formatowania pogrubienia, a jego użycie nie ma żadnego związku z przełamaniem linii; jest on tylko elementem prezentacyjnym. Co więcej, </br> nie jest poprawnym znacznikiem w HTML. Chociaż w niektórych kontekstach może być używany przez niektóre silniki renderujące, jego właściwe zastosowanie to <br>, co czyni </br> niepoprawnym i mylącym. Typowe błędy myślowe, prowadzące do takich odpowiedzi, często wynikają z braku zrozumienia semantyki HTML oraz różnicy pomiędzy elementami blokowymi a liniowymi. Użytkownicy często mylą funkcje poszczególnych znaczników, co prowadzi do nieprawidłowego formatowania treści na stronach internetowych. Zrozumienie tych różnic jest kluczowe dla tworzenia poprawnych i efektywnych struktur dokumentu HTML.

Pytanie 35

Barwy kolorów reprezentowane na stożku można uzyskać w modelu

A. CMYK

B. RGB

C. CIEXYZ

D. HSV

W tym pytaniu haczyk polega na tym, że różne modele barw mają zupełnie inną logikę i geometrię przedstawiania kolorów. Pomylenie ich jest bardzo częste, bo w praktyce ciągle przewijają się te same skróty: RGB, CMYK, CIEXYZ, HSV. Warto je sobie dobrze poukładać. Model RGB opisuje kolor jako kombinację trzech składowych: czerwonej, zielonej i niebieskiej. Geometrycznie przedstawia się go jako sześcian: każdy wymiar to jedna składowa, od 0 do 255 (lub 0–1 w zapisie znormalizowanym). To jest model addytywny, typowy dla monitorów, telewizorów, ekranów smartfonów. Można go wizualizować na różne sposoby, ale klasycznie nie jako stożek barw, tylko właśnie jako kostkę przestrzeni kolorów. CMYK to z kolei model subtraktywny, wykorzystywany głównie w druku – Cyan, Magenta, Yellow, Key (Black). Tutaj myśli się raczej o nałożeniu farb drukarskich niż o intuicyjnej percepcji koloru. Geometria prezentacji CMYK też nie jest stożkiem, tylko wielowymiarową bryłą, a sam model słabo nadaje się do „ludzkiego” doboru kolorów na ekranie, dlatego nie stosuje się go jako podstawy kolor-pickerów do WWW czy interfejsów. CIEXYZ jest jeszcze inną historią: to matematyczny, ustandaryzowany przez CIE model przestrzeni barw, który ma dobrze odwzorowywać ludzkie postrzeganie koloru i służy jako punkt odniesienia do kalibracji, profilowania kolorów, ICC itp. On jest fundamentem kolorometrii, ale w codziennej pracy grafika czy web developera rzadko ktoś bezpośrednio „maluje” w CIEXYZ. Typowy błąd polega na tym, że skoro każdy z tych modeli opisuje kolory, to wydaje się, że można je dowolnie przedstawić w formie stożka. Jednak stożek barw to specyficzna wizualizacja modelu o parametrach: odcień, nasycenie i jasność (lub podobne), czyli właśnie HSV/HSL. Dopiero taki podział pozwala wygodnie ułożyć barwy wokół osi (Hue) i wzdłuż wysokości (Value). Dlatego tylko HSV z podanych odpowiedzi pasuje do opisu barw reprezentowanych na stożku.

Pytanie 36

Który z poniższych fragmentów kodu HTML5 zostanie uznany za niepoprawny przez walidator HTML?

A. <pre><p class= "stl">tekst</p></pre>

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

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

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

Odpowiedź, która została wskazana jako błędna, jest przykładem kodu HTML5, który nie spełnia standardów walidacji, ponieważ zawiera tag <style> wewnątrz tagu <p>. Zgodnie z wytycznymi HTML, tag <style> powinien znajdować się w sekcji <head> dokumentu, a nie w treści. Wstawianie stylów CSS bezpośrednio w treści elementu blokowego jest niepraktyczne i niezgodne z dobrymi praktykami, które zalecają separację treści od prezentacji. Dobrą praktyką jest stosowanie arkuszy stylów CSS do zewnętrznego formatowania dokumentów, aby zwiększyć ich dostępność i ułatwić późniejsze modyfikacje. Przykładowo, zamiast używać tagu <style> wewnątrz <p>, należy zdefiniować style w sekcji <head> lub w zewnętrznym pliku CSS, a następnie odwołać się do tych klas w treści dokumentu. W ten sposób utrzymujemy porządek w kodzie i zapewniamy, że będzie on zgodny z zaleceniami W3C, co przekłada się na lepszą kompatybilność z przeglądarkami i urządzeniami. Zatem, poprawne podejście polega na unikalnym zarządzaniu stylami oraz treściami, co jest kluczowe dla efektywnego tworzenia stron internetowych.

Pytanie 37

Skrypt na stronę WWW stworzony w języku PHP

A. jest przetwarzany w taki sam sposób jak JavaScript

B. może działać bez wsparcia serwera WWW

C. jest realizowany po stronie klienta

D. jest wykonywany po stronie serwera

Kod PHP jest przetwarzany po stronie serwera, co oznacza, że wszystkie instrukcje napisane w tym języku są wykonywane na serwerze, a nie na komputerze klienta. Kiedy użytkownik żąda strony internetowej, serwer WWW interpretuje kod PHP, generuje odpowiedni HTML i wysyła go do przeglądarki. Dzięki temu możliwe jest dynamiczne tworzenie treści, uzależnionej od danych wejściowych użytkownika czy zawartości bazy danych. Przykładowo, w aplikacjach internetowych takich jak systemy zarządzania treścią (CMS) czy platformy e-commerce, PHP pozwala na generowanie różnorodnych widoków i interakcji w oparciu o aktualne informacje. Kluczowym aspektem dobrej praktyki w programowaniu w PHP jest separacja logiki aplikacji od warstwy prezentacji, co wspiera łatwiejsze zarządzanie kodem i jego utrzymanie. Warto również zaznaczyć, że PHP współpracuje z różnymi systemami baz danych, co umożliwia przechowywanie i przetwarzanie dużych ilości danych. Na przykład, w typowej aplikacji webowej można wykorzystać PHP do komunikacji z bazą MySQL, co pozwala na dynamiczne ładowanie treści w odpowiedzi na interakcje użytkownika.

Pytanie 38

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

A. <img>

B. <jpg>

C. <src>

D. <table>

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

Pytanie 39

Wskaźnik HTML, który umożliwia oznaczenie tekstu jako błędnego lub nieodpowiedniego poprzez jego przekreślenie, to jaki?

A. <em> </em>

B. <u> </u>

C. <b> </b>

D. <s> </s>

Element <s> w HTML służy do oznaczania tekstu jako nieaktualnego, błędnego albo już nieobowiązującego poprzez jego przekreślenie. Przeglądarka domyślnie renderuje taki fragment z poziomą linią przez środek tekstu. W praktyce używa się go np. przy cenach promocyjnych: <p>Stara cena: <s>199 zł</s> Nowa cena: 149 zł</p> albo przy korektach treści, kiedy chcemy pokazać, że coś zostało zmienione, ale wciąż widoczne jest, co było wcześniej. Warto wiedzieć, że historycznie do podobnych celów używano też <strike>, ale ten znacznik jest przestarzały (deprecated) w standardzie HTML i nie powinien być już stosowany. Moim zdaniem lepiej od razu przyzwyczajać się do poprawnych, aktualnych tagów, bo to się później opłaca przy większych projektach. W nowszych specyfikacjach HTML5 zaleca się stosowanie <s> właśnie do treści nieaktualnych, ale nie takich, które zostały formalnie wycofane – do tego jest znacznik <del>, który dodatkowo semantycznie wskazuje usunięcie fragmentu, często używany w systemach kontroli wersji treści. Z mojego doświadczenia warto rozróżniać <s>, <del> i <ins>, bo w połączeniu z CSS i narzędziami do dostępności (np. czytnikami ekranu) daje to lepszą semantykę dokumentu. Dobrą praktyką jest też nie nadużywać przekreśleń tylko dla „efektu wizualnego” – jeśli chcesz coś tylko wyróżnić graficznie, lepiej użyć CSS, a znaczników semantycznych używać zgodnie z ich przeznaczeniem.

Pytanie 40

Właściwość CSS animation-duration określa

A. opóźnienie startu animacji.

B. liczba powtórzeń animacji.

C. czas trwania jednego cyklu animacji.

D. kierunek rozpoczęcia animacji.

Właściwość CSS `animation-duration` dokładnie określa, ile czasu trwa jeden pełny cykl animacji – od początku do końca zdefiniowanych klatek kluczowych (`@keyframes`). Jeśli ustawisz `animation-duration: 2s;`, to przeglądarka ma 2 sekundy na przejście od stanu początkowego do końcowego w danej animacji. Moim zdaniem warto to sobie wyobrazić jak czas trwania jednego „przejścia” animacji, zanim ewentualnie zacznie się kolejny obrót, jeśli używasz `animation-iteration-count`. Technicznie jest to czas trwania pojedynczej iteracji, zgodnie ze specyfikacją CSS Animations (W3C). W praktyce wygląda to np. tak: `.box { animation-name: fadeIn; animation-duration: 1.5s; }`. Tu element będzie się „pojawiał” przez 1,5 sekundy. Jeśli dodasz `animation-iteration-count: 3;`, to ta 1,5 sekundowa animacja zostanie odtworzona trzy razy, ale sama długość pojedynczego cyklu nadal wynosi 1,5 s. Częsty dobry nawyk w front-endzie to trzymanie się krótkich, płynnych animacji, zwykle w zakresie 150–500 ms dla prostych efektów (hover, focus), a dłuższych, do 1–2 sekund, dla bardziej złożonych przejść, żeby użytkownik nie czuł się znużony. `animation-duration` przyjmuje wartości w sekundach (`s`) lub milisekundach (`ms`), np. `300ms`. Można też ustawiać różne czasy dla wielu animacji naraz, rozdzielając wartości przecinkami. Warto pamiętać, że jeśli nie podasz `animation-duration`, domyślna wartość to `0s`, czyli animacja tak naprawdę się nie odtworzy – to jeden z częstszych powodów, czemu początkującym „nie działa animacja”. Dobrą praktyką jest zawsze jawne ustawianie `animation-duration` oraz spójne używanie jednostek czasu w całym projekcie, żeby interfejs wyglądał konsekwentnie i profesjonalnie.

Rozpocznij nowy egzamin

Powrót do strony głównej