Učebna programování HTML stránek
Navštíveno: 0 z 42 lekcí
Příprava a nástroje
K tvorbě webových stránek nepotřebuješ žádný drahý software. Stačí obyčejný textový editor – například zdarma dostupný Visual Studio Code, Notepad++ nebo Nova na Macu – a libovolný webový prohlížeč, ve kterém si výsledek okamžitě zkontroluješ. Soubory s příponou .html vytváříš přímo v editoru a otevíráš dvojklikem v prohlížeči. Naučíš se také, jak správně strukturovat soubory projektu a jak hotový web nahrát na server přes FTP. Žádná instalace serverů ani složité nastavení na začátku není potřeba.
Struktura HTML
HTML stránka se skládá z takzvaných tagů – příkazů uzavřených do lomených závorek, například <p> pro odstavec nebo <h1> pro hlavní nadpis. Většina tagů má otevírací část <tag> a uzavírací část </tag>, mezi které se vkládá obsah. Základní kostra každé stránky obsahuje tagy <!DOCTYPE html>, <html>, <head> a <body>. Postupně se naučíš pracovat s nadpisy, odstavci, seznamy, odkazy, obrázky, tabulkami, formuláři a sémantickými tagy, které dávají stránce správnou strukturu.
CSS – vzhled stránky
CSS (Cascading Style Sheets) je jazyk, který určuje, jak bude stránka vypadat – barvy, písmo, rozměry, rozmístění prvků. Píšeš ho odděleně od HTML, nejčastěji do samostatného souboru s příponou .css, který připojíš k HTML pomocí tagu <link>. Základní pravidlo CSS se skládá ze selektoru (co chceš upravit) a deklarace (jak to chceš upravit), například p { color: red; } obarví všechny odstavce červeně. Lekce CSS tě provedou od základů přes box model a flexbox až po responzivní design pro mobily.
JavaScript – základy
JavaScript je programovací jazyk, který stránkám přidává interaktivitu a chování – reaguje na kliknutí, mění obsah bez znovunačtení stránky a ověřuje formuláře. V lekcích se naučíš základy: proměnné a operátory, podmínky a cykly, funkce, práci s DOM a obsluhu událostí. Pak se dostaneme na praktická témata: zpracování formulářů JavaScriptem, pole a objekty, ukládání dat pomocí localStorage a načítání dat ze serveru přes fetch().
Přístupnost (ARIA)
Přístupný web je web, který může používat každý – včetně nevidomých a slabozrakých, kteří pracují s odečítači obrazovky jako VoiceOver. Přístupnost začíná správným HTML: sémantické tagy, popisky obrázků, logická struktura nadpisů. ARIA (Accessible Rich Internet Applications) pak doplňuje HTML o atributy, které odečítačům dávají informace tam, kde HTML nestačí. Naučíš se také, jak správně implementovat skip linky a jak otestovat přístupnost klávesnicí.