HTML I CSS · INF.03 · MODUŁ 11

Test sprawdzający — HTML i CSS INF.03

Czas na próbny test. Najpierw odpowiedz sam, potem przeczytaj uzasadnienia.

To test sprawdzający cały kurs HTML i CSS. Czeka Cię 20 pytań w czterech sekcjach — po pięć na każdy dział. W każdym pytaniu wybierz jedną poprawną odpowiedź, a po sprawdzeniu przeczytaj uzasadnienie.

Poniższa ściąga przypomina najważniejsze pojęcia. Nie zastępuje odpowiedzi na pytania — pomaga uporządkować wiedzę przed startem.

Dział	Najważniejsze
Szkielet i semantyka	`<!doctype html>`, `<html lang="pl">`, `<head>` z metadanymi i `<body>` z treścią. Używaj `header`, `nav`, `main`, `article`, `section`, `aside` i `footer`.
Obrazy	`alt` opisuje treść obrazu, a `alt=""` oznacza obraz dekoracyjny. `figure` i `figcaption` łączą ilustrację z podpisem.
Tabele	`caption` to tytuł tabeli, `thead` i `tbody` porządkują wiersze, a `th` ze `scope` opisuje nagłówek. `colspan` łączy kolumny, a `rowspan` — wiersze.
Formularze	`label` z atrybutem `for` wskazuje `id` pola. `name` decyduje o nazwie wysyłanej wartości, a `type` i `required` wspierają sprawdzanie danych.
Selektory	Podstawowe selektory to `element`, `.klasa`, `#id` i `element element`. Kropka oznacza klasę, a krzyżyk — identyfikator.
Kaskada i specyficzność	Kolejność ważności: styl inline, identyfikator, klasa, element. Przy równej specyficzności wygrywa reguła zapisana później.
Box model i jednostki	Model pudełkowy to treść, padding, border i margines. `border-box` wlicza padding i border do `width`. `px` jest stałe, `em` zależy od rodzica, `rem` od elementu głównego, a `vw` i `vh` od okna.
Układ	`float` i `clear` sterują opływaniem. `position` może mieć wartość `static`, `relative`, `absolute`, `fixed` lub `sticky`. Flex wyrównuje elementy wzdłuż osi, a grid dzieli stronę na kolumny i wiersze.
Responsywność	Meta viewport, media queries z `min-width` lub `max-width` oraz elastyczne jednostki i obrazy pozwalają dostosować stronę do ekranu.

HTML — struktura i treść

1. Która kolejność elementów tworzy poprawny szkielet dokumentu HTML?

2. Który element powinien zawierać główną, unikalną treść strony i wystąpić tylko raz?

3. Który atrybut elementu <html> informuje przeglądarkę i czytnik ekranu o języku treści?

dir="ltr" charset="utf-8" translate="no" lang="pl"

4. Który element najlepiej otoczy samodzielny wpis lub kartę, którą można opublikować osobno?

5. Na stronie jest tytuł główny, a pod nim trzy równorzędne podrozdziały. Które nagłówki będą poprawne?

trzy <h1> i jeden <h2> jeden <h2> i trzy <h1> jeden <h1> i trzy <h2> jeden <h1> i trzy <h3>

Obrazy, tabele i formularze

6. Obraz jest wyłącznie dekoracją i nie wnosi informacji. Jak ustawić jego atrybut alt?

alt="dekoracja" alt="" pominąć atrybut alt alt="obraz"

7. Komórka tabeli ma objąć trzy kolumny i dwa wiersze. Który zapis jest poprawny?

colspan="3" rowspan="2" rowspan="3" colspan="2" colspan="2" rowspan="3" cols="3" rows="2"

8. Który element dodaje tytuł tabeli powiązany z nią semantycznie?

9. Pole ma id="email". Który zapis poprawnie wiąże z nim etykietę?

10. Który zapis sprawi, że pole e-mail będzie obowiązkowe i sprawdzane przez przeglądarkę?

CSS — selektory, kaskada i box model

11. Co wybiera selektor .menu a?

wszystkie elementy <a> mające klasę menu tylko pierwszy link w elemencie .menu wszystkie linki wewnątrz elementu z klasą menu element .menu, który zawiera link

12. Element ma class="lead" oraz id="intro". Która reguła wygra, jeśli wszystkie pasują?

p { color: red; } .lead { color: green; } p.lead { color: orange; } #intro { color: blue; }

13. Element ma width: 200px, padding: 10px, border: 5px i box-sizing: content-box. Jaka jest jego całkowita szerokość?

200 px 210 px 220 px 230 px

14. Która jednostka użyta w font-size odnosi się do rozmiaru czcionki elementu nadrzędnego?

rem em vh px

15. Dwie reguły mają tę samą specyficzność i obie pasują do elementu. Która z nich wygrywa?

pierwsza zapisana w arkuszu późniejsza zapisana w arkuszu ta z krótszym selektorem ta zapisana w pliku zewnętrznym

Układ i responsywność

16. Do czego służy właściwość clear: both?

przerywa opływanie elementów pływających po obu stronach usuwa wszystkie elementy z układu strony ustawia element pośrodku rodzica nadaje elementowi pozycję fixed

17. Który position ustawia element względem najbliższego pozycjonowanego przodka?

static relative absolute fixed

18. Która właściwość wyrównuje elementy wzdłuż osi głównej kontenera flex?

justify-content align-items flex-wrap gap

19. Co utworzy zapis grid-template-columns: repeat(3, 1fr)?

trzy kolumny o stałej szerokości 3 px jedną kolumnę o szerokości 3 fr trzy równe, elastyczne kolumny trzy wiersze o równej wysokości

20. Który zapis zastosuje reguły tylko na ekranach o szerokości co najmniej 768 px?

@media (max-width: 768px) @media (width: 768px) @media (min-height: 768px) @media (min-width: 768px)