Wyniki egzaminu

Nowy egzamin

Informacje o egzaminie:

Zawód: Technik informatyk
Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Data rozpoczęcia: 3 sierpnia 2026 18:49
Data zakończenia: 3 sierpnia 2026 19:21

Egzamin zdany!

Wynik: 31/40 punktów (77,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!

Facebook

X.com

Szczegółowe wyniki:

Pytanie 1

W kodzie źródłowym zapisanym w języku HTML wskaż błąd walidacji dotyczący tego fragmentu. <h6>CSS</h6>
<p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</b></i>)<br>to język służący...</p>

A. Znacznik h6 jest nieznany.

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

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

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

W analizowanym fragmencie kodu HTML występuje błąd związany z niewłaściwym zagnieżdżeniem znaczników. W szczególności, znacznik zamykający </b> został umieszczony przed zamknięciem znacznika <i>, co narusza zasady zagnieżdżania elementów w HTML. Zgodnie z wytycznymi W3C (World Wide Web Consortium), każdy znacznik otwierający musi mieć odpowiedni znacznik zamykający w odpowiedniej kolejności, a zagnieżdżanie elementów musi być przestrzegane, aby zapewnić poprawną strukturę dokumentu. W tym przypadku poprawna sekwencja powinna wyglądać następująco: <i>...</i><b>...</b>, co oznacza, że znacznik <i> powinien być zamknięty po znaczniku <b>. Przykładowo, prawidłowy zapis mógłby wyglądać tak: <p>Kaskadowe arkusze stylów <b>ang.<i>Cascading Style Sheets</i></b> to język służący...</p>. Taka struktura zapewnia, że znaczniki są poprawnie zagnieżdżone, co przekłada się na lepszą interpretację przez przeglądarki oraz narzędzia do walidacji HTML.

Pytanie 2

Na co może wpływać rozmiar (waga) grafiki JPEG umieszczonej na stronie?

A. na czas ładowania strony

B. na błędy składniowe HTML

C. na szybsze sprawdzanie odnośników

D. na zgodność z systemem Windows

Każdy plik graficzny na stronie przeglądarka musi pobrać z serwera, zanim go pokaże - im większa waga obrazu JPEG, tym dłużej to trwa, zwłaszcza na wolnym łączu czy w telefonie. Dlatego zdjęcia optymalizuje się: dobiera rozsądną kompresję i wymiary, by witryna ładowała się szybciej i nie zniechęcała użytkownika. Stąd rozmiar grafiki JPEG wpływa na czas ładowania strony.

Pytanie 3

Która reguła CSS wyśrodkowuje tekst w PIONIE?

vertical-align: middle

vertical-align: center

text-align: center

align: middle

Pozostałe zapisy są błędne. vertical-align: center używa nieistniejącej wartości (poprawna to middle). text-align: center wyrównuje w POZIOMIE, a właściwość align w CSS nie istnieje. Wyśrodkowanie w pionie daje vertical-align: middle.

Pytanie 4

W podanym przykładzie pseudoklasa hover spowoduje, że styl pogrubiony zostanie zastosowany

A. dla wszystkich odwiedzonych odnośników

B. dla wszystkich nieodwiedzonych odnośników

C. dla każdego odnośnika bez względu na jego aktualny stan

D. odnośnikowi, gdy kursor myszy na nim spocznie

Pseudoklasa hover w CSS jest stosowana do definiowania stylu elementu, gdy użytkownik umieszcza nad nim kursor myszy. W kontekście odnośników, stosowanie pseudoklasy hover pozwala na dynamiczne dostosowywanie ich wyglądu, co jest kluczowe dla poprawy interaktywności i użyteczności stron internetowych. W przykładzie a:hover { font-weight: bold; } styl pogrubiony zostanie zastosowany do odnośnika, gdy użytkownik najedzie na niego kursorem myszy. Jest to częsta praktyka w projektowaniu stron, która pomaga użytkownikom łatwiej identyfikować aktywne elementy nawigacyjne. Standardy sieciowe, takie jak W3C, rekomendują stosowanie takich interakcji w celu poprawy doświadczenia użytkownika. Praktyczne zastosowanie pseudoklasy hover jest szerokie, od prostych efektów wizualnych, po skomplikowane animacje i przejścia. Ważne jest jednak, aby pamiętać o zapewnieniu alternatywnych metod interakcji dla użytkowników korzystających z urządzeń dotykowych, gdzie hover nie jest obsługiwany. Zrozumienie i właściwe stosowanie pseudoklas w CSS jest podstawą tworzenia nowoczesnych i dostępnych interfejsów użytkownika.

Pytanie 5

Deklaracja <!DOCTYPE HTML> wskazuje, że dokument napisano w której wersji HTML?

A. 4

B. 5

C. 6

D. 7

Deklaracja <!DOCTYPE HTML> - krótka, bez numeru wersji ani odwołania do DTD - to znak rozpoznawczy HTML5. Informuje przeglądarkę, że dokument korzysta z najnowszego standardu. Dlatego oznacza HTML w wersji 5.

Pytanie 6

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" />

Poprawna odpowiedź wskazuje na relatywną ścieżkę do pliku CSS. W HTML, stosowanie ścieżek relatywnych jest standardem i dobrą praktyką. Relatywna ścieżka ./style/default.css oznacza, że plik default.css znajduje się w folderze style, który jest bezpośrednio wewnątrz katalogu, w którym znajduje się plik index.html. Stosowanie relatywnych ścieżek zapewnia większą elastyczność i przenośność projektu, ponieważ nie są one zależne od struktury folderów na danym komputerze. Jest to szczególnie ważne w kontekście aplikacji webowych, które mogą być przenoszone między różnymi środowiskami serwerowymi. Zaleca się, aby projektanci stron zawsze używali ścieżek relatywnych, aby uniknąć problemów z odwoływaniem się do zasobów po zmianie lokalizacji projektu. Użycie poprawnej składni w tagu link, jak rel=stylesheet oraz type=text/css, zgodnie z dobrymi praktykami zapewnia poprawne załadowanie stylów CSS, co wpływa na poprawne wyświetlanie się strony w przeglądarkach.

Pytanie 7

W jakim celu tworzy się kaskadowe arkusze stylów (CSS)?

A. aby ułatwić użytkownikowi nawigację

B. aby dodać treści tekstowe

C. aby przyspieszyć wyświetlanie grafiki

D. aby definiować formatowanie (wygląd) elementów strony

Kaskadowe arkusze stylów (CSS) tworzy się, aby definiować FORMATOWANIE i wygląd elementów strony - kolory, czcionki, rozmieszczenie, marginesy - oddzielając warstwę prezentacji od treści zapisanej w HTML. Dlatego CSS służy do definiowania wyglądu elementów strony.

Pytanie 8

Która grupa znaczników HTML służy do GRUPOWANIA elementów i budowy struktury dokumentu?

A. <br>, <img>, <hr>

B. <table>, <tr>, <td>

C. <span>, <strong>, <em>

D. <div>, <article>, <header>

Do grupowania elementów i budowy struktury dokumentu służą znaczniki blokowe i semantyczne: <div> (uniwersalny kontener) oraz <article> i <header> (sekcje HTML5). Wyznaczają one układ strony. Dlatego strukturę buduje grupa <div>, <article>, <header>.

Pytanie 9

Dla strony internetowej stworzono styl, który będzie stosowany tylko do wybranych znaczników, takich jak niektóre nagłówki oraz kilka akapitów. W tej sytuacji, aby przypisać styl do konkretnych znaczników, najodpowiedniejsze będzie użycie

A. klasy

B. pseudoklasy

C. identyfikatora

D. selektora akapitu

Użycie klasy w CSS jest najlepszym rozwiązaniem, gdy chcemy zastosować ten sam styl do wielu elementów HTML, ale nie do wszystkich. Klasy w CSS są definiowane za pomocą kropki przed nazwą klasy, np. .nazwa-klasy, i mogą być przypisane do dowolnego elementu HTML za pomocą atrybutu class. Dzięki temu możemy elastycznie i efektywnie zarządzać stylami na stronie internetowej. Klasy są bardzo przydatne w dużych projektach, gdzie powtarzalność i spójność stylów są kluczowe. Pozwalają także na ponowne wykorzystanie tych samych stylów w różnych miejscach projektu bez konieczności kopiowania kodu CSS. Użycie klas zwiększa czytelność i organizację kodu, co jest zgodne z najlepszymi praktykami programowania. Stosowanie klas jest także zalecane w kontekście frameworków CSS, takich jak Bootstrap, które intensywnie wykorzystują klasy do definiowania komponentów i układów. Przykład zastosowania klasy: .align-right { text-align: right; } można przypisać do różnych nagłówków czy akapitów, które mają być wyrównane do prawej.

Pytanie 10

W CSS zdefiniowano regułę

input:focus { background-color: LightGreen; }

Kiedy pole edycyjne będzie miało jasnozielone tło?

A. jeśli to pierwsze wystąpienie tego elementu w dokumencie

B. gdy zostanie najechane kursorem (bez kliknięcia)

C. po kliknięciu w nie, gdy jest aktywne do wpisywania tekstu

D. w każdej sytuacji

Pseudoklasa :focus dotyczy elementu, który jest AKTYWNY - ma „fokus”, np. pole tekstowe po kliknięciu, gotowe do wpisywania. Dlatego input:focus zadziała po kliknięciu w pole, gdy jest aktywne.

Pytanie 11

Który format zapisze obraz rastrowy BEZ utraty jakości (bezstratnie) i nadaje się na stronę WWW?

A. JPG

B. BMP

C. PNG

D. CDR

Pozostałe formaty nie spełniają obu warunków. JPG kompresuje STRATNIE (gubi detale, daje artefakty przy ostrych krawędziach). BMP jest praktycznie nieskompresowany, więc daje ogromne pliki nieprzyjazne webowi. CDR to format programu CorelDRAW (wektorowy), nieobsługiwany przez przeglądarki. Bezstratny obraz dla WWW to PNG.

Pytanie 12

W CSS, aby ustalić wewnętrzny górny margines, czyli odstęp pomiędzy elementem a jego obramowaniem, należy zastosować komendę

A. padding-top

B. local-top

C. border-top

D. outline-top

Odpowiedź 'padding-top' jest prawidłowa, ponieważ w CSS termin 'padding' odnosi się do wewnętrznego odstępu, który tworzy przestrzeń pomiędzy zawartością elementu a jego granicą (border). 'padding-top' specyfikuje górny odstęp wewnętrzny, co jest istotne w kontekście estetyki i układu strony. Definiując 'padding-top', możemy dostosować wygląd elementów, aby lepiej pasowały do reszty projektu i poprawiły czytelność. Na przykład, jeśli mamy przycisk z tekstem, użycie 'padding-top: 10px;' zapewni, że tekst nie będzie przyklejony do górnego brzegu przycisku, co zwiększy jego estetykę oraz użyteczność. W praktyce dobrą praktyką jest również stosowanie 'padding' w połączeniu z 'margin', aby osiągnąć odpowiednią separację między różnymi elementami w układzie. Przestrzeganie standardów CSS pomaga w tworzeniu responsywnych i dostosowanych układów, które dobrze działają na różnych urządzeniach.

Pytanie 13

Grafika powinna być zapisana w formacie GIF, jeśli

A. jest to obraz w technologii stereoskopowej

B. istnieje potrzeba zapisu obrazu w formie bez kompresji

C. konieczne jest zapisanie obrazu lub animacji

D. jest to grafika wektorowa

Format GIF (Graphics Interchange Format) jest powszechnie wykorzystywany do przechowywania obrazów oraz animacji. Dzięki obsłudze przezroczystości oraz możliwości tworzenia prostych animacji, GIF stał się standardem w przypadku grafiki na stronach internetowych. Jego ograniczenie do 256 kolorów sprawia, że idealnie nadaje się do prostych grafik, takich jak logo czy ikony, gdzie nie jest wymagana pełna gama kolorów, co ma miejsce w formatach takich jak JPEG czy PNG. W przypadku animacji, GIF umożliwia zapis wielu klatek w jednym pliku, co pozwala na odtwarzanie sekwencji obrazu bez potrzeby korzystania z dodatkowego oprogramowania. Praktyczne zastosowanie GIF-a można zaobserwować w mediach społecznościowych, gdzie animowane obrazki są często wykorzystywane do wyrażania emocji, a także na stronach internetowych do przedstawiania logo w ruchu. Używanie formatu GIF w kontekście animacji jest zgodne z dobrą praktyką w branży, ponieważ pozwala na efektywne zarządzanie zasobami wizualnymi oraz zwiększa atrakcyjność treści wizualnych.

