Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 12 maja 2026 15:56
Data zakończenia: 12 maja 2026 15:56

Egzamin niezdany

Wynik: 1/40 punktów (2,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

A. pseudoklasę :hover

B. pseudoklasę :visited

C. pseudoelement ::marker

D. pseudoelement ::first-line

Zastosowanie pseudoklasy :visited jest nieodpowiednie w kontekście zmiany stylów wierszy tabeli, ponieważ ta pseudoklasa dotyczy linków, a konkretnie tych, które zostały już odwiedzone przez użytkownika. Nie ma możliwości jej użycia do modyfikacji stylów dla innych elementów jak wiersze tabel, co ogranicza jej zastosowanie w interaktywnym projektowaniu. Z kolei pseudoelement ::marker jest przeznaczony do stylizacji markerów w listach, a nie do wierszy tabeli, co sprawia, że jest całkowicie nieadekwatny w kontekście tego pytania. Ta pomyłka często wynika z mylnego przekonania, że pseudoelementy mogą być używane w celu wprowadzania efektów interakcji z użytkownikiem, co jest niezgodne z ich przeznaczeniem. Ostatnia z wymienionych opcji, pseudoelement ::first-line, pozwala na stylizację pierwszej linii tekstu w bloku, co również nie ma zastosowania w kontekście zmiany stylów dla wierszy tabel. Tego typu nieporozumienia mogą prowadzić do błędnych implementacji oraz niezrozumienia roli, jaką odgrywają różne selektory w CSS. Dlatego ważne jest, aby przy projektowaniu strony internetowej mieć jasne pojęcie o tym, jakie klasy i pseudoklasy są przeznaczone do jakich zastosowań, aby uniknąć nieefektywnych i błędnych rozwiązań.

Pytanie 2

Wskaż kod CSS, który odpowiada layoutowi bloków 2 – 5, zakładając, że są one utworzone na podstawie podanego kodu HTML.

A. Kod 2

B. Kod 3

C. Kod 1

D. Kod 4

Prawidłowy układ bloków wymaga precyzyjnego zarządzania ich pozycjonowaniem za pomocą właściwości CSS float. W niepoprawnych odpowiedziach pojawiają się często błędy związane z nieodpowiednim pozycjonowaniem bloków, co skutkuje niepożądanym układem. Na przykład w Kodzie 1, użycie właściwości clear: both dla bloku 5 powoduje, że zaczyna on nowy wiersz, co jest niezgodne z założeniem układu, w którym blok 5 powinien znajdować się pod blokiem 3. Brak odpowiedniego wyrównania bloków może prowadzić do niepożądanego zapełnienia przestrzeni, co może być kłopotliwe szczególnie w responsywnym projektowaniu. Kod 3 nie uwzględnia potrzeby wyczyszczenia float, co może prowadzić do nakładania się bloków. W przypadku Kodu 4, brak użycia float dla bloku 3 powoduje, że ten nie zachowuje się jak oczekiwano, co może prowadzić do niezgodności z przedstawionym układem. Typowym błędem jest również niewłaściwe obliczenie sumarycznej szerokości bloków w jednym wierszu, co może prowadzić do przekroczenia dostępnej przestrzeni, a tym samym zaburzenia układu. Takie błędy często wynikały z braku zrozumienia działania mechanizmu float i clear, co jest kluczowe w tradycyjnym projektowaniu układów stron za pomocą CSS. Obecnie, dla bardziej zaawansowanych układów, zaleca się stosowanie takich technologii jak flexbox czy grid layout, które oferują większą elastyczność i kontrolę nad rozmieszczeniem elementów na stronie.

Pytanie 3

Zapis CSS

margin: auto;

wskazuje, że marginesy są

A. dziedziczone z elementu nadrzędnego dla danego obiektu

B. obliczane przez przeglądarkę w taki sposób, aby element został wyśrodkowany poziomo

C. równe domyślnym wartościom marginesów elementu, do którego są przypisane

D. stałe dla konkretnej przeglądarki, niezależnie od rozmiaru jej okna

Zapis CSS 'margin: auto;' jest kluczowy w kontekście wyśrodkowywania elementów blokowych w poziomie w ich rodzicach. Gdy zastosujemy ten styl, przeglądarka dynamicznie oblicza wartość marginesów po lewej i prawej stronie elementu, aby równomiernie rozłożyć pozostałą przestrzeń w kontenerze. W praktyce oznacza to, że jeśli mamy element o stałej szerokości umieszczony w szerszym kontenerze, zastosowanie 'margin: auto;' spowoduje, że ten element zostanie wyśrodkowany, co jest szczególnie przydatne w responsywnym projektowaniu stron internetowych. Dobrym przykładem może być użycie 'margin: auto;' w przypadku kontenera obrazka, gdzie chcemy, aby obrazek był zawsze wyśrodkowany na stronie niezależnie od rozmiaru okna przeglądarki. To podejście jest zgodne z najlepszymi praktykami CSS i jest szeroko stosowane w nowoczesnym web designie, co czyni strony bardziej estetycznymi i przyjaznymi dla użytkowników.

Pytanie 4

Jakim kodem określa się kolor czerwony?

A. #EE0000

B. #0000EE

C. #00EEEE

D. #00EE00

Wybór innych kolorów wynika z błędnego zrozumienia wartości RGB oraz ich wpływu na uzyskanie pożądanych barw. Kod #00EEEE to kolor cyjanowy, uzyskany z maksymalnej wartości zielonej i niebieskiej, co nie ma związku z czerwonym. Kod #0000EE z kolei odpowiada kolorowi niebieskiemu, gdzie jedynie niebieski składnik jest na maksymalnym poziomie, a czerwony i zielony są całkowicie nieobecne, przez co nie może być postrzegany jako czerwony. Kod #00EE00 reprezentuje kolor zielony, również nieodpowiedni w tym kontekście, gdzie znowu brak czerwonego komponentu sprawia, że wynik nie jest zgodny z wymaganym kolorem. Użytkownik może pomylić się w ocenie, myśląc, że różne kombinacje składników RGB mogą prowadzić do uzyskania koloru czerwonego, podczas gdy kluczowym aspektem jest to, że czerwony komponent musi być dominujący i obecny w odpowiedniej wartości. Wartości RGB są fundamentem wielu aplikacji webowych, a ich zrozumienie jest kluczowe dla projektantów i programistów. Używanie niewłaściwych kodów barw może prowadzić do niezgodności wizualnych i braku spójności w projektach, co jest niezgodne z najlepszymi praktykami w branży, które zalecają stosowanie kolorów zgodnie z ich rzeczywistymi wartościami w systemie RGB.

Pytanie 5

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

A. rgb(0, 128, 0)

B. rgb(0, 100, 0)

C. rgb(0, 80, 0)

D. rgb(0, 160, 0)

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

Pytanie 6

Jakie z wymienionych par znaczników HTML działają w ten sam sposób na stronie internetowej, jeżeli żadne style CSS nie zostały określone?

A. <meta> oraz <title>

B. oraz <big>

C. oraz

D. oraz <h2>

Wybierając inne pary znaczników, można napotkać na kilka powszechnych nieporozumień dotyczących ich funkcji i zastosowania. Znacznik <meta> i <title> są znaczącymi elementami dokumentu HTML, ale pełnią całkowicie różne role. <meta> służy do dostarczania metainformacji o stronie, takich jak opis, słowa kluczowe czy informacje dotyczące kodowania, co jest kluczowe dla SEO i prezentacji strony w wyszukiwarkach. Z kolei <title> definiuje tytuł strony, który pojawia się na karcie przeglądarki oraz w wynikach wyszukiwania. Obie te pary znaczników nie mają wizualnego wpływu na treść wyświetlaną użytkownikowi, co sprawia, że są trudne do porównania w kontekście wizualnym. Z kolei i <h2> to elementy używane do strukturyzowania treści; definiuje akapit, a <h2> jest nagłówkiem drugiego poziomu. Użycie tych znaczników wpływa na hierarchię treści oraz czytelność strony. Różnice te są kluczowe w tworzeniu dostępnych i zrozumiałych dokumentów HTML. Wreszcie, i <big>, mimo że oba zmieniają wygląd tekstu, nie mają podobnych zastosowań semantycznych. <big> służy do zwiększenia rozmiaru tekstu, co niekoniecznie wskazuje na jego znaczenie. Zrozumienie tych różnic jest kluczowe dla właściwego stosowania HTML i tworzenia stron, które są zgodne z dobrymi praktykami oraz standardami W3C.

Pytanie 7

W HTML, aby utworzyć hiperłącze, które otworzy się w nowej karcie przeglądarki, należy użyć atrybutu

A. target = "_blank"

B. rel = "prev"

C. rel = "external"

D. target = "_new"

Użycie atrybutu target="_new" nie jest ok w HTML, bo większość przeglądarek go po prostu nie rozumie. Może czasem zadziała, ale nie masz pewności, że zawsze tak będzie, co może być mylące dla użytkownika. Ludzie spodziewają się, że linki będą otwierane tak, jak to jest na ogół ustalone, a błędne atrybuty mogą sprawić, że wszystko będzie się zachowywać w dziwny sposób. Poza tym, rel="prev" to też jest zła droga, bo ten atrybut mówi o relacji między dokumentami, a "prev" wskazuje na wcześniejszą stronę w nawigacji, co nie ma nic wspólnego z linkami. I jeszcze rel="external" - to też nie jest to, bo nie jest to standard w HTML, który decyduje o tym, jak linki mają się otwierać. Użytkownicy mogą myśleć, że te atrybuty są ok, ale w rzeczywistości to prowadzi do nieporozumień, bo nie robią tego, co powinny. Lepiej zrozumieć, jak te atrybuty działają i kiedy ich używać, bo to naprawdę poprawia doświadczenia użytkowników w sieci.

Pytanie 8

Znak <s> w HTML powoduje

A. skreślenie tekstu

B. podkreślenie tekstu

C. pochylenie tekstu

D. migotanie tekstu

Brak odpowiedzi na to pytanie.

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

Pytanie 9

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

A. <s> </s>

B.

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
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: Stara cena: <s>199 zł</s> Nowa cena: 149 zł 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 10

Zapis selektora wskazuje, że kolor tła będzie brązowy dla

input[type=number] { background-color: Brown; }

A. wszystkich tekstów na stronie internetowej

B. wszystkich formularzy

C. formularzy, które są typu numerycznego

D. formularzy, gdy użytkownik wprowadzi w nie jakąkolwiek cyfrę

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis selektora CSS `input[type=number] { background-color: Brown; }` odnosi się do pól edycyjnych, które są zdefiniowane jako typu numerycznego. Oznacza to, że wszystkie elementy <input>, które mają atrybut `type` ustawiony na `number`, będą miały brązowe tło. Tego typu selektory są przydatne, ponieważ pozwalają na precyzyjne stylizowanie elementów formularzy, co jest kluczowe dla poprawy doświadczeń użytkowników. Stosowanie odpowiednich typów elementów formularza, takich jak `number`, umożliwia kontrolowanie danych wprowadzanych przez użytkowników, co jest zgodne z dobrymi praktykami w zakresie walidacji danych. W praktyce, jeśli w formularzu istnieje pole do wprowadzania dat, które powinno przyjmować tylko wartości liczbowe, stylizowanie go w ten sposób może pomóc w natychmiastowym wizualnym wskazaniu użytkownikowi, że pole jest przeznaczone do wprowadzania numerów. Warto również pamiętać, że stosowanie odpowiednich typów wejściowych wspiera responsywność, umożliwiając na przykład wyświetlanie klawiatury numerycznej na urządzeniach mobilnych, co zwiększa komfort użytkowania.

Pytanie 11

W języku CSS zapis

h2 {background-color: green;}

spowoduje, że kolor zielony będzie dotyczył:

A. tła całej strony

B. czcionki nagłówka drugiego stopnia

C. tła tekstu nagłówka drugiego stopnia

D. czcionki każdego nagłówka na stronie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, że kolor zielony będzie dotyczył tła tekstu nagłówka drugiego stopnia, jest poprawna. W kodzie CSS, zapis h2 {background-color: green;} oznacza, że wszystkie elementy <h2> na stronie będą miały tło w kolorze zielonym. W praktyce oznacza to, że każdy nagłówek drugiego stopnia będzie miał zielone tło, co może być użyteczne do wyróżnienia sekcji na stronie. Warto zauważyć, że stylowanie tła nagłówków może poprawić czytelność i estetykę dokumentu, zwłaszcza w sytuacjach, gdy chcemy podkreślić różne sekcje treści. Dobrą praktyką w CSS jest także używanie klas i identyfikatorów do bardziej precyzyjnego stylowania, co pozwala na unikanie konfliktów z innymi stylami na stronie. Dodatkowo, można eksperymentować z różnymi kolorami i przezroczystościami, aby uzyskać unikalne efekty wizualne, co jest szczególnie ważne w nowoczesnym projektowaniu stron internetowych.

Pytanie 12

Który z poniższych kodów HTML odpowiada opisanej tabeli? (W celu uproszczenia zrezygnowano z zapisu stylu obramowania tabeli oraz komórek)

A. Odpowiedź B

B. Odpowiedź C

C. Odpowiedź A

D. Odpowiedź D

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź B jest prawidłowa, ponieważ wykorzystuje atrybut rowspan do połączenia dwóch wierszy w jednej kolumnie tabeli. HTML zapewnia atrybuty rowspan i colspan, które umożliwiają połączenie wielu komórek tabeli w jedną, co jest niezbędne w sytuacjach, gdy dane muszą być przedstawione w sposób bardziej przejrzysty i zwarty. W przedstawionej tabeli labelka Telefon jest wspólna dla dwóch numerów, co skutkuje koniecznością użycia rowspan=2 w komórce, która łączy dwa wiersze. Ta konstrukcja jest zgodna z dobrymi praktykami tworzenia semantycznie poprawnych i wizualnie uporządkowanych tabel w dokumentach HTML. Zastosowanie atrybutu rowspan może poprawić czytelność tabel, co jest szczególnie przydatne przy prezentacji złożonych danych w aplikacjach biznesowych czy raportach. Użycie tego podejścia pozwala na bardziej efektywne wykorzystanie przestrzeni w tabeli i jest zgodne ze standardami W3C, które promują semantykę i dostępność w sieci.

Pytanie 13

Najłatwiejszym i najmniej czasochłonnym sposobem na przetestowanie funkcjonowania strony internetowej w różnych przeglądarkach oraz ich wersjach jest

A. użycie emulatora przeglądarek internetowych, np. Browser Sandbox

B. zainstalowanie na kilku maszynach różnych przeglądarek i przeprowadzenie testu witryny

C. testowanie strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

D. skorzystanie z narzędzia do walidacji kodu HTML

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Korzystanie z emulatora przeglądarek internetowych, takiego jak Browser Sandbox, to jedna z najskuteczniejszych metod na testowanie działania witryny w różnych przeglądarkach i ich wersjach. Emulatory umożliwiają symulację różnych środowisk przeglądarkowych bez potrzeby fizycznego instalowania wielu aplikacji na różnych urządzeniach. To znacząco przyspiesza proces testowania i pozwala na łatwe przełączanie się między wersjami przeglądarek. Przykładowo, za pomocą emulatora można szybko sprawdzić, jak strona zachowuje się w Chrome, Firefox czy Safari, co jest kluczowe dla zapewnienia spójnego doświadczenia użytkownika. Ponadto, korzystanie z takich narzędzi pozwala na testowanie z różnych systemów operacyjnych, co jest istotne w kontekście różnorodności urządzeń używanych przez użytkowników. Dobrze skonfigurowany emulator nie tylko pozwala na testowanie responsywności witryny, ale także na analizowanie błędów związanych z CSS czy JavaScript, co przekłada się na wyższą jakość końcowego produktu. Zastosowanie emulatorów jest zgodne z najlepszymi praktykami w zakresie tworzenia aplikacji webowych, które powinny być dostępne i funkcjonalne w różnych przeglądarkach.

Pytanie 14

Na ilustracji zaprezentowano koncepcję układu bloków strony internetowej. Przyjmując, że bloki są realizowane za pomocą znaczników sekcji, a szerokość jest określona tylko dla bloków 2, 3 oraz 4, ich stylowanie powinno uwzględniać właściwość

A. float: left dla wszystkich bloków

B. clear: both dla wszystkich bloków

C. float: left jedynie dla bloków 3 i 4 oraz clear: both dla bloku 2

D. clear: both dla bloku 5 i float: left jedynie dla bloków 2, 3 oraz 4

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest prawidłowa, ponieważ wykorzystanie float: left dla bloków 2, 3 i 4 pozwala na ich ustawienie obok siebie w poziomie. Jest to klasyczna technika stosowana w CSS do tworzenia layoutów, gdzie elementy mają płynąć obok siebie. Definiując float: left, elementy zaczynają od lewej krawędzi rodzica i układają się w linii poziomej. Użycie clear: both dla bloku 5 zapewnia, że blok ten zacznie się poniżej pływających bloków 2, 3 i 4, a nie obok nich. Clear: both jest konieczne, aby zapewnić, że blok 5 nie zostanie zakłócony przez floating, co jest powszechną praktyką przy tworzeniu wielokolumnowych layoutów. Kiedy float jest używany bez clear, może prowadzić do overlapania elementów, co jest niepożądane w strukturze layoutu. Praktyczne zastosowanie tego podejścia obejmuje układy z nagłówkiem, treścią i stopką, gdzie nagłówek i stopka powinny być pełnej szerokości, a treść podzielona na kolumny obok siebie. To podejście jest zgodne z tradycyjnymi metodami budowania stron przed wprowadzeniem flexboxa i grida, gdzie float był jednym z podstawowych narzędzi do zarządzania układem strony. Współczesne dobre praktyki wciąż uznają jego istotność, zwłaszcza w kontekście starszych projektów utrzymywanych z biegiem czasu.

Pytanie 15

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #FF1016

B. #FF0A16

C. #2551022

D. #251022

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź #FF0A16 jest poprawna, ponieważ kod RGB (255, 10, 22) jest konwertowany na format heksadecymalny, gdzie każdy z trzech kanałów (czerwony, zielony, niebieski) jest przedstawiany przez dwie cyfry szesnastkowe. W kodzie RGB wartość 255 dla kanału czerwonego odpowiada szesnastkowej wartości FF, wartość 10 dla kanału zielonego odpowiada wartości 0A, a wartość 22 dla kanału niebieskiego odpowiada wartości 16. Łącząc te wartości, otrzymujemy #FF0A16. Praktyczne zastosowania kodów kolorów w formacie heksadecymalnym są powszechne w projektowaniu stron internetowych oraz grafice komputerowej, gdzie umożliwiają precyzyjne definiowanie kolorów. Warto również pamiętać, że standard W3C zaleca używanie formatu heksadecymalnego w CSS, co czyni go bardziej efektywnym dla deweloperów. Ponadto, znajomość konwersji kolorów RGB na heksadecymalny jest kluczowa dla każdego, kto zajmuje się designem i programowaniem wizualnych interfejsów użytkownika.

Pytanie 16

Który z zaprezentowanych kodów HTML sformatuje tekst zgodnie z podanym wzorem?
Uwaga: słowo "stacji" jest napisane większą czcionką niż pozostałe wyrazy w tej linijce)

