Základní pojmy Struktura HTML Základy formátování stránky v HTML Hypertextové odkazy Obrázky Seznamy Tabulky Pokročilejší prvky stránky Základy CSS Formátování pomocí CSS Tvorba rozložení stránky pomocí CSS Vibe coding a využití AI při práci s HTML a CSS Praktické úpravy webového obsahu
Obsah kurzu
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ředpoklady
doporučujeme běžnou uživatelskou znalost internetu a základní orientaci v práci s webem. Výhodou je absolvování kurzu Úvod do tvorby webových stránek nebo Redakční systémy základní, ale není to podmínkou. Znalost programování není nutná.
Návaznosti
SEO/AEO – optimalizace pro vyhledávače a AI, Webová analytika – Google Analytics, PHP