Za darmo · bez logowania

Słownik składni

Każdy element używany w kursie – 677 haseł – wyjaśniony krótko i prosto: co to jest, do czego służy i jak go zapisać. Kliknij język albo wpisz, czego szukasz.

często na egzaminie semantyczny znacznik pusty blokowy liniowy

🧱 HTML

HTML opisuje, CO jest na stronie: nagłówki, akapity, obrazy, tabele, formularze. Pisze się go znacznikami w nawiasach ostrych. Większość znaczników ma otwarcie i zamknięcie (<p>…</p>), a część jest „pusta” – nie ma środka, więc się ich nie zamyka (<img>, <br>).

Szkielet dokumentu

<!DOCTYPE html>

#
często na egzaminie

Pierwsza linia każdej strony. Mówi przeglądarce: „to dokument HTML5”. Na egzaminie to kryterium „zapisana w języku HTML5”. Nie jest znacznikiem – nie ma zamknięcia.

<!DOCTYPE html>

<html>

#
ma zamknięcie

Korzeń dokumentu – wszystko inne jest w środku. Atrybut lang podaje język treści.

<html lang="pl">
  …
</html>

lang

#
atrybutczęsto na egzaminie

Atrybut znacznika <html> – język treści strony. lang="pl" = kryterium „zadeklarowany polski język”. Pomaga czytnikom ekranu i wyszukiwarkom.

<html lang="pl">

<head>

#
ma zamknięcie

Sekcja z informacjami O stronie, których nie widać: kodowanie, tytuł karty, podłączony CSS. Nie wstawiaj tu treści widocznej.

<head>
  <meta charset="UTF-8">
  <title>Tytuł</title>
</head>

<meta>

#
znacznik pusty – bez zamknięciaczęsto na egzaminie

Metadane strony. Najważniejsze: charset="UTF-8" (polskie litery działają) i viewport (strona na telefonie). Znacznik pusty.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

#
ma zamknięcieczęsto na egzaminie

Tytuł widoczny na karcie przeglądarki (nie na stronie!). Przepisz go z arkusza co do znaku.

<title>Ranking gier</title>
👁 Podgląd efektu

<style>

#
ma zamknięcie

Kod CSS wpisany wewnątrz pliku HTML (w <head>). Na egzaminie zwykle ZABRONIONY – CSS ma być w osobnym pliku.

<style>
  p { color: red; }
</style>

<script>

#
ma zamknięcie

Kod JavaScript – wpisany w środku albo z pliku (src). Najlepiej na końcu <body>, gdy elementy strony już istnieją.

<script src="skrypt.js"></script>
<script>
  console.log("Działa");
</script>

<body>

#
ma zamknięcie

Ciało dokumentu – wszystko, co użytkownik widzi w oknie przeglądarki: nagłówki, tekst, obrazy, formularze. Na stronie jest dokładnie jedno <body>, umieszczone po zamknięciu </head>. Style ustawione dla body (np. czcionka, tło) dziedziczą się na całą stronę.

<body>
  <h1>Witaj</h1>
</body>
👁 Podgląd efektu

<!-- komentarz -->

#

Komentarz – przeglądarka go ignoruje. Służy do notatek w kodzie.

<!-- tu będzie menu -->

<meta name="description">

#
znacznik pusty – bez zamknięcia

Krótki opis strony dla wyszukiwarek – Google często pokazuje go pod tytułem w wynikach wyszukiwania. Umieszczany w <head>, nie widać go na stronie.

<meta name="description" content="Kurs INF.03 z rozwiązaniami arkuszy">

<noscript>

#
ma zamknięcie

Treść pokazywana tylko wtedy, gdy JavaScript jest wyłączony lub niedostępny.

<noscript>Włącz JavaScript, aby korzystać z kalkulatora.</noscript>

Bloki semantyczne (układ strony)

<header>

#
ma zamknięcieblokowysemantycznyczęsto na egzaminie

Blok nagłówkowy strony lub sekcji: logo, tytuł, baner. „Blok nagłówkowy” w arkuszu = <header>, a NIE <h1>.

<header>
  <h1>Sklep z grami</h1>
</header>
👁 Podgląd efektu

<nav>

#
ma zamknięcieblokowysemantycznyczęsto na egzaminie

Blok nawigacyjny – miejsce na główne menu strony z odnośnikami. Wygląda jak zwykły <div>, ale mówi przeglądarce i wyszukiwarce: „tu jest nawigacja”. Na egzaminie arkusz nazywa go „blok nawigacyjny” albo „menu”. Zwykle zawiera listę <ul> z linkami <a>.

<nav>
  <a href="index.html">Start</a>
</nav>
👁 Podgląd efektu

<main>

#
ma zamknięcieblokowysemantycznyczęsto na egzaminie

Główna, unikalna treść strony. Jeden na stronę. Często zawiera bloki <section> i <aside>.

<main>
  <section>…</section>
</main>

<section>

#
ma zamknięcieblokowysemantycznyczęsto na egzaminie

Sekcja – tematyczna część strony, zwykle z własnym nagłówkiem. Na egzaminie bloki „lewy”, „prawy”, „pierwszy blok sekcji” to najczęściej <section>, rozróżniane atrybutem id. Wygląda jak <div>, ale jest znacznikiem semantycznym, więc arkusz go wymaga przy „podziale strony za pomocą znaczników semantycznych”.

<section id="lewy">…</section>

<article>

#
ma zamknięcieblokowysemantycznyczęsto na egzaminie

Samodzielna, kompletna treść, którą można by wyjąć i opublikować osobno: artykuł, post, karta produktu.

<article>
  <h3>Nowość</h3>
  <p>…</p>
</article>
👁 Podgląd efektu

<aside>

#
ma zamknięcieblokowysemantycznyczęsto na egzaminie

Treść poboczna względem głównej – panel boczny, ramka z dodatkowymi informacjami, reklama. Na egzaminie „blok boczny” to zwykle <aside>. Domyślnie nie ma żadnego wyglądu – położenie z boku nadaje mu dopiero CSS (float, flex albo grid).

<aside>
  <img src="reklama.png" alt="Reklama">
</aside>
👁 Podgląd efektu

<figure>

#
ma zamknięcieblokowysemantyczny

Samodzielna ilustracja: zdjęcie, wykres, schemat albo fragment kodu, do którego tekst może się odwoływać. Podpis dodaje się znacznikiem <figcaption> wewnątrz <figure>. Domyślnie figure ma marginesy po bokach – jeśli przeszkadzają, wyzeruj je w CSS.

<figure>
  <img src="mapa.png" alt="Mapa">
  <figcaption>Mapa dojazdu</figcaption>
</figure>
👁 Podgląd efektu

<figcaption>

#
ma zamknięciesemantyczny

Podpis ilustracji. Umieszcza się go wewnątrz <figure> – jako pierwszy element (podpis nad obrazem) albo ostatni (pod obrazem). Dzięki temu przeglądarka i czytnik ekranu wiedzą, że podpis dotyczy właśnie tej ilustracji.

<figcaption>Rys. 1</figcaption>
👁 Podgląd efektu

<details>

#
ma zamknięciesemantyczny

Rozwijany blok – po kliknięciu w <summary> pokazuje resztę treści. Działa bez JavaScriptu.

<details>
  <summary>Pokaż odpowiedź</summary>
  42
</details>
👁 Podgląd efektu

<summary>

#
ma zamknięciesemantyczny

Widoczny nagłówek rozwijanego bloku <details>. Użytkownik widzi tylko tekst z <summary> ze strzałką; kliknięcie rozwija resztę zawartości <details>. Działa bez JavaScriptu – to gotowy mechanizm „pokaż/ukryj”, np. w sekcji FAQ.

<summary>Więcej</summary>
👁 Podgląd efektu

<time>

#
ma zamknięcieliniowysemantyczny

Data lub godzina zapisana tak, żeby zrozumiały ją programy (np. kalendarz, wyszukiwarka). Na ekranie możesz napisać „15 czerwca”, a w atrybucie datetime podać dokładną wartość: <time datetime="2026-06-15">15 czerwca</time>. Wyglądu nie zmienia.

<time datetime="2026-06-10">10 czerwca</time>
👁 Podgląd efektu

<mark>

#
ma zamknięcieliniowysemantyczny

Tekst wyróżniony jak zakreślaczem – domyślnie żółte tło. Używa się go do zaznaczenia fragmentu, który jest ważny w danym kontekście, np. szukanego słowa w wynikach. Kolor tła można zmienić w CSS.

<p>Ważne: <mark>termin 10 czerwca</mark></p>
👁 Podgląd efektu

<div>

#
ma zamknięcieblokowy

Ogólny blok BEZ znaczenia – „pudełko” do grupowania. Gdy arkusz mówi „semantyczne znaczniki”, zamiast div użyj header/nav/main/section…

<div class="karta">…</div>
👁 Podgląd efektu

<span>

#
ma zamknięcieliniowy

Ogólny znacznik LINIOWY bez znaczenia – do ostylowania lub złapania kawałka tekstu w JS.

<p>Cena: <span class="cena">49 zł</span></p>
👁 Podgląd efektu

<address>

#
ma zamknięcieblokowysemantyczny

Dane kontaktowe autora strony lub firmy – zwykle w stopce. Domyślnie wyświetlane kursywą.

<address>
  ul. Polna 5, 00-001 Warszawa<br>
  tel. 123 456 789
</address>
👁 Podgląd efektu

<dialog>

#
ma zamknięcieblokowy

Okno dialogowe na stronie. Atrybut open pokazuje je od razu; w JavaScripcie: showModal() otwiera, close() zamyka.

<dialog open>
  <p>Zapisano zmiany!</p>
</dialog>
👁 Podgląd efektu

Tekst

<h1>

#
ma zamknięcieblokowyczęsto na egzaminie

Nagłówek 1. stopnia – najważniejszy tytuł. Stopnie: <h1> … <h6>. „Nagłówek trzeciego stopnia” = <h3>.

<h1>Tytuł strony</h1>
<h2>Rozdział</h2>
<h3>Podrozdział</h3>
👁 Podgląd efektu

<p>

#
ma zamknięcieblokowyczęsto na egzaminie

Akapit (paragraf) – podstawowy blok tekstu. Przeglądarka sama dodaje odstęp nad i pod akapitem, a enter wciśnięty w kodzie wewnątrz <p> NIE tworzy nowej linii (do tego służy <br>). Akapit jest elementem blokowym, więc zawsze zaczyna się w nowej linii. Nie można w nim umieszczać innych bloków, np. <div> ani drugiego <p>.

<p>To jest akapit.</p>
👁 Podgląd efektu

<br>

#
znacznik pusty – bez zamknięcialiniowy

Przejście do nowej linii wewnątrz tekstu, np. w adresie lub wierszu. Jest znacznikiem pustym – nie ma pary </br>, bo nie obejmuje żadnej treści. Nie używaj kilku <br> do robienia odstępów między blokami – od tego jest margin w CSS.

Linia 1<br>Linia 2
👁 Podgląd efektu

<hr>

#
znacznik pusty – bez zamknięciablokowy

Pozioma linia oddzielająca części treści (horizontal rule). Znacznik pusty – bez pary </hr>. Wygląd linii (grubość, kolor) zmienia się w CSS przez border lub height i background-color.

<hr>
👁 Podgląd efektu

<b>

#
ma zamknięcieliniowy

Pogrubienie tekstu – tylko efekt wizualny, bez dodatkowego znaczenia. Jeśli arkusz mówi „tekst pogrubiony”, użyj <b>. Jeśli mówi „tekst ważny” albo „znacznik semantyczny… domyślnie pogrubiony”, użyj <strong> – wygląda tak samo, ale informuje przeglądarkę i czytniki ekranu, że treść jest istotna.

<b>Uwaga</b>
👁 Podgląd efektu

<strong>

#
ma zamknięcieliniowysemantyczny

Tekst WAŻNY (semantyczny) – domyślnie pogrubiony. Czytniki ekranu go akcentują.

<strong>Nie wyłączaj komputera!</strong>
👁 Podgląd efektu

<i>

#
ma zamknięcieliniowy

Kursywa (pochylenie) – tylko wygląd, bez znaczenia. Jej semantycznym odpowiednikiem jest <em> (emfaza, akcent), który też domyślnie daje kursywę. Arkusz „pochylony” → <i>, „wyróżniony/akcentowany” → <em>.

<i>termin obcy</i>
👁 Podgląd efektu

<em>

#
ma zamknięcieliniowysemantycznyczęsto na egzaminie

Tekst UWYPUKLONY / akcentowany (semantyczny) – domyślnie kursywa. „Znacznik uwypuklony, formatowany jako pochylony” = <em>.

<p>Autor: <em>01234567890</em></p>
👁 Podgląd efektu

<u>

#
ma zamknięcieliniowy

Podkreślenie tekstu.

<u>podkreślony</u>
👁 Podgląd efektu

<small>

#
ma zamknięcieliniowy

Mniejszy tekst, np. przypisy.

<small>© 2026</small>
👁 Podgląd efektu

<sub>

#
ma zamknięcieliniowy

Indeks DOLNY.

H<sub>2</sub>O
👁 Podgląd efektu

<sup>

#
ma zamknięcieliniowyczęsto na egzaminie

Indeks GÓRNY – potęgi.

r<sup>2</sup>
👁 Podgląd efektu

<q>

#
ma zamknięcieliniowy

Krótki cytat w środku zdania. Przeglądarka sama dodaje cudzysłowy dopasowane do języka strony (przy lang="pl" – polskie „ ”). Długi cytat w osobnym bloku zapisuje się znacznikiem <blockquote>.

<q>Kto pyta, nie błądzi</q>
👁 Podgląd efektu

<blockquote>

#
ma zamknięcieblokowy

Długi cytat w osobnym bloku, z wcięciem.

<blockquote>Cytat…</blockquote>
👁 Podgląd efektu

<pre>

#
ma zamknięcieblokowy

Tekst sformatowany – zachowuje spacje i entery, czcionka o stałej szerokości.

<pre>a   b
  c</pre>
👁 Podgląd efektu

<code>

#
ma zamknięcieliniowy

Fragment kodu programu wewnątrz zwykłego tekstu, np. nazwa funkcji. Przeglądarka wyświetla go czcionką o stałej szerokości (każda litera tak samo szeroka). Dłuższe bloki kodu wstawia się jako <pre><code>…</code></pre>, żeby zachować wcięcia i entery.

<code>echo</code>
👁 Podgląd efektu

<abbr>

#
ma zamknięcieliniowysemantyczny

Skrót z pełną nazwą w atrybucie title – po najechaniu kursorem widać rozwinięcie.

<abbr title="HyperText Markup Language">HTML</abbr>
👁 Podgląd efektu

<del> / <ins>

#
ma zamknięcieliniowysemantyczny

Tekst usunięty (przekreślony) i wstawiony (podkreślony) – np. stara i nowa cena.

<del>99 zł</del> <ins>79 zł</ins>
👁 Podgląd efektu

<s>

#
ma zamknięcieliniowy

Tekst nieaktualny – przekreślony (bez znaczenia „usunięty z dokumentu”, jak <del>).

<s>Wyprzedane</s>
👁 Podgląd efektu

<kbd>

#
ma zamknięcieliniowysemantyczny

Klawisz lub skrót klawiszowy do wciśnięcia. Czcionka o stałej szerokości.

Zapisz plik: <kbd>Ctrl</kbd> + <kbd>S</kbd>
👁 Podgląd efektu

<cite>

#
ma zamknięcieliniowysemantyczny

Tytuł dzieła: książki, filmu, gry, piosenki. Domyślnie kursywa.

<p>Lektura: <cite>Pan Tadeusz</cite></p>
👁 Podgląd efektu

<var> / <samp>

#
ma zamknięcieliniowysemantyczny

<var> – zmienna we wzorze (kursywa), <samp> – przykładowy wynik działania programu (stała szerokość).

Pole = <var>a</var> × <var>b</var><br>
Program wypisał: <samp>Hello</samp>
👁 Podgląd efektu

<wbr>

#
znacznik pusty – bez zamknięcialiniowy

Miejsce, w którym przeglądarka MOŻE złamać bardzo długie słowo, gdy brakuje miejsca. Znacznik pusty.

Konstantynopolitańczy<wbr>kowianeczka
👁 Podgląd efektu

<progress> / <meter>

#
ma zamknięcieliniowy

<progress> – pasek postępu (np. pobierania pliku), <meter> – wskaźnik wartości w znanym zakresie (np. zapełnienie dysku).

<progress value="70" max="100"></progress>
<meter value="0.6">60%</meter>
👁 Podgląd efektu

Odnośniki i obrazy

<a>

#
ma zamknięcieliniowyczęsto na egzaminie

Odnośnik (link). href = dokąd prowadzi: plik, adres, #kotwica, mailto:. Treść między znacznikami jest klikalna.

<a href="kontakt.html">Kontakt</a>
<a href="https://cke.gov.pl" target="_blank">CKE</a>
<a href="mailto:biuro@firma.pl">Napisz</a>
👁 Podgląd efektu

href

#
atrybutczęsto na egzaminie

Adres celu odnośnika (<a>) albo pliku w <link>. Może być względny (kontakt.html), bezwzględny (https://…), kotwica (#sekcja) lub mailto:.

<a href="#kontakt">Przewiń</a>

target

#
atrybut

Gdzie otworzyć link. target="_blank" = nowa karta, _self = ta sama (domyślnie).

<a href="x.html" target="_blank">

mailto:

#
często na egzaminie

Początek adresu odnośnika, który zamiast strony otwiera program pocztowy z wpisanym odbiorcą: <a href="mailto:biuro@firma.pl">. Można od razu dodać temat: mailto:biuro@firma.pl?subject=Pytanie. Na egzaminie częsty w stopce („link Napisz do nas”).

<a href="mailto:biuro@firma.pl">Napisz do nas</a>
👁 Podgląd efektu

<img>

#
znacznik pusty – bez zamknięcialiniowyczęsto na egzaminie

Obraz. src = ścieżka do pliku, alt = tekst alternatywny (wymagany). Znacznik pusty – nie ma </img>.

<img src="logo.png" alt="Logo sklepu">
👁 Podgląd efektu

src

#
atrybutczęsto na egzaminie

Ścieżka do pliku: obrazu (<img>), skryptu (<script>), filmu, dźwięku. Względna (sama nazwa) – plik w tym samym folderze.

<img src="obrazy/kot.jpg" alt="Kot">

alt

#
atrybutczęsto na egzaminie

Tekst alternatywny obrazu: wyświetla się, gdy obraz się nie wczyta, i czytają go czytniki dla niewidomych. Przepisz dokładnie z arkusza.

<img src="a.jpg" alt="Zamek">

title

#
atrybutczęsto na egzaminie

Dymek pokazujący się po najechaniu kursorem. Może go mieć prawie każdy element.

<img src="a.jpg" alt="Zamek" title="Zamek w Malborku">
👁 Podgląd efektu

width / height

#
atrybut

Wymiary w pikselach podane w HTML (bez „px”). Zwykle lepiej ustawiać rozmiar w CSS, chyba że arkusz każe inaczej.

<img src="a.jpg" alt="A" width="200">

<iframe>

#
ma zamknięcie

Ramka, w której wyświetla się inna strona – np. mapa Google, film z YouTube albo osobny plik HTML. Adres podaje się w atrybucie src, rozmiar w width i height. Treść ramki jest osobnym dokumentem: style z Twojej strony jej nie zmieniają.

<iframe src="mapa.html" width="400" height="300"></iframe>
👁 Podgląd efektu

#kotwica

#
często na egzaminie

Odnośnik do miejsca na TEJ SAMEJ stronie: href="#kontakt" przewija do elementu z id="kontakt". Z innej strony: href="o-nas.html#kontakt".

<a href="#kontakt">Kontakt</a>
…
<section id="kontakt">…</section>
👁 Podgląd efektu

download

#
atrybut

Atrybut <a> – plik zostanie pobrany na dysk zamiast otworzyć się w przeglądarce.

<a href="cennik.pdf" download>Pobierz cennik</a>
👁 Podgląd efektu

loading="lazy"

#
atrybut

Obraz wczytuje się dopiero wtedy, gdy użytkownik przewinie do niego – strona ładuje się szybciej.

<img src="galeria1.jpg" alt="Plaża" loading="lazy">

<picture>

#
ma zamknięcie

Kilka wersji tego samego obrazu – przeglądarka wybiera pierwszą pasującą <source> (np. mniejszą na telefon), a <img> jest wersją zapasową.

<picture>
  <source media="(max-width: 600px)" srcset="male.jpg">
  <img src="duze.jpg" alt="Widok">
</picture>
👁 Podgląd efektu

<map> / <area>

#
ma zamknięcie

Mapa obrazu – klikalne obszary na jednym obrazie. shape: rect (prostokąt), circle (koło), poly (wielokąt); coords – współrzędne w pikselach.

<img src="plan.png" alt="Plan" usemap="#plan">
<map name="plan">
  <area shape="rect" coords="0,0,100,50" href="sala1.html" alt="Sala 1">
</map>
👁 Podgląd efektu

<object> / <embed>

#

Osadzenie zewnętrznego pliku, np. PDF. Dziś częściej używa się <iframe>, <video> albo <img>.

<object data="regulamin.pdf" type="application/pdf" width="400" height="300"></object>

<svg>

#
ma zamknięcie

Grafika wektorowa zapisana kodem – ostra przy każdym powiększeniu. Można ją wstawić jako plik (<img src="logo.svg">) albo bezpośrednio w HTML.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="tomato" />
</svg>
👁 Podgląd efektu

Listy

<ul>

#
ma zamknięcieblokowyczęsto na egzaminie

Lista punktowana (nieuporządkowana) – kolejność nie ma znaczenia. Każdy punkt to <li>.

<ul>
  <li>Mleko</li>
  <li>Chleb</li>
</ul>
👁 Podgląd efektu

<ol>

#
ma zamknięcieblokowyczęsto na egzaminie

Lista numerowana (uporządkowana). Atrybuty: type="1|a|A|i|I", start="5", reversed.

<ol type="A" start="3">
  <li>Krok</li>
</ol>
👁 Podgląd efektu

<li>

#
ma zamknięcieczęsto na egzaminie

Element listy – zawsze wewnątrz <ul> lub <ol>. Może zawierać kolejną listę (lista zagnieżdżona).

<li>Owoce
  <ol><li>Jabłka</li></ol>
</li>
👁 Podgląd efektu

<dl>

#
ma zamknięcieblokowy

Lista definicji – pary „termin i jego opis”, jak w słowniku. <dt> (definition term) to termin, <dd> (definition description) to opis, domyślnie przesunięty w prawo. Jeden termin może mieć kilka opisów. Przykład z arkusza: nazwa smoka w <dt>, jego opis w <dd>.

<dl>
  <dt>HTML</dt><dd>język znaczników</dd>
</dl>
👁 Podgląd efektu

Tabele

<table>

#
ma zamknięcieblokowyczęsto na egzaminie

Tabela. Składa się z wierszy <tr>, a te z komórek <td> (dane) lub <th> (nagłówek).

<table>
  <tr><th>Gra</th><th>Cena</th></tr>
  <tr><td>Minecraft</td><td>89</td></tr>
</table>
👁 Podgląd efektu

<tr>

#
ma zamknięcieczęsto na egzaminie

Wiersz tabeli (table row). Tabelę buduje się wierszami: każdy <tr> zawiera komórki <td> (dane) albo <th> (nagłówki). Liczba komórek w każdym wierszu powinna być taka sama – chyba że któraś jest scalona przez colspan.

<tr><td>1</td><td>2</td></tr>

<td>

#
ma zamknięcieczęsto na egzaminie

Zwykła komórka tabeli z danymi (table data). Stoi zawsze wewnątrz <tr>. Komórka może zajmować kilka kolumn (colspan="2") albo kilka wierszy (rowspan="2"). Dla komórek nagłówkowych – pogrubionych i wyśrodkowanych – używa się <th>.

<td>Minecraft</td>

<th>

#
ma zamknięcieczęsto na egzaminie

Komórka nagłówkowa (table header) – domyślnie pogrubiona i wyśrodkowana. „Wiersz nagłówkowy” = komórki <th>.

<th>Cena</th>
👁 Podgląd efektu

colspan

#
atrybutczęsto na egzaminie

Komórka rozciąga się W PRAWO na kilka kolumn. W tym wierszu piszesz o tyle mniej komórek.

<td colspan="2">zajmuje 2 kolumny</td>
👁 Podgląd efektu

rowspan

#
atrybutczęsto na egzaminie

Komórka rozciąga się W DÓŁ na kilka wierszy. W wierszu poniżej piszesz o jedną komórkę mniej.

<td rowspan="2">zajmuje 2 wiersze</td>
👁 Podgląd efektu

<caption>

#
ma zamknięcie

Tytuł tabeli wyświetlany nad nią. Musi być pierwszym elementem zaraz po <table>. Pozycję można zmienić w CSS: caption-side: bottom przenosi podpis pod tabelę.

<caption>Cennik</caption>
👁 Podgląd efektu

<thead> / <tbody> / <tfoot>

#
ma zamknięcie

Grupy wierszy tabeli: nagłówek, treść i stopka. Są opcjonalne – tabela działa bez nich – ale porządkują kod i ułatwiają stylowanie (np. thead { background: … }). Przy drukowaniu długiej tabeli przeglądarka może powtarzać <thead> na każdej stronie.

<thead><tr><th>A</th></tr></thead>
👁 Podgląd efektu

<colgroup> / <col>

#

Ustawienia dla całych kolumn tabeli (np. tło lub szerokość) bez powtarzania ich w każdej komórce. span – ile kolumn obejmuje.

<colgroup>
  <col style="background: #eef">
  <col span="2">
</colgroup>
👁 Podgląd efektu

scope

#
atrybut

Atrybut <th>: nagłówek dotyczy kolumny (col) albo wiersza (row). Pomaga czytnikom ekranu odczytać tabelę.

<th scope="col">Cena</th>

Formularze

<form>

#
ma zamknięcieblokowyczęsto na egzaminie

Formularz. action – dokąd wysłać (plik PHP), method – jak: get (dane w adresie) lub post (ukryte, „metoda bezpieczna”).

<form action="index.php" method="post">
  …
</form>

<input>

#
znacznik pusty – bez zamknięcialiniowyczęsto na egzaminie

Pole formularza. Rodzaj ustala type: text, number, email, password, date, color, range, checkbox, radio, file, submit, reset, button. Znacznik pusty.

<input type="number" name="ilosc" min="1" max="10">
👁 Podgląd efektu

type

#
atrybutczęsto na egzaminie

Rodzaj pola <input> albo przycisku. Najczęstsze na egzaminie: text, number, radio, checkbox, submit. Każdy rodzaj ma osobne hasło w grupie „Rodzaje pól formularza”.

<input type="email">
👁 Podgląd efektu

name

#
atrybutczęsto na egzaminie

Nazwa pola – pod nią wartość trafia do PHP ($_POST["name"]). Bez name pole NIE zostanie wysłane!

<input type="text" name="imie">

value

#
atrybutczęsto na egzaminie

Wartość pola. W <option> i radio – to, co wyśle formularz (a nie widoczny tekst). W polu tekstowym – wartość startowa.

<option value="1">gruszka</option>

<label>

#
ma zamknięcieliniowyczęsto na egzaminie

Etykieta pola. Powiązanie z polem: for etykiety = id pola. Kliknięcie etykiety zaznacza pole.

<label for="imie">Imię</label>
<input type="text" id="imie">
👁 Podgląd efektu

for

#
atrybutczęsto na egzaminie

Atrybut <label> – id pola, z którym etykieta jest powiązana. (W JS i PHP for to także pętla).

<label for="email">E-mail</label>

<select>

#
ma zamknięcieczęsto na egzaminie

Lista rozwijana. Każda pozycja to <option>: użytkownik widzi tekst między znacznikami, a formularz wysyła wartość z atrybutu value (gdy go nie ma – sam tekst). Nazwę, pod którą wartość trafi do PHP, nadaje atrybut name na <select>. Atrybut multiple pozwala zaznaczyć kilka pozycji (z Ctrl), a selected na <option> – zaznaczyć ją na starcie.

<select name="kolor">
  <option value="1">czerwony</option>
</select>
👁 Podgląd efektu

<option>

#
ma zamknięcieczęsto na egzaminie

Pozycja listy <select> lub <datalist>. value – wysyłana wartość, treść – widoczny tekst, selected – zaznaczona na start.

<option value="2" selected>zielony</option>
👁 Podgląd efektu

<textarea>

#
ma zamknięcieczęsto na egzaminie

Wielowierszowe pole tekstowe. rows i cols – rozmiar. Ma zamknięcie (treść startowa w środku).

<textarea name="opis" rows="4" cols="40"></textarea>
👁 Podgląd efektu

<button>

#
ma zamknięcieliniowyczęsto na egzaminie

Przycisk. type="submit" wysyła formularz, type="button" nic nie wysyła (do JS), type="reset" czyści pola.

<button type="submit">Wyślij</button>
<button type="button" onclick="policz()">Policz</button>
👁 Podgląd efektu

<fieldset>

#
ma zamknięcieblokowy

Grupuje powiązane pola formularza (np. „Dane osobowe”, „Adres”) i rysuje wokół nich ramkę. Tytuł grupy wpisuje się w znaczniku <legend> zaraz po <fieldset> – pojawia się w linii ramki. Atrybut disabled na fieldset wyłącza od razu wszystkie pola w środku.

<fieldset>
  <legend>Dane osobowe</legend>
  …
</fieldset>
👁 Podgląd efektu

<datalist>

#
ma zamknięcie

Lista podpowiedzi do pola tekstowego – użytkownik może wybrać albo wpisać własną wartość.

<input list="miasta" name="miasto">
<datalist id="miasta">
  <option value="Kraków">
</datalist>
👁 Podgląd efektu

checked

#
atrybutczęsto na egzaminie

Atrybut zaznaczający pole radio albo checkbox od razu po załadowaniu strony („domyślnie zaznaczone”). Jest atrybutem logicznym: wystarczy samo słowo checked, bez wartości. W grupie radio (pola o tej samej nazwie) checked może mieć tylko jedno pole.

<input type="radio" name="w" checked>
👁 Podgląd efektu

disabled

#
atrybutczęsto na egzaminie

Pole nieaktywne – wyszarzone, nie da się go zmienić i NIE jest wysyłane. Atrybut bez wartości.

<input type="number" disabled>
👁 Podgląd efektu

readonly

#
atrybut

Pole tylko do odczytu: widać jego wartość, można ją zaznaczyć i skopiować, ale nie można jej zmienić. Wartość JEST wysyłana z formularzem. Tym różni się od disabled – pole wyłączone jest szare i jego wartość NIE jest wysyłana.

<input type="text" value="PL" readonly>
👁 Podgląd efektu

required

#
atrybut

Pole wymagane: przeglądarka nie wyśle formularza, dopóki pole jest puste, i pokaże komunikat „Wypełnij to pole”. To wygodna walidacja po stronie przeglądarki, ale da się ją obejść – ważne dane trzeba sprawdzić także w PHP.

<input type="email" required>
👁 Podgląd efektu

placeholder

#
atrybut

Szary tekst-podpowiedź widoczny w pustym polu, np. „np. Jan Kowalski”. Znika, gdy zaczniesz pisać, i NIE jest wysyłany z formularzem. Nie zastępuje etykiety <label> – po wpisaniu tekstu podpowiedź znika i użytkownik nie wie już, czego dotyczy pole.

<input type="text" placeholder="np. Jan">
👁 Podgląd efektu

accept

#
atrybut

Jakie pliki pokaże okno wyboru w <input type="file">: image/* – obrazy, .pdf – tylko PDF, .jpg,.png – wymienione.

<input type="file" accept="image/*">
👁 Podgląd efektu

min / max / step

#
atrybutczęsto na egzaminie

Zakres i krok pola liczbowego lub daty. step="1" = liczby całkowite, step="0.01" = grosze.

<input type="number" min="1" max="4" step="1" value="2">
👁 Podgląd efektu

maxlength

#
atrybut

Największa liczba znaków, jaką da się wpisać w pole tekstowe, np. maxlength="11" dla numeru PESEL. Przeglądarka po prostu nie pozwoli wpisać więcej. Działa dla type="text", password, email i dla <textarea>, ale nie dla type="number" (tam używa się min i max).

<input type="text" maxlength="20">
👁 Podgląd efektu

pattern

#
atrybut

Wzór, który musi spełnić tekst wpisany w pole – zapisany jako wyrażenie regularne. Przykład: pattern="[0-9]{2}-[0-9]{3}" przyjmie tylko kod pocztowy typu 31-123. Gdy wartość nie pasuje, przeglądarka nie wyśle formularza i pokaże komunikat. Treść podpowiedzi można podać w atrybucie title.

<input type="text" pattern="[0-9]{11}" title="11 cyfr">

autofocus

#
atrybut

Po załadowaniu strony kursor od razu ustawia się w tym polu, więc można pisać bez klikania. Na stronie powinno być tylko jedno pole z autofocus. Atrybut logiczny – wystarczy samo słowo.

<input type="text" autofocus>

<optgroup>

#
ma zamknięcie

Grupa opcji w <select> z nagłówkiem (label). Samego nagłówka nie da się wybrać.

<select name="produkt">
  <optgroup label="Owoce">
    <option>jabłko</option>
    <option>gruszka</option>
  </optgroup>
</select>
👁 Podgląd efektu

<output>

#
ma zamknięcieliniowy

Miejsce na wynik obliczeń w formularzu (np. wpisywany przez JavaScript).

Suma: <output name="wynik">0</output> zł
👁 Podgląd efektu

multiple

#
atrybut

Pozwala wybrać kilka opcji w <select> (Ctrl + klik) albo kilka plików w <input type="file">. W PHP nazwa pola z [] (jezyki[]) daje tablicę.

<select name="jezyki[]" multiple>
  <option>HTML</option>
  <option>CSS</option>
</select>
👁 Podgląd efektu

size

#
atrybut

W <select> – ile opcji widać naraz (zamiast listy rozwijanej); w <input> – szerokość pola w znakach.

<select size="3">…</select>
👁 Podgląd efektu

autocomplete

#
atrybut

Czy przeglądarka ma podpowiadać zapamiętane wartości: on / off albo rodzaj danych (email, name, tel).

<input type="email" name="email" autocomplete="email">

enctype

#
atrybut

Sposób kodowania danych formularza. Do wysyłania plików konieczne: method="post" i enctype="multipart/form-data".

<form action="upload.php" method="post" enctype="multipart/form-data">

novalidate

#
atrybut

Wyłącza sprawdzanie formularza przez przeglądarkę (required, type="email" itp.) – dane i tak trzeba sprawdzić w PHP.

<form action="zapisz.php" method="post" novalidate>

Rodzaje pól formularza (type)

type="text" / "password"

#
często na egzaminie

Pole tekstowe w jednej linii. password ukrywa wpisywane znaki kropkami (ale wysyła je zwykłym tekstem – stąd HTTPS).

<input type="text" name="login">
<input type="password" name="haslo">
👁 Podgląd efektu

type="number"

#
często na egzaminie

Pole liczbowe ze strzałkami. min, max i step ograniczają wartość. W PHP i JS wartość i tak przychodzi jako TEKST – zamień ją na liczbę.

<input type="number" name="ilosc" min="1" max="10" value="1">
👁 Podgląd efektu

type="email" / "tel" / "url"

#

Pola na e-mail, telefon i adres WWW. email i url przeglądarka sprawdza przed wysłaniem, a na telefonie pokazuje dopasowaną klawiaturę.

<input type="email" name="email">
<input type="tel" name="telefon">
<input type="url" name="strona">
👁 Podgląd efektu

type="date" / "time"

#
często na egzaminie

Wybór daty z kalendarza i godziny. Wartość ma format RRRR-MM-DD i GG:MM – taki sam jak typy DATE i TIME w bazie danych.

<input type="date" name="data">
<input type="time" name="godzina">
👁 Podgląd efektu

type="radio"

#
często na egzaminie

Przycisk opcji – z grupy o tym samym name można zaznaczyć tylko JEDEN. value mówi, co zostanie wysłane do PHP.

<input type="radio" name="dostawa" value="kurier" checked> Kurier
<input type="radio" name="dostawa" value="paczkomat"> Paczkomat
👁 Podgląd efektu

type="checkbox"

#
często na egzaminie

Pole wyboru – każde zaznacza się niezależnie. Niezaznaczony checkbox w ogóle NIE jest wysyłany, dlatego w PHP sprawdza się go przez isset().

<input type="checkbox" name="zgoda" id="zgoda">
<label for="zgoda">Akceptuję regulamin</label>
👁 Podgląd efektu

type="range"

#

Suwak wartości od min do max (domyślnie 0–100).

<input type="range" name="glosnosc" min="0" max="100" value="50">
👁 Podgląd efektu

type="color"

#

Wybór koloru z palety – wartość w zapisie #RRGGBB.

<input type="color" name="kolor" value="#2a9d8f">
👁 Podgląd efektu

type="file"

#
często na egzaminie

Wybór pliku z dysku. accept zawęża typy plików, multiple pozwala wybrać kilka. Formularz musi mieć method="post" i enctype="multipart/form-data".

<input type="file" name="zdjecie" accept="image/*">
👁 Podgląd efektu

type="submit" / "reset"

#
często na egzaminie

Przyciski formularza: submit wysyła dane, reset przywraca wartości początkowe pól. value to napis na przycisku.

<input type="submit" value="Zapisz">
<input type="reset" value="Wyczyść">
👁 Podgląd efektu

type="hidden"

#

Pole niewidoczne – wysyła wartość, której użytkownik nie widzi (np. numer rekordu do zmiany).

<input type="hidden" name="id" value="7">
👁 Podgląd efektu

Multimedia

<audio>

#
ma zamknięcie

Dźwięk. controls – przyciski odtwarzacza. Dodatkowo: autoplay, loop, muted.

<audio src="odglos.mp3" controls></audio>
👁 Podgląd efektu

<video>

#
ma zamknięcie

Film. controls – przyciski, poster – obraz przed startem, width – szerokość.

<video src="film.mp4" controls width="400" poster="okladka.jpg"></video>
👁 Podgląd efektu

<source>

#
znacznik pusty – bez zamknięcia

Alternatywne źródło pliku w <audio>/<video> – przeglądarka weźmie pierwsze, które obsługuje. Znacznik pusty.

<video controls>
  <source src="f.webm" type="video/webm">
  <source src="f.mp4" type="video/mp4">
</video>

<canvas>

#
ma zamknięcie

Płótno do rysowania JavaScriptem (wykresy, gry). Sam znacznik jest pusty w środku – rysuje skrypt.

<canvas id="plotno" width="300" height="150"></canvas>
👁 Podgląd efektu

Atrybuty globalne (dla każdego znacznika)

id

#
atrybutczęsto na egzaminie

Unikalna nazwa elementu – jeden na stronie. Używa jej CSS (#nazwa), JavaScript (getElementById) i etykiety (for).

<section id="lewy">…</section>

class

#
atrybutczęsto na egzaminie

Nazwa GRUPY elementów – wiele elementów może mieć tę samą klasę, a element może mieć kilka klas (po spacji). W CSS: .nazwa.

<div class="karta promocja">…</div>

style

#
atrybut

CSS wpisany bezpośrednio w znacznik (styl liniowy). Na egzaminie zwykle niedozwolony – CSS ma być w pliku.

<p style="color: red;">

data-*

#
atrybut

Własne atrybuty z danymi, np. <div data-cena="49">. Nie zmieniają wyglądu – przechowują informację, którą odczyta JavaScript: element.dataset.cena (albo getAttribute("data-cena")). Nazwa po data- może być dowolna, byle bez wielkich liter.

<button data-cena="20">

tabindex

#
atrybut

Ustala, w jakiej kolejności klawisz Tab przechodzi między elementami strony. tabindex="0" dodaje element do zwykłej kolejności (np. klikalny <div>), tabindex="-1" wyłącza go z przechodzenia klawiszem. Ważne dla dostępności – osoby bez myszy poruszają się po stronie właśnie klawiszem Tab.

<div tabindex="0">

hidden

#
atrybut

Atrybut ukrywający element – przeglądarka go nie wyświetla, jakby miał display: none. Uwaga: to coś innego niż <input type="hidden">, czyli niewidoczne pole formularza, które wysyła ukrytą wartość (np. id rekordu).

<p hidden>Niewidoczne</p>
👁 Podgląd efektu

onclick

#
atrybutczęsto na egzaminie

Zdarzenie: po kliknięciu wykonaj kod JavaScript (zwykle wywołanie funkcji – z nawiasami!).

<button onclick="policz()">Policz</button>

contenteditable

#
atrybut

Treść elementu można edytować bezpośrednio na stronie, jak w edytorze tekstu.

<p contenteditable="true">Kliknij i pisz</p>
👁 Podgląd efektu

dir

#
atrybut

Kierunek tekstu: ltr – od lewej (domyślnie), rtl – od prawej (np. arabski, hebrajski).

<p dir="rtl">tekst od prawej</p>
👁 Podgląd efektu

draggable

#
atrybut

Element można przeciągać myszą (samą obsługę przeciągania pisze się w JavaScripcie).

<img src="a.png" alt="A" draggable="true">

Znaki specjalne (encje)

&lt; &gt;

#

Kody znaków < i >. Są potrzebne, gdy chcesz pokazać nawias ostry jako zwykły tekst – sam znak < przeglądarka uznałaby za początek znacznika. Na przykład kurs HTML pokazuje „<p>” na stronie, pisząc w kodzie &lt;p&gt;.

2 &lt; 3
👁 Podgląd efektu

&amp;

#

Znak & w treści.

Kowalski &amp; syn
👁 Podgląd efektu

&nbsp;

#

Twarda spacja (non-breaking space). Zwykłe spacje przeglądarka „zwija” – pięć spacji w kodzie wyświetli jako jedną. &nbsp; zawsze zajmuje miejsce i nie pozwala złamać linii w tym miejscu, np. między „10” a „zł”.

10&nbsp;zł
👁 Podgląd efektu

&copy;

#

Znak ©.

&copy; 2026
👁 Podgląd efektu

&quot;

#

Cudzysłów " wewnątrz wartości atrybutu.

title="&quot;Wiedźmin&quot;"

&Pi;

#
często na egzaminie

Grecka wielka litera Π (mała: &pi;). Encje można też pisać kodem liczbowym: &#928;.

P = &Pi; * r<sup>2</sup>
👁 Podgląd efektu

&laquo; &raquo;

#

Znaki « i » – np. strzałki galerii.

<span>&laquo;</span>
👁 Podgląd efektu

&euro;

#

Znak €.

10 &euro;
👁 Podgląd efektu

&deg;

#

Znak stopnia °.

Temperatura: 22&deg;C
👁 Podgląd efektu

&times; &divide;

#

Znaki mnożenia × i dzielenia ÷ (zamiast litery x).

3 &times; 4 = 12
👁 Podgląd efektu

&rarr; &larr;

#

Strzałki → ← (także &uarr; ↑ i &darr; ↓).

Dalej &rarr;
👁 Podgląd efektu

&#kod;

#

Dowolny znak po numerze Unicode: dziesiętnie &#169; albo szesnastkowo &#xA9; – oba dają ©.

&#169; 2026 &#x2764;
👁 Podgląd efektu

🎨 CSS

CSS mówi, JAK wygląda strona. Reguła = selektor (kogo stylujemy) + klamry z deklaracjami „właściwość: wartość;”. Na egzaminie CSS jest w osobnym pliku styl.css podłączonym przez <link>.

Budowa reguły i selektory

reguła CSS

#
często na egzaminie

selektor { właściwość: wartość; }. Dwukropek oddziela właściwość od wartości, średnik kończy deklarację, klamry grupują deklaracje jednego selektora. Brak średnika psuje NASTĘPNĄ linię.

h1 {
  color: white;
  font-size: 200%;
}
👁 Podgląd efektu

* (selektor uniwersalny)

#
często na egzaminie

Wszystkie elementy strony. „Domyślnie dla wszystkich selektorów” w arkuszu = *.

* { font-family: Arial, sans-serif; }
👁 Podgląd efektu

selektor znacznika

#
często na egzaminie

Nazwa znacznika bez nawiasów – styluje wszystkie takie elementy. „Wyłącznie selektorem znacznika” = np. table { }, a nie klasą.

p { font-size: 120%; }
table { width: 90%; }
👁 Podgląd efektu

.klasa

#
często na egzaminie

Wszystkie elementy z danym class. Kropka tylko w CSS – w HTML piszesz class="karta" bez kropki.

.karta { border: 1px solid gray; }
👁 Podgląd efektu

#id

#
często na egzaminie

Selektor jednego elementu o danym id, np. #lewy dla <section id="lewy">. Krzyżyk piszesz tylko w CSS, w HTML samo id="lewy". Id musi być unikalne – na stronie może być tylko jeden element o danym id. Ma silniejszą „wagę” niż klasa i selektor znacznika, więc wygrywa z nimi w razie konfliktu.

#lewy { width: 25%; }
👁 Podgląd efektu

A, B (lista)

#
często na egzaminie

Ta sama reguła dla kilku selektorów – przecinek znaczy „i”. „Wspólne dla header i footer”.

header, footer { color: white; }
👁 Podgląd efektu

A B (potomek)

#
często na egzaminie

Element B leżący gdziekolwiek WEWNĄTRZ A. „Jedynie dla obrazów z bloku bocznego” = aside img.

aside img { margin: 10px; }
#lewa tr:hover { … }
👁 Podgląd efektu

A > B (dziecko)

#

Wybiera elementy B, które są BEZPOŚREDNIO w A (dzieci), a pomija te głębiej (wnuki). Przykład: ul > li zadziała na punkty listy, ale nie na punkty listy zagnieżdżonej w środku. Porównaj ze spacją (A B), która wybiera B na dowolnej głębokości.

ul > li { color: red; }
👁 Podgląd efektu

A + B (sąsiad)

#

Wybiera element B, który stoi ZARAZ PO elemencie A i ma tego samego rodzica. h2 + p to pierwszy akapit tuż pod nagłówkiem h2 – kolejne akapity już nie. Przydatne np. do usunięcia odstępu pod nagłówkiem.

h2 + p { margin-top: 0; }
👁 Podgląd efektu

A ~ B (dalsze rodzeństwo)

#

WSZYSTKIE elementy B stojące po A na tym samym poziomie (A + B wybiera tylko pierwszy, zaraz po A).

h2 ~ p { color: gray; }
👁 Podgląd efektu

[atrybut]

#

Wybiera elementy po atrybucie: input[type="text"] to tylko pola tekstowe, a[target] to linki z atrybutem target. Dzięki temu nie trzeba nadawać klas każdemu polu. Są też warianty: [href^="https"] – wartość zaczyna się od…, [src$=".png"] – kończy się na….

input[type="text"] { width: 200px; }
👁 Podgląd efektu

[atrybut^="…"] / [atrybut$="…"]

#

Wartość atrybutu zaczyna się od (^=), kończy na ($=) albo zawiera (*=) podany tekst.

a[href^="https"] { color: green; }
a[href$=".pdf"]::after { content: " (PDF)"; }
👁 Podgląd efektu

kaskada i specyficzność

#

Gdy dwie reguły się kłócą, wygrywa silniejsza: style w HTML > #id > .klasa > znacznik. Przy równej sile – zapisana później. !important wygrywa ze wszystkim.

#menu a { color: blue; }  /* silniejsze */
a { color: red; }
👁 Podgląd efektu

dziedziczenie

#

Część właściwości (kolor tekstu, czcionka) przechodzi na elementy w środku. Marginesy, ramki, tło – nie.

body { font-family: Georgia; } /* cała strona */
👁 Podgląd efektu

/* komentarz */

#

Komentarz w CSS – przeglądarka go pomija.

/* nagłówek */

Pseudoklasy i pseudoelementy

:hover

#
często na egzaminie

Stan „kursor myszy nad elementem”. Reguła z :hover działa tylko wtedy, gdy najedziesz na element, a po zjechaniu kursorem styl wraca do zwykłego. Najczęstszy efekt na egzaminie: „gdy kursor znajdzie się na przycisku, jego tło zmienia się na…” → button:hover { background-color: …; }.

a:hover { background-color: RoyalBlue; }
👁 Podgląd efektu

:first-child / :last-child

#

Pierwszy / ostatni element wśród dzieci rodzica. li:first-child to pierwszy punkt każdej listy. Uwaga: liczą się wszystkie dzieci – p:first-child zadziała tylko wtedy, gdy akapit jest naprawdę pierwszym dzieckiem, a nie np. drugim po nagłówku.

li:first-child { font-weight: bold; }
👁 Podgląd efektu

:nth-child()

#
często na egzaminie

Element o danym numerze: (2), (odd) nieparzyste, (even) parzyste, (3n) co trzeci. Paski w tabeli!

tr:nth-child(even) { background: #eee; }
👁 Podgląd efektu

:nth-of-type()

#

Jak nth-child, ale liczy tylko elementy TEGO SAMEGO typu. span:nth-child(2) = „drugie dziecko, jeśli jest spanem”, span:nth-of-type(2) = „drugi span”.

p:nth-of-type(2) { color: red; }
👁 Podgląd efektu

:not()

#

Wybiera wszystko OPRÓCZ wskazanego. p:not(.wazne) to akapity bez klasy wazne, li:not(:last-child) to wszystkie punkty listy poza ostatnim (np. żeby dodać linię między nimi, ale nie pod ostatnim).

p:not(.wazne) { color: gray; }
👁 Podgląd efektu

::first-letter

#
często na egzaminie

Pierwsza litera elementu („pierwsza litera nagłówka 200%”). Pseudoelement – dwa dwukropki (działa też jeden).

h3::first-letter { font-size: 200%; }
👁 Podgląd efektu

::first-line

#

Pseudoelement: pierwsza linia tekstu w bloku, taka, jaka wypadła na ekranie. Gdy zwęzisz okno, do pierwszej linii trafi mniej słów i styl obejmie mniej tekstu. Zapisywany z dwoma dwukropkami.

p::first-line { font-weight: bold; }
👁 Podgląd efektu

::before / ::after

#

Pseudoelementy wstawiające dodatkową treść przed / po zawartości elementu, bez zmiany HTML. Wymagają właściwości content, np. h2::before { content: "★ "; }. Wstawionego tekstu nie da się zaznaczyć – to tylko dekoracja.

li::before { content: "✔ "; }
👁 Podgląd efektu

:focus

#

Element aktywny – np. pole, w którym miga kursor, albo przycisk wybrany klawiszem Tab. Ważne dla osób korzystających z klawiatury.

input:focus { outline: 2px solid orange; }
👁 Podgląd efektu

:checked

#

Zaznaczony checkbox lub radio. Razem z selektorem + można zmienić wygląd etykiety obok.

input:checked + label { font-weight: bold; }
👁 Podgląd efektu

:disabled / :enabled

#

Pole wyłączone (atrybut disabled) / aktywne.

input:disabled { background: #eee; }
👁 Podgląd efektu

:first-of-type / :last-of-type

#

Pierwszy / ostatni element DANEGO TYPU wśród rodzeństwa (inne znaczniki nie są liczone).

p:first-of-type { font-weight: bold; }
👁 Podgląd efektu

::placeholder

#

Wygląd szarej podpowiedzi w pustym polu formularza.

input::placeholder { color: #999; font-style: italic; }
👁 Podgląd efektu

::selection

#

Wygląd tekstu zaznaczonego myszą.

::selection { background: gold; }
👁 Podgląd efektu

::marker

#

Punktor albo numer elementu listy.

li::marker { color: red; }
👁 Podgląd efektu

Kolory i tło

color

#
często na egzaminie

Kolor TEKSTU elementu (nie tła – tło to background-color). Wartość może być nazwą (red, ForestGreen), zapisem szesnastkowym (#2A9D8F) albo rgb(42, 157, 143). Kolor dziedziczy się: ustawiony na body obowiązuje w całej stronie, dopóki inny selektor go nie zmieni.

p { color: #333333; }
👁 Podgląd efektu

background-color

#
często na egzaminie

Kolor tła elementu – wypełnia całe pudełko razem z paddingiem (aż do ramki). „Kolor tła ForestGreen” w arkuszu = background-color: ForestGreen. W przeciwieństwie do color nie dziedziczy się, ale tło rodzica i tak „prześwituje” przez przezroczyste dzieci.

header { background-color: ForestGreen; }
👁 Podgląd efektu

background (skrót)

#

Kilka właściwości tła w jednej linii: kolor, obraz, powtarzanie, położenie. Gdy arkusz podaje tylko kolor, background: kolor działa tak samo jak background-color.

body { background: #fff url("tlo.png") no-repeat right top; }
👁 Podgląd efektu

zapis kolorów

#
często na egzaminie

Nazwa (red, DarkGreen), szesnastkowo #RRGGBB (00–FF), rgb(0–255,…), rgba(…, przezroczystość 0–1), hsl(). #000000 = czarny, #FFFFFF = biały.

color: #FF0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
👁 Podgląd efektu

background-image

#
często na egzaminie

Obraz jako tło elementu: background-image: url("tlo.jpg"). Ścieżka liczy się od pliku CSS. Domyślnie obraz powtarza się jak kafelki – background-repeat: no-repeat to wyłącza, background-size: cover rozciąga obraz na cały blok, a background-position: center ustawia go na środku.

body { background-image: url("tlo.jpg"); background-size: cover; }
👁 Podgląd efektu

background-repeat

#
często na egzaminie

Czy obraz tła się powtarza: repeat (domyślnie – kafelki), no-repeat (raz), repeat-x (tylko poziomo), repeat-y (tylko pionowo).

body { background-repeat: no-repeat; }
👁 Podgląd efektu

background-size

#

Rozmiar obrazu tła: cover (wypełnia cały element, może przyciąć), contain (cały obraz widoczny), albo wymiary, np. 100px auto.

header { background-size: cover; }
👁 Podgląd efektu

background-position

#

Położenie obrazu tła: center, top right, left bottom, 50% 50%…

body { background-position: center; }
👁 Podgląd efektu

background-attachment

#

fixed – obraz tła stoi w miejscu, gdy strona się przewija.

body { background-attachment: fixed; }

linear-gradient()

#

Tło z płynnym przejściem kolorów, np. background: linear-gradient(to right, red, yellow) – od czerwonego z lewej do żółtego z prawej. Kierunek: to bottom (domyślnie), to right, albo kąt w stopniach (45deg). Kolorów może być więcej niż dwa.

background: linear-gradient(to right, red, blue);
👁 Podgląd efektu

radial-gradient()

#

Gradient kołowy – kolory rozchodzą się od środka na zewnątrz.

background: radial-gradient(circle, yellow, orange);
👁 Podgląd efektu

hsl()

#

Kolor jako odcień (0–360°), nasycenie i jasność w %. Łatwo zrobić jaśniejszą albo ciemniejszą wersję tego samego koloru.

color: hsl(200, 80%, 40%);
👁 Podgląd efektu

filter

#
często na egzaminie

Efekty graficzne elementu: grayscale (odcienie szarości), blur (rozmycie), brightness (jasność), contrast, sepia, invert, drop-shadow.

img { filter: grayscale(100%); }
img:hover { filter: none; }
👁 Podgląd efektu

opacity

#
często na egzaminie

Nieprzezroczystość całego elementu: 0 – niewidoczny, 1 – pełny. Bez jednostki.

.miniatury { opacity: 0.8; }
👁 Podgląd efektu

rgba()

#
często na egzaminie

Kolor z przezroczystością: czerwony, zielony, niebieski (0–255) i alfa (0–1). W odróżnieniu od opacity przezroczyste jest tylko to jedno (np. tło), a tekst zostaje pełny. #00838F = rgb(0, 131, 143).

background-color: rgba(0, 131, 143, 0.7);
👁 Podgląd efektu

Tekst i czcionki

font-family

#
często na egzaminie

Krój czcionki + zapasowe po przecinku. Nazwy ze spacją w cudzysłowie. Na końcu rodzina ogólna: serif, sans-serif, monospace.

font-family: "Comic Sans MS", sans-serif;
👁 Podgląd efektu

font-size

#
często na egzaminie

Rozmiar czcionki. Jednostki: px (stały rozmiar), % i em (względem czcionki rodzica – 120% oznacza o 1/5 większą), rem (względem czcionki całej strony), pt (punkty, jak w Wordzie). Arkusz „rozmiar czcionki 200%” = font-size: 200%.

p { font-size: 120%; }
👁 Podgląd efektu

font-weight

#
często na egzaminie

Grubość czcionki: normal, bold (pogrubiona) albo liczby 100–900 (400 = normal, 700 = bold). Nagłówki h1–h6 są domyślnie pogrubione – font-weight: normal to wyłącza. Liczby pośrednie działają tylko, jeśli czcionka ma takie warianty.

font-weight: bold;
👁 Podgląd efektu

font-style

#
często na egzaminie

Pochylenie czcionki: italic (kursywa) albo normal (zwykła). Arkusz „czcionka pochylona” = font-style: italic. Wartość normal przydaje się, żeby zdjąć kursywę z elementów, które mają ją domyślnie, np. <em> czy <address>.

font-style: italic;
👁 Podgląd efektu

font-variant

#

small-caps zamienia małe litery na kapitaliki – wielkie litery wielkości małych. Tekst „Ala ma kota” wygląda wtedy jak „ALA MA KOTA”, ale z mniejszymi literami tam, gdzie były małe. Wartość normal przywraca zwykłe litery.

font-variant: small-caps;
👁 Podgląd efektu

text-align

#
często na egzaminie

Wyrównanie tekstu i elementów liniowych W ŚRODKU bloku: left, right, center, justify.

h1 { text-align: center; }
👁 Podgląd efektu

text-decoration

#
często na egzaminie

Podkreślenie/przekreślenie: none, underline, line-through, overline. „Bez podkreślenia” = none.

a { text-decoration: none; }
👁 Podgląd efektu

text-transform

#

Zmienia wielkość liter bez zmiany tekstu w HTML: uppercase – WSZYSTKIE WIELKIE, lowercase – wszystkie małe, capitalize – Każde Słowo Z Wielkiej. Tekst w kodzie zostaje taki sam, zmienia się tylko wyświetlanie.

text-transform: uppercase;
👁 Podgląd efektu

letter-spacing

#
często na egzaminie

Dodatkowy odstęp między LITERAMI, np. letter-spacing: 3px. Wartość ujemna ściska litery. Nie mylić z word-spacing, który zmienia odstęp między całymi słowami.

letter-spacing: 3px;
👁 Podgląd efektu

word-spacing

#
często na egzaminie

Odstęp między SŁOWAMI (letter-spacing – między literami).

p { word-spacing: 10px; }
👁 Podgląd efektu

cursive / fantasy (rodziny ogólne)

#
często na egzaminie

Rodziny czcionek bez konkretnej nazwy – przeglądarka wybiera pasującą: serif (szeryfowa), sans-serif (gładka), monospace (stała szerokość), cursive (odręczna), fantasy (ozdobna). Pisze się je bez cudzysłowu, zwykle na końcu listy.

h1 { font-family: cursive; }
👁 Podgląd efektu

line-height

#
często na egzaminie

Wysokość linii (interlinia). Liczba bez jednostki = wielokrotność czcionki.

line-height: 2;
👁 Podgląd efektu

text-indent

#

Wcięcie pierwszej linii akapitu, jak w książce, np. text-indent: 30px. Dotyczy tylko pierwszej linii – kolejne zaczynają się od lewej krawędzi.

text-indent: 20px;
👁 Podgląd efektu

text-shadow

#

Cień tekstu: przesunięcie w poziomie, w pionie, rozmycie i kolor, np. text-shadow: 2px 2px 3px gray. Liczba ujemna przesuwa cień w lewo / w górę. Rozmycie 0 daje ostry cień. Kilka cieni oddziela się przecinkami.

text-shadow: 2px 2px 4px gray;
👁 Podgląd efektu

@font-face

#

Dołącza do strony czcionkę z pliku (.woff2, .woff, .ttf), żeby wyglądała tak samo na każdym komputerze. W bloku podajesz nazwę (font-family: "Lato"), ścieżkę do pliku (src: url("czcionka/lato.woff2")) i ewentualnie grubość. Ścieżka liczy się od pliku CSS. Potem używasz tej nazwy zwyczajnie: font-family: Lato, sans-serif.

@font-face { font-family: Moja; src: url("moja.woff2"); }

font (skrót)

#

Kilka cech czcionki w jednej linii, w kolejności: styl, grubość, rozmiar/interlinia, rodzina. Rozmiar i rodzina są obowiązkowe.

p { font: italic bold 16px/1.5 Arial, sans-serif; }
👁 Podgląd efektu

vertical-align

#

Wyrównanie w PIONIE elementów liniowych i komórek tabeli: top, middle, bottom, baseline.

td { vertical-align: middle; }
👁 Podgląd efektu

white-space

#

Jak traktować spacje i entery: normal, nowrap (tekst w jednej linii, bez łamania), pre (jak w kodzie).

nav a { white-space: nowrap; }
👁 Podgląd efektu

text-overflow

#

Co pokazać, gdy tekst się nie mieści: ellipsis = trzy kropki „…”. Działa razem z overflow: hidden i white-space: nowrap.

.tytul {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
👁 Podgląd efektu

column-count

#

Tekst w kilku kolumnach jak w gazecie; column-gap – odstęp między kolumnami.

article { column-count: 2; column-gap: 20px; }
👁 Podgląd efektu

@import

#

Dołącza inny plik CSS wewnątrz arkusza – musi stać na samym początku pliku.

@import url("reset.css");

Model pudełkowy

width / height

#
często na egzaminie

Szerokość / wysokość TREŚCI elementu (px, %, vw, vh). Procent liczony od rodzica.

section { width: 33.3%; height: 550px; }
👁 Podgląd efektu

min-height / max-width

#

Wartości minimalne i maksymalne – element może rosnąć/maleć, ale nie poza nie.

img { max-width: 100%; }
👁 Podgląd efektu

padding

#
często na egzaminie

MARGINES WEWNĘTRZNY – odstęp treści od ramki (tło go obejmuje). padding-top/right/bottom/left dla jednej strony.

padding: 10px;
padding-top: 10px;
👁 Podgląd efektu

margin

#
często na egzaminie

MARGINES ZEWNĘTRZNY – odstęp od sąsiadów, poza ramką. margin: 0 auto wyśrodkowuje blok o ustalonej szerokości.

margin: 10px 50px;
margin: 0 auto;
👁 Podgląd efektu

margin: auto

#
często na egzaminie

Marginesy „automatycznie wyliczane przez przeglądarkę” – wolne miejsce dzielone po równo na lewo i prawo, więc blok lub tabela o szerokości mniejszej niż 100% staje na środku.

table { width: 80%; margin: auto; }
👁 Podgląd efektu

skróty 1–4 wartości

#
często na egzaminie

1 wartość – wszystkie strony; 2 – góra/dół, lewo/prawo; 3 – góra, boki, dół; 4 – góra, prawo, dół, lewo (zgodnie ze wskazówkami zegara).

margin: 10px 50px 20px;
padding: 1px 2px 3px 4px;
👁 Podgląd efektu

border

#
często na egzaminie

Obramowanie: grubość styl kolor. Style: solid (ciągła), dashed (kreskowa), dotted (kropkowa), double, groove, ridge, inset, outset.

border: 2px dotted ForestGreen;
👁 Podgląd efektu

border-radius

#
często na egzaminie

Zaokrąglenie rogów elementu, np. border-radius: 20px. Im większa liczba, tym bardziej okrągłe rogi. 50% na kwadracie daje koło (np. okrągłe zdjęcie profilowe). Można podać cztery wartości – po kolei dla rogów: lewy górny, prawy górny, prawy dolny, lewy dolny.

border-radius: 20px;
👁 Podgląd efektu

border-collapse

#
często na egzaminie

Dotyczy tabel. Domyślnie każda komórka ma osobną ramkę, więc między komórkami widać podwójne linie. border-collapse: collapse łączy je w jedną linię. Arkusz „krawędzie połączone w jedno obramowanie / pojedyncze” = właśnie to.

table { border-collapse: collapse; }
👁 Podgląd efektu

box-sizing

#

border-box – width obejmuje też padding i ramkę (łatwiejsze liczenie szerokości). content-box – domyślnie, padding dolicza się do width.

* { box-sizing: border-box; }
👁 Podgląd efektu

box-shadow

#
często na egzaminie

Cień całego bloku. Kolejność: przesunięcie w poziomie, w pionie, rozmycie, (opcjonalnie) rozciągnięcie, kolor, np. box-shadow: 4px 4px 10px DimGray. Słowo inset na początku robi cień do środka bloku. „W obu osiach 4 px” = te same dwie pierwsze liczby.

box-shadow: 5px 5px 10px DimGray;
👁 Podgląd efektu

overflow

#
często na egzaminie

Co z treścią, która się nie mieści: visible (wystaje), hidden (ucięta), scroll (paski zawsze), auto (paski tylko gdy trzeba).

section { height: 300px; overflow: auto; }
👁 Podgląd efektu

border-width / border-style / border-color

#

Osobne części ramki: grubość, styl, kolor – zamiast skrótu border. Każda może mieć 1–4 wartości (dla każdego boku).

border-width: 3px;
border-style: dashed;
border-color: tomato;
👁 Podgląd efektu

outline

#

Obrys rysowany POZA ramką – nie zajmuje miejsca i nie przesuwa układu. Przeglądarka pokazuje go przy :focus.

button:focus { outline: 3px solid orange; }
👁 Podgląd efektu

border-spacing

#

Odstęp między komórkami tabeli (działa, gdy NIE ma border-collapse: collapse).

table { border-spacing: 8px; }
👁 Podgląd efektu

object-fit

#

Jak obraz wypełnia ramkę o ustalonym rozmiarze: cover (wypełnia i przycina), contain (cały obraz), fill (rozciąga).

img { width: 200px; height: 150px; object-fit: cover; }
👁 Podgląd efektu

aspect-ratio

#

Stałe proporcje elementu, np. 16 / 9 dla filmu albo 1 / 1 dla kwadratu.

.film { width: 100%; aspect-ratio: 16 / 9; }
👁 Podgląd efektu

Układ strony

display

#
często na egzaminie

Sposób wyświetlania: block (cała linia), inline (jak słowo, bez width), inline-block (jak słowo, ale z width), none (ukryty), flex, grid.

h2 { display: inline-block; width: 33%; }
👁 Podgląd efektu

float

#
często na egzaminie

Opływanie: left/right – element ustawia się przy krawędzi, a następne stają obok. Tak na egzaminie ustawia się bloki obok siebie.

section { float: left; width: 50%; }
👁 Podgląd efektu

clear

#
często na egzaminie

Każe elementowi zacząć się POD blokami pływającymi (float), zamiast wchodzić pod nie. clear: both – pod pływającymi z obu stron, left / right – tylko z jednej. Typowo ma go stopka po blokach z float: left. Arkusz „czyści opływanie” = clear: both.

footer { clear: both; }
👁 Podgląd efektu

visibility

#

hidden – element niewidoczny, ale zajmuje miejsce (inaczej niż display: none).

visibility: hidden;
👁 Podgląd efektu

position

#

static (domyślnie), relative (przesunięcie względem siebie), absolute (względem rodzica z position), fixed (względem okna – zostaje przy przewijaniu), sticky.

.menu { position: fixed; top: 0; }
👁 Podgląd efektu

top / right / bottom / left

#

Przesunięcie elementu, który ma position: relative, absolute, fixed albo sticky (przy static nie działa).

.ikona { position: absolute; top: 10px; right: 10px; }
👁 Podgląd efektu

z-index

#

Który element jest „na wierzchu”, gdy elementy się nakładają – większa liczba = wyżej. Działa przy position innym niż static.

.okno { position: fixed; z-index: 10; }
👁 Podgląd efektu

display: flex

#

Flexbox – układa dzieci w rzędzie lub kolumnie. Kierunek: flex-direction, rozłożenie: justify-content, wyrównanie w poprzek: align-items.

.kontener { display: flex; justify-content: space-between; }
👁 Podgląd efektu

flex-direction

#

Kierunek flexboxa: row (w rzędzie – domyślnie), column (w kolumnie), row-reverse i column-reverse (odwrotnie).

.menu { display: flex; flex-direction: column; }
👁 Podgląd efektu

justify-content

#

Rozłożenie elementów w głównym kierunku (w rzędzie – w poziomie): flex-start, center, flex-end, space-between (skrajne przy brzegach), space-around, space-evenly.

.kontener { display: flex; justify-content: center; }
👁 Podgląd efektu

align-items

#

Wyrównanie w poprzek kierunku (w rzędzie – w pionie): stretch (rozciągnij – domyślnie), center, flex-start, flex-end.

.kontener { display: flex; align-items: center; height: 100px; }
👁 Podgląd efektu

flex-wrap

#

wrap – elementy, które się nie mieszczą, przechodzą do nowej linii (np. galeria miniatur).

.galeria { display: flex; flex-wrap: wrap; }
👁 Podgląd efektu

gap

#

Odstęp między elementami flex i grid – bez dodawania marginesów.

.galeria { display: flex; gap: 10px; }
👁 Podgląd efektu

flex (właściwość elementu)

#

Ile wolnego miejsca bierze element flex: flex: 1 – po równo z innymi, flex: 2 – dwa razy więcej. order zmienia kolejność wyświetlania.

main { flex: 3; }
aside { flex: 1; }
👁 Podgląd efektu

display: grid

#

Siatka – kolumny i wiersze. grid-template-columns: 1fr 2fr 1fr (fr = część wolnego miejsca).

.uklad { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
👁 Podgląd efektu

grid-template-columns

#

Kolumny siatki – szerokości po spacji. repeat(3, 1fr) = trzy równe kolumny. grid-template-rows – to samo dla wierszy.

.galeria { display: grid; grid-template-columns: repeat(3, 1fr); }
👁 Podgląd efektu

grid-column / grid-row

#

Na ile kolumn/wierszy rozciąga się element siatki: 1 / 3 = od linii 1 do 3, span 2 = przez dwie komórki.

.baner { grid-column: 1 / 3; }
👁 Podgląd efektu

@media

#

Reguły tylko dla ekranów spełniających warunek – strona responsywna (telefon, druk).

@media (max-width: 600px) {
  section { width: 100%; }
}

Efekty i ruch

transition

#
często na egzaminie

Płynna zmiana właściwości w czasie (np. przy :hover). transition: 1s – wszystkie zmiany trwają sekundę.

.miniatury { opacity: 0.8; transition: 1s; }
.miniatury:hover { opacity: 1; }
👁 Podgląd efektu

transform

#

Przekształca element wizualnie, nie ruszając sąsiadów: scale(1.2) – powiększ o 20%, rotate(45deg) – obróć, translate(10px, 0) – przesuń, skew – pochyl. Kilka przekształceń wpisuje się po spacji. Często łączy się go z :hover i transition, żeby zmiana była płynna.

img:hover { transform: scale(1.05); }
👁 Podgląd efektu

cursor

#
często na egzaminie

Wygląd kursora myszy nad elementem. pointer – „łapka” jak nad linkiem (sygnał: to da się kliknąć), help – znak zapytania, not-allowed – zakaz, text – kreska do pisania. Przydatny przy elementach klikalnych, które nie są linkami, np. kafelkach z onclick.

cursor: pointer;
👁 Podgląd efektu

list-style-type

#
często na egzaminie

Wygląd punktorów listy. Dla <ul>: disc (kropka), circle (okrąg), square (kwadrat). Dla <ol>: decimal (1, 2, 3), lower-alpha (a, b, c), upper-roman (I, II, III). none usuwa punktory i numery – używa się tego przy menu z listy.

ul { list-style-type: square; }
👁 Podgląd efektu

list-style-image / list-style-position

#

Własny obrazek jako punktor / punktor wewnątrz (inside) albo na zewnątrz (outside – domyślnie) bloku tekstu.

ul { list-style-image: url("kropka.png"); }
ol { list-style-position: inside; }
👁 Podgląd efektu

@keyframes / animation

#

Animacja w dwóch krokach. Najpierw @keyframes nazwa { from { … } to { … } } opisuje, jak element ma wyglądać na początku i na końcu (albo w procentach: 0%, 50%, 100%). Potem właściwość animation: nazwa 2s infinite podpina animację do elementu: czas trwania, liczba powtórzeń, kierunek.

@keyframes migaj { 50% { opacity: 0; } }
.alarm { animation: migaj 1s infinite; }
👁 Podgląd efektu

Jednostki

px

#
często na egzaminie

Piksel – jednostka o stałym rozmiarze, niezależnym od rodzica. width: 300px to zawsze 300 pikseli, czy okno jest duże, czy małe. Na egzaminie większość wymiarów (wysokości bloków, marginesy, obramowania) jest podawana w px.

width: 300px;
👁 Podgląd efektu

%

#
często na egzaminie

Procent – zawsze względem czegoś. Przy width względem szerokości rodzica (width: 50% = połowa bloku, w którym element jest). Przy font-size względem czcionki rodzica (150% = półtora raza większa). Przy height działa tylko, gdy rodzic ma ustaloną wysokość.

width: 50%; font-size: 150%;
👁 Podgląd efektu

em / rem

#

Jednostki względne. 1em = rozmiar czcionki rodzica, więc 2em przy rodzicu 16 px to 32 px; zagnieżdżone em się mnożą. 1rem = rozmiar czcionki elementu html (zwykle 16 px) – zawsze taki sam, niezależnie od rodzica, dlatego jest bardziej przewidywalny.

font-size: 1.5em; padding: 2rem;
👁 Podgląd efektu

vw / vh

#

1vw = 1% szerokości okna przeglądarki, 1vh = 1% wysokości. height: 100vh oznacza „wysokość całego ekranu” – blok wypełni okno niezależnie od jego rozmiaru. W odróżnieniu od % nie zależy od rodzica, tylko od okna.

height: 100vh;
👁 Podgląd efektu

pt

#

Punkt typograficzny (1 pt = 1/72 cala) – jednostka z poligrafii, ta sama co w Wordzie (czcionka 12 pt). Na ekranie lepiej używać px albo em; pt ma sens głównie w stylach do druku.

font-size: 12pt;

fr

#

Jednostka siatki grid: część wolnego miejsca. 1fr 2fr = podział w proporcji 1 : 2.

grid-template-columns: 1fr 2fr;
👁 Podgląd efektu

calc()

#

Obliczenie wartości, także z różnych jednostek. Spacje wokół + i - są obowiązkowe.

main { width: calc(100% - 200px); }
👁 Podgląd efektu

zmienne CSS (var())

#

Własna wartość zapisana raz (--nazwa) i używana w wielu miejscach przez var(). Zmiana w jednym miejscu zmienia całą stronę.

:root { --glowny: #2a9d8f; }
h1 { color: var(--glowny); }
👁 Podgląd efektu

🐘 PHP

PHP działa na SERWERZE, zanim strona dotrze do przeglądarki. Kod piszesz między <?php a ?>, a to, co wypiszesz przez echo, trafia do HTML. Na egzaminie PHP łączy się z bazą (mysqli) i wstawia dane do strony. Plik musi mieć rozszerzenie .php i być otwarty przez http://localhost/…

Podstawy składni

<?php ?>

#
często na egzaminie

Początek i koniec kodu PHP w pliku. Wszystko poza nimi to zwykły HTML wysyłany bez zmian.

<p>Dziś: <?php echo date("d.m.Y"); ?></p>
👁 Podgląd efektu

echo

#
często na egzaminie

Wypisuje tekst do strony w miejscu, gdzie stoi kod PHP. Może wypisać także znaczniki HTML: echo "<p>Witaj</p>"; – przeglądarka dostanie gotowy akapit. Kilka wartości można skleić kropką: echo "Cena: " . $cena . " zł";.

echo "<li>Minecraft</li>";
👁 Podgląd efektu

;

#
często na egzaminie

Średnik kończy każdą instrukcję. Brak średnika = Parse error w NASTĘPNEJ linii.

$a = 5;
echo $a;

komentarze

#

Notatki w kodzie, które PHP pomija. // i # komentują do końca linii, /* … */ obejmuje wiele linii. Komentarze PHP nie trafiają do przeglądarki – nie zobaczysz ich nawet w źródle strony (Ctrl+U), w przeciwieństwie do komentarzy HTML.

// to jest komentarz
/* dłuższy
   komentarz */

$zmienna

#
często na egzaminie

Zmienna – „pudełko” na wartość, zawsze z $. Typ (tekst, liczba) PHP rozpoznaje sam. Wielkość liter ma znaczenie: $Cena ≠ $cena.

$cena = 49.99;
$imie = "Anna";

typy danych

#

string (tekst), int (całkowita), float (z przecinkiem – kropką!), bool (true/false), array (tablica), null (brak wartości).

$t = "tekst"; $i = 5; $f = 2.5; $b = true; $n = null;

define / const

#

Stała – wartość, której nie można zmienić po utworzeniu: define("VAT", 0.23); albo const VAT = 0.23;. Stałe pisze się bez znaku $ i zwyczajowo wielkimi literami. Przydatne do ustawień, które mają być jednakowe w całym skrypcie.

define("VAT", 0.23);
const PI = 3.14;

cudzysłowy "…" i '…'

#
często na egzaminie

W cudzysłowie "podwójnym" zmienne są podstawiane ("Cena: $cena"), w 'pojedynczym' – nie. Zmienne z tablicy w tekście bierz w klamry {$w['nazwa']}.

echo "Cześć, $imie!";
echo "Cena: {$w['cena']} zł";
👁 Podgląd efektu

. (kropka)

#
często na egzaminie

Operator łączenia tekstów (konkatenacja): "Ala" . " ma kota" daje "Ala ma kota". W PHP plus (+) służy tylko do dodawania liczb. Zapis $tekst .= "dalej"; dokleja tekst na końcu zmiennej.

echo "Masz " . $wiek . " lat";
$html .= "<li>x</li>";
👁 Podgląd efektu

(int) (float) (string)

#
często na egzaminie

Rzutowanie – zamiana typu. (int)"12abc" daje 12. Chroni zapytania SQL przed wstrzyknięciem kodu.

$id = (int)$_GET['id'];

printf() / sprintf()

#

Tekst według wzoru: %s – tekst, %d – liczba całkowita, %.2f – liczba z 2 miejscami po przecinku. printf wypisuje, sprintf zwraca gotowy tekst do zmiennej.

printf("%s kosztuje %.2f zł", "Tetris", 19.5);
$t = sprintf("%03d", 7); // "007"
👁 Podgląd efektu

heredoc <<<

#

Długi tekst w wielu liniach, w którym zmienne są podstawiane jak w "…". Wygodny do wypisywania większych kawałków HTML.

$imie = "Ola";
echo <<<HTML
<p>Witaj, $imie!</p>
HTML;
👁 Podgląd efektu

Operatory

+ - * / % **

#

Arytmetyka: dodawanie, odejmowanie, mnożenie, dzielenie, reszta z dzielenia (%), potęga (**).

echo 10 % 3;  // 1
echo 2 ** 3; // 8
👁 Podgląd efektu

++ / --

#

$i++ zwiększa zmienną o 1 (to samo co $i = $i + 1), $i-- zmniejsza o 1. Najczęściej spotkasz je w pętli for i przy licznikach, np. odwiedzin.

$i++;

+= -= *=

#

Skróty działań na zmiennej: $suma += 5 znaczy $suma = $suma + 5. Podobnie -= odejmuje, *= mnoży, /= dzieli. Typowo w pętli sumującej: $suma += $wiersz["cena"].

$suma += $cena;

== / ===

#
często na egzaminie

== równe wartością (5 == "5" → true), === równe wartością i typem (5 === "5" → false). != i !== to „różne”.

if ($x === 0) { … }

< > <= >=

#

Porównania liczb: mniejsze, większe, mniejsze lub równe, większe lub równe. Wynik to true albo false, więc używa się ich w if i w warunkach pętli. Uwaga: „co najmniej 18” to >= 18, a „więcej niż 18” to > 18.

if ($godziny >= 5) { … }

&& || !

#

Operatory logiczne. && (albo and) – oba warunki muszą być prawdziwe. || (albo or) – wystarczy jeden. ! – zaprzeczenie: !empty($x) znaczy „nie jest puste”. Przykład: if ($wiek >= 18 && $wiek <= 65).

if ($a > 0 && $b > 0) { … }

? : (trójargumentowy)

#

Skrócony if zwracający wartość: warunek ? gdy_tak : gdy_nie. Przykład: echo $ilosc > 0 ? "dostępny" : "brak";. Dobry do jednej prostej decyzji w miejscu wypisywania.

$id = isset($_GET['id']) ? (int)$_GET['id'] : 6;

??

#

Operator „wartość albo zapasowa”: $_POST["imie"] ?? "Gość" daje imię z formularza, a gdy pola nie ma (np. przy pierwszym wejściu) – "Gość". Zastępuje dłuższy zapis isset($x) ? $x : "domyślna". Nie wyświetla ostrzeżenia o brakującym kluczu.

$dzien = $_GET['dzien'] ?? 'poniedzialek';

<=> (statek kosmiczny)

#

Porównanie zwracające -1 (mniejsze), 0 (równe) lub 1 (większe). Używany przy sortowaniu własną funkcją (usort).

echo 3 <=> 5; // -1
👁 Podgląd efektu

intdiv()

#

Dzielenie całkowite – wynik bez części ułamkowej (7 / 2 daje 3.5, intdiv(7, 2) daje 3).

echo intdiv(7, 2); // 3
👁 Podgląd efektu

Instrukcje sterujące

if / elseif / else

#
często na egzaminie

Warunek: wykonaj kod tylko gdy warunek prawdziwy, w przeciwnym razie – else.

if ($wiek >= 18) {
  echo "dorosły";
} elseif ($wiek >= 13) {
  echo "nastolatek";
} else {
  echo "dziecko";
}
👁 Podgląd efektu

switch

#

Wybór jednej z wielu stałych wartości: switch ($dzien) { case 1: …; break; case 2: …; break; default: …; }. Każdy case kończy się break – inaczej PHP wykona także kod następnych przypadków. default działa, gdy nic nie pasuje.

switch ($dzien) {
  case 1: echo "pon"; break;
  default: echo "inny";
}
👁 Podgląd efektu

match

#

Nowszy odpowiednik switch (PHP 8), który zwraca wartość: $nazwa = match ($nr) { 1 => "styczeń", 2 => "luty", default => "?" };. Porównuje ściśle (===), nie wymaga break i jest krótszy. Na egzaminie wystarczy switch albo if.

$nazwa = match($nr) { 1 => "pon", 2 => "wt", default => "?" };

for

#
często na egzaminie

Pętla z licznikiem – gdy wiesz, ile razy powtórzyć: for ($i = 1; $i <= 20; $i++) { … }. Trzy części w nawiasie: start licznika; warunek kontynuacji; zmiana licznika po każdym obrocie. Przykład z arkusza: wyświetl obraz 20 razy.

for ($i = 1; $i <= 5; $i++) {
  echo "★";
}
👁 Podgląd efektu

while

#
często na egzaminie

Pętla „dopóki warunek prawdziwy”. Na egzaminie: while ($w = mysqli_fetch_array($wynik)) – dopóki są wiersze.

while ($w = mysqli_fetch_array($wynik)) {
  echo "<li>{$w['nazwa']}</li>";
}
👁 Podgląd efektu

do…while

#

Pętla, która wykona się CO NAJMNIEJ RAZ, bo warunek jest sprawdzany na końcu: do { … } while (warunek);. Różnica z while: while może nie wykonać się ani razu, do…while zawsze przynajmniej jeden obrót.

do { $i++; } while ($i < 10);

foreach

#
często na egzaminie

Pętla po wszystkich elementach tablicy: foreach ($owoce as $owoc) { echo $owoc; }. W każdym obrocie zmienna $owoc zawiera kolejny element. Wersja foreach ($tablica as $klucz => $wartosc) daje też numer lub nazwę elementu.

foreach ($gry as $gra) {
  echo "<li>$gra</li>";
}
foreach ($ceny as $nazwa => $cena) { … }
👁 Podgląd efektu

break / continue

#

Sterowanie pętlą. break natychmiast przerywa całą pętlę (np. gdy znalazłeś to, czego szukasz). continue pomija resztę bieżącego obrotu i przechodzi do następnego (np. żeby ominąć puste wiersze).

if ($i == 3) continue;

Funkcje i tablice

function

#

Własna funkcja – nazwany fragment kodu, który można wywoływać wiele razy. function brutto($netto) { return $netto * 1.23; } – w nawiasie parametry (dane wejściowe), return oddaje wynik. Wywołanie: echo brutto(100);. Zmienne utworzone w środku funkcji nie są widoczne na zewnątrz.

function brutto($netto) {
  return $netto * 1.23;
}
echo brutto(100);
👁 Podgląd efektu

tablica []

#
często na egzaminie

Lista wartości. Indeksowana od 0 ($t[0]) albo asocjacyjna z kluczami ($t['nazwa']).

$gry = ["Minecraft", "Tetris"];
$gra = ['nazwa' => 'Minecraft', 'cena' => 89];
echo $gra['cena'];
👁 Podgląd efektu

count()

#

Liczba elementów tablicy: count(["a", "b", "c"]) daje 3. Przydaje się w pętli for ($i = 0; $i < count($t); $i++). Do liczby wierszy z bazy używa się mysqli_num_rows, nie count.

echo count($gry);
👁 Podgląd efektu

sort() / rsort()

#

Sortowanie tablicy rosnąco / malejąco (asort, ksort – z zachowaniem kluczy).

sort($liczby);

in_array()

#

Sprawdza, czy wartość jest w tablicy: in_array("PHP", $jezyki) daje true albo false. Przydatne do sprawdzenia, czy wartość z formularza jest jedną z dozwolonych.

if (in_array("PHP", $kursy)) { … }

array_sum()

#

Suma wszystkich liczb w tablicy: array_sum([10, 20, 5]) daje 35. Zastępuje pętlę sumującą.

echo array_sum([1, 2, 3]); // 6
👁 Podgląd efektu

implode() / explode()

#

implode(", ", $tablica) skleja elementy tablicy w jeden tekst, wstawiając między nie separator: ["a", "b"] → "a, b". explode(",", $tekst) robi odwrotnie – tnie tekst w miejscach separatora na tablicę. Pierwszy argument to zawsze separator.

echo implode(", ", $gry);
$czesci = explode(",", "a,b,c");
👁 Podgląd efektu

array_push()

#

Dodaje element na koniec tablicy: array_push($lista, "nowy"). Krótszy zapis robiący to samo: $lista[] = "nowy";.

$gry[] = "Doom";

array_keys() / array_values()

#

Nowa tablica z samymi kluczami / samymi wartościami.

$ceny = ["chleb" => 4, "mleko" => 3];
echo implode(", ", array_keys($ceny)); // chleb, mleko
👁 Podgląd efektu

array_key_exists()

#

Czy w tablicy istnieje dany klucz (także gdy jego wartość to null – inaczej niż isset).

if (array_key_exists("cena", $gra)) { … }

array_merge()

#

Łączy kilka tablic w jedną.

$wszystko = array_merge($owoce, $warzywa);

array_slice() / array_splice()

#

array_slice – wycinek tablicy (oryginał bez zmian), array_splice – wycina elementy z oryginału.

$top3 = array_slice($wyniki, 0, 3);

array_reverse() / array_unique()

#

Tablica w odwrotnej kolejności / bez powtórzeń.

print_r(array_unique([1, 2, 2, 3])); // 1, 2, 3
👁 Podgląd efektu

array_map() / array_filter()

#

array_map – przekształca każdy element, array_filter – zostawia tylko elementy spełniające warunek.

$brutto = array_map(fn($c) => $c * 1.23, $netto);
$tanie = array_filter($ceny, fn($c) => $c < 50);

range()

#

Tablica kolejnych liczb (albo liter) od – do.

foreach (range(1, 5) as $n) echo $n; // 12345
👁 Podgląd efektu

max() / min()

#

Największa / najmniejsza z podanych wartości albo z tablicy.

echo max(4, 9, 2); // 9
echo min([7, 3, 5]); // 3
👁 Podgląd efektu

unset()

#

Usuwa zmienną albo jeden element tablicy.

unset($koszyk[2]);

usort()

#

Sortowanie tablicy własną funkcją porównującą – np. wierszy po cenie.

usort($gry, fn($a, $b) => $a['cena'] <=> $b['cena']);

Funkcje tekstowe, liczbowe, daty

strlen() / mb_strlen()

#

Długość tekstu. Z polskimi literami używaj mb_strlen (liczy znaki, nie bajty).

echo mb_strlen("Łódź"); // 4
👁 Podgląd efektu

strtoupper() / strtolower()

#

Zamiana tekstu na WIELKIE / małe litery. Zwykłe wersje nie radzą sobie z polskimi znakami (ą, ł zostaną bez zmian), dlatego dla polskiego tekstu używa się mb_strtoupper i mb_strtolower.

echo strtoupper("abc"); // ABC
👁 Podgląd efektu

ucfirst() / ucwords()

#

Wielka pierwsza litera tekstu / każdego słowa (działa dla liter bez polskich znaków).

echo ucwords("jan kowalski"); // Jan Kowalski
👁 Podgląd efektu

str_repeat()

#

Powtarza tekst podaną liczbę razy – np. gwiazdki oceny.

echo str_repeat("★", 4);
👁 Podgląd efektu

strrev()

#

Odwraca kolejność znaków (bez polskich liter).

echo strrev("abc"); // cba
👁 Podgląd efektu

str_pad()

#

Dopełnia tekst do podanej długości, np. zerami z przodu.

echo str_pad(7, 3, "0", STR_PAD_LEFT); // 007
👁 Podgląd efektu

nl2br()

#

Zamienia entery (np. z pola <textarea>) na <br>, żeby nowe linie były widoczne na stronie.

echo nl2br(htmlspecialchars($_POST['opis']));
👁 Podgląd efektu

strcmp()

#

Porównanie dwóch tekstów: 0 – takie same, liczba ujemna – pierwszy jest wcześniej w alfabecie. strcasecmp – bez rozróżniania wielkości liter.

if (strcmp($a, $b) == 0) echo "takie same";

substr()

#
często na egzaminie

Wycina fragment tekstu: substr($tekst, start, długość). Pozycje liczone są OD ZERA: substr("Kraków", 0, 3) daje "Kra". Ujemny start liczy od końca: substr($t, -2) to dwa ostatnie znaki. Dla polskich liter bezpieczniej mb_substr.

echo substr("18:00:00", 0, 5); // 18:00
👁 Podgląd efektu

str_replace()

#

Zamienia fragment tekstu na inny: str_replace("szukane", "zamiennik", $tekst). Przykład: str_replace(",", ".", "12,5") daje "12.5" – zamiana polskiego przecinka na kropkę przed obliczeniami. Zamienia wszystkie wystąpienia.

echo str_replace(" ", "_", "moje zdjęcie");
👁 Podgląd efektu

trim()

#

Usuwa spacje (i znaki nowej linii) z początku i końca tekstu: trim(" Ola ") daje "Ola". Przydatne przy danych z formularza, bo użytkownik często doda przypadkową spację.

$imie = trim($_POST['imie']);

strpos()

#

Pozycja, na której zaczyna się fragment w tekście (od zera), albo false, gdy go nie ma. Uwaga: gdy fragment jest na samym początku, wynik to 0, które w if wygląda jak fałsz – dlatego porównuje się ściśle: strpos($t, "x") !== false. W PHP 8 prościej: str_contains($t, "x").

if (str_contains($email, "@")) { … }

preg_match()

#

Sprawdza, czy tekst pasuje do wzorca (wyrażenia regularnego): preg_match("/^[0-9]{2}-[0-9]{3}$/", $kod) zwraca 1, gdy kod pocztowy ma format 00-000, i 0, gdy nie. Wzorzec zapisuje się między ukośnikami.

if (preg_match('/^\d{11}$/', $pesel)) echo "OK";

round() / floor() / ceil()

#

Zaokrąglanie: round(2.567, 2) daje 2.57 (zwykłe, do podanej liczby miejsc), floor(2.9) daje 2 (zawsze w dół), ceil(2.1) daje 3 (zawsze w górę). ceil przydaje się np. do liczby potrzebnych autobusów albo stron.

echo round(4.567, 2); // 4.57
👁 Podgląd efektu

number_format()

#

Formatuje liczbę do wyświetlenia: number_format(1234.5, 2, ",", " ") daje "1 234,50". Argumenty: liczba, miejsca po przecinku, znak dziesiętny, separator tysięcy. Wynik jest tekstem – do dalszych obliczeń używaj oryginalnej liczby.

echo number_format(1234.5, 2, ",", " "); // 1 234,50
👁 Podgląd efektu

rand()

#

Losowa liczba całkowita z przedziału: rand(1, 6) – jak rzut kostką, oba końce włącznie. Do losowania elementu tablicy: $t[rand(0, count($t) - 1)] albo array_rand($t).

echo rand(1, 6);
👁 Podgląd efektu

abs() / pow() / sqrt()

#

Wartość bezwzględna, potęga, pierwiastek kwadratowy. Stała M_PI albo funkcja pi() to liczba π.

echo abs(-5);     // 5
echo pow(2, 10);  // 1024
echo sqrt(16);    // 4
👁 Podgląd efektu

date()

#
często na egzaminie

Data i czas jako tekst według wzoru: d dzień, m miesiąc, Y rok, H godzina, i minuty, N dzień tygodnia (1–7).

echo date("d.m.Y H:i");
👁 Podgląd efektu

time() / strtotime() / mktime()

#

Znacznik czasu – liczba sekund od 1.01.1970. time() – teraz, strtotime() – z tekstu ("2026-12-24", "+7 days"), mktime() – z liczb. Różnica dwóch znaczników / 86400 = liczba dni.

$dni = (strtotime("2026-12-24") - time()) / 86400;
echo date("d.m.Y", strtotime("+7 days"));
👁 Podgląd efektu

checkdate()

#

Czy data istnieje: checkdate(miesiąc, dzień, rok).

var_dump(checkdate(2, 30, 2026)); // false
👁 Podgląd efektu

is_int() / is_string() / gettype()

#

Sprawdzanie typu zmiennej: is_int, is_float, is_string, is_array, is_bool; gettype zwraca nazwę typu.

echo gettype(5.5); // double
👁 Podgląd efektu

isset()

#
często na egzaminie

Czy zmienna istnieje i nie jest null. Na egzaminie: czy formularz został wysłany.

if (isset($_POST['imie'])) { … }

empty()

#

Sprawdza, czy zmienna jest „pusta”: true dla "", 0, "0", null, pustej tablicy i dla nieistniejącej zmiennej (bez ostrzeżenia). !empty($_POST["imie"]) znaczy „pole wysłane i coś w nim wpisano”. Pułapka: wpisane „0” też jest uznane za puste.

if (!empty($_POST['uwagi'])) { … }

is_numeric()

#

Czy wartość jest liczbą – także liczbą zapisaną jako tekst: is_numeric("12.5") daje true, is_numeric("12a") false. Przydatne do sprawdzenia danych z formularza, zanim użyjesz ich w obliczeniach.

if (is_numeric($_POST['ilosc'])) { … }

var_dump() / print_r()

#

Narzędzia do szukania błędów – pokazują, co naprawdę jest w zmiennej. var_dump pokazuje typ i wartość (np. string(2) "12"), print_r czytelnie wypisuje tablice. Typowe użycie: var_dump($_POST); żeby zobaczyć, co przyszło z formularza.

var_dump($wiersz);
👁 Podgląd efektu

htmlspecialchars()

#
często na egzaminie

Zamienia < > " & na encje – tekst od użytkownika nie zamieni się w kod HTML (ochrona przed XSS).

echo htmlspecialchars($_POST['komentarz']);
👁 Podgląd efektu

Formularze, adresy, sesje

$_POST

#
często na egzaminie

Tablica z danymi formularza wysłanego metodą POST. Klucz = atrybut name pola.

$ilosc = (int)$_POST['ilosc'];

$_GET

#
często na egzaminie

Tablica z parametrami z adresu: plik.php?id=5 → $_GET['id'] = "5". Też formularz z method="get".

$id = (int)$_GET['id'];

$_SESSION

#

Dane pamiętane między stronami dla jednego użytkownika (koszyk, logowanie). Wymaga session_start() na początku pliku.

session_start();
$_SESSION['login'] = "anna";

$_SERVER

#

Tablica z informacjami o bieżącym żądaniu i serwerze. $_SERVER["REQUEST_METHOD"] mówi, czy strona została otwarta zwykle (GET), czy wysłana formularzem (POST). $_SERVER["REMOTE_ADDR"] to adres IP odwiedzającego, $_SERVER["PHP_SELF"] – ścieżka bieżącego skryptu.

if ($_SERVER['REQUEST_METHOD'] === 'POST') { … }

$_FILES / move_uploaded_file()

#

Plik przesłany przez <input type="file">: name (nazwa), size (rozmiar), tmp_name (plik tymczasowy), error. move_uploaded_file przenosi go do docelowego folderu.

$plik = $_FILES['zdjecie'];
move_uploaded_file($plik['tmp_name'], "zdjecia/" . basename($plik['name']));

filter_var()

#

Sprawdzenie albo oczyszczenie wartości: FILTER_VALIDATE_EMAIL (e-mail), FILTER_VALIDATE_INT (liczba całkowita).

if (filter_var($email, FILTER_VALIDATE_EMAIL)) { … }

mail()

#

Wysłanie e-maila z serwera: adresat, temat, treść. Wymaga skonfigurowanej poczty na serwerze – w XAMPP zwykle nie działa.

mail("jan@example.com", "Rezerwacja", "Dziękujemy za rezerwację.");

header()

#

Wysyła nagłówek HTTP, np. przekierowanie. Musi być przed jakimkolwiek wypisaniem treści.

header("Location: dziekujemy.php");
exit;

include / require

#

Wklejenie innego pliku PHP (np. wspólny nagłówek). require przy braku pliku przerywa skrypt, include tylko ostrzega.

require "polaczenie.php";

password_hash() / password_verify()

#

Bezpieczne przechowywanie haseł. password_hash($haslo, PASSWORD_DEFAULT) zamienia hasło na nieodwracalny skrót – to on trafia do bazy, nie samo hasło. Przy logowaniu password_verify($wpisane, $skrotZBazy) sprawdza, czy hasło pasuje. Nawet ktoś, kto wykradnie bazę, nie odczyta haseł.

$h = password_hash($haslo, PASSWORD_DEFAULT);
if (password_verify($haslo, $h)) { … }

Baza danych – mysqli

mysqli_connect()

#
często na egzaminie

Połączenie z serwerem bazy: (serwer, użytkownik, hasło, baza). Na egzaminie: localhost, root, "" (bez hasła), nazwa z arkusza.

$polaczenie = mysqli_connect("localhost", "root", "", "sklep");

mysqli_query()

#
często na egzaminie

Wysyła zapytanie SQL. Przy SELECT zwraca wynik (do pętli), przy INSERT/UPDATE/DELETE – true/false.

$wynik = mysqli_query($polaczenie, "SELECT * FROM gry;");

mysqli_fetch_array()

#
często na egzaminie

Pobiera NASTĘPNY wiersz wyniku jako tablicę – dostęp po nazwie kolumny ($w['nazwa']) i po numerze ($w[0]). Gdy wierszy brak – zwraca null (koniec pętli).

while ($w = mysqli_fetch_array($wynik)) {
  echo $w['nazwa'];
}
👁 Podgląd efektu

mysqli_fetch_row()

#
często na egzaminie

Wiersz jako tablica numerowana – tylko $w[0], $w[1] (kolejność jak w SELECT).

$w = mysqli_fetch_row($wynik);
echo $w[0];
👁 Podgląd efektu

mysqli_fetch_assoc()

#

Pobiera kolejny wiersz wyniku jako tablicę, w której kluczami są nazwy kolumn: $w["nazwa"]. W odróżnieniu od mysqli_fetch_array nie da się odwołać po numerze ($w[0]). Zwraca null, gdy wierszy już nie ma – dlatego działa w pętli while.

$w = mysqli_fetch_assoc($wynik);

mysqli_num_rows()

#
często na egzaminie

Liczba wierszy zwróconych przez SELECT. Przydaje się do komunikatu „brak wyników”: if (mysqli_num_rows($wynik) == 0) echo "Nic nie znaleziono";. Nie działa dla INSERT/UPDATE/DELETE – tam używa się mysqli_affected_rows.

if (mysqli_num_rows($wynik) == 0) echo "Brak";
👁 Podgląd efektu

mysqli_num_fields()

#

Liczba kolumn w wyniku zapytania. Przydaje się, gdy wypisujesz tabelę HTML bez znajomości liczby kolumn – pętla for od 0 do mysqli_num_fields($wynik) - 1 przejdzie po wszystkich polach wiersza.

echo mysqli_num_fields($wynik);

mysqli_affected_rows()

#

Ile wierszy zmieniło ostatnie zapytanie INSERT, UPDATE albo DELETE. Pozwala sprawdzić, czy operacja coś zrobiła – np. 0 po UPDATE oznacza, że nie było rekordu o podanym id. Argumentem jest połączenie, nie wynik.

echo mysqli_affected_rows($polaczenie);

mysqli_fetch_all()

#

Wszystkie wiersze wyniku naraz jako tablica wierszy. MYSQLI_ASSOC – klucze to nazwy kolumn.

$wiersze = mysqli_fetch_all($wynik, MYSQLI_ASSOC);
foreach ($wiersze as $w) echo $w['nazwa'];
👁 Podgląd efektu

mysqli_insert_id()

#

Numer id (AUTO_INCREMENT) wiersza dodanego ostatnim INSERT na tym połączeniu.

mysqli_query($pol, "INSERT INTO klienci (imie) VALUES ('Ola')");
echo mysqli_insert_id($pol);
👁 Podgląd efektu

mysqli_set_charset()

#

Kodowanie znaków połączenia. Z "utf8" polskie litery z bazy nie zamienią się w „krzaczki”.

mysqli_set_charset($polaczenie, "utf8");

mysqli_connect_error()

#

Opis błędu, gdy połączenie się nie udało (zła nazwa bazy, wyłączony MySQL w XAMPP). Uwaga: od PHP 8.1 mysqli przy błędzie domyślnie zatrzymuje skrypt komunikatem „Fatal error: Uncaught mysqli_sql_exception” – sprawdzenie if (!$pol) działa dopiero po wyłączeniu wyjątków (mysqli_report) albo trzeba użyć try / catch.

mysqli_report(MYSQLI_REPORT_OFF);
$pol = mysqli_connect("localhost", "root", "", "sklep");
if (!$pol) die("Błąd: " . mysqli_connect_error());
👁 Podgląd efektu

mysqli_error()

#

Zwraca tekst ostatniego błędu bazy danych, np. „Unknown column cenna”. Najszybszy sposób na znalezienie literówki w zapytaniu: mysqli_query($con, $sql) or die(mysqli_error($con));.

echo mysqli_error($polaczenie);

mysqli_select_db()

#

Zmienia aktywną bazę danych na już otwartym połączeniu. Zwykle niepotrzebna, bo nazwę bazy podaje się jako czwarty argument mysqli_connect. Pojawia się w tabeli funkcji w arkuszach, więc warto ją rozpoznawać.

mysqli_select_db($polaczenie, "sklep");

mysqli_close()

#
często na egzaminie

Zamyka połączenie z bazą – osobne kryterium na egzaminie. Na KOŃCU strony, po ostatnim skrypcie.

mysqli_close($polaczenie);

mysqli_real_escape_string()

#

Zabezpiecza tekst przed wstawieniem do zapytania SQL – poprzedza apostrofy i inne specjalne znaki ukośnikiem. Bez tego apostrof w nazwisku (O'Hara) zepsuje zapytanie, a złośliwy użytkownik mógłby dopisać własny kod SQL (SQL injection). Pierwszym argumentem jest połączenie z bazą.

$imie = mysqli_real_escape_string($pol, $_POST['imie']);

prepare (zapytania przygotowane)

#

Najbezpieczniejszy sposób wstawiania danych do SQL – wartości osobno od zapytania (mysqli_prepare albo PDO).

$st = mysqli_prepare($pol, "SELECT * FROM gry WHERE id = ?");
mysqli_stmt_bind_param($st, "i", $id);

mysqli obiektowo

#

Ten sam mysqli w zapisie obiektowym: new mysqli(…) zamiast mysqli_connect, $pol->query() zamiast mysqli_query, $wynik->fetch_assoc(), $pol->close(). Działa identycznie – wybierz jeden styl.

$pol = new mysqli("localhost", "root", "", "sklep");
$wynik = $pol->query("SELECT nazwa FROM gry");
while ($w = $wynik->fetch_assoc()) echo $w['nazwa'];
$pol->close();
👁 Podgląd efektu

PDO

#

Druga biblioteka PHP do baz danych – obiektowa, obsługuje wiele systemów (MySQL, SQLite, PostgreSQL). Na egzaminie używasz mysqli z arkusza.

$pdo = new PDO("mysql:host=localhost;dbname=sklep", "root", "");

Programowanie obiektowe i inne

class / new

#

Klasa to „przepis” na obiekty: opisuje, jakie dane (pola) i działania (metody) ma mieć obiekt. new tworzy konkretny obiekt według przepisu: $auto = new Samochod();. Z jednej klasy można stworzyć wiele obiektów, każdy z własnymi danymi.

class Gra {
  public $nazwa;
  public function __construct($n) { $this->nazwa = $n; }
}
$g = new Gra("Tetris");

public / private / protected

#

Widoczność pól i metod: public – wszędzie, private – tylko w klasie (hermetyzacja), protected – w klasie i klasach dziedziczących.

private $haslo;

extends

#

Dziedziczenie: class Ciezarowka extends Samochod oznacza, że Ciezarowka automatycznie ma wszystkie pola i metody Samochodu, a może dodać własne albo zmienić odziedziczone. Pozwala nie powtarzać wspólnego kodu.

class GraPlanszowa extends Gra { }

static

#

Pole lub metoda należąca do KLASY, a nie do pojedynczego obiektu. Wywołanie przez Klasa::nazwa (wewnątrz klasy self::).

class Licznik {
  public static $n = 0;
}
Licznik::$n++;

interface / abstract

#

Interfejs – lista metod, które klasa musi mieć (implements). Klasa abstrakcyjna – nie można utworzyć jej obiektu, służy tylko do dziedziczenia.

interface Ksztalt {
  public function pole();
}
class Kolo implements Ksztalt { … }

try / catch

#

Obsługa wyjątków: kod w try, a gdy coś zgłosi błąd (throw) – wykonuje się catch.

try {
  $x = dziel(1, 0);
} catch (Exception $e) {
  echo $e->getMessage();
}

file_get_contents() / file_put_contents()

#

file_get_contents("plik.txt") wczytuje cały plik do jednej zmiennej tekstowej. file_put_contents("plik.txt", $tekst) zapisuje tekst do pliku (nadpisuje go), a z flagą FILE_APPEND dopisuje na końcu. Proste sposoby pracy z plikami bez otwierania i zamykania.

file_put_contents("licznik.txt", $n);
$n = file_get_contents("licznik.txt");

json_encode() / json_decode()

#

Zamiana tablicy PHP na tekst JSON i odwrotnie (wymiana danych z JavaScriptem).

echo json_encode(["nazwa" => "Tetris"]);
👁 Podgląd efektu

exit / die

#

Natychmiast kończą działanie skryptu – nic po nich się nie wykona. Używa się ich np. po przekierowaniu header("Location: …") albo przy krytycznym błędzie: die("Brak połączenia z bazą").

header("Location: a.php"); exit;

🗄️ SQL

SQL to język zapytań do bazy danych. Zapytanie czyta się jak zdanie po angielsku: SELECT (co) FROM (skąd) WHERE (które) ORDER BY (jak ułożyć) LIMIT (ile). Kolejność słów jest sztywna. Tekst piszemy w apostrofach, liczby bez. Słowa kluczowe zwyczajowo WIELKIMI literami.

Pobieranie danych – SELECT

SELECT

#
często na egzaminie

Wybiera kolumny do pokazania. „Wybierające jedynie pola X, Y” = SELECT X, Y – wypisz dokładnie te kolumny.

SELECT nazwa, cena FROM gry;
👁 Podgląd efektu

SELECT *

#
często na egzaminie

Gwiazdka = wszystkie kolumny. Wygodne do podglądu, ale gdy arkusz chce „jedynie” wybranych pól – błąd.

SELECT * FROM gry;
👁 Podgląd efektu

FROM

#
często na egzaminie

Mówi, z której tabeli pobierać dane: SELECT nazwa FROM gry. Przy łączeniu tabel po FROM stoi pierwsza tabela, a kolejne dołącza się przez JOIN. Kolejność słów w zapytaniu jest stała: SELECT, FROM, JOIN, WHERE, GROUP BY, HAVING, ORDER BY, LIMIT.

SELECT * FROM klienci;

WHERE

#
często na egzaminie

Warunek wybierający wiersze: tylko te, dla których warunek jest prawdziwy, trafią do wyniku. Teksty i daty zapisuje się w apostrofach (WHERE miasto = 'Kraków'), liczby bez. Warunki łączy się słowami AND i OR. WHERE działa też w UPDATE i DELETE – tam decyduje, które wiersze zmienić lub usunąć.

SELECT * FROM gry WHERE cena < 50;
👁 Podgląd efektu

AND / OR / NOT

#
często na egzaminie

Łączenie warunków: oba prawdziwe (AND), przynajmniej jeden (OR), zaprzeczenie (NOT). Każdy warunek pełny: miasto='A' OR miasto='B'.

WHERE cena < 50 AND punkty > 80
👁 Podgląd efektu

= <> != < > <= >=

#

Porównania w warunkach WHERE i HAVING. W SQL równość to JEDNO = (nie == jak w PHP i JS). „Różne od” zapisuje się <> albo !=. Teksty porównuje się alfabetycznie, daty – chronologicznie, a z NULL nie da się porównać żadnym z tych znaków (do tego jest IS NULL).

WHERE rok <> 2020
👁 Podgląd efektu

BETWEEN

#

Wartość w przedziale razem z końcami: WHERE cena BETWEEN 50 AND 100 to cena od 50 do 100 włącznie. Działa też dla dat: BETWEEN '2026-01-01' AND '2026-01-31'. Kolejność ma znaczenie – najpierw mniejsza wartość.

WHERE cena BETWEEN 20 AND 60
👁 Podgląd efektu

IN

#

Sprawdza, czy wartość jest na liście: WHERE miasto IN ('Kraków', 'Gdańsk') znaczy to samo co miasto = 'Kraków' OR miasto = 'Gdańsk', tylko krócej. Zamiast listy można podać podzapytanie, które tę listę zwróci.

WHERE miasto IN ('Kraków', 'Gdańsk')
👁 Podgląd efektu

NOT IN

#
często na egzaminie

Wartość, której NIE MA na liście. Najczęściej z podzapytaniem: „osoby, których id nie pojawia się w rejestrze”.

SELECT id, nazwisko FROM personel
WHERE id NOT IN (SELECT personel_id FROM rejestr);
👁 Podgląd efektu

LIKE

#
często na egzaminie

Dopasowanie do wzorca: % – dowolny ciąg znaków (także pusty), _ – dokładnie jeden znak.

WHERE nazwa LIKE 'W%'   -- zaczyna się na W
WHERE nazwa LIKE '%a'   -- kończy na a
👁 Podgląd efektu

IS NULL / IS NOT NULL

#

NULL oznacza „brak wartości” (pole puste, nie zero i nie pusty tekst). Sprawdza się go wyłącznie przez IS NULL albo IS NOT NULL. Zapis = NULL nigdy nie zadziała, bo z brakiem wartości nie da się niczego porównać – wynik jest zawsze „nieznany”.

WHERE telefon IS NULL
👁 Podgląd efektu

ORDER BY

#
często na egzaminie

Sortowanie: ASC rosnąco (domyślnie), DESC malejąco. Można po kilku kolumnach.

ORDER BY cena DESC, nazwa ASC
👁 Podgląd efektu

LIMIT

#
często na egzaminie

Ile wierszy pokazać – zawsze na końcu zapytania. LIMIT 5, 10 = pomiń 5, pokaż 10.

SELECT * FROM gry ORDER BY punkty DESC LIMIT 5;
👁 Podgląd efektu

DISTINCT

#

Usuwa powtórzenia z wyniku: SELECT DISTINCT miasto FROM klienci pokaże każde miasto tylko raz, choć mieszka tam wielu klientów. Stoi zaraz po SELECT. Gdy wybierasz kilka kolumn, DISTINCT usuwa wiersze, w których WSZYSTKIE wybrane kolumny się powtarzają.

SELECT DISTINCT miasto FROM klienci;
👁 Podgląd efektu

AS (alias)

#
często na egzaminie

Własna nazwa kolumny lub tabeli w wyniku. Alias ze spacją w cudzysłowie lub odwrotnych apostrofach.

SELECT AVG(cena) AS `Średnia cena` FROM gry;
👁 Podgląd efektu

kolumna wyliczana

#
często na egzaminie

W SELECT można liczyć: + - * /. Wynik pojawia się jako nowa kolumna (baza go nie zapisuje).

SELECT nazwa, liczba * cena AS "Do zapłaty" FROM zamowienia;
👁 Podgląd efektu

ORDER BY RAND()

#
często na egzaminie

Ustawia wiersze w losowej kolejności – przy każdym wykonaniu innej. Z LIMIT losuje rekordy: ORDER BY RAND() LIMIT 3 to trzy losowe wiersze (np. „polecane produkty”).

SELECT * FROM pojazdy ORDER BY RAND() LIMIT 2;
👁 Podgląd efektu

kolejność klauzul

#
często na egzaminie

Kolejność słów w SELECT jest sztywna: SELECT → FROM → JOIN … ON → WHERE → GROUP BY → HAVING → ORDER BY → LIMIT. Zamiana kolejności (np. WHERE po ORDER BY) to błąd składni.

SELECT gatunek_id, COUNT(*) AS ile
FROM gry
WHERE cena > 10
GROUP BY gatunek_id
HAVING COUNT(*) > 1
ORDER BY ile DESC
LIMIT 3;
👁 Podgląd efektu

aliasy tabel

#

Krótka nazwa tabeli nadana po FROM lub JOIN (z AS albo bez). Skraca zapytania z JOIN: g.nazwa zamiast gry.nazwa.

SELECT g.nazwa, t.nazwa
FROM gry AS g
JOIN gatunki t ON g.gatunek_id = t.id;
👁 Podgląd efektu

CASE WHEN

#

Warunek wewnątrz zapytania – inna wartość w zależności od danych. Kończy się słowem END.

SELECT nazwa,
  CASE WHEN cena < 50 THEN 'tania' ELSE 'droga' END AS kategoria
FROM gry;
👁 Podgląd efektu

IF(warunek, a, b)

#

IF(warunek, gdy_prawda, gdy_fałsz) – krótki warunek w MySQL (to funkcja SQL, nie instrukcja if z PHP/JS).

SELECT nazwa, IF(cena > 100, 'droga', 'tania') AS opis FROM gry;
👁 Podgląd efektu

IFNULL() / COALESCE()

#

Wartość zastępcza, gdy pole jest puste (NULL). COALESCE przyjmuje kilka wartości i zwraca pierwszą niepustą.

SELECT imie, IFNULL(telefon, 'brak') AS telefon FROM klienci;
👁 Podgląd efektu

Funkcje agregujące i grupowanie

COUNT()

#
często na egzaminie

Liczba wierszy. COUNT(*) – wszystkich, COUNT(kolumna) – z wartością (bez NULL).

SELECT COUNT(*) FROM gry WHERE cena > 100;
👁 Podgląd efektu

SUM()

#
często na egzaminie

Suma wartości kolumny z wybranych wierszy: SELECT SUM(ilosc) FROM zakupy. Z GROUP BY liczy sumę osobno dla każdej grupy. Działa tylko na liczbach. Pułapka z arkuszy: „ile osób” przy rezerwacjach dla kilku osób to SUM(osob), a nie COUNT(*).

SELECT SUM(osob) FROM rezerwacje;
👁 Podgląd efektu

AVG()

#
często na egzaminie

Średnia arytmetyczna wartości kolumny: suma podzielona przez liczbę wierszy (wiersze z NULL są pomijane). Wynik często ma wiele miejsc po przecinku – arkusze każą go zaokrąglić: ROUND(AVG(cena), 2).

SELECT AVG(cena) FROM gry;
👁 Podgląd efektu

MIN() / MAX()

#
często na egzaminie

Najmniejsza / największa wartość w kolumnie. Działa dla liczb, dat (najwcześniejsza / najpóźniejsza) i tekstów (alfabetycznie). Uwaga: zwraca samą wartość, a nie cały wiersz – żeby poznać nazwę najdroższego produktu, użyj ORDER BY cena DESC LIMIT 1.

SELECT MAX(cena) FROM gry;
👁 Podgląd efektu

GROUP BY

#
często na egzaminie

Grupuje wiersze o tej samej wartości – funkcja agregująca liczy osobno dla każdej grupy. W SELECT tylko kolumna grupująca i funkcje agregujące.

SELECT gatunek_id, COUNT(*) FROM gry GROUP BY gatunek_id;
👁 Podgląd efektu

HAVING

#

Warunek na GRUPACH (po GROUP BY) – np. tylko grupy z COUNT > 2. WHERE filtruje wiersze przed grupowaniem.

SELECT miasto, COUNT(*) FROM klienci GROUP BY miasto HAVING COUNT(*) > 2;
👁 Podgląd efektu

COUNT(DISTINCT …)

#

Ile RÓŻNYCH wartości ma kolumna – powtórzenia liczone raz.

SELECT COUNT(DISTINCT gatunek_id) FROM gry;
👁 Podgląd efektu

GROUP_CONCAT()

#

Skleja wartości z każdej grupy w jeden tekst (MySQL/MariaDB). SEPARATOR – znak między nimi.

SELECT gatunek_id, GROUP_CONCAT(nazwa SEPARATOR ', ')
FROM gry GROUP BY gatunek_id;
👁 Podgląd efektu

Łączenie tabel

JOIN … ON

#
często na egzaminie

Łączy wiersze dwóch tabel według relacji: ON klucz_obcy = klucz_główny. „Należy posłużyć się relacją” = JOIN. Kolumny podaj z nazwą tabeli: gry.nazwa.

SELECT gry.nazwa, gatunki.nazwa
FROM gry JOIN gatunki ON gry.gatunek_id = gatunki.id;
👁 Podgląd efektu

LEFT JOIN / RIGHT JOIN

#

Jak JOIN, ale zachowuje WSZYSTKIE wiersze lewej (prawej) tabeli – brakujące dane jako NULL.

SELECT k.imie, z.id FROM klienci k LEFT JOIN zakupy z ON z.klient_id = k.id;
👁 Podgląd efektu

JOIN trzech tabel

#
często na egzaminie

Kolejne JOIN … ON dopisuje się jeden po drugim – każda relacja ma własny warunek ON. Typowe dla tabeli pośredniczącej (relacja wiele do wielu).

SELECT k.nazwisko, g.nazwa
FROM zakupy z
JOIN klienci k ON z.klient_id = k.id
JOIN gry g ON z.gra_id = g.id;
👁 Podgląd efektu

tabela.kolumna

#
często na egzaminie

Pełna nazwa kolumny – konieczna, gdy dwie tabele mają kolumnę o tej samej nazwie (np. id).

pojazdy.kolor = kolory.id

podzapytanie

#

Zapytanie umieszczone w nawiasie wewnątrz innego zapytania. Najpierw wykonuje się wewnętrzne, a jego wynik jest użyty w zewnętrznym. Przykład: WHERE cena > (SELECT AVG(cena) FROM gry) – gry droższe niż średnia. Z NOT IN: osoby, których id nie ma w drugiej tabeli.

SELECT nazwa FROM gry WHERE cena > (SELECT AVG(cena) FROM gry);
👁 Podgląd efektu

UNION

#

Skleja wyniki dwóch zapytań SELECT jeden pod drugim w jedną listę. Oba zapytania muszą zwracać tyle samo kolumn podobnego typu. UNION usuwa powtórzenia, UNION ALL zostawia wszystkie wiersze.

SELECT miasto FROM klienci UNION SELECT miasto FROM sklepy;
👁 Podgląd efektu

Zmiana danych

INSERT INTO … VALUES

#
często na egzaminie

Dodaje wiersz. Lista kolumn i wartości w tej samej kolejności. Klucz z AUTO_INCREMENT pomijasz.

INSERT INTO gry (nazwa, cena) VALUES ('Tetris', 19.99);
👁 Podgląd efektu

UPDATE … SET

#
często na egzaminie

Zmienia istniejące wiersze. ZAWSZE z WHERE – bez niego zmienisz całą tabelę!

UPDATE gry SET cena = cena + 2 WHERE gatunek_id = 3;
👁 Podgląd efektu

DELETE FROM

#
często na egzaminie

Usuwa wiersze z tabeli: DELETE FROM zamowienia WHERE id = 5. Bez WHERE usunie WSZYSTKIE wiersze (tabela zostanie, ale pusta). Operacji nie da się cofnąć, dlatego zawsze sprawdź warunek najpierw w SELECT.

DELETE FROM gry WHERE id = 7;
👁 Podgląd efektu

TRUNCATE

#

Opróżnia całą tabelę (szybciej niż DELETE, licznik AUTO_INCREMENT od nowa).

TRUNCATE TABLE logi;
👁 Podgląd efektu

INSERT wielu wierszy

#

Kilka wierszy w jednym poleceniu – nawiasy z wartościami oddzielone przecinkami.

INSERT INTO gry (nazwa, cena) VALUES
  ('Doom', 39),
  ('Quake', 29);
👁 Podgląd efektu

INSERT … SELECT

#

Wstawia do tabeli wiersze będące wynikiem zapytania (bez VALUES).

INSERT INTO archiwum (nazwa, cena)
SELECT nazwa, cena FROM gry WHERE cena < 10;

Struktura bazy

CREATE DATABASE

#
często na egzaminie

Tworzy nową, pustą bazę danych: CREATE DATABASE sklep CHARACTER SET utf8mb4 COLLATE utf8mb4_polish_ci. Zestaw znaków i porównywanie decydują o obsłudze polskich liter i kolejności sortowania. Na egzaminie zwykle robi się to w phpMyAdmin, wybierając utf8_polish_ci.

CREATE DATABASE sklep CHARACTER SET utf8mb4 COLLATE utf8mb4_polish_ci;

CREATE TABLE

#
często na egzaminie

Tworzy tabelę – w nawiasie wypisujesz kolumny po przecinku, każdą z nazwą, typem i ograniczeniami: CREATE TABLE klienci (id INT AUTO_INCREMENT PRIMARY KEY, imie VARCHAR(20) NOT NULL). Na końcu można dodać klucze obce. Słowa z arkusza tłumaczy się na typy: „tekst do 20 znaków” = VARCHAR(20), „data” = DATE.

CREATE TABLE gry (
  id INT PRIMARY KEY AUTO_INCREMENT,
  nazwa VARCHAR(50) NOT NULL
);
👁 Podgląd efektu

ALTER TABLE

#
często na egzaminie

Zmienia strukturę: ADD (dodaj kolumnę), DROP COLUMN, MODIFY / CHANGE (zmień typ, nazwę).

ALTER TABLE gry ADD ocena INT;

DROP COLUMN / MODIFY / CHANGE / RENAME

#
często na egzaminie

Odmiany ALTER TABLE: DROP COLUMN usuwa kolumnę, MODIFY zmienia typ, CHANGE zmienia nazwę i typ, RENAME TO zmienia nazwę całej tabeli.

ALTER TABLE gry DROP COLUMN opis;
ALTER TABLE gry MODIFY nazwa VARCHAR(100);
ALTER TABLE gry CHANGE cena cena_brutto DECIMAL(6,2);
ALTER TABLE gry RENAME TO produkty;

DROP

#

Usuwa całą tabelę (DROP TABLE nazwa) albo całą bazę (DROP DATABASE nazwa) razem z danymi – nieodwracalnie. W ALTER TABLE słowo DROP COLUMN usuwa jedną kolumnę. Różnica z DELETE: DELETE usuwa wiersze, DROP – całą strukturę.

DROP TABLE stara;

USE

#

Wybór bazy, na której działają kolejne polecenia (w phpMyAdmin robi to kliknięcie bazy).

USE sklep;

SHOW / DESCRIBE

#

Podgląd struktury: SHOW DATABASES (bazy), SHOW TABLES (tabele), DESCRIBE tabela (kolumny i ich typy).

SHOW TABLES;
DESCRIBE gry;
👁 Podgląd efektu

PRIMARY KEY

#
często na egzaminie

Klucz główny – kolumna (zwykle id), której wartość jednoznacznie wskazuje jeden wiersz, jak PESEL dla osoby. Musi być unikalna i nie może być pusta. Tabela ma jeden klucz główny; może on składać się z kilku kolumn (klucz złożony). Na klucz główny wskazują klucze obce innych tabel.

id INT PRIMARY KEY

AUTO_INCREMENT

#
często na egzaminie

Baza sama nadaje kolejne numery: 1, 2, 3… przy każdym nowym wierszu. Dlatego w INSERT nie podajesz kolumny id (arkusz: „klucz nadawany automatycznie”). Usunięte numery nie są używane ponownie – po usunięciu wiersza 3 następny dostanie 4.

id INT AUTO_INCREMENT PRIMARY KEY

FOREIGN KEY … REFERENCES

#
często na egzaminie

Klucz obcy – kolumna wskazująca klucz główny innej tabeli. Tak powstaje relacja.

FOREIGN KEY (gatunek_id) REFERENCES gatunki(id)

NOT NULL / UNIQUE / DEFAULT / CHECK

#

Ograniczenia kolumny. NOT NULL – pole jest wymagane, nie może zostać puste. UNIQUE – wartości nie mogą się powtarzać (np. e-mail). DEFAULT 0 – wartość wpisywana automatycznie, gdy przy dodawaniu wiersza jej nie podasz. CHECK (cena > 0) – warunek, który każda wartość musi spełnić.

email VARCHAR(100) NOT NULL UNIQUE,
ocena INT DEFAULT 5 CHECK (ocena BETWEEN 1 AND 10)

UNSIGNED

#

Liczba „bez znaku” – tylko 0 i dodatnie. Ponieważ nie trzeba miejsca na liczby ujemne, zakres dodatni jest dwa razy większy (TINYINT UNSIGNED: 0–255 zamiast −128…127). Arkusz „liczba całkowita dodatnia” = INT UNSIGNED.

wiek TINYINT UNSIGNED

INDEX

#

Indeks to coś jak skorowidz na końcu książki – dzięki niemu baza znajduje wiersze po danej kolumnie bez przeglądania całej tabeli. Przyspiesza wyszukiwanie i sortowanie, ale spowalnia dodawanie i zmianę danych (indeks też trzeba aktualizować). Klucz główny ma indeks automatycznie.

CREATE INDEX idx_nazwa ON gry(nazwa);

CREATE VIEW

#

Widok – zapisane pod nazwą zapytanie, z którego korzysta się jak z tabeli: CREATE VIEW tanie AS SELECT * FROM gry WHERE cena < 50; potem SELECT * FROM tanie. Widok nie przechowuje danych – przy każdym użyciu wykonuje zapisane zapytanie, więc zawsze pokazuje aktualny stan.

CREATE VIEW tanie AS SELECT * FROM gry WHERE cena < 20;

Typy danych

INT

#
często na egzaminie

Liczba całkowita. Mniejsze: TINYINT (do 127 / 255), SMALLINT; większe: BIGINT.

wiek INT

DECIMAL(m,d)

#
często na egzaminie

Liczba dokładna – m cyfr łącznie, w tym d po przecinku. DECIMAL(7,2) zmieści 99999.99. Używa się jej do pieniędzy, bo nie ma błędów zaokrągleń, które zdarzają się w FLOAT (gdzie 0.1 + 0.2 nie daje dokładnie 0.3).

cena DECIMAL(6,2)  -- do 9999.99

FLOAT / DOUBLE

#

Liczby zmiennoprzecinkowe – zapisane w przybliżeniu, z niewielkim błędem w dalszych miejscach po przecinku. Nadają się do pomiarów (temperatura, waga), ale nie do pieniędzy – tam używa się DECIMAL. DOUBLE jest dokładniejszy od FLOAT.

temperatura FLOAT

VARCHAR(n)

#
często na egzaminie

Tekst o zmiennej długości, maksymalnie n znaków: VARCHAR(50) zmieści nazwę do 50 znaków. Zajmuje tyle miejsca, ile faktycznie wpisano. Najczęstszy typ dla imion, nazw, adresów. Arkusz „tekst do 40 znaków” = VARCHAR(40).

nazwa VARCHAR(50)

CHAR(n)

#

Tekst o STAŁEJ długości – zawsze zajmuje n znaków, krótsze wartości są uzupełniane spacjami. Dobry dla danych o zawsze tej samej długości: PESEL CHAR(11), kod kraju CHAR(2), rok CHAR(4).

pesel CHAR(11)

TEXT

#

Długi tekst – do ok. 65 tysięcy znaków. Używany na opisy, artykuły, komentarze, gdzie VARCHAR mógłby być za mały. Nie podaje się przy nim długości.

opis TEXT

DATE / TIME / DATETIME

#
często na egzaminie

Typy czasu. DATE – sama data w formacie RRRR-MM-DD (2026-06-15). TIME – godzina GG:MM:SS. DATETIME – data i godzina razem. TIMESTAMP – podobny do DATETIME, często ustawiany automatycznie przy zmianie wiersza. W zapytaniach daty zapisuje się w apostrofach.

data_zakupu DATE

BOOLEAN

#

Prawda/fałsz. MySQL nie ma osobnego typu logicznego – BOOLEAN jest tłumaczony na TINYINT(1), gdzie 1 oznacza prawdę, a 0 fałsz. Przykład z arkusza: kolumna rezerwacja z wartością 0 (wolna) lub 1 (zarezerwowana).

aktywny BOOLEAN

ENUM

#

Kolumna, która przyjmuje tylko jedną wartość z podanej listy: ENUM('mały', 'średni', 'duży'). Próba wpisania innej wartości się nie powiedzie. Przydatna dla krótkich, stałych zestawów opcji.

plec ENUM('K','M')

YEAR (typ)

#

Sam rok w zakresie 1901–2155 – zajmuje 1 bajt.

rok_wydania YEAR

BLOB

#

Dane binarne, np. zawartość pliku obrazu. Zwykle lepiej trzymać plik na dysku, a w bazie tylko jego nazwę.

miniatura BLOB

Funkcje

LEFT() / RIGHT() / SUBSTRING()

#
często na egzaminie

Wycinanie fragmentu tekstu. LEFT(nazwa, 3) – 3 pierwsze znaki, RIGHT(nazwa, 2) – 2 ostatnie. SUBSTRING(nazwa, 2, 4) – 4 znaki zaczynając od 2. znaku. Uwaga: w SQL pozycje liczy się od 1, a nie od 0 jak w PHP i JS.

SELECT LEFT(opis, 100) AS skrot FROM gry;
👁 Podgląd efektu

UPPER() / LOWER()

#

Zamiana tekstu na WIELKIE / małe litery w wyniku zapytania: SELECT UPPER(nazwisko) FROM klienci. Dane w tabeli się nie zmieniają – zmienia się tylko to, co zwraca zapytanie.

SELECT UPPER(nazwa) FROM gry;
👁 Podgląd efektu

LENGTH() / CHAR_LENGTH()

#

Długość tekstu. CHAR_LENGTH liczy znaki, a LENGTH bajty – przy polskich literach (zajmujących 2 bajty w UTF-8) wyniki się różnią: dla „żółw” CHAR_LENGTH = 4, LENGTH = 7. Do liczenia liter używaj CHAR_LENGTH.

SELECT CHAR_LENGTH(nazwa) FROM gry;
👁 Podgląd efektu

CONCAT()

#

Skleja teksty w jeden: CONCAT(imie, ' ', nazwisko) daje „Jan Kowalski”. Argumentów może być dowolnie wiele. Jeśli któryś jest NULL, cały wynik będzie NULL.

SELECT CONCAT(imie, ' ', nazwisko) AS osoba FROM klienci;
👁 Podgląd efektu

ROUND() / CEIL() / FLOOR()

#

Zaokrąglanie liczb. ROUND(x, 2) – zwykłe zaokrąglenie do 2 miejsc po przecinku, ROUND(x) – do liczby całkowitej. CEIL(x) – zawsze w górę (2.1 → 3), FLOOR(x) – zawsze w dół (2.9 → 2). Typowe: ROUND(AVG(cena), 2).

SELECT ROUND(AVG(cena), 2) FROM gry;
👁 Podgląd efektu

NOW() / CURDATE()

#

Bieżąca chwila z zegara serwera. CURDATE() zwraca dzisiejszą datę (2026-06-15), NOW() – datę z godziną. Używa się ich w INSERT („automatycznie wpisywana aktualna data”) i w warunkach, np. WHERE data_odd < CURDATE() – terminy, które już minęły.

SELECT * FROM zakupy WHERE data = CURDATE();
👁 Podgląd efektu

YEAR() / MONTH() / DAY()

#

Wyciągają część daty: YEAR('2026-06-15') daje 2026, MONTH – 6, DAY – 15. Przydatne do warunków i grupowania, np. WHERE YEAR(data) = 2025 albo GROUP BY MONTH(data).

SELECT * FROM zakupy WHERE YEAR(data) = 2026;
👁 Podgląd efektu

DATEDIFF()

#

Liczba dni między dwiema datami: DATEDIFF(data_oddania, data_wypozyczenia). Wynik jest dodatni, gdy pierwsza data jest późniejsza. Przykład: o ile dni spóźniono się ze zwrotem książki.

SELECT DATEDIFF('2026-12-24', CURDATE());
👁 Podgląd efektu

DATE_FORMAT()

#

Data w wybranym formacie: %d dzień, %m miesiąc, %Y rok, %H godzina, %i minuty.

SELECT DATE_FORMAT(data, '%d.%m.%Y') AS dzien FROM zakupy;
👁 Podgląd efektu

DATE_ADD() / DATE_SUB()

#

Dodanie / odjęcie czasu od daty: INTERVAL 7 DAY, 1 MONTH, 2 YEAR…

SELECT DATE_ADD(CURDATE(), INTERVAL 7 DAY) AS termin;
👁 Podgląd efektu

TRIM() / REPLACE()

#

Usuwa spacje z początku i końca / zamienia fragment tekstu na inny.

SELECT REPLACE(telefon, ' ', '') FROM klienci;
👁 Podgląd efektu

LOCATE() / INSTR()

#

Pozycja fragmentu w tekście (od 1; 0 – nie znaleziono).

SELECT email, LOCATE('@', email) FROM klienci;

MOD() / ABS() / POW() / SQRT()

#

Reszta z dzielenia, wartość bezwzględna, potęga, pierwiastek.

SELECT * FROM liczby WHERE MOD(n, 2) = 0; -- parzyste
👁 Podgląd efektu

Użytkownicy i bezpieczeństwo

CREATE USER

#
często na egzaminie

Tworzy nowe konto użytkownika bazy danych: CREATE USER 'jan'@'localhost' IDENTIFIED BY 'Haslo123'. Część po @ określa, skąd użytkownik może się łączyć (localhost – tylko z tego komputera, % – z dowolnego). Nowy użytkownik nie ma żadnych uprawnień, dopóki nie nadasz ich przez GRANT.

CREATE USER 'jan'@'localhost' IDENTIFIED BY 'Haslo!2026';

GRANT

#
często na egzaminie

Nadaje uprawnienia: SELECT, INSERT, UPDATE, DELETE, ALL PRIVILEGES na bazie.tabeli.

GRANT SELECT, INSERT ON sklep.gry TO 'jan'@'localhost';

REVOKE

#
często na egzaminie

Odbiera wcześniej nadane uprawnienia: REVOKE INSERT ON sklep.* FROM 'jan'@'localhost'. Uwaga na słowo: przy REVOKE jest FROM (od kogo zabieramy), a przy GRANT jest TO (komu dajemy) – częsta pułapka w testach.

REVOKE INSERT ON sklep.gry FROM 'jan'@'localhost';

DROP USER

#

Usuwa konto użytkownika bazy.

DROP USER 'jan'@'localhost';

ALTER USER / SET PASSWORD

#

Zmiana hasła użytkownika bazy.

ALTER USER 'jan'@'localhost' IDENTIFIED BY 'NoweHaslo!1';

SHOW GRANTS

#

Pokazuje, jakie uprawnienia ma użytkownik.

SHOW GRANTS FOR 'jan'@'localhost';
👁 Podgląd efektu

FLUSH PRIVILEGES

#

Przeładowuje tabele uprawnień. Potrzebne tylko po ręcznej zmianie tabel systemowych – po GRANT i REVOKE nie trzeba.

FLUSH PRIVILEGES;

transakcja

#

Kilka zmian w bazie traktowanych jako całość: albo wykonają się wszystkie, albo żadna. START TRANSACTION rozpoczyna, COMMIT zatwierdza, ROLLBACK cofa wszystko od początku transakcji. Klasyczny przykład: przelew – odjęcie z jednego konta i dodanie na drugie muszą się udać razem.

START TRANSACTION;
UPDATE konta SET saldo = saldo - 100 WHERE id = 1;
COMMIT;

Porównywanie napisów (collation)

utf8_polish_ci

#
często na egzaminie

Kodowanie UTF-8 z polskimi regułami sortowania (ą po a, ł po l), ci – bez rozróżniania wielkości liter. „Zestaw polskich znaków” w arkuszu.

CREATE DATABASE sklep COLLATE utf8_polish_ci;

utf8_unicode_ci

#
często na egzaminie

Uniwersalne reguły Unicode dla wielu języków. Wybierz, gdy arkusz poda dokładnie tę nazwę.

CREATE DATABASE islandia COLLATE utf8_unicode_ci;

⚡ JavaScript

JavaScript działa w PRZEGLĄDARCE, już po wyświetleniu strony. Reaguje na kliknięcia, odczytuje pola formularza, liczy i zmienia stronę bez przeładowania. Błędy widać w konsoli (F12 → Console). Wielkość liter ma znaczenie: policz ≠ Policz.

Podstawy

<script>

#
często na egzaminie

Miejsce na kod JS w HTML – najlepiej na końcu <body>, żeby elementy strony już istniały.

<script>
  function policz() { … }
</script>

let

#
często na egzaminie

Zmienna, której wartość można zmieniać. Zmienna utworzona poza funkcją pamięta wartość między kliknięciami.

let licznik = 0;
licznik = licznik + 1;

const

#

Tworzy stałą – nazwę, której nie można przypisać nowej wartości: const PI = 3.14; potem PI = 3 da błąd. Uwaga: jeśli w stałej jest tablica lub obiekt, ich zawartość można zmieniać (dodawać elementy), nie można tylko podmienić całej tablicy na inną.

const VAT = 0.23;

var

#

Stary sposób tworzenia zmiennych. Działa, ale ma dziwne zachowania – na przykład zmienna z var utworzona w pętli jest widoczna także poza nią. Dlatego dziś używa się let (zmienna) i const (stała). W pytaniach testowych var nadal się pojawia.

var x = 5;

typy danych

#

number (liczby), string (tekst), boolean (true/false), undefined (brak wartości), null, tablica [], obiekt {}.

let n = 5; let t = "Ala"; let ok = true;

komentarze

#

Notatki w kodzie, które JavaScript pomija. // komentuje do końca linii, /* … */ – dowolnie wiele linii. Służą do opisywania, co robi kod, i do tymczasowego wyłączania fragmentu przy szukaniu błędów.

// komentarz

console.log()

#
często na egzaminie

Wypisuje wartość w konsoli (F12). Najlepszy sposób, by sprawdzić, co jest w zmiennej.

console.log(a, b);
👁 Podgląd efektu

alert() / prompt() / confirm()

#

Okienka dialogowe przeglądarki. alert("tekst") – pokazuje komunikat z przyciskiem OK. prompt("Podaj imię") – prosi o wpisanie tekstu i zwraca go (albo null po Anuluj). confirm("Na pewno?") – zwraca true dla OK i false dla Anuluj. Wszystkie wstrzymują stronę, dopóki użytkownik nie odpowie.

alert("Gotowe!");
let imie = prompt("Jak masz na imię?");
👁 Podgląd efektu

szablon tekstowy `${}`

#

Tekst w odwrotnych apostrofach (`…`, klawisz obok 1). Zmienne i obliczenia wstawia się przez ${…}, a tekst może mieć wiele linii – zamiast sklejania plusami.

let opis = `Gra ${nazwa} kosztuje ${cena * 2} zł`;
👁 Podgląd efektu

Operatory i konwersje

+ (dodawanie i sklejanie)

#
często na egzaminie

Liczby dodaje, teksty skleja. "5" + "3" = "53"! Wartości z pól zamieniaj na liczby przez Number().

Number("5") + Number("3"); // 8
👁 Podgląd efektu

- * / % **

#

Działania: odejmowanie, mnożenie, dzielenie, reszta z dzielenia i potęga. % daje resztę: 7 % 3 = 1, a liczba % 2 == 0 oznacza „parzysta”. 2 ** 3 = 8. Dzielenie 7 / 2 daje 3.5 (JS nie obcina do całkowitej).

10 % 3; // 1

= / == / ===

#
często na egzaminie

= przypisuje, == porównuje wartości ("5" == 5 → true), === porównuje wartość i typ ("5" === 5 → false).

if (wynik === 10) { … }

&& || !

#

Operatory logiczne łączące warunki. && (i) – całość jest prawdziwa, gdy OBA warunki są prawdziwe: wiek >= 18 && wiek <= 65. || (lub) – wystarczy, że JEDEN jest prawdziwy. ! (nie) – odwraca: !zaznaczone znaczy „nie zaznaczone”.

if (wiek >= 18 && zgoda) { … }

++ / -- / +=

#

Skróty. x++ zwiększa x o 1 (to samo co x = x + 1), x-- zmniejsza o 1. x += 5 dodaje 5 do x, x -= 2 odejmuje 2, x *= 3 mnoży. Najczęściej spotkasz i++ w pętli for oraz licznik++ przy liczeniu kliknięć.

numer++;
suma += cena;

Number()

#
często na egzaminie

Zamienia tekst na liczbę: Number("12") daje 12. Pusty tekst daje 0, a tekst, który nie jest liczbą (np. "abc"), daje NaN („nie liczba”). Potrzebny, bo wartości pól formularza (.value) są zawsze tekstem i plus by je skleił zamiast dodać.

let a = Number(document.getElementById("a").value);
👁 Podgląd efektu

parseInt() / parseFloat()

#

Wyciągają liczbę z początku tekstu: parseInt("12px") daje 12, parseFloat("3.5 kg") daje 3.5. parseInt odcina część po przecinku (parseInt("7.9") = 7). Gdy tekst nie zaczyna się od liczby, wynik to NaN.

parseFloat("4.5 kg"); // 4.5
👁 Podgląd efektu

toFixed()

#

Zaokrągla liczbę do podanej liczby miejsc po przecinku i zwraca ją jako TEKST: (12.345).toFixed(2) daje "12.35". Używa się go do wyświetlania cen. Ponieważ wynik jest tekstem, do dalszych obliczeń używaj liczby sprzed toFixed.

(12.3456).toFixed(2); // "12.35"
👁 Podgląd efektu

String() / toString()

#

Zamieniają wartość na tekst: String(5) daje "5", (12.5).toString() daje "12.5". Rzadko potrzebne, bo sklejenie z tekstem zamienia liczbę automatycznie: "Wynik: " + 5.

String(25)

isNaN()

#

Czy wartość NIE jest liczbą – np. po Number() z pustego albo błędnie wypełnionego pola. NaN = „Not a Number”.

let ile = Number(pole.value);
if (isNaN(ile)) alert("Podaj liczbę");
👁 Podgląd efektu

Warunki i pętle

if / else

#
często na egzaminie

Instrukcja warunkowa: if (warunek) { … } wykonuje kod w klamrach tylko wtedy, gdy warunek jest prawdziwy; else { … } – w przeciwnym razie. Kilka możliwości łączy się przez else if. Warunki sprawdzane są od góry i wykonuje się tylko pierwszy prawdziwy.

if (pole > 100) {
  wynik = "duże";
} else {
  wynik = "małe";
}

switch

#

Wybór jednej z wielu stałych wartości – czytelniejszy niż długi łańcuch else if. switch (dzien) { case 1: …; break; case 2: …; break; default: … }. break kończy przypadek – bez niego kod „przelatuje” do następnego case. default wykonuje się, gdy nic nie pasuje.

switch (dzien) {
  case 1: nazwa = "pon"; break;
  default: nazwa = "?";
}

? : (trójargumentowy)

#

Skrócony if, który zwraca wartość: warunek ? wartośćGdyTak : wartośćGdyNie. Przykład: let opis = wiek >= 18 ? "dorosły" : "niepełnoletni". Wygodny do jednej prostej decyzji; przy dłuższej logice lepiej użyć if.

let tekst = wiek >= 18 ? "dorosły" : "niepełnoletni";

for

#
często na egzaminie

Pętla z licznikiem – używana, gdy wiadomo, ile razy powtórzyć. for (let i = 1; i <= 10; i++) { … } czytaj: zacznij od i = 1; dopóki i <= 10 – wykonuj kod; po każdym obrocie zwiększ i o 1. Kod w klamrach wykona się 10 razy, a i przyjmie wartości 1…10.

for (let i = 0; i < 5; i++) {
  lista.innerHTML += "<li>" + i + "</li>";
}
👁 Podgląd efektu

while

#

Pętla „dopóki”: while (warunek) { … } powtarza kod tak długo, jak warunek jest prawdziwy. Warunek sprawdzany jest PRZED każdym obrotem, więc jeśli od początku jest fałszywy, kod nie wykona się ani razu. W środku musi się coś zmieniać (np. licznik), inaczej pętla nigdy się nie skończy.

while (n > 0) { n--; }

for…of

#

Pętla po wszystkich elementach tablicy – bez licznika: for (let owoc of owoce) { … }. W każdym obrocie zmienna owoc zawiera kolejny element. Wygodna, gdy nie potrzebujesz numeru elementu.

for (let gra of gry) { console.log(gra); }

for…in

#

Po kolei przez KLUCZE (nazwy pól) obiektu.

const gra = { nazwa: "Tetris", cena: 19 };
for (let k in gra) console.log(k, gra[k]);
👁 Podgląd efektu

do…while

#

Pętla, która wykona się co najmniej raz – warunek sprawdzany na końcu.

let n = 0;
do { n++; } while (n < 5);
👁 Podgląd efektu

break / continue

#

break – natychmiast kończy pętlę (albo przypadek w switch), continue – pomija resztę obrotu i przechodzi do następnego.

for (let i = 1; i <= 10; i++) {
  if (i === 3) continue;
  if (i === 6) break;
  console.log(i);
}
👁 Podgląd efektu

Funkcje, tablice, obiekty

function

#
często na egzaminie

Nazwany zestaw poleceń. Wywołanie z nawiasami: policz(). Parametry w nawiasach, return zwraca wynik.

function brutto(netto) {
  return netto * 1.23;
}
brutto(100);
👁 Podgląd efektu

tablica []

#
często na egzaminie

Zmienna przechowująca listę wartości: let owoce = ["jabłko", "gruszka"]. Elementy są numerowane OD ZERA: owoce[0] to "jabłko". owoce.length podaje liczbę elementów, a ostatni element to owoce[owoce.length - 1]. Tablicę zwykle przechodzi się pętlą for.

const miasta = ["Barcelona", "Rzym"];
miasta[0]; // "Barcelona"
miasta.length; // 2

push() / pop()

#

push(x) dodaje element na koniec tablicy, pop() usuwa ostatni element i go zwraca. Analogicznie unshift(x) dodaje na początek, shift() zabiera pierwszy.

gry.push("Doom");

sort() / join() / includes()

#

sort() układa elementy tablicy w kolejności (uwaga: domyślnie jak tekst, więc 10 trafi przed 9 – dla liczb używa się sort((a, b) => a - b)). join(", ") skleja elementy w jeden tekst z separatorem. includes(x) sprawdza, czy tablica zawiera x (true/false).

gry.join(", ");
👁 Podgląd efektu

slice() / splice()

#

slice – wycinek tablicy (oryginał bez zmian), splice – usuwa (i ewentualnie wstawia) elementy w oryginale.

const top3 = wyniki.slice(0, 3);
gry.splice(1, 1); // usuń element o indeksie 1
👁 Podgląd efektu

reverse()

#

Odwraca kolejność elementów tablicy (zmienia oryginał).

[1, 2, 3].reverse(); // [3, 2, 1]
👁 Podgląd efektu

.forEach()

#

Wykonuje funkcję dla każdego elementu tablicy albo listy z querySelectorAll.

document.querySelectorAll("li").forEach(li => {
  li.style.color = "red";
});
👁 Podgląd efektu

map() / filter()

#

map – nowa tablica z przekształconymi elementami, filter – nowa tablica tylko z elementami spełniającymi warunek.

const brutto = ceny.map(c => c * 1.23);
const tanie = ceny.filter(c => c < 50);
👁 Podgląd efektu

funkcja strzałkowa =>

#

Krótszy zapis funkcji: parametry => wynik. Przy jednej linii return jest domyślny.

const brutto = netto => netto * 1.23;
const suma = (a, b) => a + b;
👁 Podgląd efektu

obiekt {}

#

Zestaw powiązanych danych pod nazwami: let gra = { nazwa: "Tetris", cena: 20 }. Wartość odczytujesz po kropce: gra.nazwa. Obiekt może też zawierać funkcje (metody). Obiektami są m.in. elementy strony – stąd zapis element.style czy element.value.

const gra = { nazwa: "Tetris", cena: 19 };
gra.cena;

Math

#

Funkcje matematyczne: Math.round, Math.floor, Math.ceil, Math.random (0–1), Math.max, Math.min, Math.pow, Math.sqrt, Math.PI.

Math.floor(Math.random() * 6) + 1; // kostka
👁 Podgląd efektu

Date

#

Obiekt z datą i godziną: new Date() to „teraz” według zegara komputera użytkownika. getFullYear() – rok, getMonth() – miesiąc liczony OD ZERA (styczeń = 0, więc do wyświetlenia dodaj 1), getDate() – dzień miesiąca, getDay() – dzień tygodnia 0–6 (niedziela = 0), getHours()/getMinutes() – godzina. Różnica dwóch dat daje milisekundy (dzień = 86 400 000 ms).

const teraz = new Date();
teraz.getFullYear();
👁 Podgląd efektu

metody tekstu

#

length, toUpperCase(), toLowerCase(), indexOf(), includes(), substr()/substring(), replace(), trim(), split().

"Ala".toUpperCase(); // "ALA"
👁 Podgląd efektu

setTimeout() / setInterval()

#

setTimeout(funkcja, 2000) uruchamia funkcję JEDEN raz po 2 sekundach. setInterval(funkcja, 1000) uruchamia ją CO sekundę, aż do zatrzymania przez clearInterval. Czas podaje się w milisekundach (1000 ms = 1 s). Służą np. do zegarów i pokazów slajdów.

setInterval(nastepne, 3000); // co 3 s

charAt()

#

Znak na podanej pozycji tekstu (od 0). To samo daje zapis tekst[0].

"Kot".charAt(0); // "K"
👁 Podgląd efektu

try / catch

#

Obsługa błędów: gdy kod w try zgłosi wyjątek, zamiast zatrzymania skryptu wykonuje się catch.

try {
  const dane = JSON.parse(tekst);
} catch (e) {
  console.log("Zły format danych");
}
👁 Podgląd efektu

DOM – praca ze stroną

document.getElementById()

#
często na egzaminie

Znajduje JEDEN element po id (bez krzyżyka!). Najczęstsze polecenie na egzaminie.

const pole = document.getElementById("cena");

querySelector()

#

Znajduje PIERWSZY element pasujący do selektora CSS: "#wynik" (po id), ".karta" (po klasie), "p" (po znaczniku), "input[name=rozmiar]:checked" (zaznaczone radio). Zwraca jeden element albo null, gdy nic nie pasuje. Pozwala użyć tych samych selektorów, które znasz z CSS.

document.querySelector(".cena");

querySelectorAll()

#
często na egzaminie

Znajduje WSZYSTKIE elementy pasujące do selektora i zwraca ich listę. Nie można od razu zmienić stylu całej listy – trzeba przejść po niej pętlą: for (let el of lista) { el.style.color = "red"; }. Lista ma length i numerację od 0.

const pola = document.querySelectorAll("#sekcja input");
for (let i = 0; i < pola.length; i++) pola[i].disabled = true;

getElementsByClassName() / ByTagName()

#

Zwracają LISTĘ elementów z daną klasą / danym znacznikiem (stąd „Elements” w liczbie mnogiej). Nawet gdy pasuje tylko jeden element, dostajesz listę – do pierwszego odwołujesz się przez [0]. Żeby zmienić wszystkie, użyj pętli.

document.getElementsByClassName("karta");

.value

#
często na egzaminie

Zawartość pola formularza (input, select, textarea) – do odczytu i zapisu. ZAWSZE jest tekstem, nawet w polu type="number": wpisane 5 to "5". Do obliczeń zamieniaj przez Number(pole.value). Przypisanie pole.value = "" czyści pole.

let ile = Number(document.getElementById("ile").value);

.innerHTML

#
często na egzaminie

Treść HTML w środku elementu – odczyt albo wpisanie (z interpretacją znaczników).

document.getElementById("wynik").innerHTML = "Suma: " + suma;
👁 Podgląd efektu

.innerText / .textContent

#

Tekst wewnątrz elementu, bez znaczników. W odróżnieniu od innerHTML wstawiony tekst NIE jest interpretowany jako HTML – zapis "<b>a</b>" pojawi się na ekranie dosłownie z nawiasami. Bezpieczniejsze przy wyświetlaniu tekstu wpisanego przez użytkownika.

p.innerText = "Gotowe";
👁 Podgląd efektu

.checked

#
często na egzaminie

Czy checkbox albo radio jest zaznaczone: true lub false. Używa się go w warunku: if (document.getElementById("ser").checked) { cena += 5; }. Można też ustawić: pole.checked = true zaznacza pole z poziomu skryptu.

if (document.getElementById("zgoda").checked) { … }
👁 Podgląd efektu

.disabled

#
często na egzaminie

Włącza lub wyłącza pole formularza albo przycisk. pole.disabled = true – pole jest szare, nie da się w nim pisać ani go kliknąć; false – znowu aktywne. Wartość wyłączonego pola nie jest wysyłana z formularzem.

pole.disabled = true;
👁 Podgląd efektu

.src / .href / atrybuty

#
często na egzaminie

Zmiana atrybutu elementu: obraz (src), link (href). getAttribute / setAttribute – dowolny atrybut.

document.getElementById("foto").src = "2.jpg";
👁 Podgląd efektu

.style

#
często na egzaminie

Zmiana stylu CSS z JS. Nazwy z myślnikiem piszemy camelCase: background-color → backgroundColor.

el.style.backgroundColor = "DodgerBlue";
el.style.display = "none";
👁 Podgląd efektu

classList

#

Zarządza klasami CSS elementu. classList.add("aktywny") dodaje klasę, remove usuwa, toggle dodaje, gdy jej nie ma, i usuwa, gdy jest (przełącznik), contains sprawdza obecność. Wygodne, gdy wygląd jest już opisany w CSS pod klasą – JS tylko ją włącza i wyłącza.

el.classList.toggle("ukryty");
👁 Podgląd efektu

.className

#

Cała wartość atrybutu class jako tekst. Przypisanie ZASTĘPUJE poprzednie klasy.

li.className = "wazne";
👁 Podgląd efektu

createElement() / appendChild()

#

Tworzenie nowego elementu strony w dwóch krokach. document.createElement("li") tworzy element w pamięci – jeszcze go nie widać. Ustawiasz mu treść i atrybuty (li.innerHTML = "…"), a potem rodzic.appendChild(li) wkłada go na koniec rodzica i dopiero wtedy pojawia się na stronie.

const li = document.createElement("li");
li.innerHTML = "Nowy";
lista.appendChild(li);
👁 Podgląd efektu

document.write()

#

Wypisuje tekst do strony w miejscu, gdzie stoi skrypt – ale tylko w trakcie jej ładowania. Wywołany później (np. po kliknięciu) kasuje całą stronę i zostawia sam wypisany tekst. Dlatego dziś zamiast niego używa się innerHTML.

document.write("Witaj");
👁 Podgląd efektu

innerHTML +=

#
często na egzaminie

Dopisanie treści na KOŃCU elementu (np. kolejnego punktu listy) – += zamiast =, które zastąpiłoby całą zawartość.

lista.innerHTML += "<li>" + nazwa + "</li>";
👁 Podgląd efektu

.remove()

#

Usuwa element ze strony.

document.getElementById("baner").remove();
👁 Podgląd efektu

.children

#

Lista elementów-dzieci; firstElementChild / lastElementChild – pierwsze i ostatnie dziecko.

const lista = document.getElementById("lista");
console.log(lista.children.length);

.options / .selectedIndex

#

Lista opcji pola <select> i numer wybranej (od 0). Tekst wybranej opcji: sel.options[sel.selectedIndex].text (sel.value daje jej value).

const sel = document.getElementById("kolor");
let tekst = sel.options[sel.selectedIndex].text;
👁 Podgląd efektu

location

#

Adres bieżącej strony. location.href = "x.html" przenosi na inną stronę, location.reload() odświeża.

location.href = "dziekujemy.html";

Zdarzenia

onclick

#
często na egzaminie

Zdarzenie kliknięcia. W HTML: <button onclick="oblicz()"> – po kliknięciu wykona się funkcja oblicz. Nawiasy są konieczne: bez nich nic się nie stanie. Można przekazać argument: onclick="pokaz(2)".

<button onclick="policz()">Policz</button>
👁 Podgląd efektu

onchange / oninput

#

Zmiana wartości pola (onchange – po zatwierdzeniu, oninput – przy każdym znaku).

<select onchange="pokaz()">

onmouseover / onmouseout

#

Zdarzenia myszy: onmouseover – kursor najechał na element, onmouseout – kursor go opuścił. Używa się ich parami, np. do powiększenia zdjęcia po najechaniu i przywrócenia rozmiaru po zjechaniu. Sam efekt wizualny łatwiej zrobić w CSS przez :hover.

<img onmouseover="powieksz(this)">

onload

#

Zdarzenie „skończyło się ładowanie” – całej strony (<body onload="start()">) albo obrazu. Kod w nim wykona się dopiero, gdy wszystkie elementy istnieją, więc można je bezpiecznie wyszukiwać przez getElementById.

<body onload="start()">

onkeyup / onkeydown

#

Zdarzenia klawiatury: onkeydown – w chwili wciśnięcia klawisza, onkeyup – w chwili jego puszczenia. onkeyup na polu tekstowym pozwala reagować na każdą wpisaną literę, np. liczyć znaki na bieżąco.

<input onkeyup="licz()">

addEventListener()

#

Podpięcie zdarzenia z poziomu JavaScriptu zamiast atrybutu w HTML: przycisk.addEventListener("click", oblicz). Nazwa zdarzenia jest bez „on” (click, nie onclick), a funkcję podaje się bez nawiasów. Do jednego elementu można podpiąć kilka funkcji dla tego samego zdarzenia.

btn.addEventListener("click", policz);

onsubmit

#

Wysłanie formularza. Gdy funkcja zwróci false (onsubmit="return sprawdz()"), formularz NIE zostanie wysłany – np. po błędnej walidacji.

<form onsubmit="return sprawdz()">

ondblclick

#

Podwójne kliknięcie elementu.

<p ondblclick="this.remove()">Kliknij dwa razy, aby usunąć</p>
👁 Podgląd efektu

onfocus / onblur

#

Pole dostało kursor (focus) / straciło go (blur).

<input onfocus="this.style.background='#ffd'" onblur="this.style.background=''">
👁 Podgląd efektu

event / e.target

#

Obiekt zdarzenia przekazywany do funkcji: target – element, którego dotyczy zdarzenie, key – wciśnięty klawisz, preventDefault() – zatrzymuje domyślne działanie (np. wysłanie formularza).

btn.addEventListener("click", e => {
  console.log(e.target);
});
👁 Podgląd efektu

this

#

W funkcji obsługującej zdarzenie this oznacza element, który je wywołał. W <img onclick="this.style.width='300px'"> this to kliknięty obraz. Dzięki temu jedna funkcja może obsłużyć wiele elementów – każdy zmieni samego siebie.

<img onclick="this.style.width='300px'">

.parentElement

#
często na egzaminie

Rodzic elementu – ten, w którym element bezpośrednio siedzi. this.parentElement w przycisku = „mój własny wiersz listy”.

przycisk.onclick = function () {
  this.parentElement.style.textDecoration = "line-through";
};
👁 Podgląd efektu

textDecoration

#

Styl text-decoration z JS: "line-through" (przekreślenie), "underline", "none".

li.style.textDecoration = "line-through";
👁 Podgląd efektu

C:\fakepath\ (input type="file")

#
często na egzaminie

Wartość .value pola wyboru pliku to zawsze C:\fakepath\nazwa.jpg – przeglądarka ukrywa prawdziwą ścieżkę. Samą nazwę dostaniesz przez split("\\").pop().

let nazwa = pole.value.split("\\").pop();
👁 Podgląd efektu

Inne

wyrażenia regularne

#

Wzorce opisujące, jak ma wyglądać tekst. /^\d{11}$/ znaczy: od początku (^) do końca ($) dokładnie 11 cyfr (\d{11}). Metoda test sprawdza dopasowanie: /^\d{11}$/.test(pesel) daje true lub false. Używa się ich do walidacji: kodów pocztowych, PESEL, adresów e-mail.

/^\d{11}$/.test("01234567890"); // true

JSON

#

Format zapisu danych jako tekst: obiekty {"klucz": wartość}, tablice [ ], klucze i teksty zawsze w podwójnym cudzysłowie, bez przecinka po ostatnim elemencie. JSON.parse(tekst) zamienia tekst na obiekt JS, JSON.stringify(obiekt) – obiekt na tekst. W PHP: json_encode i json_decode.

JSON.stringify({ nazwa: "Tetris" });
👁 Podgląd efektu

fetch()

#

Pobiera dane z serwera w tle, bez przeładowania strony (AJAX). Zwraca obietnicę – wynik odbierasz w .then() albo przez await.

fetch("api.php")
  .then(r => r.json())
  .then(dane => console.log(dane));

localStorage

#

Pamięć przeglądarki, która przetrwa zamknięcie karty i komputera. localStorage.setItem("motyw", "ciemny") zapisuje, getItem("motyw") odczytuje, removeItem usuwa. Przechowuje tylko tekst i tylko na tym jednym urządzeniu i w tej przeglądarce. Do danych tylko na czas otwartej karty jest sessionStorage.

localStorage.setItem("motyw", "ciemny");

💡 Pojęcia

Słowa, które padają w kursie, w arkuszach i w teście pisemnym – wyjaśnione krótko i po ludzku.

Strona i sieć

przeglądarka

#

Program do oglądania stron (Chrome, Firefox, Edge). Pobiera pliki z serwera, rysuje HTML i CSS, uruchamia JavaScript.

serwer

#

Komputer lub program, który wydaje strony na żądanie. W XAMPP to Apache na Twoim komputerze.

localhost

#
często na egzaminie

„Ten komputer” (adres 127.0.0.1). http://localhost/… otwiera pliki z folderu C:\xampp\htdocs przez serwer Apache.

http://localhost/egzamin/index.php

URL

#

Adres zasobu: protokół://serwer/folder/plik?parametry. Np. http://localhost/sklep/gra.php?id=5.

http://localhost/sklep/gra.php?id=5
👁 Podgląd efektu

HTTP / HTTPS

#

Protokół rozmowy przeglądarki z serwerem. HTTPS – szyfrowany (kłódka, certyfikat SSL).

AJAX

#

Technika, w której JavaScript pobiera dane z serwera w tle i zmienia tylko fragment strony – bez jej przeładowania. Dziś zwykle przez fetch() i dane w formacie JSON.

fetch("api.php").then(r => r.json())

API

#

Adres, pod którym serwer udostępnia dane innym programom (zwykle w JSON), np. pogoda albo kursy walut. Styl REST: metoda HTTP mówi, co zrobić – GET pobierz, POST dodaj, PUT zmień, DELETE usuń.

GET / POST

#
często na egzaminie

Dwie metody wysyłania danych. GET – w adresie (widać, można zapisać link), POST – w treści żądania („metoda bezpieczna”, do formularzy zapisujących dane).

index.php?id=6   ← GET

ścieżka względna

#
często na egzaminie

Ścieżka liczona od pliku, który jej używa: styl.css (ten folder), obrazy/a.jpg (podfolder), ../a.jpg (folder wyżej). Na egzaminie zawsze względne.

<img src="obrazy/kot.jpg">
👁 Podgląd efektu

ścieżka bezwzględna

#

Pełny adres od początku: https://… albo C:\… Działa tylko w jednym miejscu – na egzaminie unikaj.

kodowanie znaków (UTF-8)

#
często na egzaminie

Sposób zapisu liter jako bajtów. UTF-8 obsługuje polskie znaki. Plik, meta charset i baza muszą być w UTF-8 – inaczej „krzaczki”.

<meta charset="UTF-8">

parametr w adresie (query string)

#
często na egzaminie

Część adresu po znaku ?: pary nazwa=wartość połączone &. strona.php?id=4&widok=pelny. PHP czyta je z $_GET. Tak dwie strony przekazują sobie, który rekord pokazać.

szczyty.php?id=9

czcionka webowa (WOFF / WOFF2)

#
często na egzaminie

Plik czcionki dołączony do strony przez @font-face, żeby wyglądała tak samo na każdym komputerze. WOFF2 – najnowszy, najmniejszy format.

@font-face { font-family: "Lato"; src: url("czcionka/lato-regular.woff2"); }

kanał alfa (przezroczystość)

#
często na egzaminie

Dodatkowa informacja przy każdym pikselu: jak bardzo jest przezroczysty. Mają go PNG i GIF, nie ma JPG. W GIMP: Warstwa → Przezroczystość → Dodaj kanał alfa.

kadrowanie

#
często na egzaminie

Przycięcie obrazu do wybranego fragmentu. „Przytnij do zawartości” w GIMP obcina przezroczyste brzegi – kształt dotyka krawędzi obrazu.

rozszerzenie pliku

#

Końcówka nazwy (.html, .css, .php, .jpg) – mówi, czym jest plik. Włącz pokazywanie rozszerzeń w Windows, żeby nie powstał styl.css.txt.

responsywność

#

Strona dopasowuje się do szerokości ekranu (telefon, komputer) – zwykle przez @media i elastyczne szerokości.

walidacja

#

Sprawdzanie poprawności – kodu (validator.w3.org) albo danych z formularza (required, pattern, sprawdzenie w JS/PHP).

adres IP

#

Numer komputera w sieci. IPv4 – cztery liczby 0–255 oddzielone kropkami (192.168.1.10), IPv6 – dłuższy zapis szesnastkowy z dwukropkami. 127.0.0.1 to zawsze „ten komputer”.

192.168.1.10

DNS

#

System zamieniający nazwy domen na adresy IP – jak książka telefoniczna internetu. Wpisujesz infkursy.pl, a DNS podaje, pod jakim IP stoi serwer.

domena

#

Nazwa strony w internecie, np. infkursy.pl. Czyta się ją od prawej: .pl – domena najwyższego poziomu (TLD), infkursy – nazwa wykupiona u rejestratora, www – subdomena.

www.infkursy.pl

port

#
często na egzaminie

Numer „drzwi” programu na serwerze. Domyślne: HTTP 80, HTTPS 443, FTP 21, SSH 22, SMTP 25 / 465 / 587, MySQL 3306.

http://localhost:8080/
👁 Podgląd efektu

hosting

#

Wynajęte miejsce na serwerze, na którym strona działa całą dobę. Pliki wgrywa się przez FTP/SFTP albo panel, bazę – przez phpMyAdmin.

FTP / SFTP

#
często na egzaminie

Protokoły przesyłania plików na serwer (np. programem FileZilla). FTP – port 21, bez szyfrowania; SFTP – szyfrowany, przez SSH.

certyfikat SSL / TLS

#

Elektroniczny dokument serwera potwierdzający jego tożsamość i włączający szyfrowanie – kłódka i https:// w przeglądarce.

sesja

#

Dane jednego użytkownika przechowywane NA SERWERZE między kolejnymi stronami (np. koszyk, zalogowanie). Przeglądarka trzyma tylko identyfikator sesji w ciasteczku.

pamięć podręczna (cache)

#

Zapisane wcześniej kopie plików, żeby nie pobierać ich ponownie. Gdy zmiana w CSS „nie działa”, często pomaga odświeżenie bez cache: Ctrl + F5.

kod odpowiedzi HTTP

#
często na egzaminie

Trzycyfrowy wynik żądania: 200 – OK, 301 – przeniesiono na stałe, 403 – brak dostępu, 404 – nie znaleziono, 500 – błąd serwera.

👁 Podgląd efektu

SEO

#

Pozycjonowanie – dopasowanie strony, żeby wyżej pojawiała się w wyszukiwarce: sensowny <title>, opis meta, nagłówki, alt obrazów, szybkość, treść.

frontend / backend

#

Frontend – to, co działa w przeglądarce (HTML, CSS, JavaScript). Backend – to, co działa na serwerze (PHP, baza danych).

XAMPP

#
często na egzaminie

Darmowy pakiet do uruchomienia serwera na własnym komputerze: Apache (serwer WWW), MariaDB (baza), PHP i phpMyAdmin. Na egzaminie uruchamiasz w nim Apache i MySQL.

W3C

#

Organizacja ustalająca standardy WWW (HTML, CSS). Udostępnia walidator kodu validator.w3.org.

Grafika i multimedia

grafika rastrowa

#
często na egzaminie

Obraz zbudowany z pikseli (JPG, PNG, GIF, BMP). Przy powiększeniu widać „schodki” i rozmycie.

👁 Podgląd efektu

grafika wektorowa

#
często na egzaminie

Obraz zapisany jako kształty i wzory matematyczne (SVG, AI, CDR). Można go powiększać bez utraty jakości – idealna na logo i ikony.

👁 Podgląd efektu

formaty graficzne

#
często na egzaminie

JPG – zdjęcia, kompresja stratna, bez przezroczystości. PNG – bezstratny, z przezroczystością. GIF – maks. 256 kolorów, animacje. SVG – wektor. WebP – nowoczesny, mały, z przezroczystością.

👁 Podgląd efektu

kompresja stratna / bezstratna

#
często na egzaminie

Bezstratna zmniejsza plik bez utraty informacji (PNG, ZIP). Stratna usuwa szczegóły mało widoczne dla oka – plik dużo mniejszy, ale jakość spada przy każdym zapisie (JPG, MP3).

RGB / CMYK

#
często na egzaminie

RGB – model ekranów: światło czerwone, zielone, niebieskie (mieszanie daje biel). CMYK – model druku: farby cyjan, magenta, żółta i czarna (mieszanie daje czerń).

👁 Podgląd efektu

głębia koloru

#
często na egzaminie

Liczba bitów na piksel: 1 bit – 2 kolory, 8 bitów – 256 kolorów, 24 bity – ok. 16,7 mln kolorów. Rozmiar obrazu bez kompresji = szerokość × wysokość × bity ÷ 8 (bajty).

200 × 100 × 24 ÷ 8 = 60 000 B
👁 Podgląd efektu

rozdzielczość / DPI

#
często na egzaminie

Rozdzielczość obrazu – wymiary w pikselach (1920×1080). DPI (punkty na cal) – gęstość przy druku: zwykle 300 dpi do druku, 72–96 do ekranu.

warstwa

#

W programie graficznym (GIMP) osobna „folia” z częścią obrazu. Można ją przesuwać, ukrywać, zmieniać przezroczystość bez naruszania innych warstw.

kodek / formaty wideo i dźwięku

#

Kodek kompresuje i dekoduje film lub dźwięk. Na stronach: wideo MP4 (H.264) i WebM, dźwięk MP3, OGG, WAV (bez kompresji).

Prawo i licencje

prawo autorskie

#
często na egzaminie

Twórca ma prawa do swojego utworu (tekstu, zdjęcia, programu) od chwili jego powstania – bez rejestracji. Prawa osobiste (autorstwo) są niezbywalne, majątkowe (zarabianie) można sprzedać.

licencja open source / GPL

#
często na egzaminie

Kod źródłowy jest dostępny i można go zmieniać. GPL wymaga, by zmienione wersje też były udostępniane na GPL. Inne: MIT, Apache, BSD.

freeware / shareware / trial

#
często na egzaminie

Freeware – darmowy (bez dostępu do kodu), shareware – do wypróbowania, potem płatny, trial – pełna wersja na ograniczony czas, adware – darmowy z reklamami, OEM – sprzedawany z komputerem.

Creative Commons

#
często na egzaminie

Licencje na utwory (zdjęcia, teksty): BY – podaj autora, SA – na tych samych warunkach, NC – tylko niekomercyjnie, ND – bez zmian (bez utworów zależnych).

CC BY-SA 4.0
👁 Podgląd efektu

RODO

#

Unijne przepisy o ochronie danych osobowych. Strona zbierająca dane (np. e-mail) musi informować, kto i po co je przetwarza, i chronić je przed wyciekiem.

HTML i CSS

znacznik (tag)

#

Polecenie HTML w nawiasach ostrych, np. <p>. Otwierający <p>, zamykający </p>.

<p>tekst</p>

element

#

Całość w HTML: znacznik otwierający, zawartość i znacznik zamykający, np. <p>Tekst</p> to jeden element akapitu. Znacznik to sam zapis w nawiasach ostrych. W JavaScripcie elementy są obiektami, które można wyszukiwać i zmieniać.

<a href="x.html">Link</a>

atrybut

#
często na egzaminie

Dodatkowa informacja o elemencie HTML, zapisana w znaczniku otwierającym jako nazwa="wartość": <img src="kot.jpg" alt="Kot">. Atrybuty określają m.in. adres (href, src), identyfikator (id, class) i zachowanie pól formularza (type, required). W bazach danych „atrybutem” nazywa się też kolumnę tabeli.

<img src="kot.jpg" alt="Kot">

znacznik pusty

#

Znacznik bez treści i bez zamknięcia: <img>, <br>, <hr>, <input>, <meta>, <link>.

<br>

semantyczny

#
często na egzaminie

Znacznik, którego NAZWA mówi, czym jest treść: <header>, <nav>, <main>, <article>, <footer>, <strong>, <em>. Przeciwieństwo: <div>, <span>, <b>, <i> – tylko wygląd. Semantyka pomaga czytnikom dla niewidomych i wyszukiwarkom.

<nav> zamiast <div class="menu">

element blokowy

#
często na egzaminie

Zajmuje całą szerokość i zaczyna się w nowej linii: <p>, <h1>, <div>, <section>, <ul>, <table>.

👁 Podgląd efektu

element liniowy

#
często na egzaminie

Stoi w tekście jak słowo, nie łamie linii, nie da się mu ustawić width: <a>, <span>, <b>, <img> (img to wyjątek – ma wymiary).

👁 Podgląd efektu

zagnieżdżanie

#

Znacznik wewnątrz innego. Zamykasz w odwrotnej kolejności: co otwarte ostatnie, zamykasz pierwsze.

<p><b>tekst</b></p>

DOM

#

Drzewo elementów strony w pamięci przeglądarki. JavaScript odczytuje i zmienia stronę przez DOM (getElementById…).

selektor

#
często na egzaminie

Część reguły CSS mówiąca, które elementy stylujemy: p, .klasa, #id, aside img.

deklaracja

#

Jedna para „właściwość: wartość;” w regule CSS, np. color: red;. Reguła składa się z selektora i bloku deklaracji w klamrach. Dwukropek oddziela właściwość od wartości, a średnik kończy deklarację.

color: red;

kaskada

#

„Kaskadowe” arkusze stylów: gdy reguły się kłócą, wygrywa ta o większej szczegółowości, a przy równej – późniejsza.

pseudoklasa

#

Stan elementu w CSS po jednym dwukropku: :hover, :first-child, :nth-child().

a:hover

pseudoelement

#

Kawałek elementu w CSS po dwóch dwukropkach: ::first-letter, ::before, ::after.

p::first-letter

model pudełkowy

#
często na egzaminie

Każdy element to pudełko: treść → padding (margines wewnętrzny) → border (ramka) → margin (margines zewnętrzny).

👁 Podgląd efektu

margines wewnętrzny

#
często na egzaminie

padding – odstęp między treścią elementu a jego ramką, czyli „wypełnienie” w środku pudełka. Tło elementu obejmuje też padding. Zwiększenie paddingu powiększa element (chyba że ustawiono box-sizing: border-box).

padding: 10px;

margines zewnętrzny

#
często na egzaminie

margin – odstęp na zewnątrz ramki, oddzielający element od sąsiadów. Jest zawsze przezroczysty (tło elementu go nie obejmuje). margin: auto przy ustalonej szerokości wyśrodkowuje blok w poziomie.

margin: 10px;

encja

#

W HTML: kod znaku specjalnego zaczynający się od & i kończący średnikiem, np. &lt; (znak <), &amp; (znak &), &copy; (©), &nbsp; (twarda spacja). Używa się ich dla znaków, które przeglądarka wzięłaby za fragment kodu, i dla symboli trudnych do wpisania. W bazach danych encja oznacza coś innego – obiekt (tabelę) w projekcie bazy.

&copy; 2026

dostępność (WCAG)

#

Projektowanie strony tak, by mogły z niej korzystać osoby z niepełnosprawnościami: tekst alternatywny, kontrast, etykiety pól, semantyka.

Bazy danych

baza danych

#

Uporządkowany zbiór danych zapisanych w tabelach, które mogą być ze sobą powiązane (relacje). W odróżnieniu od zwykłego pliku baza pozwala szybko wyszukiwać, sortować i łączyć dane językiem SQL oraz pilnuje ich poprawności (np. unikalności kluczy). Bazą zarządza program – system zarządzania bazą danych (np. MariaDB).

DBMS / SZBD

#

System zarządzania bazą danych: MySQL, MariaDB (w XAMPP), PostgreSQL, SQLite, MS SQL Server, Oracle.

phpMyAdmin

#
często na egzaminie

Strona WWW do obsługi bazy MariaDB/MySQL w XAMPP: tworzenie baz, import, zapytania SQL.

http://localhost/phpmyadmin

tabela

#

Podstawowy element bazy – dane ułożone w kolumny i wiersze, jak w arkuszu kalkulacyjnym. Kolumna (pole, atrybut) to jeden rodzaj informacji, np. cena, i ma ustalony typ. Wiersz (rekord, krotka) to jeden obiekt, np. jedna gra, ze wszystkimi swoimi danymi.

rekord

#

Jeden wiersz tabeli – komplet informacji o jednym obiekcie, np. jedna gra: jej id, nazwa, cena i rok. Inne nazwy: wiersz, krotka. Rekordy rozróżnia się po kluczu głównym.

pole

#

Jedna kolumna tabeli, np. cena albo nazwisko. Ma nazwę i typ danych (liczba, tekst, data), który decyduje, co można w nim zapisać. Inne nazwy: kolumna, atrybut. Czasem „polem” nazywa się też pojedynczą komórkę – wartość danej kolumny w danym wierszu.

klucz główny

#
często na egzaminie

Kolumna jednoznacznie identyfikująca wiersz (zwykle id): unikalna, niepusta. PRIMARY KEY.

klucz obcy

#
często na egzaminie

Kolumna wskazująca klucz główny innej tabeli (np. gatunek_id → gatunki.id). Tworzy relację.

relacja 1:N

#
często na egzaminie

Jeden do wielu – najczęstsza: jeden gatunek ma wiele gier. Klucz obcy po stronie „wielu”.

👁 Podgląd efektu

relacja N:M

#
często na egzaminie

Wiele do wielu (uczniowie ↔ przedmioty) – realizowana tabelą pośredniczącą z dwoma kluczami obcymi.

👁 Podgląd efektu

relacja 1:1

#

Związek, w którym jednemu rekordowi z pierwszej tabeli odpowiada najwyżej jeden rekord z drugiej, i odwrotnie – np. osoba i jej dowód osobisty. Występuje rzadko; zwykle stosuje się ją, gdy część danych jest poufna lub rzadko używana i trzyma się ją w osobnej tabeli.

zapytanie (kwerenda)

#
często na egzaminie

Polecenie w języku SQL wysłane do bazy – prośba o dane (SELECT) albo o ich zmianę (INSERT, UPDATE, DELETE). Baza wykonuje je i zwraca wynik: tabelę z wierszami albo informację, ile wierszy zmieniono. Na egzaminie zapytania zapisuje się w pliku kwerendy.txt.

normalizacja

#

Porządkowanie struktury bazy tak, żeby dane się nie powtarzały. Polega na dzieleniu dużej tabeli na kilka mniejszych połączonych kluczami. Kolejne etapy to postacie normalne: 1NF (jedna wartość w komórce), 2NF (wszystko zależy od całego klucza), 3NF (brak zależności między zwykłymi kolumnami). Dzięki temu zmianę wprowadza się w jednym miejscu.

diagram ERD

#

Rysunek przedstawiający strukturę bazy: prostokąty to encje (tabele) z listą atrybutów (kolumn), a linie między nimi to relacje z oznaczeniem rodzaju (1:1, 1:N, N:M). W arkuszach egzaminacyjnych to „Ilustracja 1. Baza danych” – z niej odczytujesz nazwy kolumn i klucze do JOIN.

collation

#
często na egzaminie

Metoda porównywania napisów, np. utf8_polish_ci – jak baza sortuje i porównuje tekst.

SQL injection

#

Atak przez wpisanie kodu SQL w pole formularza. Obrona: (int), mysqli_real_escape_string, zapytania przygotowane.

?id=1 OR 1=1

kopia zapasowa

#

Zapis całej bazy (struktury i danych) do pliku, z którego można ją odtworzyć po awarii lub błędzie. W phpMyAdmin: zakładka Eksport (powstaje plik .sql z poleceniami CREATE TABLE i INSERT), odtworzenie – Import. Z konsoli: mysqldump. Kopie robi się regularnie i trzyma poza serwerem.

mysqldump -u root -p baza > kopia.sql

DDL / DML / DCL / DQL

#
często na egzaminie

Grupy poleceń SQL: DDL – struktura (CREATE, ALTER, DROP), DML – dane (INSERT, UPDATE, DELETE), DQL – odczyt (SELECT), DCL – uprawnienia (GRANT, REVOKE), TCL – transakcje (COMMIT, ROLLBACK).

👁 Podgląd efektu

transakcja (ACID)

#

Kilka operacji traktowanych jak jedna – wykonają się wszystkie albo żadna (np. przelew). ACID: atomowość, spójność, izolacja, trwałość.

START TRANSACTION; … COMMIT;

indeks

#

Dodatkowa struktura w bazie, która przyspiesza wyszukiwanie po kolumnie (jak skorowidz w książce). Klucz główny ma indeks automatycznie.

widok

#

Zapisane zapytanie SELECT, z którego korzysta się jak z tabeli (CREATE VIEW). Nie przechowuje własnych danych.

integralność referencyjna

#

Zasada, że klucz obcy musi wskazywać istniejący rekord – baza nie pozwoli dodać gry z nieistniejącym gatunkiem ani usunąć gatunku, do którego należą gry (chyba że ON DELETE CASCADE).

redundancja

#

Niepotrzebne powtarzanie tych samych danych w wielu miejscach – grozi niespójnością. Usuwa ją normalizacja.

Programowanie

zmienna

#
często na egzaminie

Nazwane miejsce w pamięci na wartość, która może się zmieniać w trakcie działania programu – jak pudełko z etykietą. W PHP nazwa zaczyna się od $ ($cena = 20), w JavaScripcie tworzy się ją słowem let (let cena = 20). Wartość odczytuje się, używając nazwy.

$cena = 10;  /  let cena = 10;

typ danych

#

Rodzaj wartości: liczba całkowita, zmiennoprzecinkowa, tekst (string), logiczna (bool), tablica.

instrukcja warunkowa

#

Konstrukcja, która wykonuje kod tylko wtedy, gdy spełniony jest warunek: if (warunek) { … } else { … }. Pozwala programowi podejmować decyzje, np. wypisać „pełnoletni” albo „niepełnoletni”. W schemacie blokowym oznacza się ją rombem.

pętla

#
często na egzaminie

Powtarzanie kodu: for (znana liczba powtórzeń), while (dopóki), foreach (po tablicy).

funkcja

#
często na egzaminie

Nazwany fragment kodu, który można wywołać wiele razy, z parametrami i wynikiem (return).

parametr / argument

#

Parametr – nazwa w definicji funkcji, argument – konkretna wartość przy wywołaniu.

function f(x) {}  f(5);

tablica

#

Zmienna przechowująca wiele wartości naraz, ułożonych pod kolejnymi numerami liczonymi od 0 (albo pod nazwanymi kluczami). Przykład: lista nazw z bazy. Do kolejnych elementów sięga się w pętli, a do konkretnego – przez numer w nawiasie kwadratowym: $t[0].

konkatenacja

#

Sklejanie tekstów w jeden. W PHP służy do tego kropka ("Ala" . " ma kota"), w JavaScripcie plus ("Ala" + " ma kota"), w SQL funkcja CONCAT. W JS plus łączy też liczby z tekstem, dlatego "5" + 3 daje "53".

"a" . "b"  /  "a" + "b"

rzutowanie

#

Zamiana wartości jednego typu na inny, np. tekstu "12" na liczbę 12. W PHP: (int)$x, (float)$x; w JS: Number(x), parseInt(x), String(x). Potrzebne, bo dane z formularzy zawsze przychodzą jako tekst.

skrypt po stronie serwera

#
często na egzaminie

Kod wykonywany na serwerze przed wysłaniem strony (PHP). Ma dostęp do bazy, przeglądarka nie widzi kodu.

skrypt po stronie klienta

#
często na egzaminie

Kod wykonywany w przeglądarce (JavaScript). Widać go w źródle strony, nie ma dostępu do bazy.

programowanie obiektowe (OOP)

#

Kod oparty na klasach i obiektach. Cechy: hermetyzacja (ukrywanie danych – private), dziedziczenie (extends), polimorfizm.

wyjątek

#

Błąd zgłoszony w trakcie działania programu (throw), obsługiwany w try/catch.

Git

#

System kontroli wersji – zapamiętuje kolejne wersje plików projektu (commity), pozwala wrócić do dowolnej z nich i pracować w kilka osób. GitHub to serwis z repozytoriami Git.

git add .
git commit -m "Opis zmian"
git push

ergonomia

#
często na egzaminie

Dopasowanie stanowiska pracy do człowieka: monitor górną krawędzią na wysokości oczu w odległości 40–75 cm, bokiem do okna, krzesło z regulacją, łokcie pod kątem ok. 90°, 5 minut przerwy po każdej godzinie pracy przy monitorze.

debugowanie

#

Szukanie i poprawianie błędów: konsola F12, echo/var_dump w PHP, console.log w JS.

kompilator / interpreter

#

Kompilator tłumaczy cały program przed uruchomieniem (C++), interpreter wykonuje linia po linii (PHP, JavaScript).

algorytm

#
często na egzaminie

Skończony, uporządkowany ciąg kroków prowadzący do rozwiązania problemu. Zapisuje się go listą kroków, schematem blokowym, pseudokodem albo w języku programowania.

schemat blokowy

#
często na egzaminie

Rysunek algorytmu: owal – start/stop, prostokąt – operacja, romb – warunek (dwa wyjścia: tak/nie), równoległobok – wejście/wyjście danych.

👁 Podgląd efektu

rekurencja

#

Funkcja, która wywołuje samą siebie z mniejszym problemem, aż do warunku zakończenia (np. silnia: n! = n · (n-1)!).

function silnia($n) { return $n <= 1 ? 1 : $n * silnia($n - 1); }

operator

#

Znak wykonujący działanie na wartościach: arytmetyczny (+ - * / %), porównania (== < >), logiczny (&& || !), przypisania (= +=).

stała

#

Nazwana wartość, której nie można zmienić w trakcie programu: const w JS, define/const w PHP.

zasięg zmiennej

#

Miejsce, w którym zmienna jest dostępna: lokalna – tylko w swojej funkcji (lub bloku), globalna – w całym skrypcie.

zdarzenie

#

Coś, co dzieje się na stronie i na co JavaScript może zareagować: kliknięcie, wpisanie znaku, załadowanie strony, najechanie myszą.

onclick, oninput, onload

XSS

#

Atak polegający na wstrzyknięciu skryptu JavaScript w treść strony (np. w komentarzu). Obrona: htmlspecialchars() przy wypisywaniu danych od użytkowników.

<script>alert(1)</script>

hashowanie haseł

#

Zapis hasła jako skrótu (hash), z którego nie da się odtworzyć hasła. W PHP: password_hash() i password_verify(). Nigdy nie zapisuje się haseł zwykłym tekstem.

JSON

#

Tekstowy format wymiany danych: obiekty {"klucz": "wartość"} i tablice [ … ]. Rozumie go JavaScript, PHP i większość języków.

{"nazwa": "Tetris", "cena": 19}

jQuery

#

Biblioteka JavaScript skracająca pracę z DOM: $("#id").hide() zamiast document.getElementById("id").style.display = "none".

$("#menu").slideToggle();

biblioteka / framework

#

Biblioteka – gotowy kod, z którego się korzysta (jQuery, React). Framework – gotowy szkielet całej aplikacji, w który wpisuje się własny kod (Laravel, Angular).

CMS

#
często na egzaminie

System zarządzania treścią – strona, którą edytuje się z panelu bez programowania (WordPress, Joomla, Drupal).

IDE / edytor kodu

#

Program do pisania kodu z kolorowaniem składni i podpowiedziami (Visual Studio Code, Notepad++, PhpStorm). Na egzaminie – edytor dostępny na stanowisku.

systemy liczbowe

#
często na egzaminie

Dwójkowy (binarny, cyfry 0–1), ósemkowy (0–7), dziesiętny (0–9), szesnastkowy (0–9 i A–F). 255 = 11111111₂ = FF₁₆ – stąd kolory #FF0000.

13 = 1101₂ = D₁₆
👁 Podgląd efektu

bit / bajt

#
często na egzaminie

Bit – najmniejsza jednostka informacji (0 lub 1). Bajt = 8 bitów. 1 KiB = 1024 B, 1 MiB = 1024 KiB (w handlu często 1 kB = 1000 B).

👁 Podgląd efektu

Chcesz umieć tego używać na egzaminie?

Słownik mówi, co robi dany element. Kurs uczy, jak z nich zbudować całą stronę z arkusza CKE – krok po kroku, z bazą danych, PHP i JavaScriptem.

Zobacz kurs · 49,99 zł Darmowe lekcje