Tvoja prva datoteka in mapa za splet

Pripravimo mapo, v kateri bo živela tvoja spletna stran, in preverimo, da vse deluje.

Spletna stran živi v mapi

Vsaka spletna stran na svetu je v resnici le kup datotek v mapi. Pripravimo tvojo.

Ustvari mapo z imenom my-website. Na namizju desni klik → New Folder (na Macu tudi New Folder, v Windowsu New → Folder) in jo poimenuj my-website.
Odpri mapo v VS Code. Zaženi VS Code in v meniju izberi File → Open Folder…, nato poišči mapo my-website. Če VS Code vpraša, ali zaupaš avtorjem te mape, klikni Yes, I trust the authors – avtor si ti!
Ustvari datoteko index.html. Na levi plošči drži miško nad imenom mape in klikni ikono New File (list s plusom). Vpiši točno: index.html in pritisni Enter.

💡

Zakaj ravno index.html? To je dogovorjeno ime za glavno stran spletnega mesta. Ko brskalnik pride v mapo, najprej poišče datoteko index.html – kot da prideš v šolo in greš naravnost v svoj razred.

Napiši svojo prvo kodo

V datoteko index.html vpiši to (ali kopiraj s gumba zgoraj desno):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Shrani datoteko: Ctrl+S (na Macu Cmd+S). Shrani pogosto – neshranjena datoteka ima v VS Code piko zraven imena.

Odpri stran v brskalniku

Poišči datoteko index.html v svoji mapi (na namizju → my-website) in jo dvoklikni. Odpre se brskalnik s tvojo stranjo in besedilom “It works!”.

✅

Preveri se: V brskalniku vidiš velik naslov “It works!”. Če je tako – imaš delujočo spletno delavnico in lahko greš v raven 1!

💡

Uporaben trik: imej VS Code in brskalnik odprta drug ob drugem. Ko spremeniš kodo, shrani (Ctrl+S) in v brskalniku pritisni F5 za osvežitev. Sprememba se takoj vidi.

Kaj si vzameš iz tega poglavja

Spletna stran je mapa polna datotek. Tvoja se imenuje my-website.
Glavna stran spletnega mesta se vedno imenuje index.html.
Delovni krog: napiši kodo → shrani (Ctrl+S) → osveži brskalnik (F5). To boš delal znova in znova.