Tvoja prva datoteka i mapa za web

Postavit ćemo mapu u kojoj će živjeti tvoja web stranica i provjeriti da sve radi.

Web stranica živi u mapi

Svaka web stranica na svijetu zapravo je samo hrpa datoteka u mapi. Postavimo tvoju.

Napravi mapu pod nazivom my-website. Na radnoj površini desni klik → Nova mapa (na Macu je također Nova mapa, na Windowsu Novo → Mapa) i nazovi je my-website.
Otvori mapu u VS Codeu. Pokreni VS Code i iz izbornika odaberi Datoteka → Otvori mapu… i pronađi svoju mapu my-website. Ako VS Code pita vjeruješ li autorima ove mape, klikni Da, vjerujem autorima – ti si autor, uostalom!
Napravi datoteku pod nazivom index.html. Na lijevoj ploči pređi mišem preko naziva mape i klikni ikonu Nova datoteka (stranica sa znakom plus). Upiši točno: index.html i pritisni Enter.

💡

Zašto baš index.html? To je dogovoreni naziv za glavnu stranicu web stranice. Kad preglednik stigne u mapu, prvo traži datoteku pod nazivom index.html – baš kao da uđeš u školu i odmah ideš u svoj razred.

Napiši svoj prvi kod

U datoteku index.html upiši ovo (ili kopiraj gumbom gore 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>

Spremi datoteku: Ctrl+S (na Macu Cmd+S). Spremaj često – nespremljena datoteka ima malu točkicu pored naziva u VS Codeu.

Otvori svoju stranicu u pregledniku

Pronađi datoteku index.html u svojoj mapi (na radnoj površini → my-website) i dvaput klikni da je otvoriš. Preglednik će se otvoriti i prikazati tvoju stranicu s riječima „Radi!“.

✅

Provjeri sam sebe: U pregledniku vidiš veliki naslov koji kaže „Radi!“. Ako je tako – sada imaš radnu web radionicu i možeš odmah krenuti u Razinu 1!

💡

Korisna trik: drži VS Code i preglednik otvorene jedan pored drugog. Kad god nešto promijeniš u kodu, spremi (Ctrl+S) i pritisni F5 u pregledniku da osvježiš. Promjena se odmah vidi.

Što ćeš ponijeti iz ovog poglavlja

Web stranica je mapa puna datoteka. Tvoja se zove my-website.
Glavna stranica web stranice uvijek se zove index.html.
Radni ciklus: napiši kod → spremi (Ctrl+S) → osvježi preglednik (F5). To ćeš raditi iznova i iznova.