Come funziona il web e la tua prima pagina

Scopri cosa succede quando scrivi un indirizzo nel browser e costruisci le fondamenta del tuo sito web.

Cosa succede quando apri un sito web

Quando scrivi qualcosa come www.myschool.com in un browser, ecco cosa succede:

Il browser invia un messaggio su internet a un server – il computer dove vive il sito web: “Ehi, mandami la pagina!”
Il server risponde e rimanda file – testo, immagini, codice.
Il browser disegna la pagina sul tuo schermo usando quei file.

I file che il server invia sono scritti in un linguaggio chiamato HTML. Ed è esattamente quello che stai per imparare. Per ora il tuo sito web non sarà su un server – vivrà sul tuo computer, e lo metteremo online nell’ultima lezione.

Scegli il tuo progetto

Prima di scrivere una sola riga, decidi cosa stai costruendo davvero. Lavorerai su uno di questi progetti per tutto il livello:

🏫 Il sito web della mia scuola – orario, menu mensa, eventi, insegnanti
🙋 Il mio sito web personale – chi sono, cosa mi piace, le mie creazioni
🌍 Un diario di viaggio – viaggi, foto, ricordi
⚽ Il sito web di un club sportivo – squadra, partite, allenamenti

Ne hai scelto uno? Ottimo. I compiti di ogni lezione coprono tutti e quattro i progetti – trova semplicemente il tuo.

Te lo mostro: lo scheletro con cui inizia ogni pagina sulla Terra

Ogni pagina web – dalla tua a quella di YouTube – inizia con esattamente lo stesso scheletro:

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

Traduciamolo in italiano semplice:

Codice	Cosa dice al browser
`<!doctype html>`	”Attenzione, sta iniziando una pagina HTML!”
`<html lang="en">`	”Tutto ciò che c’è dentro è una pagina, ed è in inglese.”
`<head>` … `</head>`	”Ecco informazioni sulla pagina.” I visitatori non le vedono.
`<meta charset="UTF-8">`	”Potrebbero esserci caratteri speciali, preparati.”
`<title>` … `</title>`	Il nome della pagina – mostrato nella scheda del browser.
`<body>` … `</body>`	”Tutto ciò che il visitatore vede davvero inizia qui.” Tutti i tuoi contenuti vanno qui.

Nota come funzionano i tag: <h1> apre qualcosa e </h1> (con lo slash) lo chiude. Tutto ciò che sta in mezzo appartiene a quel tag. Proprio come le parentesi.

Ora tocca a te 💪

Apri la cartella my-website (dal Livello Preparazione) in VS Code e apri il file index.html al suo interno. Cancella quello che c’è e scrivi lo scheletro della pagina dall’esempio sopra.
Cambia <title> e <h1> in base al tuo progetto, e aggiungi un paragrafo <p> sotto il titolo con una frase su cos’è il tuo sito web.
Salva (Ctrl+S) e apri index.html nel browser (oppure aggiorna la pagina con F5).

Non sai come fare? Ecco le soluzioni per ogni progetto:

🏫 Soluzione: sito web della scuola

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

🙋 Soluzione: sito web personale

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

🌍 Soluzione: diario di viaggio

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

⚽ Soluzione: sito web del club sportivo

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

✅

Controlla da solo: La scheda del browser mostra il nome del tuo sito web, e la pagina mostra il titolo e la frase. Se è così – la pietra fondamenta è posata!

Cosa porti via da questa lezione

Un sito web = file che un server invia a un browser. Il browser disegna una pagina da essi.
Ogni pagina ha lo stesso scheletro: <head> (informazioni sulla pagina) e <body> (contenuto visibile).
I tag si aprono come <this> e si chiudono come </this>.