La volta scorsa abbiamo descritto la struttura generale di un documento html, introducendo le tag <font> e <div>.

Ora cerchiamo di completare la descrizione delle tag che si occupano della formattazione del testo.

La tag <DIV> definisce un blocco al quale si devono assegnare alcune caratteristiche. Nell’esempio della scorsa lezione, il blocco veniva centrato.

Un testo potrebbe essere allineato a sinistra, a destra o giustificato (oltre che centrato). Per allineare il testo in questi modi si deve scrivere:

<div align="left">testo allineato a sinistra</div>

<div align="right">testo allineato a destra</div>

<div align="justify">testo giustificato</div>
La stessa funzione può essere fatta dalla tag <p> che contrassegna un paragrafo. In questo caso l’unica differenza sta nel fatto che al termine del paragrafo (</p>) viene saltata una riga.

I vecchi browser non giustificano il testo.

Si faccia attenzione che, quando si scrive un testo, questo non viene visualizzato come viene scritto. Il browser riformatta tutto il testo adattandolo alla dimensione dello schermo. Verranno ignorati anche i ritorni a capo. Per obbligare il testo a tornare a capo si deve usare la tag <br> oppure usare la tag <p> per contrassegnare un paragrafo.

Ad esempio, apriamo la finestra HTML di Dreamweaver e scriviamo (dopo il body):

Questa &egrave; una prova
per vedere come viene
formattato un testo dal browser.
Chiudiamo la finestra HTML e vediamo sulla finestra dell’editor il risultato:

Questa è una prova per vedere come viene formattato un testo dal browser.

Tutti i ritorni a capo e gli spazi supplementari sono spariti.

Riapriamo la finestra HTML e aggiungiamo un <br> alla fine di ogni riga:

Questa &egrave; una prova<br>
per vedere come viene<br>
formattato un testo dal<br>
browser<br>

Il risultato questa volta è diverso:

Questa è una prova
per vedere come viene
formattato un testo dal
browser
Ritorniamo nella finestra HTML, cancelliamo i <br> appena inseriti (basta premere CTRL Z) e racchiudiamo il testo fra le tag <pre>…</pre>

<pre>
Questa &egrave; una prova
per vedere come viene
formattato un testo dal
browser
</pre>
Ecco il risultato, esattamente come era stato scritto, compresi gli spazi supplementari:
Questa &egrave; una prova
per vedere come viene
formattato un testo dal
browser
La tag <pre> (preformatted text) serve, appunto, per inserire un testo preformattato (magari scritto con un editor di testi) e vederlo esattamente come è stato scritto, senza che il browser si preoccupi di riformattarlo.

Quando si preme il tasto INVIO nella finestra principale di Dreamweaver, vengono scritte le tag:
<p>&nbsp;</p>
cioè un paragrafo composto soltanto da uno spazio non interrompibile.

Se si preferisce usare <br> per andare a capo, bisogna aprire il menù INSERT e cliccare sulla voce Line break. Oppure premere i tasti ALT + B. (si può fare anche con SHIFT+INVIO).

Se si vuole un blocco, in cui siano definiti sia la dimensione dei caratteri sia l’allineamento, può essere utilizzata la tag <Hx> (heading), dove x è un numero compreso fra 1 e 6. <H1> dà luogo al font più grande, <H6> il più piccolo. Per l’allineamento si può aggiungere il parametro align. Ad esempio:
<h1 align="right">Heading 1</h1>
<h3 align="right">Heading 3</h3>
<h6 align="right">Heading 6</h6>
Qui sotto, invece, il risultato, visualizzato in Dreamweaver:


Per inserire un heading con Dreamweaver è sufficiente posizionare il cursore su un qualsiasi carattere di un paragrafo e, nel campo format della finestra delle proprietà, scegliere l’heading desiderato. Da questo si vede una limitazione di Dreamweaver: per assegnare la tag <Hx> richiede che sia stato definito un paragrafo. Se invece non è stato definito alcun paragrafo e per i ritorni a capo è stata utilizzata la tag <br>, l’heading verrà applicato a tutto il testo.

Proviamo a "forzare la mano" a Dreamweaver: apriamo la finestra html e racchiudiamo una o due parole di uno stesso paragrafo fra le tag <H2>…</H2>. Richiudiamo la finestra dell’editor e vediamo il risultato. Le parole racchiuse fra queste tag sono state messe in una sola riga, forzando il ritorno a capo sia prima di <H2> che dopo </H2>., come nella figura seguente:



In pratica gli heading dovrebbero essere utilizzati solo per i titoli dei paragrafi e dei capitoli.

In conclusione, abbiamo visto alcune tag che si applicano ad una parte del testo, altre, invece, che si applicano oppure definiscono un paragrafo.

Riportiamo in seguito una lista di tag che possono essere utilizzate nella formattazione del testo:

Tag	Significato	Come si ottiene con Dreamweaver	Si applica a
<b>…</b>	Bold = grassetto	Si preme il pulsante B sulla barra delle proprietà	Testo selezionato
<i>…</i>	Italic = corsivo	Si preme il pulsante I sulla barra delle proprietà	Testo selezionato
<u>…</u>	Underline = sottolineato	Menù Text -> Style -> underline	Testo selezionato
<s>…</s>	Strikethrough = cancellato	Menù Text.-> Style -> strikethrough	Testo selezionato
<em>…</em>	Emphasis (visualizzato in corsivo)	Menù Text.-> Style -> emphasis	Testo selezionato
<tt>…</tt>	Teletype = telescrivente.(utilizza un font a spaziatura fissa)	Menù Text.-> Style -> teletype	Testo selezionato
<strong>… </strong>	Visualizzato in grassetto	Menù Text.-> Style -> Strong emphasis	Testo selezionato
<blockquote>… </blockquote>	rientro	Menù Text.-> Indent	Paragrafo
<dir>...</dir>	rientro	Non previsto
<sup>...</sup>	esponente	Non previsto
<sub>...</sub>	deponente	Non previsto
<pre>...</pre>	preformattato	Format ->preformatted della finestra delle proprietà	Paragrafo
<center>… </center>	Centra il testo	Non previsto

Alcune tag, per quanto non previste da Dreamweaver, sono poi riconosciute perché il testo viene opportunamente modificato.

Per scaricare questa pagina in formato Word (zip 24kb) clicca qui.