Dataczwartek, 13 sierpnia 2026 Czas18:32:00
← HTML i CSS

Słowniczek — HTML i CSS

Po co się tego uczymy?

Zbiorcza ściąga wszystkich znaczników HTML i właściwości CSS poznanych w tym dziale — jedno miejsce, do którego warto wrócić przed sprawdzianem albo egzaminem, zamiast przeszukiwać wszystkie 11 lekcji z osobna.

Teoria

Nazwa Opis / wyjaśnienie Przykład składni
<!DOCTYPE html> Deklaracja na początku dokumentu — informuje przeglądarkę, że to dokument HTML5. <!DOCTYPE html>
<html> Korzeń całego dokumentu HTML. <html lang="pl">...</html>
<head> Sekcja z danymi o stronie (tytuł, kodowanie, style) — niewidoczna dla użytkownika. <head>...</head>
<body> Cała widoczna treść strony. <body>...</body>
<meta charset> Ustawia kodowanie znaków dokumentu. <meta charset="UTF-8">
<title> Tytuł strony widoczny na karcie przeglądarki. <title>Moja strona</title>
<h1>...<h6> Nagłówki, od najważniejszego (h1) do najmniej ważnego (h6). <h1>Tytuł</h1>
<p> Akapit tekstu. <p>Treść</p>
<a href> Link do innej strony lub sekcji. <a href="katalog.html">Katalog</a>
<img src alt> src to ścieżka do obrazu, alt to tekst zastępczy. <img src="foto.jpg" alt="Opis">
<ul>/<ol>/<li> Lista nieuporządkowana / uporządkowana i jej elementy. <ul><li>Pozycja</li></ul>
<table>/<tr>/<th>/<td> Tabela, wiersz, nagłówek kolumny, komórka danych. <table><tr><th>A</th></tr></table>
<form action method> Formularz wysyłający dane pod wskazany adres. <form action="zapisz.php" method="POST">
<input type name> Pole formularza — type decyduje o rodzaju pola. <input type="email" name="email">
<label for> Etykieta pola, połączona z nim przez for/id. <label for="e">E-mail</label>
<select>/<option> Lista rozwijana i jej opcje. <select><option>A</option></select>
<textarea> Wieloliniowe pole tekstowe. <textarea></textarea>
<button type="submit"> Przycisk wysyłający formularz. <button type="submit">Wyślij</button>
required Atrybut HTML5 wymuszający wypełnienie pola przed wysłaniem. <input required>
pattern Wymusza zgodność wpisanej wartości z wyrażeniem regularnym. pattern="[0-9]{5}"
color Kolor tekstu. color: red;
background-color Kolor tła elementu. background-color: #1a1a2e;
opacity vs rgba opacity przyciemnia CAŁY element (razem z zawartością), rgba tylko sam kolor. background-color: rgba(0,0,0,0.5);
font-family Krój czcionki, z listą zapasowych na wypadek braku pierwszej. font-family: Arial, sans-serif;
font-size Rozmiar czcionki. font-size: 1rem;
font-weight Grubość czcionki. font-weight: bold;
line-height Wysokość linii tekstu (odstęp między wierszami). line-height: 1.6;
text-align Wyrównanie tekstu. text-align: center;
text-decoration Dekoracja tekstu, np. podkreślenie. text-decoration: none;
:hover Stan elementu pod kursorem myszy. .btn:hover { ... }
:focus Stan elementu aktywnego przez klawiaturę (np. Tab). input:focus { outline: ...; }
transition Płynna animacja zmiany właściwości zamiast skoku. transition: background-color 0.2s;
cursor Wygląd kursora myszy nad elementem. cursor: pointer;
border-radius Zaokrąglenie rogów elementu (50% = koło). border-radius: 50%;
box-shadow Cień elementu. box-shadow: 0 4px 12px rgba(0,0,0,0.2);
object-fit Sposób dopasowania obrazu do jego zadeklarowanych wymiarów. object-fit: cover;
margin / padding Odstęp zewnętrzny / wewnętrzny elementu. margin: 10px 20px;
box-sizing: border-box Padding i border WLICZONE w zadeklarowaną szerokość elementu. box-sizing: border-box;
display: flex Układa elementy potomne w elastycznym rzędzie lub kolumnie. display: flex;
gap Odstęp między elementami w kontenerze flex. gap: 16px;