Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 12 czerwca 2026 10:04
Data zakończenia: 12 czerwca 2026 10:19

Egzamin zdany!

Wynik: 22/40 punktów (55,0%)

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

Jaki jest efekt działania programu w JavaScript?

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

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

B. pojawi się okno z pustym polem do edycji

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

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

Kod var osoba = prompt('Podaj imię' 'Adam') używa funkcji prompt która jest specyficznym mechanizmem w JavaScript. Funkcja ta nie przypisuje bezpośrednio wartości Adam do zmiennej osoba w sposób jawny ale prezentuje użytkownikowi okno dialogowe z domyślną wartością. To okno dialogowe zawiera pole tekstowe które umożliwia edycję przez użytkownika. Użytkownik może pozostawić sugerowaną wartość Adam lub ją zmienić wprowadzając dane. W przypadku gdy użytkownik kliknie anuluj zmienna osoba zostanie ustawiona na null. Z tego powodu odpowiedź sugerująca bezpośrednie przypisanie wartości do zmiennej nie jest poprawna. Koncepcja pobrania imienia z formularza HTML również jest błędna ponieważ nie jest to forma interakcji z formularzem a z oknem dialogowym. Formularze HTML mają swoją własną strukturę i sposób manipulacji danymi który różni się od metody używanej w przypadku prompt. Kolejnym błędnym założeniem jest twierdzenie że okno dialogowe jest puste. Prompt oferuje możliwość podania domyślnej wartości co zostało zrealizowane w przykładzie poprzez umieszczenie Adama jako drugiego argumentu funkcji. Zrozumienie różnic w działaniu funkcji JavaScript oraz ich ograniczeń jest kluczowe w projektowaniu efektywnych interfejsów użytkownika na stronach internetowych. Programiści powinni być świadomi standardów i dobrych praktyk związanych z używaniem różnych metod interakcji w aplikacjach webowych by zapewnić optymalne doświadczenia użytkownika i kompatybilność z nowoczesnymi przeglądarkami internetowymi. Funkcje takie jak prompt są wygodne lecz ich użycie wymaga zrozumienia kontekstu i potencjalnych ograniczeń bezpieczeństwa oraz kompatybilności z przeglądarkami które mogą wpływać na sposób ich obsługi w bardziej złożonych aplikacjach webowych. Dlatego nowoczesne rozwiązania często korzystają z bardziej złożonych mechanizmów jak formularze HTML z dynamicznymi stylami i skryptami które pozwalają na większą kontrolę i elastyczność w interakcji z użytkownikiem.

Pytanie 2

Której właściwości CSS użyć, aby ustawić wewnętrzny GÓRNY odstęp (między treścią a obramowaniem)?

padding-top

border-top

local-top

outline-top

Pozostałe nazwy dotyczą czego innego. border-top rysuje górne OBRAMOWANIE (linię), a nie odstęp wewnętrzny. outline-top i local-top to właściwości, które w CSS NIE istnieją. Górny margines wewnętrzny daje padding-top.

Pytanie 3

W instrukcjach mających na celu odtwarzanie dźwięku na witrynie internetowej jako podkładu muzycznego nie stosuje się atrybutu

A. href="C:/100.wav">

B. loop="10"

C. balance="-10"

D. volume="-100"

Wybór atrybutów, takich jak 'volume="-100"', 'balance="-10"' oraz 'loop="10"', może prowadzić do nieporozumień dotyczących ich zastosowania w kontekście odtwarzania dźwięku na stronach internetowych. Atrybut 'volume', w rzeczywistości, nie jest standardowym atrybutem HTML. Wprowadzenie atrybutu 'volume' z wartością '-100' sugeruje błędne podejście do zarządzania głośnością, gdyż głośność powinna być regulowana w sposób programowy, często przy użyciu JavaScript, aby zapewnić bardziej precyzyjną kontrolę nad poziomem dźwięku. Z kolei 'balance' także nie jest standardowym atrybutem HTML i nie istnieje możliwość bezpośredniego jego zastosowania w tagach HTML dla dźwięku. Aby zrównoważyć dźwięk, należy skorzystać z dedykowanych narzędzi audio w JavaScript lub edytorów audio. Warto również zauważyć, że 'loop="10"' jest błędnym wykorzystaniem atrybutu 'loop', który w HTML działa jako prosty przełącznik, bez możliwości określenia liczby powtórzeń. Przykład wartości boolean 'loop' w tagu <audio> polega na tym, że plik audio będzie powtarzany w nieskończoność, a nie przez 10 razy. Te nieporozumienia mogą prowadzić do rozczarowania wśród deweloperów, jeśli nie są świadomi funkcji i ograniczeń atrybutów HTML. Kluczowe jest zrozumienie, że użycie atrybutów powinno być zgodne z ich przeznaczeniem w standardach HTML, aby zapewnić prawidłowe działanie aplikacji webowych.

Pytanie 4

Użycie standardu ISO-8859-2 ma na celu zapewnienie prawidłowego wyświetlania

A. polskich znaków, takich jak: ś, ć, ń, ó, ą

B. symboli matematycznych

C. specjalnych znaków przeznaczonych dla języka kodu strony

D. znaków zarezerwowanych dla języka opisu strony

Wybór znaków matematycznych jako celu kodowania w standardzie ISO-8859-2 jest błędny, ponieważ ten standard nie koncentruje się na symbolach matematycznych, a raczej na literach i znakach typowych dla języków łacińskich, w tym polskiego. Mylne jest również stwierdzenie, że ISO-8859-2 jest używane do wyświetlania znaków specjalnych dla języka kodu strony, ponieważ te znaki są ogólnie obsługiwane przez różne standardy kodowania, w tym UTF-8, a ich obecność w ISO-8859-2 jest ograniczona. W przypadku znaków zarezerwowanych dla języka opisu strony, takich jak HTML, ich interpretacja nie zależy od konkretnego kodowania, lecz od zgodności z określonymi standardami HTML i CSS. Warto zwrócić uwagę, że wiele osób zapomina o różnicy między kodowaniem a samym językiem programowania; kodowanie dotyczy sposobu reprezentacji znaków, podczas gdy języki programowania definiują logikę oraz składnię. Często stosowanym błędem jest założenie, że każda strona internetowa musi wykorzystywać ISO-8859-2, co nie jest prawdą, zwłaszcza w dobie globalizacji i różnorodności językowej, gdzie coraz powszechniejsze staje się kodowanie UTF-8, które jest bardziej elastyczne i obsługuje szerszy zakres znaków.

