Lo sfondo della tua pagina dovrebbe essere solo -- in background. Anche se aggiungiamo diversi colori o anche fantasie, tienti in mente che essi non dovrebbero interferire con la leggibilita' complessiva del testo. Per le pagine di questo corso, abbiamo usato un colore bianco pieno che produce uno sfondo pulito e che non interferisce (o almeno non drammaticamente) con il testo.
Con alcune modifiche al tag <body> (introdotto in precedenza, nella lezione 1), puoi aggiungere uno sfondo a colore pieno alla tua pagina. Ma prima di mostrarti come realizzare cose difficili coi colori, dobbiamo prima parlare di valori RGB per i colori e della loro rappresentazione "esadecimale".
Ecco la parte difficile. Piuttosto che identificare il colore con qualcosa simile a "102,153,255" ogni numero e' convertito dalla rappresentazione in base 10 (normali numeri di tutti i giorni, composti da 0,1,2,3,4,5,6,7,8,9) a quella in base 16, esadecimale (composta da 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Perche'? L'esadecimale e' compreso piu' facilmente e piu' efficentemente dai computer. Cosi' per l'esempio dei colori di prima, scriveremo in esadecimale, tipo "6699FF". In questo esempio, "66" e' il valore per il Rosso, "99" quello per il Verde, e "FF" per il Blu.
Ecco alcuni esempi esadecimali di colori diversi:
| Colore | Esadecimale | Colore | Esadecimale | |
|---|---|---|---|---|
| xx oo xx | FFCCCC | xx oo xx | 3300FF | |
| xx oo xx | 33FF66 | xx oo xx | AA0000 | |
| xx oo xx | 663300 | xx oo xx | 9900FF | |
| xx oo xx | 000077 | xx oo xx | FFFF00 | |
| xx oo xx | EEEEEE | xx oo xx | 888888 | |
| xx oo xx | 444444 | xx oo xx | 000000 | |
|
Ora, non andare in panico perche' devi fare tutto questo mucchio di conversioni numeriche! Ci sono tanti accessori che ti permetteranno di fare click su un colore e provvederanno loro stessi alla rappresentazione esadecimale. Alcuni accessori per i colori sono disponibili presso la gentaglia di Yahoo.
Ma ancora meglio, molti browser supportano abbreviazioni standard per questi 16 colori (quelli preferiti da Windows VGA):
|
||||
| Colore | Nome | Colore | Nome | |
| xx oo xx | aqua | xx oo xx | black | |
| xx oo xx | blue | xx oo xx | fuchsia | |
| xx oo xx | gray | xx oo xx | green | |
| xx oo xx | lime | xx oo xx | maroon | |
| xx oo xx | navy | xx oo xx | olive | |
| xx oo xx | purple | xx oo xx | red | |
| xx oo xx | silver [argento] | xx oo xx | teal | |
| xx oo xx | white | xx oo xx | yellow | |
NOTA: Se vuoi, puoi fare prima un test per vedere se il tuo browser supporta gli sfondi a colori pieni.Per il nostro Volcano Web, la prima cosa che faremo sara' quella di aggiungere uno sfondo colorato al file index.html. La formattazione HTML per aggiungere uno sfondo a colore pieno coinvolge il tag <body>, che deve essere modificato come segue:
<body bgcolor=#XXXXXX>dove XXXXXX e' la rappresentazione esadecimale del colore decimale (indicata dal segno # in fronte ad esso).
Se ti ricordi, l'immagine che usiamo per aprire ha una figura di vulcano su sfondo nero -- quindi se noi usassimo lo stesso colore nero per lo sfondo della pagina, la figura si confonderebbe tranquillamente con la nostra pagina:
<body bgcolor=#000000>
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>dove il valore XXXXXX determinera':
Ora puoi aggiungere alcuni di questi valori di colore cambiando il tag
in questo modo:<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
|
| Questo portera' ad uno sfondo nero, un testo giallo pallido, ipertesti blu mare chiaro, e link visitati di colore rosso. |
NOTA: l'ordine degli elementi nel tag <BODY> non contaOra dovresti modificare i tag <BODY> in tutti i tuoi file HTML (farlo e' facile e veloce con il copia&incolla dall'esempio qui sopra).
NOTA: Se vuoi, puoi prima provare un test per vedere se il tuo browser supporta gli sfondi testuali.I colori pieni aggiungono un po' di varieta' alle web page -- ma puoi andare piu' lontano aggiungendo uno sfondo testuale. Usa un piccolo file grafico (GIF o JPEG) ed il programma 'piastrellera'' la web page con copie ripetute dell'immagine. Alcune delle cose che ti devi tenere a mente sono:
<body background="bgfile.gif">dove bgfile.gif e' il nome dell'immagine (questo puo' essere un URL completo o un path relativo -- vedi la lezione 8a).
Piu' sotto, elenchiamo i nomi dei tre file di sfondo. Puoi scaricare ognuno di essi (se non sai come farlo, riferisciti cortesemente alla nostra pagina d'aiuto). Dovresti mettere ciascun file grafico nella tua folder/directory pictures nel tuo web workspace:
<body background="../pictures/paper.gif" text=#CC0000>che ci da' un testo rosso su carta gialla.
NOTA: Molti web browser hanno la capacita' di cambiare i colori predefiniti per il testo -- a volte gli utenti possono aver scelto un set di colori che interferisce con quello che tu hai scelto. Per questo suggeriamo che ogni volta che usi tag di background (colori pieni o file testuali) tu includa i colori "normali" -- nero per il testo, blu per i link, porpora per i link recenti:Se stai cercando alcuni esempi di sfondi con file di testo, vai alla lista di collegamenti di Yahoo<BODY TEXT=#000000 VLINK=#660099 LINK=#0000FF>
<body bgcolor=#FFFFFF>e
<body background="tiles.gif">?
Fortunatamente, ci possiamo fare qualcosa... usare solo i colori esadecimali che sono inclusi nella tavolozza a 216 colori di NetScape. Ti chiederai "cos'é questa qui?" E' un set di 216 colori unici che sono comuni ai sistemi di colore sia di Macintosh che di Windows. In piu' questi colori possono essere visualizzati su praticamente tutti i computer.
Se hai intenzione di scegliere questi colori magici, hai solo bisogno di prendere quelli che sono una tripla combinazione dei seguenti codici di colore: 00 33 66 99 CC FF. Per esempio, questi colori fanno tutti parte di un set di colori cross-platform [indipendente dalla piattaforma]: #FF6600, #00FF66 o #669933.
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML