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: 8 kwietnia 2026 11:44
Data zakończenia: 8 kwietnia 2026 12:03

Egzamin zdany!

Wynik: 24/40 punktów (60,0%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

Która z poniższych zasad nie przyczyni się pozytywnie do poprawy czytelności kodu?

A. Należy dodawać komentarze w bardziej skomplikowanych fragmentach kodu

B. Nazwy zmiennych muszą odzwierciedlać ich funkcję

C. Kod powinien być napisany bez wcięć i zbędnych przejść do nowej linii

D. Każda linia kodu powinna zawierać jedynie jedną instrukcję

Sugerowanie, że kod powinien być napisany bez wcięć i zbędnych enterów prowadzi do poważnych problemów w zakresie czytelności i zrozumienia kodu. Zasady dotyczące dobrego formatowania kodu, w tym odpowiednie wcięcia, są fundamentem dobrej praktyki programistycznej. Bez wcięć, struktura kodu staje się chaotyczna, a jego logika trudna do śledzenia, co może prowadzić do błędów w obliczeniach lub nieprawidłowego działania programów. Ponadto, programiści często współpracują w zespołach, gdzie zrozumienie kodu przez innych członków zespołu jest kluczowe. Wprowadzenie wcięć oraz użycie zbędnych enterów do oddzielania funkcji czy bloków kodu zwiększa przejrzystość, co jest zgodne z najlepszymi praktykami, takimi jak Clean Code. Dobre nazewnictwo zmiennych i wprowadzanie komentarzy to ważne aspekty, ale nie wystarczą one do zapewnienia pełnej czytelności bez odpowiedniego formatowania. W praktyce, kod, który wygląda na chaotyczny i nieposortowany, może odstraszać innych programistów i prowadzić do błędów podczas dalszej pracy nad projektem. Dlatego należy unikać praktyk, które mogą podważać fundamenty czytelności kodu.

Pytanie 2

W języku CSS stworzono określony styl. Sekcja sformatowana tym stylem będzie miała obramowanie o szerokości

div {
     border: solid 2px blue;
     margin: 20px;
 }

A. 20 px oraz marginesy zewnętrzne tego obramowania

B. 20 px oraz marginesy wewnętrzne tego obramowania

C. 2 px oraz marginesy zewnętrzne tego obramowania

D. 2 px oraz marginesy wewnętrzne tego obramowania

Odpowiedź 2 px oraz marginesy na zewnątrz tego obramowania jest prawidłowa ponieważ w definicji stylu CSS ustawiono właściwość border z wartością solid 2px blue co oznacza że element będzie miał obramowanie o grubości 2 pikseli z niebieskim kolorem Dodatkowo użyto właściwości margin z wartością 20px co wskazuje że element ma margines zewnętrzny o szerokości 20 pikseli na każdej stronie Właściwość margin w CSS odnosi się zawsze do przestrzeni na zewnątrz granic elementu co odróżnia ją od padding który dotyczy marginesu wewnętrznego Praktyczne zastosowanie takiego stylu można znaleźć w projektach gdzie projektant chce oddzielić elementy od siebie zachowując równomierne odstępy W ten sposób można tworzyć przejrzyste i estetyczne układy na stronach internetowych Zastosowanie border pozwala również na wizualne wyróżnienie elementów co jest często wykorzystywane w interfejsach użytkownika aby podkreślić ważne informacje Dobrą praktyką jest używanie takich stylizacji aby poprawić czytelność i funkcjonalność strony poprzez jasne rozgraniczenie sekcji oraz zapewnienie odpowiednich odstępów między nimi zgodnie z zasadami UX

Pytanie 3

W semantycznym HTML odpowiednikiem elementu <b>, który nie tylko pogrubia tekst, ale także wskazuje na jego większe znaczenie, jest

A. <strong>

B. <em>

C. <ins>

D. <mark>

Znacznik <strong> w HTML semantycznym służy nie tylko do pogrubienia tekstu, ale także do wskazania, że dany fragment ma większe znaczenie w kontekście semantycznym. Zgodnie z zaleceniami W3C, użycie tego znacznika poprawia dostępność treści, ponieważ technologie wspomagające, takie jak czytniki ekranu, interpretują <strong> jako tekst o podwyższonej wadze, co może pomóc w lepszym zrozumieniu struktury dokumentu przez osoby z niepełnosprawnościami. Przykładem zastosowania może być podkreślenie ważnych informacji na stronie, takich jak zasady, ostrzeżenia czy kluczowe dane, które użytkownicy powinni zauważyć. W praktyce, stosowanie elementów semantycznych, takich jak <strong>, zamiast czysto stylistycznych, jest zgodne z zasadami budowania stron przyjaznych dla użytkowników i poprawia SEO, ponieważ wyszukiwarki mogą lepiej analizować kontekst treści. Warto pamiętać, że w przypadku użycia <strong>, nie zmienia to tylko sposobu wyświetlania, ale także wzbogaca znaczenie tekstu w kontekście całej strony.

Pytanie 4

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

A. img p

B. img [p]

C. img + p

D. img > p

W tym zadaniu chodzi o zrozumienie tzw. kombinatorów w CSS, czyli znaków łączących selektory i określających relacje między elementami w drzewie DOM. Bardzo często mylenie tych relacji prowadzi do dokładnie takich błędnych odpowiedzi jak w tym pytaniu. Zapis „img p” to selektor potomka (descendant selector). Oznacza on: wybierz każdy element <p>, który znajduje się gdziekolwiek wewnątrz elementu <img>. Problem w tym, że w poprawnym HTML znacznik <img> jest pustym elementem, nie może mieć dzieci. W praktyce więc taki selektor nigdy nie zadziała w opisanym scenariuszu. To typowe nieporozumienie: ktoś myśli „obok obrazka jest paragraf, więc napiszę img p”, ale CSS rozumie to jako relację rodzic–potomek, a nie rodzeństwo. Z kolei zapis „img [p]” wynika zwykle z pomieszania składni selektorów atrybutów z selektorami elementów. Nawiasy kwadratowe w CSS służą do wybierania elementów na podstawie atrybutów, np. a[href], input[type="text"]. Konstrukcja [p] sugerowałaby atrybut o nazwie „p”, co w ogóle nie ma sensu w tym kontekście. Taka składnia jest po prostu niepoprawna merytorycznie, bo nie opisuje żadnej realnej relacji między <img> a <p>. Natomiast „img > p” to selektor dziecka (child combinator). Mówi on: wybierz elementy <p>, które są bezpośrednimi dziećmi elementu <img>. To znowu kłóci się z modelem HTML – obrazek nie może zawierać w sobie paragrafu. Ten selektor ma sens np. przy div > p, ale zupełnie nie pasuje do relacji „element po elemencie”. W tym zadaniu potrzebna jest relacja rodzeństwa: akapit stoi obok obrazka, a nie w środku. Prawidłowe podejście opiera się na zrozumieniu, że chcemy „bezpośredniego sąsiada” na tym samym poziomie, a nie potomka czy dziecka. Właśnie to zapewnia selektor sąsiedniego rodzeństwa, czyli konstrukcja z plusem. Typowy błąd myślowy polega na tym, że patrzymy na wygląd strony (obrazek nad akapitem) i nie analizujemy prawdziwej struktury DOM. Dobra praktyka frontendowa to zawsze przełożyć układ na dokładne relacje: rodzic–dziecko, przodek–potomek, rodzeństwo. Dopiero potem dobrać odpowiedni kombinator w CSS. Jeśli chcemy stylować element „bezpośrednio po”, używamy właśnie selektora z +, a nie spacji czy znaku >.

Pytanie 5

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

A. 20 - 23 fps

B. 31 - 36 fps

C. 16 - 19 fps

D. 24 - 30 fps

Odpowiedź 24 - 30 fps jest prawidłowa, ponieważ to właśnie w tym zakresie klatek na sekundę (fps) uzyskuje się płynność ruchu, która jest akceptowana w większości produkcji filmowych i telewizyjnych. Standard 24 fps jest powszechnie stosowany w kinematografii, ponieważ pozwala na naturalne odwzorowanie ruchu, a także jest zgodny z technologią filmową. W praktyce, filmy kręcone w tym standardzie mają charakterystyczną estetykę, która jest ceniona przez widzów. Dodatkowo, przy 30 fps można uzyskać płynniejsze efekty w produkcjach telewizyjnych, szczególnie w transmisjach na żywo i sportowych, gdzie dynamika ruchu jest kluczowa. Utrzymanie liczby klatek w tym zakresie zmniejsza ryzyko efektów stroboskopowych, które mogą wystąpić przy niższych liczbach klatek. Warto również dodać, że nowoczesne technologie filmowe i animacyjne często korzystają z wyższych wartości fps, jednak standardowe ramy dla klasycznych produkcji pozostają w tym zakresie, co czyni je uniwersalnym punktem odniesienia dla twórców.

Pytanie 6

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

A. <h2>

B. <title>

C. <link>

D. <meta>

<h2> to znacznik nagłówka, który zgodnie ze specyfikacją HTML5 stosuje się właśnie w sekcji <body>. Nagłówki od <h1> do <h6> służą do strukturyzowania treści dokumentu, czyli tego, co realnie widzi użytkownik na stronie. W <body> umieszczamy całą zawartość prezentowaną w przeglądarce: teksty, nagłówki, obrazy, formularze, przyciski, listy itd. Moim zdaniem dobrze jest zapamiętać prostą zasadę: wszystko, co jest „treścią strony” dla użytkownika, ląduje w <body>, a wszystko, co jest „informacją o stronie” dla przeglądarki i wyszukiwarki – w <head>. Znacznik <h2> jest semantycznym nagłówkiem drugiego poziomu. Oznacza to, że powinien być używany jako podtytuł lub tytuł sekcji podrzędnej względem <h1>. Przykładowo: <h1>Temat strony</h1>, a niżej <h2>Podrozdział 1</h2>, <h2>Podrozdział 2</h2> itd. Taka struktura pomaga nie tylko użytkownikom, ale też czytnikom ekranowym, SEO i ogólnej czytelności kodu. Dobre praktyki mówią, żeby nie używać nagłówków tylko do „zwiększania czcionki”, ale właśnie do logicznego podziału treści. Do zmiany wyglądu służy CSS. W typowym dokumencie HTML mamy: <html>, w nim <head> z metadanymi i <body> z widoczną zawartością. <h2> musi znajdować się właśnie w <body>, bo jest elementem treści, a nie metadanych. Gdy zaczniesz pisać większe strony, poprawne wykorzystanie nagłówków bardzo ułatwia nawigację, generowanie spisów treści, a także utrzymanie projektu w ryzach, co w praktyce jest naprawdę ważne przy pracy zespołowej czy w dużych serwisach.

Pytanie 7

W CSS określono stylizację dla paragrafu, która nada mu następujące właściwości:

A. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne ustawione na wartość 40 px

B. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne ustawione na wartość 40 px

C. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne ustawione na wartość 40 px

D. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne ustawione na wartość 40 px

W CSS stylizacja elementów HTML jest kluczowa dla tworzenia estetycznych i funkcjonalnych stron internetowych W przypadku tego pytania analizujemy przypisanie właściwości stylu do elementu paragrafu Kod CSS background-color red ustawia tło na czerwone color blue przypisuje niebieski kolor tekstu natomiast margin 40px ustawia marginesy zewnętrzne wokół elementu na 40 pikseli Każda z tych właściwości pełni określoną rolę background-color odnosi się do koloru tła całego elementu co jest przydatne w wyróżnianiu lub oddzielaniu sekcji strony color zmienia kolor tekstu co jest istotne dla czytelności i estetyki treści natomiast margin wpływa na odstęp pomiędzy elementami zapewniając przejrzystość i poprawne rozmieszczenie na stronie Zrozumienie tych właściwości jest kluczowe dla projektowania responsywnych i estetycznych stron internetowych W praktyce używa się ich do tworzenia interfejsów które są atrakcyjne wizualnie i funkcjonalne dla użytkowników Zgodnie z dobrymi praktykami warto dbać o kontrast i spójność wizualną co jest bezpośrednio związane z omawianymi właściwościami

Pytanie 8

Jaki zapis znacznika <div> może występować w dokumencie HTML tylko raz, a jego ponowne użycie spowoduje pojawienie się błędów podczas walidacji dokumentu?

A. <div class="klasa">

B. <div id="identyfikator">

C. <div class="klasa1 klasa2">

D. <div>

Zapis <div class="klasa1 klasa2"> nie narusza zasad walidacji HTML, ponieważ atrybut class może występować wielokrotnie w obrębie dokumentu. Dzięki temu, można przypisać wiele klas do jednego elementu, co jest przydatne w przypadku stylizacji CSS, gdzie różne klasy mogą być wykorzystywane do różnych celów. Zastosowanie wielu klas umożliwia elastyczne zarządzanie stylami, jednak nie wpływa na unikalność elementów. Z kolei zapis <div class="klasa"> jest również poprawny i pozwala na przypisanie pojedynczej klasy do elementu. Klasy są przydatne w kontekście grupowania elementów lub stosowania do nich wspólnych stylów, co jest zgodne z zasadami modularności w CSS. Natomiast zapis <div> jest ogólnym rozwiązaniem, które nie wprowadza żadnych specyfikacji, ale również nie generuje błędów walidacyjnych. Zrozumienie różnicy między atrybutem id a atrybutem class jest kluczowe w HTML. Na przykład, stosując id, jesteśmy zobowiązani do jego unikalności, co nie jest wymagane dla klas. Dla wielu początkujących programistów mylenie tych dwóch atrybutów może prowadzić do nieporozumień i problemów z walidacją kodu. Przy projektowaniu stron internetowych należy skupić się na ich strukturyzacji oraz semantyce, aby zapewnić łatwiejsze zarządzanie kodem i jego przyszłą rozbudowę.

Pytanie 9

W języku HTML zdefiniowano listę:

<ol>
  <li>biały</li>
  <li>czerwony
    <ul>
      <li>różowy</li>
      <li>pomarańczowy</li>
    </ul></li>
  <li>niebieski</li>
</ol>

A. Nie ma zagłębień i jest numerowana, słowo "niebieski" ma przyporządkowany numer 5.

B. Jest to lista numerowana z zagłębioną listą punktowaną.

C. Jest to lista punktowana z zagłębioną listą numerowaną.

D. Nie ma zagłębień i jest punktowana, wyświetla 5 punktów.

Niestety, nie trafiłeś w odpowiedź. Ta lista, co widziałeś na obrazku, jakby nie było, jest zdefiniowana przez znacznik <ol>, więc to lista uporządkowana, a nie punktowana. W HTML mamy właśnie te dwa typy list: uporządkowane i nieuporządkowane, które robi się przez <ol> i <ul>. To, co w Twojej odpowiedzi może być błędne, to pomylenie zagnieżdżeń – w tej liście numerowanej jest jeszcze lista punktowana w środku. Nie ma czegoś takiego, że liczby przypisujesz do pojedynczych słów, jak 'niebieski', albo ograniczasz punkty. Numery w liście są przypisywane automatycznie, w kolejności dodawania. I ważne, żeby rozumieć różnice między tymi listami i umieć je właściwie zagnieżdżać. Jest to kluczowe w HTML.

Pytanie 10

W CSS, aby ustalić nietypowe odległości między słowami, używa się właściwości

A. line-spacing

B. word-spacing

C. letter-space

D. white-space

Właściwość line-spacing nie istnieje w CSS. W celu kontrolowania odstępów między liniami tekstu, programiści używają właściwości line-height. Ta właściwość określa wysokość linii, co bezpośrednio wpływa na odstęp między poszczególnymi wierszami tekstu, a nie między samymi wyrazami. Właściwość white-space ma zupełnie inne zastosowanie, ponieważ służy do określania, jak białe znaki, takie jak spacje i nowe linie, są traktowane w danym elemencie. Działa ona na poziomie całego tekstu, a nie na odstępach między wyrazami. Umożliwia kontrolowanie zawijania tekstu, mnożenia białych znaków oraz innych aspektów prezentacji tekstu. Z kolei letter-space nie jest standardową właściwością CSS. Odpowiednikiem tej funkcji jest właściwość letter-spacing, która kontroluje odstęp między poszczególnymi literami w słowie. Użycie letter-spacing pozwala na uzyskanie efektów typograficznych, takich jak zwiększenie przestrzeni między literami dla lepszej czytelności lub estetyki, ale nie może być używane do manipulacji odstępami między całymi wyrazami.

Pytanie 11

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

A. nowego selektora klasy dla wiersza tabeli

B. pseudoelementu :first-line

C. pseudoklasy :hover

D. pseudoklasy :visited

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

Pytanie 12

Głównym celem systemu CMS jest oddzielenie treści portalu informacyjnego od jego wyglądu. Taki efekt osiąga się przez generowanie zawartości

A. z bazy danych oraz wyglądu ze zdefiniowanego szablonu

B. ze statycznych plików HTML oraz wyglądu ze zdefiniowanego szablonu

C. z bazy danych oraz wyglądu za pomocą atrybutów HTML

D. ze statycznych plików HTML oraz wyglądu za pomocą technologii FLASH

Wybór błędnych odpowiedzi wskazuje na niepełne zrozumienie architektury systemów zarządzania treścią. Odpowiedzi sugerujące generowanie zawartości z 'statycznych plików HTML' nie uwzględniają kluczowej zasady, jaką jest elastyczność i efektywność dynamicznego zarządzania treścią. Statyczne pliki HTML są trudne do aktualizacji, co powoduje, że zmiany w treści są czasochłonne i zwiększają ryzyko błędów. Przykładowo, w przypadku wprowadzenia istotnych zmian w treści, takich jak aktualizacje informacji o produktach, każda zmiana wymagałaby ręcznej edycji wielu plików, co jest niepraktyczne i nieefektywne. Ponadto, wykorzystanie technologii FLASH do generowania wyglądu jest przestarzałym podejściem, które nie jest już wspierane przez większość nowoczesnych przeglądarek internetowych. FLASH nie tylko ogranicza dostępność treści na urządzeniach mobilnych, ale także stwarza zagrożenia związane z bezpieczeństwem. Ostatecznie, podejścia te nie są zgodne z najlepszymi praktykami branżowymi, które kładą nacisk na wykorzystanie responsywnych, łatwych w zarządzaniu szablonów i dynamicznych baz danych, co jest kluczowe dla sukcesu nowoczesnych aplikacji internetowych.

Pytanie 13

Aby włączyć zewnętrzny skrypt JavaScript zatytułowany skrypt.js, należy umieścić w kodzie HTML

A. <script src="skrypt.js"></script>

B. <link rel="script" href="skrypt.js" />

C. <link rel="JavaScript" type="js" href="skrypt.js" />

D. <script> skrypt.js </script>

Odpowiedź <script src="skrypt.js"></script> jest poprawna, ponieważ jest to standardowy sposób dołączania zewnętrznych plików JavaScript do dokumentu HTML. Element <script> informuje przeglądarkę, że zawiera on kod JavaScript, a atrybut src wskazuje na lokalizację pliku, który ma zostać załadowany. W praktyce, umieszczanie skryptów w tagu <script> z atrybutem src umożliwia oddzielenie logiki skryptowej od struktury HTML, co jest zgodne z zasadami programowania modularnego i ułatwia zarządzanie kodem. Taka struktura pozwala na łatwe ponowne wykorzystanie skryptów w różnych projektach bez konieczności kopiowania kodu. Ponadto, dobrym zwyczajem jest umieszczanie skryptów na końcu sekcji <body>, co pozwala na załadowanie całej zawartości HTML przed wykonaniem skryptu, co przekłada się na lepszą wydajność i doświadczenia użytkownika.

Pytanie 14

W języku HTML, aby uzyskać następujący efekt formatowania
pogrubiony pochylony lub w ^{górnym indeksie}
należy zapisać kod:

A. <b>pogrubiony <i>pochylony</i></b> lub w <sup>górnym indeksie</sup>

B. <i>pogrubiony </i><b>pochylony </b>lub w <sub>górnym indeksie</sub>

C. <i>pogrubiony <b>pochylony lub w </i><sup>górnym indeksie</sup>

D. <b>pogrubiony </b><i>pochylony</i> lub w <sup>górnym indeksie</sup>

Odpowiedź, w której użyłeś znaczników <b> i <i> w odpowiednich miejscach, jest całkiem dobra. Znak <b> jest świetny do pogrubiania tekstu, co przydaje się, gdy chcesz podkreślić coś ważnego. Natomiast <i> pozwala na pochylanie tekstu, co dodaje mu charakteru i może sugerować cytaty czy tytuły. Co ciekawe, znacznik <sup> stosujemy, gdy chcemy pokazać górny indeks, np. przy potęgach czy jednostkach miar. Przykład takiego użycia byłby taki: <b>Waga</b> <i>w kilogramach</i> wynosi <sup>2</sup> dla dwóch jednostek. Jak widać, stosowanie HTML w odpowiedni sposób pozwala robić czytelne i estetyczne prezentacje, co jest zgodne z dobrymi praktykami w web designie oraz standardami W3C. Warto też pamiętać, że dobrze dobrane znaczniki mają znaczenie nie tylko wizualne, ale także pomagają w indeksowaniu treści przez wyszukiwarki, co z kolei wpływa na SEO.

Pytanie 15

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

A. skrótów.

B. wypunktowaną.

C. numerowaną.

D. odnośników.

Znaczniki HTML <ul> i <ol> są często mylone przez początkujących deweloperów co prowadzi do nieporozumień związanych z prezentacją danych. <ul> reprezentuje listę wypunktowaną używaną gdy kolejność elementów nie ma znaczenia a celem jest po prostu grupowanie powiązanych elementów. Z kolei <ol> tworzy listę numerowaną co jest istotne gdy chronologia lub priorytet poszczególnych elementów są kluczowe. Struktura <ol> jest preferowana w dokumentach gdzie ważne jest zachowanie kolejności jak na przykład w instrukcjach krok po kroku lub w raportach podsumowujących. Mylenie tych dwóch znaczników może prowadzić do zamieszania w zrozumieniu prezentacji danych. Kolejną błędną interpretacją jest uznawanie list za odnośniki co jest domeną znacznika <a> używanego do tworzenia hiperłączy między stronami. Jest to kluczowe w nawigacji strony i budowie struktury sieciowej. Z kolei skróty w HTML są reprezentowane za pomocą <abbr> co pomaga w dostarczaniu pełnych form skrótów przy zachowaniu ich kompaktowej postaci w tekście. Poprawne rozróżnianie i stosowanie tych znaczników jest fundamentem dobrych praktyk w projektowaniu stron internetowych zgodnie z zasadami semantyki i dostępności co jest kluczowe dla tworzenia przejrzystych i przyjaznych użytkownikowi interfejsów. Dodatkowo przekłada się to na lepsze wyniki SEO oraz wyższy poziom użyteczności aplikacji webowych który jest coraz częściej oczekiwany na współczesnym rynku IT. Właściwe wykorzystanie semantycznych znaczników wpływa korzystnie na przyszłą konserwację i rozbudowę kodu co jest nieocenione w długoterminowych projektach informatycznych. Poprawne zrozumienie tych różnic jest zatem kluczowe dla każdego kto aspiruje do profesjonalnego tworzenia stron internetowych i aplikacji webowych zgodnie z nowoczesnymi standardami branżowymi.

Pytanie 16

Jak przeglądarka zaprezentuje kod HTML formularza?

<form>
stanowisko: <input type="text"><br>
obowiązki:<br>
<input type="checkbox" name="obowiazek1" value="1" disabled checked>
sporządzanie dokumentacji<br>
<input type="checkbox" name="obowiazek2" value="2" checked>
pisanie kodu<br>
<input type="checkbox" name="obowiazek3" value="3">
testy oprogramowania<br>
</form>

A. D

B. C

C. B

D. A

Prawidłowa odpowiedź to D ponieważ kod HTML formularza definiuje trzy pola wyboru typu checkbox z różnymi atrybutami wpływającymi na ich stan początkowy. Pierwsze pole wyboru dotyczące sporządzania dokumentacji posiada atrybuty disabled i checked co oznacza że będzie zaznaczone ale nieaktywne dla użytkownika. Oznacza to że użytkownik nie może zmienić jego stanu w przeglądarce. Drugie pole dotyczące pisania kodu ma tylko atrybut checked co oznacza że będzie zaznaczone i dostępne do edycji. Trzecie pole dotyczące testów oprogramowania nie posiada żadnego z tych atrybutów więc będzie domyślnie niezaznaczone i edytowalne. To zachowanie jest zgodne ze standardami HTML i dobrymi praktykami kodowania gdzie atrybuty kontrolują interakcje użytkownika z formularzami. Wiedza ta jest kluczowa dla projektantów stron internetowych aby zapewnić prawidłowe działanie formularzy i poprawne doświadczenie użytkownika. Formularze są podstawowym elementem interakcji z użytkownikiem dlatego zrozumienie ich działania jest niezbędne w tworzeniu funkcjonalnych i intuicyjnych interfejsów użytkownika.

Pytanie 17

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

Zrozumienie właściwości CSS jest kluczowe dla tworzenia poprawnych i estetycznych stron internetowych. List-style-image to właściwość, która zastępuje domyślny punktor listy nienumerowanej obrazkiem, co było poprawnie wskazane w pierwszej odpowiedzi. Błędne jest jednak myślenie, że obraz rys.gif stanie się ramką dla listy. Taka funkcjonalność wymaga użycia właściwości CSS border, a nie list-style-image. Ramki wokół elementów HTML definiowane są za pomocą właściwości takich jak border-style, border-width i border-color. Następne nieporozumienie dotyczy myśli, że każdy punkt listy będzie miał osobne tło z obrazkiem. Aby osiągnąć ten efekt, należałoby użyć właściwości background-image dla każdego elementu listy (li), a nie list-style-image na poziomie ul. Ostatnim błędnym wnioskiem jest przypuszczenie, że rys.gif stanie się tłem całej listy nienumerowanej. Właściwość, która to umożliwia, to background-image, a nie list-style-image. Wybierając właściwą metodę, można precyzyjnie dostosować styl listy do zamierzonych efektów graficznych. Poprawne zrozumienie i zastosowanie tych właściwości jest kluczowe dla poprawnego tworzenia arkuszy stylów CSS i uniknięcia nieporozumień w projektowaniu wizualnym stron.

Pytanie 18

Wskaż zapis stylu CSS, który formatuje punktor listy numerowanej na wielkie cyfry rzymskie oraz listy punktowanej na kwadraty?

A. ol { list-style-type: square; } ul { list-style-type: upper-roman; }

B. ol { list-style-type: disc; } ul { list-style-type: upper-alpha; }

C. ol { list-style-type: upper-roman; } ul { list-style-type: square; }

D. ol { list-style-type: upper-alpha; } ul { list-style-type: disc; }

Odpowiedź jest poprawna, ponieważ styl CSS `ol { list-style-type: upper-roman; }` ustawia numerację dla listy uporządkowanej na wielkie cyfry rzymskie, co jest zgodne z wymaganiami. Użycie `ul { list-style-type: square; }` definiuje styl dla listy nieuporządkowanej, gdzie punkty są przedstawiane jako kwadraty. Stylizacja list w CSS jest kluczowa dla estetyki i czytelności dokumentu, a korzystanie z różnych typów markerów dla różnych rodzajów list potrafi znacząco poprawić organizację treści. Przykładem zastosowania może być dokumentacja techniczna, gdzie numery rzymskie używane są do oznaczania sekcji głównych, a kwadratowe punkty do podpunktów. Tego rodzaju stylizacja jest zgodna z dobrymi praktykami w projektowaniu stron internetowych, które wymaga dobrego zrozumienia CSS i jego właściwości. Ponadto, CSS pozwala na elastyczne dostosowywanie stylów, co jest istotne w kontekście responsywności i dostępności stron.

Pytanie 19

Który z zaprezentowanych kodów HTML sformatuje tekst zgodnie z podanym wzorem?
Uwaga: słowo "stacji" jest napisane większą czcionką niż pozostałe wyrazy w tej linijce)

