Redazione
a- a+

Uso dei colori

Dopo aver esaminato una possibile struttura per una HomePage, avremo sicuramente voglia di renderla piùaccattivante attraverso l'uso dei colori. Leraccomandazioni del W3C riguardo l'uso dei colori nel websi riassumono in quella che è la tabella dei coloridetti "web-safe" ovvero sicuri per il web.

Non tutti i colori sono sicuri, ma solo quelli riportatinella tabella qui sotto. La sicurezza va intesa nei terminiin cui essi sono compatibili con qualsiasi user agent : nellospecifico con i browser. Usando i colori della tabella innotazione esadecimale, siamo certi che verranno interpretatinel modo corretto da qualsiasi utente. La notazioneesadecimale è composta di sei caratteri (cifre elettere) davanti ai quali occorre mettere uno sharp ocancelletto. Per esempio il bianco viene annotato comeffffff, dunque sarà: #ffffff.

Nell'ambito di questi colori si è liberi dicombinarli a piacimento, ricordiamoci però che leteorie grafiche ci insegnano che la somma dei colori usati,affinché sia piacevole alla vista, deve dare comerisultato il grigio; per capire meglio è come seavessimo la famosa tavolozza di colori di un pittore,mescolandoli deve uscire fuori il grigio. Sembreràstrano ma molti professionisti del web mescolanomaterialmente alcuni colori a tempera per vedere se formanoil grigio.

Dopo aver dato un' occhiata alla tavola dei coloriweb-safe, vediamo come implementarli nel nostro file css:
 

FFF
 FFF
CCC
 CCC
999
 999
666
 666
333
 333
000
 000
FFC
 C00
FF9
 900
FF6
 600
FF3
 300
 
99C
 C00
  CC9
 900
FFC
 C33
FFC
 C66
FF9
 966
FF6
 633
CC3
 300
  CC0
 033
CCF
 F00
CCF
 F33
333
 300
666
 600
999
 900
CCC
 C00
FFF
 F00
CC9
 933
CC6
 633
330
 000
660
 000
990
 000
CC0
 000
FF0
 000
FF3
 366
FF0
 033
99F
 F00
CCF
 F66
99C
 C33
666
 633
999
 933
CCC
 C33
FFF
 F33
996
 600
993
 300
663
 333
993
 333
CC3
 333
FF3
 333
CC3
 366
FF6
 699
FF0
 066
66F
 F00
99F
 F66
66C
 C33
669
 900
999
 966
CCC
 C66
FFF
 F66
996
 633
663
 300
996
 666
CC6
 666
FF6
 666
990
 033
CC3
 399
FF6
 6CC
FF0
 099
33F
 F00
66F
 F33
339
 900
66C
 C00
99F
 F33
CCC
 C99
FFF
 F99
CC9
 966
CC6
 600
CC9
 999
FF9
 999
FF3
 399
CC0
 066
990
 066
FF3
 3CC
FF0
 0CC
00C
 C00
33C
 C00
336
 600
669
 933
99C
 C66
CCF
 F99
FFF
 FCC
FFC
 C99
FF9
 933
FFC
 CCC
FF9
 9CC
CC6
 699
993
 366
660
 033
CC0
 099
330
 033
33C
 C33
66C
 C66
00F
 F00
33F
 F33
66F
 F66
99F
 F99
CCF
 FCC
  CC9
 9CC
996
 699
993
 399
990
 099
663
 366
660
 066
006
 600
336
 633
009
 900
339
 933
669
 966
99C
 C99
  FFC
 CFF
FF9
 9FF
FF6
 6FF
FF3
 3FF
FF0
 0FF
CC6
 6CC
CC3
 3CC
003
 300
00C
 C33
006
 633
339
 966
66C
 C99
99F
 FCC
CCF
 FFF
339
 9FF
99C
 CFF
CCC
 CFF
CC9
 9FF
996
 6CC
663
 399
330
 066
990
 0CC
CC0
 0CC
00F
 F33
33F
 F66
009
 933
00C
 C66
33F
 F99
99F
 FFF
99C
 CCC
006
 6CC
669
 9CC
999
 9FF
999
 9CC
993
 3FF
660
 0CC
660
 099
CC3
 3FF
CC0
 0FF
00F
 F66
66F
 F99
33C
 C66
009
 966
66F
 FFF
