AlessandroSimone.it
HTML CSS JAVASCRIPT SQL MYSQL PYTHON JAVA PHP C C++ C# PACKET TRACER CYBERSECURITY REACTTYPESCRIPTNODE.JSGIT & GITHUBDATA SCIENCEBOOTSTRAPGOKOTLINJQUERYDJANGOVUEANGULAR MONGODB POSTGRESQL SASS NUMPY PANDAS SCIPY DSA RUST SWIFT BASHXMLW3.CSSANGULARJSAIAWSPROGRAMMAZIONEEXCEL WORD POWERPOINT
Corso gratuito · Interattivo

Corso di HTML in italiano

Tutti gli argomenti, dal primo tag alle API avanzate. Ogni esempio ha il codice colorato e il pulsante “Provalo tu” per scriverlo e vedere subito il risultato.

Introduzione a HTML

HTML (HyperText Markup Language) è il linguaggio con cui sono costruite tutte le pagine web. Non è un linguaggio di programmazione: è un linguaggio di marcatura, cioè serve a “etichettare” le parti di un documento dicendo al browser cosa è un titolo, cosa un paragrafo, cosa un'immagine.

💡 In breve: l'HTML descrive la struttura, il CSS l'aspetto (colori, posizioni) e JavaScript il comportamento (interattività).
Esempio

Editor HTML

Per scrivere HTML basta un editor di testo. I più usati sono Visual Studio Code (gratuito), Notepad++ o Sublime Text. Puoi anche usare l'editor “Provalo tu” qui sul sito senza installare nulla.

Un file HTML si salva con estensione .html e si apre con un qualsiasi browser (Chrome, Firefox, Edge).

⭐ Inizia subito: clicca “Provalo tu” su un esempio, modifica il codice e guarda il risultato a destra.

HTML di base

Ogni pagina segue sempre lo stesso schema: dichiarazione del tipo di documento, elemento <html>, una parte <head> (informazioni nascoste) e una parte <body> (il contenuto visibile).

Esempio

Elementi e tag

Un elemento è composto da un tag di apertura, un contenuto e un tag di chiusura: <p> contenuto </p>. Alcuni elementi sono “vuoti” e si chiudono da soli, come <br> e <hr>.

Esempio

Gli attributi

Gli attributi aggiungono informazioni a un elemento e si scrivono nel tag di apertura, nella forma nome="valore".

Esempio

I titoli

I titoli vanno da <h1> (il più importante) a <h6>. Usa <h1> una sola volta per pagina.

Esempio
⭐ I titoli aiutano anche Google a capire di cosa parla la pagina: usali in ordine logico.

I paragrafi

Il testo normale va dentro <p>. Il browser ignora spazi e a capo extra: per andare a capo serve <br>.

Esempio

Gli stili (attributo style)

L'attributo style permette di dare un aspetto a un elemento: colore, sfondo, dimensione del testo, allineamento.

Esempio

Formattare il testo

Tag utili per dare significato al testo:

  • <strong> importante (grassetto), <b> solo grassetto
  • <em> enfasi (corsivo), <i> solo corsivo
  • <mark> evidenziato, <small> piccolo, <del> cancellato, <ins> inserito
  • <sub> pedice, <sup> apice
Esempio

Citazioni

<blockquote> per citazioni lunghe, <q> per citazioni brevi in linea, <abbr> per le abbreviazioni.

Esempio

I commenti

I commenti sono note che il browser ignora. Si scrivono tra <!-- e -->.

Esempio

I colori

I colori si indicano per nome (red), in esadecimale (#ff0000), in RGB (rgb(255,0,0)) o RGBA (con trasparenza).

Esempio

HTML e CSS

Il CSS definisce l'aspetto. Si può scrivere in tre modi: inline (attributo style), interno (dentro <style> nell'head) o esterno (file .css collegato).

Esempio — CSS interno

Le immagini

Si inseriscono con <img>: l'attributo src indica l'indirizzo e alt il testo alternativo.

Esempio
♿ Accessibilità: l'attributo alt viene letto dai software per non vedenti e mostrato se l'immagine non carica. Mettilo sempre!

La favicon

