Html

F O N D A M E N T I D I H T M L 4
A G G I O R N A T I A D H T M L 5
MATTEO CESERANI
Elementi di HTML
29/10/2013
1
Matteo Ceserani

La mia prima pagina web
<!DOCTYPE html>
<html>
<head>
<meta content=“text/html” />
<title>La mia prima pagina web</title>
</head>
<body>
<h1>Ciao mondo!</h1>
<p>Questa è la mia prima pagina web!</p>
<br/><hr/><br/>
<p class=“definizione” id=“HTML” style=“color:red” title=“Definizione di HTML”> HTML
sta per HyperText Mark-up Language.</p>
<br/><hr/><br/>
<img src=“./Immagine.jpg” alt=“Immagine campione” width=“200” height=“100” />
<br/><a href=“http://www.corriere.it” target=“_blank”>Sito del corriere della sera</a>
<br/><hr/><br/>

<ol>
<li>Primo elemento.</li>
<li>Secondo elemento.</li>
</ol>

<ul>
<li>Elemento A.</li>
<li>Elemento B.</li>
</ul>
</body>
</html>
29/10/2013
2
Matteo Ceserani

Cos’è l’HTML
• HTML sta per HyperText Mark-up Language
• HTML non contiene istruzioni da eseguire, ma descrive il
significato (semantica) e le caratteristiche che devono
avere gli elementi di una pagina
• Un elemento è contenuto tra due tag: un tag di apertura
e un tag di chiusura
• I tag si possono innestare uno dentro l’altro
• Un file HTML contiene la struttura logica di una pagina
web, non l’aspetto che deve avere
• L’aspetto di una pagina web è definito nel suo foglio di
stile (CSS)
29/10/2013
3
Matteo Ceserani

Struttura del documento
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
• Ogni tag è costituito da un nome contenuto tra parentesi ad
angolo
• Il tag di chiusura è uguale al tag di apertura, ma contiene
uno slash (<body>…</body>)
• Alcuni tag non possiedono il tag di chiusura (<br />)
29/10/2013
4
Matteo Ceserani

La dichiarazione DOCTYPE
 La dichiarazione DOCTYPE deve essere posta all’inizio della pagina
HTML, prima del tag <html>.
 La dichiarazione DOCTYPE non è un tag html; è una direttiva per il
browser che specifica con quale versione di HTML è stata scritta la
pagina.
 In HTML 4.01, La dichiarazione DOCTYPE si riferisce a un file
Document Type Definition, in modo che il browser possa renderizzare
correttamente il contenuto della pagina.
 HTML5 non richiede il riferimento a un DTD, per cui la dichiarazione è
semplicemente:
<!DOCTYPE html>
29/10/2013
5
Matteo Ceserani

La dichiarazione DOCTYPE
 Esempio per HTML 4.01
 HTML transitional contiene tutti gli elementi e gli
attributi di HTML 4.01, anche quelli di stile o
deprecati.
 Non consente però l’uso dei frame
 Per utilizzare i frame si usa la dichiarazione:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
29/10/2013
6
Matteo Ceserani

La sezione <head>
• La sezione head contiene informazioni generali sul
contenuto della pagina
• Per esempio il tag <meta /> può specificare il tipo di
contenuto della pagina
• L’unica informazione visualizzata dal browser è quella
contenuta nell’elemento <title>
• Di solito il titolo della pagina è visualizzato nella linguetta
della scheda
<head>
<meta content=“text/html” />
<title>La mia prima pagina web</title>
</head>
29/10/2013
7
Matteo Ceserani

La sezione <body>
 Il contenuto della sezione body viene visualizzato
nella finestra principale del browser
 L’aspetto degli elementi visualizzati dipende da
quanto specificato nei fogli di stile
<body>
<h1>Titolo principale</h1>
<p>Paragrafo.</p>
</body>
29/10/2013
8
Matteo Ceserani

La sezione <body>
29/10/2013Matteo Ceserani
9
 Il tag <body> possedeva in HTML4 numerosi
attributi.
 Guardali.
 Nessuno di questi attributi è supportato in HTML5.
 Tutto quello che si faceva con quegli attributi deve essere fatto
con script o fogli di stile.

Attributi di un tag
 Molti tag possono contenere degli attributi che ne
specificano le caratteristiche
 Esistono due tipi di attributi:
 Attributi che tutti i tag possono avere
 Attributi propri di un tag particolare
<img src=“./immagine.jpg” />
<p class=“definizione” id=“limite”>
Definizione di limite
</p>
29/10/2013
10
Matteo Ceserani

Attributi di un tag
 Attributi che (quasi) tutti i tag possono avere
 class specifica l’appartenenza del tag a una certa classe
 id assegna uno specifico nome al tag
 style definisce uno stile da applicare al tag (sconsigliato)
 title contiene informazioni aggiuntive sul tag
(visualizzate quando il mouse si ferma sull’elemento)
 Attributi propri dei singoli tag
 (Es.) src specifica il path dell’immagine da includere nella
pagina
 Si veda in proposito:
http://www.w3schools.com/sitemap/default.asp#references
29/10/2013
11
Matteo Ceserani

Intestazioni
 È possibile creare intestazioni nei documenti html
utilizzando i tag headings
 I tag headings vanno da <h1> a <h6>
 Esempio
<h1>Introduzione al linguaggio HTML</h1>
<h2>Generalità</h2>
<h2>Cos’è un tag</h2>
<h3>Apertura e chiusura dei tag</h3>
<h3>Proprietà di un tag</h3>
29/10/2013
12
Matteo Ceserani

Intestazioni
 Le intestazioni sono importanti!
 Non bisogna utilizzare le intestazioni per scrivere qualcosa in
grande o in piccolo!
 Le intestazioni devono rispecchiare la struttura logica della
pagina
 I motori di ricerca utilizzano anche (non solo) gli headings per
indicizzare il contenuto delle pagine
 Gli utenti scorreranno le pagine leggendo rapidamente gli
headings
 Occorre quindi scegliere con cura il testo da includere negli
headings
29/10/2013
13
Matteo Ceserani

Linee
 Il tag <hr /> disegna nella pagina una linea
orizzontale
 Il tag <br /> viene renderizzato con un “a capo”
 Si faccia attenzione al fatto che andare a capo in un file html
non determina l’andare a capo nella pagina web renderizzata
dal browser
 Allo scopo è obbligatorio utilizzare il tag <br />
29/10/2013
14
Matteo Ceserani

Commenti
 Un commento è una porzione di pagina web che non
deve mai essere renderizzata
  Chiusura di un commento
 I commenti in html sono importanti come in qualsiasi
altro linguaggio di programmazione
 Rendono infatti più leggibile il codice
 Possono contenere informazioni aggiuntive sulla pagina stessa
 Per esempio: autore, data, etc…
29/10/2013
15
Matteo Ceserani

Paragrafi
 I paragrafi sono definiti dal tag <p>
 Esempio:
