Corso HTML e CSS (Lezione 6)

Impariamo a costruire un sito Web

Lezione 6: I tag del <body> : Tag di formattazione.

La seconda categoria di tag che descriveremo è quella dei tag di formattazione.

Vengono usati per formattare testo e paragrafi.

L’elenco dei tag che abbiamo incluso in questo raggruppamento sono:

<acronym> Definisce un acronimo
<abbr> Definisce un’abbreviazione
<address> Fornisce informazioni sull’indirizzo dell’autore del documento
<b> Il testo che segue questo tag sarà in grassetto
<bdo> Definisce una nuova direzione del testo (sin-dx oppure dx-sin)
<big> Definisce testo di più grandi dimensioni
<blockquote> Definisce un blocco di testo rientrato e spaziato
<center> Deprecated. Testo centrato
<cite> Definisce una citazione =italico
<code> Definisce del codice di programmazione
<del> Definisce del testo cancellato dal documento
<dfn> Specifica la definizione di una parola o di un testo
<em> Definisce del testo enfatizzato = italico
<font> Deprecated. Definisce font, colore, e grandezza del testo
<i> Definisce testo in italico
<ins> Definisce del testo che è stat inserito in un documento
<kbd> Definisce un testo che deve essere digitato a tastiera
<pre> Definisce un testo preformattato
<q> Definisce un testo virgolettato
<s> Deprecated. Definisce un testo cancellato = <del>
<samp> Definisce un testo campione (font a spaziatura costante)
<small> Definisce un testo più piccolo
<strike> Deprecated. Definisce un testo cancellato
<strong> Il testo che segue questo tag sarà in grassetto = <b>
<sub> Definisce un testo come pedice
<sup> Definisce un testo come esponente
<tt> Definisce un testo con font a spaziatura costante
<u> Deprecated. Definisce un testo sottolieato
<var> Definisce una variabile
<xmp> Deprecated. Definisce un testo preformattato

Innanzitutto diciamo subito che molti di questi tag hanno veramente un uso limitato se non nullo in quanto la formattazione del testo da quando sono apparsi i fogli di stile viene affidata appunto ai CSS.

In particolare ve ne sono alcuni definiti dall’ organismo internazionale W3C come deprecated e quindi non vanno più usati perché sostituiti da altri tag. Li abbiamo indicati per completezza, ma non li esamineremo nel dettaglio.

Un’altra considerazione di carattere generale che va fatta è che tutti questi tag reggono una serie di attributi tra cui segnaliamo:

  • title – usato per generare un call-out (quel fumetto che appare in piccolo pop-up quando si passa il mouse sopra un elemento della pagina);
  • lang – usato per dire al browser la lingua del testo racchiuso tra quei tag. E’ solo un’informazione per il browser e non ha alcun effetto per l’utente che visualizza la pagina;
  • dir – per dire al browser che la direzione del testo è modificata per il testo all’interno del tag, da sinistra verso destra (ltr) o da destra verso sinistra (rtl)
  • style – per definire uno stile di formattazione del testo direttamente a livello tag senza usare i fogli di stile CSS, ma questo lo vedremo in seguito

Vediamo quindi in particolare i tag ancora accettati con un esempio di utilizzo.

1) <acronym> … </acronym>

Questo tag può essere usato per definire un acronimo. Non ha alcun effetto sulla formattazione del testo e l’acronimo scritto tra i due tag verrà riportato a video dai browser come un semplice testo. Vi è tuttavia un motivo per giustificare il suo utilizzo. In questo modo infatti si da informazione ai browser, ma soprattutto ai sistemi automatici di traduzione e ai motori di ricerca che la parola è un acronimo. Ricordiamo inoltre che <acronym>, come tutti gli altri tag di questo gruppo, può reggere l’attributo title col quale si mostra quando il mouse è posizionato sull’acronimo, il termine od i termini di cui la parola è l’acronimo.

Nel caso che la lingua dell’acronimo sia differente da quella del sito si può anche indicare l’attributo lang per specificare la lingua dell’acronimo. Es. lang=”en”

Quindi se per esempio scriviamo:

<p>Vogliamo costruire una pagina <acronym title=”Hyper Text Markup Language”>HTML</acronym></p>

il browser mostrerà:

acronym

 

2) <abbr> … </abbr>

Questo tag può essere usato per definire un’abbreviazione. L’uso è del tutto uguale ad acronym e quindi rimandiamo al punto precedente per la spiegazione; basta sostituire la parola acronym con abbr e acronimo con abbreviazione.

