html5 - ferrazzi.info · dott.ing.ivan ferrazzi html5 introduzione ai concetti base dott. ing. ivan...

Dott.Ing.Ivan Ferrazzi

HTML5

Introduzioneai

concetti base

Dott. Ing. Ivan FerrazziV1.5 del 25/03/2020

1/56


Copyright ©2017 Dott.Ing. Ivan FerrazziPermission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.

2/56


Indice generaleIntroduzione.........................................................................................................5HTML....................................................................................................................6

Messaggi di stato HTTP....................................................................................7Il DOCTYPE.......................................................................................................7I tag e gli attributi............................................................................................7I commenti.......................................................................................................8

I tag di struttura..................................................................................................9Il tag <html>...</html>..................................................................................9Il tag <head>...</head>...............................................................................10Il tag <body>...</body>...............................................................................10Il tag <header>.............................................................................................11Il tag <main>................................................................................................11Il tag <footer>...............................................................................................11Il tag <section>.............................................................................................11Il tag <nav>..................................................................................................12Il tag <article>..............................................................................................12Il tag <aside>................................................................................................12

Tipi di tag...........................................................................................................13Tag a blocco...................................................................................................13Tag in linea.....................................................................................................13Tag a blocco in linea.......................................................................................14

Tag per i testi.....................................................................................................15I tag per definire i titoli..................................................................................15Il tag per testi con formattazione non definita...............................................15Lo stile dei testi..............................................................................................16I paragrafi......................................................................................................17Interruzione di riga.........................................................................................17Il tag per definire i link (le ancore).................................................................17Le linee divisorie............................................................................................18Il tag <mark>................................................................................................19Il tag <datalist>.............................................................................................19Il tag <meter>...............................................................................................19Il tag <progress>...........................................................................................20Il tag <iframe>..............................................................................................20

HTML Entities.....................................................................................................21Le tabelle...........................................................................................................23Le immagini.......................................................................................................28

I tag <figure> e <figcaption>.......................................................................29Definire aree su immagini..............................................................................29

Gli elenchi..........................................................................................................31Tag per moduli da compilare.............................................................................33

Il tag <input />..............................................................................................34Il tag <label>...</label>................................................................................37Il tag <fieldset>...</fieldset>........................................................................38Il tag <textarea>...</textarea>....................................................................38Il tag <select>...</select>............................................................................39

3/56


Validare il codice................................................................................................41I CANVAS............................................................................................................43

Le proprietà e i metodi per i canvas..............................................................44Stile di riempimento con fillStyle......................................................................................44Riempimento graduale......................................................................................................44Riempimento a pattern.....................................................................................................45Disegnare percorsi............................................................................................................46Disegnare tratti curvi........................................................................................................46Disegnare testo.................................................................................................................47Posizionare un'immagine..................................................................................................47

SCALABLE VECTOR GRAPHICS (SVG).................................................................49Le principali figure geometriche....................................................................50

La linea.............................................................................................................................51Il tracciato.........................................................................................................................51Il cerchio...........................................................................................................................51Il poligono.........................................................................................................................51Il rettangolo......................................................................................................................51L'ellisse.............................................................................................................................52Il percorso.........................................................................................................................52

Il testo............................................................................................................53Posizionamento assoluto...................................................................................................53Posizionamento relativo....................................................................................................53Attributi per <text> e <tspan>........................................................................................53Testo lungo un percorso....................................................................................................54

Le immagini...................................................................................................54TAG MULTIMEDIALI.............................................................................................55

File video........................................................................................................55File audio........................................................................................................56

4/56


Introduzione.Internet è divenuto ormai il canale di comunicazione per eccellenza. L'Internetci permette di trasportare in tempo reale testi, voce e video da una parteall'altra del mondo. Una parte dell'Internet che permette di trasferireinformazioni di ogni genere mediante il protocollo HTTP è il World Wide Web(WWW).Il software necessario sul nostro computer per poter usufruire di questo servizioè il web browser, oppure comunemente chiamato browser. Alcuni dei browserpiù conosciuti sono MS Internet Explorer, Mozilla Firefox, Chrome, Safari, Opera.Le informazioni vengono trasmesse attraverso il WWW utilizzando il linguaggioHTML (Hyper Text Markup Language) che poi viene interpretato dal relativobrowser che ripropone il contenuto nel giusto formato.

5/56


HTMLHTML (Hypertext Markup Language) è un linguaggio con il quale si può definirel'aspetto delle pagine Web. Possiamo definire come disporre le immagini, comeformattare ed allineare il testo, effettuare collegamenti tra varie pagine Web,ecc. utilizzando dei marcatori, chiamati “tag”. Quello che invece non possiamofare è modificare il flusso di elaborazione durante l'interpretazione, come vienefatto con tutti i normali linguaggi di programmazione. Proprio per questo motivoHTML non può essere classificato un linguaggio di programmazione.Un file HTML può essere creato con un qualsiasi editor testuale che permetta ilsalvataggio del solo testo, senza quindi aggiunta di formattazione. L'estensioneutilizzata per un file HTML è .html.Un nome di dominio (es. www.miodominio.it) fa riferimento ad uno spazio Webche deve contenere (parlando di sole pagine HTML) la pagina index.html, perfunzionare in maniera corretta. Una volta creato il file HTML viene quinditrasmesso o copiato sul server Web da dove può essere scaricato utilizzandoun browser (programma per la navigazione su Internet). E' poi compito delbrowser interpretare il linguaggio HTML presente all'interno del relativo filescaricato e visualizzare la pagina Web in maniera corretta. Lo stesso codicepuò, infatti, essere interpretato differentemente da vari browser (tipo InternetExplorer, oppure Mozilla Firefox) che può quindi portare a risultati diversi. E'quindi consigliabile effettuare dei test su più browser prima di pubblicare lepagine create.L'organizzazione che si occupa di standardizzare il linguaggio HTML è il W3C,ossia World Wide Web Consortium. L'ultima versione rilasciata da questaorganizzazione è HTML5 ed è quella che tratteremo in questa documentazione.

6/56

http://www.miodominio.it/


Messaggi di stato HTTP.

Quando il browser effettua una richiesta al web server questo potrebberispondere con un messaggio di errore. Qui di seguito trovate i messaggi piùcomuni:

200 OK La richiesta è andata a buon fine301 Moved Permanently La pagina richiesta è stata spostata

permanentemente su una nuova URL307 Temporary Redirect La pagina richiesta è stata spostata

temporaneamente su una nuova URL400 Bad Request La sintassi della richiesta non è corretta403 Forbidden Si cerca di accedere a dei contenuti non accessibili404 Not Found La pagina richiesta non esiste500 Internal Server Error Messaggio in caso di errore generico

Il DOCTYPE.

Per definire il tipo di documento come HTML5 scriviamo semplicemente:

<!DOCTYPE html>

I tag e gli attributi

Il linguaggio HTML è un insieme di marcatori (detti “tag”) che permettono didefinire la visualizzazione di una pagina Web. Un tag è di solito composto dadue parti: un'apertura, il contenuto e una chiusura. L'apertura contiene unnome che ne identifica la funzione e una serie di attributi che permettono dimodificare il comportamento della funzione stessa. Il tutto viene inseritoall'interno di parentesi uncinate. Il contenuto è di solito quello che vienepresentato direttamente all'interno della pagina Web. La chiusura, invece,contiene uno slash “/” prima del nome che identifica la funzione del tag aperto.Anche la chiusura viene inserita all'interno di parentesi uncinate.

<tag attributo attributo ...>contenuto</tag>

La struttura utilizzata per gli attributi è nome_attributo=”valore”. Un esempioconcreto potrebbe essere:

<span id=”saluto”>Benvenuti sul mio sito</span>

Non tutti i tag hanno una chiusura. In questo caso si parla di tag vuoti (emptytags). Il tag per l'inserimento delle immagini, ad esempio, viene utilizzato comesegue

<img src=”immagine.gif” alt=”immagine” />

7/56

La chiusura in questione avviene all'interno dello stesso tag di apertura.

I tag possono essere annidati l'uno dentro l'altro, ma è importante chiudere itag partendo dall'ultimo aperto.Esempio:

<TAG1 attributo> contenuto1 <TAG2 attributo> contenuto2 </TAG2></TAG1>

Dall'esempio visualizzato diventa chiara anche l'importanza dell'indentazionedel codice per renderlo più leggibile. Più spazi ed invii consecutivi vengonointerpretati da un browser come un unico spazio.

I seguenti attributi non verranno descritti per i vari tag perché disponibili per unqualsiasi elemento:

class permette di definire una o più classi di stile per l'elemento inquestione

id permette di specificare un identificatore univocostyle permette di specificare le proprietà CSS per l'elementotitle permette di aggiungere un testo all'elemento visualizzato come