<p>Questo è un paragrafo</p>
<p>Questo è un altro paragrafo</p>
 Occorre ricordarsi di chiudere i tag di paragrafo
 I browser cercano sempre di rimediare alle mancanze del codice
 Per esempio, la maggior parte dei browser interpreta correttamente
questo codice:
<p>Questo è un paragrafo
<p>Questo è un altro paragrafo
 Non bisogna però farci affidamento: si possono verificare
comportamenti imprevisti
29/10/2013
16
Matteo Ceserani

Paragrafi
 All’interno di un paragrafo non si possono gestire gli spazi aggiungendo
spazi aggiuntivi o righe aggiuntive
 Esempio. Il codice:
<p>Paragrafo con inserimento di spazi
e linee.</p>
verrà renderizzato dal browser nel seguente modo
Paragrafo con inserimento di spazi e linee.
 Le interruzioni di linea devono essere introdotte con il tag <br />
 Gli spazi aggiuntivi devono essere introdotti con la sequenza   (Non-
Breaking Space)
29/10/2013
17
Matteo Ceserani

Formattazione del testo nei paragrafi
Tag Descrizione
<i> Formatta il testo incluso nel tag in corsivo. Da usare solo in casi estremi.
<b> Formatta il testo incluso nel tag in grassetto. Da usare solo in casi estremi.
<em> Il testo deve essere posto in enfasi (emphasized) rispetto al resto del paragrafo. Di solito
i CSS formattano <em> in corsivo. Da preferire rispetto a <i>.
<strong> Il testo deve essere posto in rilievo rispetto al resto del paragrafo. Di solito i CSS
formattano <strong> in grassetto. Da preferire rispetto a <b>.
<small> Il testo deve essere formattato in corpo minore rispetto al resto del paragrafo.
<sub> Testo formattato come pedice (sottoscritto).
<sup> Testo formattato come apice (soprascritto).
<ins> Il testo deve essere formattato come se fosse stato inserito successivamente.
<del> Il testo deve essere formattato come se fosse stato cancellato.
 Tag di base per la formattazione del testo nei paragrafi
29/10/2013
18
Matteo Ceserani

 Tag per la formattazione del testo in stile Computer Output
 Nota bene. È necessario che i fogli di stile specifichino la formattazione
dei diversi elementi. Se questo non accade, <code> <kbd> e <samp>
verranno formattati nello stesso modo, con un carattere a spaziatura
fissa. <var> viene in genere formattato in corsivo.
Tag Descrizione
<code> Il testo è una porzione di codice.
<kbd> Il testo è un input immesso nel computer da tastiera.
<samp> Il testo è l’output prodotto da un programma.
<var> Il testo rappresenta una variabile o un placeholder in un’espressione.
<pre> Il testo racchiuso all’interno del tag verrà formattata con un carattere
a spaziatura fissa, preservando le interruzioni di linea e la spaziatura.
29/10/2013
19
Matteo Ceserani

 Esempio di testo preformattato.
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
• Risultato nel browser
29/10/2013
20
Matteo Ceserani

Tag Descrizione
<abbr> Il testo è un’abbreviazione o un acronimo.
<address> Il testo è un’informazione di contatto.
<bdo> Permette di specificare la direzione del testo attraverso il parametro dir.
dir=ltr Testo scritto da sinistra a destra Default
dir=rtl Testo scritto da destra a sinistra
<blockquote> Definisce una sezione che contiene una citazione da un’altra fonte.
<q> Citazione in linea.
<cite> Definisce il titolo di un’opera citata nel documento.
<dfn> Tag per creare definizioni.
 Sigle, contatti, citazioni, definizioni.
29/10/2013
21
Matteo Ceserani

 Scorrendo la lista dei tag per la formattazione del testo si
può rimanere perplessi.
 Gli unici tag che dicono chiaramente come deve essere formattato un
testo (<i> e <b>) vengono sconsigliati.
 Per alcuni tag non si capisce davvero come dovrebbero essere
formattati.
 Es. Come si deve renderizzare una definizione (<dfn>)?
 In realtà la formattazione è delegata ai fogli di stile, il
linguaggio HTML si dovrebbe occupare solo di semantica
del documento.
 Il programmatore può delegare tutto ai fogli di stile
predefiniti dei browser.
 In alternativa può ridefinire lo stile di tutti i tag appena
descritti.
 Per i tag più particolari è praticamente costretto a farlo.
29/10/2013
22
Matteo Ceserani

Collegamenti
 In HTML i collegamenti (link) vengono definiti dal tag <a>
 Un link è una parola, un gruppo di parole o un immagine su cui si
può cliccare per spostarsi su un altra pagina.
 Quando si posiziona il cursore del mouse su un link, il puntatore
assume la forma di una piccola mano.
 L’attributo più importante del tag <a> è href, che permette di
specificare la destinazione del collegamento.
 Di default, l’aspetto dei link nei browser è il seguente:
 Link non visitato: testo blu sottolineato
 Link visitato: testo viola sottolineato
 Link attivo: testo rosso sottolineato
29/10/2013
23
Matteo Ceserani

Collegamenti
 La sintassi generale di un link è la seguente
 La a sta per anchor (àncora in senso marinaresco)
 Esempio
 Nota bene! Il testo del link non deve essere per forza
un testo: può essere un immagine o qualsiasi altro
elemento HTML.
<a href="url">Testo del link</a>
<a href="informatica.itealbinia.org">Visita il sito del
corso di informatica!</a>
29/10/2013
24
Matteo Ceserani

Collegamenti
 L’attributo target permette di specificare dove occorre aprire la pagina web di
destinazione
 Esempio
 La pagina www.corriere.it viene caricata in una nuova finestra del browser.
 I possibili valori dell’attributo target sono i seguenti
 Nota bene. Si parla di frame anche se non sapete cosa sono. Un giorno lo scoprirete e
capirete bene questa tabella.
<a href="http://www.corriere.it" target="_blank">Corriere della Sera</a>
Valore Destinazione
_blank Apre la pagina in una nuova finestra.
_self Apre la pagina nello stesso frame del link. È l’opzione di default.
_top Apre la pagina occupando tutta la finestra del frame del link.
_parent Apre la pagina nel frame padre del frame del link.
framename Apre la pagina nel frame di nome framename.
29/10/2013
25
Matteo Ceserani

Collegamenti
 L’attributo id permette di creare link a posizioni
specifiche all’interno di una pagina.
 Esempio
 Nella pagina link.html si crea un link (qui sarebbe meglio dire un
ancoraggio) con id=“truccchi”
 Nella stessa pagina, ad esempio in testa, si può creare un link alla
posizione della sezione Trucchi utili.
 Oppure si può creare un link a quella posizione da una pagina
differente.
<a id=“trucchi”>Trucchi utili</a>

<a href=“#trucchi”>Vai alla sezione Trucchi</a>
<a href=“link.html#trucchi”>Vai alla sezione Trucchi</a>
29/10/2013
26
Matteo Ceserani

