Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik programista
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 28 kwietnia 2026 13:40
Data zakończenia: 28 kwietnia 2026 13:58

Egzamin zdany!

Wynik: 32/40 punktów (80,0%)

Wymagane minimum: 20 punktów (50%)

Nowe

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

Przebieg egzaminu

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

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

A. <em> </em>

B. <s> </s>

C. <b> </b>

D. <u> </u>

Element <s> w HTML służy do oznaczania tekstu jako nieaktualnego, błędnego albo już nieobowiązującego poprzez jego przekreślenie. Przeglądarka domyślnie renderuje taki fragment z poziomą linią przez środek tekstu. W praktyce używa się go np. przy cenach promocyjnych: <p>Stara cena: <s>199 zł</s> Nowa cena: 149 zł</p> albo przy korektach treści, kiedy chcemy pokazać, że coś zostało zmienione, ale wciąż widoczne jest, co było wcześniej. Warto wiedzieć, że historycznie do podobnych celów używano też <strike>, ale ten znacznik jest przestarzały (deprecated) w standardzie HTML i nie powinien być już stosowany. Moim zdaniem lepiej od razu przyzwyczajać się do poprawnych, aktualnych tagów, bo to się później opłaca przy większych projektach. W nowszych specyfikacjach HTML5 zaleca się stosowanie <s> właśnie do treści nieaktualnych, ale nie takich, które zostały formalnie wycofane – do tego jest znacznik <del>, który dodatkowo semantycznie wskazuje usunięcie fragmentu, często używany w systemach kontroli wersji treści. Z mojego doświadczenia warto rozróżniać <s>, <del> i <ins>, bo w połączeniu z CSS i narzędziami do dostępności (np. czytnikami ekranu) daje to lepszą semantykę dokumentu. Dobrą praktyką jest też nie nadużywać przekreśleń tylko dla „efektu wizualnego” – jeśli chcesz coś tylko wyróżnić graficznie, lepiej użyć CSS, a znaczników semantycznych używać zgodnie z ich przeznaczeniem.

Pytanie 2

Jakie znaczniki HTML pozwolą na prezentację tekstu w jednym wierszu na stronie, zakładając, że nie zastosowano żadnych reguł CSS?

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

B. style="margin-bottom: 0cm;"><h3>Dobre strony </h3><h3 style="letter-spacing:3px">mojej strony</h3>

C. style="margin-bottom: 0cm;"><p>Dobre strony </p><p style="letter-spacing:3px">mojej strony</p>

D. style="margin-bottom: 0cm;"><div>Dobre strony </div><div style="letter-spacing:3px">mojej strony</div>

Znacznik <span> jest idealnym rozwiązaniem do wyświetlania tekstu w jednym wierszu, ponieważ jest to znacznik inline, co oznacza, że nie wprowadza nowych linii przed ani po swoim zawartości. W tym przypadku <span>Dobre strony </span><span style="letter-spacing:3px">mojej strony</span> pozwala na utrzymanie tekstu w jednej linii, niezależnie od zastosowanego stylu. Styl CSS, taki jak letter-spacing, może być wykorzystany do modyfikacji wyglądu tekstu, nie wpływając na jego układ w dokumentach HTML. Dodatkowo, stosowanie znacznika <span> jest zgodne z W3C, co zapewnia, że struktura dokumentu jest zrozumiała dla przeglądarek oraz urządzeń wspomagających. Przykłady zastosowania <span> obejmują wyróżnianie fragmentów tekstu, dodawanie stylizacji bez wprowadzania nowych bloków, co jest istotne w responsywnym designie. Dzięki temu, <span> staje się kluczowym elementem w budowaniu interaktywnych i estetycznych interfejsów użytkownika.

Pytanie 3

Które z formatowań nie jest wyrażone w języku CSS?

A. Fragment pliku strona.html:

<style>
body { background-color: yellow; }
</style>

B. Fragment pliku formatowanie.css:

body { background-color: yellow; }

C. Fragment pliku strona.html:

<body bgcolor="yellow">

D. Fragment pliku strona.html:

<body style="background-color: yellow;" >

A. A.

B. B.

C. D.

D. C.

Gratulacje, prawidłowo wybrałeś odpowiedź C. To pytanie dotyczyło zrozumienia, które formatowania nie są wyrażone w języku CSS. W CSS wykorzystuje się różnego rodzaju selektory, aby określić elementy strony, do których mają być stosowane określone style. Fragmenty A i B przedstawiają formatowanie w języku CSS. Fragment A demonstruje styl wewnątrz dokumentu HTML, co jest jednym z trzech sposobów dodawania styli CSS do dokumentu HTML. Natomiast fragment B pokazuje styl z zewnętrznego pliku CSS, co jest zgodne ze standardami i uważane za najlepszą praktykę, ponieważ pozwala na utrzymanie oddzielenia struktury i prezentacji. Fragment D również wykorzystuje CSS, ale jest to tzw. "inline CSS", który jest stosowany bezpośrednio do elementu HTML. Ostatecznie, jedynie fragment C nie używa CSS. Zamiast tego, wykorzystuje przestarzały atrybut HTML "bgcolor" do określenia koloru tła, co obecnie jest uważane za złą praktykę. Pamiętaj, że zrozumienie różnicy pomiędzy HTML a CSS jest kluczowe w budowaniu poprawnie działających i dobrze zaprojektowanych stron internetowych.

Pytanie 4

Przedstawiony styl generuje pojedyncze obramowanie, które posiada następujące właściwości:

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

A. krawędź lewa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź prawa w odcieniu zielonym, krawędź górna w kolorze żółtym

B. krawędź górna jest koloru czerwonego, krawędź prawa koloru niebieskiego, krawędź dolna koloru zielonego, krawędź lewa koloru żółtego

C. krawędź górna ma kolor czerwony, krawędź lewa w kolorze niebieskim, krawędź dolna w odcieniu zielonym, krawędź prawa w kolorze żółtym

D. krawędź prawa ma kolor czerwony, krawędź dolna w kolorze niebieskim, krawędź lewa w odcieniu zielonym, krawędź górna w kolorze żółtym

Prawidłowa odpowiedź wynika z użycia właściwości CSS border-color z czterema wartościami przypisanymi kolejno do górnej prawej dolnej i lewej krawędzi elementu. W tym przypadku border-color: red blue green yellow; przypisuje kolor czerwony do górnej krawędzi kolor niebieski do prawej zielony do dolnej i żółty do lewej. Jest to powszechna praktyka w stylizacji stron internetowych gdzie cztery wartości podane dla border-color definiują odpowiednio kolory górnej prawej dolnej i lewej krawędzi. Taki styl umożliwia projektantom tworzenie wizualnie interesujących i wyróżniających się elementów poprzez łatwe manipulowanie kolorami i szerokościami obramowań. Zastosowanie tego w praktyce może być wykorzystane do zaznaczenia ważnych sekcji strony lub wyróżnienia określonych elementów. Tego rodzaju technika stylizacji jest zgodna z dobrymi praktykami i standardami CSS co pozwala na uzyskanie estetycznego i funkcjonalnego interfejsu użytkownika. Wiedza o przypisaniu kolorów do poszczególnych krawędzi jest kluczowa w projektowaniu elastycznych i responsywnych układów stron.

Pytanie 5

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. Nie ma nagłówka szóstego poziomu

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

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

W języku XHTML, wszystkie znaczniki muszą być dobrze sformułowane, co oznacza, że każdy element pusty, taki jak znacznik linijki <br>, musi być zamknięty za pomocą końcowego ukośnika, zapisanego jako <br />. XHTML to język oparty na XML, gdzie składnia jest bardziej rygorystyczna w porównaniu do HTML. Dzięki temu poprawne zamykanie znaczników jest niezbędne dla poprawnej walidacji dokumentu. Przykładowo, jeśli w dokumencie XHTML chcemy wstawić nową linię, powinniśmy zapisać <br /> zamiast <br>. Inne puste elementy, takie jak <img> czy <input>, również muszą być zamykane w ten sposób. Zastosowanie tego standardu zapewnia zgodność z przeglądarkami i przyszłą kompatybilność z nowymi technologiami. W praktyce, poprawne stosowanie składni zapewnia, że dokument będzie poprawnie interpretowany zarówno przez przeglądarki, jak i przez narzędzia do przetwarzania danych XML. Zrozumienie i stosowanie się do tych zasad jest kluczowe dla każdego, kto pracuje z technologiami sieciowymi, ponieważ zapewnia to, że dokumenty będą poprawnie wyświetlane oraz łatwe do przetwarzania.

Pytanie 6

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

A. <title>

B. <link>

C. <meta>

D. <h2>

Znacznik <h2> jest używany do definiowania nagłówków drugiego poziomu w dokumencie HTML. Jest to element, który powinien być umieszczony w treści dokumentu, a nie w jego nagłówku. Wartości semantyczne nagłówków od <h1> do <h6> są istotne z punktu widzenia SEO oraz dostępności stron internetowych. Poprawne użycie nagłówków pomaga w organizacji treści oraz umożliwia lepszą nawigację zarówno dla użytkowników, jak i dla wyszukiwarek internetowych. Przykładowo, jeśli mamy artykuł na blogu, <h1> może być tytułem artykułu, <h2> może być użyte do oznaczenia sekcji, a <h3> do podsekcji. Użycie tych znaczników w odpowiednich miejscach nie tylko poprawia strukturę dokumentu, ale także przyczynia się do lepszego indeksowania treści przez roboty wyszukiwarek. Zgodnie z wytycznymi W3C, nagłówki powinny być stosowane hierarchicznie, co oznacza, że nie możemy stosować <h2> przed <h1>.

Pytanie 7

Który z wariantów znacznika jest poprawny pod względem użytych atrybutów?

A. <meta title = "Strona dla hobbystów">

B. <meta background = blue>

C. <meta name = "!DOCTYPE">

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

Odpowiedź <meta name = "description" content = "Masz jakieś hobby? To jest strona dla Ciebie! "> jest prawidłowa, ponieważ wykorzystuje atrybuty zgodne z wymaganiami standardu HTML. Znacznik <meta> jest używany do przekazywania metadanych o stronie internetowej, które są niezwykle istotne dla wyszukiwarek internetowych oraz dla użytkowników. Atrybut 'name' definiuje typ metadanych, a 'content' zawiera wartość przypisaną do tego typu. W przypadku tej odpowiedzi, 'name' jest ustawione na 'description', co oznacza, że zawiera opis strony, a 'content' dostarcza konkretną treść, która może być wykorzystana przez wyszukiwarki do generowania podsumowań w wynikach wyszukiwania. Przykładem zastosowania tego znacznika jest optymalizacja SEO, gdzie dobrze napisany opis może przyczynić się do zwiększenia kliknięć na stronie. Warto również zauważyć, że zgodnie z praktykami SEO, opis powinien być zwięzły, atrakcyjny i dokładnie odzwierciedlać zawartość strony, co może wpłynąć na jej pozycjonowanie w wynikach wyszukiwania.

Pytanie 8

Na ilustracji przedstawiono projekt struktury bloków strony internetowej. Przy założeniu, że bloki są realizowane przy użyciu znaczników sekcji, ich stylizacja w CSS, poza określonymi szerokościami dla bloków: 1, 2, 3, 4 (blok 5 nie ma przypisanej szerokości), powinna obejmować właściwość

A. clear: both dla wszystkich bloków

B. clear: both dla bloku 5 oraz float: left tylko dla bloków 1 i 2

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

D. float: left dla wszystkich bloków

Czwarta odpowiedź jest na miejscu, bo dzięki float: left dla bloków 1, 2, 3 i 4, te elementy będą się ładnie ustawiać w linii, zgodnie z ich szerokością. Potem, z clear: both dla bloku 5, unikniesz sytuacji, gdy nachodzi on na inne pływające bloki i pojawi się poniżej nich. Wiesz, float często stosuje się do robienia układów, gdzie elementy muszą być obok siebie. Ale float ma to do siebie, że nie wpływa na rodziców, co czasami sprawia, że wszystko może się zdezorganizować, jeśli nie użyjesz clear. To też jest ważne, bo clear mówi, które elementy nie powinny nachodzić na te pływające - dzięki temu wszystko jest uporządkowane. Dobrze jest to wykorzystać, na przykład, gdy chcesz zrobić kolumny na stronie. Generalnie, stosowanie float jest jak najbardziej w porządku, ale musi iść w parze z clear, żeby strona była czytelna i dobrze zorganizowana, zgodnie ze standardami HTML i CSS.

Pytanie 9

Aby obraz wstawiony na stronę internetową mógł dostosować się automatycznie do wymiarów ekranu, na którym jest wyświetlany, konieczne jest

A. ustawienie jego szerokości w wartościach procentowych

B. niezmienianie obu jego wymiarów za pomocą stylów CSS

C. ustawienie jednego z jego wymiarów w pikselach

D. ustawienie obu jego rozmiarów w pikselach

Ustawienie wymiarów obrazu w pikselach ogranicza jego elastyczność, co prowadzi do nieidealnego wyświetlania na różnych urządzeniach. Obrazy o stałych wymiarach mogą nie zmieścić się na ekranach o mniejszych rozmiarach, co skutkuje koniecznością przewijania w poziomie lub zniekształceniem obrazu, gdy przeglądarka jest zmniejszana. Ponadto, ustawienie jednego z wymiarów w pikselach również nie rozwiązuje problemu responsywności, ponieważ drugi wymiar nadal będzie stały, co może prowadzić do nieproporcjonalnego wyświetlania. Nie modyfikowanie obu wymiarów stylami CSS neguje możliwości dostosowania obrazów do zmieniających się rozmiarów ekranów, co jest istotnym aspektem nowoczesnego web designu. Praktyczna implementacja responsywnych zdjęć wymaga przemyślenia koncepcji elastyczności, co obejmuje użycie CSS, aby zapewnić optymalne wyświetlanie obrazów na wszystkich urządzeniach. Użytkownicy powinni być świadomi, że dobrą praktyką jest stosowanie technik takich jak media queries oraz CSS Flexbox, co pozwala na precyzyjne dostosowywanie layoutu do wymagań urządzenia. Podsumowując, podejście to nie tylko wpływa na estetykę strony, ale również na jej funkcjonalność i dostępność, co jest kluczowe w obecnych czasach, gdy użytkownicy korzystają z szerokiej gamy urządzeń.

Pytanie 10

Która z definicji CSS określa formatowanie nagłówka h1: tekst nadkreślony, z odstępami między wyrazami 10 px i czerwonym kolorem tekstu?

h1{
  text-decoration: overline;
  word-spacing: 10px;
  color: red;
}                       A.

h1{
  text-decoration: overline;
  letter-spacing: 10px;
  color: red;
}                       B.

h1{
  text-transform: none;
  line-height: 10px;
  color: rgb(255,0,0);
}                       C.

h1{
  text-decoration: underline;
  line-height: 10px;
  color: rgb(255,0,0);
}                       D.