etichetta nel momento in cui ci si trova sopra con il puntatore delmouse

I commenti

Per aumentare ulteriormente il grado di leggibilità del codice possiamo inserireanche dei blocchi di commento come segue:



Questi blocchi sono presenti, ma non vengono interpretati dal web browser.

8/56


I tag di strutturaVediamo in questa sezione i principali tag utilizzati per creare la strutturainiziale di una pagina html.

Il tag <html>...</html>.

Il tag principale che definisce il contenuto della pagina HTML è <html>...</html>.All'interno di esso possiamo trovare i tag <head>...</head> e <body>...</body> chepermettono di definire rispettivamente informazioni particolari della paginastessa (head) ed il suo contenuto (body).Vediamo ora un esempio pratico. Creiamo utilizzando il seguente codice un semplice file di testo che andremo a chiamare hello.html:

<!DOCTYPE html><html> <head> </head> <body> Hello World! </body></html>

Se, dopo averlo creato, clicchiamo due volte con il tasto sinistro del mousesull'icona del file stesso vedremo apparire la scritta Hello World! all'interno delnostro web browser predefinito.

9/56


Il tag <head>...</head>.

All'interno del tag <head>...</head> possiamo trovare diversi tag alcuni dei qualisono:

<base ... /> Permette di definire URL base per tutti i link relativiall'interno della pagina. Il link base si definisce conl'attributo href. E' possibile definire anchel'attributo target che per mette di definire il targetbase per tutti i link e l'invio dei form.

<title>...</title> Questo tag permette di definire il titolo chevogliamo dare alla nostra pagina HTML e dovrebbesempre essere presente. Il testo che viene inseritoall'interno di questo tag viene visualizzato nellabarra dei titoli del web browser.

<meta ... /> I META-tag sono dei tag che permettono di daredelle informazioni aggiuntive della pagina stessa alweb browser, come la lingua utilizzata, il charset,l'autore della pagina, la descrizione dei contenuti,ecc.

<link ... /> Questo tag permette di effettuare link (quindiincludere) risorse esterne.

<script>...</script> Questo tag permette di utilizzare codice dilinguaggi di programmazione aggiuntivo come adesempio Javascript.

<noscript>...</noscript> Quello che viene inserito all'interno di questo tagapparirà all'interno del browser nel caso in cui nonci sia un supporto a Javascript.

<style>...</style> All'interno di questo tag possiamo definire gli stilida utilizzare per i singoli contenuti della pagina.

Proviamo a modificare il nostro semplice esempio iniziale come segue:

<!DOCTYPE html><html> <head> <title>Titolo della pagina</title> </head> <body> Hello World! </body></html>

Il tag <body>...</body>

Come precedentemente accennato utilizziamo questo tag per definire tutto ilcontenuto della pagina stessa, quindi quello che vediamo direttamenteall'interno del web browser.

10/56


Esempio:

<!DOCTYPE html><html> <head> <title>Il mio sfondo</title> </head> <body> Hello World! </body></html>

Il tag <header>.

Questo tag può essere utilizzato per definire l'intestazione di particolari sezioniall'interno della pagina stessa. Attenzione a non confondere questo tag con iltag <head> che identifica il blocco di intestazione dell'intera pagina. Il tag inquestione va utilizzato se aumenta la comprensione (anche da un punto di vistastrutturale) della sezione che stiamo creando. Es.:

<header> <h1>Titolo principale</h1> <h2>Titolo secondario</h2></header>

Il tag <main>.

Questo tag indica la parte principale della nostra pagina, ossia la parte chedovrebbe cambiare contenuto in base alla pagina visualizzata all'interno delnostro sito.

Il tag <footer>.

Così come il tag <header> anche questo tag permette di definire le informazionidi piè di pagina all'interno di una sezione ben definita. Possiamo utilizzarequesto tag per definire il piè di pagina dell'intera pagina o di sezioni particolari.

Il tag <section>.

Questo tag viene utilizzato per definire delle sezioni generiche all'interno dellastruttura concettuale del sito. Questo non deve però in nessun caso sostituirel'utilizzo dei <div> nella definizione della struttura grafica del sito.Ogni sezione che contiene determinati elementi può essere definita utilizzandoil tag <section>. Un contenitore che all'interno del sito visualizza l'elenco degli

11/56


articoli di un blog, oppure l'elenco di articoli messi in vendita, può esseredefinito con il tag in question. Es.

<section> <h1>Elenco degli articoli:</h1> <article> … </article> <article> … </article> … </section>

Il tag <nav>.

Questo blocco permette di identificare con esattezza il menu di navigazionemesso a disposizione all'interno del sito. Ogni menu di navigazione orizzontale,oppure verticale verrà inserito all'interno di questo blocco. Sarà quindi possibileidentificare in maniera automatica la o le sezioni che contengono i link ad altreparti del sito. Es.:

<nav> <h1>Navigazione:</h1> <ul> <li>Chi siamo</li> … </ul></nav>

Il tag <article>.

Questo tag permette di definire sezioni autonome all'interno del proprio sito.Queste sezioni potrebbere essere riprese all'interno di altri siti, oppureall'interno di altre sezioni del nostro sito. Es.

<article> <header> <h1>Art. 1515 – Titolo dell'articolo</h1> </header> <p>Descrizione dell'articolo</p></article>

Il tag <aside>.

Possiamo utilizzare questo tag per definire delle sezioni che contengono delleinformazioni marginali (o aggiuntive) in base al proprio contenitore che locontiene.

12/56


Tipi di tagI tipi di tag si dividono principalmente in tag a blocco, tag in linea, oppure tag ablocco in linea. Esistono anche altri tipi di tag che vedremo man mano, maattualmente ci concentriamo su questi tre tipi principali.

Tag a blocco

Questi tag identificano dei contenitori che• utilizzano di default l'intera larghezza messa a disposizione dall'elemento

padre;• effettuano un break line (nuova riga) prima e dopo la sua visualizzazione

all'interno del browser;• hanno altezza e larghezza modificabile mediante CSS.

Alcuni dei tag a blocco sono: div, h1...h6, p, ul, ol.

Tag in linea

Questi tag identificano gli elementi che• utilizzano come spazio lo stretto indispensabile per visualizzarne il proprio

contenuto;• di default possono essere inseriti in sequenza orizzontale (il break line

deve quindi avvenire in maniera forzata, es. con br);• non possono essere modificati in altezza e larghezza mediante CSS.

Alcuni dei tag in linea sono: b, strong, span, u, i.

13/56


Tag a blocco in linea

Questi tag identificano gli elementi che• di default possono essere inseriti in sequenza orizzontale,• mantenendo però la possibilità di essere personalizzati da un punto di

vista di dimensione.Il tag che utilizza questa impostazione di default è il tag img.

14/56


Tag per i testiI seguenti tag possono essere utilizzati per visualizzare in maniera specificaparole, frasi, oppure blocchi di testo.

I tag per definire i titoli

I tag <hx>...</hx> dove x sta per il numero di livello che va dal valore 1 (titolo con caratteri più grandi) al valore 6 (titolo con caratteri più piccoli).Esempio:

<!DOCTYPE html><html> <head> <title>Testo con titolo</title> </head> <body> <h1>Il mio titolo</h1> <p> Hello World! </p> </body></html>

Il tag per testi con formattazione non definita.

Il tag che utilizziamo per formattare a piacere parti di testo che devonorimanere in linea è span.Esempio:

15/56


<!DOCTYPE html><html> <head> <title>Il testo formattato</title> </head> <body> <span>Hello World!</span> </body></html>

Lo stile dei testi

Gli stili possono essere modificati grazie ai seguenti tag:

<b>...</b> per il grassettostyle=”font-weight:bold”Questo tag permette di mettere in grassetto il testo contenuto tra il tag inizialee quello finale.

<strong>...</strong> per il grassettostyle=”font-weight:bold”Questo tag ha la stessa formattazione di <b> ma viene riconosciuto dal motoredi ricerca come “importante per l'indicizzazione”.

<u>...</u> per la sottolineaturastyle=”text-decoration:underline”Questo tag permette di sottolineare il testo contenuto tra il tag iniziale e quellofinale.

<i>...</i> per il corsivostyle=”font-style:italic”Questo tag permette di mettere in corsivo il testo contenuto tra il tag iniziale equello finale.

<em>...</em> per il corsivostyle=”font-style:italic”Questo tag ha la stessa formattazione di <i> ma viene riconosciuto dal motoredi ricerca come “importante per l'indicizzazione”.

Gli stili possono essere utilizzati anche in combinazione l'uno con l'altro, ma èmolto importante che venga chiuso per primo l'ultimo tag iniziale utilizzato.Esempio:

<!DOCTYPE html><html> <head> <title>Grassetto e corsivo</title> </head>

16/56


<body> <b><i>Hello World!</i></b> </body></html>

Nel precedente esempio chiudiamo, infatti, prima il tag <i> utilizzato per ultimoe poi il tag <b> utilizzato per primo.

I paragrafi

Con il tag <p>...</p> possiamo definire dei paragrafi, ossia dei blocchi di testoper i quali valgono le regole di formattazione per lo stile dei testi. In piùpossiamo definire l'allineamento come segue

style=”text-align:{left|center|right|justify}”Con questo attributo possiamo definire l'allineamento del testo all'interno delparagrafo. I valori che possiamo utilizzare sono center, per centrare il testo, leftper allineare a sinistra, right per allineare a destra e justify per giustificare iltesto.

Interruzione di riga

Il tag <br />, privo di tag finale e quindi terminato con /> costringe il webbrowser ad andare a capo.Esempio:

<!DOCTYPE html><html> <head> <title>A capo</title> </head> <body> Hello World!<br /> Ciao mondo!<br /> Bye. </body></html>

Il tag per definire i link (le ancore)

Un link non è altro che un collegamento ad un'altra pagina. Cliccando sul linkche verrà poi visualizzato all'interno della pagina html ne possiamo vedere lapagina di destinazione. Il tag che utilizziamo per definire i link è <a>...</a>.All'interno di questo link possiamo trovare tra l'altro dei blocchi di testo, oppuredelle immagini. Questo tag mette a disposizione una vasta gamma di attributialcuni dei quali sono:

17/56


id=”{nome_segnalibro}”Inseriamo all'interno del tag <a> questo attributo per creare dei segnalibriall'interno della nostra pagina.

href=”[percorso/]pagina_web”Questo attributo permette di definire la pagina di destinazione da aprire nelcaso in cui si clicchi sopra il rispettivo link.

href=”mailto:{indirizzo email}”Lo stesso attributo utilizzato con la parola chiave “mailto:” apre il programmaclient di posta elettronica definito all'interno del sistema operativo e prepara lafinestra di “invio email” inserendo l'email indicata nel campo “A:”.

href=”#{nome_segnalibro}”E' possibile far scorrere la pagina fino alla posizione dove abbiamo inserito<a id=”{nome_segnalibro}”></a>.

target=”posizione_di_caricamento”Con questo attributo è possibile definire il dove viene visualizzata la pagina didestinazione identificata dal link stesso. Alcuni valori possono essere _blank peraprire la destinazione all'interno di una nuova finestra del web browser (laprecedente rimane visualizzata all'interno di una precedente finestra), oppure ilnome che identifica un blocco <iframe> utilizzato come elemento didestinazione della pagina da caricare.Se questo attributo non viene utilizzato la pagina di destinazione viene caricataal posto della pagina attualmente visualizzata.

<html> <head> <title>Link</title> </head> <body> <a href=”prova.html” target=”_blank”>Hello World!</a> </body></html>

Le linee divisorie

<hr /> si utilizza per creare una linea divisoria orizzontale e, a differenza deglialtri tag visti precedentemente, non necessita di chiusura.Esempio:

<!DOCTYPE html><html> <head> <title>Linea divisoria</title> </head> <body> Ciao a tutti!

18/56


<hr /> Hello World! </body></html>

Il tag <mark>.

Questo tag viene utilizzato per marcare in particolare porzioni di testoall'interno di un blocco. Es.:

<p>Il nome <mark>Pinco Palla</mark> deriva dal...</p>

Il tag <datalist>.

Questo tag ci permette di combinare le funzionalità del tag <select> e <input> ditipo testo. Possiamo scegliere l'elemento desiderato da una lista di opzioni, maabbiamo anche la possibilità di inserire nuove opzioni scrivendole direttamente.Per attivare il tag datalist dobbiamo prima definire un campo input al quale poiverrà abbinato il datalist in questione. Per abbinare l'input al datalistutilizziamo l'attributo list. Es.:

<input type="text" name="stato" list="elenco_stati" /><datalist id="elenco_stati"> <option value="Italia"> <option value="Germania"> <option value="Austria"> <option value="Svizzera"></datalist>

Il tag <meter>.

Questo tag ci permette di creare una barra grafica per indicare lo stato di unadeterminata cosa, come ad esempio lo spazio usato su disco fisso, l'attualestato di avanzamento di un determinato lavoro a lungo termine, ecc. Siconsiglia di non utilizzare questo tag per la visualizzazione di uno stato diavanzamento dinamico, come stato di avanzamento di download, oppure dielaborazione dinamica.Gli attributi che possiamo utilizzare sono min, max e value, dove min definisce ilvalore iniziale della barra, max il valore e finale e value il valore attuale divisualizzazione.

<meter min=”0” max=”100” value=”75”></meter>

E possibile lasciare via gli attributi min e max e definire lo stato attuale inpercentuale con value compreso tra 0 e 1 come segue:

19/56


<meter value=”0.75”></meter>

Il tag <progress>.

Questo tag ci permette di visualizzare una barra grafica che indica lo stato diavanzamento dinamico, come ad esempio lo stato di avanzamento di undownload oppure di un'elaborazione dinamica. Non utilizzare questo tag pervisualizzare informazioni statiche, come ad esempio lo spazio disponibile sudisco fisso ecc.Questo tag mette a disposizione gli attributi max e value, dove max indica il valoreda raggiungere ad elaborazione finita e value il valore di elaborazione attuale.

<progress max=”100” value=”75”></progress>

E possibile lasciare via l'attributo max e definire lo stato attuale in percentualecon value compreso tra 0 e 1 come segue:

<progress value=”0.75”></progress>

Il tag <iframe>.

Questo tag ci permette di creare dei così chiamati inline frame, ossia di inserireuna pagina web all'interno di un'altra pagina web.

<iframe src=”https://www.ferrazzi.info”></iframe>

20/56


HTML EntitiesIl linguaggio HTML utilizza alcuni simboli particolari per definire elementi benprecisi. Abbiamo visto che i, ad esempio, sono inclusi tra i simboli minore di (<)e maggiore di (>). Inserire questi simboli all'interno del testo che vogliamorappresentare all'interno del nostro sito è molto pericoloso, perché potrebberoessere interpretati dal browser come apertura oppure chiusura di un eventualetag.Per questo motivo esistono gli HTML Entities, ossia codici che possiamo inserireal posto di simboli particolari. Il codice che inseriamo verrà trasformato in fasedi visualizzazione nel simbolo che ci server.Gli HTML Entities possono avere due formati diversi, ossia

&nome_entity;

oppure

&#numero_entity;

Per visualizzare il simbolo minore di possiamo scrivere

<

oppure

&#60

Qui di seguito vi mostriamo una tabella con i simboli più comuni.

21/56


Simbolo DescrizioneNomeentity

Numeroentity

Spazio non accumulato

< Minore di < <

> Maggiore di > >

& E commerciale & &

“ Doppie virgolette " "

' Apice ' '

€ Euro € €

© Copyright © ©

22/56


Le tabelleLa tabella ha come tag principale <table>...</table> all'interno del quale siinserisce con dei tag particolari l'intera struttura della tabella. Il tag principalepuò contenere degli attributi che definiscono il comportamento divisualizzazione dell'intera tabella. Gli attributi più utilizzati sono:

style=”border:valore”Questo attributo permette di definire lo spessore delle linee verticali edorizzontali che delimitano le parti dell'intera tabella. Un valore pari a 0 rendeinvisibili queste linee delimitatrici.

style=”border-color:{colore|valori esadecimali}”Questo attributo ci da la possibilità di definire il colore (vedi bgcolor) del bordoutilizzato. Il colore è visualizzabile solo se viene utilizzato un valore per bordersuperiore a 0.

style=”padding:valore”Con questo attributo possiamo definire lo spazio tra il bordo della cella ed il suocontenuto. Un valore pari a 0 permette di attaccare il contenuto direttamente albordo della cella.

style=”border-spacing:valore[[,valore],valore,valore]”Questo attributo ci permette di modificare lo spazio tra il bordo di una cella edil bordo delle altre celle della tabella. Un valore pari a 0 permette di attaccareuna cella direttamente all'altra.

style=”width:valore”Questo attributo permette di definire la larghezza dell'intera tabella. Il valore

23/56


può essere messo come numero che identifica la larghezza in pixel, oppurecome valore percentuale dove verrebbe utilizzata come larghezza ladimensione percentuale relativa all'interno spazio disponibile.

style=”height:valore”Questo attributo permette di definire l'altezza dell'intera tabella. Il valore puòessere messo come numero che identifica l'altezza in pixel, oppure come valorepercentuale dove verrebbe utilizzata come altezza la dimensione percentualerelativa all'interno spazio disponibile.

style=”text-align:{left|center|right}”Con questo attributo possiamo definire l'allineamento della tabella. I possibilivalori per definire l'allineamento sono center, che centra la tabella rispetto alrestante contenuto, left che allinea la tabella a sinistra e right che la allineaa destra.

