Ensimmäinen tiedosto ja kansio verkkosivulle

Perustamme kansion, jossa verkkosivusi asuu, ja tarkistamme, että kaikki toimii.

Verkkosivu asuu kansiossa

Jokainen verkkosivu maailmassa on oikeastaan vain kasa tiedostoja kansiossa. Perustetaan sinun kansiosi.

Luo kansio nimeltä my-website. Työpöydällä napsauta hiiren oikealla → New Folder (Macilla myös New Folder, Windowsilla New → Folder) ja nimeä se my-website.
Avaa kansio VS Codessa. Käynnistä VS Code ja valitse valikosta File → Open Folder… ja etsi my-website-kansiosi. Jos VS Code kysyy, luotatko kansion tekijöihin, napsauta Yes, I trust the authors – olethan sinä tekijä!
Luo tiedosto nimeltä index.html. Vasemman paneelin kansion nimen päällä napsauta New File -kuvaketta (sivu plusmerkillä). Kirjoita tarkalleen: index.html ja paina Enter.

💡

Miksi juuri index.html? Se on sovittu nimi verkkosivun pääsivulle. Kun selain saapuu kansioon, se etsii ensin tiedostoa nimeltä index.html – aivan kuin kävelisit kouluun ja menisit suoraan omaan luokkaasi.

Kirjoita ensimmäinen koodisi

Kirjoita index.html-tiedostoon tämä (tai kopioi se oikean yläkulman painikkeella):

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

Tallenna tiedosto: Ctrl+S (Macilla Cmd+S). Tallenna usein – tallentamattomalla tiedostolla on VS Codessa pieni piste nimen vieressä.

Avaa sivusi selaimessa

Etsi index.html-tiedosto kansiostasi (työpöydällä → my-website) ja avaa se kaksoisnapsauttamalla. Selain avautuu ja näyttää sivusi sanoin “It works!”.

✅

Tarkista itse: Selaimessa näkyy iso otsikko, jossa lukee “It works!”. Jos näin on – sinulla on nyt toimiva verkkotyöpaja, ja voit siirtyä suoraan Taso 1:een!

💡

Kätevä temppu: pidä VS Code ja selain auki vierekkäin. Aina kun muutat jotain koodissa, tallenna (Ctrl+S) ja paina selaimessa F5 päivittääksesi. Muutos näkyy heti.

Mitä opit tästä luvusta

Verkkosivu on kansio täynnä tiedostoja. Sinun kansiosi on nimeltä my-website.
Verkkosivun pääsivu on aina nimeltä index.html.
Työsykli: kirjoita koodia → tallenna (Ctrl+S) → päivitä selain (F5). Teet tätä yhä uudelleen.