Fine settembre 2026: in quarta scienze applicate il programma di informatica è ripartito da poche settimane, e il primo blocco dell’anno è quasi sempre lo stesso — HTML e CSS, prima di JavaScript, prima del modello E-R e di SQL che arrivano più avanti. Se il tuo professore ha aperto l’anno con i tag e i selettori, la prima verifica — spesso una prova pratica al PC insieme a una parte teorica — arriva fra cinque e otto settimane, quindi fra fine ottobre e novembre. Questo post ti prepara a quella, non a “imparare a programmare siti web”: ci sono cose molto specifiche su cui una verifica scolastica insiste, e sono diverse da quelle che conta un tutorial online.
Cosa chiede davvero la verifica
Il programma di quarta scienze applicate, nella parte di inizio anno, copre HTML/CSS e le basi di JavaScript; il blocco successivo è il modello E-R, lo schema relazionale, la normalizzazione, i DBMS e SQL. Su HTML/CSS, la verifica tipica chiede tre cose:
- Leggere una pagina HTML e rispondere a domande su struttura, tag e attributi — spesso trovando un errore in un frammento di codice dato.
- Prevedere l’effetto di un CSS, in particolare quando più regole si contendono lo stesso elemento: qui non basta sapere “cosa fa” una proprietà, bisogna sapere quale regola vince.
- Scrivere una pagina da una consegna, in laboratorio, con tag semantici e un minimo di layout — spesso con flexbox per allineare due o tre blocchi.
Sono tre competenze diverse: leggere codice altrui, prevedere una cascata di regole, scrivere da zero. Un ripasso che si limita a “i tag principali” ne copre solo una.
La struttura di un documento HTML5
Ogni pagina HTML5 parte dallo stesso scheletro:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Titolo della pagina</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>
<section>...</section>
</main>
<footer>...</footer>
</body>
</html><!DOCTYPE html> dice al browser che il documento è HTML5, va sempre in prima riga. Dentro <head> c’è tutto ciò che non si vede direttamente in pagina: <meta charset="UTF-8"> (senza questo, le lettere accentate si rompono), il <title> che appare nella scheda del browser, e il collegamento al foglio di stile. Dentro <body> c’è tutto ciò che si vede.
I tag semantici — <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> — dicono al browser (e a chi legge il codice) cosa rappresenta quella parte di pagina, non solo come appare. Un <div> generico funziona lo stesso a video, ma in verifica un professore chiede quasi sempre di usare il tag semantico giusto: <nav> per il menu, <article> per un contenuto autonomo, non un <div class="nav"> che fa la stessa cosa senza dirlo.
Attributi, link, immagini, liste, tabelle, form
Un attributo aggiunge informazioni a un tag, dentro il tag di apertura: <a href="pagina.html">testo</a>. href è l’attributo, "pagina.html" è il suo valore. Gli attributi che tornano più spesso in verifica:
<a href="...">per i link —hrefpuò puntare a un’altra pagina, a un’ancora nella stessa pagina (href="#sezione") o a un indirizzo esterno.<img src="foto.jpg" alt="descrizione">per le immagini —altnon è decorativo: serve per l’accessibilità e per quando l’immagine non si carica, e un professore lo controlla.<ul>/<ol>con<li>per le liste —<ul>non ordinata,<ol>ordinata (numerata).<table>con<tr>(riga),<th>(intestazione),<td>(cella) per le tabelle.<form>con<input>,<label>,<button>per i moduli — l’attributotypedi<input>cambia tutto (text,email,checkbox,submit…), e ogni<input>dovrebbe avere un<label>collegato tramitefor/id.
CSS: i tre modi di inserirlo
Ci sono tre modi per collegare CSS a una pagina, e una domanda di teoria chiede quasi sempre di distinguerli:
- Inline, dentro l’attributo
styledel singolo tag:<p style="color: red;">testo</p>. Ha la priorità più alta di tutte, ma è sconsigliato perché mischia contenuto e stile e non è riusabile. - Interno, dentro un tag
<style>nella<head>del documento. Utile per pagine singole o esempi rapidi. - Esterno, in un file
.cssseparato, collegato con<link rel="stylesheet" href="stile.css">nella<head>. È il modo corretto per un sito vero: un file, riusabile su più pagine.
Selettori, specificità e cascata
Un selettore dice a quali elementi si applica una regola CSS:
p { color: black; } /* selettore di tipo: tutti i <p> */
.evidenziato { color: red; } /* selettore di classe: elementi con class="evidenziato" */
#titolo { color: blue; } /* selettore di id: l'unico elemento con id="titolo" */
nav a { color: green; } /* selettore discendente: gli <a> dentro un <nav> */Il punto dove si perdono più punti in verifica è la specificità: quando due regole si contendono la stessa proprietà sullo stesso elemento, non vince “l’ultima scritta” — vince la regola più specifica. L’ordine di forza, dal più debole al più forte, è: selettore di tipo < selettore di classe < selettore di id < stile inline. A parità di specificità, allora sì, vince l’ultima regola dichiarata nel foglio di stile.
Esempio: se hai p { color: black; } e più sotto .evidenziato { color: red; }, e un <p class="evidenziato"> — vince rosso, perché la classe è più specifica del tipo, indipendentemente dall’ordine. Ma se avessi due regole con la stessa specificità (per esempio due selettori di classe diversi che toccano entrambi lo stesso elemento), allora conta l’ordine: vince quella scritta più in basso nel file.
Il box model
Ogni elemento HTML, a schermo, è un rettangolo fatto di quattro strati concentrici, dal centro verso l’esterno: content (il contenuto), padding (lo spazio interno, fra contenuto e bordo), border (il bordo), margin (lo spazio esterno, fra questo elemento e gli altri).
Con box-sizing: content-box (il valore di default), width e height si riferiscono solo al contenuto: padding e border si sommano sopra. Con box-sizing: border-box, width e height includono padding e border, e il contenuto si restringe di conseguenza.
Questo è il calcolo che una verifica chiede quasi sempre:
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: content-box;
}Con content-box, la larghezza totale del bordo esterno è content + padding su entrambi i lati + border su entrambi i lati:
Il margine (10 px per lato) non fa parte del box in sé, ma dello spazio che il box “occupa” rispetto agli elementi vicini: px. Se invece la stessa regola avesse box-sizing: border-box, i 200 px sarebbero già la larghezza totale (content + padding + border), e il contenuto si ridurrebbe a px.
Display e flexbox base
Ogni elemento HTML ha un valore di display di default: gli elementi block (<div>, <p>, <section>…) occupano tutta la larghezza disponibile e vanno a capo prima e dopo; gli elementi inline (<span>, <a>, <strong>…) occupano solo lo spazio del loro contenuto e stanno in riga con il testo attorno.
Flexbox serve per allineare più elementi in riga o in colonna senza i trucchi del passato (float, posizionamenti assoluti). Le basi:
.contenitore {
display: flex;
justify-content: space-between; /* distribuzione sull'asse principale */
align-items: center; /* allineamento sull'asse trasversale */
gap: 16px; /* spazio fra gli elementi */
}display: flex sul contenitore trasforma i suoi figli diretti in elementi flessibili, in riga per default. justify-content controlla la distribuzione orizzontale (nel caso più comune), align-items quella verticale. Per una verifica scolastica, sapere allineare tre box in riga con flex e justify-content: space-between copre la maggior parte di quello che viene chiesto in laboratorio.
Esercizi nel formato della verifica
1. Trova l’errore. Cosa c’è di sbagliato in questo HTML?
<ul>
<li>Primo elemento
<li>Secondo elemento</li>
</ul>
<div id="box1">Contenuto</div>
<div id="box1">Altro contenuto</div>Soluzione: il primo <li> non è chiuso (manca </li> prima del secondo <li>) — i browser spesso lo “correggono” da soli mostrando comunque la pagina, ma è codice non valido e in verifica va segnalato. Il secondo errore è più grave: l’id box1 è usato due volte, e un id deve essere unico nella pagina — per stili o elementi ripetuti si usa class, non id.
2. Prevedi il colore finale. Dato questo CSS e <p class="testo" id="intro">Ciao</p>:
p { color: black; }
.testo { color: blue; }
#intro { color: red; }
p.testo { color: green; }Soluzione: vince #intro { color: red; }. Un selettore di id ha specificità più alta di qualunque combinazione di classi e tipi, quindi batte anche p.testo, che pure è più specifico del solo .testo o del solo p.
3. Calcola la larghezza totale. Un box ha width: 300px, padding: 15px, border: 3px solid, box-sizing: content-box. Qual è la larghezza totale visibile (bordo escluso margine)?
4. Scrivi una pagina da una consegna. “Crea una pagina con un’intestazione contenente il titolo del sito, un menu di navigazione con tre link, un blocco principale con due paragrafi, e un piè di pagina con il copyright. Allinea i tre link del menu in riga con spazio uniforme fra loro.” Questo è esattamente il tipo di consegna da prova pratica: richiede struttura semantica (header, nav, main, footer) più una riga di flexbox (display: flex; justify-content: space-between;) sul contenitore dei link.
Errori tipici che costano punti
- Tag non chiusi o annidati male.
<b><i>testo</b></i>è annidamento scorretto: i tag devono chiudersi nell’ordine inverso in cui si aprono (<b><i>testo</i></b>). Un tag dimenticato spesso non fa “esplodere” la pagina — il browser è tollerante — ma in verifica è comunque un errore. idripetuti. Unidè unico per definizione; se serve applicare lo stesso stile a più elementi, si usaclass.- Confondere classe e id nel selettore CSS:
.nomeper le classi,#nomeper gli id — scambiarli è l’errore di sintassi più comune in una verifica pratica, e il CSS semplicemente non si applica, senza errore visibile in pagina. - Dimenticare
box-sizinge stupirsi che un box “sfori” dal contenitore: concontent-box(il default) padding e border si sommano sempre allawidthdichiarata.
Come capire se sei pronto
Prova a fare, a libro chiuso, questo: scrivi da zero lo scheletro HTML5 completo con i tag semantici, poi scrivi tre regole CSS con specificità diversa sullo stesso elemento e prevedi ad alta voce quale vince prima di controllare. Se ci riesci senza esitare, e sai spiegare la differenza fra content-box e border-box con un numero alla mano, sei nella posizione giusta per la verifica.
Su questo argomento non c’è ancora una simulazione dedicata nella categoria simulazioni per il liceo. Per il blocco che arriva subito dopo HTML/CSS, il modello E-R e SQL, il post di riferimento è Basi di dati: dal modello ER allo schema relazionale e SQL: è scritto per l’esame universitario, ma i concetti di base — entità, relazioni, chiavi — sono gli stessi che vedrai quest’anno.
Se HTML e CSS ti sembrano ancora un insieme di regole slegate più che un metodo, la pagina di informatica spiega come lavoriamo su questi argomenti a lezione, e la diagnosi gratuita è il modo più semplice per capire da dove partire prima della verifica.