15 Allineamento, stili degli insiemi di caratteri, e
separatori orizzontali
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
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.
È 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.
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.
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:
- left: Posiziona l'oggetto sull'attuale margine sinistro. Il
testo che segue si sposta sul lato destro dell'immagine.
- right: Posiziona l'oggetto sull'attuale margine destro. Il
testo che segue si sposta sul lato sinistro dell'immagine.
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.
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>
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.
Tag iniziale: richiesto, Tag finale:
richiesto
Attributi definiti altrove
- id, class (identificatori univoci del
documento)
- lang (informazioni sulla
lingua), dir (direzione del testo)
- title (titolo dell'elemento)
- style (informazioni sullo stile in
linea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown onkeyup (eventi intrinseci)
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:
è 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.
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:
Quanto segue mostra un esempio dell'effetto di dimensionamento relativo di
caratteri usando una base carattere di 3:
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
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
- id, class (identificatori univoci del
documento)
- lang (informazione sulla
lingua), dir (direzione del testo)
- title (elemento titolo)
- style (informazioni sullo stile in
linea)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (eventi intrinseci)
- align (allineamento)
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:
