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