Lokomotywa

Stoi na stacji lokomotywa ...

A. <h1>Lokomotywa</h1> Stoi na <big>stacji lokomotywa ...

B. Lokomotywa Stoi na <big>stacji<big> lokomotywa ...

C. <h1>Lokomotywa</h1> Stoi na <big>stacji</big> lokomotywa ...

D. <h1>Lokomotywa</h1> Stoi na <big>stacji</big> lokomotywa ...

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawny kod dokładnie odtwarza wzór: nagłówek poziomu pierwszego <h1> z tekstem „Lokomotywa” oraz akapit , w którym tylko słowo „stacji” jest wyróżnione większym rozmiarem za pomocą znacznika <big>. Dzięki temu przeglądarka powiększa wyłącznie ten jeden wyraz, a reszta zdania zachowuje standardowy rozmiar czcionki wynikający z kaskady CSS lub domyślnych ustawień. Struktura dokumentu jest też logiczna: tytuł w <h1>, treść w akapicie, bez zbędnego mieszania poziomów nagłówków. W praktyce taki zapis dobrze pokazuje, jak selektywnie formatować tekst wewnątrz akapitu – możemy objąć znacznikiem <big> tylko fragment, podobnie jak używa się albo do wyróżniania pojedynczych słów. W nowoczesnych projektach zamiast <big> zaleca się raczej stosowanie CSS, np. stacji i w CSS: .wiekszy { font-size: 1.2em; }. Daje to większą kontrolę nad wyglądem i jest zgodne z aktualnymi standardami W3C, bo <big> jest znacznikiem przestarzałym (deprecated). Mimo to, z punktu widzenia tego zadania, kluczowe jest zrozumienie, że tag musi dokładnie obejmować tylko słowo, które ma być powiększone, oraz że znacznik musi być poprawnie zamknięty. Taka precyzyjna selekcja fragmentu tekstu to podstawa przy formatowaniu treści w HTML i późniejszym stylowaniu w CSS.

