Sommario
Ringraziamenti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Introduzione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Che cos'è HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Comprendere i tag HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Comprendere CSS (Cascading Style Sheet). . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Perché imparare HTML con Blocco note?. . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Scelta della versione di HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xx
Perché utilizzare HTML5? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Requisiti minimi di sistema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxii
Utilizzo dei file di esercitazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii
Assistenza per questo libro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxv
Convenzioni utilizzate in questo libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvi
E adesso? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxvii
Parte 1
1
Nozioni di base su HTML
Modificare e visualizzare file HTML. . . . . . . . . . . . . . . . . 3
Aprire una pagina Web in Blocco note . . . . . . . .
Aggiungere la posizione dei file di dati ai Preferiti
Aprire un file da Esplora risorse . . . . . . . . . . .
Anteprima di una pagina Web in un browser Web . .
Eseguire, salvare e visualizzare le modifiche. . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.3
.5
.6
.7
10
11
vii
viii Sommario
2
Impostare la struttura dei documenti . . . . . . . . . . . . . . 13
3
Formattare il testo con i tag. . . . . . . . . . . . . . . . . . . . 25
4
Utilizzare elenchi e sfondi . . . . . . . . . . . . . . . . . . . . . 47
5
Specificare il tipo di documento . . . . . . .
Creazione delle sezioni HTML Head e Body.
Creazione di paragrafi e interruzioni di riga.
Specificare il titolo della pagina e i Metatag
Pubblicazione di un file su un server . . . .
Punti chiave . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Creare intestazioni . . . . . . . . . . . . . . . . . . . . . . . . . . .
Applicare grassetto e corsivo. . . . . . . . . . . . . . . . . . . . . .
Applicare apice e pedice . . . . . . . . . . . . . . . . . . . . . . . .
Utilizzare testo preformattato e non proporzionale . . . . . . . . .
Formattare citazioni . . . . . . . . . . . . . . . . . . . . . . . . . .
Configurare le impostazioni di visualizzazione in Internet Explorer
Punti chiave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Creare elenchi puntati e numerati . . . . . . . . . .
Elenchi nidificati . . . . . . . . . . . . . . . . . .
Cambiare il carattere del numero o del simbolo
di spunta . . . . . . . . . . . . . . . . . . . . . .
Specificare l’inizio di un elenco numerato . . . .
Creare elenchi di definizione . . . . . . . . . . . . .
Inserire caratteri speciali . . . . . . . . . . . . . . .
Inserire righe orizzontali . . . . . . . . . . . . . . .
Scegliere i colori di sfondo e del testo. . . . . . . .
Specificare i colori . . . . . . . . . . . . . . . . .
Applicare un colore di sfondo. . . . . . . . . . .
Applicare un colore al testo . . . . . . . . . . . .
Definire il file immagine di sfondo. . . . . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
14
15
17
19
22
23
26
29
30
32
37
39
45
. . . . . . . . . . 48
. . . . . . . . . . 49
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
50
51
54
55
57
60
60
61
61
62
65
Creare collegamenti ipertestuali e punti di ancoraggio . . . . . 67
Creare un collegamento ipertestuale a una pagina Web.
Utilizzo di percorsi parziali e nomi di file . . . . . . . .
Utilizzo di percorsi relativi e assoluti . . . . . . . . . .
Impostare la finestra di destinazione . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
68
68
69
70
Sommario
Creare un collegamento ipertestuale a un indirizzo
di posta elettronica . . . . . . . . . . . . . . . . . . .
Creare collegamenti ipertestuali su punti
di ancoraggio . . . . . . . . . . . . . . . . . . . . . .
Creare collegamenti ipertestuali verso altri contenuti
Punti chiave . . . . . . . . . . . . . . . . . . . . . . .
Parte 2
ix
. . . . . . . . . 71
. . . . . . . . . 75
. . . . . . . . . 78
. . . . . . . . . 81
Fogli stile e immagini
6
Introduzione ai fogli stile . . . . . . . . . . . . . . . . . . . . . 85
7
Formattare il testo con i fogli stile . . . . . . . . . . . . . . . 103
8
Formattare i paragrafi con i fogli stile . . . . . . . . . . . . . 125
Comprendere gli stili . . . . . . . . . . . . .
Creare le regole degli stili . . . . . . . . . .
Creare stili per tag nidificati . . . . . . . . .
Creare classi e ID per applicare gli stili. . . .
Applicare gli stili a collegamenti ipertestuali
Creare e collegare fogli stile esterni . . . . .
Punti chiave . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
Impostare una famiglia di caratteri . . . . . .
Impostare dimensione e colore del carattere .
Applicare grassetto e corsivo. . . . . . . . . .
Applicare barrato e sottolineato . . . . . . . .
Creare span inline . . . . . . . . . . . . . . . .
Sistemazione della spaziatura tra le lettere . .
Punti chiave . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rientrare i paragrafi . . . . . . . . . . . . . . . . . . . . . . . . . .
Applicare un bordo a un paragrafo . . . . . . . . . . . . . . . . .
Specificare lo stile di un bordo . . . . . . . . . . . . . . . . . .
Impostare il padding di un bordo . . . . . . . . . . . . . . . .
Specificare lo spessore e il colore di un bordo . . . . . . . . . .
Formattare lati di un bordo singolarmente . . . . . . . . . . .
Impostare tutti gli attributi di un bordo contemporaneamente
Specificare l’allineamento orizzontale del paragrafo . . . . . . . .
Specificare lo spazio verticale tra i paragrafi . . . . . . . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. 86
. 87
. 90
. 93
. 96
. 98
100
104
107
111
115
117
119
123
126
130
130
131
131
132
133
135
137
139
x Sommario
9
Parte 3
Visualizzare le immagini . . . . . . . . . . . . . . . . . . . . . 141
Selezionare un formato grafico . . . . . . . . .
Preparazione delle immagini per l’uso sul Web .
Inserire immagini . . . . . . . . . . . . . . . . .
Disporre gli elementi in una pagina . . . . . . .
Controllare dimensione/padding dell’immagine
Creare un collegamento ipertestuale grafico . .
Usare le miniature (thumbnail) delle immagini .
Includere testo alternativo per le immagini . . .
Aggiungere didascalie alle figure . . . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
142
143
144
148
150
154
155
158
158
161
Layout di pagina e navigazione
10 Creare supporti alla navigazione . . . . . . . . . . . . . . . . 165
Pianificare l’organizzazione del sito . . .
Creare una barra di navigazione testuale
Creare una barra di navigazione grafica.
Mappare diversi punti di un’immagine .
Reindirizzare a un altro URL . . . . . . .
Punti chiave . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
166
167
171
173
180
183
11 Creare layout basati su Division . . . . . . . . . . . . . . . . . 185
Comprendere i tag semantici in HTML5. . .
Pensare secondo Division . . . . . . . . . .
Creare Division . . . . . . . . . . . . . . . .
Creare un layout semantico in HTML5. . . .
Posizionare Division. . . . . . . . . . . . . .
Spostare a destra o a sinistra una division
Posizionare Division in una pagina . . . .
Formattare le Division . . . . . . . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
186
187
188
190
192
192
193
197
203
12 Creare tabelle. . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Creare una tabella semplice . . . . . . .
Specificare la dimensione di una tabella
Specificare la larghezza di una colonna .
Unire celle di una tabella . . . . . . . . .
Usare le tabelle per il layout di pagina .
Punti chiave . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
207
211
216
220
224
229
Sommario
xi
13 Formattare tabelle . . . . . . . . . . . . . . . . . . . . . . . . 231
Applicare bordi alla tabella. . . . . . . . . . . . . . . . . . . . .
Applicare bordi usando gli attributi . . . . . . . . . . . . . .
Applicare bordi usando gli stili . . . . . . . . . . . . . . . . .
Applicare riempimenti di sfondo e del testo . . . . . . . . . . .
Modificare il padding, la spaziatura e l’allineamento di una cella
Impostare il padding di una cella . . . . . . . . . . . . . . . .
Impostare la spaziatura di una cella . . . . . . . . . . . . . .
Impostare l’allineamento orizzontale e verticale. . . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
232
233
235
240
245
246
246
247
249
14 Creare form utente. . . . . . . . . . . . . . . . . . . . . . . . 251
Creare un form . . . . . . . . . . . . . . . . . . . . . .
Creare una casella di testo . . . . . . . . . . . . . .
Campi speciali per indirizzi Web e di posta
elettronica . . . . . . . . . . . . . . . . . . . . . . .
Creare una casella di testo multiriga . . . . . . . . .
Creare un pulsante Submit (Invia) o Clear (Cancella)
Aggiungere il testo predefinito o segnaposto . . . .
Creare caselle di controllo e pulsanti di opzione . . . .
Creare elenchi . . . . . . . . . . . . . . . . . . . . . . .
Altri tipi di input in HTML5 . . . . . . . . . . . . . . . .
Comprendere CGI e altri strumenti avanzati . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . 252
. . . . . . . 253
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
254
254
255
256
259
262
266
267
268
15 Incorporare suoni e video . . . . . . . . . . . . . . . . . . . . 271
Novità audio e video in HTML5 . . . . . . . . . .
Introduzione ai contenuti multimediali con HTML
Formati e contenitori multimediali . . . . . . .
Codec: decodifica di video e audio . . . . . . .
Quale formato scegliere? . . . . . . . . . . . .
Dimensioni del file e qualità. . . . . . . . . . .
Codificare i video . . . . . . . . . . . . . . . .
Incorporare clip video . . . . . . . . . . . . . . .
Introduzione al tag <video> . . . . . . . . . .
Il tag <embed>: il tuo piano di emergenza . .
Posizionare una clip video su una pagina Web
Incorporare audio in una pagina Web. . . . . . .
Riprodurre audio con il tag <audio> . . . . . .
Riprodurre audio con i vecchi browser . . . . .
Posizionare una clip audio su una pagina Web
Punti chiave . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
272
273
273
274
275
275
276
277
277
279
279
282
282
283
283
285
xii Sommario
16 Inserire JavaScript e contenuto esterno . . . . . . . . . . . . 287
Introduzione a canvas . . . . . . . . . . . . . . .
Pillole di JavaScript . . . . . . . . . . . . . . . . .
Incorporare JavaScript nella tua pagina Web .
La tua prima pagina Web con JavaScript . . . .
Eventi JavaScript e jQuery . . . . . . . . . . . . .
Procurarsi jQuery . . . . . . . . . . . . . . . .
Prepararsi per jQuery . . . . . . . . . . . . . .
Selezionare elementi con jQuery . . . . . . . .
Chiamata delle funzioni con JavaScript. . . . .
Rispondere agli eventi con JavaScript e jQuery
Usare il tag <canvas> di HTML5 . . . . . . . . . .
Incorporare contenuto esterno in pagine Web . .
Punti chiave . . . . . . . . . . . . . . . . . . . . .
Parte 4
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
287
288
289
289
292
293
294
295
297
298
303
310
311
Altri metodi per creare codice HTML
17 HTML e Microsoft Expression Web . . . . . . . . . . . . . . . 315
L’interfaccia utente di Expression Web. . . . . . . . . .
Creare siti e pagine Web . . . . . . . . . . . . . . . . .
Creare una nuova pagina utilizzando un modello CSS .
Inserire immagini . . . . . . . . . . . . . . . . . . . . .
Importare una cartella immagini . . . . . . . . . . .
Posizionare immagini in una pagina . . . . . . . . .
Aggiungere un’immagine di sfondo a una division .
Formattare il testo . . . . . . . . . . . . . . . . . . . .
Formattare una division . . . . . . . . . . . . . . . . .
Inserire collegamenti ipertestuali . . . . . . . . . . . .
Punti chiave . . . . . . . . . . . . . . . . . . . . . . . .
Parte 5
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
316
320
325
328
328
330
331
333
338
340
343
Appendici
A Fruibilità di un sito Web . . . . . . . . . . . . . . . . . . . . . 347
Cosa vuol dire fruibilità . . . . . . . . . . .
Pianificare la fruibilità . . . . . . . . . . . .
Abbozzare l’organizzazione del sito . . . .
Progettare un modello di pagina coerente
Progettare il contenuto di singole pagine.
Testare la fruibilità . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
347
348
349
349
350
351
Sommario
xiii
B Accessibilità di un sito Web . . . . . . . . . . . . . . . . . . . 353
Linea guida 1: fornisci contenuti alternativi
equivalenti sia per i contenuti visivi sia uditivi . . . . . . . . . . . .
Linea guida 2: non affidarti solo ai colori . . . . . . . . . . . . . . .
Linea guida 3: utilizza markup e fogli stile e fallo
in maniera appropriata . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 4: rendi chiaro l’utilizzo naturale
della lingua . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 5: crea tabelle che si trasformino
con grazia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 6: assicurati che le pagine che
danno evidenza a nuove tecnologie si trasformino
con grazia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 7: assicurati che sia modificabile
il controllo dei contenuti sensibile al tempo . . . . . . . . . . . . .
Linea guida 8: assicura l’accessibilità diretta
di interfaccia utente incorporata . . . . . . . . . . . . . . . . . . . .
Linea guida 9: progettare per l’indipendenza
dal dispositivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 10: utilizza soluzioni ad interim . . . . . . . . . . . . .
Linea guida 11: utilizza le tecnologie W3C
e le linee guida . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 12: fornisci informazioni di contesto
e orientamento . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 13: fornisci meccanismi di navigazione
chiari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Linea guida 14: assicurati che i documenti siano
chiari e semplici . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
354
354
354
356
356
357
357
358
358
358
359
360
360
361
C Tag aggiunti e rimossi in HTML5 . . . . . . . . . . . . . . . . 363
Tag aggiunti in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 363
Tag rimossi in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Glossario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .365
Indice analitico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369
Autore . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .383
