Metodologie Informatiche Applicate al Turismo 6. HTML Parte II Paolo Milazzo

(1)

Metodologie Informatiche Applicate al Turismo

6. HTML Parte II

Paolo Milazzo

Dipartimento di Informatica, Universit`a di Pisa http://www.di.unipi.it/∼milazzo

milazzo di.unipi.it

Corso di Laurea in Scienze del Turismo

A.A. 2012/2013

(2)

Sommario

1

Aspetti di presentazione dei contenuti

2

Tabelle

Tabelle come strumento di layout

(3)

Aspetti di presentazione dei contenuti

In HTML ` e possibile specificare alcuni dettagli riguardo gli aspetti di presentazione dei contenuti

I

colore dello sfondo della pagina

I

font, colore e dimensione dei caratteri

I

posizionamento dei vari elementi nella pagina

Un controllo pi` u approfondito di questi aspetti si pu` o ottenere usando fogli di stile CSS (vedremo in seguito)

L’utilizzo di HTML per gli aspetti di presentazione

I

E’ abbastanza semplice

I

E’ molto limitato

I

E’ deprecato: in futuro (HTML 5) bisogner` a per forza usare CSS

(4)

Impostare uno sfondo (1)

Per impostare un colore di sfondo al documento HTML si utilizza l’attributo bgcolor del tag <body> come nel seguente esempio:

< b o d y b g c o l o r = " red " >

I colori pi` u comuni possono essere specificati semplicemente tramite il loro nome inglese, ad esempio:

I

orange, blue, white, yellow, gray, brown, black, red, green, violet

Per alcuni di questi colori esistono anche le varianti “dark” e “light”, ad esempio: darkblue e lightblue

Spesso ` e preferibile utilizzare la codifica esadecimale dei colori, che ci permette di scegliere anche tonalit` a di colore non standard, ad esempio:

< b o d y b g c o l o r = " # F F A 5 0 0 " >

(5)

Impostare uno sfondo (2)

La codifica esadecimale di un colore inizia con un carattere cancelletto # ed ` e seguita da 6 cifre esadecimali (0-9,A-F) Rappresenta i livelli di colori primari rosso, verde e blu che costituiscono il colore (codifica RGB)

Ogni coppia di cifre rappresenta il livello di un colore primario (nell’ordine) nella gamma 0-255 (ossia 00-FF) che corrisponde a 256x256x256=16777216 possibili colori

Quindi:

I

#0000FF rappresenta il blu

I

#FF00FF rappresenta il rosso

I

#FFFFFF rappresenta il bianco

I

#000000 rappresenta il nero

I

#FFFF00 rappresenta il giallo

I

#EE82EE rappresenta il viola

I

....

Esistono tabelle che contengono le rappresentazioni esadecimali dei

principali colori

(6)

Impostare uno sfondo (3)

Si pu` o anche usare una immagine di sfondo, specificando l’URL (assoluto o relativo) del file immagine relativo come valore dell’attributo background

< b o d y b a c k g r o u n d = " i m m a g i n e . jpg " >

E’ possibile anche utilizzare entrambi gli attributi di sfondo in modo da avere una colorazione del documento nelle parti eventualmente non coperte dall’immagine:

< b o d y b g c o l o r = " red " b a c k g r o u d = " i m m a g i n e . jpg " >

Non tutti i browser si comportano nello stesso modo con le immagini di sfondo

I

Molti browser replicano l’immagine in orizzontale e in verticale (ovvero affincano pi` u copie dell’immagine), altri no...

I

Spesso conviene mettere immagini grandi per evitare che si vedano le

(7)

Impostare uno sfondo (4)

(8)

Impostare i colori del testo

Cos`ı come lo sfondo, anche il testo della pagine pu` o essere colorato a piacere, tramite l’attributo text del tag <body>

< b o d y t e x t = " b l u e " >

Questa impostazione si applica al testo dell’intero documento

Analogamente, tramite opportuni attributi del tag <body> si possono impostare anche i colori dei link

I

Il colore dei link di default del browser ` e blu chiaro, che si trasforma in porpora quando il link ` e stato visitato e in rosso quando si clicca il mouse su esso (link attivo)

I

I colori dei link di una pagina possono essere modificati con gli attributi link, vlink e alink rispettivamente per i link normali, visitati e attivi