La favicon è la piccola icona che appare nella scheda del browser. Si aggiunge nell'<head>.

Esempio

Il titolo della pagina

L'elemento <title> nell'head definisce il titolo mostrato nella scheda del browser e nei risultati di Google. È importante per la SEO.

Esempio

Le tabelle

Si costruiscono con <table>. Ogni riga è <tr>, le intestazioni <th> e le celle <td>.

Esempio

Le liste

Liste non ordinate con <ul> (puntini), ordinate con <ol> (numeri). Ogni voce è <li>. Esistono anche le liste di definizione con <dl>.

Esempio

Elementi block e inline

Gli elementi block (come <div>, <p>, <h1>) occupano tutta la larghezza e vanno a capo. Gli elementi inline (come <span>, <a>, <strong>) occupano solo lo spazio necessario e restano nella riga.

Esempio

Div e contenitori

Il <div> è un contenitore generico per raggruppare elementi, soprattutto per dargli uno stile. Lo <span> fa lo stesso ma in linea.

Esempio

Le classi

L'attributo class assegna un nome a uno o più elementi, per applicargli lo stesso stile con il CSS. Più elementi possono avere la stessa classe.

Esempio

L'attributo id

L'id dà un nome unico a un elemento (uno solo per pagina). Si usa per il CSS, per i link interni e per JavaScript. Nel CSS si seleziona con il cancelletto #.

Esempio

Gli iframe

Un <iframe> incorpora un'altra pagina dentro la tua (es. una mappa o un video).

Esempio

HTML e JavaScript

JavaScript rende la pagina interattiva. Il codice va dentro l'elemento <script>. Qui un pulsante che cambia un testo quando lo clicchi.

Esempio

I percorsi dei file

Il percorso indica dove si trova un file. Può essere relativo (rispetto alla pagina) o assoluto (indirizzo completo).

  • img/foto.jpg → cartella img nella stessa posizione
  • ../foto.jpg → cartella superiore
  • https://sito.it/foto.jpg → percorso assoluto

Il layout della pagina

Una pagina si organizza con elementi semantici: <header> (testata), <nav> (menu), <main> (contenuto), <aside> (barra laterale), <footer> (piè di pagina).

Esempio

HTML responsive

Una pagina responsive si adatta a schermi di ogni dimensione. La regola base è inserire il meta viewport nell'head.

Esempio
⭐ Usa misure flessibili (percentuali, max-width) invece di larghezze fisse in pixel.

Codice nel testo

Per mostrare codice nel testo: <code> (codice in linea), <pre> (testo preformattato, mantiene spazi e a capo), <kbd> (tasti), <samp> (output).

Esempio

HTML semantico

Gli elementi semantici descrivono il significato del contenuto, non solo l'aspetto. Aiutano accessibilità e SEO: <article>, <section>, <figure>, <figcaption>, <time>.

Esempio

Le entità HTML

Alcuni caratteri sono riservati (come < e >) e si scrivono con le entità: &lt; = <, &gt; = >, &amp; = &, &nbsp; = spazio unito, &copy; = ©.

Esempio

I simboli

Con le entità puoi mostrare simboli matematici, valute, frecce: &euro; = €, &deg; = °, &rarr; = →, &hearts; = ♥.

Esempio

Le emoji

Le emoji sono caratteri Unicode: basta che la pagina usi charset="UTF-8" e puoi scriverle direttamente nel testo.

Esempio

Il set di caratteri (charset)

Il charset dice al browser come interpretare i caratteri. Lo standard è UTF-8, che supporta tutte le lingue, le lettere accentate e le emoji. Va sempre messo all'inizio dell'head.

Esempio

La codifica degli URL

Gli URL non possono contenere spazi o caratteri speciali: vengono codificati. Lo spazio diventa %20 (o +), la lettera à diventa %C3%A0.

💡 Per questo nei link delle email scriviamo ?subject=Richiesta%20info: %20 è lo spazio codificato.

I moduli (form)

I form raccolgono dati dall'utente. L'elemento <form> contiene i campi; action indica dove inviare i dati e method come (GET o POST).

Esempio

Attributi del form

Principali attributi: action (URL di destinazione), method (get/post), target (dove aprire la risposta), autocomplete (on/off).

Esempio

Gli elementi del form

Oltre a <input> ci sono: <textarea> (testo lungo), <select> con <option> (menu a tendina), <label> (etichetta), <fieldset> (gruppo).

Esempio

I tipi di input

L'attributo type cambia il tipo di campo: text, email, password, number, date, checkbox, radio, color, range.

Esempio

Attributi degli input

Utili per guidare e validare l'inserimento: placeholder (testo guida), required (obbligatorio), value (valore iniziale), readonly, disabled, maxlength.

Esempio

Canvas (disegnare con il codice)

L'elemento <canvas> è un'area dove disegnare con JavaScript: linee, forme, colori.

Esempio

SVG (grafica vettoriale)

L'<svg> disegna forme vettoriali direttamente in HTML, senza JavaScript. Restano nitide a ogni dimensione.

Esempio

I media in HTML

HTML può mostrare audio e video senza programmi esterni, grazie agli elementi <video> e <audio>. I formati più usati sono MP4 (video) e MP3 (audio).

I video

L'elemento <video> con l'attributo controls mostra i comandi di riproduzione.

Esempio

L'audio

L'elemento <audio> funziona come il video: con controls appaiono i comandi.

Esempio

Incorporare YouTube

Per inserire un video di YouTube si usa un <iframe> con l'indirizzo “embed” del video.

Esempio

Geolocalizzazione

L'API di geolocalizzazione (JavaScript) permette di chiedere la posizione dell'utente — sempre con il suo permesso.

Esempio

Web Storage (memoria del browser)

Con localStorage il browser può salvare dati (come testo) anche dopo aver chiuso la pagina. Utile per ricordare preferenze.

Esempio

Drag and Drop (trascinare)

L'API Drag and Drop permette di trascinare elementi nella pagina. Si attiva con l'attributo draggable="true" e alcuni eventi JavaScript.

Esempio

HTML Web Workers

Un Web Worker è uno script JavaScript che viene eseguito in background, su un thread separato rispetto a quello della pagina. Significa che puoi fare calcoli pesanti senza “congelare” l'interfaccia: l'utente continua a cliccare, scorrere e digitare mentre il worker lavora.

💡 A cosa serve: elaborare grandi quantità di dati, calcoli matematici complessi, parsing di file di grandi dimensioni — tutto senza rendere la pagina lenta o bloccata.

Il worker comunica con la pagina tramite messaggi: si invia con postMessage() e si riceve con l'evento onmessage.

Esempio
⭐ Da ricordare: un Web Worker non può accedere al DOM (non può toccare la pagina direttamente). Restituisce i risultati alla pagina, che poi aggiorna l'HTML.

HTML SSE — Server-Sent Events

Gli Server-Sent Events (SSE) permettono a una pagina web di ricevere aggiornamenti automatici da un server in tempo reale, su un solo canale unidirezionale (dal server al browser). Sono perfetti per notifiche live, quotazioni di borsa, punteggi sportivi, feed di news.

SSEWebSocket
Una direzione (server → browser)Due direzioni (bidirezionale)
Solo testo, su HTTP normaleTesto e binario, protocollo dedicato
Riconnessione automaticaRiconnessione manuale
 
<script>
  const sorgente = new EventSource("/aggiornamenti");
  sorgente.onmessage = function(evento) {
    document.getElementById("notizie").innerHTML += evento.data + "<br>";
  };
</script>
💡 L'oggetto EventSource apre la connessione una sola volta e resta in ascolto: ogni volta che il server invia un dato, scatta onmessage.

Esempi HTML pronti da copiare

Il modo più rapido per imparare l'HTML è partire da esempi già funzionanti, copiarli e modificarli. Qui sotto trovi alcuni esempi tipici che ricorrono in qualsiasi sito web: puoi cliccare “Provalo tu” per aprirli nell'editor e vederli in azione.

Card prodotto
⭐ Ogni esempio di questo corso è un esercizio: aprilo, cambia testi, colori e immagini, e osserva come reagisce la pagina.

Editor HTML online (Provalo tu)

Non hai bisogno di installare nulla per scrivere HTML: su questo corso hai un editor HTML online gratuito integrato. Ogni esempio ha il pulsante “Provalo tu ▶” che apre l'editor a schermo intero, con il codice da una parte e l'anteprima live dall'altra.

  1. Clicca “Provalo tu” su un qualsiasi esempio.
  2. Modifica il codice HTML nell'area di sinistra.
  3. Premi ▶ Esegui e guarda subito il risultato a destra.
💡 Per usarlo localmente: salva il codice in un file .html e aprilo con il browser. Per progetti veri consiglio Visual Studio Code.

Quiz HTML — metti alla prova le tue conoscenze

Un breve quiz di HTML per autovalutarti. Leggi ogni domanda, pensa alla risposta e poi apri la soluzione per verificare.

1. Quale tag definisce il titolo più importante di una pagina?

✅ Il tag <h1>. I titoli vanno da <h1> (il più importante) a <h6>.

2. Come si crea un collegamento (link) a un altro sito?

✅ Con il tag <a href="https://...">testo</a>. L'attributo href indica la destinazione.

3. Quale attributo rende accessibile un'immagine se non si carica?

✅ L'attributo alt, che fornisce un testo alternativo descrittivo.

4. Qual è la differenza tra <div> e <span>?

✅ <div> è un contenitore a blocco (va a capo), <span> è in linea (resta nel flusso del testo).

5. Quale tag HTML5 rappresenta la barra di navigazione?

✅ Il tag semantico <nav>.

Esercizi HTML con soluzioni (per principianti)

Questi esercizi di HTML svolti sono pensati per chi parte da zero e vuole fare pratica con esempi reali. Per ognuno c'è la consegna e la soluzione commentata: prova prima da solo, poi confronta. Sono gli stessi esercizi di HTML che assegno ai miei studenti durante le ripetizioni a Roma.

Esercizio 1 — La tua prima pagina Base

Crea una pagina HTML completa con un titolo principale “Il mio diario” e un paragrafo di presentazione.

Mostra soluzione
<!DOCTYPE html>
<html lang="it">
<head><meta charset="UTF-8"><title>Diario</title></head>
<body>
  <h1>Il mio diario</h1>
  <p>Ciao, qui scrivo i miei pensieri.</p>
</body>
</html>

Esercizio 2 — Lista della spesa Base

Crea una lista non ordinata con almeno 4 prodotti della spesa.

Mostra soluzione
<ul>
  <li>Pane</li>
  <li>Latte</li>
  <li>Uova</li>
  <li>Mele</li>
</ul>

Esercizio 3 — Link e immagine Medio

Inserisci un'immagine cliccabile che, se premuta, porti al sito di Wikipedia. Aggiungi sempre il testo alternativo.

Mostra soluzione
<a href="https://it.wikipedia.org">
  <img src="logo.png" alt="Vai a Wikipedia" width="120">
</a>

Esercizio 4 — Tabella orario Medio

Crea una tabella con intestazione (Giorno, Materia) e due righe di dati.

Mostra soluzione
<table border="1">
  <tr><th>Giorno</th><th>Materia</th></tr>
  <tr><td>Lunedì</td><td>Informatica</td></tr>
  <tr><td>Martedì</td><td>Matematica</td></tr>
</table>

Esercizio 5 — Form di iscrizione Avanzato

Crea un form con i campi nome, email (obbligatoria) e un pulsante di invio. Usa le <label> per l'accessibilità.

Mostra soluzione
<form>
  <label>Nome: <input type="text" name="nome"></label><br>
  <label>Email: <input type="email" name="email" required></label><br>
  <button type="submit">Iscriviti</button>
</form>
⭐ Apri ogni soluzione nell'editor “Provalo tu” e modificala: cambiare il codice è il modo migliore per fissare i concetti.

Sfide HTML — esercizi avanzati senza soluzione

Le sfide HTML sono esercizi più impegnativi, senza soluzione data: l'obiettivo è ragionare e costruire da soli. Perfette per consolidare quello che hai imparato.

🎯 Sfida 1 — Pagina “Chi sono”