Pytanie 5

Która zasada użycia semantycznych znaczników HTML5 jest PRAWDZIWA?

A. <nav> jest charakterystyczny dla <article>

B. <footer> powinien być na górze, a <header> na dole

C. <main> może wystąpić tylko RAZ w dokumencie

D. <aside> służy do GŁÓWNEJ treści strony

Pozostałe zdania są fałszywe. <nav> to nawigacja (nie część <article>). <header> jest u góry, a <footer> na dole (nie odwrotnie). <aside> zawiera treść POBOCZNĄ, nie główną. Prawdą jest, że <main> występuje tylko raz.

Pytanie 6

Aby przygotować szablon strony z trzema kolumnami ustawionymi obok siebie, należy posłużyć się stylem CSS:

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

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

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

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

Pozostałe style nie dadzą trzech równych kolumn obok siebie. Wariant z clear: both wręcz wyłącza opływanie, więc bloki ustawią się jeden pod drugim, a height: 33% steruje wysokością, nie szerokością. Wariant z float: right co prawda układałby elementy w rzędzie, ale również podaje height zamiast width, więc nie kontroluje szerokości kolumn. Ostatni ma poprawny float: left, lecz width: 40% jest za duże - trzy kolumny po 40% przekraczają 100% szerokości i ostatnia spadnie do następnego rzędu. Trzy równe kolumny daje float: left z width: 33%.

Pytanie 7

Parametr face w znaczniku <font> jest używany do określenia

A. rozmiaru czcionki

B. typy czcionki

C. stylów czcionki

D. koloru czcionki

Parametr <b>face</b> znacznika <b><font></b> jest używany do określenia nazwy czcionki, co jest kluczowe dla stylizacji tekstu w dokumentach HTML. Umożliwia on deweloperom wybór konkretnej czcionki, która będzie używana do wyświetlania tekstu, co wpływa na jego estetykę oraz czytelność. Przykładowo, można użyć wartości takiej jak 'Arial', 'Times New Roman' czy 'Courier New', aby zdefiniować preferowaną czcionkę, co jest szczególnie ważne w przypadku identyfikacji wizualnej brandu. W praktyce, dobór odpowiedniej czcionki wpływa na doświadczenie użytkownika, a także na dostępność treści. Warto zaznaczyć, że w nowoczesnych praktykach webowych, stosowanie CSS do stylizacji tekstu stało się bardziej zalecane niż używanie znaczników <font>, co wynika z dążenia do separacji treści od prezentacji. Dobre praktyki wskazują na użycie właściwości CSS takich jak 'font-family', co jest bardziej elastyczne i zgodne z aktualnymi standardami sieciowymi.

Pytanie 8

Który znacznik służy do budowania hierarchii (struktury) tekstu nagłówkami?

<head>

<h6>

<style>

<u>

Pozostałe znaczniki nie budują hierarchii nagłówków. <u> podkreśla tekst, <head> to sekcja metadanych (nie nagłówek treści!), a <style> zawiera reguły CSS. Nagłówkiem struktury tekstu jest <h6>.

Pytanie 9

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu:

<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 br nie może występować wewnątrz znacznika p.

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

Twoja odpowiedź jest poprawna. Znacznik zamykający /b w badanym kodzie HTML jest niezgodny z zasadą zagnieżdżania. Zasada ta mówi, że znaczniki powinny być zamykane w odwrotnej kolejności do otwierania - zgodnie z modelem LIFO (Last In, First Out). W praktyce oznacza to, że jeśli otworzyliśmy na przykład najpierw znacznik <i>, a następnie <b>, to najpierw powinniśmy zamknąć <b>, a dopiero potem <i>. Nieprzestrzeganie tej zasady może prowadzić do nieoczekiwanych wyników podczas renderowania strony. Jest to istotne dla utrzymania czytelności i prawidłowego funkcjonowania kodu. W codziennej praktyce, szczególnie w większych projektach, stosowanie się do takich zasad pomaga utrzymać kod zrozumiałym i łatwym do zarządzania.

Pytanie 10

Podaj nazwę Systemu Zarządzania Treścią, którego logo jest widoczne na zamieszczonym rysunku?

A. WordPress

B. MediaWiki

C. Drupal

D. Joomla!

Podczas wyboru systemu zarządzania treścią istotne jest zrozumienie różnic między różnymi platformami. Drupal jest potężnym CMS-em często wybieranym do budowy złożonych stron gdzie wymagane są skomplikowane struktury danych i zaawansowana kontrola uprawnień użytkowników. Jednak jego zaawansowane funkcje mogą sprawić że krzywa uczenia się będzie bardziej stroma szczególnie dla początkujących użytkowników. Drupal jest jednak doskonałym wyborem dla dużych organizacji które potrzebują niezawodności i skalowalności. Z kolei WordPress jest najbardziej popularnym CMS-em na świecie znanym ze swojej prostoty i ogromnej liczby dostępnych wtyczek i motywów co czyni go idealnym wyborem dla blogów i prostych stron internetowych. Jego przystępność i łatwość użycia sprawiają że jest on preferowany przez początkujących ale może być niewystarczający dla bardziej rozbudowanych projektów. MediaWiki to platforma stworzona dla projektów typu wiki i jest najlepiej znana z napędzania Wikipedii. Jej funkcje są skoncentrowane na umożliwieniu wielu użytkownikom współpracy i edycji treści co czyni ją mniej odpowiednią dla tradycyjnych stron internetowych. Typowym błędem podczas wyboru CMS-a jest kierowanie się wyłącznie popularnością zamiast analizowania specyficznych potrzeb projektu i odpowiednich funkcji jakie oferuje dany CMS. Dlatego kluczowe jest zrozumienie że wybór CMS-a powinien być podyktowany konkretnymi wymaganiami dotyczącymi funkcjonalności i zarządzania treścią.