Collegamenti
Attributo Significato
href Specifica l’url di destinazione del link
hreflang Specifica la lingua dell’oggetto destinazione del link.
Elenco dei codici delle varie lingue.
media Specifica per quale tipo di dispositivi o di media è ottimizzata
la destinazione del collegamento (vedi slide successive).
rel Specifica la relazione esistente tra la pagina corrente e la
destinazione del link (vedi slide successiva).
target Specifica dove aprire la destinazione del link (vedi slide
precedenti).
type Specifica il MIME-Type della destinazione del link.
Elenco dei Media-Type specificati dalla IANA.
 Attributi specifici del tag <a>.
29/10/2013
27
Matteo Ceserani

Collegamenti
Valore Significato
alternate Link a una versione alternativa del documento.
author Link a informazioni sull’autore del documento.
bookmark URL permanente utilizzabile come bookmark.
help Link a un help per il documento.
license Link a informazioni sul copyright del documento.
next Link alla pagina successiva.
nofollow Link da non seguire nell’indicizzazione automatica di un sito.
noreferrer Nell’header http che richiede la destinazione del link non deve essere inserito l’url
del documento corrente (il referrer).
prefetch Il documento destinazione dovrebbe essere salvato nella cache.
prev Link alla pagina precedente.
search Link a uno strumento per la ricerca nel sito.
tag Tag (parola chiave) per il documento corrente
 Possibili valori dell’attributo rel.
 L’attributo rel non viene utilizzato dal browser (tranne noreferrer), ma dai motori di
ricerca per l’indicizzazione automatica dei siti.
29/10/2013
28
Matteo Ceserani

Collegamenti
 L’attributo media è una novità di HTML5.
 Consente di specificare per quali dispositivi o per
quali tipi di media la destinazione di un link è stata
ottimizzata.
 Si tratta di un attributo in sé puramente informativo.
Può essere ovviamente utilizzato dai browser.
 La sintassi dell’attributo media è la seguente:
 Esempio: <a href="pagina.asp?output=print"
media="print and (resolution:300dpi)">
Versione stampabile.</a>
Media=“Media_query”
29/10/2013
29
Matteo Ceserani

Collegamenti
 Struttura di una media query.
 Una media query è composta da un insieme di elementi
connessi tra loro dagli operatori logici AND, OR e NOT
 Gli elementi possono essere di due tipi
 Elementi che specificano un tipo di dispositivo
 Elementi che specificano il valore di un parametro
 Esempio
Questa query specifica un dispositivo (stampante) per cui il
link è ottimizzato e il valore di un parametro del dispositivo
stesso (la risoluzione espressa in punti per pollice)
print and (resolution:300dpi)
29/10/2013
30
Matteo Ceserani

Collegamenti
Elemento Dispositivo
all Default. La destinazione del link è adatta a qualsiasi dispositivo.
aural Sintetizzatori vocali.
braille Tavolette braille.
handheld Dispositivi palmari (schermi piccoli, banda limitata).
projection Proiettori.
print Stampanti.
screen Schermi di computer.
tty Terminali che utilizzano una griglia di caratteri a larghezza fissa.
tv Televisori (bassa risoluzione, limitate possibilità di scroll)
29/10/2013
31
Matteo Ceserani
 Tipi di dispositivi.

Collegamenti
Elemento Proprietà
width Larghezza dell’area di visualizzazione.
height Altezza dell’area di visualizzazione.
device-width Larghezza del display del dispositivo o della carta (nel caso di stampanti).
device-height Altezza del display del dispositivo o della carta (nel caso di stampanti).
orientation Orientazione del display del dispositivo o della carta (nel caso di stampanti).
Valori possibili: portrait, landscape.
aspect-ratio Rapporto larghezza/altezza dell’area di visualizzazione.
device-aspect-ratio Rapporto larghezza/altezza del display del dispositivo o della carta (nel caso di stampanti).
color Numero di bit per colore del display del dispositivo.
color-index Numero di colori del display del dispositivo.
monochrome Numero di bit per pixel del display di un dispositivo monocromatico.
resolution Densità di pixel del display del dispositivo (dpi o dpcm).
scan Tecnica di scansione di un display tv (interallacciata o progressiva).
Valori possibili: interlace, progressive.
grid Specifica se la tecnica di visualizzazione del dispositivo è a griglia (1)o bitmap (0).
29/10/2013
32
Matteo Ceserani
 Proprietà.

Collegamenti
 I valori di tutte le proprietà possono essere
specificati con i prefissi min- e max-.
 Esempio. min-resolution=300dpi
 Esempio. max-device-width=1280px
 Fanno eccezione: orientation, scan, grid.
 Le query possono essere costruite utilizzando gli
operatori logici booleani di base.
29/10/2013
33
Matteo Ceserani
Simbolo Operatore
AND AND
NOT NOT
, OR

Immagini
34
 Le immagini sono definite dal tag <img />. Il tag <img /> è
vuoto: possiede solo attributi e non ha il tag di chiusura.
 L’attributo fondamentale del tag <img /> è src. Il valore
dell’attributo src è l’URL dell’immagine da visualizzare.
 Sintassi del tag <img />
<img src="URL" alt="Testo" />
 L’URL indica la posizione in cui il file immagine è memorizzato.
 L’immagine strullo.png memorizzata nella cartella strullate del dominio
www.daverrazzano.it ha URL www.daverrazzano.it/strullate/strullo.png.
 Il browser visualizza le immagini nel punto in cui si trova il tag
<img />

Immagini
35
 L’attributo alt deve sempre essere specificato.
 Serve per definire un testo da visualizzare nel caso in cui
l’immagine non possa essere visualizzata.
 Per esempio il file indicato da src potrebbe essere stato rimosso.
 L’attributo title permette invece di specificare il testo che
viene visualizzato quando si posiziona il mouse sopra
l’immagine.
 Esempio
<img src =
"www.daverrazzano.it/strullate/strullo.png"
alt = "Foto di uno strullo" />

Immagini
36
 Gli attributi height e width permettono di specificare
l’altezza e la larghezza di un’immagine.
 L’unità di misura è il pixel.
<img src="www.daverrazzano.it/strullate/strullo.png"
alt="Foto di uno strullo" width="350" height="200" />
 Specificare sia l’altezza che la larghezza di un’immagine è una
buona abitudine. In questo modo infatti il browser è in grado
di riservare all’immagine lo spazio richiesto prima di caricare
l’immagine stessa.
 Diversamente il layout della pagina potrebbe cambiare durante il
caricamento della pagina.

Immagini
37
 Attributi del tag <img>.
Attributo Descrizione
src URL dell’immagine.
alt Testo da visualizzare al passaggio del mouse o in caso di errori nel
caricamento.
height Altezza in pixel.
width Larghezza in pixel.
crossorigin Attributo che permette di impostare una eventuale richiesta CORS.
Valori possibili: anonymous, use-credentials.
L’approfondimento del meccanismo CORS (Cross-Origin Resource
Sharing) esula dagli scopi di questa presentazione.
ismap Imposta l’immagine come una mappa server-side. Le coordinate in
pixel della posizione del mouse al momento del click sull’immagine
vengono inviate con metodo GET a un server web.
Valore possibile: ismap.
usemap Imposta l’immagine come una mappa client-side. Il valore è l’id di
una mappa (<map>) definita nel documento stesso: #mapname.

Immagini
38
 Definizione di mappe server-side.
 L’attributo ismap permette di definire una mappa server-side.
 Nel documento non è presente alcun codice per la gestione
della mappa.
 L’immagine che funziona da mappa viene inserita in un link
(ovvero in un tag <a>).
 Se si clicca in un punto dell’immagine viene inviata al server
web specificato nel link una richiesta GET contenente le
coordinate in pixel del punto cliccato.
 Sarà poi il server a utilizzare le coordinate ottenute.

Immagini
39
 Definizione di mappe server-side.
 Esempio
 Vedi l’esempio in azione.
 Si utilizza il server di Google solo per visualizzare le coordinate
in pixel nell’URL della richiesta.
<a href="http://www.google.com">
<img src="mondo.png" width="1200px" alt="Stai navigando
per il mondo!" ismap="ismap" />
</a>

Immagini
40
 Definizione di mappe client-side.
 L’attributo usemap permette di utilizzare l’immagine come
una mappa.
 Il codice per la gestione della mappa deve essere incluso nel
documento stesso.
 La gestione è quindi client-side.
 Sintassi: usemap=“#mapname”
 La definizione della mappa avviene attraverso il tag <map>.
 Esempio:
<img src="Mondo.png" width="1200px" alt="Stai navigando
per il mondo!" usemap="#World_Map" />

Immagini
41
 Creazione della mappa per l’attributo usemap.
 Approfondisci l’utilizzo del tag <map>.
 Il tag <area> permette di specificare delle aree cliccabili
all’interno della mappa client-side.
 Approfondisci l’utilizzo del tag <area>.
<map id="World_Map" name="World_Map">
<area shape="rect" coords="500,50,700,170" href="Europa.html" alt="Europa" />
<area shape="rect" coords="500,170,750,450" href="Africa.html" alt="Africa" />
<area shape="rect" coords="760,0,1040,270" href="Asia.html" alt="Asia" />
<area shape="rect" coords="75,0,500,250" href="Nord_America.html" alt="Nord America" />
<area shape="rect" coords="250,260,460,520" href="Sud_America.html" alt="Sud America" />
<area shape="circle" coords="1000,400,100" href="Oceania.html" alt="Oceania" />
</map>

Tabelle
42
 Si possono creare tabelle in un documento utilizzando il
tag <table>.
 Esempio
<table border=“1”>

</table>
 L’attributo border è l’unico supportato in HTML5
 Serve a specificare se la tabella deve avere bordo oppure no.
 Se non si desidera vedere il bordo impostare border=“0”

Tabelle
43
 Una tabella è composta da righe e colonne.
 Le righe vengono definite con il tag <tr>.
 Le colonne vengono definite con il tag <td>.
 Le colonne devono essere inserite come singoli elementi
all’interno delle righe.
 Esempio: 2 righe e 2 colonne
<tr id=“R1”>
<td id=“R1C1”>R1C1</td>
</tr>
<tr id=“R2”>
</tr>
</table>

Tabelle
44
 È possibile definire delle intestazioni per le colonne.
 Si utilizza il tag <th>.
 I tag <th> devono essere inseriti nella prima riga della tabella.
 Esempio
 In genere le intestazioni vengono formattate in grassetto
centrato
<tr id=“Header”>
<th id=“H1”>Nome</th>
<th id=“H2”>Matricola</th>
</tr>
<tr id=“R1”>
<td id=“R1C1”>Matteo Ceserani</td>
<td id=“R1C2”>624923</td>
</tr>
<tr id=“R2”>
<td id=“R2C1”>Mario Rossi</td>
<td id=“R2C2”>328313</td>
</tr>
</table>

Tabelle
45
 La didascalia di una tabella è definita nel tag
<caption>.
 Esempio:
<caption>
Elenco degli impiegati
</caption>
<tr id=“Header”>
<th id=“H1”>Nome</th>
<th id=“H2”>Matricola</th>
</tr>
<tr id=“R1”>
<td id=“R1C1”>Matteo Ceserani</td>
<td id=“R1C2”>624923</td>
</tr>
</table>

Tabelle
46
 I tag <colgroup> e <col>.
 È possibile definire degli stili particolari per singoli gruppi di
colonne di una tabella.
 Esempio:
<table border="1">
<colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titolo</th>
<th>Prezzo</th>
</tr>
<tr>
<td>3476896</td>
<td>Introduzione all’HTML</td>
<td>€53</td>
</tr>
</table>

Tabelle
47
 I tag <colgroup> e <col>.
 L’attributo <span> permette di specificare il numero di
colonne del gruppo.
 Altro esempio:
<table border="1">
<colgroup span="2" style="background:red"></colgroup>
<tr>
<th>ISBN</th>
<th>Titolo</th>
<th>Prezzo</th>
</tr>
<tr>
<td>3476896</td>
<td>Introduzione all’HTML</td>
<td>€53</td>
</tr>
<tr>
<td>5869207</td>
<td>Introduzione ai CSS</td>
<td>€49</td>
</tr>
</table>

Tabelle
48
 I tag <thead>, <tbody> e <tfoot>.
 Questi permettono di creare tre sezioni distinte in una tabella:
head, body e foot.
 Attraverso i CSS è possibile stabilire la formattazione delle tre
sezioni.
 Esempio:
<table border="1">
<thead>
<tr><th>Mese</th><th>Spese</th></tr>
</thead>
<tfoot>
<tr><td>Totale</td><td>€1200</td></tr>
</tfoot>
<tbody>
<tr><td>Gennaio</td><td>€800</td></tr>
<tr><td>Febbraio</td><td>€400</td></tr>
</tbody>
</table>

Tabelle
49
headers Specifica il riferimento di un tag <td> o <th> a un altro tag <th>.
Due esempi sono mostrati nella prossima slide.
colspan Indica il numero di colonne che il tag deve occupare.
rowspan Indica il numero di righe che il tag deve occupare.
scope Solo per il tag <th>. Specifica se un header di tabella si riferisce a una riga, una
colonna o a un gruppo di righe o colonne.
Valori possibili: row, col, rowgroup, colgroup.
 Attributi dei tag <th> e <td>.

Tabelle
50
 Attributo headers nel tag <td>.
 Attributo headers nel tag <th>.