style=”background-color:{colore|valore esadecimale}”Questo attributo definisce il colore di sfondo dell'intera tabella. Possiamoinserire il nome inglese relativo al colore che desideriamo (es. red) oppureinserire il codice con il formato esadecimale (es. #ff0000). Il colore definito conquesto attributo viene utilizzato per tutte quelle celle dove non è stato definitoa loro volta un eventuale colore di sfondo.

style=”background-image:url([percorso/]file_immagine)”Questo attributo permette di definire un'immagine da utilizzare come sfondodell'intera tabella (vedi background del tag body).

Esempio:

<!DOCTYPE html><html> <head> <title>La mia tabella</title> </head> <body> <table> ... </table> </body></html>

Per creare l'effettiva struttura della tabella possiamo utilizzare <tr>...</tr>all'interno del quale viene definita la struttura per un'intera riga ed il tag<th>...</th> che permette di definire una riga di titolo, mentre <td>...</td>permette di definire le singole celle all'interno di una riga. Cerchiamo di crearela seguente semplice tabella per capire bene l'utilizzo di questi due tag.

Cognome Nome Nr.telefono

Pinco Palla 123456

24/56


Il codice HTML che permette di realizzare questa tabella è:

<!DOCTYPE html><html> <head> <title>Elenco</title> </head> <body> <table> <tr><th>Cognome</th> <th>Nome</th> <th>Nr.telefono</th></tr> <tr><td>Pinco</td> <td>Palla</td> <td>123456</td></tr> </table> </body></html>

Andiamo ora ad analizzare quello che abbiamo scritto. Il tag principale<table>...</table> definisce il contenuto dell'intera tabella. Utilizziamoall'interno di questo tag il <tr> per definire l'inizio di una nuova riga, seguitosubito dai tre tag <th>...</th> che contengono il testo relativo ai titoli dicolonna. Poi apriamo una nuova riga con il tag <tr> seguito dai tre tag<td>...</td> che contengono il testo relativo alle singole cella appartenenti allastessa riga. Definiamo la fine della riga con il tag di chiusura </tr>.Poi nuovamente un blocco <tr>...</tr> che contiene per ogni cella un<td>...</td> con i rispettivi contenuti.

Il tag <td>...</td> mette a disposizione una vasta gamma di attributi che nedefiniscono il comportamento. Tra questi troviamo:

colspan=”numero_celle”L'attributo COLSPAN permette di adattare la larghezza di una cella alla larghezzadi numero_celle celle. Per utilizzare in maniera corretta questo attributo èimportante capire come il tag TABLE identifica il numero delle colonne dellastruttura che stiamo cercando di creare. Vediamo un semplice esempio:

Titolo1 Titolo2 Titolo3

CellaA CellaB

CellaC CellaD

Nella tabella precedente vediamo che il numero delle colonne dipende dallariga con all'interno il numero più elevato di celle. In questo caso prediamocome punto di riferimento la prima riga composta dai valori Titolo1, Titolo2 eTitolo3.Nella seconda riga notiamo la cella con il contenuto CellaA che deve avere una

25/56


larghezza pari alle prime due celle della riga di riferimento (quella con ilnumero più alto di celle). La stessa situazione la troviamo nella terza riga dovela cella CellaD deve essere lunga quanto le ultime due della riga di riferimento.Vediamo come scrivere il relativo codice html:

<html> <head> <title>Tabella</title> </head> <body> <table> <tr><td>Titolo1</td> <td>Titolo2</td> <td>Titolo3</td></tr> <tr><td colspan=”2”>CellaA</td> <td>CellaB</td></tr> <tr><td>CellaC</td> <td colspan=”2”>CellaD</td></tr> </table> </body></html>

Notiamo nel presente codice l'utilizzo dell'attributo COLSPAN che permette didefinire a quanti blocchi <td>...</td> corrisponde il relativo <td> di riferimento. rowspan=”numero_celle”Come l'attributo precedente, ma permette di definire quante celle in altezzadeve utilizzare la cella desiderata in base alla colonna con più celle.

style=”width:valore”Questo attributo permette di definire la larghezza della cella. Il valore puòessere messo come numero che identifica la larghezza in pixel, oppure comevalore percentuale dove verrebbe utilizzata come larghezza la dimensionepercentuale relativa all'interno spazio messo a disposizione dalla tabella.

style=”height:valore”Questo attributo permette di definire l'altezza della riga. Il valore può esseremesso come numero che identifica l'altezza in pixel, oppure come valorepercentuale dove verrebbe utilizzata come altezza la dimensione percentualerelativa all'interno spazio messo a disposizione dalla tabella.

style=”text-align:{left|center|right}”Con questo attributo possiamo definire l'allineamento orizzontale del contenutodella cella. I possibili valori per definire l'allineamento sono center, che centra ilcontenuto, left che allinea il contenuto a sinistra e right che lo allinea a destra.

style=”vertical-align:{top|middle|bottom}”Con questo attributo possiamo definire l'allineamento verticale del contenutodella cella. I possibili valori per definire l'allineamento sono top, che allinea ilcontenuto in alto, center che centra il contenuto e bottom che lo allinea in basso.

26/56


style=”background-color:{colore|valore esadecimale}”Questo attributo definisce il colore di sfondo (vedi bgcolor) della cella.

style=”background-image:url([percorso/]file_immagine)”Questo attributo permette di definire un'immagine da utilizzare come sfondodella cella (vedi background del tag body).

E' possibile dare alla tabella anche una didascalia. Il tag che dobbiamoutilizzare è <caption></caption> e viene inserito subito dopo l'apertura dellatabella.

<html> <head> <title>Tabella</title> </head> <body> <table>

<caption>Nuova tabella</caption> <tr><td>Titolo1</td> <td>Titolo2</td> <td>Titolo3</td></tr> <tr><td colspan=”2”>CellaA</td> <td>CellaB</td></tr> <tr><td>CellaC</td> <td colspan=”2”>CellaD</td></tr> </table> </body></html>

27/56


Le immaginiLe immagini in una pagina web sono di fondamentale importanza, un sito senzaimmagini sarebbe noioso e privo di ogni tipo di struttura grafica. I formatisicuramente supportati dai web browser sono .jpg ed il .gif , si consiglia quindidi utilizzare uno di questi per le proprie realizzazioni.Per inserire le immagini utilizziamo il tag <img> che non necessita di chiusura.Per utilizzarlo usiamo la seguente forma:

<img src=”[percorso/]file_immagine” alt=”” />

L'attributo SRC (source) serve per definire la posizione del file immagine chevogliamo presentare all'interno del nostro sito. Se l'immagine non si trovadirettamente all'interno della stessa cartella usata per il file html che lacontiene possiamo utilizzare ../ (andare al livello superiore) ed i nomi dellesingole cartelle separate da uno slash (/) per definirne l'esatta posizione.Il tag <img> supporta diversi attributi alcuni dei quali sono:

width=”larghezza”style=”width:larghezza”Con questo attributo possiamo definire il valore larghezza in pixel (o inpercentuale in base alla dimensione originale) che vogliamo utilizzare per lavisualizzazione dell'immagine sul sito. Se non viene utilizzato l'attributo heightl'altezza verrà adattata proporzionalmente.

height=”altezza”style=”height:altezza”Con questo attributo possiamo definire il valore altezza in pixel (o inpercentuale in base alla dimensione originale) che vogliamo utilizzare per la

28/56


visualizzazione dell'immagine sul sito. Se non viene utilizzato l'attributo widthla larghezza verrà adattata proporzionalmente.

alt=”testo”Questo attributo è molto importante e non dovrebbe mancare mai all'internodel tag img. Infatti permette di definire un testo che il browser devevisualizzare nel caso in cui non fosse possibile la visualizzazione dell'immaginestessa.

I tag <figure> e <figcaption>.

Questi due tag permettono di identificare delle sezioni contenenti delleimmagini con relativa didascalia. Es.:

<figure> <img src=”foto.jpg” alt=”articolo2” /> <figcaption> Foto dell'articolo 2 </figcaption></figure>

Definire aree su immagini

E' possibile creare delle aree utilizzabili come link all'interno di immaginiutilizzando il tag <map>. All'interno del tag <map> possiamo definire una serie diaree grazie al tag <area>.Ogni area viene definita in base alla forma (shape) e alle coordinate che nedelimitano l'area (coords).

<map><area shape=”rect” coords=”x1,y1,x2,y2” href=”pagina1.html” /><area shape=”circle” coords=”x,y,r” href=”pagina2.html” /><area shape=”poly” coords=”x1,y1,…,xn,yn” href=”pagina3.html” />

</map>

Le forme possibili sono:

rect Area a rettangolo definito in base alle coordinate che indicanol'angolo in alto a sinistra (x1,y1) e l'angolo in basso a destra(x2,y2) del rettangolo da creare.

circle Area circolare dove il punto (x,y) indica il centro del cerchio,mentre r identifica il raggio da usare per definire il cerchio.

poly Serie di punti da (x1,y1) a (xn,yn) dove ogni punto viene unito conil punto successivo. L'ultimo punto viene unito con il primo puntodella lista.

29/56


Una volta creata la mappa dobbiamo indicare all'interno di quale immaginevogliamo utilizzarla. Per fare questo usiamo l'attributo usemap come segue

<img src=”immagine.jpg” alt=”immagine” usemap=”#demo” /><map name=”demo”>

<area shape=”rect” coords=”10,10,100,100” href=”pagina1.html” /></map>

Il valore utilizzato per usemap deve essere lo stesso del name all'interno del tag<map>, ma con un cancelletto (#) davanti.

30/56


Gli elenchiGli elenchi si dividono in tre categorie: elenchi puntati, elenchi numerati eelenchi di definizioni.

<ul>...</ul>Questo tag permette di definire un elenco puntato. I singoli elementi della listavengono aggiunti con il tag <li>...</li>.

<ul> <li>elemento 1</li> <li>elemento 2</li></ul>

<ol>...</ol>Questo tag permette di definire un elenco numerato. I singoli elementi dellalista vengono aggiunti con il tag <li>...</li>.

<ol> <li>elemento 1</li> <li>elemento 2</li></ol>

E' possibile utilizzare all'interno dei tag <ul> e <ol> l'attributo type con il qualepossiamo indicare il formato del punto oppure del numero da utilizzare. Percreare un elenco numerato utilizzando lettere maiuscole come numero diordinamento scriviamo

<ol type=”A”> <li>elemento 1</li> <li>elemento 2</li>

31/56


</ol>

<dl>...</dl>Questo tag permette di definire un elenco di definizioni. I titoli di definizionevengono inseriti con il tag <dt>...</dt> mentre i blocchi descrittivi vengonoaggiunti con il tag <dd>...</dd>.

<dl> <dt>elemento 1</dt> <dd>descrizione 1</dd> <dt>elemento 2</dt> <dd>descrizione 2</dd></dl>

32/56


Tag per moduli da compilareIl tag principale che permette di definire l'intero contenuto di un modulo è<form>...</form>. Questo tag mette a disposizione vari attributi alcuni dei qualisono:

method=”{post|get}”Questo attributo definisce la modalità di trasferimento dei dati inseriti neicomponenti del modulo. Il trasferimento può avvenire mediante modalità getoppure post. Il metodo get inserisce i valori da trasferire direttamente dietro laURI della pagina da caricare e quindi è legata ad un determinato limite dilunghezza, mentre post li manda nascosti all'interno degli header della pagina.

action=”pagina_web”Con questo attributo definiamo quale sarà la pagina web alla quale verràinviato l'intero contenuto del modulo.

Per definire un form possiamo quindi scrivere:

<html> <head> <title>Il mio modulo</title> </head> <body> <form method=”post” action=”prova.php”> ... </form> </body></html>

33/56


Il tag <input />

Questo tag è un tag particolare senza tag di chiusura che permette di definirediversi tag utilizzati per l'inserimento di dati direttamente dall'utente dellapagina web. Questo tag mette a disposizione vari attributi alcuni dei quali sono:

type=”{text|hidden|password|checkbox|radio|button|submit|reset|image|tel|search|url|email}”Questo attributo è l'attributo più importante perchè ne definisce ilcomportamento. Utilizziamo text per definire un campo di inserimento testo,hidden per campi nascosti, password per campi per l'inserimento di parole chiave(quello che viene digitato viene nascosto), checkbox per le caselle chepermettono di attivare o disattivare determinate opzioni, radio per creare listedi opzioni all'interno delle quali può essere scelta un'unica opzione, button percreare dei pulsanti, submit per definire il pulsante che verrà utilizzato per l'inviodei dati del modulo, reset per definire il pulsante che permette di svuotare ilcontenuto di un form e image, simile a submit, ma indicando un'immagine davisualizzare.

type=”tel”Questo tipo di input mette a disposizione il campo per l'inserimento di unnumero di telefono. Su alcuni dispositivi mobile questo campo attiva unpannello appositamente creato per l'inserimento di numeri di telefono (similealla tastiera numerica di un telefono). Es.:

<input type=”tel” name=”telefono” />

type=”search”Questo campo nella maggior parte dei casi è uguale ad un campo diinserimento testo. Anche questo è un campo libero svincolato da un pattern didefault. Es.:

<input type=”search” name=”cerca” />

type=”url”Questo tipo di input permette l'inserimento di una url. Anche per questo campoalcuni dispositivi mobile mettono a disposizione un pannello dedicatoall'inserimento di valori url. Es.:

<input type=”url” name=”www” />

type=”email”Questo tipo di input mette a disposizione un campo che permette l'inserimentodi indirizzi email. Anche per questo campo alcuni dispositivi mobile mettono adisposizione un pannello dedicato. Es.:

<input type=”email” name=”email” />

type=”range”

34/56


Questo tipo di input mette a disposizione un elemento che permette discegliere un valore numerico tra un valore minimo (min) e un valore massimo(max) con una determinata distanza tra una tacca e l'altra (step). L'attuale valorepuò essere definito con l'attributo value. Es.:

<input type=”range” min=”0” max=”10” step=”2” value=”8” />

type=”file”Questo tipo di input mette a disposizione un elemento che permette dieffettuare l'upload di un file. Questo elemento funziona solo se inseriamo nel<form> l'attributo enctype=”multipart/form-data” e usiamo post come valore delmethod. Es.:

<form method=”post” action=”page.php” enctype=”multipart/form-data”><input type=”file” name=”allegato” />...

</form>

type=”checkbox”Questo tipo di input mette a disposizione un elemento che possiamo spuntare.Es.:

<input type=”checkbox” name=”privacy” value=”si” />

type=”radio”Questo tipo di input mette a disposizione elementi raggruppati dove un soloelemento può essere selezionato. Il raggruppamento avviene in base al valoreindicato con name. Es.:

<input id=”maschile” type=”radio” name=”sesso” value=”M” /><label for=”maschile”>maschile</label><br /><input id=”femminile” type=”radio” name=”sesso” value=”F” /><label for=”femminile”>femminile</label>

name=”nome”Questo attributo permette di definire il nome che vogliamo dare al componentepresente nel nostro modulo. Il nome viene utilizzato per riconoscerel'appartenenza di un determinato valore trasmesso. In alcuni casi (ad esempiocon i componenti radio) il nome deve essere uguale per tutti i componentidello stesso gruppo.

value=”valore iniziale”Questo attibuto permette di definire il valore iniziale del componente (solo con icomponenti text o password) o il valore da utilizzare nel caso in qui venissescelto il rispettivo componenti (con i componenti radio o checkbox).Utilizziamo VALUE anche per assegnare il testo da utilizzare all'interno di uncomponente BUTTON oppure SUBMIT.

size=”lunghezza” (solo per input oppure password)Questo parametro permette di definire la lunghezza stimando il numero di

35/56


caratteri direttamente visualizzabili.

maxlength=”lunghezza” (solo per input oppure password)Con questo attributo definiamo quanto lungo può essere al massimo il testoche viene inserito.

checked=”checked” (solo per checkbox)Questo attributo, senza assegnazione di valori, permette di spuntarel'eventuale componente checkbox di riferimento.

selected=”selected” (solo per radio)Questo attributo, senza assegnazione di valori, permette di attivare ilcomponente presente all'interno di una lista di opzioni radio.

autofocus=”autofocus”Questo attributo permette di posizionare il focus all'interno di un determinatocampo presente sulla pagina. Se l'attributo in questione viene definitoall'interno di vari elementi verrà preso in considerazione l'ultimo elementoinserito. Es.:

<input type=”text” name=”cognome” autofocus />

placeholder=”placeholder” (per input)Il valore assegnato mediante questo attributo verrà visualizzato all'interno delcampo di inserimento testo o del textarea fino a quando il cursore non verràposizionato al suo interno. In questo caso la stringa definita verrà cancellatapermettendo l'inserimento del valore richiesto. Es.:

<input type=”text” name=”cognome” placeholder=”inserire il cognome” />

required=”required”Questo attributo permette di definire gli elementi obbligatori all'interno di unform di compilazione. I campi verranno verificato al momento del submit. Es.:

<input type=”text” name=”cognome” required />

pattern=”...”Per controllare la sintassi di un valore inserito all'interno di un campo di testofino ad ora era indispensabile l'utilizzo di Javascript. Questo attributo ci da lapossibilità di definire mediante espressioni regolari l'esatta struttura del valoreda aggiungere. Es.:

<input type=”text” name=”nickname” pattern=”[a-z]{1}[a-z_]{2,19}” />

In questo caso il nickname deve essere composto da almeno 20 caratteri

36/56


minuscoli, oppure “_”, dove quest'ultimo non può essere utilizzato come primoelemento. La lunghezza minima da inserire è pari a 3.

contenteditable=”true|false”Questo attributo permette di rendere editabile l'elemento HTML in questione.Attiviamo questa proprietà assegnando il valore true e la spegnamo mediante ilvalore false. Es.:

<p contenteditable=”true”>Provate a modificare questo testo.</p>

spellcheck=”true|false”Questo attributo abilita o disabilità il controllo di sintassi. Attiviamo questaproprietà assegnando il valore true e la spegnamo mediante il valore false. Es.:

<div spellcheck>Questo testo è da controllare</div>

I componenti possono essere disposti all'interno di un form con l'utilizzo di una tabella. Vediamo un semplice esempio:

<!DOCTYPE html><html> <head> <title>Il mio modulo</title> </head> <body> <form name=”login” method=”post” action=”save.php”> Nome utente:<br /> <input type=”text” name=”nome” /><br /> <input type=”submit” value=”login” /> </form> </body></html>

Il tag <label>...</label>

Questo tag viene utilizzato per definire un'etichetta da aggingere ad un input diselezione (ad esempio radio). In questo caso possiamo scegliere una delleopzioni possibili cliccando direttamente sul nome definito per l'input inquestione:

for=”id”Questo attributo permette di inserire l'id dell'elemento input per il quale sivuole aggiungere l'etichetta.

37/56


Il tag <fieldset>...</fieldset>

Questo tag viene utilizzato per creare un bordo intorno a degli elementi.All'interno del bordo possiamo inserire un'etichetta che ne definisce il titoloutilizzando il tag <legend>...</legend>.

<!DOCTYPE html><html> <head> <title>FIELDSET</title> </head> <body> <fieldset> <legend>titolo</legend> Nome: <input type=”text” /><br /> Cognome: <input type=”text” /><br /> </fieldset> </body></html>

Il tag <textarea>...</textarea>

Questo tag viene utilizzato per definire una casella di inserimento testocomposto da più righe. Il testo compreso tra i due tag, di apertura e dichiusura, viene visualizzato direttamente all'interno del componente stesso. Trai vari attributi che questo tag mette a disposizione vediamo quelli piùimportanti:

name=”nome”Questo attributo permette di definire il nome che vogliamo dare al componentepresente nel nostro modulo. Il nome viene utilizzato per riconoscerel'appartenenza di un determinato valore trasmesso.

cols=”numero_caratteri”Questo attributo permette di definire la larghezza del componenti stimando ilnumero di caratteri che possiamo inserire in una riga. Nel caso in cui siinseriscono più caratteri vediamo apparire la barra di scorrimento orizzontale.

rows=”numero_righe”Questo attributo permette di definire il numero delle righe direttamentevisualizzabili all'interno del componente. Nel caso in cui si inserisce un testo piùlungo di numero_righe righe appare la barra di scorrimento verticale.

Vediamo ora un semplice esempio:

<!DOCTYPE html><html> <head>

38/56


<title>Il messaggio</title> </head> <body> <form name=”messaggio” method=”post” action=”invio.php”> Messaggio:<br /> <textarea name=”testo” rows=”30” cols=”5”> Questo testo viene visualizzato! </textarea><br /> <input type=”submit” value=”invia”> </form> </body></html>

Il tag <select>...</select>

Con questo tag possiamo definire dei menu a tendina. Il tag principale <select>mette a disposizione diversi attributi, ma quello più utilizzato è il seguente:

name=”nome”Questo attributo permette di definire il nome che vogliamo dare all'interocomponente. Il nome viene utilizzato per riconoscere l'appartenenza del valoreselezionato.

All'interno del tag principale inseriamo una serie di tag <option>...</option> perdefinire le singole righe di menu del nostro menu a tendina. Alcuni degliattributi che possiamo utilizzare all'interno di questo sono:

value=”valore”Questo attributo permette di definire il valore che viene inviato nel caso in cuiquesta voce di menu fosse quella attualmente selezionata.

selected=”selected”Questo attributo permette di definire quale delle voci inserite deve esserequella selezionata (quindi visualizzata all'interno del componente menu atendina chiuso).

I vari tag <option>...</option> possono essere raggruppati utilizzando il tag<optgroup>...</optgroup>. All'interno di quest'ultimo possiamo inserire l'attributolabel che permette di definire il nome del gruppo.

label=”nome”Questo attributo permette di definire il nome del gruppo all'interno del menu atendina.

Vediamo ora un esempio:

<!DOCTYPE html><html> <head>

39/56


<title>Menu a tendina</title> </head> <body> <select name=”scelta”> <optgroup label=”gruppo 1”> <option value=”1”>Elemento 1</option> <option value=”2” selected=”selected”>Elemento 2</option> </optgroup> <optgroup label=”gruppo 2”> <option value=”3”>Terza riga</option> </optgroup> </select> </body></html>

40/56


Validare il codiceCon l'aggiunta di uno dei seguenti blocchi di codice all'inizio della nostra pagina(quindi prima del tag <html>...</html>) possiamo validare il proprio codice comeHTML 4.01 oppure come XHTML 1.0. Il primo blocco definito come strict DTDinclude tutti gli elementi e attributi che non sono stati deprecati:

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

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

Il prossimo codice, invece, definito come transitional DTD include gli elementied attributi inclusi dal blocco strict DTD con l'aggiunta degli elementi e degliattributi deprecati:

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

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

Il prossimo codice permette di validare la pagina come frameset DTD, ossia cometransitional DTD con l'aggiunta degli elementi e degli attributi per i frameset:

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

41/56


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

42/56


I CANVASUn canvas è un contenitore messo a disposizione da HTML5 per effettuare deidisegni “al volo” utilizzando un linguaggio script come ad esempio JavaScript.Come prima cosa dobbiamo definire quindi lo spazio che vogliamo utilizzarecome superficie di disegno. Per fare questo utilizziamo il tag <canvas> all'internodel quale dobbiamo definire l'attributo id che ci permetterà di riconoscerel'elemento direttamente da JavaScript.

<canvas id=”canvas” width=”400” height=”400”></canvas>

Poi possiamo passare al codice JavaScript dove come prima cosa dobbiamocreare l'oggetto dal nostro canvas in questione con

var canvas = document.getElementById(“canvas”);

Una volta creato l'oggetto dobbiamo recuperare la superficie di disegno. Inquesto caso usiamo il metodo getContext() con il quale recuperiamo lasuperficie 2D del nostro oggetto canvas come segue

var context = canvas.getContext(“2d”);

L'oggetto context creato dalla superficie del nostro canvas mette ora adisposizione una serie di proprietà e metodi con i quali saremo in grado didisegnare all'interno dello spazio messo a disposizione.Nel prossimo esempio vediamo la proprietà fillStyle, che permette di definireil colore di riempimento, e fillRect, che permette di disegnare un rettangolocolorato utilizzando proprio il colore definito con fillStyle.

43/56


<html> <head> <title>Prova Rettangolo</title> <meta charset=”utf-8” /> </head> <body> <canvas id=”canvas” width=”400” height=”400”></canvas> <script> var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); context.fillStyle = “#00ff00”; context.fillRect(50,50,100,100); </script> </body></html>

Le proprietà e i metodi per i canvas

Il linguaggio JavaScript mette a disposizione una serie di proprietà e metodi chepossiamo utilizzare su una superficie di disegno. Vediamo qui di seguito quellipiù utilizzati:

Stile di riempimento con fillStyle

Questa proprietà permette di definire lo stile da utilizzare come riempimentodei vari oggetti grafici. Possiamo definire lo stile utilizzando tre modi diversi:

color è possibile definire un colore CSS, ossia come valoreesadecimale (#ff0000), con il relativo nome del colore (red),oppure utilizzando la funzione rgb ( rgb(255,0,0) )

gradient è possibile utilizzare un riempimento graduale lineare (getLinearGradient() ) oppure circolare ( getRadialGradient() )

pattern è possibile definire come elemento di riempimentoun'immagine impostando poi una serie di funzioni che nedefiniscono il comportamento

Riempimento graduale

Per definire un riempimento graduale lineare usiamo il metodocreateLinearGradient() messo a disposizione dall'oggetto context del nostrocanvas. La sintassi di questo metodo è la seguente:

var grad = context.createLinearGradient(x0,y0,x1,y1);

dove x0 e y0 identificano le coordinate del punto di partenza dell'effetto, mentrex1 e y1 ne identificano il punto di arrivo. Questo oggetto mette a disposizione ilmetodo addColorStop() che permette di indicare quale colore utilizzare fino ache punto dell'effetto in questione. La sintassi di questo metodo è

44/56


grad.addColorStop(stop,color);

dove stop è un valore decimale compreso tra 0 e 1 che determina fino a chepunto va utilizzato il colore definito con color. Vediamo il seguente esempio:

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);var grad = context.createLinearGradient(0,0,170,0);grad.addColorStop(0,”black”);grad.addColorStop(0.5,”green”);grad.addColorStop(1,”yellow”);context.fillStyle = grad;context.fillRect(0,0,170,100);

