Sei sulla pagina 1di 574

HTML5 CSS3 JAVASCRIPT

HTML5 CSS3 J AVA S CRIPT
HTML5 CSS3 J AVA S CRIPT
HTML5 CSS3 J AVA S CRIPT

© Apogeo s.r.l. - socio unico Giangiacomo Feltrinelli Editore s.r.l.

ISBN edizione cartacea: 9788850331314

Il presente file può essere usato esclusivamente per finalità di carattere personale. Tutti i contenuti sono protetti dalla Legge sul diritto d'autore.

Nomi e marchi citati nel testo sono generalmente depositati o registrati dalle rispettive case produttrici.

~

Seguici su Twitter @apogeonline

Introduzione

Il World Wide Web, quel meraviglioso luogo in cui possiamo compiere qualsiasi cosa ci passi per la testa – dalla semplice navigazione di un sito di notizie all’utilizzo di una complessa applicazione di e-commerce – sta, come di consueto fanno tutte le tecnologie moderne, cambiando, e tale mutamento sta avvenendo a una velocità ancora più elevata del passato.

Ciò è dovuto all’impulso e alla spinta, da un lato, da parte degli organismi che si occupano di standardizzare le tecnologie web attraverso la scrittura e definizione di documenti di specifiche (in primis il W3C di Timothy John Berners-Lee ma anche il WHATWG Group che sta dietro a HTML5), e dall’altro lato, da parte degli sviluppatori dei moderni browser che cercano in tutti i modi di aggiornare tali user agent in modo da poterli dotare delle nuove e potenti caratteristiche definite all’interno delle specifiche.

Questa continua ricerca e innovazione è fondamentale e produttiva sia per il semplice utente che usa il browser come mero mezzo di navigazione, sia per noi sviluppatori che possiamo utilizzare i nuovi strumenti e le relative API per scrivere applicazioni web sofisticate prima impensabili (player multimediali, carrelli della spesa con funzionalità drag and drop, programmi per il disegno, videogame e così via), dotate quindi di tutte quelle moderne caratteristiche che si trovano nelle consuete applicazioni standalone che girano sul desktop dei vari sistemi operativi.

Il browser è assurto da semplice strumento per la navigazione dei contenuti a una sorta di mini sistema operativo al cui interno eseguire le applicazioni web moderne.

Tutto questo ha un prezzo da pagare che è quantificabile in un cambiamento di mentalità nell’approccio allo sviluppo di applicazioni e nel tempo che è necessario per imparare tutte le tecnologie principali che oggi ruotano attorno al Web.

Per quanto concerne il cambiamento di mentalità, uno sviluppatore moderno dovrebbe applicare, laddove possibile, le seguenti regole.

Non legarsi più a implementazioni proprietarie delle tecnologie webma guardare e utilizzare solo quelle standard che consentono di dotare le applicazioni di feature

ma guardare e utilizzare solo quelle standard che consentono di dotare

le applicazioni di feature che nel momento in cui saranno

implementate nei browser saranno tra di essi interoperabili.

Strutturare il codice a layer , ossia separare nettamente la parte strutturale (HTML) dalla parte di presentazione (CSS) e layer, ossia separare nettamente la parte strutturale (HTML) dalla parte di presentazione (CSS) e dalla parte del codice (JavaScript). Ciò consente, infatti, di programmare le

applicazioni in modo professionale e scalabile evitando, per esempio,

di scrivere codice JavaScript o regole CSS direttamente nei tag

HTML.

Utilizzare le tecnologie lato server (PHP, Java EE, ASP.NET…) per il loro scopo primario (la gestione della sicurezza, dei dati e così via) e non per compiere operazioni comunemente effettuabili lato client come, per esempio, quelle inerenti la parte di interazione (quante applicazioni web ci sono ancora dove un menu a tendina viene popolato dopo un postback su un server?). postback su un server?).

Partendo da queste considerazioni, questo libro è stato strutturato in modo che l’apprendimento risulti essere graduale e sistematico: i concetti sono esposti in modo che, per esempio, nella parte su HTML5 non è presente alcun riferimento a CSS3 o JavaScript.

Inoltre, non sono trattate API proprietarie ma solo quelle degli standard web che sono state implementate, nel momento in cui questo libro viene scritto, almeno da un browser.

Una considerazione è d’obbligo: data la mutabilità degli standard che non hanno ancora raggiunto la versione definitiva, alcune delle proprietà, dei metodi, degli attributi di HTML5, CSS3 e JavaScript potrebbero subire cambiamenti a cui in queste pagine non è possibile dare seguito. In ogni caso ciò non deve spaventare perché è una conseguenza normale e ravvisabile in tutte quelle tecnologie, come quelle legate al Web, ad alta velocità di innovazione e cambiamento.

ATTENZIONE I linguaggi HTML5 e CSS3 non sono in tutto e per tutto nuove tecnologie. Essi si rifanno alle specifiche che li hanno preceduti, ovvero HTML4.01 e CSS2. Non potrebbe del resto essere altrimenti: solo in questo modo è possibile sviluppare

nuovi e più potenti standard garantendo allo stesso tempo la retrocompatibilità con quanto fino a oggi in uso. Il lettore non deve quindi stupirsi di ritrovare nelle prossime pagine anche costrutti a lui già noti, documentati insieme ad altri in tutto e per tutto nuovi. Per esempio, l’elemento p è parte di HTML5 quanto canvas. Questo libro è stato concepito per offrire uno spaccato il più completo e pratico possibile di HTML5 e CSS3, evitando di limitarsi alle funzionalità più innovative. In queste pagine il lettore troverà quindi una trattazione che parte dalle basi e potrà approcciare lo studio di queste tecnologie anche senza conoscere HTML4.01 e CSS2.

Una nota finale è necessaria per quanto riguarda HTML5 e CSS3. Lo scopo di questo libro è quello di documentare tali standard a prescindere dall’ampiezza di supporto dei browser. Tranne dove diversamente indicato, gli esempi di codice riportati sono stati testati con il browser Mozilla Firefox perché è quello che, più degli altri, implementa con attenzione gli standard web. Questo non significa però che HTML5 e CSS3 non possano funzionare con browser diversi da Firefox. Per tenersi aggiornati sul supporto che i browser offrono a HTML5 e CSS3 si può fare riferimento a

dimenticare su Wikipedia

Organizzazione del libro

Il libro è organizzato nei capitoli elencati di seguito.

Capitolo 1, “Il layer strutturale: l’HTML5 ”: introduciamo i concetti di base e gli elementi fondamentali per la strutturazione di una pagina web con HTML5. Trattiamo infatti del testo, delle liste, delle tabelle, degli URL, delle immagini e così via fino a esaminare nel dettaglio nuovi tipi di widget inseribili nei form e i nuovi elementi semantici.Il libro è organizzato nei capitoli elencati di seguito. Capitolo 2, “Il layer di presentazione: CSS3”:

Capitolo 2, “Il layer di presentazione: CSS3”: mostriamo in modo approfondito come utilizzare i fogli di stile, elemento imprescindibile per la definizione di regole di visualizzazione degli elementi HTML. Illustriamo tutte le tipologie di selettori e pseudo-classi e spieghiamo gli importanti concetti di organizzazione a cascata, ereditarietà e box model. Infine, passiamo in rassegna tutte le proprietà utilizzabili come quelle per i font, per il testo, per le tabelle, per il box model e così via.di widget inseribili nei form e i nuovi elementi semantici. Capitolo 3, “Il layer di interazione:

Capitolo 3, “Il layer di interazione: JavaScript”: esaminiamo il versatile e potente linguaggio di programmazione JavaScript, “motore” delle moderne applicazioni web, trattando sia i costrutti principali come le variabili, gli array, gli operatori, le strutture di controllo e altro, sia quelli più complessi come le funzioni, le closure , gli oggetti, i prototipi, l’ereditarietà, il polimorfismo e così via. Infine, sottolineiamo che closure, gli oggetti, i prototipi, l’ereditarietà, il polimorfismo e così via. Infine, sottolineiamo che gli argomenti sono tutti aggiornati alle nuove caratteristiche dello standard di riferimento del linguaggio, ossia alla versione ECMAScript 5 del giugno 2011.

Capitolo 4, “Programmazione lato client”: dopo aver studiato i “mattoni” fondamentali per la costruzione di un’applicazione web, entriamo nel vivo della programmazione lato client analizzando le API del BOM (Browser Object Model ), del DOM ( Document Object Model ), della gestione degli eventi Browser Object Model), del DOM (Document Object Model), della gestione degli eventi e dello scripting dei CSS e di Ajax. Chiudiamo il capitolo con un’introduzione a jQuery, una potente libreria JavaScript che è diventata lo standard de facto per la scrittura di applicazioni web moderne e potenti.

Capitolo 5, “Applicazioni web”: impariamo a utilizzare degli elementi HTML e delle API straordinarie e innovative che consentono dilibreria JavaScript che è diventata lo standard de facto per la scrittura di applicazioni web moderne

implementare applicazioni web che possono “mimare”, per caratteristiche e complessità, quelle scritte normalmente per gli ambienti desktop. Analizziamo infatti l’elemento canvas, gli elementi multimediali audio e video, il drag and drop, la geolocalizzazione, i Web Workers (i thread), il Web Storage, le applicazioni web offline e i microdata.

Convenzioni utilizzate

Il libro è diviso in capitoli. Ogni capitolo è numerato in ordine progressivo e denominato significativamente nel suo obiettivo didattico (per esempio Capitolo 5, “Applicazioni web”). I capitoli sono poi suddivisi in paragrafi, all’interno dei quali possiamo avere dei blocchi di testo o di immagini, ausiliari alla teoria e denominati come segue.

Listato NrCapitolo.NrProgressivo Descrizione per i listati del codice sorgente. per i listati del codice sorgente.

Snippet NrCapitolo.NrProgressivo Descrizione per i frammenti di codice sorgente. per i frammenti di codice sorgente.

Sintassi NrCapitolo.NrProgressivo Descrizione per la sintassi di un costrutto. per la sintassi di un costrutto.

Output NrCapitolo.NrProgressivo Descrizione per l’output di un frammento di codice. per l’output di un frammento di codice.

Figura NrCapitolo.NrProgressivo Descrizione per una figura in generale ma anche per l’output dei listati delle applicazioni web. per una figura in generale ma anche per l’output dei listati delle applicazioni web.

Tabella NrCapitolo.NrProgressivo Descrizione per una tabella. per una tabella.

Per esempio, il blocco denominato Listato 1.8, File ElementiStrutturali.html indica il listato di codice numero 8 del Capitolo 1 avente come descrizione il file ElementiStrutturali.html.

Infine, per quanto attiene ai listati, i punti di sospensione (…) indicano che, in quel passaggio, alcune parti del listato sono state omesse. Le medesime parti sono presenti nei relativi file allegati al libro.

Codice sorgente e annotazioni finali

scaricare un archivio ZIP contenente i listati di ogni capitolo e tutte le relative risorse (immagini, video e così via).

ATTENZIONE La maggior parte dei listati e degli snippet di codice sono stati testati con il browser Firefox della Mozilla Organization perché è quello che, più degli altri, ha implementato e implementa con certosina attenzione gli standard delle tecnologie web. In altri casi si è invece fatto riferimento ad altro browser (come Chrome e Opera) per evidenziare come l’applicazione di una particolare proprietà, elemento o script, vengano da essi gestite e interpretate. Il browser utilizzato è di norma specificato nella didascalia di riferimento.

Capitolo 1

Il layer strutturale: HTML5

Il World Wide Web è diventato oggi, più che in passato, uno spazio

virtuale dove le persone vogliono fare qualsiasi cosa: shopping sicuro, leggere libri, socializzare con altre persone, guardare video e ascoltare

musica, giocare con videogame di una certa complessità, editare documenti

e così via, un lungo elenco che potrebbe estendersi fino a dove arriva l’immaginazione.

Chiaramente, questa crescente e progressiva domanda di nuove feature, impone che sia i progettisti degli standard web sia gli sviluppatori delle piattaforme hardware/software che devono, poi, implementarle, siano al passo con i tempi rendendo utilizzabile e pratico ciò che è scritto in “freddi” documenti di specifiche tecniche.

Nel mare magnum delle tecnologie web esistenti o proposte, allo stato attuale il linguaggio di markup denominato HTML5 rappresenta quella emersa con maggior prepotenza e forza, entrando nelle vite, sia di semplici utenti che navigano in Internet sia di sviluppatori che progettano le pagine web, diventando, di fatto, lo strumento fondamentale attraverso il quale creare siti complessi e altamente interattivi.

Nel momento in cui scriviamo, tuttavia, HTML5, visto sia come mero linguaggio strutturale per la creazione delle pagine web sia come piattaforma che fornisce delle moderne API per lo sviluppo, si trova in una fase definita Draft Standard, ossia le sue specifiche non sono definitive e immodificabili ma, anzi, nel tempo potrebbero subire cambiamenti, aggiunte o addirittura eliminazioni di talune parti.

In ogni caso, la situazione descritta non deve preoccupare chi desidera imparare tale tecnologia, perché essa è già parte integrante dei moderni browser, cioè la maggior parte delle caratteristiche è già stata in essi implementata.

In più, si può essere certi che le eventuali aggiunte o modifiche, man mano che verranno inserite nella specifica, saranno, in tempi relativamente brevi,

subito prese in considerazione dai produttori dei principali browser, che anzi “lotteranno” tra loro per chi le avrà completamente implementate.

In definitiva, HTML5, e tutto l’ecosistema di API che vi ruota attorno, è una grossa opportunità che, sia i vendor dei browser sia gli sviluppatori di applicazioni web non si devono lasciar sfuggire, perché tale linguaggio rappresenta il presente e, certamente, il futuro del World Wide Web.

Breve storia della nascita di HTML5

HTML5, come oggi lo conosciamo e come poi vedremo meglio in seguito, è frutto di una gestazione che trae le sue origini, anche se per certi versi in modo indiretto, dal lavoro pionieristico iniziato nei lontani anni Novanta da un ricercatore di nome Tim Berners-Lee.

NOTA Tim Berners-Lee è uno scienziato e informatico inglese nato a Londra l’8 giugno del 1955 che, insieme all’informatico belga, Robert Cailliau, ha inventato il World Wide Web. Nel 1980, al CERN, progettò un sistema software chiamato ENQUIRE, che si avvaleva degli ipertesti e che aveva come obiettivo quello di consentire, in modo standard e con estrema facilità, a tutti i ricercatori di scambiarsi delle informazioni. Nel 1989 adattò tale originaria idea in modo che potesse applicarsi a Internet, progettando il primo browser e server web che ne permettesse il funzionamento. Nasceva così il Web come noi tutti lo conosciamo.

Berners-Lee creò in quel periodo un linguaggio definito HTML (HyperText Markup Language) mediante il quale era possibile, principalmente, formattare dei documenti testuali con degli speciali marcatori che consentivano di creare dei collegamenti tra testi, che potevano risiedere anche su server localizzati in posizioni differenti dal PC dove si stava utilizzando la pagina principale, permettendo dunque di compiere una sorta di “navigazione” tra le informazioni che essi rappresentavano.

Successivamente, ne sottopose una bozza di specifiche all’importante istituto che si occupava (e si occupa tutt’ora) di creare gli standard di Internet, denominato IETF (Internet Engineering Task Force), dove nel 1994 fu creato un gruppo di lavoro (HTMLWG, HTML Working Group) che, a partire da quelle specifiche creò poi il relativo documento numerato come versione 2 di HTML.

In quello stesso anno, Tim Berners-Lee fondò un consorzio che doveva esplicitamente occuparsi della standardizzazione delle tecnologie web, denominato W3C (World Wide Web Consortium), che, tra le altre cose, causò nel 1996 lo scioglimento del gruppo HTMLWG, inserito nell’organico del W3C.

Nel 1997 il consorzio redasse e pubblicò un’altra specifica di HTML, che aveva come numero di versione il 3.2, per poi aggiornarla nuovamente alla fine dello stesso anno con la versione 4.0.

Arriviamo al 1998, anno in cui il W3C pubblicò una bozza di specifiche per la formulazione di un linguaggio che nel 1999 denominò XHTML 1.0. Nel 2000 divenne una raccomandazione e nel 2001 fu pubblicata la versione 1.1. XHTML differiva da HTML perché basato sul linguaggio XML (Extensible Markup Language) e non, come il primo, sul linguaggio SGML (Standard Generalized Markup Language).

Nel 1999, inoltre, lo stesso consorzio pubblicò la versione 4.01 di HTML e anche la bozza di una specifica, denominata XHTML Extended Forms, rinominata poi XForms 1.0, con cui intendeva riprogettare i web form e diventata raccomandazione nel 2003.

Dopo un po’ di anni, siamo nel giugno del 2004, il W3C organizzò un convegno dal titolo “The W3C Workshop on Web Applications and Compound Documents”, con lo scopo di raccogliere idee e suggerimenti sul futuro dello sviluppo web.

A tale convegno parteciparono tutti i principali protagonisti del mondo legato all’implementazione delle tecnologie del Web; tra le tante indicazioni e proposte di carattere generale, furono ritenute interessanti le seguenti, manifestate dai membri di Mozilla Foundation e Opera Software.

Le specifiche e le caratteristiche di una tecnologia devono sempre essere aperte, visibili e pubblicamente commentabili.dai membri di Mozilla Foundation e Opera Software. Le caratteristiche di una tecnologia che una specifica

Le caratteristiche di una tecnologia che una specifica intende descrivere devono essere il meno astratte possibili, ossia devono essere descritte avvalendosi di pratici casi di uso.sempre essere aperte, visibili e pubblicamente commentabili. Se si progetta una nuova specifica la stessa deve

Se si progetta una nuova specifica la stessa deve avere una piena compatibilità con le tecnologie che intende modificare o aggiornare, in modo che sia gli sviluppatori web sia gli implementatori dei browser non vengano, improvvisamente e radicalmente, “investiti” da una nuova tecnologia che renda obsoleto e non funzionante tutto il loro lavoro pregresso.descrivere devono essere il meno astratte possibili, ossia devono essere descritte avvalendosi di pratici casi di

Se un documento contiene degli errori di authoring, gli stessi non

Se

un documento contiene degli errori di authoring, gli stessi non

dovrebbero interrompere il normale flusso di esecuzione della pagina web così come non dovrebbero essere visualizzati.

Vi dovrebbe essere una gestione degli errori progettata con maggiore

Vi

dovrebbe essere una gestione degli errori progettata con maggiore

correttezza e con un livello di dettaglio analitico.

Bisogna cercare di definire degli elementi di markup che siano in grado, dichiarativamente, di sostituire

Bisogna cercare di definire degli elementi di markup che siano in grado, dichiarativamente, di sostituire quello che, programmaticamente, un linguaggio di scripting, in equivalenza, è in grado di fare.

Bisogna privilegiare la creazione di profili indipendenti dal dispositivo in uso.

Bisogna privilegiare la creazione di profili indipendenti dal dispositivo in uso.

Al termine degli interventi si decise di effettuare una votazione per decidere se era giusto intraprendere una nuova strada per lo sviluppo dei futuri standard web seguendo le indicazioni che erano state formulate.

Purtroppo, per i proponenti, vi fu una sconfitta (11 voti contro e 8 a favore), che però non li demoralizzò affatto ma, anzi, li indusse a unirsi e a creare un nuovo gruppo di lavoro separato dal W3C che denominarono WHATWG (Web Hypertext Application Technology Working Group).

Tra le motivazioni che addussero contro il consorzio e che causarono una rottura con esso, è interessante citare le seguenti, ossia che il W3C:

era sempre stato distante dalle reali esigenze degli sviluppatori web avendo sempre proposto standard teorici e astratti e, dunque, poco pratici;esso, è interessante citare le seguenti, ossia che il W3C: non si era mai impegnato più

non si era mai impegnato più di tanto a creare o ad aggiornare gli standard in modo incrementale in modo che gli “attori” dello sviluppo del web potessero avere il tempo di adeguarsi di conseguenza e in modo indolore;standard teorici e astratti e, dunque, poco pratici; non aveva più aggiornato la specifica su HTML

non aveva più aggiornato la specifica su HTML dal lontano 1999, anno in cui uscì la versione 4.01;il tempo di adeguarsi di conseguenza e in modo indolore; non aveva tenuto in considerazione il

non aveva tenuto in considerazione il fattore di compatibilità quando aveva progettato il linguaggio XHTML e XForms. Per esempio, se si desiderava progettare con rigore delle pagine web aderenti a XHTML si doveva, primariamente, cambiare il MIME Type da text/html , proprio di HTML, a application/xhtml+xml e scrivere i relativi elementi text/html, proprio di HTML, a application/xhtml+xml e scrivere i relativi elementi

di markup secondo le nuove rigide regole sintattiche imposte da XHTML. Come conseguenza di ciò, se si scrivevano delle pagine XHTML con degli errori, l’elaborazione delle stesse sarebbe stata interrotta, e tale comportamento era, a loro avviso, ritenuto draconiano (draconian error handling), laddove il comportamento di HTML rispetto agli errori erra flessibile e senza avvisi.

NOTA Il termine errore draconiano trae la sua semantica dal legislatore dell’antica Grecia Dracone che, all’epoca in cui visse, scrisse un codice di norme notevolmente rigido e duro.

Nel 2004 nacque, dunque, il citato gruppo WHATWG, fondato da alcuni membri di Mozilla Foundation, Apple e Opera Software, che aveva come obiettivo o mission principale quella di sviluppare e promuovere nuove tecnologie che potevano migliorare e far avanzare il mondo del Web.

Esso iniziò subito a lavorare su delle specifiche denominate Web Applications 1.0 e Web Forms 2.0, che avevano come scopo quello di aggiornare in maniera significativa l’attuale HTML ma in modo incrementale e compatibile.

Nel 2006, il padre del primigenio HTML, il già citato Tim Berners-Lee, si rese conto dell’importanza del lavoro che si stava svolgendo in seno al WHATWG e propose l’istituzione di un altro gruppo di lavoro in seno al W3C (che nacque ufficialmente nel 2007), che doveva con essi collaborare per la creazione degli standard web del futuro.

In seguito alla nascita di tale gruppo di lavoro, e come primo atto di collaborazione con il gruppo WHATWG, si decise di cambiare il nome della specifica da Web Applications 1.0 in HTML5.

Nel 2009, dato che HTML5 era divenuto la principale e più importante specifica che trattava del futuro dello sviluppo web, si decise che la specifica XHTML 2.0 dovesse cessare.

Oggi, anno 2012, se vogliamo effettuare un rigido paragone con i livelli delle specifiche come statuite dal W3C, nonostante la specifica di HTML5 sia ancora in uno stato di Working Draft (ma dovrebbe presto raggiungere lo stato di Candidate Recommendation per divenire una Recommendation

nel 2022), i principali vendor di browser stanno continuando senza sosta a implementare tutte le sue eccitanti e nuove caratteristiche perché tale linguaggio rappresenta un’innovazione davvero importante per lo sviluppo delle moderne applicazioni web.

NOTA Quando parla di HTML5, il gruppo WHATWG preferisce riferirsi a esso semplicemente come HTML, senza attribuirgli un numero di versione, e lo considera semplicemente come “l’ultimo lavoro su HTML”. In effetti, nella specifica è precisato che il termine HTML5 altro non è che una buzzword che si riferisce alle moderne tecnologie di sviluppo per il Web, la maggior parte delle quali sono sviluppate dal WHATWG, in autonomia o in collaborazione con il W3C e lo IETF.

Le specifiche secondo il W3C Per meglio orientarsi nell’oscuro labirinto dei termini addottati per le specifiche dal W3C, può essere utile conoscere i livelli, o stati di avanzamento, di una specifica.

Working Draft (WD): stato in cui la specifica è disponibile pubblicamente a tutti per una sua analisi. (WD): stato in cui la specifica è disponibile pubblicamente a tutti per una sua analisi. In questa fase è consentito effettuare modifiche alle sue caratteristiche.

Last Call Working Draft: stato in cui si specifica una deadline per eventuali commenti, si sollecitano recensioni pubbliche : stato in cui si specifica una deadline per eventuali commenti, si sollecitano recensioni pubbliche e dai working group dipendenti.

Candidate Recommendation (CR): stato in cui le caratteristiche di maggior rilievo della specifica non possono subire cambiamenti, (CR): stato in cui le caratteristiche di maggior rilievo della specifica non possono subire cambiamenti, a meno che non vi siano particolari e importanti richieste da parte degli implementatori.

Proposed Recommendation (PR): stato in cui la specifica è sottoposta all’approvazione del W3C Advisory Council. In questa (PR): stato in cui la specifica è sottoposta all’approvazione del W3C Advisory Council. In questa fase è difficile che siano accettati ed effettuati dei cambiamenti alle sue caratteristiche.

W3C Recommendation (REC): stato in cui la specifica è uno standard e può essere impiegato nei reali (REC): stato in cui la specifica è uno standard e può essere impiegato nei reali sistemi di produzione.

ATTENZIONE Allo stato attuale, Il gruppo di lavoro WHATWG non ritiene più importante considerare la specifica su HTML5 come un’unica entità sottoposta a un iter procedurale che ne sancisce il livello di maturità. Piuttosto, invece, la considera in termini pratici come scomposta in sezioni, dove ciascuna sezione può avere un differente livello di maturità e utilizzo. In pratica, per il gruppo di lavoro la fatidica data del 2022 in cui dovrà essere rilasciata la specifica in modo completo non ha più alcuna rilevanza perché per esso è importante concentrarsi e rendere chiaro cos’è già da oggi possibile utilizzare per le proprie applicazioni web, adottando quindi un modello di gestione della specifica non rigido, ma a sezioni e incrementale.

Elementi di base di una pagina web

Una pagina web è composta fondamentalmente da marcatori, o tag, che stabiliscono delle regole su come debba essere strutturato e formattato il relativo documento che intendono descrivere.

Questi tag possono essere di tipo two-sided (detti anche normal elements), espressi mediante l’indicazione di un tag di apertura e chiusura nella forma <elem_name></elem_name>, oppure di tipo one-sided (detti anche void o empty elements), espressi mediante l’indicazione del solo tag di apertura nella forma <elem_name> o <elem_name />. Inoltre essi possono avere degli attributi, ossia del testo scritto al loro interno in una forma chiave/valore, che permettono di specificare opzioni o dettagli supplementari.

TERMINOLOGIA Spesso, i termini tag ed elemento HTML si usano in modo intercambiabile. In realtà tra di essi vi è una differenza che può essere sintetizzata nel seguente modo: un elemento è quel nome informativo che indica la semantica di un oggetto, mentre un tag è l’elemento racchiuso tra le parentesi angolari <>. Per esempio, p è un elemento HTML che descrive un generico paragrafo, mentre <p> ne rappresenta il relativo tag di apertura, così come </p> ne rappresenta il relativo tag di chiusura. Inoltre, in via più estensiva e generalizzata, possiamo anche indicare un elemento HTML come un’entità composta da tre parti: un tag di apertura (<p>), il contenuto (Ciao a tutti) e un tag di chiusura (</p>).

Vediamo allora un primo esempio di definizione di una semplice pagina HTML, scritta secondo la sintassi propria di HTML5, che renderizza a video dei comuni paragrafi.

Listato 1.1 File PrimaPagina.html.

<!DOCTYPE html> <html> <head> <title>La nostra prima pagina in HTML5</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,

voglia

adipisci velit

<p>Non c'è nessuno a cui piaccia il dolore in sé, che lo ricerchi e che

</p>

riceverlo, semplicemente perché è dolore </body> </html>

</p>

NOTA Le regole per la scrittura dei tag in HTML5 sono molto flessibili. Infatti, per gli elementi vuoti, ossia per quelli che non possono avere un contenuto, come per esempio br, la presenza del carattere slash di chiusura (/) non è obbligatoria (si può scrivere <br> o <br />). Inoltre, i tag e gli attributi possono essere scritti con caratteri in maiuscolo, minuscolo o addirittura in modo misto; per alcuni elementi i tag di apertura o chiusura possono essere omessi; per gli attributi booleani (per esempio checked) non è necessario definire il valore relativo, che è indicato automaticamente dalla presenza/assenza dell’attributo (checked = "checked" è ridondante), mentre per gli altri il valore può essere scritto tra singoli apici, doppi apici o senza apici. La flessibilità di HTML5 non dovrebbe però essere “abusata”. È buona norma darsi delle regole e cercare di essere il più possibile rigorosi, come se si lavorasse su documenti XHTML; in questo modo si migliorano la leggibilità, la scalabilità e la semantica dei documenti prodotti.

la scalabilità e la semantica dei documenti prodotti. Figura 1.1 Output del file PrimaPagina.html (Firefox). Nel

Figura 1.1 Output del file PrimaPagina.html (Firefox).

Nel Listato 1.1 notiamo la presenza, come primo elemento, del tag <!DOCTYPE html>, che rappresenta un’istruzione che dà al browser un’indicazione del tipo di codice di cui dovrà eseguire il parsing. In pratica, un documento HTML, tramite l’elemento DOCTYPE, dice al browser che il suo codice è conforme allo standard ivi indicato, e nel nostro caso esso asserisce che è conforme a HTML5.

Un approfondimento del tag DOCTYPE Il DOCTYPE o Document Type Declaration, è un elemento HTML che deve essere posizionato come prima istruzione nell’ambito del documento che descrive e non deve avere altre istruzioni che lo precedono (anche righe vuote), altrimenti alcuni browser potrebbero trattare la pagina come se non ne avesse alcuno. Come già detto, il suo scopo principale è quello di indicare il linguaggio di markup che un browser deve utilizzare e le regole, stabilite in un apposito DTD (Document Type Definition), che deve

eseguire per una corretta renderizzazione del documento. Se un documento non ha la definizione di un DOCTYPE, il browser assume che il codice è scritto in un modo detto quirks mode, mentre nel caso contrario assume che il codice è scritto in un modo detto standards mode. Di seguito riportiamo alcuni dei più comuni DOCTYPE utilizzabili.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">, per HTML 4.01 Strict. , per HTML 4.01 Strict.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, per HTML 4.01 Transitional. , per HTML 4.01 Transitional.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">, per HTML 4.01 Frameset. , per HTML 4.01 Frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">, per XHTML 1.0 Strict. >, per XHTML 1.0 Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, per XHTML 1.0 , per XHTML 1.0

Transitional.

<!DOCTYPE html PUBLIC, per XHTML 1.0 Transitional. "-//W3C//DTD XHTML 1.0 Frameset//EN"

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">, per XHTML 1.0

Frameset.

<!DOCTYPE html, per XHTML 1.0 Frameset. PUBLIC "-//W3C//DTD XHTML 1.1//EN"

PUBLIC

"-//W3C//DTD

XHTML

1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">, per XHTML 1.1.

<!DOCTYPE html>, per HTML5. , per HTML5.

Abbiamo poi il tag <html>, il principale contenitore di un documento HTML, che è indicato anche con il temine di elemento root (radice). Al suo interno si inseriscono tutti gli altri elementi HTML. Segue il tag <head>, che rappresenta una sorta di intestazione (header section): qui si inseriscono dei tag che non sono interpretati come elementi che visualizzano o formattano qualcosa direttamente nell’area di renderizzazione del browser. Si tratta di tag come i seguenti.

<title>: indica il titolo della pagina e ha un grande valore semantico. Viene visualizzato nella : indica il titolo della pagina e ha un grande valore semantico. Viene visualizzato nella barra del titolo dei browser.

<meta>: permette, tra le altre cose, di indicare delle parole inerenti alla tipologia o alle : permette, tra le altre cose, di indicare delle parole inerenti alla tipologia o alle caratteristiche del sito web che si è progettato al fine di poterle utilizzare per l’indicizzazione dai motori di ricerca e di specificare la codifica di caratteri utilizzata nei propri documenti HTML.

NOTA L’elemento meta viene utilizzato per fornire dei metadati per il documento HTML, principalmente attraverso l’attributo name, utilizzato per indicare il nome del metadato, e può avere come valori author (fornisce il nome dell’autore della pagina),

description (fornisce una descrizione della pagina); keywords (fornisce una serie di parole rilevanti per la pagina) e così via. Abbiamo poi l’attributo content, che è utilizzato per indicare il valore del corrispondente attributo name.

<script>: consente di inserire del codice di scripting nella pagina web. : consente di inserire del codice di scripting nella pagina web.

<link>: consente di collegare al documento altre risorse a esso esterne. : consente di collegare al documento altre risorse a esso esterne.

Infine, dopo il tag </head> abbiamo il tag <body>, che rappresenta la sezione più importante di una pagina web, poiché al suo interno sono definiti tutti quei tag che descrivono il contenuto da visualizzare nel browser. Nel nostro esempio, usiamo il tag <p>, che indica di formattare il testo in esso indicato come un paragrafo (da notare come il browser abbia posto degli spazi tra i vari paragrafi), e il tag <br>, che indica di spezzare una riga.

Inserimento e formattazione di base del testo

Il testo, visto come una mera sequenza di caratteri che hanno un qualche significato, è uno dei contenuti principali delle pagine web.

Esso viene inserito nei documenti HTML attraverso dei tag che hanno un preciso valore semantico e visuale.

NOTA Lo scopo di questo capitolo è guidare il lettore nella costruzione di un documento HTML, partendo dalle basi. Nel Capitolo 2 vedremo invece la formattazione dei documenti HTML attraverso i CSS. In particolare nel paragrafo “Il box model” vedremo una ulteriore distinzione dei tag HTML dal punto di vista dei CSS.

Sinora, tra i vari tag utilizzabili per la suddetta finalità, abbiamo incontrato solamente il tag <p> che permette di definire un paragrafo il cui testo viene di norma visualizzato con l’aggiunta di una spaziatura superiore e inferiore.

Oltre a tale tag ne esistono altri, come quelli:

per la definizione dei titoli (heading ), dal più importante, visualizzato heading), dal più importante, visualizzato

in grassetto con il font più grande (<h1>), al meno importante,

visualizzato in grassetto con font più piccolo (<h6>), passando per titoli intermedi visualizzati con font di dimensioni progressivamente

inferiori (<h2>, <h3>, <h4> e <h5>);

per la definizione di testo in grassetto o con un’enfasi forte (<b> per bold o <strong> per strongly emphasized ); <b> per bold o <strong> per strongly emphasized);

per la definizione di testo in corsivo o con enfasi (<i> per italico o <em> per emphasized ); <i> per italico o <em> per emphasized);

per la definizione di testo in font monospaziato (<kbd> per keyboard , <code> e <samp> per sample ); <kbd> per keyboard, <code> e <samp> per sample);

per la definizione di testo preformattato (<pre> per preformatted ); (<pre> per preformatted);

per la definizione di un apice o un esponente (<sup> per superscript ) o <sup> per superscript) o

di un pedice (<sub> per subscript);

per la definizione di una sezione il cui testo è una citazione( <sup> per superscript ) o di un pedice ( <sub> per subscript ); ( <blockquote>

(<blockquote>).

ATTENZIONE

Nell’elenco dei tag riportato ne abbiamo inseriti alcuni che, di fatto, formattano il testo dando una sorta di regola su come esso debba essere visualizzato. In effetti, li abbiamo qui elencati perché non abbiamo ancora affrontato i CSS (Cascading Style Sheets), che rappresentano il linguaggio principe per indicare delle regole di formattazione e visualizzazione degli elementi HTML. In ogni caso, per HTML5 i tag <b>, <i>, <em> e <strong> non sono solo di presentazione ma hanno anche uno scopo semantico, ossia danno un “significato” agli elementi che racchiudono o, per dirla in un altro modo, il loro nome riflette lo scopo per cui sono stati progettati. Così, per esempio, l’elemento i rappresenta una porzione di testo che indica, in modo descrittivo e significativo, una voce alternativa o uno stato d’animo il cui contenuto è tipicamente presentato in corsivo.

Listato 1.2 File Testo.html.

<!DOCTYPE html> <html> <head> <title>Tutto sul testo</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <hgroup> <h1>Benvenuti nel fantastico mondo della programmazione del web</h1> <h3>Un libro per tutti dove imparerete come diventare dei web

developer!!!</h3>

</hgroup> <p>&copy; 2012 Pellegrino <b><i>~thp~</i></b> Principe</p> <p><strong>N.B.</strong> Ricordiamo di avere sempre a portata di mano la più recente specifica di HTML5<sup>1</sup></p> <h5><sup>1</sup> http://www.whatwg.org/specs/web-apps/current-work/multipage/

</h5>

<p>Un pò di codice di esempio in JavaScript:</p> <pre> var j=10; var data = []; for(var i=0; i < j; i++) data[i] = i*2; </pre> <p>Ecco una citazione su JavaScript dal guru Douglas Crockford:</p> <blockquote cite="http://javascript.crockford.com/javascript.html"> <em>JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript…

</em>

</blockquote>

</body>

</html>

Figura 1.2 Output del file Testo.html (Firefox). Il Listato 1.2 mostra come utilizzare i tag

Figura 1.2 Output del file Testo.html (Firefox).

Il Listato 1.2 mostra come utilizzare i tag precedentemente esaminati per creare una struttura di documento HTML dove abbiamo:

due titoli, inseriti nel tag <hgroup> , che consente di raggruppare titoli secondo una strutturazione per livelli multipli (per esempio <hgroup>, che consente di raggruppare titoli secondo una strutturazione per livelli multipli (per esempio titolo e sottotitolo);

una serie di paragrafi, dove in alcune parti del testo sono stati usati dei marcatori per dare una certa importanza (<strong> ) o enfatizzare ( <em> ) determinate parole. È stato usato anche il tag <strong>) o enfatizzare (<em>) determinate parole. È stato usato anche il tag <sup>, che ha permesso di creare un riferimento in apice sul carattere 1;

del testo che rappresenta del codice JavaScript che è stato visualizzato in modo preformattato (<pre> ), ossia considerando tutti gli spazi e i ritorni a capo così come sono <pre>), ossia considerando tutti gli spazi e i ritorni a capo così come sono stati, parola per parola, digitati;

del testo che indica una citazione di un guru del linguaggio JavaScript inserita nel tag <blockquote> sul quale abbiamo usato l’attributo cite per indicare l’indirizzo web della pagina originaria. <blockquote> sul quale abbiamo usato l’attributo cite per indicare l’indirizzo web della pagina originaria.

Caratteri speciali e spazi Nel Listato 1.2 abbiamo utilizzato una speciale combinazione di caratteri formati dal simbolo di ampersand (&), un nome abbreviato e il carattere punto e virgola per far sì che il browser visualizzasse il simbolo di copyright (&copy;). Esistono molte combinazioni di tali caratteri, definiti nel loro insieme come character entities (alcuni sono riportati nella Tabella 1.1), che consentono, per l’appunto, di visualizzare in una

pagina web dei caratteri speciali. Tra di essi, uno spesso utilizzato è quello codificato come &nbsp;, denominato non-breaking space. Consente di “forzare” l’inserimento di caratteri di spazio ed è indispensabile quando si ha la necessità di visualizzare parole separate non da uno, ma da più spazi.

Tabella 1.1 Alcuni caratteri speciali.

Descrizione

Nome dell’entità o equivalente codice numerico

Risultato

Minore di

&lt; (&#60;)

<

Maggiore di

&gt; (&#62;)

>

“E” commerciale

&amp; (&#38;)

&

Euro

&euro; (&#8364;)

Dollaro

&dollar; (&#36;)

$

Marchio registrato

&reg; (&#174;)

®

Marchio commerciale

&trade; (&#8482;)

Freccia a sinistra

&larr; (&#8592;)

Freccia a destra

&rarr; (&#8594;)

Freccia in alto

&uarr; (&#8593;)

Freccia in basso

&darr; (&#8595;)

Seme di cuori

&hearts; (&#9829;)

Ritorno a capo

&crarr; (&#8629;)

Apice singolo

&prime; (&#8242;)

'

Apice doppio

&Prime; (&#8243;)

"

Frazione 1/2

&frac12; (&#189;)

½

Generazione di liste

Le liste sono un utile strumento per mostrare del testo sotto forma di elenchi ordinati secondo una numerazione oppure non ordinati. In HTML5 gli elenchi si creano mediante i tag <ol>, per le liste ordinate (ordered list), e <ul> per le liste non ordinate (unordered list). Per le singole voci delle liste dobbiamo utilizzare, invece, il tag <li> (list item).

Abbiamo, inoltre, la possibilità di generare delle liste dette di definizione, tramite il tag <dl> (definition list), caratterizzate dalla presenza di un termine (tag <dt>, definition term) e dalla relativa descrizione (tag <dd>, definition description).

Listato 1.3 File Liste.html.

<!DOCTYPE html> <html> <head> <title>Liste e definizioni</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <h4>Elenco dei 10 linguaggi di programmazione più popolari secondo

TIOBE<sup>1</sup>:</h4>

<ol>

<li>Java</li> <li>C</li> <li>C++</li> <li>C#</li> <li>PHP</li> <li>Objective-C</li> <li>Visual Basic</li> <li>Python</li> <li>JavaScript</li> <li>Perl</li> </ol> <hr /> <h4>Elenco arbitrario dei principali sistemi operativi e dei loro principali

artefici:</h4>

<ul>

<li>GNU/Linux

<ul>

<li>Linus Torvalds per il kernel

</li>

<li>Richard Stallman per la suite GNU </ul> </li> <li>Windows <ul>

<li>Microsoft Inc.</li> </ul> </li> <li>Apple OS

</li>

<ul>

<li>Apple Inc.</li> </ul> </li> <li>BSD Unix <ul>

<li>CSRG (Computer Systems Research Group)</li> <li>UC Berkeley</li> </ul> </li> </ul> <hr />

<p>1</p>

<dl>

<dt>TIOBE</dt> <dd>The TIOBE Programming Community index is…</dd> </dl> </body> </html>

</dl> </body> </html> Figura 1.3 Output del file Liste.html (Firefox). Il Listato

Figura 1.3 Output del file Liste.html (Firefox).

Il Listato 1.3 crea una pagina HTML dove sono presenti: una lista ordinata, che mostra un elenco dei 10 linguaggi di programmazione più popolari; una lista non ordinata, che mostra un elenco dei principali sistemi operativi dove, in più, per ciascuno di essi è presente un’altra lista, annidata e non ordinata che mostra l’elenco di chi li ha inventati; una lista di definizione per il termine TIOBE usato nel titolo h4 di inizio pagina; il tag <hr>

(horizontal rule) che permette di mostrare una linea orizzontale e che

funge da elemento separatore tra le sezioni di una pagina o, per usare la sua estensione terminologica adottata nella specifica di HTML5, da indicatore

di

un break tematico tra paragrafi (come si può avere, per esempio, quando

si

ha una transizione tra i vari argomenti di una sezione, oppure in un

cambiamento di scena in una storia).

Per quanto riguarda le liste ordinate può essere interessante sapere che il tag <ol> accetta i seguenti attributi:

reversed, che, se presente, permette di mostrare l’elenco in modo discendente (per esempio …, 3 , che, se presente, permette di mostrare l’elenco in modo discendente (per esempio …, 3, 2, 1);

start, che indica il numero a partire dal quale iniziare la numerazione dell’elenco (di default , che indica il numero a partire dal quale iniziare la numerazione dell’elenco (di default 1). Ciò significa che l’istruzione <ol start="5"> farà cominciare la lista con il numero 5;

type, che consente di specificare il tipo di marcatore da utilizzare nell’elenco tra 1 (per , che consente di specificare il tipo di marcatore da utilizzare nell’elenco tra 1 (per i numeri decimali, 1., 2., 3. e così via), a (per l’alfabeto latino in minuscolo, a., b., c. e così via), A (per l’alfabeto latino in maiuscolo, A., B., C. e così via), i (per i numeri romani in minuscolo e i., ii., iii. e così via) e I (per i numeri romani in maiuscolo, I., II., III. e così via).

Per il tag <li>, invece, se lo stesso è “figlio” del tag <ol>, può essere

utilizzato l’attributo value, che consente di impostare un numero arbitrario.

In questo caso, gli eventuali elementi li a esso successivi avranno la

numerazione che partirà seguendo il predetto valore impostato.

Utilizzo delle tabelle

Le tabelle sono degli elementi strutturali formati da una griglia di righe e colonne, dove ciascuna intersezione rappresenta una cella all’interno della quale viene posto del contenuto che generalmente è di tipo testuale o grafico.

La definizione di una tabella si effettua impiegando i seguenti tag principali.

<table>: rappresenta l’elemento principale per la strutturazione di una tabella entro il quale saranno nidificati : rappresenta l’elemento principale per la strutturazione di una tabella entro il quale saranno nidificati gli altri elementi di descrizione della stessa.

<tr>: rappresenta una riga di celle in una tabella ( table row ). : rappresenta una riga di celle in una tabella (table row).

<td>: rappresenta una singola cella dove viene inserito un dato tabellare ( table data ). : rappresenta una singola cella dove viene inserito un dato tabellare (table data).

<th>: rappresenta una cella di intestazione ( table header ). : rappresenta una cella di intestazione (table header).

<thead>: rappresenta un blocco di righe che contengono delle celle da utilizzare come intestazione ( : rappresenta un blocco di righe che contengono delle celle da utilizzare come intestazione (column label) per l’elemento table.

<tfoot>: rappresenta un blocco di righe che contengono delle celle da utilizzare al piede ( : rappresenta un blocco di righe che contengono delle celle da utilizzare al piede (column summary) dell’elemento table.

<tbody>: rappresenta un blocco di righe che contengono le celle del contenuto principale della tabella. : rappresenta un blocco di righe che contengono le celle del contenuto principale della tabella.

<colgroup>: rappresenta un raggruppamento di una o più colonne (definito attraverso il valore dell’attributo span : rappresenta un raggruppamento di una o più colonne (definito attraverso il valore dell’attributo span) cui applicare una determinata formattazione, evitando così di ripeterla per ogni colonna.

<col>: rappresenta una o più colonne (il cui numero è definito mediante l’attributo span ) : rappresenta una o più colonne (il cui numero è definito mediante l’attributo span) di un gruppo di colonne rappresentate dall’elemento colgroup. Tale elemento può essere figlio solo di un elemento colgroup che non abbia impostato l’attributo span.

<caption>: rappresenta il titolo della tabella. : rappresenta il titolo della tabella.

Per quanto riguarda la modalità di dimensionamento di una tabella, delle righe e delle colonne è importante dire che, di default, la quantità di testo inserito in una cella ne causa il suo dimensionamento, che si ripercuote, in

automatico sulle altre celle relative alla sua stessa posizione ma che si trovano nelle altre righe.

La tabella, in pratica, si espande o si contrae in maniera fluida a seconda del contenuto che struttura.

Listato 1.4 File Tabelle.html.

<!DOCTYPE html> <html> <head> <title>Tabelle</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <table border="1"> <caption>Popolarità dei linguaggi di programmazione</caption> <colgroup> <col span="3" width="250px" /> <col span="2" width="300px" /> </colgroup> <thead> <tr>

<th>Posizione novembre 2011</th> <th>Posizione novembre 2010</th> <th>Linguaggio</th> <th>Rating novembre 2011</th> <th>Delta novembre 2010</th> </tr> </thead> <tfoot> <tr>

<td><strong>Totale percentuale</strong></td> <td>&nbsp;</td> <td>&nbsp;</td>

<td><strong>75.979%</strong></td>

<td>&nbsp;</td>

</tr>

</tfoot>

<tbody>

<tr>

<td>1</td><td>1</td><td>Java</td><td>17.874%</td><td>-0.63%</td>

</tr>

<tr>

<td>2</td><td>2</td><td>C</td><td>17.322%</td><td>+0.61%</td>

</tr>

<tr>

<td>3</td><td>3</td><td>C++</td><td>8.084%</td><td>-1.41%</td>

</tr>

<tr>

<td>4</td><td>5</td><td>C#</td><td>7.319%</td><td>+1.61%</td>

</tr>

<tr>

<td>5</td><td>4</td><td>PHP</td><td>6.096%</td><td>-1.72%</td>

</tr>

<tr>

<td>6</td><td>8</td><td>Objective-C</td><td>5.983%</td><td>+2.79%

</td>

</tr>

<tr>

<td>7</td><td>7</td><td>Visual Basic</td><td>5.041%</td>

<td>-0.43%</td>

 

</tr>

<tr>

<td>8</td><td>6</td><td>Python</td><td>3.617%</td><td>-2.06%</td>

</tr>

<tr>

<td>9</td><td>11</td><td>JavaScript</td><td>2.565%</td><td>+0.90%

</td>

 

</tr>

<tr>

<td>10</td><td>9</td><td>Perl</td><td>2.078%</td><td>-0.39%</td>

</tr>

</tbody>

</table>

</body>

</html>

</table> </body> </html> Figura 1.4 Output del file Tabelle.html (Firefox). Il

Figura 1.4 Output del file Tabelle.html (Firefox).

Il Listato 1.4 definisce una tabella dove sono riportati un elenco dei linguaggi di programmazione più popolari ordinati secondo un rating. A tal fine, notiamo l’utilizzo del tag principale <table>, che conterrà tutta la struttura della tabella, sul quale impostiamo l’attributo border con il valore di 1 al fine di far apparire attorno alle celle un bordo; in sua assenza, le stesse di default non l’avranno.

Nel tag <table>, definiamo poi i tag per l’intestazione, per il sommario e per il corpo della tabella stessa che conterranno le relative righe e celle.

Per quanto attiene ai tag <thead>, <tfoot> e <tbody>, è importante dire che il loro utilizzo dovrebbe avvenire sempre in modo congiunto, perché un

browser li potrebbe usare in modo che, per esempio, scorrendo il corpo della tabella, le sezioni dell’header e del footer rimangano sempre visibili. Ancora, in caso di stampa di una tabella che si estende per più pagine, le righe dell’header e del footer potrebbero essere stampate all’inizio e alla fine di ciascuna pagina. Inoltre, i tag citati dovrebbero essere definiti in modo che il tag <thead> appaia dopo il tag <caption> e il tag <colgroup>, se presenti, e prima del tag <tfoot> cui fare seguire il tag <tbody>.

NOTA Il tag <tfoot> può essere scritto anche dopo il tag <tbody>, ma in ogni caso non ve ne può essere più di uno.

Infine, definiamo un raggruppamento di colonne con il tag <colgroup>, in modo che le prime tre colonne (attributo span="3" del primo tag <col>) di ogni riga abbiano una larghezza di 250 pixel, mentre le ultime due colonne (attributo span="2" del secondo tag <col>) abbiano una larghezza di 300 pixel.

Gli attributi colspan e rowspan I tag <td> e <th> possono avvalersi degli attributi colspan e rowspan per indicare, rispettivamente, per quante colonne o su quante righe una cella si deve espandere al fine di creare delle strutture tabellari di maggiore complessità. Lo Snippet 1.1 crea due piccole tabelle dove ogni cella di tipo th è espansa o unita in tre celle. Nella prima tabella l’estensione è effettuata per colonne mentre nella seconda è effettuata per righe.

Snippet 1.1 Esempio di utilizzo degli attributi colspan e rowspan.

<table border="1"> <tr>

<th colspan="3">Colori RGB</th> </tr> <tr>

<td>Red</td>

<td>Green</td>

<td>Blue</td>

</tr>

</table>

<table border="1"> <tr>

<th rowspan="3">Colori RGB</th> <td>Red</td> </tr> <tr>

<td>Green</td>

</tr>

<tr>

<td>Blue</td>

</tr>

</table>

Figura 1.5 Output dello Snippet 1.1. Esempio di utilizzo degli attributi colspan e rowspan (Firefox).

Figura 1.5 Output dello Snippet 1.1. Esempio di utilizzo degli attributi colspan e rowspan (Firefox).

Navigazione tra i contenuti delle pagine web

Quando apriamo una pagina web, uno dei suoi elementi fondamentali è rappresentato da qualche porzione di testo o immagine su cui si può fare clic per spostarsi (navigare) verso un altro documento HTML o sua specifica sezione.

Questi elementi, denominati collegamenti ipertestuali (hyperlink, hypertext anchor o semplicemente link), si creano mediante il tag <a> (anchor tag), su cui si imposta l’attributo href (hypertext reference) con l’indirizzo URL (Uniform Resource Locator) della risorsa verso cui navigare, se la stessa è un’altra pagina HTML, o reperire, se la stessa è un file di tipo differente, come per esempio un file di tipo .zip, .avi, .pdf, .exe e così via.

Per quanto attiene all’URL, che – ripetiamo – permette di identificare e reperire documenti e risorse presenti sul Web, esso è costituito dalle seguenti parti.

Il protocollo o schema, ovvero il metodo di accesso alla risorsa. Oltre allo schema di accesso HTTP , che è il protocollo nativo del Web, è possibile fornire a un URL HTTP, che è il protocollo nativo del Web, è possibile fornire a un URL altri schemi tra i quali: FTP (File Transfer Protocol) per il trasferimento di file; NEWS per l’accesso ai gruppi di discussione; MAILTO per l’inoltro della posta elettronica; FILE per l’accesso a risorse del filesystem locale e così via.

Il nome di dominio (DNS) o l’equivalente indirizzo IP dell’host dove è localizzata la risorsa.per l’accesso a risorse del filesystem locale e così via. Il path e il nome della

Il path e il nome della risorsa, ovvero la sua identità.indirizzo IP dell’host dove è localizzata la risorsa. Le eventuali credenziali di accesso nella forma

Le eventuali credenziali di accesso nella forma user_name:password@ da fornire se la risorsa non è liberamente accessibile. In questo caso bisogna prestare user_name:password@ da fornire se la risorsa non è liberamente accessibile. In questo caso bisogna prestare attenzione al fatto che la password è trasmessa in chiaro e pertanto intercettabile.

Una eventuale porta di connessione del server nel formato :port . :port.

Eventuali parametri (query string ) da fornire al server nel formato ? query string) da fornire al server nel formato ?

key_1=val_1&key_2= val_2&key_n=val_n, ossia con il carattere punto

interrogativo cui seguono le coppie di nome chiave/valore separate dal carattere della “e” commerciale.

Un eventuale fragment identifier , ovvero una sequenza di caratteri nel formato #fragment_id che indica

Un eventuale fragment identifier, ovvero una sequenza di caratteri nel formato #fragment_id che indica una risorsa a cui puntare all’interno di un documento HTML.

Per meglio comprendere l’utilizzo degli URL, riportiamo alcuni esempi partendo dallo Snippet 1.2, dove la stringa http:// rappresenta lo schema di accesso, la stringa www.pellegrinoprincipe.com il nome DNS dell’host che ospita la risorsa e la stringa /CSHARP/ndui/ndui.html l’identità della risorsa.

Snippet 1.2 Esempio di URL.

http://www.pellegrinoprincipe.com/CSHARP/ndui/ndui.html

Lo Snippet 1.3 indica, invece, la connessione verso un server in ascolto sulla porta 888 con un accesso tramite autenticazione e con una query string dove passiamo i parametri

s e f con i rispettivi valori.

Snippet 1.3 Esempio di URL.

http://pippo:pappa@www.searching.com:888/do?s=hal&f=11

Infine, lo Snippet 1.4 mostra come utilizzare un URL in cui il file test.html riferisce a un elemento HTML provvisto di un attributo id="search". In questo modo la pagina si aprirà direttamente su tale elemento grazie all’utilizzo dell’identificatore #search.

Snippet 1.4 Esempio di URL.

http://www.find.org/test.html#search

URI e URN Oltre agli URL abbiamo anche gli URI (Uniform Resource Identifier) e gli URN (Uniform Resource Name). Un URI è un meccanismo generico utilizzato per identificare o localizzare una risorsa oppure per descrivere un nome. In effetti, un URL è un URI che permette di reperire una risorsa fornendo un indirizzo di localizzazione, mentre un URN è un URI che identifica (etichetta) una risorsa tramite un nome. Così, per esempio, possiamo usare un URN per identificare univocamente un determinato libro mediante il suo ISBN (urn:isbn:8850329881) e poi un URL che consente di ottenerlo

(file:///file_server/books/books.pdf).

Gli URL che abbiamo visto nei precedenti esempi sono detti assoluti perché l’indicazione delle risorse è avvenuta specificando sempre tutte le parti che li costituiscono. Abbiamo comunque la possibilità di referenziare una risorsa utilizzando gli URL in modo relativo, ovvero scrivendoli

secondo una convenzione che fa riferimento a un altro URL preso come base di partenza per la risoluzione del percorso di ricerca.

In pratica, la risorsa indicata punta a un file o a una directory la cui ricerca

parte dalla directory corrente dove si trova la pagina che ha indicato l’URL

di reperimento.

Così, se abbiamo, per esempio, nella pagina show_images.html il codice <a href="photo.html">Photo</a>, quando faremo clic su tale link il browser ci porterà automaticamente alla pagina photo.html che si trova in un percorso la cui risoluzione partirà relativamente al percorso della pagina

show_images.html.

Nell’utilizzo degli URL relativi possiamo impiegare anche caratteri come

il punto (.), che indica la directory corrente, lo slash (/), che indica la

radice principale o document root del server e il doppio punto ( indica la directory padre di quella attuale.

La Tabella 1.2 aiuta a meglio comprendere quanto detto considerando la

pagina show_images.html ubicata all’URL http://www.foo.org/img/html/ e che

contiene differenti elementi a che puntano alle risorse indicate. A sinistra vediamo i valori relativi in href, a destra la loro risoluzione.

), che

Tabella 1.2 URL relativi e assoluti.

 

URL relativi

URL assoluti

<a

<a href="http://www.foo.org/snds/snd.html">So

href="

/

/snds/snd.html">Sounds</a>

 

<a

<a href="/movs/movie.html">Movies</a>

href="http://www.foo.org/movs/movie.html">Mov

<a href="./help.html">Help</a>

<a href=" http://www.foo.org/img/html/help.html">Help</

La Tabella 1.2 si legge nel seguente modo, considerando sempre che la

pagina show_images.html si trova in http://www.foo.org/img/html/:

per il link Sounds , la pagina snd.html si trova nella directory snds a cui abbiamo avuto accesso Sounds, la pagina snd.html si trova nella directory snds a cui abbiamo avuto accesso salendo di due livelli rispetto alla directory

html;

per il link Movies , la pagina movie.html si trova nella directory movs a cui abbiamo avuto accesso Movies, la pagina movie.html si trova nella directory movs a cui abbiamo avuto accesso partendo dalla document root del server

( foo.org ); per il link Help , la pagina help.html si trova nella stessa

(foo.org);

per il link Help, la pagina help.html si trova nella stessa directory di show_images.html, ovvero nella directory corrente. Dobbiamo precisare che lo stesso risultato si sarebbe potuto ottenere scrivendo

semplicemente <a href="help.html">Help</a>.

Listato 1.5 File CollegamentiIpertestuali.html.

<!DOCTYPE html> <html> <head> <title>Collegamenti ipertestuali</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <hgroup id="top">

<h1><a

href="http://www.pellegrinoprincipe.com/pdf/divina_commedia.pdf">La Divina

Commedia</a> di <a href="mailto:dante@alighieri.com">Dante Alighieri</a></h1>

<h2>Inferno - Estratti dai primi otto canti </hgroup> <ul>

</h2>

<li><a href="#I">Canto I</a></li> <li><a href="#II">Canto II</a></li> <li><a href="#III">Canto III</a></li> <li><a href="#IV">Canto IV</a></li> <li><a href="#V">Canto V</a></li> <li><a href="#VI">Canto VI</a></li> <li><a href="#VII">Canto VII</a></li> <li><a href="#VIII">Canto VIII</a></li> </ul> <a id="I" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_I" target="_blank"> <h3>Canto I</h3></a> <pre> Nel mezzo del cammin di nostra vita… </pre> <a id="II" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_II" target="_blank"><h3>Canto II</h3></a> <pre> Lo giorno se n'andava, e l'aere bruno… </pre> <a id="III" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_III" target="_blank"><h3>Canto III</h3></a> <pre> 'Per me si va ne la città dolente… </pre> <a id="IV" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_IV" target="_blank"><h3>Canto IV</h3></a> <pre> Ruppemi l'alto sonno ne la testa… </pre> <a id="V" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_V" target="_blank"> <h3>Canto V</h3></a>

<pre> Così discesi del cerchio primaio </pre> <a id="VI" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_VI" target="_blank"><h3>Canto VI</h3></a> <pre> Al tornar de la mente, che si chiuse </pre> <a id="VII" href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_VII" target="_blank"><h3>Canto VII</h3></a> <pre> "Pape Satàn, pape Satàn aleppe!",… </pre> <a id="VIII"

href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_VIII" target="_blank"><h3>Canto VIII</h3></a> <pre> Io dico, seguitando, ch'assai prima… </pre>

<a href="#top">Inizio pagina </body> </html>

</a>

pagina </body> </html> </a> Figura 1.6 Output del file CollegamentiIpertestuali.html

Figura 1.6 Output del file CollegamentiIpertestuali.html (Firefox).

Il Listato 1.5 definisce una serie di link che consentono di navigare attraverso alcuni dei canti della Divina Commedia di Dante Alighieri.

In particolare, notiamo che la scrittura del tag <a> segue una regola precisa, ossia abbiamo sempre il tag di apertura, cui segue del contenuto che sarà oggetto dell’evento di attivazione della navigazione, e il tag di chiusura. Inoltre è presente l’attributo href, che indica la destinazione del link.

Nel nostro esempio utilizziamo l’attributo href per fare quanto segue.

Puntare direttamente al file PDF della Divina Commedia in modo che sia scaricato in locale per la sua visualizzazione oppure per Divina Commedia in modo che sia scaricato in locale per la sua visualizzazione oppure per un suo salvataggio

(href="http://www.pellegrinoprincipe.com/pdf/divina_commedia.pdf"). Questa

modalità di reperimento di una risorsa varrà verso qualsiasi tipologia di file, e se il browser avrà il viewer o il plug-in necessario provvederà in automatico alla sua corretta gestione.

Mandare un messaggio di posta elettronica al “nostro” Dante grazie all’impiego dello schema URL mailto: posto prima dell’indirizzo di posta elettronica ( href="mailto:dante@alighieri.com" ). È importante mailto: posto prima dell’indirizzo di posta elettronica (href="mailto:dante@alighieri.com"). È importante dire che quando attiviamo un link di tipo e-mail, il browser visualizza una finestra dove possiamo scegliere il client di posta elettronica da utilizzare per inviare il messaggio e, dopo, all’apertura del client medesimo, riempie in automatico il campo To (A o come il proprio client chiama il campo dove si inserisce l’indirizzo del destinatario) con l’indirizzo di posta elettronica specificato all’interno del link.

Puntare a una pagina web ubicata in un server differente da quello dove è ubicato l’attuale documento HTML per visualizzare tutti i versi di un Canto (per esempiodi posta elettronica specificato all’interno del link.

href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_IV"). In

questo caso è interessante rilevare come il tag <a> sia dotato anche dell’attributo target, che consente di indicare al browser dove aprire il link attivato. Esso può avere i valori _blank, per aprire un link in una nuova finestra o scheda; _self, per aprire un link nella stessa finestra o scheda del documento corrente; _parent e _top per aprire un link relativamente a un elemento iframe.

NOTA Secondo la specifica di HTML5 gli elementi iframe (inline frame), rispetto agli elementi frame e frameset, non sono deprecati. Ricordiamo che un iframe è un elemento HTML che rappresenta un ambiente o contesto di navigazione annidato, al

cui interno viene presentato a un utente un documento di una pagina web. Il suo attributo principale src permette di specificare l’URL della pagina web che sarà in esso contenuta.

l’URL della pagina web che sarà in esso contenuta. Puntare a una determinata sezione della nostra

Puntare a una determinata sezione della nostra pagina web contenente un estratto dei versi del relativo Canto della Divina Commedia mediante l’inserimento all’interno dell’attributo href del simbolo cancelletto o hash mark (href="#I"), cui segue l’indicazione del valore dell’attributo id dell’elemento HTML di destinazione (<a id="I"

href="http://it.wikisource.org/wiki/Divina_Commedia/Inferno/Canto_I"

target="_blank">).

NOTA Prima dell’avvento di HTML5, l’elemento di destinazione di un collegamento interno era indicato da una named anchor, ovvero da un tag <a> vuoto, con l’attributo name indicante il nome dell’ancoraggio. In HTML5, invece, è possibile utilizzare come destinazione qualsiasi elemento HTML per cui sia stato specificato l’attributo id.

NOTA Di default, i link appaiono con la seguente formattazione: sottolineati e di colore blu se non sono stati mai visitati; sottolineati e di colore viola se sono stati visitati; sottolineati e di colore rosso se sono stati attivati, ossia se hanno ricevuto il focus perché, per esempio, è stato fatto clic su di essi.

Visualizzazione di immagini e creazione di mappe

Le immagini e la grafica più in generale rappresentano una parte importante nell’ambito della costruzione dei documenti HTML. Esse, per il Web, sono generalmente create con uno dei seguenti formati.

GIF (Graphics Interchange Format ): con estensione .gif , è un formato grafico di tipo bitmap, Graphics Interchange Format): con estensione .gif, è un formato grafico di tipo bitmap, ed è stato sviluppato e introdotto nel 1987 da CompuServe, una delle maggiori società, negli anni Ottanta e Novanta, che forniva servizi online in America, e oggi ISP (Internet Service Provider) di proprietà di AOL (America Online). Viene utilizzato, prevalentemente, per immagini che non richiedono un numero elevato di colori come, per esempio semplici illustrazioni, e ha le seguenti principali caratteristiche: una profondità di colore di 8 bit; possibili aree trasparenti; compressione con un algoritmo di tipo lossless.

PNG (Portable Network Graphics ): con estensione .png , è un formato grafico di tipo bitmap, Portable Network Graphics): con estensione .png, è un formato grafico di tipo bitmap, nato nel 1995 a opera di un gruppo di autori indipendenti ed esperti di computer grafica per migliorare e sostituire il formato GIF che, allora, imponeva il pagamento di royalty per il suo algoritmo di compressione (LZW, Lempel-Ziv-Welch). Oggi PNG è un formato aperto ed è uno standard ISO/IEC (15948). Ha una profondità di colore fino a 48 bit, supporta la trasparenza mediante un canale alfa dedicato ed è compresso con un algoritmo di tipo lossless.

JPEG (Joint Photographic Experts Group ): con le estensioni principali .jpg , .jpeg e .jpe , Joint Photographic Experts Group): con le estensioni principali .jpg, .jpeg e .jpe, è, più che un formato grafico, uno standard per la compressione delle immagini digitali creato dall’omonimo comitato nel 1992; infatti, i formati grafici più comuni per l’interscambio delle immagini che lo utilizzano sono EXIF (Exchangeable Image File Format) e JFIF (JPEG File Interchange Format). È utilizzato prevalentemente per la memorizzazione di immagini fotografiche; ha una profondità di colore di 24 bit, non supporta la trasparenza ed è un algoritmo di tipo lossy.

Al fine di creare e utilizzare delle immagini può essere utile comprendere i seguenti termini.

Color depth o profondità di colore: indica il numero di bit usati per rappresentare il colore di o profondità di colore: indica il numero di bit usati per rappresentare il colore di un singolo pixel in un’immagine di tipo bitmap (valore espresso in bpp, bit per pixel). Maggiori sono i bpp più realistica sarà l’immagine. Per esempio, un’immagine codificata in JPEG potrà avere una profondità di colore fino a 24 bpp, ovvero potrà rappresentare fino a 16,7 milioni di colori.

Lossless e lossy : indicano una classe di algoritmi di compressione dei dati. Nel caso delle e lossy: indicano una classe di algoritmi di compressione dei dati. Nel caso delle immagini i primi ne riducono le dimensioni senza far perdere in qualità, mentre i secondi ne riducono le dimensioni a scapito, però, della qualità.

Alpha channel o canale alfa: indica un canale aggiuntivo per la rappresentazione dei colori in un’immagine digitale o canale alfa: indica un canale aggiuntivo per la rappresentazione dei colori in un’immagine digitale che descrive il grado di trasparenza o opacità di ogni pixel. In pratica, se creiamo un’immagine dove decidiamo che il colore di alcuni pixel deve essere totalmente trasparente (generalmente indicato con il valore 0) gli stessi non saranno visibili, mentre se creiamo un’immagine dove il colore deve essere totalmente opaco (generalmente indicato con il valore 255) gli stessi saranno visibili.

Grafica bitmap o raster: indica una tecnica mediante la quale un’immagine è rappresentata come una griglia di pixel dove a ciascun pixel è associato un determinato colore che è dato da una combinazione delle componenti di rosso (red ), verde ( green ) e blu ( blue ). red), verde (green) e blu (blue).

Grafica vettoriale: indica una tecnica mediante la quale un’immagine si costruisce avvalendosi di primitive (linee, curve, cerchi, archi e così via) definite attraverso le entità matematiche dei vettori; questi ultimi sono segmenti che hanno un punto di origine, una direzione, un verso e una lunghezza.un determinato colore che è dato da una combinazione delle componenti di rosso ( red ),

In HTML5 un’immagine è reperita come risorsa e poi visualizzata grazie all’ausilio del tag di tipo empty <img>, per il quale si possono definire i seguenti principali attributi: src, che indica l’URL dove reperire l’immagine; alt, che indica un testo alternativo (alternative text) che viene mostrato al posto dell’immagine se quest’ultima, per una qualsiasi ragione, non è visualizzabile; width e height, che indicano, rispettivamente, la larghezza e l’altezza in pixel dell’immagine (tali attributi possono anche essere omessi perché il browser cercherà sempre di rilevare automaticamente le dimensioni dell’immagine, oppure ne può essere indicato solo uno lasciando al browser il compito di definire proporzionalmente il secondo); usemap, che indica il riferimento a un elemento di tipo mappa, espresso attraverso il tag <map>, utile per definire un’area geometrica all’interno di un’immagine che può divenire navigabile.

Di tutti gli attributi elencati, è sufficiente utilizzare solo l’attributo src per scaricare e visualizzare un’immagine all’interno di un documento HTML.

NOTA L’attributo alt è usato sovente con lo scopo di fornire del contenuto accessibile, letto da appositi screen reader, anche a chi ha dei problemi di vista.

Listato 1.6 File Immagini_E_Mappe.html.

<!DOCTYPE html> <html> <head> <title>Immagini e mappe</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <img src="dante.jpg" alt="Agnolo Bronzino (1530): Dante rivolto verso il Purgatorio" title="Agnolo Bronzino (1530): Dante rivolto verso il Purgatorio" usemap="#d_mappa" /> <map id="id_map" name="d_mappa"> <area shape="poly" alt="Link alla Divina Commedia" title="La Divina

Commedia"

coords="165,271,232,273,245,324,291,287,351,306,310,494,276,481,260,461,268,445,225,42

222,435,190,421,145,454,139,451"

href="http://it.wikisource.org/wiki/Divina_Commedia"

target="_blank" /> </map> <h3>La Divina Commedia di Dante Alighieri</h3> </body> </html>

Figura 1.7 Output del file Immagini_E_Mappe.html (Firefox). NOTA È interessante notare come in presenza di

Figura 1.7 Output del file Immagini_E_Mappe.html (Firefox).

NOTA È interessante notare come in presenza di più tag <img/> successivi (per esempio

<img src="immagine1"/><img src="immagine2"/><imgsrc="immagine3"/>) un browser

posizioni le immagini una di fianco all’altra e non una sotto l’altra. L’importanza di questo dettaglio apparirà più chiara nel Capitolo 2, affrontando il box model.

Il Listato 1.6 mostra come utilizzare un’immagine dotandola anche di una regione su cui si può fare clic come link. In pratica, esso visualizza l’immagine di Dante Alighieri con in mano una copia della Divina Commedia i cui contorni sono stati “disegnati” con un poligono

trasformandola in un link verso una pagina di Wikipedia dedicata al poema

di

Dante.

In

dettaglio, a parte il tag <img>, che ci consente di ottenere l’immagine di

Dante, notiamo:

che ci consente di ottenere l’immagine di Dante, notiamo: l’utilizzo dell’attributo title all’interno del tag

l’utilizzo dell’attributo title all’interno del tag <img> che consente di far visualizzare, quando l’utente si posiziona con il mouse sull’elemento cui è applicato, una sorta di tooltip con del testo

descrittivo. Nel nostro caso è utilizzato per mostrare delle informazioni sull’autore del dipinto che ritrae Dante.

l’utilizzo del tag <map> , con cui definiamo una mappa dove impostiamo l’attributo name che ne indica il <map>, con cui definiamo una mappa dove impostiamo l’attributo name che ne indica il nome che viene riferito dalla relativa immagine mediante l’attributo usemap nel tag <img> (a tale nome deve essere prefisso il carattere di hash, #);

l’utilizzo, all’interno del tag <map> , del tag <area> , con cui definiamo l’area geometrica all’interno dell’immagine che fungerà <map>, del tag <area>, con cui definiamo l’area geometrica all’interno dell’immagine che fungerà da hotspot per il collegamento ipertestuale (la cui destinazione è specificata dall’attributo href). Tali hotspot sono definibili mediante gli attributi shape, che ne determina la tipologia tra rettangolare (rect o rectangle), circolare (circ o circle) o poligonale (poly o polygon), e coords, che permette di impostare, a seconda della figura geometrica scelta, le sue coordinate espresse in pixel;

NOTA Ogni forma geometrica scelta e indicata nell’attributo shape del tag <area>, ha una sua modalità di attribuzione delle coordinate espresse in pixel che sono tutte riferibili a partire dalla distanza rispetto all’angolo superiore sinistro dell’immagine (0, 0). Così, per un rettangolo abbiamo che coords è esprimibile attraverso le coordinate x1, y1, x2, y2, dove x1 e y1 ne indicano il punto di partenza (upper-left corner) mentre x2 e y2 ne indicano il punto di fine (lower-right corner), per un cerchio abbiamo che coords è esprimibile attraverso le coordinate x, y del suo centro e il raggio r, per un poligono abbiamo che coords è esprimibile attraverso le coordinate x1, y1, x2, y2, …, xn, yn dove ciascuna coppia di x e y identifica un vertice che viene usato per disegnare la relativa linea che li connette.

NOTA L’elemento img può essere usato come figlio di un elemento a per creare un link di tipo grafico, ovvero si può fare clic sull’immagine per compiere la classica operazione di navigazione. Per esempio, lo Snippet 1.5, permette di navigare verso il sito di cui l’URL nell’attributo href dell’elemento a facendo clic sull’immagine definita nell’attributo src del relativo elemento img.

Snippet 1.5 Utilizzo del tag <img> per la navigazione.

<a href="http://www.pellegrinoprincipe.com" title="Home page di Pellegrino"> <img src="dante.jpg" />

</a>

I tag <figure> e <figcaption> HTML5 consente di utilizzare il tag <figure> per annotare illustrazioni, diagrammi, foto, listati di codice e così via, e il tag <figcaption>, per attribuire una didascalia all’elemento annotato. In pratica, i due tag citati consentono di dare un significato strutturale e di

relazione tra l’immagine e una sua etichetta descrittiva in modo che essi siano, nel contenuto principale del documento HTML, un’entità indipendente. Ciò permette, per esempio, di poter spostare o addirittura eliminare del contenuto definito all’interno del tag <figure> da un contenuto principale senza compromettere il significato del documento nel suo insieme. Comunemente, anche se non necessariamente, il tag <figure> è utilizzato unitamente al tag <img>, di cui si fornisce la relativa descrizione mediante il tag <figcaption> (Snippet 1.6).

Snippet 1.6 Utilizzo dei tag <figure> e <figcaption>.

<figure> <figcaption>Dante</figcaption> <img src="dante.jpg" /> </figure>

Creazione di form e controlli utente

I form o moduli sono lo strumento essenziale utilizzato nel Web per inviare dei dati a un server al fine di effettuare delle operazioni di elaborazione predefinite. Esempi comuni sono dati dai moduli che compiliamo per inviare informazioni di accesso alla nostra banca o a un negozio di commercio elettronico (in pratica il login) e così via, in un elenco pressoché infinito.

Essi si creano mediante l’utilizzo del tag <form>, che ha i seguenti principali attributi.

action: indica l’URL di destinazione dei dati inviati con il form. Generalmente punta a un : indica l’URL di destinazione dei dati inviati con il form. Generalmente punta a un file su un server web scritto in una qualche tecnologia lato server come PHP, ASP.NET, JEE e così via che è in grado di “leggere” e interpretare le informazioni ottenute e di elaborarle in un modo stabilito restituendo il risultato, spesso sotto forma di una completa pagina HTML adeguatamente formattata.

method: indica il metodo o comando HTTP da usare quando si effettua il submit del : indica il metodo o comando HTTP da usare quando si effettua il submit del form, che determina come sono inviati i dati alla risorsa indicata dall’attributo action. Può avere il valore GET (utilizzato di default se l’attributo non è indicato o se è scritto senza alcuna specificazione), e allora i dati sono inviati via URL come una query string nella forma precedentemente esaminata, oppure il valore POST, e allora i dati sono inviati come parte della richiesta nel corpo del messaggio dopo gli header (e non sono quindi visibili nell’URL).

target: indica dove visualizzare la risposta che si è ricevuta a seguito del submit del : indica dove visualizzare la risposta che si è ricevuta a seguito del submit del form. Può assumere i valori _blank, _self, _parent, _top e

_iframename.

autocomplete: indica se, per i campi di un form, devono essere memorizzati i valori precedentemente : indica se, per i campi di un form, devono essere memorizzati i valori precedentemente inseriti al fine di consentire, durante future digitazioni, la visualizzazione di un’area rettangolare (suggestion box) entro la quale appariranno i valori memorizzati che sono coerenti con quello che si sta digitando. Se l’attributo è omesso allora il suo stato sarà su on, mentre, se si vuole evitare

l’autocompletamento, bisognerà specificare l’attributo con il valore

off.

novalidate: indica, se presente, che i dati inseriti nei relativi campi di input non devono : indica, se presente, che i dati inseriti nei relativi campi di input non devono essere validati quando si effettuerà il submit del form.

enctype: indica in che modo i dati di un form devono essere codificati quando l’attributo method indica in che modo i dati di un form devono essere codificati quando l’attributo method ha come valore POST. I suoi valori possono essere: application/x-www-form-urlencoded, per indicare che tutti i caratteri devono essere codificati prima di essere inviati (gli spazi sono convertiti con il simbolo +, mentre i caratteri non alfanumerici sono convertiti nell’equivalente codice ASCII esadecimale secondo il pattern %HH); multipart/form-data, per indicare una modalità di codifica che permette al form di inviare dati binari o caratteri non ASCII (è usato sovente per inviare dei file); text/plain, per indicare che tutti i caratteri devono essere codificati prima di essere inviati (gli spazi sono convertiti con il simbolo +, i caratteri speciali non sono convertiti nell’equivalente codice ASCII esadecimale). In mancanza dell’attributo si assume di default la codifica application/x-www-form-

urlencoded.

NOTA Alcuni attributi in HTML5, definiti di tipo enumerated, come autocomplete, accettano un set finito e prestabilito di valori che ne impostano lo stato. Tali attributi rispondono alle seguenti importanti regole: se l’attributo è specificato e si fornisce un valore non rispondente a uno di quelli prestabiliti, se previsto uno stato definito come invalid value default, allora tale valore sarà usato; se l’attributo è specificato e si fornisce un valore non rispondente a uno di quelli prestabiliti, se previsto uno stato definito come missing value default, allora tale valore sarà usato; se l’attributo è specificato e si fornisce un valore non rispondente a uno di quelli prestabiliti ma non è previsto alcuno stato di quelli appena indicati, allora il valore fornito sarà ignorato; se l’attributo non è specificato ed è previsto lo stato missing value default, allora tale valore sarà usato, altrimenti non vi sarà alcuno stato assegnato.

GET e POST Nello scegliere se utilizzare il metodo GET o il metodo POST per inviare i dati di un form considerate quanto segue per il metodo GET.

Produce una stringa che è visibile nella barra degli indirizzi del browser.di un form considerate quanto segue per il metodo GET . La stringa è limitata a

La stringa è limitata a un massimo di caratteri che è dipendente dal browser in uso (per esempio, in Internet Explorer è di 2083 caratteri).che è visibile nella barra degli indirizzi del browser. La stringa è mandata in chiaro e

La stringa è mandata in chiaro e pertanto non bisogna mai utilizzarla per il passaggio di informazioni sensibili (per esempio le password).a un massimo di caratteri che è dipendente dal browser in uso (per esempio, in Internet

Non può essere usato per l’inoltro di dati binari (per esempio le immagini).Non dovrebbe essere usato per modificare dei dati ma solo per ottenere delle risorse come

Non dovrebbe essere usato per modificare dei dati ma solo per ottenere delle risorse come avviene, per esempio, nelle query di ricerca che si inoltrano tramite i form dei motori di ricerca. In questo contesto si dice che il metodo GET è di tipo idempotente , ossia non dovrebbe mai causare sul server degli effetti GET è di tipo idempotente, ossia non dovrebbe mai causare sul server degli effetti collaterali.

Può essere conservato come segnalibro in quanto parte del relativo URL.dovrebbe mai causare sul server degli effetti collaterali. Le risposte possono essere memorizzate nella cache. Per

Le risposte possono essere memorizzate nella cache. Per il metodo POST bisogna invece considerare quanto segue. POST bisogna invece considerare quanto segue.

Non ha alcuna restrizione sulla quantità di dati da inviare.il metodo POST bisogna invece considerare quanto segue. Può inviare anche dati binari. Non può essere

Può inviare anche dati binari.ha alcuna restrizione sulla quantità di dati da inviare. Non può essere conservato come segnalibro. I

Non può essere conservato come segnalibro.di dati da inviare. Può inviare anche dati binari. I dati, così come per il metodo

I dati, così come per il metodo GET , sono mandati in chiaro e pertanto non bisogna mai utilizzarlo per il passaggio GET, sono mandati in chiaro e pertanto non bisogna mai utilizzarlo per il passaggio di informazioni sensibili (per esempio le password). Non bisogna commettere l’errore di pensare che, anche se i dati non sono visibili nell’URL, essi non siano intercettabili. Infatti, tramite uno sniffer di rete è sempre possibile leggere il “dialogo” che avviene sul protocollo HTTP tra un client e un server.

Dovrebbe essere usato per effettuare modifiche sul server.che avviene sul protocollo HTTP tra un client e un server. Le risposte non sono memorizzabili

Le risposte non sono memorizzabili nella cache a meno che esse includano glie un server. Dovrebbe essere usato per effettuare modifiche sul server. appropriati header Cache-Control o Expires

appropriati header Cache-Control o Expires.

Un form, al fine di essere utile e di poter trasmettere delle informazioni a un server, deve poter contenere una serie di controlli grafici di interfaccia (definiti anche widget) attraverso cui inserire del testo, compiere delle scelte e così via. In HTML5 possiamo utilizzare come widget quelli definibili mediante i seguenti tag e attributi.

<input type="text" />: con esso si crea una casella rettangolare a riga singola (casella o campo di : con esso si crea una casella rettangolare a riga singola (casella o campo di testo) dove l’utente può inserire del testo.

<input type="password" />: con esso si crea una casella rettangolare a riga singola dove l’utente può inserire : con esso si crea una casella rettangolare a riga singola dove l’utente può inserire i caratteri di una password che non sono mostrati in chiaro ma sono sostituiti dal carattere asterisco (*) o da un simbolo di un cerchietto pieno nero ().

<input type="button" />: con esso si crea un comune pulsante con un’etichetta testuale cui può essere associato, : con esso si crea un comune pulsante con un’etichetta testuale cui può essere associato, di solito tramite JavaScript, del codice da eseguire quando si fa clic su di esso. Se non è indicata un’etichetta (attraverso il valore dell’attributo value), il pulsante non avrà alcuna etichetta di default.

<input type="submit" />: con esso si crea un comune pulsante con un’etichetta testuale che, quando attivato, consente : con esso si crea un comune pulsante con un’etichetta testuale che, quando attivato, consente di effettuare

l’invio dei dati del relativo form. Se non è indicata un’etichetta, il pulsante avrà come etichetta di default un valore analogo a Invia.

<input type="reset" />: con esso si crea un comune pulsante con un’etichetta testuale che, quando attivato, consente : con esso si crea un comune pulsante con un’etichetta testuale che, quando attivato, consente di cancellare gli eventuali dati inseriti in tutti i campi di testo del form. Se non è indicata un’etichetta, il pulsante avrà come etichetta di default un valore analogo a Ripristina o Reimposta.

<input type="checkbox" />: con esso si crea una casella di controllo la cui interazione causa l’apposizione o : con esso si crea una casella di controllo la cui interazione causa l’apposizione o la rimozione di un segno di spunta che ne indica lo stato, rispettivamente, di attivato/disattivato. È utile per creare un widget a due stati che consente di decidere se una determinata operazione, azione, domanda e così via deve essere considerata affermativa (il segno di spunta indicherà lo stato di ) oppure non affermativa (la mancanza di un segno di spunta indicherà lo stato no).

<input type="radio" />: con esso si crea un pulsante di opzione la cui interazione causa l’apposizione di : con esso si crea un pulsante di opzione la cui interazione causa l’apposizione di un simbolo di selezione (un cerchietto nero all’interno di un cerchio esterno bianco) sul pulsante selezionato e la contestuale deselezione con la rimozione dello stesso simbolo da un altro pulsante precedentemente selezionato. Questo controllo consente di creare dei pulsanti mutualmente esclusivi appartenenti a un medesimo gruppo: solo uno per volta può essere selezionato. Per un pulsante di opzione, si decide l’appartenenza a un gruppo indicando un nome, che dovrà chiaramente essere uguale anche per gli altri, nell’attributo name.

<input type="file" />: con esso si crea un controllo formato da una casella di testo a riga : con esso si crea un controllo formato da una casella di testo a riga singola e un pulsante (di norma con valore Sfoglia) laddove l’attivazione di quest’ultimo farà apparire una finestra di selezione di uno o più file (se presente l’attributo multiple) che sarà possibile gestire per operazioni come, per esempio, l’upload verso un server. Dopo aver scelto i file, un path completo degli stessi apparirà nella relativa casella di testo (tranne che per il browser Chrome, che presenterà solo un’etichetta riepilogativa).

<input type="number" />: con esso si crea un controllo formato da una casella di testo a riga : con esso si crea un controllo formato da una casella di testo a riga singola con a fianco due pulsanti: uno con il simbolo di freccia rivolta verso l’alto e uno con il simbolo di freccia

rivolta verso il basso denominati comunemente spinner o spin box. Questi pulsanti consentono di visualizzare all’interno della casella di testo dei valori numerici. Non è consentito inserire valori di un altro tipo (per esempio stringhe di lettere), se ciò avviene e si fa il submit del form il browser non invia alcun valore.

<input type="range" />: con esso si crea un controllo, denominato slider , formato da una barra orizzontale : con esso si crea un controllo, denominato slider, formato da una barra orizzontale o verticale con un cursore (indicatore) il cui spostamento permette di selezionare dei valori di tipo numerico (rappresentato in alcuni browser da piccole tacche).

<input type="color" />: con esso si crea un controllo che consente di scegliere, tramite un classico selettore, : con esso si crea un controllo che consente di scegliere, tramite un classico selettore, un colore che è espresso in esadecimale nella forma RGB #RRGGBB.

<input type="image" />: con esso si crea un comune pulsante che è renderizzato con un’immagine specificata. : con esso si crea un comune pulsante che è renderizzato con un’immagine specificata.

<input type="email" />: con esso si crea una casella rettangolare a riga singola dove l’utente può inserire : con esso si crea una casella rettangolare a riga singola dove l’utente può inserire del testo che dovrebbe conformarsi al pattern utilizzato per esprimere un indirizzo di posta elettronica (per

esempio nome@dominio).

<input type="url" />: con esso si crea una casella rettangolare a riga singola dove l’utente può inserire : con esso si crea una casella rettangolare a riga singola dove l’utente può inserire del testo che dovrebbe conformarsi al pattern utilizzato per esprimere un URL assoluto (per esempio

http://www.pellegrinoprincipe.com).

NOTA Alcuni controlli grafici come quelli di tipo email o url dovrebbero essere utilizzati dai browser per consentire di inserire solo i caratteri richiesti dai relativi pattern, o dare quantomeno un’indicazione che la casella di testo serve per inserire del testo formattato in un modo particolare. Per esempio, con l’iPhone, quando viene visualizzata una pagina HTML che presenta uno dei controlli citati, all’utente è consentito inserire i relativi dati mediante una tastiera virtuale dotata anche di tasti con i simboli comunemente usati per il tipo email o url (@, ., /, .com e così via).

<input type="search" />: con esso si crea una casella rettangolare a riga singola dove l’utente può inserire : con esso si crea una casella rettangolare a riga singola dove l’utente può inserire del testo per effettuare delle ricerche. Un browser dovrebbe renderizzare questo campo in modo che abbia uno stile differente da una comune casella di testo evidenziando il fatto che esso è deputato alle operazioni di ricerca. In Chrome, per esempio, non appena si inizia a digitare del testo, appare

all’interno della relativa casella un simbolo x che consente di cancellare quanto appena inserito.

<input type="tel" />: con esso si crea una casella rettangolare a riga singola dove l’utente può inserire : con esso si crea una casella rettangolare a riga singola dove l’utente può inserire del testo che dovrebbe rappresentare un numero telefonico. Anche in questo caso il browser potrebbe aiutare l’utente nell’inserimento di un numero telefonico, magari visualizzando il programma predefinito di rubrica.

<input type="datetime" />: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere : con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere una data e un orario, espresso secondo l’ora di riferimento internazionale Coordinated Universal Time (UTC). Per la data, il widget potrebbe essere renderizzato come un comune calendario, mentre per l’orario potrebbe apparire come uno spin box laddove la sua attivazione consentirebbe di inserire valori validi, per l’ora da 0 a 23, per i minuti da 0 a 59 e così via. In ogni caso, elenchiamo il formato completo per una data e un orario secondo quanto indicato dalla specifica di HTML5, considerando che alcune parti possono essere omesse, se non presenti (per esempio le frazioni di secondo): YYYY-MM-DDTHH:MM:SS.FFFtimezone dove la lettera T separa la parte data dalla parte oraria, le lettere FFF indicano le frazioni di secondo, timezone indica l’offset del fuso orario che può essere espresso con la lettera Z (per Zulu time, il fuso orario con offset pari a 0 come quello di Londra, Parigi, Madrid e così via), oppure con + o , cui fanno seguito le ore e i minuti, rappresentanti un offset di zona oraria, separati dal carattere :.

<input type="datetime-local" />: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere : con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere una data e un orario locale, senza considerare quindi il fuso orario (time zone).

<input type="date" />: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere : con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data senza, però, un orario nel formato anno-mese-giorno (YYYY-MM-DD).

<input type="month" />: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere : con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data espressa nel formato anno-mese (YYYY-MM).

<input type="week" />: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere : con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data espressa nel formato anno-settimana nell’anno (YYYY-Www).

<input type="time" />: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere : con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente un orario espresso nel formato ore-minuti-secondi e frazioni di secondi (HH:MM:SS.FFF).

<textarea>: con esso si crea un box rettangolare formato da più righe ( multiline textfield : con esso si crea un box rettangolare formato da più righe (multiline textfield) dove l’utente può inserire del testo.

<select>: con esso si crea un controllo definito drop-down list , formato : con esso si crea un controllo definito drop-down list, formato

da una combinazione di due elementi grafici, dove il primo è un

rettangolo a riga singola (casella di testo) con a lato un simbolo di freccia e il secondo è un altro rettangolo, che appare se l’utente fa clic sul simbolo della freccia o sulla casella di testo. Al suo interno è

presente una lista di voci (item), definibili mediante il tag <option>, che può essere a scelta singola o multipla (se è impostato l’attributo multiple). Inoltre, se impostiamo l’attributo size con un valore maggiore di 1, l’elemento select sarà renderizzato come una list box, ossia come un unico rettangolo al cui interno è presente una lista di voci che sono selezionabili secondo uno dei seguenti criteri: a singola selezione, possiamo selezionare solo una voce alla volta; a selezione d’intervallo multiplo, possiamo selezionare più voci in più intervalli

di item. La selezione è attuabile facendo clic su una voce per aprire

l’intervallo e quindi, tenendo premuto il tasto Shift, facendo clic su un’altra voce per concludere l’intervallo. È anche possibile utilizzare il tasto Ctrl che permette di selezionare voci “a scacchiera”.

<datalist>: con esso si crea una sorta di list box che contiene una serie : con esso si crea una sorta di list box che contiene una serie

di voci (tag <option>) mostrate come suggerimento quando un utente

inizia a digitare del testo in una casella ottenuta da un elemento input, per il quale l’attributo list è impostato con il valore dell’attributo id dell’elemento datalist. In pratica tale tag consente di definire un controllo di tipo autocomplete applicabile a un elemento di tipo text input.

NOTA Per l’elemento select il valore che ogni item può passare al server è definito mediante l’attributo value dell’elemento option (per esempio <option value="rosso">) oppure, in mancanza di esso, è passato il valore definito tra i tag di

<option> stesso (per esempio <option>rosso</option>). Per l’elemento datalist,

invece, il valore passato al server è quello della casella di input collegata a datalist attraverso l’attributo list: tale valore può quindi essere uno tra quelli dei tag di <option> (nelle modalità appena viste per select) oppure il valore digitato dall’utente.

<keygen>: con esso si crea un controllo che consente di generare delle chiavi per un : con esso si crea un controllo che consente di generare delle chiavi per un sistema crittografico. Infatti, un browser che supporta tale widget crea una coppia di chiavi: quella pubblica è inviata al server unitamente agli altri dati del form, mentre quella privata rimane memorizzata nel browser. Successivamente allo scambio di tali chiavi, quella pubblica può essere impiegata per generare un certificato per il client da utilizzare, in futuro, per l’autenticazione di un utente. Allo stato attuale è supportato solo il sistema crittografico detto RSA, e un browser renderizza il relativo controllo mediante un menu a tendina dal quale è possibile scegliere la lunghezza della chiave espressa in bit e dunque il suo grado di sicurezza.

NOTA Il sistema crittografico descritto nell’ambito dell’elemento keygen è definito, comunemente, come sistema a crittografia asimmetrica o anche a chiave pubblica/privata, dove gli attori principali sono: la chiave pubblica, che deve essere distribuita per la cifratura di dati da inviare a chi possiede la relativa chiave privata; la chiave privata, che deve essere protetta e mantenuta segreta da chi l’ha generata e che viene utilizzata per decifrare i dati codificati con la relativa chiave pubblica.

Il tag <button> Tramite il tag <button> è possibile creare un pulsante di tipo button, submit o reset analogamente a quanto visto per il tag <input>. Tuttavia tra i due esiste l’importante differenza che il tag <button> consente di aggiungere al suo interno, come contenuto, altri elementi HTML. Ciò permette, per esempio, di creare un pulsante di tipo button con un’immagine al suo interno che ne stabilisce, dunque, una forma personalizzata.

Abbiamo inoltre i seguenti tag che, anche se non sono direttamente collegati a un form perché il suo submit non invia i relativi valori, possono essere considerati come dei widget.

<progress>: con esso si crea una barra di avanzamento o progress bar , che viene : con esso si crea una barra di avanzamento o progress bar, che viene progressivamente riempita con un colore fino al compimento di una determinata operazione. L’avanzamento è tracciato attraverso il valore numerico dell’attributo value. Inoltre l’attributo max permette, con un valore numerico, di definire la scala. Omettendo value è anche possibile creare una barra di avanzamento di tipo indeterminato, ossia che non indica lo stato di avanzamento dell’operazione ma segnala, semplicemente, che il sistema è in attesa del suo completamento.

<meter>: con esso si crea una barra di avanzamento che indica un determinato ammontare riguardante : con esso si crea una barra di avanzamento che indica un determinato ammontare riguardante la misurazione della tipologia di oggetto che intende rappresentare (per esempio quantità di utilizzo di un hard disk, percentuale di rilevanza di un risultato di ricerca e così via). Ancora una volta l’avanzamento è definito da value e max.

<menu>: con esso si crea una struttura a menu per una lista di comandi. Può : con esso si crea una struttura a menu per una lista di comandi. Può definire: se è impostato l’attributo type con il valore context, un menu contestuale; se è impostato l’attributo type con il valore toolbar, una barra degli strumenti; l’assenza dell’attributo type, uno “stato” di list ossia una lista di comandi. (Nel momento in cui vanno in stampa queste pagine questo elemento gode di un supporto nei browser pressoché nullo.)

<command>: con esso si crea una sorta di “azione” che può essere svolta da un : con esso si crea una sorta di “azione” che può essere svolta da un utente. Può essere parte di un menu oppure può essere inserita ovunque all’interno del documento HTML per rappresentare una scelta rapida da tastiera.

Il tag <output> Nella specifica HTML5 è stato definito il nuovo tag <output> che funziona come una sorta di segnaposto per il risultato di un calcolo. In un certo senso, possiamo dire, che esso è complementare a degli elementi input che forniscono i valori della computazione. Tali elementi di input possono essere riferiti dall’elemento output mediante l’indicazione nel suo attributo for dei valori degli attributi id degli input, separati da un solo carattere di spazio (per esempio <output for="id1 id2">). È bene sottolineare che l’elemento output ha la sola funzione di visualizzare il risultato di un calcolo, sia esso una somma, una moltiplicazione, una sottrazione o un’espressione complessa. La definizione del calcolo da svolgere è invece delegata a un linguaggio di programmazione tipo JavaScript.

Infine, elenchiamo i nuovi attributi utilizzabili nei controlli.

required: con esso si indica che il valore di un elemento di tipo input , : con esso si indica che il valore di un elemento di tipo input, select o textarea è obbligatoriamente richiesto per il corretto submit del form. Inoltre, se l’utente non soddisfa tale richiesta, dopo che avrà premuto il pulsante di submit del form, il browser visualizzerà un breve messaggio (una sorta di tooltip) che indicherà l’obbligatorietà delle compilazione del relativo controllo e interromperà l’invio del dati al server.

formnovalidate: con esso si indica che si intende evitare il controllo di validazione sui campi : con esso si indica che si intende evitare il controllo di validazione sui campi di un form. Generalmente tale attributo si assegna ai pulsanti di tipo submit.

pattern: con esso si indica un’espressione regolare che determina il corretto formato del valore da : con esso si indica un’espressione regolare che determina il corretto formato del valore da inserire in un campo di input. Se il campo è a inserimento obbligatorio e l’utente non rispetta quanto espresso dall’espressione regolare non avverrà il submit del form.

NOTA Un’espressione regolare (regular expression, regex o regexp) è un’espressione formata da una stringa di testo i cui caratteri sono simboli (caratteri dell’alfabeto e caratteri speciali) che formano una sorta di pattern di ricerca utilizzato per effettuare confronti con una sequenza di caratteri di una stringa al fine di verificare delle corrispondenze. Se il pattern trova corrispondenza con i caratteri della stringa, allora si può dire che l’espressione regolare ha avuto esito positivo ed è stata soddisfatta.

placeholder: con esso è possibile mostrare un testo, generalmente in grigio chiaro, all’interno di una : con esso è possibile mostrare un testo, generalmente in grigio chiaro, all’interno di una casella di testo. Il testo viene nascosto quando la casella riceve un focus e diviene attiva. È importante dire che, se si esce dal controllo senza aver inserito del testo, sarà nuovamente visibile il testo definito come segnaposto. Questo attributo è utilizzabile per fornire un breve suggerimento all’utente sotto forma di esempio di valore da inserire o su come lo stesso debba essere formattato.

autocomplete: con esso è possibile decidere, per un singolo campo di testo, se la caratteristica : con esso è possibile decidere, per un singolo campo di testo, se la caratteristica di autocompletamento del testo deve essere attiva (valore on) oppure no (valore off).

autofocus: con esso è possibile assegnare a un controllo un focus automatico, che gli viene : con esso è possibile assegnare a un controllo un focus automatico, che gli viene fornito quando la pagina è stata caricata. Tale attributo consente, di fatto, di rendere subito disponibile per un utente il controllo principale di un form, permettendogli di iniziare subito a digitare i relativi dati senza doversi preoccupare di selezionarlo manualmente.

spellcheck: con esso si indica (valore true o false ) se un campo di testo : con esso si indica (valore true o false) se un campo di testo o, più in generale, un elemento editabile, deve avere o meno un controllo ortografico. Nei browser che supportano tale attributo, se si digita del testo con errori di ortografia o con del testo senza senso lo

stesso sarà renderizzato con una linea orizzontale rossa tratteggiata o ondulata (red squiggle) posta sotto di esso.

multiple: con esso si indica la possibilità per un controllo di tipo input o select : con esso si indica la possibilità per un controllo di tipo input o select di specificare più di un valore. Ciò può essere utile, per esempio, quando si utilizza un elemento di input di tipo email per indicare più mittenti o destinatari di un messaggio di posta (che devono essere separati dal carattere di virgola) oppure per un elemento di input di tipo file per indicare più file di cui effettuare l’upload.

min, max e step : con essi si indica un valore minimo, massimo e di , max e step: con essi si indica un valore minimo, massimo e di step (un valore che segnala di quante unità alla volta deve essere incrementato o decrementato il valore principale) da poter utilizzare all’interno di elementi di input del tipo number, date, month, week, time, range e in controlli quali progress (solo max) e meter (solo min e max). Così, per esempio, se abbiamo un campo di testo di tipo numerico con gli attributi scritti come min=4, max=25, step=3 i valori accettati saranno nell’intervallo 4-25 con i limiti inclusi a intervalli di 3 (4, 7, 10, 13, , 25).

form: con esso si imposta per elementi come button , input , keygen , output : con esso si imposta per elementi come button, input, keygen, output, select e textarea il form di appartenenza tramite la specifica del suo id come valore. Questo attributo è utile perché permette di associare uno degli elementi succitati a prescindere dal fatto che siano innestati direttamente all’interno di un form.

formaction, formenctype , formmethod , formtarget : con essi si imposta , formenctype, formmethod, formtarget: con essi si imposta

direttamente per gli elementi input o button di tipo submit i relativi attributi action, enctype, method e target, generalmente specificati all’interno del tag <form>, in modo da sovrascriverli.

height e width : specificano, rispettivamente e in pixel, l’altezza e la larghezza di un elemento e width: specificano, rispettivamente e in pixel, l’altezza e la larghezza di un elemento input di tipo image. Prima dell’avvento di HTML5 questo attributo non era definibile per tali elementi ma solo per gli elementi img, iframe, object e così via.

L’attributo contenteditable È interessante accennare al nuovo attributo HTML5 denominato contenteditable, perché, anche se non direttamente collegato ai controlli di un form, consente di dotare un elemento HTML della caratteristica della modificabilità o meno del suo contenuto (valore true o false) e, dunque, lo fa divenire una sorta di “widget editabile”. Per esempio, se definiamo un elemento td di una tabella che contiene del testo con

l’attributo contenteditable="true", successivamente potremo fare clic all’interno della medesima cella per far apparire il classico caret (^) che ci indica che siamo in modalità di editing e che, dunque, possiamo compiere tutte le consuete operazioni di inserimento, modifica e cancellazione del relativo testo.

Vediamo, a questo punto, il Listato 1.7 che mostra come definire un form che raccoglie una serie di informazioni sull’utente che lo compila.

Listato 1.7 File Form_E_Controlli.html.

<!DOCTYPE html> <html> <head> <title>Form e controlli utente</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <form autocomplete="off"> <fieldset> <legend>Dettagli:</legend> <table> <tr>

<td>

<label for="nome">Nome: </label> </td> <td>

<input type="text" name="nome" id="nome" autofocus required

size="50" />

 

</td>

</tr>

<tr>

<td>

<label for="cognome">Cognome: </label> </td> <td>

<input type="text" name="cognome" id="cognome" required

size="50" />

 

</td>

</tr>

<tr>

<td>

<label for="pwd">Password: </label> </td> <td>

<input type="password" name="password" id="pwd" required

size="50"/>

</td>

</tr>

<tr>

<td>

<label for="data">Data di nascita: </label> </td> <td>

<input type="date" name="data" id="data" required/> </td> </tr> <tr>

<td>

Sesso:

</td>

<td>

<input type="radio" name="sesso" id="maschio"

value="maschio"/>

<label for="maschio">Maschio: </label> <input type="radio" name="sesso" id="femmina"

value="femmina"/>

<label for="femmina">Femmina: </label> </td> </tr> <tr>

<td>

<label for="mail">Email: </label> </td> <td>

<input type="email" name="mail" id="mail" multiple required size="50" placeholder="Ad esempio: thp1972@gmail.com" /> </td> </tr> <tr>

<td>

<label for="i_web">Indirizzo Web: </label> </td> <td>

<input type="url" name="i_web" id="i_web" size="50" placeholder="Ad esempio: http://www.pellegrinoprincipe.com"/> </td> </tr> <tr>

<td>

Materie preferite:

</td>

<td>

<input type="checkbox" name="storia" id="storia"

value="STO"/>

 

<label for="storia">Storia: </label> <input type="checkbox" name="matematica" id="matematica"

value="MAT"/>

 

<label for="matematica">Matematica: </label> <input type="checkbox" name="geografia" id="geografia"

value="GEO"/>

 

<label for="geografia">Geografia </label> <input type="checkbox" name="fisica" id="fisica"

value="FIS"/>

 

<label for="fisica">Fisica: </label> </td> </tr> <tr>

<td>

<label for="nr_libri">Quanti libri leggi all'anno? </label> </td> <td>

<input type="number" name="nr_libri" id="nr_libri" value="1"

/>

 

</td>

</tr>

<tr>

<td>

<label for="tm_libri">Ogni quanti mesi compri un libro?

</label>

</td>

<td>

<input type="range" name="tm_libri" id="tm_libri" min="1" step="1" max="12" value="1"/> </td> </tr> <tr>

<td>

<label for="colore">Il tuo colore preferito? </label> </td> <td>

<input type="color" name="colore" id="colore" /> </td> </tr> <tr>

<td>

Seleziona un sistema operativo:

</td>

<td>

<select name="so"> <optgroup label="Famiglia BSD"> <option value="fbsd">FreeBSD</option> <option value="obsd">OpenBSD</option> <option value="nbsd">NetBSD</option> </optgroup> <optgroup label="Famiglia Windows"> <option value="windows_8">Windows 8</option> <option value="windows_7">Windows 7</option> <option value="windows_xp">Windows XP</option> </optgroup> </select> </td> </tr> <tr>

<td>

<label for="lp">Scegli un linguaggio di programmazione:

</label>

</td>

<td>

<datalist id="lp_datasource"> <option value="Java"></option> <option value="C#"></option> <option value="C++"></option> <option value="PHP"></option> <option value="JavaScript"></option> <option value="Python"></option> </datalist> <input type="text" name="lp" id="lp" list="lp_datasource"/> </td> </tr> <tr>

<td>

<label for="note">Note: </label> </td> <td>

<textarea name="note" id="note" rows="10" cols="30" maxlength="2000" wrap="soft" spellcheck="true"></textarea> </td> </tr> <tr>

<td>

&nbsp;

</td>

<td>

<button type="submit" id="ok"> Salva i dati <img src="apply.png" /> </button> <button type="reset" id="reset"> Ripristina <img src="refresh.png" /> </button> </td> </tr> </table> </fieldset> </form> </body> </html>

Analizzando in dettaglio il sorgente HTML appena mostrato notiamo come

il form contenga la maggior parte dei controlli discussi: quelli di tipo testo

(input type="text"), dotati dell’attributo required che li rende obbligatori, attraverso cui inserire un nome e un cognome; di tipo password (input

type="password") con l’attributo required; di tipo data (input type="date"), con

l’attributo required, attraverso cui inserire una data di nascita; di tipo pulsante di opzione (input type="radio"), attraverso cui inserire il sesso; di

tipo email (input type="email"), con l’attributo required, placeholder e multiple,

con quest’ultimo che consente di inserire più indirizzi e-mail come valore del campo; di tipo URL (input type="url"), con l’attributo placeholder attraverso cui inserire l’URL di un sito web; di tipo casella di controllo (input type="checkbox"), attraverso cui inserire una o più materie di insegnamento preferite; di tipo numerico (input type="number"), attraverso cui

inserire la quantità di libri letti in un anno; di tipo slider (input type="range"), con gli attributi min, max e step che impongono di inserire dei valori compresi tra 1 e 12 (ossia i mesi che compongono un anno) e a step di 1, attraverso cui inserire ogni quanti mesi si compra un libro; di tipo colore (input type="color"), attraverso cui inserire un colore preferito; di tipo drop-down list (select e option), attraverso cui selezionare un sistema operativo di utilizzo appartenente a una determinata famiglia; di tipo list box (datalist e option), attraverso cui selezionare un linguaggio di programmazione preferito che è assegnato alla casella di testo che referenzia lo stesso menu

a tendina (tramite l’attributo list); di tipo casella di testo a più righe

(textarea), con l’attributo spellcheck che consente di evidenziare degli eventuali errori di ortografia che potrebbero occorrere durante la digitazione del testo, attraverso cui inseriamo delle note; di tipo pulsante di

submit (button type="submit"), attraverso cui effettuiamo l’invio del modulo (da notare come all’interno del tag <button> siano stati inseriti il testo Salva i dati, che funge da sua etichetta, e l’immagine apply.png, che viene renderizzata all’interno del pulsante medesimo); di tipo pulsante di reset (button type="reset"), attraverso cui effettuiamo la cancellazione di tutti i dati eventualmente inseriti nel form.

Abbiamo poi la presenza di alcuni elementi nuovi, non in precedenza citati.

fieldset: consente di raggruppare un insieme di controlli di un form disegnando attorno a essi : consente di raggruppare un insieme di controlli di un form disegnando attorno a essi un box rettangolare.

legend: consente di assegnare una didascalia o un titolo a un elemento : consente di assegnare una didascalia o un titolo a un elemento

fieldset.

label: permette di assegnare un titolo per un controllo di un form mediante del testo : permette di assegnare un titolo per un controllo di un form mediante del testo indicato all’interno del relativo tag, così come di creare un collegamento con il controllo medesimo, specificato mediante l’assegnazione del suo id nell’attributo for. In pratica, la relazione etichetta/controllo permetterà a un utente di fare clic sul testo oggetto dell’etichetta per far attivare (dare il focus) il corrispettivo controllo. Per esempio, se facciamo clic sull’etichetta con attributo for uguale a cognome automaticamente il focus si sposterà sulla casella di testo con id="cognome".

optgroup: consente di raggruppare un insieme di voci di un elemento select , tra di : consente di raggruppare un insieme di voci di un elemento select, tra di esse logicamente correlate, sotto un’unica etichetta, denominata mediante l’attributo label. Grazie a esso, potremo creare una sorta di intestazione di categoria il cui testo apparirà formattato in modo differente rispetto a quello delle relative voci.

Tra gli attributi non già citati, abbiamo invece i seguenti.

name: indica un nome da attribuire a un controllo di un form che viene utilizzato, : indica un nome da attribuire a un controllo di un form che viene utilizzato, primariamente, tramite una tecnologia lato server, per referenziarlo dopo il submit del form medesimo. Rappresenta dunque la parte chiave o nome di un parametro, rintracciabile in una stringa di query in caso di invio dei dati tramite il metodo GET, oppure nel corpo del messaggio della richiesta dopo gli header in caso di invio dei dati tramite il metodo POST. Se è omessa l’indicazione di tale attributo, allora per il relativo controllo non vi sarà il passaggio di alcun valore.

id: indica un identificatore univoco per l’elemento cui è applicato. Il valore indicato deve rispondere : indica un identificatore univoco per l’elemento cui è applicato. Il valore indicato deve rispondere ai seguenti principali vincoli: deve contenere al minimo un carattere; non deve contenere dei caratteri di spazio; non deve essere già stato assegnato a un altro elemento presente nello stesso documento.

value: indica un valore che si è espressamente assegnato al relativo elemento e la cui : indica un valore che si è espressamente assegnato al relativo elemento e la cui modalità di attribuzione dipende dalla semantica dell’elemento stesso che ne determina il comportamento (per esempio, nel caso di un elemento input di tipo button, value viene visualizzato come sua etichetta, mentre nel caso di un elemento li, value rappresenta il valore ordinale di quella voce). Nel caso dei controlli espressamente correlati a un form (per esempio, button, input, select e così via), esso è anche il valore che viene inviato dopo il submit del form stesso. In questo caso, value rappresenta la parte valore di un parametro, rintracciabile in una stringa di query in caso di invio dei dati tramite il metodo GET, oppure nel corpo del messaggio della richiesta dopo gli header in caso di invio dei dati tramite il metodo POST.

size: specifica la larghezza del relativo controllo espresso in un numero di caratteri visibili che, : specifica la larghezza del relativo controllo espresso in un numero di caratteri visibili che, è bene rammentare, non corrisponde mai precisamente a quanto indicato perché, di default, tranne se diversamente indicato mediante i CSS, il font utilizzato dal browser è di tipo proporzionale e non a spaziatura fissa.

maxlength: indica il numero massimo di caratteri che sono digitabili all’interno di un elemento input : indica il numero massimo di caratteri che sono digitabili all’interno di un elemento input o textarea.

rows e cols : indicano, rispettivamente, l’altezza e la larghezza di un elemento textarea espressi come e cols: indicano, rispettivamente, l’altezza e la larghezza di un elemento textarea espressi come numero di righe e di colonne o caratteri.

wrap: indica quale comportamento deve avere una textarea quando l’utente, digitando dei caratteri, arriva alla : indica quale comportamento deve avere una textarea quando l’utente, digitando dei caratteri, arriva alla fine di una riga. Tramite il valore hard imponiamo che si vada a capo automaticamente (alla riga successiva), e quando si fa il submit del form i ritorni a capo sono inclusi come parte del testo inviato; tramite il valore soft imponiamo sempre che si vada a capo automaticamente, ma quando si fa il submit del form i ritorni a capo non sono inclusi come parte del testo inviato.

Infine, mostriamo l’output del Listato 1.7, sia se un form è stato compilato correttamente (Figura 1.8) sia in caso contrario (Figura 1.9).

Elementi per la strutturazione di una pagina HTML

Oggi è consuetudine tra i web designer progettare la struttura di un documento HTML avvalendosi degli elementi denominati div. Tuttavia, si

sta iniziando a sconsigliarne l’impiego per casi specialistici (sezioni per gli header, i footer e così via) perché sono considerati troppo generici e privi

di una qualsivoglia semantica.

A suffragare quanto detto, ci aiuta la specifica HTML5 che, oltre a

precisare che l’elemento div non ha alcun significato particolare, precisa in una nota: “Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors”, ossia, in breve, a tale elemento devono essere preferiti altri elementi che hanno una semantica che rende chiaro lo scopo per cui sono utilizzati.

elemento devono essere preferiti altri elementi che hanno una semantica che rende chiaro lo scopo per

Figura 1.8 Output del file Form_E_Controlli.html, dati inseriti correttamente (Opera).

Form_E_Controlli.html, dati inseriti correttamente (Opera). Figura 1.9 Output del file Form_E_Controlli.html, dati

Figura 1.9 Output del file Form_E_Controlli.html, dati mancanti (Opera).

L’utilizzo di elementi HTML5 strutturali dotati di una propria semantica permette di fare quanto segue.

Migliorare la leggibilità e la mantenibilità del codice HTML. Infatti, l’utilizzo di tali nuovi tag, dato che rendono subito evidente lo scopo per cui sono stati impiegati (si pensi a <footer> ), permette di avere chiara la struttura del documento HTML sia all’autore dello stesso <footer>), permette di avere chiara la struttura del documento HTML sia all’autore dello stesso che ad altri sviluppatori web che ne stanno leggendo il sorgente, così come di effettuare, in futuro e con una relativa semplicità, un aggiornamento o modifica.

Facilitare l’accessibilità del documento HTML alle persone che hanno problemi di disabilità. Si pensi, per esempio, a come sia più semplice per uno screen reader “capire” la sezione del sito deputata alla navigazione delle pagine se si utilizza il tag <nav> piuttosto che un tag di divisione scritto come <div id="nav"> . <nav> piuttosto che un tag di divisione scritto come <div id="nav">.

NOTA

Per comprendere quali siano le strategie necessarie per strutturare e creare un sito web che consenta anche a persone che hanno problemi di disabilità di fruirlo nel migliore dei modi può essere interessante collegarsi al sito http://www.w3.org/WAI che fornisce, per l’appunto, guide, risorse e best practices per la web accessibility.

Facilitare la “comprensione” della struttura del documento HTML ai motori di ricerca che sono in grado di leggere adeguatamente i tag semantici e di indicizzarli. Ciò consente di ottenere per un sito, laddove i motori di ricerca siano ottimizzati per produrre risultati in accordo con i contenuti inseriti mediante tag semantici, una maggiore opportunità di trovare una corrispondenza (che non significa, però, un miglior ranking…) nei risultati delle query di ricerca.risorse e best practices per la web accessibility . Vediamo, dunque, quali sono i nuovi tag

Vediamo, dunque, quali sono i nuovi tag strutturali che possiamo impiegare per la costruzione delle pagine web sottolineando che essi, nella sostanza, permettono di raggruppare un blocco di codice HTML in una separata entità significativa a cui è anche possibile applicare un proprio stile di formattazione.

<header>: utile per indicare un’area di intestazione, per una pagina o per una sezione, dove : utile per indicare un’area di intestazione, per una pagina o per una sezione, dove è possibile inserire il titolo del sito web, la sua immagine o logo, il menu principale di navigazione, un modulo per l’effettuazione di ricerche, degli elementi h1, h2 e così via. Rappresenta, in via generale, un gruppo di elementi introduttivi o di ausilio alla navigazione.

<footer>: utile per indicare un’area di piè di pagina, per una pagina o per una : utile per indicare un’area di piè di pagina, per una pagina o per una sezione, dove è possibile inserire l’autore della pagina o della sezione cui si riferisce, notizie di copyright, regole per l’accessibilità, link a documenti a esso relativi, contratti di licenza e così via. Rappresenta, dunque, un gruppo di elementi posti, generalmente, anche se non necessariamente, alla fine di una pagina o sezione.

<section>: utile per indicare un’area che rappresenta una generica sezione di un documento che raggruppa : utile per indicare un’area che rappresenta una generica sezione di un documento che raggruppa tematicamente del contenuto come i capitoli di un libro, dei pannelli a schede, le sezioni di una tesi e così via.

<article>: utile per indicare un’area che rappresenta un blocco di testo, indipendente dal contenuto del : utile per indicare un’area che rappresenta un blocco di testo, indipendente dal contenuto del sito stesso e, dunque, distribuibile altrove come entità a sé stante. È possibile inserirvi, per esempio,

contenuto quale un post per un forum, un articolo per una rivista, un testo per un blog e, in via più generale, per una qualsiasi fonte di pubblicazione.

<nav>: utile per indicare un’area deputata al contenimento dei link che consentono la navigazione tra : utile per indicare un’area deputata al contenimento dei link che consentono la navigazione tra le pagine principali o più importanti del relativo sito. Come precisato dalla specifica HTML5, i link relativi al copyright, ai contatti, alle norme sulla privacy e così via andrebbero invece inseriti nell’elemento footer.

<aside>: utile per indicare un’area il cui contenuto è “tangenzialmente” relativo ai contenuti di altre : utile per indicare un’area il cui contenuto è “tangenzialmente” relativo ai contenuti di altre aree ma che è comunque da essi separato. Esempi di utilizzo si hanno quando si devono creare aree deputate all’inserimento di citazioni, note nel testo, banner pubblicitari, link di navigazione secondari e così via.

<details> e <summary>: utili per specificare un’area (tag <details> ), contenente delle informazioni aggiuntive e <summary>: utili per specificare un’area (tag <details>), contenente delle informazioni aggiuntive oppure altri elementi di markup, che può essere resa visibile o invisibile (collapsible box), dotata di un’intestazione che funge da etichetta o titolo (tag <summary>) e di un eventuale simbolo (per esempio, un piccolo triangolo nero rivolto verso destra, ): un clic sull’intestazione o sul simbolo permette di espandere o collassare l’area. Di default, se non è presente l’attributo booleano open, l’area deve risultare collassata, ovvero il suo contenuto non deve essere visibile.

Listato 1.8 File ElementiStrutturali.html.

<!DOCTYPE html> <html> <head> <title>Nuovi elementi semantici</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <header> <img src="logo.png" /> <nav> <ul>

<li><a href="home.html">Home</a></li> <li><a href="products.htm">Prodotti</a></li> <li><a href="services.htm">Tecnologia</a></li> <li><a href="services.htm">Assistenza</a></li> <li><a href="about.htm">About Us</a></li> </ul> </nav> </header>

<section> <hgroup> <h1>Benvenuti nel nostro sito dedicato alla tecnologia GNU/Linux</h1> <h3>Sceglieteci e non vi pentirete!!!</h3> </hgroup> <p>La nostra esperienza sui sistemi GNU/Linux, da più di 20 anni, <br /> ci permette di offrirvi un servizio di assistenza e consulenza senza eguali.</p> <p>Il nostro personale, altamente qualificato, è a vostra disposizione 24 ore su 24, 7 giorni su 7 per tutto l'anno, <br /> pronto a soddisfare ogni vostra richiesta. Nessuno può darvi di più!!! </p> </section> <aside> <h2>Ecco cosa hanno detto di noi:</h2> <details> <summary>- Alan Huk</summary> <p>Grandissimi, sempre pronti e professionali. </p> </details> <details> <summary>- Anna Smidth</summary> <p>Supporto eccellente. Complimenti. </p> </details> <details> <summary>- Pilgrim Assuol</summary> <p>Competitivi anche sul prezzo. Bravi. </p> </details> <details> <summary>- Red Stomne</summary> <p>Un Know-how senza paragone!!! </p> </details> </aside> <footer> <p></p> <img src="copy.png" /> </footer> </body> </html>

Il Listato 1.8 mostra come creare una pagina web per un sito che offre assistenza e consulenza per i sistemi GNU/Linux di una società denominata come TechonLinux.

Analizzando attentamente il sorgente relativo, notiamo che abbiamo suddiviso il documento HTML in quattro distinte sezioni, laddove la prima rappresenta un’area di intestazione (elemento header) al cui interno abbiamo posto un’immagine del logo aziendale e un elemento nav con una lista non ordinata contenente degli elementi href che consentono la navigazione verso le sezioni principali del sito.

La seconda sezione, definita mediante l’elemento section, rappresenta l’area principale del sito, dove abbiamo inserito alcuni paragrafi deputati a dare delle indicazioni sulle caratteristiche principali che contraddistinguono la società TechonLinux.

La terza sezione, definita mediante l’elemento aside, è un contenuto che mostra giudizi o commenti dati da alcuni clienti. Da notare come tali informazioni siano state inserite all’interno degli elementi details in modo da consentire all’utente di mostrarli o nasconderli a piacimento.

Infine, abbiamo la quarta e ultima sezione definita mediante l’elemento footer, con cui specifichiamo un’area di piè pagina al cui interno visualizziamo un’immagine che contiene le informazioni di copyright della società.

Elementi semantici per il testo

Oltre agli elementi semantici strutturali visti in precedenza, HTML5 ne definisce altri espressamente indicati per il testo (text-level semantics). Vediamone i relativi tag e funzioni.

<mark>: utile per evidenziare del testo che ha una certa importanza o rilevanza. Quando utilizzato, al utile per evidenziare del testo che ha una certa importanza o rilevanza. Quando utilizzato, al testo in esso contenuto, viene applicato di default uno sfondo di colore giallo.

viene applicato di default uno sfondo di colore giallo. Figura 1.10 Output del File ElementiStrutturali.html

Figura 1.10 Output del File ElementiStrutturali.html (Chrome).

<time>: utile per rappresentare date e orari codificati in un formato standard, mediante l’attributo datetime : utile per rappresentare date e orari codificati in un formato standard, mediante l’attributo datetime, come quello visto precedentemente per l’elemento input di tipo datetime (YYYY-MM- DDTHH:MM:SS.FFFtimezone), che software o programmi vari (timeline, calendari e così via) sono in grado di interpretare univocamente e correttamente. Nello stesso tempo, è anche possibile scrivere del testo come suo contenuto che rappresenta un orario o una data, formattati

in un modo più comprensibile dall’uomo. Per esempio, potremmo

indicare una data e un orario per un ipotetico appuntamento nel

seguente modo: Ciao ci vediamo <time datetime="2012-10-04T16:30+01:00">alle 4 e mezzo pomeridiane, il giorno 4 del prossimo mese di ottobre del corrente anno 2012.</time>.

<wbr>: utile per indicare un punto, nell’ambito di una parola particolarmente lunga, cui il browser : utile per indicare un punto, nell’ambito di una parola particolarmente lunga, cui il browser può autonomamente, se tale

parola è più lunga della larghezza del suo contenitore (come una cella

di una tabella particolarmente piccola) porre un’interruzione, ossia

spezzarla mandandone una parte nella riga successiva. Questo elemento è utile perché, a differenza del tag <br>, non forza il browser a porre un’interruzione di riga anche se il testo è più piccolo del suo contenitore.

<bdi>: utile per indicare una parte di testo che è opportuno isolare ( bidirectional isolation : utile per indicare una parte di testo che è opportuno isolare (bidirectional isolation) e formattare con una direzionalità di visualizzazione differente rispetto ad altro testo a esso esterno. Generalmente, infatti, il testo è renderizzato da sinistra a destra, ma a volte vi potrebbe essere la necessità di invertire tale modalità, come quando, per esempio, bisogna includere del testo in arabo o ebraico che deve essere visualizzato da destra a sinistra.

<ruby>, <rt> e <rp> : utili per marcare (tag <ruby> ) del contenuto espresso , <rt> e <rp>: utili per marcare (tag <ruby>) del contenuto espresso

in una lingua usata nell’Est asiatico (giapponese, cinese e così via),

cui assegnare un breve frammento di testo o annotazione (tag <rt>, ruby text) in base, generalmente, alla sua pronuncia, che viene apposta sopra i caratteri che annota. È possibile usare anche il tag <rp> (ruby parenthesis) per visualizzare delle parentesi tonde attorno a un ruby text, per mostrare comunque quell’annotazione nei browser che non supportano le annotazioni ruby (che non saranno mostrate dai browser che invece le supportano). Per esempio, il Listato 1.9 mostra degli ideogrammi scritti in cinese semplificato che sono annotati con la relativa “interpretazione” Pinyin che, ricordiamo, è il sistema ufficiale utilizzato per trascrivere i caratteri cinesi nell’alfabeto romano. Le Figure 1.11 e 1.12 mostrano, invece, il caricamento del documento del file Ruby.html, rispettivamente nel browser Chrome, che supporta le annotazioni ruby (visualizza le annotazioni sopra il testo che

annotano), e nel browser Firefox, che non le supporta (visualizza le annotazioni tra parentesi tonde a fianco degli ideogrammi).

Listato 1.9 File Ruby.html.

<!DOCTYPE html> <html> <head> <title>Ruby</title> <meta name="keywords" content="web, html5, javascript, css" charset="utf-8"> </head> <body> <h2>Un estratto del significato degli elementi <mark>ruby</mark>, <mark>rt</mark> e <mark>rp</mark></h2> <hr />

<h3>RUBY</h3>

<blockquote cite="http://www.whatwg.org/specs/web-apps/current- work/multipage/text-level-semantics.html#the-ruby-element"> The ruby element allows one or more spans of phrasing content to be

marked…

</blockquote>

<h3>RT</h3>

<blockquote cite="http://www.whatwg.org/specs/web-apps/current- work/multipage/text-level-semantics.html#the-rt-element"> The rt element marks the ruby text component of a ruby… </blockquote>

<h3>RP</h3>

<blockquote cite="http://www.whatwg.org/specs/web-apps/current- work/multipage/text-level-semantics.html#the-rp-element"> The rp element can be used to provide parentheses around a ruby text… </blockquote> <hr /> <h3>UN ESEMPIO</h3> <ruby>

<rp>(</rp><rt>hàn</rt><rp>)</rp>/> <h3>UN ESEMPIO</h3> <ruby>

<rp>(</rp><rt>zì</rt><rp>)</rp></ruby> </body> </html>

</ruby>

</body>

</html>

Figura 1.11 Output del file Ruby.html visualizzato da Chrome.

Figura 1.11 Output del file Ruby.html visualizzato da Chrome.

Miscellanea di elementi

HTML5 mette a disposizione ben 110 elementi. Molti li abbiamo visti nel corso di questo capitolo. Altri invece non sono stati presentati in quanto il loro utilizzo, sebbene possibile, non è frequente. Per completezza di trattazione li elenchiamo brevemente in questo paragrafo conclusivo, mostrandone la funzionalità e i relativi tag.

conclusivo, mostrandone la funzionalità e i relativi tag. <abbr> ( abbreviation ), indica un’abbreviazione

<abbr> (abbreviation), indica un’abbreviazione o un acronimo come può essere, per esempio, WHATWG, WWW, eccetera. Opzionalmente possiamo utilizzare l’attributo title al fine di specificare il significato esteso dell’acronimo o dell’abbreviazione, che comparirà all’interno di un apposito tooltip attivabile posizionando il puntatore del mouse sul testo abbreviato.

posizionando il puntatore del mouse sul testo abbreviato. Figura 1.12 Output del file Ruby.html visualizzato da

Figura 1.12 Output del file Ruby.html visualizzato da Firefox.

Snippet 1.7 Utilizzo dell’elemento abbr.

<p>

The <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> is a growing community of people

interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.

</p>

of HTML and APIs needed for Web applications. </p> <address> specifica informazioni di contatto per

<address> specifica informazioni di contatto per l’autore di un documento (se è inserito all’interno dell’elemento body) o di un articolo (se è inserito all’interno dell’elemento article).

Snippet 1.8 Utilizzo dell’elemento address.

<address> Documento redatto da: Pellegrino Principe<br /> Consulta le sue attività su: www.pellegrinoprincipe.com<br /> </address>

<bdo> ( bidirectional override ) sovrascrive la direzionalità corrente del testo e si utilizza congiuntamente all’attributo (bidirectional override) sovrascrive la direzionalità corrente del testo e si utilizza congiuntamente all’attributo dir che può avere i valori ltr (left-to-right, ossia il testo ha una direzione che va da sinistra a destra) e rtl (right-to-left, ossia il testo ha una direzione che va da destra a sinistra).

Snippet 1.9 Utilizzo dell’elemento bdo.

<p>

 

<bdo dir="rtl">Ciao, Ciao mondo

</bdo>

</p

Ciao mondo </bdo> </p <cite> descrive il titolo di un lavoro (libro,

<cite> descrive il titolo di un lavoro (libro, film, gioco, opera d’arte e così via) ma mai il nome di una persona.

Snippet 1.10 Utilizzo dell’elemento cite.

<p>Il mio libro favorito è <cite>2001: odissea nello spazio</cite> di Arthur C. Clarke…</p>

spazio</cite> di Arthur C. Clarke…</p> <data> specifica un’informazione (un dato) in una

<data> specifica un’informazione (un dato) in una forma comprensibile per l’uomo (human-readable) offrendola però allo stesso tempo, tramite l’attributo value, in una forma adatta e interpretabile da un software o un programma specifico (machine-readable).

Snippet 1.11 Utilizzo dell’elemento data.

<ul>

<li><data value="0xA">Libro numero dieci

</data></li>

<li><data value="0x19">Libro numero venticinque </ul>

</data></li>

venticinque </ul> </data></li> <del> ( deleted ) definisce del testo che deve

<del> (deleted) definisce del testo che deve essere marcato come rimosso da un documento (di norma appare barrato). Possiamo, inoltre, utilizzare gli attributi: cite, per specificare l’URL di un

documento che spiega la ragione per cui il testo è stato rimosso; datetime, per specificare la data e l’ora in cui il testo è stato rimosso.

Snippet 1.12 Utilizzo dell’elemento del.

<ul>

<li>Bug nr.10

</li>

<li><del datetime="2012-05-10T01:10:07Z">Bug nr. 11

</del></li>

<li><del datetime="2012-06-10T22:32:04Z">Bug nr. 12

</del></li>

<li>Bug nr. 13 </ul>

</li>

<dfn> ( definition ) rappresenta l’istanza di definizione di un termine, ossia marca una parola, un’abbreviazione (definition) rappresenta l’istanza di definizione di un termine, ossia marca una parola, un’abbreviazione e così via che necessita, per l’appunto, di essere compiutamente dettagliata o spiegata.

Snippet 1.13 Utilizzo dell’elemento dfn.

<p>

The <dfn><abbr title="Total cost of ownership">TCO</abbr></dfn> is a financial estimate whose purpose is to help consumers and enterprise managers determine direct and indirect costs of a product or system.

</p>

<dialog> rappresenta una finestra di dialogo con cui l’utente può interagire. È però necessario ricordare che, rappresenta una finestra di dialogo con cui l’utente può interagire. È però necessario ricordare che, nel momento in cui vengono scritte queste righe, nessun browser supporta questo interessante elemento.

<embed> incorpora in un documento una risorsa esterna, per esempio un file multimediale, e lo visualizza incorpora in un documento una risorsa esterna, per esempio un file multimediale, e lo visualizza o lo riproduce attraverso un apposito plug-in. Attributi fondamentali sono src, attraverso il quale si fornisce l’indirizzo della risorsa da incorporare, e type, con cui si imposta il MIME type della predetta risorsa (è anche possibile utilizzare degli attributi i cui nomi e valori sono quelli indicati dalla documentazione del relativo plug-in).

Snippet 1.14 Utilizzo dell’elemento embed.

<embed type="application/x-shockwave-flash" src="pingponggame.swf" quality="high">

<ins> ( inserted ) definisce del testo che è stato inserito, aggiunto in un documento e, (inserted) definisce del testo che è stato inserito, aggiunto in un documento e, come l’elemento del di cui è complementare, supporta gli attributi cite e datetime.

Snippet 1.15 Utilizzo dell’elemento ins.

<ul>

<li>Feature nr. 100

</li>

<li><ins datetime="2012-03-10T20:32:04Z">Feature nr. 120

</ins></li>

<li>Feature nr. 300 </ul>

</li>

<li>Feature nr. 300 </ul> </li> <noscript> definisce del contenuto HTML alternativo

<noscript> definisce del contenuto HTML alternativo da visualizzare (fallback content) se un browser non supporta un linguaggio di scripting o se lo stesso è stato disabilitato dall’utente. Si usa normalmente insieme all’elemento script.

Snippet 1.16 Utilizzo dell’elemento noscript.

<script> // l'alert box sarà visualizzato solo se JavaScript è abilitato o supportato. // In caso contrario sarà eseguito il codice HTML innestato nel tag <noscript> var j = 30; alert("j = " + j); </script> <noscript><p>Attenzione il tuo browser non supporta JavaScript!!!</p></noscript>

<object> incorpora, al pari dell’elemento embed , del contenuto esterno laddove l’URL e il MIME type incorpora, al pari dell’elemento embed, del contenuto esterno laddove l’URL e il MIME type sono specificati attraverso gli attributi data e type. Fondamentalmente l’elemento object si sovrappone all’elemento embed ma, in accordo con la specifica, dovrebbe essere usato per incorporare qualsiasi contenuto esterno generico (immagini, video, pagine HTML e così via), mentre l’elemento embed dovrebbe essere usato per incorporare del contenuto che può essere fruito solo grazie ad appositi plug-in. In pratica l’elemento object rappresenta qualsiasi risorsa esterna, mentre l’elemento embed rappresenta un punto di integrazione, una sorta di contenitore, per un’applicazione esterna (tipicamente non HTML) o del contenuto interattivo.

Snippet 1.17 Utilizzo dell’elemento object.

<figure> <object data="Calendario.html"></object> <figcaption>Un calendario personalizzato</figcaption> </figure>

personalizzato</figcaption> </figure> <param> ( parameter ) definisce un parametro, il

<param> (parameter) definisce un parametro, il cui nome è fornito dall’attributo name e il cui valore dall’attributo value, per un plug-in utilizzato da un elemento object. Chiaramente tale elemento deve essere “nidificato” nel relativo elemento object e i suoi attributi devono contenere dei valori aderenti a quelli previsti dal plug-in invocato.

Snippet 1.18 Utilizzo dell’elemento param.

<object data="my_movie.swf" type="application/x-shockwave-flash"> <param name="allowfullscreen" value="true"> <param name="loop" value="false"> <param name="quality" value="best"> </object>

value="best"> </object> <q> ( quotation ), indica una breve citazione.

<q> (quotation), indica una breve citazione.

Snippet 1.19 Utilizzo dell’elemento q.

<p>Ecco una famosa citazione del grande fisico Enrico Fermi:

<q>

Ci sono soltanto due possibili conclusioni: se il risultato conferma le

ipotesi,

allora hai appena fatto una misura; se il risultato è contrario alle ipotesi, allora hai fatto una scoperta.

</p>

</q>

<s> ( strikethrough ) indica del contenuto che non è più accurato, corretto o rilevante. (strikethrough) indica del contenuto che non è più accurato, corretto o rilevante.

Snippet 1.20 Utilizzo dell’elemento s.

<p>HARDWARE DISCOUNT</p> <p><s>Prezzo all'ingrosso scheda video ATI 4850: €100,00</s></p> <p><strong>Prezzo attuale di vendita scontato: €50,00</strong></p>

di vendita scontato: €50,00</strong></p> <small> definisce del testo che deve essere

<small> definisce del testo che deve essere renderizzato con un font più piccolo rispetto al testo normale. Generalmente marca del testo che indica informazioni di copyright, di disclaimer, di licenza, di restrizioni legali, di avvertimenti vari e così via.

Snippet 1.21 Utilizzo dell’elemento small.

<footer> <address> Contact: <a href="mailto:thp1972@gmail.com">Pellegrino Principe</a>. </address> <p><small>© Copyright 2012, Pellegrino ~thp~ Principe</small></p> </footer>

~thp~ Principe</small></p> </footer> <track> specifica una traccia testuale di un file

<track> specifica una traccia testuale di un file multimediale incorporato tramite gli elementi audio e video che potrebbe essere visibile durate la riproduzione (per esempio i sottotitoli). Fondamentali sono gli attributi: kind, che indica il tipo di traccia tra

captions, chapters, descriptions, metadata e subtitles; src, che indica l’URL

del file della traccia.

Snippet 1.22 Utilizzo dell’elemento track.

<video id="video_container"

autoplay>

<source src="video/nebula.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="video/nebula.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

/>

<source src="video/nebula.webm" type='video/webm; codecs="vp8, vorbis"' /> <track kind=subtitles src=nebula.en.vtt srclang=en label="English"> <track kind=captions src=nebula.en.hoh.vtt srclang=en label="English for the Hard of Hearing"> <track kind=subtitles src=nebula.fr.vtt srclang=fr lang=fr label="Français"> <track kind=subtitles src=nebula.de.vtt srclang=de lang=de label="Deutsch"> <p>Il tuo browser non supporta l'elemento HTML5 video</p> </video>

<u> ( underline ) marca del testo che definisce un nome proprio cinese, una parola scritta (underline) marca del testo che definisce un nome proprio cinese, una parola scritta con errori di ortografia e così via, che deve essere visualizzato in modo differente dal testo normale. È qui importante precisare che per HTML5 l’elemento u ha una valenza espressamente semantica e non di presentazione (ossia porre arbitrariamente un carattere di sottolineatura per una porzione di testo). Ricordiamo anche che in HTML4 l’elemento u era a quel fine deprecato (in favore dell’uso di un elemento span stilizzato tramite CSS con la proprietà

text-decoration="underline").

Snippet 1.23 Utilizzo dell’elemento u.

<p>La parola <u>daccordo</u> deve essere scritta sempre come d'accordo

</p>

<var> ( variable ) indica del testo che rappresenta una variabile nell’ambito di un’espressione matematica o (variable) indica del testo che rappresenta una variabile nell’ambito di un’espressione matematica o di un listato di un programma (per esempio l’identificatore di una costante, un simbolo di una quantità fisica e così via).

Snippet 1.24 Utilizzo dell’elemento var.

<p>Nell'ambito del sorgente mostrato la costante <var>MAX_DIM</var> indica che

</p>

Per concludere, la Figura 1.13 mostra alcuni degli elementi HTML appena presentati renderizzati da un browser.

Figura 1.13 Renderizzazione di alcuni elementi HTML (Firefox).

Figura 1.13 Renderizzazione di alcuni elementi HTML (Firefox).

Capitolo 2

Il layer di presentazione: CSS3

I Cascading Style Sheets (CSS) o i fogli di stile, sono lo strumento

fondamentale per definire come un documento HTML deve essere visualizzato da un browser, ovvero, per dirla in altri termini, come i suoi elementi strutturali, definiti tramite l’applicazione dei tag HTML, devono essere presentati all’utente finale (che colore avranno? Come saranno posizionati? Che dimensione avranno? E cosi via).

I CSS, è bene dirlo subito, non sono affatto utilizzabili mediante la sintassi

propria di un linguaggio di programmazione; molto più semplicemente, come vedremo meglio poi, la loro sintassi è caratterizzata da regole, scritte all’interno di un file HTML o in un file di testo separato, che definiscono, attraverso delle proprietà e dei valori, come gli elementi di una pagina web devono apparire sullo schermo.

Possiamo quindi dire che il cardine dei CSS è lo stile, identificabile, in via generica, come un insieme di proprietà (colore, font, posizione e così via) applicabili a un elemento HTML.

La forza dei CSS risiede nel fatto che consentono di separare la struttura del contenuto di una pagina (il codice HTML) dalla modalità in cui questo contenuto deve apparire o essere visualizzato.

Breve storia dei CSS I CSS sono uno standard web creato in seno al W3C, la cui prima versione (CSS Level 1 o CSS1) fu rilasciata nel lontano 1996. A quel tempo, i CSS1 contenevano il core delle caratteristiche dei fogli di stile unitamente alla capacità di attribuire margini e bordi, scegliere dei font, allineare testo e immagini e così via. Nel 1998 giunse la seconda versione dei CSS (CSS Level 2, CSS2), che migliorava la precedente e aggiungeva la capacità di posizionare gli elementi sullo schermo, il concetto dei media type, la possibilità di visualizzare il testo in modo bidirezionale e così via. Successivamente, fu pubblicata una specifica (CSS Level 2 Revision 1, CSS2.1), la cui prima Candidate Recommendation fu del 2004, che era piuttosto una revisione dei CSS2, in quanto ne correggeva alcuni errori, ne rimuoveva delle caratteristiche e ne aggiungeva delle altre che i browser come estensioni proprietarie avevo implementato. Oggi i CSS sono giunti al livello 3 della specifica (CSS Level 3, CSS3) e i progettisti, oltre ad avere aggiunto altre caratteristiche come, per esempio, le trasformazioni e le transizioni, hanno – come evidenziato nel Working Draft dei CSS del dicembre del 2010 – separato la medesima specifica in tanti moduli separati (CSS Basic User Interface Module Level 3, CSS Style

Attributes, Selectors Level 3, Media queries e così via) che vanno ad aggiungere o rifinire le caratteristiche del livello 2.1.

In più, questa separazione può essere resa maggiormente efficiente mediante la creazione di un file di regole CSS distinto dal file del documento HTML, che agisce come una sorta di risorsa creata ad hoc per quel documento o, in via più generale, come risorsa centralizzata per un intero sito web (si pensi a un file CSS che contiene delle regole di presentazione per l’header e il footer di tutte le pagine web che si ripetono e che dunque si avvalgono sempre dello stesso foglio di stile).

Infine, e questo è un altro aspetto da considerare per l’utilizzo dei CSS, essi sono uno strumento che consente di effettuare le modifiche di presentazione di un documento HTML in modo versatile e scalabile.

Infatti, se per esempio abbiamo creato un file CSS che definisce la modalità di visualizzazione degli elementi h1 e lo stesso file è stato utilizzato da tutte le pagine di un sito, basterà modificare il file CSS per essere certi che tutti gli elementi h1 del sito vengano, automaticamente, interessati dal cambiamento di stile.

ATTENZIONE I browser, spesso, implementano delle nuove proprietà dei CSS che sono delle loro estensioni proprietarie. Al fine di evitare dei conflitti con le specifiche dei CSS, che magari le hanno poi implementate ufficialmente, ogni browser antepone un prefisso al nome di tali nuove proprietà. Abbiamo infatti: -moz- per Firefox; -ms- per Internet Explorer; -o- per Opera; -webkit- per Chrome. In ogni caso, al fine di evitare confusione o studiare proprietà che saranno magari in futuro abbandonate, analizzeremo solo quelle espressamente previste dai CSS e che i browser hanno implementato senza alcun prefisso proprietario.

Regole e selettori di base

Per utilizzare i CSS si devono costruire delle regole, ovvero dei costrutti sintattici attraverso cui si definiscono gli stili da applicare agli elementi di una pagina web.

Ogni regola è formata dalle seguenti parti (Figura 2.1).

Da un selettore, costituito da un insieme di caratteri alfanumerici che identificano la regola (Tabella 2.1). Esso può essere: di tipo elemento HTML ( type selector ), e indica direttamente l’elemento HTML cui applicare la regola elemento HTML (type selector), e indica direttamente l’elemento HTML cui applicare la regola (per esempio p, div, span e così via); di tipo selettore di classe, che inizia con il carattere punto (.), e indica una regola da applicare a qualsiasi elemento HTML dotato di un particolare attributo class; di tipo ID, che inizia con il carattere di cancelletto (#) e indica una regola da applicare all’elemento HTML dotato di un particolare attributo id; di tipo universale, scritto con il solo carattere asterisco (*) che indica una regola da applicare a tutti gli elementi HTML del documento; di tipo dependent class, scritto con l’indicazione dell’elemento HTML, il carattere . e il nome della classe che indica una regola da applicare agli elementi HTML che riferiscono alla classe indicata; di tipo dependent ID, scritto con l’indicazione dell’elemento HTML, il carattere # e il valore dell’id che indica una regola da applicare allo specifico elemento HTML che ha l’attributo id uguale a quello indicato nel selettore medesimo.

Da un blocco di definizione, posto tra le parentesi graffe ({} ), al cui interno si scrivono coppie di proprietà CSS e relativi valori espressi {}), al cui interno si scrivono coppie di proprietà CSS e relativi valori espressi nella forma nome proprietà : valore. Ogni coppia proprietà/valore deve essere separata dal carattere punto e virgola (;). Un blocco di definizione stabilisce, quindi, attraverso delle proprietà (font, colore, allineamento e così via) e i corrispettivi valori scelti, un determinato stile che verrà poi applicato all’elemento o agli elementi identificati mediante il relativo selettore.

Figura 2.1 Struttura di una regola. Tabella 2.1 Un breve esempio dei tipi dei selettori

Figura 2.1 Struttura di una regola.

Tabella 2.1 Un breve esempio dei tipi dei selettori di base.

Selettore

Nome selettore

 

A cosa si applica

div