Lokomotywa

Stoi na stacji lokomotywa ...

A. <p><small>Lokomotywa</small></p> <p>Stoi na <big>stacji<big> lokomotywa ...</p>

B. <h1>Lokomotywa</h1> <p>Stoi na <big>stacji</big> lokomotywa ...</p>

C. <h1>Lokomotywa</h1> <p>Stoi na <big>stacji</big> lokomotywa ...</p>

D. <h1>Lokomotywa</h1> <p>Stoi na <big>stacji lokomotywa ...</p>

Poprawny kod dokładnie odtwarza wzór: nagłówek poziomu pierwszego <h1> z tekstem „Lokomotywa” oraz akapit <p>, w którym tylko słowo „stacji” jest wyróżnione większym rozmiarem za pomocą znacznika <big>. Dzięki temu przeglądarka powiększa wyłącznie ten jeden wyraz, a reszta zdania zachowuje standardowy rozmiar czcionki wynikający z kaskady CSS lub domyślnych ustawień. Struktura dokumentu jest też logiczna: tytuł w <h1>, treść w akapicie, bez zbędnego mieszania poziomów nagłówków. W praktyce taki zapis dobrze pokazuje, jak selektywnie formatować tekst wewnątrz akapitu – możemy objąć znacznikiem <big> tylko fragment, podobnie jak używa się <strong> albo <em> do wyróżniania pojedynczych słów. W nowoczesnych projektach zamiast <big> zaleca się raczej stosowanie CSS, np. <span class="wiekszy">stacji</span> i w CSS: .wiekszy { font-size: 1.2em; }. Daje to większą kontrolę nad wyglądem i jest zgodne z aktualnymi standardami W3C, bo <big> jest znacznikiem przestarzałym (deprecated). Mimo to, z punktu widzenia tego zadania, kluczowe jest zrozumienie, że tag musi dokładnie obejmować tylko słowo, które ma być powiększone, oraz że znacznik musi być poprawnie zamknięty. Taka precyzyjna selekcja fragmentu tekstu to podstawa przy formatowaniu treści w HTML i późniejszym stylowaniu w CSS.

