Tvorba webových stránek může na první pohled vypadat jako složitý proces, ale s porozuměním základům HTML a CSS se každý může stát schopným webovým vývojářem. HTML (HyperText Markup Language) je jazyk, který se používá k vytváření struktury webových stránek, zatímco CSS (Cascading Style Sheets) slouží k stylizaci a vzhledu těchto stránek. Tento článek vám představí základy obou jazyků a jejich synergii při vývoji webových projektů.
Co je HTML?
HTML je značkovací jazyk, který se používá k organizaci a strukturování obsahu na webových stránkách. Skládá se z různých značek, které definují různé prvky, jako jsou nadpisy, odstavce, odkazy, obrázky a další obsah. Základní struktura HTML dokumentu zahrnuje doctype, html, head a body tagy. Doctype určuje verzi HTML, kterou používáte, a HTML tag obklopuje celý dokument. Head tag obsahuje metainformace o stránce, zatímco body tag obsahuje viditelný obsah, který se zobrazuje na stránce.
Základní příklad HTML dokumentu může vypadat takto:
V tomto příkladu vidíme, jak jsou jednotlivé značky uspořádány. Nadpis je označen značkou <h1>
, odstavec značkou <p>
, a odkaz značkou <a>
, která obsahuje atribut href
pro definování cílové URL.
Co je CSS?
CSS (Cascading Style Sheets) je jazyk používaný pro popis vzhledu a formátování HTML dokumentů. Umožňuje vývojářům oddělit obsah od jeho stylu, což usnadňuje údržbu a úpravy webových stránek. Pomocí CSS můžete upravit barvy, písma, rozložení a další vizuální prvky. Existují tři hlavní způsoby, jak používat CSS: inline styly, interní styly a externí styly.
Inline styly se přidávají přímo do HTML prvků pomocí atributu style
. Interní styly se umisťují do <style>
tagu v head části HTML dokumentu. Externí styly se ukládají do samostatného .css souboru, který je následně propojen s HTML dokumentem.
Zde je příklad jednoduchého CSS stylu:
Tento CSS kód mění barvu pozadí stránky na světle šedou, nastavuje písmo na Arial a mění barvu textu nadpisu a odstavce.
Jak propojit HTML a CSS
Nejčastější způsob, jak propojit CSS s HTML, je pomocí externího souboru. K tomu vytvoříte .css soubor a přidáte jej do HTML dokumentu pomocí <link>
tagu v head části. Příklad propojení by mohl vypadat takto:
Tímto způsobem se veškeré styly definované v souboru styles.css
aplikují na obsah HTML dokumentu. Tento přístup usnadňuje správu stylů, protože je možné upravit design na jednom místě a mít tak změny aplikovány na více stránkách.
Základní prvky HTML a CSS
Mezi základní HTML prvky patří:
- Nadpisy: od
<h1>
do<h6>
, kde<h1>
je nejdůležitější. - Odstavce: značkou
<p>
. - Odkazy: značkou
<a>
s atributemhref
. - Obrázky: značkou
<img>
s atributemsrc
. - Seznamy: uspořádané (
<ol>
) a neuspořádané (<ul>
).
CSS prvky zahrnují:
- Selektory: určují, které HTML prvky budou stylizovány.
- Vlastnosti: určují, co bude změněno (například barva, velikost).
- Hodnoty: určují, jaké konkrétní hodnoty budou aplikovány (například
color: red;
).
Praktické tipy pro začátečníky
Pokud se chystáte začít s HTML a CSS, doporučuje se experimentovat. Vytvořte jednoduchou stránku a pokuste se upravit různé prvky pomocí CSS. Dále je dobré prozkoumat vývojářské nástroje v prohlížeči, které vám umožní sledovat a upravovat HTML a CSS přímo na webových stránkách. Existuje také mnoho online tutoriálů a zdrojů, které vám mohou pomoci prohloubit vaše znalosti.