Kako web radi i tvoja prva stranica

Saznaj što se događa kad upišeš adresu u preglednik i izgradi temelj svoje web stranice.

Što se događa kad otvoriš web stranicu

Kad u preglednik upišeš nešto poput www.mojaskola.com, događa se ovo:

Preglednik šalje poruku preko interneta na server – računalo na kojem živi web stranica: “Hej, pošalji mi stranicu!”
Server odgovori i pošalje datoteke – tekst, slike, kod.
Preglednik nacrta stranicu na tvom ekranu koristeći te datoteke.

Datoteke koje server šalje napisane su u jeziku koji se zove HTML. I to je upravo ono što ćeš sada naučiti. Za sada tvoja web stranica neće biti na serveru – živjet će na tvom računalu, a stavit ćemo je online u posljednjoj lekciji.

Odaberi svoj projekt

Prije nego napišeš ijedan redak, odluči što zapravo gradiš. Na jednom od ovih projekata radit ćeš cijelu razinu:

🏫 Web stranica moje škole – raspored, jelovnik, događaji, učitelji
🙋 Moja osobna web stranica – o meni, što volim, moje kreacije
🌍 Putni dnevnik – putovanja, fotografije, uspomene
⚽ Web stranica sportskog kluba – momčad, utakmice, treninzi

Odabrao si? Super. Zadaci u svakoj lekciji pokrivaju sva četiri projekta – samo pronađi svoj.

Pokazat ću ti: kostur s kojim počinje svaka stranica na Zemlji

Svaka web stranica – od tvoje do YouTubea – počinje s potpuno istim kosturom:

<!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>

Prevedimo to na običan jezik:

Kod	Što govori pregledniku
`<!doctype html>`	”Pazi, počinje HTML stranica!”
`<html lang="en">`	„Sve unutra je jedna stranica; atribut `lang` označava jezik (ovdje engleski kao primjer).”
`<head>` … `</head>`	”Evo informacija o stranici.” Posjetitelji ih ne vide.
`<meta charset="UTF-8">`	”Ovdje mogu biti posebni znakovi, budi spreman.”
`<title>` … `</title>`	Naziv stranice – prikazuje se u kartici preglednika.
`<body>` … `</body>`	”Sve što posjetitelj stvarno vidi počinje ovdje.” Sav tvoj sadržaj ide ovdje.

Primijeti kako tagovi rade: <h1> otvara nešto, a </h1> (sa kosom crtom) to zatvara. Sve između pripada tom tagu. Baš kao zagrade.

Sad si ti na redu 💪

Otvori svoju mapu my-website (iz pripremne razine) u VS Codeu i otvori datoteku index.html unutra. Obriši što god tamo ima i upiši kostur stranice iz primjera gore.
Promijeni <title> i <h1> da odgovaraju tvom projektu i dodaj <p> odlomak ispod naslova s jednom rečenicom o tome što je tvoja web stranica.
Spremi (Ctrl+S) i otvori index.html u pregledniku (ili osvježi stranicu s F5).

Nisi siguran kako? Evo rješenja za svaki projekt:

🏫 Rješenje: Web stranica moje škole

<!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>

🙋 Rješenje: Moja osobna web stranica

<!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>

🌍 Rješenje: Putni dnevnik

<!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>

⚽ Rješenje: Web stranica sportskog kluba

<!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>

✅

Provjeri sam sebe: Kartica preglednika prikazuje naziv tvoje web stranice, a stranica prikazuje tvoj naslov i rečenicu. Ako je tako – temeljni kamen je položen!

Što ćeš ponijeti iz ove lekcije

Web stranica = datoteke koje server šalje pregledniku. Preglednik od njih nacrta stranicu.
Svaka stranica ima isti kostur: <head> (informacije o stranici) i <body> (vidljivi sadržaj).
Tagovi se otvaraju kao <this> i zatvaraju kao </this>.