docico leggi l`estratto
download 
Reclamo Transcript
ico leggi l`estratto
- 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
