THETALe Onde di Ondyria
ITEN
Onda della Creazione

Laboratorio HTML · Guida pratica

Dal libro al tuo primo file HTML.

Per scrivere il codice ti serve un editor di testo sul computer. Qui non c'è un editor online: imparerai il percorso reale, creando un file index.html, aprendolo nel browser e aggiornandolo mentre svolgi le missioni del libro.

Scarica il file inizialeScarica il progetto completo

Prima configurazione

Sei passi, poi puoi sperimentare.

La prima volta puoi farti aiutare da un adulto. Dopo aver creato il file, il ciclo diventa sempre lo stesso.

  1. 01

    Crea la cartella della missione

    Sul Desktop crea una nuova cartella e chiamala missione-html. Tutto il tuo progetto resterà lì, sul computer.

  2. 02

    Installa o apri un editor

    Per scrivere HTML ti serve un editor di testo. Visual Studio Code è gratuito ed è quello consigliato per questa guida: chiedi a un adulto di aiutarti a scaricarlo e installarlo.

    Scarica Visual Studio Code
  3. 03

    Salva il file come index.html

    Salvalo nella cartella missione-html con il nome esatto index.html. Controlla che non sia diventato index.html.txt.

  4. 04

    Inserisci la prima struttura

    Copia il codice qui sotto nel file. Le parti head e body sono sorelle: entrambe si trovano dentro html.

  5. 05

    Apri la pagina nel browser

    Trova index.html nella cartella e fai doppio clic. Si aprirà nel browser come una vera pagina, anche senza pubblicarla online.

  6. 06

    Modifica, salva e aggiorna

    Torna all'editor, cambia un testo o un tag e salva conCtrl + S su Windows oppure ⌘ +S su Mac. Poi aggiorna la pagina nel browser per vedere il risultato.

index.htmlPRIMA STRUTTURA
<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title>Guida di Ondyria</title>
  </head>
  <body>
    <h1>La mia guida di Ondyria</h1>
    <p>La missione comincia!</p>
  </body>
</html>

BRIX SCAN

Se qualcosa non funziona.

Vedi il codice invece della pagina?

Controlla il nome del file: deve finire con .html, non con .txt. Poi aprilo con Chrome, Edge, Safari o Firefox.

La modifica non appare?

Salva di nuovo il file e premi Aggiorna nel browser. Il browser non mostra una modifica che non è stata ancora salvata.

La pagina sembra incompleta?

Verifica che ogni tag aperto sia chiuso e che siano presenti i simboli < e >. Confronta la struttura con quella del libro.

L'immagine non compare?

Il progetto completo usa un'immagine del portale di Theta. Il file HTML resta sul computer, ma per visualizzare quell'immagine serve una connessione a Internet.

La console non serve per questa missione.

La console del browser è uno strumento più avanzato. Per imparare la struttura HTML è più chiaro lavorare direttamente nel file index.html.

Oltre la missione

Continua a esplorare, un passo alla volta.

Il libro introduce alcuni concetti fondamentali di HTML attraverso una storia ed esercizi pratici. È un punto di partenza, non un manuale completo. Il laboratorio contiene ciò che serve per seguire il libro; queste risorse facoltative ti aiutano ad approfondire.

Una guida da consultare, non altri compiti.

MDN Web Docs è una risorsa tecnica esterna in inglese. Parti da un argomento che conosci e, se serve, esplorala con un adulto o un insegnante. Puoi usare la traduzione del browser. Conserva i file originali prima di sperimentare. Ogni link apre una nuova scheda.

Pronto per il libro

Ora ogni Challenge può diventare una pagina vera.

Parti dal file iniziale, segui le missioni e usa il progetto completo solo per confrontare la tua soluzione finale.

Scarica index.html