A. D.

B. C.

C. A.

D. B.

Brawo, poprawnie wybrałeś odpowiedź A, która pokazuje prawidłową definicję CSS do formatowania nagłówka h1. 'text-decoration: overline;' jest poleceniem CSS służącym do nadkreślania tekstu. Jest to styl tekstu, który dodaje linie nad literami. 'word-spacing: 10px;' jest poleceniem CSS, które określa odstępy między wyrazami. Wartościem tego polecenia jest odległość, która jest używana do określenia przestrzeni między słowami i jest wyrażona w pikselach. 'color: red;' jest standardowym poleceniem CSS do kolorowania tekstu. Czerwony jest jednym z podstawowych kolorów, które można wykorzystać w CSS. W praktyce, te trzy polecenia CSS mogą być używane do personalizacji strony internetowej, poprawiając jej wygląd i czytelność. Dobrą praktyką jest eksperymentowanie z różnymi stylami CSS, aby znaleźć najlepszy sposób prezentacji zawartości.

Pytanie 11

W CSS zapis selektora p > i { color: red; } wskazuje, że kolor czerwony zostanie zastosowany do

A. wszystkiego tekstu w znaczniku <p> z wyjątkiem tekstu w znaczniku <i>

B. wszelkiego tekstu w znaczniku <p> lub wszelkiego tekstu w znaczniku <i>

C. tylko tego tekstu w znaczniku <p>, który ma przypisaną klasę o nazwie i

D. wyłącznie tekstu w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

Zapis selektora CSS p > i { color: red; } jest precyzyjny i wskazuje, że kolor czerwony zostanie zastosowany wyłącznie do elementów <i>, które znajdują się bezpośrednio w obrębie elementu <p>. Warto zrozumieć, że symbol '>' oznacza selektor dziecka, co oznacza, że styl dotyczy tylko tych <i>, które są bezpośrednimi potomkami <p>. Przykładowo, jeśli mamy strukturę HTML:<p>To jest <i>przykład</i> tekstu <i>z <i>zagnieżdżonym</i> elementem</i>.</p>, to tylko pierwszy znacznik <i> (czyli "przykład") będzie miał kolor czerwony, ponieważ drugi znacznik <i> jest zagnieżdżony i nie jest bezpośrednim dzieckiem <p>. W kontekście standardów CSS, stosowanie selektorów dziecka jest zalecane, gdyż pozwala na precyzyjniejsze określenie, do których elementów styl ma być zastosowany, co w praktyce ułatwia zarządzanie stylami na stronach z bardziej złożoną strukturą HTML.

Pytanie 12

W zaprezentowanym fragmencie dokumentu HTML ustalono stylowanie CSS dla selektora klasy "menu", aby kolor tła tego elementu był zielony. Które z poniższych określeń stylu CSS odpowiada temu stylowaniu?

<div class="menu"></div>

A. #menu { background-color: rgb(0,255,0); }

B. div.menu { background-color: green; }

C. menu { background-color: rgb(0,255,0); }

D. div:menu { color: green; }

Odpowiedź div.menu { background-color: green; } jest prawidłowa, ponieważ odnosi się do selektora klasy w języku CSS. W HTML, atrybut class jest używany do przypisywania elementom jednej lub wielu klas, które mogą być następnie stylizowane w CSS. Selektor klasy jest definiowany przez poprzedzenie nazwy klasy kropką, co pozwala na stylizację wszystkich elementów używających tej klasy. W przypadku selektora div.menu, stylizacja dotyczy wszystkich elementów div z klasą menu. Użycie właściwości background-color z wartością green ustawia zielone tło dla zdefiniowanego elementu. Taki sposób definiowania stylów jest zgodny z dobrymi praktykami, które zalecają użycie klas do stylizacji wielokrotnego użytku w celu zwiększenia elastyczności i czytelności kodu. Ponadto używanie nazw klas i odpowiednich selektorów pozwala na łatwe zarządzanie stylistyką większych projektów, co jest kluczowe w rozwoju współczesnych stron internetowych. Warto zauważyć, że stosowanie klas zamiast identyfikatorów jest bardziej elastyczne, ponieważ jedna klasa może być przypisana do wielu elementów, podczas gdy identyfikator musi być unikalny w całym dokumencie.

Pytanie 13

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

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

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

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

D. <p style="positon: 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 14

W kodzie HTML atrybut alt w tagu img służy do określenia

A. tekstu, który będzie prezentowany, gdy obraz nie może być załadowany

B. atrybutów obrazu, takich jak rozmiar, ramka, wyrównanie

C. ścieżki oraz nazwy pliku źródłowego

D. opisu, który pojawi się pod obrazem

Atrybut alt w znaczniku img w HTML to naprawdę ważny element, jeśli chodzi o dostępność stron www. Jego głównym zadaniem jest pomóc osobom z problemami ze wzrokiem zrozumieć, co widnieje na obrazku. Jeśli nie da się wyświetlić grafiki – na przykład przez zły internet czy błąd w ścieżce do pliku – tekst w atrybucie alt pokazuje się jako alternatywa. Na przykład <img src='example.jpg' alt='Zachód słońca nad morzem'>, co by ułatwiło osobom korzystającym z czytników ekranu zrozumienie treści. Warto też pamiętać, że ten atrybut ma znaczenie dla SEO, bo wyszukiwarki mogą go wykorzystać do lepszego zrozumienia zawartości strony, co wpływa na jej indeksowanie. Ogólnie rzecz biorąc, używanie odpowiednich atrybutów alt to dobra praktyka w budowaniu stron www.

Pytanie 15

Na stronie WWW umieszczono obrazek, a następnie akapit. Aby obrazek był wyświetlany przez przeglądarkę w tej samej linii co akapit, po lewej stronie tekstu akapitu, w stylu CSS dla obrazka należy ustawić formatowanie

A. style: left;

B. float: left;

C. alt: left;

D. align: left;

Odpowiedź "float: left;" jest poprawna, ponieważ właściwość CSS "float" służy do określenia, w jaki sposób elementy są rozmieszczane na stronie. Ustawienie "float: left;" dla rysunku sprawia, że zostaje on umieszczony po lewej stronie swojego kontenera, a pozostałe elementy, takie jak akapit, mogą układać się obok niego. Jest to powszechnie stosowana technika w układach stron internetowych, pozwalająca na osiągnięcie płynnych i responsywnych rozkładów treści. Na przykład, w przypadku gdy mamy obrazek i akapit, stosując float, obrazek zostanie wypchnięty w lewo, a tekst akapitu automatycznie dostosuje się, zajmując dostępną przestrzeń obok rysunku. Warto również dodać, że po zastosowaniu float, należy zadbać o usunięcie efektu 'zatrzymywania się' rysunków, co można osiągnąć poprzez stosowanie właściwości "clear" w odpowiednich miejscach, aby nie zakłócać układu sąsiednich elementów. Tego typu techniki są fundamentem projektowania stron, zgodnie z zasadami dobrych praktyk UX/UI oraz standardami W3C. W przypadku bardziej złożonych układów warto również rozważyć zastosowanie Flexbox lub Grid Layout, które oferują większą elastyczność i kontrolę nad położeniem elementów w nowoczesnych projektach.

Pytanie 16

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

A. XHTML1.0

B. HTML5

C. HTML4

D. XHTML 2.0

