Miten verkkosivu toimii ja ensimmäinen sivusi

Opi, mitä tapahtuu kun kirjoitat osoitteen selaimeen, ja rakenna verkkosivusi perusta.

Mitä tapahtuu kun avaat verkkosivun

Kun kirjoitat selaimeen jotain kuten www.myschool.com, tapahtuu tämä:

Selain lähettää internetin yli viestin palvelimelle – tietokoneelle, jossa verkkosivu asuu: “Hei, lähetä minulle sivu!”
Palvelin vastaa ja lähettää takaisin tiedostoja – tekstiä, kuvia, koodia.
Selain piirtää sivun näytöllesi näistä tiedostoista.

Palvelimen lähettämät tiedostot on kirjoitettu kielellä nimeltä HTML. Ja juuri sitä olet oppimassa. Toistaiseksi verkkosivusi ei ole palvelimella – se asuu omalla tietokoneellasi, ja laitamme sen nettiin viimeisessä oppitunnissa.

Valitse projektisi

Ennen kuin kirjoitat yhtäkään riviä, päätä mitä oikeasti rakennat. Työskentelet yhden näistä projekteista koko tason ajan:

🏫 Kouluni verkkosivu – lukujärjestys, ruokalistan menu, tapahtumat, opettajat
🙋 Henkilökohtainen sivuni – minusta, mitä pidän, luomuksistani
🌍 Matkapäiväkirja – retket, kuvat, muistot
⚽ Urheiluseuran sivu – joukkue, ottelut, harjoitukset

Valitsitko? Hienoa. Jokaisen oppitunnin tehtävät kattavat kaikki neljä projektia – löydä vain omasi.

Näytän sinulle: luuranko, josta jokainen sivu maailmassa alkaa

Jokainen verkkosivu – sinun sivustasi YouTubeen asti – alkaa samasta luurangosta:

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

Käännän sen selkokielelle:

Koodi	Mitä se kertoo selaimelle
`<!doctype html>`	”Huomio, HTML-sivu alkaa!”
`<html lang="en">`	”Kaikki sisällä on yksi sivu, ja se on englanniksi.”
`<head>` … `</head>`	”Tässä on tietoa sivusta.” Vierailijat eivät näe sitä.
`<meta charset="UTF-8">`	”Täällä voi olla erikoismerkkejä, ole valmis niihin.”
`<title>` … `</title>`	Sivun nimi – näkyy selaimen välilehdellä.
`<body>` … `</body>`	”Tästä alkaa kaikki, mitä vierailija oikeasti näkee.” Kaikki sisältö menee tänne.

Huomaa miten tagit toimivat: <h1> avaa jotain ja </h1> (kauttaviivalla) sulkee sen. Mitä niiden välissä on, kuuluu siihen tagiin. Aivan kuin sulkeet.

Nyt sinun vuorosi 💪

Avaa my-website-kansiosi (valmistelutasolta) VS Codessa ja sen sisällä oleva index.html-tiedosto. Poista mitä siellä on ja kirjoita yllä olevan esimerkin sivun luuranko.
Muuta <title> ja <h1> sopimaan projektiisi, ja lisää otsikon alle <p>-kappale yhdellä lauseella siitä, mistä verkkosivusi kertoo.
Tallenna (Ctrl+S) ja avaa index.html selaimessasi (tai päivitä sivu F5:llä).

Etkö ole varma miten? Tässä ratkaisut jokaiselle projektille:

🏫 Ratkaisu: Kouluni verkkosivu

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

🙋 Ratkaisu: Henkilökohtainen sivuni

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

🌍 Ratkaisu: Matkapäiväkirja

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

⚽ Ratkaisu: Urheiluseuran sivu

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

✅

Tarkista itse: Selaimen välilehti näyttää verkkosivusi nimen, ja sivulla näkyy otsikkosi ja lauseesi. Jos näin on – peruskivi on paikallaan!

Mitä opit tästä oppitunnista

Verkkosivu = tiedostoja, jotka palvelin lähettää selaimeen. Selain piirtää niistä sivun.
Jokaisella sivulla on sama luuranko: <head> (tietoa sivusta) ja <body> (näkyvä sisältö).
Tagit avautuvat kuten <tämä> ja sulkeutuvat kuten </tämä>.