Pytanie 17

W języku HTML aby zdefiniować słowa kluczowe strony, należy użyć zapisu

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <meta name = "keywords" content = "psy, koty, gryzonie">, ponieważ jest to właściwy sposób definiowania słów kluczowych w sekcji <head> dokumentu HTML. Element <meta> służy do dostarczania metadanych o stronie internetowej, a atrybut 'name' określa, jakie informacje są zawarte w danym elemencie. W przypadku 'keywords', atrybut 'content' z kolei zawiera listę słów kluczowych, które są związane z treścią strony. Chociaż znaczenie słów kluczowych w SEO zmienia się, wciąż są one używane przez niektóre wyszukiwarki do kategoryzowania zawartości strony. Przykładowo, jeśli strona dotyczy zwierząt domowych, użycie fraz takich jak 'psy', 'koty', czy 'gryzonie' w atrybucie 'content' może pomóc w poprawie widoczności w wynikach wyszukiwania. Dobrą praktyką jest, aby słowa kluczowe były specyficzne, związane z tematyką strony i nie przekraczały rozsądnej liczby, aby nie wprowadzać w błąd algorytmy wyszukiwarek. Używanie odpowiednich metatagów to kluczowy element optymalizacji SEO.

Pytanie 18

Jak powinna wyglądać prawidłowa, zgodna ze standardami języka HTML, forma samozamykającego się znacznika, który odpowiada za łamanie linii?

