HTML a CSS

HTML základy

HTML (HyperText Markup Language) je značkovací jazyk pro tvorbu webových stránek. Definuje strukturu a obsah stránky pomocí elementů — tagů.

Struktura HTML dokumentu

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>Název stránky</title>
</head>
<body>
<!-- obsah stránky -->
</body>
</html>

<!DOCTYPE html> — deklarace verze HTML (HTML5)
<html> — kořenový element celého dokumentu
<head> — metadata stránky (název, CSS, charset…)
<body> — viditelný obsah stránky

Důležité tagy

Textové elementy

Tag	Popis
`<h1> – <h6>`	Nadpisy (h1 největší)
`<p>`	Odstavec
`<strong>`	Tučný text (sémanticky důležitý)
`<em>`	Kurzíva (důraz)
`<a href="">`	Odkaz (hypertextový)
`<br>`	Zalomení řádku
`<span>`	Inline kontejner (bez sémantiky)

Strukturální elementy (HTML5)

Tag	Popis
`<header>`	Záhlaví stránky/sekce
`<nav>`	Navigace
`<main>`	Hlavní obsah
`<section>`	Tematická sekce
`<article>`	Samostatný článek
`<aside>`	Postranní obsah
`<footer>`	Zápatí
`<div>`	Blokový kontejner (bez sémantiky)

Formuláře

<form action="/odeslat" method="post">
<input type="text" name="jmeno" placeholder="Jméno">
<input type="email" name="email">
<button type="submit">Odeslat</button>
</form>

CSS základy

CSS (Cascading Style Sheets) definuje vzhled HTML elementů — barvy, fonty, rozložení, animace.

Syntaxe

selektor {
vlastnost: hodnota;
vlastnost2: hodnota2;
}

Způsoby připojení CSS

Externí soubor — <link rel="stylesheet" href="style.css"> (doporučeno)
Interní — <style> v <head>
Inline — atribut style="..." přímo na elementu

Selektory

Selektor	Příklad	Popis
Element	`p`	Všechny <p> elementy
Třída	`.btn`	Elementy s class="btn"
ID	`#hlavni`	Element s id="hlavni"
Potomek	`nav a`	Všechny <a> uvnitř <nav>
Přímý potomek	`ul > li`	Přímé <li> dítě <ul>
Pseudo-třída	`a:hover`	Odkaz při najetí myší
Pseudo-element	`p::first-line`	První řádek odstavce

Specifičnost (priorita pravidel)

Čím specifičtější selektor, tím vyšší priorita: ID > třída > element. Klíčové slovo !important přebíjí vše (používat střídmě).

Jednotky a barvy

Jednotky délky

Jednotka	Popis	Příklad
`px`	Pixely — absolutní	`font-size: 16px`
`em`	Relativní k rodičovskému font-size	`padding: 1.5em`
`rem`	Relativní ke kořenovému font-size (<html>)	`margin: 2rem`
`%`	Procento z rodičovského elementu	`width: 50%`
`vw / vh`	Procento šířky / výšky viewportu	`height: 100vh`

Barvy v CSS

Formát	Příklad	Popis
Hexadecimální	`#ff5733`	RGB v hex (#RRGGBB)
RGB	`rgb(255, 87, 51)`	Složky 0–255
RGBA	`rgba(255, 87, 51, 0.5)`	+ průhlednost (0–1)
HSL	`hsl(11, 100%, 60%)`	Odstín, sytost, světlost
Pojmenované	`red, blue, tomato`	Předdefinovaná jména barev

CSS proměnné (Custom Properties)

Proměnné umožňují definovat hodnoty na jednom místě a opakovaně je používat.

:root {
--barva-primární: #3ecf72;
--mezera-základní: 16px;
}
.tlacitko {
background: var(--barva-primární);
padding: var(--mezera-základní);
}

Typografie

CSS nabízí bohaté možnosti stylování textu.

Základní vlastnosti textu

Vlastnost	Příklad hodnot	Popis
`font-family`	`"Arial", sans-serif`	Rodina písma (vždy záložní)
`font-size`	`1rem, 18px`	Velikost písma
`font-weight`	`400 (normal), 700 (bold)`	Tučnost
`font-style`	`italic, normal`	Kurzíva
`line-height`	`1.5`	Výška řádku (násobek font-size)
`letter-spacing`	`0.05em`	Mezery mezi písmeny
`text-align`	`left, center, right, justify`	Zarovnání textu
`text-decoration`	`none, underline`	Podtržení (odstraní se z odkazů)
`text-transform`	`uppercase, lowercase`	Konverze na velká / malá

Google Fonts

Webové fonty se připojují přes <link> v <head>:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

body {
font-family: "Roboto", sans-serif;
}

Bezpečné fonty (dostupné bez importu): Arial, Verdana, Georgia, Times New Roman, Courier New, Trebuchet MS.

Pozicování

Vlastnost position určuje, jak je element umístěn v dokumentu.

Typy pozicování

Hodnota	Popis
`static`	Výchozí — element v normálním toku
`relative`	Posunutí od původní pozice (prostor zůstává)
`absolute`	Vyřazení z toku, pozice vůči nejbližšímu positioned rodiči
`fixed`	Fixní vůči viewportu (zůstane při scrollování)
`sticky`	Kombinace relative + fixed (přilepí se při scrollu)

.rodic {
position: relative; /* kotva pro absolutně pozicované dítě */
}
.dite {
position: absolute;
top: 0;
right: 0;
}
.hlavicka {
position: sticky;
top: 0; /* přilepí se k hornímu okraji při scrollování */
}

Z-index

z-index určuje pořadí vrstvení elementů (funguje pouze u positioned elementů).

.modal {
position: fixed;
z-index: 1000; /* vyšší číslo = nahoře */
}

Speciální znaky a čeština

Správné nastavení pro česky psané stránky:

<meta charset="UTF-8">
<html lang="cs">

Speciální znaky v HTML se zapisují HTML entitami: & → &, < → <, > → >,   → nezlomitelná mezera.

Box model

Každý HTML element je obdélníkový box skládající se z:

content — samotný obsah (text, obrázek)
padding — vnitřní odsazení (mezi obsahem a okrajem)
border — rámeček okolo elementu
margin — vnější odsazení (prostor mezi elementy)

.box {
width: 200px;
padding: 16px;
border: 2px solid #333;
margin: 24px;
box-sizing: border-box; /* padding a border se počítají do width */
}

Layout

Flexbox

Jednorozměrný layout (řádek nebo sloupec).

.container {
display: flex;
justify-content: space-between; /* hlavní osa */
align-items: center; /* příčná osa */
gap: 16px;
}

Grid

Dvourozměrný layout (řádky + sloupce).

.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 stejné sloupce */
gap: 24px;
}

Responzivní design — Media Queries

/* Výchozí styl pro desktop */
.container { width: 1200px; }
/* Pro obrazovky do 768px (mobil) */
@media (max-width: 768px) {
.container { width: 100%; }
}

Kvíz

BETA

1 / 10

Co je to HTML?

Jaký HTML tag se používá pro nadpis první úrovně?

Co je to CSS?

Jaký CSS selektor vybírá elementy podle třídy?

Co je to flexbox v CSS?

Jaký HTML element slouží pro vytvoření formuláře?

Co dělá CSS vlastnost `display: grid`?

Jaká CSS vlastnost nastavuje barvu textu?

Co je to responzivní design?

Jaký HTML tag vytváří hypertextový odkaz?