Costruisci il tuo rifugio.

Una pagina già funzionante, da capire e modificare. Trovi HTML e CSS commentati, sei asset pixel art originali ispirati a Minecraft e una guida con 5 missioni di base e 3 extra. Funziona anche senza connessione.

1. In Windows: tasto destro sullo ZIP → Estrai tutto.
2. Apri la cartella blueprint-rifugio in VS Code; apri index.html nel browser.
3. Apri anche missioni.html: cambia testi, colori, spazi, immagini e liste. Lavora su index.html e style.css.

Per chi è avanti: aggiungi una terza scheda, rendi raro il diamante con una seconda classe e costruisci una stanza segreta.

Questo kit è un percorso pratico distinto dalle missioni del banco qui sotto: le prove si controllano sul tuo sito e spiegandole a voce. Se vuoi continuare il tuo progetto attuale, riparti dai tuoi file. Gli asset sono originali del laboratorio, non file ufficiali del gioco.

Puoi trasformare la pagina già iniziata nel tuo rifugio: scegli un nome per il mondo, descrivi dove si trova la base e che cosa contiene. Se preferisci, mantieni il tuo tema.

1. In Esplora file, fai una copia della cartella del sito e chiamala copia-prima-del-css.
2. Apri Visual Studio Code. Dal menu File → Apri cartella… (Open Folder), scegli la cartella del tuo sito.
3. Nel pannello a sinistra apri index.html. In Esplora file fai doppio clic sullo stesso file per aprirlo nel browser.
4. Cambia una parola del titolo visibile, tra <h1> e </h1>. Premi Ctrl + S; torna al browser e premi Ctrl + R.

La parola è cambiata? Hai trovato il file giusto e il ciclo di lavoro funziona.

L’insieme è un elemento HTML. Il tag dice che tipo di contenuto stai scrivendo: p è un paragrafo, h1 il titolo principale, h2 il titolo di una sezione.

Un attributo aggiunge informazioni dentro il tag di apertura. Le virgolette racchiudono il suo valore. Lo vediamo nel collegamento.

Un collegamento con a e href

<p>
  <a href="https://scuola.akkaz.dev">I laboratori della scuola</a>
</p>

<a>…</a>

Il collegamento. Tra apertura e chiusura scrivi il testo su cui cliccare.

href="…"

L’attributo href indica la destinazione. Per un sito esterno scrivi l’indirizzo completo, compreso https://.

Prova nel tuo file: cambia soltanto il testo del collegamento in “Apri i laboratori”. La destinazione cambia? Clicca per verificarlo.

Controlla se le hai già. Se ci sono, non aggiungerle una seconda volta: trova il loro contenuto. Altrimenti raggruppa quello che hai già scritto.

<header>
  <h1>Il rifugio nel bosco</h1>
  <p>Il mio rifugio ha un ingresso segreto.</p>
</header>

<main>
  <h2>Il mio inventario</h2>
  <p>Conservo legno e pietra nel rifugio.</p>
</main>

<footer>
  <p>Un mondo inventato per imparare.</p>
</footer>

HTML dà significato ai contenuti. Questi tre contenitori non sono una scorciatoia per colorare il sito: per quello useremo il CSS.

HTML: che cosa contiene la pagina. CSS: come appare. Oggi usiamo un file per ciascuno, nella stessa cartella.

il-mio-rifugio/
  index.html
  style.css

1. Se hai già style.css, aprilo. Altrimenti fai clic destro sulla cartella nel pannello di VS Code → Nuovo file (New File) → scrivi style.css.
2. Nel file index.html, cerca <head> e </head>.
3. Tra questi due tag deve esserci la riga qui sotto. Se esiste già, controllala senza duplicarla.

<link rel="stylesheet" href="style.css">

link

Collega un’altra risorsa alla pagina. Non ha un tag di chiusura.

rel="stylesheet"

Dice che la risorsa è un foglio di stile.

href="style.css"

Cerca style.css nella stessa cartella del file HTML. Nome, estensione e percorso devono corrispondere.

Nell’HTML assegni un nome. Nel file CSS scrivi le regole per quel nome. Non scrivere colori o dimensioni nell’attributo style dell’HTML e non aggiungere un blocco <style>: oggi tutte le regole vanno in style.css.

<h1 class="titolo">Il rifugio nel bosco</h1>

.titolo {
  color: darkgreen;
  text-align: center;
}

Il nome lo scegli tu

titolo è un esempio: puoi usare titolo-sito, presentazione o un altro nome sensato. Deve coincidere esattamente nei due file, comprese maiuscole e minuscole. Per iniziare usa lettere minuscole e trattini, comincia con una lettera e non mettere spazi dentro un singolo nome.

Il banco prova accetta nomi scelti da te: non devi chiamare una classe per forza “titolo”. Per le missioni usa regole semplici, come .nome { … }.

<p class="testo">Una base tra gli alberi.</p>
<p class="testo">Conservo legno e pietra nel rifugio.</p>

.testo {
  font-size: 18px;
}

Dai una classe anche alla pagina

Nel tag body esistente aggiungi class="pagina". Se ha già una classe, puoi mantenerla e usarla nelle tue regole. Non creare un secondo body.

<body class="pagina">
  <h1 class="titolo">Il rifugio nel bosco</h1>
  <p class="testo">Il mio rifugio ha un ingresso segreto.</p>
</body>

.pagina {
  background-color: lightyellow;
}

Aggiungi una proprietà alla volta

Prova una riga, salva e osserva prima di aggiungere la successiva. Se hai scelto altri nomi di classe, cambia anche i selettori dell’esempio.

.pagina {
  background-color: lightyellow;
  color: darkblue;
  font-family: Arial, sans-serif;
}

.titolo {
  color: darkgreen;
  text-align: center;
}

.testo {
  font-size: 18px;
}

Scegli i tuoi nomi o usa quelli degli esempi. Tutte le regole vanno in style.css. Nell’HTML scrivi solo gli attributi class corrispondenti. Dopo ogni modifica salva e osserva.

1. Aggiungi un link ai laboratori. Usa a con href="https://scuola.akkaz.dev" e un testo comprensibile.
2. Riconosci le tre parti. Controlla header, main e footer dentro body. Se mancano, raggruppa i contenuti senza cancellarli.
3. Cambia lo sfondo. Assegna una classe al body (es. pagina). Nella sua regola CSS scrivi background-color: lightyellow;.
4. Rendi il titolo verde e centrato. Assegna una classe all’h1 (es. titolo). Nella sua regola scrivi color: darkgreen; e text-align: center;.
5. Ingrandisci un paragrafo. Assegna una classe a un p (es. testo) e scrivi font-size: 18px; nella sua regola. Prova 22px e torna a 18px. Poi riusa la classe su un secondo paragrafo.
6. Cambia il carattere della pagina. Nella regola della classe del body aggiungi font-family: Arial, sans-serif;.

<h1 class="titolo-sito">Il rifugio nel bosco</h1>

.titolo-sito {
  color: darkgreen;
  text-align: center;
}

.intestazione {
  background-color: lightblue;
  padding: 20px;
}

Hai completato le missioni e sai spiegare le tue classi? Aggiungi al rifugio tre materiali: legno, pietra e diamante. Ogni scheda è un elemento del tuo inventario. Se usi un altro tema, scegli tre oggetti adatti al tuo sito.

Lavora nei tuoi file. Le classi possono avere i nomi che scegli tu; tutti gli stili restano in style.css. Gli aiuti qui sotto mostrano solo un pezzo: il resto lo progetti tu.

Livello 1 · La stessa classe, tre volte

1. Dentro main aggiungi una sezione con un titolo, per esempio “Il mio inventario”.
2. Crea tre schede. Ognuna contiene un titolo, una breve descrizione e una quantità inventata o un’altra informazione adatta al tema.
3. Assegna la stessa classe alle tre schede. Scrivi una sola regola CSS per il loro sfondo, bordo e spazio interno.
4. Usa una classe comune anche per i titoli delle schede. I testi devono essere diversi; il loro stile deve essere coerente.

Prova decisiva: cambia il colore del bordo in un solo punto del CSS. Devono cambiare tutte e tre le schede.

<article class="blocco">
  <h3 class="nome-blocco">Legno</h3>
  <p>Materiale per le pareti del mio rifugio.</p>
  <p class="quantita">Quantità: 12</p>
</article>

.blocco {
  padding: 20px;
  margin-bottom: 16px;
  border: 2px solid darkgreen;
}

Livello 2 · Il materiale raro

Metti in evidenza il diamante, oppure un oggetto speciale del tuo sito. Mantieni la classe comune e aggiungi una seconda classe. Deve conservare bordo e spazi delle altre, ma avere uno sfondo diverso. Aggiungi anche il testo “Materiale raro”, così la differenza non dipende soltanto dal colore.

<article class="blocco raro">

.raro {
  background-color: lightyellow;
}

Prova decisiva: togli solo la classe aggiuntiva dalla scheda speciale. Deve tornare come le altre, senza perdere il bordo e gli spazi.

Livello 3 · Un collegamento che risponde

Aggiungi in alto un link “Apri l’inventario” che porti alla sezione delle schede. Assegna una classe al link e cambia il suo colore di sfondo quando ci passi con il mouse. Fallo funzionare anche quando viene selezionato con la tastiera.

<section id="inventario">

<a class="vai-inventario" href="#inventario">Apri l’inventario</a>

.vai-inventario:hover,
.vai-inventario:focus-visible {
  background-color: lightyellow;
  color: darkblue;
}

Il collaudo della sfida

• Tre contenuti diversi, uno stile comune modificabile da una sola regola.
• Una variante ottenuta con una seconda classe.
• Nessun attributo style e nessun blocco style nell’HTML.
• Testo leggibile anche restringendo la finestra; nessuna larghezza fissa enorme.
• Se hai fatto il livello 3, link provato sia col mouse sia con Tab e Invio.

Mostra al docente: “Questa regola cambia tutte le schede; questa seconda classe ne cambia una sola”. Poi fai vedere la modifica dal vivo.

La sfida è facoltativa. I controlli automatici del banco riguardano le missioni di base: questi livelli si collaudano con le prove indicate e con un compagno. Non devi finire tutti e tre i livelli oggi.

1. Salva entrambi i file. Se hai usato il banco, scarica sia index.html sia style.css e mettili nella stessa cartella. Se Windows aggiunge “(1)” al nome, controlla i nomi prima di aprire il sito: il link deve puntare proprio al CSS giusto.
2. Apri index.html dal PC, prova il collegamento e restringi la finestra. Controlla che testo e sfondo si distinguano bene.
3. Mostra al compagno la classe nell’HTML e la regola corrispondente in style.css: una per il titolo e una per il paragrafo. Poi scambiate i ruoli.
4. Spiega al docente una modifica HTML e una modifica CSS: indica la riga e il suo effetto.

Il traguardo non è una pagina perfetta: è saper dire «ho scritto questa istruzione e ho visto questo cambiamento».