HTML5 wprowadził nowe znaczniki semantyczne, takie jak <header>, <footer> oraz <nav>, które mają na celu poprawę struktury i czytelności kodu HTML. Te znaczniki pozwalają na lepsze określenie ról poszczególnych części dokumentu, co jest istotne zarówno dla programistów, jak i dla wyszukiwarek internetowych oraz oprogramowania asystującego. Przykładowo, znacznik <header> zazwyczaj zawiera nagłówki i metadane, podczas gdy <footer> jest przeznaczony na informacje końcowe, takie jak prawa autorskie czy linki do polityki prywatności. Z kolei <nav> wskazuje sekcję nawigacyjną, co ułatwia użytkownikom poruszanie się po stronie. Użycie tych znaczników zgodnie z ich zamierzonymi funkcjami poprawia semantykę dokumentu HTML5, co jest zgodne z najlepszymi praktykami w zakresie SEO i dostępności. Warto również zauważyć, że HTML5 wprowadza inne elementy, takie jak <article> czy <section>, które dodatkowo wspierają tworzenie dobrze zorganizowanej i zrozumiałej struktury dokumentu. W związku z tym, stosowanie nowych znaczników w HTML5 jest niezwykle korzystne zarówno dla twórców, jak i dla użytkowników stron internetowych.

Pytanie 17

Przedstawiono kod tabeli 3×2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela wyglądała jak na obrazie z niewidocznym wierszem?

<table>
  <tr>
    <td style="border: solid 1px;">Komórka 1</td>
    <td style="border: solid 1px;">Komórka 2</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 3</td>
    <td style="border: solid 1px;">Komórka 4</td>
  </tr>
  <tr>
    <td style="border: solid 1px;">Komórka 5</td>
    <td style="border: solid 1px;">Komórka 6</td>
  </tr>
</table>

Komórka 1	Komórka 2
Komórka 3	Komórka 4
Komórka 5	Komórka 6

A. <tr style="display: none">

B. <tr style="visibility: hidden">

C. <tr style="clear: none">

D. <tr style="display: table-cell">

Właściwość CSS 'visibility: hidden' jest używana do ukrycia elementu, ale jednocześnie zachowuje ona jego miejsce w układzie strony. Jest to idealne dla sytuacji, kiedy chcemy ukryć konkretny element, ale nie chcemy wpływać na układ pozostałych elementów. W kontekście naszego pytania, jeśli chcielibyśmy ukryć drugi wiersz tabeli, ale nie chcemy, aby pozostałe wiersze zmieniały swoje położenie, 'visibility: hidden' jest idealnym rozwiązaniem. W przeciwnym razie, gdybyśmy użyli 'display: none', wiersz zostałby całkowicie usunięty z układu strony, a pozostałe wiersze przesunęłyby się do góry, aby zapełnić puste miejsce. W praktyce, właściwość 'visibility: hidden' jest często używana w połączeniu z JavaScript do tworzenia efektów 'hide/show', gdzie ukryte elementy mogą być później odkrywane bez wpływu na układ strony.

Pytanie 18

Jaką wartość w systemie RGB uzyskamy dla koloru zapisanego w kodzie heksadecymalnym: #1510FE?

A. rgb(21,16,FE)

B. rgb(21,16,254)

C. rgb(15,10,FE)

D. rgb(21,16,255)

Odpowiedź rgb(21,16,254) jest poprawna, ponieważ kolor zapisany w systemie heksadecymalnym #1510FE można rozłożyć na składowe RGB. W kodzie heksadecymalnym każdy z trzech kolorów (czerwony, zielony, niebieski) jest reprezentowany przez dwie cyfry. W przypadku #1510FE, pierwsze dwie cyfry (15) odnoszą się do wartości czerwonej, drugie dwie (10) do wartości zielonej, a ostatnie dwie (FE) do wartości niebieskiej. Te wartości musimy przeliczyć na system dziesiętny: czerwony to 21 (15 w systemie szesnastkowym to 21 w dziesiętnym), zielony to 16 (10 w szesnastkowym to 16 w dziesiętnym), a niebieski to 254 (FE w szesnastkowym to 254 w dziesiętnym). Tak więc końcowy wynik to rgb(21,16,254). W praktyce, znajomość konwersji kolorów jest kluczowa w projektowaniu graficznym, stron internetowych oraz aplikacji, gdzie precyzyjne odwzorowanie kolorów jest niezbędne dla uzyskania poprawnej estetyki i spójności wizualnej. Warto zaznaczyć, że standardy takie jak sRGB są powszechnie stosowane do definiowania kolorów w cyfrowych mediach, co zapewnia zgodność i przewidywalność w różnych urządzeniach wyświetlających te kolory.

Pytanie 19

Aby na stronie internetowej wyświetlić logo, którego tło jest przezroczyste, należy zastosować format

A. BMP

B. CDR

C. JPG

D. PNG

W tym zadaniu kluczowe jest zrozumienie, jakie właściwości mają różne formaty graficzne i do czego są projektowane. Wiele osób automatycznie wybiera JPG, bo „to przecież najpopularniejszy format obrazków w internecie”. I faktycznie, JPEG jest świetny do zdjęć, gdzie liczy się mocna kompresja i akceptowalna utrata jakości. Natomiast JPG nie obsługuje przezroczystości z prawdziwego zdarzenia – nie ma kanału alfa. Można co najwyżej kombinować z kolorem maskującym, ale w praktyce na stronach WWW kończy się to brzydkimi obwódkami i artefaktami na krawędziach logo. Dlatego stosowanie JPG do logo z przezroczystym tłem jest po prostu sprzeczne z dobrymi praktykami front-endu. Inny typowy trop to wybór formatu CDR, bo kojarzy się on z logotypami, poligrafią i projektowaniem. CDR to jednak natywny, wektorowy format programu CorelDRAW, przeznaczony do edycji, a nie do bezpośredniego wyświetlania w przeglądarce. Żadna standardowa przeglądarka nie wczyta pliku CDR jako obrazka w `<img>`. Pliki tego typu trzeba najpierw wyeksportować do formatu webowego, np. PNG, JPG albo SVG. Myślenie w stylu „logo jest z Corela, to dam CDR na stronę” wynika raczej z pomieszania formatu roboczego z formatem docelowym. Z kolei BMP to bardzo prosty, stary format map bitowych, który w praktyce w ogóle nie jest używany w profesjonalnym webdesignie. Co prawda można w nim zapisać informację o kolorach, ale nie oferuje on efektywnej kompresji, więc pliki są ogromne, a obsługa przezroczystości jest w praktyce problematyczna i nieprzystosowana do nowoczesnych wymagań stron WWW. Ładowanie ciężkiego BMP z logo na stronę tylko spowolni serwis i będzie sprzeczne z zasadami optymalizacji wydajności (performance, Core Web Vitals itd.). Dobra praktyka jest taka: dla logo z przezroczystym tłem wybieramy format, który zapewnia kanał alfa, bezstratną jakość i powszechną obsługę przez przeglądarki. W tym zestawie odpowiedzi spełnia to tylko PNG. Błędne odpowiedzi wynikają najczęściej z kierowania się popularnością formatu (JPG), skojarzeniem z narzędziem graficznym (CDR) albo z ignorowania wagi plików i standardów webowych (BMP). W projektowaniu stron warto zawsze myśleć o tym, jak przeglądarka faktycznie zinterpretuje dany format i czy spełni on wymagania: jakość, przezroczystość, rozmiar i kompatybilność.

Pytanie 20

Jak zdefiniować formatowanie tabeli w języku CSS, aby wyróżnić wiersz, na który aktualnie najeżdża kursor myszy, korzystając z innego koloru?

A. pseudoklasę :visited

B. pseudoklasę :hover

C. pseudoelement ::first-line

D. pseudoelement ::marker