Pytanie 11

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

B. tr:hover { background-color: Pink; }

C. tr:active { background-color: Pink; }

D. tr { background-color: Pink; }

Poprawny selektor to tr:hover { background-color: Pink; }, bo dokładnie opisuje sytuację pokazaną na filmie: efekt pojawia się dopiero po najechaniu kursorem na cały wiersz tabeli. Pseudo-klasa :hover w CSS służy właśnie do definiowania stylów w momencie, gdy użytkownik „najeżdża” myszką na dany element. Jeśli więc chcemy, żeby podświetlał się cały rząd tabeli, logiczne i zgodne z dobrymi praktykami jest przypięcie efektu do znacznika tr, a nie do pojedynczych komórek.

W praktyce taki zapis stosuje się bardzo często w interfejsach webowych: w panelach administracyjnych, listach zamówień, tabelach z uczniami, produktami, logami systemowymi itd. Dzięki temu użytkownik łatwiej śledzi, który wiersz właśnie ogląda. To niby detal, ale z punktu widzenia UX robi sporą różnicę. Z mojego doświadczenia to jeden z tych prostych trików CSS, które od razu poprawiają „odczuwalną” jakość strony.

Ważne jest też to, że :hover jest częścią standardu CSS (opisane m.in. w specyfikacji CSS Selectors Level 3/4) i działa w praktycznie wszystkich współczesnych przeglądarkach. Nie trzeba do tego żadnego JavaScriptu, żadnych skomplikowanych skryptów – czysty CSS. Dobrą praktyką jest również używanie bardziej stonowanych kolorów niż Pink w prawdziwych projektach, np. #f5f5f5 albo lekki odcień niebieskiego, tak żeby kontrast był czytelny i nie męczył wzroku. Warto też pamiętać, że podobny mechanizm możesz zastosować na innych elementach: np. a:hover dla linków, button:hover dla przycisków czy nawet div:hover dla całych kafelków w layoutach. Kluczowe jest to, żeby pseudo-klasa :hover była przypięta dokładnie do tego elementu, który ma reagować na interakcję użytkownika.

Pytanie 12

Które słowne wartości może przyjmować właściwość font-size?

A. wyłącznie small, medium, large

B. tylko small, smaller, large, larger

C. xx-small, x-small, small, medium, large, x-large, xx-large

D. tylko big i small

Właściwość font-size obok jednostek (np. px, em) przyjmuje słowne rozmiary BEZWZGLĘDNE: xx-small, x-small, small, medium, large, x-large, xx-large (są też względne smaller/larger). Dlatego pełny zestaw to czwarta odpowiedź.

Pytanie 13

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

Zapis tego selektora oznacza, że tło będzie miało brązowy kolor dla:

A. pól edycyjnych, w które użytkownik wprowadzi dowolną cyfrę

B. wszystkich tekstów na stronie internetowej

C. pól edycyjnych, które są typu numerycznego

D. wszystkich typów pól edycyjnych

Odpowiedzi, które sugerują, że tło będzie brązowe dla wszystkich tekstów na stronie, są błędne z powodu nieporozumienia dotyczącego selektorów CSS. Selekcja `input[type=number]` odnosi się wyłącznie do pól wejściowych, które są zdefiniowane jako typu numerycznego. Elementy na stronie, takie jak teksty, nie są objęte tym selektorem, ponieważ CSS działa na podstawie specyfikacji typu elementu, a nie jego zawartości. Nie można również uznać, że tło będzie brązowe dla wszystkich pól edycyjnych, ponieważ nie wszystkie pola typu input muszą być numeryczne. Typy input mogą obejmować `text`, `email`, `password` i inne, każdy z własnymi specyfikacjami stylizacji. Błędem jest również myślenie, że stylizacja CSS działa globalnie na wszystkie elementy; zamiast tego, każdy selektor działa w kontekście jego definicji. Dobrą praktyką jest zrozumienie, jak selektory CSS powinny być używane w sposób precyzyjny, aby uniknąć nieporozumień oraz aby móc efektywnie zarządzać stylami na stronie. Właściwe stosowanie typów i selektorów jest kluczowe dla tworzenia responsywnych i użytecznych interfejsów użytkownika.

Pytanie 14

Jakiego znacznika w HTML użyjemy, aby uzyskać tekst wyświetlany czcionką o stałej szerokości znaku, który również uwzględnia dodatkowe spacje, tabulacje oraz znaki końca linii?

A. <code>…</code>

B. <pre>…</pre>

C. <ins>…</ins>

D. <blockquote>…</blockquote>

Znaczniki <code>, <ins> i <blockquote> mają swoje unikalne zastosowania, ale nie nadają się do zachowania formatowania tekstu, jak to robi <pre>. Znacznik <code> jest przeznaczony do oznaczania fragmentów kodu, jednak nie utrzymuje przestrzeni i formatowania. Kiedy używasz <code>, przeglądarka wyświetli tekst w inny sposób, ale nie uwzględni dodatkowych odstępów lub tabulacji, co może prowadzić do nieczytelności w przypadku dłuższych fragmentów kodu. Z kolei znacznik <ins> służy do wskazywania wstawionego tekstu, co ma znaczenie w kontekście edycji lub zmian, ale nie zmienia jego formatowania ani nie zachowuje układów, co ogranicza jego użyteczność w przypadku tekstów wymagających precyzyjnego formatowania. Wreszcie, <blockquote> jest używane do cytowania dłuższych fragmentów tekstu z innego źródła, co również nie związane jest z zachowaniem konkretnego formatowania, a jego celem jest raczej stylistyczne wyróżnienie cytatu. W praktyce, mylenie tych znaczników może prowadzić do frustracji użytkowników, którzy oczekują zachowania konkretnych układów, zwłaszcza w kontekście programowania lub prezentacji danych. Ważne jest, aby zrozumieć, że każdy znacznik ma swoje specyficzne zastosowanie i powinien być używany zgodnie z jego przeznaczeniem, aby zapewnić spójność i czytelność prezentowanych treści.

Pytanie 15

W instrukcjach, których celem jest odtwarzanie dźwięku na stronie internetowej jako tła muzycznego, nie stosuje się atrybutu

A. volume="-100"

B. balance="10"

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

D. loop="10"

Atrybut href w kontekście dźwięku na stronie internetowej jest używany w tagu <audio> lub <source>, aby wskazać lokalizację pliku audio. Pliki dźwiękowe, które mają być odtwarzane w przeglądarkach, powinny być dostępne pod adresem URL, a nie w lokalnym systemie plików, jak w przypadku href='c:/100.wav'. Standardy W3C oraz HTML5 określają, że pliki audio powinny być dostępne przez HTTP lub HTTPS, co pozwala na ich odtwarzanie zdalnie. Jeśli plik audio znajduje się na lokalnym dysku, nie będzie on dostępny dla użytkowników odwiedzających stronę poprzez Internet. Przykładem poprawnego użycia atrybutu href jest wskazanie pliku dźwiękowego, który jest hostowany na serwerze, na przykład href='http://example.com/audio/track1.mp3'. Ponadto, do kontrolowania odtwarzania dźwięku można wykorzystać inne atrybuty jak autoplay, loop, czy controls, które pozwalają na lepsze zarządzanie interakcją użytkownika z muzyką na stronie.

Pytanie 16

W CSS zapis w postaci

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

spowoduje, że kolor czerwony będzie dotyczył

A. pierwszej litery nagłówka pierwszego poziomu

B. pierwszej linii akapitu

C. tekstów nagłówka pierwszego poziomu

D. pierwszej litery nagłówka drugiego poziomu

Zapis CSS h1::first-letter {color: red;} odnosi się do selektora pseudo-elementu first-letter, który jest używany do stylizacji pierwszej litery bloku tekstowego w nagłówkach. W tym wypadku, gdy selektor jest zastosowany do elementu h1, oznacza to, że kolor pierwszej litery nagłówka pierwszego stopnia (h1) zostanie zmieniony na czerwony. Pseudo-element first-letter działa tylko dla elementów blokowych, takich jak nagłówki, akapity czy listy. W praktyce, jeśli w dokumencie HTML mamy element <h1> z tekstem, np. 'Witaj świecie', to wyłącznie litera 'W' zostanie wyświetlona w kolorze czerwonym. To podejście jest zgodne ze standardami CSS, które definiują pseudo-elementy jako specyficzne fragmenty dokumentu, które można stylizować niezależnie od reszty zawartości. Warto również zauważyć, że stosowanie takich selektorów pozwala na uzyskanie bardziej złożonych efektów wizualnych bez konieczności modyfikacji struktury HTML. Umożliwia to projektantom stron internetowych większą elastyczność i kontrolę nad estetyką treści.

Pytanie 17

Deklaracja typu dokumentu HTML: <!DOCTYPE HTML> wskazuje, że kod został stworzony w wersji

A. 4

B. 5

C. 7

D. 6

Gdy widzisz deklarację <!DOCTYPE HTML>, to znaczy, że mówimy o wersji HTML5. To obecny standard, który wprowadza naprawdę sporo nowych funkcji w porównaniu do wcześniejszych wersji. Na przykład, HTML5 pozwala na osadzanie audio i wideo bez potrzeby dodatkowych wtyczek, co jest super wygodne. Mamy też fajne semantyczne elementy jak <article>, <section> czy <nav>, które sprawiają, że łatwiej zorganizować treści na stronie. Ważne jest, żeby zawsze na początku dokumentu umieszczać tę deklarację, bo to pozwala przeglądarkom na prawidłowe wyświetlanie strony. Dzięki temu unikamy problemów z interpretacją kodu, co z doświadczenia mówię, jest naprawdę istotne.

Pytanie 18

Definicja stylu przedstawiona w języku CSS dotyczy odnośnika, który

A. ma wskaźnik myszy ustawiony nad nim

B. jeszcze nie był odwiedzany

C. posiada niepoprawny adres URL

D. był już odwiedzany

W języku CSS selektor a:visited odnosi się do linków, które użytkownik już odwiedził. To pseudo-klasa, która umożliwia projektantom stron internetowych kontrolowanie wyglądu linków po ich kliknięciu, co poprawia doświadczenia użytkownika i umożliwia łatwiejszą nawigację. W przykładzie a:visited{color:orange;} wszystkie odwiedzone linki zostaną pokolorowane na pomarańczowo, co wizualnie odróżnia je od nieodwiedzonych linków. To podejście jest zgodne z zasadami dostępności, które sugerują, aby odwiedzone linki były w jakiś sposób wyróżnione. Praktycznym zastosowaniem tej wiedzy jest tworzenie stron, które są bardziej przejrzyste i intuicyjne dla użytkowników. Dobre praktyki zalecają, by różnica między odwiedzonymi a nieodwiedzonymi linkami była subtelna, ale zauważalna. Ustawianie różnych kolorów dla tych stanów linków jest popularnym rozwiązaniem. Prawidłowe użycie pseudo-klasy :visited wspiera także budowanie stron responsywnych, które poprawiają UX i spełniają standardy nowoczesnego designu, jednocześnie biorąc pod uwagę kwestie związane z prywatnością użytkowników, ponieważ CSS nie pozwala na stylizowanie niektórych właściwości odwiedzonych linków.

Pytanie 19

Za pomocą stylu CSS zdefiniowano obramowanie pojedyncze o następujących kolorach krawędzi:

border: solid 1px;
border-color: red blue green yellow;

Jakie kolory będą miały poszczególne krawędzie?

A. górna – czerwona, prawa – niebieska, dolna – zielona, lewa – żółta.

B. górna – czerwona, lewa – niebieska, dolna – zielona, prawa – żółta.

C. prawa – czerwona, dolna – niebieska, lewa – zielona, górna – żółta.

D. lewa – czerwona, dolna – niebieska, prawa – zielona, górna – żółta.