<table border="1">
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone@example.com</td>
<td headers="phone">+45342323</td>
<td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
</tr>
</table>
<table border="1">
<tr>
<th id="name" colspan="2">Name</th>
</tr>
<tr>
<th headers="name">Firstname</th>
<th headers="name">Lastname</th>
</tr>
</table>

Liste
51
 Le liste sono al giorno d’oggi gli elementi più
utilizzati nei documenti HTML.
 Hanno di fatto rimpiazzato le tabelle in questo primato.
 Il motivo principale è legato alla diffusione dei CSS per gestire
la formattazione degli elementi e il loro posizionamento nella
pagina.
 Una lista di fatto è un elenco neutro di elementi.
 I diversi elementi possono poi essere formattati e posizionati
nei modi più svariati utilizzando i CSS.
 Esistono due tipi di liste:
 Liste ordinate: tag <ol>, ordered list.
 Liste non ordinate: tag <ul>, unordered list.

Liste
52
 Liste ordinate: tag <ol>.
 Una lista ordinata è una lista in cui gli elementi sono specificati
secondo un ordine progressivo.
 Nella versione base una lista ordinata viene formattata dal browser
come un elenco numerato.
 L’ordine tra gli elementi è definito dall’ordine in cui sono scritti gli
elementi della lista.
 Il tag <ol> definisce la lista.
 Il tag <li> (list item) definisce i singoli elementi della
lista.
<ol>
<li>Caffé</li>
<li>Latte</li>
<li>Orzo</li>
</ol>

Liste
53
 Liste ordinate: tag <ol>.
<ol type=“A” start=“3”>
<li>Caffé</li>
<li>Tea</li>
<li>Latte</li>
</ol>
<ol reversed=“reversed” start=“50”>
<li>Caffé</li>
<li>Tea</li>
<li>Latte</li>
</ol>
type Tipo della numerazione.
Valori possibili: 1, A, a, I, i.
start Valore iniziale della numerazione.
reversed Numerazione per valori discendenti.

Liste
54
 Liste non ordinate: tag <ul>.
 Nelle liste non ordinate non viene specificato un ordine tra gli
elementi.
 In ogni caso gli elementi sono mostrati nell’ordine in cui sono
scritti.
 In genere i browser marcano gli elementi di una lista non
ordinata con dei bullet (tipicamenti piccoli cerchi neri).
 Gli elementi vengono sempre specificati con il tag <li>.
<ul>
<li>Caffé</li>
<li>Latte</li>
<li>Orzo</li>
</ul>

Liste
55
 Esiste in realtà un terzo tipo di liste.
 Liste di definizioni: tag <dl>, definition list.
 Una lista di definizioni è una lista in cui ogni elemento è
composto da due parti.
 Elemento da definire: tag <dt>.
 Descrizione (definizione) dell’elemento: tag <dd>.
 L’aspetto in genere viene definito dai CSS.
 Esempio:
<dl>
<dt>Insieme</dt>
<dd>Collezione di oggetti</dd>
<dt>Cardinalità</dt>
<dd>Numero di elementi di un insieme</dd>
</dl>

Form
56
 La parola form si può tradurre con l’italiano modulo
 In HTML i form sono utilizzati per raccogliere dati
dall’utente e inviarli a un server.
 Un form HTML può contenere elementi di input come caselle di
testo, checkbox, radio-button e altri tipi di campi di input.
 Un form può inoltre contenere liste di selezione, aree di testo,
legende, etichette e aggregati di elementi.
 Il tag per inserire un form in un documento è il tag
<form>.
<form>

</form>

Form
57
 Nel web i form sono dappertutto…
 All’interno di un form sono presenti
essenzialmente:
 Campi per l’inserimento di dati da inviare al
server
 Pulsanti per l’invio dei dati o il reset del form
 È possibile inserire elementi più
sofisticati quali:
 Elementi di calcolo
 Supporto alla crittografia
 Captcha

Form
58
 Elementi di input: il tag <input>.
 Il tag <input> rappresenta l’elemento più importante in un form.
 Viene infatti utilizzato per creare i campi in cui l’utente deve inserire
i dati da inviare al server.
 Un elemento <input> può assumere forme
estremamente varie, a seconda del valore che assume il
suo attributo più importante: type.
 Tipi di input più diffusi:
 Text
 Password
 Radio
 Checkbox
 Submit

Form
59
Type Descrizione
button Pulsante generico.
checkbox Campo a scelta multipla. È possibile selezionare un numero arbitrario di valori proposti, anche nessuno.
color Permette di selezionare un colore attraverso una palette.
date Permette di selezionare una data visualizzando un calendario.
datetime Permette di inviare al server una data e un’ora. Ancora poco supportato dai browser.
datetime-local Permette di inviare al server una data e un’ora. Ancora poco supportato dai browser.
email Campo che controlla automaticamente la formattazione di un indirizzo mail.
file Permette di selezionare un file attraverso una casella di testo e un pulsante Scegli.
hidden Campo nascosto. Un valore viene inviato al server senza bisogno del controllo da parte dell’utente.
image Pulsante realizzato attraverso un’immagine.
month Permette di selezionare un mese e un anno da un calendario.
number Permette di selezionare un numero da un menù specificando il valore minimo e il valore massimo.
password Campo di testo che non visualizza il proprio contenuto.
 Attributo type del tag <input>.
 Possibili valori - 1

Form
60
Type Descrizione
radio Campo a scelta multipla. È possibile selezionare solo un’opzione.
range Permette di selezionare un valore in un intervallo visualizzando una sliding bar.
reset Pulsante per la pulizia del form.
search Permette di inviare al server una stringa da ricercare in un sito.
submit Pulsante per l’invio dei dati al server.
tel Campo che permette di inviare al server un numero di telefono. Ancora non supportato dai browser.
text Campo di testo a linea unica.
time Permette di selezionare un’ora del giorno attraverso un orologio.
url Campo che controlla automaticamente la formattazione di un URL.
week Permette di selezionare una settimana di un anno attraverso un calendario.
 Attributo type del tag <input>.
 Possibili valori - 2
 Prova i campi più carini (quelli introdotti con HTML5)

Form
61
 <input type=“text” />.
 Campo di input formato da una linea di testo
 Larghezza di default: 20 caratteri.
 Per impostare la larghezza desiderata:
 Size=“35”
 Esempio:
<form>
Nome: <input type=“text” name=“Nome” /><br />
Cognome: <input type=“text” name=“Cognome” />
</form>

Form
62
 <input type=“password” />.
 Campo di input per l’inserimento di una password.
 Larghezza di default: 20 caratteri.
 I caratteri immessi nel campo sono visualizzati come pallini o
asterischi
 Esempio:
<form>
Password: <input type=“password” name=“Pwd” />
</form>

Form
63
 <input type=“radio” />.
 Campo di input a scelta multipla.
 Le scelte multiple sono realizzate con più elementi
type=“radio” identificati dallo stesso nome (attributo
name).
 Una sola delle scelte proposte può essere selezionata.
 Al server viene inviato il valore dell’attributo value associato
