Jak funguje web a tvoje první stránka

Zjistíš, co se stane, když napíšeš adresu do prohlížeče, a postavíš základ svého webu.

Co se stane, když otevřeš web

Když do prohlížeče napíšeš třeba www.skola.cz, stane se tohle:

Prohlížeč pošle přes internet zprávu serveru – počítači, na kterém stránky bydlí: „Ahoj, pošli mi stránku!”
Server odpoví a pošle zpátky soubory – text, obrázky, kód.
Prohlížeč z nich nakreslí stránku na tvou obrazovku.

Ty soubory, co server posílá, jsou napsané v jazyce HTML. A přesně ten se teď naučíš. Zatím tvůj web nebude na serveru, ale u tebe v počítači – na internet ho pošleme v poslední lekci.

Vyber si svůj projekt

Než napíšeš první řádek, rozhodni se, co vlastně stavíš. Celou úroveň budeš pracovat na jednom z těchto projektů:

🏫 Stránky mojí školy – rozvrh, jídelníček, akce, učitelé
🙋 Moje osobní stránky – o mně, co mě baví, moje výtvory
🌍 Cestovatelský deník – výlety, fotky, zážitky z cest
⚽ Web sportovního klubu – tým, zápasy, tréninky

Vybráno? Super. Úkoly v každé lekci budou vždycky pro všechny čtyři projekty – ty si prostě najdeš ten svůj.

Ukaž mi to: kostra každé stránky na světě

Každá webová stránka – od té tvojí až po YouTube – začíná stejnou kostrou:

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Jméno stránky</title>
  </head>
  <body>
    <h1>Velký nadpis</h1>
    <p>Nějaký text.</p>
  </body>
</html>

Pojďme si to přeložit do lidštiny:

Kód	Co říká prohlížeči
`<!doctype html>`	„Pozor, začíná HTML stránka!”
`<html lang="cs">`	„Všechno uvnitř je jedna stránka a je česky.”
`<head>` … `</head>`	„Tady jsou informace o stránce.” Návštěvník je nevidí.
`<meta charset="UTF-8">`	„Budou tu háčky a čárky, počítej s tím.”
`<title>` … `</title>`	Jméno stránky – ukazuje se v záložce prohlížeče.
`<body>` … `</body>`	„Tady začíná to, co návštěvník uvidí.” Sem patří všechen obsah.

Všimni si, jak značky fungují: <h1> něco otevře a </h1> (s lomítkem) to zase zavře. Co je mezi nimi, toho se značka týká. Jako závorky.

Teď ty 💪

Otevři ve VS Code svou složku muj-web (z Přípravny) a v ní soubor index.html. Smaž, co tam je, a napiš kostru stránky z ukázky nahoře.
Změň <title> a <h1> podle svého projektu a přidej pod nadpis odstavec <p>, který jednou větou říká, o čem web je.
Ulož (Ctrl+S) a otevři index.html v prohlížeči (nebo obnov stránku klávesou F5).

Nevíš jak? Tady jsou řešení pro každý projekt:

🏫 Řešení: Stránky mojí školy

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>ZŠ Moravany</title>
  </head>
  <body>
    <h1>Základní škola Moravany</h1>
    <p>Vítej na stránkách naší školy. Najdeš tu rozvrh, jídelníček i fotky z akcí.</p>
  </body>
</html>

🙋 Řešení: Moje osobní stránky

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Kuba Novák</title>
  </head>
  <body>
    <h1>Ahoj, já jsem Kuba</h1>
    <p>Tohle jsou moje stránky. Baví mě fotbal, Minecraft a stavění webů.</p>
  </body>
</html>

🌍 Řešení: Cestovatelský deník

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Kam jsme vyrazili</title>
  </head>
  <body>
    <h1>Kam jsme vyrazili 🌍</h1>
    <p>Deník našich výletů a dobrodružství. Každé prázdniny přibude nový příběh.</p>
  </body>
</html>

⚽ Řešení: Web sportovního klubu

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>FK Sokol Nebovidy</title>
  </head>
  <body>
    <h1>FK Sokol Nebovidy</h1>
    <p>Oficiální stránky našeho fotbalového klubu. Výsledky, soupiska a termíny tréninků.</p>
  </body>
</html>

✅

Kontrola: V záložce prohlížeče vidíš jméno svého webu a na stránce svůj nadpis a větu. Jestli jo – základní kámen je položený!

Co si z téhle lekce odnést

Web = soubory, které server posílá prohlížeči. Prohlížeč z nich kreslí stránku.
Každá stránka má stejnou kostru: <head> (informace o stránce) a <body> (viditelný obsah).
Značky se otevírají <takhle> a zavírají </takhle>.