Slovníček pojmů

Všech 160 pojmů z učebny tvorby webu na jednom místě. U každého je krátké vysvětlení a odkaz na lekci, kde se o něm mluví podrobněji. Pojmy jsou rozdělené do stejných pěti kategorií jako filtry ve vyhledávání a uvnitř každé kategorie jdou podle abecedy.

Hledáš konkrétní pojem? Rychlejší než procházení téhle stránky bývá vyhledávání na rozcestníku učebny – najde pojem i při překlepu a prohledá zároveň texty všech lekcí.

Příprava a nástroje (6 pojmů)

jak prohlížeč vykresluje stránku
Postup, kterým prohlížeč načte HTML, CSS a JS a promění je ve viditelnou stránku. Lekce: Jak funguje webový prohlížeč
komentáře v kódu
Poznámky v kódu, které prohlížeč ignoruje – v HTML <!-- -->, v CSS /* */, v JS //. Lekce: Komentáře v HTML, CSS a JS
nahrání souborů přes FTP
Přenesení hotových souborů webu na server pomocí FTP klienta. Lekce: Nahrání na server (FTP)
struktura složek webu
Organizace HTML, CSS, JS a obrázkových souborů do přehledných složek projektu. Lekce: Práce se soubory a složkami
testování stránky lokálně
Otevření rozpracované HTML stránky přímo v prohlížeči před nahráním na server. Lekce: Testování v prohlížeči
vlastní chybová stránka 404
Stránka zobrazená místo prázdné chyby, když návštěvník zadá neexistující adresu. Lekce: Chybová stránka 404

Struktura HTML (49 pojmů)

