Wyniki egzaminu

Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 9 czerwca 2026 07:13
  • Data zakończenia: 9 czerwca 2026 07:43

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
Pochwal się swoim wynikiem!
Szczegółowe wyniki:
Pytanie 1

Który znacznik HTML służy do budowy STRUKTURY (układu) strony?

A.
<aside>
B.
<mark>
C.
<em>
D.
<input>
Element <aside> to semantyczny znacznik HTML5 budujący STRUKTURĘ strony - wydziela treść poboczną powiązaną z głównym tematem, np. notki na marginesie czy panel boczny. Razem z <header>, <nav>, <section> i <footer> porządkuje układ dokumentu. Dlatego znacznikiem strukturalnym jest <aside>.

Pytanie 2

Co spowoduje zapis

h2 { background-color: green; }
?
A. zielone tło całej strony
B. zielone tło nagłówków drugiego poziomu (<h2>)
C. zieloną czcionkę wszystkich nagłówków
D. zieloną czcionkę nagłówków drugiego poziomu
Reguła h2 { background-color: green; } ustawia zielone TŁO elementom <h2>, czyli nagłówkom drugiego poziomu. Selektor h2 ogranicza działanie tylko do tych nagłówków. Dlatego daje zielone tło nagłówków <h2>.

Pytanie 3

Która wartość atrybutu target otwiera stronę w NOWYM oknie lub karcie?

A.
_parent
B.
_top
C.
_blank
D.
_self
Wartość _blank atrybutu target otwiera odnośnik w NOWYM oknie lub karcie przeglądarki, np. <a href="..." target="_blank">. Stosuje się ją, by nie odrywać użytkownika od bieżącej strony. Dlatego nowe okno otwiera _blank.

Pytanie 4

Tworzenie struktury logicznej strony internetowej polega na

A. określeniu adresów URL dla podstron serwisu
B. umiejscowieniu elementów w wyznaczonych lokalizacjach witryny
C. określeniu zawartości witryny
D. stworzonym zestawie grafik dla strony
Projektowanie układu strony internetowej to naprawdę ważny krok, który warto dobrze przemyśleć. Chodzi o to, żeby elementy były umieszczone w sensownych miejscach, co z kolei pomaga użytkownikom lepiej się po niej poruszać. Trzeba pamiętać o zasadach UX i UI, bo dzięki nim można stworzyć coś, co będzie intuicyjne i przyjazne. Dobrze jest odpowiednio poukładać tekst, zdjęcia, linki i formularze, żeby wszystko działało sprawnie. Fajnie jest korzystać z siatki do rozmieszczania elementów, bo to pomaga utrzymać ład i równowagę wizualną. Na przykład zasada F-layout świetnie sprawdza się, bo układ przypomina literę „F” i to odpowiada temu, jak ludzie przeglądają treści. Z mojego doświadczenia, ważne jest też, żeby zrozumieć hierarchię wizualną – dzięki temu można lepiej wyróżnić istotne informacje i zaangażować użytkowników.

Pytanie 5

Jakie oprogramowanie do zarządzania treścią umożliwia proste tworzenie oraz aktualizację witryny internetowej?

A. CSS
B. SQL
C. CMS
D. PHP
Systemy zarządzania treścią, znane jako CMS (Content Management System), są narzędziami stworzonymi specjalnie do łatwego tworzenia, edycji oraz zarządzania treściami na stronach internetowych. Dzięki CMS użytkownicy, nawet ci bez zaawansowanej wiedzy technicznej, mogą z łatwością aktualizować swoje witryny, dodawać nowe artykuły, zdjęcia oraz inne multimedia. Przykładami popularnych systemów CMS są WordPress, Joomla, czy Drupal. Te platformy oferują szeroką gamę wtyczek oraz szablonów, co pozwala na dostosowanie wyglądu i funkcjonalności strony do indywidualnych potrzeb. Standardy branżowe, takie jak WCAG dla dostępności czy SEO dla optymalizacji pod kątem wyszukiwarek, są również wspierane przez wiele systemów CMS, co czyni je idealnym rozwiązaniem dla osób chcących prowadzić profesjonalne serwisy internetowe. Zastosowanie CMS-u znacząco przyspiesza proces tworzenia stron oraz umożliwia ich łatwe dostosowywanie do zmieniających się potrzeb rynku.

Pytanie 6

Który zestaw pojęć opisuje interfejs użytkownika strony internetowej?

A. przyciski, menu, interakcja użytkownika z aplikacją
B. szkic strony, diagram witryny, diagram przepływu informacji
C. obróbka danych, system zarządzania treścią, projektowanie informacji
D. wysyłanie zapytań do bazy, skrypty PHP
Interfejs użytkownika (UI - User Interface) to wszystko, przez co użytkownik komunikuje się ze stroną lub aplikacją: przyciski, menu, formularze, ikony, pola tekstowe oraz reakcje na jego działania (interakcja). Jego zadaniem jest sprawić, by obsługa była czytelna i wygodna. To warstwa widoczna w przeglądarce (front-end), w odróżnieniu od logiki serwerowej i baz danych. Dlatego interfejs użytkownika opisują przyciski, menu i interakcja z aplikacją.

Pytanie 7

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

A. nav { float: right; }
B. nav { float: left; } aside { float: left; }
C. nav { float: right; } section { float: right; }
D. aside {float: left; }
W tym zadaniu kluczowe jest zrozumienie, jak naprawdę działa float, a nie tylko samo skojarzenie, że „left to lewo, right to prawo”. Wiele osób myśli, że wystarczy ustawić jeden element na lewo, drugi na prawo i wszystko magicznie się poukłada. W praktyce przeglądarka trzyma się bardzo konkretnych reguł: najpierw liczy kolejność elementów w HTML, potem dopiero stosuje float i układa je możliwie jak najwyżej i jak najbliżej odpowiedniej krawędzi.

Jeśli nada się float tylko dla aside albo tylko dla nav, to zmienia się ich pozycja, ale układ trzech bloków nie spełni warunku z zadania: aside i nav nie zamienią się miejscami z pozostawieniem section w środku. Przykładowo, samo float: left na aside niczego nie „zamieni”, bo element i tak pojawia się jako pierwszy w kodzie, więc będzie u góry, tylko że „przyklejony” do lewej. Z kolei ustawienie nav na prawą stronę bez odpowiedniego floatowania section prowadzi do sytuacji, gdzie section nadal zachowuje się jak normalny blok, zwykle ląduje pod elementami pływającymi albo obok nich w sposób mało przewidywalny dla początkującego.

Częsty błąd myślowy polega też na tym, że ktoś próbuje wszystkim elementom dać float: left, licząc na to, że przeglądarka „ułoży je po swojemu”. Wtedy jednak wszystkie te bloki ustawiają się w jednym kierunku, w kolejności z HTML, więc nie ma mowy o świadomym „zamienianiu miejsc”. Brak zrozumienia, że float wyjmuje element z normalnego przepływu i wpływa na to, jak kolejne elementy zawijają się wokół niego, prowadzi właśnie do takich błędnych odpowiedzi. Z mojego doświadczenia lepiej jest najpierw narysować sobie prosty schemat: w jakiej kolejności idą znaczniki i które z nich mają pływać w prawo, a które zostać w naturalnym układzie. Dopiero wtedy dobiera się konkretne deklaracje CSS. Takie myślenie przydaje się nie tylko przy float, ale też przy nauce flexboxa czy grida, gdzie kolejność w DOM i własności układu też grają ogromną rolę.

Pytanie 8

W CSS zapisany w ten sposób:

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

spowoduje, że rysunek.png stanie się

A. tłem całej witryny
B. widoczny obok każdego akapitu
C. tłem każdego akapitu
D. wyświetlony, jeśli w kodzie użyty zostanie znacznik img
Zapis CSS p { background-image: url("rysunek.png"); } oznacza, że dla każdego elementu akapitowego <p> w dokumencie zostanie ustawione tło w postaci grafiki o nazwie rysunek.png. Ta reguła selektora p dotyczy wyłącznie znaczników akapitu, więc nie wpłynie na inne elementy strony, takie jak body czy img. Tak się to stosuje w praktyce: projektując na przykład bloga, możesz dodać delikatny deseń lub obrazek w tle akapitu, żeby całość wyglądała ciekawiej albo podkreślała styl witryny. Co ciekawe, background-image w CSS pozwala na olbrzymią elastyczność — możesz wykorzystać obrazy, gradienty czy nawet SVG jako tło. Standardy CSS jasno to definiują: background-image działa zawsze na tym elemencie, dla którego zadeklarowano regułę w selektorze. Warto pamiętać, że tło nie przesłoni tekstu w akapicie, tylko się pod nim wyświetli, więc czytelność jest zachowana. Z własnego doświadczenia uważam, że umiejętność stosowania background-image do konkretnych elementów to jedno z podstawowych narzędzi webdevelopera — pozwala przygotować naprawdę estetyczne i przejrzyste layouty. Dobrym nawykiem jest także testowanie widoczności tła na różnych urządzeniach, bo rozdzielczości i skalowanie potrafią zaskoczyć. Dla porządku, jeśli podasz background-image bez żadnych dodatkowych parametrów (jak powtarzanie czy pozycjonowanie), obrazek domyślnie będzie się powtarzał w poziomie i pionie, aż pokryje cały akapit.

Pytanie 9

W kodzie HTML stworzono formularz, który wysyła informacje do pliku formularz.php. Po naciśnięciu przycisku typu submit, przeglądarka zostaje przekierowana na wskazany adres. Na podstawie podanego adresu /formularz.php?imie=Anna&nazwisko=Kowalska można stwierdzić, że dane do pliku formularz.php zostały wysłane za pomocą metody:

A. GET
B. COOKIE
C. POST
D. SESSION
Poprawna odpowiedź wskazuje na metodę GET. Jako jedna z dwóch podstawowych metod przesyłania danych w protokole HTTP, GET przesyła informacje poprzez dołączenie ich do adresu URL. I tak, jeżeli na załączonym obrazku widzimy adres URL zawierający parametry (np. imię=Anna&nazwisko=Kowalska) dołączone do adresu pliku formularz.php, to oznacza, że dane zostały przesłane właśnie tą metodą. Jest to zgodne z dobrymi praktykami i standardami branżowymi, które zalecają użycie metody GET zwłaszcza przy przesyłaniu niewielkich ilości danych, które nie wymagają specjalnego zabezpieczenia. Ważne jednak jest zrozumienie, że metoda GET nie jest odpowiednia, gdy przesyłane dane są poufne, np. hasła, ponieważ są one widoczne w pasku adresu przeglądarki. Ponadto, warto zauważyć, że dane przesyłane metodą GET mogą być zapisane w historii przeglądarki, co również ma swoje implikacje bezpieczeństwa.

Pytanie 10

Wybierz prawidłowy sposób umieszczania komentarzy w kodzie źródłowym HTML

