In questa lezione vedremo come gestire il colore di sfondo di una pagina web. La scelta dei colori è una delle decisioni più importanti da compiere in fase di web-design ed ovviamente, grazie al codice HTML, abbiamo la massima libertà creativa nel definire il colore degli elementi che compongono la nostra pagina.
Tra gli elementi di un documento HTML un posto di primo piano, come abbiamo visto nella precedente lezione, è occupato dal corpo della pagina (il tag <body>) il quale ha il compito di contenere "tutto ciò che è visibile" del nostro documento HTML.
<body>
... CONTENUTO VISIBILE ...<br>
... CONTENUTO VISIBILE ...<br>
... CONTENUTO VISIBILE ...<br>
... CONTENUTO VISIBILE ...
</body>Volendo semplificare possiamo immaginare che il <body> sia la tela sulla quale il pittore realizzerà il suo quadro: il nostro artista potrà quindi decidere di riempire la tela di un colore che farà da sfondo alla sua opera esattamente come il web-designer può decidere di applicare uno sfondo colorato al proprio sito web.
Vediamo, quindi, come personalizzarne il colore di sfondo di una pagina web utilizzando l’attributo bgcolor (che è una palese contrazione dell’espressione anglosassone background color, cioè "colore dello sfondo").
Vediamo un semplice esempio:
<body bgcolor="#FF0000">L’attributo bgcolor di HTML 4, come l’attributo color che vedremo nella lezione relativa alla formattazione del testo, accetta uno dei seguenti tipi di valore:
- colore espresso in notazione esadecimale (come nell’esempio visto sopra);
- colore espresso nel formato RGB;
- colore espresso mediante il suo nome (ad esempio "red" o "yellow").
Per un riferimento completo circa i colori all’interno di una pagina web si dia uno sguardo a questa tabella.
Applicando un colore al tag <body> avremo come effetto la piena colorazione della nostra pagina web ad eccezione, ovviamente, di eventuali elementi della pagina a cui sia stato esplicitamente assegnato un colore differente: si ricordi, infatti, che la nostra pagina web funziona come la "buccia di una cipolla" dove il colore del corpo della pagina è lo strato più profondo, quindi le stratificazioni più superficiali (gli elementi presenti all’interno del corpo della pagina) possono via via nascondere ciò che si trova più sotto presentando colori differenti rispetto a quello dello sfondo.
NOTA: è buona norma applicare sempre un colore di sfondo alle nostre pagine web, anche se vogliamo che questo sia il bianco. In alcuni casi, seppur limitati, può capitare che specifiche impostazioni dei sistemi operativi o dei browser utilizzati da taluni utenti mostrino – in assenza di una specifica direttiva cromatica – colori di sfondo imprevisti.
Colore di sfondo mediante i CSS
Come abbiamo già avuto modo di ricordare, le nuove specifiche del linguaggio HTML (HTML 5) hanno deprecato tutti i tag e gli attributi di "presentazione". Nell’ottica di questa nuova visione, l’attributo bgcolor è stato deprecato nella nuova versione del linguaggio HTML, quindi il suo utilizzo è sconsigliato nello sviluppo di nuovi siti web.
Al fine di ottenere il medesimo risultato sarà sufficiente utilizzare l’attributo style in questo modo:
<body style="background-color: #FF0000">oppure utilizzare un foglio di stile esterno facendo riferimento a ID e classi quali selettori degli elementi di cui s’intende definire l’aspetto.