W tym pytaniu kluczowe jest zrozumienie skróconej składni własności `border-color` w CSS. Gdy podamy cztery wartości kolorów, przeglądarka interpretuje je zawsze w tej samej kolejności: góra (top), prawa (right), dół (bottom), lewa (left). Dokładnie tak samo działa to jak przy `margin` czy `padding`. Czyli zapis `border-color: red blue green yellow;` oznacza: górna krawędź – czerwona, prawa – niebieska, dolna – zielona, lewa – żółta. Styl `border: solid 1px;` określa tylko typ obramowania (ciągła linia) i grubość (1px), ale bez kolorów. Kolory są dopiero dodane przez `border-color`. W praktyce bardzo często używa się tej skróconej notacji, np. żeby wyróżnić jedną krawędź: `border-color: transparent transparent red transparent;` – daje to efekt podkreślenia tylko od dołu. Z mojego doświadczenia w front‑endzie lepiej zapamiętać prostą zasadę: przy czterech wartościach zawsze idziemy zgodnie z ruchem wskazówek zegara, zaczynając od góry: top → right → bottom → left. To się powtarza przy wielu własnościach CSS. Warto też wiedzieć, że można podać mniej wartości: jedną (wszystkie krawędzie ten sam kolor), dwie (góra/dół i prawa/lewa), trzy (góra, prawa/lewa, dół). Jednak w tym zadaniu są cztery, więc każda krawędź ma osobny kolor. Takie podejście jest zgodne ze specyfikacją CSS (box model) i jest powszechnie stosowane w projektach produkcyjnych do tworzenia np. ramek, strzałek, wyróżnień nagłówków czy kart.

Pytanie 20

Który zapis znacznika <meta> jest poprawny w kontekście użytych atrybutów?

A. <meta name = '!DOCTYPE'>

B. <meta title = 'Strona dla hobbystów'>

C. <meta name = 'description' content = 'Masz jakieś hobby? To jest strona dla Ciebie!'>

D. <meta background = blue>

Wszystkie inne podane odpowiedzi są niepoprawne z różnych powodów. Przede wszystkim, znacznik <meta background = blue> nie jest poprawny, ponieważ atrybut 'background' nie jest standardowym atrybutem dla znacznika <meta>. W znaczniki <meta> stosuje się atrybuty takie jak 'name', 'content' czy 'http-equiv', a nie atrybuty związane z CSS, które powinny być używane w tagach takich jak <style> lub bezpośrednio w atrybutach stylu HTML. Dodatkowo, zapis <meta name = "!DOCTYPE"> jest całkowicie błędny, ponieważ 'DOCTYPE' nie jest nazwą atrybutu, który można by użyć w znaczniku <meta>. 'DOCTYPE' jest deklaracją, która informuje przeglądarkę o wersji HTML używanej w dokumencie, a nie metadanymi. Wreszcie, zapis <meta title = "Strona dla hobbystów"> jest również niepoprawny, ponieważ 'title' nie jest atrybutem akceptowanym przez znacznik <meta>. Tytuł strony powinien być umieszczony w znaczniki <title>, który znajduje się w sekcji <head> dokumentu HTML. Te błędy pokazują, jak ważne jest przestrzeganie standardów i zrozumienie struktury HTML, aby skutecznie wykorzystywać znaczniki <meta> w optymalizacji stron internetowych.

Pytanie 21

Jakie znaki <header>, <article>, <section>, <footer> są typowe dla tego języka?

A. HTML 4.01 Transitional

B. HTML 5

C. XHTML 1.1

D. HTML 4.01 Strict

Wybór XHTML 1.1, HTML 4.01 Transitional oraz HTML 4.01 Strict jako odpowiedzi na pytanie jest błędny, ponieważ te wersje HTML nie zawierają nowoczesnych znaczników semantycznych, które zostały wprowadzone w HTML5. XHTML 1.1 jest bardziej restrykcyjną wersją HTML, która kładzie nacisk na poprawność składniową, ale nie wspiera semantycznych znaczników, takich jak <header>, <article>, <section> czy <footer>. HTML 4.01 Transitional i HTML 4.01 Strict są starszymi specyfikacjami, które oferują ograniczone wsparcie dla semantyki, koncentrując się głównie na layoucie i prezentacji, a nie na znaczeniu treści. Wybierając jedną z tych odpowiedzi, można popełnić błąd myślowy, który polega na pomieszaniu pojęć semantyki z technologią. Współczesne praktyki programistyczne promują użycie semantycznych znaczników HTML5, aby poprawić dostępność oraz SEO, co jest kluczowe dla sukcesu stron internetowych. Dlatego ważne jest, aby być świadomym, które elementy są dostępne w danej specyfikacji HTML, aby odpowiednio wykorzystać je w projektach internetowych.

Pytanie 22

Który z podanych kodów XHTML sformatuje tekst zgodnie z określonym schematem?

A. Odpowiedź A

B. Odpowiedź C

C. Odpowiedź D

D. Odpowiedź B

Poprawna odpowiedź D zawiera poprawne znaczniki XHTML i HTML, które umożliwiają formatowanie tekstu według wzoru. W pierwszym wierszu tekst Ala ma kota używa znacznika b do pogrubienia słowa kota, co jest zgodne ze standardami, ponieważ b jest szeroko stosowanym tagiem HTML do semantycznego pogrubienia tekstu. Następnie użyty jest znacznik br do wstawienia przerwy w linii, co sprawia, że kolejna część tekstu pojawia się w nowej linii, odzwierciedlając układ zaprezentowany na obrazku. W drugim wierszu tekst a kot ma Alę, znacznik i został użyty do pochylania słowa kot, co jest zgodne z praktykami formatowania tekstu, gdzie i oznacza kursywę. Zamknięcie całego tekstu w znacznikach p paragrafu zapewnia również odpowiedni odstęp i formatowanie, co jest zgodne z semantycznym i strukturalnym organizowaniem treści w dokumencie XHTML. Podejście to odzwierciedla dobre praktyki kodowania, w tym stosowanie właściwych znaczników dla odpowiednich stylów oraz zapewnienie kompatybilności z różnymi przeglądarkami.

Pytanie 23

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

A. odwracanie obrazu.

B. zmiana rozmiaru.

C. łączanie warstw.

D. kadrowanie.

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

Pytanie 24

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

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

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

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

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

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

Pytanie 25

Wskaż element, który definiuje pole edycyjne formularza zgodne z ilustracją