alla scelta effettuata.
 Esempio:
<form>
<input type="radio" name="Sesso" value="M" />Maschio<br />
<input type="radio" name="Sesso" value="F" />Femmina
</form>

Form
64
 <input type=“checkbox” />.
 Campo di input a scelta multipla.
 Le scelte multiple sono realizzate con più elementi
type=“checkbox” identificati dallo stesso nome (attributo name).
 Si può selezionare un numero qualsiasi di opzioni (anche nessuna).
 Al server vengono inviati i valori dell’attributo value associato alle
scelte effettuate.
 Esempio:
<form>
<input type="checkbox" name="Mezzo" value="Bike" />
Possiedo una bicicletta<br />
<input type="checkbox" name="Mezzo" value="Car" />
Possiedo un’automobile
</form>

Form
65
 <input type=“submit” />.
 Visualizza un pulsante per l’invio del modulo al server.
 I dati vengono inviati all’URL specificato nell’attributo action del
tag <form>.
 I dati vengono inviati attraverso una richiesta di tipo GET o POST, a
seconda di quanto specificato nell’attributo method del tag <form>.
 <input type=“reset” />.
 Visualizza un pulsante per ripulire il form.
 Esempio
<form name="Login" action="login.php" method="get">
Utente: <input type="text" name="user" /><br />
Password: <input type="password" name="pass" /><br />
<input type="submit" value="Invia" />
<input type="reset" value="Cancella" />
</form>

Form
66
 Un esempio completo.
 La password è trasmessa in chiaro!
<!DOCTYPE html>
<html>
<head>
<title>Esempio di FORM</title>
</head>
<body>
<form name="Prova" action="http://www.daverrazzano.it" method="GET">
Nome: <input type="text" name="Nome" /><br />
Cognome: <input type="text" name="Cognome" /><br />
<input type="radio" name="Sesso" value="M" />Maschio<br />
<input type="radio" name="Sesso" value="F" />Femmina<br />
<input type="checkbox" name="Mezzo" value="Bike" />
Possiedo una bicicletta<br />
<input type="checkbox" name="Mezzo" value="Car" />
Possiedo un'automobile<br />
Nome utente: <input type="text" name="Nick" /><br />
Password scelta: <input type="password" name="Pass" /><br />
<input type="submit" value="Invia" />
<input type="reset" value="Cancella" />
</form>
</body>
</html>

Form
67
 Altri attributi del tag <input>.
 Il tag <input> supporta moltissimi attributi.
 In genere questi attributi vengono utilizzati ciascuno per un
particolare valore dell’attributo type.
 Se hai voglia controllali tutti.

Form
68
 Il metodo GET invia i dati in chiaro nell’URL della
richiesta.
 Decisamente poco sicuro.
 Il metodo POST non inserisce i dati nell’URL, ma li
incorpora nella richiesta HTTP.
 Sono comunque trasmessi in chiaro.
 Il livello di sicurezza non migliora.
 Come effettuare una trasmissione sicura?
 Crittografia
 HTTPS
<form name="Login"
action="https://www.mydomain.com/login.php"
method="post">

Form
69
 Trasmissione dei dati con metodo POST

Form
70
 Trasmissione dei dati con
action=“https://www.google.com” method=“POST”

Form
71
 Attributi del tag <form>.
accept-charset Indica il set di caratteri da utilizzare per compilare il form.
action URL cui inviare i dati del form.
autocomplete Indica se il form dovrebbe avere una funzione di autocompletamento.
Valori possibili: on, off.
enctype Indica il tipo di codifica dei dati del form.
Valori possibili: application/x-www-form-urlencoded,
multipart/form-data, text/plain.
method Metodo da utilizzare per inviare la richiesta HTTP.
Valori possibili: GET, POST.
name Specifica un nome per il form.
novalidate Indica che il form non dovrebbe essere validato dal server cui viene inoltrato.
Valori possibili: novalidate.
target Indica dove visualizzare la risposta ricevuta dal server a seguito dell’inoltro del
form.
Valori possibili: _blank, _self, _parent, _top.

Form
72
 L’attributo action.
 L’attributo action può assumere valori diversi da quelli di un
semplice URL di server web.
 In particolare si può decidere di inviare i dati di un form
attraverso una mail.
 La sintassi è la seguente:
action=“mailto:username@mydomain.com”
 In questo caso il metodo da utilizzare è POST

Form
73
 Il tag <select>.
 Il tag <select> permette di definire un menù a tendina per scegliere un
valore in un insieme di valori possibili.
 Esempio:
<select>
<option value="volvo">Volvo</option>
<option value="saab" selected="selected" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
 Il tag <option> permette di definire le singole voci da inserire nel menù
a tendina.
 L’attributo selected permette di specificare quale voce mostrare come
già selezionata.
 Può essere omesso, nel qual caso il menù a tendina mostra il primo elemento.
 Il tag <optgroup> permette di raggruppare le voci del menù a tendina
in gruppi.
 Vedi un esempio.

Form
74
 Bordi e didascalia in un form: <fieldset> e
<legend>.
 Esempio:
 Di solito i browser visualizzano una cornice intorno ai campi
con didascalia incorporata.
<form action="">
<fieldset>
<legend>Informazioni personali:</legend>
Nome: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30"><br />
Data di nascita: <input type="text" size="10" />
</fieldset>
</form>

Form
75
 Esaurire tutte le possibilità offerte dai form
richiederebbe molto altro tempo.
 Per chi desidera approfondire ulteriormente l’argomento
rinviamo al sito w3schools (ma ce ne sono molti altri)
 Da questa pagina esplorando il sito potete ottenere tutte le
informazioni possibili sui form in HTML5.
www.w3schools.com - Form in HTML

Blocchi
76
 In genere i tag HTML si dividono in due categorie.
 Tag che vengono renderizzati dai browser su una nuova linea
rispetto a ciò che li precede.
 Block tags.
 Esempi: <h1>, <p>, <ul>, <table>.
 Tag che vengono renderizzati sulla stessa linea rispetto a ciò
che li precede.
 Inline tags.
 Esempi: <a>, <img>, <td>, <iframe>.

Blocchi
77
 In HTML esistono due tag particolari che
permettono di definire blocchi di codice generici.
 <div></div>
 <span></span>
 <div> e <span> possono contenere qualsiasi tipo di
contenuto.
 Si differenziano solo per il comportamento
relativo all’allineamento rispetto a ciò che
li precede.
 <div> è un block tag.
 <span> è un inline tag.

Blocchi
78
 A cosa servono i tag <div> e <span>?
 Al loro interno si possono racchiudere blocchi di altri tag a piacere,
oppure del semplice testo.
 In genere si assegnano a <div> e <span> o un attributo class o un
attributo id, oppure entrambi.
 Attraverso i fogli di stile CSS si determina poi la formattazione di
