Come inserire del testo in una pagina web con un colore o una immagine di sfondo.

Se si vuole mettere in risalto una parte del nostro articolo ci sono a disposizione i fogli di stile per la creazione di classi personalizzate. In questo blog ne ho create per le citazioni (o blockquote) e per l'inserimento del codice ma lo stesso metodo può essere esteso a una qualsiasi altra cosa. Senza andare a modificare il modello si può inserire direttamente in un articolo una porzione di testo che abbia uno sfondo colorato o anche che abbia una immagine di background. In un precedente post avevo già parlato di come realizzare queste personalizzazioni inserendo il testo un rettangolo utilizzando il tag <div>. Vediamo come possa essere fatto ancora più semplicemente attraverso il tag <font>. Per mettere un colore di sfondo si può usare il codice

<font style="background-color:#FDBCB7; color: #003366; font-weight: bold; font-size: 12;">
Testo da inserire
</font>

In cui possono essere personalizzati i colori dello sfondo (#FDBCB7) e quelli della scritta (#003366) oltre a scegliere la dimensione dei caratteri e immettere il testo da colorare. La cosa interessante di questo metodo è che la colorazione può essere inserita anche in una sola parte di un paragrafo.

In tipografia si usa questa espressione latina lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id nibh libero, eget pretium orci. Duis suscipit pretium tortor, vitae rutrum tortor sodales quis. Nam cursus, enim et fermentum volutpat, enim elit pharetra justo, vitae luctus sapien risus vel enim. Suspendisse rhoncus, dolor tristique egestas eleifend, diam lectus consectetur purus, sit amet cursus massa metus eget augue per testare l'aspetto di un testo inserito in una pagina web.

Questa operazione può però anche essere fatta utilizzando i normali strumenti dell'Editor di Blogger o di Windows Live Writer che sono il colore del testo e l'icona della evidenziazione. Vediamo come sia anche possibile inserire una immagine di sfondo in una particolare zona del testo. Il codice da inserire in Modalità HTML in questo caso è il seguente

<font style="background-image:url('URL IMMAGINE'); color: #191919; font-weight: bold; font-size: 12;">
TESTO DA IMMETTERE
</font>

Le personalizzazioni oltre alla dimensione del font riguardano il colore del testo e l'URL dell'immagine che dovrà essere preventivamente caricata su un hosting quale Picasa o Skydrive. L'immagine si ripeterà in senso orizzontale e in quello verticale se non si inseriscono condizioni aggiuntive che possono essere apprese leggendo questo post. Si tratta in sostanza di inserire l'attributo no-repeat; in background-image.

Ecco come appare una parte di testo in cui è stata inserita questa immagine di sfondo. Uso ancora una volta la stessa espressione latina per i test tipografici stavolta partendo dal secondo paragrafo maecenas cursus condimentum mattis. Vivamus ornare massa eget tortor suscipit interdum. Donec mauris nisl, venenatis quis eleifend at, elementum eu tellus. Ut luctus interdum orci. Vivamus hendrerit feugiat porttitor. Mauris eros mi, faucibus non blandit eu, malesuada sit amet libero. Nulla et lacus nulla. Proin suscipit nibh eu mi rutrum vitae gravida nunc commodo. Vivamus sit amet dolor velit, non euismod sapien. Donec et massa quis dolor consequat vestibulum nec sit amet massa. Curabitur non ornare nisi . L'inserimento del testo con sfondo viene fatto in linea e non in un intero paragrafo come succederebbe se si usassero il tag <div> o quello <p>.