Pytanie 14

Która rozdzielczość daje proporcje obrazu 16:9 (przy kwadratowym pikselu)?

A. 320 × 240

B. 1366 × 768

C. 800 × 480

D. 2560 × 2048

Po przeliczeniu pozostałe rozdzielczości dają inne kształty obrazu. 320 × 240 to ≈ 1,33, czyli klasyczne 4:3 (stare monitory), a 800 × 480 ≈ 1,67. 2560 × 2048 daje ≈ 1,25, blisko proporcji 5:4. Tylko 1366 × 768 wychodzi ≈ 1,78, czyli 16:9.

Pytanie 15

Zaprezentowano kod dla tabeli 3x2. Jaką modyfikację należy wprowadzić w drugim wierszu, aby tabela przypominała tę z obrazka, gdzie wiersz jest niewidoczny?

<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>

/efekt jest na obrazie - nie dołączam - nie analizuj/

A. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: none"</span>></pre>

B. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"visibility: hidden"</span>></pre>

C. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"clear: none"</span>></pre>

D. <pre class="code-block"><tr <span class="code-text">style=</span><span class="code-string">"display: table-cell"</span>></pre>

Zastosowanie niewłaściwych właściwości CSS w tabelach może prowadzić do niezamierzonych efektów wizualnych i funkcjonalnych. 'Display: none' usunąłby wiersz z układu dokumentu, co skutkowałoby przesunięciem w górę wierszy poniżej. To podejście jest użyteczne, gdy element powinien być całkowicie usunięty z przestrzeni wizualnej i układu, ale nie spełniałoby celu przedstawionego w pytaniu, gdzie układ ma pozostać niezmieniony. Z kolei 'clear: none' jest właściwością CSS dotyczącą floatów, a nie widoczności, co oznacza, że nie miałoby żadnego wpływu na wyświetlanie wiersza tabeli. Jest to typowy błąd polegający na myleniu właściwości CSS w kontekście ukrywania elementów. Właściwość 'display: table-cell' jest stosowana dla elementów traktowanych jako komórki tabeli, co nie jest odpowiednie dla wierszy tabeli. Wybierając tę właściwość, użytkownik mógłby mylnie sądzić, że ma to wpływ na widoczność, podczas gdy w rzeczywistości zmienia jedynie sposób renderowania elementu. Prawidłowe rozumienie różnic między 'visibility' a 'display' jest kluczowe w tworzeniu przewidywalnych i stabilnych interfejsów użytkownika, co jest jednym z fundamentów dobrego projektowania front-endu. Wybór niewłaściwego podejścia do ukrywania elementów może prowadzić do niepożądanych zmian w interfejsie, co wpływa na użyteczność i estetykę strony.

Pytanie 16

W dokumencie HTML umieszczono tekst sformatowany określonym stylem. Aby wprowadzić w treści kilka słów o zróżnicowanym stylu, należy użyć znacznika

A. <section>

B. <table>

C. <span>

D. <hr>

Znacznik <span> jest używany w HTML do definiowania niewielkich fragmentów tekstu, które można stylizować niezależnie od reszty treści. Przy jego pomocy możemy wprowadzać różne style CSS, co pozwala na skomponowanie bardziej zróżnicowanego wizualnie tekstu. Na przykład, możemy użyć znacznika <span> do podkreślenia ważnych słów w zdaniu, zmieniając ich kolor lub czcionkę. Ważne jest, aby znacznik <span> nie wprowadzał żadnych zmian semantycznych w treści; jest to znacznik czysto stylistyczny. W praktyce, korzystając z CSS, możemy zastosować różne klasy do elementów <span>, co zwiększa elastyczność w zakresie stylizacji. Przykład: <span class='highlight'>ważne słowo</span> może zostać zapisane w arkuszu stylów jako .highlight { background-color: yellow; }. To podejście jest zgodne z zasadami semantycznego HTML oraz wykorzystania CSS, co jest rekomendowaną praktyką w tworzeniu stron internetowych.

Pytanie 17

Jaki wynik pojawi się po wykonaniu zaprezentowanego kodu HTML?

A. Odpowiedź A

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź D

W analizie kodu HTML istotne jest zrozumienie struktury zagnieżdżonych list. Błędne odpowiedzi wynikają z niedokładnej interpretacji hierarchii i stylizacji list. Listy uporządkowane oznaczone tagiem ol oraz nieuporządkowane ul są podstawą do strukturalizacji informacji w HTML. Częsty błąd polega na nieuwzględnieniu, jak przeglądarki interpretują zagnieżdżone listy. Element ol z atrybutami type i start zmienia styl numeracji. Wersje z atrybutem type=A zmieniają numerację na literową, a start=4 decyduje o punkcie startowym. Pominięcie tego aspektu prowadzi do błędnych wniosków. Dobre praktyki obejmują klarowność struktury HTML poprzez właściwe użycie tagów i atrybutów, co jest kluczowe dla dostępności i użyteczności stron. Przy projektowaniu, warto pamiętać o spójności formatowania i zgodności z semantyką HTML, co poprawia doświadczenia użytkowników i wydajność SEO. Właściwe zrozumienie i zastosowanie atrybutów list ułatwia zarządzanie złożonymi strukturami na stronach internetowych.

Pytanie 18

Na ilustracji przedstawiono rezultat stosowania stylów CSS oraz odpowiadający mu kod HTML, który generuje ten przykład. Przyjmując, że marginesy wewnętrzne mają wartość 50 px, natomiast zewnętrzne wynoszą 20 px, styl CSS dla tego obrazu wygląda następująco

A. Odpowiedź A

B. Odpowiedź B

C. Odpowiedź C

D. Odpowiedź D

