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: 15 czerwca 2026 09:19
Data zakończenia: 15 czerwca 2026 09:37

Egzamin zdany!

Wynik: 35/40 punktów (87,5%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Aby umożliwić wybór kilku opcji jednocześnie w rozwijanej liście formularza HTML, należy dodać atrybut do znacznika select

A. disabled

B. multiple

C. size

D. value

Atrybut multiple w znaczniku select w HTML to super sprawa, bo dzięki niemu można zaznaczyć więcej niż jedną opcję z listy rozwijalnej. To się przydaje, jak ktoś musi wybrać kilka elementów w formularzu. Jak dodasz atrybut multiple, to przeglądarka pokazuje to jako pole do wyboru, gdzie można klikać na kilka wartości za pomocą klawiszy Ctrl albo Shift. Fajnie, że ten atrybut nie wymaga żadnych dodatkowych wartości, wystarczy, że go wrzucisz do znacznika select. To zgodne z dobrymi praktykami UX, bo pozwala na większą elastyczność i interaktywność formularzy. Co więcej, nie trzeba być programistycznym guru, żeby to wdrożyć, więc każdy może to zrobić. Używa się go w różnych aplikacjach webowych, zwłaszcza tam, gdzie zbieranie danych od użytkowników w prosty i przejrzysty sposób jest ważne.

Pytanie 2

Do której właściwości CSS można przypisać wartości static, relative, fixed, absolute, sticky?

list-style-type

text-transform

position

display

Wartości static, relative, absolute, fixed i sticky przyjmuje właściwość position - steruje ona sposobem pozycjonowania elementu na stronie (np. fixed przykleja element do okna, sticky „przylepia” go przy przewijaniu). Zapamiętaj: te pięć słów to wartości position.

Pytanie 3

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

A. nav { float: right; }

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

C. aside {float: left; }

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

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 4

Co można powiedzieć o przedstawionym zapisie języka HTML5?

<title>Strona o psach</title>

A. Zostanie wyświetlony w treści strony, na samej górze.

B. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.

C. Pojawi się na karcie dokumentu w przeglądarce.

D. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.

Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.

Pytanie 5

W CSS wartości takie jak: underline, overline, line-through oraz blink odnoszą się do właściwości

A. text-align

B. font-style

C. text-decoration

D. font-decoration

Właściwość 'text-align' dotyczy ustawienia wyrównania tekstu w obrębie kontenera. Jej zastosowanie koncentruje się na takich wartościach jak 'left', 'right', 'center' czy 'justify', które wpływają na układ tekstu na stronie, ale nie mają związku z jego dekoracją. Z kolei 'font-style' odnosi się do stylu czcionki, umożliwiając taką manipulację jak kursywa lub normalny styl, jednak nie kontroluje dekoracji tekstu. Z kolei 'font-decoration' nie jest standardową właściwością CSS; błędne jej wykorzystanie może wynikać z nieznajomości konwencji CSS. Właściwości takie jak 'text-decoration' są zdecydowanie bardziej odpowiednie do osiągania zamierzonych efektów wizualnych na tekście. Często początkujący programiści mylą te różne właściwości, co prowadzi do niepoprawnego stylizowania elementów tekstowych. Warto zwrócić uwagę, że każda z wymienionych właściwości ma swoje unikalne zastosowanie i wymagania, dlatego kluczowe jest zrozumienie ich specyfiki oraz kontekstu użycia w projekcie stron internetowych. Prawidłowe stosowanie właściwości CSS jest niezbędne dla zapewnienia estetyki oraz funkcjonalności strony, co jest fundamentalne w nowoczesnym web designie.

Pytanie 6

Zgodnie z zasadami walidacji HTML5, prawidłowy zapis tagu hr to

A. </ hr>

B. </ hr />

C. <hr>

D. </hr?>

Znak <hr> jest poprawnym zapisem znacznika poziomej linii w HTML5. Zgodnie z definicją, <hr> jest elementem samodzielnym, co oznacza, że nie wymaga znacznika zamykającego. Jest to zgodne z zasadami HTML5, które wprowadziły uproszczoną składnię dla wielu elementów. W praktyce <hr> jest używany do wizualnego oddzielania sekcji w dokumencie HTML, co poprawia czytelność i estetykę strony. Na przykład, w artykule internetowym można zastosować <hr> między różnymi sekcjami, aby wskazać zmianę tematu lub podział pomiędzy wprowadzeniem a treścią główną. Zgodność z tym standardem nie tylko ułatwia pracę z kodem, ale również zapewnia lepszą kompatybilność z przeglądarkami i narzędziami dostępu. Warto także zwrócić uwagę, że dobrym zwyczajem jest dodawanie atrybutów klasy lub identyfikatora do tego znacznika w celu dalszej personalizacji stylów CSS, co zwiększa elastyczność w projektowaniu graficznym strony.

Pytanie 7

W języku JavaScript funkcja getElementById odnosi się do

A. elementu HTML z podanym id

B. elementu HTML z określoną nazwą klasy

C. zmiennej numerycznej

D. klasy zdefiniowanej w CSS

Metoda getElementById w języku JavaScript jest kluczowym narzędziem do manipulacji DOM (Document Object Model), które pozwala deweloperom na łatwe odwoływanie się do konkretnych elementów HTML za pomocą ich atrybutu id. Dzięki temu, możemy dynamicznie zmieniać treść, style lub atrybuty tych elementów, co jest niezwykle przydatne w tworzeniu interaktywnych stron internetowych. Na przykład, jeśli mamy element HTML z atrybutem id='header', możemy użyć `document.getElementById('header')` do uzyskania do niego dostępu. To podejście jest zgodne z zasadami poprawnej struktury HTML, gdzie atrybut id powinien być unikalny w obrębie dokumentu. Rekomendowane jest, aby id było zrozumiałe i jasno określało zawartość elementu, co ułatwia późniejszą nawigację i skrypty, a także poprawia dostępność strony. W praktyce, korzystając z getElementById, możemy na przykład zmieniać tekst nagłówka: `document.getElementById('header').innerText = 'Nowy nagłówek';`.

Pytanie 8

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

A. br, img, hr

B. div, article, header

C. table, tr, td

D. span, strong, em

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 9

Oznaczenie barwy w postaci #FF00E0 jest równoważne zapisowi

A. rgb(FF, 0, E0)

B. rgb(F, 0, E0)

C. rgb(255, 0, 128)

D. rgb(255, 0, 224)

Oznaczenie #FF00E0 to zapis koloru w systemie szesnastkowym (hex), bardzo typowym w CSS i ogólnie w tworzeniu interfejsów. Składa się ono z trzech par znaków: FF (czerwony), 00 (zielony), E0 (niebieski). Każda para to jedna składowa kanału RGB zapisana w systemie szesnastkowym, czyli w bazie 16. Zakres dla każdej składowej to od 00 do FF, co odpowiada wartościom dziesiętnym od 0 do 255.

FF w systemie szesnastkowym to 15×16 + 15 = 255 w systemie dziesiętnym. 00 to po prostu 0. Natomiast E0 to 14×16 + 0 = 224. Dlatego zapis #FF00E0 jest równoważny rgb(255, 0, 224). To jest dokładnie ten sam kolor, tylko zapisany w innym formacie. W CSS możesz używać obu zapisów zamiennie: np. `color: #FF00E0;` oraz `color: rgb(255, 0, 224);` dadzą identyczny efekt w przeglądarce.

W praktyce, przy projektowaniu stron i interfejsów, warto rozumieć oba zapisy, bo narzędzia graficzne (Photoshop, GIMP, Figma) często podają kolory w hex, a dokumentacja front-endowa i tutoriale bardzo często używają rgb() albo nawet rgba(). Dobra praktyka w branży jest taka, żeby umieć szybko w głowie lub z pomocą prostego kalkulatora przeliczyć wartości hex na dziesiętne, szczególnie przy drobnych korektach kolorów. Moim zdaniem świadomość, że hex to po prostu inna reprezentacja tych samych liczb 0–255, bardzo ułatwia później rozumienie gradientów, filtrów, a nawet pracy z kolorami w JavaScript, gdzie możesz programowo generować wartości rgb().

Pytanie 10

Jaką funkcję pełni atrybut name w polu formularza, np. <input type="text" name="login">?

A. ustawia pole jako tylko do odczytu

B. określa nazwę pola, pod którą dane trafiają na serwer

C. ogranicza maksymalną długość pola

D. określa wartość domyślną pola

Atrybut name nadaje polu formularza nazwę, pod którą jego wartość jest przesyłana na serwer. To po niej skrypt odbierający (np. w PHP przez $_POST["login"]) rozpoznaje konkretne pole. Bez name wartość pola zwykle nie zostanie wysłana. Dlatego name określa nazwę pola w formularzu.

Pytanie 11

Podczas przygotowywania grafiki na stronę internetową konieczne jest wycięcie jedynie określonego fragmentu. Jak nazywa się ta operacja?

A. zmiana rozmiaru.

B. lustrzane odbicie obrazu.

C. kadrowanie.

D. łączenie warstw.

Kadrowanie to proces polegający na wycinaniu fragmentu obrazu w celu skupienia uwagi na określonym elemencie lub poprawienia kompozycji. W kontekście grafiki internetowej, kadrowanie jest kluczowe, aby dostosować zdjęcia do wymagań wizualnych strony, zachowując jednocześnie wysoką jakość obrazu. Przykładowo, jeśli tworzymy stronę dla restauracji, możemy wyciąć fragment zdjęcia dania, aby lepiej zaprezentować jego szczegóły. Dobre praktyki w kadrowaniu obejmują stosowanie zasady trzech, która polega na umiejscowieniu kluczowych elementów obrazu w punktach przecięcia linii podziału. Warto również pamiętać o rozdzielczości i proporcjach, aby uniknąć rozmycia lub zniekształcenia obrazu. Kadrowanie jest często używane w różnych formatach wizualnych, takich jak posty w mediach społecznościowych, banery reklamowe czy galerie zdjęć. W ten sposób, odpowiednie kadrowanie przyczynia się do lepszej prezentacji treści oraz poprawia estetykę i przejrzystość strony internetowej.

Pytanie 12

Wskaż pole edycyjne sformatowane przedstawionym stylem CSS

input {
  border: none;
  border-bottom: 2px solid Blue;
  color: Gray;
  font-weight: 900;
}

Input 1. Podaj imię:

Input 2. Podaj imię:

Input 3. Podaj imię:

Input 4. Podaj imię: Agnieszka

A. Input 2.

B. Input 3.

C. Input 4.

D. Input 1.

Dobrze wybrałeś! Odpowiedź 'Input 2.' jest rzeczywiście poprawna. To, co oferuje ten element, to wszystko, co potrzebne do spełnienia wymagań stylu CSS, czyli ma niebieskie dolne obramowanie o grubości 2px, szary tekst oraz pogrubioną czcionkę. Wygląd elementów formularza jest mega ważny, bo to właśnie od niego zależy, jak użytkownicy będą się poruszać po stronie. Dzięki CSS możemy to wszystko kontrolować, co daje nam spójność i ładny wygląd. Różne właściwości CSS, takie jak 'border-bottom', 'color' czy 'font-weight', pozwalają na dokładne dostosowanie stylu każdego elementu strony. W sumie, jak już się bardziej wkręcisz w CSS, zauważysz, że można dodać też różne efekty, jak hover, focus czy active, co dodatkowo wzbogaca interakcję. Rozumienie, jak te różne właściwości działają, jest kluczowe, żeby tworzyć fajne i funkcjonalne interfejsy.

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

Odpowiedź "po kliknięciu myszą w celu zapisania w nim tekstu" jest poprawna, ponieważ reguła CSS `input:focus { background-color: LightGreen; }` definiuje styl, który ma zastosowanie, gdy pole edycyjne (input) jest w stanie "focus". Stan ten jest aktywowany, gdy użytkownik klika na pole, co pozwala na wpisywanie tekstu. To podejście jest zgodne z zasadami dostępności i użyteczności interfejsów, ułatwiając użytkownikom interakcję z formularzami. Przykładowo, w formularzach online, takie wizualne wskazanie na aktywne pole poprawia doświadczenie użytkownika, zwiększa czytelność oraz umożliwia łatwiejsze wprowadzanie danych. Warto również pamiętać, że dobrym standardem jest stosowanie kolorów tła, które są kontrastowe w stosunku do kolorów tekstu, aby zapewnić ich czytelność. Ponadto, w praktyce developerskiej, często wykorzystuje się dodatkowe efekty, takie jak animacje, które mogą poprawić interaktywność i wyrazistość reakcji na działania użytkownika. Właściwe stosowanie stylów CSS w kontekście stanu focus jest więc kluczowe dla tworzenia przyjaznych dla użytkownika interfejsów.

Pytanie 14

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }

A. każdemu odnośnikowi niezależnie od aktualnego stanu.

B. wszystkim odnośnikom odwiedzonym.

C. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

D. wszystkim odnośnikom nieodwiedzonym.

Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.

Pytanie 15

Jaką funkcję pełni atrybut value w polu formularza, np. <input type="text" name="name" value="value">?

A. określa nazwę pola

B. określa domyślną wartość pola

C. ustawia pole jako tylko do odczytu

D. ogranicza maksymalną długość pola

Atrybut value w polu formularza ustala jego wartość początkową - tekst, który pojawia się w polu zaraz po załadowaniu strony i zostanie wysłany, jeśli użytkownik go nie zmieni. W przykładzie value="value" pole tekstowe od razu zawiera słowo „value”. Dlatego value określa domyślną wartość pola.

Pytanie 16

Jak można dodać zewnętrzny arkusz stylów do dokumentu HTML?

A. <link>

B. <style>

C. <meta>

D. <css>

Dołączenie zewnętrznego arkusza stylów do kodu HTML realizowane jest przy użyciu znacznika <link>, który znajduje się w sekcji <head> dokumentu HTML. Ten znacznik umożliwia przeglądarkom internetowym odnalezienie i załadowanie zewnętrznego pliku CSS, co pozwala na zastosowanie stylów do elementów HTML. Przy użyciu atrybutu 'href' wskazujemy lokalizację arkusza stylów, natomiast atrybut 'rel' definiuje relację między dokumentem HTML a plikiem stylów, zazwyczaj ustawiając go na 'stylesheet'. Przykładowa struktura to: <link rel='stylesheet' href='styles.css'>. Taki sposób organizacji stylów pozwala na lepsze zarządzanie kodem, umożliwia wielokrotne wykorzystanie tych samych stylów w różnych dokumentach oraz przyspiesza ładowanie strony poprzez caching. Użycie zewnętrznych arkuszy stylów jest zgodne z najlepszymi praktykami programowania front-endowego, co wpływa pozytywnie na wydajność oraz SEO, umożliwiając lepszą indeksację przez wyszukiwarki. Dodatkowo, umożliwia to łatwiejsze wprowadzanie zmian w stylach bez potrzeby edytowania każdego pliku HTML z osobna.

Pytanie 17

W kodzie HTML stworzono link do strony internetowej. Aby otworzyć tę stronę w nowym oknie lub zakładce przeglądarki, należy dodać do definicji linku atrybut

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

A. target = "_blank"

B. rel = "next"

C. target = "_parent"

D. rel = "external"

Atrybut target w języku HTML służy do określenia, w jaki sposób ma otworzyć się dokument, do którego prowadzi odnośnik. Użycie wartości '_blank' dla atrybutu target jest standardowym sposobem na otwarcie nowej strony w nowym oknie lub zakładce przeglądarki. Przykład zastosowania to: <a href="http://google.com" target="_blank">strona Google</a>. Jest to niezwykle przydatne w kontekście UX, ponieważ pozwala użytkownikom na łatwe porównanie informacji bez utraty dostępu do oryginalnej strony. Warto również zauważyć, że użycie tego atrybutu jest zgodne z najlepszymi praktykami w tworzeniu stron internetowych, gdyż umożliwia użytkownikom zachowanie kontekstu przeglądania. W HTML5 atrybut target pozostaje wspierany, co czyni go istotnym elementem w projektowaniu interfejsów użytkownika. Oprócz '_blank' istnieją inne wartości, takie jak '_self', '_parent' i '_top', które również spełniają różne funkcje w zależności od potrzeb nawigacyjnych w aplikacji webowej.

Pytanie 18

Który znacznik HTML umożliwia DYNAMICZNE generowanie grafiki na stronie (bez dodatkowych plików)?