Per definire un riempimento graduale circolare usiamo il metodocreateRadialGradient() messo a disposizione dall'oggetto context del nostrocanvas. La sintassi di questo metodo è la seguente:

var grad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

dove x0 e y0 identificano le coordinate del punto di partenza dell'effetto con ilrelativo raggio r0, mentre x1 e y1 ne identificano il punto di arrivo con il relativoraggio r1. Anche questo oggetto mette a disposizione il metodo addColorStop()che permette di indicare quale colore utilizzare fino a che punto dell'effetto inquestione.

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);var grad = context.createLinearGradient(85,50,5,85,50,100);grad.addColorStop(0,”green”);grad.addColorStop(1,”white”);context.fillStyle = grad;context.fillRect(0,0,170,100);

Riempimento a pattern

Questo tipo di riempimento ci permette di utilizzare un'immagine e definirnepoi il comportamento di riempimento. Il metodo in grado di creare unriempimento simile è il createPattern() con la seguente sintassi:

var pat = context.createPattern(img,direction);

dove img identifica l'immagine che vogliamo utilizzare, mentre directionpermette di utilizzare una delle seguenti direzioni di riempimento: repeat,repeat-x, repeat-y, oppure no-repeat. Vediamo un semplice esempio:

<html> <head> <title>Prova Pattern</title> <meta charset=”utf-8” /> </head>

45/56


<body> <img id=”id_img” src=”image.png” /> <canvas id=”canvas” width=”400” height=”400”></canvas> <script> var img = document.getElementById(“id_img”); var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); var pat = context.createPattern(img,”repeat”); context.fillStyle = pat; context.fillRect(50,50,100,100); </script> </body></html>

Disegnare percorsi

Per disegnare un percorso all'interno di un cavas definiamo il punto di partenzacon il metodo moveTo() per poi spostarci di punto in punto con lineTo(). Unavolta definito l'intero percorso che vogliamo disegnare dobbiamo confermare iltutto con stroke() in maniera tale da visualizzare effettivamente quanto voluto.

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);context.moveTo(100,10);context.lineTo(150,110);context.lineTo(50,110);context.lineTo(100,10);context.stroke();

Disegnare tratti curvi

Per disegnare dei tratti curvi possiamo usare il metodo arc() che utilizza ilseguente formato:

context.arc(x,y,r,start,stop);

dove x e y identificano le coordinate interne e r la distanza dal punto dipartenza dove si inizierà a disegnare. Il punto di inizio start è un valorecompreso tra 0 e 6.28 ( 2 x PI ) dove il valore 0 parte alla coordinata (x + r, y).Il punto di fine corsa stop è un valore compreso tra 0 e 6.28 (2 x PI) e identificafino a dove disegnare la linea curva. La linea verrà disegnata dal punto dipartenza al punto di fine corso in senso orario.

Per raggruppare più elemento all'interno dello stesso percorso utilizziamo ilmetodo beginPath() e confermiamo l'effettiva scrittura con stroke() comesegue:

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);context.beginPath();context.arc(100,100,50,0,2*Math.PI);context.stroke();

46/56


Disegnare testo

Per disegnare del testo all'interno del nostro canvas dobbiamo come prima cosadefinire le proprietà del font con font per poi poter scrivere un testo riempito (fillText() ) oppure senza riempimento ( strokeText() ). La sintassi utilizzata è laseguente:

context.font = “font-style font-variant font-weight font-size font-family”;context.fillText(text,x,y);context.strokeText(text,x,y);

Nei metodi fillText() e strokeText() il parametro text identifica il testo chevogliamo scrivere, mentre x e y ne identificano le coordinate di posizionamentodell'angolo in basso a sinistra.

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);context.font=”italic small-caps bold 30px Arial”;context.fillText(“Hello World”,0,30);

Posizionare un'immagine

Per posizionare un'immagine all'interno di un canvas possiamo utilizzare ilmetodo drawImage(). La sintassi più semplice che possiamo utilizzare è:

context.drawImage(img,x,y);

dove img identifica l'immagine che vogliamo inserire, mentre x e y le coordinatedi posizionamento dell'angolo in alto a sinistra. Esempio:

var img = new Image();img.src = 'image.png';

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);img.onload = function() { context.drawImage(img,10,10);}

La proprietà onload permette di attendere il completo caricamentodell'immagine prima di inserirla nel canvas.Il metodo drawImage() mette a disposizione una sintassi in grado di definireanche l'altezza e la larghezza dell'immagine da inserire:

context.drawImage(img,x,y,width,height);

Oppure possiamo definire una clip di visualizzazione se non vogliamo mostrarel'intera immagine con

47/56


context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

dove sx, sy, swidth e sheight permetto di definire la clip di visualizzazione.

48/56


SCALABLE VECTOR GRAPHICS(SVG)

VG viene usato per sfruttare la grafica vettoriale all'interno del Web e vienedefinito con un formato XML. Il tag che utilizziamo è <svg></svg> e al suo internova definito il tipo di XML e la versione da utilizzare:

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”></svg>

I parametri XML vengono messi direttamente all'interno del tag <svg> come nelseguente esempio:

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1” width=”200” height=”200”> <polygon points=”100,10 150,110 50,110 100,10” style=”fill:blue;stroke:lightblue;stroke-width:10px;fill-rule:evenodd;” /> <text x=”45” y=”135” style=”fill:black;font-family:verdana;font-size:20px;”>Iltriangolo</text></svg>

L'unità di misura di default per le dimensioni width e height del tag <svg> è pixel,ma è possibile utilizzare anche altre unità di misura come ad esempio em, ex, px,pt, pc, cm, mm e %.SVG ci permette di disegnare in vettoriale e proprio per questo motivo ci vienedata anche la possibilità di definire le proporzioni di visualizzazione apiacimento. Nel tag <svg> abbiamo a disposizione l'attributo viewBox che cipermette di definire un nuovo sistema di coordinamento dello spazio messo adisposizione. L'esempio precedente mette a disposizione una tela di

49/56

http://www.w3.org/2000/svg



dimensione 200px x 200px, ma possiamo diminuire l'immagine riprodottaaumentando il numero di pixel all'interno dello stesso riquadro come segue:

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1” width=”200” height=”200” viewBox=”0 0 400 400”> <polygon points=”100,10 150,110 50,110 100,10” style=”fill:blue;stroke:lightblue;stroke-width:10px;fill-rule:evenodd;” /> <text x=”45” y=”135” style=”fill:black;font-family:verdana;font-size:20px;”>Iltriangolo</text></svg>

L'attributo viewBox si aspetta i parametri x1, y1, x2 e y2 separati da uno spazioper definire il nuovo punto in alto a sinistra e quello in basso a destradell'attuale riquadro.

E' possibile creare anche un file SVG esterno che possiamo importareutilizzando il tag <object> oppure <embed>. Il file che creiamo deve avere laseguente forma:

<?xml version=”1.0” encoding=”utf-8” standalone=”no”?><!DOCTYPE svg PUBLIC “-//W3C//Dtd SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd”><svg width=”200” height=”200” version=”1.1” xmlns=”http://www.w3.org/2000/svg”> ...</svg>

Come possiamo notare definiamo il file come file XML nella prima riga, mentrenella seconda dobbiamo definire il tipo di documento che stiamo utilizzando.Dopo aver salvato il file con il nome file.svg lo possiamo inserire all'internodella nostra pagina con

<object width=”200” height=”200” data=”file.svg” type=”image/xml+svg”> SVG non supportato! Scaricare i plugin!</object>

oppure con

<embed src=”file.svg” width=”200” height=”200” type=”image/xml+svg”>

In entrambi i casi la cosa importante è definire in maniera corretta il MIMETYPE, ossia image/xml+svg.

Le principali figure geometriche

Vediamo ora il codice XML per riprodurre le principali figure geometricheall'interno del nostro tag <svg>

50/56


http://www.w3.org/Graphics/SVG/1.1/Dtd/svg11.dtd



La linea

Per disegnare una linea usiamo

<line x1=”20” y1=”20” x2=”100” y2=”100” style=”stroke:green” />

Gli attributi x1, y1, x2 e y2 identificano le coordinate di inizio e fine punto.

Il tracciato

Per disegnare un tracciato usiamo

<polyline points=”100,10 150,110 50,110 100,10” style=”stroke:green;” />

L'attributo points contiene i vari punti di unione x,y separati da uno spazio.