Odpowiedź C jest poprawna, ponieważ zdefiniowany styl CSS zawiera wszystkie elementy odpowiadające przedstawionemu formatowaniu obrazu. Styl ten określa kolor tła jako Teal, co jest zgodne z opisem wizualnym obrazu. Dodatkowo zastosowanie solidnej czarnej ramki o grubości 4 pikseli odpowiada profesjonalnym standardom, które zapewniają wyraźne oddzielenie obrazu od reszty treści przez wyróżnienie go. Zastosowanie marginesów zewnętrznych o wartości 20 pikseli oraz wewnętrznych paddingów o wartości 50 pikseli jest zgodne z podanym założeniem, co pozwala na właściwe umiejscowienie obrazu na stronie, dając przestrzeń wokół i wewnątrz elementu. Dbałość o takie szczegóły jest kluczowa dla tworzenia responsywnych i estetycznych stron internetowych. Praktyczne stosowanie tego typu stylizacji umożliwia poprawienie czytelności oraz przyciąga uwagę użytkowników na znaczące elementy strony. Warto przy tym pamiętać o zasadzie KISS (Keep It Simple, Stupid), która zachęca do utrzymywania prostoty w projektach, co nie tylko ułatwia ich tworzenie ale też późniejsze utrzymanie.

Pytanie 19

Aby dołączyć kaskadowy arkusz stylów zapisany w zewnętrznym pliku, należy użyć następującego fragmentu kodu HTML:

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

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

<meta charset="styl.css">

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

Poprawny jest znacznik <link rel="stylesheet" type="text/css" href="styl.css">. Zewnętrzny arkusz stylów to osobny plik .css, który dołączasz do strony w sekcji <head> dokumentu HTML właśnie znacznikiem <link>. Atrybut rel="stylesheet" mówi przeglądarce, że powiązany plik to arkusz stylów, href wskazuje jego ścieżkę, a type="text/css" (opcjonalny w HTML5) określa typ zawartości. Taki sposób dołączania CSS oddziela wygląd od treści i pozwala użyć jednego arkusza na wielu podstronach.

Pytanie 20

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

A. tekstu, który pojawi się, gdy obrazek nie może być załadowany

B. napisu, który będzie widoczny pod obrazem

C. właściwości grafiki, takie jak rozmiar, ramka, wyrównanie

D. lokalizacji i nazwy pliku źródłowego obrazu

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 21

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

px

pt

cm

em

Jednostki względne skalują się w stosunku do innej wartości, dzięki czemu układ łatwiej dopasować do urządzenia. em odnosi się do rozmiaru czcionki elementu (a rem do rozmiaru korzenia dokumentu); podobnie względne są procenty. Dlatego względną jednostką spośród podanych jest em.

Pytanie 22

Zastosowanie bloku deklaracji background-attachment: scroll sprawia, że

A. tło strony będzie się przesuwać razem z tekstem

B. grafika tła znajdzie się w prawym górnym rogu strony

C. tło strony pozostanie statyczne, a tekst będzie się przesuwał

D. grafika tła będzie się powtarzać (kafelki)

Odpowiedź, że tło strony będzie przewijane razem z tekstem, jest prawidłowa, ponieważ właściwość 'background-attachment: scroll' definiuje, jak tło elementu powinno się zachowywać podczas przewijania strony. Kiedy używamy tej właściwości, tło jest związane z zawartością strony, co oznacza, że przewija się ono w tym samym tempie, co tekst i inne elementy. To podejście jest często wykorzystywane w projektowaniu stron internetowych, gdzie chcemy uzyskać efekt płynności i spójności. Na przykład, w przypadku długich artykułów, które wymagają przewijania, zastosowanie 'background-attachment: scroll' sprawia, że użytkownik nie jest rozpraszany przez statyczną grafikę tła, co może prowadzić do lepszego doświadczenia podczas czytania. Dobrą praktyką jest również testowanie różnych efektów tła w responsywnych projektach, aby zapewnić, że zawartość pozostaje czytelna na różnych urządzeniach. Warto również pamiętać, że styl tła można łączyć z innymi właściwościami CSS, aby osiągnąć pożądany efekt wizualny, co jest kluczowe w nowoczesnym web designie.

Pytanie 23

Polecenie colspan służy do łączenia komórek tabeli w poziomie, natomiast rowspan w pionie. Którą z tabel wyświetli poniższy fragment kodu napisany w języku HTML?

<table border="1" cellspacing="0" cellpadding="10">
    <tr>
        <td rowspan="2">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>

A. A.

B. B.

C. C.

D. D.

Dokładnie tak, wybrałeś poprawną odpowiedź. Fragment kodu HTML napisałeś pokazuje tabelę z dwoma wierszami i dwoma komórkami. Pierwsza komórka w pierwszym wierszu ma atrybut rowspan='2', co oznacza, że będzie się rozciągać na dwa wiersze w pionie. Druga komórka w pierwszym wierszu nie ma żadnych specjalnych atrybutów, więc jest standardową komórką. W drugim wierszu jest tylko jedna komórka, gdyż druga komórka jest połączona z pierwszą komórką pierwszego wiersza przez atrybut rowspan. Tabela odpowiadająca opisowi to tabela B, która ma jedną długą komórkę po lewej stronie rozciągającą się na dwa wiersze i dwie krótsze komórki po prawej stronie, po jednej w każdym wierszu. Pamiętaj, że atrybuty rowspan i colspan są bardzo przydatne do tworzenia skomplikowanych layoutów tabel, które nie są możliwe do osiągnięcia przy użyciu standardowych tagów tabeli.

Pytanie 24

W zamieszczonym przykładzie pseudoklasa hover sprawi, że styl pogrubiony będzie przypisany

a:hover { font-weight: bold; }

A. wszystkim odnośnikom odwiedzonym.

B. wszystkim odnośnikom nieodwiedzonym.

C. każdemu odnośnikowi niezależnie od aktualnego stanu.

D. odnośnikowi, w momencie kiedy najechał na niego kursor myszy.

Twoja odpowiedź jest prawidłowa. Pseudoklasa :hover w CSS jest używana do stylizacji elementów, na które najechał kursor myszy. Na przykład, jeżeli użyjemy stylu 'font-weight: bold;' z pseudoklasą :hover, tekst odnośnika stanie się pogrubiony tylko wtedy, kiedy na niego najedziemy kursorem. Jest to bardzo przydatne w interaktywnym designie strony internetowej, gdzie możemy w prosty sposób zasygnalizować użytkownikowi, że dany element jest aktywny lub interaktywny. Pamiętaj, że pseudoklasy w CSS są potężnym narzędziem, które pozwala nam na tworzenie zaawansowanych efektów bez konieczności użycia JavaScriptu. Znajomość i umiejętność wykorzystania pseudoklas jest zatem kluczową umiejętnością każdego front-end developera.

