Testi e immagini con HTML e CSS

In questo articolo troverai piccoli esempi di codici HTML e CSS per inserire e formattare testi e immagini nelle tue pagine HTML, rendendoli un po' più gradevoli.

Non spaventarti, non parleremo di tecniche difficili!

Illustrerò soltanto gli elementi essenziali per la formattazione del testo e delle immagini in una semplice pagina Web.

In questo articolo:

• Come evidenziare il testo
• Come allineare il testo
• Come inserire un'immagine
• Come inserire un link

Come evidenziare il testo

Esistono molti modi per mettere in evidenza un testo utilizzando l'HTML. A parte l'uso dei colori, si possono utilizzare:

• Grassetto
• Corsivo
• Sottolineato

 

Il grassetto

 

Il grassetto si ottiene utilizzando il tag <b> (bold) oppure il tag <strong>.

La differenza tra i due tag è principalmente di "scopo". Anche se dal punto di vista visivo il risultato, di solito, è identico, il tag <b> è solo un tag di formattazione mentre <strong> assegna al termine evidenziato una valenza semantica, un'importanza particolare, tenuta in considerazione dai motori di ricerca ai fini della valutazione della pertinenza.

Quindi, in linea di massima, se vuoi soltanto che un testo appaia in grassetto puoi utilizzare il tag <b> (o i CSS di cui parleremo in seguito) mentre, se vuoi anche che Google lo valuti come "keyword" da associare a quelle principali, è meglio utilizzare <strong>.

In realtà gli standard sono sempre in evoluzione e quel che ho appena scritto non è una certezza assoluta. Ma per il momento trova riscontro nella maggior parte dei casi.

Ovviamente, i rispettivi tag di chiusura sono </b> e </strong>.

Ricapitolando, <b>Testo di esempio</b> produce questo risultato: Testo di esempio; <strong>Testo di esempio</strong> produce un risultato identico esteticamente ma considerato diversamente dai motori di ricerca, cioè questo: Testo di esempio

Ma ricorda sempre che i testi devono essere scritti per chi legge, non per Google!!! Quindi non affannarti a riempire di parole in grassetto i tuoi testi ma usale soltanto per aiutare il lettore nella comprensione del testo.

 

Il corsivo

 

Per il corsivo, analogamente al grassetto, puoi utilizzare sia <i> (italic) che <em> (emphasis).

Ecco i risultati nei due casi:
<i>Testo di esempio</i> = Testo di esempio
<em>Testo di esempio</em> = Testo di esempio

Anche in questo caso il risultato visivo è identico ma c'è una diversa considerazione da parte dei motori di ricerca.

 

Il sottolineato

 

La sottolineatura si ottiene con il tag <u> (underline).

Quindi <u>Testo di esempio</u> produce Testo di esempio, ma possiamo ottenere lo stesso risultato tramite i CSS con la differenza che, in quest'ultimo caso, i motori di ricerca non assegnano una particolare importanza al testo così modificato.

Voglio iniziare a parlare dei CSS facendo l'esempio della sottolineatura:
<span style="text-decoration: underline;">Testo di esempio</span> genera Testo di esempio.

Il tag <span> appena utilizzato, serve a delimitare uno o più oggetti "in linea", consentendo di applicare a questi oggetti degli "stili", tramite il parametro style="proprietà1: valore; proprietà2: valore; ecc...".

Ovviamente si può anche utilizzare un "mix" di questi codici. Per esempio, questo Testo di esempio (grassetto e corsivo) si ottiene con <b><i>Testo di esempio</i></b> che, con i CSS, diventa <span style="font-weight: bold; text-decoration: underline;">Testo di esempio</span>.

Lo so, inizialmente può sembrare un po' complicato, ma oggi non sarebbe serio spiegare l'HTML senza accennare ai CSS, che stanno velocemente sostituendo molte delle tecniche precedentemente utilizzate per modificare l'estetica di una pagina Web, alcune delle quali sono o diventeranno presto obsolete.