<canvas>

<object>

<img>

<embed>

Element <canvas> to obszar, na którym JavaScript dynamicznie rysuje grafikę (kształty, wykresy, animacje, gry) bez dołączania zewnętrznych plików obrazu. Sam znacznik jest pustym „płótnem”, a treść powstaje skryptem. Dlatego dynamiczną grafikę umożliwia <canvas>.

Pytanie 19

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

C. step

D. readonly

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 20

W przedstawionym stylu CSS w ramce zdefiniowano klasę uzytkownik. Tekst na stronie będzie wyświetlany czcionką w kolorze niebieskim dla

p.uzytkownik { color: blue; }

A. wyłącznie znaczników tekstowych takich jak <p>, <h1>

B. wszystkich akapitów

C. akapitów, którym przypisano klasę uzytkownik

D. dowolnych znaczników w sekcji <body>, które mają przypisaną klasę uzytkownik

Styl CSS przedstawiony w ramce definiuje regułę, która stosuje kolor tekstu niebieski do wszystkich elementów <p> posiadających klasę uzytkownik. W CSS selektory klasowe są reprezentowane przez kropkę (.), co oznacza, że tylko te elementy, które mają przypisaną daną klasę, zostaną sformatowane zgodnie z regułami stylu. W tym przypadku, ponieważ selektor to p.uzytkownik, dotyczy on tylko paragrafów oznaczonych klasą uzytkownik. To precyzyjne zastosowanie selektorów umożliwia projektantom stron internetowych dokładne dostosowanie wyglądu poszczególnych elementów. Takie podejście zapewnia większą elastyczność w projektowaniu i ułatwia zarządzanie wyglądem strony. Praktyką jest stosowanie klas, aby stylować specyficzne elementy w różny sposób, co zwiększa użyteczność i przejrzystość kodu CSS. Warto zaznaczyć, że używanie selektorów klasowych w ten sposób jest zgodne z zasadą separacji treści od prezentacji, co jest kluczowym aspektem w tworzeniu nowoczesnych i responsywnych stron internetowych.

Pytanie 21

W znaczniku meta w miejsce kropek należy wpisać

A. język dokumentu

B. nazwa edytora

C. streszczenie treści strony

D. informację o dostosowaniu do urządzeń mobilnych

Znacznik meta opatrzony atrybutem name="description" służy do zamieszczenia streszczenia treści strony internetowej. Jest to element HTML używany w nagłówku dokumentu, który dostarcza wyszukiwarkom i innym usługom internetowym informacji o zawartości strony. Opis ten pomaga w lepszym indeksowaniu strony przez wyszukiwarki oraz może wpływać na to, jak strona jest prezentowana w wynikach wyszukiwania. Dzięki dobrze sformułowanemu opisowi użytkownicy mogą szybciej zrozumieć, czego mogą się spodziewać po odwiedzeniu danej strony. Jest to dobra praktyka SEO, ponieważ poprawia widoczność strony w wyszukiwarkach. Zawartość opisana w znaczniku meta description nie powinna przekraczać 160 znaków, aby zapewnić odpowiednie wyświetlanie w wynikach wyszukiwania. Użycie streszczenia w odpowiedni sposób zwiększa atrakcyjność kliknięcia przez potencjalnych odwiedzających. To podejście jest zgodne z wytycznymi Google, które zaleca tworzenie unikalnych i treściwych opisów dla każdej strony w serwisie.

Pytanie 22

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

<a href="#dane">

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

B. Zostanie uruchomiony skrypt o nazwie dane

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

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

W składni HTML znak # w atrybucie href w odsyłaczu oznacza, że odnośnik prowadzi do elementu o określonym identyfikatorze id na tej samej stronie. Jest to funkcjonalność zwana nawigacją wewnętrzną lub kotwiczeniem. Po kliknięciu takiego linku przeglądarka automatycznie przewija stronę do elementu o id równym wartości po znaku #. W praktyce jest to bardzo użyteczny mechanizm, zwłaszcza w długich dokumentach lub stronach typu one-page, gdzie można tworzyć spis treści z odnośnikami prowadzącymi do poszczególnych sekcji. Przykładem użycia może być link do formularza na dole strony, który pozwala użytkownikowi szybko dotrzeć do ważnych informacji. Zgodnie z dobrymi praktykami należy zawsze upewnić się, że id jest unikalne w kontekście całej strony, co zapobiega nieoczekiwanym zachowaniom podczas nawigacji. Jest to zgodne ze standardami W3C, które promują semantyczne i dostępne struktury stron internetowych, co wpływa pozytywnie na doświadczenie użytkownika i dostępność stron dla osób z niepełnosprawnościami.

Pytanie 23

Która para znaczników HTML daje (bez stylów CSS) taki sam efekt wizualny - pogrubienie tekstu?

A. <p> i <h2>

B. <b> i <big>

C. <b> i <strong>

D. <meta> i <title>

Znaczniki <b> i <strong> domyślnie dają ten sam efekt wizualny - pogrubienie tekstu. Różnią się jednak znaczeniem (semantyką): <b> to czysto wizualne pogrubienie, a <strong> oznacza treść WAŻNĄ, co wykorzystują m.in. czytniki ekranu i wyszukiwarki. Podobna para to <i> i <em> (pochylenie). Dlatego wizualnie identyczny efekt daje para <b> i <strong>.

Pytanie 24

Która z czynności nie wpłynie na objętość zajmowanej pamięci pliku graficznego?

A. Kompresja

B. Modyfikacja rozdzielczości obrazu