Un esempio può essere:

<p><abbr title=”Mister” lang=”en”>Mr.</abbr> Brown è tornato in Inghilterra.</p>

e a video sarà mostrato:

 

3) <address> … </address>

Il tag address è stato concepito per includere le informazioni di contatto dell’autore. Qualora si volessero scrivere sul sito (magari nel caso di una società può aver più senso) queste informazioni si possono racchiudere tra i tag <address> e </address> e il browser le mostrerà normalmente in corsivo. Non tutti i browser però si comportano nello stesso modo soprattutto le versioni più vecchie.

Vediamo un esempio. Se scriviamo:

<address>
Scritto da Pinco Pallino<br />
<a href=”mailto:info@pincopallino.com”>Scrivici</a><br />
Indirizzo: Via Col Vento, 99 – Tara<br />
Tel.: 12 34 56 78 90
</address>

il browser mostrerà:

Scritto da Pinco Pallino
Scrivici
Indirizzo: Via Col Vento, 99 – Tara
Tel.: 12 34 56 78 90

 Il tag <a> con l’attributo href non è ancora stato spiegato. Per ora sappiate che serve per inserire un link ad un certo indirizzo.

 

4) <b> … </b>
<strong> … </strong>

Questi tag li trattiamo insieme perché sono assolutamente equivalenti. <b> sta per bold (grassetto), mentre <strong> come dice la parola vuole indicare un testo evidenziato (strong text). Ma l’effetto è identico; entrambi vengono tradotti dai browsers come grassetto.

Ecco un esempio di utilizzo di questi tag. se scriviamo:

<b>Testo in grassetto</b><br />
<strong>Strong text</strong>

il risultato sarà:

Testo in grassetto
Strong text

 

5) <bdo> … </bdo>

<bdo> sta per  Bi-Directional Override. E’ un tag totalmente inutile nella nostra realtà in quanto serve per definire una nuova direzione  del testo. Le due direzioni sono specificate con l’attributo dir ed i valori rtl (right to left) e ltr (left to right). Immaginiamo per avventura che stiate scrivendo da sinistra verso destra 🙂 come in genere si usa per le lingue europee ed improvvisamente vogliate inserire una frase in arabo potrete scrivere:

<bdo dir=”rtl”>Testo in Arabo</bdo>

e il risultato a video sarebbe:

obarA ni otseT

 

6) <big> … </big>

Tra questi due tag si metterà del testo che verrà visualizzato in dimensioni maggiori. Come vedremo in seguito il controllo di tutti i parametri di formattazione del testo è bene sia fatto usando i fogli di stile, per cui anche questo tag risulterà alquanto inutile. Comunque per completezza potete vedere l’effetto di questo tag nell’esempio che segue:

<big>Testo di dimensioni maggiori</big>

riprodotto dal browser come segue:

Testo di dimensioni maggiori

 

7) <blockquote> … </blockquote>

Con questo tag si può isolare un blocco di testo che si vuole staccare dal resto. Il browser presenterà a video questo blocco di testo rientrato rispetto ai margini del resto del paragrafo aggiungendo inoltre una spaziatura di una riga prima e dopo il blocco.

Facciamo un esempio. Se scriviamo:

<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
<blockquote> Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</blockquote>
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti…</p>

A video verrà visualizzato dal browser:

 

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti…

 

8) <cite> … </cite>
<em> … </em>
<i> … </i>
<dfn> … </dfn>
<var> … </var>

Trattiamo questi tag tutti insieme perché, pur avendo un significato differente per il browser (<cite> va usato per le citazioni, <em> per testo enfatizzato, <dfn> per le definizioni, <i> per scrivere in italico e <var> per identificare una variabile) hanno tutti lo stesso effetto per chi vede la pagina web e cioè il browser mostrerà in tutti i casi testo in italico. Quindi a meno che per qualche oscuro motivo non vogliate comunicare al browser che state facendo una citazione oppure che volete enfatizzare una certa parte del testo ecc., potete semplicemente usare il tag <i>.

Vediamo un esempio con tre di questi tag (tanto il risultato a video è sempre lo stesso):

<cite>Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa.</cite><br />
<em>Che bella citazione!</em><br />
<i>Albert Einstein</i>

Il risultato a video sarà:

