2 of 12

Cos’è l’HTML?

HTML = HyperText Markup Language�
È il linguaggio usato per creare e strutturare pagine web.�
Serve a dire al browser cosa mostrare e come mostrarlo (testi, immagini, link).�
Si scrive con tag (comandi) racchiusi tra parentesi angolari < >

3 of 12

Come funziona un TAG?

Di solito, un tag ha due parti:

Tag di apertura: indica l’inizio di un elemento. <p>
Tag di chiusura: indica la fine di quell’elemento.</p>

Esempio: <p>Questo è un paragrafo.</p>

Alcuni tag possono avere attributi, cioè informazioni in più. Li vediamo più avanti.

Esempio: <img src="foto.jpg" alt="Descrizione">

4 of 12

Come si scrive un testo?

Ti servono questi tag:

<h1>Questo è un titolo grande</h1>

<h2>Questo è un sottotitolo</h2>

<p>Questo è un paragrafo di testo.</p>

Scegli la grandezza del titolo in base all’importanza: �da <h1> (il più grande) a <h6> (il più piccolo).

5 of 12

Qualche tag utile

<strong>grassetto</strong>

<em>corsivo</em>

<br> = break, andare a capo

6 of 12

Inserire un’immagine

src = indirizzo del file immagine
alt = testo alternativo (è una descrizione breve dell’immagine, migliora l’accessibilità)�
Attenzione: l’immagine va caricata nella cartella img

7 of 12

Creare un link a un sito esterno

<a href="https://www.nomedelsito.com">Visita il sito</a>

<a> = link
href = indirizzo della pagina da aprire�
Attenzione: �copia per intero l’url (https://…)�Il testo Visita il sito è quello che apparirà sulla pagina con link. Puoi sostituirlo con un altro testo (es. Clicca qui)

8 of 12

Creare un link a un pdf

<a href="nomedocumento.pdf" target="_blank">Apri il PDF</a>��

target="_blank" = apre il PDF in una nuova scheda.
Il testo Apri il PDF è il testo che appare sulla pagina e che puoi modificare

9 of 12

Creare un link a un pdf

<a href="nomedocumento.pdf" target="_blank">Apri il PDF</a>��

target="_blank" = apre il PDF in una nuova scheda.
Il testo Apri il PDF è il testo che appare sulla pagina e che puoi modificare

10 of 12

Consigli pratici

Controlla sempre che i nomi dei file siano corretti: controlla maiuscole e minuscole, non usare parole accentate o caratteri speciali�
Metti le immagini e i PDF nella stessa cartella della pagina HTML (o indica il percorso giusto).�
Puoi modificare l’HTML con un editor di testo semplice (Blocco Note, VS Code).

11 of 12

PROVA TU!

1. Vai su CodePen.io�2. Clicca su Create → New Pen�3. Incolla il codice HTML nel riquadro "HTML"

<h1>Il mio titolo</h1>

<p>Questo è un paragrafo di prova. Scrivi qui il tuo testo!</p>

<br>

<a href="https://esempio.com" target="_blank">Vai a esempio.com</a>��

4. Copia il CSS nel riquadro "CSS" (foglio di stile)�body {

background-color: #f0f8ff;

font-family: Arial, sans-serif; }

h1 { color: #333; }

img { border: 2px solid #333; }

�5. L’anteprima ti appare automaticamente: basta scrivere o modificare i testi, cambiare colori, aggiungere immagini

1 of 12