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: 28 kwietnia 2026 13:28
Data zakończenia: 28 kwietnia 2026 13:51

Egzamin niezdany

Wynik: 18/40 punktów (45,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

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

A. <abbr>

B. <dl>

C. <td>

D. <label>

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.

Pytanie 2

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

B. viewport

C. keywords

D. generator

Poprawnie wskazana została wartość „viewport”. W praktyce właśnie meta name="viewport" służy do kontrolowania tzw. obszaru widzialnego (ang. viewport) na urządzeniach mobilnych i desktopowych. Przeglądarka mobilna domyślnie zakłada szeroką stronę i sztucznie ją pomniejsza, żeby „zmieściła się” na ekranie telefonu. Dopiero meta viewport mówi jej: potraktuj szerokość ekranu urządzenia jako bazową szerokość strony. Najczęściej spotykana, zgodna z dobrymi praktykami konstrukcja to: <meta name="viewport" content="width=device-width, initial-scale=1.0">. Parametr width=device-width ustawia szerokość obszaru widzialnego na szerokość ekranu urządzenia, a initial-scale=1.0 definiuje początkowe powiększenie. Dzięki temu layout responsywny oparty na media queries w CSS działa poprawnie, bez dziwnych przeskalowań i zbyt małej czcionki. W nowoczesnym front-endzie przyjmuje się, że każda strona, która ma być używalna na telefonach, tabletach i laptopach, powinna mieć prawidłowo ustawiony meta viewport. Moim zdaniem to jest absolutna podstawa RWD, zaraz obok poprawnego użycia jednostek względnych (np. %, vw, em) i zaprojektowania siatki w CSS. Warto też pamiętać, żeby nie przesadzać z blokowaniem powiększania (np. user-scalable=no), bo to pogarsza dostępność strony dla osób słabiej widzących i jest uznawane za złą praktykę. Podsumowując: jeśli chcesz mieć stronę, która naprawdę „żyje” na różnych ekranach, meta name="viewport" to obowiązkowy element w sekcji <head>.

Pytanie 3

Zastosowanie bloku deklaracji background-attachment: scroll sprawia, że

A. tło strony będzie się przesuwać razem z tekstem

B. grafika tła będzie się powtarzać (kafelki)

C. grafika tła znajdzie się w prawym górnym rogu strony

D. tło strony pozostanie statyczne, a tekst będzie się przesuwał

Inne odpowiedzi na to pytanie są niepoprawne z kilku powodów. Stwierdzenie, że grafika tła będzie wyświetlona w prawym górnym rogu strony, jest mylące, ponieważ właściwość 'background-attachment' nie wpływa na położenie tła, a jedynie na jego zachowanie podczas przewijania. Pozycjonowanie tła jest kontrolowane za pomocą właściwości 'background-position', która definiuje, gdzie tło ma być umieszczone, a nie jak się zachowuje w kontekście przewijania. Warto również zauważyć, że tło strony może być umieszczone w dowolnym miejscu, a nie tylko w jednym rogu. Inną nieprawidłową koncepcją jest stwierdzenie, że tło strony będzie stałe, a tekst będzie się przewijał. Taka konfiguracja odpowiada właściwości 'background-attachment: fixed', która rzeczywiście utrzymuje tło w stałej pozycji podczas przewijania zawartości. To prowadzi do błędnych wniosków, ponieważ mieszanie tych właściwości może skutkować niezamierzonymi efektami wizualnymi. Ostatnia odpowiedź, sugerująca, że grafika tła będzie powtarzana, odnosi się do 'background-repeat', która kontroluje, czy tło powinno być powtarzane, co jest niezwiązane z przewijaniem. Użytkownicy często mylą te właściwości, co prowadzi do niepoprawnych interpretacji efektów wizualnych. W praktyce ważne jest, aby zrozumieć, że każda z tych właściwości ma swoje unikalne zastosowanie i wpływ na wygląd oraz funkcjonalność strony internetowej.

Pytanie 4

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

A. propagacja wartości

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

C. zniekształcenia i deformacja

D. selekcja eliptyczna

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

Pytanie 5

W którym z poniższych przykładów walidacja fragmentu kodu CSS zakończy się sukcesem?

A. p { font-weight:bold; }

B. <p style="font-style:bold;">

C. <p style="font-size:bold;">

D. p { text-size:bold; }

Odpowiedzi, które próbują zastosować atrybuty stylów w niepoprawny sposób, zdradzają zrozumienie składni CSS oraz zasad stylizacji dokumentów HTML. W przypadku <p style="font-style:bold;"> pojawia się błąd, ponieważ atrybut style powinien zawierać właściwość font-weight, a nie font-style. Właściwość font-style jest przeznaczona do określenia stylu czcionki, takiego jak italic czy normal, a nie do ustawiania jej grubości. Zatem użycie 'bold' w kontekście font-style jest nieprawidłowe i prowadzi do tego, że przeglądarka nie zastosuje żadnej stylizacji. W kolejnej opcji, p { text-size:bold; }, znowu widzimy błąd w nazwie właściwości. Nie istnieje właściwość CSS o nazwie text-size; powinna być użyta font-size, a wartością mogą być jednostki takie jak px, em, rem itp. Ponadto, wartość 'bold' nie jest odpowiednia dla font-size, ponieważ ta właściwość przyjmuje liczby i jednostki, a nie stylizację. Ostatnia odpowiedź, <p style="font-size:bold;">, również jest błędna z tego samego powodu co wcześniej - font-size wymaga konkretnej wartości w jednostkach, a 'bold' nie jest akceptowalną wartością. Te błędne odpowiedzi pokazują, jak ważne jest zrozumienie składni CSS i stosowanie właściwych nazw właściwości w celu efektywnego stylizowania dokumentów HTML.

Pytanie 6

Wskaż, które z poniższych zdań jest prawdziwe w odniesieniu do definicji stylu: ``````

A. Akapit będzie przekształcany na małe litery

B. Odnośnik będzie napisany czcionką o rozmiarze 14 punktów

C. Jest to styl zasięg lokalny

D. Zdefiniowano dwie klasy

Pierwsza odpowiedź sugeruje, że styl jest lokalny, ale tak naprawdę to nie jest do końca prawda. Definicje stylów w tym kodzie są globalne, więc nie możesz mówić o stylach lokalnych, które odnosiłyby się tylko do konkretnego elementu. Klasy w arkuszu stylów są dostępne w całym dokumencie, więc to są style globalne. Następna odpowiedź mówi, że akapit będzie transponowany na małe litery, co też nie jest prawdą, bo w CSS nie ma zdefiniowanej transformacji tekstu dla elementu P. Element A ma natomiast zastosowaną transformację, która zmienia tekst na małe litery, więc nie można tego przypisać do akapitu. Ostatnia błędna odpowiedź sugeruje, że odnośnik będzie miał czcionkę 14 punktów i to również jest mylne. W rzeczywistości odnośnik A ma czcionkę 16 punktów, co sprawia, że jest lepiej widoczny niż akapit. Wydaje mi się, że te błędne odpowiedzi wynikają z niepełnego zrozumienia, jak działają klasy CSS i jakie style można przypisać różnym elementom HTML.

Pytanie 7

Gdzie powinien być umieszczony znacznik meta w języku HTML?

A. w obrębie znaczników <body> ... </body>

B. w obrębie znaczników paragrafu.

C. w sekcji nagłówkowej strony.

D. w dolnej części witryny internetowej.

Znacznik meta języka HTML jest kluczowym elementem, który powinien znajdować się w sekcji nagłówkowej witryny, oznaczonej znacznikami <head> ... </head>. Znaczniki meta dostarczają przeglądarkom oraz wyszukiwarkom internetowym informacji o stronie, takich jak jej opis, słowa kluczowe, a także informacje dotyczące kodowania czy autorstwa. Przykładowo, znacznik <meta charset="UTF-8"> informuje przeglądarkę o używanym kodowaniu znaków, co jest istotne dla prawidłowego wyświetlania tekstu w różnych językach. Dodatkowo, metadane takie jak <meta name="description" content="Opis strony"> są często wykorzystywane przez wyszukiwarki do generowania opisów w wynikach wyszukiwania, co może wpłynąć na wskaźnik klikalności (CTR) w SERP. Warto również dodać, że znaczniki meta mogą być używane do definiowania polityki prywatności i zabezpieczeń, na przykład poprzez <meta http-equiv="X-UA-Compatible" content="IE=edge">. Użycie odpowiednich metadanych w nagłówku jest zatem kluczowe dla optymalizacji SEO oraz zapewnienia odpowiedniej interakcji użytkowników z witryną.

Pytanie 8

Podczas tworzenia witryny internetowej zastosowano kod definiujący jej wygląd. Jaką szerokość przeznaczono na zawartość strony?

A. 2 px

B. 600 px

C. 640 px

D. 560 px

Definiowanie szerokości elementu w CSS jest kluczowym aspektem projektowania responsywnych stron internetowych. W przedstawionym kodzie CSS zauważamy definicję width 560px która określa szerokość elementu body. Ta wartość bezpośrednio przekłada się na dostępną przestrzeń dla treści wewnętrznej tego elementu. W praktyce definiowanie szerokości w pikselach pozwala na precyzyjne kontrolowanie układu strony co jest szczególnie istotne w kontekście projektowania interfejsów użytkownika. Takie podejście jest jednak najczęściej stosowane w środowiskach gdzie mamy pełną kontrolę nad urządzeniami wyświetlającymi stronę. W kontekście nowoczesnych praktyk często stosuje się jednostki względne lub techniki takie jak media queries aby zapewnić lepszą responsywność i elastyczność. Ważne jest także rozważanie dodatkowych aspektów takich jak marginesy i wypełnienia które mogą wpływać na rzeczywistą ilość dostępnej przestrzeni na treść. Właściwe zrozumienie i zastosowanie szerokości jest kluczowe dla tworzenia estetycznych i funkcjonalnych układów strony internetowej.

Pytanie 9

Która z wymienionych grup znaczników HTML zawiera elementy przeznaczone do grupowania oraz tworzenia struktury dokumentu?

A. span, strong, em

B. table, tr, td

C. br, img, hr

D. div, article, header

Odpowiedź 'div, article, header' jest poprawna, ponieważ te znaczniki HTML są kluczowymi elementami umożliwiającymi grupowanie i organizację treści w dokumentach webowych. Znacznik 'div' jest uniwersalnym kontenerem, który można wykorzystać do grupowania innych elementów w celu lepszej strukturyzacji strony. 'article' jest przeznaczony do oznaczania niezależnych fragmentów treści, takich jak posty na blogach, które mogą być samodzielnie dystrybuowane. Z kolei 'header' zazwyczaj zawiera nagłówki i elementy wprowadzające dla sekcji strony. Zastosowanie tych znaczników zgodnie z wytycznymi W3C sprzyja poprawnej hierarchii dokumentu, co z kolei zwiększa użyteczność strony oraz jej dostępność dla technologii asystujących. Przykładowo, użycie 'article' pozwala wyszukiwarkom i czytnikom ekranu lepiej zrozumieć strukturę treści, co może pozytywnie wpłynąć na SEO oraz doświadczenia użytkowników.

Pytanie 10

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

A. aside {float: left; }

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

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

D. nav { float: right; }

W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi. Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego. Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 11

Który z zapisów znacznika <div> może pojawić się w dokumencie HTML tylko raz, a ponowne jego użycie spowoduje błędy podczas walidacji tego dokumentu?

A. <div class="klasa1 klasa2">

B. <div id="identyfkator">

C. <div class="klasa">

D. <div>

Wybór innego znacznika <div> z atrybutami class lub bez atrybutów, takich jak <div class="klasa">, <div class="klasa1 klasa2"> czy <div>, może sugerować, że ich użycie nie jest ograniczone do pojedynczego wystąpienia w dokumencie. Te odpowiedzi nie uwzględniają kluczowej zasady dotyczącej atrybutu id, który, jak wcześniej wspomniano, musi być unikalny. Atrybut class z kolei nie ma podobnych ograniczeń; można go wielokrotnie przypisywać różnym elementom, co pozwala na grupowanie stylów. To często prowadzi do nieporozumień, w których użytkownicy mylą pojęcie unikalności id z możliwością wielokrotnego użycia class. Również przy użyciu znacznika <div> bez jakichkolwiek atrybutów, programiści mogą nieświadomie tworzyć wiele divów, które nie są jednoznacznie identyfikowalne, co może prowadzić do nieefektywnego kodu oraz problemów z dostępnością. Konsolidowanie wiedzy o tym, jak atrybuty wpływają na zachowanie i strukturyzację dokumentu HTML, jest kluczowe dla tworzenia poprawnych i wydajnych aplikacji webowych. W praktyce, zauważając różnice w zastosowaniu id i class, można lepiej organizować kod i unikać błędów walidacji.

Pytanie 12

W kodzie HTML 5, w celu walidacji wartości pola <input type="text"> za pomocą wyrażenia regularnego, należy użyć atrybutu

A. value

B. step

C. readonly

D. pattern

Prawidłowa odpowiedź to „pattern”, bo właśnie ten atrybut w HTML5 służy do walidacji zawartości pola tekstowego za pomocą wyrażeń regularnych po stronie przeglądarki. Atrybut pattern przyjmuje jako wartość wyrażenie regularne w składni zbliżonej do tej znanej z JavaScript (ECMAScript). Przeglądarka sprawdza, czy wpisany tekst pasuje do wzorca i jeśli nie, to nie pozwoli wysłać formularza, o ile pole ma ustawiony atrybut required lub użytkownik wywoła standardową walidację formularza. Przykład praktyczny: jeśli chcemy wymusić, żeby użytkownik wpisał dokładnie 3 cyfry, możemy napisać: <input type="text" name="kod" pattern="\d{3}" required> Wtedy poprawne będą wartości typu „123”, a „12a” czy „1234” zostaną odrzucone. Dla adresu e‑mail (prostej wersji) można użyć np.: <input type="text" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}"> W praktyce i tak często łączy się walidację HTML5 (pattern) z walidacją po stronie serwera, bo walidacja w przeglądarce jest tylko pierwszą linią obrony i użytkownik może ją wyłączyć. Z mojego doświadczenia warto pamiętać, że pattern działa tylko na tekst (input type="text", „search”, „tel”, „email”, „url” itd.) i jest walidowany dopiero w momencie wysyłki formularza lub wywołania metody checkValidity() w JavaScript. Dobrą praktyką jest też dodanie atrybutu title z opisem formatu danych, np. title="Wpisz 3 cyfry", żeby użytkownik zrozumiał, czemu formularz go nie przepuszcza. W projektach komercyjnych pattern bardzo pomaga szybko ogarnąć proste reguły, jak kody pocztowe, numery indeksów, proste loginy itp., bez konieczności pisania dodatkowego skryptu JS.

Pytanie 13

W CSS określono styl dla pola do edycji, które będzie miało tło w kolorze jasnozielonym po aktywacji.

input:focus { background-color: LightGreen; }

A. jeśli zostanie na nie najechane kursorem bez kliknięcia

B. gdy jest to pierwsze użycie tego elementu w dokumencie

C. w każdej sytuacji

D. po kliknięciu myszką w celu wprowadzenia tekstu

Typowe błędy myślowe prowadzące do niepoprawnych odpowiedzi często obejmują mylenie różnych stanów interakcji z elementami formularzy. Na przykład, odpowiedź sugerująca, że stylizowane tło zostaje aktywowane "gdy zostanie wskazane kursorem myszy bez kliknięcia" myli pojmowanie stanu focus z prostym najechaniem kursorem. W rzeczywistości, stan focus aktywuje się tylko w wyniku interakcji, takiej jak kliknięcie lub nawigacja za pomocą klawiatury. Kolejną nieścisłością jest stwierdzenie, że formatowanie ma zastosowanie "w każdym przypadku". Takie podejście nie uwzględnia faktu, że styl focus jest specyficzny dla interakcji użytkownika, a więc jego zastosowanie jest ograniczone do sytuacji, w których element jest aktywny. Warto zauważyć, że dobrze zaprojektowane formularze online powinny wykorzystywać zdarzenia focus i blur, aby dostarczać użytkownikom pomocnych wskazówek oraz ułatwić wprowadzanie danych. Ignorowanie tych koncepcji prowadzi do projektowania interfejsów, które nie są w pełni responsywne wobec potrzeb użytkowników. Dlatego zrozumienie różnicy między focus a zwykłym wskazaniem kursorem jest kluczowe dla tworzenia efektywnych i przyjaznych dla użytkownika aplikacji internetowych.