C. Zmiana rozmiaru obrazu przy użyciu atrybutów HTML

D. Interpolacja

Skalowanie obrazu za pomocą atrybutów HTML to technika, która pozwala na dostosowanie rozmiaru wyświetlanego obrazu w przeglądarce internetowej bez zmiany jego rzeczywistego rozmiaru pliku. Atrybuty takie jak 'width' i 'height' w tagach <img> wpływają jedynie na to, jak obraz jest prezentowany na stronie, a nie na jego fizyczne właściwości. Przykładem może być użycie <img src='obraz.jpg' width='300' height='200'>, co sprawia, że obraz wyświetla się w określonych wymiarach, ale plik graficzny pozostaje niezmieniony. Takie podejście jest zgodne z dobrymi praktykami w projektowaniu stron internetowych, ponieważ pozwala na utrzymanie jakości obrazu bez dodatkowego obciążania serwera. W sytuacjach, gdy szybkość ładowania strony jest kluczowa, użycie odpowiednich atrybutów HTML może przyczynić się do lepszego doświadczenia użytkownika bez potrzeby modyfikacji oryginalnych plików graficznych. Warto również zaznaczyć, że w przypadku responsywnych stron internetowych stosuje się techniki CSS, które umożliwiają dalsze dostosowanie wielkości obrazów, ale także nie wpływają na ich wagę w pamięci.

Pytanie 25

W przedstawionym kodzie HTML ukazany styl CSS to styl:

<p style="color: red;">To jest przykładowy akapit.</p>

A. dynamiczny.

B. lokalny.

C. zewnętrzny.

D. nagłówkowy.

Odpowiedź "lokalnym" jest prawidłowa, ponieważ styl CSS zastosowany w podanym kodzie HTML definiuje właściwości stylu bezpośrednio w elemencie HTML, co określamy jako styl lokalny (inline style). W tym przypadku, styl "color: red;" został zastosowany bezpośrednio w tagu <p>, co wpływa wyłącznie na ten konkretny akapit. Praktyczne zastosowanie lokalnych stylów polega na tym, że można je szybko dodać do pojedynczych elementów, ale należy pamiętać, że nadmiar lokalnych stylów może prowadzić do problemów z utrzymywaniem i zarządzaniem kodem. Zamiast tego zaleca się stosowanie zewnętrznych arkuszy stylów CSS, co pozwala na centralne zarządzanie stylami dla całej strony. Warto zauważyć, że lokalne style mają wyższy priorytet niż style zewnętrzne, co może prowadzić do konfliktów, jeśli nie zostaną odpowiednio użyte. Aby zapewnić zgodność z najlepszymi praktykami, zaleca się ograniczanie stosowania lokalnych stylów tam, gdzie to możliwe, na rzecz bardziej zorganizowanego podejścia z użyciem klas i identyfikatorów w zewnętrznych arkuszach stylów.

Pytanie 26

Który z poniższych obrazów został sformatowany przy użyciu zaprezentowanego stylu CSS?

A. B

B. C

C. D

D. A

Odpowiedź A jest prawidłowa, ponieważ zastosowane style CSS dokładnie odzwierciedlają podany kod. Styl img { padding: 5px; border: 1px solid grey; border-radius: 10px; } oznacza, że obrazek otrzymuje wewnętrzny margines o wartości 5 pikseli, szary, jednopikselowy, ciągły obramowanie oraz zaokrąglenie narożników o promieniu 10 pikseli. Efektem tego jest estetyczny wygląd, który umożliwia lepszą prezentację treści graficznych w projektach webowych. Padding pozwala na uzyskanie równowagi wizualnej, natomiast border-radius zapewnia miękkość krawędzi, co jest często stosowane w nowoczesnym web designie. Praktycznym zastosowaniem takich stylów jest m.in. tworzenie kart wizualnych na stronach internetowych, gdzie estetyka i czytelność są kluczowe. Dobrym przykładem jest stosowanie tych technik w responsywnych projektach, gdzie obrazy muszą dobrze współgrać z różnymi elementami interfejsu użytkownika. CSS umożliwia tworzenie atrakcyjnych wizualnie stron, które przyciągają uwagę i poprawiają interakcję użytkownika z treścią.

Pytanie 27

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

A. <img src="obrazek.png">

B. <img src="/../katalog_2/katalog_B/obrazek.png">

C. <img src="../../katalog_2/katalog_B/obrazek.png">

D. <img src="/../katalog_1/katalog_B/obrazek.png">

Poprawny zapis <img src="../../katalog_2/katalog_B/obrazek.png"> wynika bezpośrednio z położenia pliku HTML i grafiki w strukturze katalogów. plik.html znajduje się w katalogu_1/katalog_A, a obrazek.png w katalogu_2/katalog_B. Żeby przeglądarka mogła odnaleźć plik graficzny, ścieżka względna musi krok po kroku „przejść” po tej strukturze. Najpierw ../../ cofa nas dwa poziomy w górę: z katalog_A do katalog_1, a potem z katalog_1 do katalogu głównego, w którym znajdują się katalog_1 i katalog_2. Następnie wchodzimy do katalog_2, potem do katalog_B i dopiero tam leży obrazek.png. To dokładnie odzwierciedla poprawną, relatywną drogę od pliku HTML do zasobu graficznego.
Z mojego doświadczenia w projektach webowych używanie poprawnych ścieżek względnych jest kluczowe, szczególnie gdy serwis ma rozbudowaną strukturę folderów albo jest później przenoszony między środowiskami (np. localhost, serwer testowy, produkcja). Dzięki ścieżkom względnym, takim jak ../../katalog_2/katalog_B/obrazek.png, kod HTML jest bardziej przenośny i nie trzeba modyfikować adresów po każdej zmianie domeny czy katalogu głównego. Warto też pamiętać, że atrybut src w znaczniku <img> zawsze wskazuje na zasób, który przeglądarka ma pobrać – może to być ścieżka względna, bezwzględna w obrębie serwera lub pełny URL z protokołem. W praktyce przy większych projektach dobrze jest utrzymywać spójną konwencję nazewnictwa katalogów (np. img, assets, static) i stosować logiczną strukturę, żeby takie ścieżki były łatwe do ogarnięcia. Moim zdaniem warto też na wczesnym etapie przyzwyczaić się do „ręcznego” analizowania, skąd jest liczona ścieżka – zawsze od lokalizacji aktualnego dokumentu HTML, chyba że używamy ścieżek absolutnych od katalogu głównego serwera.