Pytanie 20

Kolor zielony w skróconej notacji szesnastkowej można zapisać w CSS jako sekwencję

A. #FFF

B. #00F

C. #F00

D. #0F0

Kolor zielony w notacji szesnastkowej skróconej, zapisany jako #0F0, jest standardowym sposobem reprezentacji koloru w CSS. W tej notacji każdy kanał koloru (czerwony, zielony, niebieski) jest reprezentowany przez dwucyfrową liczbę szesnastkową. W przypadku koloru zielonego, kanał czerwony jest ustawiony na 0, kanał zielony na maksymalną wartość (FF) i kanał niebieski na 0. Wartości te odpowiadają skali RGB, gdzie 0 oznacza brak koloru, a FF oznacza pełną intensywność. Przykładowo, w CSS można wykorzystać ten kolor w stylach dla elementów HTML, np. dla tła: 'background-color: #0F0;'. Dzięki temu możliwe jest osiągnięcie jasnego, intensywnego zielonego koloru. Notacja szesnastkowa jest powszechnie używana w projektowaniu webowym i jest zgodna ze standardami W3C, co czyni ją uniwersalnym narzędziem dla programistów i projektantów stron internetowych. Kolor zielony, uzyskiwany przez kombinację pełnej intensywności zielonego i braku czerwonego oraz niebieskiego, jest często wykorzystywany w interfejsach użytkownika, co czyni jego znajomość kluczową dla efektywnego projektowania stron.

Pytanie 21

W HTML-u atrybut shape w znaczniku area, który definiuje kształt obszaru, może przyjąć wartość

A. rect, square, circle

B. poly, square, circle

C. rect, poly, circle

D. rect, triangle, circle

Wybór niewłaściwej odpowiedzi może wynikać z nieporozumień dotyczących atrybutu shape w znaczniku area. Odpowiedzi wskazujące na 'square' lub 'triangle' są błędne, ponieważ te kształty nie są obsługiwane przez standard HTML. W przypadku 'square', mogłoby się wydawać, że jest to po prostu inna forma prostokąta, jednak HTML nie definiuje takiej wartości dla atrybutu shape. Również 'triangle' nie jest uznawany w kontekście standardowych atrybutów; HTML nie pozwala na bezpośrednie definiowanie kształtów trójkątnych w obszarach mapy obrazów. Tego rodzaju zamieszanie może wynikać z niepełnego zrozumienia funkcji atrybutu, który jest jednoznacznie związany z prostokątem, okręgiem oraz wielokątem. Kluczowe jest, aby przyjrzeć się dokumentacji HTML oraz standardom W3C, które jasno określają poprawne wartości dla atrybutu shape. W praktyce, zrozumienie tych różnic jest istotne dla tworzenia efektywnych i dostępnych interfejsów użytkownika, gdzie każdy element jest precyzyjnie zdefiniowany i zrozumiały dla przeglądarek oraz użytkowników. Ponadto, stosowanie niepoprawnych wartości może prowadzić do błędów w renderowaniu strony, co negatywnie wpływa na doświadczenia użytkowników i dostępność serwisu.

