Html: i colori e gli sfondi
- Gennaio 29, 2013
- by
- Donatantonio
Tutti gli esempi proposti nelle lezioni precedenti, per esigenze puramente didattiche, hanno tenuto poco conto dell’aspetto grafico di una pagina html. Nonostante ciò è impensabile realizzare ipertesti o siti web che non utilizzino colori, immagini o particolari regole di formattazione.
Questa lezione introdurrà le regole di stile che saranno approfondite nelle lezioni successive riguardanti il CSS.
I colori, sul web così come su supporto cartaceo, rivestono un ruolo fondamentale grazie al quale è possibile attirare l’attenzione del lettore e rendere la lettura più confortevole e divertente.
I colori in HTML possono essere specificati o attraverso un nome (red, yellow, green, ecc..), oppure attraverso la notazione esadecimale, 6 cifre precedute dal carattere cancelletto (#).
Scrivere ad esempio:
<body bgcolor="red">
oppure
<body bgcolor="#FF0000">
fa si che il corpo della pagina html, il body appunto, appaia a video con uno sfondo di colore rosso.
Le sei cifre esadecimali corrispondono alla codifica RGB per i colori. Di seguito è proposta una tabella con alcuni dei colori più utilizzati, tenendo comunque presente le milioni di sfumature possibili:
Computer e monitor differenti possono mostrare lo stesso colore in maniera molto differente in relazione a fattori come scheda video e risoluzione dello schermo. Nonostante ciò esistono 216 codici per i colori che sono ritenuti “safe” (sicuri) nel senso che essi sono mostrati nello stesso modo (o quasi) su tutti i computer.
Inoltre nella scelta dei colori è importante tener conto del fattore accessibilità prestando attenzione ad usare combinazioni di colori che siano fruibili anche a chi soffre di daltonismo. Secondo le linee guida indicate dal W3C nella raccomandazione Web Content Accessibility Guidelines (WCAG) 2.0 il colore non deve essere usato come unico mezzo visivo per fornire informazioni, altresì bisogna fornire vie alternative utilizzando combinazioni di stili o visualizzazione di testi.
L’attributo STYLE
I colori sono applicabili non solo allo sfondo della pagina bensì anche ai testo, i bordi e tutti gli elementi html visti fino ad ora sono personalizzabili nel colore.
A tal proposito è necessario innanzitutto introdurre un attributo fondamentale nella definizione dello stile in linea di una pagina html, il cui nome è appunto STYLE.
Più che un attributo, STYLE è da considerarsi come una sorta di contenitore di attributi di stile per un singolo elemento; difatti la sintassi è la seguente:
style=“proprietà1=valore; proprietà2=valore; proprietà3=valore; …”
Un esempio di utilizzo dell’attributo style è il seguente:
<p style='font-size:15px; background-color:#0000FF; color:#FF0000'> Contenuto del paragrafo… </p>
Al paragrafo sono associate le seguenti proprietà:
- font-size : grandezza del carattere
- background-color : colore di sfondo
- color : colore del testo
Il risultato è il seguente:
Applicare immagini di sfondo
Il body, così come paragrafi o div, di una pagina html possono eventualmente contenere anche un’immagine come sfondo.
In questo caso è necessario specificare l’url dell’immagine ed una eventuale posizione che questa deve assumere rispetto al suo contenitore.
Supponiamo di inserire un’immagine di sfondo ad un paragrafo:
<p style="background-image: url(img/sfondo.jpg)"> Contenuto del paragrafo… </p>
In questo caso, senza specificare ulteriori parametri lo sfondo verrà ripetuto per riempire interamente lo spazio definito dal paragrafo:
Tramite la proprietà background-repeat viene definito il modo in cui l’immagine va ripetuta all’interno del blocco. I valori che questo può assumere sono:
- repeat (valore predefinito): l’immagine viene ripetuta orizzontalmente e verticalmente
- repeat-x (l’immagine viene ripetuta solo orizzontalmente)
- repeat-y (l’immagine viene ripetuta solo verticalmente)
- no-repeat (l’immagine non viene ripetuta e si avrà una sola occorrenza della stessa)
Riscrivendo il codice precedente in questo modo:
<p style="background-image: url(img/sfondo.jpg); background-repeat: no-repeat"> Contenuto del paragrafo… </p>
Avremo l’immagine posizionata nell’angolo in alto a sinistra del paragrafo senza che questa venga ripetuta:
Diversamente potremo specificare un repeat-y per ottenere il seguente effetto:
Posizionare le immagini di sfondo
La proprietà background-position permette di specificare in che modo allineare l’immagine di sfondo rispetto al suo contenitore.
La proprietà richiede due valori, il primo per la posizione verticale e la seconda per quella orizzontale.
La sintassi è la seguente:
style=”background-position: verticale orizzontale”
I valori ammissibili per le posizioni verticale/orizzontale sono:
- center/center
- right/bottom
- left/top
Scrivendo ad esempio il seguente codice:
<p style="background-image: url(img/sfondo.jpg);
background-repeat: no-repeat;
background-position: center center">
Contenuto del paragrafo…
</p>
impostiamo uno sfondo che non sia ripetuto ma sia al centro assoluto del paragrafo:
Diversamente avremo potuto allinearlo nel vertice basso del paragrafo:
