HTML pro začátečníky – kompletní průvodce tvorbou webových stránek

Chcete se naučit vytvářet webové stránky od úplných základů? HTML je první jazyk, se kterým by měl začít každý budoucí webový vývojář. V tomto průvodci se naučíte, co je HTML, jak funguje, jak vytvořit svou první webovou stránku a jaké značky budete používat nejčastěji.

Co je HTML?

HTML (HyperText Markup Language) je značkovací jazyk, který slouží k vytváření struktury webových stránek. Pomocí HTML určujeme, co bude stránka obsahovat – nadpisy, odstavce, obrázky, odkazy, tabulky nebo formuláře.

HTML není programovací jazyk. Neobsahuje podmínky ani cykly. Jeho úkolem je popsat obsah stránky tak, aby jej webový prohlížeč správně zobrazil.

Bez HTML by neexistovala žádná webová stránka.

Jak HTML funguje?

Když otevřete webovou stránku, váš prohlížeč si stáhne HTML soubor a přečte jeho obsah. Podle jednotlivých značek (tagů) vytvoří výslednou stránku, kterou vidíte na obrazovce.

Jednoduše řečeno:

HTML = struktura webu

CSS = vzhled webu

JavaScript = funkčnost webu

Tyto tři technologie tvoří základ moderního webového vývoje.

Co potřebujete pro tvorbu HTML?

Začít můžete během několika minut.

Stačí vám:

• počítač
• webový prohlížeč
• editor kódu

Mezi nejoblíbenější editory patří například Visual Studio Code, který nabízí zvýraznění syntaxe, automatické doplňování kódu a mnoho užitečných rozšíření.

Jak vytvořit první HTML stránku

Vytvořte nový soubor s názvem:

index.html

Do něj vložte následující kód:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moje první stránka</title>
</head>

<body>

<h1>Vítejte na mém webu</h1>

<p>Toto je moje první HTML stránka.</p>

</body>
</html>

Soubor uložte a otevřete jej dvojklikem v prohlížeči.

Gratulujeme! Právě jste vytvořili svou první webovou stránku.

Struktura HTML dokumentu

Každá stránka začíná deklarací:

<!DOCTYPE html>

Ta říká prohlížeči, že používáte moderní HTML5.

Následuje značka:

<html>

Ta obsahuje celý dokument.

Uvnitř najdete dvě hlavní části:

Head

Obsahuje informace o stránce.

Například:

• název stránky
• popis
• CSS soubory
• favicon
• SEO informace

Body

Sem patří vše, co návštěvník skutečně uvidí.

Například:

• text
• obrázky
• tlačítka
• menu
• formuláře

Nejčastější HTML značky

Nadpisy

<h1>Hlavní nadpis</h1>

<h2>Podnadpis</h2>

<h3>Další úroveň</h3>

Na stránce by měl být pouze jeden H1.

Odstavce

<p>Toto je odstavec.</p>

Odkazy

<a href="https://webcrew.cz">WebCrew</a>

Obrázky

<img src="obrazek.jpg" alt="Popis obrázku">

Alt text je důležitý pro SEO i přístupnost.

Seznamy

Nečíslovaný:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

Číslovaný:

<ol>

<li>Krok 1</li>

<li>Krok 2</li>

</ol>

Tučný text

<strong>Důležitý text</strong>

Kurzíva

<em>Zvýrazněný text</em>

Jak propojit HTML a CSS

CSS určuje vzhled stránky.

Do hlavičky vložte:

<link rel="stylesheet" href="style.css">

Poté vytvořte soubor:

style.css

Například:

body{

font-family:Arial;

background:#f5f5f5;

}

Jak propojit HTML a JavaScript

Na konec stránky přidejte:

<script src="script.js"></script>

JavaScript přidává interaktivitu.

Například:

• animace
• menu
• formuláře
• galerie
• hry

HTML5 přineslo mnoho nových značek

Místo univerzálních DIVů dnes používáme sémantické značky.

Například:

<header>

<nav>

<main>

<section>

<article>

<aside>

<footer>

Výhody:

• lepší SEO
• lepší přístupnost
• přehlednější kód

Nejčastější chyby začátečníků

❌ Více H1 na stránce

❌ Chybějící ALT u obrázků

❌ Neuzavřené značky

❌ Špatné odsazení

❌ Psaní všeho do jednoho souboru

❌ Nepoužívání HTML5

Jak psát čistý HTML kód

Dodržujte jednoduchá pravidla.

✔ Odsazujte kód.

✔ Pište sémantické značky.

✔ Používejte malé písmo.

✔ Přidávejte ALT texty.

✔ Nepoužívejte zbytečné DIVy.

✔ Pište čitelný kód.

Čistý kód se mnohem lépe upravuje.

Výhody znalosti HTML

Pokud ovládáte HTML:

• lépe rozumíte WordPressu
• snadněji upravíte šablony
• zvládnete vlastní web
• lépe spolupracujete s vývojáři
• naučíte se CSS i JavaScript mnohem rychleji

HTML je základ každého webového vývojáře.

Často kladené otázky (FAQ)

Musím umět HTML, když používám WordPress?

Ne, ale jeho znalost vám výrazně usnadní úpravy webu, práci s editorem i řešení drobných problémů.

Je HTML programovací jazyk?

Ne.

HTML je značkovací jazyk.

Jak dlouho trvá naučit se HTML?

Základy zvládnete během několika dní.

Pokročilejší znalosti získáte pravidelnou praxí.

Co se učit po HTML?

Ideální pokračování je:

1. CSS
2. Flexbox
3. CSS Grid
4. JavaScript
5. Git
6. PHP

Závěr

HTML je první krok do světa webového vývoje. Přestože se může zdát jednoduché, tvoří základ všech moderních webových stránek. Jakmile zvládnete strukturu HTML, bude pro vás mnohem snazší naučit se CSS, JavaScript nebo pracovat s redakčními systémy, jako je WordPress.

Pokračujte v experimentování, vytvářejte vlastní projekty a nebojte se dělat chyby. Právě praxe je nejlepší cestou k tomu stát se úspěšným webovým vývojářem.