Pytanie 14

Aby zdefiniować stylizację tabeli w języku CSS w sposób, który umożliwi wyróżnienie wiersza, na który aktualnie najeżdża kursor myszy np. innym kolorem, należy użyć

A. pseudoelementu :first-line

B. pseudoklasy :visited

C. nowego selektora klasy dla wiersza tabeli

D. pseudoklasy :hover

Pseudoklasa :hover jest techniką CSS, która pozwala na zastosowanie stylów do elementu, gdy użytkownik na niego najedzie kursorem myszy. Dzięki temu można w prosty sposób wyróżnić wiersze tabeli, co zwiększa interaktywność i czytelność danych. W przypadku tabeli, aby wyróżnić aktualnie wskazywany wiersz, należy użyć reguły CSS, która odnosi się do elementu <tr> (wiersza tabeli) z zastosowaniem pseudoklasy :hover. Przykładowy kod CSS może wyglądać następująco: table tr:hover { background-color: #f0f0f0; } co spowoduje, że tło wiersza zmieni się na jasno szare, gdy kursor myszy znajdzie się nad tym wierszem. Taki sposób formatowania jest szczególnie przydatny w przypadku długich tabel, które mogą być trudne do przeglądania. Pseudoklasa :hover jest powszechnie stosowana w projektowaniu stron internetowych, w zgodności z W3C CSS Specification, co zapewnia jej szeroką kompatybilność z różnymi przeglądarkami. Warto także zauważyć, że można łączyć pseudoklasę :hover z innymi selektorami, aby uzyskać bardziej zaawansowane efekty wizualne.

Pytanie 15

W formularzu HTML użyto znacznika <input>. Pole to będzie służyło do wprowadzania maksymalnie

<input type="password" size="30" maxlength="20">

A. 30 znaków, które są widoczne w trakcie wprowadzania

B. 30 znaków, które nie są widoczne w polu tekstowym

C. 20 znaków, które nie są widoczne w polu tekstowym

D. 20 znaków, które są widoczne w trakcie wprowadzania

Odpowiedzi sugerujące, że w polu tekstowym mogą być widoczne znaki, są nieprawidłowe z kilku istotnych powodów. Przede wszystkim znaczenie atrybutu 'type' w znaczniku <input> jest kluczowe. Użycie 'type="password"' jednoznacznie wskazuje, że wprowadzone znaki będą maskowane, co ma na celu ochronę prywatności użytkownika. Odpowiedzi wskazujące na 30 znaków, które są widoczne, są całkowicie błędne, ponieważ atrybut 'size' definiuje szerokość pola, a nie maksymalną liczbę znaków, które można wprowadzić. To może prowadzić do mylnego wrażenia, że użytkownik ma pełen wgląd w wprowadzane dane, co nie jest zgodne z zamierzeniem tego typu pól. Oprócz tego, maksymalna liczba znaków 'maxlength' nie ma żadnego wpływu na to, czy znaki są widoczne, czy nie. Typowe błędy myślowe związane z tym zagadnieniem mogą obejmować niepoprawne zrozumienie roli atrybutów 'size' i 'maxlength'. Kluczowe jest, aby użytkownicy rozumieli, że odpowiednie projektowanie formularzy powinno zawsze uwzględniać bezpieczeństwo danych oraz ich ochronę, zwłaszcza w przypadku haseł. Dobre praktyki w zakresie UX/UI zalecają korzystanie z pól typu 'password' w sytuacjach wymagających ochrony danych, co przyczynia się do zwiększenia bezpieczeństwa aplikacji webowych.

Pytanie 16

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

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

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

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

D. <link rel="stylesheet' src="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 17

Termin „front-end” w kontekście budowy stron internetowych odnosi się do

A. organizacji danych na serwerze WWW

B. interfejsu witryny internetowej powiązanego z technologiami działającymi w przeglądarkach internetowych

C. bazy danych zawierającej informacje prezentowane na stronie

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

Pojęcie „front-end” odnosi się do części aplikacji webowej, która jest widoczna dla użytkownika i z którą użytkownik może wchodzić w interakcję. Front-end obejmuje wszystkie elementy interfejsu użytkownika, takie jak układ graficzny, teksty, obrazki oraz wszelkie interaktywne elementy, takie jak przyciski i formularze. Technologie używane w front-endzie obejmują HTML, CSS oraz JavaScript, które są standardami stosowanymi w tworzeniu stron internetowych. Dobrze zaprojektowany front-end nie tylko wygląda estetycznie, ale również jest responsywny, co oznacza, że dostosowuje się do różnych rozmiarów ekranów, co jest istotne w dobie urządzeń mobilnych. Przykłady zastosowania tej wiedzy obejmują tworzenie stron internetowych, rozwijanie aplikacji webowych oraz optymalizację doświadczeń użytkowników poprzez testy A/B oraz analizy UX. Dobre praktyki w front-endzie to także dostępność (wcag) oraz optymalizacja wydajności, co przekłada się na lepsze doświadczenia użytkowników oraz wyższe pozycje w wynikach wyszukiwania.

Pytanie 18

Czy automatyczna weryfikacja właściciela witryny korzystającej z protokołu HTTPS jest możliwa dzięki

A. prywatnym kluczom

B. informacjom whois

C. certyfikatowi SSL

D. danym kontaktowym zamieszczonym na stronie

Wybór kluczy prywatnych jako odpowiedzi na pytanie o automatyczną weryfikację właściciela strony jest mylący, ponieważ klucze te stanowią część infrastruktury kryptograficznej, ale nie są instrumentem do weryfikacji tożsamości właściciela serwisu. Klucz prywatny jest używany do szyfrowania i podpisywania danych, co jest krytyczne dla bezpieczeństwa komunikacji, ale sam w sobie nie jest narzędziem do potwierdzania, że dany serwis internetowy należy do konkretnego właściciela. Z drugiej strony, dane WHOIS są publicznie dostępnymi informacjami o rejestracji domeny, które mogą zawierać informacje o właścicielu, jednak nie są one weryfikowane w czasie rzeczywistym przez protokoły związane z HTTPS. To oznacza, że mogą być one nieaktualne lub niepoprawne, co czyni je niewystarczającymi do potwierdzenia tożsamości witryny. Odpowiedzi dotyczące danych kontaktowych na stronie również nie odpowiadają na pytanie o automatyczną weryfikację, ponieważ takie dane mogą być łatwo manipulowane lub niedokładne. W kontekście dobrych praktyk i standardów branżowych, kluczowym narzędziem do zagwarantowania integralności oraz autentyczności serwisu jest certyfikat SSL, który przeprowadza rygorystyczne procesy weryfikacyjne przed jego wydaniem, zapewniając w ten sposób realną ochronę dla użytkowników i właścicieli witryn. Izolując kwestie techniczne, automatyczna weryfikacja właściciela strony, która opiera się na zaufanych certyfikatach, jest fundamentalnym elementem budowania bezpieczeństwa w sieci.

Pytanie 19

body{
background-image: url"rysunek.gif");
background-repeat: repeat-y;
}
W przedstawionej definicji stylu CSS, powtarzanie dotyczy