Crea una pagina personale con foto, un titolo, tre paragrafi di presentazione e una lista dei tuoi hobby. Usa solo tag semantici (header, main, section, footer).

🎯 Sfida 2 — Menù di un ristorante

Costruisci il menù di un ristorante con tre portate, ciascuna in una tabella con piatto, descrizione e prezzo.

🎯 Sfida 3 — Modulo di contatto completo

Realizza un form di contatto con nome, email, oggetto (menu a tendina) e messaggio, con tutti i campi obbligatori marcati correttamente.

Crea un sito web in HTML (progetto guidato)

Il progetto finale di ogni corso di HTML è costruire un sito web completo. Ecco la struttura minima di un sito multi-pagina che puoi realizzare con quello che hai imparato finora.

  • 📄 index.html — la home page con intestazione, presentazione e menu di navigazione.
  • 📄 chi-sono.html — una pagina “Chi sono” con testo e immagine.
  • 📄 contatti.html — una pagina con un form di contatto.
  • 🔗 Un menu di navigazione con <nav> e link tra le pagine, ripetuto su ogni pagina.
💡 Quando aggiungerai il CSS (nel corso CSS) questo stesso sito diventerà bello e professionale. La struttura HTML viene sempre prima dell'aspetto.

Programma del corso HTML (syllabus)

Questo è il programma completo del corso di HTML, l'elenco ordinato degli argomenti che affrontiamo dal principiante all'avanzato. È lo stesso syllabus che seguo in classe e nelle ripetizioni.

  1. Basi: struttura del documento, tag, elementi, attributi, titoli, paragrafi.
  2. Testo: formattazione, citazioni, commenti, colori, entità e simboli.
  3. Collegamenti e media: link, immagini, favicon, audio, video, YouTube.
  4. Strutture: tabelle, liste, div, classi, id, iframe, layout.
  5. Form: campi, tipi di input, attributi e validazione.
  6. HTML5 avanzato: semantica, canvas, SVG, API, Web Storage, Web Workers, SSE.
  7. Pratica: esempi, esercizi, sfide e progetto di un sito completo.

Piano di studio HTML (quanto tempo serve)

Quanto ci vuole per imparare l'HTML? Le basi si acquisiscono in pochi giorni. Ecco un piano di studio realistico per chi parte da zero studiando circa un'ora al giorno.

GiornoCosa studiare
1–2Struttura base, tag, titoli, paragrafi, formattazione del testo
3–4Link, immagini, liste, tabelle
5Div, classi, id, semantica HTML5
6Form e tipi di input
7Esercizi, sfide e primo sito completo
⭐ Studia poco ma ogni giorno e scrivi sempre codice: l'HTML si impara facendo, non solo leggendo.

Preparazione al colloquio — domande HTML frequenti

Le domande di HTML più frequenti ai colloqui per ruoli web (front-end, web developer junior). Utili anche per le interrogazioni a scuola.

Cos'è l'HTML semantico e perché è importante?

È l'uso di tag che descrivono il significato del contenuto (header, nav, article, footer). Migliora accessibilità e SEO.

Differenza tra elementi block e inline?

Gli elementi block (es. div, p) occupano tutta la larghezza e vanno a capo; gli inline (es. span, a) restano nel flusso del testo.

A cosa serve il DOCTYPE?

Dichiara al browser la versione di HTML usata. <!DOCTYPE html> attiva la modalità standard di HTML5.

Cosa rende un'immagine accessibile?

L'attributo alt con una descrizione testuale significativa.

Bootcamp HTML — percorso intensivo

Un bootcamp HTML è un percorso intensivo che condensa la teoria nella pratica continua. Se vuoi imparare velocemente, alterna ogni argomento con un esercizio immediato seguendo questo schema:

  • ✅ Studia un argomento (max 20 minuti).
  • ✅ Riproduci l'esempio nell'editor “Provalo tu”.
  • ✅ Svolgi un esercizio collegato senza guardare la soluzione.
  • ✅ Ripeti con l'argomento successivo.
💡 Vuoi un bootcamp HTML seguito di persona a Roma? Con le ripetizioni in presenza costruiamo insieme un percorso su misura, dal primo tag al sito completo.

Accessibilità HTML

