Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

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

Egzamin niezdany

Wynik: 10/40 punktów (25,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby wyciszyć dźwięk w filmie odtwarzanym w przeglądarce, do podanej definicji znacznika <video> powinien zostać dodany atrybut <video> <source src="film.mp4" type="video/mp4"> </video>

A. autoplay

B. controls

C. loop

D. muted

Wydaje się, że zrozumienie roli atrybutów w znaczniku <video> jest kluczowe dla prawidłowego zarządzania odtwarzaniem filmów. Atrybut 'loop' służy do powtarzania odtwarzanego filmu, co może być przydatne w przypadku animacji lub prezentacji wizualnych, ale nie wpływa na dźwięk. Użytkownik może błędnie sądzić, że dodanie atrybutu 'loop' sprawi, że film nie będzie miał dźwięku, co oczywiście jest nieprawdziwe. Z kolei 'autoplay' automatycznie rozpoczyna odtwarzanie filmu po załadowaniu strony, co może być irytujące dla użytkowników, jeśli nie jest to poparte atrybutem 'muted' – w przeciwnym razie film z dźwiękiem może zaskoczyć odwiedzających. Atrybut 'controls' z kolei dodaje elementy sterujące, takie jak przycisk play/pause, co pozwala użytkownikom na aktywne zarządzanie odtwarzaniem, ale nie wpływa na to, czy dźwięk jest włączony czy wyłączony. Warto pamiętać, że stosowanie odpowiednich atrybutów w znaczniku <video> jest kluczowe dla poprawnego odbioru treści multimedialnych i zwiększa komfort użytkowników. Nieprawidłowe zrozumienie roli tych atrybutów może prowadzić do niepożądanych efektów oraz negatywnych doświadczeń użytkowników z interfejsem strony.

Pytanie 2

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr { background-color: Pink; }

C. tr:hover { 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

W pliku CSS znajdują się poniższe style. Kiedy klikniemy na hiperłącze i wrócimy na stronę, jego kolor zmieni się na

a { color: Brown; }
a:link { color: Green; }
a:visited { color: Red; }
a:hover { color: Yellow; }

A. brązowy

B. czerwony

C. żółty

D. zielony

W zrozumieniu działania stylów CSS dla hiperłączy kluczowe jest poznanie zastosowania pseudoklas takich jak a:link a:visited i a:hover. Każda z tych pseudoklas odpowiada za inny stan linku. Pseudoklasa a:link stosuje się do linków które użytkownik jeszcze nie odwiedził dlatego kolor zielony przypisany do tej pseudoklasy oznaczałby nieodwiedzony link co w tym przypadku jest nieprawidłowe. Pseudoklasa a:hover zmienia kolor podczas najechania myszką i tutaj ustalono kolor żółty który jest tylko tymczasowy. Błędne byłoby uznawanie że kolor żółty pozostanie po odwiedzeniu linku ponieważ dotyczy on jedynie stanu przejściowego. Pseudoklasa a:visited która definiuje kolor po odwiedzeniu jest tu kluczowa ponieważ określa właśnie kolor po powrocie na stronę. Zastosowanie odpowiednich stylów pomaga w nawigacji i poprawia dostępność. Typowe błędy związane z rozumieniem pseudoklas wynikają z braku znajomości ich specyfiki działania oraz priorytetu jaki mają w kaskadowym modelu stylów. Dlatego zrozumienie i prawidłowe stosowanie tych zasad jest fundamentalne w projektowaniu intuicyjnych i przyjaznych dla użytkownika stron internetowych co jest zgodne z najlepszymi praktykami branżowymi i standardami WCAG.

Pytanie 4

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}

Na stronie będą wyświetlane czcionką w kolorze niebieskim:

A. paragrafy, do których została przypisana klasa uzytkownik.

B. wszystkie akapity.

C. wszystkim elementom w sekcji <body> z przypisaną klasą uzytkownik.

D. tylko elementy tekstowe typu <p>, <h1>.

Klucz do tego pytania leży w zrozumieniu, jak działa składnia selektorów CSS. Wiele osób patrzy na fragment p.uzytkownik i automatycznie myśli: „to pewnie wszystkie akapity” albo „wszystko z klasą uzytkownik w body”. Tymczasem CSS jest dość precyzyjny. Sam selektor p oznaczałby rzeczywiście wszystkie paragrafy <p> w dokumencie, niezależnie od klas. Natomiast .uzytkownik bez literki przed kropką oznaczałby wszystkie elementy HTML, które mają w atrybucie class wpisane uzytkownik – mogłyby to być <p>, <div>, <span>, <h1> i inne. Właśnie taki zapis spowodowałby nadanie stylu „wszystkim elementom z klasą uzytkownik w body”, o ile oczywiście są w tym zakresie dokumentu. Pojawia się też częsty błąd myślowy, że skoro w pytaniu jest mowa o akapitach i o klasie, to może chodzi o „tylko elementy tekstowe typu <p>, <h1>”. CSS jednak nie rozumie pojęcia „element tekstowy” w taki sposób – <h1> to zupełnie inny typ elementu niż <p>, więc selektor p.uzytkownik nigdy nie dopasuje nagłówka <h1>, nawet jeśli nadasz mu class="uzytkownik". Żeby stylować zarówno <p>, jak i <h1> z tą klasą, trzeba by użyć selektora złożonego: p.uzytkownik, h1.uzytkownik { ... }. Z mojego doświadczenia wynika, że pomieszanie selektora typu, klasy i ich kombinacji to jedna z typowych przyczyn „magicznych” błędów w wyglądzie strony – coś nagle zmienia kolor, bo ktoś użył za szerokiego selektora .uzytkownik zamiast p.uzytkownik, albo odwrotnie, styl „nie działa”, bo autor oczekiwał, że reguła obejmie wszystko z daną klasą, a zawęził ją do konkretnego tagu. Dlatego dobrze jest zawsze czytać selektor od lewej do prawej: najpierw jaki element (p), potem jaka klasa (.uzytkownik). Tylko połączenie tych dwóch warunków powoduje zastosowanie stylu. W aktualnych specyfikacjach CSS (np. Selectors Level 3 i 4) ta logika jest jasno określona i jest standardem we wszystkich nowoczesnych przeglądarkach, więc warto się do niej przyzwyczaić i świadomie z niej korzystać.

Pytanie 5

Funkcję session_start() w PHP należy zastosować przy realizacji

A. jakiejkolwiek strony internetowej, która obsługuje cookies

B. przetwarzania formularza

C. wielostronicowej strony, która wymaga dostępu do danych podczas przechodzenia pomiędzy stronami

D. ładowania danych z zewnętrznych plików

Wybór odpowiedzi dotyczącej dowolnej witryny obsługującej ciasteczka wskazuje na niepełne zrozumienie roli sesji w PHP. Ciasteczka, choć są narzędziem do przechowywania danych w przeglądarkach, różnią się zasadniczo od sesji. Główną różnicą jest to, że ciasteczka są przechowywane po stronie klienta, co oznacza, że użytkownik ma dostęp do ich zawartości i mogą być one modyfikowane przez użytkownika. W przypadku sesji, dane są przechowywane po stronie serwera, co oferuje większe bezpieczeństwo i kontrolę nad danymi użytkownika. W kontekście wczytywania danych z plików zewnętrznych, nie ma związku z sesjami, ponieważ ta operacja nie wymaga przechowywania stanu użytkownika. Podobnie, odpowiedź dotycząca obsługi formularza również nie uwzględnia, że sesje są stosowane do utrzymywania stanu aplikacji, a nie do samej obsługi formularzy. Typowym błędem jest mylenie sesji z mechanizmami przechowywania danych, które są bardziej odpowiednie dla informacji statycznych, a nie dynamicznych interakcji użytkownika. Zrozumienie, kiedy używać sesji, a kiedy ciasteczek lub innych metod przechowywania, jest kluczowe dla tworzenia bezpiecznych i funkcjonalnych aplikacji internetowych.

Pytanie 6

Jakie kodowanie w języku HTML pozwala na sformatowanie paragrafu dla tekstu

 Tekst może być zaznaczony albo istotny dla autora

należy użyć polecenia?

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

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

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

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

Nieprawidłowe odpowiedzi zawierają różne błędy w zastosowaniu znaczników HTML, które wynikają z nieporozumienia dotyczącego ich semantyki i kontekstu użytkowania. W przypadku niepoprawnych odpowiedzi można zauważyć pomieszanie znaczników, co prowadzi do nieczytelnych lub mylących wyników. Użycie <i> zamiast <em> w niektórych odpowiedziach ignoruje semantyczne różnice, które są kluczowe w HTML5. Chociaż <i> jest zdefiniowane jako kursywa, nie przekazuje żadnych dodatkowych informacji o znaczeniu, podczas gdy <em> sygnalizuje, że dany tekst jest istotny. Warto również podkreślić, że błędne zamknięcie znaczników, jak w przypadku braku zamknięcia <mark> w niektórych odpowiedziach, prowadzi do nieprawidłowego renderowania strony i negatywnie wpływa na jej strukturę. Takie błędy mogą skutkować naruszeniem zasad walidacji HTML, co jest istotne dla osiągnięcia standardów branżowych. Właściwe i zgodne z normami używanie znaczników nie tylko poprawia estetykę strony, ale również jej funkcjonalność i dostępność. Ignorowanie tych zasad może prowadzić do problemów z indeksowaniem przez wyszukiwarki i ograniczyć dostępność treści dla osób korzystających z technologii asystujących. Dlatego tak ważne jest, aby stosować odpowiednie znaczniki zgodnie z ich przeznaczeniem, aby zapewnić optymalne doświadczenia użytkowników.

Pytanie 7

Aby uzyskać płynne przejścia obrazów w filmie, liczba klatek (niewchodzących w interakcję ze sobą) na sekundę powinna znajdować się w co najmniej takim zakresie

A. 16 - 19 fps

B. 20 - 23 fps

C. 24 - 30 fps

D. 31 - 36 fps

Wybór wartości spośród opcji takich jak 16 - 19 fps lub 20 - 23 fps nie zapewnia wystarczającej płynności obrazu w filmie. Kiedy liczba klatek na sekundę spada poniżej 24 fps, widzowie mogą doświadczyć efektów skoków w ruchu, co negatywnie wpływa na postrzeganie całości obrazu. Wartości te są przypisane do starszych technologii filmowych oraz do zastosowań, w których nie zależało na pełnej płynności. Na przykład, 18 fps był używany w niektórych wczesnych filmach niemych, ale ze względu na niewystarczającą ilość klatek na sekundę może prowadzić do niedoskonałości wizualnych. Podobnie, wybór 20 - 23 fps, chociaż teoretycznie bliższy standardowi 24 fps, w praktyce nie zapewnia odpowiedniej płynności dla współczesnych produkcji filmowych. W przypadku transmisji telewizyjnych, 30 fps jest bardziej akceptowalnym standardem, jednak nadal nie jest to idealne dla kinematografii, gdzie 24 fps preferuje się ze względu na estetykę i bardziej naturalne odwzorowanie ruchu. Wybierając niższe liczby klatek, można także napotkać problemy z synchronizacją dźwięku i obrazu, co skutkuje nieprzyjemnymi doświadczeniami wizualnymi. Dlatego warto pamiętać, że standardowe praktyki w branży filmowej są oparte na wieloletnich badaniach i doświadczeniach, które podkreślają znaczenie płynności w odbiorze wizualnym.

Pytanie 8

Podczas przygotowywania grafiki do umieszczenia na stronie internetowej konieczne jest wycięcie tylko pewnego fragmentu. Jak nazywa się ta czynność?

A. odwracanie obrazu.

B. kadrowanie.

C. zmiana rozmiaru.

D. łączanie warstw.

Skalowanie to po prostu zmiana rozmiaru obrazka, ale nie zmienia on jego zawartości. Jak robimy grafikę na stronę, to może to się nie najlepiej skończyć, bo obraz może się zniekształcić, a tego chyba nikt nie chce w profesjonalnych projektach. Odbicie obrazu to lustrzane odwzorowanie grafiki, które tak naprawdę nie ma nic wspólnego z kadrowaniem. Może w sztuce się przyda, ale do wycinania nie pasuje. Łączenie warstw to technika, gdzie nakładamy różne elementy na siebie i to też nie ma nic wspólnego z wycinaniem, a bardziej z integracją. Ogólnie rzecz biorąc, to wszystko wynika z mylenia podstawowych pojęć związanych z edycją grafiki. Ludzie mogą myśleć, że te techniki są podobne, co prowadzi do nieporozumień. Ważne jest, żeby wiedzieć, że każda z tych technik ma swoje cele, a kadrowanie to coś, co skupia się na wycinaniu i kompozycji.

Pytanie 9

Którą wartość atrybutu name znacznika <meta> wykorzystuje się do kontrolowania obszaru widzialnego na różnych urządzeniach, na których jest wyświetlana strona internetowa?

A. viewport

B. description

C. generator

D. keywords

W tym zadaniu kluczowe jest zrozumienie, że tylko meta o name="viewport" ma realny wpływ na sposób, w jaki przeglądarka wyznacza obszar widzialny strony na różnych urządzeniach. To właśnie ten atrybut informuje silnik renderujący, jak interpretować szerokość i skalę dokumentu HTML na ekranach o różnych rozdzielczościach i gęstościach pikseli. Pozostałe podane opcje pełnią zupełnie inne role i ich pomylenie z viewportem wynika zwykle z tego, że wszystkie są „jakimiś metadanymi” w <head>. Atrybut name="keywords" był kiedyś używany głównie dla wyszukiwarek do opisu słów kluczowych strony. Obecnie większość wyszukiwarek go ignoruje, bo był masowo nadużywany do spamowania słowami kluczowymi. Nie ma on żadnego związku z responsywnością, skalowaniem strony czy dopasowaniem do ekranu telefonu. To tylko tekstowa informacja, która nie wpływa na sposób renderowania layoutu. Podobnie meta name="description" służy do przekazania krótkiego opisu strony, który często pojawia się jako fragment w wynikach wyszukiwania (snippet). To ważny element SEO i użyteczności, ale ponownie – nie steruje szerokością widoku, nie zmienia zoomu i nie mówi przeglądarce, jak ma „ułożyć” stronę na małym ekranie. To czysta informacja opisowa. Z kolei meta name="generator" jest używana głównie przez systemy CMS (np. WordPress, Joomla) do wpisania nazwy i wersji narzędzia, którym strona została wygenerowana. Ma znaczenie informacyjne, czasem diagnostyczne, ale z punktu widzenia użytkownika końcowego i wyglądu strony nie wnosi nic. Nie wpływa ani na skalę, ani na szerokość, ani na responsywność. Typowym błędem jest wrzucanie wszystkich metatagów do jednego worka i zakładanie, że skoro „meta coś tam”, to pewnie ma wpływ na wyświetlanie strony. W rzeczywistości tylko meta viewport wprost steruje parametrami widoku na urządzeniach mobilnych. Dlatego przy projektowaniu stron responsywnych warto oddzielić w głowie metadane SEO (keywords, description, generator) od metadanych technicznych związanych z renderowaniem (właśnie viewport).

Pytanie 10

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 autoplay

C. autoplay i preload

D. controls i loop

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 11

Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px.

input[type=submit] {
  background-color: #000000;
  border: none;
  padding: 5px;
}                         A.

input[type=submit] {
  background-color: #ffffff;
  border: none;
  padding: 5px;
}                         B.

input=submit {
  background-color: #000000;
  border: none;
  margin: 5px;
}                         C.

input=submit {
  background-color: #000000;
  border: 0px;
  margin: 5px;
}                         D.

A. C.

B. A.

C. D.

D. B.

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

Pytanie 12

W CSS jednostką miary, która jest wyrażona w punktach edytorskich, oznaczana jest symbolem

A. px

B. in

C. em

D. pt

Jednostki 'em', 'px' oraz 'in' nie są związane z punktami edytorskimi, co czyni je nieodpowiednimi w tym kontekście. 'em' jest jednostką miary, która jest zależna od rozmiaru czcionki elementu nadrzędnego. To oznacza, że wartość '1em' odpowiada rozmiarowi czcionki zastosowanemu w danym kontekście. Używanie 'em' jest korzystne w przypadku responsywnego projektowania, ponieważ pozwala na skalowanie elementów w zależności od rozmiaru tekstu. Z kolei 'px', czyli piksel, to jednostka miary, która jest niezależna od rozmiaru czcionki i oznacza stałą wartość wyrażoną w pikselach. W świecie web designu, 'px' jest często preferowane ze względu na swoją przewidywalność i prostotę. Ostatnią z jednostek, 'in', oznacza cale i jest rzadko wykorzystywana w CSS, ponieważ jest bardziej związana z drukiem i rzadko stosowana w kontekście nawigacji webowej. W kontekście druku takie jednostki jak 'in' mogą być użyteczne, jednak w projektowaniu stron internetowych ich zastosowanie jest ograniczone. Każda z wymienionych jednostek ma swoje zastosowanie, ale nie można ich stosować zamiennie z 'pt', która jest jednoznacznie związana z punktami edytorskimi.

Pytanie 13

Który z poniższych formatów NIE umożliwia zapis plików animowanych?

A. SWF

B. SVG

C. ACE

D. GIF

Wybór formatu SWF sugeruje, że użytkownik myli zastosowania różnych formatów plików. SWF, czyli Shockwave Flash, to format, który był powszechnie używany do tworzenia animacji i interaktywnych aplikacji internetowych. Jest on oparty na wektorowej grafice i obsługuje dźwięk oraz skrypty, co czyni go idealnym do tworzenia złożonych animacji. Z kolei SVG, czyli Scalable Vector Graphics, to format oparty na XML, który pozwala na tworzenie grafiki wektorowej i również obsługuje animacje przy użyciu CSS oraz JavaScript. Poprzez błędne przypisanie funkcji animacyjnych do ACE, użytkownik może nie dostrzegać, jak różne formaty są projektowane z myślą o określonych zastosowaniach. GIF to format, który od lat jest popularny w sieci do prezentacji prostych animacji, zwłaszcza w mediach społecznościowych. Użytkownicy często mylą różne zastosowania formatów i mogą nie być świadomi, że istnieją formaty, które są specjalnie zaprojektowane do obsługi animacji, podczas gdy inne służą zupełnie innym celom, jak kompresja danych. Właściwe zrozumienie tych różnic jest kluczowe dla efektywnego projektowania treści multimedialnych oraz optymalizacji ich działania w różnych środowiskach.

Pytanie 14

W CSS zapis

a[target="_blank"] {color: yellow;}

spowoduje, że tekst linków przybierze kolor żółty.

A. linków, które otwierają się w tej samej karcie.

B. linków, które otwierają się w nowej karcie.

C. treści akapitu.

D. wszystkich linków.

Odpowiedź 'odnośników, które otwierają się w osobnej karcie' jest poprawna, ponieważ w CSS selektor 'a[target="_blank"]' odnosi się do elementów <a> (odnośników), które mają atrybut 'target' ustawiony na '_blank'. Oznacza to, że te odnośniki są zaprojektowane do otwierania linków w nowej karcie lub oknie przeglądarki. Przykład zastosowania: jeśli tworzymy stronę internetową z odnośnikami do zewnętrznych zasobów, użycie atrybutu 'target="_blank"' pozwala użytkownikom na zachowanie otwartej strony w przeglądarce. W CSS, kolor czcionki tych odnośników został ustawiony na żółty, co jest praktycznym podejściem do wyróżnienia ich w stosunku do innych linków. Warto również zauważyć, że stosowanie kolorów w kontekście dostępności jest istotne, dlatego dobór kolorów powinien być przemyślany, aby nie wpłynąć negatywnie na czytelność. Dobre praktyki obejmują również dodanie wskazówki do odnośnika, na przykład poprzez użycie atrybutu 'title', co jeszcze bardziej ułatwia użytkownikom zrozumienie, czego mogą się spodziewać po kliknięciu w link.

Pytanie 15

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. <ins>…</ins>

B. <code>…</code>

C. <blockquote>…</blockquote>

D. <pre>…</pre>

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 16

Jakie oprogramowanie do zarządzania treścią umożliwia proste tworzenie oraz aktualizację witryny internetowej?

A. CSS

B. SQL

C. CMS

D. PHP

Wybór SQL, PHP i CSS jako odpowiedzi na pytanie o system zarządzania treścią jest wynikiem nieporozumienia dotyczącego funkcji i zastosowań tych technologii. SQL (Structured Query Language) jest językiem zapytań służącym do komunikacji z bazami danych. Umożliwia on tworzenie, modyfikowanie oraz pobieranie danych, co jest kluczowe dla działania wielu aplikacji internetowych, w tym CMS-ów, lecz sam w sobie nie dostarcza interfejsu do zarządzania treścią. PHP to język skryptowy, często wykorzystywany do tworzenia dynamicznych aplikacji webowych. Choć PHP jest podstawą wielu systemów CMS, to sam język nie jest narzędziem do zarządzania treściami. CSS (Cascading Style Sheets) natomiast jest językiem stylizacji, który odpowiada za wygląd i układ strony, ale nie wprowadza funkcji zarządzania treścią. Zastanawiając się nad tymi technologiami, można zauważyć, że mylenie ich z CMS-em może wynikać z braku zrozumienia ich ról w ekosystemie webowym. Każda z tych technologii odgrywa istotną rolę w budowie i funkcjonowaniu stron internetowych, ale nie są one systemami do zarządzania treścią. Prawidłowe zrozumienie ich funkcji jest kluczem do efektywnego wykorzystania ich w praktyce.

Pytanie 17

W katalogu www znajdują się foldery html oraz style, w których umieszczone są odpowiednio pliki o rozszerzeniu html i pliki o rozszerzeniu css. Aby dołączyć styl.css do pliku HTML, należy użyć

A. <link rel="Stylesheet" type="text/css" href="/style/styl.css" />

B. <link rel="Stylesheet" type="text/css" href="/styl.css" />

C. <link rel="Stylesheet" type="text/css" href="/../style/styl.css" />

D. <link rel="Stylesheet" type="text/css" href="/www/style/styl.css" />

W kontekście programowania stron internetowych istnieje wiele aspektów związanych z dołączaniem stylów CSS w dokumentach HTML, które mogą prowadzić do niepoprawnych ścieżek. Wybrane przez nas niepoprawne odpowiedzi zawierają błędy związane głównie z nieprawidłowym określeniem lokalizacji pliku styl.css. W przypadku pierwszej odpowiedzi, href='/styl.css' wskazuje na to, że plik CSS znajduje się w głównym folderze serwera, co jest niezgodne z przedstawioną strukturą folderów. Z kolei w drugiej odpowiedzi, href='/style/styl.css' sugeruje bezpośrednią ścieżkę do folderu 'style' z poziomu głównego katalogu serwera, co również nie odpowiada układowi folderów, gdzie 'style' jest zagnieżdżony w katalogu 'www'. W trzeciej odpowiedzi, href='/www/style/styl.css' nie jest poprawne, ponieważ sugeruje, że folder 'www' jest katalogiem głównym serwera, co jest niezgodne z rzeczywistością. W rzeczywistości, folder 'www' jest folderem, z którego zwykle serwowane są pliki, a nie folderem, który jest bezpośrednio dostępny z poziomu WWW. Te wszystkie błędy ilustrują potrzebę zrozumienia struktury katalogów i zasad dotyczących ścieżek w HTML i CSS, by zapewnić, że pliki zostaną prawidłowo załadowane i będą dostępne dla przeglądarek internetowych.

Pytanie 18

Który fragment definicji dwukolumnowej tabeli odpowiada efektowi scalenia komórki 1 i 3, przedstawionemu na ilustracji?

A. <td colspan="2">komórka1+3</td>

B. <td colspan="3">komórka1+3</td>

C. <td rowspan="3">komórka1+3</td>

D. <td rowspan="2">komórka1+3</td>

Poprawnie wskazałeś fragment z atrybutem rowspan, czyli: <td rowspan="2">komórka1+3</td>. W HTML atrybut rowspan służy do scalania komórek tabeli w pionie, czyli wzdłuż wierszy. W tym przykładzie tabela ma dwie kolumny, a komórka „komórka1+3” zajmuje miejsce pierwszej komórki w pierwszym wierszu oraz pierwszej komórki w drugim wierszu. Dlatego właśnie wartość rowspan musi być równa 2 – ta jedna komórka rozciąga się na dwa wiersze. Gdy przeglądarka widzi taki zapis, rezerwuje dla tej komórki obszar dwóch komórek pod sobą, a w kodzie HTML w kolejnym wierszu pomijamy już odpowiednią liczbę komórek w tej kolumnie. Z mojego doświadczenia wynika, że przy projektowaniu tabel dobrze jest sobie najpierw „narysować” układ na kartce: ile wierszy, ile kolumn, które komórki się łączą. Potem łatwo dobrać czy potrzebujemy colspan (łączenie w poziomie – kolumny), czy rowspan (łączenie w pionie – wiersze). W specyfikacji HTML Living Standard dokładnie tak to jest opisane: rowspan określa, na ile wierszy rozciąga się dana komórka. W praktyce scalanie komórek przydaje się np. przy tworzeniu nagłówków tabel z opisami grup kolumn, przy harmonogramach, planach lekcji, cennikach, gdzie jedna pozycja obowiązuje przez kilka wierszy. Warto też pamiętać o semantyce: tam gdzie to możliwe, dla nagłówków stosujemy <th> z rowspan lub colspan, a dla zwykłych danych <td>. Taki porządek w kodzie ułatwia późniejsze stylowanie CSS i poprawia dostępność, bo czytniki ekranu lepiej rozumieją strukturę tabeli.

Pytanie 19

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. div

B. header

C. nav

D. aside

Znacznik <div> jest często używany do ogólnego grupowania elementów w HTML, ale nie niesie ze sobą semantycznego znaczenia, co oznacza, że nie informuje technologii wspomagających ani wyszukiwarek o roli, jaką pełni zawartość. W kontekście semantycznego HTML5, poleganie na znaczniku <div> nie wykorzystuje potencjału nowych standardów, które poprawiają dostępność i strukturę dokumentów. Znacznik <aside> jest zwykle używany do grupowania treści pobocznej, takiej jak reklamy czy linki powiązane, dlatego nie jest on odpowiedni do definiowania sekcji menu. <header> jest z kolei stosowany do elementów nagłówkowych, takich jak tytuły stron czy sekcje wstępne, co również nie pasuje do kontekstu sekcji nawigacyjnej. Właściwe wykorzystanie semantycznych znaczników pomaga nie tylko w lepszej organizacji kodu, ale także wspiera dostępność oraz optymalizację SEO, co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 20

W języku CSS zdefiniowano style dla znacznika h1 zgodnie z podanym wzorem. Przy założeniu, że żadne inne style nie są zastosowane do znacznika h1, wskaż właściwy sposób stylizacji tego elementu

A. D

B. B

C. C

D. A

Błędne odpowiedzi wynikają z nieprawidłowego zrozumienia zastosowania specyficznych stylów CSS. Font-style: oblique; jest często mylony z kursywą, czyli font-style: italic;. Oblique to bardziej subtelna forma pochylenia tekstu, która w projektach graficznych może nadawać bardziej nowoczesny wygląd. Dlatego inne opcje, które mogłyby sugerować użycie zwykłej kursywy, są nieprawidłowe. Font-variant: small-caps; często jest mylony z całkowitymi kapitalikami, co może prowadzić do nieporozumienia w formacie tekstu. Small-caps zachowuje proporcje tekstu, przekształcając tylko małe litery, co może być użyteczne w projektach, gdzie estetyka i elegancja są kluczowe. Niewłaściwe zrozumienie tego stylu może prowadzić do błędnych założeń o wyglądzie tekstu. Text-align: right; jest często zapominane, ponieważ większość tekstów w Internecie jest wyrównywana do lewej. Dlatego projekty, które wymagają wyrównania do prawej mogą być błędnie postrzegane jako niestandardowe lub nieoczekiwane. Poprawne użycie text-align: right; może jednak być kluczowe w układzie stron, gdzie asymetria i nowoczesny design są pożądane. Te błędne koncepcje pokazują, jak ważne jest zrozumienie i prawidłowe stosowanie specyficznych stylów CSS, ponieważ mogą one znacząco wpłynąć na wygląd i użyteczność projektu. Właściwe rozróżnienie tych stylów jest kluczowe dla profesjonalnego projektowania stron internetowych, gdzie detale wizualne i funkcjonalne mają istotne znaczenie dla końcowego użytkownika.

Pytanie 21

W języku HTML, dane dotyczące autora, opisu oraz słów kluczowych strony powinny być zamieszczone

A. pomiędzy znacznikami <head> i </head>, w znaczniku <style>

B. pomiędzy znacznikami <head> i </head>, w znaczniku <meta>

C. pomiędzy znacznikami <body> i </body>, w znaczniku <html>

D. pomiędzy znacznikami <body> i </body>, w znaczniku <meta>

Umieszczanie metadanych pomiędzy znacznikami <body> i </body>, w znaczniku <meta>, jest błędem, ponieważ sekcja <body> przeznaczona jest na treść, która ma być wyświetlana na stronie użytkownika. Znaczniki <meta> powinny znajdować się w sekcji <head>, aby metadane mogły być prawidłowo interpretowane przez przeglądarki oraz roboty wyszukiwarek. Zastosowanie znaczników <style> w sekcji <head> do wprowadzania informacji takich jak autor czy słowa kluczowe jest nieadekwatne. Znacznik <style> jest używany wyłącznie do definiowania stylów CSS, a nie do przechowywania metadanych. Umieszczanie metadanych w sekcji <html> jest również niepoprawne, ponieważ to nie jest dedykowane miejsce na te informacje. Sekcja <html> definiuje dokument HTML jako całość, a nie poszczególne aspekty, takie jak metadane. Dlatego kluczowe jest, aby wszystkie metadane były umieszczane w odpowiedniej sekcji <head>, co zapewnia ich funkcjonalność i zgodność ze standardami HTML.

Pytanie 22

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

A. RGBA

B. CMYK

C. HSLA

D. SRGB

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

Pytanie 23

Która z czynności NIE WPŁYNIE na wielkość zajmowanej pamięci pliku graficznego?

A. Interpolacja

B. Skalowanie obrazu przy użyciu atrybutów HTML

C. Kompresja

D. Zmiana rozdzielczości obrazu

Interpolacja, zmiana rozdzielczości obrazu oraz kompresja to operacje, które na różne sposoby wpływają na wielkość pliku graficznego. Interpolacja polega na dodawaniu nowych pikseli w celu zwiększenia rozmiaru obrazu, co w rezultacie zwiększa ilość danych i tym samym rozmiar pliku. Gdy obraz jest skalowany w górę, a algorytmy interpolacji nieuchronnie dodają nowe informacje, prowadzi to do wzrostu rozmiaru pliku. Z kolei zmiana rozdzielczości obrazu, która polega na zwiększeniu liczby pikseli w danym obrazie, również skutkuje jego powiększeniem. Im wyższa rozdzielczość, tym więcej informacji musi być przechowywanych, co zwiększa rozmiar pliku. Kompresja, mimo że jest techniką stosowaną w celu zmniejszenia rozmiaru pliku, w rzeczywistości zmienia dane obrazu, co również wpływa na jego ostateczną wielkość. Kompresja bezstratna i stratna oferują różne podejścia do redukcji rozmiaru, ale zawsze wprowadza to zmiany w oryginalnych danych. Typowym błędem jest mylenie skali wizualnej z rzeczywistym rozmiarem pliku, co prowadzi do nieprawidłowych wniosków o wpływie operacji na wielkość pliku. Zrozumienie tych różnic jest kluczowe w kontekście efektywnej optymalizacji obrazów w projektach webowych.

Pytanie 24

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

A. 16-19 fps

B. 31-36 fps

C. 20-23 fps

D. 24-30 fps

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

Pytanie 25

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

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

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

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

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

Wszystkie pozostałe odpowiedzi zawierają błędne podejścia do stylizacji tekstu. W pierwszym przypadku, użycie 'align' jest nieprawidłowe, ponieważ nie jest to uznawana właściwość CSS; w HTML, wyrównanie tekstu było obsługiwane przez atrybut 'align', ale jest już przestarzałe. Innym błędem jest zastosowanie 'positon', które zapewne miało odnosić się do 'position', lecz ta właściwość służy do określenia sposobu pozycjonowania elementów na stronie, a nie do wyrównania tekstu. 'font' z kolei odnosi się do stylów czcionek, takich jak rodzaj, rozmiar i styl, ale nie ma wpływu na wyrównanie tekstu. Te błędne odpowiedzi ukazują typowe nieporozumienia dotyczące właściwości CSS oraz ich zastosowań. Kluczowe jest zrozumienie, że każda właściwość CSS ma swoje specyficzne zastosowanie, a ich nieprawidłowe użycie prowadzi do nieoczekiwanych rezultatów na stronie. Aby uniknąć takich błędów, warto zapoznać się ze standardami CSS oraz dokumentacją, co pomoże w lepszym zrozumieniu i zastosowaniu odpowiednich właściwości do stylizacji tekstu. W praktyce, korzystanie z odpowiednich właściwości CSS nie tylko poprawia wygląd strony, ale również wpływa na jej dostępność i użyteczność.

Pytanie 26

W zaprezentowanym fragmencie dokumentu HTML ustalono stylowanie CSS dla selektora klasy "menu", aby kolor tła tego elementu był zielony. Które z poniższych określeń stylu CSS odpowiada temu stylowaniu?

<div class="menu"></div>

A. div.menu { background-color: green; }

B. #menu { background-color: rgb(0,255,0); }

C. div:menu { color: green; }

D. menu { background-color: rgb(0,255,0); }

Błędne odpowiedzi wynikają z niewłaściwego zastosowania selektorów w języku CSS. Selektor #menu sugeruje użycie ID, jednak w HTML identyfikator musi być unikalny, a zadanie dotyczy klasy, co implikuje użycie selektora klasy poprzedzonego kropką. Takie błędne użycie prowadzi do niezrozumienia podstawowej różnicy między klasami a identyfikatorami w CSS, co jest kluczowe w projektowaniu stron internetowych. Z kolei selektor menu { background-color: rgb(0,255,0); } jest niepoprawny, ponieważ nie odnosi się do konkretnego elementu. Chociaż specyfikacja CSS pozwala na selektory nazwane, najczęściej stosuje się je w kontekście semantycznym dla elementów HTML, a nie tych określonych przez klasy. Wreszcie, definicja div:menu { color: green; } używa błędnej składni, ponieważ pseudo-klasy w CSS są używane do stylizacji specyficznych stanów elementów, takich jak hover, active czy focus, a nie do stylizacji klas. Istotne jest zrozumienie, że użycie pseudo-klas wymaga odpowiedniego kontekstu, który w tym przypadku jest niepoprawnie użyty. Kluczem do poprawnego stosowania CSS jest zrozumienie specyfiki selektorów i ich właściwe wykorzystanie, co pozwala na efektywne zarządzanie stylem w projekcie webowym. Podstawową zasadą powinno być projektowanie stylów z myślą o ich wielokrotnym wykorzystaniu i utrzymaniu czystości kodu.

Pytanie 27

W języku HTML stworzono odnośnik z symbolem #. Co się wydarzy po kliknięciu na podany link?

A. Strona przewinie się do elementu z id o nazwie dane

B. Zostanie użyty względny adres URL o nazwie dane

C. Uruchomi się skrypt o nazwie dane

D. Otworzy się nowa karta przeglądarki zatytułowana dane

Pierwsza z niepoprawnych odpowiedzi sugeruje, że po kliknięciu w odsyłacz zostanie wywołany skrypt o nazwie 'dane'. To podejście jest nieprawidłowe, ponieważ odsyłacz w HTML ze znakiem # nie wywołuje żadnych skryptów. Hiperłącza z # są używane wyłącznie do nawigacji po stronie i nie mają związku z uruchamianiem skryptów. Druga odpowiedź wskazuje, że otworzy się osobna karta przeglądarki o nazwie 'dane', co również jest błędne. Hiperłącza zaczynające się od # nie prowadzą do nowych kart ani okien; zamiast tego zmieniają lokalizację w bieżącej karcie przeglądarki. Kolejna z niepoprawnych koncepcji sugeruje, że zostanie wybrany adres względny URL o nazwie 'dane'. Jednakże wykorzystanie # odnosi się do lokalizacji na tej samej stronie, a nie do adresów względnych. Warto zrozumieć, że adresy względne są używane do nawigacji pomiędzy różnymi stronami, a nie do lokalizacji na tej samej stronie. Typowym błędem myślowym w takich przypadkach jest mylenie funkcji hiperłączy z różnymi innymi mechanizmami, takimi jak skrypty, nowe karty czy adresy względne. Zrozumienie tych różnic jest kluczowe dla skutecznego projektowania stron internetowych oraz optymalizacji ich nawigacji.

Pytanie 28

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

A. wypunktowaną.

B. numerowaną.

C. skrótów.

D. odnośnikó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 29

Aby stworzyć szablon strony z trzema ustawionymi obok siebie kolumnami, można użyć stylu CSS.

A. .kolumny { float: left; width: 40%; }

B. .kolumny { float: right; height: 33%; }

C. .kolumny { float: left; width: 33%; }

D. .kolumny { clear: both; height: 33%; }

Niestety, twoja odpowiedź nie była poprawna. Tworzenie szablonu strony z trzema kolumnami ustawionymi obok siebie wymaga zastosowania właściwości CSS 'float: left;' i ustawieniu szerokości każdej kolumny na 'width: 33%;'. Te dwa elementy są kluczowe do osiągnięcia pożądanego układu. Właściwość 'float' służy do ustawiania elementów strony tak, aby inne elementy opływały je z jednej lub drugiej strony, a 'width' kontroluje szerokość elementu. Niepoprawne rozumienie tych fundamentalnych pojęć CSS może prowadzić do błędów w projektowaniu i kodowaniu stron internetowych, a następnie do niewłaściwego wyświetlania strony na różnych urządzeniach. Ważne jest, aby dokładnie zrozumieć, jak te i inne właściwości CSS działają, aby móc tworzyć funkcjonalne i atrakcyjne strony internetowe.

Pytanie 30

Jak nazwana jest technika dołączania arkusza stylów do dokumentu HTML użyta w podanym kodzie?

<p style="color:red;">tekst</p>

A. Styl wpisany, lokalny

B. Styl zewnętrzny

C. Styl alternatywny, zewnętrzny

D. Styl wewnętrzny

Styl wpisany lokalny jest metodą bezpośredniego przypisywania reguł CSS do konkretnych elementów HTML za pomocą atrybutu style W przedstawionym przykładzie kodu stylizacja jest dodawana bezpośrednio do elementu p co sprawia że ten element będzie miał tekst w kolorze czerwonym Styl wpisany jest szczególnie przydatny gdy chcemy wprowadzić szybkie zmiany dla pojedynczych elementów bez ingerowania w zewnętrzne lub wewnętrzne arkusze stylów Takie podejście jest używane w sytuacjach gdy stylizacja dotyczy jedynie pojedynczego elementu lub gdy chcemy nadpisać reguły z innych arkuszy stylów Jednak w kontekście skalowalności i utrzymania kodu nie jest to rekomendowane w większych projektach W takich przypadkach lepiej stosować style zewnętrzne które pozwalają na bardziej zorganizowane i zarządzalne podejście do stylizacji witryny Warto pamiętać że styl wpisany ma wyższy priorytet niż style zewnętrzne co oznacza że w przypadku konfliktu reguł to właśnie styl wpisany zostanie zastosowany Podstawową zaletą stylu wpisanego jest jego prostota i bezpośredniość co czyni go doskonałym narzędziem do szybkiego prototypowania

Pytanie 31

Przy założeniu, że nie istnieją inne definicje, jakie skutki będzie miało poniższe formatowanie CSS?

<style> td {padding: 30px; } </style>
 …
 <td style="padding: 10px;">Anna</td>
 <td>Ewa</td>

A. margines wewnętrzny komórki z napisem Anna wyniesie 10 px, a z napisem Ewa – 30 px

B. margines wewnętrzny komórki z napisem Anna wyniesie 30 px, a z napisem Ewa – 10 px

C. marginesy wewnętrzne wszystkich komórek wyniosą 30 px

D. marginesy wewnętrzne wszystkich komórek wyniosą 10 px

Odpowiedź jest poprawna, ponieważ w kodzie HTML zastosowano bezpośrednie nadpisanie stylu dla komórki z napisem Anna. Chociaż w sekcji style zdefiniowano, że wszystkie komórki td mają padding 30px, to w przypadku komórki Anna zastosowano style inline, które mają wyższy priorytet i nadpisują ustalone wcześniej wartości. W rezultacie padding dla komórki Anna wynosi 10px. Natomiast dla pozostałych komórek, w tym komórki z napisem Ewa, obowiązuje reguła zdefiniowana globalnie w sekcji style, czyli padding wynosi 30px. Jest to przykład specyficzności w CSS, gdzie style inline są bardziej specyficzne niż style w sekcji style. W praktyce ważne jest, aby rozumieć hierarchię i specyficzność CSS, ponieważ pozwala to na skuteczne zarządzanie stylami i unikanie niezamierzonych zmian w wyglądzie strony. Dobra praktyka nakazuje unikać styli inline na rzecz zewnętrznych arkuszy stylów, co ułatwia zarządzanie kodem i czyni go bardziej czytelnym oraz łatwiejszym w utrzymaniu. Warto też stosować metodologie takie jak BEM, które pomagają w organizacji kodu CSS.

Pytanie 32

Zademonstrowano efekt stylizacji CSS oraz kod HTML. W jaki sposób należy ustawić styl, aby uzyskać takie formatowanie?

A. p::first-line {font-size: 200%; color:brown;}

B. p.first-line {font-size: 200%; color:brown;}

C. #first-line {font-size: 200%; color:brown;}

D. .first-line {font-size: 200%; color:brown;}

Pozostałe odpowiedzi zawierają błędy koncepcyjne dotyczące zastosowania selektorów CSS. W przypadku odpowiedzi .first-line {font-size: 200%; color:brown;} zastosowano selektor klasy, który jest stosowany do elementów posiadających atrybut class. Jednak to nie dotyczy pierwszej linii tekstu, a całego elementu z przypisaną klasą. Z kolei #first-line {font-size: 200%; color:brown;} używa selektora identyfikatora, który jest unikalny dla całego dokumentu i odnosi się do konkretnego elementu z przypisanym id. Nie jest jednak przeznaczony do formatowania pierwszej linii tekstu. Odpowiedź p.first-line {font-size: 200%; color:brown;} błędnie łączy selektor elementu z klasą, sugerując, że wszystkie elementy <p> z klasą first-line będą tak sformatowane. Aby poprawnie sformatować pierwszą linię w paragrafie, należy użyć selektora pseudo-elementu ::first-line. Powszechnym błędem w rozumieniu tych koncepcji jest mylenie pseudo-elementów z klasami czy identyfikatorami, co prowadzi do błędnych założeń w stylizacji CSS. Zrozumienie różnic między selektorami i ich odpowiednie zastosowanie jest kluczowe w efektywnym projektowaniu stylów CSS, zgodnym z najlepszymi praktykami w branży.

Pytanie 33

Metainformacja “Description" zawarta w pliku źródłowym HTML powinna zawierać

<head>
     <meta name="Description" content="..." >
 </head>

A. informację, kto jest autorem strony.

B. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.

C. nazwę programu, przy użyciu którego została stworzona strona.

D. opis, co znajduje się na stronie.

Należy podkreślić, że choć autor strony czy program, którym strona została stworzona, to informacje mogą być ciekawe, nie są one celem metainformacji 'Description'. Informacje o autorstwie czy narzędziach służących do stworzenia strony mogą zostać uwzględnione w innych metatagach lub sekcjach strony, ale nie w 'Description'. Na przykład, metatag 'author' jest przeznaczony do wskazywania autora strony. Podobnie, informacje o oprogramowaniu, które zostało użyte do stworzenia strony, zwykle są zawarte w metatagu 'generator'. Co do wyrazów kluczowych, to choć są one istotne dla optymalizacji strony pod kątem wyszukiwarek, nie powinny być jedyną zawartością metatagu 'Description'. Kluczowe słowa powinny być raczej wplecione w naturalny, czytelny dla użytkownika opis strony. W ten sposób 'Description' staje się efektywnym narzędziem SEO, które pomaga zwiększyć ruch na stronie.

Pytanie 34

W HTML znacznik tekst będzie wyświetlany przez przeglądarkę w taki sam sposób jak znacznik

A. <sub>tekst</sub>

B. <b>tekst</b>

C. <h1>tekst</h1>

D. <big>tekst</big>

Znacznik <sub> służy do wyświetlania tekstu jako dolny indeks, co oznacza, że jego zastosowanie jest całkowicie inne niż w przypadku <strong> i <b>. Dolny indeks jest często używany w kontekście chemii lub matematyki, gdzie wyrażenia muszą być prezentowane w sposób zrozumiały dla specjalistów, co nie ma związku z semantyką wyróżnienia tekstu. Podobnie, <big> zmienia rozmiar tekstu, jednak nie nadaje mu żadnej dodatkowej wartości semantycznej. Użycie <big> w celu wyróżnienia tekstu jest nieefektywne, ponieważ nie przekazuje żadnej konkretnej informacji o znaczeniu tekstu. Znacznik <h1> oznacza nagłówek najwyższego poziomu, co jest całkowicie innym zastosowaniem niż w przypadku <strong>. Zastosowanie <h1> dla tekstu, który nie jest nagłówkiem, może wprowadzać w błąd zarówno użytkowników, jak i wyszukiwarki, co jest sprzeczne z zasadami SEO. Typowe błędy myślowe prowadzące do tych błędnych wyborów to nieodróżnianie semantyki od stylizacji wizualnej oraz brak zrozumienia, jak znaczniki HTML wpływają na dostępność i interpretację treści przez maszyny. Warto zaznaczyć, że stosowanie semantycznych znaczników HTML w odpowiedni sposób jest kluczowe dla tworzenia dostępnych i zrozumiałych stron internetowych.

Pytanie 35

.format1 {
    …
}

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

A. div = "format1"

B. id = "format1"

C. style = "format1"

D. class = "format1"

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

Pytanie 36

Jakiego znacznika używa się do definiowania listy definicji w kodzie HTML?

A. <label>

B. <dl>

C. <td>

D. <abbr>

Znaczniki <td>, <abbr> i <label> nie są odpowiednie do definiowania list definicyjnych w HTML, ponieważ pełnią zupełnie inne funkcje. Znacznik <td> służy do definiowania komórek w tabelach, stanowiących podstawowy element struktury tabelarycznej. Użycie <td> w kontekście definicji terminów nie jest zasadne, ponieważ nie jest przeznaczony do przedstawiania pary termin-definicja, a jedynie do formatowania danych w tabelach. Z kolei znacznik <abbr> jest używany do oznaczania skrótów oraz akronimów, co pomaga widocznie wskazać ich rozwinięcie, ale nie ma nic wspólnego z tworzeniem list definicyjnych. Zastosowanie <abbr> w kontekście definicji terminów mogłoby wprowadzać w błąd, ponieważ nie spełnia on funkcji opisowej listy. Ostatni z wymienionych znaczników, <label>, służy do powiązania etykiet z elementami formularzy, co jest istotne dla dostępności i użyteczności form, ale także nie ma zastosowania w przypadku definicji. W efekcie, żadna z tych trzech odpowiedzi nie niesie ze sobą funkcji potrzebnej do tworzenia list definicyjnych i może wprowadzać użytkowników w błąd, co do ich rzeczywistego znaczenia oraz zastosowania.

A. D.

B. B.

C. C.

D. A.

Przy ocenie, jak przeglądarka wyświetli formularz HTML, warto mieć na uwadze, że przeglądarki internetowe trzymają się dość sztywno tego, co wynika bezpośrednio z kodu źródłowego. Bardzo typowym błędem jest nadmierne skupienie się na samych polach wyboru czy zawartości formularza, bez uwzględnienia układu wynikającego z użycia znaczników <br> – to właściwie one decydują o tym, gdzie pojawiają się nowe linie. Ktoś może sądzić, że kolejność checked lub disabled zmieni znacząco wygląd – ale to nieprawda, bo atrybuty te wpływają na stan i interaktywność, a nie na rozmieszczenie. W jednej z błędnych propozycji pomieszano, które checkboxy są zaznaczone, a które nie, co prowadzi do przekłamań względem rzeczywistego kodu. Zdarza się też, że przy kopiowaniu kodu pomija się disabled lub checked przy konkretnym polu i całość wygląda inaczej niż powinna – tak po prostu nie działa przeglądarka. Ważne jest też zrozumienie, że disabled powoduje, iż pole jest wyszarzone i nie można na nim operować, natomiast checked przy polu checkbox ustawia je domyślnie jako zaznaczone. Pominięcie <br> po polu tekstowym sprawia, że kolejne elementy formularza lądują w jednej linii – co w praktyce bardzo rzadko się zdarza, bo narusza czytelność, a kod źródłowy wyraźnie tego nie przewiduje. Z mojego doświadczenia widziałem wiele formularzy, które przez nieuwagę programistów wprowadzały użytkownika w błąd przez złe rozmieszczenie elementów – nie chodzi tylko o „ładny wygląd”, ale też o funkcjonalność i dostępność. W praktyce branżowej trzymanie się tego, co wynika z kodu HTML, to podstawa, bo zapewnia przewidywalność działania na wszystkich platformach. Dobrym zwyczajem jest zawsze sprawdzić, jak kod wyświetla się w przeglądarce i porównać go z tym, co chcieliśmy osiągnąć. Dzięki temu unikamy nieporozumień i nieprawidłowych założeń, które mogą prowadzić do błędów zarówno w warstwie frontendowej, jak i podczas przetwarzania danych na serwerze.

Pytanie 38

Podczas weryfikacji pliku HTML5 pojawił się komunikat brzmiący: "Error: Element head is missing a required instance of child element title". Co to oznacza w kontekście dokumentu?

A. nie zdefiniowano elementu <title> w sekcji <head> dokumentu.

B. element <title> nie jest konieczny.

C. element <title> nie został prawidłowo zamknięty przez </title>.

D. nie zdefiniowano obowiązkowego atrybutu title w tagu <img>.

Twoja odpowiedź jest całkowicie trafna! Zgodnie z tym, co mówi specyfikacja HTML5, element <title> rzeczywiście jest obowiązkowy i musi znaleźć się w sekcji <head>. To bardzo ważne, bo tytuł strony to coś, co pokazuje się na karcie przeglądarki, a także w wynikach wyszukiwania. Jak go brakuje, to strona nie spełnia podstawowych wymogów i pojawia się błąd walidacji. Fajnie jest mieć unikalne i opisowe tytuły dla każdej strony, bo to korzystnie wpływa na SEO i użyteczność. Na przykład, jeśli robiłbyś stronę o kulinariach, to tytuł mógłby być "Przepisy na zdrowe obiady", co od razu informuje użytkowników i wyszukiwarki, o co chodzi. Dobrze dobrany tytuł to naprawdę kluczowa sprawa, bo ma duży wpływ na to, jak użytkownicy postrzegają Twoją stronę i czy klikną w link. Pamiętaj też, że element <title> powinien być krótki, ale wystarczająco informacyjny, zazwyczaj nie dłuższy niż 60 znaków.

Pytanie 39

Co się stanie po kliknięciu w link z HTML zawierający znak #?

<a href="#dane">

A. Strona przeskoczy do elementu o identyfikatorze równym dane

B. Otworzy się nowa karta w przeglądarce zatytułowana dane

C. Zostanie uruchomiony skrypt o nazwie dane

D. Zostanie wybrany względny adres URL o nazwie dane

Odpowiedź, że kliknięcie odnośnika ze znakiem # w href spowoduje wywołanie skryptu o nazwie dane, jest błędna, ponieważ atrybut href służy do określania celu hiperłącza, a nie wywoływania skryptów. Skrypty mogą być wykonywane za pomocą JavaScript, np. poprzez onclick, ale nie przez sam atrybut href z identyfikatorem. Stwierdzenie, że otworzy się osobna karta przeglądarki o nazwie dane, również jest nieprawidłowe. Atrybut href z wartością zaczynającą się od # nie otwiera nowej karty, lecz wskazuje na fragment aktualnej strony. Otwieranie nowej karty można osiągnąć przez ustawienie target="_blank", ale to wymaga pełnego URL lub ścieżki względnej bez #. Twierdzenie, że zostanie wybrany adres względny URL o nazwie dane, jest mylnym zrozumieniem nawigacji wewnętrznej. Nawigacja z użyciem # kieruje do elementu na tej samej stronie, a nie do pliku czy zewnętrznej lokalizacji. Takie błędne przekonania mogą wynikać z braku zrozumienia specyfiki nawigacji wewnętrznej w HTML i różnicy między kotwicami a tradycyjnymi linkami URL. Zrozumienie tych różnic jest kluczowe dla poprawnego tworzenia stron zgodnych ze standardami sieciowymi oraz dostępnych i przyjaznych dla użytkowników.

Pytanie 40

W kodzie HTML zamieszczono link do strony internetowej:

<a href="http://google.com">strona Google</a>

Jakie dodatkowe zmiany należy wprowadzić, aby link otwierał się w nowym oknie lub zakładce przeglądarki, dodając do definicji linku odpowiedni atrybut?

A. target = "_parent"

B. rel = "external"

C. rel = "next"

D. target = "_blank"

Atrybut target w HTML ma na celu określenie, w jaki sposób ma być otwierany odnośnik. Wartość _blank wskazuje przeglądarkę, że nowa strona powinna zostać otwarta w nowym oknie lub zakładce. Jest to istotne dla poprawy użyteczności strony internetowej, gdyż użytkownicy mogą łatwo wrócić do oryginalnej strony po otwarciu nowego linku. W kontekście dobrych praktyk w projektowaniu stron internetowych, otwieranie odnośników w nowym oknie jest zalecane w przypadku linków zewnętrznych, aby użytkownik nie opuścił aktualnej witryny. Przykładem zastosowania jest link do dokumentacji czy zasobów zewnętrznych, gdzie ma to na celu zachowanie kontekstu przeglądania. Stosując ten atrybut, warto jednak pamiętać o tym, aby nie nadużywać go, ponieważ może to być irytujące dla użytkowników, którzy wolą kontrolować, kiedy nowe okno jest otwierane. Warto również pamiętać, że w nowoczesnych standardach HTML5 atrybut target jest często stosowany w połączeniu z atrybutem rel, aby określić, czy link jest zaufany czy nie. Umożliwia to jeszcze lepsze zarządzanie bezpieczeństwem użytkowników.

Rozpocznij nowy egzamin

Powrót do strony głównej