<a>
Odkaz na jinou stránku nebo místo, atribut href určuje cíl. Lekce: Odkazy (a href)
alt atribut
Alternativní textový popis obrázku pro čtečky obrazovky a při nenačtení obrázku. Lekce: Obrázky (img)
<article>
Samostatně smysluplný celek obsahu (např. jedna lekce nebo článek). Lekce: Sémantické tagy (header, main, footer…)
<aside>
Vedlejší obsah nesouvisející přímo s hlavním textem (např. postranní panel). Lekce: Sémantické tagy (header, main, footer…)
<body>
Tělo stránky – vše, co se skutečně zobrazuje v prohlížeči. Lekce: DOCTYPE a základní kostra
<br>
Zalomení řádku uvnitř odstavce, nepárový tag. Lekce: Odstavce a zalomení řádku
<button>
Klikatelné tlačítko. Lekce: Formuláře (form, input)
<div>
Obecný blokový kontejner bez vlastního významu, používá se jen když nesedí sémantický tag. Lekce: Sémantické tagy (header, main, footer…)
<dl>
Definiční seznam – dvojice termín/popis. Lekce: Seznamy (ul, ol, li)
<em>
Zdůrazněný text (obvykle kurzívou). Lekce: Odstavce a zalomení řádku
<fieldset>
Seskupí související formulářová pole rámečkem. Lekce: Formuláře (form, input)
<figcaption>
Popisek k obsahu uvnitř figure. Lekce: Obrázky (img)
<figure>
Obalí obrázek (nebo jiný obsah) spolu s popiskem figcaption. Lekce: Obrázky (img)
<footer>
Sémantická patička stránky nebo sekce. Lekce: Sémantické tagy (header, main, footer…)
<form>
Formulář, obaluje vstupní pole a tlačítko pro odeslání. Lekce: Formuláře (form, input)
<h1>–<h6>
Nadpisy šesti úrovní důležitosti, h1 je nejvyšší a měl by být na stránce jen jednou. Lekce: Nadpisy h1–h6
<head>
Hlavička stránky – metadata, titulek, odkaz na styly, sama se nezobrazuje. Lekce: Hlavička (head)
<header>
Sémantická hlavička stránky nebo sekce (ne totéž co head). Lekce: Sémantické tagy (header, main, footer…)
<hr>
Vodorovná oddělovací čára mezi tematickými bloky. Lekce: Odstavce a zalomení řádku
href atribut
Cílová adresa odkazu u tagu a. Lekce: Odkazy (a href)
<html>
Kořenový element každé HTML stránky, obaluje celý obsah. Lekce: DOCTYPE a základní kostra
<img>
Vloží obrázek, atribut alt je povinný pro přístupnost. Lekce: Obrázky (img)
<input>
Vstupní pole formuláře, typ se mění atributem type (text, email, checkbox…). Lekce: Formuláře (form, input)
<label>
Popisek formulářového pole, propojený s ním přes atribut for/id. Lekce: Formuláře (form, input)
<legend>
Popisek celé skupiny polí uvnitř fieldset. Lekce: Formuláře (form, input)
<li>
Jedna položka seznamu uvnitř ul nebo ol. Lekce: Seznamy (ul, ol, li)
<main>
Hlavní jedinečný obsah stránky, na stránce má být jen jednou. Lekce: Sémantické tagy (header, main, footer…)
<meta>
Metadata stránky – např. kódování znaků nebo popis pro vyhledávače. Lekce: Hlavička (head)
<nav>
Sémantický blok navigace s odkazy. Lekce: Sémantické tagy (header, main, footer…)
<ol>
Číslovaný seznam. Lekce: Seznamy (ul, ol, li)
<option>
Jedna položka uvnitř select. Lekce: Formuláře (form, input)
<p>
Odstavec textu. Lekce: Odstavce a zalomení řádku
přístupný formulářový popisek
Propojení label a input přes shodné for/id, aby čtečka oznámila, k čemu pole patří. Lekce: Formuláře (form, input)
responzivní obrázek
Obrázek s max-width: 100% a height: auto, aby se přizpůsobil šířce rodiče. Lekce: Obrázky (img)
sdílení stránky přes Open Graph
Meta tagy og:title, og:description a og:image určující náhled při sdílení odkazu. Lekce: Open Graph a meta tagy pro sdílení
<section>
Tematická sekce obsahu, obvykle s vlastním nadpisem. Lekce: Sémantické tagy (header, main, footer…)
<select>
Rozbalovací seznam možností ve formuláři. Lekce: Formuláře (form, input)
sémantické rozvržení stránky
Použití header/nav/main/article/aside/footer místo obecných div, aby dávala stránka smysl i bez CSS. Lekce: Sémantické tagy (header, main, footer…)
<span>
Obecný řádkový kontejner bez vlastního významu. Lekce: Sémantické tagy (header, main, footer…)
<strong>
Silně zdůrazněný text (obvykle tučně), má i významovou váhu pro čtečky. Lekce: Odstavce a zalomení řádku
<table>
Tabulka pro zobrazení dat v řádcích a sloupcích. Lekce: Tabulky (table)
<tbody>
Skupina obsahových řádků tabulky. Lekce: Tabulky (table)
<td>
Buňka tabulky s běžnými daty. Lekce: Tabulky (table)
<textarea>
Víceřádkové textové pole formuláře. Lekce: Formuláře (form, input)
<th>
Záhlavní buňka tabulky (tučně, pro čtečky označená jako nadpis sloupce/řádku). Lekce: Tabulky (table)
<thead>
Skupina záhlavních řádků tabulky. Lekce: Tabulky (table)
<title>
Titulek stránky zobrazený na kartě prohlížeče a ve výsledcích vyhledávání. Lekce: Hlavička (head)
<tr>
Řádek tabulky. Lekce: Tabulky (table)
<ul>
Nečíslovaný (odrážkový) seznam. Lekce: Seznamy (ul, ol, li)

CSS (56 pojmů)

::after
CSS pseudoelement vkládající obsah za obsah prvku. Lekce: Selektory (třídy, id, tagy)
::before
CSS pseudoelement vkládající obsah před obsah prvku. Lekce: Selektory (třídy, id, tagy)
:focus
CSS pseudotřída pro stav, kdy má prvek klávesový fokus. Lekce: Selektory (třídy, id, tagy)
:focus-visible
CSS pseudotřída zobrazující fokus jen při ovládání klávesnicí, ne myší. Lekce: Selektory (třídy, id, tagy)
:hover
CSS pseudotřída pro stav, kdy je nad prvkem myš. Lekce: Selektory (třídy, id, tagy)
:root
CSS selektor kořenového prvku dokumentu, běžné místo pro definici proměnných. Lekce: CSS proměnné (custom properties)
@media
CSS pravidlo pro podmíněné styly podle šířky okna nebo zařízení (media query). Lekce: Responzivní design
align-items
Zarovnání položek flexboxu podél vedlejší osy. Lekce: Flexbox – rozvržení prvků
background
Souhrnná CSS vlastnost pro pozadí (barva, obrázek, pozice…). Lekce: Barvy a pozadí
background-color
CSS vlastnost pro barvu pozadí prvku. Lekce: Barvy a pozadí
border
Ohraničení prvku (šířka, styl, barva). Lekce: Box model (margin, padding, border)
border-radius
Zaoblení rohů prvku. Lekce: Box model (margin, padding, border)
box model
Model, podle kterého prohlížeč skládá obsah, padding, border a margin prvku. Lekce: Box model (margin, padding, border)
box model v praxi
Výpočet celkové šířky prvku jako součtu width, paddingu a borderu (pokud není box-sizing: border-box). Lekce: Box model (margin, padding, border)
box-sizing
Určuje, zda se padding a border počítají do zadané šířky/výšky prvku. Lekce: Box model (margin, padding, border)
color
CSS vlastnost pro barvu textu. Lekce: Barvy a pozadí
custom property
Vlastní CSS proměnná definovaná se dvěma pomlčkami, např. --mezera. Lekce: CSS proměnné (custom properties)
display
CSS vlastnost určující způsob vykreslení prvku (block, inline, flex, grid, none…). Lekce: Flexbox – rozvržení prvků
display: flex
Zapne flexbox rozvržení pro přímé potomky prvku. Lekce: Flexbox – rozvržení prvků
display: grid
Zapne mřížkové (grid) rozvržení pro přímé potomky prvku. Lekce: CSS Grid – rozvržení stránky
flex-direction
Určuje směr řazení prvků ve flexboxu (row, column…). Lekce: Flexbox – rozvržení prvků
flex-wrap
Povolí zalamování položek flexboxu do dalších řádků. Lekce: Flexbox – rozvržení prvků
font-family
CSS vlastnost určující písmo textu. Lekce: Písmo a typografie
font-size
CSS vlastnost určující velikost písma. Lekce: Písmo a typografie
font-weight
CSS vlastnost určující tloušťku písma (normal, bold, 400, 700…). Lekce: Písmo a typografie
fr jednotka
Jednotka CSS gridu představující díl volného prostoru. Lekce: CSS Grid – rozvržení stránky
gap
Mezera mezi položkami flexboxu nebo gridu. Lekce: Flexbox – rozvržení prvků
grid-area
Umístí prvek do konkrétní oblasti CSS gridu. Lekce: CSS Grid – rozvržení stránky
grid-template-columns
Definuje počet a šířku sloupců CSS gridu. Lekce: CSS Grid – rozvržení stránky
grid-template-rows
Definuje počet a výšku řádků CSS gridu. Lekce: CSS Grid – rozvržení stránky
height
Výška prvku. Lekce: Box model (margin, padding, border)
hover a focus stav tlačítka
Odlišení vizuálu tlačítka při najetí myší (:hover) a při fokusu klávesnicí (:focus-visible). Lekce: Selektory (třídy, id, tagy)
id selektor
CSS selektor podle atributu id, zapisuje se s mřížkou, např. #hlavicka. Lekce: Selektory (třídy, id, tagy)
justify-content
Zarovnání položek flexboxu podél hlavní osy. Lekce: Flexbox – rozvržení prvků
kaskáda
Princip CSS, podle kterého se při konfliktu stylů rozhoduje, které pravidlo má přednost. Lekce: Co je CSS a jak se připojuje
letter-spacing
Mezery mezi jednotlivými znaky textu. Lekce: Písmo a typografie
line-height
CSS vlastnost pro výšku řádku textu. Lekce: Písmo a typografie
<link>
Propojí stránku s externím souborem, nejčastěji s CSS stylopisem. Lekce: Co je CSS a jak se připojuje
margin
Vnější odsazení prvku od okolních prvků. Lekce: Box model (margin, padding, border)
media query
Podmínka v CSS, která aplikuje styly jen při splnění zadané šířky/výšky obrazovky. Lekce: Responzivní design
mobile-first
Přístup k tvorbě stylů nejdřív pro mobil, pak rozšiřovaný pro větší obrazovky. Lekce: Responzivní design
mřížka karet gridem
Kombinace display: grid a grid-template-columns s repeat() pro rovnoměrné rozložení karet. Lekce: CSS Grid – rozvržení stránky
opacity
Průhlednost celého prvku od 0 (neviditelný) do 1 (plně viditelný). Lekce: Barvy a pozadí
padding
Vnitřní odsazení mezi obsahem prvku a jeho okrajem. Lekce: Box model (margin, padding, border)
propojení CSS souboru se stránkou
Vložení <link rel="stylesheet" href="..."> do head, aby prohlížeč načetl externí styly. Lekce: Co je CSS a jak se připojuje
repeat()
Funkce zkracující opakující se definici sloupců/řádků v gridu, např. repeat(3, 1fr). Lekce: CSS Grid – rozvržení stránky
responzivní navigace přes media query
Skrytí nebo přeskládání navigace pomocí @media pro menší obrazovky. Lekce: Responzivní design
specificita
Míra „váhy“ CSS selektoru, která rozhoduje, které pravidlo se použije při konfliktu. Lekce: Co je CSS a jak se připojuje
text-align
Zarovnání textu (left, center, right, justify). Lekce: Písmo a typografie
text-decoration
Dekorace textu, např. podtržení nebo jeho zrušení. Lekce: Písmo a typografie
tmavý a světlý motiv přes proměnné
Přepínání vzhledu změnou hodnot CSS proměnných v :root podle vybraného motivu. Lekce: CSS proměnné (custom properties)
třídový selektor
CSS selektor podle atributu class, zapisuje se s tečkou, např. .tlacitko. Lekce: Selektory (třídy, id, tagy)
var()
Funkce pro použití hodnoty CSS proměnné, např. var(--barva-hlavni). Lekce: CSS proměnné (custom properties)
viewport
Meta tag nastavující chování stránky na mobilních zařízeních. Lekce: Responzivní design
vycentrování boxu flexboxem
Kombinace display: flex, justify-content: center a align-items: center pro vystředění obsahu. Lekce: Flexbox – rozvržení prvků
width
Šířka prvku. Lekce: Box model (margin, padding, border)