Pytanie 22

W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika

A. A

B. B

C. C

D. D

Formatowanie znacznika h1, określone w podanym kodzie CSS, wprowadza kilka charakterystycznych cech stylistycznych. Przede wszystkim, zastosowanie 'font-style: oblique;' zmienia wygląd tekstu, nadając mu ukośny styl. To oznacza, że tekst będzie wyświetlany w wyraźnie przechylonej formie, co jest często używane do podkreślenia ważnych elementów. Dodatkowo, 'font-variant: small-caps;' odpowiedzialne jest za przekształcenie małych liter w małe kapitałki, co nadaje tekstowi elegancki i formalny wygląd. Taki zabieg jest często wykorzystywany w tytułach lub nagłówkach, aby wyróżnić je wśród pozostałego tekstu. Ostatni element, 'text-align: right;', wyrównuje tekst do prawej krawędzi kontenera, co jest mniej powszechnie stosowane w porównaniu do wyrównania do lewej lub wyśrodkowanego, ale może być użyteczne w specyficznych układach strony. W przypadku, gdyby były dodatkowe style CSS przypisane do tego znacznika, mogłyby one wpłynąć na ostateczny wygląd, jednak w tym przypadku zakładamy, że są to jedyne zastosowane style. Standardy CSS jasno określają, jak różne właściwości mogą być używane do stylizacji elementów HTML, co czyni je niezwykle potężnym narzędziem w tworzeniu estetycznych i funkcjonalnych stron internetowych.

Pytanie 23

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. Znacznik h6 jest nieznany.

B. Znak zamykający /b jest niezgodny z zasadą zagnieżdżania.

C. Znak br nie został prawidłowo zamknięty.

D. Znak br nie może być użyty wewnątrz znacznika p.

Wszystkie trzy niepoprawne odpowiedzi zawierają błędne interpretacje kwestii walidacji kodu HTML w analizowanym fragmencie. Odpowiedź dotycząca nieznanego znacznika h6 jest błędna, ponieważ znacznik <h6> jest w pełni akceptowany w HTML jako znacznik nagłówka o najmniejszym znaczeniu. Zgodnie z specyfikacją HTML5, tego rodzaju znaczniki są używane do strukturyzacji treści, a ich użycie jest zalecane dla zachowania hierarchii informacji. Kolejna niepoprawna odpowiedź, dotycząca niedomkniętego znacznika <br>, jest również myląca, ponieważ znacznik <br> jest znakiem nowej linii i nie wymaga zamknięcia, co jest zgodne z zasadami HTML. Jego użycie wewnątrz znacznika <p> jest również dozwolone, chociaż nadmierne użycie <br> do łamania wierszy w paragrafach nie jest zalecane z perspektywy semantycznej i dostępności. Wreszcie, stwierdzenie, że znacznik <br> nie może występować wewnątrz znacznika <p>, jest mylne; znacznik <br> jest specjalnie zaprojektowany do użycia w kontekście tekstu i jego umiejscowienie w paragrafach jest jak najbardziej prawidłowe. W związku z tym wszystkie te odpowiedzi nie są zgodne z aktualnymi standardami HTML.

Pytanie 24

Który z akapitów wykorzystuje opisaną właściwość stylu CSS?

A. D

B. A

C. C

D. B

Odpowiedź B jest poprawna, ponieważ właściwość CSS border-radius: 20% określa zaokrąglenie narożników elementu. W tym przypadku zastosowanie 20% promienia powoduje, że narożniki akapitu są zaokrąglone w umiarkowanym stopniu. Właściwość ta jest powszechnie wykorzystywana w projektowaniu stron internetowych, aby nadać elementom bardziej łagodny, przyjazny wygląd. Użycie procentowej wartości oznacza, że wielkość zaokrąglenia zależy od wymiarów elementu, co pozwala na zachowanie proporcji na różnych urządzeniach i przy różnych rozmiarach ekranu. Zaokrąglenie w CSS jest istotnym aspektem responsywnego designu, ponieważ może poprawiać czytelność i estetykę interfejsu użytkownika. Praktyczne zastosowania obejmują przyciski, karty, obrazki i inne elementy interfejsu, gdzie płynne linie mogą wpływać na ogólne wrażenie wizualne strony. Zrozumienie i umiejętne wykorzystanie border-radius jest częścią standardowych umiejętności projektanta stron internetowych, co również wspiera zgodność ze współczesnymi trendami w UI/UX.

Pytanie 25

Na obrazie przedstawiono projekt układu bloków witryny internetowej. Zakładając, że bloki są realizowane za pomocą znaczników sekcji, ich formatowanie w CSS, oprócz ustawionych szerokości, powinno zawierać właściwość

BLOK 1		BLOK 2
BLOK 3	BLOK 4
BLOK 5

A. clear: both dla wszystkich bloków.

B. float: left dla wszystkich bloków.

C. clear: both dla bloku 5 oraz float: left jedynie dla 1 i 2 bloku.

D. clear: both dla bloku 5 oraz float: left dla pozostałych bloków.

Hmm, tutaj coś poszło nie tak. Wybrałeś opcję z `clear: both`, ale to nie do końca pasuje do tego zadania. `clear: both` w CSS służy głównie do resetowania pływania bloków, więc jak masz blok z tym ustawieniem, to następny nie będzie obok niego, tylko przesunie się na dół. A w tym przypadku nie musisz resetować pływania, bo to nie jest potrzebne. Wiem, że wybór `float: left` dla niektórych bloków może wydawać się dobrym pomysłem, ale żeby wszystko się poprawnie ułożyło, musisz zastosować `float: left` dla wszystkich bloków. I pamiętaj, żeby im ustawić szerokość, bo inaczej bloków może się nie udać ułożyć w poziomie.

Pytanie 26

Skrypt na stronę WWW stworzony w języku PHP

A. jest realizowany po stronie klienta

B. może działać bez wsparcia serwera WWW

C. jest wykonywany po stronie serwera

D. jest przetwarzany w taki sam sposób jak JavaScript

Kod PHP jest przetwarzany po stronie serwera, co oznacza, że wszystkie instrukcje napisane w tym języku są wykonywane na serwerze, a nie na komputerze klienta. Kiedy użytkownik żąda strony internetowej, serwer WWW interpretuje kod PHP, generuje odpowiedni HTML i wysyła go do przeglądarki. Dzięki temu możliwe jest dynamiczne tworzenie treści, uzależnionej od danych wejściowych użytkownika czy zawartości bazy danych. Przykładowo, w aplikacjach internetowych takich jak systemy zarządzania treścią (CMS) czy platformy e-commerce, PHP pozwala na generowanie różnorodnych widoków i interakcji w oparciu o aktualne informacje. Kluczowym aspektem dobrej praktyki w programowaniu w PHP jest separacja logiki aplikacji od warstwy prezentacji, co wspiera łatwiejsze zarządzanie kodem i jego utrzymanie. Warto również zaznaczyć, że PHP współpracuje z różnymi systemami baz danych, co umożliwia przechowywanie i przetwarzanie dużych ilości danych. Na przykład, w typowej aplikacji webowej można wykorzystać PHP do komunikacji z bazą MySQL, co pozwala na dynamiczne ładowanie treści w odpowiedzi na interakcje użytkownika.

Pytanie 27

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

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

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

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

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

Odpowiedź <p style="text-align: right"> tekst </p> jest poprawna, ponieważ właściwość CSS 'text-align' jest standardowym sposobem definiowania wyrównania tekstu w elemencie blokowym, takim jak <p>. Używając 'text-align: right', tekst wewnątrz elementu <p> zostanie wyrównany do prawej strony, co jest szczególnie przydatne w przypadku projektów webowych, gdzie estetyka i układ treści mają kluczowe znaczenie. Dzięki CSS można z łatwością zmieniać wyrównanie tekstu w zależności od wymagań projektu, co pozwala na elastyczne dostosowywanie stylów do różnych urządzeń i rozmiarów ekranów. Warto również wspomnieć, że stosowanie CSS do stylizacji dokumentów HTML jest zgodne z zasadami kaskadowych arkuszy stylów, co zapewnia separację treści od prezentacji i ułatwia zarządzanie stylami w większych projektach. Dobrą praktyką jest stosowanie zewnętrznych lub wewnętrznych arkuszy stylów zamiast inline stylingu, co zwiększa czytelność kodu i ułatwia jego utrzymanie.

Pytanie 28

Zgodnie z wytycznymi WCAG 2.x na poziomie AA minimalny kontrast tekstu (o standardowym rozmiarze) do tła, spełniający wymogi dostępności serwisu WWW dla osób z ograniczoną percepcją wzrokową wynosi

A. 2,5 : 1

B. 4,5 : 1

C. 1,5 : 1

D. 2,0 : 1

W tym pytaniu łatwo wpaść w pułapkę myślenia, że „jakikolwiek” kontrast wystarczy, by tekst był czytelny. Warto jednak oprzeć się na twardych definicjach z WCAG 2.x, a nie na subiektywnym wrażeniu, że coś „da się przeczytać”. Propozycje niższych wartości kontrastu, takich jak 1,5 : 1, 2,0 : 1 czy 2,5 : 1, odzwierciedlają typowy błąd: ocenianie czytelności tylko własnymi oczami, najczęściej osoby młodej, bez problemów ze wzrokiem, siedzącej przy dobrym monitorze i w dobrych warunkach oświetleniowych. Współczynniki zbyt niskie, rzędu 1,5 : 1 czy 2,0 : 1, oznaczają bardzo małą różnicę jasności między tekstem a tłem. Na ekranie będzie to wyglądało jak delikatne „rozmycie” tekstu w tle. Osoby z obniżonym kontrastem widzenia, z wadami refrakcji, a nawet użytkownicy korzystający ze słabszych ekranów lub w mocnym słońcu, zwyczajnie nie odczytają takiego tekstu bez dużego wysiłku. To nie jest tylko kwestia komfortu – przy dłuższej pracy może to powodować zmęczenie oczu, bóle głowy i zniechęcenie do korzystania z serwisu. Warto też zauważyć, że wartości 2,5 : 1 czasem „intuicyjnie” wydają się już całkiem niezłe, szczególnie gdy projektant przyzwyczajony jest do bardzo delikatnych, pastelowych palet. Ale WCAG 2.0 i 2.1 w kryterium 1.4.3 wyraźnie mówią: dla zwykłego tekstu poziom AA wymaga minimum 4,5 : 1. Niższe liczby mogą być stosowane tylko w określonych sytuacjach, np. dla dużego tekstu (wtedy próg 3 : 1) albo na poziomie AAA, gdzie są jeszcze ostrzejsze wymagania dla niektórych elementów. Wszelkie niższe wartości dla małego tekstu są po prostu niezgodne ze standardem. Kolejny typowy błąd myślowy to mieszanie wymagań estetycznych z wymogami dostępności. Projektanci często boją się „zbyt mocnych” kontrastów, bo wydaje im się, że interfejs będzie wyglądał zbyt ciężko, zbyt ostro. Przez to sięgają po bardzo jasne szarości albo blade kolory tekstu. Tymczasem branżowe dobre praktyki projektowania dostępnych interfejsów mówią jasno: kontrast minimum 4,5 : 1 dla podstawowego tekstu to absolutne minimum, a w wielu serwisach (np. administracja publiczna, systemy B2B używane godzinami) warto iść jeszcze wyżej. Trzymanie się zbyt niskich wartości nie tylko łamie standard WCAG, ale też realnie wyklucza część użytkowników z komfortowego korzystania z serwisu.

Pytanie 29

Jak nazywa się element systemu zarządzania treścią, który jest bezpośrednio odpowiedzialny za wygląd strony internetowej?

A. Widżet w systemie WordPress lub moduł w systemie Joomla!

B. Wtyczka w systemie WordPress lub dodatek w systemie Joomla!

C. Motyw w systemie WordPress lub szablon w systemie Joomla!

D. Kokpit w systemie WordPress lub panel administracyjny w systemie Joomla!

Motyw w systemie WordPress oraz szablon w systemie Joomla! odgrywają kluczową rolę w kreowaniu wizualnej tożsamości witryny internetowej. To właśnie one determinują, jak treści są prezentowane użytkownikom - od układu graficznego, przez kolory, czcionki, aż po elementy interaktywne. Dzięki motywom użytkownicy mogą wykorzystywać gotowe rozwiązania, co znacząco przyspiesza proces tworzenia strony. W przypadku WordPressa, motyw można łatwo zmieniać, co pozwala na dynamiczne dostosowywanie wyglądu witryny do zmieniających się trendów i potrzeb. Z kolei w Joomla!, szablony zapewniają elastyczność i możliwość personalizacji, co jest kluczowe dla dostosowania się do różnych grup docelowych. Dobrze zaprojektowane motywy i szablony powinny być zgodne z zasadami responsywnego web designu, co oznacza, że strona powinna wyglądać dobrze na różnych urządzeniach i rozdzielczościach ekranu. Warto również zwrócić uwagę na optymalizację SEO, która może być wpływana przez wybór motywu. Właściwy wybór oraz umiejętne wykorzystanie motywów i szablonów jest fundamentem skutecznego zarządzania treścią w sieci.