tutti i blocchi appartenenti a una certa class, oppure dei blocchi
aventi un certo id.
 Questa tecnica permette anche la migliore gestione del layout della
pagina, sempre attraverso i CSS.
 Una volta si usavano le tabelle, ma è un uso scorretto del tag <table>
(anche se tollerato).
 Oppure si usavano i frame, ma in HTML5 sono stati eliminati del
tutto.
 <div> e <span> supportano solo gli attributi globali dei tag HTML,
non hanno attributi propri.

Blocchi
79
 Esempio.
<!DOCTYPE html>
<html>
<head>
<title>Quotidiano on-line dell'Albinia</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<div class="Header" id="MainBanner">

</div>
<div class="Body" id="MainBody">

<span class="SideBar" id="NavBar">

</span>
<span class="Body" id="InnerBody">

</span>
<span class="SideBar" id="NewsBar">

</span>
</div>
<div class="Footer" id="MainFooter">

</div>
</body>
</html>

Blocchi
80
 Esempio.
 Nell’esempio precedente si utilizza un foglio di stile CSS per
gestire l’aspetto dei blocchi del sito.
 I fogli di stile permettono di gestire due aspetti distinti:
 Formattazione del testo e degli altri elementi grafici dei blocchi
 Disposizione dei blocchi nella pagina (layout)
 HTML5 ha introdotto dei tag semantici specifici per
le sezioni di un sito.
 <article>, <section>, <nav>, <header>, <footer>.
 L’utilizzo dei tag <div> e <span> però è rimasto
sostanzialmente lo stesso.

La sezione <head>
84
 Il tag <head> può contenere diversi elementi.
 Finora abbiamo visto solo <title> e <link>.
 L’elenco completo dei tag inseribili nel tag <head> è il
seguente.
Tag Descrizione
<title> Specifica il titolo della pagina.
<meta> Permette di specificare metadati relativi al documento HTML.
<link> Definisce una relazione tra il documento HTML e una risorsa esterna.
Uso tipico: link ai fogli di stile CSS.
<base> Permette di specificare un percorso base per tutti i collegamenti
presenti nel documento.
<script> Permette di specificare uno script che il browser deve eseguire. Uso
tipico: codice JavaScript.
<style> Permette di specificare codice CSS embedded per la formattazione e il
layout del documento HTML.

La sezione <head>
85
 Il tag <base>.
 Nell’esempio tutte le immagini verranno cercate nella cartella
http://www.w3schools.com/images/.
 Inoltre tutti i collegamenti si apriranno in una nuova finestra.
<head>
<base href="http://www.w3schools.com/images/" target="_blank" />
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman" />
<a href="http://www.w3schools.com">W3Schools</a>
</body>

La sezione <head>
86
 Il tag <link>.
 Il tag <link> è utilizzato prevalentemente per i fogli di stile
CSS.
 I suoi attributi sono i seguenti.
href URL della risorsa esterna collegata al documento.
hreflang Linguaggio in cui è scritto il file della risorsa esterna.
media Specifica attraverso una media query le caratteritiche del dispositivo
su cui deve essere visualizzata la risorsa esterna.
rel Attributo obbligatorio. Specifica la relazione esistente tra il
documento HTML e la risorsa esterna a esso collegata. Valori
possibili: vedi slide successiva.
sizes Utilizzato solo per rel=“icon”. Dimensioni in pixel del file della
risorsa esterna. Valori possibili: Height x Width, any.
type MIME_Type della risorsa esterna. Elenco dei MIME_Types.

La sezione <head>
87
 Il tag <link>.
 Valori possibili dell’attributo rel.
 Si tratta comunque di un elenco parziale, perché la situazione è
ancora in evoluzione.
Valore Descrizione
alternate Link a una versione alternativa del documento.
archives Link a una collezione di materiale di interesse storico per il documento.
author Link all’autore del documento.
bookmark Link a un bookmark del documento (cioè a un punto chiave di entrata nel documento stesso).
external Link a una risorsa che non fa parte dello stesso sito del documento.
first Per documenti che fanno parte di una serie ordinata. Link al primo documento della serie.
help Link all’help del documento.
icon Link a un’icona che rappresenta il documento.
last Per documenti che fanno parte di una serie ordinata. Link all’ultimo documento della serie.
license Link a informazioni sulla licenza d’uso del documento.
next Per documenti che fanno parte di una serie ordinata. Link al documento successivo della serie.

La sezione <head>
88
Valore Descrizione
nofollow Link che non dovrebbe essere seguito dagli strumenti di analisi automatica dei documenti.
Esempio: motori di ricerca.
noreferrer Quando si segue il link non bisogna lasciar filtrare informazioni sul documento di origine.
pingback Link per permettere la notifica pingback agli autori del documento. Il meccanismo di
pingback permette agli autori di un documento di essere informati quando un altro
documento di terze parti contiene un link diretto al proprio.
prefetch Link a una risorsa esterna che dovrebbe essere precaricata e memorizzata prima della
visualizzazione del documento.
prev Per documenti che fanno parte di una serie ordinata. Link al documento precedente della
serie.
search Link a uno strumento di ricerca per il documento.
sidebar Link a un contenuto secondario del documento.
stylesheet Link a un foglio di stile per il documento.
tag Link a un tag (parola chiave) per il documento.
up Per documenti che fanno parte di una serie ordinata. Link al documento di livello superiore.
 Il tag <link>.
 Valori possibili dell’attributo rel.

La sezione <head>
89
 Il tag <link>.
 In ogni caso di solito l’utilizzo del tag link si limita a qualcosa
di simile:
 Tutti gli altri utilizzi sono piuttosto esotici.
 Se si vuole avere un idea del caos che regna sovrano durante la
transizione verso HTML5:
 http://microformats.org/wiki/existing-rel-values
<link rel="stylesheet" type="text/css" href="mystyle.css" />

La sezione <head>
90
 Il tag <meta>.
 Questo tag permette di specificare metadati relativi al
documento.
 Un metadato è un dato che descrive un altro dato.
 I metadati di un documento non fanno parte del documento,
ma in qualche modo lo descrivono.
 Attraverso il tag <meta> è possibile specificare dati per scopi
diversi.
 Dati utili ai motori di ricerca per indicizzare il documento.
 Dati utili al browser per visualizzare correttamente il documento.
 Dati utili ad altri servizi web.

La sezione <head>
91
 Il tag <meta>.
 Alcuni esempi.

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

<meta name="description" content="Free Web tutorials: HTML e CSS" />

<meta name="author" content="Matteo Ceserani" />

<meta http-equiv="refresh" content="30" />
 Attributi del tag <meta>

La sezione <head>
92
 Il tag <style>.
 Il tag <style> permette di incorporare del codice CSS
all’interno di un documento HTML.
 In linea di massima è meglio includere il codice CSS tramite il
