Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Html: i colori e gli sfondi

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:

Colori esadecimali
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:

Style paragrafo

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:

Style sfondo

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:

Style sfondo non ripetuto

Diversamente potremo specificare un repeat-y per ottenere il seguente effetto:

Style sfondo ripetuto

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:

Style posizionamento sfondo

Diversamente avremo potuto allinearlo nel vertice basso del paragrafo:

Style posizionamento sfondo

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×