Pytanie 28

Na ilustracji przedstawiono schemat rozmieszczenia elementów na stronie WWW. W której z jej sekcji zazwyczaj znajduje się stopka strony?

A. 4

B. 2

C. 5

D. 1

Odpowiedź 5 jest poprawna ponieważ w standardach projektowania stron internetowych stopka strony zazwyczaj znajduje się na dole każdej podstrony. Stopka to miejsce gdzie umieszczane są informacje takie jak prawa autorskie prywatność i linki do kontaktu. Dobrze zaprojektowana stopka może także zawierać skróty nawigacyjne które pomagają użytkownikowi szybko przemieszczać się po stronie. W praktyce projektanci stron WWW stosują podejście oparte na responsywnym designie co oznacza że stopka powinna być łatwo dostępna i czytelna na różnych urządzeniach. Wykorzystanie CSS Grid lub Flexbox pozwala na elastyczne zarządzanie układem strony co jest szczególnie przydatne przy projektowaniu stopki. Ponadto stopki są elementami które odpowiadają za spójność wizualną całej strony internetowej zapewniając użytkownikowi intuicyjne doświadczenie. Umieszczanie stopki w dolnej części strony jest zgodne z oczekiwaniami użytkowników co zwiększa użyteczność serwisu i pozytywnie wpływa na jego odbiór. Praktyczne zastosowanie tego podejścia można zauważyć na wielu profesjonalnych stronach gdzie stopka jest wyraźnie oddzielona i przejrzysta co ułatwia użytkownikowi odnalezienie potrzebnych informacji.

Pytanie 29

Aby zdefiniować styl akapitu <p>, który występuje bezpośrednio po znaczniku <img>, należy w arkuszu CSS zastosować selektor:

img [p]

img > p

img + p

img p

Te selektory różnią się rodzajem powiązania między elementami. img p ze spacją to selektor potomka - odnosi się do akapitów znajdujących się wewnątrz obrazu, co jest niemożliwe, bo <img> nie zawiera treści. img > p z operatorem > wybiera bezpośrednie dzieci elementu, więc również szuka <p> w środku <img>. Zapis img [p] jest po prostu błędny - nawiasy kwadratowe w CSS służą do dopasowania po atrybutach, a nie po nazwie znacznika. Akapit stojący tuż za obrazem, jako jego sąsiad, wskazuje selektor img + p z operatorem sąsiedztwa.

Pytanie 30

Do ilu pól edycyjnych zostanie przypisane tło Teal dla przedstawionego fragmentu dokumentu HTML i stylu CSS?

<input type="text">
<input type="number">
<input type="email">
<input type="number">
<input>

input[type="number"] {
    background-color: Teal;
}

A. Do trzech.

B. Do dwóch.

C. Do wszystkich.

D. Do żadnego.

Bardzo dobrze! Wybrałeś prawidłową odpowiedź, mówiącą, że tło Teal zostanie przypisane do dwóch pól edycyjnych. W przedstawionym fragmencie dokumentu HTML mamy pięć pól edycyjnych (input), z których tylko dwa mają typ 'number'. Tło Teal jest zdefiniowane w stylu CSS i ma być zastosowane tylko do pól typu 'number'. Jest to zgodne z dobrymi praktykami stosowania selektorów atrybutów w CSS, które pozwalają na precyzyjne określenie, do jakich elementów strony internetowej powinien być zastosowany dany styl. Dzięki temu możemy na przykład zastosować różne style dla różnych typów pól wejściowych, jak to jest w tym przypadku. To jest przykład, jak możemy wykorzystać moc CSS do kontroli wyglądu różnych elementów na naszej stronie.

Pytanie 31

Która praktyka ZWIĘKSZA czytelność kodu źródłowego?

A. unikanie jakichkolwiek komentarzy

B. pisanie jak najdłuższych linii w jednym wierszu

C. stosowanie wcięć i opisowych nazw zmiennych

D. nadawanie zmiennym jednoliterowych nazw

Czytelność kodu najbardziej poprawiają WCIĘCIA (pokazujące strukturę bloków) oraz OPISOWE nazwy zmiennych i funkcji, z których od razu wynika ich rola. Dzięki temu kod łatwiej zrozumieć i utrzymać. Dlatego czytelność zwiększa stosowanie wcięć i opisowych nazw.

Pytanie 32

W dokumencie HTML stworzono formularz. Jakie działanie kodu zostanie pokazane przez przeglądarkę, jeśli w drugie pole użytkownik wprowadzi tekst „ala ma kota”?

A. Efekt 3

B. Efekt 1

C. Efekt 4

D. Efekt 2