Pytanie 25

Znak <s> w HTML powoduje

A. skreślenie tekstu

B. pochylenie tekstu

C. migotanie tekstu

D. podkreślenie tekstu

Znaczniki HTML pełnią różne funkcje związane z formatowaniem tekstu, jednak nie każdy znacznik działa w sposób intuicyjny. Na przykład, wybór odpowiedzi dotyczącej pochylenia tekstu wskazuje na nieporozumienie w zakresie zastosowania znacznika. Tekst pochylony w HTML osiąga się za pomocą znacznika <em> lub <i>, które są przeznaczone do podkreślenia znaczenia lub wyróżnienia fragmentu tekstu. Odpowiedź sugerująca migotanie tekstu pokazuje braki w wiedzy o standardach HTML; w rzeczywistości nie ma takiego znacznika w HTML5, a efekt migotania jest niezalecany ze względu na problemy z dostępnością i użytecznością. Wreszcie, podkreślenie tekstu w HTML realizowane jest przy pomocy znacznika <u>, który jest zarezerwowany dla tekstu, który jest ważny lub w inny sposób wyróżniony, a nie dla przekreślenia. Zatem, w kontekście HTML, kluczowe jest zrozumienie przeznaczenia każdego znacznika, aby unikać nieporozumień i błędnych interpretacji, które mogą prowadzić do niewłaściwego formatowania oraz naruszenia zasad dostępności.

Pytanie 26

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

background-color: red;
color: blue;
margin: 40px;

A. tło niebieskie, kolor tekstu czerwony, marginesy wewnętrzne na poziomie 40 px

B. tło czerwone, kolor tekstu niebieski, marginesy wewnętrzne na poziomie 40 px

C. tło niebieskie, kolor tekstu czerwony, marginesy zewnętrzne na poziomie 40 px

D. tło czerwone, kolor tekstu niebieski, marginesy zewnętrzne na poziomie 40 px

Poprawna odpowiedź wskazuje na tło czerwone, kolor tekstu niebieski oraz marginesy zewnętrzne ustawione na 40 px. W deklaracji CSS, przypisanie 'background-color: red;' skutkuje czerwonym tłem dla elementu, co jest zgodne z zasadami oznaczania kolorów w CSS, które pozwalają na zastosowanie nazw kolorów, kodów hex czy rgb. 'color: blue;' ustawia kolor tekstu na niebieski, co pozwala na lepszą czytelność tekstu na czerwonym tle. Z kolei 'margin: 40px;' definiuje marginesy zewnętrzne, co oznacza, że odległość od innych elementów na stronie wynosi 40 px. Takie praktyki są zgodne z dobrymi standardami projektowania, które sugerują stosowanie kontrastujących kolorów dla poprawy dostępności oraz przestrzeni między elementami dla lepszej struktury layoutu. Warto pamiętać, że marginesy zewnętrzne różnią się od marginesów wewnętrznych (padding), co często jest źródłem nieporozumień.

Pytanie 27

W języku HTML zdefiniowano listę:

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

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

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

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

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

Dobra robota! Twoja odpowiedź jest na miejscu. Ta lista HTML, co widziałeś na obrazku, to faktycznie lista uporządkowana, stworzona przy pomocy znacznika <ol>. Takie listy są numerowane, co sprawia, że łatwiej je śledzić. W HTML mamy dwa rodzaje list: uporządkowane, czyli numerowane z <ol>, i nieuporządkowane, które robimy z <ul> i one są punktowane. Fajnie, że pamiętasz o CSS, bo dzięki niemu możemy dostosować wygląd tych list. Ogólnie, lista numerowana zaczyna od 1 i idzie dalej (1, 2, 3 itd.), a punktowana pokazuje kropki. Co ciekawe, można też zagnieżdżać listy, co daje nam takie wielopoziomowe struktury. Dlatego w tej liście mamy wewnątrz punktowaną, która jest stworzona z <ul>. I pamiętaj, że używanie właściwych znaczników ma znaczenie – szczególnie dla osób korzystających z czytników ekranu.

Pytanie 28

Co można powiedzieć o przedstawionym zapisie języka HTML5?

<title>Strona o psach</title>

A. Pojawi się na karcie dokumentu w przeglądarce.

B. Zostanie wyświetlony w treści strony, na samej górze.

C. Jest jedynie informacją dla robotów wyszukiwarek i nie jest wyświetlany przez przeglądarkę.

D. Jest opcjonalny w języku HTML5 i nie musi występować w dokumencie.

Brawo, Twoja odpowiedź jest prawidłowa! Znacznikiw języku HTML 5 służy do określenia tytułu strony internetowej, który jest wyświetlany na karcie przeglądarki. Nie jest to opcjonalna informacja - każda strona powinna mieć tytuł dla lepszej identyfikacji i optymalizacji SEO (Search Engine Optimization). Tytuł strony jest jednym z kluczowych elementów dla SEO, ponieważ wyszukiwarki internetowe, takie jak Google, często wykorzystują tytuł strony jako główny link w wynikach wyszukiwania. Tytuł strony jest również ważny z punktu widzenia użytkownika - dobrze sformułowany tytuł może przyciągnąć uwagę potencjalnego odbiorcy i zachęcić go do odwiedzenia strony. Warto zauważyć, że tytuł nie jest wyświetlany bezpośrednio na stronie, ale na pasku tytułu przeglądarki lub na karcie strony. To ważne rozróżnienie pomaga zrozumieć, dlaczego niektóre elementy są widoczne dla użytkownika, a inne nie.

Pytanie 29

Na podstawie fragmentu dokumentu HTML, określ co należy wpisać w miejsce kropek w odnośniku w menu, aby przenosił on do rozdziału 2.

Fragment menu
<a ...>Rozdział 2</a>

Fragment dalej w dokumencie
<h1 id="r2" name="sekcja2" class="rozdzial2">Rozdział 2<h1>

A. href = "r2"

