Condividi questa pagina su:

altraSoluzione piace a:

Testi e immagini con HTML e CSS

Stampa

HTML e CSS non sono tuoi nemici! Smile

Testi e immagini con HTML e CSSIn 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! Smile

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

In questo articolo:

SuperOfferte del giorno su Amazon

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.

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", è 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

 

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ì:

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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! Smile

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:

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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...

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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:

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

 

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:

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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):

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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:

 

Immagine LogoLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 

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 Smile) 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? Smile

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

Vuoi un libro sull'HTML?
Acquista su Amazon!

Se vuoi chiedere ulteriori spiegazioni, non esitare a farlo lasciando un commento Facebook, oppure contattandomi in privato!

Grazie per avermi letto fin qui! Smile

E non dimenticare di mettere il tuo "Mi piace" qui sotto! Smile

Fabio Donna

Se vuoi, guarda le OFFERTE Amazon di oggi selezionate per te da altraSoluzione!

Se ti è piaciuto questo articolo, non dimenticare di votarlo e di condividerlo. Grazie! Smile

Per non perdere le novità, le offerte e nuovi articoli del Blog di altraSoluzione iscriviti alla Newsletter!

Se hai delle domande o se vuoi esprimere un'opinione, contattami oppure lascia un commento Facebook!

SuperOfferte del giorno su Amazon

OFFERTE Amazon di oggi

(N.B.: i prezzi su Amazon potrebbero variare nel corso della giornata. Verifica sempre prima dell'acquisto.)

Condividi questo articolo su:

Valutazione media: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva