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:54
Data zakończenia: 12 maja 2026 15:55

Egzamin niezdany

Wynik: 9/40 punktów (22,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Na ilustracji przedstawiono rezultat stosowania stylów CSS oraz odpowiadający mu kod HTML, który generuje ten przykład. Przyjmując, że marginesy wewnętrzne mają wartość 50 px, natomiast zewnętrzne wynoszą 20 px, styl CSS dla tego obrazu wygląda następująco

A. Odpowiedź A

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź D

W niepoprawnych odpowiedziach pojawiają się pewne niedociągnięcia, które mogą prowadzić do nieodpowiedniego wyświetlania elementów na stronie. Przykładowo, ustawienie marginesów i paddingów w nieodpowiedni sposób zmienia przestrzenność wokół obrazu, co może wpłynąć na jego rozmieszczenie i estetykę na stronie. Wybór nieodpowiedniego stylu obramowania, jak np. linia przerywana zamiast solidnej, może znacząco wpłynąć na odbiór wizualny i profesjonalizm projektu. Takie aspekty mogą być istotne w przypadku projektowania stron dla branż, które kładą nacisk na elegancję i prostotę. Ponadto, niespójne użycie kolorów tła i ramki może wprowadzać wizualny chaos, co jest przeciwieństwem dobrych praktyk projektowych. Edukując się z zakresu CSS warto zwrócić uwagę na to, jak różne właściwości stylów interakcji wpływają na ogólną harmonię projektu. Uwzględnianie wszelkich standardów i konwencji pozwala na tworzenie stron internetowych, które nie tylko będą estetyczne, ale również funkcjonalne i zgodne z oczekiwaniami użytkowników.

Pytanie 2

Jakie pojęcia są wykorzystywane do opisu interfejsu użytkownika serwisu internetowego?

A. Przyciski, menu, interakcja użytkownika z aplikacją

B. Przetwarzanie danych, system zarządzania treścią, projektowanie informacji

C. Wysyłanie zapytań do bazy, skrypty PHP

D. Szkic strony, mapa witryny, diagram przepływu informacji

Wybór odpowiedzi związanej z "Szkicem strony, diagramem witryny, diagramem przepływu informacji" wskazuje na pewne nieporozumienie dotyczące definicji interfejsu użytkownika. Szkice i diagramy są narzędziami służącymi do planowania i wizualizacji struktury i funkcji strony internetowej, ale same w sobie nie definiują, co stanowi interfejs użytkownika. Te pojęcia dotyczą bardziej fazy projektowania i architektury informacji, co jest istotne, ale nie odnosi się do interakcji z użytkownikiem. Podobnie, odpowiedzi związane z "wysyłaniem kwerend do bazy" oraz "skryptami PHP" również nie definiują interfejsu użytkownika. Te elementy dotyczą backendu, czyli serwera i logiki aplikacji, które są oddzielone od bezpośredniego doświadczenia użytkownika. Często pojawia się mylne założenie, że wszystkie aspekty technologii webowej są ze sobą powiązane, jednak istotne jest rozróżnienie pomiędzy frontendem a backendem. Właściwe zrozumienie tych ról jest kluczowe dla efektywnego projektowania stron internetowych, gdzie interfejs użytkownika odgrywa fundamentalną rolę w osiąganiu zamierzonych celów użytkownika i organizacji. Właściwa separacja tych koncepcji jest istotna dla efektywności procesu projektowania i tworzenia stron internetowych.

Pytanie 3

W poniższym zapisie CSS kolor zielony zostanie zastosowany do

h2
{
    background-color: green;
}

A. tła całej witryny

B. czcionki wszystkich nagłówków na stronie

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

D. czcionki nagłówka drugiego poziomu

Zrozumienie różnicy między background-color a innymi właściwościami CSS jest kluczowe dla poprawnego stylizowania elementów na stronach internetowych. Właściwość background-color nie wpływa na kolor czcionki, lecz jedynie na kolor tła określonego elementu. Dlatego zapis background-color: green; dla selektora h2 ustawia zielone tło dla wszystkich nagłówków drugiego stopnia na stronie. To skutecznie wyklucza możliwość, by dotyczyło to samej czcionki czy całej strony. Idea, że mógłby to być kolor czcionki dla nagłówków bądź całej strony, jest błędna, ponieważ do zmiany koloru czcionki używa się właściwości color, a nie background-color. Mylenie tych właściwości jest częstym błędem, jednak ich prawidłowe rozróżnienie pozwala na precyzyjne sterowanie wyglądem elementów. Przy zastosowaniu właściwych stylów można zyskać nie tylko na atrakcyjności wizualnej, ale także na dostępności i użyteczności. Warto też pamiętać o znaczeniu semantycznym tagów HTML, co w połączeniu z odpowiednim stylizowaniem wspiera lepszą indeksację przez wyszukiwarki internetowe oraz poprawia doświadczenie użytkownika w nawigacji po stronie. Takie zrozumienie pozwala na tworzenie stron zgodnych z aktualnymi standardami webowymi, promując dobre praktyki w projektowaniu interfejsów użytkownika. Zastosowanie zielonego tła dla <h2> jest zgodne z zasadami CSS, co pozwala na dokładne kontrolowanie stylu w nowoczesnych aplikacjach internetowych.

Pytanie 4

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

B. brązowy

C. czerwony

D. żółty

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 5

Podany fragment dokumentu HTML zawierający kod JavaScript sprawi, że po naciśnięciu przycisku

A. obraz2.png zostanie wymieniony na obraz1.png

B. obraz1.png zostanie wymieniony na obraz2.png

C. obraz1.png zostanie zniknięty

D. obraz2.png zostanie zniknięty

Załączony fragment kodu HTML pokazuje dwa elementy img oraz przycisk. Obrazek obraz2.png ma przypisany atrybut id o wartości id1. W kodzie JavaScript przypisanym do zdarzenia onclick przycisku wykorzystywana jest metoda document.getElementById('id1').style.display='none'. Ta metoda odwołuje się bezpośrednio do elementu o identyfikatorze id1 czyli obrazka obraz2.png i zmienia jego styl CSS display na none. W praktyce oznacza to że element ten zostanie ukryty na stronie po naciśnięciu przycisku. Praktyczne zastosowanie tej techniki to dynamiczne zarządzanie widocznością elementów na stronie bez konieczności jej przeładowania co poprawia doświadczenie użytkownika. Tego typu manipulacje DOM (Document Object Model) są podstawą interaktywnych aplikacji webowych i są powszechnie używane w nowoczesnym programowaniu JavaScript. Dobrym standardem jest jednak unikanie bezpośredniego pisania skryptów JavaScript w HTML co poprawia czytelność kodu i jego utrzymywalność

Pytanie 6

Którego znacznika nie powinno się umieszczać w nagłówku dokumentu HTML?

A. <title>

B. <h2>

C. <link>

D. <meta>

Znacznik <link> jest używany do definiowania relacji między dokumentem HTML a innymi zasobami, takimi jak style CSS, co czyni go istotnym elementem w nagłówku dokumentu. Umożliwia on m.in. podpięcie zewnętrznego arkusza stylów, który może znacząco wpłynąć na wygląd strony. Umieszczenie tego znacznika w nagłówku jest zgodne z dobrymi praktykami webowymi, a jego brak może prowadzić do niepoprawnego renderowania strony. Z kolei znacznik <title> jest kluczowy dla SEO, ponieważ określa tytuł strony, który jest wyświetlany w wynikach wyszukiwania oraz w zakładkach przeglądarek. <meta> z kolei dostarcza dodatkowych informacji o dokumencie, takich jak opis, słowa kluczowe czy dane o kodowaniu, co wpływa na sposób, w jaki strona jest interpretowana przez różne systemy. Rozumienie roli tych znaczników jest kluczowe dla każdego, kto zajmuje się tworzeniem stron internetowych. Często popełnianym błędem jest mylenie znaczenia poszczególnych znaczników i umieszczanie ich w niewłaściwych częściach dokumentu, co może prowadzić do problemów z dostępnością, SEO oraz renderowaniem zawartości. Właściwe użycie znaczników HTML w odpowiednich miejscach jest kluczowe dla zapewnienia optymalnej struktury i funkcjonalności strony.

Pytanie 7

Jakiego znacznika w języku HTML nie można użyć do wstawienia grafiki dynamicznej na stronę?

A. <object>

B. style="margin-bottom: 0cm;"><img>

C. <strike>

D. style="margin-bottom: 0cm;"><embed>

Wybór odpowiedzi 1, 3 lub 4 może wydawać się zrozumiały, jednak każdy z tych znaczników ma swoje specyficzne zastosowanie i może być użyty do integrowania grafik dynamicznych. Element <img> jest jednym z najbardziej powszechnie używanych znaczników do wyświetlania obrazów, zarówno statycznych, jak i dynamicznych, takich jak animacje w formacie GIF. Odpowiedź 3, <embed>, umożliwia osadzenie multimediów, takich jak wideo czy animacje Flash, a odpowiedź 4, <object>, jest elastycznym elementem, który może wyświetlać różne typy mediów, w tym grafiki i aplikacje interaktywne. Wybierając te odpowiedzi, można dojść do błędnego wniosku, że są one nieodpowiednie, gdyż wszystkie one wspierają umieszczanie mediów na stronie. Typowym błędem myślowym jest mylenie stylizacji tekstu z funkcjonalnością mediów, co prowadzi do niewłaściwego korzystania z semantyki HTML. Zrozumienie różnic między tymi znacznikami i ich zastosowaniem jest kluczowe dla efektywnego tworzenia stron internetowych oraz ich dostępności dla użytkowników.

Pytanie 8

Aby na stronie internetowej wyświetlić logo, którego tło jest przezroczyste, należy zastosować format

A. PNG

B. BMP

C. JPG

D. CDR

W tym zadaniu kluczowe jest zrozumienie, jakie właściwości mają różne formaty graficzne i do czego są projektowane. Wiele osób automatycznie wybiera JPG, bo „to przecież najpopularniejszy format obrazków w internecie”. I faktycznie, JPEG jest świetny do zdjęć, gdzie liczy się mocna kompresja i akceptowalna utrata jakości. Natomiast JPG nie obsługuje przezroczystości z prawdziwego zdarzenia – nie ma kanału alfa. Można co najwyżej kombinować z kolorem maskującym, ale w praktyce na stronach WWW kończy się to brzydkimi obwódkami i artefaktami na krawędziach logo. Dlatego stosowanie JPG do logo z przezroczystym tłem jest po prostu sprzeczne z dobrymi praktykami front-endu. Inny typowy trop to wybór formatu CDR, bo kojarzy się on z logotypami, poligrafią i projektowaniem. CDR to jednak natywny, wektorowy format programu CorelDRAW, przeznaczony do edycji, a nie do bezpośredniego wyświetlania w przeglądarce. Żadna standardowa przeglądarka nie wczyta pliku CDR jako obrazka w `<img>`. Pliki tego typu trzeba najpierw wyeksportować do formatu webowego, np. PNG, JPG albo SVG. Myślenie w stylu „logo jest z Corela, to dam CDR na stronę” wynika raczej z pomieszania formatu roboczego z formatem docelowym. Z kolei BMP to bardzo prosty, stary format map bitowych, który w praktyce w ogóle nie jest używany w profesjonalnym webdesignie. Co prawda można w nim zapisać informację o kolorach, ale nie oferuje on efektywnej kompresji, więc pliki są ogromne, a obsługa przezroczystości jest w praktyce problematyczna i nieprzystosowana do nowoczesnych wymagań stron WWW. Ładowanie ciężkiego BMP z logo na stronę tylko spowolni serwis i będzie sprzeczne z zasadami optymalizacji wydajności (performance, Core Web Vitals itd.). Dobra praktyka jest taka: dla logo z przezroczystym tłem wybieramy format, który zapewnia kanał alfa, bezstratną jakość i powszechną obsługę przez przeglądarki. W tym zestawie odpowiedzi spełnia to tylko PNG. Błędne odpowiedzi wynikają najczęściej z kierowania się popularnością formatu (JPG), skojarzeniem z narzędziem graficznym (CDR) albo z ignorowania wagi plików i standardów webowych (BMP). W projektowaniu stron warto zawsze myśleć o tym, jak przeglądarka faktycznie zinterpretuje dany format i czy spełni on wymagania: jakość, przezroczystość, rozmiar i kompatybilność.

Pytanie 9

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

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

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

B. informację, kto jest autorem strony.

C. opis, co znajduje się na stronie.

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

Poprawna odpowiedź to 'opis, co znajduje się na stronie'. Metainformacja 'Description' w pliku źródłowym HTML jest wykorzystywana przez wyszukiwarki internetowe do wyświetlania opisu strony w wynikach wyszukiwania. Dzięki temu użytkownik może zobaczyć na pierwszy rzut oka, czy strona jest związana z jego zapytaniem, czy też nie. Jest to jedno z kluczowych narzędzi w SEO (Search Engine Optimization), które ma na celu zwiększenie widoczności strony w wynikach wyszukiwania. W praktyce, opis powinien być krótki, zwięzły i zawierać ważne informacje o treści strony. Dobrą praktyką jest również uwzględnienie kluczowych słów, na które użytkownicy mogą szukać. Opis ten powinien być zrozumiały dla użytkowników, a także jest to miejsce, gdzie można wykorzystać strategie marketingowe, aby zachęcić do odwiedzenia strony.

Pytanie 10

Którego znacznika NIE NALEŻY umieszczać w nagłówku dokumentu HTML?

A. <title>

B. <link>

C. <h2>

D. <meta>

Wybierając <link>, <meta> i <title>, można łatwo się pogubić, bo to zupełnie inna bajka niż nagłówki. Znacznik <meta> służy do definiowania rzeczy takich jak opis strony czy słowa kluczowe i jest umieszczany w <head>. To ważne, bo przeglądarki i roboty indeksujące potrzebują tych informacji, co ma duże znaczenie dla SEO. <link> używamy do łączenia zewnętrznych zasobów, jak arkusze stylów CSS, co pozwala stronie ładnie wyglądać. A <title> to tytuł strony, który widać na karcie przeglądarki. Chociaż wszystkie te znaczniki są istotne, to mają inne zadania niż <h2>, które się zajmuje nagłówkami treści. Ogólnie ważne jest, żeby wiedzieć, co do czego służy, żeby dobrze formatować i organizować dokument HTML.

Pytanie 11

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

A. 20-23 fps

B. 31-36 fps

C. 24-30 fps

D. 16-19 fps

Wybór wartości poniżej 24 fps, takich jak 20-23 fps czy 16-19 fps, na pewno nie zapewni płynności obrazu w filmie. Klatkaż 20-23 fps nie tylko nie osiąga standardów branżowych, ale również wprowadza widza w kłopotliwy stan, ponieważ takie niskie wartości skutkują widocznymi skokami między klatkami. Kiedy klatkaż spada poniżej 24 fps, efekt staje się zbliżony do stroboskopu, co może być bardzo nieprzyjemne dla widza. Na przykład, przy 16-19 fps widać wyraźnie, że ruchy są zbyt szarpane, co prowadzi do utraty immersji w filmie. Ponadto, niektóre produkcje telewizyjne mogą wykorzystywać wyższe klatkaże, aby uzyskać lepszą jakość obrazu, jednak wybór 24-30 fps pozostaje kluczowy w kontekście klasycznych filmów. W przemyśle filmowym kluczowe jest, aby zrozumieć, jak liczba klatek wpływa na postrzeganie obrazu przez widza i jak standardy ustalone przez organizacje takie jak SMPTE wpływają na techniki produkcji. Niewłaściwy klatkaż nie tylko wpłynie na estetykę filmu, ale również na jego odbiór przez publiczność, co czyni ten temat krytycznym dla każdego, kto chce zrozumieć sztukę filmową.

Pytanie 12

Definicja stylu zaprezentowana w CSS odnosi się do odsyłacza, który

a:visited {color: orange;}

A. wskaźnik myszy znajduje się nad nim

B. został wcześniej odwiedzony

C. posiada błędny adres URL

D. jeszcze nie był odwiedzony

Wybór odpowiedzi związanej z błędnym adresem URL jest błędny, ponieważ kwestia odwiedzonych odsyłaczy w CSS nie ma związku z poprawnością adresu linku. Adres URL może być prawidłowy, a mimo to link może być nieodwiedzony lub odwiedzony, w zależności od tego, czy użytkownik wcześniej kliknął w dany odsyłacz. Użytkownicy często mylą te dwa pojęcia, co prowadzi do nieporozumień dotyczących działania linków w sieci. Kolejna błędna koncepcja to mylenie odsyłaczy z aktywnym stanem wskaźnika myszy. Pseudo-klasa `:hover` jest odpowiedzialna za stylizowanie odsyłaczy w momencie, gdy wskaźnik myszy znajduje się nad nimi, co jest zupełnie innym stanem niż stan odwiedzony. Takie pomylenie może prowadzić do nieprawidłowego projektowania interfejsu użytkownika, gdzie wizualizacje stanu linków są niewłaściwe. Z kolei stwierdzenie, że odsyłacz jeszcze nie został odwiedzony, ignoruje fakt, że stylizacja dotycząca odwiedzonych linków jest specyficzna dla tych, które były już otwarte przez użytkownika. Warto pamiętać, że CSS umożliwia precyzyjne definiowanie zachowań i stylów elementów, co powinno być stosowane zgodnie z ich przeznaczeniem i w dobrze zaplanowanej architekturze strony internetowej.

Pytanie 13

Znaczniki HTML <strong> oraz <em> używane do wyróżniania istotności tekstu, pod względem formatowania odpowiadają znacznikom

A. ```<b>``` oraz ```<u>```

B. ```<i>``` oraz ```<mark>```

C. ```<u>``` oraz ```<sup>```

D. ```<b>``` oraz ```<i>```

Wybór znacznika <i> oraz <mark> jako odpowiedzi na pytanie o semantyczne odpowiedniki <strong> oraz <em> można uznać za niepoprawny, ponieważ znaczniki te pełnią inne funkcje. Znacznik <mark> służy do wyróżniania tekstu, co ma na celu zwrócenie uwagi na istotne informacje, ale nie odnosi się bezpośrednio do semantycznego akcentowania. Z kolei <i>, mimo że jest używany do kursywnego pisma, nie niesie ze sobą znaczenia semantycznego, które jest kluczowe dla HTML5. Oznaczenie tekstu jako kursywy nie wskazuje, że tekst jest ważniejszy, a użycie <u> do podkreślenia tekstu, które sugeruje tylko wizualne podkreślenie, również nie ma semantycznego znaczenia. Znacznik <b> jest bardziej zbliżony do <strong> pod względem wizualnym, ale nie posiada jego semantycznej wartości. Używanie <u> czy <sup> do oznaczania ważności tekstu jest również błędne, ponieważ <sup> wskazuje na tekst w indeksie górnym, co nie ma związku z akcentowaniem. Typowe błędy myślowe w tym kontekście mogą wynikać z mylenia aspektów wizualnych z semantycznymi w HTML. Dlatego kluczowe jest, aby przy projektowaniu stron używać znaczników zgodnych z ich przeznaczeniem, co nie tylko poprawi strukturalność dokumentu, ale także przyczyni się do lepszego doświadczenia użytkownika oraz dostępności treści.

Pytanie 14

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

W tym zadaniu chodzi o zrozumienie, jak działają selektory CSS oraz pseudo-klasy odpowiedzialne za interakcję z użytkownikiem. Jeśli efekt ma pojawiać się tylko wtedy, gdy użytkownik najedzie myszką na wiersz tabeli, to zwykłe ustawienie background-color bez pseudo-klasy nie spełni tego warunku. Deklaracja tr { background-color: Pink; } oznaczałaby, że wszystkie wiersze tabeli są cały czas różowe, niezależnie od tego, czy ktoś na nie najedzie, czy nie. To jest po prostu styl statyczny, bez żadnej reakcji na zdarzenia. Podobnie zapis td, th { background-color: Pink; } ustawia tło dla wszystkich komórek tabeli (zarówno nagłówkowych th, jak i zwykłych td) w sposób stały. Moim zdaniem to dość częsty błąd: ktoś kojarzy tabelę z komórkami i intuicyjnie styluje td/th, ale zapomina, że w pytaniu chodzi o efekt dynamiczny „po najechaniu”. W rezultacie otrzymujemy tabelę pokolorowaną na stałe, bez jakiejkolwiek interakcji, co jest sprzeczne z założeniem zadania i z typowym zachowaniem tabel w nowoczesnych interfejsach. Ciekawsza jest kwestia selektora tr:active { background-color: Pink; }. Pseudo-klasa :active oznacza element w momencie „aktywacji”, czyli najczęściej w chwili klikania (przytrzymania przycisku myszy). Efekt trwa bardzo krótko, tylko w czasie samego kliknięcia. To zupełnie inny scenariusz niż wygodne podświetlenie wiersza, które ma się utrzymywać, dopóki kursor jest nad elementem. Użycie :active prowadzi do efektu, który miga na ułamek sekundy i z punktu widzenia ergonomii jest praktycznie bezużyteczny w kontekście podświetlania wierszy. Typowy błąd myślowy przy takich pytaniach polega na myleniu różnych pseudo-klas: :hover, :active, :focus. W webdevie przyjęło się, że :hover służy do reakcji na najechanie myszką, :active do krótkiej reakcji na kliknięcie, a :focus do zaznaczenia elementu, który ma aktualnie fokus klawiatury. Standardy CSS i dobre praktyki projektowania interfejsów jasno wskazują, że do efektu „podświetl wiersz, gdy nad nim jestem” należy użyć właśnie :hover na odpowiednim elemencie, czyli w tym przypadku tr. Wszystkie pozostałe odpowiedzi ignorują tę zasadę albo stosują nie tę pseudo-klasę, co trzeba, przez co nie odzwierciedlają poprawnie zachowania pokazanego w materiale wideo.

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

B. <code>…</code>

C. <ins>…</ins>

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

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

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

B. wykorzystanie walidatora kodu HTML

C. zainstalowanie różnych przeglądarek na kilku komputerach i testowanie strony

D. sprawdzenie działania strony w programie Internet Explorer, zakładając, że inne przeglądarki będą kompatybilne

Zainstalowanie na kilku komputerach różnych przeglądarek i testowanie witryny, choć może wydawać się sensowne, wiąże się z wieloma wadami. Po pierwsze, taka metoda jest czasochłonna i wymaga znacznych zasobów, zarówno w zakresie sprzętu, jak i czasu. Każda przeglądarka wymaga aktualizacji, a nowe wersje mogą wprowadzać zmiany, które wpływają na sposób wyświetlania witryny. Dodatkowo, różnorodność systemów operacyjnych i ich wersji, na których mogą działać te przeglądarki, dodatkowo komplikuje proces testowania. W kontekście walidatorów języka HTML, ich zastosowanie jest przede wszystkim ograniczone do sprawdzania poprawności kodu, a nie do testowania rzeczywistego działania witryny w różnych środowiskach. Z perspektywy praktycznej, testowanie w jednej przeglądarce, takiej jak Internet Explorer, z założeniem, że inne przeglądarki będą działać podobnie, jest nierealistyczne. Różne silniki renderujące i interpretujące kod HTML, CSS oraz JavaScript mogą prowadzić do odmiennych wyników. Właściwe przetestowanie witryny wymaga kompleksowego podejścia, które uwzględnia wszystkie możliwe przeglądarki i ich wersje, co czyni emulator najlepszym wyborem. Kluczem do sukcesu w testowaniu jest efektywność, a posłużenie się emulatorami znacząco podnosi jakość i szybkość weryfikacji funkcjonalności witryny.

Pytanie 17

Jak powinien być poprawnie zapisany znacznik <img>, służący do umieszczenia na stronie internetowej obrazu rys.jpg, przeskalowanego do szerokości 120 px oraz wysokości 80 px z tekstem alternatywnym "krajobraz"?

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

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

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

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

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

Pytanie 18

Jaką maksymalną ilość znaczników <td> można zastosować w tabeli składającej się z trzech kolumn i trzech wierszy, w której nie ma złączeń komórek ani wiersza nagłówkowego?

A. 12

B. 6

C. 3

D. 9

Wybór 3 jako liczby znaczników <td> jest niewłaściwy, ponieważ nie uwzględnia pełnej struktury tabeli. W przypadku tabeli o trzech kolumnach i trzech wierszach, każdy wiersz powinien zawierać wszystkie kolumny, co skutkuje 3 komórkami w każdym wierszu. To oznacza, że w sumie powstaje 3 x 3 = 9 komórek. Odpowiedź 6 mogłaby być mylona z sytuacją, w której w rozważanym układzie zredukowano by liczbę wierszy lub kolumn, lecz nie jest to zgodne z treścią pytania. Wybierając 12, sugeruje się zrozumienie, że można zwiększyć liczbę kolumn lub wierszy, co w tym kontekście nie jest możliwe, gdyż pytanie jednoznacznie określa ich liczbę. Błędne odpowiedzi mogą wynikać z niepełnego zrozumienia struktury tabel w HTML oraz ich zasady działania. Ważne jest, aby pamiętać, że każda tabela powinna być projektowana z myślą o przejrzystości i dostępności danych, a liczba znaczników <td> musi odzwierciedlać rzeczywiste dane, które mają być prezentowane. W praktyce, błędy te mogą prowadzić do chaosu w prezentacji danych, co utrudnia zarówno użytkownikom, jak i innym systemom, takich jak wyszukiwarki, właściwe zrozumienie struktury strony.

Pytanie 19

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

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

A. Efekt 3.

B. Efekt 2.

C. Efekt 4.

D. Efekt 1.

Niestety, podana przez Ciebie odpowiedź nie jest prawidłowa. Wybrałeś 'Efekt 1', 'Efekt 3' lub 'Efekt 4', które nie są poprawnym odzwierciedleniem działania formularza HTML w opisanym scenariuszu. Formularz zawiera pole tekstowe i dwa pola typu checkbox. Po wpisaniu do pola tekstowego wartości 'Przykładowy tekst' i wyświetleniu formularza w przeglądarce, powinniśmy zobaczyć ten tekst w polu tekstowym oraz dwa pola wyboru typu checkbox poniżej z etykietami 'Opcja1' i 'Opcja2'. Tylko Efekt 2 pokazuje taki układ. Możliwe, że błąd wynika z niezrozumienia struktury formularzy HTML lub z błędnego założenia o tym, jakie elementy są wyświetlane na podstawie danego kodu. Przy projektowaniu formularzy istotne jest zrozumienie, jak różne typy pól wpływają na wygląd i funkcjonalność formularza.

Pytanie 20

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

A. div {background-color:blue;}

B. div {shadow:blue;}

C. div {color:blue;}

D. div {border-color:blue;}

Tu niestety coś poszło nie tak. Odpowiedzi, które próbujesz zaznaczyć, nie ustawiają tła na kolor niebieski. Na przykład 'border-color:blue;' jest błędne, bo dotyczy tylko koloru obramowania, a nie tła. Więc, nawet jeśli obramowanie będzie niebieskie, tło pozostanie takie samo, co nie spełnia wymogów pytania. Z kolei 'shadow:blue;' to też nie to, bo właściwość 'shadow' nie jest standardowa w CSS. Jak chcesz dodać cień, powinieneś użyć 'box-shadow', co pozwala na dodanie efektu cienia do elementu. I jeszcze 'color:blue;' jest złe, bo 'color' dotyczy koloru tekstu, a nie tła. Więc, chociaż tekst będzie niebieski, tło i tak zostanie w domyślnym kolorze, a to nie odpowiada pytaniu. Zrozumienie tych właściwości jest super ważne, żeby dobrze stylizować strony i tworzyć estetyczne interfejsy.

Pytanie 21

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

A. W dokumencie wszystkie tagi są zapisane wielkimi literami

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

C. Dokument został zapisany w wersji HTML 5

D. Dokument został zapisany w wersji HTML 4

Wszystkie niepoprawne odpowiedzi opierają się na nieprawidłowych założeniach dotyczących definicji i funkcji deklaracji typu dokumentu (DOCTYPE). Odpowiedź sugerująca, że dokument został zapisany w HTML 4, ignoruje fakt, że HTML 5 jest wersją, która wprowadza wiele istotnych zmian oraz nowych elementów w porównaniu do starszych wersji. HTML 4 był szeroko stosowany, ale obecnie jest przestarzały, a jego zastosowanie nie jest zgodne z nowoczesnymi praktykami. Kolejna odpowiedź, która stwierdza, że wszystkie znaczniki w dokumencie muszą być zapisane wielkimi literami, jest błędna, ponieważ HTML jest językiem, który nie jest wrażliwy na wielkość liter. Znaczniki mogą być zapisywane zarówno małymi, jak i wielkimi literami, co jest zgodne z zasadami dobrych praktyk, które zalecają stosowanie małych liter dla większej czytelności. Wreszcie, stwierdzenie, że każdy znacznik musi być zamykany, jest również mylne, ponieważ HTML 5 wprowadza elementy samozamykające, takie jak <br> czy <img>, które nie wymagają zamknięcia. Zrozumienie tych różnic jest kluczowe dla efektywnego posługiwania się HTML i tworzenia poprawnych dokumentów webowych.

Pytanie 22

Jaki jest efekt działania programu w JavaScript?

var osoba = prompt("Podaj imię", "Adam");

A. uzyskanie z formularza wyświetlonego na stronie HTML imienia "Adam"

B. przypisanie do zmiennej osoba wartości "Adam"

C. otwarcie okna z polem do edycji, w którym znajduje się domyślny tekst "Adam"

D. pojawi się okno z pustym polem do edycji

Funkcja prompt w JavaScript jest używana do wyświetlania okna dialogowego z polem edycyjnym pozwalającym użytkownikowi na wprowadzenie danych. W tym przypadku funkcja prompt przyjmuje dwa argumenty: pierwszy to komunikat wyświetlany użytkownikowi, a drugi to domyślna wartość w polu tekstowym. Kod var osoba = prompt('Podaj imię' 'Adam') otwiera okno dialogowe z tekstem Podaj imię i domyślnie wpisanym w polu tekstowym imieniem Adam. Domyślna wartość jest przydatna w sytuacjach gdzie chcemy zasugerować użytkownikowi pewne dane które mogą być dla niego odpowiednie lub często używane. Jest to wygodne rozwiązanie w aplikacjach internetowych pozwalające na szybkie i intuicyjne wprowadzanie danych przez użytkownika. Zastosowanie prompt jest przykładem interakcji między użytkownikiem a stroną internetową co jest kluczowym elementem dynamicznych aplikacji webowych. Ważne jest jednak by pamiętać że funkcja prompt może być blokowana w niektórych przeglądarkach dlatego jej użycie powinno być dobrze przemyślane i ewentualnie zastąpione bardziej nowoczesnymi rozwiązaniami takimi jak formularze HTML z odpowiednimi atrybutami i stylizacjami.

Pytanie 23

Jakie będzie działanie po naciśnięciu przycisku oznaczonego jako "niebieski", który uruchamia podany kod JavaScript?

<p id="para1">Przykładowy tekst</p><p> i skrypt</p>
<button onClick="changeColor('blue');">niebieski</button>

<script type="text/javascript">
function changeColor(newColor)
{
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>

A. Zmiana koloru tekstu "i skrypt" na niebieski

B. Zmiana koloru tekstu "Przykładowy tekst i skrypt" na niebieski

C. Zmiana koloru tekstu "Przykładowy tekst" na niebieski

D. Zmiana barwy przycisku na niebieski

Przy analizie działania kodu przedstawionego w pytaniu istotne jest zrozumienie jak JavaScript oddziałuje z elementami DOM (Document Object Model). Istnieje powszechne nieporozumienie polegające na założeniu że funkcje JavaScript automatycznie działają na wszystkie elementy o podobnej treści. W rzeczywistości kod używa metody document.getElementById która jednoznacznie identyfikuje element na podstawie jego unikalnego Id. W omawianym przypadku odnosi się to do elementu paragrafu z identyfikatorem para1. Pozostałe fragmenty tekstu takie jak i skrypt nie są objęte tym działaniem gdyż nie są częścią identyfikowanego elementu. Popularnym błędem jest również zakładanie że przycisk zmienia swój własny kolor styli po naciśnięciu co w tym przypadku nie ma miejsca ponieważ kod bezpośrednio modyfikuje jedynie własności stylu określonego elementu przez jego Id. Warto zwrócić uwagę że dla złożonych manipulacji DOM w kontekście większych aplikacji webowych używa się bardziej zaawansowanych technik jak selektory CSS lub biblioteki takie jak jQuery które umożliwiają selekcję wielu elementów jednocześnie. Zrozumienie tych podstawowych zasad jest kluczowe dla poprawnego rozumienia i implementacji funkcji JavaScript w nowoczesnych aplikacjach webowych i zgodne z najlepszymi praktykami w branży.

Pytanie 24

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. element <title> nie został prawidłowo zamknięty przez </title>.

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

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

D. element <title> nie jest konieczny.

Wybierając odpowiedzi, które wskazują na inne problemy z elementem <title>, możesz się trochę pogubić jeśli chodzi o podstawowe zasady HTML5. Pamiętaj, że ten element jest obowiązkowy, a jak go brakuje w sekcji <head>, to pojawia się błąd, który pokazuje, że nie wszystko się zgadza z zasadami HTML. Myślenie, że <title> nie jest wymagany, to duży błąd, bo każda strona powinna mieć ten element, żeby działała poprawnie w przeglądarkach i wyszukiwarkach. Też stwierdzenie, że <title> nie jest zamknięty przez </title>, może sugerować, że myślisz, że ten element mógłby być opcjonalny, co jest nieprawdziwe. Jeśli masz <title>, to musi być on poprawnie zdefiniowany i zamknięty. A pomijanie atrybutu title w znaczniku <img> może być mylące, bo ten atrybut dotyczy opisu obrazków, a to wcale nie jest związane z tytułem dokumentu. Pamiętaj, że brak atrybutu alt w <img> może powodować problemy z dostępnością, ale nie wpływa na walidację sekcji <head>. Ważne jest, żeby zrozumieć kontekst i rolę każdego elementu HTML w budowie strony.

Pytanie 25

Która operacja nie wpłynie na wielkość zajmowanej pamięci przez plik graficzny?

A. Zmiana rozmiaru obrazu z użyciem atrybutów HTML

B. Kompresja

C. Modyfikacja rozdzielczości obrazu

D. Interpolacja

Zmiana rozdzielczości obrazu, interpolacja oraz kompresja to operacje, które w istotny sposób wpływają na rozmiar pliku graficznego, co często jest mylone z ich funkcjami wizualnymi. Zmiana rozdzielczości obrazu to proces, w którym liczba pikseli w obrazie jest modyfikowana, co prowadzi do mniejszej lub większej ilości danych do zapisania w pliku. Na przykład, zmniejszenie rozdzielczości z 300 DPI do 72 DPI znacząco redukuje rozmiar pliku, ponieważ zmniejsza liczbę informacji, które muszą być zapisane. Interpolacja natomiast jest techniką, która służy do obliczania wartości pikseli w nowych rozmiarach obrazu. W tym procesie generowane są nowe piksele, co często skutkuje zwiększeniem rozmiaru pliku, jeśli obraz jest powiększany. Kompresja to kolejny kluczowy element wpływający na rozmiar pliku. Kompresja stratna i bezstratna zmieniają sposób, w jaki dane obrazów są przechowywane, co może znacznie obniżyć wagę pliku. Typowe błędy myślowe związane z tymi operacjami polegają na założeniu, że manipulacje na poziomie wyświetlania nie mają wpływu na rzeczywiste parametry pliku graficznego. Ważne jest, aby zrozumieć, że każda z tych operacji ma swoje zastosowanie i wpływ na jakość oraz rozmiar pliku, co powinno być starannie rozważane podczas pracy z grafiką.

Pytanie 26

Strona internetowa została zaprezentowana w taki sposób:

Rozdział 1

tekst

Podrozdział 1.1

tekst

Podrozdział 1.2

Jakie są poprawne znaczniki do tego formatu?

A. <big>Rozdział 1</big>tekst<big>Podrozdział 1.1</big>tekst<big>Podrozdział 1.2</big>

B. <h1>Rozdział 1</h1> <p>tekst</p> <h2>Podrozdział 1.1</h2> <p>tekst</p> <h2>Podrozdział 1.2</h2>

C. <h1>Rozdział 1<p>tekst <h2>Podrozdział 1.1<p>tekst <h2>Podrozdział 1.2

D. <ul><li>Rozdział 1<li>tekst<li>Podrozdział 1.1<li>tekst<li>Podrozdział 1.2</ul>

Odpowiedź zawierająca znaczniki <h1>, <p> oraz <h2> jest poprawna, ponieważ odzwierciedla właściwą strukturę dokumentu HTML. Znaczniki nagłówków <h1> i <h2> są kluczowe dla hierarchii treści na stronie, co ma istotne znaczenie z punktu widzenia SEO oraz dostępności. Właściwe stosowanie tych znaczników wpływa na to, jak wyszukiwarki indeksują zawartość strony, a także ułatwia nawigację osobom korzystającym z urządzeń asystujących. Na przykład, znacznik <h1> powinien być używany raz na stronę, aby wskazać główny temat, podczas gdy <h2> może być stosowany do podziału treści na sekcje. Dodatkowo, znaczniki <p> są przeznaczone do wyświetlania akapitów tekstu, co jest standardową praktyką w tworzeniu treści webowych. Warto również pamiętać o zachowaniu odpowiednich zasad semantyki HTML, co bezpośrednio przekłada się na poprawę doświadczeń użytkowników oraz wydajność strony.

Pytanie 27

Na przedstawionej grafice znajduje się struktura sekcji dla witryny internetowej. Przyjmując, że blok5 nie ma przypisanej szerokości, a bloki są określone w dokumencie HTML w kolejności ich numeracji, jak powinno wyglądać zdefiniowanie opływania?

A. bloki 1, 2, 4 float: left; blok 3 float: right; blok 5 clear: both;

B. bloki 1, 2, 3, 4 float: right; blok 5 clear: right;

C. bloki 1, 2, 4 float: left; blok 3, 5 float: right;

D. blok 1 float: left; bloki 2, 4 float: center; blok 3 float: right; blok 5 clear: both;

Odpowiedź 3 jest poprawna, ponieważ odpowiada układowi bloków na stronie i ich pozycjonowaniu. Użycie właściwości CSS float: left; dla bloków 1, 2 i 4 pozwala im ułożyć się w linii po lewej stronie. Blok 3 z float: right; zostanie umieszczony po prawej stronie, co jest zgodne z przedstawionym układem. Blok 5 natomiast, znajdujący się na dole i rozciągający się na całą szerokość, wymaga użycia clear: both;, aby nie opływały go inne bloki i mógł zająć całą dostępną przestrzeń poziomą. Takie zastosowanie float i clear jest zgodne z najlepszymi praktykami w projektowaniu układów stron internetowych. Stylowanie za pomocą float jest powszechnie używane w CSS do tworzenia dynamicznych układów, a właściwość clear zapewnia, że element nie będzie opływany przez poprzedzające elementy pływające, co jest szczególnie istotne dla elementów podsumowujących lub końcowych na stronie.

Pytanie 28

Który znacznik ma zastosowanie w sekcji body dokumentu HTML?

A. <h2>

B. <title>

C. <meta>

D. <link>

W tym pytaniu często myli się dwa podstawowe obszary dokumentu HTML: sekcję <head> oraz sekcję <body>. To jest taki klasyczny błąd początkujących – wszystko wygląda jak „znaczniki HTML”, więc kusi, żeby wrzucać je wszystkie do jednego worka, a jednak każdy ma swoje konkretne miejsce i przeznaczenie. Sekcja <body> służy do umieszczania treści widocznej dla użytkownika: nagłówków, akapitów, obrazów, list, przycisków, formularzy. Natomiast <head> zawiera metadane, konfigurację i informacje pomocnicze dla przeglądarki, wyszukiwarek i innych narzędzi. Znacznik <link> jest elementem typowym dla sekcji <head>. Służy między innymi do podłączania arkuszy stylów CSS (np. <link rel="stylesheet" href="style.css">), ikon strony (favicon) czy innych zasobów powiązanych z dokumentem. Umieszczanie <link> w <body> jest sprzeczne z dobrą praktyką i specyfikacją – przeglądarka zwykle to „przełknie”, ale jest to zły nawyk i może powodować problemy z wydajnością i walidacją kodu. Podobnie <title> to znacznik, który definiuje tytuł strony wyświetlany na karcie przeglądarki oraz używany przez wyszukiwarki. On musi się znajdować w <head>. Nie jest elementem treści, którą widzi użytkownik w samym obszarze strony, tylko opisem dokumentu. Wstawienie <title> do <body> łamie strukturę dokumentu, a część narzędzi i walidatorów wskaże to jako błąd. Znacznik <meta> również należy wyłącznie do sekcji <head>. Służy do przekazywania metadanych, na przykład informacji o kodowaniu znaków (<meta charset="UTF-8">), opisu strony, słów kluczowych, ustawień dla robotów wyszukiwarek czy danych dla mediów społecznościowych (Open Graph). To są dane konfiguracyjne, a nie zawartość strony. Typowym błędnym myśleniem jest traktowanie wszystkich tych znaczników jako „zwykłych elementów HTML, które można dać gdziekolwiek”. W nowoczesnym podejściu kładzie się duży nacisk na semantykę: każdy element ma swoje logiczne miejsce. Dzięki temu kod jest czytelny, zgodny ze standardami W3C, lepiej interpretowany przez wyszukiwarki i narzędzia wspomagające. Dlatego w sekcji <body> powinniśmy umieszczać takie znaczniki jak <h1>–<h6>, <p>, <div>, <section>, <article>, <nav> i inne elementy treści, natomiast <link>, <title> i <meta> pozostają w <head>, bo pełnią zupełnie inną rolę niż widoczna zawartość strony.

Pytanie 29

Jaki zapis w dokumencie HTML umożliwia powiązanie z zewnętrznym arkuszem stylów o nazwie style.css?

A. <a src="style.css">

B. <link rel="stylesheet' src="style.css">

C. <a href="style.css">

D. <link rel="stylesheet" href="style.css">

Zapis <a src="style.css"> jest błędny, ponieważ element <a> służy do tworzenia odnośników do innych stron lub zasobów, a nie do dołączania arkuszy stylów. Atrybut 'src' nie jest właściwy dla elementu <a>, który powinien używać atrybutu 'href'. Zastosowanie elementu <a> w tym kontekście pokazuje typowy błąd myślowy, polegający na myleniu celów różnych znaczników HTML. Element <link> jest przeznaczony do osadzania zasobów, takich jak arkusze stylów, a nie <a>, które jest używane do nawigacji. Kolejny błąd występuje w zapisie <a href="style.css">, który również nie jest przeznaczony do dołączania arkuszy stylów. Choć użycie atrybutu 'href' jest poprawne, element <a> nie jest odpowiedni do tego celu. Stosowanie niewłaściwych znaczników może prowadzić do problemów z wydajnością i dostępnością strony. Zapis <link rel="stylesheet' src="style.css"> zawiera dodatkowy błąd związany z użyciem atrybutu 'src' zamiast 'href', co jest niezgodne z definicją elementu <link> w standardzie HTML. Używanie atrybutu 'src' w tym miejscu prowadzi do nieodpowiedniego załadowania stylów i może spowodować błędy w renderowaniu strony. Takie niepoprawne podejścia prowadzą do złożoności w zarządzaniu stroną i mogą skutkować trudnościami w utrzymywaniu spójności wizualnej oraz funkcjonalnej w projekcie.

Pytanie 30

Który z akapitów został zapisany w wskazanym stylu, zakładając, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 4

B. Efekt 3

C. Efekt 2

D. Efekt 1

W analizowanym pytaniu trzy efekty nie spełniają wszystkich warunków zdefiniowanych w stylu CSS dla paragrafu. Pierwszy efekt pokazuje tekst z niebieskim tłem który nie jest zgodny z zadanym stylem ponieważ kolor tła nie został określony w stylizacji. Zastosowanie niebieskiego tła często wynika z chęci wizualnego wyróżnienia elementu ale w tym przypadku styl określa jedynie kolor tekstu na niebieski a nie tła. Drugi efekt charakteryzuje się użyciem kursywy co również nie jest zgodne z deklaracją stylu CSS. Stylizacja paragrafu nie zawiera property font-style co oznacza że tekst powinien być w domyślnej formie czyli zwykły a nie kursywa. Trzeci i czwarty efekt mają niezgodne kolory tekstu i inne elementy które nie pasują do zadanego stylu. Typowym błędem w interpretacji stylów CSS jest niedokładne odczytanie wszystkich zdefiniowanych parametrów co prowadzi do błędnych założeń ostatecznego wyglądu elementu. Poprawne zrozumienie stylów wymaga zwrócenia uwagi na wszystkie atrybuty nawet jeśli nie są one wyraźnie widoczne na pierwszy rzut oka. W związku z tym kluczowe jest dokładne zapoznanie się z każdą definicją w stylu aby prawidłowo dopasować wygląd do specyfikacji.

Pytanie 31

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>

A. href = "#sekcja2"

B. href = "sekcja2"

C. href = "#r2"

D. href = "r2"

Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś 'href="#r2"', co jest poprawne, ponieważ w HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. W tym przypadku, miejsce docelowe to identyfikator (id) elementu na tej samej stronie. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. W tym konkretnym przypadku, 'r2' jest identyfikatorem rozdziału 2 na stronie, dlatego 'href="#r2"' skieruje odnośnik do tego rozdziału. W praktyce, używanie identyfikatorów pozwala na tworzenie skomplikowanych stron z wieloma sekcjami, gdzie odsyłacze umożliwiają łatwe i szybkie nawigowanie. To jest zgodne ze standardami i dobrymi praktykami dla tworzenia stron internetowych.

Pytanie 32

W JavaScript metoda getElementById odnosi się do

A. znacznika HTML o podanej nazwie klasy

B. znacznika HTML o wskazanym id

C. zmiennej numerycznej

D. klasy zdefiniowanej w CSS

Wybór innych opcji może wynikać z nieporozumień dotyczących funkcjonalności metody getElementById oraz jej roli w kontekście manipulacji DOM. Odpowiedzi wskazujące na zmienne liczbowe sugerują, że JavaScript może być używany w sposób przypominający inne języki programowania, w których zmienne mogą być wykorzystywane do identyfikacji elementów. W rzeczywistości jednak, JavaScript operuje na strukturach DOM, co oznacza, że identyfikacja elementów opiera się na ich atrybutach HTML, a nie na zmiennych jako takich. Klasa zdefiniowana w CSS to kolejny temat, który często wprowadza w błąd. getElementById nie może odwoływać się do klasy, nawet jeśli elementy mogą być stylowane za pomocą CSS. Warto zauważyć, że do odwołania się do elementów klasy w JavaScript służy metoda getElementsByClassName lub querySelectorAll, ale to nie jest funkcjonalność metody getElementById. Mylne jest również założenie, że metoda ta może odnosić się do znaczników HTML na podstawie ich nazw klasy. Identyfikatory są unikalne, więc próbując uzyskać dostęp do elementu przez nazwę klasy, można napotkać trudności, gdyż wiele elementów może dzielić tę samą klasę. Podsumowując, zrozumienie różnic pomiędzy identyfikatorem a klasą jest kluczowe dla efektywnego wykorzystania JavaScript w projektach webowych. Nieprawidłowe podejście do tych zasad prowadzi do błędów w kodzie oraz do problemów z jego utrzymywaniem.

Pytanie 33

Który atrybut pozwala na wskazanie lokalizacji pliku graficznego w znaczniku <img>?

A. alt

B. href

C. link

D. src

Wybór odpowiedzi, które nie odnoszą się do atrybutu 'src', może wynikać z niepełnego zrozumienia roli każdego z tych atrybutów w kontekście znacznika <img>. Atrybut 'alt' jest używany do opisu obrazów, co jest niezwykle istotne z punktu widzenia dostępności. Nie jest to jednak atrybut odpowiedzialny za lokalizację pliku graficznego, lecz ma na celu dostarczenie informacji o treści obrazu, gdy nie może on być wyświetlony lub dla użytkowników korzystających z technologii asystujących. 'Href' jest atrybutem używanym w znaczniku <a> do wskazywania adresu URL, do którego prowadzi odnośnik, a nie do lokalizowania obrazów. Z kolei 'link' nie jest standardowym atrybutem dla znacznika <img> i nie ma związku z wyświetlaniem obrazów, lecz odnosi się do relacji między dokumentami w nagłówku HTML. Te pomyłki mogą wynikać z nieprecyzyjnego zrozumienia, które atrybuty odpowiadają za konkretne funkcje w HTML. W praktyce, kluczowe jest, aby rozróżniać role różnych atrybutów oraz znać ich zastosowanie, co pozwoli na tworzenie bardziej profesjonalnych i funkcjonalnych stron internetowych. Dbanie o właściwe użycie atrybutów, takich jak 'src', 'alt' czy 'href', jest niezbędne, by zapewnić poprawne działanie oraz dostępność tworzonych rozwiązań internetowych.

Pytanie 34

Zdefiniowany styl CSS spowoduje, że nagłówki pierwszego poziomu będą

A. wyśrodkowane, pisane małymi literami, a odstępy między liniami ustalone na 10 px

B. wyśrodkowane, pisane wielkimi literami, a odstępy między literami ustalone na 10 px

C. wyjustowane, pisane wielkimi literami, a odstępy między liniami ustalone na 10 px

D. wyjustowane, pisane małymi literami, a odstępy między literami ustalone na 10 px

Analizując niepoprawne odpowiedzi kluczowe jest zrozumienie podstawowych właściwości CSS które zostały źle zinterpretowane. Po pierwsze właściwość text-align: center jest błędnie zrozumiana w kontekście odpowiedzi mówiących o wyjustowaniu. Wyjustowanie czyli wyrównanie tekstu zarówno do lewego jak i prawego marginesu wymagałoby użycia wartości justify co było nieprawidłowo domniemane. Kolejnym nieporozumieniem jest zastosowanie właściwości text-transform: uppercase która jednoznacznie oznacza zmianę liter na wielkie litery. Błędne odpowiedzi sugerujące pisanie małymi literami ignorują to bezpośrednie działanie transformacji tekstowej. Odstępy między literami a odstępy między liniami to dwie różne właściwości które w CSS są zarządzane za pomocą letter-spacing i line-height. Odpowiedzi wskazują na nieprawidłowe zrozumienie tych terminów co sugeruje brak rozróżnienia między przestrzenią wokół liter a wysokością linii tekstu. Zrozumienie różnic między tymi właściwościami jest kluczowe dla efektywnego stosowania CSS w praktyce projektowej gdzie precyzja i dokładność w stylizacji są niezbędne aby osiągnąć zamierzony efekt wizualny i funkcjonalny. Błędne interpretacje wynikają często z niewłaściwego zaznajomienia się z terminologią CSS co prowadzi do mylących założeń w projektowaniu stron internetowych

Pytanie 35

Aby ustawić tło na stronie www należy użyć polecenia

A. <body background=""></body>

B. <body bgcolor=""></body>

C. <bgcolor=""></bgcolor>

D. <background=""></background>

Wszystkie inne odpowiedzi zawierają błędy i nie są zgodne z aktualnymi standardami HTML. Użycie znacznika <background> jest niewłaściwe, ponieważ taki znacznik nie istnieje w HTML; w związku z tym nie ma możliwości jego zastosowania w dokumentach HTML. Co więcej, atrybut <bgcolor> występuje tylko w kontekście znacznika <body> i nie może być używany jako samodzielny element. W przypadku użycia <body background=''> sytuacja jest podobna. Atrybut background był stosowany w starszych wersjach HTML do określenia obrazu tła, co również jest przestarzałe, ponieważ CSS oferuje znacznie bardziej elastyczne opcje. Używanie <body background='url(obrazu.jpg)'> może wciąż działać w niektórych przeglądarkach, ale nie jest to polecana praktyka. Ostatecznie, użycie <bgcolor> jest także ograniczone, ponieważ nie można nim ustawić tła w postaci obrazów czy gradientów, co jest możliwe przy użyciu CSS. Dlatego warto przyjąć nowoczesne podejście do stylizacji stron internetowych, opierając się na CSS, co jest zgodne z aktualnymi standardami i praktykami w branży.

Pytanie 36

W CSS zastosowano regułę: float:left; dla bloku. Jakie będzie jej zastosowanie?

A. dopasowanie elementów tabeli do lewej krawędzi

B. wyrównanie tekstu do lewej strony

C. ustawienie bloku na lewo względem innych

D. umieszczanie bloków jeden pod drugim

Wybór odpowiedzi dotyczący wyrównania elementów tabeli do lewej strony jest błędny, ponieważ reguła 'float: left;' nie dotyczy bezpośrednio tabel ani ich elementów. Tabele mają swoje własne mechanizmy układowe, które są inne niż te, które kontroluje reguła float. W przypadku wyrównania tekstu do lewej strony, stosuje się regułę 'text-align: left;', która jest odpowiednia dla elementów blokowych, ale nie jest związana z 'float'. Ustawienie bloków jeden pod drugim również nie jest zgodne z działaniem float, ponieważ ta reguła nie prowadzi do takiego układu, lecz wręcz przeciwnie – float powoduje, że elementy są ustawiane obok siebie. Warto zauważyć, że float działa głównie w kontekście obszaru, w którym się znajduje, a jego zastosowanie wymaga ostrożności, by nie wprowadzać problemów z układami, co wielu początkujących web developerów nie dostrzega. Typowym błędem jest mylenie float z flexboxem, który jest bardziej intuicyjny i zapewnia lepszą kontrolę nad układem. Dlatego kluczowe jest zrozumienie, kiedy i w jaki sposób stosować float w kontekście układów CSS, aby unikać nieporozumień i problemów w realizacji projektów.

Pytanie 37

Dla akapitu zdefiniowano styl CSS. Które właściwości stylu CSS poprawnie określają dla akapitu czcionkę: Arial; rozmiar czcionki: 16 pt; oraz styl czcionki: pochylenie?

A. p{font-style: Arial; font-size: 16pt; font-variant: normal;}

B. p{font-family: Arial; font-size: 16px; font-variant: normal;}

C. p{font-family: Arial; font-size: 16pt; font-style: italic;}

D. p{font-style: Arial; size: 16px; font-weight: normal;}

Patrząc na inne odpowiedzi, widać tu sporo błędów dotyczących użytych właściwości CSS. W pierwszej odpowiedzi 'font-style' jest źle użyte, bo ta właściwość dotyczy stylizacji, a nie kroju czcionki. Do tego, 'size' zamiast 'font-size' to też błąd, bo 'size' nie działa w CSS, więc nie ma efektu w stylizacji. W drugim przypadku 'font-style' jest w porządku, ale powinno być ustawione na 'italic', a nie jako krój czcionki. Użycie '16pt' jest okej, ale brak 'font-family' oznacza, że nie ustaliliśmy kroju czcionki. W trzeciej odpowiedzi 'font-variant' to nie to, co potrzebujemy w kontekście pytania. Owszem, rozmiar czcionki '16pt' jest dobry, ale 'font-style' jest źle przypisany, co znów prowadzi do błędów. Te pomyłki pokazują, jak ważna jest znajomość terminów i ich odpowiednie stosowanie w CSS, co jest kluczowe, żeby projektować strony skutecznie i zgodnie z najlepszymi praktykami.

Pytanie 38

Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?

A. float: left;

B. table: left;

C. float: right;

D. clear: both;

Stosowanie table: left; w tym kontekście to strzał w kolano, bo taka właściwość nie istnieje. W CSS do tabel używamy innych właściwości jak display: table; lub display: table-cell;, ale nie do opływania elementów. A clear: both; jest używane, żeby zlikwidować opływ po float, więc to ważna sprawa, bo inaczej wszystko się sypie. Float: left; może opływać, ale w tej sytuacji nie postawi obrazka po prawej, bo ustawia go po lewej stronie. Wiele osób myśli, że float działa na osi Y, ale tak naprawdę dotyczy tylko osi X. Pamiętaj, że float, chociaż przydatny, to nie jedyny sposób na układanie elementów w CSS. Flexbox i grid to nowoczesne metody, które często są znacznie lepsze. By zbudować ładne interfejsy, musimy rozumieć jak różne właściwości CSS ze sobą współpracują.

Pytanie 39

Grafik pragnie przekształcić obraz JPG na format PNG bez utraty jakości, tak aby wszędzie tam, gdzie w oryginalnym obrazie występuje kolor biały, w docelowej wersji była przezroczystość. W tym celu powinien

A. przekształcić obraz w odcienie szarości

B. obniżyć rozdzielczość obrazu

C. zaimportować obraz do edytora grafiki wektorowej

D. dodać kanał alfa

Dodanie kanału alfa do obrazu jest kluczowym krokiem, aby przekształcić JPEG w PNG z zachowaniem przezroczystości. Format PNG obsługuje kanał alfa, który może przechowywać informacje o przezroczystości każdego piksela, co oznacza, że można zdefiniować, które części obrazu są w pełni widoczne, a które są całkowicie przezroczyste. W praktyce, po dodaniu kanału alfa, można użyć narzędzi edycyjnych, aby ustawić białe obszary na przezroczyste. Na przykład w programie GIMP lub Adobe Photoshop, można użyć narzędzia 'Magiczne różdżka' do zaznaczenia białego tła, a następnie usunąć je, co zamieni białe piksele na przezroczystość. Istotne jest, aby pamiętać, że JPEG nie wspiera przezroczystości, dlatego przekształcenie do formatu PNG jest niezbędne. Dobrą praktyką jest zawsze pracować na kopii oryginalnego obrazu, aby móc wrócić do źródłowego pliku, jeśli zajdzie taka potrzeba.

Pytanie 40

W CSS, żeby uzyskać efekt kursywy dla tekstu, należy zastosować właściwość

A. font-variant

B. font-size

C. font-family

D. font-style

W języku CSS, aby uzyskać efekt pochylenia tekstu, należy zastosować właściwość font-style, która umożliwia określenie stylu czcionki. Właściwość ta ma kilka wartości, z których najczęściej używaną jest 'italic', która pochyla tekst w sposób naturalny, przypominający ręczne pismo. Można także użyć wartości 'oblique', która również powoduje pochylenie, ale w nieco inny sposób, dając efekt bardziej syntetyczny. Przykładem może być następujący kod CSS: p { font-style: italic; }. Wartości te są zgodne z dokumentacją W3C, która definiuje standardy CSS. Użycie font-style jest kluczowe w projektowaniu responsywnych stron internetowych, gdzie estetyka i typografia odgrywają istotną rolę w odbiorze wizualnym. Pochylenie tekstu może być także użyte do wyróżniania cytatów lub nazw własnych, co zwiększa czytelność i przejrzystość dokumentu. Dobrą praktyką jest również testowanie stylów na różnych przeglądarkach, aby upewnić się, że efekt pochylenia jest zgodny z oczekiwaniami we wszystkich środowiskach.

Rozpocznij nowy egzamin

Powrót do strony głównej