A. rysunku umieszczonego w tle strony w poziomie

B. rysunku znajdującego się w tle strony w pionie

C. tła każdego znacznika akapitu

D. rysunku osadzonego znacznikiem img

W kontekście pytania, nie wszystkie odpowiedzi są zgodne z zasadami CSS. Powtarzanie tła nie dotyczy tła każdego ze znaczników akapitu, ponieważ właściwość 'background-image' odnosi się do stylu całego elementu, w tym przypadku ciała strony ('body'), a nie poszczególnych akapitów. Rysunek umieszczony znacznikiem img nie ma związku z właściwościami tła, ponieważ ten znacznik wyświetla obraz w treści dokumentu, a nie jako tło dla elementu. Właściwość 'background-repeat' odnosi się wyłącznie do obrazów tła, a nie do obrazów wstawionych za pomocą znaczników HTML. Dodatkowo, rysunek umieszczony w tle strony w poziomie również nie jest poprawny, ponieważ 'repeat-y' wskazuje na powtarzanie w kierunku pionowym, co oznacza, że obrazek będzie powielany wzdłuż osi Y, a nie X. Zrozumienie tych różnic jest kluczowe dla efektywnego korzystania z CSS i tworzenia responsywnych, estetycznych stron internetowych.

Pytanie 20

