INF.03 · HTML i CSS
Słowniczek — HTML i CSS
Słowniczek, który pomaga znaleźć błąd.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Powiążesz pojęcie ze składnią i rozpoznasz typowe pomyłki HTML oraz CSS.
Zrozum, zanim zapiszesz
Nie ucz się samych nazw. Przy każdym pojęciu wskaż element w swoim projekcie, powiedz, jaką pełni rolę, i zmień jedną rzecz, aby sprawdzić przewidywanie. W narzędziach przeglądarki zakładka Elements pokazuje strukturę DOM, Styles reguły, a Computed wynik stylowania.
Odróżniaj: head i header, id i class, href i src, margin i padding, pseudoklasę :hover i pseudoelement ::before. Konsola JavaScript nie zastępuje walidatora HTML. Przy brakującym obrazie sprawdź Network i ścieżkę; przy niewłaściwym kolorze sprawdź kaskadę w Styles.
Słownik HTML i CSS — zapis i znaczenie
| Pojęcie | Składnia | Rola |
|---|---|---|
<!DOCTYPE html> | <!DOCTYPE html> | Deklaracja na początku dokumentu — informuje przeglądarkę, że to dokument HTML5. |
<html> | <html lang="pl">...</html> | Korzeń całego dokumentu HTML. |
<head> | <head>...</head> | Metadane dokumentu, m.in. tytuł karty, kodowanie i odwołania do stylów. |
<body> | <body>...</body> | Cała widoczna treść strony. |
<meta charset> | <meta charset="UTF-8"> | Ustawia kodowanie znaków dokumentu. |
<title> | <title>Moja strona</title> | Tytuł strony widoczny na karcie przeglądarki. |
<h1>...<h6> | <h1>Tytuł</h1> | Nagłówki, od najważniejszego (h1) do najmniej ważnego (h6). |
<p> | <p>Treść</p> | Akapit tekstu. |
<a href> | <a href="katalog.html">Katalog</a> | Link do innej strony lub sekcji. |
<img src alt> | <img src="foto.jpg" alt="Opis"> | src to ścieżka do obrazu, alt to tekst zastępczy. |
<ul>/<ol>/<li> | <ul><li>Pozycja</li></ul> | Lista nieuporządkowana / uporządkowana i jej elementy. |
<table>/<tr>/<th>/<td> | <table><tr><th>A</th></tr></table> | Tabela, wiersz, nagłówek kolumny, komórka danych. |
<form action method> | <form action="zapisz.php" method="POST"> | Formularz wysyłający dane pod wskazany adres. |
<input type name> | <input type="email" name="email"> | Pole formularza — type decyduje o rodzaju pola. |
<label for> | <label for="e">E-mail</label> | Etykieta pola, połączona z nim przez for/id. |
<select>/<option> | <select><option>A</option></select> | Lista rozwijana i jej opcje. |
<textarea> | <textarea></textarea> | Wieloliniowe pole tekstowe. |
<button type="submit"> | <button type="submit">Wyślij</button> | Przycisk wysyłający formularz. |
required | <input required> | Atrybut HTML5 wymuszający wypełnienie pola przed wysłaniem. |
pattern | pattern="[0-9]{5}" | Cała niepusta wartość musi pasować do wzorca; pustą odrzuca dopiero required. |
color | color: red; | Kolor tekstu. |
background-color | background-color: #1a1a2e; | Kolor tła elementu. |
opacity vs rgba | background-color: rgba(0,0,0,0.5); | Opacity zmniejsza krycie całego elementu wraz z potomkami; alfa w rgba dotyczy tylko tego koloru. |
font-family | font-family: Arial, sans-serif; | Krój czcionki, z listą zapasowych na wypadek braku pierwszej. |
font-size | font-size: 1rem; | Rozmiar czcionki. |
font-weight | font-weight: bold; | Grubość czcionki. |
line-height | line-height: 1.6; | Wysokość linii tekstu (odstęp między wierszami). |
text-align | text-align: center; | Wyrównanie tekstu. |
text-decoration | text-decoration: none; | Dekoracja tekstu, np. podkreślenie. |
:hover | .btn:hover { ... } | Stan elementu pod kursorem myszy. |
:focus | input:focus { outline: ...; } | Stan elementu mającego fokus, uzyskany m.in. klawiaturą, myszą lub skryptem. |
transition | transition: background-color 0.2s; | Płynna animacja zmiany właściwości zamiast skoku. |
cursor | cursor: pointer; | Wygląd kursora myszy nad elementem. |
border-radius | border-radius: 50%; | Zaokrąglenie rogów; 50% daje koło tylko w kwadratowej ramce. |
box-shadow | box-shadow: 0 4px 12px rgba(0,0,0,0.2); | Cień elementu. |
object-fit | object-fit: cover; | Sposób dopasowania obrazu do jego zadeklarowanych wymiarów. |
margin / padding | margin: 10px 20px; | Odstęp zewnętrzny / wewnętrzny elementu. |
box-sizing: border-box | box-sizing: border-box; | Padding i border WLICZONE w zadeklarowaną szerokość elementu. |
display: flex | display: flex; | Układa elementy potomne w elastycznym rzędzie lub kolumnie. |
gap | gap: 16px; | Odstęp między elementami w kontenerze flex. |
| Metadane | <head> | Informacje o dokumencie |
| Nagłówek treści | <header> | Wprowadzenie strony lub sekcji |
| Identyfikator | id="kontakt" | Unikalny cel odnośnika #kontakt |
| Klasa | class="karta" | Wspólna grupa stylowana przez .karta |
| Odnośnik | <a href="kontakt.html"> | Nawigacja |
| Obraz | <img src="obrazy/plakat.svg" alt="…"> | Treść wizualna |
| Etykieta | <label for="imie"> | Opis kontrolki id="imie" |
| Pole danych | name="imie" | Klucz danych formularza |
| Selektor | .karta > p | Wybór bezpośrednich dzieci |
| Pseudoklasa | :focus-visible | Stan elementu |
| Pseudoelement | ::before | Dodatkowa część prezentacji |
| Odstęp wewnętrzny | padding: 1rem | Przestrzeń wewnątrz border |
| Odstęp zewnętrzny | margin: 1rem | Przestrzeń poza border |
| Rozmiar pudełka | box-sizing: border-box | Width obejmuje padding i border |
| Układ | display: grid | Wiersze i kolumny |
Sprawdź w działaniu
Dopasuj pojęcie do zastosowania
Wybierz pojęcie i wskaż pasującą składnię. Otrzymasz wyjaśnienie, a nie sam komunikat dobrze/źle.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
Wybierz osiem pojęć ze słowniczka. Dla każdego podaj fragment własnego HTML/CSS i opisz jego efekt. Następnie napraw trzy błędy: brak name w polu, klasę CSS zapisaną bez kropki i obraz ze złą ścieżką.
Osiem przykładów z objaśnieniem oraz trzy opisy: objaw → przyczyna → poprawka → próba po poprawce.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Pokaż kod z własnego projektu, nie samą definicję.
Krok 2 — pokaż podpowiedź
Dla formularza porównaj name i id.
Krok 3 — pokaż podpowiedź
Dla CSS sprawdź dopasowanie selektora; dla obrazu sprawdź pełną ścieżkę w Network.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Powiążesz pojęcie ze składnią i rozpoznasz typowe pomyłki HTML oraz CSS.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →