15 Allineamento, stili degli insiemi di caratteri, e separatori orizzontali

Argomenti

  1. Formattazione
    1. Colore dello sfondo
    2. Allineamento
    3. Oggetti posizionabili
  2. Insiemi di caratteri
    1. Elementi di stile degli insiemi dei caratteri: gli elementi TT, I, B, BIG, SMALL, STRIKE, S, e U
    2. Elementi modificatori degli insiemi dei caratteri : FONT e BASEFONT
  3. Separatori: l'elemento HR

Questa sezione delle specifiche esamina alcuni elementi ed attributi HTML che possono essere usati per la foromattazione visuale di elementi. Molti di questi sono disapprovati.

15.1 Formattazione

15.1.1 Colore dello sfondo

Definizioni degli attributi

bgcolor = colore [CI]
Disapprovato. Questo attributo imposta il colore dello sfondo del corpo del documento o delle celle di una tabella.

Questo attributo imposta il colore dello sfondo del corpo del documento (l'elemento BODY) o delle tabelle (gli elementi TABLE, TR, TH, e TD). Attributi aggiuntivi per specificare il colore del testo possono essere utilizzati con l'elemento BODY.

Questo attributo è stato disapprovato in favore dei fogli di stile per la specifica delle informazioni sul colore dello sfondo.

15.1.2 Allineamento

È possibile allineare elementi a livello blocco (tabelle, immagini, oggetti, paragrafi, ecc.) sull'area visibile utilizzando l'attributo align. Sebbene questo attributo sia impostabile per molti elementi HTML, il suo insieme di valori possibili può variare da elemento a elemento. Qui viene trattato solo il valore dell'attributo align relativo al testo.

Definizioni degli attributi

align = left|center|right|justify [CI]
Disapprovato. Questo attributo specifica l'allineamento orizzontale del suo elemento rispetto al contesto circostante. Valori possibili:
  • left: le linee di testo vengono presentate spostate a sinistra.
  • center: le linee di testo vengono centrate.
  • right: le linee di testo vengono presentate spostate a destra.
  • justify: le linee di testo vengono allineate rispetto ad entrambi i margini.

Il valore predefinito dipende dalla direzione del testo di base. Per testo da sinistra a destra, il predefinito è align=left, mentre per testo da destra a sinistra, il predefinito è align=right.

ESEMPIO DISAPPROVATO:
Questo esempio centra una intestazione nell'area visibile.

<H1 align="center"> Come Intagliare il Legno </H1>

Usando CSS, per esempio, si può ottenere lo stesso effetto come segue:

<HEAD>
 <TITLE>Come Intagliare il Legno</TITLE>
 <STYLE type="text/css">
  H1 { text-align: center}
 </STYLE>
<BODY>
 <H1> Come Intagliare il Legno </H1>

Si noti che questo centrerebbe tutte le dichiarazioni H1. Si può ridurre la portata dello stile impostando l'attributo class dell'elemento:

<HEAD>
 <TITLE>Come Intagliare il Legno</TITLE>
 <STYLE type="text/css">
  H1.legno {text-align: center}
 </STYLE>
<BODY>
 <H1 class="legno"> Come Intagliare il Legno </H1>

ESEMPIO DISAPPROVATO:
Similmente, per allineare a destra un paragrafo nell'area visibile con l'attributo HTML align si potrebbe avere:

<P align="right">...Testo del paragrafo...

che, con CSS, diventerebbe:

<HEAD>
 <TITLE>Come Intagliare il Legno</TITLE>
 <STYLE type="text/css">
  P.mioparagrafo {text-align: right}
 </STYLE>
<BODY>
 <P class="mioparagrafo">...Testo del paragrafo...

ESEMPIO DISAPPROVATO:
Per allineare a destra una serie di paragrafi, li si raggruppi con l'elemento DIV:

<DIV align="right">
 <P>...testo del primo paragrafo...
 <P>...testo del secondo paragrafo...
 <P>...testo del terzo paragrafo...
</DIV>

Con CSS, la proprietà di allineamento del testo è ereditata dall'elemento predecessore, perciò si può utilizzare:

<HEAD>
 <TITLE>Come Intagliare il Legno</TITLE>
 <STYLE type="text/css">
  DIV.mieiparagrafi {text-align: right}
 </STYLE>
<BODY>
 <DIV class="mieiparagrafi">
  <P>...testo del primo paragrafo...
  <P>...testo del secondo paragrafo...
  <P>...testo del terzo paragrafo...
 </DIV>

Per centrare l'intero documento con CSS:

<HEAD>
 <TITLE>Come Intagliare il Legno</TITLE>
 <STYLE type="text/css">
  BODY {text-align: center}
 </STYLE>
<BODY>
 ...il corpo è centrato...
</BODY>

L'elemento CENTER equivale esattamente a specificare l'elemento DIV con l'attributo align impostato su "center". L'elemento CENTER è disapprovato.

15.1.3 Oggetti posizionabili

Immagini e oggetti possono apparire direttamente "in linea" oppure possono essere posizionati su di un lato della pagina, con alterazione temporanea dei margini del testo che può fluire su un lato o l'altro dell'oggetto.

Posizionamento di un oggetto 

L'attributo align per oggetti, immagini, tabelle, frame, ecc., causa il posizionamento dell'oggetto sul margine sinistro o destro. Generalmente gli oggetti posizionabili iniziano una riga nuova. Questo attributo prende i seguenti valori:

ESEMPIO DISAPPROVATO:
Il seguente esempio mostra come posizionare un elemento IMG sull'attuale margine sinistro dell'area visualizzabile.

<IMG align="left" src="http://foo.com/animage.gif" alt="la mia barca">

Alcuni attributi di allineamento permettono il valore "center", che non causa spostamento, ma centra l'oggetto rispetto ai margini correnti. Comunque, per P e DIV, il valore "center" causa la centratura del contenuto dell'elemento.

Posizionamento di testo intorno ad un oggetto 

Un'altro attributo, definito per l'elemento BR, controlla l'arrangiamento del testo intorno ad oggetti posizionabili.

Definizioni degli attributi

clear = none|left|right|all [CI]
Disapprovato. Indica dove dovrebbe apparire la riga di testo successiva in un interprete grafico dopo l'interruzione della stessa causata da questo elemento. Questo attributo tiene conto di oggetti posizionabili (immagini, tabelle, ecc.). Valori possibili:
  • none: La linea successiva inizierà normalmente. Questo è il valore predefinito.
  • left: La linea successiva inizierà sulla linea più vicina sotto un qualsiasi oggetto posizionabile sul margine sinistro.
  • right: La linea successiva inizierà sulla linea più vicina sotto un qualsiasi oggetto posizionabile sul margine destro.
  • all: La prossima linea inizierà alla linea più vicina sotto un oggetto posizionabile su un qualsiasi margine.

Si consideri il seguente scenario visivo, dove il testo si posiziona a destra di un'immagine fino a che una riga non è interrotta da un BR:

************  -------
|          |  -------
| immagine |  --<BR>
|          |
************

Se l'attributo clear è impostato su none, la riga successiva a BR inizierà immediatamente sotto ad essa a partire dal margine destro dell'immagine:

************  -------
|          |  -------
| immagine |  --<BR>
|          |  ------
************

ESEMPIO DISAPPROVATO:
Se l'attributo clear è impostato su left o all, la prossima riga apparirà come segue:

************  -------
|          |  -------
| immagine |  --<BR clear="left">
|          |  
************
-----------------

Utilizzando fogli di stile, si può specificare che tutte le interruzioni di riga si comportino in questo modo per oggetti (immagini, tabelle, ecc.) da posizionare contro il margine sinistro. Con CSS, si può ottenere questo come segue:

<STYLE type="text/css">
BR { clear: left }
</STYLE>

Per specificare questo comportamento per una data istanza dell'elemento BR, si può combinare informazione di stile e l'attributo id:

<HEAD>
...
<STYLE type="text/css">
BR#miobreak { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
***********  -------
|         |  -------
| tabella |  --<BR id="miobreak">
|         |  
***********
-----------------
...
</BODY>

15.2 Insiemi di caratteri

I seguenti elementi HTML specificano informazioni sull'insieme di caratteri. Sebbene non siano tutti disapprovati, il loro uso è scoraggiato in favore dei fogli di stile.

15.2.1 Elementi di stile degli insiemi dei caratteri: gli elementi TT, I, B, BIG, SMALL, STRIKE, S, e U

<!ENTITY % fontstyle
 "TT | I | B | BIG | SMALL">
<!ELEMENT (%fontstyle;|%phrase;) - - (%inline;)*>
<!ATTLIST (%fontstyle;|%phrase;)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag iniziale: richiesto, Tag finale: richiesto

Attributi definiti altrove

La visualizzazione degli elementi di stile per i caratteri dipende dall'interprete. La seguente è solo una descrizione informativa.

TT: Presenta come testo di telescrivente o monospaziato.
I: Presenta il testo in stile corsivo.
B: Presenta il testo in stile grassetto.
BIG: Presenta il testo sovradimensionato.
SMALL: Presenta il testo sottodimensionato.
STRIKE e S: Disapprovati. Presentano il testo in stile sbarrato.
U: Disapprovato. Presenta il testo sottolineato.

La frase seguente mostra diversi tipi di testo:

<P><b>bold</b>,
<i>italic</i>, <b><i>bold italic</i></b>, <tt>teletype text</tt>, and
<big>big</big> and <small>small</small>.

Queste parole potrebbero essere visualizzate come segue:

Un esempio di visualizzazione di
vari stili di fonti

è possibile ottenere una ricca varietà di effetti sui caratteri utilizzando i fogli di stile. Per specificare con CSS il testo corsivo di colore blu in un paragrafo:

<HEAD>
<STYLE type="text/css">
P#mioparagrafo {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mioparagrafo">...Testo corsivo blu...

Elementi di stile di caratteri possono essere appropriatamente annidati. La presentazione di elementi di stile per caratteri, annidati, dipende dall'interprete.

15.2.2 Elementi modificatori degli insiemi dei caratteri: FONT e BASEFONT

FONT e BASEFONT sono disapprovati.

Si rimanda alla DTD Transitoria per la definizione formale.

Definizioni degli attributi

size  = cdata [CN]
Disapprovato. Questo attributo imposta la dimensione del carattere. Possibili valori:
  • Un intero da 1 a 7. Questo imposta i caratteri ad una dimensione fissa, la cui presentazione dipende dall'interpete. Non tutti gli interpreti possono presentare tutte e sette le dimensioni.
  • Un incremento relativo della dimensione del carattere. Il valore "+1" significa una misura più grande. Il valore "-3" significa tre misure più piccola. Tutte le misure appartengono alla scala da 1 a 7.
color = color [CI]
Disapprovato. Questo attributo imposta il colore del testo.
face = cdata [CI]
Disapprovato. Questo attributo definisce una lista di nomi di caratteri, separati tra di loro da una virgola, che l'interprete dovrebbe ricercare in ordine di preferenza.

Attributi definiti altrove

L'elemento FONT modifica la dimensione del carattere ed il colore del testo nel suo contenuto.

L'elemento BASEFONT imposta la dimensione di base dei caratteri (usando l'attributo size). Le modifiche di dimensione ottenute con FONT sono relative alla dimensione di base settata da BASEFONT. Se non viene utilizzato BASEFONT, la dimensione di base predefinita è 3.