Prawidłową odpowiedzią jest użycie pseudoklasy :hover, która jest standardowym rozwiązaniem w CSS do stylizacji elementów, gdy użytkownik na nie najedzie kursorem myszy. Pseudoklasa :hover pozwala na dynamiczną modyfikację wyglądu elementów, co jest szczególnie użyteczne w kontekście interaktywności stron internetowych. Na przykład, można zastosować tę pseudoklasę do wierszy tabeli, aby zmienić ich kolor tła na inny, co podnosi czytelność i estetykę interfejsu użytkownika. Implementacja może wyglądać następująco: table tr:hover { background-color: #f2f2f2; } - dzięki temu, gdy użytkownik najedzie myszką na wiersz tabeli, jego tło zmieni się na jasno szare, co zwraca uwagę na ten wiersz. Użycie :hover jest zgodne z dobrymi praktykami w projektowaniu UI, gdyż poprawia doświadczenia użytkownika oraz umożliwia intuicyjne korzystanie z interakcji na stronie. Pseudoklasa :hover wspiera również responsywność, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcje z elementami, co jest kluczowe w nowoczesnym projektowaniu stron.

Pytanie 21

Aby osiągnąć efekt przedstawiony na ilustracji, w kodzie HTML należy zastosować znacznik skrótu <abbr> z atrybutem

A. dfn

B. title

C. alt

D. name

Znacznik <abbr> w HTML pełni rolę semantyczną, pomagając w oznaczaniu skrótów i akronimów. Atrybut alt jest stosowany w znacznikach <img> do opisywania obrazów, co jest istotne dla dostępności i SEO, ale nie ma związku ze znacznikami tekstowymi jak <abbr>. Alt informuje o treści obrazu, co jest kluczowe dla użytkowników niewidzących, lecz nie pełni funkcji rozwijania skrótów tekstowych. Atrybut dfn służy do definiowania terminów w tekście, zazwyczaj używany w połączeniu ze znacznikiem <dfn>, a nie <abbr>. Chociaż dfn dostarcza definicji, nie jest używany do rozwijania skrótów. Atrybut name nie jest związany z rozwijaniem tekstu ani z <abbr>. Jest on stosowany głównie w formularzach HTML do identyfikacji elementów, takich jak <input>, umożliwiając ich rozróżnienie. Mylenie tych atrybutów wynika często z braku zrozumienia ich specyficznych zastosowań w kontekście HTML i dostępności. Właściwe używanie atrybutów to klucz do tworzenia semantycznie poprawnych i dostępnych stron internetowych.

Pytanie 22

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

B. aside {float: left; }

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

D. nav { float: right; }

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 23

tr:nth-child(even) {background-color: #F2F2F2;}

Zastosowane formatowanie selektora tr:nth-child(even) spowoduje:

A. wypełnienie szarym tłem nieparzystych wierszy tabeli.

B. oddzielenie wierszy nieparzystych od parzystych wierszem z szarym tłem.

C. wypełnienie szarym tłem parzystych wierszy tabeli.

D. wypełnienie wszystkich wierszy tabeli szarym tłem.

Selektor CSS tr:nth-child(even) oznacza dokładnie: wybierz wszystkie elementy <tr>, które są parzystymi dziećmi swojego rodzica, licząc od 1 w górę. W CSS funkcja nth-child() przyjmuje słowo kluczowe even dla elementów parzystych (2, 4, 6, …) i odd dla elementów nieparzystych (1, 3, 5, …). To jest zdefiniowane w specyfikacji CSS Selectors Level 3. W Twoim przykładzie even powoduje, że przeglądarka nadaje styl background-color: #F2F2F2; wszystkim parzystym wierszom tabeli, czyli 2., 4., 6. itd. wierszowi <tr>. Dzięki temu powstaje tzw. zebra-striping, czyli naprzemienne kolorowanie wierszy tabeli, bardzo często stosowane w interfejsach webowych, bo poprawia czytelność danych i ułatwia śledzenie wiersza wzrokiem. W praktyce używa się tego zwykle razem z drugim stylem, np. tr:nth-child(odd) { background-color: white; }, żeby wyraźnie rozróżnić wiersze. Warto też pamiętać, że nth-child() liczy wszystkie dzieci danego rodzica, a nie tylko te z określoną klasą, więc jeżeli w tabeli pojawią się np. wiersze nagłówkowe <tr> w <thead>, to selektor tr:nth-child(even) zastosowany globalnie może dać trochę inne efekty niż się spodziewasz. Dobrą praktyką jest zawężanie selektora, np. tbody tr:nth-child(even), żeby kolorowanie dotyczyło tylko części z danymi, bez nagłówków. Z mojego doświadczenia warto też używać kolorów o niewielkim kontraście, tak jak #F2F2F2, żeby nie męczyć wzroku użytkownika przy długich tabelach.

Pytanie 24

Walidacja strony internetowej polega na

A. udostępnianiu w Internecie

B. zestawie działań mających na celu podniesienie liczby odwiedzin

C. sprawdzeniu jej w celu usunięcia błędów

D. reklamie strony

Proces walidacji strony internetowej to kluczowy etap w cyklu życia witryny, który ma na celu identyfikację i eliminację błędów technicznych oraz zgodność z określonymi standardami. Walidacja obejmuje sprawdzenie struktury HTML, CSS oraz JavaScript, co pozwala na upewnienie się, że strona działa poprawnie na różnych przeglądarkach i urządzeniach. Techniki walidacji mogą obejmować użycie narzędzi online, takich jak W3C Validator, który ocenia zgodność kodu z aktualnymi standardami W3C. Przykładowo, błędy w składni HTML mogą prowadzić do niepoprawnego renderowania strony, co negatywnie wpływa na doświadczenia użytkowników. Dodatkowo, walidacja może obejmować testy funkcjonalności oraz bezpieczeństwa, co jest szczególnie istotne w kontekście przetwarzania danych osobowych. Niezależnie od celu witryny - czy to e-commerce, blog, czy portal informacyjny - regularna walidacja pozwala na ich optymalizację oraz zwiększenie efektywności SEO. Przestrzeganie standardów nie tylko poprawia jakość strony, ale także może wpływać na jej pozycjonowanie w wynikach wyszukiwania.

Pytanie 25

Styl ten generuje pojedyncze obramowanie, które charakteryzuje się następującymi właściwościami:

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

A. krawędź prawa jest koloru czerwonego, krawędź dolna ma kolor niebieski, krawędź lewa ma kolor zielony, krawędź górna ma kolor żółty

B. krawędź górna jest czerwonego koloru, krawędź lewa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź prawa ma kolor żółty

C. krawędź lewa ma kolor czerwony, krawędź dolna jest w kolorze niebieskim, krawędź prawa jest koloru zielonego, krawędź górna ma kolor żółty

D. krawędź górna ma kolor czerwony, krawędź prawa jest w kolorze niebieskim, krawędź dolna ma kolor zielony, krawędź lewa jest koloru żółtego

Błędne zrozumienie przypisania kolorów do krawędzi obramowania w CSS wynika z niewłaściwego interpretowania kolejności, w jakiej te kolory są przypisywane. W standardach CSS, kiedy używamy składni takiej jak border-color: red blue green yellow; kolory są przypisywane zaczynając od krawędzi górnej, a następnie zgodnie z kierunkiem wskazówek zegara. Stąd czerwona krawędź to górna, niebieska to prawa, zielona to dolna, a żółta to lewa. Błędne odpowiedzi wynikają z niepoprawnego przypisania kolorów do krawędzi w innej kolejności. Typowym błędem jest myślenie, że kolory są przypisane w porządku lewa-prawa-dół-góra, co jest sprzeczne z domyślną kolejnością CSS. Bez poprawnego zrozumienia tej logiki, projektanci mogą doświadczyć trudności w przewidywaniu jakich efektów wizualnych oczekiwać od swojej pracy, co może prowadzić do błędów w projektach. Aby uniknąć takich problemów, kluczowe jest zapoznanie się i zrozumienie zasad określających jak style CSS są interpretowane przez przeglądarki, co pozwala na pełne wykorzystanie możliwości jakie oferują style kaskadowe. Poprawne stosowanie tych zasad jest niezbędne do tworzenia profesjonalnych i spójnych projektów internetowych, które są zgodne z najlepszymi praktykami w branży.

Pytanie 26

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

A. skrótów.

B. wypunktowaną.

C. odnośników.

D. numerowaną.

Kod HTML zawierający znaczniki <ol> oraz <li> tworzy listę numerowaną ponieważ <ol> oznacza ordered list czyli listę uporządkowaną co skutkuje automatycznym numerowaniem każdego elementu w przeglądarkach internetowych. Znaczniki <li> reprezentują pojedyncze elementy listy zapewniając organizację danych w czytelnej formie. Taki sposób przedstawiania informacji jest powszechnie stosowany w tworzeniu dokumentów HTML i stron internetowych gdzie hierarchia i kolejność elementów ma kluczowe znaczenie. Za pomocą CSS można dodatkowo dostosować styl numerowania oraz wizualne aspekty listy co pozwala na większą elastyczność w projektowaniu interfejsu użytkownika. Standardy internetowe takie jak te rekomendowane przez W3C zachęcają do stosowania semantycznych znaczników co poprawia dostępność i SEO strony. Ponadto listy numerowane są użyteczne w sytuacjach gdy wymagana jest jasna kolejność wykonywania zadań lub prezentacja kroków w procesie co czyni je idealnym narzędziem zarówno w dokumentacji technicznej jak i w interaktywnych przewodnikach online.

Pytanie 27

Jakie będzie efektem zastosowanego formatowania CSS dla nagłówka trzeciego stopnia

A. tło nagłówka będzie pomarańczowe

B. tło nagłówka będzie w odcieniu szarości

C. kolor tekstu będzie szary

D. kolor tekstu będzie pomarańczowy

Odpowiedź, że tło będzie pomarańczowe, jest jak najbardziej trafna. W kodzie HTML użyto atrybutu "style" w tagu <h3>, który ma wyższy priorytet niż to, co jest zapisane w sekcji <style>. Wartość background-color to "orange", więc tło nagłówka trzeciego stopnia naprawdę będzie pomarańczowe. Znamy zasady kaskadowych arkuszy stylów, które mówią, że style bezpośrednio przypisane do elementów HTML mają pierwszeństwo. Kiedy chcemy, aby nagłówki miały różne kolory w zależności od tego, gdzie są użyte, inline styles są bardzo przydatne – zwłaszcza w prototypach. Ale z drugiej strony, z mojego doświadczenia, nadmiar inline styles może skomplikować późniejsze zarządzanie kodem, dlatego lepiej trzymać się klas CSS, żeby wszystko było bardziej uporządkowane.

Pytanie 28

Który znacznik lub zestaw znaczników nie jest używany do określenia struktury dokumentu HTML?

A. <header>, <footer>

B. <div>

C. <section>

D. <i>, <b>, <u>

Te znaczniki, czyli <i>, <b> i <u>, nie są jakby do tworzenia struktury dokumentu HTML, ale bardziej do formatowania tekstu. Zgodnie z nowymi standardami HTML5, są to elementy semantyczne, które wpływają na to, jak coś wygląda, a nie na to, jak jest zorganizowane. Znacznik <i> używamy, jak chcemy coś napisać kursywą, <b>, żeby coś podkreślić, a <u>, żeby coś podkreślić. Często korzysta się z nich w stylach CSS, ale nie nadają one hierarchii ani kontekstu dokumentu. Jak chcesz wyróżnić jakiś tekst w kontekście kodu czy tytułu rozdziału, lepiej skorzystać z bardziej semantycznych znaczników, jak <em> dla podkreślenia znaczenia albo <strong> dla podkreślenia wagi. W czasach, kiedy dostępność i SEO są coraz ważniejsze, używanie semantycznych elementów to klucz do tworzenia lepszych i bardziej przejrzystych stron.

Pytanie 29

Określ, w jaki sposób należy odnosić się do pliku default.css, jeżeli index.html znajduje się bezpośrednio w folderze Strona?

A. <link rel="stylesheet" type="text/css" href="...\style\default.css" />

B. <link rel="stylesheet" type="text/css" href="c:/style/default.css" />

C. <link rel="stylesheet" type="text/css" href="./style/default.css" />

D. <link rel="stylesheet" type="text/css" href="c:\style/default.css" />

Niepoprawne odpowiedzi wynikają z błędnego zrozumienia struktury ścieżek w HTML. Stosowanie absolutnych ścieżek takich jak c:/style/default.css jest niezalecane, ponieważ lokalizuje plik na konkretnym dysku twardym, co jest niepraktyczne w przypadku aplikacji webowych, które mogą być przenoszone na serwery o różnych strukturach katalogów. Użycie backslashów \ w ścieżkach takich jak ...\style\default.css jest błędne w kontekście URL, ponieważ slash / jest standardem w adresach URL, zgodnie z normami RFC. Backslashy używa się w systemach Windows do ścieżek lokalnych, ale w kontekście HTML powoduje to problemy z prawidłowym zaadresowaniem zasobów. Stosowanie ścieżek absolutnych lub błędnej składni w odwołaniach może prowadzić do sytuacji, w których pliki CSS nie są ładowane, co skutkuje nieprawidłowym wyświetlaniem strony. Dlatego istotne jest zrozumienie, że relatywne ścieżki zapewniają większą kompatybilność i elastyczność projektu webowego, co jest esencją dobrych praktyk w programowaniu frontendowym. Utrzymywanie spójnej i poprawnej struktury ścieżek jest kluczem do efektywnego zarządzania zasobami w aplikacjach internetowych.

Pytanie 30

Aby włączyć kaskadowy arkusz stylów zapisany w oddzielnym pliku, należy zastosować poniższy fragment kodu HTML

A. <link rel="stylesheet" type="text/css" href= "styl.css" />

B. <meta charset="styl.css" />

C. <option value="styl.css" type="text/css" />

D. <div id="styl.css" relation="css" />

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, poprawnie używamy tagu <link>. Ten tag pozwala na powiązanie zewnętrznego pliku CSS z dokumentem HTML, co jest kluczowe dla zarządzania stylem witryny internetowej. W atrybucie 'rel' określamy, że jest to arkusz stylów ('stylesheet'), a w atrybucie 'type' informujemy przeglądarkę, że plik jest typu 'text/css'. Atrybut 'href' wskazuje lokalizację pliku CSS. To podejście jest zgodne z zaleceniami W3C, co zapewnia kompatybilność z różnymi przeglądarkami. Przykładowe użycie wygląda następująco: <link rel='stylesheet' type='text/css' href='styl.css'>. Dzięki temu możemy oddzielić strukturę dokumentu HTML od jego stylizacji, co ułatwia zarządzanie kodem oraz poprawia efektywność ładowania stron. Praktyczne zastosowanie tego rozwiązania pozwala na łatwe wprowadzanie globalnych zmian w stylach, co jest szczególnie przydatne w dużych projektach, gdzie wiele stron korzysta z tego samego pliku CSS.

Pytanie 31

Jak za pomocą CSS ustawić opływanie obrazu tekstem, wprowadzając odpowiedni kod w stylu obrazu?

A. table: left;

B. clear: both;

C. float: right;

D. float: left;

Właściwość float: right; w CSS to naprawdę fajne narzędzie, bo pozwala na umieszczenie rzeczy, jak na przykład obrazek, z prawej strony kontenera. Dzięki temu tekst ładnie opływa go z lewej strony, co jest super w responsywnych projektach. Często to widzę na stronach, gdzie musimy dostosować układ do różnych ekranów. Użycie float: right; zgodne jest z dobrymi praktykami CSS i daje nam większą kontrolę nad tym, jak wygląda strona. Przykładowo, w artykułach, gdzie obrazki są często po jednej stronie tekstu, float naprawdę ułatwia życie. Tylko pamiętaj, żeby używać clearfix, bo elementy pływające mogą czasami zamieszać w układzie. Dobrze jest też wiedzieć, że float zmienia sposób, w jaki przeglądarka wyświetla elementy, więc znajomość jego wpływu na model pudełkowy CSS jest bardzo ważna. Dzięki float: right; możemy ładnie oprawić tekst wokół obrazków w blogach, co sprawia, że wygląda to estetycznie i jest bardziej czytelne.

Pytanie 32

Który z poniższych języków jest używany do stylizacji stron WWW?

A. Python

B. CSS

C. HTML

D. SQL

CSS, czyli Cascading Style Sheets, to język używany do opisywania wyglądu dokumentu HTML. Dzięki niemu możemy określić, jak mają wyglądać elementy na stronie, takie jak kolory, czcionki, odstępy między elementami, a także układ całej strony. CSS jest nieodłącznym elementem nowoczesnego tworzenia stron internetowych, ponieważ pozwala na oddzielenie treści od formy, co jest jedną z zasad dobrych praktyk w web development. Umożliwia tworzenie responsywnych projektów, które dobrze wyglądają na różnych urządzeniach, od komputerów po smartfony. Stylowanie za pomocą CSS pozwala na zdefiniowanie stylów globalnych, które mogą być zastosowane do wielu elementów na stronie, co znacznie ułatwia zarządzanie wyglądem witryny. Praktycznym zastosowaniem CSS jest na przykład zmiana koloru tekstu na stronie za pomocą prostej reguły, czy też tworzenie zaawansowanych animacji, które zwiększają interaktywność stron. CSS jest kluczowy w procesie tworzenia estetycznych i funkcjonalnych stron internetowych, co czyni go niezbędnym narzędziem dla każdego web developera.

Pytanie 33

W HTML, aby dodać obrazek z tekstem przylegającym, umiejscowionym na środku obrazka, trzeba użyć znacznika

A. <img src="/obrazek.png" alt="obraz4">tekst

B. <img src="/obrazek.png" alt="obraz2" align="middle">tekst

C. <img src="/obrazek.png" alt="obraz3" height="50%">tekst

D. <img src="/obrazek.png" alt="obraz1" hspace="30px">tekst

Wybór niepoprawnych odpowiedzi wskazuje na niepełne zrozumienie zastosowania znaczników HTML oraz atrybutów związanych z obrazkami i tekstem. Rozważając pierwszy przypadek, użycie atrybutu hspace nie ma wpływu na środkowe umiejscowienie tekstu w pionie. Hspace, który definiuje przestrzeń poziomą wokół obrazka, jest przestarzałym atrybutem, który nie wpływa na sposób wyświetlania tekstu obok obrazka. Kolejna opcja, w której użyto atrybutu align ustawionego na 'middle', jest poprawna w kontekście pozycjonowania obrazka, jednak nie jest częścią HTML5, co czyni ją nieodpowiednią w nowoczesnych projektach. W przypadku wskazania atrybutu height ustawionego na 50%, nie wpływa on na pozycjonowanie w kontekście tekstu. Atrybut height dostosowuje tylko wysokość obrazka, ale nie reguluje jego umiejscowienia względem tekstu. Warto zrozumieć, że dla osiągnięcia zamierzonego efektu przylegania tekstu do obrazka, lepiej jest korzystać z CSS, np. z właściwości 'display: inline-block' i 'vertical-align', które oferują bardziej elastyczne i nowoczesne podejście do stylizacji i pozycjonowania elementów na stronie.

Pytanie 34

W języku CSS zapis

h2 {background-color: green;}

spowoduje, że kolor zielony będzie dotyczył:

A. tła całej strony

B. czcionki każdego nagłówka na stronie

C. czcionki nagłówka drugiego stopnia

D. tła tekstu nagłówka drugiego stopnia

Odpowiedź, że kolor zielony będzie dotyczył tła tekstu nagłówka drugiego stopnia, jest poprawna. W kodzie CSS, zapis <b>h2 {background-color: green;}</b> oznacza, że wszystkie elementy <h2> na stronie będą miały tło w kolorze zielonym. W praktyce oznacza to, że każdy nagłówek drugiego stopnia będzie miał zielone tło, co może być użyteczne do wyróżnienia sekcji na stronie. Warto zauważyć, że stylowanie tła nagłówków może poprawić czytelność i estetykę dokumentu, zwłaszcza w sytuacjach, gdy chcemy podkreślić różne sekcje treści. Dobrą praktyką w CSS jest także używanie klas i identyfikatorów do bardziej precyzyjnego stylowania, co pozwala na unikanie konfliktów z innymi stylami na stronie. Dodatkowo, można eksperymentować z różnymi kolorami i przezroczystościami, aby uzyskać unikalne efekty wizualne, co jest szczególnie ważne w nowoczesnym projektowaniu stron internetowych.

Pytanie 35

Znacznik <s> w HTML generuje

A. pochylenie tekstu

B. przekreślenie tekstu

C. migotanie tekstu

D. podkreślenie tekstu

Znacznik <s> w HTML służy do oznaczania tekstu, który jest przekreślony. To daje znać, że dany fragment już nie jest aktualny albo jest błędny. Myślę, że to bardzo ważne, bo z perspektywy semantyki w HTML, pozwala lepiej zrozumieć, co się dzieje na stronie. Użytkownicy korzystający z czytników ekranu mogą łatwiej zrozumieć, że coś jest nieaktualne. Przykładem mogą być sklepy internetowe, gdzie przekreślenie starej ceny pokazuje, że produkt jest teraz w promocji. Dobrze jest pamiętać, że stosowanie tych znaczników dobrze wpływa na strukturę dokumentu, co jest zgodne z wytycznymi W3C i poprawia dostępność w sieci.

Pytanie 36

Kolor zaprezentowany na ilustracji, zapisany w modelu RGB, w formacie szesnastkowym będzie określony w następujący sposób

A. 77A1C1

B. 77A0C1

C. 71A0B2

D. 76A3C1

Błędne odpowiedzi wynikają z niepoprawnej konwersji wartości RGB na zapis szesnastkowy. Przy konwersji kolorów z modelu RGB na system szesnastkowy kluczowe jest poprawne przeliczenie każdej z trzech składowych: czerwonego zielonego i niebieskiego. Wartości te w modelu RGB wahają się od 0 do 255 co w systemie szesnastkowym odpowiada wartościom od 00 do FF. Niewłaściwe zrozumienie tego procesu prowadzi do błędnych wyników. W przykładzie wartość 119 dla czerwonego należy przeliczyć na 77 w systemie szesnastkowym. Podobnie 160 dla zielonego konwertuje się na A0 a 193 dla niebieskiego na C1. Powszechny błąd polega na pomyleniu wartości dziesiętnych z ich odpowiednikami szesnastkowymi bądź na niepoprawnym zaokrąglaniu podczas konwersji. Innym częstym błędem jest niepoprawne zrozumienie znaczenia kolejności zapisu gdzie każda para znaków odpowiada jednej składowej RGB. Aby uniknąć takich błędów warto korzystać z kalkulatorów konwersji lub narzędzi graficznych które automatycznie dokonują prawidłowej zamiany co jest zgodne z dobrymi praktykami projektowymi. Znajomość tych zasad jest kluczowa w pracy z grafiką komputerową i web designem gdzie precyzja w odwzorowaniu kolorów ma ogromne znaczenie dla ostatecznego wyglądu projektu.

Pytanie 37

Aby stworzyć stronę internetową, która będzie odpowiadać załączonej ilustracji, konieczne jest użycie semantycznych znaczników sekcji w języku HTML5. Jakim znacznikiem należy określić sekcję menu?

A. aside

B. nav

C. div

D. header

Znacznik <div> jest często używany do ogólnego grupowania elementów w HTML, ale nie niesie ze sobą semantycznego znaczenia, co oznacza, że nie informuje technologii wspomagających ani wyszukiwarek o roli, jaką pełni zawartość. W kontekście semantycznego HTML5, poleganie na znaczniku <div> nie wykorzystuje potencjału nowych standardów, które poprawiają dostępność i strukturę dokumentów. Znacznik <aside> jest zwykle używany do grupowania treści pobocznej, takiej jak reklamy czy linki powiązane, dlatego nie jest on odpowiedni do definiowania sekcji menu. <header> jest z kolei stosowany do elementów nagłówkowych, takich jak tytuły stron czy sekcje wstępne, co również nie pasuje do kontekstu sekcji nawigacyjnej. Właściwe wykorzystanie semantycznych znaczników pomaga nie tylko w lepszej organizacji kodu, ale także wspiera dostępność oraz optymalizację SEO, co jest kluczowe w nowoczesnym projektowaniu stron internetowych.

Pytanie 38

Strona internetowa została napisana w języku XHTML. Który z poniższych kodów przedstawia implementację zamieszczonego fragmentu strony, przy założeniu, że nie zdefiniowano żadnych stylów CSS?

A. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<i>prototyp hipertekstowego systemu informacyjnego - <b>ENQUIRE</b></i></p>

B. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<hr /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

C. <h1>Początki HTML</h1><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

D. <b>Początki HTML</b><p>W 1980 fizyk <b>Tim Berners-Lee</b>, pracownik <i>CERN</i>,<br /> stworzył<b>prototyp hipertekstowego systemu informacyjnego - <i>ENQUIRE</i></b></p>

Odpowiedź druga jest prawidłowa, ponieważ w XHTML stosowanie znaczników zgodnych z HTML jest kluczowe. Nagłówek <h1> wskazuje na najbardziej wyróżniający się element na stronie, co jest zgodne z prezentowanym obrazem, gdzie 'Początki HTML' jest nagłówkiem. XHTML wymaga, by wszystkie elementy były poprawnie zagnieżdżone i zamknięte, a tag <br /> jest poprawnie użyty jako samo zamykający się, co jest wymagane w XHTML. Ponadto, struktura dokumentu XHTML musi być bardziej restrykcyjna, co oznacza, że używanie semantycznych znaczników jak <h1> dla nagłówków sprzyja lepszej interpretacji struktury dokumentu przez przeglądarki i narzędzia dostępności. Poprawne użycie <b> i <i> do wyróżniania tekstu jest zgodne ze standardami, chociaż w nowoczesnym HTML5 zaleca się używanie <strong> i <em> dla semantycznego formatowania. Takie podejście wspomaga dostępność oraz ułatwia zrozumienie kodu przez inne osoby. Dobór tagów w tej odpowiedzi pokazuje zrozumienie zasad semantyki oraz poprawnej struktury dokumentów w XHTML co jest zgodne z dobrymi praktykami web developmentu.

Pytanie 39

Aby ustawić marginesy wewnętrzne dla elementu, gdzie margines górny wynosi 50px, dolny 40px, prawy 20px oraz lewy 30px, należy zastosować składnię CSS

A. padding: 40px, 30px, 50px, 20px;

B. padding: 20px, 40px, 30px, 50px;

C. style="margin-bottom: 0cm;"> padding: 50px, 40px, 20px, 30px;

D. style="margin-bottom: 0cm;"> padding: 50px, 20px, 40px, 30px;

Odpowiedź style="margin-bottom: 0cm;"> padding: 50px, 20px, 40px, 30px; jest poprawna, ponieważ definiuje marginesy wewnętrzne dla elementu zgodnie z zamierzonymi wartościami. W CSS, właściwość 'padding' pozwala na ustawienie wewnętrznego odstępu dla wszystkich czterech krawędzi elementu. Kolejność wartości w 'padding' to: górny, prawy, dolny, lewy. W tym przypadku, ustalamy 'padding' jako 50px dla górnej krawędzi, 20px dla prawej, 40px dla dolnej oraz 30px dla lewej. Należy pamiętać, że 'margin' i 'padding' mają różne zastosowania; 'margin' odnosi się do zewnętrznych odstępów między elementami, podczas gdy 'padding' dotyczy wewnętrznych odstępów wewnątrz danego elementu. W praktyce, odpowiednie użycie 'padding' poprawia czytelność i estetykę strony. Dobrą praktyką jest również stosowanie jednostek względnych, takich jak 'em' lub 'rem', zamiast jednostek stałych, jak 'px', aby zwiększyć responsywność strony. Dodatkowo, stosowanie narzędzi takich jak CSS Reset czy Normalize.css pomaga w eliminacji domyślnych marginesów i paddingów przeglądarek, co zapewnia spójność wyświetlania.

Pytanie 40

Który z poniższych kodów XHTML sformatuje tekst zgodnie z podanym przykładem?

Ala ma kota
a kot ma Alę

A. <p>Ala ma <b>kota</b> <br/> a <b>kot</b> ma Alę</p>

B. <p>Ala ma <b>kota</i><br/> a <b>kot</b> ma Alę</p>

C. <p>Ala ma <b>kota</b> <br/> a <i>kot</i> ma Alę</p>

D. <p>Ala ma <b>kota <br /> a <i>kot</i> ma Alę</p>

Odpowiedź <p>Ala ma <b>kota</b> <br/> a <i>kot</i> ma Alę</p> jest poprawna, ponieważ zgodnie z zasadami XHTML, użycie znaczników <b> i <i> do formatowania tekstu jest odpowiednie; <b> stosowany jest do wyróżniania tekstu pogrubionego, a <i> do kursywy. W tej odpowiedzi zastosowano również poprawny znacznik <br/>, który jest samodzielnym znacznikiem i nie wymaga zamknięcia w parze. Zgodnie z dobrymi praktykami, kod XHTML powinien być poprawnie sformatowany, a każdy otwierający znacznik powinien mieć odpowiadający mu zamykający znacznik, chyba że jest to znacznik samodzielny, jak <br/>. Warto zaznaczyć, że XHTML wymaga również, aby wszystkie atrybuty były zapisane w formacie małych liter, co zostało spełnione w tej odpowiedzi. Przykład zastosowania tej wiedzy można znaleźć w tworzeniu stron internetowych, gdzie poprawne sformatowanie kodu HTML lub XHTML jest kluczowe dla prawidłowego wyświetlania treści w przeglądarkach.

Rozpocznij nowy egzamin

Powrót do strony głównej