Laboratorio di Informatica 3 Anno Accademico 2019-2020

(1)

Laboratorio di Informatica 3

Anno Accademico 2019-2020

Luigi Catuogno

[lcatuogno@unisa.it]

Creare siti web

Introduzione

1

(2)

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

(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

(4)

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

(5)

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,229

x

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.com

9

10

(6)

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,340

11

(7)

Tabelle: composizione e impaginazione

Attributo

Valore

shape="xxx"

Forma dell’area. Il valore

xxx

può essere uno tra:

rect, circ

e

poly

coords="x

₁

,y

₁

,x

₂

,y

₂

…"

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

₁

,y

₁

,x

₂

,y

₂

"

Coordinate (rispettivamente) dei vertici in alto a sx e in basso a dx del rettangolo

circ

"x

₁

,y

₁

,r"

Coordinate del centro della circonferenza e lunghezza del suo raggio

poly

"x

₁

,y

₁

,x

₂

,y

₂

,…,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

(8)

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.22

Completare il codice HTML dell’esempio sin qui illustrato, utilizzando tre link reali al posto di quelli fittizi.