HTML Tutorial

Html: i colori e gli sfondi


Tutti gli esempi proposti fino ad ora 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.

Questo tutorial introdurrà le regole di stile che saranno approfondite nei tutorial successivi 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.

Con i codici esadecimali possiamo scegliere tra una grande vastità di colori.

A questa pagina possiamo consultare l'elenco dei colori HTML con codice esadecimale.

I codici esadecimali dei colori


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:

Contenuto del 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. La sintassi sarà la seguente:

<p style="background-image: url(img/sfondo.jpg)">
    Contenuto del paragrafo…
</p>

Nel nostro caso il codice html sarà il seguente:

<p style="background-image: url(http://www.puntoinformaticofree.it/html_tutorial/resources/sfondo_pagina.jpg)">
    Contenuto del paragrafo… <br>
    Contenuto del paragrafo… <br>
    Contenuto del paragrafo… <br>
</p>

In questo caso, senza specificare ulteriori parametri lo sfondo verrà ripetuto per riempire interamente lo spazio definito dal paragrafo:

Contenuto del paragrafo…
Contenuto del paragrafo…
Contenuto del paragrafo…