Introduzione a HTML

A cosa serve HTML

Ogni pagina web ha bisogno di una struttura. Deve distinguere un titolo da un paragrafo, indicare dove si trova un’immagine e riconoscere quali parole formano un collegamento.

HTML è il linguaggio che descrive questa struttura. Il suo nome significa HyperText Markup Language, cioè linguaggio di marcatura per ipertesti. Un linguaggio di marcatura usa etichette per assegnare un ruolo ai contenuti. Per ora ti basta pensare a HTML come a un insieme di etichette che dice al browser: “questo è un titolo”, “questo è un paragrafo”, “questa è un’immagine”.

Ecco una pagina molto piccola:

<h1>La mia prima pagina</h1>
<p>Sto imparando HTML.</p>

<h1> indica il titolo principale. <p> indica un paragrafo. I pezzi racchiusi tra < e > si chiamano tag: non vengono mostrati come testo, ma aiutano il browser a capire la pagina.

HTML, CSS e JavaScript

I siti usano spesso tre linguaggi che hanno compiti diversi:

• HTML descrive contenuti e struttura;
• CSS decide l’aspetto, per esempio colori, spazi e dimensioni;
• JavaScript aggiunge comportamenti e interazioni.

Immagina una casa: HTML rappresenta stanze, porte e finestre; CSS sceglie colori e arredamento; JavaScript può far accendere una luce quando premi un interruttore.

In questa guida ci concentriamo su HTML. Una struttura chiara viene prima dello stile e delle animazioni.

Come si scrive una pagina

HTML si scrive in normali file di testo con estensione .html. Non serve un programma costoso: bastano un editor di testo e un browser.

Il browser, come Chrome, Firefox o Safari, apre il file e ne mostra il risultato. Quando modifichi il codice, salvi e ricarichi la pagina per vedere il cambiamento.

Cosa imparerai

Partiremo dal primo file e dalla struttura essenziale di un documento. Poi vedremo:

• elementi, tag e attributi;
• titoli, paragrafi, liste e tabelle;
• link, immagini, audio e video;
• sezioni semantiche e form;
• accessibilità, controllo degli errori e buone pratiche.

Alla fine saprai costruire pagine HTML ordinate, comprensibili e utilizzabili anche da persone che navigano in modi diversi.

Come esercitarti

Non limitarti a leggere gli esempi. Copiali in un file, aprili nel browser e cambia una cosa alla volta. Per esempio, sostituisci il titolo o aggiungi un secondo paragrafo. Così puoi collegare subito ogni riga di codice al risultato che produce.

Quando qualcosa non appare come previsto, non significa che non sei portato. Quasi sempre manca un carattere, un tag non è chiuso o il file non è stato salvato. Impareremo anche a trovare questi piccoli errori.