← Přípravna

Lekce 3 z 4 ⏱ 10 minut

Tvůj první soubor a složka na web

Založíme složku, kde bude tvůj web bydlet, a vyzkoušíme, že všechno funguje.

Web bydlí ve složce

Každý web na světě je ve skutečnosti jen hromádka souborů ve složce. Založíme tu tvoji.

  1. Vytvoř složku muj-web. Na ploše klikni pravým tlačítkem → Nová složka (na Macu Nová složka, na Windows Nový → Složka) a pojmenuj ji muj-web.

  2. Otevři složku ve VS Code. Spusť VS Code a v menu vyber Soubor → Otevřít složku… a najdi svoji složku muj-web. Pokud se VS Code zeptá, jestli autorům složky důvěřuješ, klikni na Ano, důvěřuji – autor jsi přece ty!

  3. Vytvoř soubor index.html. Vlevo v panelu najeď myší na název složky a klikni na ikonku Nový soubor (stránka s plusem). Napiš přesně: index.html a zmáčkni Enter.

💡

Proč zrovna index.html? Je to domluvené jméno pro hlavní stránku webu. Když prohlížeč přijde do složky, hledá nejdřív soubor index.html – jako když přijdeš do školy a jdeš nejdřív do své třídy.

Napiš první kód

Do souboru index.html napiš (nebo zkopíruj tlačítkem vpravo nahoře):

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Můj web</title>
  </head>
  <body>
    <h1>Funguje to!</h1>
    <p>Tohle je můj první soubor. Odsud postavím celý web.</p>
  </body>
</html>

Ulož soubor: Ctrl+S (na Macu Cmd+S). Ukládej často – neuložený soubor má ve VS Code u názvu puntík.

Otevři svou stránku v prohlížeči

Najdi soubor index.html ve své složce (na ploše → muj-web) a otevři ho dvojklikem. Otevře se prohlížeč a v něm tvoje stránka s nápisem „Funguje to!”.

✅

Kontrola: V prohlížeči vidíš velký nadpis „Funguje to!“. Pokud ano – právě máš funkční webovou dílnu a můžeš rovnou do Úrovně 1!

💡

Trik pro pohodlí: nech si otevřený VS Code i prohlížeč vedle sebe. Vždycky když v kódu něco změníš, ulož (Ctrl+S) a v prohlížeči zmáčkni F5 (obnovit stránku). Změna se hned ukáže.

Co si z téhle kapitoly odnést

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu