Dal progetto
alla pagina.
Finisci l’esperienza mobile. Poi scopri come il browser trasforma contenuti e regole grafiche in una pagina web.
La stessa scheda, tre punti di vista.
Margherita
Pomodoro, fiordilatte, basilico.
8 €HTML dà struttura e significato.
CSS decide l’aspetto.
DOM è l’albero del documento nel browser.
A che punto sei?
Percorso A · Completa il progetto
Home mobile + menu + collegamenti
- Apri il tuo progetto e salva una copia.
- Porta in alto logo, titolo e accesso al menu.
- Metti i contenuti in una colonna e accorcia i testi.
- Nel menu allinea nomi, ingredienti e prezzi.
- Aggiungi le due frecce esterne: vai al menu e torna alla home.
- Segna la fine del primo schermo con “Da qui si scorre”.
Il test con un compagno
Mostragli la home senza spiegare come usarla. Chiedigli:
- “Dove trovi il prezzo della Margherita?”
- “Come torni alla home?”
- “Dove guardi per sapere quando è aperto?”
Osserva dove si ferma o esita. Annota un problema, cambia il progetto e ripeti la prova.
Tre concetti da distinguere
HTML: che cosa contiene la pagina?
HTML è un linguaggio di marcatura. Identifica titoli, paragrafi, collegamenti e altre parti del contenuto. Per esempio, <h1> indica il titolo principale.
<p class="ingredienti">Pomodoro e basilico.</p>
<p> apre un paragrafo; </p> lo chiude. Tra i due c’è il testo. class="ingredienti" è un attributo: assegna un nome di classe all’elemento.
CSS: come viene mostrata?
CSS descrive la presentazione: colori, dimensioni, spazi e disposizione. Una regola sceglie gli elementi con un selettore e assegna valori alle proprietà.
.ingredienti {
color: #235444;
font-size: 18px;
}.ingredienti seleziona gli elementi con quella classe. color è una proprietà e #235444 è il suo valore. Il punto serve nel selettore CSS, non nel nome della classe HTML.
DOM: come il browser organizza il documento?
Il DOM, Document Object Model, è la rappresentazione del documento come un albero di nodi. Contiene elementi, testi e altri nodi. Il browser lo costruisce leggendo l’HTML; JavaScript può modificarlo.
article
├── h2
│ └── "Margherita"
└── p
└── "Pomodoro e basilico."article è il genitore di h2 e p. I due elementi sono figli dello stesso genitore, quindi sono fratelli. Il DOM non è il CSS e non è un’immagine della pagina.
Dal disegno ai tag
| Nel progetto | In HTML | A cosa serve |
|---|---|---|
| Nome principale della pagina | <h1> | Titolo principale |
| Titolo di una sezione | <h2> | Organizza i contenuti |
| Testo degli ingredienti | <p> | Paragrafo |
| Scheda di una pizza | <article> | Contenuto autonomo |
| Vai alla pagina menu | <a href="menu.html"> | Collegamento |
| Esegui un’azione nella pagina | <button> | Pulsante |
Un collegamento può sembrare un pulsante grazie al CSS. Si sceglie il tag per la sua funzione, non solo per il suo aspetto.
Tocca con mano: una scheda pizza
Sette sfide brevi con anteprima e albero DOM dal vivo: ogni sfida superata si accende di verde.
Cambia il nome della pizza nell’HTML e il colore del titolo nel CSS. Poi premi Aggiorna anteprima. Guarda che cosa cambia nell’albero.
È un laboratorio di HTML e CSS: il codice JavaScript non viene eseguito. Le modifiche restano qui finché non ricarichi; scarica il file per conservarle.
Quello che si vede
L’albero DOM
Albero semplificato: elementi e testo del contenuto. Nel documento completo ci sono anche html, head e body.
Percorso B · Dal progetto al codice
Trasforma una tua scheda
- Scegli: prendi una pizza del tuo progetto e individua nome, ingredienti e prezzo.
- Struttura: scrivi l’HTML con article, h2, p e strong. Chiudi correttamente gli elementi.
- Stile: usa almeno tre regole CSS coerenti con il ristorante: colore, dimensione del testo e spazio interno.
- Albero: disegna il DOM della tua scheda in Excalidraw. Indica un genitore e due figli.
- Prova: aggiungi un paragrafo “Vegetariana” dentro article. Spiega perché compare un nuovo nodo.
Sfida facoltativa: la pagina “Prenota un tavolo”
In Excalidraw disegna una pagina con giorno, ora e numero di persone. Aggiungi una schermata di conferma e una situazione di errore, per esempio “Scegli un orario”. Collega le schermate con frecce e spiega cosa succede dopo il clic.
Mi sono bloccato
Il CSS non cambia niente
Hai premuto Aggiorna? La classe HTML e il selettore hanno lo stesso nome? Scrivi class="pizza" nell’HTML e .pizza nel CSS. Controlla parentesi graffe, due punti e valori.
Non so come annidare i tag
Se apri article, poi h2, devi chiudere prima h2 e poi article. Rientrare con gli spazi rende visibile chi sta dentro chi.
<article> <h2>Margherita</h2> </article>
Confondo margin e padding
Padding è lo spazio interno, tra contenuto e bordo dell’elemento. Margin è lo spazio esterno, verso gli altri elementi. Prova a cambiare padding da 24px a 8px nella scheda.
Il DOM è un altro linguaggio da scrivere?
No: è il modello ad albero del documento nel browser. Oggi devi saperlo leggere e rappresentare. Non serve imparare JavaScript per questo esercizio.
Il mio disegno mobile sembra il desktop rimpicciolito
Prova una sola colonna, accorcia la presentazione, porta il menu in alto e aumenta gli spazi tra pulsanti. Chiedi a un compagno di trovare una pizza senza indicargli dove cliccare.
Controlla se hai capito
Prova prima senza cercare nella teoria. Il feedback spiega il motivo della risposta: non è un voto e non viene inviato al docente.
Che cosa dovrai saper fare
Salva il file Excalidraw e la tua scheda HTML. Conserva anche una breve frase che spieghi una scelta grafica e una correzione fatta durante le prove.
Questi sono gli obiettivi di preparazione alla verifica; la traccia e le modalità saranno indicate dal docente.