XHTML Linguaggi di markup Linguaggi di markup Validazione

XHTML
Claudio Fornaro
Ver. 1.3
Linguaggi di markup
Definiti dal W.W.W. Consortium (W3C)
HTML – HyperText Markup Language:
primo linguaggio di markup utilizzato
nelle pagine HTML, mescola struttura
del documento e presentazione grafica
XHTML – eXtensible HTML:
evoluzione del precedente per ovviare a
sintassi ambigua, si basa su XML, quasi
esclusivamente strutturale (elementi
presentazionali in fogli stile separati)
1
3
Linguaggi di markup
Un linguaggio di markup contiene
blocchi di testo organizzati secondo il
loro proprio significato logico e
strutturale:
intestazioni
paragrafi
liste numerate
liste di definizioni
etc.
Validazione
Servizi gratuiti di validazione online:
validator.w3.org
www.htmlhelp.com/tools/validator
2
4

Il documento HTML
Nel seguito HTML viene usato col
significato di XHTML (salvo indicazione)
I file HTML e XHTML sono file di testo
con estensione .HTML o .HTM
Frammisti al testo vi sono dei TAG che
delimitano porzioni di testo (ad esempio
per indicare un titolo):
tag di apertura:
tag di chiusura: (non ha spazi)
Tipi di elementi
I tag delimitano blocchi di testo di tipo:
Block-level: indipendenti tra loro, es.
titoli, paragrafi, liste, etc. in genere
vengono visualizzati preceduti e seguiti da
un ritorno a capo, es. , ,
Inline: sono interni a elementi block-level
e non rompono il flusso del blocco stesso
(non introducono ritorni a capo), vengono
usati ad esempio per rendere in grassetto
una parola, es. ,
5
7
Il documento HTML
I tag di apertura possono contenere
attributi che completano la
specificazione del tag:
Caratteri speciali
Alcuni caratteri come < e & sono usati
per costituire elementi di markup e non
possono quindi essere utilizzati nel testo
Al loro posto si utilizzano delle sequenze
di escape appropriate, ad esempio per
rappresentare il carattere < si può
utilizzare la sequenza &lt; oppure il
codice ASCII: &#060; mentre per & si
può usare &amp; (notare il ; in fondo)
6
8

Regole di XHTML
Utilizzare solo caratteri minuscoli per
scrivere i nomi dei tag e degli attributi
(HTML invece non fa distinzione)
Una sequenza di white spaces (spazi,
tab, ritorni a capo) viene visualizzata
collassata ad un solo spazio
Regole di XHTML
Gli attributi devono essere sempre tra
virgolette (o apici) :
Tutti gli attributi devono avere valori,
quelli che non li hanno in HTML devono
avere un valore uguale all’attributo:
9
11
Regole di XHTML
Tutti i tag di apertura devono avere il
corrispondente tag di chiusura
I tag che non devono racchiudere testo
devono avere la forma (con spazio):
come ad es.
I tag devono essere annidati
correttamente:
esempio
Regole di XHTML
Nei commenti non si possono usare i
doppi trattini perché usati nel tag stesso
10
12

Stile logico e fisico
Stile logico: i tag identificano la
struttura del documento
testo grassetto
Stile fisico: i tag cambiano l’aspetto di
alcune parti del documento
testo grassetto
In entrambi i casi in genere si ottiene
un carattere grassetto, ma il secondo è
poco espressivo del contenuto
Il DOCTYPE
Indica ai browser come interpretare (e
visualizzare) i documenti XHTML, quale
modello di documento (DTD –
Document Type Definition) è stato
usato
Usato dai servizi di validazione per
conoscere a quale standard attenersi
13
15
Struttura del documento HTML
Titolo
Altri elementi di head
Corpo del documento
Il DOCTYPE
Transitional – più compatibile con il
vecchio HTML, utile per il supporto di
browser datati, depreca ma non
impedisce l’uso di tag presentazionali e
altri (es. attributo target nei link)
Strict – più rigoroso, non tollera tag
presentazionali, no per browser datati
Frameset – permette l’uso di frame,
stile anni ’90
14
16

Aspetti grafici di HTML
Nel seguito, i tag vengono descritti nella
loro forma standard e nel loro aspetto
grafico tipico (peraltro variabile a
seconda dei browser)
Tutti gli aspetti relativi alla forma
grafica sono modificabili tramite i fogli
stile CSS e attualmente questa è la
scelta preferita anche quando non si
usa un DTD Strict
Il tag
Il tag delimita l’inizio e la fine
del documento HTML
E’ l’elemento radice del documento in
quanto da esso discendono tutti gli altri
Indica il namespace in uso e la lingua del
documento e dell’ XML:
17
19
Il DOCTYPE
Si deve indicare all’inizio di ogni pagina
(X)HTML
Esempio di DOCTYPE XHTML 1.0
Transitional:
Il tag
L’attributo opzionale lang specifica la
lingua in cui è scritta la pagina
Ha solo due elementi “discendenti”:
18
20

Il tag
Descrive il contenuto del documento:
titolo
metadati : parole chiave, l’autore,
etc. utilizzabili per la classificazione (ad
esempio dai motori di ricerca)
script : programmi per rendere
interattiva la pagina
style sheet : istruzioni relative
all’aspetto grafico
altri tag, ad es.
Il tag
Tra gli altri tag in si deve
indicare il Content Type che specifica il
tipo del documento e il Character Set:
Questo può essere sostituito da questa
prima riga del documento HTML:
ma in molti browser non funziona
21
23
Il tag
Dà un titolo alla pagina del documento
Viene usato come titolo della finestra
del browser
Viene usato per farne un
bookmark/favorite
Viene usato dai motori di ricerca per
l’indicizzazione e come link alla pagina
Non può essere formattato in alcun
modo
Il tag
Racchiude il contenuto che ha una
forma grafica nella pagina HTML:
Titoli
Paragrafi
Immagini
Liste
…
Ha parametri che si applicano all’intera
pagina (trattati più avanti)
22
24

Attributi di base (core) dei tag
Quasi tutti i tag hanno i seguenti attributi
(quindi non verranno più citati):
id: assegna un identificatore ad un elem.
del documento (ad es. ad un paragrafo)
class: indica a quale classe o classi
appartiene un elemento (es. un paragrafo)
style: permette di specificare regole CSS
per la formattazione di un singolo elemento
title: permette di aggiungere un testo
descrittivo ad un tag (visualizzato come tip)
Titoli
NON si devono usare con il solo scopo
di cambiare la dimensione del carattere,
ma per il solo scopo di indicare un titolo
In HTML e XHTML Transitional si può
aggiungere l’attributo di allineamento
align con valori: left, right,
center, justify:
Centrato
Con DTD Strict si deve ricorrere ai CSS
25
27
Titoli
Sei livelli, il testo è incluso nei tag:
Titolo di importanza massima
…
Titolo di importanza minima
I livelli superiori hanno dimensioni
maggiori dei livelli inferiori
Sono di tipo block-level
Allineati a sinistra
Paragrafi
Il testo viene suddiviso in paragrafi
racchiusi dal tag :
Inizio di un paragrafo…
…fine del paragrafo
E’ un elemento di tipo block-level
Allineati a sinistra
Attributo align
Lascia spazio extra prima di ciascun
paragrafo
26
28

Paragrafi
Non è una buona idea (e tipicamente
non funziona perché il browser li
collassa) ottenere righe vuote con
trucchetti quali
Non ha senso che contenga sezioni di
tipo block-level come ad esempio liste e
Esercizi
Scrivere una pagina XHTML Transitional
con DOCTYPE, , , il
con il Content Type, i titoli con
gli attributi align, paragrafi e ritorni a
capo. Visualizzarla con IE e con Mozilla.
Validarla su validator.w3.org
Modificare la pagina precedente in modo
che sia validata come XHTML Strict
29
31
Ritorni a capo
Si utilizza il tag
Per inserire più righe vuote si ripete:
Ha un significato non strutturale
Con DTD Strict il tag può
comparire solo tra tag , ,
, , o
Divisioni
Il testo può essere suddiviso in sezioni
generiche dai tag e
Salvo l’allineamento a sinistra, non ha
alcuna forma grafica predefinita, viene
usato per la formattazione mediante CSS
E’ un elemento di tipo block-level
Attributo align
equivale a
(non strutturale, non Strict)
30
32

Divisioni
Piccole porzioni di testo possono essere
raggruppate tra e
Non ha alcuna forma grafica
predefinita, viene usato per la
formattazione mediante CSS
E’ un elemento di tipo inline
Citazioni
Per citare una frase si possono usare i
tag e
E’ un elemento di tipo inline
In genere viene visualizzato tra
virgolette
L’attributo cite può essere usato per
una breve descrizione o la citazione
della fonte (anche un sito Web)
Non è supportato da molti browser (IE6)
33
35
Citazioni
Per citare un blocco di testo si usano i
tag e
E’ un elemento di tipo block-level
In genere viene visualizzato con una
indentazione a sinistra e a destra
L’attributo cite può essere usato per
una breve descrizione o la citazione
della fonte (anche un sito Web)
Indirizzi
Blocco di testo strutturale contenente
un indirizzo (utile per i motori di ricerca)
E’ racchiuso dai tag e
E’ un elemento di tipo block-level
Visivamente ha un carattere corsivo
Non può contenere altri elementi di tipo
block-level
34
36

Indirizzi
Pinco Pallino
Corso Duca 24
Torino 10129
+39-011-1234567
pinco.pallino@polito.it
Liste
Tre tipi di liste:
ordered
unordered
definition
Sono strutture di tipo block-level e
quindi non devono essere in paragrafi
Gli elementi della lista possono anche
contenere altri elementi block-level
quali paragrafi e altre liste
37
39
Testo pre-formattato
Per non collassare spaziature multiple,
TAB e ritorni a capo (es. codice di
programmazione) si racchiude il testo
nei tag e
Non è soggetto a word-wrapping e il
browser inserisce delle scroll-bar
In genere viene utilizzato un font
monospaziato (es. Courier)
Può contenere tag di modifica font quali
e tag di tipo link
Liste ordinate
Liste in cui l’ordine è importante
Racchiuse tra i tag e
L’ordinamento viene rappresentato
mediante numerazione che inizia da 1
Gli elementi sono racchiusi tra i tag
e e sono indentati
L’attributo compact richiede di
compattare visivamente la lista (spesso
ignorato dai browser)
38
40

Liste ordinate
L’attributo type specifica il tipo di
numerazione (valori possibili:
1 – numerico, è il default
a e A – lettere minuscole e maiuscole
i e I – numeri romani minusc./maiusc.
L’attributo type può anche essere
inserito in e modifica il tipo di
numerazione della lista per quel solo
item
Liste ordinate
Item 1
Item a
…
Item z
…
Item n
41
43
Liste ordinate
L’attributo start specifica il valore
iniziale della numerazione, deve essere
un numero anche se il tipo è letterale
L’attributo value può essere usato in
per modificare il valore della
numerazione della lista da quel punto in
avanti
Liste ordinate
42
44

Liste non ordinate
Liste in cui l’ordine non è importante
Racchiuse tra i tag e
Gli elementi sono preceduti da un
elemento grafico quale il pallino
Gli elementi sono racchiusi tra i tag
e e sono indentati
L’attributo type specifica il tipo di
pallino (disc, circle e square)
type può anche essere inserito in
Liste di definizioni
Liste di descrizioni di termini
Racchiuse tra i tag e
Ogni elemento della lista è composto da
almeno una delle seguenti parti:
termine da definire tra e ,
mostrato non indentato
definizione del termine tra e ,
mostrato indentato nella riga successiva
45
47
Liste non ordinate
Liste di definizioni
46
48

Esercizi
Modificare la pagina dell’esercizio
precedente in modo da aggiungere
Citazioni
Indirizzi
Testo pre-formattato
Liste semplici
Liste annidate
Visualizzarla con altri browser
Validarla
Separatori orizzontali
L’attributo align (left, right,
center) indica la posizione della linea
quando non è larga quanto la finestra
L’attributo noshade elimina
l’ombreggiatura
Si preferisce utilizzare i fogli stile CSS
49
51
Separatori orizzontali
Linee orizzontali ombreggiate che
separano visivamente e logicamente
regioni di testo
Si ottiene con il tag:
E’ un elemento di tipo block-level
Attributo size: spessore in pixel
Attributo width: larghezza in pixel o in
percentuale sulla finestra (default:
100%)
Separatori orizzontali
50
52

Elementi del testo
Elementi inline, fisici (non logici, quindi
possibilmente da evitare):
… Corsivo
… Grassetto
… Macchina da scrivere
(Courier)
… Sottolineato (no Strict)
… Barrato (no Strict)
… Barrato (noStrict)
Elementi del testo
53
55
Elementi del testo
Elementi inline fisici (seguito):
… Pedice
… Esponente
… Font più grosso di 1
incremento
… Font più piccolo di 1
incremento
Elementi del testo
Elementi inline logici:
… Abbreviazione (Sig.),
graficamente normale
… Acronimo,
graficamente normale
… Citazione, corsivo
… Listato, Courier
… Definizione, corsivo
.. tasto di tastiera, Courier
54
56

Elementi del testo
Elementi inline logici:
… Quotazione, tra virgolette
… Esempio, Courier
… Enfatizzato, corsivo
… Forte enfasi,
grassetto
… Variabile di programma,
corsivo
Caratteri speciali
Alcuni caratteri con codifica alternativa:
&#034; &quot; " Virgolette
&#039; &apos; ' Apostrofo
&#038; &amp; & E commerciale
&#060; &lt; < Minore di
&#062; &gt; > Maggiore di
&#153; &trade; Trademark
&#160; &nbsp; Non-breakable space
&#8364;&euro; € Euro
57
59
Elementi del testo
Caratteri speciali
Alcuni caratteri accentati:
&Agrave; À &agrave; à
&eacute; é &egrave; è
&igrave; ì &ograve; ò
&ugrave; ù &brvbar; ¦
&laquo; « &raquo; »
&ordf; ª &ordm; º
&middot; · &deg; °
&sup2; ² &sup3; ³
58
60

Commenti
Note non mostrate nella visualizzazione
della pagina
Racchiusi tra i tag
Spesso usati per:
introdurre note di copyright delle pagine
(in )
nascondere parti di codice non riconosciuta
dai vecchi browser (ad esempio ,
, etc.)
Esercizi
Modificare la pagina dell’esercizio
precedente in modo da aggiungere
Separatori orizzontali
Elementi fisici e logici del testo
Caratteri speciali e accentati
Commenti
Visualizzarla con altri browser
Validarla
61
63
Commenti
Esempio
Un browser riconosce i CSS controlla
l’interno dei commenti nei tag
Gli hyperlink
Puntatori unidirezionali detti anchor a
oggetti esterni al documento HTML
L’oggetto (testo, immagine, …) racchiuso
dai tag a è sensibile al click e
viene visualizzato sottolineato e di colore
blu (violetto se già visitato)
L’attributo href specifica l’URL
dell’oggetto a cui si riferisce (target)
W3C
62
64

Gli hyperlink
L’URL target può essere assoluto:
http://www.w3.org
oppure relativo alla posizione sul server
del file HTML che contiene il link:
altrofile.html
../images/bullet.gif
Gli hyperlink
I colori dei link possono essere
modificati mediante i seguenti attributi
del tag (ma è preferibile usare
i fogli stile CSS che permettono di
modificare anche il colore dei link
quando il mouse vi è sopra):
link: colore dei link non visitati
vlink: colore dei link visitati
alink: colore dei link quando si fa click
65
67
Gli hyperlink
Il tag nella sezione
può essere usato per specificare un URL
assoluto da usare per completare un
URL relativo invece dell’URL della pagina
corrente
Gli hyperlink
L’attributo target specifica dove aprire
la pagina o l’oggetto riferito da href
Entrambi gli attributi id e name di
definiscono un fragment identifier: un
identificatore di una posizione nel testo,
in questo caso non si indica href e non
si ha una resa grafica particolare (in
genere il contenuto è vuoto)
66
68

Gli hyperlink
Un fragment viene utilizzato preceduto
dal carattere #: #top
Un fragment permette ad un anchor di
saltare direttamente alla visualizzazione
del paragrafo che lo contiene:
Back to top
Il fragment indicato in href può essere
relativo ad un altro documento:
Go to the top of cnn
Gli hyperlink
Attributo title: permette di associare
qualche informazione al target link, si
presenta sotto forma di tooltip
Attributo accesskey: associa il link ad
uno shortcut da tastiera, al posto di fare
click sul testo si premono i tasti
ALT+quello_specificato:
Yahoo!
Alcuni tasti sono riservati: F, E, V, T, H…
69
71
Gli hyperlink
L’attributo id permette di definire un
anchor in qualsiasi tag:
Inizio
Se il tag deve essere usato sia
come anchor sia come fragment,
oppure se si vuole applicare al testo su
cui fare click una formattazione tramite
regola CSS, allora possono esserci sia
href sia id/name (meglio entrambi)
Gli hyperlink
Attributo target: permette di indicare
il nome di quale finestra o frame il link
deve essere aperto, di default
Oltre ai nomi delle finestre si possono
usare:
_blank (finestra nuova)
_self (sé stessa)
_parent e _top (solo con i frame)
70
72

Gli hyperlink
Un’immagine può essere associata ad
un anchor e appare riquadrata da un
bordo (le immagini sono trattate più
avanti)
border="0" elimina il bordo
Caratteri
Il testo tra i tag e
viene visualizzato modificato in base
agli argomenti:
color: colore del testo
size: dimensione del testo:
valore da 1 (piccolo) a 7 (grande)
valore incrementale (+/–1, +/–6) rispetto al
valore corrente, il valore iniziale è 3
face: nomi dei font da utilizzare in ordine
di preferenza (se il browser non li trova)
73
75
Gli hyperlink
Attenzione: se tra la chiusura del tag
e il tag c’è un white space
(spazio, tab, ritorno a capo), si forma
una piccola riga in basso a destra
dell’immagine detta “tick” che è indice
di poca cura dei dettagli: eliminare il
white space
Caratteri
Esempio
Testo modificato
Testo non modificato
Se il browser non trova nessuno dei
fonti elencati, usa un font di default (in
genere tipo Times)
74
76

Caratteri
Per cambiare tutto il font di un
documento si può usare il tag
nella sezione
Attributi:
color
size
face
Colori
Attributo color in quasi tutti i tag
Attributo text nel tag per il
colore del testo della pagina
Attributo bgcolor nel tag per
il colore di sfondo della pagina
Attributi link, vlink e alink nel tag
per il colore dei link (vedi link)
77
79
Colori
E’ possibile cambiare i colori di quasi
ogni elemento grafico
Modalità duramente contrastata a
favore dei CSS
I colori si possono esprimere mediante i
loro nomi o mediante i codici RGB in
esadecimale preceduti da #: #FFAA22
I codici esadecimali del tipo xxyyzz si
possono abbreviare in xyz: #FA2
Colori
Principali colori
Black (#000000)
Green (#008000)
Silver (#C0C0C0)
Lime (#00FF00)
Gray (#808080)
Olive (#808000)
White (#FFFFFF)
Yellow (#FFFF00)
Maroon (#800000)
Navy (#000080)
Red (#FF0000)
Blue (#0000FF)
Purple (#800080)
Teal (#008080)
Fuchsia (#FF00FF)
Aqua (#00FFFF)
78
80

Esercizi
Modificare la pagina dell’esercizio
precedente in modo da aggiungere
Hyperlink
Caratteri
Colori
Visualizzarla con altri browser
Validarla
Immagini
Per inserire un immagine in un punto
della pagina HTML si usa il tag
E’ un elemento di tipo inline (!!!)
L’attributo src identifica l’URL (assoluto
o relativo) da cui prelevare l’immagine
Le immagini sono in genere raccolte in
una o più directory (es. images)
81
83
Immagini
Gli unici due formati supportati dallo
standard sono:
GIF (8 bit, con trasparenza, animate)
JPEG (24 bit, resa fotografica)
Altri formati non standard supportati da
molti browser:
BMP
PNG (tipo GIF)
molti altri mediante plug-in
Immagini
L’attributo alt fornisce un testo
alternativo alla visualizzazione (per
browser non grafici) o quando manca
l’immagine o quando il cursore è sopra
l’immagine (tip)
Poiché alcuni browser (FF) usano
title per il tip, utilizzare sia alt (per
IE) sia title (che ha priorità su alt)
Se l’immagine è solo decorativa si usa
un attributo vuoto (alt="")
82
84

Immagini
L’attributo align può essere usato per
allineare l’immagine con il testo:
top, middle, bottom: allineano la riga
precedente e quella successiva del testo
top top top top top top top top
con l’immagine
right, left: spostano l’immagine nella
direzione indicata, il testo seguente
avvolge l’immagine dall’altra parte
Immagini
middle middle
bottom bottom
middle middle
bottom bottom
Per interrompere il flusso del testo che
avvolge l’immagine (quindi per andare a
capo sotto l’immagine), si usa il tag
con l’attributo clear avente
valori left, right, both o none:
85
87
Immagini
Immagini
Qui c’è un
86
88

Immagini
In un’immagine avente attributo align
con valori left o right si possono
aggiungere gli attributi:
hspace per aggiungere un margine (in
pixel) a destra e a sinistra dell’immagine
vspace per aggiungere un margine (in
pixel) sopra e sotto l’immagine
Immagini
L’immagine viene normalmente
mostrata nelle sue dimensioni originali
Si possono dare le dimensioni con gli
attributi width e height (in pixel o %
sulla larghezza del contenitore-finestra)
Le dimensioni esplicite:
ridimensionano l’immagine (se necessario)
permettono al browser di mostrare la
pagina prima che tutte le immagini
vengano scaricate dal server (pre-layout)
89
91
Immagini
Immagini
Un’immagine all’interno di tag
diventa un link (ossia cliccabile)
Si può impostare il bordo dell’immagine
a 0 con l’attributo border
90
92

Immagine di sfondo
Per aggiungere una immagine di sfondo
ad una pagina HTML si utilizza
l’attributo background nel tag
riferendolo ad un URL assoluto o
relativo contenente un’immagine
L’immagine viene ripetuta
orizzontalmente e verticalmente (tiled )
Image map
Immagine contenente più punti sensibili
al click, corrispondenti a diversi URL
Due tipi:
server-side image maps
client-side image maps
93
95
Esercizi
Modificare la pagina dell’esercizio
precedente in modo da aggiungere
Immagini di vario tipo
Uno sfondo alla pagina
Visualizzarla con altri browser
Validarla
Image map
Nelle server-side IM:
1. L’utente fa click in un punto dell’immagine
2. Il browser manda al server Web le
coordinate del punto su cui si è fatto il click
3. Il server determina quale URL sia associato
a quelle coordinate e lo manda al browser
4. Il browser richiede l’URL che il server gli ha
mandato
Poco usate, lente, poco user-feedback
(mostra solo le coordinate x e y nella
barra di status)
94
96

Image map
Nelle client-side IM il browser:
carica l’immagine,
carica il file con la descrizione delle zone
sensibili dell’immagine
associa le zone agli URL corrispondenti
Veloce: il browser conosce gli URL
User-feedback: l’URL di destinazione
viene mostrato quando il mouse è sopra
Lo sviluppo e test non richiede un server
Image map
Client-side IM
L’immagine viene dotata
dell’attributo usemap che identifica un
tag che definisce le zone attive
L’immagine diventa un link nonostante
non ci sia alcun tag
Conviene impostare border a 0
97
99
Image map
Server-side IM
Un tag con attributo href punta al
file delle zone sul server (o ad un cgi)
Il tag contiene un tag con
attributo vuoto ismap
Image map
Client-side IM
Il tag può essere collocato in
qualsiasi punto del documento (spesso
alla fine, documentare con commenti!) e
può essere anche in un file separato
E’ necessario che abbia l’attributo
name e/o id (meglio entrambi) perché
possa essere referenziato dall’attributo
usemap di
98
100

Image map
Client-side IM
I tag e racchiudono le
forme geometriche che definiscono le
zone attive dell’immagine
Ogni forma geometrica è descritta da
un tag
Image map
Client-side IM
Valori per shape e relative coords:
rect: rettangolo (default), coords
contiene 4 valori: gli angoli top-left e
bottom-right
circle: cerchio, coords contiene 3
valori: il centro e il raggio
poly: poligono qualsiasi, coords
contiene 2xn valori: ciascuno è un angolo
default: la restante area dell’img (no IE)
101
103
Image map
Client-side IM
Attributi principali di :
href: URL associato alla zona
shape: forma della zona (rect, circle,
poly)
coords: coordinate x,y dei punti che
definiscono la shape, separati da virgole, il
punto 0,0 è il top-left, x e y possono essere
in pixel o in percentuale su dim. immagine
alt: testo alternativo per quella zona
Image map
Client-side IM

Image map
Client-side IM
Altri attributi principali di :
105
target: frame o finestra in cui aprire il link
nohref: indica che la zona non deve essere
attiva (es. all’interno di una zona attiva)
Tabelle
Griglie rettangolari di celle organizzate
in righe e colonne
Utilizzate nella modalità Transitional
anche per disporre gli elementi di una
pagina (layout), deprecato
Strict non ne accetta l’uso per il layout,
ma solo per la presentazione di dati
tabulari
107
Esercizi
Modificare la pagina dell’esercizio
precedente in modo da aggiungere
Imagemap server-side (non essendoci il
server a rispondere, mostra solo le
coordinate del punto su cui è)
Imagemap client-side (per stabilire le
coordinate, utilizzare temporanemanente
un’Imagemap server-side identica)
Visualizzarla con altri browser
Validarla
Tabelle
Ogni tabella è racchiusa nei tag
e
E’ un elemento di tipo block-level
Ogni riga è racchiusa nei tag e
Ogni riga contiene celle di tipo:
intestazione: racchiuse da tag e
, centrate, in grassetto
dato: racchiuse da tag e ,
allineate a sinistra, font normale
106
108

Tabelle
109
La dimensione delle celle dipende dal
contenuto
Ogni cella può contenere anche elementi
di tipo block-level (e altre tabelle)
I tag e
aggiungono una didascalia alla tabella,
hanno attributo align con valori top,
bottom, left, right
L’attributo border di indica lo
spessore delle linee
Tabelle
Alcuni browser non mostrano i contorni
di una cella se questa non contiene
valori, per mostrarla correttamente si
può utilizzare &nbsp;
111
Tabelle
Basic Fruit Comparison
Chart
FruitColor
AppleRed
KiwiGreen
WatermelonPink
Tabelle
Per far occupare ad una cella lo spazio
di più celle, si aggiunge nel tag o
corrispondente alla cella da
espandere l’attributo:
rowspan="n_righe" per estendersi in
verticale su un n. di righe pari a n_righe
colspan="n_col" per estendersi in
orizzontale su un n. di colonne pari a n_col
110
112

Tabelle
Element 1
Element 2
Element 3
Tabelle
Dove è sbagliato il seguente codice?
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
113
115
Tabelle
Element 1
Element 2
Element 3
Element 4
Esercizi
Riprodurre la seguente tabella 4x4
(introducendo testo per le celle)
114
116

Tabelle
Attributo width per:
table: dimensione della tabella in pixel o
in percentuale
th e td: dimensione della cella in pixel
Tabelle
Allineamento testo nelle singole celle,
attributi di e :
align: allineamento orizzontale (left,
right, center, justify, char)
valign: allineamento verticale (top,
middle, bottom, baseline)
117
119
Tabelle
Spazio tra le celle: attributo
cellspacing in , in pixel o %
Spazio tra le linee delle celle e il
contenuto: attributo cellpadding in
, in pixel
Tabelle
Left
Center
Right
Top
Middle
Bottom
118
120

Tabelle
L’attributo bgcolor si può applicare a:
, , e
Lo spazio lasciato da cellspacing ha
in genere il colore dello sfondo
L’attributo background si può
applicare a: , e
Tabelle
Esercizi. Riprodurre l’aspetto delle
seguenti pagine (centrate)
121
123
Tabelle
L’attributo align in posiziona
la tabella nella pagina
I valori right e left fanno avvolgere
la tabella (didascalia inclusa) dal testo
che segue ( per
ripristinare il normale flusso)
Tabelle
Soluzioni
Heading
…
122
124

Tabelle
Soluzioni
DemoSite
Link 1
...
Page Heading
Lorem ipsum dolor ...
Tabelle
Design fluido (stretchable)
Si ridimensiona per occupare tutta la
finestra del browser
Possibile grazie alle tabelle (meglio se si
usano i CSS)
Si definiscono le dimensioni di solo
alcune parti della tabella
125
127
Esercizi
Top-Left-Bottom “TLB” Layout
Tabelle
&nbsp;
Barra sinist.
…
Contenuto principale
Barra dest.
&nbsp;
126
128

Tabelle
Esempio ottenuto con tabelle
Tabelle
Suggerimenti:
Indentazione per leggibilità
Usare sempre con gli attributi
border, cellpadding e cellspacing
Verificare che le somme dei width di
e sia pari a quella di
Non annidare troppe tabelle (codice
complesso e più lento da visualizzare)
Commentare le parti delle tabelle e le
tabelle stesse quando sono annidate
129
131
Tabelle
Photoshop e altri lo producono automat.
Tabelle
La struttura logica della tabella può
opzionalmente essere evidenziata
suddividendola in sezioni:
intestazione: tra e ,
opzionale e unica
corpo: tra e , possono
esserci più sezioni nella stessa
tabella
terminazione: tra e ,
opzionale e unica
130
132

Tabelle
Per definire le caratteristiche relative a
gruppi di colonne della tabella, prima di
si raggruppano le colonne
stesse con i tag
Ciascuna colonna viene identificata da
un tag generico , nell’ordine
da sinistra a destra
Tabelle
133
L’attributo rules di permette
di specificare quali linee debbano essere
disegnate intorno alle celle/colonne/righe
(none, groups, rows, cols, all)
L’attributo frames di
permette di specificare quali linee
debbano essere disegnate intorno alla
tabella (box, above, below, hsides,
vsides, lhs, rhs, void, border)
135
Tabelle
Esempio
gruppo 1
colonna 1
gruppo 2
colonna 2
colonna 3
Tabelle
Esercizio
Riprodurre la seguente tabella
134
136

Tabelle
Soluzione
Fun with Food
…
I frame
137
Un documento HTML visualizzare nella
stessa finestra più pannelli (frame)
indipendenti, ma collegabili
Ogni pannello può contenere documenti
diversi e avere scrollbar
Attualmente non più molto usati per
alcuni problemi di “usability”
Vantaggio: poter operare su un panel e
tenerne un altro aperto in consultazione
139
Tabelle
Esercizio
Riprodurre le tabelle
I frame
138
140

I frame
Il documento principale:
non contiene un tag , ma una
coppia e
141
contiene soltanto l’indicazione e la
disposizione dei singoli frame
ha un DTD di tipo particolare:
I frame
Per separare la finestra del browser in
porzioni orizzontali:
essendo valori un elenco separato da
virgole delle percentuali di spazio da
assegnare a ciascun frame
143
I frame
Per separare la finestra del browser in
porzioni verticali:
essendo valori un elenco separato da
virgole delle percentuali di spazio da
assegnare a ciascun frame
I frame
All’interno dei tag , vari tag
specificano i documenti da
visualizzare in ciascun frame
Attributi di :
src: URL da visualizzare nel frame
name: nome del frame (per vecchi browser)
id: identificatore del frame (nuovi browser)
(sia name sia id allo stesso valore)
frameborder: spessore del bordo
142
144

I frame
Altri attributi di :
scrolling: presenza o no di scrollbar,
valori: auto (default), yes, no
145
noresize="noresize": impedisce che il
frame possa essere ridimensionato
marginheight: distanza del contenuto dai
bordi superiore e inferiore
marginwidth: distanza del contenuto dai
bordi sinistro e destro
I frame
Example
Yahoo
Microsoft
147
I frame
Per supportare i browser che non
supportano i frame (vecchi browser, ma
anche PDA, cellulari, etc.), dopo i
e prima di
si può aggiungere una sezione tra i tag
e
Qui viene riportato il codice HTML (da
a ) da visualizzare in
alternativa
I frame
Per aprire un link presente in un frame
in un altro frame:
dare un name e un id al frame destinatario
aggiungere nel tag l’attributo target
con il nome/id del frame destinatari
Esempio
146
148

I frame
Valori predefiniti di target:
_blank: carica la pagina in una nuova
finestra
_self: carica la pagine nel frame corrente
_top: elimina la struttura a frame della
finestra e vi carica la pagina intera
_parent: come _top ma limitato alla
finestra genitore, nel caso di frame
annidati
I frame
149
I frameset posso essere annidati:
151
I frame
Si possono usare i frame per creare
layout come con le tabelle
I valori per gli attributi cols e rows
possono essere:
valori percentuali
valori in pixel
l’asterisco * (lo spazio che resta)
I frame
Riprodurre la seguente schermata, a
sinistra un elenco di link a motori di
ricerca, a destra un titolo fisso e sotto lo
spazio dove vengono aperte le pagine
150
152

I frame
Riprodurre la seguente schermata, i
frame laterali sono larghi 100 pixel,
quello superiore è alto 100 pixel, tutti i
frame devono avere un contenuto
I frame
Attributi di :
width: larghezza in pixel o percentuale
height: altezza in pixel o percentuale
src: URL da cui prelevare il contenuto
align: allineamento (come )
marginheight: distanza del contenuto
dai bordi superiore e inferiore
marginwidth: distanza del contenuto dai
bordi sinistro e destro
153
155
I frame
Frame flottanti o “inline frame”
Si comportano come ogni altro oggetto
oggetto inline (il testo lo avvolge come
un’immagine)
Sono interni ad un documento con un
normale (DTD non Frameset)
Racchiuso tra i tag e
(notare che ha il tag di
chiusura)
I frame
All’interno dei tag e
si inserisce testo HTML da
visualizzare se il browser non supporta
gli Iframe ( implicito)
L’attributo target di può riferirsi
ad un Iframe
154
156

I frame
Multimedia in Flash
157
Tag non standard, ma
utilizzato da quasi tutti i browser
159
I frame
Esercizio
Google Maps fornisce il codice HTML
per includere in un Iframe la mappa di
un luogo, provare a inserire una in una
propria pagine HTML.
Multimedia in Flash
Tag standard, ma non
sempre funzionante correttamente
158
160

Multimedia in Flash
161
Tag standard, qui utilizzato
con gli ActiveX di Microsoft
I form
Permettono di ricevere input dall’utente
Le informazioni vengono inviate al
server web che:
le fa elaborare ad una applicazione
predisposta (CGI) che produce dei risultati
invia questi risultati al browser
163
Multimedia in Flash
In genere si utilizzano entrambe le
modalità
…
I form
Un form è racchiuso tra i tag e
Contiene codice HTML e speciali tag
detti “field” o “controlli” (es. )
I field sono elementi di tipo inline e
sono identificati dagli attrib. id e name
Le informazioni vengono passate al
server come coppie del tipo
field-name/valore o field-id/valore
162
164

I form
Attributi di :
action: URL del programma CGI che
deve ricevere i dati
I form
165
assoluto o relativo (se il CGI è nello stesso
server)
per fare prove usare:
oppure (non funziona bene con le checkbox):
Attributi di :
enctype: metodo di codifica dei dati:
application/x-www-form-urlencoded:
default, cambia gli spazi in + e i caratteri non
alfanumerici in %nn (nn è il codice ASCII)
text/plain: trasmette senza codifica,
preferibile se action èdi tipo mailto in
quanto produce un testo strutturato a righe:
First Name=Pinco
Last Name=Pallino
Sex=m
Submit=Invia
167
I form
Attributi di :
method: protocollo di trasmissione dei
dati, principali valori:
get: default, passa i dati insieme all’URL
http://www.demo.com/cgi/programma.p
hp?Name=Pinco+Pallino&Age=92&Sex=m
Pochi dati, posso essere inseriti in un link
post: trasmette i dati nella stessa connessione
attraverso cui ha mandato la richiesta per l’URL
Name=Pinco+Pallino&Age=92&Sex=m
I form
Attributi di :
enctype (continua):
multipart/form-data:
separa i campi trasmessi con dei delimitatori
speciali, permette inoltre di trasmettere uno o
più file al server passandone anche il nome, i
dati inviati hanno questo aspetto:
Content-type: multipart/form-data;
boundary=---------------------------2988412654262
Content-Length: 5289
-----------------------------2988412654262
Content-Disposition: form-data; name="nomeutente"
Joe
-----------------------------2988412654262
Content-Disposition: form-data; name="myfile";
166
168

I form
Attributi di :
id e name: identificano il form, in genere
si utilizzano entrambi con gli stessi valori.
XHTML-Strict depreca l’uso di name ma
alcuni browser riconoscono solo quello
I form
Campo TEXT
Una sola riga di input
Attributi:
name
id (lo stesso di name)
size: ampiezza (n. di caratteri)
maxlength: contenuto massimo (n. caratteri)
value: contenuto iniziale
169
171
I form
Attributi comuni a tutti i field:
name: identifica il field, viene usato per
l’elaborazione lato server dei form e anche
per i JavaScript
id: identifica il field, in genere viene usato
per i CSS e i JavaScript
Si utilizzano entrambi e, ove possibile,
assegnando gli stessi valori (con eccezioni)
XHTML-Strict depreca name, ma alcuni
browser lo richiedono per l’uso con script
I form
Campo PASSWORD
Una sola riga di input
I caratteri inseriti non vengono visualizzati,
al loro posto vengono visualizzati degli
asterischi o altri caratteri neutri
Attributi: come per il campo TEXT
Attenzione: i dati non vengono trasmessi
cifrati grazie a questo tipo di input (si
usano altri metodi, ad es. connessioni SSL)
170
172

I form
Campo TEXTAREA
Area di input multilinea
…
Attributi:
I form
rows: numero di righe
cols: numero di caratteri per ogni riga
name, id (uguali)
Il contenuto iniziale viene definito scrivendolo
tra i due tag (è testo semplice, non HTML)
…
Campo MENU A DISCESA
Attributi di :
size: numero di righe visibili (default=1), se
maggiore di 1 si parla di “liste”
name, id (uguali)
173
multiple="multiple": permette di
selezionare più di un elemento (Control-click); al
server viene mandata una coppia field/valore
per ciascun elemento selezionato; in questo
caso l’attributo selected (prossima slide) può
essere usato su più elementi
175
I form
Campo MENU A DISCESA
Gli elementi del menu sono
racchiusi in tag :
Super Gadget
Mega Gadget
Gadget
Al server viene mandata la coppia:
gadg/stringa tra dell’elemento selezionato
I form
Campo MENU A DISCESA
Attributi di :
value: valore che viene inviato al server
quando viene selezionato l’elemento
corrispondente, se value non è presente viene
mandato il testo compreso tra e
selected="selected": preseleziona un
elemento
174
176

I form
Campo MENU A DISCESA
177
Il tag
dà un titolo alle sezioni di
Super Gadget
Mega Gadget
Mongo Gadget
Gadget
I form
Campo CHECKBOX
Super-magneto
Kryptonite Coating
Anti-gravity
Al server viene mandata una coppia
name/valore per ciascun elemento
selezionato (valore è on oppure quello
indicato con value nell’elemento selez.)
179
I form
Campo CHECKBOX
Elementi da spuntare
Non mutuamente esclusivi
Attributi:
I form
name: uguale per tutte le ckbox collegate tra
loro (come se fossero gli elementi di una lista)
id: diverso per identificare ciascuna checkbox
value: valore che viene inviato al server, se
non esiste, viene inviato on
checked="checked": preseleziona la ckbox
Campo CHECKBOX
Per distinguere i vari elementi o si usa
value in ciascun elemento (indispensabile
nel caso precedente) o si utilizza un name
diverso per ciascun elemento:
Super-magneto
Kryptonite Coating
Anti-gravity
178
180

I form
Campo RADIO-BUTTON
Elementi da spuntare
Mutuamente esclusivi
Attributi:
I form
name: uguale per tutti i radio-button
mutuamente esclusivi
id: diverso per identificare ciascuna checkbox
value: valore che viene inviato al server, se
non esiste, viene inviato on
selected="selected": preseleziona il radio
Bottone di invio
Richiede al browser di inviare all’URL
specificato in action i contenuti di tutti i
campi del form
Attributi:
name
id (lo stesso di name)
value: scritta sul bottone, inviata al server
(per avere diversi bottoni associati allo stesso
form ma richiedenti operazioni diverse)
181
183
I form
Campo RADIO-BUTTON
Per distinguere i vari elementi si usa
value in ciascun elemento:
Super-magneto
Kryptonite Coating
Anti-gravity
I form
Bottone di reset
Azzera o riporta al valore di default tutti i
campi del form
Attributi:
name
id (lo stesso di name)
value: scritta sul bottone, inviata al server
182
184

I form
Bottone generico
Mostra un bottone cliccabile
185
Deve essere associato mediante linguaggi
di scripting a un evento che faccia eseguire
un’azione, ad es. con l’attributo onclick:
onclick="alert('Hello!');"
Altri attributi:
name
id (lo stesso di name)
value: scritta sul bottone
I form
Bottone grafico
Immagine che si comporta come un
bottone, ma invia anche le coordinate di
dove è stato cliccato
Attributi:
name, id (uguali)
src: URL dell’immagine da visualizzare
alt, align, vspace, hspace: come per
187
I form
Bottone generico 2
Metodo alternativo per mostrare un bottone
Press Me!
Il testo tra i due tag è la scritta sul bottone,
ma a differenza di può essere
composto da elementi in-line e block (es.
immagini, ma non trasmette le coordinate)
Attributi:
name, id (uguali)
value: valore (stringa) da trasmettere al server
type: valoributton, submit e reset
I form
File upload
Permette di caricare un file sul server
E’ necessario un enctype di tipo
multipart/form-data
Crea un bottone che apre una finestra di
dialogo per selezionare il file
Attributi:
name, id (uguali)
maxlength: contenuto massimo (n. caratteri)
size: ampiezza (n. di caratteri)
186
188

I form
Etichette
Nome:
Associano un testo ad un campo
Permette di formattare tutte le label con
una sola regola CSS
Utile per gli screen reader
1o modo – il campo associato è tra i tag:
Nome:
I form
Fieldset
Raggruppano più campi, in genere sono
incorniciati
…
Attributi di :
Solo quelli di base
Il tag interno …
racchiude il titolo del fieldset
Attributi di :
align: top, bottom, left, right
189
191
I form
Etichette
2 o modo – il campo associato è indicato
mediante il suo id nell’attributo for
Nome:
Questo secondo metodo permette di
collocare e in 2 celle
diverse di una tabella usata per il layout
I form
Fieldset
Customer Identification
Customer Name:
Password:
190
192

I form
Informazioni non visibili
Permettono di passare dati al server senza
intervento dell’utente
Attributi:
name, id (uguali)
value: valore (stringa) da trasmettere al
server
Ad es. correlano collegamenti consecutivi
dello stesso utente (trasmettono ai form
successivi i dati accumulati dai precedenti)
I form
Attributi comuni a tutti i campi:
accesskey:
Customer Name:
tabindex: specifica l’ordine in cui con il
tasto TAB ci si può spostare da campo a
campo (i campi con tabindex di valore
pari a 0 vengono considerati dopo tutti
quelli con valore > 0)
title: può essere usato per suggerire
all’utente cosa immettere in un campo
193
195
I form
Informazioni non visibili
Il server crea la pagina
del secondo form
includendo in
campi hidden
i dati ottenuti
dal primo
form, così il
secondo
form può inviarli
tutti insieme al server
I form
Attributi comuni a tutti i campi:
disabled: il campo viene reso
inutilizzabile, in genere è grigio, i suoi dati
non vengono spediti al server, l’opzione (la
dis/ri-abilitazione) viene gestita da script
per renderlo utilizzabile solo in determinati
casi (es. certi campi sono stati completati)
readonly: il campo non è modificabile,
ma si comporta come un campo normale
(solo per campi text, password e
textarea), opzione gestibile con script
194
196