A. /* informacje komentarza */
B. <!-- informacje komentarza -->
C. -- informacje komentarza --
D. "" informacje komentarza ""
Poprawny komentarz w HTML musi być zapisany dokładnie w formie: <!-- treść komentarza -->. To jest jedyny format zgodny ze specyfikacją HTML (HTML5, ale też starsze wersje). Przeglądarka traktuje wszystko, co znajduje się między ciągiem znaków <!-- a -->, jako komentarz, czyli tego nie wyświetla użytkownikowi i nie interpretuje jako kod. Dzięki temu można w kodzie zostawiać sobie uwagi, opisy sekcji, tymczasowo coś „wyłączyć” albo oznaczyć fragment do późniejszej edycji. W praktyce stosuje się np.: <!-- Nawigacja główna strony --> albo <!-- TODO: dodać link do panelu logowania -->. Moim zdaniem komentarze są szczególnie ważne w większych projektach, bo po miesiącu naprawdę trudno pamiętać, po co była jakaś dziwna konstrukcja w HTML. Warto też wiedzieć, że w HTML nie stosujemy ani //, ani /* */ jak w JavaScript czy CSS. To są inne języki, inne reguły. Jeżeli wstawisz coś w stylu <!-- <p>Tekst</p> -->, to cały ten akapit jest ignorowany przez przeglądarkę, co jest wygodne przy testowaniu. Dobra praktyka jest też taka, żeby nie przesadzać z ilością komentarzy, ale tam gdzie struktura jest mniej oczywista (np. zagnieżdżone divy, rozbudowane formularze), lepiej dodać krótki, konkretny opis. W projektach komercyjnych często używa się komentarzy do oznaczania sekcji layoutu, np. <!-- HEADER START -->, <!-- FOOTER END -->, co ułatwia pracę całemu zespołowi. W skrócie: tylko zapis z nawiasami ostrymi i myślnikami, czyli <!-- ... -->, jest w HTML prawidłowy i rozpoznawany jako komentarz.

Pytanie 11

Obraz przedstawia formatowanie CSS paragrafu. Aby otrzymać czerwony kolor poza obramowaniem, tak jak przedstawiono na obrazie, należy zdefiniować własność

Oto przykład paragrafu który poza ramką ma kolor grubości 10 px

A. padding
B. outline
C. background
D. border
Niestety, to nie jest poprawna odpowiedź. Możliwe, że pomyliłeś niektóre właściwości CSS. 'Padding' zwiększa wewnętrzny odstęp w elemencie, ale nie zmienia koloru obramowania. Z kolei 'background' odpowiada za tło elementu. Pamiętaj, że 'border' tworzy obramowanie i to wpływa na rozmiar elementu. Natomiast 'outline' to kontur, który tylko otacza element bez wpływania na jego układ. Warto przemyśleć tę różnicę, bo to kluczowe, żeby dobrze ogarniać CSS. Pracuj nad tym i spróbuj jeszcze raz.

Pytanie 12

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. 6
B. 9
C. 12
D. 3
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 13

Podczas tworzenia witryny internetowej zastosowano kod definiujący jej wygląd. Jaką szerokość przeznaczono na zawartość strony?

Ilustracja do pytania
A. 2 px
B. 640 px
C. 560 px
D. 600 px
Definiowanie szerokości elementu w CSS jest kluczowym aspektem projektowania responsywnych stron internetowych. W przedstawionym kodzie CSS zauważamy definicję width 560px która określa szerokość elementu body. Ta wartość bezpośrednio przekłada się na dostępną przestrzeń dla treści wewnętrznej tego elementu. W praktyce definiowanie szerokości w pikselach pozwala na precyzyjne kontrolowanie układu strony co jest szczególnie istotne w kontekście projektowania interfejsów użytkownika. Takie podejście jest jednak najczęściej stosowane w środowiskach gdzie mamy pełną kontrolę nad urządzeniami wyświetlającymi stronę. W kontekście nowoczesnych praktyk często stosuje się jednostki względne lub techniki takie jak media queries aby zapewnić lepszą responsywność i elastyczność. Ważne jest także rozważanie dodatkowych aspektów takich jak marginesy i wypełnienia które mogą wpływać na rzeczywistą ilość dostępnej przestrzeni na treść. Właściwe zrozumienie i zastosowanie szerokości jest kluczowe dla tworzenia estetycznych i funkcjonalnych układów strony internetowej.

Pytanie 14

Tekst można pogrubić za pomocą znacznika <b>, a także stosując odpowiednie właściwości CSS.

A. font-size
B. font-weight
C. text-weight
D. text-size
Odpowiedź 'font-weight' jest poprawna, ponieważ jest to właściwość CSS, która kontroluje grubość tekstu w elementach HTML. Używając 'font-weight', możesz określić grubość czcionki w sposób zarówno liczbowy (np. 400 dla normalnej grubości, 700 dla pogrubionej) jak i słowny (np. 'normal', 'bold'). Przykładem zastosowania może być stylizacja nagłówków na stronie internetowej, gdzie chcesz wyróżnić ważne informacje. W praktyce, stylizując nagłówki h1, h2, h3, można użyć 'font-weight: bold;' aby przyciągnąć uwagę czytelników. Zgodnie z najlepszymi praktykami, ważne jest, aby nie przesadzać z używaniem pogrubienia, ponieważ może to prowadzić do problemów z czytelnością tekstu. Warto również pamiętać, że dostępność stron internetowych jest kluczowa, dlatego należy testować różne style na różnych urządzeniach i w różnych przeglądarkach, aby upewnić się, że tekst jest czytelny dla wszystkich użytkowników.

Pytanie 15

Które z pól edycyjnych zostało wystylizowane według poniższego wzoru, zakładając, że pozostałe atrybuty pola mają wartości domyślne, a użytkownik wpisał imię Krzysztof w przeglądarce?

input {
    padding: 10px;
    background-color: Teal;
    color: white;
    border: none;
    border-radius: 7px;
}
Ilustracja do pytania
A. Pole 2
B. Pole 3
C. Pole 4
D. Pole 1
Pole 1 mimo że prezentuje tekst w większym prostokątnym formacie nie ma charakterystycznego zaokrąglenia krawędzi które jest kluczowe dla podanego stylu CSS Zaokrąglenie krawędzi border-radius 7px to istotna część stylu która wpływa na wizualne odczucie przyjazności i nowoczesności interfejsu użytkownika dodatkowo kolor tekstu w Polu 1 wydaje się niezgodny z podanym stylem ponieważ biel tekstu jest priorytetyzowana dla kontrastu na ciemnym tle Pole 3 z kolei choć posiada pewien stopień zaokrąglenia nie spełnia wymagań pełnego zaokrąglenia 7px a także jego kolorystyka może różnić się od poprawnie zastosowanego tła Teal i białego tekstu co może prowadzić do problemów z czytelnością Pole 4 mimo że może wydawać się odpowiednie pod względem kształtu ma bardziej wyraziste obramowanie które jest sprzeczne z właściwością border none celem którego jest usunięcie widocznych linii obramowania Kluczowym elementem przy stylizacji jest spójna implementacja wszystkich właściwości CSS co oznacza że brak jednego z nich jak zaokrąglenie czy kolor tekstu może znacząco wpłynąć na końcowy odbiór i funkcjonalność elementu wizualnego Właściwe zrozumienie i stosowanie stylów CSS jest podstawą tworzenia atrakcyjnych i funkcjonalnych interfejsów które są jednocześnie estetyczne i ergonomiczne w użytkowaniu