A.

B.

C.

D.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis samozamykającego się znacznika jest zgodny z aktualnym standardem HTML, który definiuje, jak powinny być tworzone elementy w dokumentach HTML. Znacznik służy do łamania linii i jest powszechnie stosowany w tekstach, aby wymusić nową linię w obrębie bloku tekstowego. W HTML5, który jest aktualnie przyjętym standardem, znaczniki samozamykające się, takie jak , nie wymagają dodatkowego zamknięcia. Znak '/' przed '>' wskazuje, że jest to znacznik samozamykający. Przykłady użycia tego znacznika można znaleźć w różnych kontekstach, na przykład w formularzach, gdzie chcemy oddzielić pola tekstowe, czy w treści artykułów, gdzie chcemy kontrolować formatowanie tekstu. Warto również zaznaczyć, że wcześniejsze wersje HTML, takie jak XHTML, wymagały użycia '/' w takich znacznikach, co mogło prowadzić do nieporozumień. Wiedza na temat poprawnego użycia znaczników HTML jest kluczowa dla tworzenia semantycznego i zgodnego kodu, co ma wpływ na dostępność oraz SEO stron internetowych.

Pytanie 19

W języku HTML zapisano formularz. Który z efektów działania poniższego kodu zostanie wyświetlony przez przeglądarkę, zakładając, że w pierwsze pole użytkownik wpisał wartość "Przykładowy tekst"?

<form>
    <textarea rows="3" cols="30"></textarea><br>
    <input type="checkbox"> Opcja1<br>
    <input type="checkbox"> Opcja2
</form>

A. Efekt 1.

B. Efekt 4.

C. Efekt 3.

