Jak vytvořit první webovou stránku v HTML

Nikdy jste nic nekódovali? Nevadí. Tenhle návod začíná úplně od nuly – ukážu vám, jak si vytvořit první webovou stránku, i kdybyste dnes viděli HTML poprvé v životě.

Co k tomu potřebuji?

Vůbec nic navíc. Stačí dvě věci, které už v počítači máte:

• Textový editor – klidně Poznámkový blok (Windows) nebo TextEdit (Mac). Později se hodí lepší editor, ale teď to není potřeba.
• Webový prohlížeč – Chrome, Safari, Edge, cokoli používáte.

Co je vlastně HTML?

HTML je jazyk, kterým se webová stránka „skládá" – říká prohlížeči, co je nadpis, co je odstavec, kde je obrázek. Píše se pomocí značek (anglicky „tags"), které vypadají takhle: <p>text</p>. Značka se většinou otevře a zase zavře (ta se zavírá lomítkem) a mezi ně dáte obsah.

Krok 1: Vytvořte soubor

Otevřete textový editor a uložte prázdný soubor pod názvem index.html. Důležité je to .html na konci – tím prohlížeč pozná, že jde o webovou stránku.

Krok 2: Napište základní kostru

Do souboru vložte tenhle text. Je to „kostra", kterou má úplně každá webová stránka:

<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Moje první stránka</title>
  </head>
  <body>

  </body>
</html>

Co ty řádky znamenají, stručně:

• <!DOCTYPE html> – říká, že jde o moderní HTML stránku.
• <head> – „hlavička", kam patří věci, které nejsou vidět v obsahu (třeba <title>, což je název v záložce prohlížeče).
• <body> – „tělo", sem přijde všechno, co má být na stránce vidět.

Krok 3: Přidejte první obsah

Mezi značky <body> a </body> vložte nadpis a odstavec:

  <body>
    <h1>Vítejte na mé první stránce</h1>
    <p>Tohle je můj úplně první web. A funguje!</p>
  </body>

<h1> je hlavní nadpis stránky, <p> je odstavec (z anglického „paragraph"). Uložte soubor.

Krok 4: Otevřete stránku v prohlížeči

Najděte soubor index.html ve složce a dvakrát na něj klikněte – otevře se v prohlížeči. Měli byste vidět svůj nadpis a odstavec. Gratuluju, právě jste vytvořili svoji první webovou stránku! 🎉

Časté chyby začátečníků

Pokud se něco nezobrazuje správně, projděte si tenhle seznam – většina úplně prvních chyb je tady:

• Soubor se uložil jako .txt. Poznámkový blok rád přidá .txt na konec. Výsledek musí být index.html, ne index.html.txt.
• Nezavřená značka. Skoro každá značka se musí zavřít: <p>text</p>, ne jen <p>text.
• Zapomenuté lomítko. Zavírací značka má lomítko – </p>, ne <p>.
• Rozházená diakritika. Když se místo „á, é, ý" zobrazují divné znaky, chybí ve <head> řádek <meta charset="UTF-8">.

Ta poslední chyba vypadá přesně takhle – nahoře bez charset, dole s ním:

Co dál?

Zkuste si pohrát – přidejte další odstavce, druhý nadpis <h2>, nebo odkaz:

<a href="https://osteigl.cz">Odkaz na web</a>

Teď máte funkční stránku – ale přiznejme si to: vypadá tak trochu jako z textového editoru. 😄 Holý text, žádné barvy, žádné rozvržení. A přece nechcete web jako z Wordu!

A co je to vlastně CSS?

CSS (celým názvem Cascading Style Sheets) je jazyk, který stránce dá vzhled a design – barvy, fonty, velikosti písma, rozložení, mezery, prostě celý „obal". Zatímco HTML je kostra (určuje, co na stránce je), CSS je oblečení (určuje, jak to vypadá). Teprve spolu z toho je pěkný web.

Nejlepší na tom je, že jde o dva oddělené soubory, které se do sebe propojí. HTML necháte tak, jak je, a vzhled si řešíte zvlášť v souboru style.css. Spojíte je jediným řádkem, který vložíte do <head> své stránky:

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

Tenhle řádek prohlížeči říká: „ke kostře si načti i tohle oblečení". Od té chvíle jsou HTML a CSS spojené – kdykoliv v souboru style.css něco změníte, stránka se podle toho okamžitě přebarví. HTML zůstává čisté a přehledné.

A jak takové CSS vypadá? Třeba takhle nadpisu nastavíme modrou barvu a odstavci větší písmo:

  h1 { color: #005bb5; }
  p  { font-size: 18px; }

Vždycky v něm řeknete co chcete upravit (např. h1) a jak to má vypadat (color: #005bb5). A přesně na tohle se pořádně podíváme v dalším návodu. 🙂

Pokračovat na 2. díl: HTML a CSS za 15 minut