Pytanie 30

Które ze znaczników HTML umożliwią wyświetlenie na stronie tekstu w jednym wierszu, jeżeli żadne formatowanie CSS nie zostało zdefiniowane?

Dobre strony mojej strony

A. <p>Dobre strony </p><p style=”letter-spacing:3px”>mojej strony</p>

B. <h3>Dobre strony </h3><h3 style=”letter-spacing:3px”>mojej strony</h3>

C. <span>Dobre strony </span><span style=”letter-spacing:3px”>mojej strony</span>

D. <div>Dobre strony </div><div style=”letter-spacing:3px”>mojej strony</div>

Niestety, Twoja odpowiedź nie była prawidłowa. Wybrałeś jedną z odpowiedzi zawierających znaczniki blokowe: <p>, <h3> lub <div>. Te znaczniki domyślnie zaczynają nowy wiersz przed i po swoim zakończeniu, co oznacza, że tekst zawarty w kolejnych takich znacznikach będzie wyświetlany w oddzielnych wierszach. To jest dobre podejście, kiedy chcemy utworzyć strukturę dokumentu z wyraźnie zdefiniowanymi sekcjami. Jednak w przypadku pytania, które polegało na wyświetlaniu tekstu w jednym wierszu bez dodatkowego formatowania CSS, odpowiedzi z użyciem tych znaczników są niepoprawne. W takim przypadku powinniśmy skorzystać z znacznika liniowego <span>, który nie wprowadza nowych linii. Ważne jest, aby dobrze rozumieć różnice między znacznikami liniowymi i blokowymi, ponieważ mają one istotne znaczenie dla struktury i wyglądu naszej strony internetowej.

Pytanie 31

Który z poniższych formatów plików nie jest używany do publikacji grafiki lub animacji w internecie?

A. AIFF

B. PNG

C. SVG

D. SWF

Wybór formatów PNG, SWF i SVG jako odpowiedzi nie jest właściwy, ponieważ każdy z nich jest ściśle związany z publikacją grafiki lub animacji na stronach internetowych. PNG to format plików rastrowych, który zapewnia wysoką jakość obrazu, wspiera przezroczystość i kompresję bezstratną. Z tego powodu jest często wykorzystywany w projektowaniu stron internetowych, gdzie ważne jest zachowanie detali w grafice, a także w sytuacjach, gdy potrzebne są przezroczyste tła. Z kolei SWF jest to format, który był szeroko stosowany do tworzenia animacji, gier i interaktywnych aplikacji w środowisku Adobe Flash. Choć technologia Flash jest obecnie mniej popularna z powodu rozwoju HTML5, SWF wciąż ma swoje miejsce w historii publikacji multimedialnych. Natomiast SVG, jako format wektorowy, umożliwia tworzenie grafiki, która jest skalowalna i dostosowuje się do różnych rozmiarów ekranów, co czyni go idealnym do responsywnych designów. Wszystkie te formaty są kluczowe w kontekście tworzenia atrakcyjnych wizualnie i funkcjonalnych stron internetowych, dlatego nie mogą być uznane za błędne odpowiedzi w kontekście publikacji grafiki i animacji.

Pytanie 32

Zapis koloru w formacie #ff00e0 jest równoważny reprezentacji

A. rgb(255, 0, 128)

B. rgb(255, 0, 224)

C. rgb(ff, 0, e0)

D. rgb(f, 0, e0)

Odpowiedzi rgb(f, 0, e0) oraz rgb(ff, 0, e0) zawierają błędy dotyczące formatu wartości RGB. W przypadku formatu RGB, wartości składowych koloru muszą być liczbami całkowitymi w przedziale od 0 do 255. W pierwszym przypadku 'f' i 'e0' nie są poprawnymi wartościami, ponieważ 'f' nie reprezentuje liczby w systemie dziesiętnym, a 'e0' nie zostało przeliczone na wartość dziesiętną, co czyni tę odpowiedź niezgodną ze standardami definiowania kolorów. Z kolei druga odpowiedź, rgb(ff, 0, e0), również nie przekształca wartości szesnastkowych na format dziesiętny. Standard RGB wymaga, aby wartości były zrozumiałe dla silnika renderującego, dlatego niepoprawne są wartości, które nie są liczbami całkowitymi. Pojawiają się też koncepcje dotyczące odczytywania wartości szesnastkowych, gdzie podstawowym błędem jest brak znajomości konwersji między tymi systemami liczbowymi. Wartości szesnastkowe trzeba zamieniać na dziesiętne, aby prawidłowo interpretować kolory. W przypadku rgb(255, 0, 128), wartość niebieska została błędnie określona jako 128, co jest znacznie niższe niż 224, co prowadzi do błędnej interpretacji koloru. Używanie błędnych wartości w definicji kolorów może skutkować niezgodnością wizualną w projektach graficznych i webowych.

Pytanie 33

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. nav { float: left; } aside { float: left; }

D. aside {float: left; }

Prawidłowa odpowiedź opiera się na tym, jak działają własności float w CSS i w jakiej kolejności przeglądarka renderuje elementy blokowe. Jeśli w dokumencie HTML kolejność znaczników to np. <aside>, potem <section>, a na końcu <nav>, to bez dodatkowego stylowania wszystkie trzy ustawią się pionowo, jeden pod drugim, w tej właśnie kolejności. Dodanie float zmienia sposób, w jaki elementy „odpływają” od normalnego przepływu dokumentu i jak układają się obok siebie. W stylu nav { float: right; } section { float: right; } sprawiamy, że zarówno nav, jak i section są przesuwane do prawej krawędzi kontenera, natomiast aside (bez float) pozostaje w normalnym przepływie, czyli z lewej strony. Ponieważ przeglądarka układa elementy w kolejności występowania w kodzie, najpierw wyrenderuje aside po lewej, potem section „odpłynie” w prawo, a na końcu nav też „odpłynie” w prawo, ustawiając się po prawej stronie, ale dalej od góry niż section. Efekt wizualny jest taki, że po lewej mamy aside, po prawej nav, a section ląduje między nimi, dokładnie tak jak było pokazane na filmie. Moim zdaniem to zadanie dobrze pokazuje, że przy floatach zawsze trzeba myśleć o trzech rzeczach naraz: kolejności elementów w HTML, kierunku „pływania” (left/right) oraz o tym, które elementy pozostawiamy w normalnym przepływie. W praktyce w nowoczesnych projektach częściej używa się flexboxa albo CSS Grid do takich układów, bo są czytelniejsze i mniej problematyczne. Przykładowo, zamiast kombinować z float, można by użyć display: flex; na kontenerze i ustawić order dla aside i nav. Float nadal jednak pojawia się w starszych layoutach i w zadaniach egzaminacyjnych, więc warto dobrze rozumieć jego zachowanie, choćby po to, żeby poprawnie modyfikować istniejące style lub naprawiać „rozjechane” układy w starszych projektach.

Pytanie 34

W systemie kolorów RGB kolor żółty uzyskuje się przez zmieszanie dwóch barw: zielonej i czerwonej. Jaki kod szesnastkowy reprezentuje kolor żółty?

A. #00FFFF

B. #FFFF00

C. #FF00FF

D. #F0F0F0