A. <input type="number" id="mm" name="hh" min="0" max="24">

B. <input type="month" id="hh" name="mm">

C. <input type="date" id=" minutes" name="hours">

D. <input type="time" id="minutes" name="hours">

W tym zadaniu kluczowe jest zrozumienie różnic pomiędzy poszczególnymi typami pól formularza w HTML5. Ilustracja pokazuje prosty formularz, w którym użytkownik ma podać godzinę zakończenia egzaminu w formacie hh:mm. To oznacza, że interesuje nas wyłącznie czas (godziny i minuty), bez daty, bez miesiąca, bez liczb z dowolnego zakresu. HTML5 wprowadził specjalne typy pól właśnie po to, żeby takie sytuacje obsługiwać dokładnie i w sposób przewidywalny.
Element z type="month" służy do wyboru miesiąca i roku, zwykle w formacie RRRR-MM. Przeglądarka wyświetla wtedy kontrolkę pozwalającą wybrać miesiąc, a nie godzinę. Użycie go do wprowadzania czasu byłoby kompletnie nieintuicyjne dla użytkownika i łamałoby założenia semantycznego HTML. To jest typowy błąd: patrzymy na atrybut i myślimy „month, minutes, coś z czasem”, a to zupełnie inny zakres danych.
Z kolei pole type="date" obsługuje pełną datę, najczęściej w formacie RRRR-MM-DD. Tu pojawia się kolejna pułapka: skoro egzamin ma jakąś datę, to może warto użyć date? Tylko że w treści i na ilustracji mowa jest wyraźnie o godzinie zakończenia, a nie o dniu egzaminu. type="date" wyświetli kalendarz, co kompletnie nie pasuje do opisu formatu „hh : mm” i wprowadzałoby użytkownika w błąd.
Ostatnia propozycja, type="number" z zakresem min="0" max="24", wygląda na pierwszy rzut oka kusząco, bo pozwala ograniczyć wartości do liczb. Jednak takie pole nie rozumie pojęcia czasu, nie ma formatu hh:mm, nie waliduje dwóch części (godziny i minuty), a dodatkowo zakres 0–24 jest nieprecyzyjny (co z minutami, co z 23:59 itd.). To tylko surowa liczba, bez kontekstu semantycznego. W praktyce zmuszałoby to programistę do pisania dodatkowej logiki walidującej i parsującej.
Cały sens HTML5 polega na tym, żeby dobierać typy pól zgodnie z danymi, które użytkownik ma wprowadzić. Wtedy przeglądarka może pomóc z walidacją, dostępnością i wygodą obsługi na urządzeniach mobilnych. Wybór innego typu niż time w tym konkretnym przypadku jest więc nie tylko formalnie błędny, ale też sprzeczny z dobrymi praktykami projektowania formularzy webowych.

Pytanie 26

Parametr face znacznika <font> jest używany do wskazania

A. koloru czcionki

B. rozmiaru czcionki

C. efektów czcionki

D. nazwa czcionki

Parametr face znacznika <font> w HTML służy do określenia nazwy czcionki, co jest kluczowym elementem stylizacji tekstu na stronach internetowych. Umożliwia on programistom i projektantom graficznym wskazanie konkretnej czcionki, która ma być używana do wyświetlania tekstu, co wpływa na jego czytelność oraz estetykę. Przykładowo, aby ustawić czcionkę na 'Arial', użyjemy znacznika <font face='Arial'>tekst</font>. Warto zauważyć, że ten parametr nie jest już zalecany w nowoczesnym HTML, ponieważ stylizacje powinny być realizowane za pomocą CSS, które oferuje znacznie większe możliwości i elastyczność. W CSS można określić czcionkę na przykład w ten sposób: p { font-family: 'Arial', sans-serif; }. Zgodnie z wytycznymi W3C, stosowanie CSS zamiast znaczników HTML dla stylizacji jest najlepszą praktyką, ponieważ pozwala na oddzielenie treści od prezentacji. W kontekście SEO, właściwe użycie czcionek i ich nazw może wpływać na wygodę użytkowników oraz ogólną estetykę strony, co pośrednio może przyczynić się do lepszego rankingu w wyszukiwarkach. Warto jednak pamiętać, że niektóre czcionki mogą nie być zainstalowane na wszystkich systemach, dlatego rekomenduje się używanie czcionek webowych oraz zabezpieczeń w postaci alternatyw w CSS.

Pytanie 27

W jakim formacie powinien być zapisany obraz, aby mógł być wyświetlany na stronie internetowej z zachowaniem przezroczystości?

A. PNG

B. BMP

C. JPG

D. CDR

Format PNG (Portable Network Graphics) jest szeroko stosowany w sieci internetowej, ponieważ obsługuje przezroczystość, co jest kluczowe przy tworzeniu grafik, które mają być używane na stronach internetowych. Przezroczystość pozwala na nałożenie grafik na różne tła bez widocznych prostokątów czy kolorowych krawędzi, co znacznie poprawia estetykę oraz elastyczność projektów graficznych. PNG wykorzystuje kompresję bezstratną, co oznacza, że jakość obrazu nie ulega pogorszeniu podczas jego zapisywania, co jest istotne dla profesjonalnych projektów. Przykłady zastosowania formatu PNG obejmują ikony, logotypy oraz różnego rodzaju ilustracje, które muszą być wyświetlane na różnych tłach. W branży internetowej dobrym standardem jest używanie PNG do grafik wymagających przezroczystości, szczególnie w kontekście responsywnych projektów, gdzie różne elementy mogą mieć różne tła w zależności od urządzenia. Ponadto, PNG obsługuje kolor 24-bitowy oraz przezroczystość 8-bitową, co daje możliwość tworzenia bardziej złożonych efektów wizualnych. Zastosowanie tego formatu jest zgodne z dobrymi praktykami w projektowaniu stron, co czyni go preferowanym wyborem w wielu sytuacjach.

Pytanie 28

Który semantyczny znacznik HTML5 powinien wystąpić na stronie tylko raz?

<section>

<main>

<header>

<article>