66C
 CCC
669
 999
003
 366
336
 699
666
 6FF
666
 6CC
666
 699
330
 099
993
 3CC
CC6
 6FF
990
 0FF
00F
 F99
66F
 FCC
33C
 C99
33F
 FFF
33C
 CCC
339
 999
336
 666
006
 699
003
 399
333
 3FF
333
 3CC
333
 399
333
 366
663
 3CC
996
 6FF
660
 0FF
00F
 FCC
33F
 FCC
00F
 FFF
00C
 CCC
009
 999
006
 666
003
 333
339
 9CC
336
 6CC
000
 0FF
000
 0CC
000
 099
000
 066
000
 033
663
 3FF
330
 0FF
00C
 C99
  009
 9CC
33C
 CFF
66C
 CFF
669
 9FF
336
 6FF
003
 3CC
  330
 0CC
  00C
 CFF
009
 9FF
006
 6FF
003
 3FF
 



Per prima cosa aggiungeremo al file anche l'elementobody, in modo da colorare lo sfondo della pagina conl'istruzione background-color:

 

1.body { background-color: #ffffcc;}#testa{position:absolute;top:0px;width:100%; height:100px; border:1px solid #000000; background-color: #336666;}#menu {position:absolute;top:110px; width:200px;height:350px; border:1px solid #000000; background-color:#0066cc; }#corpo {margin:0px 0px 0px 205px;position:absolute;top:110px;width:500px;height:350px; border:1px solid #000000; background-color:#ffffff;}#piede {position:absolute;top:500px;width:100%; height:50px; border:1px solid #000000; background-color:#ffff00;}

 

Questa combinazione di colori è assolutamente errata eci si rende subito conto che qualcosa non funziona…mapotrebbe piacere: sui gusti non si può discutere. Inogni caso nel livello testa ed in quello menùl'errore è troppo grossolano per non correggerlo:i caratteri del testo non si leggono bene; occorre colorarlicon l'attributo color, che va usato cosìperché in quanto a color si intende il colore dei fontossia dei caratteri:

 

1.body { background-color: #ffffcc;}#testa{position:absolute;top:0px;width:100%; height:100px; border:1px solid #000000; background-color: #336666; color:#ffffff;}#menu {position:absolute;top:110px; width:200px;height:350px; border:1px solid #000000; background-color:#0066cc;colorf:#ffffff; }#corpo {margin:0px 0px 0px 205px;position:absolute;top:110px;width:500px;height:350px; border:1px solid #000000; background-color:#ffffff;}#piede {position:absolute;top:500px;width:100%; height:50px; border:1px solid #000000; background-color:#ffff00;}

 

Anche in questo modo non va bene : infatti nel livellomenù ci sono caratteri ma appartengono ad un link cheproprio non si vede. I link richiedono infatti che vengaspecificato a parte ogni loro attributo; non possono esseretrattati come un normale font. Correggiamo questo difettocolorando il link:

 

1.body { background-color: #ffffcc;}#testa{position:absolute;top:0px;width:100%; height:100px; border:1px solid #000000; background-color: #336666; color:#ffffff;}#menu {position:absolute;top:110px; width:200px;height:350px; border:1px solid #000000; background-color:#0066cc;colorf:#ffffff; }#corpo {margin:0px 0px 0px 205px;position:absolute;top:110px;width:500px;height:350px; border:1px solid #000000; background-color:#ffffff;}#piede {position:absolute;top:500px;width:100%; height:50px; border:1px solid #000000; background-color:#ffff00;}a:link {color:#ffffff;}a:visited {color:#ffff00;}a:active {color:#ff3300;}a:hover{color:#ff00ff;}

 

In questo modo abbiamo aggiunto altre quattro istruzioni alnostro file css: vediamole nel particolare. Nella riga a:linkviene specificato che tutti i link (a=link) devono essere dicolore bianco. Visited sta per visitati, active contrassegnagli ancoraggi che l'utente ha in uso, mentre hovercontrassegna il passaggio del mouse sopra il link.

Rileviamo come continua a riempirsi il foglio css, mentre laindex è rimasta così come era. Questo èil grande vantaggio di un corretto uso dell' XHTML: pocheistruzioni per il documento da visualizzare consentono unaveloce interpretazione da parte degli user agent. In pocheparole le pagine web vengono caricate in tuttavelocità.