Cos'è HTML?
HTML (HyperText Markup Language) è il linguaggio fondamentale del web. Ogni pagina web che visiti è costruita con HTML. Non è un linguaggio di programmazione, ma un linguaggio di markup: descrive la struttura e il contenuto di una pagina.
HTML è la base di tutto: senza HTML non esisterebbero siti web, applicazioni web, o contenuti online. È il primo passo per diventare sviluppatori web.
Come funziona il browser
Quando visiti un sito web, il browser (Chrome, Firefox, Safari...) riceve un file HTML e lo interpreta per mostrarti la pagina. Il browser legge i tag HTML e li trasforma in elementi visibili.
Il primo esempio
Ogni pagina HTML inizia con una struttura di base. Ecco il codice più semplice possibile:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La mia prima pagina</title>
</head>
<body>
<h1>Ciao, Mondo!</h1>
<p>Questa è la mia prima pagina web.</p>
</body>
</html>Questa è la mia prima pagina web.
.html (es. index.html) e aprilo nel browser.✏️ Prova tu
Dentro il <body>, scrivi un titolo <h1> con il tuo nome e un paragrafo <p> di presentazione. Poi premi Esegui.
📋 Riepilogo Lezione 1
- HTML sta per HyperText Markup Language
- È il linguaggio fondamentale per costruire pagine web
- Non è un linguaggio di programmazione, ma di markup
- Il browser legge il codice HTML e mostra la pagina
- Ogni pagina inizia con
<!DOCTYPE html>
Struttura Base di una Pagina HTML
Ogni pagina HTML ha una struttura precisa con area head (intestazione) e body (corpo). Vediamo nel dettaglio ogni elemento.
L'head: le informazioni nascoste
L'head contiene informazioni che il browser usa ma che non vengono mostrate direttamente nella pagina (metadati, titolo, collegamento a fogli di stile, ecc.).
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo della Pagina</title>
</head>Tag importanti nell'head
<meta charset="UTF-8">- Definisce la codifica dei caratteri (per scrivere accenti, emoji, ecc.)<meta name="viewport">- Rende la pagina responsive (adattabile ai cellulari)<title>- Il titolo che appare nella scheda del browser
Il body: il contenuto visibile
Tutto ciò che l'utente vede e con cui interagisce sta dentro il <body>.
Esempio completo
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Il mio Sito</title>
</head>
<body>
<h1>Benvenuto!</h1>
<p>Questa è la struttura base di una pagina HTML.</p>
</body>
</html>✏️ Prova tu
Aggiungi nel body un titolo <h1> e un paragrafo <p> che descrivano la tua pagina. Non copiare l'esempio: inventa tu i testi.
📋 Riepilogo Lezione 2
- Ogni pagina ha un
<head>e un<body> - L'head contiene metadati, titolo, charset
- Il body contiene tutto il contenuto visibile
- Il tag
<!DOCTYPE html>va all'inizio del file - L'attributo
lang="it"specifica la lingua
Testo e Formattazione
HTML offre molti tag per formattare il testo, dai titoli ai paragrafi, dal grassetto al corsivo.
Titoli (h1 - h6)
HTML ha 6 livelli di titoli, da <h1> (il più grande) a <h6> (il più piccolo).
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Titoli</title></head>
<body>
<h1>Titolo Principale</h1>
<h2>Sottotitolo</h2>
<h3>Titolo di Terzo Livello</h3>
<h4>Titolo di Quarto Livello</h4>
<h5>Titolo di Quinto Livello</h5>
<h6>Titolo di Sesto Livello</h6>
</body></html>Paragrafi e interruzioni di riga
I paragrafi <p> creano blocchi separati di testo con spaziatura verticale automatica. Per andare a capo all'interno dello stesso paragrafo (ad esempio per una poesia o un recapito) si usa il tag auto-chiuso <br>.
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Paragrafi</title></head>
<body>
<p>Questo è il primo paragrafo completo.</p>
<p>Questo è un secondo paragrafo separato.</p>
<p>Prima riga nello stesso paragrafo,<br>seconda riga dopo l'interruzione.</p>
</body></html>Formattazione del testo
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Formattazione</title></head>
<body>
<p><strong>Testo in grassetto</strong> e <em>testo in corsivo</em>.</p>
<p><mark>Testo evidenziato</mark> e <del>testo cancellato</del>.</p>
<p><code>codice inline</code> e <sub>testo basso</sub>, <sup>testo alto</sup>.</p>
</body></html>Testo in grassetto e testo in corsivo.
Testo evidenziato e testo cancellato.
codice inline e testo basso, testo alto.
✏️ Prova tu
Scrivi un titolo <h1>, un sottotitolo <h2> e un paragrafo che usi almeno <strong> e <em>.
📋 Riepilogo Lezione 3
- I titoli vanno da
<h1>a<h6> - I paragrafi si creano con
<p> <br>crea un'interruzione di riga<strong>= grassetto,<em>= corsivo- Usa
<mark>per evidenziare,<del>per cancellare
Link e Immagini
I link e le immagini sono due degli elementi più importanti del web. Senza link non ci sarebbe la navigazione, senza immagini il web sarebbe molto noioso!
I Link (Ancore)
Il tag <a> (anchor) crea collegamenti ad altre pagine o risorse.
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Link</title></head>
<body>
<!-- Link esterno -->
<a href="https://www.google.com">Vai a Google</a>
<!-- Link interno -->
<a href="contatti.html">Pagina Contatti</a>
<!-- Apri in nuova scheda -->
<a href="https://www.google.com" target="_blank">Google (nuova scheda)</a>
<!-- Ancora interna -->
<a href="#sezione2">Vai alla Sezione 2</a>
</body></html>Le Immagini
Il tag <img> inserisce un'immagine. Nota: è un tag auto-chiuso (non ha tag di chiusura).
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Immagini</title></head>
<body>
<!-- Immagine semplice -->
<img src="foto.jpg" alt="Descrizione della foto">
<!-- Con dimensioni -->
<img src="logo.png" alt="Logo del sito" width="200" height="100">
<!-- Con percorso assoluto -->
<img src="https://example.com/foto.jpg" alt="Foto da web">
</body></html>Descrive l'immagine per chi usa lettori schermo (accessibilità) e viene mostrata se l'immagine non si carica.
✏️ Prova tu
Crea una pagina con un link esterno (http:// o https://) e un'immagine <img> con attributo alt (puoi usare un URL pubblico come sorgente).
📋 Riepilogo Lezione 4
- I link si creano con
<a href="..."> target="_blank"apre il link in una nuova scheda- Le immagini usano
<img src="..." alt="..."> - L'attributo
altè fondamentale per l'accessibilità <img>è un tag auto-chiuso (senza</img>)
Liste
HTML supporta due tipi di liste: ordinate (con numeri) e non ordinate (con pallini).
Lista non ordinata (ul)
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Lista non ordinata</title></head>
<body>
<ul>
<li>Mela</li>
<li>Pera</li>
<li>Banana</li>
</ul>
</body></html>- Mela
- Pera
- Banana
Lista ordinata (ol)
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Lista ordinata</title></head>
<body>
<ol>
<li>Primo passo</li>
<li>Secondo passo</li>
<li>Terzo passo</li>
</ol>
</body></html>- Primo passo
- Secondo passo
- Terzo passo
Liste annidate e descrittive
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Liste Avanzate</title></head>
<body>
<!-- Lista annidata -->
<ul>
<li>Frutta<ul>
<li>Mela</li>
<li>Pera</li>
</ul></li>
<li>Verdura</li>
</ul>
<!-- Lista descrittiva -->
<dl>
<dt>HTML</dt>
<dd>Linguaggio di markup per pagine web</dd>
<dt>CSS</dt>
<dd>Linguaggio per lo stile delle pagine</dd>
</dl>
</body></html>✏️ Prova tu
Crea una lista non ordinata dei tuoi hobby e una lista ordinata di 3 cose da fare oggi.
📋 Riepilogo Lezione 5
<ul>= lista non ordinata (pallini)<ol>= lista ordinata (numeri)<li>= ogni elemento della lista- Le liste possono essere annidate
<dl>= lista descrittiva (termine + descrizione)
Tabelle
Le tabelle organizzano i dati in righe e colonne. Sono utili per presentare informazioni strutturate.
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Tabelle</title></head>
<body>
<table>
<thead>
<tr>
<th>Nome</th>
<th>Cognome</th>
<th>Età</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mario</td>
<td>Rossi</td>
<td>25</td>
</tr>
<tr>
<td>Luca</td>
<td>Bianchi</td>
<td>30</td>
</tr>
</tbody>
</table>
</body></html>| Nome | Cognome | Età |
|---|---|---|
| Mario | Rossi | 25 |
| Luca | Bianchi | 30 |
<table> → contenitore principale<thead> → intestazione<tbody> → corpo con i dati<tr> → riga<th> → cella di intestazione (grassetto automatico)<td> → cella dati✏️ Prova tu
Crea una tabella con <thead> e <tbody>, almeno 2 colonne e 2 righe di dati (es. materie e voti).
📋 Riepilogo Lezione 6
<table>è il contenitore della tabella<tr>crea una riga<th>è una cella di intestazione (grassetto)<td>è una cella dati normale- Usa
<thead>e<tbody>per organizzare
Formulari HTML
I formulari permettono agli utenti di inviare dati al server. Sono fondamentali per login, contatti, ricerca, ecc.
Struttura base di un form
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Form</title></head>
<body>
<form action="/invia" method="POST">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Inserisci il tuo nome">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="messaggio">Messaggio:</label>
<textarea id="messaggio" name="messaggio" rows="5"></textarea>
<button type="submit">Invia</button>
</form>
</body></html>Tipi di input
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Input</title></head>
<body>
<!-- Testo -->
<input type="text" name="nome">
<!-- Password -->
<input type="password" name="pwd">
<!-- Email -->
<input type="email" name="email">
<!-- Numero -->
<input type="number" name="eta" min="0" max="120">
<!-- Checkbox -->
<input type="checkbox" name="accetto" id="accetto">
<label for="accetto">Accetto i termini</label>
<!-- Radio con etichette collegate -->
<label><input type="radio" name="genere" value="M"> Maschio</label>
<label><input type="radio" name="genere" value="F"> Femmina</label>
<!-- Select (menu a tendina) -->
<select name="citta">
<option value="roma">Roma</option>
<option value="milano">Milano</option>
</select>
<!-- Bottone -->
<button type="submit">Invia</button>
</body></html>✏️ Prova tu
Crea un piccolo form di contatto con almeno una <label>, un input nome (type="text"), un input email (type="email") e un bottone di invio.
📋 Riepilogo Lezione 7
<form>contiene tutti i campiactionspecifica dove inviare i datimethodspecifica il metodo (GET/POST)<input>crea campi di input (text, email, password...)<textarea>crea un campo testo multi-linea<label>etichetta associata al campo (accessibilità)
Semantic HTML
I tag semantici danno un significato al contenuto, non solo un aspetto visivo. Migliorano l'accessibilità, il SEO e la manutenibilità del codice.
Perché usare tag semantici?
- Accessibilità: I lettori schermo comprendono meglio la struttura
- SEO: I motori di ricerca capiscono meglio il contenuto
- Manutenibilità: Il codice è più leggibile e ordinato
Tag semantici principali
<header>Intestazione della pagina o sezione</header>
<nav>Navigazione</nav>
<main>Contenuto principale (uno solo per pagina)</main>
<article>Contenuto autonomo (articolo, post, ecc.)</article>
<section>Sezione tematica</section>
<aside>Contenuto laterale (sidebar)</aside>
<footer>Piè di pagina</footer>Esempio completo
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Sito Semantico</title></head>
<body>
<header>
<h1>Il Mio Blog</h1>
<nav>
<a href="#">Home</a> |
<a href="#">Articoli</a> |
<a href="#">Contatti</a>
</nav>
</header>
<main>
<article>
<h2>Titolo Articolo</h2>
<p>Contenuto dell'articolo...</p>
</article>
<aside>
<h3>Articoli Correlati</h3>
<ul>
<li>Altro articolo 1</li>
<li>Altro articolo 2</li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Il Mio Blog</p>
</footer>
</body></html>✏️ Prova tu
Costruisci la struttura di una pagina con <header>, <main> (con un <article> dentro) e <footer>. Aggiungi un po' di testo visibile.
📋 Riepilogo Lezione 8
<header>= intestazione<nav>= navigazione<main>= contenuto principale<article>= contenuto autonomo (articolo, post, ecc.)<section>= sezione tematica<aside>= contenuto laterale (sidebar)<footer>= piè di pagina
CSS di Base
CSS (Cascading Style Sheets) è il linguaggio che dà stile alle pagine HTML. Con CSS puoi cambiare colori, font, layout e molto altro.
Come collegare CSS ad HTML
<!-- Metodo 1: File esterno (consigliato) -->
<link rel="stylesheet" href="style.css">
<!-- Metodo 2: Dentro il tag style -->
<style>
body { background-color: #f0f0f0; }
</style>
<!-- Metodo 3: Inline (sconsigliato) -->
<p style="color: red;">Testo rosso</p>Selettori e proprietà fondamentali
/* Selettore per elemento */
h1 {
color: #2563eb;
font-size: 2rem;
text-align: center;
}
/* Selettore per classe */
.card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Selettore per ID */
#header {
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: white;
padding: 20px;
}<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>CSS Esempio</title>
<style>
/* Selettore per elemento */
h1 {
color: #2563eb;
font-size: 2rem;
text-align: center;
}
/* Selettore per classe */
.card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Selettore per ID */
#header {
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="card">
<h1>Titolo con CSS!</h1>
<p>Questo contenuto è stilizzato con CSS.</p>
</div>
</body></html>Box Model
Ogni elemento HTML è un "contenitore" con: contenuto, padding (spazio interno), border (bordo) e margin (spazio esterno).
✏️ Prova tu
Nell'<head> aggiungi un blocco <style> e nel <body> un titolo e un paragrafo da stilizzare (colore, allineamento, padding).
📋 Riepilogo Lezione 9
- CSS dà stile alle pagine HTML
- Il metodo file esterno (
<link>) è il più consigliato - I selettori targettizzano gli elementi da stilizzare
- Ogni elemento ha il Box Model: content, padding, border, margin
- Le classi (.) servono per riutilizzare stili
- Gli ID (#) servono per elementi unici
Progetto Finale: Crea il Tuo Sito!
Congratulazioni! Hai completato tutte le lezioni. Ora è il momento di mettere in pratica tutto ciò che hai imparato creando un sito web completo.
🎯 Compito: Crea una pagina personale
Crea un file index.html che includa:
- Struttura HTML5 completa con DOCTYPE
- Tag semantici (header, nav, main, footer)
- Almeno 3 titoli di livelli diversi
- Paragrafi con testo formattato (grassetto, corsivo)
- Una lista di interessi o hobby
- Un link a un sito esterno
- Un'immagine
- Un piccolo form di contatto
- Stili CSS di base nel
<head>(tag<style>)
✏️ Prova tu
Usa la checklist qui sopra: costruisci da zero la pagina personale. Nell'editor trovi solo lo scheletro HTML (bianco): tutto il resto lo scrivi tu.
• Usa i tag semantici visti nella Lezione 8
• Metti il CSS in un
<style> dentro l'<head> (zona blu sopra </head>)• Aggiungi un'immagine reale con
<img> e alt• Personalizza i colori e i font
• Rendi il sito responsive con viewport
• Prova a creare una seconda pagina e collegala con i link
🚀 Cosa fare dopo?
- Impara CSS avanzato (Flexbox, Grid, animazioni)
- Scopri JavaScript per rendere le pagine interattive
- Studia Responsive Design per adattare i siti ai cellulari
- Esplora framework come Bootstrap o Tailwind CSS
- Pratica con progetti reali e crea un tuo portfolio!
📋 Riepilogo Completo del Manuale
- Lezione 1: Cos'è HTML e come funziona
- Lezione 2: Struttura base (DOCTYPE, head, body)
- Lezione 3: Testo, titoli e formattazione
- Lezione 4: Link e immagini
- Lezione 5: Liste ordinate e non ordinate
- Lezione 6: Tabelle per dati strutturati
- Lezione 7: Formulari per raccogliere dati
- Lezione 8: Semantic HTML per accessibilità
- Lezione 9: CSS per dare stile alle pagine
- Lezione 10: Progetto finale - applica tutto!