Come allineare il testo

Per L'allineamento del testo tralascerò completamente l'ormai obsoleta sintassi HTML (align="left|center|right|justify") a favore dell'utilizzo dei CSS con lo stile text-align.

L'esempio <p style="text-align: center;">Lorem Ipsum ecc...</p>, con cui vogliamo centrare il testo nel paragrafo, appare così:

 

 

Se vogliamo "giustificare" il testo, ottenendo un allineamento su entrambi i lati, utilizzeremo <p style="text-align: justify;">Lorem Ipsum ecc...</p>:

 

 

Ecco come ottenere l'allineamento a sinistra: <p style="text-align: left;">Lorem Ipsum ecc...</p>...

 

 

... e a destra: <p style="text-align: right;">Lorem Ipsum ecc...</p>.

 

 

Come vedi, una volta compreso il "meccanismo", è abbastanza semplice gestire l'allineamento dei testi

Come inserire un'immagine

Non si vive di soli testi!", si potrebbe affermare quando si parla di pagine Web!

Una pagina HTML appare molto più vivace e spesso molto più chiara se s'inseriscono delle immagini, siano esse semplicemente "decorative" oppure utili per spiegare meglio un concetto.

Ecco che diventa necessario l'utilizzo del tag <img ...>.

Immaginiamo di voler inserire il logo di altraSoluzione nel testo "giustificato" utilizzato poco fa e che il file dell'immagine del logo si chiami logo.jpg.

La sintassi per inserire questa immagine è <img src="/percorso/cartella/del/file/logo.jpg" /> (notare che <img ...> è un tag singolo, cioè non richiede il tag di chiusura).

Se vogliamo inserire l'immagine all'inizio del testo, nell'esempio precedente, scriveremo <p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" />Lorem Ipsum ecc...</p> con questo risultato:

 

 

Ma se volessimo far "scorrere" il testo intorno all'immagine? Ecco che ci viene in aiuto un altro stile CSS: float: left|right.

Il codice <p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" style="float: left;" />Lorem Ipsum ecc...</p> ci permette di ottenere questo gradevole risultato...

 

Però non ci piace molto che il testo sia "attaccato" all'immagine e vorremmo che ci fosse un po' di spazio tra le parole e la figura. Per raggiungere questo scopo possiamo utilizzare gli stili margin-top, margin-bottom, margin-left e margin-right nell'immagine, così da lasciare un "margine" sui lati in cui vogliamo lasciare un po' di "aria", in questo modo: <p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" style="float: left; margin-right: 10px; margin-bottom: 10px;" />Lorem Ipsum ecc...</p>.

Ecco il risultato:

 

 

 

Il codice <p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" style="float: right;" />Lorem Ipsum ecc...</p> ci fa ottenere sempre un'immagine "immersa" nel testo, ma allineata a destra:

 

 

Un "tocco di classe" potrebbe essere quello di aggiungere un'ombra all'immagine, per darle un "effetto rilievo". Per ottenere l'ombra utilizzeremo lo stile box-shadow, in questo modo: <p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" style="float: left; margin-right: 10px; margin-bottom: 10px; box-shadow: 3px 3px 5px 0px #838383;" />Lorem Ipsum ecc...</p>:

 

 

In genere è bene utilizzare questi effetti con parsimonia perché se "esagerati" rischiano di essere poco gradevoli da vedere.

Spenderei due parole per spiegare i parametri che ho assegnato allo stile box-shadow:, cioè 3px 3px 5px 0px #838383:

I primi due (3px 3px) esprimono la distanza dell'ombra dall'immagine e possono assumere valori positivi e negativi. Io ho utilizzato il pixel come unità di misura (px) ma, anche se non le spiegherò ora, se ne possono utilizzare anche altre permesse dalla sintassi dei CSS. Con questi valori ho fatto in modo che l'ombra apparisse 3px a destra e sotto l'immagine.

Il terzo parametro (5px) indica il "blur", cioè la "sfocatura" dell'ombra. In mancanza di questo valore l'ombra appare "netta", non sfumata come nel nostro caso.