B. href = "#r2"

C. href = "sekcja2"

D. href = "#sekcja2"

Gratulacje, Twoja odpowiedź jest prawidłowa. Wybrałeś 'href="#r2"', co jest poprawne, ponieważ w HTML, atrybut 'href' w tagu 'a' służy do określenia miejsca docelowego odnośnika. W tym przypadku, miejsce docelowe to identyfikator (id) elementu na tej samej stronie. Przed identyfikatorem umieszcza się znak '#', który informuje przeglądarkę, że ma poszukać elementu z danym 'id' na tej samej stronie. W tym konkretnym przypadku, 'r2' jest identyfikatorem rozdziału 2 na stronie, dlatego 'href="#r2"' skieruje odnośnik do tego rozdziału. W praktyce, używanie identyfikatorów pozwala na tworzenie skomplikowanych stron z wieloma sekcjami, gdzie odsyłacze umożliwiają łatwe i szybkie nawigowanie. To jest zgodne ze standardami i dobrymi praktykami dla tworzenia stron internetowych.

Pytanie 30

W dokumencie HTML zdefiniowano listę oraz dodano do niej formatowanie CSS. Który z efektów odpowiada tej definicji?

<ul>
  <li>Foksterier
  <li>Bokser
  <li>Baset
</ul>

li::after {
  content: " - Pies";
  background-color: teal;
  color: white;
}

Efekt 1

Foksterier
Bokser
Baset

Efekt 2

Foksterier
Bokser
Baset

Efekt 3

Foksterier
Bokser
Baset

Efekt 4

Foksterier
Bokser
Baset

A. Efekt 2.

B. Efekt 4.

C. Efekt 3.

D. Efekt 1.

Gratulacje, wybrałeś poprawną odpowiedź, która jest 'Efekt 4'. W tym przypadku, dokument HTML został odpowiednio sformatowany za pomocą kodu CSS. Widzimy, że pseudoelement ::after został użyty do dodania tekstu '- Pies' za każdym elementem listy. Jest to często stosowana technika w CSS do dodawania dekoracji lub dodatkowych informacji do elementów na stronie. Dodatkowo, widzimy, że styl CSS definiuje kolor tła jako 'teal' i kolor tekstu jako 'white'. Jest to zgodne z zasadami dobrego projektowania stron internetowych, które sugerują, że kontrast między kolorem tekstu a tłem powinien być wystarczający, aby tekst był łatwo czytelny. Również dobrym podejściem jest utrzymanie spójności kolorów na stronie internetowej, co poprawia jej estetykę i profesjonalizm. W praktyce, umiejętność manipulacji elementami HTML za pomocą CSS jest kluczowa dla każdego front-end developera.

Pytanie 31

Po wykonaniu fragmentu kodu HTML i JavaScript na stronie zostanie wyświetlony obraz z pliku

<img id="obraz" src="kol1.jpg">
<button id="przycisk">Przycisk</button>

<script>
    document.getElementById("obraz").src = "kol2.jpg";
</script>

A. kol1.jpg

B. kol2.jpg

C. kol1.jpg, który może zostać zmieniony na kol2.jpg po wciśnięciu przycisku.

D. kol2.jpg, który może zostać zmieniony na kol1.jpg po wciśnięciu przycisku.

Niestety, nie trafiłeś. Wybierając 'kol1.jpg', mylisz się co do działania JavaScript w kontekście zmiany elementów na stronie. Skrypt używa getElementById, żeby znaleźć obraz o identyfikatorze 'obraz', a potem zmienia atrybut 'src' na 'kol2.jpg'. Tutaj nie ma żadnej interakcji z użytkownikiem, która mogłaby zmienić obrazek. W praktyce jednak, JavaScript daje nam możliwość dynamicznego modyfikowania elementów na stronie, co jest kluczowe przy tworzeniu takich interaktywnych stron. Na przykład, można wykorzystać tą samą metodę do zmiany obrazu, gdy ktoś na niego najedzie albo wciśnie przycisk. W tym przypadku jednak, to nie jest to, co się dzieje. Warto też zrozumieć, że 'kol1.jpg' to nie jest dobra odpowiedź, bo to obraz, który miałby być zmieniony, a nie ten, który się wyświetli.

Pytanie 32

W CSS zapis selektora

p > i { color: red;}

wskazuje, że kolorem czerwonym będzie wyróżniony

A. jedynie tekst w znaczniku <i>, który znajduje się bezpośrednio wewnątrz znacznika <p>

B. każdy tekst w znaczniku <p> z wyjątkiem tych w znaczniku <i>

C. wszystkie teksty w znaczniku <p> lub każdy tekst w znaczniku <i>

D. tylko ten tekst znacznika <p>, który ma przypisaną klasę o nazwie i

Odpowiedzi, które nie uznają znaczenia operatora > oraz kontekstu, w jakim elementy <i> są umieszczone, mogą prowadzić do błędnych wniosków. Przykładowo, stwierdzenie, że każdy tekst w znaczniku <p> za wyjątkiem tych w znaczniku <i> zostanie sformatowany, jest niezgodne z zasadami działania CSS, ponieważ selektor ten nie wyklucza jedynie <i>, lecz odnosi się do hierarchii struktury DOM. W praktyce, jeśli <i> nie jest bezpośrednim dzieckiem <p>, to nie będzie objęte regułą. Z kolei pomylenie selektorów może skutkować tym, że nie osiągniemy zamierzonych efektów stylizacji, co jest częstym problemem w projektach webowych. Ponadto, odpowiedzi sugerujące, że selektor dotyczy wszystkich elementów <p> lub że dotyczy on klasy <i>, wynikają z niepełnego zrozumienia podstaw CSS. Należy pamiętać, że klasy są definiowane w osnowie HTML, a nie w kontekście selektorów bezpośrednich. Właściwe zrozumienie selektorów jest kluczowe dla efektywnego stylizowania i organizacji kodu, a także dla osiągnięcia zamierzonych efektów wizualnych na stronach internetowych.

Pytanie 33

W stylu CSS zdefiniowano klasę uzytkownik:

p.uzytkownik {
    color: blue;
}

Na stronie będą wyświetlane czcionką w kolorze niebieskim:

A. wszystkie akapity.