tag <link>.
<html>
<head>
<style type="text/css">
body {background-color:#CCCCCC;}
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>

La sezione <head>
93
 Attributi del tag <style>.
media Specifica attraverso una media query le
caratteristiche del dispositivo per cui è ottimizzato
lo stile definito nel tag.
scoped Utilizzato insieme a un tag <div>, permette di
limitare l’ambito dello stille a un singolo blocco di
codice HTML. Valori possibili: scoped.
Attualmente non supportato dai browser.
type Specifica il tipo MIME della definizione dello stile.
Valori possibili: text/CSS.

La sezione <head>
94
 Il tag <script>.
 Il linguaggio HTML è un linguaggio dichiarativo.
 Non contiene istruzioni da eseguire, ma solo la descrizione di elementi
del documento.
 Per rendere dinamico il contenuto di un documento HTML occorre
inserire al suo interno degli script, ovvero delle porzioni di codice in
un qualche linguaggio di programmazione.
 Chi esegue gli script inseriti in un documento HTML?
 Il server web che genera il documento stesso.
 In questo caso non rimane traccia dello script nel documento
inviato al browser.
 Si parla di script lato server o server-side
 Il client che riceve il documento (il browser)
 In questo caso lo script viene trasmesso al client insieme al codice
HTML ed è visibile nel documento.
 Si parla di script lato client o client-side

La sezione <head>
95
 Il tag <script> può essere inserito sia nella sezione
<head> del documento che nella sezione <body>.
 Se viene inserito nella sezione <head> lo script viene caricato
ma non eseguito.
 È possibile eseguirlo in un secondo momento a seguito del
verificarsi di certe condizioni. Si veda l’esempio nelle prossime
slide.
 Se viene inserito nella sezione <body> lo script viene caricato
ed eseguito immediatamente.

La sezione <head>
96
 Il tag <script> permette di inserire in un documento script client-
side.
 Il linguaggio principe per gli script client-side è JavaScript (nome
ufficiale: ECMAScript).
 Attualmente ECMAScript è giunto alla versione 5.
 Attributi del tag <script>.
async Indica che lo script deve essere eseguito in maniera asincrona mentre il
caricamento della pagina continua. Valori possibili: async. Utilizzabile
solo per script esterni.
charset Specifica il set di caratteri dello script.
defer Indica che lo script deve essere eseguito dopo il caricamento completo
della pagina. Valori possibili: defer. Utilizzabile solo per script esterni.
src Specifica l’URL di un file esterno contenente lo script. Se è indicato, il tag
deve rimanere vuoto.
type Specifica il MIME Type dello script. Valore tipico: text/javascript.

La sezione <head>
97
 Un esempio vale più di mille parole. Provalo!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First JavaScript!</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>

CSS
98
 CSS - Cascade Style Sheet
 Il linguaggio HTML non era stato inizialmente pensato per
indicare la formattazione di un documento, cioè l’aspetto che
la pagina doveva avere una volta renderizzato dal browser.
 Doveva indicare solo la struttura del documento da un punto di
vista logico e semantico.
 Poi con HTML 3.2 è stato introdotto il tag <font>, insieme ad
altri tag e attributi che permettevano di specificare font, colori,
allineamenti e quant’altro.
 La formattazione doveva essere specificata elemento per elemento
in ogni pagina delle applicazioni web.
 Gestire grosse applicazioni divenne di fatto impossibile.
 Come svegliarsi da questo incubo?
 HTML5: eliminati tutti i tag e gli attributi non semantici.
 Un nuovo linguaggio per gestire la formattazione: CSS.

CSS
99
 Cos’è CSS?
 CSS è un linguaggio che permette di specificare l’aspetto che devono
avere i diversi elementi di un documento HTML a livello globale,
senza dover aggiungere a ogni tag specifiche di stile.
 Come si usa CSS?
 Esistono diversi modi di inserire il codice CSS in un documento.
 Attributo style all’interno di un tag. È un metodo sconsigliato: si
ricasca nel vecchio problema dei tag non semantici.
 Tag <style> nella sezione head di un documento. Il codice si applica
globalmente al documento. Meglio del primo ma ancora poco pratico.
 Foglio di stile esterno collegato al documento. È il metodo migliore,
permette di gestire in maniera centralizzata lo stile degli elementi di
un’intera applicazione.

CSS
100
 Che sintassi ha CSS?
 CSS è un linguaggio complesso, padroneggiarlo è difficile.
 Questo non è un’introduzione a CSS: diamo solo gli elementi base della sintassi.
 Partiamo da un esempio.
/* Stile da applicare a tutti i tag <p> */
p
{
text-align: center;
color: black;
font-family: arial;
}
/* Stile da applicare a tutti gli elementi con id=“notizia” */
#notizia
{
text-align:center;
color:red;
}
/* Stile da applicare a tutti gli elementi con class=“center” */
.center {text-align:center;}
/* Stile da applicare a tutti i paragrafi con class=“center” */
p.center {text-align:center;}

CSS
101
 La sintassi generale di una regola di stile è la
seguente.
/* Eventuale commento */
Selettore
{ Dichiarazione1;
Dichiarazione2;
...
}
 Il selettore indica un tag, un id o una classe di elementi per cui
è scritta la regola di stile.
 O una combinazione delle tre cose.
 Le dichiarazioni hanno la seguente sintassi.
 Proprietà: valore

Script server-side
102
 Con gli script lato client siamo in grado di produrre
documenti HTML dinamici.
 Ma dinamici in che modo?
 Supponiamo di dover realizzare un’applicazione per il commercio
elettronico.
 L’utente carica la pagina principale dell’applicazione.
 Inserisce in un form il proprio nome utente e la propria password.
 Il contenuto del form viene inviato al server web.
 Il server web invia all’utente una pagina personalizzata.
 Non è pensabile di generare a priori tutte le pagine personalizzate
per tutti gli utenti del sito, per inviarle quando vengono richieste.
 Le pagine dei singoli utenti devono essere generate al momento.
 Il server web esegue uno script che genera al momento il codice
HMTL delle singole pagine.
 Questo non si può fare con JavaScript. JavaScript viene eseguito dal
browser!

Script server-side
103
 Come si generano pagine personalizzate?
 I documenti HTML vengono prodotti dal server web
eseguendo degli script che processano i dati ricevuti dai form.
 Questi script non compaiono nelle pagine effettivamente
inviate ai browser: sono serviti per generarle.
 Vengono quindi chiamati script lato client, o server-side.
 Esistono molti linguaggi per la scrittura di script server-side. I
più famosi sono:
 PHP
 ASP
 JSP

Script server-side
104
 PHP (HyperText Pre-Processor)
 Questa non è un’introduzione al PHP.
 Facciamo solo un esempio per stimolare la curiosità.
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="fname">
Age: <input type="text" name="age">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
Welcome <?php echo $_POST["fname"]; ?>!<br>
You are <?php echo $_POST["age"]; ?> years old.
</body>
</html>
form.html
welcome.php

Html

More Related Content

What's hot

Similar to Html

Html