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 09:16
Data zakończenia: 12 czerwca 2026 09:44

Egzamin niezdany

Wynik: 18/40 punktów (45,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Udostępnij swój wynik

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

A. 3

B. 9

C. 6

D. 12

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

Pytanie 2

W języku CSS określono formatowanie znacznika h1 według poniższego wzoru. Zakładając, że do znacznika h1 nie dodano żadnego innego formatowania, wskaż sposób formatowania tego znacznika.

h1 {
    font-style: oblique;
    font-variant: small-caps;
    text-align: right;
}

A. A.

B. C.

C. B.

D. D.

Gratulacje, Twoja odpowiedź jest prawidłowa. W CSS określono, że znacznik h1 ma być wyświetlany z pochyłą czcionką, co jest osiągane za pomocą właściwości 'font-style: oblique'. Dodatkowo, małe wielkie litery są realizowane przez 'font-variant: small-caps', które zmieniają wszystkie małe litery na wielkie litery, ale z zachowaniem mniejszego rozmiaru. Wreszcie, do wyrównania tekstu do prawej strony służy 'text-align: right'. Wszystko to razem składa się na formatowanie znacznika h1, które zostało zdefiniowane w CSS. To jest dobra praktyka, aby zrozumieć i zapamiętać różne właściwości CSS, ponieważ pozwalają one na bardzo szczegółowe kontrolowanie wyglądu i układu elementów na stronie. Pamiętaj, że CSS jest niezwykle potężnym narzędziem w rękach doświadczonego programisty front-end i pozwala na tworzenie estetycznych, responsywnych i przyjaznych dla użytkownika interfejsów.

Pytanie 3

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

A. identyfikator

B. pseudoelement

C. klasę

D. pseudoklasę

Odpowiedź, którą wybrałeś, to pseudoklasa. W CSS jest to typowa sprawa, bo selektor a:link to właśnie przykład użycia pseudoklas. Dzięki nim możesz stylizować różne elementy na podstawie ich stanu lub tego, jak się zachowują w dokumencie. Na przykład, selektor a:link definiuje styl dla linków, które jeszcze nie zostały odwiedzone - więc jeśli ktoś kliknął na link, zmienia się jego wygląd. Używając pseudoklas, możesz znacznie poprawić estetykę stron i sprawić, że będą bardziej przyjazne dla użytkowników. Pomyśl o takich pseudoklasach jak :hover, co zmienia styl, gdy najedziemy kursorem, albo :active, która wprowadza zmiany podczas klikania. To naprawdę dobra technika, żeby nadać stronom fajny, dynamiczny charakter. Rozumienie pseudoklas to istotna sprawa w web designie, a to, co się zgadza z tym, co mówi W3C, to dodatkowy atut.

Pytanie 4

W języku JavaScript potrzebne jest odwołanie się do elementu znajdującego się w pierwszym paragrafie danego fragmentu kodu HTML. Można to osiągnąć przy użyciu funkcji

<body> 
 <p>pierwszy paragraf</p> 
 <p>drugi paragraf</p> 
 <p>trzeci paragraf</p> 
 …

A. getElementById('p1')

B. getElementsByTagName('p')[0]

C. getElement('p')

D. getElementsByClassName('p.1')[0]

Odpowiedź getElementsByTagName("p")[0]; jest poprawna, ponieważ metoda getElementsByTagName zwraca kolekcję wszystkich elementów o danym tagu, w tym przypadku "p". Wywołując tę metodę, otrzymujemy tablicę wszystkich paragrafów na stronie, co pozwala na łatwy dostęp do pierwszego z nich, korzystając z indeksu [0]. Jest to standardowy sposób uzyskiwania dostępu do elementów w DOM w JavaScript. Zastosowanie tej metody jest zgodne z dobrą praktyką, umożliwiającą selekcję elementów w sposób dynamiczny i elastyczny. Przykładowo, jeśli chcemy zmienić tekst pierwszego paragrafu, możemy wykorzystać: document.getElementsByTagName("p")[0].innerText = 'Nowy tekst';. Dzięki temu możemy skutecznie manipulować zawartością stron internetowych, co jest kluczowe w rozwoju front-endu. Dodatkowo, metody takie jak getElementsByTagName są dobrze wspierane przez wszystkie nowoczesne przeglądarki, co zapewnia ich niezawodność w codziennej pracy programisty.

Pytanie 5

W firmie zajmującej się technologiami informacyjnymi otwarta jest rekrutacja na stanowisko administratora e-sklepu. Do jego zadań należy instalacja i konfiguracja systemu zarządzania treścią, który jest przeznaczony jedynie dla sklepu internetowego, zmiana szablonów wizualnych oraz dostosowanie grafiki. Jakie umiejętności powinien posiadać nowy pracownik?

A. HTML, CSS, Photoshop

B. CMS PrestaShop, CSS, Gimp

C. Photoshop, Gimp, JavaScript

D. CMS WordPress, HTML, Gimp

Wybór odpowiedzi CMS PrestaShop, CSS, Gimp jest prawidłowy, ponieważ dokładnie odpowiada wymaganiom związanym z rolą administratora sklepu internetowego. PrestaShop to jeden z najpopularniejszych systemów zarządzania treścią (CMS) dedykowanych dla e-commerce. Jego znajomość jest kluczowa, gdyż pozwala na efektywną instalację i konfigurację platformy sklepowej, co jest jednym z głównych obowiązków administratora. CSS jest niezbędnym narzędziem do zmiany szablonów i dostosowania wyglądu sklepu zgodnie z wymaganiami klienta oraz standardami responsywnego designu, co zapewnia lepsze doświadczenia użytkowników na różnych urządzeniach. Gimp jako narzędzie graficzne umożliwia modyfikację grafik i tworzenie nowych elementów wizualnych, co jest istotne dla personalizacji sklepu. Dobrą praktyką w branży jest umiejętność integrowania graficznych oraz technologicznych komponentów w celu stworzenia atrakcyjnej i funkcjonalnej platformy handlowej, co znacząco wpływa na konwersje i wyniki sprzedaży. Ponadto, znajomość PrestaShop otwiera drzwi do wielu zasobów i społeczności, co dodatkowo wspiera rozwój zawodowy administratora.

Pytanie 6

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

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

formatowanie

A. format2

B. format1

C. format3

D. format4

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

Pytanie 7

Który z przedstawionych rysunków ilustruje efekt działania zamieszczonego fragmentu kodu HTML?

A. rys. C

B. rys. D

C. rys. A

D. rys. B

Odpowiedzi inne niż rys. C nie są poprawne z powodu błędnego zrozumienia jak działa atrybut rowspan w języku HTML. Gdy komórka tabeli posiada atrybut rowspan oznacza to że komórka ta rozciąga się pionowo na określoną liczbę wierszy. W przypadku braku zrozumienia tego mechanizmu można błędnie przypuszczać że każda komórka zaczyna się i kończy w obrębie jednego wiersza. Taki tok myślenia prowadzi do niepoprawnego rozmieszczenia elementów tabeli jak w rys. A lub D gdzie nie wzięto pod uwagę łączenia komórek w pionie. W odpowiedzi A pierwsza komórka nie obejmuje dwóch wierszy co jest sprzeczne z kodem. W odpowiedzi B z kolei drugi wiersz zawiera dwie komórki co również jest sprzeczne z kodem który definiuje tylko jedną. Takie błędy często wynikają z braku doświadczenia w używaniu zaawansowanych funkcji HTML co może prowadzić do mylnych wyobrażeń o tym jak kod przekłada się na widok strony. Atrybuty rowspan i colspan są kluczowe w kontekście strukturalnego podejścia do budowy stron internetowych i ich poprawne użycie ma istotne znaczenie dla dostępności oraz zrozumienia danych przez użytkowników i technologie wspomagające. Ważne jest także zrozumienie różnic między tworzeniem struktury a prezentacją co jest możliwe dzięki CSS zamiast nadużywania tabel do layoutów.

Pytanie 8

Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:

<style type="text/css">
 <!--
   p {color: blue; font-size: 14pt; font-style: italic}
   a { font-size: 16pt; text-transform: lowercase; }
   td.niebieski { color: blue }
   td.czerwony { color: red }
 -->
 </style>

A. Akapit będzie transponowany na małe litery.

B. Jest to styl lokalny.

C. Odnośnik będzie pisany czcionką 14 punktów.

D. Zdefiniowano dwie klasy.

Gratulacje, dobrze odpowiedziałeś. W załączonym kodzie CSS zdefiniowano dwie klasy, a mianowicie 'niebieski' i 'czerwony'. Klasy te są przypisane do elementów TD, co oznacza, że komórki tabeli mogą mieć kolor niebieski lub czerwony w zależności od przypisanej klasy. Klasy CSS są jednym z podstawowych sposobów formatowania elementów na stronie internetowej, które pozwalają na stylizowanie grup elementów na podstawie wspólnego identyfikatora klasy. Zamiast formatować każdy element HTML osobno, możemy jednorazowo zdefiniować styl dla klasy, a następnie przypisać tę klasę do dowolnej liczby elementów. To jest zgodne z dobrymi praktykami programowania DRY (Don't Repeat Yourself), co zwiększa czytelność i utrzymanie kodu. W kontekście pytania, każda komórka tabeli przypisana do klasy 'niebieski' lub 'czerwony' będzie miała odpowiednio niebieski lub czerwony kolor.

Pytanie 9

W poniższym kodzie CSS czcionka zmieni kolor na żółty

a[target="_blank"]
{
  color: yellow;
}

A. tekstu akapitu

B. każdego linku

C. odnośników, które otwierają się w nowej karcie

D. odnośników, które otwierają się w tej samej karcie

Prawidłowa odpowiedź wskazuje na zastosowanie selektora a[target="_blank"] w języku CSS. Ten selektor odnosi się do wszystkich odnośników HTML, które otwierają się w nowej karcie przeglądarki dzięki użyciu atrybutu target z wartością "_blank". Stylizacja tych odnośników na kolor żółty jest możliwa przez przypisanie właściwości color z odpowiednią wartością. Jest to praktyczne podejście, które pozwala na wizualne wyróżnienie linków otwierających się w osobnych zakładkach. Takie podejście jest zgodne z dobrymi praktykami projektowania stron internetowych, gdzie wskazane jest, aby użytkownicy mieli wyraźne sygnały o nietypowych działaniach linków. W kontekście dostępności webowej, takie stylizowanie wspiera użytkowników w szybszym orientowaniu się w sposobie działania poszczególnych elementów interfejsu. Separacja stylu i treści zgodnie z zasadami CSS umożliwia bardziej elastyczne zarządzanie wyglądem strony i ułatwia utrzymanie spójności wizualnej na całej witrynie. Przykład ten ilustruje, jak CSS może wpływać na interakcję użytkownika z elementami strony, co jest kluczowe w procesie tworzenia przyjaznych i intuicyjnych interfejsów użytkownika.

Pytanie 10

Język HTML oferuje nagłówki, które służą do tworzenia hierarchii zawartości. Te nagłówki występują wyłącznie w zakresie

A. h1 - h10

B. h1 - h4

C. h1 - h8

D. h1 - h6

Odpowiedź h1 - h6 jest poprawna, ponieważ w języku HTML nagłówki są definiowane w ramach sześciu poziomów, od h1 do h6. Nagłówki te pełnią kluczową rolę w organizacji treści na stronie internetowej, umożliwiając tworzenie hierarchii oraz struktury dokumentu. h1 jest najważniejszym nagłówkiem i powinien być używany do oznaczania głównego tytułu strony, podczas gdy h2, h3, h4, h5 i h6 służą do tworzenia podtytułów i hierarchii treści w miarę potrzeby. Na przykład, nagłówek h2 może być użyty do oznaczenia sekcji podrzędnej w stosunku do h1, a h3 do następnej sekcji podrzędnej. Takie zrozumienie hierarchii nagłówków jest istotne z punktu widzenia SEO, ponieważ wyszukiwarki korzystają z tych struktur do indeksowania treści. Dobrze zorganizowane nagłówki poprawiają również dostępność strony, co jest zgodne z najlepszymi praktykami webowymi, a także ułatwiają nawigację użytkownikom, zarówno ludziom, jak i robotom wyszukiwarek.

Pytanie 11

W dokumencie XHTML znajduje się fragment kodu, w którym występuje błąd walidacyjny. Co jest przyczyną tego błędu?

A. Znaczniki powinny być pisane dużymi literami

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

C. Znacznik <b> nie może być umieszczany wewnątrz znacznika <p>

D. Nie ma nagłówka szóstego poziomu

Wybór odpowiedzi, że nie istnieje nagłówek szóstego stopnia, jest błędny, ponieważ w specyfikacji XHTML nagłówek szóstego stopnia <h6> jest jak najbardziej dopuszczalny i służy do oznaczania najmniej ważnych nagłówków, w hierarchii od <h1> do <h6>. Pisanie znaczników wielkimi literami nie jest wymogiem XHTML. Chociaż XHTML jest wrażliwy na wielkość liter, co oznacza, że nazwy znaczników i atrybutów muszą być pisane małymi literami, odpowiedź sugerująca, że tylko wielkie litery są poprawne, jest błędna. Użycie <b> jako zagnieżdżonego w <p> jest standardową praktyką i jest zgodne z normami XHTML, ponieważ <b> służy do pogrubienia tekstu wewnątrz elementu blokowego, jakim jest <p>. Problem z tą odpowiedzią polega na błędnym zrozumieniu struktury HTML, gdzie zagnieżdżanie elementów inline w elementach blokowych jest dozwolone. Ważnym aspektem jest umiejętność rozpoznania, które elementy są inline, a które blokowe, i jak mogą być poprawnie zagnieżdżane w kontekście specyfikacji XHTML. Poprawne zrozumienie tych zasad pomaga w tworzeniu wydajniejszych i bardziej zgodnych dokumentów internetowych.

Pytanie 12

Który z poniższych znaczników HTML jest używany do tworzenia struktury strony internetowej?

A. <em>

B. <mark>

C. <input>

D. <aside>

Znacznik <aside> jest poprawnym rozwiązaniem, ponieważ jest używany do definiowania treści, która jest powiązana z otaczającym kontekstem, ale nie jest kluczowa dla głównego przebiegu informacji. Z perspektywy budowy struktury strony internetowej, <aside> doskonale wpisuje się w koncepcję bocznych paneli, przypisów, lub dodatkowych informacji, które wzbogacają główną treść. Przykładem zastosowania może być umieszczenie sekcji z cytatami, powiązanymi artykułami lub innymi treściami uzupełniającymi. Zgodnie z zasadami semantyki HTML5, <aside> pozwala na lepszą interpretację treści przez przeglądarki oraz narzędzia do analizy SEO, co przyczynia się do poprawy dostępności i użyteczności strony. W praktyce, korzystanie z semantycznych znaczników, takich jak <aside>, wspiera także tworzenie bardziej czytelnych i strukturalnych dokumentów, co jest zgodne z najlepszymi praktykami w tworzeniu stron internetowych.

Pytanie 13

W przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ

<img src="kwiat.jpg alt="kwiat">

A. nie odnaleziono pliku kwiat.jpg

B. wprowadzono nieznany atrybut alt

C. użyto niewłaściwego znacznika do wyświetlenia obrazu

D. nie zamknięto cudzysłowu

Poprawna odpowiedź to nie domknięto cudzysłowu ponieważ w kodzie HTML atrybuty muszą być poprawnie zamknięte aby poprawnie interpretować ich wartości. W przedstawionym fragmencie kodu dla znacznika img brakuje końcowego cudzysłowu po wartości src co stanowi błąd składniowy. Tego typu błędy mogą prowadzić do nieprawidłowego działania strony ponieważ przeglądarka nie jest w stanie jednoznacznie określić końca wartości atrybutu co może skutkować nieprawidłowym renderowaniem danych. Zgodnie z najlepszymi praktykami każde otwarte cudzysłowie powinno być zamknięte aby zapewnić poprawną interpretację kodu. Ponadto stosowanie poprawnego zamykania cudzysłowów zwiększa czytelność kodu co jest istotne przy współpracy zespołowej i ułatwia jego utrzymanie. Warto także korzystać z walidatorów HTML które automatycznie wykrywają takie błędy pomagając w ich szybkim usunięciu. Tego rodzaju narzędzia są kluczowe w procesie tworzenia stron internetowych ponieważ umożliwiają weryfikację zgodności kodu z obowiązującymi standardami co ma bezpośredni wpływ na jego wydajność i kompatybilność z różnymi przeglądarkami.

Pytanie 14

W języku HTML zdefiniowano listę, która

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

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

B. jest punktowana z zagłębioną listą numerowaną

C. nie posiada zagłębień i jest punktowana, wyświetla 5 punktów

D. jest numerowana z zagłębioną listą punktowaną

To pytanie świetnie pokazuje, jak w HTML można łączyć różne typy list, czyli listy numerowane (<ol>) oraz punktowane (<ul>). W tym przypadku mamy główną listę numerowaną, gdzie każdy element to <li>. Jednym z tych elementów jest „czerwony”, pod którym zagnieżdżono listę punktowaną z dwoma podpunktami („różowy”, „pomarańczowy”). Taki sposób strukturyzowania treści w HTML to całkowicie zgodna ze specyfikacją praktyka – właśnie dzięki kombinowaniu <ol> i <ul> można czytelnie przedstawiać np. instrukcje czy hierarchiczne zestawienia. Moim zdaniem to jedno z najprostszych, a zarazem najbardziej efektywnych narzędzi do prezentowania hierarchii – nie tylko na stronach technicznych, ale nawet w prostych notatkach. Przeglądarki zawsze renderują <ol> jako listę numerowaną, a <ul> jako wypunktowaną, więc użytkownik końcowy od razu widzi, co jest ważniejsze, a co podrzędne. Takie zagnieżdżenie list to w branży webowej chleb powszedni – np. instrukcje krok po kroku, gdzie niektóre kroki mają dodatkowe podpunkty. Warto pamiętać, że trzymanie się tej struktury i nie mieszanie porządkowania (np. nie zamieniać miejscami <ol> i <ul> bez powodu) ułatwia późniejszą edycję i utrzymanie kodu, co w większych projektach bardzo doceni każdy programista. Sam często stosuję takie rozwiązania i naprawdę nie ma tu lepszej praktyki, jeśli chodzi o przejrzystość kodu HTML.

Pytanie 15

W CSS zapisany w ten sposób:

p { background-image: url("rysunek.png"); }

spowoduje, że rysunek.png stanie się

A. widoczny obok każdego akapitu

B. tłem całej witryny

C. tłem każdego akapitu

D. wyświetlony, jeśli w kodzie użyty zostanie znacznik img

W przypadku stylowania elementów za pomocą CSS, bardzo łatwo popełnić błąd interpretacyjny, jeśli nie zna się szczegółów działania selektorów czy właściwości stylów. Zapis p { background-image: url("rysunek.png"); } dotyczy wyłącznie elementów <p>, czyli akapitów, a nie całej witryny. Popularnym nieporozumieniem jest myślenie, że taka reguła zmieni tło całej strony — w rzeczywistości, aby osiągnąć taki efekt, należałoby użyć selektora body, np. body { background-image: ... }, bo to body odpowiada za tło całego dokumentu. Jeśli ktoś zakłada, że obrazek pojawi się tylko wtedy, gdy w HTML użyjemy <img src="rysunek.png">, to miesza dwie zupełnie osobne koncepcje: background-image ustawia grafikę w tle elementu, a <img> osadza ją w strukturze treści jako samodzielny obiekt — to dwie różne rzeczy. Sam background-image nie potrzebuje obecności znacznika <img>; przeglądarka pobierze i wyświetli grafikę tylko jako tło elementu. Natomiast odpowiedź sugerująca, że obrazek będzie widoczny obok każdego akapitu, wynika chyba z niezrozumienia mechanizmu renderowania tła: CSS nie wstawia obrazka "obok" treści, tylko pod nią, w tle elementu, wypełniając całą jego powierzchnię (lub jej fragment w zależności od innych właściwości tła, np. background-repeat czy background-position). To często mylone z dekoracjami typu list-style-image w listach, gdzie obrazek rzeczywiście pojawia się obok tekstu listy. Warto zawsze czytać dokumentację i testować takie rzeczy samodzielnie — praktyka bardzo pomaga zrozumieć niuanse w CSS. Przemyślenie działania selektorów i właściwości to podstawa unikania takich nieporozumień podczas projektowania layoutów.

Pytanie 16

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

A. display

B. position

C. text-transform

D. list-style-type

Odpowiedź 'position' to strzał w dziesiątkę! To właściwość w CSS, która mówi nam, jak elementy mają być ustawione na stronie. Masz różne opcje, jak 'static', 'relative', 'fixed', 'absolute' i 'sticky', które każda z nich ma swoje przeznaczenie. Na przykład 'static' to standard, który nic nie zmienia w układzie, a 'relative' umożliwia przesunięcie elementu w stosunku do jego pierwotnej pozycji. Z kolei 'absolute' pozwala umieścić element w odniesieniu do najbliższego przodka, który nie jest ustawiony na 'static', co świetnie się sprawdza, gdy chcesz, żeby coś się ładnie ułożyło na stronie. 'fixed' trzyma element w tym samym miejscu na ekranie, nawet jak przewijasz stronę – idealne dla nagłówków. 'Sticky' łączy w sobie cechy 'relative' i 'fixed', co daje lepszą kontrolę nad pozycjonowaniem przy przewijaniu. Używanie tych wartości jest naprawdę ważne, jeżeli projektujesz responsywne interfejsy, więc dobrze, że to wiesz!

Pytanie 17

Które znaczniki HTML wyświetlą tekst „Dobre strony mojej strony” w JEDNYM wierszu, jeśli nie zastosowano żadnych reguł CSS?

<h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

<p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

<span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span>

<div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

Pozostałe znaczniki są BLOKOWE, więc każdy zaczyna się od nowej linii i rozbiłby tekst na osobne wiersze. Dotyczy to <p> (akapit), <h3> (nagłówek) oraz <div> (kontener). W jednym wierszu tekst utrzyma liniowy <span>.

Pytanie 18

W języku HTML kolor biały można przedstawić przy użyciu wartości

A. #000000

B. rgb(255,255,255)

C. #255255

D. rgb(FFFF,FF)

Kolory w HTML można zapisać na kilka sposobów, ale nie każda opcja jest dobra. Zobaczmy błędne odpowiedzi. Pierwsza, #255255, jest zła, bo w systemie szesnastkowym (hex) kolory powinno się zapisywać w formacie #RRGGBB. Tutaj brakuje cyfr, więc to jest błędny zapis. Druga opcja, #000000, to kolor czarny. Wszędzie mamy 0, czyli brak światła w trzech kanałach RGB, co daje nam czarny, a nie biały. Ostatnia odpowiedź, rgb(FFFF,FF), też jest niepoprawna, ponieważ w rgb muszą być liczby całkowite od 0 do 255. Używanie szesnastkowych wartości tutaj to zły pomysł. Generalnie, zrozumienie jak poprawnie zapisywać kolory w HTML jest kluczowe, jeśli chcesz robić fajne i funkcjonalne projekty w sieci.

Pytanie 19

Efekt przedstawiony w filmie powinien być zdefiniowany w selektorze

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

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

C. td, th { 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 20

<source src="plik.mp4" type="video/mp4">

Aby osadzić plik wideo na stronie WWW, przedstawiony kod HTML5 należy umieścić wewnątrz znaczników:

A. <div> </div>

B. <video> </video>

C. <embed> </embed>

D. <section> </section>

Poprawna odpowiedź to umieszczenie znacznika `<source>` wewnątrz `<video>...</video>`. W HTML5 to właśnie element `<video>` jest kontenerem odpowiedzialnym za osadzanie plików wideo na stronie WWW. Atrybuty takie jak `controls`, `autoplay`, `loop`, `muted`, `width` czy `height` przypisujemy właśnie do `<video>`, a nie do `<source>`. Znacznik `<source>` służy głównie do wskazania konkretnego pliku multimedialnego i jego typu MIME, np.: `<video controls width="640" height="360"><source src="film.mp4" type="video/mp4"><source src="film.webm" type="video/webm">Twoja przeglądarka nie obsługuje elementu video.</video>`. Przeglądarka przechodzi po kolei po elementach `<source>` i wybiera pierwszy format, który potrafi odtworzyć. To jest zgodne ze specyfikacją HTML Living Standard (WHATWG) oraz zaleceniami W3C dotyczącymi multimediów w sieci. W praktyce, w projektach komercyjnych, często dodaje się kilka formatów (np. MP4, WebM), właśnie po to, by zapewnić maksymalną kompatybilność między różnymi przeglądarkami i systemami. Moim zdaniem warto od razu wyrabiać sobie nawyk pisania pełnej, semantycznie poprawnej struktury: `<video>` jako główny element odtwarzacza, w środku jeden lub więcej `<source>` i ewentualnie tekst alternatywny. Dzięki temu kod jest czytelny, łatwiej go stylować w CSS, a także lepiej zachowuje się w kontekście dostępności (np. czytniki ekranu widzą, że to element wideo). Dodatkowo, `<video>` można łatwo obsługiwać z poziomu JavaScript, korzystając z jego API (play, pause, currentTime, volume itd.), co w praktyce daje sporą kontrolę nad odtwarzaniem multimediów na stronie.

Pytanie 21

Która reguła dotycząca sekcji <head> w HTML jest poprawna?

A. w <head> definiuje się szablon strony znacznikami <div>

B. w <head> zawiera się sekcję <body>

C. w <head> mogą wystąpić <meta>, <title>, <link>

D. w <head> nie można umieszczać CSS, tylko odwołanie do pliku

Pozostałe reguły są nieprawdziwe. <body> to osobna sekcja z treścią strony - nie jest zagnieżdżona w <head>, lecz występuje obok niej. Układ strony znacznikami <div> buduje się w <body>, a nie w nagłówku. Kod CSS wolno też umieścić bezpośrednio w <head> wewnątrz <style>, nie tylko jako odwołanie do pliku. Prawdziwe jest zdanie o <meta>, <title> i <link>.

Pytanie 22

W języku HTML w celu określenia słów kluczowych dla danej strony, należy zastosować następujący zapis

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

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

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

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

Pierwsza z niepoprawnych odpowiedzi, <meta keywords="psy, koty, gryzonie">, jest błędna z powodu braku atrybutu 'name'. W standardzie HTML każdy element <meta> powinien zawierać atrybut 'name' lub 'property', który określa, jakiego rodzaju metadane są dostarczane. Pominięcie tego atrybutu sprawia, że przeglądarki mogą nieprawidłowo interpretować ten element, co negatywnie wpływa na SEO strony. Druga odpowiedź, <meta name="keywords" = "psy, koty, gryzonie">, zawiera błędną składnię. Równanie atrybutu w HTML powinno być zapisane z wykorzystaniem znaku ' ', a nie '='. Poprawny zapis powinien wyglądać: <meta name="keywords" content="psy, koty, gryzonie">. Błąd ten jest częstym źródłem problemów w kodzie HTML, prowadzącym do niezrozumienia przez przeglądarki, co może skutkować ignorowaniem tego elementu przez algorytmy wyszukiwarek. Ostatnia odpowiedź, <meta name="description" content="psy, koty, gryzonie">, jest niepoprawna, ponieważ nie dotyczy słów kluczowych, lecz opisu strony. Chociaż atrybut 'description' również jest istotny i wpływa na SEO, to jego zastosowanie w tym kontekście nie odpowiada na pytanie o definicję słów kluczowych. Poprawne użycie metadanych polega na precyzyjnym dobraniu atrybutów do ich funkcji, co jest kluczowe dla efektywnej optymalizacji strony.

Pytanie 23

Którego znacznika użyć, aby zgrupować elementy w jeden BLOK?

<p>

<div>

<param>

<span>

<p> to akapit tekstu, a nie ogólny pojemnik na elementy. <span> grupuje treść LINIOWO (w obrębie wiersza), a nie w blok. <param> przekazuje parametry do osadzonego obiektu. Grupowanie elementów w blok daje <div>.

Pytanie 24

W języku HTML, atrybut shape w znaczniku area, który definiuje typ obszaru, może mieć wartość

A. style="margin-bottom: 0cm;">rect, triangle, circle

B. rect, poły, circle

C. style="margin-bottom: 0cm;">poły, square, circle

D. rect, sąuare, circle

W przypadku odpowiedzi, które nie są poprawne, należy zwrócić uwagę na kilka kluczowych aspektów. Po pierwsze, wartości 'triangle' oraz 'square' nie są uznawane w atrybucie shape znacznika area w HTML. Zamiast tego, 'triangle' nie ma odpowiedniego wsparcia w standardach, a więc nie może być używane do definiowania obszarów na mapach obrazów. Również 'square', chociaż może przypominać prostokąt, nie ma odrębnej definicji i nie jest akceptowany w specyfikacji. Mapa obrazów ogranicza się do określonych kształtów, takich jak 'rect', 'circle' oraz 'poly', co czyni te odpowiedzi niepoprawnymi. Dodatkowo, wspomnienie o 'sąuare' wskazuje na literówkę, co również podważa poprawność tej opcji. Termin 'poły' nie tylko nie istnieje w kontekście atrybutu shape, ale także nie odnosi się do żadnego znanego kształtu w HTML. Zrozumienie właściwych terminów oraz ich zastosowania w HTML jest kluczowe dla tworzenia funkcjonalnych stron internetowych, a każda niepoprawna odpowiedź może prowadzić do mylących implementacji.

Pytanie 25

Jakie jest właściwe określenie stylu CSS dla przycisku typu submit z czarnym tłem, bez ramki oraz z marginesami wewnętrznymi równymi 5 px?

input[type=submit] {
    background-color: #000000;
    border: none;
    padding: 5px;
} A

input[type=submit] {
    background-color: #ffffff;
    border: none;
    padding: 5px;
} B

input=submit {
    background-color: #000000;
    border: none;
    margin: 5px;
} C

input=submit {
    background-color: #000000;
    border: 0px;
    margin: 5px;
} D

A. C

B. A

C. B

D. D

Niepoprawne odpowiedzi wynikają głównie z błędnego użycia właściwości CSS lub z nieprawidłowej struktury selektora. W odpowiedzi B mamy kolor tła #ffffff, a to nie spełnia wymogu czarnego tła. To może być spowodowane nieuwagą albo brakiem zrozumienia wymagań. Odpowiedzi C i D z kolei używają margin zamiast padding, co zdecydowanie jest błędem w kontekście tego pytania. Margin dotyczy zewnętrznych odstępów między elementami i nie ma wpływu na wewnętrzne wymiary przycisku, co może efektem być brzydki wygląd przycisku w interfejsie. Ponadto w odpowiedziach C i D widzimy niepoprawny format selektora input=submit; co jest syntaktycznie złe. Poprawna składnia to input[type=submit], bo to wskazuje na element formularza o typie submit. Nie zrozumienie różnicy miedzy padding a margin oraz selektorami CSS może prowadzić do zamieszania i problemów w stylizacji. Ważne jest, żeby każda właściwość CSS była używana z pełnym zrozumieniem, jak wpływa na elementy interfejsu, by osiągnąć zamierzony efekt wizualny i funkcjonalny. Dobrą praktyką jest też sprawdzenie styli w różnych przeglądarkach, żeby upewnić się, że wszystko działa jak należy w różnych środowiskach. Rozumienie i stosowanie CSS jest kluczowe, by tworzyć profesjonalne i funkcjonalne strony.

Pytanie 26

Która z komórek tabeli została sformatowana przedstawionym stylem CSS zakładając, że pozostałe własności przyjmują wartości domyślne?

td {
  border: 1px solid black;
  padding: 15px;
  height: 40px;
  vertical-align: bottom;
}

dane w tabeli		dane w tabeli		dane w tabeli		dane w tabeli
Komórka 1		Komórka 2		Komórka 3		Komórka 4

A. Komórka 3.

B. Komórka 2.

C. Komórka 1.

D. Komórka 4.

Niestety, ta odpowiedź jest nieprawidłowa. Wybór jakiejkolwiek innej komórki oprócz komórki 3. oznacza niezrozumienie, jak działają style CSS w kontekście formatowania komórek tabeli. Obramowanie, padding, wysokość i wyrównanie tekstu to atrybuty CSS, które wpływają na wygląd komórki tabeli. Często błędem jest mylenie paddingu (wewnętrznego marginesu) z marginesem (zewnętrznym marginesem) lub niezrozumienie, jak działa wyrównanie tekstu. Warto pamiętać, że w CSS 'vertical-align: bottom' oznacza wyrównanie tekstu do dolnej krawędzi komórki. Wybór innej komórki, która nie spełnia podanych kryteriów, sugeruje, że nie zrozumiałeś prawidłowo tych konceptów. Radzę powtórzyć materiał dotyczący stylizacji komórek tabeli w CSS i spróbować ponownie. Pamiętaj, że kluczem do zrozumienia CSS jest praktyka, więc nie bój się eksperymentować z różnymi stylami!

Pytanie 27

Funkcja drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver ma na celu

A. stylizację tekstu za pomocą dostępnych znaczników

B. przygotowanie szablonu witryny internetowej

C. określenie kaskadowych arkuszy stylów przypisanych do strony

D. prezentowanie interaktywnej struktury drzewa HTML dla treści statycznych i dynamicznych

Drzewo kontekstowe w edytorze WYSIWYG Adobe Dreamweaver jest narzędziem, które umożliwia wizualne przedstawienie struktury HTML dokumentu. Użytkownicy mogą za jego pomocą łatwo nawigować po elementach strony, zarówno tych statycznych, jak i dynamicznych. Tego typu rozwiązanie jest nieocenione w procesie projektowania strony internetowej, ponieważ pozwala programistom na szybkie zrozumienie hierarchii elementów, co jest kluczowe dla efektywnego zarządzania kodem. Na przykład, podczas tworzenia złożonych stron internetowych z wieloma sekcjami, drzewa kontekstowe ułatwiają identyfikację i modyfikację poszczególnych komponentów, co może przyspieszyć proces tworzenia oraz debugowania. Dodatkowo, przestrzeganie dobrych praktyk, takich jak stosowanie semantycznych znaczników HTML i odpowiedniego formatowania kodu, może poprawić dostępność i SEO strony, co jest szczególnie ważne w kontekście konkurencji w internecie.

Pytanie 28

Kolor Chartreuse przedstawiony w formie heksadecymalnej jako #7FFF00 odpowiada wartości RGB wynoszącej

A. rgb(127, 255, 0)

B. rgb(128, 255, 0)

C. rgb(64, 255, 0)

D. rgb(192, 255, 0)

Analizując pozostałe odpowiedzi, można zauważyć, że każda z nich nieprawidłowo interpretuje wartości heksadecymalne koloru Chartreuse, co prowadzi do błędnych konwersji na model RGB. Na przykład, odpowiedź z rgb(64, 255, 0) błędnie interpretuje wartość czerwonego odcienia jako 64, podczas gdy w rzeczywistości wartość ta wynosi 127. Błąd ten wynika z nieprawidłowego przeliczenia heksadecymalnej wartości 7F na system dziesiętny, co może być spowodowane błędnym założeniem, że każdy z dwóch symboli heksadecymalnych oznacza jedną z dwóch składowych RGB. Podobnie, odpowiedzi rgb(128, 255, 0) oraz rgb(192, 255, 0) również nie zgadzają się z rzeczywistą wartością, co jest wynikiem niewłaściwego zrozumienia zasady konwersji. Wartości te są zbyt wysokie, co może sugerować, że osoba udzielająca tych odpowiedzi nie miała pełnej wiedzy o systemie kolorów. W praktyce, niepoprawne obliczenia lub pomyłki w konwersji kolorów mogą prowadzić do niezgodności w projektach graficznych, co w efekcie wpływa na estetykę oraz spójność wizualną. Dlatego kluczowe jest zrozumienie, że system heksadecymalny jest oparty na szesnastkowej reprezentacji kolorów, gdzie każdy kolor składa się z trzech wartości: czerwonej, zielonej i niebieskiej, a ich prawidłowe przeliczenie jest podstawą profesjonalnego projektowania.

Pytanie 29

Jakiego elementu HTML brakuje, aby walidator HTML zgłosił ostrzeżenie lub błąd?

A. co najmniej jednego <h1>

B. <title>

C. <meta name="author" content="....">

D. <link>

Elementy <link>, <meta name="author" content="...."> oraz przynajmniej jedno <h1> mają swoje specyficzne zastosowania, ale ich brak nie powoduje błędów walidacyjnych w kontekście standardów HTML. Element <link> jest używany do odniesienia się do zewnętrznych zasobów, takich jak style CSS, lecz jego nieobecność nie wpłynie na walidację samego dokumentu HTML. Użytkownicy często mylą tę sytuację, zakładając, że każdy element w sekcji <head> jest obligatoryjny, co nie jest prawdą. Z kolei <meta name="author"> dostarcza informacje o autorze strony, ale nie jest to element wymagany do poprawnej walidacji. W kontekście SEO, jego brak może ograniczyć kontekstualizację strony, ale nie prowadzi do błędów walidacyjnych. Element <h1> jest ważny z punktu widzenia struktury treści, gdyż określa główny nagłówek strony, jednak nie jest bezwzględnie konieczny do walidacji HTML. Często można spotkać błędne przekonanie, że wszystkie te elementy muszą być obecne, co jest mylne. W rzeczywistości HTML pozwala na różne konfiguracje dokumentów, a istotne jest, aby przestrzegać podstawowych zasad dotyczących struktury i semantyki, co nie zawsze oznacza posiadanie każdego elementu w sekcji <head>.

Pytanie 30

Który z poniższych zapisów w HTML określa kodowanie znaków stosowane w dokumencie?

A. <encoding="UTF-8">

B. <charset="UTF-8">

C. <meta encoding="UTF-8">

D. <meta charset="UTF-8">

Odpowiedzi <charset="UTF-8">, <encoding="UTF-8"> oraz <meta encoding="UTF-8"> są niepoprawne i wskazują na pewne nieporozumienia w zakresie składni HTML oraz roli metadanych. Pierwszy zapis, <charset="UTF-8">, jest nieprawidłowy, ponieważ nie jest to poprawna konstrukcja HTML. Element <meta> jest niezbędny, aby deklarować kodowanie znaków, a sam atrybut 'charset' musi być jego częścią. Bez elementu <meta> nie będzie można skutecznie ustalić kodowania, co prowadzi do problemów z wyświetlaniem tekstu. Druga odpowiedź, <encoding="UTF-8">, również jest błędna, ponieważ nie istnieje taki atrybut w kontekście elementu <meta>. Elementy HTML muszą przestrzegać określonej składni, a atrybut 'encoding' nie jest uznawany za standard w HTML. Ostatnia odpowiedź, <meta encoding="UTF-8">, jest niepoprawna, ponieważ właściwy atrybut to 'charset', a nie 'encoding'. To typowe błędy, które mogą wynikać z nieznajomości standardów HTML i ich ewolucji. Użycie niewłaściwych atrybutów może prowadzić do frustracji programistycznej oraz problemów z efektywnością strony, dlatego tak istotne jest zrozumienie i przestrzeganie dobrych praktyk w zakresie kodowania stron internetowych.

Pytanie 31

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 32

Jaką szerokość przeznaczono dla treści strony według podanej definicji CSS?

body {
   border: 2px;
   height: 600px;
   width: 560px;
}

A. 560 px

B. 640 px

C. 600 px

D. 2 px

Twoja odpowiedź nie jest poprawna. W CSS, szerokość strony jest określana przez wartość 'width'. W tym przypadku, jest ustawiona na 560 pikseli, co oznacza, że cała zawartość strony będzie wyświetlana w obszarze o takiej szerokości. Szerokość strony ma ogromne znaczenie w projektowaniu stron internetowych. Jego wartość może wpływać na układ elementów na stronie, a także na ogólne doświadczenie użytkownika. To jest aspekt, który zawsze powinien być brany pod uwagę podczas projektowania strony. Wartości, które wybrano jako niepoprawne odpowiedzi nie były zgodne z wartością podaną w kodzie CSS. Ważne jest, aby zawsze sprawdzać zawartość kodu, zanim zdecydujesz się na odpowiedź. W przeciwnym razie, możesz łatwo popełnić błąd, interpretując kod niepoprawnie lub pomijając ważne detale.

Pytanie 33

W przedstawionym kodzie HTML zastosowany styl CSS jest stylem

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

A. dynamicznym

B. lokalnym

C. nagłówkowym

D. zewnętrznym

W kontekście analizy odpowiedzi, nagłówkowy styl CSS odnosi się do stylów aplikowanych do elementów nagłówkowych, takich jak <h1>, <h2>, itp. Nagłówki są często wykorzystywane do strukturalizacji treści na stronie, jednak w tym przypadku, ponieważ styl dotyczy konkretnego akapitu, a nie nagłówka, ta odpowiedź jest błędna. Dynamiczne style natomiast są związane z interaktywnymi efektami, które mogą być wprowadzane za pomocą JavaScript czy CSS3, takie jak animacje czy zmiany stylów w odpowiedzi na zdarzenia. W podanym przykładzie nie ma mowy o dynamice, ponieważ styl jest statyczny i przypisany na stałe do elementu. Zewnętrzne style są definiowane w oddzielnych plikach CSS, które są dołączane do dokumentu HTML. To podejście pozwala na większą elastyczność i łatwiejsze zarządzanie stylem w projektach z większą ilością stron. W przeciwieństwie do tego podejścia, lokalne style są przypisane bezpośrednio do elementu, co czyni je mniej odpowiednimi w kontekście organizacji stylów w większych projektach. W skrócie, każda z niepoprawnych odpowiedzi odnosi się do różnych aspektów stylizacji CSS, które nie mają zastosowania w analizowanym przykładzie, a zrozumienie tych różnic jest kluczowe dla efektywnego korzystania z CSS w praktyce.

Pytanie 34

W HTML, aby uzyskać rezultat jak w podanym przykładzie, należy użyć struktury `

Duży tekst zwykły tekst

A. <p><strike>Duży tekst zwykły tekst</p>

B. <p><big>Duży tekst</p> zwykły tekst

C. <p><big>Duży tekst</big> zwykły tekst</p>

D. <p><strike>Duży tekst</strike> zwykły tekst</p>

W każdej z błędnych odpowiedzi pojawiają się istotne nieporozumienia dotyczące użycia odpowiednich znaczników HTML. Odpowiedzi, które wykorzystują znacznik <strike>, mają na celu wyrażenie skreślenia tekstu, co jest zgoła nieodpowiednie w kontekście zwiększania jego rozmiaru. Użycie tego znacznika w przykładzie wskazuje na mylne zrozumienie jego funkcji oraz na niepoprawne podejście do formatowania treści, co prowadzi do nieczytelnych i mniej przyjaznych dla użytkowników interfejsów. Pomijając aspekt stylistyczny, takie podejście może również negatywnie wpłynąć na dostępność, ponieważ osoby korzystające z czytników ekranu mogą mieć trudności z interpretacją skreślonych fragmentów. Z kolei omijanie znacznika <big> lub jego niewłaściwe zagnieżdżenie w odpowiedziach, gdzie nie jest on poprawnie zamknięty, może prowadzić do błędów w renderowaniu tekstu, co z kolei wpływa na ogólną estetykę oraz funkcjonalność witryny. W branży web developmentu kluczowe jest, aby każdy element HTML był używany zgodnie z jego przeznaczeniem, co nie tylko poprawia doświadczenia użytkownika, ale również wspiera najlepsze praktyki programistyczne oraz standardy semantyczne. Z tego powodu błędne koncepcje związane z używaniem znaczników w HTML mogą prowadzić do poważnych problemów w kontekście zarówno wizualnym, jak i funkcjonalnym strony internetowej.

Pytanie 35

Która jednostka rozmiaru w CSS jest WZGLĘDNA (skaluje się względem rozmiaru odniesienia)?

px

cm

em

pt

Pozostałe jednostki są bezwzględne - mają stały rozmiar niezależny od kontekstu. px to piksel ekranowy o ustalonej wielkości, pt to punkt typograficzny (1/72 cala), a cm to fizyczny centymetr. Żadna z nich nie dopasowuje się do rozmiaru czcionki czy kontenera, więc utrudnia responsywność. Jednostką względną jest em (obok rem i procentów), dlatego to ona jest poprawna.

Pytanie 36

Ile maksymalnie znaczników <td> może być zastosowanych w tabeli, która ma trzy kolumny oraz trzy wiersze, nie zawierając przy tym złączeń komórek i wiersza nagłówkowego?

A. 12

B. 9

C. 3

D. 6

Wybór odpowiedzi, która wskazuje na inną liczbę znaczników <td> niż 9 może wynikać z nieporozumienia dotyczącego struktury tabeli. Na przykład odpowiedzi sugerujące 3, 6 lub 12 mogą wskazywać na błędną interpretację liczby komórek w tabeli. Odpowiedź 3 mogła wynikać z założenia, że chodzi o liczbę wierszy. W rzeczywistości każdy wiersz zawiera 3 komórki, co prowadzi do błędnego wniosku. Odpowiedź 6 mogła zostać wybrana przez kogoś, kto pomylił się i zinterpretował liczbę jako wierszy w tabeli, myśląc, że istnieje tylko jeden wiersz. Z kolei 12 sugeruje, że uczestnik mógł pomylić liczbę kolumn z liczbą komórek, co jest istotnym błędem koncepcyjnym. Przy tworzeniu tabel HTML ważne jest, aby pamiętać, że każdy wiersz w tabeli musi zawierać 3 komórki, co z kolei wpływa na całkowitą liczbę użytych znaczników <td>. Błędy te mogą prowadzić do nieefektywnego projektowania interfejsów, gdzie zrozumienie struktury danych w HTML jest kluczowe dla prawidłowego renderowania treści na stronach internetowych.

Pytanie 37

Wskaźnik HTML, który umożliwia oznaczenie tekstu jako błędnego lub nieodpowiedniego poprzez jego przekreślenie, to jaki?

A. <u> </u>

B. <s> </s>

C. <em> </em>

D. <b> </b>

W tym pytaniu łatwo pomylić różne znaczniki HTML, bo wiele z nich wpływa na wygląd tekstu, ale pełnią zupełnie inne role semantyczne. W standardzie HTML <b> odpowiada głównie za pogrubienie tekstu, bez nadawania mu specjalnego znaczenia. To po prostu wizualne wyróżnienie, coś jak podkręcenie czcionki w edytorze tekstu. Nie informuje jednak, że treść jest błędna, nieaktualna czy powinna być zignorowana. W nowoczesnym kodzie, jeśli chcemy podkreślić ważność treści, lepszym wyborem jest <strong>, a nie <b>. Podobnie <em> nie ma nic wspólnego z przekreśleniem – ten znacznik służy do emfazy, czyli zaakcentowania fragmentu zdania, zwykle renderowany jest kursywą. Semantycznie oznacza, że dany fragment ma inne brzmienie albo nacisk w wypowiedzi, co jest istotne np. dla czytników ekranu czy tłumaczeń. Z kolei <u> historycznie kojarzy się z podkreślaniem tekstu, ale w HTML5 jego znaczenie zostało doprecyzowane: używa się go raczej do oznaczania treści, które są w jakiś sposób wyróżnione konwencjonalnie (np. błąd ortograficzny, nazwa własna w tekście innym alfabetem), a nie do dekoracyjnego podkreślania wszystkiego jak leci. Typowym błędem jest myślenie kategoriami „jak to wygląda”, zamiast „co to oznacza”. Wiele osób wybiera <b> albo <u>, bo kojarzy im się to z edytorem Word i zmianą stylu, a w HTML powinniśmy bardziej zwracać uwagę na semantykę i zgodność ze specyfikacją. Do oznaczania tekstu jako błędnego lub nieaktualnego używa się <s> (lub w bardziej formalnych zmianach <del>), bo te znaczniki jednoznacznie wskazują, że dana treść nie jest już obowiązująca. Dzięki temu narzędzia do dostępności, wyszukiwarki i style CSS mogą poprawnie interpretować znaczenie tego fragmentu, a nie tylko jego wygląd.

Pytanie 38

W języku HTML zapis < spowoduje w przeglądarki wyświetlenie znaku

A. >

B. &

C. "

D. <

Znak < w HTML ma specjalne znaczenie, ponieważ jest używany do oznaczania początku znaczników, które są fundamentem struktury dokumentów HTML. Aby prawidłowo wyświetlić ten znak w przeglądarce, należy użyć encji HTML, która dla znaku mniejszości to <. Użycie encji pozwala na uniknięcie nieporozumień, ponieważ przeglądarka mogłaby zinterpretować znak < jako początek nowego znacznika. Przykładowo, aby wyświetlić tekst 'A < B' w HTML, kod powinien wyglądać następująco: A < B. Zgodnie z dokumentacją W3C, stosowanie encji jest kluczowe dla zachowania poprawności kodu. Dzięki temu użytkownicy mogą zobaczyć zamierzony tekst, zamiast nieprawidłowo interpretowanego oznaczenia. Warto również zauważyć, że istnieją inne encje, takie jak > dla znaku większości oraz & dla znaku ampersand, które również pełnią istotne funkcje w kontekście HTML. Poprawne użycie encji przyczynia się do lepszej dostępności i zobrazowania treści na stronach internetowych."

Pytanie 39

Gdzie w dokumencie HTML można umieścić kod JavaScript?

A. w <head> i <body>, w znaczniku <java>

B. tylko w <head>, w znaczniku <script>

C. tylko w <body>, w znaczniku <java>

D. w <head> i <body>, w znaczniku <script>

JavaScript osadza się w znaczniku <script>, a nie <java> (taki znacznik nie istnieje, a Java to inny język). Nie ogranicza się też tylko do <head> - skrypt może być również w <body>. Poprawnie: <head> i <body>, w <script>.

Pytanie 40

Której pseudoklasy/pseudoelementu użyć, aby wyróżnić kolorem wiersz tabeli, NAD którym jest kursor?

::first-line

:hover

::marker

:visited

Pseudoklasa :hover stylizuje element, NAD którym znajduje się kursor - np. tr:hover { background: #eee; } podświetli wiersz tabeli pod myszą. Dlatego do tego efektu służy :hover.

Rozpocznij nowy egzamin

Powrót do strony głównej