🗓️ Scaletta della lezione
📋 Cosa devi sapere alla fine della lezione
- HTML (HyperText Markup Language) è un linguaggio di markup: descrive la struttura del contenuto, non è un linguaggio di programmazione.
- <!DOCTYPE html> dice al browser di interpretare la pagina secondo lo standard HTML5.
- <head> contiene le informazioni sulla pagina (codifica, titolo); <body> contiene ciò che si vede.
- <meta charset="UTF-8"> garantisce che lettere accentate e simboli vengano mostrati correttamente.
- Gli elementi si annidano come scatole: si chiude sempre per primo l'ultimo tag aperto.
1. Un linguaggio per descrivere, non per calcolare
HTML significa HyperText Markup Language. La parola chiave è markup, cioè “marcatura”: con i tag etichettiamo ogni parte del contenuto dicendo al browser che cosa è (un titolo, un paragrafo, un elenco, un'immagine). Il browser legge le etichette e decide come mostrarle.
HTML non esegue calcoli e non prende decisioni: per questo non è un linguaggio di programmazione. L'aspetto grafico lo affideremo al CSS, il comportamento interattivo a JavaScript.
Da oggi gli appunti di Informatica li scriviamo direttamente in HTML. Ogni concetto che annoti diventa anche un esercizio: alla fine dell'anno avrai un vero sito di appunti, scritto interamente da te.
2. Lo scheletro del documento
Ecco il documento HTML5 minimo e corretto. Impara a scriverlo a memoria: lo userai in ogni pagina.
index.html<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo nella scheda del browser</title>
</head>
<body>
<h1>Contenuto visibile della pagina</h1>
</body>
</html>| Riga | A cosa serve |
|---|---|
<!DOCTYPE html> | Dichiara lo standard HTML5. Va sempre sulla prima riga. |
<html lang="it"> | Elemento radice che contiene tutto; lang indica la lingua (utile a motori di ricerca e sintesi vocale). |
<head> | Informazioni sulla pagina, non visibili nel corpo. |
<meta charset="UTF-8"> | Codifica dei caratteri: senza, “università” può diventare “università ”. |
<meta name="viewport"> | Fa adattare la pagina allo schermo dello smartphone. |
<title> | Testo nella scheda del browser e nei risultati di Google. |
<body> | Tutto ciò che l'utente vede. |
3. Tag, elementi e annidamento
Un elemento è formato da un tag di apertura, un contenuto e un tag di chiusura (con la barra /). Alcuni elementi, detti vuoti, non hanno contenuto né chiusura: ad esempio <meta>, <br>, <img>.
<p>Questo è un <strong>paragrafo</strong> con una parola in grassetto.</p>Gli elementi si inseriscono uno dentro l'altro come scatole. La regola d'oro: si chiude per primo l'ultimo tag aperto.
annidamento<!-- Corretto -->
<p>Testo <strong>importante</strong></p>
<!-- Sbagliato: i tag si incrociano -->
<p>Testo <strong>importante</p></strong>Il browser ignora spazi e rientri, ma per chi legge il codice sono fondamentali: ogni elemento contenuto in un altro va spostato a destra di 2 spazi. Nel playground il pulsante 🪄 Formatta lo fa per te.
4. Laboratorio: nasce il quaderno degli appunti
Nel playground qui sotto c'è lo scheletro del quaderno. Completalo seguendo i passi.
- Sostituisci i puntini con la tua classe e il tuo nome.
- Cambia il
<title>in “Appunti di Informatica – Cognome”. - Al posto del commento scrivi un titolo
<h2>“Lezione 1 – Struttura del documento”. - Sotto, scrivi in un paragrafo
<p>con parole tue a cosa servonoheadebody. - Esporta il file con 💾 Esporta .html e salvalo come
appunti.htmlnella tua cartella di Informatica.
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.