ESEMPIO DISAPPROVATO:
Il seguente esempio mostra la differenza tra i le sette dimensioni di carattere disponibili con FONT:

<P><font size=1>size=1</font>
<font size=2>size=2</font>
<font size=3>size=3</font>
<font size=4>size=4</font>
<font size=5>size=5</font>
<font size=6>size=6</font>
<font size=7>size=7</font>

Questo potrebbe essere presentato come:

Esempio di visualizzazione di vari
corpi di carattere

Quanto segue mostra un esempio dell'effetto di dimensionamento relativo di caratteri usando una base carattere di 3:

Esempio di visualizzazione di vari
corpi di carattere rispetto a quello di base

La dimensione di base dei caratteri non si applica alle intestazioni, eccetto dove queste sono modificate usando l'elemento FONT con una relativa modifica della dimensione del carattere.

15.3 Separatori: l'elemento HR

<!ELEMENT HR - O EMPTY -- separatore orizzontale -->
<!ATTLIST HR
  %coreattrs;                          -- id, class, style, title --
  %events;
  >

Tag iniziale: richiesto, Tag finale: proibito

Definizioni degli attributi

align = left|center|right [CI]
Disapprovato. Questo attributo specifica l'allienamento orizzontale del separatore rispetto al contesto circostante. Valori possibili:
  • left: il divisore è presentato spostato a sinistra.
  • center: il divisore è centrato.
  • right: il divisore è presentato spostato a destra.

Il valore predefinito è align=center.

noshade [CI]
Disapprovato. Quando impostato, questo attributo booleano richiede che l'interprete presenti il separatore in colori solidi piuttosto che con il tradizionale solco bicolore.
size = pixels [CI]
Disapprovato. Questo attributo specifica l'altezza del separatore. Il valore predefinito dipende dall'interprete.
width = length [CI]
Disapprovato. Questo attributo specifica l'ampiezza del divisore. L'ampiezza predefinita è 100%, cioè, il divisore si estende attraverso l'intera area visibile.

Attributi definiti altrove

L'elemento HR causa la presentazione di un separatore orizzontale da parte dell'interprete.

La quantità di spazio verticale inserito tra un separatore ed il contesto che lo circonda dipende dall'interprete.

ESEMPIO DISAPPROVATO:
Questo esempio centra i separatori, dimensionandoli a metà dell'ampiezza disponibile tra i margini. Il divisore più in alto ha lo spessore predefinito mentre gli ultimi due in basso sono impostati a 5 pixel. L'ultimo divisore dovrebbe essere presentato con colore solido senza l'ombreggiatura:

<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">

Queste righe dovrebbero essere presentate come segue:

Esempio di visualizzazione
di divisori orizzontali