Ako funguje web a tvoja prvá stránka

Zistíš, čo sa stane, keď do prehliadača napíšeš adresu, a postavíš základ svojej webovej stránky.

Čo sa stane, keď otvoríš webovú stránku

Keď do prehliadača napíšeš niečo ako www.myschool.com, stane sa toto:

Prehliadač pošle cez internet správu na server – počítač, kde webová stránka žije: „Hej, pošli mi stránku!”
Server odpovie a pošle späť súbory – text, obrázky, kód.
Prehliadač z tých súborov nakreslí stránku na tvojej obrazovke.

Súbory, ktoré server posiela, sú napísané v jazyku HTML. A presne to sa teraz naučíš. Zatiaľ tvoja webová stránka nebude na serveri – bude žiť na tvojom počítači a na internet ju dáme až v poslednej lekcii.

Vyber si projekt

Skôr než napíšeš jediný riadok, rozhodni sa, čo vlastne staviaš. Na jednom z týchto projektov budeš pracovať celú úroveň:

🏫 Webová stránka mojej školy – rozvrh, jedálny lístok, akcie, učitelia
🙋 Moja osobná webová stránka – o mne, čo mám rád, moje výtvory
🌍 Cestovný denník – výlety, fotky, spomienky
⚽ Webová stránka športového klubu – tím, zápasy, tréningy

Vybral si? Super. Úlohy v každej lekcii pokrývajú všetky štyri projekty – nájdi ten svoj.

Ukážem ti: kostra, s ktorou začína každá stránka na Zemi

Každá webová stránka – od tvojej po YouTube – začína presne tou istou kostrou:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Page name</title>
  </head>
  <body>
    <h1>A big heading</h1>
    <p>Some text.</p>
  </body>
</html>

Preložme to do obyčajnej reči:

Kód	Čo to hovorí prehliadaču
`<!doctype html>`	„Pozor, začína HTML stránka!”
`<html lang="en">`	„Všetko vnútri je jedna stránka a je v angličtine.”
`<head>` … `</head>`	„Tu je informácia o stránke.” Návštevníci ju nevidia.
`<meta charset="UTF-8">`	„Môžu tu byť špeciálne znaky, buď pripravený.”
`<title>` … `</title>`	Názov stránky – zobrazí sa v záložke prehliadača.
`<body>` … `</body>`	„Všetko, čo návštevník naozaj vidí, začína tu.” Celý tvoj obsah ide sem.

Všimni si, ako fungujú tagy: <h1> niečo otvára a </h1> (s lomítkom) to znova zatvára. Čokoľvek je medzi nimi, patrí k tomu tagu. Ako zátvorky.

Teraz ty 💪

Otvor svoj priečinok my-website (z Prípravne) vo VS Code a v ňom súbor index.html. Zmaž, čo tam je, a napíš kostru stránky z príkladu vyššie.
Zmeň <title> a <h1> podľa svojho projektu a pod nadpis pridaj odstavec <p> s jednou vetou o tom, čo je tvoja webová stránka.
Ulož (Ctrl+S) a otvor index.html v prehliadači (alebo obnov stránku F5).

Nevieš ako? Tu sú riešenia pre každý projekt:

🏫 Riešenie: Webová stránka mojej školy

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <h1>Riverside Elementary School</h1>
    <p>Welcome to our school's website. You'll find the schedule, lunch menu, and photos from events here.</p>
  </body>
</html>

🙋 Riešenie: Moja osobná webová stránka

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <h1>Hi, I'm Jake</h1>
    <p>This is my website. I love soccer, Minecraft, and building websites.</p>
  </body>
</html>

🌍 Riešenie: Cestovný denník

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <h1>Where We've Been 🌍</h1>
    <p>A journal of our trips and adventures. A new story gets added every holiday.</p>
  </body>
</html>

⚽ Riešenie: Webová stránka športového klubu

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <h1>Riverside Eagles FC</h1>
    <p>The official website of our soccer club. Results, roster, and training schedule.</p>
  </body>
</html>

✅

Skontroluj sa: V záložke prehliadača vidíš názov svojej webovej stránky a na stránke svoj nadpis a vetu. Ak áno – základný kameň je položený!

Čo si z tejto lekcie odnášaš

Webová stránka = súbory, ktoré server pošle do prehliadača. Prehliadač z nich nakreslí stránku.
Každá stránka má rovnakú kostru: <head> (informácie o stránke) a <body> (viditeľný obsah).
Tagy sa otvárajú ako <toto> a zatvárajú ako </toto>.