L'accessibilità web (a11y) significa rendere le pagine usabili da tutti, incluse le persone con disabilità che usano screen reader o navigano con la tastiera. Un buon HTML è già metà del lavoro.

  • ♿ Usa sempre l'attributo alt nelle immagini.
  • ♿ Associa ogni campo del form a una <label>.
  • ♿ Usa i titoli in ordine (h1, poi h2…), senza saltarli.
  • ♿ Indica la lingua con <html lang="it">.
  • ♿ Usa tag semantici al posto di tanti div generici.
  • ♿ Aggiungi attributi ARIA solo quando l'HTML semantico non basta.
⭐ Una pagina accessibile è anche più indicizzata su Google: l'accessibilità aiuta la SEO.

Lista dei tag HTML più usati

Una lista di riferimento dei tag HTML più importanti, con il loro significato. Tienila come promemoria veloce.

TagA cosa serve
<h1>–<h6>Titoli, dal più importante al meno
<p>Paragrafo di testo
<a>Link / collegamento
<img>Immagine
<ul> <ol> <li>Liste puntate e numerate
<table>Tabella
<form> <input>Moduli e campi
<div> <span>Contenitori (blocco e in linea)
<header> <nav> <main> <footer>Tag semantici di struttura

Attributi HTML — riferimento

Gli attributi HTML più comuni che incontrerai praticamente su ogni elemento.

AttributoUso
hrefDestinazione di un link
srcSorgente di immagini, video, iframe
altTesto alternativo di un'immagine
width / heightLarghezza e altezza
typeTipo di campo input o pulsante
valueValore di un campo

Attributi globali HTML

Gli attributi globali si possono usare su qualsiasi elemento HTML.

AttributoUso
idIdentificatore unico dell'elemento
classUna o più classi per stile/script
styleStile CSS in linea
titleSuggerimento al passaggio del mouse
langLingua del contenuto
data-*Dati personalizzati
hiddenNasconde l'elemento

Supporto dei browser

Praticamente tutti i tag HTML5 sono supportati dai browser moderni (Chrome, Firefox, Edge, Safari, Opera). Quando usi funzioni recenti è buona pratica verificare la compatibilità su risorse come Can I Use.

💡 Per l'HTML di base non devi preoccuparti: titoli, paragrafi, link, immagini, liste, tabelle e form funzionano ovunque, anche su browser vecchi.

Eventi HTML

Gli attributi evento permettono di eseguire JavaScript quando l'utente interagisce con la pagina.

EventoQuando scatta
onclickAl clic su un elemento
onmouseoverAl passaggio del mouse sopra
onchangeQuando cambia il valore di un campo
onsubmitAll'invio di un form
onkeyupAl rilascio di un tasto

Colori HTML

I colori in HTML/CSS si indicano in tre modi: per nome, in esadecimale o in RGB.

ModoEsempio (rosso)
Nomered
Esadecimale#FF0000
RGBrgb(255, 0, 0)
RGBA (con trasparenza)rgba(255, 0, 0, 0.5)

Canvas — riferimento

Il tag <canvas> è un'area di disegno controllata da JavaScript: si usa per grafica, grafici e piccoli giochi. Vedi anche la sezione Canvas più sopra.

MetodoDisegna
fillRect(x,y,w,h)Un rettangolo pieno
arc()Un cerchio / arco
lineTo()Una linea
fillText()Del testo

Audio e Video — riferimento

I tag <audio> e <video> incorporano file multimediali con i controlli nativi del browser. Vedi le sezioni Video e Audio.

AttributoEffetto
controlsMostra i comandi play/pausa/volume
autoplayAvvia automaticamente
loopRiproduce in continuo
mutedParte senza audio
posterImmagine di anteprima del video

Doctype HTML

Il DOCTYPE è la prima riga di ogni pagina e dice al browser quale versione di HTML usare. In HTML5 è semplicissimo:

<!DOCTYPE html>
💡 Senza DOCTYPE corretto il browser può attivare la “quirks mode”, una modalità di compatibilità che fa rendere la pagina in modo imprevedibile. Mettilo sempre come prima riga.

Set di caratteri (charset)

Il set di caratteri definisce come vengono codificate le lettere. Lo standard moderno è UTF-8, che supporta tutte le lingue ed emoji. Si dichiara nel <head>:

<meta charset="UTF-8">
⭐ Se vedi caratteri strani al posto delle lettere accentate (à, è, ì), quasi sempre manca <meta charset="UTF-8">.

URL Encode

La codifica URL sostituisce i caratteri non ammessi negli indirizzi web con sequenze sicure. Lo spazio diventa %20, ad esempio.

CarattereCodifica
spazio%20
&%26
?%3F
=%3D
à%C3%A0

Codici lingua HTML

L'attributo lang usa codici standard (ISO 639) per indicare la lingua di una pagina.

LinguaCodice
Italianoit
Ingleseen
Francesefr
Spagnoloes
Tedescode

Messaggi HTTP

Quando apri una pagina, il browser e il server si scambiano messaggi HTTP: una richiesta e una risposta. La risposta contiene un codice di stato che dice com'è andata.

CodiceSignificato
200OK — tutto a posto
301Spostato in modo permanente
404Pagina non trovata
403Accesso negato
500Errore interno del server

Metodi HTTP

I metodi HTTP indicano che tipo di operazione vuole fare il browser. I form HTML usano soprattutto GET e POST.

MetodoUso
GETChiede dati (i parametri vanno nell'URL)
POSTInvia dati (es. un form di registrazione)
PUTAggiorna una risorsa
DELETEElimina una risorsa

Convertitore PX ↔ EM

In HTML/CSS le dimensioni si esprimono in px (pixel, fissi) o in em/rem (relativi). La regola base, con dimensione di riferimento 16px:

PixelEM (base 16px)
8px0.5em
16px1em
24px1.5em
32px2em
💡 Formula: em = px ÷ 16. Le unità relative (em/rem) rendono il sito più accessibile perché si adattano alle preferenze dell'utente.

Scorciatoie da tastiera utili

Alcune scorciatoie da tastiera che velocizzano la scrittura di HTML negli editor come Visual Studio Code.

ScorciatoiaAzione
! + InvioGenera la struttura base di una pagina (Emmet)
Ctrl + /Commenta / scommenta una riga
Ctrl + DSeleziona l'occorrenza successiva
Alt + ↑ / ↓Sposta la riga su / giù
Ctrl + SSalva il file

Certificato HTML

Vuoi una certificazione di HTML da mostrare nel CV? Al termine di questo corso hai le competenze per affrontare i test di certificazione online più diffusi e, soprattutto, per costruire pagine web reali.

Se sei un mio studente, posso rilasciarti un attestato di partecipazione al percorso di HTML svolto durante le ripetizioni in presenza a Roma, con l'elenco degli argomenti affrontati e dei progetti realizzati.

⭐ Il vero “certificato” è il tuo portfolio: un sito che hai costruito da solo vale più di qualsiasi attestato.

Conclusione

Complimenti! 🎉 Hai completato il corso di HTML completo e gratuito in italiano: dalla struttura di base ai tag semantici, dai form ai media, dalle API HTML5 (Web Storage, Web Workers, SSE) fino a esercizi, sfide, riferimenti e accessibilità. Ora conosci i mattoni con cui è costruita ogni pagina web.

Il modo migliore per imparare l'HTML è fare pratica ogni giorno: apri gli esempi, modificali, sbaglia e riprova. Rifai gli esercizi HTML, affronta le sfide e prova a costruire il tuo primo sito web.

E ora?

Il prossimo passo è dare stile alle tue pagine con il CSS e renderle interattive con JavaScript. Se vuoi un percorso guidato passo passo o aiuto per una verifica, posso seguirti con le ripetizioni di informatica in presenza a Roma.

🎯 La tua sfida finale

Ricrea la struttura di una pagina che conosci (un social, un giornale online) usando solo HTML semantico: header, nav, main, article e footer. Niente CSS per ora — concentrati sulla struttura.

🎨 Continua con il corso CSS 🚀 Esplora gli altri corsi 📅 Prenota una lezione
✏️ Provalo tu — scrivi e guarda il risultato
Anteprima