Laboratorio di Informatica 3
Anno Accademico 2019-2020
Luigi Catuogno
[lcatuogno@unisa.it]
Creare siti web
Introduzione
1
Il linguaggio HTML
Parte 6
HTML e CSS
Libri di testo consigliati:
Laura Lemay, Rafe Colburn
HTML & CSS
McGraw-Hill Italia. (2007)
ISBN 978-88-386-4478-8
3
HTML 5
Libri di testo consigliati:
Daniele Bochicchio e Stefano Mostarda
HTML5 con CSS e JavaScript
Editore Ulrico Hoepli Milano. (2015)
ISBN 978-88-203-6983-5
Per chi desidera approfondire le innovazioni introdotte con HTML5 e la gestione avanzata dei contenuti multimediali
Le mappe
5
Le mappe in HTML
• Una mappa è un’immagine
divisa in porzioni di forma e
dimensioni arbitrarie dette
hotzone;
• Ciascuna hotzone è una porzione
«cliccabile» dell’immagine a cui
può associarsi un link;
Le mappe in HTML
• Data una immagine, si realizza
una sua divisione in zone tramite
i tag
<map>
e
<area>;
• Il ciascun tag
<area>
definisce
una hotzone;
• Ciascuna mappa ha un nome
univoco nella pagina
• In nome della mappa viene
associato alla sua immagine
attraverso l’attributo
usemap
del
Le mappe in HTML
• Un’immagine dalle dimensioni
www,hhh
espresse
in
pixel,
definisce
un
sistema
di
riferimento
cartesiano
con
origine nel vertica in alto a
sinistra.
• le aree sono forme descritte
dalle coordinate dei loro vertici
in questo sistema.
0,0 458,0 0,458 458,458 229,229x
y
Le mappe in HTML
Immagine: mela.jpg Dimensioni: 458x458 Nome mappa: mela_rossa_1 Hotzones: http://www.target1.com http://www.target2.com http://www.target3.com 0,0 0,171 458,170 0,341 458,458 458,340 Forma: rettangolo da (0,0) a (458,170) Link: http://www.target1.com Forma: rettangolo da (0,171) a (458,340) Link: http://www.target2.com Forma: rettangolo da (0,341) a (458,458) Link: http://www.target3.com9
10
Le mappe in HTML
Attributo
Valore
usemap="#xxx"
Collega l’imagine alla mappa di nome xxx
(il nome deve essere preceduto da #)
Attributi tag <img>
Attributo
Valore
name="xxx"
Nome mappa (unico nel documento)
Attributi tag <map>
Le mappe in HTML
http://www.target1.com http://www.target2.com http://www.target3.com <img src="mela.jpg" height="458" width="458" usemap="#mela_rossa_1"> <map name="mela_rossa_1"> Forma: rettangolo da (0,0) a (458,170) Link: http://www.target1.com Forma: rettangolo da (0,171) a (458,340) Link: http://www.target2.com Forma: rettangolo da (0,341) a (458,458) Link: http://www.target3.com 0,0 0,171 458,170 0,341 458,34011
Tabelle: composizione e impaginazione
Attributo
Valore
shape="xxx"
Forma dell’area. Il valore
xxxpuò essere uno tra:
rect, circ
e
polycoords="x
1
,y
1
,x
2
,y
2
…"
Coordinate dei vertici della forma. Il loro numero
e significato dipendono dalla forma.
href="URL"
URL/pathname
della
destinazione
del
link
associato all’area.
Attributi tag <area>
All’interno di una mappa
(<map>..</map>)
, ciascuna hotzone è
descritta con un tag
<area>
e i suoi attributi
Tabelle: composizione e impaginazione
Shape
Coords
Valore
rect
"x
1
,y
1
,x
2
,y
2
"
Coordinate (rispettivamente) dei vertici in alto a sx e in basso a dx del rettangolocirc
"x
1
,y
1
,r"
Coordinate del centro della circonferenza e lunghezza del suo raggiopoly
"x
1
,y
1
,x
2
,y
2
,…,x
n
,y
n
"
Coordinate dei vertici del poligono. Sono necessari almeno tre vertici e il poligono è chiuso (l’ultimo vertice coincide col primo)Coordinate nel tag <area>
13
Le mappe in HTML
http://www.target1.com http://www.target2.com http://www.target3.com <img src="mela.jpg" height="458" width="458" usemap="#mela_rossa_1"> <map name="mela_rossa_1"> <area shape="rect" coords="0,0,458,170" href="http:www.target1.com"> <area shape="rect" coords="0,171,458,340" href="http:www.target2.com"> <area shape="rect" coords="0,341,458,458" href="http:www.target3.com"> </map> 0,0 0,171 458,170 0,341 458,458 458,340 Esercizio n.22Completare il codice HTML dell’esempio sin qui illustrato, utilizzando tre link reali al posto di quelli fittizi.
Le mappe in HTML
0,0 http://www.target1.com 0,171 http://www.target2.com 458,170 0,341 http://www.target3.com 458,340Variazioni sul tema
Realizzare una mappa con aree rettangolari utilizzando immagini diverse.
Esercizio n.23
Scrivere il codice HTML Per realizzare la mappa descritta qui a fianco.
Le mappe in HTML
229,229
https://it.wikipedia.org/wiki/Mela 160
Esercizio n.24
Scrivere il codice HTML Per realizzare la mappa descritta qui a fianco.