Pytanie 16

Wskaż kod CSS odpowiadający układowi bloków 2 - 5, zakładając, że są one zbudowane w oparciu o przedstawiony kod HTML.

BLOK 1
BLOK 2BLOK 3BLOK 4
BLOK 5
<div id="pierwszy">BLOK 1</div>
<div id="drugi">BLOK 2</div>
<div id="trzeci">BLOK 3</div>
<div id="czwarty">BLOK 4</div>
<div id="piaty">BLOK 5</div>

Kod 1.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  clear: both;
  width: 30%;
}
Kod 2.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  float: right;
  width: 30%;
}
#piaty {
  float: left;
  width: 30%;
}
Kod 3.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  float: left;
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}
Kod 4.
#drugi {
  float: left;
  width: 40%;
}
#trzeci {
  width: 30%;
}
#czwarty {
  width: 30%;
}
#piaty {
  float: right;
  width: 30%;
}
A. Kod 3.
B. Kod 1.
C. Kod 2.
D. Kod 4.
Brawo, twoja odpowiedź jest poprawna. Wybrałeś Kod 2, co jest zgodne z układem bloków na diagramie. Przy analizie kodu CSS, musimy zwrócić uwagę na różne aspekty, takie jak pozycja, szerokość i kolejność bloków. W tym przypadku, blok o id 'drugi' jest umieszczony po lewej stronie i zajmuje 40% szerokości, co jest zgodne z diagramem. Bloki 'trzeci' i 'czwarty' są odpowiednio po lewej i prawej stronie z szerokością 30%, a blok 'piąty' jest umieszczony na dole i zajmuje 30% szerokości. To wszystko odpowiada układowi bloków na diagramie. Kiedy tworzysz strony internetowe, ważne jest, aby zrozumieć i umieć manipulować kodem CSS, aby uzyskać pożądany układ strony. Pamiętaj, że praktyka i doświadczenie są kluczowe do zrozumienia jak kod CSS wpływa na układ i stylizację elementów strony.

Pytanie 17

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

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

Pytanie 18

Której właściwości CSS należy użyć, aby ustawić marginesy wewnętrzne elementu?

A.
hight
B.
width
C.
margin
D.
padding
Marginesy WEWNĘTRZNE - odstęp między treścią elementu a jego obramowaniem - ustawia w CSS padding, np. padding: 10px; daje 10 px wolnego miejsca dookoła treści wewnątrz ramki. To część modelu pudełkowego (box model). Zapamiętaj różnicę: padding jest WEWNĄTRZ ramki, a margin na ZEWNĄTRZ.

Pytanie 19

Który atrybut <img> trzeba uzupełnić, aby strona była dostępna dla osób NIEWIDOMYCH?

A.
style
B.
text
C.
src
D.
alt
Atrybut alt znacznika <img> zawiera tekst alternatywny opisujący obraz. Czytniki ekranu odczytują go osobom niewidomym, dzięki czemu wiedzą one, co przedstawia grafika - to fundament dostępności (a11y), a także wartość dla SEO. Dlatego uzupełnić trzeba atrybut alt.

Pytanie 20

W zapisie rgba(100, 40, 50, 0.2) czego dotyczy OSTATNIA wartość?

A. nasycenia koloru czarnego
B. saturacji barw RGB
C. przezroczystości, gdzie 0 = pełna przezroczystość, 1 = brak
D. przezroczystości, gdzie 1 = pełna przezroczystość, 0 = brak
Pozostałe opisy są błędne. Ostatnia wartość nie dotyczy nasycenia ani saturacji - te należą do modelu HSL/HSV, a nie RGBA. Myląca jest też odwrócona skala: to 0 daje PEŁNĄ przezroczystość, a 1 jej brak (nie odwrotnie). Czwarta wartość rgba to alfa: 0 = przezroczyste, 1 = kryjące.

Pytanie 21

Który z przedstawionych poniżej fragmentów kodu HTML5 zostanie uznany przez walidator HTML za niepoprawny?