D. Efekt 2.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Twoja odpowiedź jest poprawna. Wybrałeś odpowiedź 'Efekt 2', która jest zgodna z zachowaniem formularza HTML w opisanym scenariuszu. Formularz zawiera pole tekstowe i dwa pola typu checkbox. Kiedy wpiszesz do pola tekstowego wartość 'Przykładowy tekst' i wyświetlisz formularz w przeglądarce, zobaczysz ten tekst w polu tekstowym oraz dwa pola wyboru typu checkbox poniżej z etykietami 'Opcja1' i 'Opcja2'. To dokładnie taki układ, co pokazuje Efekt 2. Tworzenie formularzy HTML to ważna umiejętność w projektowaniu stron internetowych. Pozwalają one na interakcję z użytkownikiem oraz zbieranie od niego informacji. Pamiętaj, że dobry formularz powinien być intuicyjny w użyciu i jasno prezentować swoje funkcje użytkownikowi.

Pytanie 20

Aby w języku HTML uzyskać formatowanie paragrafu przedstawione w ramce, należy zastosować kod

A. Tekst może być zaznaczony albo istotny dla autora

B. Tekst może być zaznaczony albo istotny dla autora

C. Tekst może być zaznaczony albo istotny dla autora

D. Tekst może być zaznaczony albo istotny dla autora

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: Tekst może być zaznaczony albo istotny dla autora. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): do zaznaczenia fragmentu tekstu jak zakreślaczem oraz do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz , potem go zamykasz , dopiero później otwierasz i zamykasz . Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe () i jednocześnie podkreślić termin ważny dla autora lub kontekstu (). Moim zdaniem lepiej stosować zamiast , bo niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.

Pytanie 21

Model barw o parametrach: odcień, nasycenie, jasność i przezroczystość, to

A. SRGB

B. CMYK

C. RGBA

D. HSLA

W tym pytaniu chodzi o model barw, w którym występują dokładnie cztery parametry: odcień, nasycenie, jasność i przezroczystość. Kluczowe są tu trzy pierwsze słowa: odcień, nasycenie, jasność. To już samo w sobie powinno kierować myślenie w stronę rodziny HSL/HSV, a nie klasycznego RGB czy modeli drukarskich takich jak CMYK. Typowym błędem jest patrzenie tylko na obecność kanału przezroczystości i automatyczne kojarzenie go z RGBA, bo wiele osób zapamiętuje po prostu „A = alpha, czyli przeźroczystość”, bez zwracania uwagi na to, jakie są pozostałe składowe. W modelu RGBA mamy składniki Red, Green, Blue plus Alpha. Nie ma tam odcienia, nasycenia i jasności jako osobnych parametrów, tylko trzy liczby opisujące natężenie podstawowych składowych RGB. To oczywiście też może zawierać informację o kolorze, ale w zupełnie inny sposób. Jeżeli w pytaniu pojawia się słowo „odcień”, to z mojego doświadczenia w zadaniach testowych prawie zawsze chodzi o HSL/HSLA albo HSV/HSVA, bo tam kolor opisuje się kołem barw i procentami. Samo SRGB to nie jest model z parametrami odcień–nasycenie–jasność–przezroczystość, tylko standardowa przestrzeń barw RGB dla monitorów, zdefiniowana m.in. przez konsorcjum W3C i Microsoft. W CSS co prawda używamy funkcji `rgb()` czy `rgba()`, ale to tylko zapisy w przestrzeni sRGB, a nie osobny czteroparametrowy model jak w treści pytania. Wybranie SRGB często wynika z tego, że ktoś kojarzy skrót z „kolorami w przeglądarce”, ale to za mało, bo pytanie precyzyjnie opisuje właściwości. Z kolei CMYK jest modelem typowo poligraficznym: Cyan, Magenta, Yellow, Key (Black). Stosuje się go w druku, a nie w definicjach kolorów w CSS i nie ma tam żadnego kanału alpha ani parametrów odcień/nasycenie/jasność. Mylenie CMYK z HSL/HSLA to zwykle wynik tego, że ktoś kojarzy „inny niż RGB, więc może ten”. W projektowaniu stron WWW i interfejsów użytkownika, zgodnie z dobrymi praktykami front-end, warto rozróżniać: RGB/RGBA – składowe podstawowych barw światła, HSLA – odcień, nasycenie, jasność plus alpha, CMYK – druk, a sRGB – nazwa przestrzeni, nie czteroelementowego modelu H+S+L+A.

Pytanie 22

W CSS zapis w formie: p{background-image: url"rysunek.jpg")} spowoduje, że rysunek.png stanie się

A. tłem całej witryny

B. wyświetlany obok każdego bloku tekstowego

C. pokazany, jeśli w kodzie użyty będzie znacznik img

D. tłem każdego bloku tekstowego

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Zapis p{background-image: url('rysunek.jpg')} oznacza, że każdy , czyli paragraf, dostanie jako tło obrazek o nazwie rysunek.jpg. To jest po prostu sposób, żeby nadać każdyemu paragrafowi ten sam wygląd. Działa to świetnie, gdy chcesz, żeby cały tekst miał spójny styl czy dodać coś wizualnego do treści. Ważne, żeby ten plik rysunek.jpg był w dobrym miejscu, bo jak go nie znajdziesz, to przeglądarka go nie wczyta. Można to wykorzystać, żeby strona wyglądała bardziej estetycznie i przyciągała wzrok – każdy paragraf z własnym tłem na pewno sprawi, że będzie się lepiej czytało. Możesz też bawić się dodatkowymi właściwościami w CSS, jak background-repeat czy background-size, bo to otwiera drzwi do jeszcze ciekawszych efektów wizualnych.

Pytanie 23

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź jest poprawna, ponieważ styl CSS `ol { list-style-type: upper-roman; }` ustawia numerację dla listy uporządkowanej na wielkie cyfry rzymskie, co jest zgodne z wymaganiami. Użycie `ul { list-style-type: square; }` definiuje styl dla listy nieuporządkowanej, gdzie punkty są przedstawiane jako kwadraty. Stylizacja list w CSS jest kluczowa dla estetyki i czytelności dokumentu, a korzystanie z różnych typów markerów dla różnych rodzajów list potrafi znacząco poprawić organizację treści. Przykładem zastosowania może być dokumentacja techniczna, gdzie numery rzymskie używane są do oznaczania sekcji głównych, a kwadratowe punkty do podpunktów. Tego rodzaju stylizacja jest zgodna z dobrymi praktykami w projektowaniu stron internetowych, które wymaga dobrego zrozumienia CSS i jego właściwości. Ponadto, CSS pozwala na elastyczne dostosowywanie stylów, co jest istotne w kontekście responsywności i dostępności stron.

