Jednoduchá analogie
Představte si dům. HTML je hrubá stavba – zdi, dveře, okna, místnosti. Určuje, co tam je a kde. CSS je omítka, barvy, nábytek a osvětlení – dělá z holé stavby místo, kde se chcete zdržet. Bez HTML nemá CSS co zařizovat; bez CSS je HTML jen holá stavba.
Nebo ještě kratší přirovnání, které používám v návodech: HTML je kostra, CSS je oblečení.
Ukázka: stejný obsah bez CSS a s CSS
Tohle je kousek HTML – malá vizitka kavárny:
<h1>Moje kavárna</h1>
<p>Vítejte! Vaříme skvělou kávu každý den.</p>
<ul>
<li>Espresso</li>
<li>Cappuccino</li>
<li>Filtrovaná káva</li>
</ul>A teď to nejdůležitější: úplně stejné HTML vlevo bez jediného řádku CSS, vpravo s trochou CSS. Obsah je totožný – mění se jen vzhled:
Vítejte! Vaříme skvělou kávu každý den.
- Espresso
- Cappuccino
- Filtrovaná káva
Vítejte! Vaříme skvělou kávu každý den.
- Espresso
- Cappuccino
- Filtrovaná káva
Co dělá HTML
HTML (HyperText Markup Language) je značkovací jazyk. Pomocí značek popisuje, co je na stránce nadpis, co odstavec, co seznam nebo obrázek. Sám o sobě funguje – stránka se zobrazí – jen vypadá holá.
Co dělá CSS
CSS (Cascading Style Sheets) je stylovací jazyk. Bere hotové HTML a dává mu vzhled: barvy, velikost a druh písma, rozložení, mezery, rámečky, stíny. Sám o sobě nemá smysl – potřebuje HTML, které styluje.
Srovnání v tabulce
| HTML | CSS | |
|---|---|---|
| K čemu slouží | Obsah a struktura (co na stránce je) | Vzhled a design (jak to vypadá) |
| Druh jazyka | Značkovací – značky < > | Stylovací – pravidla |
| Přípona souboru | .html | .css |
| Ukázka | <h1>Nadpis</h1> | h1 { color: blue; } |
| Samo o sobě | Funguje, ale je „holé" | Nemá co stylovat – potřebuje HTML |
Časté nejasnosti
Musím umět obojí?
Pro jakýkoli web v podstatě ano – ale základy obou jsou naštěstí jednoduché a naučíte se je rychle. Provedu vás jimi v 1. dílu (HTML) a 2. dílu (CSS).
Je HTML programovací jazyk?
Ne. HTML je značkovací jazyk – jen popisuje obsah, nic nepočítá a nerozhoduje. Skutečný programovací jazyk pro weby je až JavaScript, ten přidává interaktivitu (ale to je téma na jindy).
Kde se CSS píše?
Nejčastěji do samostatného souboru style.css, který k HTML připojíte jediným řádkem. Jak přesně, ukazuju v 2. dílu.
Co dál?
Teď už rozdíl znáte: HTML = obsah, CSS = vzhled. Nejlepší způsob, jak si to zažít, je vyzkoušet si to. Začněte 1. dílem, kde si vytvoříte první stránku, a pokračujte 2. dílem, kde jí dáte vzhled.
Nechcete web řešit sami a chcete ho mít hotový a profesionální?
Podívejte se na tvorbu webů →© Ondřej Šteigl. Autorem návodů jsem já. Obsah je autorským dílem chráněným podle zákona č. 121/2000 Sb. (autorský zákon). Kopírování, přebírání nebo šíření bez mého předchozího písemného souhlasu je zakázáno. Výukové použití je vítáno – stačí uvést zdroj (osteigl.cz).