Il quarto valore (0px), chiamato "spread", ci permetterebbe di "allargare" l'ombra in modo che copra un'aera più vasta. Ma nel nostro caso non ci è utile quindi ho specificato un valore nullo.

Il quinto e ultimo parametro indica il colore dell'ombra e l'ho espresso come triade RGB esadecimale: # è il prefisso obbligatorio per i colori esadecimali, 83 in esadecimale (=131 in decimale), ripetuto tre volte, indica i valori dei colori fondamentali RGB (Red, Green, Blue = rosso, verde, blu).
Tre valori uguali producono un grigio di diversa intensità a seconda dei valori.

Per avere maggiori informazioni sui codici esadecimali t'invito a leggere l'articolo "Bit, Byte, KiloByte, MegaByte, GigaByte, TeraByte: AIUTO!".

Possiamo anche decidere di modificare le dimensioni dell'immagine grazie ai parametri width (larghezza) e height (altezza). Inoltre Google richiede che questi valori siano sempre indicati, anche quando non modificano le dimensioni dell'immagine ma ne riportano semplicemente le dimensioni originali. Ecco come funzionano:

<p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" style="float: left; margin-right: 10px; margin-bottom: 10px; box-shadow: 3px 3px 5px 0px #838383;" width="50" height="50" />Lorem Ipsum ecc...</p> riduce l'immagine a 50x50px (l'originale è 100x100):

 

 

Un altro parametro importante è alt. Questo parametro, che in condizioni normali non produce alcun effetto sull'immagine, indica un breve testo descrittivo dell'immagine, visualizzato al posto dell'immagine sui browser testuali o per i non vedenti. Inoltre Google utilizza questo testo per indicizzare le immagini in base a queste "parole chiave". Quindi è sempre un bene inserire una breve descrizione con il tag alt in questo modo:

<p style="text-align: justify;"><img src="/percorso/cartella/del/file/logo.jpg" style="float: left; margin-right: 10px; margin-bottom: 10px; box-shadow: 3px 3px 5px 0px #838383;" width="50" height="50" alt="Immagine Logo altraSoluzione" />Lorem Ipsum ecc...</p>.

Come puoi vedere il testo specificato tramite il tag alt è invisibile nell'immagine:

 

 

Come inserire un link

Arriviamo così all'ultima parte di questo articolo, nella quale impareremo a inserire un link, cioè un collegamento ipertestuale a un'altra risorsa Web, sia essa un'altra pagina del nostro sito, la pagina di un altro sito, un'immagine, un documento in PDF, ecc... che è anche l'essenza dell'HTML, definito proprio come pagine di ipertesto

Il tag che svolge questo compito è <a> (anchor = ancora... quella "nautica", con l'accento sulla prima "a", non l'avverbio ) e il tag di chiusura ovviamente è </a>.

Il parametro più importante del tag <a> è href che permette di specificare l'URL (Uniform Resource Locator) a cui il link deve "puntare".

Per esempio, nella riga precedente, per inserire il link alla pagina di Wikipedia relativa a Uniform Resource Locator, ho utilizzato la seguente sintassi:

<a href="https://it.wikipedia.org/wiki/Uniform_Resource_Locator" target="_blank">Uniform Resource Locator</a>

href="https://it.wikipedia.org/wiki/Uniform_Resource_Locator" indica la pagina dove il browser deve andare quando si clicca sul link mentre il parametro target="_blank" istruisce il browser per aprire questa pagina in un'altra finestra (o tab) in modo da non far abbandonare al visitatore la pagina e il punto corrente, dove probabilmente vorrà tornare quando chiuderà la nuova finestra (o tab) dopo aver letto la definizione di Uniform Resource Locator.

Semplice no?

Potresti essere interessato a leggere anche l'altro mio articolo Come creare una pagina HTML.

Vuoi un libro sull'HTML?

Grazie per avermi letto fin qui!

Fabio Donna