Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik informatyk
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 22 czerwca 2026 09:08
  • Data zakończenia: 22 czerwca 2026 09:23

Egzamin niezdany

Wynik: 19/40 punktów (47,5%)

Wymagane minimum: 20 punktów (50%)

Nowe
Analiza przebiegu egzaminu- sprawdź jak rozwiązywałeś pytania
Udostępnij swój wynik
Szczegółowe wyniki:
Pytanie 1

Jaką wartość w formacie szesnastkowym ma kolor rgb(255, 16, 8)?

A. #FF0F80
B. #800F80
C. #FF1008
D. #801008
Składowe przelicza się osobno na zapis szesnastkowy: 255 = FF, 16 = 10, 8 = 08, więc rgb(255, 16, 8) to #FF1008. Wartość 255 (maksimum składowej) zawsze daje FF. Zapamiętaj: FF = 255, 00 = 0 - to dwa skrajne punkty każdej składowej.

Pytanie 2

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

A. tr:hover { background-color: Pink; }
B. tr { background-color: Pink; }
C. td, th { background-color: Pink; }
D. tr:active { 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 3

Deklaracja background-attachment: scroll sprawia, że:

A. tło będzie nieruchome, a treść będzie się przewijać
B. grafika tła będzie powtarzana (kafelki)
C. tło będzie przewijane razem z zawartością strony
D. grafika tła pojawi się w prawym górnym rogu
Pozostałe efekty dają inne właściwości tła. Powtarzanie tła w kafelki ustawia background-repeat, a nie background-attachment. Nieruchome tło, po którym przewija się treść, uzyskuje się wartością fixed - czyli odwrotnością scroll. Położenie obrazu tła (np. w rogu) określa background-position. Wartość scroll odpowiada wyłącznie za to, że tło przewija się wraz z zawartością strony, dlatego ta odpowiedź jest poprawna.

Pytanie 4

Na ilustracji przedstawiono ustawienia programu służącego do montażu filmów. Nowy projekt ma ustawienia

Ilustracja do pytania
A. 25 klatek na cały film.
B. 48 minut czasu trwania filmu.
C. wysokość 1920 px i szerokość 1080 px.
D. 25 klatek na każdą sekundę filmu.
Na zrzucie ekranu z ustawieniami nowego projektu w programie do montażu wideo widać kilka różnych parametrów: rozdzielczość (Width, Height), liczbę klatek na sekundę (Frame Rate), czas trwania szablonu i inne. Bardzo łatwo jest pomylić te pojęcia, szczególnie gdy ktoś dopiero zaczyna przygodę z montażem.
Najczęstszy błąd polega na myleniu liczby klatek na sekundę z całkowitą liczbą klatek w filmie. Informacja „25 fps” nie oznacza „25 klatek na cały film”, tylko „25 klatek na każdą sekundę filmu”. Gdyby film miał np. 5 minut, to przy 25 fps będzie miał 5 × 60 × 25 = 7500 klatek. Widać więc, że całkowita liczba klatek jest dużo większa i zależy bezpośrednio od czasu trwania.
Kolejna pułapka to interpretowanie pojedynczej liczby jako długości filmu. Samo „25” w polu Frame Rate nie ma nic wspólnego z minutami czy sekundami trwania projektu. Czas trwania określa się osobno, zwykle w formacie godzin: minut: sekund: klatek (HH:MM:SS:FF). Na ilustracji widać pole Duration, które odpowiada właśnie za długość, ale nie jest ono równe wartości 25.
Trzecie nieporozumienie dotyczy rozdzielczości. W ustawieniach jest wyraźnie napisane Width: 1920 pixels, Height: 1080 pixels. To oznacza szerokość 1920 px i wysokość 1080 px, a nie odwrotnie. W praktyce jest to klasyczne Full HD w proporcjach 16:9. Odwrócenie tych wartości sugerowałoby projekt w orientacji pionowej (1080×1920), typowy np. dla wideo na smartfony, ale tutaj tak nie jest.
Z mojego doświadczenia wynika, że warto na spokojnie odróżniać trzy rzeczy: rozdzielczość (ile pikseli w poziomie i pionie), klatkaż (ile klatek na sekundę – fps) oraz czas trwania (ile czasu zajmuje cały film). Pomylenie któregokolwiek z tych parametrów może skutkować np. nieprawidłowym formatem eksportu, złą jakością odtwarzania albo dziwnie wyglądającym ruchem. Dlatego dobrze jest, jeszcze przed montażem, świadomie przeczytać i zrozumieć wszystkie ustawienia w oknie „New Project Settings”.

Pytanie 5

Element <meta charset="utf-8"> definiuje metadane odnoszące się do strony internetowej dotyczące

A. opisu witryny
B. słów kluczowych
C. języka używanego na stronie
D. kodowania znaków
W kontekście elementu <meta charset="utf-8">, inne odpowiedzi dotyczące opisu strony, języka strony oraz słów kluczowych są mylące i nieprecyzyjne. Opis strony, zazwyczaj reprezentowany przez element <meta name="description">, jest używany do dostarczenia zwięzłego streszczenia zawartości danej strony, co ma wpływ na SEO i sposób wyświetlania w wynikach wyszukiwania. Nie jest to jednak związane z kodowaniem, a raczej z informacjami o treści i celu witryny. Kolejnym aspektem jest język strony, który można określić za pomocą elementu <html lang="pl">, co informuje przeglądarki oraz wyszukiwarki o głównym języku treści. To również nie jest związane z kodowaniem znaków, a raczej z semantyką strony i dostępnością. Ostatni element, słowa kluczowe, tradycyjnie ujęte w <meta name="keywords">, miały na celu wskazanie istotnych fraz związanych z treścią, jednak obecnie ich znaczenie spadło w kontekście SEO. W żadnym z tych przypadków nie ma mowy o kodowaniu, które jest fundamentalnym procesem konwertującym znaki na reprezentacje binarne. Dlatego mylenie tych pojęć prowadzi do niepoprawnego zrozumienia ich roli w strukturze dokumentu HTML.

Pytanie 6

Który zapis w dokumencie HTML połączy stronę z zewnętrznym arkuszem stylów style.css?

A.
<link rel="stylesheet' src="/style.css">
B.
<link rel="stylesheet" href="/style.css">
C.
<a href="/style.css">
D.
<a src="/style.css">
Pozostałe zapisy są błędne. <link> używa atrybutu href, a nie src (do tego w jednym wariancie jest niedomknięty cudzysłów). <a> tworzy hiperłącze, a nie dołącza arkusza stylów. Arkusz podłącza <link rel="stylesheet" href="/style.css">.

Pytanie 7

Który symbol oznacza w CSS jednostkę miary wyrażoną w punktach edytorskich?

A.
em
B.
px
C.
in
D.
pt
Pozostałe jednostki to co innego. px to piksele, in to cale, a em to jednostka względna (zależna od rozmiaru czcionki). Punkt edytorski to pt.

Pytanie 8

W CSS, aby ustalić wewnętrzny górny margines, czyli odstęp pomiędzy elementem a jego obramowaniem, należy zastosować komendę

A. outline-top
B. border-top
C. local-top
D. padding-top
Odpowiedź 'padding-top' jest prawidłowa, ponieważ w CSS termin 'padding' odnosi się do wewnętrznego odstępu, który tworzy przestrzeń pomiędzy zawartością elementu a jego granicą (border). 'padding-top' specyfikuje górny odstęp wewnętrzny, co jest istotne w kontekście estetyki i układu strony. Definiując 'padding-top', możemy dostosować wygląd elementów, aby lepiej pasowały do reszty projektu i poprawiły czytelność. Na przykład, jeśli mamy przycisk z tekstem, użycie 'padding-top: 10px;' zapewni, że tekst nie będzie przyklejony do górnego brzegu przycisku, co zwiększy jego estetykę oraz użyteczność. W praktyce dobrą praktyką jest również stosowanie 'padding' w połączeniu z 'margin', aby osiągnąć odpowiednią separację między różnymi elementami w układzie. Przestrzeganie standardów CSS pomaga w tworzeniu responsywnych i dostosowanych układów, które dobrze działają na różnych urządzeniach.

Pytanie 9

W CSS, co spowoduje poniższy kod z plikiem rysunek.png?

p {background-image: url("rysunek.png");}
A. tłem całej witryny
B. pokazany obok każdego akapitu
C. tłem dla każdego akapitu
D. widoczny, jeśli zastosowany zostanie znacznik img w kodzie
Wybrana odpowiedź jest poprawna ponieważ w arkuszach stylów CSS zastosowanie selektora elementu p z właściwością background-image powoduje że obraz rysunek.png zostanie ustawiony jako tło dla każdego elementu paragrafu na stronie. Jest to przydatna technika gdy chcemy nadać spójny wygląd wszystkim paragrafom w dokumencie. Tło to może być używane do celów estetycznych lub jako część identyfikacji wizualnej strony. Warto pamiętać że w CSS można dodatkowo kontrolować sposób wyświetlania obrazka tła za pomocą właściwości takich jak background-repeat background-size i background-position co pozwala na precyzyjne dostosowanie wyświetlania. Dobre praktyki zalecają aby obrazy tła były odpowiednio zoptymalizowane pod kątem rozmiaru aby nie wpływały negatywnie na szybkość ładowania strony. W praktyce stosowanie obrazów jako tła w paragrafach może wspierać wizualne narracje oraz zwiększać zaangażowanie użytkowników szczególnie gdy są stosowane w przemyślany sposób w kontekście projektowania doświadczeń użytkownika UX.

Pytanie 10

Jaki jest najłatwiejszy i najmniej czasochłonny sposób przetestowania strony w różnych przeglądarkach i ich wersjach?

A. użycie walidatora kodu HTML
B. test tylko w jednej przeglądarce, zakładając zgodność pozostałych
C. użycie emulatora przeglądarek (np. usługi typu Browser Sandbox)
D. instalacja różnych przeglądarek na kilku komputerach i testowanie
Pozostałe metody są wolniejsze lub niepełne. Instalowanie wielu przeglądarek na kilku komputerach jest pracochłonne. Walidator HTML sprawdza poprawność kodu, ale nie pokazuje wyglądu w różnych przeglądarkach. Test w jednej przeglądarce „na wiarę” nie wykrywa różnic. Najwygodniejszy jest emulator przeglądarek.

Pytanie 11

Gdzie należy umieścić znacznik metajęzyka HTML?

A. w sekcji nagłówkowej witryny internetowej
B. pomiędzy znacznikami <body> ... </body>
C. pomiędzy znacznikami paragrafu
D. w dolnej części witryny internetowej
Umieszczanie znaczników metajęzyka HTML w niewłaściwych miejscach, takich jak stopka witryny czy sekcja <body>, może prowadzić do problemów z interpretacją dokumentu przez przeglądarki oraz wyszukiwarki. Sekcja <body> jest przeznaczona wyłącznie dla treści widocznej dla użytkowników, co oznacza, że wszelkie informacje dotyczące indeksowania czy metadanych powinny być w nagłówku. Umieszczanie znaczników metadanych w stopce nie tylko narusza konwencje HTML, ale także może sprawić, że nie będą one w ogóle przetwarzane przez wyszukiwarki, co ogranicza możliwości SEO witryny. Kolejnym błędem jest umieszczanie znaczników metadanych pomiędzy znacznikami paragrafu, co jest syntaktycznie niepoprawne oraz semantycznie nieuzasadnione. Takie działania mogą prowadzić do konfuzji zarówno dla programistów, jak i narzędzi analizujących strony internetowe. Właściwe umiejscowienie znaczników <meta> w sekcji nagłówkowej jest nie tylko standardem, ale też kluczowym elementem strategii tworzenia stron internetowych, które są przyjazne dla użytkowników i wyszukiwarek. Warto również zauważyć, że nieprzestrzeganie tych zasad może mieć negatywne skutki dla wydajności strony oraz jej pozycji w wynikach wyszukiwania.

Pytanie 12

Wskaż, który zapis należy zastosować w celu wyświetlenia grafiki obrazek.png na stronie WWW w pliku plik.html.  

Ilustracja do pytania
A. <img src="../../katalog_2/katalog_B/obrazek.png">
B. <img src="obrazek.png">
C. <img src="/../katalog_1/katalog_B/obrazek.png">
D. <img src="/../katalog_2/katalog_B/obrazek.png">
Problem z niepoprawnymi odpowiedziami wynika z niezrozumienia, skąd dokładnie liczona jest ścieżka do pliku oraz jak działa nawigacja po katalogach w adresach względnych. Przeglądarka zawsze interpretuje wartość atrybutu src w <img> zaczynając od lokalizacji aktualnego dokumentu HTML, czyli w tym przypadku od katalogu katalog_1/katalog_A. Jeżeli wpiszemy po prostu nazwę pliku, bez żadnych katalogów, to przeglądarka szuka go w tym samym folderze co plik HTML. Zapis <img src="obrazek.png"> sugeruje więc, że obrazek.png leży obok plik.html w katalogu_A. Ponieważ w przedstawionej strukturze plik graficzny znajduje się zupełnie gdzie indziej, taka ścieżka po prostu nie może zadziałać.
Kolejny typ błędu to nieprawidłowe użycie sekwencji /../ na początku ścieżki. W kontekście URL-a ukośnik na początku oznacza ścieżkę absolutną liczoną od katalogu głównego serwera (tzw. root). Dodawanie zaraz po nim .. jest w praktyce bez sensu, bo nie możemy cofnąć się powyżej katalogu głównego. Takie konstrukcje typu "/../katalog_1/..." czy "/../katalog_2/..." nie odzwierciedlają realnej struktury katalogów widzianej przez serwer WWW. To częsty błąd: mieszanie myślenia systemu plików w eksploratorze z zasadami adresacji URL. W systemie operacyjnym czasem zobaczymy .. na początku ścieżki względnej, ale w URL po wiodącym slashu ścieżka jest już traktowana jako absolutna.
Prawidłowe podejście polega na świadomym liczeniu poziomów: pojedyncze .. cofa o jeden katalog w górę, podwójne ../../ o dwa, i dopiero potem dokładamy kolejne katalogi prowadzące do docelowego pliku. Warto też pamiętać, że w projektach webowych lepiej unikać "dziwnych" konstrukcji ze zbędnym /../, bo to utrudnia debugowanie i rodzi problemy przy przenoszeniu strony na inny serwer. Typowym błędem myślowym jest też założenie, że jak coś wygląda logicznie w drzewku folderów na ekranie, to tak samo zadziała w URL, bez dokładnego prześledzenia, od jakiego katalogu liczymy ścieżkę. Dlatego dobrą praktyką jest narysowanie sobie tej struktury i ręczne przejście krok po kroku: tu jest plik.html, tu jest obrazek.png, ile razy muszę się cofnąć .. i gdzie potem wejść, żeby dojść dokładnie do tego pliku.

Pytanie 13

Poniżej przedstawiono fragment kodu języka HTML. Jest on definicją listy:

<ol>
  <li>punkt 1</li>    <li>punkt 2</li>
  <ul>
    <li>podpunkt1</li>
    <ul>    <li>podpunkt2</li>  <li>podpunkt3</li>  </ul>
  </ul>
  <li>punkt3</li>
</ol>

A.

  1. punkt 1
  2. punkt 2
    • podpunkt1
    • podpunkt2
    • podpunkt3
  3. punkt3

B.

  1. punkt 1
  2. punkt 2
  3. punkt3
    • podpunkt1
    • podpunkt2
    • podpunkt3

C.

  1. punkt 1
  2. punkt 2
    • podpunkt1
      • podpunkt2
      • podpunkt3
  3. punkt3

D.

  • punkt 1
  • punkt 2
    1. podpunkt1
      • podpunkt2
      • podpunkt3
  • punkt3
A. D.
B. C.
C. B.
D. A.
Gratulacje, poprawnie zinterpretowałeś fragment kodu HTML przedstawiający definicję listy. W tym kodzie widzimy listę numerowaną (<ol>), która zawiera trzy elementy listy (<li>). Szczególnością prezentowanej struktury jest fakt, że drugi element listy zawiera zagnieżdżoną listę nieuporządkowaną (<ul>) z trzema podpunktami. Zgodność odpowiedzi C z przedstawionym kodem wynika z faktu, że punkt 2 prezentuje podpunkty oznaczone kropkami, co jest charakterystyczne dla listy nieuporządkowanej. Tego typu struktura jest często stosowana na stronach internetowych do prezentacji hierarchii informacji, na przykład menu nawigacyjnego czy spisu treści. Pamiętaj, że umiejętność czytania i zrozumienia kodu HTML jest kluczowa dla każdego, kto planuje pracować z technologiami webowymi i to pytanie to doskonały przykład na to, jak te umiejętności mogą być sprawdzane.

Pytanie 14

W HTML zdefiniowano hiperłącze zawierające znak #. Co się wydarzy po kliknięciu na ten odsyłacz?

<a href="#dane"></a>
A. Strona przewinie się do elementu o id równym dane
B. Zostanie wskazany względny adres URL o nazwie dane
C. Uruchomi się skrypt o nazwie dane
D. Otworzy się nowa karta przeglądarki o nazwie dane
W HTML znacznik <a> to taki element, który tworzy hiperłącza. Dzięki nim możesz przeskakiwać po stronie lub między różnymi stronami. Atrybut href wskazuje, dokąd prowadzi to łącze. Jak widzisz, gdy href zaczyna się od #, to znaczy, że przeniesie Cię do konkretnego miejsca na tej samej stronie, które jest oznaczone atrybutem id. Czyli, jeśli masz href="#dane", to strona przewinie się do elementu z id="dane". To bardzo przydatna rzecz, szczególnie na długich stronach, bo zamiast przewijać wszystko, możesz od razu trafić do odpowiedniej sekcji. To zgodne z tymi sztywnymi zasadami W3C, które mówią o tym, że strony powinny być łatwe w obsłudze. Powinieneś też pamiętać, żeby zawsze sprawdzać, czy id, do którego się odnosisz, istnieje. Dzięki temu unikniesz problemów z nawigacją.

Pytanie 15

Elementarna animacja może być zapisana w formacie

A. BMP
B. PSD
C. GIF
D. TIFF
Format GIF (Graphics Interchange Format) jest powszechnie stosowany do tworzenia prostych animacji ze względu na swoją zdolność do kompresji obrazów i obsługi przez większość przeglądarek internetowych. GIF pozwala na zapisanie sekwencji obrazów w jednej pliku, co umożliwia ich wyświetlanie jako animacji. Standard GIF obsługuje maksymalnie 256 kolorów z palety, co czyni go idealnym do prostych grafik, takich jak ikony czy animacje internetowe. Dzięki metodzie kompresji Lempel-Ziv-Welch (LZW) możliwe jest zmniejszenie rozmiaru pliku bez utraty jakości, co jest kluczowe w kontekście transferu danych przez sieć. Przykłady zastosowania formatu GIF obejmują animowane banery reklamowe, emotikony oraz krótkie klipy wideo w formie GIF, które stały się popularne na platformach społecznościowych. Ponadto GIF wspiera przezroczystość i animacje w cyklu, co podnosi jego użyteczność w wielu aplikacjach multimedialnych. Z tego powodu GIF jest formatem, który oferuje zarówno funkcjonalność, jak i kompatybilność, co czyni go najlepszym wyborem dla prostych animacji.

Pytanie 16

Który element CMS odpowiada bezpośrednio za WYGLĄD strony?

A. kokpit (WordPress) / panel administracyjny (Joomla!)
B. wtyczka (WordPress) / dodatek (Joomla!)
C. widżet (WordPress) / moduł (Joomla!)
D. motyw (WordPress) / szablon (Joomla!)
Za WYGLĄD strony w CMS odpowiada motyw (w WordPressie) lub szablon (w Joomli!) - definiuje układ, kolory i style, oddzielnie od treści. Dlatego wyglądem zarządza motyw/szablon.

Pytanie 17

Znacznik <s> w HTML skutkuje

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

Pytanie 18

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

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

Pytanie 19

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

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

Pytanie 20

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

A. W dokumencie wszystkie tagi są zapisane wielkimi literami
B. Dokument został zapisany w wersji HTML 5
C. W dokumencie wymagane jest zamknięcie każdego taga, nawet samozamykającego
D. Dokument został zapisany w wersji HTML 4
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 21

Metainformacja "Description" zawarta w pliku HTML powinna zawierać


<head>
   <meta name="Description" content="...">
</head>
A. opis zawartości strony
B. listę kluczowych fraz używanych przez wyszukiwarki internetowe
C. nazwę aplikacji, w której stworzono stronę
D. informację o autorze strony
Wybór niepoprawnych odpowiedzi wskazuje na nieporozumienie dotyczące funkcji metainformacji 'Description'. Informacja o autorze strony nie jest ujęta w tej sekcji; zamiast tego, powinna być umieszczona w metatagach takich jak 'author', które podają dane o osobie lub organizacji odpowiedzialnej za stronę. Wyszukiwarki nie korzystają z tej informacji przy indeksowaniu treści, co czyni ją nieistotną dla opisu strony. Również wykazy kluczowe, takie jak metatagi 'keywords', stały się przestarzałe w kontekście SEO; dzisiejsze algorytmy wyszukiwarek skupiają się na głębszym zrozumieniu treści, a nie na prostym wskaźniku słów kluczowych. Ostatnią kwestią jest nazwa programu, przy użyciu którego strona została stworzona. Tego rodzaju informacja jest zbędna i nie wpływa na zawartość strony ani jej ocenę w wyszukiwarkach. W praktyce, metainformacja 'Description' powinna jasno przedstawiać, co użytkownik znajdzie na stronie, a nie zawierać danych o autorze, słowach kluczowych czy narzędziach użytych do jej stworzenia.

Pytanie 22

W przedstawionej regule CSS

h1 {color : blue}
h1 reprezentuje
A. wartość
B. selektor
C. klasę
D. deklarację
Wybierając błędną odpowiedź odnośnie reguły CSS `h1 {color: blue}`, można zauważyć, że czasami nie rozumiemy dobrze podstawowych terminów w CSS. Deklaracja to nie tylko selektor, ale wszystkie właściwości i wartości, które zmieniają dany element. Przykład `blue` to tylko kolor, nie jest selektorem. Klasa to inny rodzaj selektora, który zaczyna się od kropki i pozwala stylizować wiele elementów naraz, a nie tylko pojedyncze tagi HTML. Problemem często jest mylenie tych pojęć i nieznajomość ich definicji w CSS. Musisz wiedzieć, że selektory wskazują, do jakich elementów stosujemy style, a inne rzeczy, jak klasy czy różne wartości, mają inne zadania. Lepiej zrozumieć te różnice, bo to podstawa, żeby efektywnie pracować z CSS i tworzyć strony www. Fajnie byłoby także poczytać dokumentację CSS, żeby lepiej poznać różne selektory i ich zastosowanie w stylizacji.

Pytanie 23

Aby umieścić plik wideo na stronie internetowej z widocznymi przyciskami sterującymi oraz zapętlonym odtwarzaniem, należy w znaczniku <video> użyć atrybutów

A. controls i autoplay
B. loop i muted
C. autoplay i preload
D. controls i loop
Odpowiedzi, które wybrałeś, opierają się na nie do końca trafnych założeniach co do funkcji atrybutów w znaczniku <video>. Wybór "loop" i "muted" to nietrafny strzał, bo choć "loop" jest potrzebny do zapętlenia, to atrybut "muted" w ogóle nie wpływa na dostępność przycisków sterujących. Wyciszenie wideo jest fajne, zwłaszcza przy automatycznym odtwarzaniu, ale nie jest konieczne, żeby przyciski były widoczne. Jeśli chodzi o "autoplay" i "preload", to sprawa wygląda podobnie - "autoplay" uruchamia wideo samo, ale bez przycisków to raczej nie jest komfortowe dla użytkownika. A "preload" odnosi się do wstępnego ładowania, co może pomóc w wydajności, ale znowu, nie ma to wpływu na to, jak możemy z tym wideo interagować. Te błędne odpowiedzi pokazują typowe nieporozumienia co do funkcji atrybutów, które są naprawdę ważne do stworzenia dobrego doświadczenia na stronach. Ludzie czasami myślą, że inne atrybuty mogą zastąpić konieczność interakcji z materiałem wideo, co może prowadzić do frustracji i złego odbioru treści.

Pytanie 24

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

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

Pytanie 25

Fragment kodu w języku HTML zawarty w ramce ilustruje zestawienie

Ilustracja do pytania
A. wypunktowaną.
B. odnośników.
C. numerowaną.
D. skrótów.
Kod HTML zawierający znaczniki <ol> oraz <li> tworzy listę numerowaną ponieważ <ol> oznacza ordered list czyli listę uporządkowaną co skutkuje automatycznym numerowaniem każdego elementu w przeglądarkach internetowych. Znaczniki <li> reprezentują pojedyncze elementy listy zapewniając organizację danych w czytelnej formie. Taki sposób przedstawiania informacji jest powszechnie stosowany w tworzeniu dokumentów HTML i stron internetowych gdzie hierarchia i kolejność elementów ma kluczowe znaczenie. Za pomocą CSS można dodatkowo dostosować styl numerowania oraz wizualne aspekty listy co pozwala na większą elastyczność w projektowaniu interfejsu użytkownika. Standardy internetowe takie jak te rekomendowane przez W3C zachęcają do stosowania semantycznych znaczników co poprawia dostępność i SEO strony. Ponadto listy numerowane są użyteczne w sytuacjach gdy wymagana jest jasna kolejność wykonywania zadań lub prezentacja kroków w procesie co czyni je idealnym narzędziem zarówno w dokumentacji technicznej jak i w interaktywnych przewodnikach online.

Pytanie 26

Jaką rozdzielczość należy przyjąć, aby uzyskać proporcje obrazu 16:9, zakładając, że piksel ma formę kwadratu?

A. 800 na 480 pikseli
B. 1366 na 768 pikseli
C. 320 na 240 pikseli
D. 2560 na 2048 pikseli
Pozostałe opcje rozdzielczości nie spełniają wymogów proporcji 16:9. Rozdzielczość 320 na 240 pikseli, choć popularna w starszych urządzeniach, ma proporcje 4:3, co jest niewłaściwe dla szerokokątnych zastosowań i nie oddaje pełni nowoczesnych treści wizualnych. W przypadku rozdzielczości 800 na 480 pikseli, proporcje wynoszą około 15:9, co również nie jest zgodne z wymaganym standardem 16:9. Ta rozdzielczość może być używana w niektórych telefonach komórkowych, ale nie nadaje się do oglądania współczesnych filmów i programów telewizyjnych, które są produkowane w formacie 16:9. Natomiast rozdzielczość 2560 na 2048 pikseli, mimo że oferuje wysoką jakość obrazu, ma proporcje 5:4, co jest zbliżone do formatu 4:3 i nie odpowiada wymaganiom współczesnych treści wizualnych. Proporcje te są niestandardowe i nie są idealne do wyświetlania materiałów wideo, co ogranicza ich zastosowanie w nowoczesnych mediach.

Pytanie 27

Aby elementy <li> listy menu wyświetlały się w jednej linii (poziomo), której właściwości CSS użyć?

A.
text-align
B.
outline
C.
display
D.
position
Trzeba zmienić typ wyświetlania elementu. outline rysuje obrys, position steruje pozycjonowaniem, a text-align wyrównuje tekst WEWNĄTRZ elementu, a nie układa <li> poziomo. Poziomy układ listy daje display.

Pytanie 28

Który zbiór znaczników, określających projekt strony internetowej w sposób semantyczny, jest zgodny z normą HTML 5?

Ilustracja do pytania
A. Zbiór 1
B. Zbiór 3
C. Zbiór 4
D. Zbiór 2
Zrozumienie semantyki HTML jest kluczowe dla tworzenia zoptymalizowanych stron internetowych, a wybór odpowiednich znaczników ma duży wpływ na strukturę i dostępność dokumentu. W niepoprawnych odpowiedziach brak jest semantycznej spójności z założeniami HTML5. Wykaz 1 używa <article> w Bloku 2, co oznaczałoby samodzielną jednostkę, np. wpis na blogu lub artykuł prasowy, co nie jest odpowiednie w kontekście głównej treści strony. Wykaz 2 używa <div>, co jest niezalecane, gdyż divy są ogólnymi kontenerami, a HTML5 promuje użycie bardziej szczegółowych znaczników semantycznych. Wykaz 3 zastosował <main> dwukrotnie, co jest błędem, ponieważ <main> powinien być użyty tylko raz na stronie, jako główny element zawartości. Pominięcie znaczników takich jak <aside> lub <header> w odpowiednich miejscach zubaża strukturę dokumentu, co wpływa negatywnie na SEO i dostępność. Zasady semantyczności w HTML5 mają na celu ułatwienie interpretacji kodu zarówno przez przeglądarki, jak i przez urządzenia wspomagające, co jest kluczowe w nowoczesnym projektowaniu stron internetowych. Właściwe oznaczenie elementów strony pozwala na lepszą organizację treści i ułatwia nawigację, co jest ważne dla użytkowników i wyszukiwarek internetowych.

Pytanie 29

W języku HTML, aby stworzyć pole do wprowadzania hasła, w którym wpisywany tekst będzie ukrywany (zastępowany kropkami), należy zastosować znacznik

A. <input name="password" />
B. <form input type="password" />
C. <form="password" type="password" />
D. <input type="password" />
W przypadku odpowiedzi <input name="password" /> brakuje kluczowego atrybutu 'type', co uniemożliwia prawidłowe zdefiniowanie pola do wprowadzania hasła. Standard HTML wymaga, aby każdy input miał określony typ, aby przeglądarka wiedziała, jak ma obsługiwać dane wejściowe. Użycie tylko 'name' bez 'type' sprawia, że przeglądarka interpretuje to pole jako standardowe pole tekstowe, co nie maskuje wprowadzanych danych i naraża hasło na nieautoryzowany dostęp. W przypadku zastosowania <form="password" type="password" /> oraz <form input type="password" /> zawężamy logikę do niewłaściwego użycia znaczników formularzy. 'form' jest elementem kontenerowym dla grupy inputów, a jego atrybuty powinny odnosić się do dodatkowych informacji, ale nie pozwalają na umieszczenie inputa wewnątrz samego formularza w taki sposób. Te błędne konstrukcje mogą prowadzić do nieczytelności kodu i problemów z interpretacją przez przeglądarki, co jest szczególnie niekorzystne w kontekście dostępności i użyteczności. Warto przy projektowaniu formularzy przestrzegać standardów HTML oraz praktyk takich jak semantyczne użycie elementów, aby poprawić zarówno SEO, jak i UX.

Pytanie 30

Którego selektora użyć, aby odmiennie sformatować PIERWSZĄ literę akapitu?

A. selektora atrybutu p [first-letter]
B. pseudoelementu p::first-letter
C. selektora dziecka p + first-letter
D. selektora klasy p.first-letter
Pierwszą literę akapitu formatuje pseudoelement p::first-letter - pozwala np. zrobić inicjał (duża, ozdobna litera na początku). Pseudoelementy (z ::) sięgają fragmentu, którego nie ma osobnego znacznika. Zapamiętaj: ::first-letter celuje w samą pierwszą literę, bez dodatkowego HTML-a.

Pytanie 31

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

Pytanie 32

Na ilustracji pokazano tabelę z połączonymi komórkami. Jakie atrybuty scalania zastosowano, aby uzyskać ten efekt?

Ilustracja do pytania
A. rowspan w drugim wierszu i pierwszej komórce oraz colspan w trzecim wierszu, trzeciej komórce
B. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu, trzeciej komórce
C. colspan w drugim wierszu we wszystkich trzech komórkach oraz rowspan w trzecim wierszu ostatniej komórce
D. colspan w drugim wierszu i pierwszej komórce oraz rowspan w trzecim wierszu i czwartym wierszu
Niepoprawne odpowiedzi wynikają z błędnego przypisania atrybutów colspan i rowspan w tabeli HTML. Rozważając zastosowanie rowspan w drugim wierszu i pierwszej komórce, błędnie zakłada się, że komórka ta miałaby rozciągać się na kilka wierszy, co nie jest prawdą dla przedstawionego układu. Zastosowanie colspan w trzecim wierszu i trzeciej komórce również jest nieprawidłowe, gdyż komórki te nie są rozciągane poziomo na kilka kolumn. Kolejne błędne przypisanie to colspan we wszystkich trzech komórkach drugiego wiersza - w rzeczywistości tylko jedna z komórek wymaga takiego scalania, aby uzyskać pokazany efekt. Podobnie, użycie rowspan w czwartym wierszu nie znajduje zastosowania w załączonym obrazie, gdzie komórki są jednolicie rozmieszczone. Takie błędy w zrozumieniu mechaniki tabel HTML mogą wynikać z braku doświadczenia z praktycznym zastosowaniem tych atrybutów. Ważne jest, aby dokładnie analizować strukturę tabel i zrozumieć specyfikę ich projektowania, co pozwala na poprawne i efektywne wykorzystanie dostępnych narzędzi. Edukacja w zakresie semantyki HTML i praktyczne ćwiczenia mogą znacznie poprawić umiejętność tworzenia i zarządzania złożonymi układami tabelarycznymi na stronach internetowych, a także przyczynić się do lepszej dostępności i responsywności stron.

Pytanie 33

Która reguła CSS pozwala stosować różne style w zależności od szerokości ekranu (kluczowa w RWD)?

A.
@media
B.
@import
C.
@keyframes
D.
@font-face
Reguła @media (media query) pozwala uzależnić style od warunków urządzenia - najczęściej od szerokości okna. Zapisuje się w niej warunek, np. @media (max-width: 600px) { ... }, a style w środku zadziałają tylko, gdy jest on spełniony. To podstawowe narzędzie RWD: dzięki niemu ten sam dokument inaczej wygląda na telefonie i na monitorze. Dlatego kluczowa dla responsywności jest reguła @media.

Pytanie 34

Projektant stworzył logo dla witryny internetowej. Jest to czarny symbol na przezroczystym tle. Aby zachować wszystkie cechy obrazu i umieścić go na stronie, projektant powinien zapisać obraz w formacie

A. PNG
B. BMP
C. CDR
D. JPEG
Format PNG (Portable Network Graphics) jest idealnym rozwiązaniem dla grafiki internetowej, zwłaszcza gdy zależy nam na zachowaniu przezroczystości tła, co jest kluczowe w przypadku logotypów. PNG obsługuje kompresję bezstratną, co oznacza, że nie utracimy jakości obrazu przy zapisywaniu go. To szczególnie ważne w kontekście logo, które często musi być skalowane do różnych rozmiarów, a wszelkie zniekształcenia mogą wpłynąć na jego rozpoznawalność. Dodatkowo, format PNG pozwala na uzyskanie pełnej gamy kolorów, w tym przezroczystości w formacie RGBA. W praktyce oznacza to, że możesz umieścić czarny znak na dowolnym tle, a jego kształt zawsze zachowa wyrazistość oraz ostrość. Warto również zauważyć, że PNG jest wspierany przez wszystkie nowoczesne przeglądarki internetowe i systemy operacyjne, co czyni go wszechstronnym wyborem dla twórców stron internetowych. Standard PNG, opublikowany przez W3C, jest uznawany za jedno z najbardziej efektywnych rozwiązań dla grafiki w sieci.

Pytanie 35

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

A. nazwa czcionki
B. efektów czcionki
C. rozmiaru czcionki
D. koloru czcionki
Pierwsza z niepoprawnych odpowiedzi sugeruje, że parametr face służy do określenia barwy czcionki. Jest to błędne, ponieważ kolor tekstu w HTML ustala się za pomocą innego parametru – 'color'. Możemy na przykład użyć znacznika <font color='red'>tekst</font>, aby ustawić kolor tekstu na czerwony. Parametr face nie ma związku z kolorystyką, a jego jedynym celem jest określenie konkretnej czcionki, co jest kluczowe dla typografii na stronach internetowych. Kolejna niepoprawna odpowiedź wskazuje na efekty czcionki, co również jest mylące. Efekty takie jak pogrubienie, kursywa czy podkreślenie są osiągane dzięki zastosowaniu odpowiednich stylów CSS lub atrybutów w tagach HTML, takich jak <b>, <i>, czy <u>. Parametr face nie wprowadza żadnych efektów, a jedynie wskazuje, jaką czcionkę należy zastosować. Ostatnia niepoprawna odpowiedź odnosi się do wielkości czcionki, co również jest nieprawidłowe. W HTML rozmiar czcionki ustala się za pomocą atrybutu 'size' w tagu <font>, co jest znacznie bardziej ograniczone i mniej elastyczne niż nowoczesne podejścia z CSS. W CSS możemy zdefiniować rozmiar czcionki za pomocą właściwości 'font-size', co umożliwia precyzyjne dostosowanie wielkości tekstu, a także łatwą zmianę przez wykorzystanie jednostek względnych. Podsumowując, niepoprawne odpowiedzi mylą się co do funkcji parametru face, który nie ma związku z kolorem, efektami czy wielkością czcionki.

Pytanie 36

W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika

Ilustracja do pytania
A. D
B. C
C. B
D. A
Formatowanie znacznika h1, określone w podanym kodzie CSS, wprowadza kilka charakterystycznych cech stylistycznych. Przede wszystkim, zastosowanie 'font-style: oblique;' zmienia wygląd tekstu, nadając mu ukośny styl. To oznacza, że tekst będzie wyświetlany w wyraźnie przechylonej formie, co jest często używane do podkreślenia ważnych elementów. Dodatkowo, 'font-variant: small-caps;' odpowiedzialne jest za przekształcenie małych liter w małe kapitałki, co nadaje tekstowi elegancki i formalny wygląd. Taki zabieg jest często wykorzystywany w tytułach lub nagłówkach, aby wyróżnić je wśród pozostałego tekstu. Ostatni element, 'text-align: right;', wyrównuje tekst do prawej krawędzi kontenera, co jest mniej powszechnie stosowane w porównaniu do wyrównania do lewej lub wyśrodkowanego, ale może być użyteczne w specyficznych układach strony. W przypadku, gdyby były dodatkowe style CSS przypisane do tego znacznika, mogłyby one wpłynąć na ostateczny wygląd, jednak w tym przypadku zakładamy, że są to jedyne zastosowane style. Standardy CSS jasno określają, jak różne właściwości mogą być używane do stylizacji elementów HTML, co czyni je niezwykle potężnym narzędziem w tworzeniu estetycznych i funkcjonalnych stron internetowych.

Pytanie 37

Elementy <header>, <article>, <section>, <footer> są typowe dla języka

A. XHTML 1.1
B. HTML 4.01 Strict
C. HTML 5
D. HTML 4.01 Transitional
Odpowiedź HTML 5 jest prawidłowa, ponieważ to właśnie w tej wersji języka HTML wprowadzono nowe semantyczne znaczniki, takie jak <header>, <article>, <section> oraz <footer>. Te znaczniki mają na celu lepsze strukturalne organizowanie treści w dokumentach internetowych, co ułatwia zarówno odczyt zrozumienia przez przeglądarki, jak i poprawia dostępność dla osób korzystających z technologii wspomagających. Na przykład, <header> zazwyczaj zawiera nagłówki i elementy nawigacyjne, podczas gdy <article> służy do oznaczenia niezależnej jednostki treści, np. artykułu prasowego. <section> jest używane do grupowania powiązanych sekcji, a <footer> zawiera informacje takie jak prawa autorskie czy linki do polityki prywatności. Wdrożenie tych znaczników zgodnie z najlepszymi praktykami zwiększa semantykę strony, co jest korzystne dla SEO, a także pozwala na lepsze zrozumienie struktury strony przez roboty indeksujące. HTML 5 jest obecnie standardem w tworzeniu stron internetowych i jego znajomość jest kluczowa dla współczesnych deweloperów.

Pytanie 38

Rozmycie Gaussa, wygładzanie oraz szum RGB to funkcje programów do obróbki:

A. grafiki rastrowej
B. grafiki wektorowej
C. dźwięku w formacie MIDI
D. ścieżki dźwiękowej
Te filtry działają na pikselach, więc nie dotyczą grafiki wektorowej (opisywanej krzywymi i wzorami) ani dźwięku - ani ścieżki audio, ani formatu MIDI. Rozmycie Gaussa, wygładzanie i szum RGB to funkcje obróbki grafiki rastrowej.

Pytanie 39

W CSS zapis selektora

p > i { color: red;} 
wskazuje, że kolorem czerwonym będzie wyróżniony
A. jedynie tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>
B. wszystkie teksty w znaczniku <p> lub każdy tekst w znaczniku <i>
C. każdy tekst w znaczniku <p> z wyjątkiem tych w znaczniku <i>
D. tylko ten tekst znacznika <p>, który ma przypisaną klasę o nazwie i
Odpowiedź ta jest poprawna, ponieważ selektor CSS <pre>p &gt; i { color: red; }</pre> definiuje regułę, która odnosi się jedynie do elementów <i> znajdujących się bezpośrednio wewnątrz elementu <p>. Operator > jest selektorem potomka bezpośredniego, co oznacza, że tylko te <i>, które są bezpośrednio dzieckiem <p>, będą miały przypisany kolor czerwony. Na przykład, jeśli w kodzie HTML mamy <p><i>Tekst</i></p>, to ten tekst będzie czerwony. Z drugiej strony, jeżeli <i> znajduje się zagnieżdżone w innym elemencie wewnątrz <p>, jak <p><span><i>Tekst</i></span></p>, to ten tekst nie będzie formatowany na czerwono. Tego typu selektory są niezwykle przydatne w praktycznym zastosowaniu, gdyż pozwalają na precyzyjne określenie stylów dla konkretnych elementów, co jest zgodne z najlepszymi praktykami projektowania stron internetowych, takimi jak utrzymanie czytelności kodu i unikanie niezamierzonych efektów formatowania.

Pytanie 40

Aby grupować sekcje na poziomie bloków, które będą stilizowane za pomocą znaczników, jakiego należy użyć?

A. <param>
B. <p>
C. <div>
D. <span>
Znak <div> jest jednym z podstawowych elementów HTML, który służy do grupowania i organizowania zawartości w dokumentach HTML. Umożliwia on stosowanie stylów CSS oraz skryptów JavaScript na grupach elementów, co czyni go niezwykle użytecznym w budowie responsywnych i złożonych układów stron. W przeciwieństwie do znaku <p>, który zarezerwowany jest dla akapitów tekstu, lub <span>, który jest używany do izolowania niewielkich fragmentów tekstu w ramach większego kontekstu, <div> działa jako kontener wypełniający swoje otoczenie. Ponadto, <div> jest znacznikiem blokowym, co oznacza, że zajmuje całą szerokość dostępnego miejsca w swoim rodzicu, co jest kluczowe w projektowaniu układów. W praktyce może być używany do tworzenia sekcji strony, nagłówków, stopki czy artykułów, co pozwala na lepszą organizację kodu i stylów. W kontekście standardów, <div> jest częścią W3C HTML5, co zapewnia jego szeroką akceptację i zgodność z przeglądarkami. Użycie <div> do grupowania obszarów na poziomie bloków jest zatem najlepszą praktyką w nowoczesnym web designie.