Znacznik <main> obejmuje główną, unikalną treść strony - tę specyficzną dla danej podstrony, bez powtarzalnych elementów jak nagłówek czy menu. Zgodnie ze standardem na stronie powinien wystąpić tylko jeden widoczny <main>, co ułatwia nawigację technologiom wspomagającym (czytniki ekranu mogą od razu przejść do treści głównej). Pozostałe znaczniki semantyczne mogą się powtarzać. Dlatego tylko raz na stronie występuje <main>.

Pytanie 29

Który atrybut znacznika <img> określa lokalizację (ścieżkę) pliku graficznego?

link

alt

href

src

Obraz osadza się znacznikiem <img>, a jego atrybut src (source) wskazuje ścieżkę do pliku graficznego, np. <img src="logo.png" alt="Logo">. Drugi ważny atrybut, alt, podaje tekst alternatywny. Dlatego lokalizację pliku obrazu określa src.

Pytanie 30

Taki styl CSS sprawi, że na stronie internetowej

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

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

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

C. punkt listy nienumerowanej będzie rys.gif

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

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

Pytanie 31

Jakie oznaczenie powinno się zastosować, aby umieścić film na stronie internetowej?

A. <media>

B. <video>

C. <movie>

D. <audio>

Znacznik <video> jest właściwym elementem HTML używanym do osadzania filmów na stronach internetowych. Jest on częścią standardu HTML5, który wprowadził nowoczesne podejścia do multimediów w sieci. Umożliwia on nie tylko osadzanie wideo, ale także dostosowywanie jego odtwarzania, takie jak automatyczne odtwarzanie, powtarzanie oraz kontrolowanie głośności. Przykład użycia znacznika <video>: <video src='film.mp4' controls>Odtwarzacz wideo</video>. Warto również dodać atrybuty, takie jak 'controls', które dodają przyciski do odtwarzania, pauzowania i regulacji głośności, co znacząco poprawia użyteczność dla użytkowników. Dobrą praktyką jest również używanie atrybutu 'poster' do określenia miniatury, która będzie wyświetlana przed rozpoczęciem odtwarzania, co przyciąga uwagę i zwiększa estetykę strony. Znacznik <video> wspiera różne formaty plików, takie jak MP4, WebM i Ogg, co zapewnia szeroką kompatybilność z różnymi przeglądarkami internetowymi, co jest kluczowe w dzisiejszym zróżnicowanym środowisku online.

Pytanie 32

Którego znacznika użyć do sekcji cytatu (mogącej zawierać kilka akapitów, z wcięciem)?

<indent>

<blockq>

<blockquote>

<q>

Do oznaczenia dłuższego cytatu blokowego - mogącego obejmować kilka akapitów i domyślnie wyświetlanego z wcięciem - służy <blockquote>. To element blokowy. Dlatego sekcję cytatu tworzy <blockquote>.

Pytanie 33

Jakie ustawienia dotyczące czcionki będą miały zastosowanie w przypadku kodu CSS?

* {
    font-family: Tahoma;
    color: Teal;
}

A. wszystkiego kodu HTML, jako domyślne formatowanie dla wszystkich elementów strony.

B. znaczników o identyfikatorze równym *.

C. wszystkiego kodu HTML, niezależnie od kolejnych ustawień CSS.

D. znaczników z klasą przypisaną jako *.

Wybór opcji dotyczącej całego kodu HTML jako formatowania domyślnego dla wszystkich elementów strony jest poprawny, ponieważ użycie selektora uniwersalnego * w CSS oznacza, że wszystkie dostępne elementy na stronie będą dziedziczyć określone style. W tym przypadku, zarówno font-family ustawiony na Tahoma, jak i kolor tekstu zmieniony na Teal, będą dotyczyły każdego elementu HTML, bez względu na jego typ. To podejście jest zgodne z zasadami stosowania stylów kaskadowych, gdzie style są aplikowane do elementów w sposób hierarchiczny, a selektor uniwersalny jest najogólniejszym z dostępnych. Przykładem zastosowania może być sytuacja, gdy chcemy ustawić jednolite formatowanie dla całej strony, co upraszcza proces projektowania i zapewnia spójność wizualną. Dobrą praktyką jest jednak używanie selektora uniwersalnego z umiarem, aby uniknąć nadmiernego obciążenia wydajności, szczególnie w większych dokumentach, gdzie precyzyjniejsze selektory mogą przynieść lepsze rezultaty.

Pytanie 34

Dla którego akapitu zastosowano przedstawioną właściwość stylu CSS?

border-radius: 20%;

To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf, To jest paragraf

A. C.

B. B.

C. A.

D. D.

Dobra robota! Zgadłeś, że chodziło o akapit z tą właściwością CSS 'border-radius: 20%;'. Ta właściwość faktycznie zaokrągla rogi elementów, co wygląda super i sprawia, że strona jest bardziej przyjemna dla oka. Widzisz, akapit B ma te zaokrąglone rogi, a to dokładnie to, co daje nam ten styl CSS. W rzeczywistości, tylko B jest tak zrobiony na obrazku, więc wiesz, że tam zastosowano 'border-radius'. Ta wartość '20%;' mówi nam, jak mocno rogi mają być zaokrąglone. Takie rzeczy są ważne w CSS, żeby strony wyglądały estetycznie i nowocześnie.

Pytanie 35

W której z technologii NIE da się przetwarzać danych wprowadzonych przez użytkownika na stronie WWW?

A. JavaScript

B. PHP

C. CSS

D. AJAX

CSS służy wyłącznie do opisu WYGLĄDU - nie ma logiki ani dostępu do danych, więc nie da się nim przetworzyć tego, co wpisał użytkownik. Dlatego danych użytkownika nie przetworzysz w CSS.

Pytanie 36

W języku HTML aby zdefiniować słowa kluczowe strony, należy użyć zapisu

A. <meta name = "keywords" content = "psy, koty, gryzonie">

B. <meta name = "keywords" = "psy, koty, gryzonie">

C. <meta name = "description" content = "psy, koty, gryzonie">

D. <meta keywords = "psy, koty, gryzonie">

Poprawna odpowiedź to <meta name = "keywords" content = "psy, koty, gryzonie">, ponieważ jest to właściwy sposób definiowania słów kluczowych w sekcji <head> dokumentu HTML. Element <meta> służy do dostarczania metadanych o stronie internetowej, a atrybut 'name' określa, jakie informacje są zawarte w danym elemencie. W przypadku 'keywords', atrybut 'content' z kolei zawiera listę słów kluczowych, które są związane z treścią strony. Chociaż znaczenie słów kluczowych w SEO zmienia się, wciąż są one używane przez niektóre wyszukiwarki do kategoryzowania zawartości strony. Przykładowo, jeśli strona dotyczy zwierząt domowych, użycie fraz takich jak 'psy', 'koty', czy 'gryzonie' w atrybucie 'content' może pomóc w poprawie widoczności w wynikach wyszukiwania. Dobrą praktyką jest, aby słowa kluczowe były specyficzne, związane z tematyką strony i nie przekraczały rozsądnej liczby, aby nie wprowadzać w błąd algorytmy wyszukiwarek. Używanie odpowiednich metatagów to kluczowy element optymalizacji SEO.

Pytanie 37

Jaką wartość w formacie heksadecymalnym będzie miała barwa określona kodem rgb(255, 10, 22)?

A. #251022

B. #2551022

C. #FF0A16

D. #FF1016

Wybór błędnych odpowiedzi wynika najczęściej z niezrozumienia zasad konwersji kolorów z formatu RGB do formatu heksadecymalnego. Odpowiedzi takie jak #2551022 czy #251022 sugerują, że użytkownik nie zrozumiał, jak działa system szesnastkowy, w którym każda para cyfr reprezentuje jeden z trzech kanałów koloru. Na przykład, w odpowiedzi #2551022 widzimy zbyt wiele cyfr, co jest niezgodne z formatem heksadecymalnym, który wymaga dokładnie sześciu znaków. Dodatkowo, odpowiedzi te mogą prowadzić do błędnych wyników w projektach graficznych i programistycznych, gdzie precyzyjne określenie kolorów jest kluczowe. W przypadku #FF1016, choć niektóre cyfry są poprawne, znowu pojawia się problem z wartościami kanału zielonego, gdzie odpowiednia wartość powinna być 0A, a nie 10. Przykłady te pokazują, jak ważne jest zrozumienie, że kanały kolorów w RGB są reprezentowane w skali szesnastkowej jako dwucyfrowe liczby szesnastkowe, a ich nadmiar lub zmiana kolejności może prowadzić do nieprawidłowych kolorów. Dobra praktyka w projektowaniu to upewnienie się, że konwersje są wykonywane poprawnie, aby uniknąć niepożądanych wyników.

Pytanie 38

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

A. display

B. position

C. list-style-type

D. text-transform

Wybór czegoś innego niż 'position' pokazuje, że mogło dojść do małego miszmaszu z rozumieniem CSS. Na przykład, 'display' decyduje, jak elementy się wyświetlają – czy są blokowe, czy liniowe – ale nie ma nic wspólnego z ich pozycjonowaniem. 'display: block' sprawia, że element zajmuje całą szerokość, a 'display: inline' pozwala na mniejszy wpływ na inne elementy, co może wprowadzić w błąd, jeśli chodzi o pozycjonowanie. 'list-style-type' to kwestia stylizacji list, więc to też nie ma związku z układem elementów na stronie. Tak samo, 'text-transform' zmienia wygląd tekstu, na przykład na wielkie litery, ale nie wpływa na to, gdzie elementy są umieszczone. Wydaje mi się, że warto by było jeszcze raz przestudiować, jak działa pozycjonowanie w CSS. Fajnie by było też zajrzeć do dokumentacji i zobaczyć konkretne przykłady, żeby lepiej to zrozumieć.

Pytanie 39

W HTML formularzu użyto elementu <input>. Pole, które się pojawi, ma pozwalać na wprowadzenie maksymalnie

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

A. 20 znaków, które nie będą widoczne w polu tekstowym

B. 20 znaków, które będą widoczne w trakcie wprowadzania

C. 30 znaków, które nie będą widoczne w polu tekstowym

D. 30 znaków, które będą widoczne podczas wpisywania

Znacznik <input type="password"> w HTML jest rzeczywiście super ważny. Umożliwia on użytkownikom wpisywanie haseł, a to, co najfajniejsze, to że znaki są ukryte, więc nikt nie zobaczy, co piszesz. Atrybut maxlength="20" jest tutaj pomocny, bo ogranicza liczbę znaków do 20, co jest praktyczne - zbyt długie hasła ciężko zapamiętać, a krótkie mogą być niebezpieczne. Natomiast size="30" to tylko kwestia szerokości pola, więc nie wpływa na ilość znaków, które można wpisać. Generalnie, dobrze jest trzymać się tych ograniczeń, bo to pomaga w projektowaniu formularzy i utrzymywaniu porządku w interfejsie. Z mojej perspektywy, znajomość tych atrybutów jest naprawdę przydatna przy tworzeniu stron, bo można lepiej zrozumieć, jak to wszystko działa.

Pytanie 40

W jakim standardzie języka hipertekstowego wprowadzono do składni znaczniki sekcji <footer>, <header>, <nav>?

A. XHTML 2.0

B. HTML5

C. XHTML1.0

D. HTML4

Zgadza się, w HTML4 nie było znaczników <footer>, <header> i <nav>, bo one pojawiły się później. HTML4 raczej skupiał się na prostym formatowaniu i strukturze. XHTML1.0 też tego nie oferuje, bo jest bardziej rygorystyczną wersją HTML i trzyma się zasad XML, co znaczy, że wszystko musi być zgodne z gramatyką XML, ale nowe semantyczne elementy nie są tam wprowadzone. A, no i XHTML 2.0 miał zmienić wszystko, ale nigdy nie wyszedł oficjalnie, więc w sumie odpuścili jego rozwój na rzecz HTML5. Tak więc to też pokazuje, że brak tych znaczników był sporym ograniczeniem w kontekście rozwoju internetu. Zresztą HTML5 ma ogromne wsparcie od twórców stron i narzędzi programistycznych, dlatego jest teraz numerem jeden w projektach webowych.

Rozpocznij nowy egzamin

Powrót do strony głównej