JavaScript (45 pojmů)

=== a ==
Porovnávací operátory; === kontroluje i datový typ, == ho ignoruje a je proto méně bezpečný. Lekce: Podmínky a cykly
addEventListener()
Metoda navěšující funkci, která se spustí při zadané události (klik, odeslání…). Lekce: Události (click, submit…)
array.filter()
Metoda pole, která vrátí nové pole jen s položkami splňujícími podmínku. Lekce: Pole a objekty
array.forEach()
Metoda pole, která provede zadanou funkci pro každou jeho položku. Lekce: Pole a objekty
array.map()
Metoda pole, která vrátí nové pole s výsledkem funkce aplikované na každou položku. Lekce: Pole a objekty
array.push()
Metoda pole, která přidá novou hodnotu na jeho konec. Lekce: Pole a objekty
arrow function
Kratší zápis funkce pomocí šipky =>, např. (a, b) => a + b. Lekce: Funkce
classList.add/remove/toggle
Metody pro přidání, odebrání nebo přepnutí CSS třídy u HTML prvku. Lekce: Práce s DOM
console.log()
Vypíše hodnotu do konzole prohlížeče, používá se hlavně pro ladění kódu. Lekce: Co je JavaScript
const
Klíčové slovo pro deklaraci proměnné, jejíž hodnota se po přiřazení už nemění. Lekce: Proměnné (let, const, var)
cyklus přes pole
Procházení všech prvků pole pomocí for nebo metody forEach(). Lekce: Pole a objekty
dataset
Přístup k vlastním data-* atributům HTML prvku z JavaScriptu. Lekce: Práce s DOM
DOMContentLoaded
Událost, která nastane, jakmile je HTML stránky načtené a připravené k obsluze skriptem. Lekce: Práce s DOM
event objekt
Objekt s informacemi o události, který dostane obslužná funkce jako parametr. Lekce: Události (click, submit…)
event.preventDefault()
Zastaví výchozí chování prohlížeče pro danou událost, např. odeslání formuláře. Lekce: Události (click, submit…)
fetch()
Funkce pro asynchronní načtení souboru nebo dat ze serveru. Lekce: fetch() – načítání dat ze serveru
for cyklus
Cyklus opakující blok kódu po zadaný počet kroků. Lekce: Podmínky a cykly
function
Klíčové slovo pro definici pojmenované funkce. Lekce: Funkce
funkce s parametry
Pojmenovaný blok kódu, kterému lze při volání předat vstupní hodnoty (parametry). Lekce: Funkce
getElementById()
Metoda vracející HTML prvek podle jeho atributu id. Lekce: Práce s DOM
JSON.parse()
Převede textový řetězec ve formátu JSON na skutečný JavaScriptový objekt nebo pole. Lekce: fetch() – načítání dat ze serveru
JSON.stringify()
Převede JavaScriptový objekt nebo pole na textový řetězec ve formátu JSON. Lekce: localStorage – ukládání dat v prohlížeči
let
Klíčové slovo pro deklaraci proměnné, jejíž hodnotu lze později změnit. Lekce: Proměnné (let, const, var)
localStorage.getItem()
Načte hodnotu uloženou v localStorage podle zadaného klíče. Lekce: localStorage – ukládání dat v prohlížeči
localStorage.setItem()
Uloží hodnotu pod zadaným klíčem do localStorage prohlížeče. Lekce: localStorage – ukládání dat v prohlížeči
načtení dat přes fetch()
Asynchronní stažení souboru (např. JSON) ze serveru pomocí fetch() a zpracování odpovědi. Lekce: fetch() – načítání dat ze serveru
null a undefined
Dvě hodnoty pro „nic“ – undefined vzniká automaticky, null se přiřazuje záměrně. Lekce: Proměnné (let, const, var)
objekt (object)
Datová struktura ukládající hodnoty pod pojmenovanými klíči, např. { jmeno: 'Jana' }. Lekce: Pole a objekty
obsluha kliknutí na tlačítko
Navěšení funkce na klik pomocí addEventListener('click', …) místo inline onclick. Lekce: Události (click, submit…)
podmínka if/else
Rozhodovací konstrukce, která provede kód jen při splnění zadané podmínky. Lekce: Podmínky a cykly
pole (array)
Uspořádaný seznam hodnot, přistupuje se k nim přes index od nuly. Lekce: Pole a objekty
proměnná let vs const
let jde po vytvoření změnit, const ne – hodnota zůstává po celou dobu stejná. Lekce: Proměnné (let, const, var)
promise
Objekt představující výsledek asynchronní operace, který se buď splní, nebo selže. Lekce: fetch() – načítání dat ze serveru
querySelector()
Metoda vracející první HTML prvek odpovídající zadanému CSS selektoru. Lekce: Práce s DOM
querySelectorAll()
Metoda vracející všechny HTML prvky odpovídající zadanému CSS selektoru. Lekce: Práce s DOM
return
Klíčové slovo, kterým funkce vrací výslednou hodnotu volajícímu kódu. Lekce: Funkce
scope proměnné
Rozsah platnosti proměnné – kde v kódu je daná proměnná viditelná a použitelná. Lekce: Proměnné (let, const, var)
template literal
Řetězec ohraničený zpětnými uvozovkami, umožňuje vkládat proměnné pomocí ${...}. Lekce: Proměnné (let, const, var)
then() / catch()
Metody promise pro zpracování úspěšného výsledku (then) nebo chyby (catch). Lekce: fetch() – načítání dat ze serveru
typeof
Operátor zjišťující datový typ hodnoty (string, number, object…). Lekce: Proměnné (let, const, var)
uložení dat do localStorage
Uložení hodnoty v prohlížeči přes localStorage.setItem(), aby zůstala i po zavření stránky. Lekce: localStorage – ukládání dat v prohlížeči
validace formuláře v JavaScriptu
Kontrola vyplněných hodnot formuláře před odesláním pomocí JavaScriptu. Lekce: Zpracování formuláře JavaScriptem
var
Starší způsob deklarace proměnné, dnes se místo něj doporučuje let/const. Lekce: Proměnné (let, const, var)
výběr prvku v DOM
Nalezení HTML prvku v JavaScriptu pomocí document.querySelector() nebo getElementById(). Lekce: Práce s DOM
while cyklus
Cyklus opakující blok kódu, dokud platí zadaná podmínka. Lekce: Podmínky a cykly

Přístupnost (4 pojmy)

ARIA role pro netextové prvky
Doplnění role a aria-label tam, kde HTML samo o sobě nedává čtečce dost informací. Lekce: ARIA role a atributy
checklist přístupnosti
Sada základních kontrol (alt texty, kontrast, fokus, nadpisy), podle kterých se ověřuje přístupnost stránky. Lekce: Checklist přístupnosti
skip link
Skrytý odkaz na začátku stránky, který se zobrazí při fokusu a umožní přeskočit rovnou na obsah. Lekce: Skip linky a navigace klávesnicí
zvýraznění fokusu z klávesnice
Použití :focus-visible místo :focus, aby se rámeček fokusu zobrazoval jen při ovládání klávesnicí. Lekce: Checklist přístupnosti