Pytanie 24

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

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

A. Jest to styl lokalny.

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

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

D. Zdefiniowano dwie klasy.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Gratulacje, dobrze odpowiedziałeś. W załączonym kodzie CSS zdefiniowano dwie klasy, a mianowicie 'niebieski' i 'czerwony'. Klasy te są przypisane do elementów TD, co oznacza, że komórki tabeli mogą mieć kolor niebieski lub czerwony w zależności od przypisanej klasy. Klasy CSS są jednym z podstawowych sposobów formatowania elementów na stronie internetowej, które pozwalają na stylizowanie grup elementów na podstawie wspólnego identyfikatora klasy. Zamiast formatować każdy element HTML osobno, możemy jednorazowo zdefiniować styl dla klasy, a następnie przypisać tę klasę do dowolnej liczby elementów. To jest zgodne z dobrymi praktykami programowania DRY (Don't Repeat Yourself), co zwiększa czytelność i utrzymanie kodu. W kontekście pytania, każda komórka tabeli przypisana do klasy 'niebieski' lub 'czerwony' będzie miała odpowiednio niebieski lub czerwony kolor.

Pytanie 25

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

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

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

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

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź to <meta name="keywords" content="psy, koty, gryzonie">, ponieważ jest to zgodne z aktualnymi standardami HTML i poprawną składnią. Element <meta> jest używany do dostarczania metadanych, które nie są wyświetlane bezpośrednio na stronie, ale mają kluczowe znaczenie dla wyszukiwarek internetowych i innych aplikacji. Atrybut 'name' definiuje typ metadanych, a 'content' zawiera konkretne informacje, w tym przypadku słowa kluczowe, które mają być używane przez wyszukiwarki do indeksowania strony. Przykład zastosowania tego elementu w kodzie HTML wyglądałby następująco: <head><meta name="keywords" content="psy, koty, gryzonie"></head>. Warto zauważyć, że chociaż atrybut 'keywords' nie jest już tak istotny jak kiedyś ze względu na zmiany w algorytmach wyszukiwarek, to jego poprawne zdefiniowanie wciąż pokazuje dbałość o standardy HTML. Dobrą praktyką jest aktualizowanie i dostosowywanie metadanych do aktualnych trendów SEO, co może zwiększyć widoczność strony w wynikach wyszukiwania.

Pytanie 26

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

C. C

D. B

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 , co zmienia styl na kursywę, a to nie odpowiada formatowi wizualnemu przedstawionemu w pytaniu. Użycie 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 27

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

A. <img>

B. <src>

C. <table>

D. <jpg>

Brak odpowiedzi na to pytanie.

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

W HTML-u, aby połączyć w poziomie dwie sąsiednie komórki w danym wierszu tabeli, należy wykorzystać atrybut

A. rowspan

B. cellspacing

C. colspan

D. cellpadding

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut colspan w języku HTML jest kluczowym narzędziem do scalania komórek w tabeli w poziomie. Umożliwia on połączenie dwóch lub więcej sąsiednich komórek w jednym wierszu, co pozwala na bardziej elastyczne i estetyczne układanie danych. Przykładowo, jeśli mamy tabelę z informacjami o produktach, a jeden z produktów ma długą nazwę, możemy użyć atrybutu colspan, aby ta nazwa zajmowała miejsce w dwóch lub więcej komórkach, co poprawia czytelność tabeli. Dobre praktyki w projektowaniu tabel wskazują, że należy unikać nadmiarowych komórek i skomplikowanych układów, gdyż obniża to przejrzystość danych. Zamiast tego, właściwe użycie atrybutów takich jak colspan pozwala na lepsze zorganizowanie informacji. Warto również pamiętać, że poprawne stosowanie atrybutu colspan powinno być zgodne z ogólnymi zasadami projektowania responsywnego, co oznacza, że tabela powinna dobrze się prezentować na różnych urządzeniach. Dodatkowo, atrybut colspan ma swoje zastosowanie także w kontekście dostępności, gdyż odpowiednie użycie tej funkcji pozwala na lepszą nawigację i zrozumienie struktury tabeli przez osoby korzystające z technologii asystujących.

Pytanie 29

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

A. 4

B. 6

C. 5

D. 7

Brak odpowiedzi na to pytanie.

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

Pytanie 30

Walidacja strony internetowej polega na

A. reklamowaniu strony

B. umieszczaniu treści w sieci

C. sprawdzeniu jej w celu usunięcia błędów

D. zestawie działań mających na celu zwiększenie liczby odwiedzin

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Proces walidacji strony internetowej polega na systematycznym sprawdzeniu jej zawartości oraz struktury w celu identyfikacji i eliminacji błędów, które mogą wpływać na jej funkcjonalność oraz użyteczność. Walidacja to kluczowy etap w cyklu życia strony, ponieważ zapewnia, że strona działa zgodnie z wymaganiami technicznymi i standardami branżowymi, takimi jak W3C. Przykłady zastosowania walidacji obejmują sprawdzanie poprawności kodu HTML, CSS oraz dostępności, co jest istotne dla zapewnienia pozytywnego doświadczenia użytkowników. Strony internetowe, które są walidowane, mają większe szanse na lepsze pozycjonowanie w wyszukiwarkach, co przekłada się na wyższą oglądalność. Regularna walidacja jest również zgodna z najlepszymi praktykami w zakresie utrzymania jakości i bezpieczeństwa, co w dłuższej perspektywie wspiera reputację marki i zaufanie użytkowników.

Pytanie 31

W języku HTML, aby uzyskać następujący efekt formatowania
pogrubiony pochylony lub w ^{górnym indeksie}
należy zapisać kod:

A. pogrubiony pochylony lub w górnym indeksie

B. pogrubiony pochylony lub w górnym indeksie

C. pogrubiony pochylony lub w górnym indeksie

D. pogrubiony pochylony lub w górnym indeksie

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź, w której użyłeś znaczników i w odpowiednich miejscach, jest całkiem dobra. Znak jest świetny do pogrubiania tekstu, co przydaje się, gdy chcesz podkreślić coś ważnego. Natomiast pozwala na pochylanie tekstu, co dodaje mu charakteru i może sugerować cytaty czy tytuły. Co ciekawe, znacznik stosujemy, gdy chcemy pokazać górny indeks, np. przy potęgach czy jednostkach miar. Przykład takiego użycia byłby taki: Waga w kilogramach wynosi 2 dla dwóch jednostek. Jak widać, stosowanie HTML w odpowiedni sposób pozwala robić czytelne i estetyczne prezentacje, co jest zgodne z dobrymi praktykami w web designie oraz standardami W3C. Warto też pamiętać, że dobrze dobrane znaczniki mają znaczenie nie tylko wizualne, ale także pomagają w indeksowaniu treści przez wyszukiwarki, co z kolei wpływa na SEO.

Pytanie 32

Jaką funkcję spełnia atrybut value w polu formularza XHTML?

<input type="text" name="name" value="value">

A. definiuje maksymalną długość pola

B. określa nazwę pola

C. określa domyślną wartość

D. czyni pole jedynie do odczytu

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Atrybut value w polu formularza XHTML określa domyślną wartość, jaka pojawi się w polu tekstowym po załadowaniu strony. Jest to przydatne, gdy chcemy zasugerować użytkownikowi domyślne dane lub ułatwić wprowadzanie informacji. Przykładem może być formularz logowania, gdzie atrybut value jest używany do wczytywania zapisanego wcześniej adresu e-mail użytkownika. W formularzach XHTML stosuje się ten atrybut zgodnie z dobrymi praktykami, aby poprawić doświadczenie użytkownika i ułatwić interakcję z witryną. Warto zauważyć, że w przypadku innych typów pól formularzy, na przykład checkbox lub radio, atrybut value określa wartość, która zostanie przesłana, gdy dane pole zostanie zaznaczone. W kontekście dobrych praktyk należy także pamiętać o zabezpieczeniach formularzy, takich jak walidacja danych po stronie serwera, aby zapobiec potencjalnym lukom bezpieczeństwa wynikającym z nieoczekiwanych danych wejściowych. Stosowanie atrybutu value w sposób przemyślany pozwala również na lepszą integrację formularzy z mechanizmami autouzupełniania przeglądarek, co jest korzystne dla użytkowników

Pytanie 33

W dokumencie XHTML znajduje się fragment kodu, w którym występuje błąd walidacyjny. Co jest przyczyną tego błędu?

A. Nie ma nagłówka szóstego poziomu

B. Znacznik musi być zamknięty

C. Znaczniki powinny być pisane dużymi literami

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

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W języku XHTML, wszystkie znaczniki muszą być dobrze sformułowane, co oznacza, że każdy element pusty, taki jak znacznik linijki , musi być zamknięty za pomocą końcowego ukośnika, zapisanego jako . XHTML to język oparty na XML, gdzie składnia jest bardziej rygorystyczna w porównaniu do HTML. Dzięki temu poprawne zamykanie znaczników jest niezbędne dla poprawnej walidacji dokumentu. Przykładowo, jeśli w dokumencie XHTML chcemy wstawić nową linię, powinniśmy zapisać zamiast . Inne puste elementy, takie jak <img> czy <input>, również muszą być zamykane w ten sposób. Zastosowanie tego standardu zapewnia zgodność z przeglądarkami i przyszłą kompatybilność z nowymi technologiami. W praktyce, poprawne stosowanie składni zapewnia, że dokument będzie poprawnie interpretowany zarówno przez przeglądarki, jak i przez narzędzia do przetwarzania danych XML. Zrozumienie i stosowanie się do tych zasad jest kluczowe dla każdego, kto pracuje z technologiami sieciowymi, ponieważ zapewnia to, że dokumenty będą poprawnie wyświetlane oraz łatwe do przetwarzania.

Pytanie 34

Jakie skutki przyniesie zastosowanie przedstawionego formatowania CSS dla nagłówka trzeciego stopnia?

<style> h3 { background-color: grey; } </style> ... <h3 style="background-color: orange;"> Rozdział 1.2.2. </h3>

A. tło będzie pomarańczowe

B. tło będzie szare

C. kolor tekstu będzie pomarańczowy

D. kolor tekstu będzie szary

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
W tym przykładzie pokazano dwa różne sposoby stylizacji za pomocą CSS: styl wbudowany i styl zewnętrzny. Styl wbudowany ma wyższy priorytet, bo jest przypisany bezpośrednio do elementu HTML, a to oznacza, że w nagłówku trzeciego stopnia kolor tła będzie pomarańczowy. To ma sens, bo czasem musimy przeskoczyć ogólne reguły stylizacji, żeby wprowadzić jakieś szczególne zmiany. Używanie stylów wbudowanych może być jednak ryzykowne, bo jak się ich nagromadzi, to ciężko się potem w tym połapać. Dlatego lepiej korzystać z zewnętrznych stylów – są bardziej uporządkowane i pozwalają na łatwe powtarzanie kodu CSS. Ważne jest też, żeby nie łączyć HTML z CSS w sposób, który wprowadza zamęt, bo to ułatwia życie i sprawia, że kod jest bardziej zrozumiały. Wiedza na temat priorytetów w CSS jest kluczowa dla każdego, kto chce dobrze projektować strony i mieć wszystko ładnie poukładane.

Pytanie 35

W języku JavaScript należy uzyskać dostęp do elementu w pierwszym akapicie podanego kodu HTML. Jak można to zrobić za pomocą funkcji

<p>pierwszy paragraf</p>
<p>drugi paragraf</p>
<p>trzeci paragraf</p>
...

A. getElementById('p1');

B. getElementByTagName('p')[0];

C. getElementByClassName('p.1')[0];

D. getElement('p');

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Metoda getElementsByTagName('p')[0] jest prawidłowym sposobem odwołania się do pierwszego elementu w dokumencie HTML. Funkcja getElementsByTagName zwraca kolekcję wszystkich elementów o określonej nazwie tagu. W przypadku użycia tagu 'p', funkcja zwraca tablicę wszystkich paragrafów. Aby uzyskać dostęp do pierwszego paragrafu, korzystamy z indeksu [0], co jest zgodne z konwencją numerowania od zera w językach programowania. Praktyczne zastosowanie tej metody obejmuje manipulację treścią lub stylami pierwszego paragrafu, na przykład zmiana jego tekstu za pomocą innerHTML lub dodanie klasy CSS w celu zmiany jego wyglądu. Stosowanie getElementsByTagName jest zgodne z powszechnymi standardami i dobrymi praktykami w pracy z DOM (Document Object Model) w JavaScript. Ważne jest zrozumienie tego mechanizmu, aby efektywnie operować na elementach HTML oraz tworzyć dynamiczne i interaktywne strony internetowe. Warto również pamiętać, że metoda ta zwraca dynamiczną kolekcję, co oznacza, że zmiany w DOM automatycznie wpływają na zawartość zwróconej kolekcji.

Pytanie 36

Aby film wyglądał płynnie, liczba klatek (które nie nakładają się na siebie) na sekundę powinna wynosić przynajmniej w przedziale

A. 16-19 fps

B. 24-30 fps

C. 31-36 fps

D. 20-23 fps

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Odpowiedź 24-30 fps jest poprawna, ponieważ standardowy zakres klatek na sekundę dla filmów wynosi właśnie 24-30 fps. W praktyce, 24 fps jest uznawane za minimum dla filmów kinowych, co pozwala uzyskać wrażenie ruchu, które ludzie uznają za płynne. Przykładowo, filmy kręcone w tej klatkażu, takie jak klasyczne produkcje Hollywood, często korzystają z techniki zwanej 'motion blur', która dodatkowo poprawia wrażenie płynności. W przypadku telewizji, większa liczba klatek może być stosowana, co pozwala na lepszą jakość obrazu podczas szybkich ruchów, jednak 30 fps to standard dla wielu programów telewizyjnych. Ważne jest również zrozumienie, że zbyt niska liczba klatek, jak na przykład 16-19 fps, może prowadzić do efektu stroboskopowego, co jest nieprzyjemne dla widza. Normy branżowe, takie jak SMPTE (Society of Motion Picture and Television Engineers), potwierdzają, że liczba klatek między 24 a 30 fps jest odpowiednia do uzyskania zamierzonego efektu wizualnego w filmie.

Pytanie 37

W przedstawionej regule CSS ```h1 {color : blue}``` h1 reprezentuje

A. deklarację

B. selektor

C. klasę

D. wartość

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Selekcja elementów w CSS jest naprawdę ważna, jeśli chodzi o tworzenie stron www. W regule CSS `h1 {color: blue}` mamy do czynienia z selektorem `h1`, który mówi nam, jak stylizować nagłówki pierwszego poziomu. Dzięki selekcji można fajnie dopasować wygląd strony do swoich potrzeb. No i w tym przypadku każdy nagłówek `h1` na stronie będzie miał niebieski kolor, co jest dość prostą i czytelną metodą. warto pamiętać, że CSS oferuje różne typy selektorów, jak klasy czy identyfikatory, a nie tylko tagi. W dużych projektach lepiej używać klasowych czy identyfikatorowych selektorów, bo daje to większą kontrolę nad stylizacją i łatwiejsze zarządzanie kodem.

Pytanie 38

Proces zmierzający do osiągnięcia przez stronę internetową jak najwyższych pozycji w rankingach wyszukiwarek internetowych nosi nazwę

A. pozycjonowania.

B. responsywności.

C. walidacji HTML.

D. optymalizacji wydajności.

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Prawidłowa odpowiedź to „pozycjonowanie”, bo właśnie tak w branży nazywa się proces działań mających na celu osiąganie jak najwyższych pozycji strony w wynikach wyszukiwarek (głównie Google). W praktyce pozycjonowanie obejmuje zarówno SEO on‑page, jak i SEO off‑page. On‑page to m.in. poprawna struktura HTML, nagłówki H1–H3, sensowne tytuły stron (tag title), opisy meta description, przyjazne adresy URL, szybkość ładowania, mobile‑friendly design. Off‑page to głównie link building, czyli zdobywanie wartościowych odnośników z innych serwisów, obecność w katalogach branżowych, artykuły sponsorowane, a także ogólna reputacja domeny. Z mojego doświadczenia pozycjonowanie to nie jednorazowa akcja, tylko stały proces optymalizacji, analizy słów kluczowych, śledzenia statystyk w Google Search Console i Google Analytics, dopasowywania treści do intencji użytkownika. Dobre praktyki mówią, żeby unikać technik black‑hat SEO (np. kupowanie tysięcy spamowych linków, ukryty tekst, keyword stuffing), bo algorytmy wyszukiwarek szybko to wychwytują i mogą nałożyć filtr lub karę. Moim zdaniem kluczowe w pozycjonowaniu jest połączenie technicznie poprawnej strony (wydajność, responsywność, poprawny HTML) z wartościową treścią i rozsądną strategią linków. To właśnie cały ten zestaw działań nazywamy pozycjonowaniem strony w wyszukiwarkach.

Pytanie 39

Aby stworzyć układ strony z trzema kolumnami obok siebie, można wykorzystać styl CSS

A. D

B. C

C. A

D. B

Brak odpowiedzi na to pytanie.

Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź A wykorzystuje właściwość float CSS ustawioną na left oraz szerokość width na 33 procent co pozwala na umieszczenie trzech kolumn obok siebie na stronie internetowej Float jest często używany do tworzenia układów wielokolumnowych gdyż pozwala na pływające rozmieszczenie elementów blokowych wewnątrz kontenera Dzięki ustawieniu szerokości na 33 procent zapewniamy że trzy kolumny będą mogły się zmieścić obok siebie w jednym rzędzie w ramach dostępnej szerokości kontenera Jest to efektywne podejście w przypadku responsywnych projektów gdzie nie zawsze znamy dokładną szerokość dostępnej przestrzeni Floating jest klasycznym podejściem w CSS i chociaż nowe technologie jak flexbox czy grid oferują więcej możliwości jest wciąż powszechnie stosowany w wielu projektach szczególnie gdy chodzi o proste układy Dodatkowo float left jest zgodny z wielu przeglądarkami co zapewnia większą uniwersalność kodu Przy projektowaniu stron zawsze warto pamiętać o dodaniu clearfix lub overflow hidden do rodzica elementów pływających aby uniknąć problemów z zawijaniem się kontenera wokół elementów pływających

Pytanie 40

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr { background-color: Pink; }

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

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

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

Brak odpowiedzi na to pytanie.

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

Rozpocznij nowy egzamin

Powrót do strony głównej