🗓️ Scaletta della lezione
📋 Cosa devi sapere alla fine della lezione
- I titoli vanno da <h1> (il più importante, uno per pagina) a <h6>: si scelgono per gerarchia, non per grandezza.
- <p> crea un paragrafo; <br> va a capo dentro lo stesso paragrafo; <hr> separa due argomenti.
- <strong> indica importanza, <em> enfasi, <mark> evidenziazione.
- I commenti
<!-- ... -->non vengono mostrati: servono a chi legge il codice. - Un attributo aggiunge informazioni a un tag:
nome="valore", sempre nel tag di apertura.
1. La gerarchia dei titoli
HTML offre sei livelli di titolo. Funzionano come l'indice di un libro: <h1> è il titolo del libro, <h2> i capitoli, <h3> i paragrafi del capitolo, e così via.
<h1>Appunti di Informatica</h1>
<h2>Lezione 2 – Il testo in HTML</h2>
<h3>I titoli</h3>
<h3>I paragrafi</h3>Usare <h3> “perché è più piccolo”. La dimensione si regola con il CSS: in HTML il titolo si sceglie solo in base al livello di importanza. E non si saltano livelli (da h2 a h4).
2. Paragrafi, a capo e separatori
Il browser ignora gli a capo e gli spazi multipli che scrivi nel codice. Per strutturare il testo servono i tag:
| Tag | Significato | Quando usarlo |
|---|---|---|
<p> | Paragrafo | Ogni blocco di testo con un'idea compiuta. |
<br> | A capo (elemento vuoto) | Righe di un indirizzo o di una poesia. Mai per creare spazio! |
<hr> | Cambio di argomento | Tra due sezioni degli appunti. |
<blockquote> | Citazione lunga | Una definizione presa dal libro di testo. |
3. Dare significato alle parole
testo semantico<p>Il <strong>DOCTYPE</strong> va sempre in prima riga.</p>
<p>HTML <em>non</em> è un linguaggio di programmazione.</p>
<p>Da ripassare: <mark>differenza tra head e body</mark>.</p>
<p>La formula dell'acqua è H<sub>2</sub>O, 2<sup>10</sup> = 1024.</p>
<!-- Questo commento non compare nella pagina --><strong> ed <em> non dicono solo “grassetto” e “corsivo”: dicono che la parola è importante o enfatizzata. Un lettore vocale per non vedenti cambia tono di voce proprio grazie a questi tag.
4. Anatomia di un attributo
Gli attributi aggiungono informazioni a un elemento. Si scrivono nel tag di apertura, nella forma nome="valore", con il valore tra virgolette.
<p title="Spiegazione che compare passando il mouse">Passa qui sopra</p>
<h2 id="lezione-2">Lezione 2</h2>
<p lang="en">This paragraph is in English.</p>L'attributo id dà un nome unico a un elemento: nella lezione 4 lo useremo per creare un indice cliccabile degli appunti.
5. Laboratorio: gli appunti della lezione 2
- Apri il tuo
appunti.html(o usa il playground qui sotto). - Aggiungi un
<h2>conid="lezione-2"e il titolo della lezione di oggi. - Scrivi almeno tre
<h3>(titoli, paragrafi, attributi), ognuno con un paragrafo di spiegazione. - Usa almeno una volta
<strong>,<em>e<mark>per le parole chiave. - Separa la lezione 1 dalla lezione 2 con un
<hr>.
Il codice che scrivi resta salvato in questo browser. Usa 💾 Esporta .html per scaricarlo e consegnarlo.
🎯 Quiz di Autovalutazione (10 Domande)
Seleziona una risposta per ogni domanda e premi il pulsante finale per vedere il punteggio, l'esito e le spiegazioni.