Efekt 2 jest poprawny ponieważ kod HTML przedstawia formularz zawierający element select oraz pole input typu password. Element select pozwala na wybór jednej z trzech opcji Kraków Poznań i Szczecin co widzimy w efekcie 2. Pole input typu password zasłania wpisywane przez użytkownika znaki co jest zgodne z przedstawionym obrazem gdzie w miejscu drugiego pola widoczne są zamaskowane znaki. To zabezpieczenie jest standardem w formularzach internetowych chroniącym dane przed nieuprawnionym dostępem. Przeglądarki internetowe interpretują typ password zamieniając wprowadzone znaki na symbole najczęściej kropki lub gwiazdki. Dla programistów webowych jest to istotne przy projektowaniu interfejsów użytkownika zapewniając zarówno funkcjonalność jak i bezpieczeństwo. Ważne jest również aby pamiętać o odpowiednim zarządzaniu danymi wprowadzonymi w polach password po stronie serwera zapewniając szyfrowanie i bezpieczne przechowywanie. Stosowanie elementu select w połączeniu z input type=password jest popularne w formularzach rejestracyjnych gdzie użytkownik wybiera opcję a następnie wprowadza hasło. Dobre praktyki obejmują również walidację danych po stronie klienta i serwera aby zapewnić poprawność i bezpieczeństwo wprowadzanych informacji.

Pytanie 33

Co należy zrobić, aby strona internetowa była dostępna dla osób z niepełnosprawnościami, zgodnie z wytycznymi WCAG?

A. używać tylko akapitów, bez nagłówków h1-h6

B. stosować tylko jedną barwę i jej odcienie

C. opisywać obrazy tekstem alternatywnym, a kontrolki etykietami

D. testować stronę wyłącznie w najpopularniejszej przeglądarce

Dostępność wg WCAG oznacza, że ze strony skorzystają też osoby z niepełnosprawnościami, m.in. używające czytników ekranu. Kluczowe jest opisywanie obrazów tekstem alternatywnym (atrybut alt) oraz wiązanie pól formularza z etykietami (label), aby czytnik mógł je odczytać. Ważne są też nagłówki, kontrast i obsługa klawiaturą. Dlatego poprawna jest odpowiedź o tekście alternatywnym i etykietach kontrolek.

Pytanie 34

W CSS zastosowano poniższe formatowanie. Kolorem czerwonym będzie wyświetlony

h1 i {
   color: red;
}

A. jedynie tekst italic we wszystkich poziomach nagłówków

B. tylko tekst italic nagłówka pierwszego stopnia

C. cały tekst nagłówka pierwszego stopnia oraz tekst italic akapitu

D. cały tekst nagłówka pierwszego stopnia oraz wszelki tekst italic, niezależnie od lokalizacji na stronie

W stylach CSS selektor złożony h1 i oznacza, że formatowanie będzie stosowane tylko do elementów pochylonych i znajdujących się wewnątrz nagłówka pierwszego poziomu h1. W praktyce oznacza to, że taki zapis CSS zmienia kolor na czerwony tylko dla tekstu wewnątrz tagu <i> znajdującego się w <h1>. Selekcja złożona umożliwia precyzyjne określanie, które elementy są formatowane, co jest kluczowe w przypadku dużych i złożonych stron internetowych. Zrozumienie działania selektorów jest fundamentem efektywnego stylizowania dokumentów HTML. Pozwala to na zachowanie spójności wizualnej oraz lepszą kontrolę nad wyglądem strony. Dobór odpowiednich selektorów w CSS to również jedna z dobrych praktyk, które sprzyjają czytelności kodu oraz jego łatwiejszej konserwacji w przyszłości. Taki zapis pozwala na minimalizację konfliktów stylów, które mogą się pojawić przy bardziej ogólnych selektorach. Praktyczne użycie selektorów złożonych jest więc zalecane w celu uzyskania bardziej kontrolowanego i przewidywalnego wyglądu strony internetowej, co jest zgodne ze standardami webowymi promującymi semantyczne i uporządkowane kodowanie.

Pytanie 35

Przedstawiony serwis internetowy służy do walidacji

A. skryptów JavaScript.

B. dokumentów HTML.

C. bazy danych SQL.

D. arkuszy stylów.

Twoja odpowiedź jest prawidłowa. Strona internetowa 'CSS Validation Service' jest narzędziem stworzonym przez konsorcjum W3C do walidacji arkuszy stylów CSS. W3C, czyli World Wide Web Consortium, to międzynarodowa społeczność, która rozwija otwarte standardy mające na celu długoterminowe wzrost i rozwój sieci WWW. Narzędzie do walidacji CSS zapewnia mechanizm sprawdzania kodu CSS pod kątem zgodności ze standardami W3C. Dzięki temu deweloperzy mogą upewnić się, że ich arkusze stylów są poprawne, co jest kluczowe dla zapewnienia prawidłowego wyglądu i działania stron internetowych na różnych platformach i przeglądarkach. Walidator CSS pomaga także naprawić ewentualne błędy w kodzie. To jest praktyczne zastosowanie tej usługi - utrzymanie jednolitych standardów kodowania, co prowadzi do większej interoperacyjności pomiędzy różnymi technologiami i narzędziami.

Pytanie 36

Jaką formę ma kolor przedstawiony w systemie szesnastkowym jako #11FE07 w formacie RGB?

A. rgb(17,FE,7)

B. rgb(17,255,7)

C. rgb(11,127,7)

D. rgb(17,254,7)