A. <p class= "stl" id= "a">tekst</p>
B. <p class= "stl"><style>.a{color:#F00}</style>tekst</p>
C. <p class= "stl" style= "color: #F00 ">tekst</p>
D. <p class= "stl">tekst</p>
Poprawna odpowiedź, która została wskazana, to <p class= "stl"><style>.a{color:#F00}</style>tekst</p>. W kontekście HTML5, element <style> jest przeznaczony do umieszczania w nagłówkach dokumentu (<head>), a nie wewnątrz elementów blokowych, takich jak <p>. Umieszczanie tagu <style> w tagu <p> narusza zasady dotyczące struktury dokumentu HTML. Walidatory HTML5, które sprawdzają zgodność kodu z obowiązującymi standardami W3C, uznają takie umieszczenie za błąd, ponieważ stylizacja powinna być oddzielona od treści. Zgodnie z najlepszymi praktykami, CSS powinno być zaimplementowane w plikach zewnętrznych lub sekcjach <head>, co ułatwia utrzymanie i modyfikację kodu. Przykładem poprawnej struktury może być: <head><style>.a{color:#F00}</style></head><body><p class="stl">tekst</p></body>. To zapewnia przejrzystość i zgodność z zasadami HTML5, co jest kluczowe dla SEO oraz dostępności strony.

Pytanie 22

Poniżej przedstawiono fragment kodu języka HTML. Jest on definicją listy:

<ol>
  <li>punkt 1</li>    <li>punkt 2</li>
  <ul>
    <li>podpunkt1</li>
    <ul>    <li>podpunkt2</li>  <li>podpunkt3</li>  </ul>
  </ul>
  <li>punkt3</li>
</ol>

A.

  1. punkt 1
  2. punkt 2
    • podpunkt1
    • podpunkt2
    • podpunkt3
  3. punkt3

B.

  1. punkt 1
  2. punkt 2
  3. punkt3
    • podpunkt1
    • podpunkt2
    • podpunkt3

C.

  1. punkt 1
  2. punkt 2
    • podpunkt1
      • podpunkt2
      • podpunkt3
  3. punkt3

D.

  • punkt 1
  • punkt 2
    1. podpunkt1
      • podpunkt2
      • podpunkt3
  • punkt3
A. B.
B. A.
C. D.
D. C.
Gratulacje, poprawnie zinterpretowałeś fragment kodu HTML przedstawiający definicję listy. W tym kodzie widzimy listę numerowaną (<ol>), która zawiera trzy elementy listy (<li>). Szczególnością prezentowanej struktury jest fakt, że drugi element listy zawiera zagnieżdżoną listę nieuporządkowaną (<ul>) z trzema podpunktami. Zgodność odpowiedzi C z przedstawionym kodem wynika z faktu, że punkt 2 prezentuje podpunkty oznaczone kropkami, co jest charakterystyczne dla listy nieuporządkowanej. Tego typu struktura jest często stosowana na stronach internetowych do prezentacji hierarchii informacji, na przykład menu nawigacyjnego czy spisu treści. Pamiętaj, że umiejętność czytania i zrozumienia kodu HTML jest kluczowa dla każdego, kto planuje pracować z technologiami webowymi i to pytanie to doskonały przykład na to, jak te umiejętności mogą być sprawdzane.

Pytanie 23

Aby w języku HTML uzyskać formatowanie paragrafu przedstawione w ramce, należy zastosować kod

Ilustracja do pytania
A. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>
B. <p>Tekst może być <mark>zaznaczony albo <em>istotny</em> dla autora</mark></p>
C. <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny dla autora</p>
D. <p>Tekst może być <mark>zaznaczony albo <i>istotny</i> dla autora</mark></p>
Poprawnie wybrałeś kod z poprawnie zagnieżdżonymi i domkniętymi znacznikami: <p>Tekst może być <mark>zaznaczony</mark> albo <em>istotny</em> dla autora</p>. To dokładnie odpowiada temu, co widać na podglądzie: zwykły akapit, w nim jedno słowo podświetlone na żółto oraz inne wyróżnione kursywą. Znacznik <p> tworzy paragraf – podstawowy blok tekstu w HTML. W środku używasz elementów liniowych (inline): <mark> do zaznaczenia fragmentu tekstu jak zakreślaczem oraz <em> do zaznaczenia treści istotnej znaczeniowo, co domyślnie jest renderowane jako kursywa. Według specyfikacji HTML5 <mark> służy do semantycznego wyróżnienia tekstu związanego z kontekstem, np. wynik wyszukiwania na stronie czy aktualnie ważna informacja. <em> natomiast podkreśla akcent logiczny w zdaniu, a nie tylko ozdobne pochylenie, co jest dobrą praktyką dostępnościową. Ważne jest też poprawne zagnieżdżanie: najpierw otwierasz <mark>, potem go zamykasz </mark>, dopiero później otwierasz <em> i zamykasz </em>. Żaden z tych znaczników nie nachodzi na siebie w sposób krzyżowy. Tego pilnują walidatory W3C i warto się do tego przyzwyczaić od początku. W codziennej pracy taki kod możesz wykorzystać np. w artykułach, dokumentacji technicznej, materiałach szkoleniowych, gdzie chcesz: zakreślić słowo kluczowe (<mark>) i jednocześnie podkreślić termin ważny dla autora lub kontekstu (<em>). Moim zdaniem lepiej stosować <em> zamiast <i>, bo <em> niesie znaczenie semantyczne i czytniki ekranu potrafią je zinterpretować, co poprawia dostępność strony.

Pytanie 24

Który zapis HTML deklaruje KODOWANIE znaków w dokumencie?

A.
<charset="UTF-8">
B.
<meta encoding="UTF-8">
C.
<encoding="UTF-8">
D.
<meta charset="UTF-8">
Kodowanie znaków deklaruje się w sekcji <head> zapisem <meta charset="UTF-8"> - dzięki temu przeglądarka poprawnie wyświetli polskie znaki. Dlatego poprawny jest <meta charset="UTF-8">.

Pytanie 25

W JavaScript metoda getElementById odnosi się do

A. zmiennej numerycznej
B. znacznika HTML o podanej nazwie klasy
C. znacznika HTML o wskazanym id
D. klasy zdefiniowanej w CSS
Metoda getElementById w JavaScript jest kluczowym narzędziem do interakcji z modelowaniem DOM (Document Object Model). Służy do uzyskiwania dostępu do pojedynczego elementu HTML na podstawie jego atrybutu id, co jest zgodne z zasadą unikalności identyfikatorów w dokumencie HTML. Dzięki temu programiści mogą stosunkowo łatwo manipulować pojedynczymi elementami, co jest istotne w dynamicznych aplikacjach internetowych. Przykładem zastosowania tej metody może być zmiana tekstu w elemencie <h1>, gdzie używamy getElementById('myHeader').innerHTML = 'Nowy nagłówek';. Zgodnie z dobrymi praktykami, powinno się unikać używania zduplikowanych id w dokumencie, aby zapewnić, że metoda ta zawsze zwraca jeden, a nie wiele elementów. Warto również pamiętać, że w przypadku braku elementu o podanym id, metoda zwróci null, co powinno być uwzględnione w logice aplikacji, aby uniknąć błędów. Użycie tej metody jest standardem w programowaniu JavaScript i stanowi fundament dla wielu bardziej zaawansowanych technik manipulacji DOM.

Pytanie 26

W kodzie HTML 5, w celu walidacji wartości pola <input type="text"> za pomocą wyrażenia regularnego, należy użyć atrybutu

A. step
B. value
C. readonly
D. pattern
W tym pytaniu chodzi o konkretny mechanizm walidacji wbudowany w HTML5, a nie o ogólne właściwości pól formularza. Walidacja za pomocą wyrażeń regularnych jest w standardzie przypisana do jednego, ściśle określonego atrybutu – właśnie pattern. Inne atrybuty z listy pełnią zupełnie inne role i ich mylenie to dość typowy błąd przy nauce formularzy.

Atrybut step jest używany do określania „kroku” dla wartości liczbowych lub dat, np. w input type="number" czy type="date". Pozwala zdefiniować, o ile ma się zwiększać lub zmniejszać wartość przy użyciu strzałek lub walidować, czy liczba jest wielokrotnością danego kroku. Przykład: step="0.5" przy liczbie zmiennoprzecinkowej. Nie ma on żadnego związku z wyrażeniami regularnymi ani ze zwykłym tekstem w type="text".

value z kolei to po prostu wartość pola – początkowa (domyślna) lub aktualna, odczytywana i modyfikowana przez JavaScript lub wysyłana w formularzu. Ustawienie value nie waliduje danych, tylko je definiuje. Można wprawdzie ręcznie sprawdzać value w JS i dopasowywać je do regexa, ale to już logika skryptu, a nie działanie samego atrybutu w HTML. To pewnie częsty skrót myślowy: „wartość pola” vs. „sprawdzenie wartości pola”, ale przeglądarka sama z siebie nie waliduje na podstawie samego value.

readonly natomiast blokuje możliwość edycji pola przez użytkownika, ale nadal wysyła jego wartość z formularzem. To przydatne, gdy chcemy coś pokazać, ale nie pozwolić na zmianę, np. wygenerowany identyfikator. Nie ma tu żadnej analizy treści, żadnego dopasowywania do wzorca – po prostu pole jest nieedytowalne. Czasem ktoś myśli: „skoro nie można tego zmienić, to jakby jest bezpieczne i zwalidowane”, ale to już bardziej kwestia logiki aplikacji, a nie mechanizmu walidacji.

Mechanizm HTML5 do regexów jest jeden: pattern. Warto go łączyć z innymi atrybutami walidacyjnymi, jak required, minlength, maxlength, type, ale to właśnie pattern odpowiada za dopasowanie tekstu do określonego wzorca. Wszystko inne z tej listy pełni pomocnicze lub zupełnie inne funkcje i nie zastępuje typowej walidacji opartej o wyrażenia regularne.

Pytanie 27

Która właściwość CSS ustawia kolor TEKSTU elementu?

A.
font-color
B.
background-color
C.
text-color
D.
color
Kolor TEKSTU elementu ustawia w CSS właściwość color, np. color: #000000; daje czarny tekst. Tła dotyczy osobna właściwość background-color. Dlatego kolor tekstu ustawia color.

Pytanie 28

Walidacja strony internetowej polega na

A. umieszczaniu treści w sieci
B. reklamowaniu strony
C. sprawdzeniu jej w celu usunięcia błędów
D. zestawie działań mających na celu zwiększenie liczby odwiedzin
Proces walidacji strony internetowej polega na systematycznym sprawdzeniu jej zawartości oraz struktury w celu identyfikacji i eliminacji błędów, które mogą wpływać na jej funkcjonalność oraz użyteczność. Walidacja to kluczowy etap w cyklu życia strony, ponieważ zapewnia, że strona działa zgodnie z wymaganiami technicznymi i standardami branżowymi, takimi jak W3C. Przykłady zastosowania walidacji obejmują sprawdzanie poprawności kodu HTML, CSS oraz dostępności, co jest istotne dla zapewnienia pozytywnego doświadczenia użytkowników. Strony internetowe, które są walidowane, mają większe szanse na lepsze pozycjonowanie w wyszukiwarkach, co przekłada się na wyższą oglądalność. Regularna walidacja jest również zgodna z najlepszymi praktykami w zakresie utrzymania jakości i bezpieczeństwa, co w dłuższej perspektywie wspiera reputację marki i zaufanie użytkowników.

Pytanie 29

Jaki jest cel wykorzystania znacznika <i> w języku HTML?

A. zmiany kroju pisma na pochylony
B. określenia formularza
C. określenia nagłówka w treści
D. wstawienia obrazka
Znacznik <i> w języku HTML jest używany do oznaczania tekstu, który powinien być wyświetlany w kroju pisma pochyłym. Takie użycie jest zgodne ze standardami HTML, gdzie <i> zwykle wskazuje na tekst, który ma być wyróżniony w kontekście stylistycznym, na przykład w przypadku tytułów książek, nazw gatunków czy terminów technicznych. Z perspektywy semantycznej, HTML5 wprowadza większą elastyczność w definiowaniu znaczenia tekstu, co czyni <i> bardziej konwencjonalnym narzędziem niż w poprzednich wersjach. Warto zaznaczyć, że dla lepszej dostępności i SEO, często zaleca się użycie znacznika <em>, który nie tylko zmienia styl, ale także podkreśla znaczenie tekstu. Przykład zastosowania <i>: <i>„Wojna i pokój”</i> to książka autorstwa Lwa Tołstoja. Z perspektywy użytkowników i wyszukiwarek, ważne jest, aby znać różnice między tymi znacznikami, co pozwala na efektywniejsze tworzenie treści internetowych.

Pytanie 30

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

A. <b> </b>
B. <s> </s>
C. <em> </em>
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 31

Który z języków służy do STYLIZACJI stron WWW?

A. HTML
B. SQL
C. CSS
D. Python
Do stylizacji stron WWW służy CSS (Cascading Style Sheets) - opisuje wygląd elementów: kolory, czcionki, układ, marginesy, oddzielając prezentację od treści zapisanej w HTML. Dlatego językiem stylizacji jest CSS.

Pytanie 32

Który styl ustawi trzy kolumny OBOK siebie (każda na 1/3 szerokości)?

A.
.kolumny { float: left; width: 33%; }
B.
.kolumny { float: left; width: 40%; }
C.
.kolumny { clear: both; height: 33%; }
D.
.kolumny { float: right; height: 33%; }
Trzy kolumny obok siebie powstają, gdy każdy blok „pływa” w lewo i zajmuje jedną trzecią szerokości: .kolumny { float: left; width: 33%; }. Kluczowe są float (układ poziomy) i width (szerokość). Dlatego poprawny jest zapis z float: left i width: 33%.

Pytanie 33

W CSS, aby zastosować efekt przekreślenia, a także podkreślenia dolnego lub górnego w tekście, należy użyć

A. text-align
B. text-indent
C. text-decoration
D. text-transform
Odpowiedź 'text-decoration' jest prawidłowa, ponieważ ta właściwość CSS umożliwia dodawanie różnych efektów dekoracyjnych do tekstu, takich jak przekreślenie, podkreślenie oraz nadkreślenie. Przykładowo, aby przekreślić tekst, możesz użyć następującego kodu: 'text-decoration: line-through;'. Z kolei dla podkreślenia tekstu zastosujesz 'text-decoration: underline;'. W kontekście standardów CSS3, 'text-decoration' ma na celu nie tylko estetykę, ale także poprawę czytelności, co jest kluczowe w projektowaniu responsywnych i dostępnych stron internetowych. Warto również pamiętać o dobrych praktykach, takich jak unikanie nadmiernego stosowania dekoracji, które mogą odwracać uwagę od treści. W praktyce, kontrolowanie wyglądu tekstu za pomocą 'text-decoration' pozwala na tworzenie bardziej zróżnicowanych i atrakcyjnych interfejsów użytkownika, co w efekcie może zwiększyć zaangażowanie odwiedzających stronę.

Pytanie 34

<form>
  <input type="email" id="addr" required>
  <input type="submit" value="Zapisz">
</form>
Na podstawie przedstawionego kodu formularza HTML można powiedzieć, że pole edycyjne:
A. nie może być puste i wymaga wpisania tekstu ze znakiem @.
B. nie powinno zawierać znaków numerycznych.
C. wymaga wpisania jedynie znaków alfanumerycznych.
D. może być puste.
W tym fragmencie kodu HTML masz dwa bardzo ważne atrybuty: type="email" oraz required. To właśnie one razem powodują, że poprawna jest odpowiedź, że pole nie może być puste i wymaga wpisania tekstu ze znakiem @.

Atrybut required oznacza, że pole jest obowiązkowe. Przeglądarka, zgodnie ze specyfikacją HTML5, nie pozwoli wysłać formularza, dopóki pole nie będzie wypełnione. Użytkownik kliknie przycisk „Zapisz”, a formularz po prostu się nie wyśle – pojawi się komunikat walidacyjny po stronie przeglądarki. To jest tzw. walidacja po stronie klienta, domyślnie wbudowana w HTML.

Z kolei type="email" uruchamia specjalny mechanizm sprawdzania formatu wpisanego tekstu. Przeglądarka sprawdza, czy ciąg znaków wygląda jak adres e‑mail: musi zawierać co najmniej znak @ i jakąś część przed i po nim. To nie jest super zaawansowana walidacja, ale wystarcza jako pierwszy filtr, np. "[email protected]" przejdzie, a "jan.domena.pl" już nie. Moim zdaniem to bardzo wygodne, bo nie trzeba od razu pisać własnego JavaScriptu tylko po to, żeby odsiać oczywiste błędy.

W praktyce w aplikacjach webowych zwykle łączy się tę prostą walidację HTML5 z dodatkowymi sprawdzeniami po stronie serwera (np. w PHP czy w innym backendzie), bo dane z formularza zawsze trzeba traktować z ograniczonym zaufaniem. Dobrym nawykiem jest też dodanie atrybutu name, np. name="email", żeby serwer mógł poprawnie odebrać wartość pola.

Warto też wiedzieć, że niektóre przeglądarki mobilne, gdy widzą type="email", podpowiadają użytkownikowi specjalną klawiaturę z łatwym dostępem do znaku @ i kropki, co realnie poprawia wygodę wpisywania adresu. To taki mały szczegół, ale w profesjonalnych projektach UX ma znaczenie. Podsumowując: required blokuje puste wysłanie formularza, a type="email" wymusza poprawny, podstawowy format adresu ze znakiem @ – dokładnie to opisuje poprawna odpowiedź.

Pytanie 35

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

<style> h3 { background-color: grey; } </style>

<h3 style="background-color: orange;">Rozdział 1.2.2.</h3>

A. kolor tekstu będzie szary
B. tło nagłówka będzie w odcieniu szarości
C. tło nagłówka będzie pomarańczowe
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 36

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

A. lokalizacji i nazwy pliku źródłowego obrazu
B. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie
C. tekstu, który pojawi się, gdy obrazek nie może być załadowany
D. napisu, który będzie widoczny pod obrazem
Odpowiedź, która wskazuje, że atrybut alt znacznika img w języku HTML definiuje tekst, który będzie wyświetlony, jeśli grafika nie może być poprawnie załadowana, jest całkowicie poprawna. Atrybut alt jest kluczowym elementem dostępności w sieci, ponieważ dostarcza użytkownikom alternatywne informacje o zawartości obrazu, co jest szczególnie ważne dla osób korzystających z czytników ekranu. Na przykład, jeśli zdjęcie w artykule nie jest dostępne z powodu problemów z łączem internetowym, atrybut alt zapewnia kontekst, dzięki czemu użytkownik jest informowany o tym, co miało być przedstawione. Dobre praktyki zalecają, aby tekst w atrybucie alt był zwięzły, ale jednocześnie dostarczał wystarczających informacji o obrazie. Warto również zauważyć, że stosowanie atrybutu alt wspiera SEO (optymalizację pod kątem wyszukiwarek), ponieważ wyszukiwarki mogą używać tych informacji do indeksowania treści. Przykład: <img src='example.jpg' alt='Zdjęcie pięknego krajobrazu górskiego'>.

Pytanie 37

Metainformacja „Description” zawarta w pliku źródłowym HTML powinna zawierać

<head>
    <meta name="description" content="...">
</head>
A. nazwę programu, przy użyciu którego została stworzona strona.
B. wyrazy kluczowe, z których korzystają wyszukiwarki sieciowe.
C. opis tego, co znajduje się na stronie.
D. informację o tym, kto jest autorem strony.
Należy podkreślić, że choć autor strony czy program, którym strona została stworzona, to informacje mogą być ciekawe, nie są one celem metainformacji 'Description'. Informacje o autorstwie czy narzędziach służących do stworzenia strony mogą zostać uwzględnione w innych metatagach lub sekcjach strony, ale nie w 'Description'. Na przykład, metatag 'author' jest przeznaczony do wskazywania autora strony. Podobnie, informacje o oprogramowaniu, które zostało użyte do stworzenia strony, zwykle są zawarte w metatagu 'generator'. Co do wyrazów kluczowych, to choć są one istotne dla optymalizacji strony pod kątem wyszukiwarek, nie powinny być jedyną zawartością metatagu 'Description'. Kluczowe słowa powinny być raczej wplecione w naturalny, czytelny dla użytkownika opis strony. W ten sposób 'Description' staje się efektywnym narzędziem SEO, które pomaga zwiększyć ruch na stronie.

Pytanie 38

Jakie pola znajdują się w formularzu?

Ilustracja do pytania
A. Textarea, Select, Input(Radio), Input(Radio), Input(Reset), Input(Submit)
B. Input(Text), Input(Checkbox), Select, Select, Input(Submit), Input(Reset)
C. Textarea, Option, Input(Checkbox), Input(Checkbox), Input(Submit), Input(Reset)
D. Input(Text), Select, Input(Radio), Input(Radio), Input(Submit), Input(Reset)
Odpowiedź, którą wybrałeś, jest ok, bo wszystko trzyma się zasady formularzy z obrazka. Input(Text) to właśnie pole, w którym wpisujesz swoje nazwisko. Potem mamy Input(Select), który pozwala wybrać jedno z województw z listy – to też jest na plus. Przy Input(Radio) można wybrać jedną opcję, co dobrze pasuje do wyboru między Studiami podyplomowymi a Kursem. Input(Submit) jest do wysyłania formularza, więc tu też wszystko gra. Na końcu Input(Reset) zeruje wszystko, co jest przydatne, kiedy chcesz wyczyścić formularz. Wszystkie te elementy są zgodne z HTML5, co jest teraz standardem w tworzeniu stron. Fajnie, że formularz ma logiczne ułożenie, bo ułatwia to korzystanie z niego.

Moim zdaniem, dobrze wiedzieć, jakie elementy są stosowane w formularzach, żeby wszystko działało tak jak powinno.

Pytanie 39

W przypadku podanego fragmentu kodu walidator HTML zgłosi błąd, ponieważ <img src="kwiat.jpg alt="kwiat">

A. brak obrazu kwiat.jpg
B. użyto niewłaściwego znacznika do wyświetlenia obrazu
C. nie zamknięto cudzysłowu
D. zastosowano nieznany atrybut alt
W przedstawionym kodzie HTML występuje błąd związany z niedomknięciem cudzysłowu dla atrybutu 'src'. Prawidłowa składnia powinna wyglądać następująco: <img src="kwiat.jpg" alt="kwiat">. Brak cudzysłowu po 'kwiat.jpg' uniemożliwia poprawne zinterpretowanie kodu przez przeglądarki, co skutkuje błędem walidacji. Zasady walidacji kodu HTML są zgodne z wytycznymi W3C, które zalecają, aby każdy atrybut był zamknięty cudzysłowem. Poprawność kodu nie tylko wpływa na jego działanie, ale również na dostępność strony oraz SEO. Użytkownicy, którzy poruszają się po stronach bez pełnej obsługi HTML, mogą napotkać problemy z wyświetlaniem obrazów. W praktyce, zawsze warto stosować dobregi praktyki kodowania, takie jak użycie linterów do sprawdzania poprawności kodu przed jego publikacją, aby uniknąć takich błędów.

Pytanie 40

W kodzie CSS stworzono cztery klasy stylizacji, które zostały wykorzystane do formatowania akapitów. Efekt widoczny na ilustracji uzyskano dzięki zastosowaniu klasy o nazwie

Ilustracja do pytania
A. format3
B. format4
C. format2
D. format1
Odpowiedź format2 jest poprawna, ponieważ stylizacja zastosowana do tekstu na obrazie to line-through, co oznacza przekreślenie. W CSS właściwość text-decoration pozwala na dodawanie różnych dekoracji do tekstu, takich jak underline (podkreślenie), overline (nadkreślenie) czy line-through (przekreślenie). Przekreślenie jest często używane do zaznaczania usuniętego tekstu lub do pokazywania zmian w dokumentach, co jest zgodne z dobrą praktyką w edytorach tekstu i aplikacjach do śledzenia zmian. W kodzie HTML klasy CSS są zazwyczaj stosowane poprzez dodanie atrybutu class do odpowiedniego elementu. Użycie klasy format2 w kodzie HTML wyglądałoby jak <p class='format2'>. Wielu projektantów korzysta z takich dekoracji, aby poprawić czytelność i funkcjonalność stron internetowych, zapewniając użytkownikom intuicyjne oznaczenia wizualne. Ważne jest także użycie semantycznego HTML, co w połączeniu z odpowiednimi stylami CSS pozwala tworzyć dostępne dla użytkowników strony internetowe zgodne ze standardami W3C.