< b o d y l i n k = " # F F A 5 0 0 " v l i n k = " g r e e n " a l i n k = " b l u e " >

(9)

Le varie impostazioni di colori

Ovviamente, i vari attributi del tag <body> possono essere usati insieme

< b o d y b g c o l o r = " y e l l o w " t e x t = " b l a c k " l i n k = " # F F 0 0 A A "

v l i n k = " g r e e n " a l i n k = " b l u e " >

(10)

Il font o tipo di carattere (1)

il font (tipo di carattere) ` e molto importante in un documento perch` e influenza la leggibilit` a e lo stile grafico del documento.

Il font di una porzione di testo pu` o essere impostato tramite il tag

<font> e l’attrbuto face

< f o n t f a c e = " A r i a l " >

T e s t o che verra ’ v i s u a l i z z a t o con il f o n t A r i a l

< / f o n t >

< f o n t f a c e = " G e o r g i a " >

T e s t o che verra ’ v i s u a l i z z a t o con il f o n t G e o r g i a

< / f o n t >

(11)

Il font o tipo di carattere (2)

Il font ` e composto da una serie di immagini rappresentanti i caratteri dell’alfabeto e per visualizzare il testo con un certo font, questo deve essere presente nel computer dell’utente

I

Il tag <font> consente di specificare una lista di font per un certo contenuto

I

Il browser legge il primo font della lista. Se esso ` e presente nel

computer lo applica al contenuto, altrimenti prova con i font successivi uno dopo l’altro

I

Se nessuno dei font della lista ` e presente sul computer, il browser usa il proprio font di default (come se il tag <font> non fosse presente)

< f o n t f a c e = " C o u r i e r New , C o u r i e r " > T e s t o C o u r i e r New o C o u r i e r < / f o n t >

Di solito, una lista di font:

I

dovrebbe essere costituita da font simili tra loro in modo che l’aspetto complessivo della pagina rimanga sostanzialmente lo stesso qualunque font venga scelto dal browser

I

l’ultimo font dovrebbe essere un font “sicuro”, ovvero un font che si

trova con facilit` a nei computer degli utenti

(12)

Il font o tipo di carattere (3)

I font si dividono in tre categorie principali:

I

I font serif (o con grazie) sono caratterizzati da decorazioni (dette appunto grazie) alle estremit` a delle linee

I

I font sans-serif (o senza grazie) sono caratterizzati dall’assenza di decorazioni alle estremit` a delle linee

I

I font monospace (o a spaziatura fissa) sono caratterizzati dal fatto che tutti i caratteri occupano lo stesso spazio in larghezza. Invece, negli altri tipi di font la larghezza di ogni carattere dipende dalla lettera rappresentata (font proporzionali)

Esistono altre categorie particolari di font (script, simboli, lettere

greche, ecc...) che si usano con minore frequenza

(13)

Il font o tipo di carattere (4)

Esempi di font sans-serif: Times New Roman, Georgia e Garamond

Esempi di font sans-serif: Arial, Helvetica e Verdana

(14)

Il font o tipo di carattere (5)

Esempi di font monospace: Courier e monospace

(15)

Il font o tipo di carattere (6)

I browser tipicamente prevedono un font di default per ogniuna delle tre tipologie serif, sans-serif e monospace

In HTML si pu` o dire al browser di usare uno dei font di default impostando l’attributo face del tag <font> con il valore serif, sans-serif o monospace

I font di default vengono di solito usati come ultimo valore di una lista di font tra cui scegliere

Esempi:

< f o n t f a c e = " Verdana , Arial , H e l v e t i c a , sans - s e r i f " > Bla bla ... < / f o n t >

< f o n t f a c e = " Georgia , T i m e s New Roman , s e r i f " > Bla bla ... < / f o n t >

< f o n t f a c e = " C o u r i e r New , m o n o s p a c e " > Bla bla ... < / f o n t >

(16)

Il colore del testo

Abbiamo gi` a visto che l’attributo text del tag <body> consente di specificare il colore del testo dell’intero documento HTML

Per cambiare il colore di una porzione di testo si pu` o usare l’attributo color del tag <font>

Il valore dell’attributo color ` e un colore espresso tramite il suo nome inglese o la codifica RGB esadecimale