Jaką technologię zaleca się przy budowie witryn WWW, aby użytkownicy bez umiejętności programistycznych mogli samodzielnie wprowadzać zmiany w treści bez kodowania?

A. FTP

B. CMS

C. SSL

D. SEO

SEO, czyli optymalizacja dla wyszukiwarek, to temat, który dotyczy poprawy widoczności strony w wynikach wyszukiwania. Choć jest szalenie ważne w marketingu internetowym, to nie ma bezpośredniego związku z tym, jak zarządzać treścią na stronie. Użytkownicy nie mogą zmieniać treści za pomocą SEO; chodzi raczej o to, żeby to, co już jest, było bardziej przyjazne dla robotów wyszukiwarek. Trzeba pamiętać, że jeśli się skupiamy na SEO, ale nie mamy porządnego CMS-a, to aktualizacja treści może być trudna, co w dłuższym czasie źle wpłynie na pozycjonowanie. FTP, czyli protokół transferu plików, jest do przesyłania plików między komputerami a serwerami, ale żeby z niego korzystać, trzeba znać strukturę plików, więc dla kogoś bez technicznych umiejętności to nie jest rozwiązanie. SSL, czyli bezpieczne połączenia, to ważna rzecz, ale z zarządzaniem treścią nie ma za bardzo wspólnego. Użytkownicy mogą się pogubić, myśląc, że te technologie wystarczą do zarządzania treścią, co może wprowadzać w błąd i powodować, że zasoby internetu będą wykorzystywane nieefektywnie.

Pytanie 21

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

A. div {shadow:blue;}

B. div {color:blue;}

C. div {background-color:blue;}

D. div {border-color:blue;}

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

Pytanie 22

Który selektor stosuje formatowanie dla akapitów tekstu z klasą tekst oraz dla elementu blokowego o ID obrazki?

A. p#tekst + div.obrazki

B. p.tekst, div#obrazki

C. p#tekst, div.obrazki

D. p.tekst + div#obrazki

Wybór selektorów w odpowiedziach niepoprawnych często wynika z nieporozumienia dotyczącego składni CSS oraz specyfiki selektorów. W przypadku selektora 'p#tekst', należy zauważyć, że nie jest on poprawny, ponieważ identyfikator (ID) nie może być użyty w kontekście elementu, który już ma przypisaną klasę. W CSS, ID powinno być unikalne dla danego dokumentu, a klasa może być stosowana wielokrotnie. W ten sposób, 'p#tekst' sugeruje element <p> z ID 'tekst', co koliduje z ideą używania klas. Dalsza analiza selektorów jak 'p.tekst + div.obrazki' wskazuje na zastosowanie kombinacji selektorów, co nie pasuje do wymagań zadania. Operator '+' wskazuje na sąsiednie elementy, co oznacza, że styl będzie stosowany tylko do <div> bezpośrednio po <p>, co w przypadku tej konkretnej logiki nie wprowadza pożądanych efektów. Podobnie, selektor 'div.obrazki' sugeruje, że klasa 'obrazki' może być stosowana do każdego elementu <div>, co nie odnosi się do konkretnego ID. W praktyce, aby wyeliminować błędy, zaleca się gruntowne zrozumienie hierarchii i specyfiki selektorów w CSS oraz ich zastosowania w kontekście HTML. Przykładowo, stosując poprawny selektor, można uniknąć nadpisywania stylów przez inne reguły i zapewnić, że wszystkie elementy są odpowiednio stylizowane zgodnie z zamierzeniami projektowymi.

Pytanie 23

Selektor CSS a:link {color:red} użyty w kaskadowych arkuszach stylów określa

A. klasę

B. pseudoelement

C. pseudoklasę

D. identyfikator

