Webový frontend je tvořen třemi základními technologiemi, které spolu úzce spolupracují na vytvoření vizuálního zážitku v prohlížeči. Zatímco HTML dává stránce strukturu, CSS jí dává vzhled a JavaScript zajišťuje interaktivitu.

HTML není programovací jazyk, ale značkovací jazyk. Slouží k definování obsahu a logické struktury dokumentu pomocí značek (tagů).

• Elementy: Základní stavební bloky uzavřené v lomených závorkách (např. <h1> pro nadpis, <p> pro odstavec).
• Atributy: Doplňující informace o elementu (např. href u odkazu nebo src u obrázku).
• Sémantika (HTML5): Používání značek, které popisují význam obsahu (např. <article>, <nav>, <footer>). To je zásadní pro přístupnost a SEO.

—

CSS je jazyk určený pro popis způsobu zobrazení elementů na stránce. Umožňuje oddělit obsah (HTML) od designu.

• Selektory: Určují, na který HTML prvek se styl aplikuje (např. podle názvu tagu, třídy .class nebo ID #id).
• Box Model: Každý prvek na webu je vnímán jako obdélník s vlastnostmi: content, padding (vnitřní okraj), border (ohraničení) a margin (vnější okraj).
• Layouty: Moderní metody pro skládání prvků na stránce: Flexbox (pro jednorozměrné řazení) a Grid (pro komplexní dvourozměrné mřížky).
• Responzivní design: Pomocí Media Queries lze měnit vzhled webu podle velikosti obrazovky (mobil vs. desktop).

—

JavaScript je vysokoúrovňový, interpretovaný programovací jazyk, který vdechuje webu život.

• Manipulace s DOM (Document Object Model): Schopnost za běhu měnit HTML strukturu nebo CSS styly (např. zobrazení menu po kliknutí).
• Event Handling: Reagování na akce uživatele (stisk klávesy, pohyb myši, odeslání formuláře).
• Asynchronní komunikace (AJAX/Fetch): Načítání dat ze serveru na pozadí bez nutnosti obnovit celou stránku.
• Ekosystém: Moderní web se neobejde bez frameworků a knihoven jako React, Vue nebo Angular.

—

1. Prohlížeč stáhne **HTML** a vytvoří z něj **DOM strom**.
2. Prohlížeč stáhne **CSS** a vytvoří **CSSOM** (CSS Object Model).
3. Kombinací DOM a CSSOM vznikne **Render Tree**, který se vykreslí na obrazovku.
4. **JavaScript** může do tohoto procesu kdykoliv vstoupit a modifikovat DOM i CSSOM, což vyvolá překreslení stránky.

—

Aby web vypadal všude stejně, dohlíží na standardy organizace W3C (World Wide Web Consortium). Prohlížeče (Chrome, Firefox, Safari) používají vykreslovací jádra (Blink, Gecko, WebKit), která interpretují kód.

Související články:

• Jak funguje web: DNS a HTTP
• Programovací jazyky (Srovnání JS s ostatními)
• Základy UI a UX designu

Tagy: web html css javascript frontend browser design development