Náročnost kurzu: 3/5 – střední | Délka skupinového kurzu: 12 h, délka individuálního školení: 8 h
Školení HTML a CSS je určené pro všechny, kdo potřebují provádět drobné úpravy ve stávajících webových stránkách, pracovat s obsahem v redakčním systému nebo lépe rozumět tomu, co se na webu děje pod povrchem. Kurz je vhodný pro správce webů, marketingové pracovníky, SEO/AEO specialisty, e-mail marketing specialisty i uživatele, kteří chtějí samostatně upravovat jednoduchý webový obsah.
Na školení si vysvětlíme základní principy HTML a CSS. HTML slouží ke strukturování obsahu stránky, například nadpisů, odstavců, obrázků, odkazů, seznamů nebo tabulek. CSS určuje vzhled těchto prvků, například barvy, velikosti, mezery, zarovnání nebo rozložení stránky. Naučíte se číst jednoduchý kód, upravovat běžné části stránky a lépe poznat, kde je chyba ve struktuře nebo formátování.
Součástí kurzu je také práce s AI jako praktickým pomocníkem při návrhu jednoduchého kódu, vysvětlení nejasného zápisu, hledání chyb nebo rychlém prototypování úprav. Hlavní důraz ale zůstává na pochopení HTML a CSS, aby účastník uměl výstupy AI zkontrolovat a bezpečně použít v reálném webu, redakčním systému nebo e-mailové šabloně.
Co se naučíte
- porozumět základním pojmům z oblasti tvorby webových stránek,
- pochopit strukturu a syntaxi jazyka HTML5,
- pracovat se základními prvky HTML, například nadpisy, odstavci, odkazy, obrázky, seznamy a tabulkami,
- pochopit princip CSS3 a jeho použití při formátování vzhledu stránky,
- upravovat texty, odkazy, obrázky, tabulky, tlačítka a bloky pomocí HTML a CSS,
- orientovat se v jednoduchém zdrojovém kódu webové stránky nebo šablony,
- vytvářet jednoduché rozložení stránky pomocí CSS,
- využívat AI při návrhu kódu, vysvětlení zápisu nebo hledání chyb.
Osnova školení HTML a CSS
U individuálního a firemního školení je možné osnovu přizpůsobit.
- Základní pojmy
- webový server a jeho role při zobrazování webu
- webový prohlížeč
- vyhledávače a jejich význam pro návštěvnost webu
- statický web
- dynamický web
- HTML jako jazyk pro strukturu webové stránky
- CSS jako jazyk pro vzhled a formátování stránky
- PHP, MySQL a JavaScript v základním přehledu
- Struktura HTML
- pravidla a syntaxe HTML
- kostra HTML dokumentu
- hlavička stránky
- tělo stránky a viditelný obsah
- značky, atributy a jejich význam
- správné odsazení a přehlednost kódu
- Základy formátování stránky v HTML
- odstavce
- nadpisy a jejich hierarchie
- základní formátovací značky
- zvýraznění textu
- poznámky ve zdrojovém kódu
- nejčastější chyby při zápisu HTML
- Hypertextové odkazy
- pravidla vytvoření URL adresy
- absolutní a relativní odkazy
- chování odkazů
- odkazy na webové stránky, soubory, e-mail a telefon
- jmenné odkazy v rámci stránky
- vhodný text odkazu z pohledu uživatele a SEO
- Obrázky
- vložení obrázku do stránky
- cesta k obrázku
- alternativní text obrázku
- základní formátování obrázku
- obrázek jako odkaz
- vhodné rozměry a formáty obrázků pro web
- Seznamy
- struktura a použití seznamů
- číslované seznamy
- nečíslované seznamy
- vnořené seznamy
- seznamy jako nástroj pro přehlednější obsah
- Tabulky
- vytvoření jednoduché tabulky
- řádky, sloupce a buňky
- záhlaví tabulky
- slučování buněk
- základní formátování tabulek
- kdy je tabulka vhodná a kdy je lepší použít jinou strukturu obsahu
- Pokročilejší prvky stránky
- tlačítka a odkazové prvky
- bloky a oddíly stránky
- základní práce s třídami a identifikátory
- vkládání prvků do redakčního systému
- úpravy HTML v e-mailových šablonách
- Základy CSS
- použití a význam CSS
- orientace v CSS pravidlech
- selektory, vlastnosti a hodnoty
- třídy a identifikátory
- způsoby připojení CSS ke stránce
- priorita CSS pravidel a proč se některé úpravy nemusí projevit
- Formátování pomocí CSS
- formátování textů
- barvy, velikosti a řezy písma
- mezery, okraje a zarovnání
- formátování odkazů
- formátování obrázků
- formátování tabulek
- jednoduché úpravy tlačítek a bloků
- Tvorba rozložení stránky pomocí CSS
- základní princip rozložení stránky
- blokové a řádkové prvky
- šířky, výšky a mezery mezi prvky
- základní práce se sloupci a bloky
- základní princip responzivního zobrazení
- kontrola vzhledu na různých velikostech obrazovky
- Vibe coding a využití AI při práci s HTML a CSS
- vibe coding jako tvorba nebo úprava kódu pomocí přirozeného zadání pro AI
- AI jako pomocník při návrhu jednoduchého HTML a CSS kódu
- vysvětlení neznámého zápisu nebo části kódu pomocí AI
- hledání chyb v HTML a CSS
- úprava výstupu AI tak, aby odpovídal skutečnému webu
- nutnost kontroly funkčnosti, bezpečnosti a vhodnosti kódu člověkem
- Praktické úpravy webového obsahu
- úprava jednoduché webové stránky
- vložení nadpisů, textů, odkazů, obrázků, seznamů a tabulek
- úprava vzhledu pomocí CSS
- kontrola chyb ve zdrojovém kódu
- praktické využití znalostí při správě webu nebo redakčního systému
Předchozí znalosti a návazná školení
Úvod do tvorby webových stránek
Po absolvování školení můžete pokračovat:
Verze programu
Otevřené kurzy probíhají na aktuální verzi programu. Lektor po dohodě s účastníky upozorní na rozdíly starších verzí.