Zdecydowanie coś poszło nie tak w Twojej odpowiedzi, bo wygląda na to, że nie do końca rozumiesz podstawowe pojęcia związane z CSS. Klasy i identyfikatory, używane do grupowania elementów i nadawania im stylów, to zupełnie inna sprawa niż pseudoklasy. Klasy w CSS definiujesz przez kropkę, jak na przykład .nazwa-klasy, a pseudoklasy zawsze zaczynają się od dwukropka. Klasy są super do stylizacji większej grupy elementów, podczas gdy identyfikatory są unikalne i służą do stylizacji pojedynczych elementów, zaczynają się od hasha (#). Pseudoelementy, które mogą być mylone z pseudoklasami, pomagają stylizować tylko część elementów, jak na przykład ::before lub ::after, co pozwala na dodawanie treści przed lub po danym elemencie. Rozróżnienie tych pojęć jest naprawdę kluczowe, gdy chcesz dobrze zrozumieć CSS. Często zdarza się, że ludzie mylą te pojęcia, co prowadzi do chaosu przy stylizacji stron. Żeby uniknąć tych nieporozumień, warto przejrzeć dokumentację CSS i trochę poćwiczyć z różnymi selektorami. Z mojej perspektywy, jest to najlepszy sposób, by zrozumieć jak to wszystko działa i jakie są różnice między tymi pojęciami.

Pytanie 24

Który z akapitów został sformatowany według podanego stylu, przy założeniu, że pozostałe właściwości akapitu mają wartości domyślne?

A. Efekt 4

B. Efekt 1

C. Efekt 3

D. Efekt 2

Wybór błędnej odpowiedzi może wynikać z niepełnego zrozumienia działania właściwości CSS które kontrolują wygląd elementów HTML W przypadku efektu 1 tekst jest pogrubiony ale kolor tła jest ciemny co nie odpowiada żadnej z właściwości podanych w stylu CSS Styl CSS zakłada jasne tło z niebieskim obramowaniem co nie jest odzwierciedlone w tym przykładzie Również tekst nie jest odpowiednio ułożony w środkowej przestrzeni jak to zakłada padding 20px Efekt 2 mimo że zawiera niebieski kolor tekstu i obramowanie ma bardzo cienką czcionkę bez odpowiedniego pogrubienia co jest wymagane przez font-weight 900 Ta niezgodność wskazuje na nieprawidłowe zastosowanie właściwości CSS Sytuacja z efektem 4 wygląda podobnie mimo że tekst jest pogrubiony obramowanie jest zbyt grube a tekst nie ma wystarczającej przestrzeni wokół niego co wskazuje na brak ustawienia padding na 20px Zrozumienie tych różnic pomaga w poprawnym stosowaniu stylów CSS w praktyce co jest kluczowe dla tworzenia spójnych i atrakcyjnych wizualnie projektów internetowych Kluczowe jest również testowanie i przeglądanie kodu aby upewnić się że wszystkie właściwości są odpowiednio zdefiniowane i zastosowane we właściwych kontekstach przy projektowaniu interfejsów użytkownika

Pytanie 25

Aby zidentyfikować błędy w składni kodu HTML, trzeba użyć

A. debuggera

B. interpretera

C. kompilatora

D. walidatora

Walidator to narzędzie służące do sprawdzania poprawności składniowej oraz semantycznej kodu HTML. Umożliwia on programistom wychwycenie błędów, które mogą prowadzić do problemów z wyświetlaniem strony internetowej w przeglądarkach. Walidatory, takie jak W3C Validator, analizują kod HTML pod kątem zgodności z aktualnymi standardami oraz najlepszymi praktykami. Na przykład, walidator może wykryć brakujące tagi, niewłaściwe atrybuty czy błędne zagnieżdżenie elementów. Przy pomocy walidatora można również sprawdzić, czy strona jest dostosowana do wymagań dotyczących dostępności i użyteczności. Używanie walidatorów jest kluczowe w procesie tworzenia stron internetowych, ponieważ pozwala na identyfikację i eliminację błędów przed opublikowaniem witryny. W ten sposób projektanci i deweloperzy mogą zapewnić, że ich strony będą działały prawidłowo na różnych urządzeniach i przeglądarkach, co jest istotne dla doświadczenia użytkowników oraz SEO.

Pytanie 26

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

A. controls i loop

B. loop i muted

C. autoplay i preload

D. controls i autoplay

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

Pytanie 27

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

A. obraz2.png zostanie wymieniony na obraz1.png

B. obraz2.png zostanie zniknięty

C. obraz1.png zostanie zniknięty

D. obraz1.png zostanie wymieniony na obraz2.png

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 28

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

A. <link>

B. <title>

C. <h2>

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 29

W poniższym kodzie CSS zdefiniowano cztery klasy formatowania, które następnie zostały użyte do formatowania paragrafów. Efekt widoczny na rysunku powstał po zastosowaniu klasy o nazwie:

.format1 {    text-decoration: overline;     }
.format2 {    text-decoration: line-through; }
.format3 {    text-decoration: underline;    }
.format4 {    text-decoration: none;         }

formatowanie

A. format1

B. format2

C. format4

D. format3

Odpowiedź z klasy format2 jest trafna, bo definiuje styl text-decoration line-through, który służy do przekreślenia tekstu. W CSS ta właściwość jest mega przydatna, bo pozwala zmieniać wygląd tekstu, dodając różne linie, takie jak podkreślenie czy nadkreślenie. Przekreślenie stosuje się często, żeby pokazać, że coś zostało usunięte lub jest już nieaktualne. Na przykład w sklepach online, gdzie można oznaczyć przecenione ceny. Według standardów CSS, warto stawiać na prostotę i czytelność definicji stylów, bo to ułatwia później zrozumienie kodu dla innych programistów. Takie podejście jest zgodne z dobrymi praktykami kodowania, które mówią, że kod powinien być łatwy do zrozumienia. A co ważne, jeśli chodzi o dostępność, to przekreślony tekst jest znany narzędziom wspierającym, jak czytniki ekranowe, co zwiększa dostępność treści dla osób z niepełnosprawnościami.

Pytanie 30

W jakim typie pliku powinno się zapisać zdjęcie, aby mogło być wyświetlane na stronie WWW z zachowaniem efektu przezroczystości?

A. BMP

B. PNG

C. CDR

D. JPG

Format PNG (Portable Network Graphics) jest idealnym wyborem do przechowywania obrazów z przezroczystością, ponieważ obsługuje kanał alfa, który pozwala na reprezentację przezroczystości w obrazach. Ta cecha jest szczególnie cenna w projektowaniu stron internetowych, gdzie grafiki muszą być dopasowane do różnych tła bez widocznych krawędzi. Przykładowo, logo firmy zapisane w formacie PNG może być umieszczone na stronie o różnych kolorach tła, zachowując estetyczny wygląd i nie zaburzając kompozycji. Ponadto, PNG jest formatem bezstratnym, co oznacza, że zachowuje jakość oryginalnego obrazu podczas kompresji, co jest ważne, gdy zależy nam na zachowaniu szczegółów i kolorów. W praktyce, wiele przeglądarek internetowych i edytorów graficznych obsługuje ten format, co czyni go standardem w branży. Dlatego dla grafik z przezroczystością PNG jest najczęściej zalecanym formatem, zgodnym z aktualnymi standardami i najlepszymi praktykami w dziedzinie projektowania stron internetowych.

Pytanie 31

W HTML znacznik <i> powoduje uzyskanie takiego samego efektu wizualnego jak znacznik

A. <strong>

B. <u>

C. <pre>

D. <em>

Zastosowanie znaczników <u>, <pre> oraz <strong> w kontekście pytania jest błędne z kilku powodów. Znacznik <u> służy do podkreślenia tekstu, ale nie przekazuje on żadnego dodatkowego znaczenia semantycznego, co jest kluczowe w tworzeniu dostępnych treści. Choć wizualnie może to wyglądać podobnie, użycie <u> nie jest zgodne z najlepszymi praktykami, gdzie zaleca się stosowanie znaczników semantycznych, takich jak <em>, które informują o intencji autora. Z kolei znacznik <pre> jest używany do prezentacji tekstu w formacie preformatowanym, co nie ma nic wspólnego z wyróżnianiem tekstu w kontekście jego znaczenia. Oznacza to, że tekst wewnątrz <pre> zachowuje spacje oraz nowe linie, co jest istotne przy wyświetlaniu kodu lub danych, ale nie ma zastosowania w kontekście wyróżniania wyrazów w treści. Znacznik <strong>, chociaż wizualnie również pogrubia tekst, informuje o ważności treści, ale nie jest równoważny z <em>, które przekazuje bardziej subtelne znaczenie. Typowym błędem jest postrzeganie tych znaczników jako zamienników, co prowadzi do tworzenia kodu, który jest nieefektywny oraz trudny w interpretacji przez urządzenia asystujące, a w konsekwencji odbiorcy treści, w tym osób z niepełnosprawnościami. Właściwe zrozumienie ról poszczególnych znaczników jest kluczowe dla tworzenia stron internetowych zgodnych z WCAG i ogólnych standardów dostępności.

Pytanie 32

W instrukcjach mających na celu odtwarzanie dźwięku jako muzyki tła na stronie internetowej NIE stosuje się atrybutu

A. volume="-100"

B. loop="10"

C. balance="-10"

D. href="C:/100.wav"

Odpowiedź href="C:/100.wav" jest prawidłowa, ponieważ atrybut href jest używany w kontekście linków hipertekstowych, a nie do odtwarzania dźwięku na stronie. W przypadku odtwarzania dźwięku w HTML, odpowiednie tagi to <audio> oraz związane z nimi atrybuty, takie jak src, controls, autoplay, loop, itp. Aby zrealizować odtwarzanie dźwięku jako podkładu muzycznego, używamy tagu <audio src="C:/100.wav" autoplay loop></audio>, co zapewnia, że dźwięk z pliku .wav będzie odtwarzany automatycznie i w pętli. Zgodnie z dobrymi praktykami, pliki audio powinny być dostępne na serwerze i wskazywane względem ich lokalizacji w sieci, co wspiera lepszą wydajność oraz dostępność. Użycie atrybutu href w tym kontekście jest niewłaściwe i może prowadzić do niepoprawnego działania strony, ponieważ przeglądarki nie interpretują tego w kontekście dźwięku. Przykładowo, zamiast href, należy zastosować odpowiednie atrybuty w tagu <audio> zgodnie z aktualnymi standardami HTML5.

Pytanie 33

W jakiej technologii nie zachodzi możliwość przetwarzania danych wprowadzanych przez użytkowników na stronach internetowych?

A. JavaScript

B. AJAX

C. PHP

D. CSS

AJAX, PHP i JavaScript to języki oraz technologie, które umożliwiają przetwarzanie danych użytkownika wprowadzanych na stronach internetowych. AJAX (Asynchronous JavaScript and XML) pozwala na asynchroniczną komunikację z serwerem, co oznacza, że użytkownik może przesyłać dane, np. z formularza, bez konieczności przeładowania całej strony. Dzięki temu doświadczenie użytkownika jest bardziej płynne i interaktywne. PHP to język skryptowy po stronie serwera, który jest często używany do przetwarzania danych, takich jak zapisywanie informacji do bazy danych czy generowanie dynamicznych treści na stronie. Umożliwia on również walidację danych przed ich przesłaniem do serwera. JavaScript, z kolei, działa po stronie klienta i może reagować na interakcje użytkownika, takie jak kliknięcia, zmiany w polach formularzy czy nawigacja po stronie, pozwalając na manipulację danymi w czasie rzeczywistym. Typowym błędem myślowym jest myślenie, że CSS może pełnić funkcje, które są zarezerwowane dla języków programowania. Użytkownicy często mylą rolę CSS jako narzędzia do interakcji, podczas gdy w rzeczywistości jest on jedynie odpowiedzialny za prezentację. Uzupełniając CSS o JavaScript czy PHP, można zbudować kompletną, interaktywną aplikację webową, która efektywnie przetwarza dane użytkowników.

Pytanie 34

Wskaż problem z walidacją w podanym fragmencie kodu HTML

<h6>CSS</h6>
<p>Kaskadowe arkusze stylów (<b>ang. <i>Cascading Style Sheets</b></i>)<br>to język służący... </p>

A. Nieznany znacznik h6

B. Znacznik br nie został poprawnie zamknięty

C. Znacznik zamykający /b niezgodny z zasadą zagnieżdżania

D. Znacznik br nie może występować wewnątrz znacznika p

Znacznik zamykający b niezgodny z zasadą zagnieżdżania czyli poprawna odpowiedź 1 odnosi się do zasady poprawnego zagnieżdżania znaczników HTML Zasada ta mówi że znaczniki muszą być zamykane w odwrotnej kolejności do ich otwarcia W naszym przykładzie mamy otwierający znacznik b a następnie i co oznacza że najpierw powinien być zamknięty znacznik i a potem b Tego typu błąd jest często spotykany w kodzie HTML i może prowadzić do nieoczekiwanych problemów z wyświetlaniem strony Warto pamiętać że poprawne zagnieżdżanie znaczników wpływa na czytelność i utrzymanie kodu co jest kluczowe w większych projektach HTML jest językiem opartym na strukturze drzewiastej i każda niezgodność w zagnieżdżaniu może wpłynąć na sposób przetwarzania dokumentu przez przeglądarki Dbałość o szczegóły w strukturze dokumentu HTML jest zgodna z dobrymi praktykami branżowymi i wspomaga zgodność z różnymi przeglądarkami i urządzeniami co w konsekwencji poprawia dostępność i użyteczność strony internetowej

Pytanie 35

Aby za pomocą CSS zdefiniować przedstawione na rysunku opływanie obrazu tekstem należy w stylu obrazu wprowadzić zapis

A. float: left;

B. table: left;

C. float: right;

D. clear: both;

Twoja odpowiedź nie jest prawidłowa. Wszystkie podane błędne odpowiedzi są niepoprawne, ponieważ nie tworzą żądanego efektu opływania obrazu przez tekst. 'clear: both;' jest własnością CSS, która służy do zapobiegania opływaniu, a nie jego tworzeniu. Jest używana, gdy nie chcemy, aby dany element był opływany przez inne. 'table: left;' nie jest istniejącą własnością CSS, i nie ma związanego z nią konkretnego efektu. Właściwość 'float: left;' powoduje, że obraz zostaje przesunięty na lewą stronę strony, co powoduje, że tekst opływa go od prawej strony, a nie od lewej, jak to jest wymagane w pytaniu. Pamiętaj, aby zawsze dobrze zrozumieć, jakie efekty daje użycie konkretnych właściwości CSS, zanim zastosujesz je w praktyce.

Pytanie 36

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

<a href="#dane"></a>

A. Strona przewinie się do elementu o id równym dane

B. Zostanie wskazany względny adres URL o nazwie dane

C. Uruchomi się skrypt o nazwie dane

D. Otworzy się nowa karta przeglądarki o nazwie dane

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

Pytanie 37

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

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

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

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

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

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

Pytanie 38

Jakim formatem plików dźwiękowych charakteryzuje się kompresja bezstratna?

A. MPEG

B. WAW

C. FLAC

D. MP3

FLAC, czyli Free Lossless Audio Codec, to format dźwiękowy, który kompresuje pliki, ale nie traci przy tym żadnych danych. Dzięki temu jakość dźwięku pozostaje taka sama jak w oryginale, co jest super ważne dla audiofilów i profesjonalnych producentów. Wiesz, FLAC jest popularny wśród miłośników muzyki, bo pozwala na przechowywanie wysokiej jakości utworów w mniejszych plikach niż WAV, który potrafi zająć naprawdę dużo miejsca. Poza tym wiele odtwarzaczy audio i programów do edycji dźwięku obsługuje ten format, więc jest naprawdę uniwersalny. Można też dodawać metadane, czyli informacje o wykonawcy czy albumie, co jest bardzo przydatne. No i nie zapominajmy, że FLAC jest otwartym standardem, co oznacza, że każdy może z niego korzystać bez opłat – to na pewno przyczynia się do jego popularności, zarówno wśród amatorów, jak i profesjonalistów.

Pytanie 39

W HTML-u znacznik tekst będzie prezentowany przez przeglądarkę w sposób identyczny do znacznika

A. <sub>tekst</sub>

B. <b>tekst</b>

C. <big>tekst</big>

D. <h1>tekst</h1>

Znacznik <strong> w HTML jest używany do oznaczania tekstu, który ma być wyróżniony jako ważny. Jego domyślne stylizowanie w przeglądarkach polega na pogrubieniu tekstu, co jest również funkcją znacznika <b>. Oba znaczniki mają podobne zastosowanie, ale <strong> niesie dodatkowe znaczenie semantyczne, co oznacza, że informuje przeglądarki i maszyny o tym, że dany tekst jest istotny. Przykładem może być użycie <strong> w nagłówkach lub w miejscach, gdzie chcemy zwrócić uwagę na kluczowe informacje, jak np. 'Zamówienie <strong>pilne</strong> musi być dostarczone do jutra.' W kontekście dobrych praktyk zaleca się używanie znaku <strong> zamiast <b>, gdyż wspiera to dostępność i SEO - wyszukiwarki lepiej interpretują semantykę treści, co może wpłynąć na pozycjonowanie strony. Warto również pamiętać, że zgodnie z W3C, semantyka HTML ma kluczowe znaczenie dla strukturyzacji dokumentów oraz ich dostępności.

Pytanie 40

Który element blokowy języka HTML5 jest przeznaczony do umieszczenia w nim nawigacji witryny?

A. nav

B. aside

C. header

D. main

W tym pytaniu łatwo się pomylić, bo kilka znaczników HTML5 kojarzy się z układem strony i ktoś intuicyjnie może uznać, że nadają się na nawigację. Warto jednak odróżnić semantykę poszczególnych elementów. Element <main> służy do oznaczenia głównej, unikalnej treści dokumentu – tej, która jest kluczowa dla danej podstrony. Zgodnie z dobrymi praktykami nie umieszcza się w nim stałych elementów interfejsu takich jak menu nawigacyjne, nagłówek czy stopka. Czytniki ekranu często pozwalają użytkownikowi pominąć nagłówek i nawigację, żeby od razu przejść do <main>. Gdybyśmy w <main> wrzucili menu, to trochę psujemy cały sens tej semantyki. Znacznik <aside> z kolei jest przeznaczony na treści poboczne, uzupełniające względem głównego wątku strony: boczne panele, bloki z reklamami, listy powiązanych artykułów, krótkie notki. Owszem, w realnych projektach zdarza się, że w panelu bocznym jest jakieś dodatkowe menu kategorii i bywa ono umieszczone w <aside>. Jednak sam <aside> nie jest semantycznie „obszarem nawigacji” – jest raczej kontenerem na treści dodatkowe. Jeśli w nim znajduje się nawigacja, to i tak powinniśmy ją owinąć w <nav>, żeby zachować właściwą semantykę. Element <header> często myli się z nawigacją, bo w praktyce w nagłówku strony bardzo często umieszcza się logo i menu główne. Jednak <header> opisuje obszar nagłówkowy dokumentu lub sekcji, czyli może zawierać tytuł, podtytuł, logo, czas publikacji, a także właśnie blok <nav>. To nie jest znacznik dedykowany nawigacji, tylko ogólny kontener nagłówkowy. Z punktu widzenia standardów HTML5 poprawna struktura to raczej <header><div class="logo">…</div><nav>…</nav></header>, a nie traktowanie całego headera jako nawigacji. Typowym błędem myślowym jest utożsamianie „tego, co jest wizualnie u góry strony” z nawigacją w sensie semantycznym. HTML5 kładzie duży nacisk na znaczenie elementów, a nie tylko na ich wygląd. Dlatego nawigacja powinna być oznaczona konkretnie znacznikiem <nav>. Dzięki temu przeglądarki, narzędzia SEO, czytniki ekranu i różne biblioteki JavaScript mogą jednoznacznie rozpoznać, gdzie jest menu strony, a gdzie główna treść, nagłówek czy boczne panele. W praktyce przekłada się to na lepszą dostępność, bardziej przewidywalne zachowanie i czytelniejszy kod, co moim zdaniem jest kluczowe przy większych projektach.

Rozpocznij nowy egzamin

Powrót do strony głównej