< f o n t c o l o r = " g r e e n " > T e s t o v e r d e < / f o n t >

< f o n t c o l o r = " # 0 0 8 0 0 0 " > T e s t o v e r d e s c u r o < / f o n t >

(17)

Dimensione del testo

Un altro importante attributo del tag <font> ` e l’attributo size con il quale si specifica la dimensione del testo

Pu` o assumere valori numerici da 1 (testo piccolo) fino a 7 (testo grande)

Il valore di default del browser ` e 3

< f o n t s i z e = " 1 " > T e s t o p i c c o l o < / f o n t >

< f o n t s i z e = " 3 " > T e s t o n o r m a l e < / f o n t >

< f o n t s i z e = " 5 " > T e s t o un po ’ piu ’ g r a n d e < / f o n t >

< f o n t s i z e = " 7 " > T e s t o g r a n d e < / f o n t >

(18)

Un esempio completo di uso di <font> (1)

< h t m l > < h e a d > < t i t l e > Il G a z z e t t i n o di V e r g e m o l i < / t i t l e > < / h e a d >

< b o d y b g c o l o r = " l i g h t c y a n " >

< f o n t f a c e = " Arial , sans - s e r i f " >

< c e n t e r > < h1 > Il G a z z e t t i n o di V e r g e m o l i < / h1 > < / c e n t e r > < hr >

< !- - p r i m a n o t i z i a - ->

< f o n t c o l o r = " red " > < h2 > A r r e s t a t o t a b a c c a i o del p a e s e < / h2 > < / f o n t >

< f o n t f a c e = " Curier , m o n o s p a c e " s i z e =2 >

< p > di P a o l o M i l a z z o < / p >

< / f o n t >

< f o n t s i z e =3 c o l o r = " b l u e " >

< p > N o t i z i a f r e s c a dal c o m a n d o dei c a r a b i n i e r i di V e r g e m o l i . Il t a b a c c a i o M a r i o R o s s i & e g r a v e ; s t a t o a r r e s t a t o con l ’ a c c u s a di t r u f f a a g g r a v a t a ai d a n n i d e l l o s t a t o < / p >

< / f o n t >

< f o n t f a c e = " G a r a m o n d , Georgia , s e r i f " s i z e =2 >

< p > M a r i o Rossi , p r o p r i e t a r i o d e l l a t a b a c c h e r i a in c e n t r o & e g r a v e ; s t a t o a r r e s t a t o q u e s t a m a t t i n a a l l e 8 . 0 0 m e n t r e si t r o v a v a nel suo a p p a r t a m e n t o di Via M a z z i n i 17 in c o m p a g n i a d e l l a m o g l i e . F o n t i ben i n f o r m a t e r i f e r i s c o n o che il t a b a c c a i o al m o m e n t o dell ’ a r r i v o dei c a r a b i n i e r i ha i n u t i l m e n t e t e n t a t o la f u g a p r o v a n d o di c a l a r s i con un l e n z u o l o d a l l a f i n e s t r a d e l l a c a m e r a da l e t t o ( VI p i a n o ).

I v i c i n i di c a s a c o m m e n t a n o : " s e m b r a v a una b r a v a p e r s o n a " . < / p >

< / f o n t >

(19)

Un esempio completo di uso di <font> (2)

. . . c o n t i n u a . . . .

< hr >

< !- - s e c o n d a n o t i z i a - ->

< f o n t c o l o r = " red " >

< h2 > N o m i n a t a M i s s V e r g e m o l i < / h2 >

< / f o n t >

< f o n t f a c e = " Curier , m o n o s p a c e " s i z e =2 >

< p > di P a o l o M i l a z z o < / p >

< / f o n t >

< f o n t s i z e =3 c o l o r = " b l u e " >

< p > Da i e r i s e r a M i s s V e r g e m o l i 2 0 1 2 ha f i n a l m e n t e un n o m e : & e g r a v e ; C h i a r a Rossi , f i g l i a del n o t o ( e s t i m a t o ) t a b a c c a i o del p a e s e < / p >

< / f o n t >

< f o n t f a c e = " G a r a m o n d , Georgia , s e r i f " s i z e =2 >

< p > S e r a t a di g r a n d e s p e t t a c o l o all ’ a u d i t o r i u m " G i u s e p p e G a r i b a l d i "

di V e r g e m o l i . M i s s V e r g e m o l i 2 0 1 2 ha f i n a l m e n t e un n o m e : C h i a r a Rossi , 19 anni , f i g l i a del n o t o e s t i m a t o t a b a c c a i o M a r i o Rossi , p r o p r i e t a r i o d e l l a t a b a c c h e r i a in c e n t r o . M a r i o Rossi , la cui t a b a c c h e r i a & e g r a v e ; lo s p o n s o r p r i n c i p a l e dell ’ evento , ha d i c h i a r a t o : " s o n o m o l t o s o r p r e s o ! " . < / p >

< / f o n t >

< / b o d y >

< / h t m l >

(20)

Un esempio completo di uso di <font> (2)

(21)

Le tabelle (1)

Nei documenti HTML si possono inserire dati che hanno una naturale rappresentazione come tabelle tramite il tag <table>;

Le tabelle vengono spesso utilizzate anche come strumento di organizzazione della visualizzazione (layout) dei contenuti della pagina;

I

per questo il tag <table> (e i tag relati) prevedono un sacco di opzioni di formattazione;

I

L’uso di tabelle come strumento di layout ` e per` o deprecato (si

dovrebbero invece usare fogli di stile CSS)

(22)

Le tabelle (2)

La struttura di base di una tabella ` e la seguente:

L’intera tabella ` e racchiusa nel tag <table> che contiene:

una lista di righe, ogniuna racchiusa nel tag <tr>, che a sua volta contiene:

una lista di elementi (uno per ogni colonna) racchiusi nel tag <td>

< t a b l e >

< tr >

< td > c e l l a A1 < / td >

< td > c e l l a B1 < / td >

< td > c e l l a C1 < / td >

< / tr >

< tr >

< td > c e l l a A2 < / td >

< td > c e l l a B2 < / td >

< td > c e l l a C2 < / td >

< / tr >

< tr >

< td > c e l l a A3 < / td >

< td > c e l l a B3 < / td >

(23)

Le tabelle (3)

Alcune celle possono anche rappresentare titoli di righe o colonne:

per queste si usa <th> (table head) al posto di <td> (table data) la formattazione di queste celle ` e solitamente diversa dalle altre (a discrezione del browser)

< t a b l e >

< tr >

< th > < !- - c e l l a v u o t a in a n g o l o - -> < / th >

< th > A < / th > < th > B < / th > < th > C < / th >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td > < td > c e l l a B1 < / td >

< td > c e l l a C1 < / td >

< / tr >

. . . .

< tr >

< th > 3 < / th >

< td > c e l l a A3 < / td > < td > c e l l a B3 < / td >

< td > c e l l a C3 < / td >

< / tr >

< / t a b l e >

(24)

Le tabelle (4)

E’ anche possibile specificare celle che spaziano su pi` u righe o colonne:

usando gli attributi rowspan e colspan del tag <td>

il valore degli attributi ` e il numero di righe o colonne su cui spaziare

< t a b l e >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< td c o l s p a n =2 > c e l l a B1 + C1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< td r o w s p a n =2 > c e l l a A2 + A3 < / td >

< td > c e l l a B2 < / td > < td > c e l l a C2 < / td >

< / tr >

< tr >

< th > 3 < / th >

(25)

Le tabelle: aspetti di formattazione (1)

E’ possibile definire il bordo di una tabella tramite l’attributo border del tag <table>;