Il cerchio

Per disegnare un cerchio usiamo

<circle cx=”100” cy=”100” r=”50” style=”stroke:green;fill:yellow;” />

Gli attributi cx e cy identificano le coordinate del punto al centro del cerchio,mentre r permette di specificare il raggio da utilizzare.

Il poligono

Per disegnare un poligono usiamo

<polygon points=”100,10 150,110 50,110” style=”stroke:green;fill:yellow;” />

Questo elemento è simile al tracciato con l'unica differenza che con il poligononon è possibile creare un tracciato aperto, ossia il primo e l'ultimo puntoverranno sempre chiusi da una linea.

Il rettangolo

Per disegnare un rettangolo usiamo

<rect x=”20” y=”20” rx=”5” ry=”5” width=”200” height=”200” style=”fill:blue;” />

Gli attributi x e y definiscono il punto di partenza, mentre width e heightrispettivamente la larghezza e l'altezza del rettangolo. Gli attributi rx e ry, sediversi da 0, definiscono l'arrotondamento degli angoli.

51/56


L'ellisse

Per disegnare un'ellisse usiamo

<ellipse cx=”100” cy=”100” rx=”40” ry=”80” style=”fill:blue;” />

Gli attributi cx e cy definiscono il centro dell'ellisse, mentre rx e ryrispettivamente il raggio utilizzato per l'asse x e y.

Il percorso

Per disegnare un percorso usiamo

<path d=”M10,10 L150,100 L100,150 Z” style=”fill:blue;” />

L'attributo d permette di definire una serie di codici separati da spazio in gradodi aiutarci nel disegnare il nostro percorso. I codici che possiamo utilizzaresono:

Mx,y Permette di definire il punto di partenza per il nostropercorso.

Lx,y Permette di unire l'ultimo punto inserito con quellodefinito.

Z Permette di unire l'ultimo punto inserito con il punto dipartenza.

Hx Permette di unire l'ultimo punto con un punto spostatosull'asse x (ossia orizzontalmente).

Vy Permette di unire l'ultimo punto con un punto spostatosull'asse y (ossia verticalmente).

Cx1,y1 x2,y2 x,y Permette di creare una linea curva dall'ultimo puntoinserto al punto x,y utilizzando il punto x1,y1 comedirezione per la curva di partenza ed il punto x2,y2come direzione per la curva di arrivo.

Sx2,y2 x,y Permette di creare una linea curva cubica dall'ultimopunto inserito al punto x,y utilizzando il punto x2,y2come direzione per la curva di arrivo. La direzione dellacurva in partenza è simmetrica al secondo puntodefinito all'interno del comando precedente.

Qx1,y1 x,y Permette di creare una linea curva quadraticadall'ultimo punto inserito al punto x,y utilizzando ilpunto x1,y1 come parametro di controllo.

Tx,y Permette di creare una linea curva quadraticadall'ultimo punto inserito al punto x,y utilizzando comeparametro di controllo il valore simmetrico del punto dicontrollo del comando precedente.

52/56


Il testo

Vediamo ora il codice XML per l'inserimento di testo all'interno del nostro tag<svg>

Posizionamento assoluto

Quando inseriamo del testo abbiamo la possibilità di definire il punto x,yall'interno del quale verrà inserito l'angolo in basso a sinistra del nostro testo. Iltag XML che utilizziamo è il seguente

<text x=”20” y=”20”>Ciao a tutti</text>

dove gli attributi x e y permetto di definire il punto di inserimento.

Posizionamento relativo

Per non inserire ogni volta le coordinate assolute per il posizionamento deltesto possiamo utilizzare un riferimento relativo. In questo caso utilizziamo ilseguente tag XML

<tspan dx=”20” dy=”20”>Ciao</tspan>

In questo caso gli attributi dx e dy permettono di definire lo spostamento inrelazione agli ultimi valori x e y utilizzati. E' comunque possibile utilizzare anchegli attributi x e y per combinare il posizionamento relativo con quello assoluto.

Attributi per <text> e <tspan>

All'interno di entrambi i tag possiamo inserire i seguenti attributi che cipermettono di formattare il testo a dovere:

font-family Permette di definire il font da utilizzare per il testo.font-size Per la dimensione del testo.font-style Permette di definire lo stile (italic, oblique, normal).font-weight Permette lo spessore del testo (normal, bold, ecc.).text-decoration Permette di definire l'aspetto del testo (normal,

underline, line-through, ecc.).fill Permette di definire il colore interno della scritta.stroke Permette di definire il colore del bordo della scritta.text-anchor Permette di definire l'allineamento del testo (start,

middle, end).baseline-shift Permette di definire il testo come apice o pedice (super,

sub).letter-spacing Permette di definire lo spazio tra i caratteri.word-spacing Permette di definire lo spazio tra le parole.

53/56


Questi attributi possono essere definiti anche come elenco CSS all'internodell'attributo style. Questo attributo aumenta le proprietà di stile che possiamoutilizzare. Si aggiungono in fatti:

opacity Permette di definire il livello di opacità.fill-rule Permette di definire la regola di riempimento, molto

comodo quando disegniamo un percorso. I valoripossibili sono nonzero (viene riempita l'intera area) eevenodd (viene riempita l'area esterna, mentre quelleinterne rimangono vuote).

stroke-width Permette di definire lo spessore della linea di disegno.stroke-dasharray Permette di definire lo stile della linea di disegno.stroke-linecap Permette di definire il simbolo da usare per gli estremi

della linea. I valori possibili sono butt, round oppuresquare.

stroke-linejoin Permette di definire il come disegnare l'intersezione tradue linee. I valori possibili sono miter, round oppurebevel.

display Permette di definire la visibilità dell'elemento (noneoppure inline).

Testo lungo un percorso

E' possibile definire un percorso sopra il quale si fa scorrere un determinatotesto. Come prima cosa dobbiamo definire il percorso con path, il testo context, ed infine, dobbiamo definire il posizionamento del testo sul percorso contextPath. Per funzionare è necessario l'utilizzo del namespace xlink. Eccoperché è fondamentale dichiararlo all'interno del tag <svg>. Vediamo il seguenteesempio:

<svg width=”200” height=”200” xmlns:xlink=”http://www.w3.org/1999/xlink”> <path id=”percorso” d=”M10,10 L150,100 L100,150 Z” style=”fill:blue;” /> <text style=”font-family:Verdana; font-size:12px; fill:blue;”> <textPath xlink:href=”#percorso”> Questo è il testo! </textPath> </text></svg>

Le immagini

I formati delle immagini supportati da SVG sono PNG e JPEG. Anche qui èfondamentale l'utilizzo del namespace xlink. Vediamo il seguente esempio:

<svg width=”200” height=”200” xmlns:xlink=”http://www.w3.org/1999/xlink”> <image x=”0” y=”0” width=”100” height=”100” xlink:href=”image.png” /></svg>

54/56

http://www.w3.org/1999/xlink


TAG MULTIMEDIALI

HTML5 mette a disposizione dei tag multimediali per la riproduzione di fileaudio e video, integrando già una serie di codec compatibili.

File video

Il tag che permette di riprodurre dei video è <video>. Attualmente sonosupportati tre tipi di formati video, ossia MP4, WebM e Ogg, anche se non tuttisono compatibili con tutti i browser attualmente disponibili.

<video width=”320” height=”240” controls> <source src=”video.ogg” type=”video/ogg” /> Attenzione! I video non sono supportati!</video>

Gli attributi che possiamo utilizzare con questo tag sono:

autoplay La riproduzione del video parte subitoautomaticamente.

controls Mette a disposizione un pannello di controllo.height Definisce l'altezza del riquadro messo a disposizione per

la riproduzione del video.loop Il video verrà riprodotto all'infinito.muted Il video verrà riprodotto senza audio.poster Permette di definire un'immagine da visualizzare

quando il video non viene riprodotto. L'immagine viene

55/56


inserita come percorso url.src Indica il file video.width Definisce la larghezza del riquadro messo a disposizione

per la riproduzione del video.

File audio

Il tag che permette di riprodurre dei file audio è <audio>. Attualmente sonosupportati tre tipi di formati audio, ossia MP3, WAV e Ogg, anche se non tuttisono compatibili con tutti i browser attualmente disponibili.

<audio controls> <source src=”audio.ogg” type=”audio/ogg” /> Attenzione! Gli audio non sono supportati!</audio>

Gli attributi che possiamo utilizzare con questo tag sono:

autoplay La riproduzione audio parte subito automaticamente.controls Mette a disposizione un pannello di controllo.loop L'audio verrà riprodotto all'infinito.muted Il file verrà riprodotto senza audio.src Indica il file audio.

56/56

html5 - ferrazzi.info · dott.ing.ivan ferrazzi html5 introduzione ai concetti base dott. ing. ivan...

Documents