Kolor żółty w palecie RGB jest uzyskiwany przez połączenie maksymalnej wartości czerwonego (FF) oraz maksymalnej wartości zielonego (FF), przy zerowej wartości niebieskiego (00). Kod szesnastkowy #FFFF00 oznacza, że czerwony ma wartość 255 (FF), zielony również ma wartość 255 (FF), a niebieski ma wartość 0 (00). Przykładowe zastosowanie koloru żółtego znajduje się w projektowaniu graficznym, gdzie jest on często wykorzystywany do wyróżniania istotnych elementów, takich jak przyciski lub informacje, które mają przyciągnąć uwagę użytkownika. W kontekście aplikacji internetowych, stosowanie barw RGB zgodnie z ich reprezentacją szesnastkową jest zgodne z dobrymi praktykami w zakresie UX/UI, zapewniając spójność i czytelność interfejsów. Standardy dotyczące kolorów, takie jak WCAG, również zalecają odpowiednie kontrasty, które można osiągnąć przy użyciu kolorów takich jak żółty. Poznanie różnych kodów kolorów oraz ich zastosowań jest kluczowe dla skutecznego projektowania wizualnego, co przyczynia się do lepszej interakcji użytkownika z aplikacjami i stronami internetowymi.

Pytanie 35

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

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

A. Styl wpisany, lokalny

B. Styl zewnętrzny

C. Styl wewnętrzny

D. Styl alternatywny, zewnętrzny

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

Pytanie 36

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

A. <dl>

B. <abbr>

C. <td>

D. <label>

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

Pytanie 37

Na ilustracji zaprezentowano koncepcję układu bloków strony internetowej. Przyjmując, że bloki są realizowane za pomocą znaczników sekcji, a szerokość jest określona tylko dla bloków 2, 3 oraz 4, ich stylowanie powinno uwzględniać właściwość

A. clear: both dla bloku 5 i float: left jedynie dla bloków 2, 3 oraz 4

B. float: left dla wszystkich bloków

C. float: left jedynie dla bloków 3 i 4 oraz clear: both dla bloku 2

D. clear: both dla wszystkich bloków

Odpowiedź jest prawidłowa, ponieważ wykorzystanie float: left dla bloków 2, 3 i 4 pozwala na ich ustawienie obok siebie w poziomie. Jest to klasyczna technika stosowana w CSS do tworzenia layoutów, gdzie elementy mają płynąć obok siebie. Definiując float: left, elementy zaczynają od lewej krawędzi rodzica i układają się w linii poziomej. Użycie clear: both dla bloku 5 zapewnia, że blok ten zacznie się poniżej pływających bloków 2, 3 i 4, a nie obok nich. Clear: both jest konieczne, aby zapewnić, że blok 5 nie zostanie zakłócony przez floating, co jest powszechną praktyką przy tworzeniu wielokolumnowych layoutów. Kiedy float jest używany bez clear, może prowadzić do overlapania elementów, co jest niepożądane w strukturze layoutu. Praktyczne zastosowanie tego podejścia obejmuje układy z nagłówkiem, treścią i stopką, gdzie nagłówek i stopka powinny być pełnej szerokości, a treść podzielona na kolumny obok siebie. To podejście jest zgodne z tradycyjnymi metodami budowania stron przed wprowadzeniem flexboxa i grida, gdzie float był jednym z podstawowych narzędzi do zarządzania układem strony. Współczesne dobre praktyki wciąż uznają jego istotność, zwłaszcza w kontekście starszych projektów utrzymywanych z biegiem czasu.

Pytanie 38

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

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

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

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

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

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

Poprawna odpowiedź to 20 znaków, które nie są widoczne w polu tekstowym. Znacznik <input type="password"> w HTML jest używany do tworzenia pól wprowadzania, w których hasła lub inne wrażliwe dane są maskowane, co oznacza, że wpisywane znaki są pokazywane jako symbole, zwykle kropki. W atrybucie 'maxlength' określa się maksymalną liczbę znaków, które użytkownik może wprowadzić. W tym przypadku, atrybut 'maxlength="20"' oznacza, że użytkownik może wprowadzić maksymalnie 20 znaków, ale nie będą one widoczne w polu tekstowym, co zwiększa bezpieczeństwo. Dobrym przykładem zastosowania tego typu pola jest logowanie do systemów, gdzie ochrona danych użytkownika jest kluczowa. Stosowanie pól typu 'password' jest zgodne z zasadami ochrony prywatności i dobrymi praktykami w zakresie projektowania interfejsów użytkownika, które wymagają maskowania danych w celu minimalizacji ryzyka ich ujawnienia.

Pytanie 39

W HTML, aby ustawić tytuł dokumentu na "Moja strona", który pojawi się na karcie przeglądarki internetowej, należy użyć zapisu

A. <title>Moja strona</title>

B. <meta name="title" content="Moja strona">

C. <head>Moja strona</head>

D. <meta title="Moja strona">

Element <title> w HTML jest naprawdę ważny, bo to właśnie on ustala, co zobaczysz na zakładce w przeglądarce. Powinien być umieszczony w sekcji <head>, co jest zgodne z tym, co mówi W3C. Poprawny zapis wygląda tak: <title>Moja strona</title>, co sprawia, że "Moja strona" będzie się pokazywać jako tytuł w przeglądarce. Tytuł strony ma spore znaczenie dla SEO, bo wpływa na to, jak strona jest pozycjonowana w wynikach wyszukiwania. Warto, żeby tytuł był krótki, ale jednocześnie zawierał istotne informacje, a najlepiej, żeby nie miał więcej niż 60 znaków, żeby się nie obcinał w wynikach. Fajnie też umieścić w tytule kluczowe słowa, które opisują, o czym jest strona, bo to może zwiększyć jej atrakcyjność i CTR. Dobrze skonstruowany tytuł to też lepsza dostępność, bo ułatwia użytkownikom poruszanie się i orientowanie w otwartych zakładkach.

Pytanie 40

W kodzie HTML5 znajduje się fragment, który zawiera błąd walidacji. Jakiego rodzaju jest to błąd?

<h6>tekst</h6>
<p>pierwsza <b>linia</b><br>
<p>Druga linia</p>

A. Znaczniki powinny być zapisane wielkimi literami.

B. Pierwszy znacznik <p> nie został zamknięty.

C. Znacznik <br> musi być zamknięty.

D. Nagłówek szóstego poziomu nie istnieje.

W tym zadaniu chodziło o rozpoznanie typowego błędu związanego z poprawnym zamykaniem znaczników HTML, a dokładniej – ze znacznikiem <p>. W przedstawionym kodzie rzeczywiście pierwszy znacznik <p> nie został zamknięty przed pojawieniem się kolejnego bloku <p>, co powoduje naruszenie struktury dokumentu. Według specyfikacji HTML5, element <p> nie powinien być zagnieżdżany ani przerwany przez inny blokowy element (w tym przypadku przez drugi <p>). Przeglądarki zwykle próbują automatycznie domykać taki znacznik, ale nie jest to dobra praktyka – takie poleganie na mechanizmach autokorekty może później prowadzić do trudnych do wykrycia błędów wizualnych albo nieprzewidywalnych efektów w stylach CSS. Z mojego doświadczenia wynika, że konsekwentne zamykanie znaczników nie tylko poprawia czytelność kodu, ale i ułatwia pracę zespołową oraz skalowanie projektu. Przykład: jeśli piszesz większy artykuł i zapomnisz zamknąć <p>, cała dalsza część tekstu może zostać potraktowana jako jeden paragraf. To potrafi solidnie namieszać, nawet w prostych stronach! Branża webowa od lat promuje zasadę – pisz zgodnie ze specyfikacją, a będziesz miał mniej problemów później. Zawsze lepiej przejrzeć strukturę dokumentu dwa razy, niż potem szukać błędów na produkcji. Przy pracy z edytorami kodu warto korzystać z funkcji podświetlania składni lub walidatorów HTML, które od razu wyłapują takie potknięcia.

Rozpocznij nowy egzamin

Powrót do strony głównej