Din første fil og mappe for nettet

En nettside bor i en mappe

Hver nettside i verden er egentlig bare en haug med filer i en mappe. La oss sette opp din.

Lag en mappe som heter my-website. På skrivebordet, høyreklikk → New Folder (på Mac er det også New Folder, på Windows New → Folder) og kall den my-website.
Åpne mappen i VS Code. Start VS Code og velg i menyen File → Open Folder… og finn my-website-mappen din. Hvis VS Code spør om du stoler på forfatterne av mappen, klikk Yes, I trust the authors – du er jo forfatteren!
Lag en fil som heter index.html. I venstre panel, hold musen over mappenavnet og klikk på New File-ikonet (en side med et pluss-tegn). Skriv nøyaktig: index.html og trykk Enter.

💡

Hvorfor akkurat index.html? Det er det avtalte navnet for hovedsiden på en nettside. Når en nettleser kommer til en mappe, leter den først etter en fil som heter index.html – som å gå inn på skolen og gå rett til klasserommet ditt.

Skriv din første kode

I filen index.html, skriv dette (eller kopier med knappen øverst til høyre):

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

Lagre filen: Ctrl+S (på Mac Cmd+S). Lagre ofte – en ulagret fil har en liten prikk ved siden av navnet i VS Code.

Åpne siden din i nettleseren

Finn filen index.html i mappen din (på skrivebordet → my-website) og dobbeltklikk for å åpne den. En nettleser åpnes og viser siden din med ordene “It works!”.

✅

Sjekk deg selv: Du ser en stor overskrift som sier “It works!” i nettleseren. I så fall – du har nå et fungerende webverksted og kan gå rett til Nivå 1!

💡

Et smart triks: hold VS Code og nettleseren åpne side om side. Når du endrer noe i koden, lagre (Ctrl+S) og trykk F5 i nettleseren for å oppdatere. Endringen din vises med en gang.

Dette tar du med deg fra kapittelet

En nettside er en mappe full av filer. Din heter my-website.
Hovedsiden på en nettside heter alltid index.html.
Arbeidsløkka: skriv kode → lagre (Ctrl+S) → oppdater nettleseren (F5). Det gjør du om og om igjen.