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: 14 maja 2026 08:06
Data zakończenia: 14 maja 2026 08:25

Egzamin zdany!

Wynik: 29/40 punktów (72,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W znaczniku <meta ...> w sekcji <meta ...> na stronie internetowej nie zamieszcza się informacji o

A. automatycznym odświeżaniu

B. kodowaniu

C. autorze

D. typie dokumentu

W znaczniku <meta> na stronach WWW umieszczane są różnorodne informacje, które pomagają w optymalizacji strony dla wyszukiwarek oraz w poprawie jej użyteczności. Jednym z elementów, które można umieścić w tym znaczniku, jest opis autora strony, co jest użyteczne w kontekście SEO, gdyż umożliwia przypisanie treści do konkretnej osoby. Innym ważnym elementem jest kodowanie, które wskazuje przeglądarce, jak interpretować znaki na stronie, co jest istotne dla poprawnego wyświetlania treści. Warto również zwrócić uwagę na automatyczne odświeżanie, które można ustawić za pomocą znacznika <meta http-equiv='refresh'>, co jest przydatne w przypadku stron, które wymagają cyklicznej aktualizacji treści. Z drugiej strony, informacja dotycząca typu dokumentu, jak na przykład tekst, HTML, czy XML, nie jest umieszczana w znaczniku <meta>. Zamiast tego, typ dokumentu jest określony w nagłówku HTTP poprzez dyrektywę Content-Type, co jest zgodne z wymaganiami protokołu HTTP i spełnia standardy W3C, które zalecają oddzielać metadane od informacji o typie dokumentu. Dlatego też, umieszczanie informacji o typie dokumentu w znaczniku <meta> jest niepoprawne i niezgodne z przyjętymi normami.

Pytanie 2

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ć plik w formacie

A. BMP

B. CDR

C. JPG

D. PNG

Format PNG to super wybór do przechowywania obrazów z przezroczystością, zwłaszcza jeśli chodzi o logo na stronach www. Wiesz, co jest fajne? To, że PNG obsługuje kanał alfa – dzięki temu można zapisać obrazki z przezroczystym tłem. To jest mega ważne, bo logo często muszą się dobrze prezentować na różnych kolorach, prawda? A jeśli chodzi o jakość, to PNG kompresuje obrazy bezstratnie, co znaczy, że nie tracimy detali i jakość pozostaje na wysokim poziomie, a plik nie jest za duży. Graficy często sięgają po PNG, gdy robią ikony czy różne grafiki internetowe, które muszą wyglądać dobrze. W branży web designu to naprawdę standard, żeby korzystać z PNG, bo jest elastyczny na różnych platformach i urządzeniach, więc nie ma co się dziwić, że fachowcy go lubią.

Pytanie 3

Który zapis jest selektorem pseudoklasy CSS?

A. body

B. a:link

C. p#wyroznienie

D. td.wyroznienie

W tym zadaniu wszystkie odpowiedzi wyglądają jak poprawne selektory CSS, ale tylko jedna z nich jest selektorem pseudoklasy. To dość typowa pułapka: ktoś widzi poprawny składniowo selektor i automatycznie zakłada, że skoro jest „jakiś znak specjalny”, to pewnie chodzi o pseudoklasę. W CSS warto jednak rozróżniać kilka zupełnie różnych mechanizmów: selektor typu, selektor klasy, selektor identyfikatora oraz właśnie pseudoklasy. Zapis „p#wyroznienie” łączy selektor typu z selektorem identyfikatora. Oznacza akapit <p> o konkretnym id="wyroznienie". Znak # w CSS nie ma nic wspólnego z pseudoklasami, tylko jednoznacznie wskazuje na identyfikator elementu. To jest bardzo częste nieporozumienie: część osób myli dwukropek z kratką, bo oba wyglądają jak „specjalne dopiski”. Tymczasem pseudoklasy zawsze używają dwukropka, a identyfikatory – znaku #. „td.wyroznienie” to z kolei połączenie selektora typu z selektorem klasy. Ten zapis wybierze komórki tabeli <td> posiadające class="wyroznienie". Kropka w CSS zawsze oznacza klasę, czyli coś, co definiujemy w atrybucie class w HTML. To zupełnie inny mechanizm niż pseudoklasy, bo klasę nadajemy ręcznie w kodzie HTML, a pseudoklasa opisuje stan lub cechę obliczaną przez przeglądarkę, np. czy element jest pierwszy w swoim rodzicu, czy link jest odwiedzony, czy pole formularza ma fokus. Zapis „body” to najprostszy możliwy selektor typu – wskazuje wszystkie elementy <body> w dokumencie (zwykle jest tylko jeden). Tu w ogóle nie ma żadnego symbolu wskazującego na pseudoklasę, więc traktowanie tego jako pseudoklasy to już zupełne pomieszanie pojęć: to po prostu nazwa elementu HTML. Typowy błąd myślowy przy takich pytaniach polega na tym, że zamiast skupić się na definicji pseudoklasy („selektor z dwukropkiem, opisujący stan”), uczestnik testu szuka odpowiedzi, która „najbardziej wygląda na zaawansowaną”. Tymczasem wszystkie błędne odpowiedzi są zwykłymi, podstawowymi selektorami: typu, klasy i id. Pseudoklasa zawsze ma postać coś:coś_tam, np. a:hover, button:disabled, li:first-child. Jeżeli nie ma dwukropka – to na pewno nie jest pseudoklasa, niezależnie od tego, jak bardzo skomplikowany wygląda zapis.

Pytanie 4

Pokazane pole input pozwala na

A. wprowadzenie dowolnego tekstu

B. wybranie opcji

C. selekcja opcji z listy o wartościach text1 i text2

D. wprowadzenie hasła

Odpowiedzi takie jak "wpisanie dowolnego tekstu", "wpisanie hasła" czy "wybranie opcji z listy o wartości text1 i text2" są mylne, bo nie oddają rzeczywistego działania pola typu checkbox. Jak chodzi o checkboxa, to nie wprowadza się tekstu ani haseł. Checkboxy są do wyboru opcji, a nie do wpisywania danych. Wydaje mi się, że pisanie dowolnego tekstu sugeruje, że chodzi o pole tekstowe, a to jest zupełnie inny typ elementu. Z kolei hasło powinno być wprowadzone w polu typu password, które maskuje to, co wpisujemy dla bezpieczeństwa. A wybieranie opcji z listy kojarzy się z rozwijaną listą (select), a nie checkboxem, co też jest niepoprawne. Często mylimy różne typy elementów formularza i nie do końca rozumiemy ich funkcje. Dlatego warto rzucić okiem na dokumentację i przykłady różnych typów pól formularzy, żeby uniknąć podobnych nieporozumień w przyszłości.

Pytanie 5

Określ, w jaki sposób należy odnosić się do pliku default.css, jeżeli index.html znajduje się bezpośrednio w folderze Strona?

A. <link rel="stylesheet" type="text/css" href="...\style\default.css" />

B. <link rel="stylesheet" type="text/css" href="./style/default.css" />

C. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

D. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />

Niepoprawne odpowiedzi wynikają z błędnego zrozumienia struktury ścieżek w HTML. Stosowanie absolutnych ścieżek takich jak c:/style/default.css jest niezalecane, ponieważ lokalizuje plik na konkretnym dysku twardym, co jest niepraktyczne w przypadku aplikacji webowych, które mogą być przenoszone na serwery o różnych strukturach katalogów. Użycie backslashów \ w ścieżkach takich jak ...\style\default.css jest błędne w kontekście URL, ponieważ slash / jest standardem w adresach URL, zgodnie z normami RFC. Backslashy używa się w systemach Windows do ścieżek lokalnych, ale w kontekście HTML powoduje to problemy z prawidłowym zaadresowaniem zasobów. Stosowanie ścieżek absolutnych lub błędnej składni w odwołaniach może prowadzić do sytuacji, w których pliki CSS nie są ładowane, co skutkuje nieprawidłowym wyświetlaniem strony. Dlatego istotne jest zrozumienie, że relatywne ścieżki zapewniają większą kompatybilność i elastyczność projektu webowego, co jest esencją dobrych praktyk w programowaniu frontendowym. Utrzymywanie spójnej i poprawnej struktury ścieżek jest kluczem do efektywnego zarządzania zasobami w aplikacjach internetowych.

Pytanie 6

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości, powinno zawierać właściwość

BLOK 1		BLOK 2
BLOK 3	BLOK 4
BLOK 5

A. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

B. clear: both dla wszystkich bloków.

C. float: left dla wszystkich bloków.

D. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

Hmm, tutaj coś poszło nie tak. Wybrałeś opcję z `clear: both`, ale to nie do końca pasuje do tego zadania. `clear: both` w CSS służy głównie do resetowania pływania bloków, więc jak masz blok z tym ustawieniem, to następny nie będzie obok niego, tylko przesunie się na dół. A w tym przypadku nie musisz resetować pływania, bo to nie jest potrzebne. Wiem, że wybór `float: left` dla niektórych bloków może wydawać się dobrym pomysłem, ale żeby wszystko się poprawnie ułożyło, musisz zastosować `float: left` dla wszystkich bloków. I pamiętaj, żeby im ustawić szerokość, bo inaczej bloków może się nie udać ułożyć w poziomie.

Pytanie 7

Aplikacja o nazwie FileZilla umożliwia

A. publikację witryny internetowej na zdalnym serwerze

B. sprawdzanie poprawności plików HTML oraz CSS

C. przeprowadzenie testów aplikacji

D. wniesienie bazy danych na stronę CMS Joomla!

FileZilla to popularny program typu FTP (File Transfer Protocol), który umożliwia użytkownikom przesyłanie plików między komputerem a serwerem internetowym. Jego głównym celem jest publikacja stron internetowych na odległych serwerach, co jest kluczowe dla procesu tworzenia i utrzymania stron w sieci. Program obsługuje różne protokoły, takie jak FTP, FTPS oraz SFTP, co zapewnia elastyczność i bezpieczeństwo podczas transferu danych. W praktyce, aby opublikować stronę, użytkownik może przeciągnąć pliki z lokalnego folderu do odpowiedniego katalogu na serwerze, co jest intuicyjne i efektywne. FileZilla wspiera również funkcje takie jak synchronizacja folderów, co pozwala na łatwe aktualizowanie zawartości strony. Zgodnie z branżowymi standardami, korzystanie z odpowiednich narzędzi do przesyłania plików, takich jak FileZilla, jest niezbędne dla każdego dewelopera webowego, aby zapewnić bezpieczeństwo i zgodność z najlepszymi praktykami w zakresie publikacji stron internetowych.

Pytanie 8

Arkusze stylów w formacie kaskadowym są tworzone w celu

A. połączenia struktury dokumentu strony z odpowiednią formą jej wizualizacji

B. ułatwienia formatowania strony

C. blokowania wszelkich zmian w wartościach znaczników już przypisanych w pliku CSS

D. nadpisywania wartości znaczników, które już zostały ustawione na stronie

Wybór błędnych odpowiedzi może wynikać z nieporozumienia dotyczącego funkcji kaskadowych arkuszy stylów i ich zastosowania w procesie tworzenia stron internetowych. Odpowiedzi sugerujące blokowanie jakichkolwiek zmian w wartościach znaczników w pliku CSS są mylące, ponieważ CSS zaprojektowane jest właśnie po to, aby umożliwiać modyfikacje stylów. Arkusze stylów nie blokują zmian, tylko lepiej organizują i strukturalizują kod, co sprzyja łatwiejszemu wprowadzaniu przyszłych poprawek. Z kolei połączenie struktury dokumentu strony z właściwą formą prezentacji jest bardziej związane z HTML, który odpowiada za strukturę treści strony. CSS natomiast odpowiada głównie za stylizację i nie ma na celu bezpośredniego łączenia tych aspektów, lecz oddzielenie ich. Warto również zauważyć, że nadpisywanie wartości znaczników na stronie to szczególna funkcjonalność CSS, ale nie jest to jej główny cel. Główna idea CSS polega na uproszczeniu procesu formatowania, co podkreśla znaczenie kaskadowości, gdzie reguły mogą być dziedziczone i nadpisywane w sposób przemyślany i kontrolowany. Typowymi błędami myślowymi w tym kontekście są zamiana celów CSS z HTML oraz brak zrozumienia mechanizmów kaskadowości, co prowadzi do nieprawidłowych wniosków na temat roli, jaką CSS odgrywa w projektowaniu stron internetowych.

Pytanie 9

Na przedstawionym obrazie widać wynik formatowania przy użyciu styli CSS oraz kod HTML, który go generuje. Przy założeniu, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?

A. Rys. C

B. Rys. A

C. Rys. B

D. Rys. D

Błędne odpowiedzi wynikają głównie z nieprawidłowego przypisania wartości marginesów i marginesów wewnętrznych w stylach CSS. W przypadku niepoprawnych stylów, takich jak w Rys. A i D, zastosowano linię przerywaną, co nie spełnia warunków pytania, które wymaga zastosowania linii ciągłej. Solidna linia graniczna jest bardziej preferowana w projektach profesjonalnych, ponieważ dodaje wyrazistości i estetyki. Warianty, gdzie nie zachowano odpowiednich wartości marginesów i marginesów wewnętrznych, mogą prowadzić do niezamierzonego zachowania w układzie strony, takich jak zły odstęp między elementami, co negatywnie wpływa na użyteczność i estetykę interfejsu użytkownika. Niewłaściwe ustawienie tych wartości często wynika z niedostatecznego zrozumienia modelu pudełkowego w CSS, który jest fundamentem w projektowaniu rozmieszczenia elementów na stronie. Model pudełkowy umożliwia dokładne określenie, jak elementy są wyświetlane, co jest niezbędne do tworzenia responsywnych i estetycznie przyjemnych stron internetowych. Zrozumienie i prawidłowe zastosowanie marginesów i marginesów wewnętrznych jest kluczowe dla osiągnięcia profesjonalnych wyników w projekcie.

Pytanie 10

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

A. C. MP4

B. D. WebM

C. A. AVI

D. B. Ogg

Wybór Ogg, MP4 czy WebM jako odpowiedzi niewłaściwych jest nie do końca trafny, bo wszystkie te formaty są jednak obsługiwane przez HTML5. Ogg, mimo że mniej popularny, jest całkowicie ok w specyfikacji HTML5 i zyskuje na znaczeniu w kontekście otwartych standardów. MP4 to jeden z najpopularniejszych formatów, wspierany przez prawie wszystkie przeglądarki i urządzenia mobilne, więc to świetny wybór do strumieniowania. WebM, stworzony przez Google, również ma swoje miejsce i jest często używany do wideo w sieci. Wiele osób myli się myśląc, że mniej znane formaty są niekompatybilne z HTML5. Często ludzie uważają, że starsze formaty jak AVI są bardziej uniwersalne, ale to nieprawda, bo współczesne przeglądarki mają inne wymagania. Dlatego tak ważne jest, by programiści i twórcy treści znali różnorodność formatów i ich zastosowanie w multimediach w sieci.

Pytanie 11

Termin "front-end" w kontekście projektowania stron WWW odnosi się do

A. organizacji informacji na serwerze WWW

B. interfejsu witryny internetowej powiązanego z technologiami operującymi w przeglądarce internetowej

C. bazy danych z danymi publikowanymi na stronie

D. działania skryptów oraz aplikacji realizowanych po stronie serwera WWW

Front-end to wszystko to, co widzisz w przeglądarce, czyli ogólnie mówiąc, wygląd strony i to, jak się z nią bawisz. Mówię tu o kolorach, czcionkach, układzie czy różnych akcjach, które możesz wykonać. Technologie jak HTML, CSS i JavaScript są tu na czołowej pozycji, bo to dzięki nim strona jest taka interaktywna i przyjemna dla oka. Przykłady? Budowa responsywnych interfejsów, które zmieniają rozmiar na różnych ekranach, albo skrypty, które potrafią zmieniać treści na stronie bez przeładowania jej. Dobrze jest też pomyśleć o tym, żeby strona ładowała się jak najszybciej, bo to wpływa na to, jak użytkownicy będą ją odbierać. A jeśli znasz nowe frameworki, jak React czy Angular, to naprawdę ułatwia stworzenie bardziej złożonych aplikacji webowych, co w dzisiejszych czasach jest mega ważne.

Pytanie 12

Według zasad walidacji HTML5, właściwym zapisem dla znacznika hr jest

A. </hr?>

B. </ hr>

C. </ hr />

D. <hr>

Odpowiedź <hr> jest poprawna, ponieważ zgodnie z regułami HTML5, znacznik <hr> jest znakiem samodzielnym, co oznacza, że nie wymaga zamknięcia. Jest to element blokowy, który służy do wprowadzania poziomej linii w dokumencie, co często wykorzystuje się do rozdzielania sekcji treści. Standard HTML5 zezwala na użycie skróconej formy, a zatem <hr> jest wystarczające do oznaczenia poziomej linii. W praktyce, użycie tego znacznika jest istotne dla strukturyzacji dokumentów i poprawy ich czytelności. Dobrą praktyką jest również stosowanie odpowiednich atrybutów, takich jak 'class' czy 'id', co może ułatwić późniejsze stylizowanie za pomocą CSS. Warto pamiętać, że w HTML5, chociaż można używać atrybutów takich jak 'style' czy 'title', powinny one być stosowane odpowiedzialnie, aby nie zaburzać semantyki dokumentu. Ponadto, korzystanie z tego znacznika jest zgodne z WAI-ARIA, co wspiera dostępność aplikacji webowych.

Pytanie 13

W kodzie HTML atrybut alt w tagu img służy do określenia

A. atrybutów obrazu, takich jak rozmiar, ramka, wyrównanie

B. opisu, który pojawi się pod obrazem

C. ścieżki oraz nazwy pliku źródłowego

D. tekstu, który będzie prezentowany, gdy obraz nie może być załadowany

Atrybut alt w znaczniku img w HTML to naprawdę ważny element, jeśli chodzi o dostępność stron www. Jego głównym zadaniem jest pomóc osobom z problemami ze wzrokiem zrozumieć, co widnieje na obrazku. Jeśli nie da się wyświetlić grafiki – na przykład przez zły internet czy błąd w ścieżce do pliku – tekst w atrybucie alt pokazuje się jako alternatywa. Na przykład <img src='example.jpg' alt='Zachód słońca nad morzem'>, co by ułatwiło osobom korzystającym z czytników ekranu zrozumienie treści. Warto też pamiętać, że ten atrybut ma znaczenie dla SEO, bo wyszukiwarki mogą go wykorzystać do lepszego zrozumienia zawartości strony, co wpływa na jej indeksowanie. Ogólnie rzecz biorąc, używanie odpowiednich atrybutów alt to dobra praktyka w budowaniu stron www.

Pytanie 14

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

A. znacznik <p> z formatowaniem

B. znaczniki <frame> i <table>

C. znacznik <div>

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

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

Pytanie 15

p { font-family: Arial, Helvetica, sans-serif; }

Zdefiniowany styl dla selektora p spowoduje, że tekst w paragrafie zostanie wyświetlony czcionką:

A. dekoracyjną.

B. szeryfową.

C. bezszeryfową.

D. maszynową.

W tym pytaniu łatwo się pomylić, bo wiele osób bardziej kojarzy konkretne nazwy fontów niż ich rodziny. Kluczowe jest zrozumienie, jak działa właściwość font-family w CSS. Zapis font-family: Arial, Helvetica, sans-serif definiuje listę krojów w kolejności priorytetu. Przeglądarka sprawdza po kolei: najpierw próbuje użyć Ariala, potem Helvetiki, a jeśli żaden z nich nie jest dostępny na urządzeniu, wybiera dowolny systemowy font z rodziny sans-serif. I to właśnie ostatni element – sans-serif – określa typ czcionki, czyli że ma to być krój bezszeryfowy. Czcionka szeryfowa (serif) to np. Times New Roman czy Georgia, z charakterystycznymi „ogonami” i ozdobnikami na końcach liter. Tutaj nie ma ani nazwy serif, ani generycznego słowa serif, więc nie ma podstaw, by mówić o kroju szeryfowym. Czcionka maszynowa, nazywana w CSS monospace, to taka, w której wszystkie znaki mają tę samą szerokość, jak w starych maszynach do pisania (np. Courier New). W kodzie nie pojawia się słowo monospace ani żaden typowy font maszynowy, więc to też odpada. Z kolei określenia typu „dekoracyjna” mogą mylić, bo w CSS istnieje kiedyś częściej używany generic fantasy, czasem kojarzony z ozdobnymi krojami, ale w tym przykładzie nie mamy ani fantasy, ani cursive, tylko wyraźnie sans-serif. Typowy błąd myślowy polega na tym, że ktoś patrzy na nazwę Arial i nie kojarzy jej z rodziną bezszeryfową, albo sugeruje się wyglądem przykładowego tekstu z jakiegoś edytora. W praktyce jednak to właśnie Arial i Helvetica są klasycznymi reprezentantami rodziny sans-serif. Warto patrzeć na ostatni człon deklaracji font-family – ten generyczny typ jest zawsze najważniejszą wskazówką, do jakiej kategorii należy krój pisma w danym stylu.

Pytanie 16

Aby w HTML uzyskać odpowiednie formatowanie paragrafu dla tekstu:

Tekst może być zaznaczony albo istotny dla autora

A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>

B. <p>Tekst może być <mark>wyróżniony albo <em>istotny</em> dla autora</mark></p>

C. <p>Tekst może być <mark>wyróżniony</mark> albo <em>istotny dla autora</p>

D. <p>Tekst może być <mark>wyróżniony albo <i>istotny</i> dla autora</mark></p>

Aby uzyskać odpowiednie formatowanie tekstu w języku HTML, ważne jest zastosowanie właściwych znaczników semantycznych, które nie tylko wpływają na wygląd tekstu, ale także na jego znaczenie w kontekście SEO oraz dostępności. W przypadku tego pytania, poprawne użycie znaczników <mark> i <em> jest kluczowe. Znacznik <mark> służy do wyróżnienia fragmentu tekstu, co informuje użytkowników, że jest on istotny lub wymaga szczególnej uwagi. Natomiast znacznik <em> (emphasis) jest używany do podkreślenia ważności słów, co również ma znaczenie semantyczne. Przykładowo, kod <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p> skutecznie oddziela dwa różne aspekty tekstu, zachowując przy tym poprawność strukturalną HTML. Zgodność z W3C oraz z zasadami dostępności WCAG (Web Content Accessibility Guidelines) jest fundamentalna, aby zapewnić, że strona internetowa jest przyjazna dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Właściwe użycie tych znaczników wpływa na indeksację treści przez wyszukiwarki, co może poprawić widoczność strony w wynikach wyszukiwania.

Pytanie 17

W CSS, aby określić typ czcionki, powinno się zastosować właściwość

A. font-family

B. font-size

C. font-style

D. font-face

Właściwość 'font-family' w CSS jest kluczowa dla określenia kroju czcionki, który ma być używany na stronie internetowej. Dzięki tej właściwości możemy wskazać jedną lub więcej czcionek, które będą stosowane dla danego elementu. Wartością może być nazwa konkretnej czcionki, na przykład 'Arial', lub rodzina czcionek, jak 'sans-serif'. Przykład użycia to: 'font-family: Arial, sans-serif;'. W przypadku braku dostępności danej czcionki, przeglądarka wybierze następną z listy, co pozwala na zapewnienie spójności i czytelności tekstu na różnych urządzeniach. Zgodnie z najlepszymi praktykami, zaleca się użycie kilku opcji czcionek, aby zapewnić lepszą dostępność. Warto również pamiętać, aby unikać stosowania zbyt wielu różnych krojów czcionek, co mogłoby wpływać negatywnie na estetykę i czytelność strony. Użycie 'font-family' w połączeniu z innymi właściwościami, takimi jak 'font-size' czy 'font-weight', pozwala na pełne dostosowanie wyglądu tekstu zgodnie z wymaganiami projektu.

Pytanie 18

W języku HTML, aby uzyskać efekt taki jak na przykładzie, należy zastosować konstrukcję

Duży tekst zwykły tekst

A. <p><strike>Duży tekst zwykły tekst</p>

B. <p><big>Duży tekst</p> zwykły tekst

C. <p><strike>Duży tekst</strike> zwykły tekst</p>

D. <p><big>Duży tekst</big> zwykły tekst</p>

W języku HTML, użycie znacznika <big> jest właściwym sposobem na zwiększenie rozmiaru tekstu, co w efekcie pozwala na wyróżnienie go w kontekście pozostałej treści. Znacznik ten jest jednak przestarzały i niezalecany w nowoczesnych praktykach, ponieważ CSS oferuje bardziej elastyczne i zaawansowane metody stylizacji. Przykładowo, zamiast stosować <big>, można wykorzystać stylizację CSS, aby uzyskać podobny efekt, co zwiększa kontrolę nad wyglądem elementów. Ponadto, zastosowanie znacznika <p> jako kontenera dla tekstu zapewnia semantyczną strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność. Przykładowo, użycie CSS może wyglądać tak: <p style='font-size: 1.5em;'>Duży tekst</p>zwykły tekst, co jest bardziej zalecane dla zachowania zgodności ze standardami. Warto pamiętać, że unikanie przestarzałych znaczników i stosowanie CSS zwiększa elastyczność i estetykę projektów HTML.

Pytanie 19

Jakim zapisem można w dokumencie HTML stworzyć element, który wyświetla obraz kotek.jpg oraz zawiera tekst alternatywny „obrazek kotka”?

A. <img src="/kotek.jpg" alt="obrazek kotka">

B. <img href="/kotek.jpg" alt="obrazek kotka">

C. <img href="/kotek.jpg" title="obrazek kotka">

D. <img src="/kotek.jpg" title="obrazek kotka">

Poprawna odpowiedź to <img src="/kotek.jpg" alt="obrazek kotka">, ponieważ stosuje właściwe atrybuty do wyświetlania obrazów w HTML. Atrybut 'src' wskazuje na źródło obrazu, a 'alt' zawiera tekst alternatywny, który jest ważny dla dostępności oraz SEO. Standardy WCAG (Web Content Accessibility Guidelines) podkreślają znaczenie atrybutu 'alt', który zapewnia kontekst dla użytkowników korzystających z czytników ekranu. Ponadto, zastosowanie tego zapisu jest zgodne z dobrymi praktykami, które zachęcają do dostarczania informacji o obrazie, gdy nie może on być wyświetlony. Przykładem zastosowania może być dodanie obrazów w artykułach blogowych, gdzie 'alt' opisuje zawartość obrazu, co poprawia ogólne wrażenie oraz dostępność treści. Prawidłowe użycie atrybutów jest kluczowe dla stworzenia semantycznego i dostępnego kodu HTML.

Pytanie 20

Który z poniższych zapisów CSS zmieni tło bloku na odcień niebieskiego?

A. div {color:blue;}

B. div {border-color:blue;}

C. div {shadow:blue;}

D. div {background-color:blue;}

Zapis 'div {background-color:blue;}' jest jak najbardziej na miejscu. Właściwość 'background-color' jest kluczowa, bo ustawia kolor tła dla elementów blokowych w CSS. Kiedy używasz 'blue' jako wartości, to mówisz, że tło ma być niebieskie. Ta właściwość jest częścią tego całego systemu CSS, który decyduje, jak powinny wyglądać elementy HTML. Ustawienie koloru tła jest ważne, bo wpływa na wygląd strony i to, jak kontrastują ze sobą tekst i tło, co jest istotne, by strona była dostępna dla każdego. Jeśli chciałbyś zmienić kolor tła, możesz korzystać z różnych wartości, takich jak kody HEX (np. #0000FF) albo RGB (np. rgb(0, 0, 255)). Możesz to zobaczyć w praktyce, na przykład: <div style='background-color:blue;'>Treść</div>, co ustawi tło 'diva' na niebieskie.

Pytanie 21

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

A. sprawdzania zgodności witryny ze standardem HTML5

B. walidacji stylów CSS

C. debugowania strony internetowej

D. walidacji kodu HTML i XHTML

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

Pytanie 22

Na podstawie filmu wskaż, która cecha dodana do stylu CSS zamieni miejscami bloki aside i nav, pozostawiając w środku blok section?

A. nav { float: left; } aside { float: left; }

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

C. nav { float: right; }

D. aside {float: left; }

Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 23

Taki styl CSS sprawi, że na stronie internetowej

ul{ list-style-image: url('rys.gif'); }

A. rys.gif wyświetli się jako tło dla listy nienumerowanej

B. rys.gif stanie się ramką dla listy nienumerowanej

C. punkt listy nienumerowanej będzie rys.gif

D. każdy punkt listy zyska osobne tło z grafiki rys.gif

Deklaracja CSS ul{ list-style-image: url('rys.gif'); } powoduje, że każdy element listy nienumerowanej (ul) używa obrazu rys.gif jako punktora. Właściwość list-style-image pozwala na zamianę domyślnego stylu punktów listy, takiego jak kropki czy kwadraty, na dowolny obrazek. Jest to przydatne, gdy chcemy nadać stronie unikalny wygląd lub dostosować ją do identyfikacji wizualnej marki. W praktyce oznacza to, że zamiast klasycznego punktora, użytkownicy zobaczą wybrany obraz, co może wpłynąć na estetykę i czytelność strony. Ważne jest, aby obraz był odpowiednio skalowany, aby nie zaburzał układu listy. List-style-image to standardowa właściwość CSS uznawana przez większość przeglądarek, co czyni ją uniwersalnym narzędziem w rękach projektanta stron. W procesie projektowania warto upewnić się, że wybrany obrazek jest dostępny dla wszystkich użytkowników, co można osiągnąć np. poprzez dodanie atrybutu alt w wersji tekstowej listy dla lepszej dostępności.

Pytanie 24

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

A. Rys. A

B. Rys. D

C. Rys. C

D. Rys. B

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

Pytanie 25

W CSS należy ustawić tło dokumentu na obrazek rys.png. Obrazek powinien się powtarzać tylko w poziomej osi. Jaką definicję powinien mieć selektor body?

A. {background-image: url("rys.png"); background-repeat: repeat-x;}

B. {background-image: url("rys.png"); background-repeat: repeat;}

C. {background-image: url("rys.png"); background-repeat: repeat-y;}

D. {background-image: url("rys.png"); background-repeat: round;}

Wybrana odpowiedź {background-image: url("rys.png"); background-repeat: repeat-x;} jest poprawna, ponieważ precyzyjnie definiuje tło dokumentu jako obrazek 'rys.png', który ma się powtarzać wyłącznie w poziomie. W CSS, właściwość 'background-image' pozwala na ustawienie obrazu jako tła, a 'background-repeat' kontroluje, w jaki sposób tło się powtarza. Użycie wartości 'repeat-x' oznacza, że obrazek będzie powtarzany tylko w osi poziomej, co jest idealne dla wzorów, które powinny być rozciągnięte na całej szerokości ekranu, ale nie na wysokości. Przykładem zastosowania może być stworzenie tła z deseniem, które ma być widoczne w poziomie, np. paski lub linie, co jest powszechnie stosowane w projektowaniu stron internetowych. Zgodnie z dobrymi praktykami, warto również pamiętać, aby dostosować rozmiar obrazka do wymagań responsywności, aby zapewnić optymalne wyświetlanie na różnych urządzeniach.

Pytanie 26

Jaką wartość w systemie szesnastkowym przyjmie kolor określony kodem RGB rgb(255, 128, 16)?

A. #ff8011

B. #008010

C. #ff8010

D. #ff0f10

Odpowiedź #ff8010 jest prawidłowa, ponieważ kolor o wartości rgb(255, 128, 16) w systemie szesnastkowym przekłada się na poszczególne wartości RGB. Wartości te są konwertowane w sposób następujący: 255 w systemie dziesiętnym odpowiada FF w systemie szesnastkowym, 128 to 80, a 16 to 10. Zatem, łącząc te składniki, otrzymujemy #ff8010. W praktyce, kolory te są często stosowane w projektowaniu graficznym oraz tworzeniu stron internetowych, gdzie dokładne odwzorowanie kolorów jest kluczowe. Kod szesnastkowy jest powszechnie używany ze względu na swoją kompaktowość i łatwość odczytu dla programistów. Warto więc zaznaczyć, że znajomość konwersji kolorów między różnymi systemami jest ważnym elementem w pracy nad kolorystyką w projektach cyfrowych oraz w branżach zajmujących się grafiką i designem. Dobre praktyki obejmują stosowanie narzędzi do wizualizacji kolorów oraz testowanie ich na różnych urządzeniach, aby zapewnić spójność wizualną.

Pytanie 27

Formatowanie CSS dla akapitu określa styl szarej ramki z następującymi właściwościami:

p {
    padding: 15px;
    border: 2px dotted gray;
}

A. Linia ciągła; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px

B. Linia ciągła; grubość 2 px; odległości poza ramką 15 px

C. Linia kreskowa; grubość 2 px; odległości poza ramką 15 px

D. Linia kropkowa; grubość 2 px; odległości pomiędzy tekstem a ramką 15 px

Analizując błędne odpowiedzi, kluczowe jest zrozumienie, jakie są podstawowe różnice między różnymi stylami ramki oraz ich właściwościami. Niepoprawne odpowiedzi często mylą typ linii ramki z jej grubością i zastosowaniem paddingu. Na przykład, przy styli 'solid' mówimy o linii ciągłej, a nie kropkowej, co jest istotną różnicą w kontekście estetyki i funkcji wizualnej. Grubość 2 px jest poprawna w niektórych odpowiedziach, ale problematyczne są inne elementy, takie jak zrozumienie pojęcia 'marginesu'. Marginesy różnią się od paddingu, ponieważ margines to przestrzeń zewnętrzna oddzielająca elementy od siebie, podczas gdy padding odnosi się do przestrzeni wewnętrznej. Odpowiedzi, które sugerują, że marginesy znajdują się pomiędzy tekstem a ramką, fałszywie interpretują, jak elementy są rozmieszczone na stronie. To prowadzi do mylnych wniosków, ponieważ w rzeczywistości marginesy zewnętrzne nie wpływają na bezpośrednią odległość tekstu od ramki, co może skutkować błędami w projektowaniu i implementacji stron. Zrozumienie tych różnic jest niezbędne dla efektywnego wykorzystania CSS i unikania typowych pułapek w projektach webowych.

Pytanie 28

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

A. D

B. C

C. A

D. B

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

Pytanie 29

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

A. MP3

B. MP4

C. WAV

D. PNG

Format MP4, znany również jako MPEG-4 Part 14, jest jednym z najpopularniejszych formatów multimedialnych, który umożliwia jednoczesny zapis zarówno dźwięku, jak i obrazu. Dzięki zastosowaniu zaawansowanej kompresji, MP4 pozwala na przechowywanie wysokiej jakości materiałów w stosunkowo małych plikach, co czyni go idealnym do przesyłania i strumieniowania w Internecie. MP4 obsługuje wiele kodeków, takich jak H.264 dla wideo oraz AAC dla dźwięku, co pozwala na szeroką kompatybilność z różnymi urządzeniami, od smartfonów po odtwarzacze multimedialne. Format ten jest zgodny z wieloma standardami, co czyni go wszechstronnym wyborem dla twórców treści. Przykłady jego zastosowania obejmują filmy wideo na platformach streamingowych, klipy muzyczne i wideoklipy. Dzięki swoim zaletom, MP4 stał się de facto standardem w przemyśle multimedialnym, co w znacznym stopniu przyczyniło się do jego popularności oraz wszechstronności.

Pytanie 30

Zadanie "drzewo kontekstowe" w edytorze WYSIWYG Adobe Dreamweaver jest przeznaczone do

A. formatowania treści za pomocą dostępnych znaczników

B. tworzenia szablonu strony internetowej

C. pokazania interaktywnego drzewa struktury HTML dla treści statycznych i dynamicznych

D. określenia kaskadowych arkuszy stylów powiązanych z witryną

Funkcja 'drzewo kontekstowe' w edytorze WYSIWYG Adobe Dreamweaver jest kluczowym narzędziem, które umożliwia wizualizację struktury dokumentu HTML w formie interaktywnego drzewa. Dzięki temu użytkownicy mogą łatwo zobaczyć hierarchię elementów, co znacząco ułatwia nawigację oraz edycję zawartości zarówno statycznej, jak i dynamicznej. Przykład praktycznego zastosowania tej funkcji to sytuacja, w której programista pracuje nad złożonym projektem, zawierającym wiele sekcji i podsekcji. Dzięki drzewu kontekstowemu może szybko zlokalizować i edytować konkretne elementy, co przyspiesza proces tworzenia stron. Ponadto, funkcja ta wspiera dobre praktyki, takie jak utrzymanie czystości kodu oraz jego struktury, co jest zgodne z wytycznymi W3C dotyczącymi pisania HTML. Umożliwia to także lepsze zrozumienie i zarządzanie kodem, co jest nieocenione w większych projektach z zespołami developerskimi.

Pytanie 31

Poprawny zapis znacznika , za pomocą którego można umieścić na stronie internetowej obraz rys.jpg przeskalowany do szerokości 120 px i wysokości 80 px z tekstem alternatywnym "krajobraz" to

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

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

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

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

Patrząc na Twoje błędne odpowiedzi, widać, że coś poszło nie tak z użyciem atrybutów HTML dla <img>. Na przykład, w pierwszej odpowiedzi masz 'href', co jest błędne, bo to atrybut dla <a>, a nie dla obrazków. W trzeciej odpowiedzi 'info' to w ogóle nie jest atrybut dla <img>, więc przeglądarki nie wiedzą, co z tym zrobić. W czwartej odpowiedzi widzę 'image', co też nie ma sensu według standardów HTML. <img> ma swoje standardowe atrybuty jak 'src', 'alt', 'width' i 'height', a reszta nie zadziała właściwie. Jak nie rozumiesz tych podstaw, to może prowadzić do kłopotów z kodowaniem i wyświetlaniem obrazków na stronie. No i pamiętaj, że brak 'alt' w tych odpowiedziach to duży problem, bo użytkownicy z różnymi ograniczeniami nie będą mogli zrozumieć, co jest na obrazkach. Wiedza o tym, co robi każdy atrybut w HTML, jest kluczowa, jak chcesz robić semantyczne i dostępne strony.

Pytanie 32

Aby na stronie internetowej umieścić logo z przezroczystym tłem, jaki format powinien być zastosowany?

A. CDR

B. BMP

C. JPG

D. PNG

Format PNG (Portable Network Graphics) jest preferowany do przechowywania obrazów z przezroczystym tłem, co czyni go idealnym wyborem dla logo. Główne zalety PNG to obsługa przezroczystości oraz wysoka jakość grafiki bez utraty danych, dzięki kompresji bezstratnej. W praktyce, kiedy logo jest umieszczane na różnych tłach, przezroczystość pozwala na harmonijne wpasowanie się w otoczenie, co zwiększa estetykę strony. Ponadto, PNG obsługuje różne poziomy przezroczystości (alfa), co daje projektantom więcej możliwości w zakresie efektów wizualnych. Użycie PNG w projektach internetowych jest zgodne z dobrymi praktykami w zakresie tworzenia responsywnych i estetycznych interfejsów, a także zapewnia kompatybilność z większością przeglądarek internetowych. Warto zauważyć, że PNG jest również często stosowany w grafikach wektorowych i ikonach, które wymagają przejrzystości. Korzystając z PNG, projektanci mogą być pewni, że ich grafiki będą wyglądać profesjonalnie na każdej platformie.

Pytanie 33

W języku CSS określono styl dla pola edycyjnego. Pole to będzie miało jasnozielony kolor tła, gdy będzie w trybie edycji.

A. gdy będzie na nie najechane kursorem bez kliknięcia.

B. po naciśnięciu na nie myszką w celu wpisania tekstu.

C. jeśli jest to pierwsze wystąpienie tego elementu w dokumencie.

D. w każdej sytuacji.

Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest prawidłowa, ponieważ reguła CSS <pre>input:focus { background-color: LightGreen; }</pre> odnosi się do stanu "focus" elementu formularza, który występuje, gdy pole edycyjne jest aktywne. To znaczy, że użytkownik musi kliknąć na pole, aby je aktywować, co pozwala na wprowadzenie danych. W momencie, gdy pole ma stan "focus", jego tło zmienia się na jasnozielone, co jest pomocne dla użytkowników, aby zidentyfikować, które pole aktualnie edytują. To zachowanie jest zgodne z dobrymi praktykami projektowania interfejsów użytkownika, które promują klarowność i intuicyjność. Dzięki zastosowaniu kolorów i wizualnych wskazówek, użytkownicy mogą łatwiej poruszać się po formularzach, co zwiększa ich efektywność. Ponadto, stosowanie takich reguł CSS jest zgodne z zaleceniami WCAG (Web Content Accessibility Guidelines), które składają się z wytycznych dotyczących dostępności treści internetowych, co sprawia, że aplikacje są bardziej przyjazne dla użytkowników z różnymi potrzebami.

Pytanie 34

W CSS, poniższy zapis spowoduje, że czerwony kolor zostanie zastosowany do

h1::first-letter {color:red;}

A. pierwsza litera nagłówka drugiego poziomu

B. pierwsza litera nagłówka pierwszego poziomu

C. tekst nagłówka pierwszego poziomu

D. pierwsza linia akapitu

Wiesz, użycie selektora CSS ::first-letter w połączeniu z stylem h1 to fajny sposób na zmianę wyglądu pierwszej litery w nagłówku. Kiedy używasz tego, kolor czerwony sprawi, że ta litera będzie się wyróżniać, co jest super, zwłaszcza w przypadku nagłówków czy akapitów. To technika, którą często stosuje się w projektowaniu stron, żeby nadać im trochę typograficznego stylu, jak w książkach z dużymi inicjałami. Ale pamiętaj, że ten selektor działa tylko z blokowymi elementami, takimi jak <p> czy <h1>, więc jeżeli spróbujesz zastosować go z elementami liniowymi, to niestety efekty nie będą takie, jak się spodziewasz. Zawsze warto też mieć na uwadze standardy W3C, bo one pomagają w tworzeniu dostępnych stron. No i ten selektor jest częścią specyfikacji CSS Pseudo-Elements Level 3, więc przeglądarki go dobrze wspierają. Zrozumienie, jak i kiedy stosować takie selektory, to klucz do tworzenia nowoczesnych stron.

Pytanie 35

Aby uczynić stronę internetową bardziej dostępną dla osób niewidomych, należy przypisać obrazom wyświetlanym za pomocą znacznika img odpowiedni atrybut

A. src

B. style

C. text

D. alt

Atrybut alt (alternatywny) jest niezbędnym elementem w kontekście dostępności stron internetowych. Jego podstawową funkcją jest dostarczenie opisu graficznego treści zawartych w obrazach dla użytkowników korzystających z czytników ekranu. Dzięki temu niewidomi lub słabo widzący użytkownicy mogą zrozumieć, co przedstawia dany obraz. Przykładowo, jeśli na stronie znajduje się zdjęcie przedstawiające psa bawiącego się w parku, atrybut alt mógłby mieć wartość "Pies bawiący się w parku na zielonej trawie". To pozwala użytkownikowi na mentalne odtworzenie obrazu i kontekstu. W praktyce, zgodnie z wytycznymi WCAG (Web Content Accessibility Guidelines), każdy obraz użyty na stronie internetowej powinien mieć przypisany opis w atrybucie alt, co zwiększa dostępność i użyteczność treści. Warto również pamiętać, że atrybut alt powinien być używany tylko w sytuacjach, gdy obraz ma znaczenie dla treści; obrazy dekoracyjne powinny mieć pusty atrybut alt (alt=""). Dobre praktyki w zakresie dostępności podkreślają, że właściwe stosowanie atrybutów alt nie tylko wspiera użytkowników z niepełnosprawnościami, ale także poprawia SEO, gdyż wyszukiwarki lepiej rozumieją treści obrazów.

Pytanie 36

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. loop i muted

B. controls i loop

C. autoplay i preload

D. controls i autoplay

Odpowiedź "controls i loop" jest całkiem dobra, bo te dwa atrybuty są naprawdę istotne, żeby wideo działało jak należy na stronie. Atrybut "controls" dodaje do odtwarzacza przyciski, które pozwalają na zatrzymywanie, odtwarzanie i regulowanie głośności, co jest bardzo wygodne dla ludzi. Z kolei "loop" sprawia, że filmik odtwarza się w kółko, co może być super użyteczne, szczególnie w prezentacjach albo reklamach, które chcemy pokazać kilka razy. Przykładowo, <video src='video.mp4' controls loop> wstawia wideo z przyciskami, które można łatwo obsługiwać, no i od razu się zapętla. W ogóle, korzystanie z tych atrybutów to dobra praktyka, bo sprawia, że strony są bardziej przyjazne dla użytkowników oraz poprawia ich doświadczenia.

Pytanie 37

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

A. <p>

B. <div>

C. <span>

D. <param>

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.

Pytanie 38

Aby wykonać przycisk na stronę internetową zgodnie z wzorem, potrzebne jest skorzystanie z opcji w programie do grafiki rastrowej

A. zaokrąglenie lub wybór opcji prostokąt z zaokrąglonymi rogami

B. zniekształcenia i deformacja

C. propagacja wartości

D. selekcja eliptyczna

Opcja zaokrąglenie lub wybranie opcji prostokąt z zaokrąglonymi rogami jest prawidłowa, ponieważ pozwala na stworzenie przycisku o nowoczesnym i estetycznym wyglądzie. W programach graficznych takich jak Adobe Photoshop lub GIMP opcja ta umożliwia użytkownikowi szybkie utworzenie prostokąta, którego rogi są zaokrąglone według określonego promienia. Jest to szczególnie przydatne w projektowaniu elementów interfejsu użytkownika, gdzie zaokrąglone rogi nadają wrażenie łagodności i nowoczesności. Stosowanie zaokrąglonych rogów jest zgodne z aktualnymi trendami UX/UI, które kładą nacisk na przyjazność i intuicyjność interfejsu. Praktyczne zastosowanie to nie tylko przyciski, ale również inne elementy graficzne takie jak pola tekstowe, karty czy okna dialogowe. Zaokrąglone rogi są również bardziej przyjazne dla oka, co jest istotne w kontekście użyteczności. Technicznie osiąga się to przez modyfikację kształtu obiektu wektorowego lub przez zastosowanie odpowiednich filtrów w grafice rastrowej. Warto też pamiętać o dostosowaniu promienia zaokrągleń do ogólnej estetyki projektu, co jest dobrą praktyką w projektowaniu graficznym.

Pytanie 39

Język HTML posiada nagłówki, które służą do tworzenia hierarchii treści. Nagłówki te występują tylko w zakresie

A. h1 – h6

B. h1 – h8

C. h1 – h4

D. h1 – h10

Odpowiedź h1 – h6 jest poprawna, ponieważ język HTML udostępnia sześć poziomów nagłówków, od h1 do h6, które służą do tworzenia hierarchii treści na stronie internetowej. Nagłówek h1 jest najważniejszy i powinien być używany do oznaczenia głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 wskazują na kolejne poziomy nagłówków, które pomagają w organizacji treści. Przykładowo, nagłówek h2 może być używany do sekcji, natomiast h3 może oznaczać podsekcje w ramach danej sekcji. Używanie nagłówków w ten sposób nie tylko poprawia czytelność i zrozumienie treści przez użytkowników, ale także pozytywnie wpływa na SEO (optymalizację dla wyszukiwarek). Warto pamiętać, że zgodnie z najlepszymi praktykami, powinno się unikać pomijania poziomów nagłówków, co zapewnia logiczną strukturę treści i ułatwia indeksację przez roboty wyszukiwarek.

Pytanie 40

W ramce przedstawiono właściwości pliku graficznego:

Wymiary:	4272 x 2848px
Rozdzielczość:	72 dpi
Format:	JPG

W celu optymalizacji czasu ładowania rysunku na stronę WWW należy:

A. zmniejszyć wymiary rysunku.

B. zmienić format grafiki na CDR.

C. zwiększyć rozdzielczość.

D. zmienić proporcje szerokości do wysokości.

Odpowiedź jest poprawna. Czas ładowania obrazu na stronę WWW jest w dużej mierze zależny od jego rozmiaru. Zasada jest prosta: im mniejszy rozmiar pliku, tym szybciej zostanie załadowany. Zmniejszenie wymiarów rysunku prowadzi do zmniejszenia rozmiaru pliku, co optymalizuje czas ładowania. W praktyce, oznacza to, że jeżeli masz obraz o wymiarach 2000x2000 pikseli, a na stronie prezentowany jest w wymiarach 500x500 pikseli, to wartość ta jest zdecydowanie za duża i może spowalniać ładowanie strony. Dobrą praktyką jest dostosowanie rozmiaru obrazu do rozmiaru, w jakim ma być wyświetlany na stronie. Warto jednak pamiętać, że zmniejszanie rozmiaru obrazu może wpływać na jego jakość, dlatego ważne jest znalezienie odpowiedniego balansu pomiędzy czasem ładowania a jakością prezentowanego rysunku.

Rozpocznij nowy egzamin

Powrót do strony głównej