Kolor zapisany w postaci szesnastkowej #11FE07 odnosi się do systemu kolorów RGB, który jest powszechnie wykorzystywany w grafice komputerowej oraz w sieci. Wartości szesnastkowe składają się z trzech par cyfr: pierwsza para (11) reprezentuje wartość czerwonego (R), druga para (FE) wartość zielonego (G), a trzecia para (07) wartość niebieskiego (B). Aby przekształcić wartości szesnastkowe na dziesiętne, stosujemy konwersję, gdzie '11' w systemie szesnastkowym to 17 w systemie dziesiętnym, 'FE' to 254, a '07' to 7. Zatem wartość RGB dla koloru #11FE07 wynosi rgb(17, 254, 7). Wartości te są kluczowe w tworzeniu kolorów w różnych aplikacjach, od stron internetowych po projektowanie graficzne. Zrozumienie konwersji kolorów oraz ich reprezentacji w różnych formatach jest niezbędne dla każdego projektanta, który pracuje z kolorami. Przykładem zastosowania może być projektowanie logo, gdzie precyzyjne odwzorowanie koloru w różnych formatach jest istotne dla spójności wizualnej marki.

Pytanie 37

Która z zasad walidacji strony internetowej jest nieprawidłowa?

A. W tagach nie jest brana pod uwagę różnica między dużymi a małymi literami, np. ```<p>``` i ```<P>``` to ten sam tag.

B. Tagi, poza samozamykającymi się, funkcjonują do momentu ich wyłączenia znakiem "/", np. ```<p> ..</p>```

C. Wyłączanie tagów musi następować w odwrotnej sekwencji do ich włączenia, np. ```<p> ... <big>...</big></p>```

D. Jeżeli w poleceniu występuje kilka atrybutów, ich kolejność powinna być uporządkowana alfabetycznie np. ```<img alt="..." src="/.."/>```

Odpowiedź dotycząca kolejności atrybutów w znacznikach HTML jest poprawna, ponieważ nie ma wymogu, aby atrybuty w znacznikach były uporządkowane alfabetycznie. W rzeczywistości, HTML pozwala na dowolną kolejność atrybutów, co czyni tę regułę błędną. Przykładowo, znacznik <img src="/path/to/image.jpg" alt="Opis obrazu" /> jest poprawny niezależnie od kolejności atrybutów. Ważne jest, aby atrybuty były odpowiednio używane w kontekście ich przeznaczenia, a nie w kontekście kolejności alfabetycznej. Dobrą praktyką jest również stosowanie atrybutów w sposób, który zwiększa czytelność kodu, jednak nie jest to wymóg techniczny. Zgodnie z zaleceniami W3C, kluczowym aspektem jest poprawność semantyczna i zgodność ze standardami, a nie kolejność atrybutów.

Pytanie 38

Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika

A. <img src="/rysunek.png" style="width: 25px; height:50px;">

B. <img src="/rysunek.png" style="width: 50px">

C. <img src="/rysunek.png">

D. <img src="/rysunek.png" style="width: 25px; height:25px;">

Wybór innych opcji, takich jak <img src="/rysunek.png" style="width: 25px; height:50px;"> czy <img src="/rysunek.png" style="width: 25px; height:25px;"> prowadzi do nieproporcjonalnego wyświetlenia obrazu, co skutkuje jego zniekształceniem. Ustalenie zarówno szerokości, jak i wysokości w stylach CSS sprawia, że obrazek jest zmuszony do dopasowania się do tych wymiarów, co narusza jego naturalne proporcje. To podejście jest niezgodne z zaleceniami dotyczącymi responsywności, które sugerują, aby ograniczać się do jednego wymiaru, co pozwala drugiemu na automatyczne dostosowanie. Typowym błędem jest przyjęcie, że podanie obu wymiarów w pikselach zawsze przyniesie optymalny efekt wizualny, co jest mylące i może prowadzić do złego doświadczenia użytkownika. Zniekształcenie obrazów nie tylko obniża estetykę strony, ale także może wpływać na jej użyteczność oraz SEO. Dobrą praktyką jest również używanie atrybutów 'alt' w znacznikach obrazów, aby poprawić dostępność i SEO, co nie zostało uwzględnione w żadnej z opcji. Warto także zauważyć, że stosowanie odpowiednich formatów obrazów i ich optymalizacja pod względem rozmiaru pliku są kluczowe dla przyspieszenia ładowania strony.

Pytanie 39

Aby pobrać dane z formularza HTML tak, aby nie były widoczne w adresie URL, należy zastosować:

A. same kontrolki, bez formularza

B. metodę GET

C. metodę POST

D. wyłącznie funkcje z biblioteki PDO

Formularz HTML może wysyłać dane jedną z dwóch metod: GET albo POST. Metoda POST umieszcza dane w treści (body) żądania HTTP, dlatego nie trafiają one do adresu URL i nie są widoczne w pasku przeglądarki ani zapisywane w historii. Z tego powodu używa się jej do logowania, formularzy z danymi osobowymi czy dłuższych treści. Aby dane formularza nie pojawiły się w URL, wybiera się więc metodę POST (atrybut method="post").

Pytanie 40

Jak nazywa się edytor stron, którego działanie tłumaczy się jako „otrzymujesz to, co widzisz”?

A. WEB STUDIO

B. VISUAL EDITOR

C. IDE

D. WYSIWYG

Pozostałe nazwy nie pasują. IDE to zintegrowane środowisko programistyczne (pisze się w nim kod), a „WEB STUDIO” i „VISUAL EDITOR” to nazwy ogólne, nie określające tej zasady działania. Edytor z podglądem efektu to WYSIWYG.

Rozpocznij nowy egzamin

Powrót do strony głównej