- Alessandra Salvaggio -
HTML5 e CSS3
Guida completa
Tutti i tag HTML fino a HTML5 >>
Le caratteristiche avanzate di HTML5 >>
Canvas, geolocalizzazione, trascinamento >>
Tutto sui CSS, dai box alle trasformazioni 3D >>
HTML5
e CSS3
Guida completa
Alessandra Salvaggio
HTML5 e CSS3 | Guida completa
Autrice: Alessandra Salvaggio
Collana:
Editor in Chief: Marco Aleotti
Progetto grafico: Roberta Venturieri
Immagine di copertina: © ilyast | Thinkstock
© 2015 Edizioni Lswr* – Tutti i diritti riservati
ISBN: 978-88-6895-231-0
I diritti di traduzione, di memorizzazione elettronica, di riproduzione e adattamento totale o parziale con qualsiasi mezzo (compresi i microfilm e le copie fotostatiche), sono riservati per tutti i Paesi. Le fotocopie per uso personale del lettore possono essere
effettuate nei limiti del 15% di ciascun volume dietro pagamento alla SIAE del compenso previsto dall’art. 68, commi 4 e 5, della
legge 22 aprile 1941 n. 633.
Le fotocopie effettuate per finalità di carattere professionale, economico o commerciale o comunque per uso diverso da
quello personale possono essere effettuate a seguito di specifica autorizzazione rilasciata da CLEARedi, Centro Licenze e
Autorizzazioni per le Riproduzioni Editoriali, Corso di Porta Romana 108, 20122 Milano, e-mail [email protected]
e sito web www.clearedi.org.
La presente pubblicazione contiene le opinioni dell’autore e ha lo scopo di fornire informazioni precise e accurate. L’elaborazione
dei testi, anche se curata con scrupolosa attenzione, non può comportare specifiche responsabilità in capo all’autore e/o all’editore per eventuali errori o inesattezze.
L’Editore ha compiuto ogni sforzo per ottenere e citare le fonti esatte delle illustrazioni. Qualora in qualche caso non fosse riuscito
a reperire gli aventi diritto è a disposizione per rimediare a eventuali involontarie omissioni o errori nei riferimenti citati.
Tutti i marchi registrati citati appartengono ai legittimi proprietari.
Via G. Spadolini, 7
20141 Milano (MI)
Tel. 02 881841
www.edizionilswr.it
Printed in Italy
Finito di stampare nel mese di giugno 2015 presso “Rotolito Lombarda” S.p.A., Pioltello (MI)
(*) Edizioni Lswr è un marchio di La Tribuna Srl. La Tribuna Srl fa parte di
.
Sommario
INTRODUZIONE........................................................................................................11
Parte 1 - Introduzione
1.
CHE COS’È HTML ............................................................................................15
Un documento HTML............................................................................................................... 16
Attributi e valori.......................................................................................................................... 19
La struttura base di un documento HTML......................................................................... 20
Come si scrive il codice HTML...............................................................................................23
Editor HTML................................................................................................................................23
2. LA CODIFICA DEI CARATTERI E L’USO DEI SIMBOLI .........................25
Riferimenti di carattere ed entità...........................................................................................28
Dichiarare la codifica.................................................................................................................29
Salvare correttamente il file.....................................................................................................29
3. HTML, XHTML, HTML5: NON FACCIAMO CONFUSIONE..................31
XHTML.........................................................................................................................................33
HTML5..........................................................................................................................................36
4. DIFFERENZE FRA HTML E XHTML ...........................................................39
Doctype e namespace............................................................................................................. 40
Annidamento dei tag................................................................................................................. 41
Chiusura di tutti i tag................................................................................................................. 41
Caratteri minuscoli ...................................................................................................................42
I valori degli attributi non possono mancare e vanno posti tra virgolette ..................42
Entità.............................................................................................................................................43
ID name........................................................................................................................................43
Gli script.......................................................................................................................................43
Compatibilità.............................................................................................................................. 44
5. STRUMENTI PER LAVORARE CON HTML E CSS...................................47
Validatori......................................................................................................................................47
Editor..............................................................................................................................................51
Test per il supporto dei browser.............................................................................................56
5
HTML5 e CSS3 | Guida completa
6. ORGANIZZARE IL LAVORO.........................................................................59
La pagina principale del sito................................................................................................... 60
Parte 2 - Tag HTML
7. LA PAGINA BASE.............................................................................................65
HTML 4.01 ..................................................................................................................................65
XHTML........................................................................................................................................ 66
HTML5......................................................................................................................................... 66
I commenti...................................................................................................................................67
8. STRUTTURARE LE PAGINE...........................................................................69
I paragrafi, i ritorni a capo e i filetti orizzontali...................................................................69
I titoli...............................................................................................................................................71
Div e Span....................................................................................................................................73
9. GLI ELENCHI..................................................................................................... 75
Gli elenchi strutturati ...............................................................................................................78
Liste di definizioni......................................................................................................................79
10. FORMATTAZIONE CON HTML/XHTML..................................................81
Dimensioni dei caratteri, apici e pedici.................................................................................87
Tag non supportati in HTML5................................................................................................ 89
Attributi non supportati da HTML5: lo sfondo della pagina.......................................... 90
11. LE IMMAGINI ..................................................................................................93
Riferimenti assoluti e relativi...................................................................................................93
Procurarsi le immagini............................................................................................................. 96
Preparare le immagini per il web........................................................................................... 98
Inserire le immagini ............................................................................................................... 100
Testo alternativo e descrizione lunga..................................................................................103
Spazio intorno alle immagini.................................................................................................104
Icone per i preferiti...................................................................................................................104
12. I COLLEGAMENTI.........................................................................................109
Ancore...........................................................................................................................................111
Target............................................................................................................................................112
Documenti da scaricare........................................................................................................... 113
Relazione fra il documento corrente e quello collegato.................................................. 113
Dispositivo per cui un collegamento è ottimizzato..........................................................114
Usare un’immagine come collegamento ............................................................................116
Mappe immagine......................................................................................................................116
Tabindex......................................................................................................................................118
Accesskey...................................................................................................................................119
6
Sommario
13. LE TABELLE....................................................................................................... 121
Dimensioni delle tabelle......................................................................................................... 124
Formattazione delle tabelle................................................................................................... 126
Allineamento delle tabelle.....................................................................................................128
Allineamento del testo nelle celle ....................................................................................... 129
Gruppi di celle...........................................................................................................................130
I bordi..........................................................................................................................................134
Tabelle complesse.................................................................................................................... 135
14. I MODULI......................................................................................................... 139
Inserire elementi in un modulo..............................................................................................141
Raggruppare gli elementi.......................................................................................................154
Accessibilità.............................................................................................................................. 155
15. MULTIMEDIA E SCRIPT............................................................................... 159
Multimedia................................................................................................................................. 159
Script........................................................................................................................................... 165
16. I FRAME E GLI IFRAME................................................................................ 167
No frame..................................................................................................................................... 172
I collegamenti nei frame......................................................................................................... 172
iframe.......................................................................................................................................... 174
Parte 3 - Tag HTML5
17. GLI ELEMENTI STRUTTURALI................................................................... 179
<header>.....................................................................................................................................181
<nav>...........................................................................................................................................181
<section>................................................................................................................................... 182
Blocchi semantici..................................................................................................................... 183
18. MICRODATA E MICROFORMAT.............................................................. 193
Google snippet.......................................................................................................................... 195
Microformat..............................................................................................................................198
19. VIDEO E AUDIO.............................................................................................201
Il tag per includere un file video...........................................................................................201
Il markup per includere un file audio..................................................................................206
Codec e contenitori................................................................................................................206
Parte 4 - Caratteristiche avanzate di HTML5
20.CANVAS............................................................................................................ 211
La coordinate dei canvas........................................................................................................ 216
Disegnare percorsi................................................................................................................... 216
7
HTML5 e CSS3 | Guida completa
Disegnare con le curve di Bézier......................................................................................... 220
Disegnare archi e circonferenze.......................................................................................... 225
Stili linea.................................................................................................................................... 230
Gradienti..................................................................................................................................... 231
Immagini.................................................................................................................................... 236
Il testo........................................................................................................................................240
Ombre........................................................................................................................................ 243
Composizioni............................................................................................................................244
Animazioni................................................................................................................................ 247
I canvas in Internet Explorer................................................................................................. 252
21.GEOLOCALIZZAZIONE.............................................................................. 255
Recuperare le coordinate geografiche............................................................................... 256
Gestione degli errori............................................................................................................... 258
Mostrare una mappa di Google...........................................................................................260
22. WEB STORAGE............................................................................................. 263
Rilevare le modifiche a localStorage....................................................................................274
Problemi di quota.................................................................................................................... 276
Sessioni...................................................................................................................................... 276
23. APPLICAZIONI OFFLINE.............................................................................277
Il flusso degli eventi................................................................................................................ 283
Gestione degli errori............................................................................................................... 286
Problemi in fase di sviluppo.................................................................................................. 287
24. WEB WORKER.............................................................................................. 289
Comunicazione bidirezionale................................................................................................ 291
Passare oggetti......................................................................................................................... 293
Terminare il worker................................................................................................................. 295
Gestione degli errori............................................................................................................... 297
Importare script esterni......................................................................................................... 299
Oggetti a cui può accedere il worker.................................................................................. 299
Worker condivisi......................................................................................................................300
25.TRASCINAMENTO...................................................................................... 305
Trascinare altri oggetti e recuperare informazioni sugli oggetti trascinati................ 318
Trascinare file........................................................................................................................... 325
Parte 5 - CSS
26. INTRODUZIONE AI CSS.............................................................................. 331
La sintassi CSS......................................................................................................................... 332
Selettori, classi e id................................................................................................................. 336
Selettori sulla base di attributi............................................................................................. 343
8
Sommario
Come fornire le indicazioni di stile...................................................................................... 345
Media query............................................................................................................................. 350
Unità di misura.......................................................................................................................... 351
Colori.......................................................................................................................................... 352
Validare i CSS........................................................................................................................... 353
Proprietà specifiche per i browser...................................................................................... 353
Commenti................................................................................................................................. 353
27. FORMATTARE IL TESTO..............................................................................355
Tipo di font................................................................................................................................ 355
Dimensione dei font............................................................................................................... 356
Stile dei font...............................................................................................................................357
Maiuscole e minuscole.......................................................................................................... 358
Colore del font.......................................................................................................................... 359
Allineamento............................................................................................................................ 359
Interlinea................................................................................................................................... 359
Spaziatura.................................................................................................................................360
Lo spazio bianco......................................................................................................................360
Rientri.........................................................................................................................................360
Sfondo del testo........................................................................................................................ 361
Font incorporati o font Web................................................................................................. 362
L’ombra (CSS3)........................................................................................................................364
Text-overflow (CSS3)............................................................................................................. 365
Testo a capo (CSS3)............................................................................................................... 367
Modifica del cursore............................................................................................................... 368
28.BOX................................................................................................................... 371
Box model................................................................................................................................... 371
Ombra (CSS3).......................................................................................................................... 386
Sfondo........................................................................................................................................ 389
Overflow....................................................................................................................................403
Box ridimensionabili (CSS3).................................................................................................405
Visibilità.....................................................................................................................................406
Allineamento verticale...........................................................................................................406
Display block, inline e none..................................................................................................406
29. POSIZIONE DEGLI ELEMENTI................................................................... 413
Posizione..................................................................................................................................... 413
Elementi flottanti...................................................................................................................... 417
Flex (CSS3)............................................................................................................................... 422
Impilamento 3D.......................................................................................................................430
30. FORMATTARE GLI ELENCHI...................................................................... 431
Formattazione degli elenchi nidificati................................................................................434
9
HTML5 e CSS3 | Guida completa
31. FORMATTARE LE TABELLE........................................................................ 437
Le celle vuote............................................................................................................................442
Allineamento............................................................................................................................443
Centrare una tabella...............................................................................................................444
Flusso del testo intorno alla tabella....................................................................................444
32.IMMAGINI......................................................................................................445
Opacity (CSS3)........................................................................................................................446
Image sprite..............................................................................................................................449
33. I MODULI ....................................................................................................... 453
34. TRASFORMAZIONI, TRANSIZIONI E ANIMAZIONI......................... 459
Trasformazioni 2D...................................................................................................................459
Trasformazioni 3D...................................................................................................................463
Transizioni.................................................................................................................................468
Animazione............................................................................................................................... 472
35. LAYOUT A COLONNE E NUMERAZIONE DEI CAPITOLI................. 487
Numerazione delle sezioni.....................................................................................................491
36.STAMPA.......................................................................................................... 493
Nascondere un elemento...................................................................................................... 495
Stampare l’indirizzo di un URL.............................................................................................496
Interruzioni di pagina............................................................................................................. 497
Vedove e orfani........................................................................................................................498
APPENDICE A - COSTRUIRE ESPRESSIONI REGOLARI............................. 499
INDICE ANALITICO............................................................................................. 505
10
Introduzione
Sono passati più di 20 anni da quando, nel 1991, Tim Barners Lee ha inventato al CERN
di Ginevra il linguaggio HTML.
20 anni nel mondo di Internet e della tecnologia in generale sono un’eternità, eppure
rimane ancora la base costituiva delle pagine web, anche quando le si coniuga con
altre tecnologie.
Chiunque voglia approcciare la creazione di siti Internet deve partire da qui. Non si può
prescindere da una solida conoscenza di queste basi.
Deve conoscere tag e attributi “storici”, oltre alle novità introdotte dall’ultima versione
del linguaggio, HTML5.
Non si può nemmeno prescindere da CSS, anche nella sua ultima versione CSS3, che
nel tempo si è fatto carico di descrivere la formattazione delle pagine HTML.
Questo libro si propone proprio questo: fornire le basi di HTML e CSS in modo da imparare a creare le tradizionali pagine Internet ed, eventualmente, a costruire poi anche
soluzioni più complesse, in unione con altre tecnologie quali Java, ASP, PHP ecc. (che
però non sono trattate in questo libro).
Per completezza, ho scelto di dedicare una sezione alle novità HTML5 che richiedono
l’interazione con JavaScript, anche se questo argomento richiede qualche conoscenza
più avanzata. Ho cercato, comunque di spiegare tutto passo passo, in modo da rendere anche questa parte accessibile a tutti.
Per il resto, si parte da zero, in modo da permettere a tutti i lettori di avvicinarsi ad
HTML e CSS fin dai loro rudimenti.
Il libro può essere anche considerato un riferimento per trovare velocemente il comportamento di un tag, un attributo o una proprietà CSS.
Booksite
Alla pagina http://www.sos-office.it/libro-html5Css3.html trovate tutti i file per svolgere gli esercizi del libro.
11
Parte 1
Introduzione
13
1
Che cos’è HTML
Cominciamo a fare conoscenza con HTML. Daremo le indi-
cazioni di base per orientarci nei capitoli che seguono.
Prima di addentrarci nei dettagli di HTML-XHTML e CSS è necessaria una breve premessa su HTML. Questo ci permetterà di chiarire i concetti base e le parole fondamentali che ci serviranno nei prossimi capitoli.
Naturalmente, immaginiamo che tutti i nostri lettori abbiano familiarità con il web,
almeno come utenti.
I siti web sono banche dati contenenti ipertesti. Un ipertesto è un documento che
contiene dei riferimenti a pagine, immagini e suoni che si trovano in altre parti del
documento stesso o in documenti che possono essere presenti nella stessa banca
dati o in banche dati diverse. È possibile muoversi da una pagina all’altra dell’ipertesto o all’interno della stessa pagina semplicemente facendo clic con il mouse
in punti particolari, chiamati collegamenti o link. Un link è un collegamento tra
diverse pagine o sezioni di pagina ed è riconoscibile all’interno della pagina web
perché, solitamente (purtroppo non sempre, ma questo è un altro discorso), è
visualizzato in un colore diverso (normalmente il blu) da quello del testo ordinario
ed è sottolineato.
L’autore dell’ipertesto predispone dei collegamenti che aprono all’utente molti possibili percorsi all’interno della pagina; l’utente è lasciato libero di scegliere quale
percorso seguire, scoprendo di volta in volta strade nuove e infinite variazioni di
“direzione”, ma non può creare dei link nuovi.
Il collegamento è realizzato specificando l’indirizzo, URL, della pagina che si vuole raggiungere. L’URL (Uniform Resource Locator) è un qualsiasi tipo di indirizzo Internet,
15
HTML5 e CSS3 | Guida completa
sia esso un recapito di posta elettronica o il riferimento necessario per raggiungere
una pagina web. La risorsa cui l’URL fa riferimento può essere nella stessa banca dati
della pagina da cui è richiamata o in un’altra banca dati.
Le pagine che compongono un sito web sono raccolte in una banca dati controllata da uno speciale programma: il web server. Nel linguaggio comune, quando
parliamo di web server intendiamo sia il computer su cui si trovano fisicamente
le pagine del sito sia, appunto, il programma che le gestisce. Il programma web
server deve essere in grado di rilevare le richieste di pagine specifiche e, quindi,
fornirle all’utente che le richiede.
Le pagine che costituiscono un sito sono file di testo scritti in un linguaggio particolare
chiamato HTML (HyperText Markup Language).
HTML non è un vero e proprio linguaggio di programmazione, ma è, appunto, un
markup language, cioè un linguaggio di istruzioni che definiscono le caratteristiche di un documento e ne guidano la composizione sullo schermo. In sostanza,
non si crea la pagina così come viene visualizzata, ma la si descrive (“questo è un
titolo che deve essere alto 5 e visualizzato in rosso, qui colloca un immagine che
si trova in questo file ecc.”).
Per interpretare correttamente le pagine descritte con HTML, l’utente finale dovrà richiamarle e visualizzarle attraverso un programma specifico (installato dal lato client,
cioè sul computer dell’utente stesso) detto browser.
Sarà il browser a leggere la descrizione della pagina e a comporla sullo schermo, seguendo le indicazioni date dall’autore (ignoriamo volutamente tutte le polemiche relative alle capacità di interpretazione e rendering dei browser).
I file che contengono le istruzioni HTML possono essere redatti con qualsiasi editor di
testi (anche se, naturalmente, esistono programmi dedicati che facilitano il lavoro) e
devono essere salvati con estensione .htm o .html.
Un documento HTML
Abbiamo detto che HTML descrive la pagina web. In realtà, almeno inizialmente,
HTML è stato pensato per descrivere la struttura dei documenti, la funzione di ogni
loro parte, indipendentemente dal loro aspetto estetico. In pratica, è come se HTML
dicesse: “questa è l’intestazione del documento, questo il corpo, questo un titolo, questo un paragrafo, questo un elenco ecc.”.
Ora, si tratta di capire come si danno queste informazioni in HTML.
Innanzi tutto, diciamo che HTML è un linguaggio a tag derivato da SGML (Standard
Generalized Markup Language).
16
Che cos’è HTML
Parte 1 - Capitolo 1
Un tag, termine che potremmo tradurre come “targhetta”, è facilmente riconoscibile
nel documento HTML: infatti è sempre racchiuso tra un segno di minore e uno di maggiore (<>), più correttamente definiti parentesi uncinate.
I tag si presentano quasi sempre a coppie: un tag di apertura e uno di chiusura, che è
identico a quello di apertura a parte il fatto che, dopo la prima parentesi uncinata, è
presente uno slash (/).
Ogni coppia di tag definisce la funzione di ciò che è contenuto al suo interno.
Facciamo un esempio per chiarire meglio.
<body>
Contenuto del corpo del documento
</body>
La coppia di tag è <body> </body>.
Tutto quello che si trova fra questi due tag costituisce il corpo del documento.
Le coppie di tag possono essere annidate, ossia all’interno di una coppia di tag ne possono essere inserite altre, purché si rispetti l’ordine di apertura e chiusura. Il tag aperto
prima va chiuso dopo. Anche qui serve un esempio.
<body>
<h1>Titolo</h1>
<p>Primo paragrafo</p>
<p>Secondo paragrafo</p>
</body>
NOTA
I nostri tag <body> </body> che definiscono il corpo del documento ora contengono i tag
<h1></h1> che definiscono il titolo principale della pagina e le due coppie di tag <p> </
p> che definiscono i paragrafi del documento.
La coppia <body> </body> è il contenitore principale e tutti i tag al suo interno
devono essere chiusi prima che sia possibile chiudere </body>. All’interno di una
coppia <p> </p> potrebbero essere contenute altre coppie di tag che introducono
altri elementi.
Alcuni browser eseguono un rendering corretto anche di pagine che non
rispettano l’ordine di chiusura dei tag. I browser sono in grado di “chiudere un occhio” anche su altre inesattezze che si trovano nei documenti
HTML. È bene comunque non approfittare di queste debolezze e cercare
di scrivere sempre documenti formalmente corretti. In questo possono
aiutarvi i così detti validatori di codice, ma di questo parleremo più
avanti nel libro.
17
HTML5 e CSS3 | Guida completa
Ci sono anche tag che non prevedono un elemento di chiusura. Vengono definiti tag
vuoti. Un esempio di questo tipo è il tag <hr>, che introduce nella pagina una riga verticale (Horizontal Rule).
Ecco come possiamo inserire una riga fra i due paragrafi del nostro esempio precedente.
<body>
<h1>Titolo</h1>
<p>Primo paragrafo</p>
<hr>
<p>Secondo paragrafo</p>
</body>
I tag che possono contenere al loro interno altre coppie di tag, cioè altri elementi della
pagina, sono definiti tag di livello blocco. Gli altri tipi di tag vengono definiti elementi
in linea. Le specifiche di HTML definiscono in modo piuttosto labile la distinzione fra
un elemento di tipo in blocco e uno di tipo in linea: si limitano a spiegare che un elemento di livello blocco viene mostrato su una nuova riga, come un nuovo paragrafo
in un libro, mentre un elemento in linea viene mostrato sulla riga corrente, come se si
trattasse di una nuova parola all’interno di un paragrafo.
Noi possiamo aggiungere che gli elementi di livello blocco sono gli elementi strutturali di una pagina web e, pertanto, possono contenere altri elementi di livello
blocco, elementi in linea e testo. Gli elementi in linea, invece, generalmente possono contenere esclusivamente altri elementi in linea e testo.
Un tipico esempio di tag in linea è costituito dai tag <em> e <strong>, che servono
per mettere in rilievo il testo contenuto al loro interno, che viene reso, rispettivamente, in corsivo e grassetto.
Ecco un esempio:
<body>
<h1>Titolo</h1>
<p><em>Primo</em> paragrafo</p>
<hr>
<p><strong>Secondo</strong> paragrafo</p>
</body>
NOTA
La Figura 1.1 mostra come si presenta la pagina che contiene il codice appena fornito,
se aperta con il browser Mozilla Firefox 36.
18
Il codice non è completo: mancano le parti di apertura della pagina (che
comunque non vengono visualizzate). Per ora trascuriamo volutamente l’argomento. Ci torneremo più avanti.
Che cos’è HTML
Parte 1 - Capitolo 1
Figura 1.1 - La pagina visualizzata da Mozilla Firefox.
Attributi e valori
Molti tag HTML possono essere “arricchiti” di attributi che specificano meglio il comportamento del tag stesso. Gli attributi si inseriscono nel tag di apertura, ma non in
quello di chiusura, che rimane invariato.
Come al solito, facciamo un esempio:
<body bgcolor="blue">
contenuto
</body>
NOTA
L’attributo bgcolor permette di impostare il colore di sfondo della pagina che, in questo
caso, sarà blu.
Fra gli attributi e i loro valori va sempre posto un segno di uguale (=).
Noi abbiamo messo il valore blue fra virgolette. In HTML non sono obbligatorie, mentre lo sono in XHTML. Nel Capitolo 4 spiegheremo bene la distinzione.
Ci sono dei tag, come quelli che permettono di inserire un’immagine (<img>) o di creare
un collegamento (<a>), dove l’attributo è praticamente obbligatorio: infatti, serve, ri-
19
HTML5 e CSS3 | Guida completa
spettivamente, per specificare il nome e il percorso dell’immagine da inserire e il nome
e il percorso della pagina a cui punta il collegamento.
<img src="immagine.gif">
<a href="paginaDaAprire.html">Fai clic</a>
Avrete certamente anche notato che il tag <img> non richiede chiusura.
Concludiamo ricordando che ci sono tag che possono accettare più di un attributo. Per esempio, il tag <img>, oltre al nome dell’immagine da caricare, può
contenere, fra gli altri, gli attributi height e width, che specificano le dimensioni
dell’immagine stessa.
NOTA
<img src="immagine.gif" height="100" witdh="100">
Specificare le dimensioni di un’immagine facilita il rendering della pagina.
Normalmente, infatti, le immagini sono l’ultima parte caricata di una pagina,
dato che sono gli elementi che richiedono più tempo per il caricamento. Se
se ne specificano le dimensioni, il browser sa quanto spazio lasciare libero
per l’immagine stessa. Altrimenti, il testo dovrà essere ridisposto dopo che
le immagini sono state caricate.
La struttura base di un documento HTML
Tutte le pagine HTML dovrebbero rispettare una struttura base. Ecco un esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titolo della pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="pasta, pane, pizza">
</head>
NOTA
<body>
corpo del documento
</body>
</html>
20
Anche se non è obbligatorio, in questo esempio abbiamo scelto di indentare
il codice, ovvero di modificare i rientri rispetto al margine sinistro, per esplicitare meglio il rapporto fra i tag. L’indentazione evidenzia quali tag sono
annidati in altri tag.
Che cos’è HTML
Parte 1 - Capitolo 1
Cominciamo dall’inizio. Il primo elemento che si dovrebbe trovare in una pagina HTML
è la DTD o Document Type Definition: essa specifica il linguaggio di descrizione utilizzato nella pagina. Di HTML esistono diverse versioni. Ogni versione è descritta in
un documento disponibile su Internet. La DTD specifica quale si seguirà in modo da
aiutare il browser a interpretare correttamente il documento.
Proviamo ad analizzare la DTD del nostro esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
NOTA
Oltre alla parola DOCTYPE troviamo le seguenti indicazioni:
• HTML: il tipo di linguaggio utilizzato è HTML;
• PUBLIC: il documento è pubblico;
• -W3C: indica che le specifiche del linguaggio che seguiremo sono state definite
dal W3C (ne riparleremo più avanti), ossia l’ente che si occupa di standardizzare HTML. Il segno meno (-) che precede questa indicazione significa che le
specifiche non sono state registrate dall’ISO. Per le specifiche registrate dall’ISO è previsto il segno +;
• DTD HTML 4.01 Transitional: indica che il documento seguirà le specifiche della
versione 4.01 di HTML. La versione 4 di HTML ha diverse “sottoversioni”. L’aggettivo Transitional indica che si seguirà appunto questa sottoversione (riparleremo anche di questo);
• EN: la lingua con cui è scritta la DTD è l’inglese.
In questo esempio stiamo proponendo una doctype HTML 4. Esistono doctype diverse (XHTML e HTML5) sulle quali ritorneremo nel corso del libro.
In alcuni casi una DTD può essere seguita dall’indirizzo Internet in cui è disponibile il
file con la descrizione del linguaggio che si adotterà.
Dopo la DTD, passiamo ai tag HTML veri e propri.
Tutto il contenuto di un documento HTML (a esclusione della DTD) deve essere contenuto fra i tag <html> e </html>. All’interno di questo grande contenitore devono esserci sempre due sezioni: <head> </head> e <body> </body>.
La sezione <head> </head> rappresenta l’intestazione del documento. Contiene elementi non visibili e il titolo della pagina (da non confondere con i titoli realizzati col tag
<h1>, visto sopra), visibile nella barra del titolo del browser. Il titolo va sempre chiuso
fra i tag <title> e </title>. La Figura 1.2 mostra la pagina che si ottiene con il codice di
esempio riportato sopra. Il titolo <title> è segnalato da una freccia.
21
HTML5 e CSS3 | Guida completa
Figura 1.2 - Il titolo della pagina.
È molto importante che il titolo non manchi, perché è il primo elemento che vediamo di
una pagina; inoltre, viene utilizzato per identificare la pagina nei preferiti dei browser.
Oltre al titolo, nell’intestazione del documento possono essere presenti tag di tipo
<meta>, che permettono di specificare metainformazioni, ossia informazioni che riguardano la pagina che le contiene, per esempio il nome dell’autore, le parole chiave
per la ricerca della pagina nei motori di ricerca, la descrizione della pagina, il programma usato per scriverla ecc.
Nel nostro esempio ne abbiamo riportate due. La prima:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
è un meta di tipo http-equiv, il che significa che veicola informazioni che potrebbero
essere passate attraverso intestazioni http. Se vi sembra complicato, non preoccupatevi.
In realtà questo tag indica semplicemente che il nostro è un file di testo e quale set di caratteri utilizza. Nel caso dell’esempio stiamo dicendo che useremo il set di caratteri per
le lingue europee occidentali. Nel prossimo capitolo torneremo su questo argomento.
Il secondo tipo di meta che abbiamo usato nel nostro esempio:
<meta name="keywords" content="pasta, pane, pizza">
è di tipo keywords e permette di elencare le parole chiave con cui un documento deve
essere indicizzato nei motori di ricerca.
Altri meta possibili sono description e author, che permettono di fornire una descrizione per la pagina e il nome dell’autore.
22
Che cos’è HTML
Parte 1 - Capitolo 1
Terminata la descrizione dell’intestazione, passiamo alla sezione <body> </body>. Essa
rappresenta il corpo del documento. Questa sezione contiene tutto ciò che è visibile
nella finestra del browser. Praticamente, la maggior parte di quello che descriveremo
nel corso del libro dovrà essere inserito in questa sezione.
Come si scrive il codice HTML
Concludiamo questo capitolo con una semplice nota. HTML non ha rigide regole per
la disposizione dei comandi: purché si rispetti la sua logica, per esempio, sarebbe possibile scrivere un file HTML anche senza andare mai a capo. Inoltre, HTML non fa
distinzione fra le maiuscole e le minuscole (non è cioè case sensitive).
Per ragioni di chiarezza, si è diffusa la consuetudine di scrivere i tag e gli attributi con
le lettere maiuscole e i valori con le lettere minuscole.
Vedremo più avanti che XHTML (uno dei filoni di HTML) prevede invece che tutti i
comandi siano scritti con le lettere minuscole.
I file HTML vanno salvati con estensione .html o .htm.
È opportuno, anche se non è obbligatorio, che il nome dei file HTML non contenga
spazi vuoti. Se avete bisogno di nomi composti da più parole, potete separarle con
un trattino basso o underscore (_). Potete anche scegliere di mettere le parole che
compongono il nome attaccate, scrivendo le parole successive alla prima con l’iniziale
maiuscola (per esempio, miaPrimaPagina.html).
Quando salvate un file badate alle maiuscole e minuscole: i web server, infatti, fanno
distinzione fra maiuscole e minuscole. Il file Fiore.html è diverso dal file fiore.html. Se
non fate attenzione potreste avere problemi con i collegamenti (comunque, per ora
non preoccupatevi, torneremo sull’argomento più avanti).
Editor HTML
Per scrivere il vostro codice HTML avete diverse possibilità. Naturalmente, sapete che
esistono editor visuali come Adobe Dreamweaver che vi permettono di lavorare in
modo interattivo e lasciare che sia l’editor a scrivere il codice. In questi editor è anche
possibile scrivere direttamente il codice HTML.
Se non disponete di questi editor, o comunque preferite scrivere il codice manualmente,
potete ricorrere a editor di testo che dispongono di dizionari che riconoscono la sintassi HTML. I tag e gli attributi verranno mostrati con colori diversi dal testo normale in
modo da evidenziarli facilmente. Di norma, questi editor vi aiutano a mantenere consistente il vostro codice (per esempio, chiudendo correttamente i tag) e salvano i vostri
file in modo corretto assegnando loro automaticamente l’estensione .html o .htm.
23
HTML5 e CSS3 | Guida completa
In rete trovate moltissimi editor, basterà fare una ricerca. Per la scrittura di questo
libro ho utilizzato Notepad ++, un editor gratuito che potete scaricare dalla pagina
http://notepad-plus-plus.org/. A differenza del Blocco Note di Windows, Notepad ++
evidenzia i tag e i comandi di HTML e CSS, rendendo più semplice la scrittura del codice. Un altro editor che mi sento di consigliarvi è Edit Plus (http://www.editplus.com),
che potete usare per scrivere codice con vari linguaggi (non solo HTML) scaricando
dal sito del produttore gli appositi dizionari.
Un ulteriore editor interessante è HTMLPad (http://www.htmlpad.net/) che, però,
non è gratuito (il costo si aggira intorno ai 30 euro). È disponibile una versione di prova per 30 giorni.
Come abbiamo già accennato, un’altra possibilità, è quella di scrivere i vostri file HTML
con Blocco note di Windows. In questo caso non avrete alcun controllo sul codice, né
l’evidenziazione dei tag. Inoltre, bisognerà prestare particolare attenzione nel salvataggio del file. Infatti, non basta specificare l’estensione .html nel nome del file, ma
dall’elenco a discesa Tipo file della finestra Salva con nome occorre scegliere Tutti i
file (*.), altrimenti verrà aggiunta anche l’estensione .txt.
Figura 1.3 - Salvare un file HTML con Blocco note.
Per vedere il risultato del vostro operato dovete riaprire il file all’interno di un browser.
In genere, per aprire un file locale con un browser occorre scegliere File > Apri o File >
Apri File oppure, per aprirlo nel browser predefinito, basta fare doppio clic su di esso.
Per aprirlo con un altro programma, fate clic col tasto destro del mouse sull’icona del
file e poi scegliete Apri o Apri con, quindi scegliete il programma che volete usare.
24