B. tylko elementy tekstowe typu <p>, <h1>.

C. paragrafy, do których została przypisana klasa uzytkownik.

D. wszystkim elementom w sekcji <body> z przypisaną klasą uzytkownik.

Deklaracja selektora p.uzytkownik oznacza w CSS połączenie selektora typu z selektorem klasy. Innymi słowy: przeglądarka wybierze tylko te elementy <p>, które mają w atrybucie class wpisaną klasę uzytkownik, np. <p class="uzytkownik">Treść</p>. Sama kropka przed nazwą klasy definiuje selektor klasy, a litera p przed kropką zawęża go wyłącznie do paragrafów. Gdyby w stylu było samo .uzytkownik { color: blue; }, wtedy reguła objęłaby wszystkie elementy z tą klasą, niezależnie czy to <p>, <div>, <h1> czy cokolwiek innego.
Moim zdaniem to jedno z podstawowych, ale bardzo ważnych rozróżnień w CSS: kombinacja selektorów pozwala dokładnie kontrolować, które elementy są stylowane. Dzięki temu nie trzeba nadawać unikalnych klas dla każdego typu elementu, tylko łączyć selektor typu (np. p, h1, li) z klasą, gdy jest to potrzebne. W praktyce w projektach spotyka się dużo takich zapisów: np. li.active, a.button-primary, input.error. To pomaga utrzymać porządek w arkuszu stylów i unikać niepotrzebnie szerokiego działania reguł.
Warto też zwrócić uwagę na specyficzność: p.uzytkownik ma większą specyficzność niż samo p, ale mniejszą niż np. #idElementu. Przy konfliktach stylów przeglądarka bierze to pod uwagę. Dobra praktyka jest taka, żeby nie pisać zbyt ogólnych selektorów, które kolorują „pół strony” przypadkiem. Taki selektor jak w pytaniu jest bezpieczny i precyzyjny – wiadomo dokładnie, że kolor niebieski trafi tylko do tych paragrafów, którym świadomie przypiszemy klasę uzytkownik w HTML.

Pytanie 34

Jakie pojęcia są wykorzystywane do opisu interfejsu użytkownika serwisu internetowego?

A. Szkic strony, mapa witryny, diagram przepływu informacji

B. Wysyłanie zapytań do bazy, skrypty PHP

C. Przyciski, menu, interakcja użytkownika z aplikacją

D. Przetwarzanie danych, system zarządzania treścią, projektowanie informacji

Odpowiedź "Przyciski, menu, interakcja użytkownika z aplikacją" jest prawidłowa, ponieważ odnosi się bezpośrednio do kluczowych elementów interfejsu użytkownika (UI) na stronach internetowych. Interfejs użytkownika to zespół wszystkich punktów kontaktowych między użytkownikiem a systemem, a przyciski i menu są podstawowymi składnikami, które umożliwiają interakcję z aplikacją. Dobre praktyki projektowania UI opierają się na zapewnieniu intuicyjności i dostępności tych elementów, co jest podstawą pozytywnego doświadczenia użytkownika (UX). Na przykład, przyciski powinny być jasno oznaczone i łatwo rozpoznawalne, a menu powinno być zorganizowane w sposób logiczny, aby użytkownicy mogli szybko znaleźć potrzebne informacje. W kontekście standardów, warto zwrócić uwagę na wytyczne WCAG, które dotyczą dostępności treści internetowych, oraz zasady heurystyki Jakobsona, które pomagają w ocenie interfejsu użytkownika. Dobry design UI powinien również uwzględniać responsywność, co oznacza, że interfejs powinien być użyteczny na różnych urządzeniach i rozmiarach ekranów.

Pytanie 35

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

BLOK 1		BLOK 2
BLOK 3	BLOK 4
BLOK 5

A. clear: both dla wszystkich bloków.

B. float: left dla wszystkich bloków.

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

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

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

Pytanie 36

Zidentyfikuj styl CSS, który doprowadził do uzyskania pokazanego efektu.

A. Styl 1

B. Styl 2

C. Styl 3

D. Styl 4

Odpowiedź Styl 2 jest prawidłowa, ponieważ zastosowanie border-radius w wartości 50px pozwala osiągnąć efekt zaokrąglenia narożników elementu do kształtu koła, o ile element jest kwadratem. W tym przypadku obraz ma szerokość 100px, co oznacza, że promień zaokrąglenia równy 50px sprawia, że wszystkie narożniki zbiegają się w punktach centralnych ścianek kwadratu, tworząc idealny okrąg. Ta technika jest szeroko stosowana w projektowaniu stron internetowych zwłaszcza w odniesieniu do awatarów lub elementów graficznych, które wymagają zaokrąglonego kształtu. Stosowanie odpowiednich wartości border-radius jest zgodne z dobrymi praktykami w CSS, co pozwala projektantom na eleganckie i efektywne kształtowanie wyglądu witryny. Dzięki temu można tworzyć intuicyjne i estetyczne interfejsy użytkownika. Ważne jest również, aby testować wyświetlanie na różnych urządzeniach, ponieważ CSS powinien być responsywny i adaptowalny do różnorodnych rozdzielczości wyświetlaczy co zwiększa dostępność oraz użyteczność witryn.

Pytanie 37

Który atrybut należy zapisać w miejscu trzech kropek w znaczniku HTML5 <blockquote>, aby zdefiniować źródło cytatu?

<blockquote ...="https://pl.wikipedia.org">
Pokojowa Nagroda Nobla jest przyznawana kandydatom, którzy wykonali największą lub najlepszą pracę na rzecz braterstwa między narodami
</blockquote>

A. src

B. alt

C. cite

D. href

Odpowiedź 'cite' jest prawidłowa, ponieważ atrybut ten służy do wskazania źródła cytatu w znaczniku <blockquote>. Atrybut cite pozwala dostarczyć dodatkowych informacji o autorze lub miejscu pochodzenia cytatu, co jest zgodne z zasadami semantycznego HTML5. Użycie atrybutu cite jest ważne dla poprawnej interpretacji treści przez przeglądarki oraz narzędzia przetwarzające dane, takie jak wyszukiwarki internetowe. Przykład zastosowania: <blockquote cite="https://pl.wikipedia.org">...cytat...</blockquote>. Dzięki temu można łatwo zidentyfikować źródło, co zwiększa wiarygodność prezentowanych informacji. W praktyce, dokumenty HTML powinny być tak przygotowane, aby były zarówno przyjazne dla użytkowników, jak i zgodne z wytycznymi standardów W3C, co ma kluczowe znaczenie w kontekście dostępności i SEO.

Pytanie 38

Web designer pragnie wstawić w znaczniku <header> nagłówek do treści. Zgodnie z zasadami użycia znaczników semantycznych, powinien wykorzystać znacznik

A. <p>

B. <h1>

C. <title>

D. <strong>

Zastosowanie znacznika <h1> w nagłówkach strony internetowej jest zgodne z zasadami semantycznymi HTML. Znacznik <h1> jest przeznaczony do oznaczania głównego nagłówka dokumentu i powinien być używany do przedstawienia najważniejszej treści. Dobrą praktyką jest, aby każda strona miała tylko jeden znacznik <h1>, co pomaga wyszukiwarkom zrozumieć hierarchię treści na stronie. Na przykład, w przypadku artykułu, tytuł artykułu mógłby być umieszczony w znaczniku <h1>, a podtytuły w <h2>, <h3> itd. W ten sposób struktura dokumentu jest jasna, co poprawia dostępność oraz SEO. Dodatkowo, stosowanie semantycznych znaczników ułatwia nawigację po stronie osobom korzystającym z technologii asystujących, takich jak czytniki ekranu, które interpretują hierarchię treści na podstawie użytych znaczników.

Pytanie 39

Deklaracja

<!DOCTYPE html>

informuje przeglądarkę internetową o:

A. tytule strony internetowej.

B. dostosowaniu strony internetowej do różnych rozmiarów urządzeń.

C. wersji języka HTML zastosowanej w dokumencie strony internetowej.

D. indeksowaniu strony internetowej na potrzeby pozycjonowania witryny.

Deklaracja <!DOCTYPE html> to wbrew pozorom bardzo ważny element każdej poprawnej strony internetowej. Informuje przeglądarkę, jaka wersja języka HTML została użyta w dokumencie, a w praktyce – że ma renderować stronę w trybie zgodnym ze współczesnym standardem HTML5. Dzięki temu przeglądarka nie próbuje włączać tzw. „quirks mode”, czyli trybu zgodności ze starymi, historycznymi błędami Internet Explorera, tylko stosuje aktualne zasady specyfikacji. Moim zdaniem to jest jeden z tych drobiazgów, które po prostu trzeba pisać z automatu na górze każdego pliku .html.

W starszych wersjach HTML deklaracja DOCTYPE była dużo dłuższa i określała konkretne DTD (Document Type Definition), np. dla HTML 4.01 Transitional czy XHTML 1.0 Strict. W HTML5 uproszczono to do jednej, krótkiej formy: <!DOCTYPE html>. To właśnie ta linijka mówi: „to jest dokument HTML5”. Na tej podstawie silnik przeglądarki dobiera reguły parsowania, walidacji struktury i sposób interpretacji wielu elementów, np. sekcji <header>, <footer>, <section>, a także nowych atrybutów formularzy.

W praktyce, gdy tworzysz nową stronę, zawsze zaczynasz od:

<!DOCTYPE html>
<html lang="pl">
<head>…

Jeśli pominiesz DOCTYPE albo wpiszesz go błędnie, możesz mieć kłopot z tym, że strona wygląda inaczej w różnych przeglądarkach, pojawią się problemy z modelu pudełkowym CSS (box model), z obsługą nowych znaczników lub z poprawnym działaniem responsywnego layoutu. Walidatory W3C też zakładają konkretną wersję HTML na podstawie DOCTYPE i pod nią sprawdzają poprawność kodu. Z mojego doświadczenia wynika, że poprawny DOCTYPE to absolutna podstawa profesjonalnego front-endu, nawet jeśli wygląda jak coś „magicznego” na samej górze pliku.

Pytanie 40

Który atrybut należy wstawić w miejsce kropek, aby przeglądarka wyświetliła komunikat o błędzie w przypadku kliknięcia przycisku "Zapisz" bez wypełnionego pola nazwisko?

<form action="/skrypt.php" method="post">
  <input type="text" name="nazwisko" ...>
  <input type="submit" value="Zapisz">
</form>

A. disable

B. pattern

C. required

D. checked

Poprawną odpowiedzią jest atrybut „required”. Ten atrybut jest częścią wbudowanego mechanizmu walidacji formularzy HTML5 po stronie przeglądarki. Jeśli dodasz go do pola typu input, textarea czy select, przeglądarka automatycznie sprawdzi, czy użytkownik coś tam wpisał lub wybrał, zanim pozwoli wysłać formularz. W naszym przykładzie: <input type="text" name="nazwisko" required> sprawi, że kliknięcie przycisku „Zapisz” bez wypełnionego nazwiska wywoła komunikat błędu i formularz nie zostanie wysłany. To działa bez żadnego JavaScriptu i bez dodatkowego kodu po stronie serwera.
Moim zdaniem warto pamiętać, że „required” to nie tylko wygoda, ale też dobra praktyka UX – użytkownik od razu widzi, czego brakuje, a nie dopiero po przeładowaniu strony. Standard HTML5 jasno opisuje ten atrybut jako tzw. boolean attribute, czyli taki, który samą swoją obecnością w znaczniku włącza daną funkcję. Nie trzeba pisać required="required", chociaż przeglądarka i tak to zrozumie.
W praktyce używa się go bardzo często w formularzach rejestracji, logowania, zamówień: imię, nazwisko, e‑mail, hasło – wszędzie tam, gdzie pole jest obowiązkowe. Dobrze jest łączyć required z innymi atrybutami walidacyjnymi, np. type="email" czy pattern, żeby od razu kontrolować nie tylko to, czy coś wpisano, ale też czy ma poprawny format. Mimo wszystko, nawet przy użyciu required, nigdy nie wolno rezygnować z walidacji po stronie serwera, bo walidacja w przeglądarce może być wyłączona albo ominięta. Required traktuj jako pierwszą linię obrony i wygodne wsparcie dla użytkownika, a nie jedyne zabezpieczenie.

Rozpocznij nowy egzamin

Powrót do strony głównej