Il valore dell’attributo ` e lo spessore del bordo espresso in pixel

< t a b l e b o r d e r =2 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(26)

Le tabelle: aspetti di formattazione (2)

Gli attributi width e height specificano larghezza e altezza della tabella (in pixel o in % sulle misure della finestra del browser)

I

Con un valore percentuale la tabella si ridimensiona automaticamente quando si ridimensiona la finestra del browser

< t a b l e b o r d e r =2 w i d t h = 9 5 % h e i g h t = 2 0 0 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

(27)

Le tabelle: aspetti di formattazione (3)

L’attributo cellspacing specifica lo spazio tra le celle (in pixel) L’attributo cellpadding specifica lo spazio vuoto tra il bordo di una cella e il suo contenuto (in pixel)

< t a b l e b o r d e r =2 c e l l s p a c i n g =3 c e l l p a d d i n g =8 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(28)

Le tabelle: aspetti di formattazione (4)

Gli attributi align e valign possono essere usati in <table>, <tr> e

<td> per specificare l’allineamento orizzontale e verticale del testo nella tabella, in una riga o in una cella;

I

Valori per align: left,right,center;

I

Valori per valign: top,middle,bottom;

< t a b l e b o r d e r =2 c e l l s p a c i n g =3 c e l l p a d d i n g =8 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td a l i g n = " r i g h t " > c e l l a A1 < / td >

< / tr >

< tr a l i g n = " c e n t e r " v a l i g n = " top " >

< th > 2 < / th >

< / tr >

< tr >

(29)

Le tabelle: aspetti di formattazione (4)

Il colore di sfondo dell’intera tabella, di una riga o di una singola cella pu` o essere impostato tramite l’attributo bgcolor rispettivamente di

<table>, <tr> e <td> (o <th>)

< t a b l e b o r d e r =2 b g c o l o r = " y e l l o w " >

< tr >

< / tr >

< tr b g c o l o r = " l i g h t b l u e " >

< th > 1 < / th >

< td a l i g n = " r i g h t " > c e l l a A1 < / td >

< / tr >

< tr a l i g n = " c e n t e r " v a l i g n = " top " >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< td b g c o l o r = " g r e e n " > c e l l a B3 < / td >

< td > c e l l a C3 < / td >

< / tr >

< / t a b l e >

(30)

Tabelle come strumento di layout

Le tabelle in HTML, come molti altri elementi, possono essere annidate tra loro: il contenuto di una cella pu` o essere una ulteriore tabella HTML (sottotabella)

Questo ha dato origine ad un utilizzo “alternativo” delle tabelle

I

non solo per presentare dati incolonnati, ma per definire il layout dei documenti HTML, ovvero decidere l’organizzazione e la disposizione dei contenuti

Layout complessi possono essere semplici da realizzare con le sottotabelle

L’uso di tabelle per gli aspetti di layout ` e una pratica molto diffusa nelle pagine web, ma deprecata

I

CSS ` e linguaggio consigliato per il futuro

(31)

Semplice layout a tabelle di un sito

Tabella principale: 2 righe e 2 colonne con un colspan (in alto in blu)

Area in alto (blu): intestazione sito (titolo, logo, ecc...) Area a sinistra (giallo): menu con link alle pagine del sito Area grande (azzurro):

contenuti del sito, spesso

strutturati con una sottotabella

(32)

Larghezza di tabelle e colonne

Per definire il layout del sito tramite tabelle ` e importante definire bene la larghezza delle tabelle e delle loro colonne in modo da delineare le varie aree della pagina

I

Bisogna usare opportunamente l’attributo width di <table> e <td>

(usano valori in pixel o in percentuale) E’ bene ricordare che:

I

Una colonna ` e larga quanto la pi` u larga delle sue celle, quindi si pu` o impostare la larghezza di una colonna in una sola cella

I

Se non si specifica nessuna larghezza il browser adatter` a le colonne ai contenuti e la larghezza della tabella verr` a di conseguenza

I

Se si specifica solo la larghezza della tabella il browser imposter` a la larghezza delle colonne “libere” (la cui larghezza non ` e specificata) di conseguenza

I

Se si specificano tutte le larghezze (tabella e tutte le colonne) ` e bene

che la somma delle larghezze delle colonne sia pari alla larghezza della

tabella

(33)

Layout a tabelle: esempio pratico

L’HTML per ottenere il layout in figura con la tabella centrata rispetto alla finestra e di larghezza 800 pixel e la colonna dei men` u grande il 20% della tabella ` e

< b o d y >

< c e n t e r >

< t a b l e w i d t h = " 800 " >

< tr >

< td c o l s p a n =2 > . . . . < / td >

< / tr >

< tr >

< td w i d t h = " 2 0 \ % " > . . . . < / td >

< td w i d t h = " 8 0 \ % " > . . . . < / td >

< / tr >

< / t a b l e >

< / c e n t e r >

< / b o d y >

(34)

Riepilogo dei tag trattati

Tag trattati in questa lezione:

I

<body>

I

<font>

I