Tutti sanno che una cosa è impossibile da realizzare, finché arriva uno sprovveduto che non lo sa e la inventa.
Che bella citazione!
Albert Einstein

 Qualora si volesse differenziare il modo di presentare a video la citazione piuttosto che il commento o l’autore si dovrà ricorrere ai fogli di stile, che sono comunque sempre consigliabili.

 

9) <code> … </code>
<kbd> … </kbd>
<samp> … </samp>
<tt> … </tt>

Questi tag sono usati per racchiudere del codice di programmazione (<code>) o un testo digitato a tastiera (<kbd>) o un camione di testo output di un programma (<samp>) od infine un testo tipo telescrivente (<tt> = teletype). L’unico effetto che hanno è quello di presentare a video questo testo con un font a larghezza fissa anziché col font di default.

Esempio:

<p>Quello che segue è una parte di codice <br /><code>_gaq.push([‘_trackPageview’]);</code></p>

A video il browser presenterà:

Quello che segue è una parte di codice
_gaq.push(['_trackPageview']);

 Analogamente per <kbd> e <samp> e <tt>.

 

10) <del> … </del>

Questo tag viene usato per racchiudere una parte di testo cancellata che verrà visualizzata a video con i caratteri barrati. Sostituisce il tag <s> adesso deprecato.

Esempio:

<p>La prossima frase è stata eliminata dal testo. <del>Questa parte non è più valida</del></p>

A video si vedrà:

La prossima frase è stata eliminata dal testo. Questa parte non è più valida

 

11) <ins> … </ins>

Analogamente a <del>, anche questo tag può essere usato per apportare modifiche ad un documento, mantenendo la visibilità delle modifiche apportate. In questo caso si parla di testo inserito in un documento ed in genere i browsers lo riportano a video sottolineato.

Vediamo un esempio:

<p>Nemo enim ipsam voluptatem<ins>, quia voluptas sit,</ins> aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos…</p>

A video verrà visualizzato:

Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos…

 

12) <pre> … </pre>

Indica un testo pre-formattato. Il testo racchiuso tra questi tag verrà visualizzato a video con un font a larghezza fissa e come particolarità vale la pena sottolineare che eventuali spazi aggiuntivi oltre al primo vengono preservati così come le interruzioni di riga (a capo).

Vediamo un esempio di questo tag. Se scriviamo:

<pre>Questo è un testo
preformattato. Gli spazi bianchi                        vengono preservati
così come i line breaks.</pre>

A video il browser visualizzerà:

Questo è un testo
preformattato. Gli spazi bianchi                        vengono preservati
così come i line breaks.

 

13) <q> … </q>

Questi tag delimitano un testo che il browser visualizzerà virgolettato.

Vediamo un esempio:

<p>Il primo articolo della costituzione italiana dice che <q>L’Italia è una Repubblica democratica, fondata sul lavoro.<br />La sovranità appartiene al popolo, che la esercita nelle forme e nei limiti della Costituzione.</q>

e a video vedremo:

Il primo articolo della costituzione italiana dice che L’Italia è una Repubblica democratica, fondata sul lavoro.
La sovranità appartiene al popolo, che la esercita nelle forme e nei limiti della Costituzione.

 

14) <small> … </small>

Tra questi due tag si metterà del testo che verrà visualizzato in dimensioni più piccole del default. Come vedremo in seguito il controllo di tutti i parametri di formattazione del testo è bene sia fatto usando i fogli di stile, per cui anche questo tag non verrà praticamente mai usato. L’effetto di questo tag comunque lo vedete nell’esempio che segue:

<small>Testo di dimensioni più piccole</small>

riprodotto dal browser come segue:

Testo di dimensioni più piccole

 

15) <sub> … </sub>

Con questo tag (che significa ‘subscript’) si marca una porzione di testo che verrà visualizzato come pedice cioè scritto in piccolo ai piedi del testo che lo precede.

Vediamo un esempio. Se scriviamo:

<p>Un testo visualizzato come <sub>pedice</sub> si ottiene col tag ‘sub'</p>

vedremo a video:

Un testo visualizzato come pedice si ottiene col tag ‘sub’

 

16) <sup> … </sup>

Con questo tag (che significa ‘superscript’) si marca una porzione di testo che verrà visualizzato come esponente cioè scritto in piccolo nella parte superiore del testo che lo precede.

Vediamo un esempio. Se scriviamo:

<p>25 <sup>2</sup> = 625</p>

vedremo a video:

25 2 = 625

Nella prossima lezione vedremo i tag usati per trattare le immagini ed i links.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.