15 Allineamento, stili dei caratteri e linee orizzontali
Questa sezione delle specifiche discute alcuni elementi ed attributi dell'HTML che possono
essere usati per la formattazione visuale di elementi. Molti di essi sono
disapprovati.
15.1 Formattazione
Definizioni di attributo
- bgcolor = color [CI]
- Disapprovato. Questo
attributo imposta il colore di sfondo per il corpo del documento o per delle celle
di tabella.
Questo attributo imposta il colore di sfondo dell'area occupata dal corpo del
documento (l'elemento BODY) o da tabelle (gli elementi
TABLE, TR, TH e
TD). Attributi aggiuntivi per specificare il colore del testo possono
essere usati con l'elemento BODY.
Al fine di specificare informazioni sul colore di sfondo, questo attributo è stato disapprovato
in favore dei fogli di stile.
È possibile allineare elementi a livello di blocco (tabelle, immagini, oggetti,
paragrafi, ecc.) nell'area del documento per mezzo dell'attributo align.
Benché questo attributo possa essere impostato per molti elementi HTML, la sua gamma
di possibili valori differisce talvolta da elemento a elemento. In questa sede
viene discusso soltanto il significato dell'attributo align in relazione al testo.
Definizioni di attributo
- align =
left|center|right|justify
[CI]
- Disapprovato.
Questo attributo specifica l'allineamento orizzontale del suo elemento rispetto
al contesto circostante. Possibili valori:
- left: le righe di testo sono riprodotte livellate a sinistra.
- center: le righe di testo sono centrate.
- right: le righe di testo sono riprodotte livellate a destra.
- justify: le righe di testo sono giustificate su entrambi i margini.
Il valore predefinito dipende dalla direzione di base del testo. Per testo da
sinistra a destra, l'impostazione predefinita è align=left, mentre per
testo da destra a sinistra, l'impostazione predefinita è align=right.
ESEMPIO DISAPPROVATO:
Questo esempio centra un'intestazione sulla pagina.
<H1 align="center"> Come intagliare il legno </H1>
Utilizzando i CSS, ad esempio, si potrebbe ottenere il medesimo effetto nel
modo seguente:
<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 così sarebbero centrate tutte le dichiarazioni H1. È possibili ridurre il campo
d'applicazione 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 sulla pagina tramite l'attributo
align
dell'HTML, si potrebbe avere:
<P align="right">...il testo di un paragrafo...
che, con i CSS, diventerebbe:
<HEAD>
<TITLE>Come intagliare il legno</TITLE>
<STYLE type="text/css">
P.miopar {text-align: right}
</STYLE>
<BODY>
<P class="miopar">...il testo di un paragrafo...
ESEMPIO DISAPPROVATO:
Per allineare a destra una serie di paragrafi, li si raggruppi per
mezzo dell'elemento
DIV:
<DIV align="right">
<P>...testo nel primo paragrafo...
<P>...testo nel secondo paragrafo...
<P>...testo nel terzo paragrafo...
</DIV>
Con i CSS, la proprietà di allineamento del testo è ereditata dall'elemento
progenitore; perciò si può usare:
<HEAD>
<TITLE>Come intagliare il legno</TITLE>
<STYLE type="text/css">
DIV.mieipar {text-align: right}
</STYLE>
<BODY>
<DIV class="mieipar">
<P>...testo nel primo paragrafo...
<P>...testo nel secondo paragrafo...
<P>...testo nel terzo paragrafo...
</DIV>
Per centrare l'intero documento con i CSS:
<HEAD>
<TITLE>Come intagliare il legno</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...il corpo del documento è centrato...
</BODY>
L'elemento CENTER è esattamente
equivalente a specificare l'elemento DIV con l'attributo align
impostato su "center". L'elemento CENTER è disapprovato.
Immagini ed oggetti possono apparire direttamente "in riga" o possono essere
fatti fluttuare presso uno dei lati della pagina, alterando temporaneamente i
margini del testo, i quali possono scorrere su entrambi i lati dell'oggetto.
L'attributo
align per oggetti, immagini, tabelle, frame, ecc. fa sì che l'oggetto
fluttui presso il margine sinistro o destro. Gli oggetti fluttuanti solitamente
danno inizio ad una nuova riga. Questo attributo assume i seguenti valori:
- left: L'oggetto fluttua presso il margine sinistro corrente. Il testo
susseguente scorre lungo il lato destro dell'immagine.
- right: L'oggetto fluttua presso il margine destro corrente. Il testo
susseguente scorre lungo il lato sinistro dell'immagine.
ESEMPIO DISAPPROVATO:
L'esempio successivo mostra come far fluttuare un elemento
IMG presso il margine sinistro corrente della pagina.
<IMG align="left" src="http://foo.com/immagine.gif" alt="la mia barca">
Alcuni attributi di allineamento permettono anche il valore "center", che non
produce fluttuazione, ma centra l'oggetto all'interno dei margini correnti. Tuttavia,
nel caso di
P e DIV, il valore "center" fa sì che i contenuti dell'elemento
siano centrati.
Un altro attributo, definito per l'elemento BR, controlla lo
scorrimento del testo intorno ad oggetti fluttuanti.
Definizioni di attributo
- clear =
none|left|right|all
[CI]
- Disapprovato.
Specifica dove dovrebbe apparire la riga successiva in un browser visuale, dopo
l'interruzione di riga causata da questo elemento. Tale attributo prende in
considerazione gli oggetti fluttuanti (immagini, tabelle, ecc.). Valori ammessi:
- none: La riga successiva comincerà normalmente. Questo è il valore
predefinito.
- left: La riga successiva comincerà alla più vicina riga sotto un
oggetto fluttuante presso il margine sinistro.
- right: La riga successiva comincerà alla più vicina riga sotto un
oggetto fluttuante presso il margine destro.
- all: La riga successiva comincerà alla più vicina riga sotto un
oggetto fluttuante presso uno qualsiasi dei due margini.
Si consideri il seguente scenario visivo, nel quale del testo scorre alla destra
di un'immagine, finché una riga non viene interrotta da un BR:
************ -------
| | -------
| immagine | --<BR>
| |
************
Se l'attributo clear è impostato su none, la riga seguente
il BR comincerà immediatamente sotto di esso, presso il margine destro
dell'immagine:
************ -------
| | -------
| immagine | --<BR>
| | ------
************
ESEMPIO DISAPPROVATO:
Se l'attributo clear è impostato su left o
all, la riga successiva apparirà nel modo seguente:
************ -------
| | -------
| immagine | --<BR clear="left">
| |
************
-----------------
Usando i fogli di stile, potreste specificare che tutte le interruzioni di riga
dovrebbero comportarsi in questo modo per oggetti (immagini, tabelle, ecc.) fluttuanti
a contatto del margine sinistro. Con i CSS, potreste ottenere ciò in tal modo:
<STYLE type="text/css">
BR { clear: left }
</STYLE>
Per specificare un simile comportamento in relazione ad una specifica occorrenza
dell'elemento BR,
potreste combinare le informazioni di stile con l'attributo
id:
<HEAD>
...
<STYLE type="text/css">
BR#miobr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
*********** -------
| | -------
| tabella | --<BR id="miobr">
| |
***********
-----------------
...
</BODY>
I successivi elementi HTML specificano informazioni sui caratteri. Benché non
siano tutti disapprovati, il loro uso è
disincentivato in favore dei fogli di stile.
Marcatore iniziale: obbligatorio, Marcatore finale:
obbligatorio
Attributi definiti altrove
-
id, class (identificatori nell'ambito del documento)
- lang (informazioni sulla lingua),
dir (direzione
del testo)
- title (titolo
dell'elemento)
-
style (informazioni
sullo stile in riga)
- onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown onkeyup (eventi intrinseci)
La rappresentazione di elementi di stile dei caratteri dipende dal programma
utente. Quella che segue è una semplice descrizione informativa.
- TT: Riproduce come testo di telescrivente o a spaziatura fissa.
- I: Riproduce come stile corsivo del testo.
- B: Riproduce come stile grassetto del testo.
- BIG: Riproduce il testo con un carattere "grande".
- SMALL: Riproduce il testo con un carattere "piccolo".
- STRIKE e S:
Disapprovato. Riproduce il testo come se fosse cancellato con un frego.
- U:
Disapprovato. Riproduce del testo sottolineato.
La seguente frase mostra diversi tipi di testo:
<P><b>grassetto</b>,
<i>corsivo</i>, <b><i>grassetto corsivo</i></b>, <tt>telescrivente</tt>
e testo <big>grande</big> e <small>piccolo</small>.
Queste parole potrebbero essere riprodotte nel modo seguente:
Usando i fogli di stile, è possibile ottenere una più ricca varietà di effetti sui caratteri.
Per specificare tramite i CSS del testo blu, corsivo in un paragrafo:
<HEAD>
<STYLE type="text/css">
P#miopar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="miopar">...Qui del testo blu in corsivo...
Gli elementi di stile dei caratteri devono essere opportunamente annidati. La
riproduzione di elementi di stile dei caratteri annidati dipende dal programma utente.
FONT e BASEFONT sono disapprovati.
Si veda la DTD transitoria per
la definizione formale.
Definizioni di attributo
- size =
cdata [CN]
- Disapprovato. Questo
attributo imposta la grandezza del carattere. Valori ammessi:
- Un intero da 1 a 7. Ciò imposta il carattere ad una certa grandezza fissa,
la cui riproduzione dipende dal programma utente. Non tutti i programmi utente
sono in grado di riprodurre tutte e sette le dimensioni.
- Un incremento relativo nella dimensione del carattere. Il valore "+1" significa
più grande di una misura. Il valore "-3" significa più piccolo di tre misure. 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 un elenco separato da virgole di nomi di carattere, che il
programma utente dovrebbe ricercare in ordine di preferenza.
Attributi definiti altrove
L'elemento
FONT modifica la grandezza e il colore dei caratteri del testo in esso
contenuto.
L'elemento BASEFONT imposta la grandezza di base del carattere (usando
l'attributo size). Le modifiche nella dimensione dei
caratteri ottenute tramite FONT
sono relative alla dimensione di base del carattere impostata da BASEFONT. Se
BASEFONT non è usato, la dimensione di base predefinita è 3.
ESEMPIO DISAPPROVATO:
L'esempio seguente mostrerà la differenza tra le sette grandezze 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>
Ciò potrebbe essere riprodotto come:
L'esempio seguente mostra l'effetto di grandezze di carattere relative,
usando una misura base del carattere di 3:
La grandezza di base dei caratteri non si applica alle intestazioni, eccetto dove queste sono modificate
usando l'elemento FONT con una variazione relativa della grandezza del carattere.
15.3 Linee: l'elemento
HR
Marcatore iniziale: obbligatorio, Marcatore finale:
proibito
Definizioni di attributo
- align =
left|center|right [CI]
- Disapprovato. Questo
attributo specifica l'allineamento orizzontale della linea rispetto al contesto
circostante. Valori ammessi:
- left: la linea è riprodotta a filo con il margine sinistro.
- center: la linea è centrata.
- right: la linea è riprodotta a filo con il margine destro.
L'impostazione predefinita è align=center.
- noshade [CI]
- Disapprovato. Quando
impostato, questo attributo booleano richiede che il programma utente riproduca
la linea con un colore uniforme piuttosto che come la tradizionale "scanalatura" a due colori.
- size = pixels [CI]
- Disapprovato. Questo
attributo definisce l'altezza della linea. Il valore predefinito di questo attributo
dipende dal programma utente.
- width = length [CI]
- Disapprovato. Questo
attributo definisce la larghezza della linea. Il valore predefinito è 100%, la linea,
cioè, si estende attraverso l'intera area del documento.
Attributi definiti altrove
-
id, class (identificatori nell'ambito 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)
L'elemento
HR genera la riproduzione di una linea orizzontale da parte dei programmi
utente di tipo visuale.
La quantità di spazio verticale, inserito tra una linea ed il contenuto che la
circonda, dipende dal programma utente.
ESEMPIO DISAPPROVATO:
Questo esempio centra le linee, dimensionandole alla metà dello spazio disponibile
tra i margini. La linea superiore ha lo spessore predefinito, mentre le due inferiori
sono impostate a 5 pixel. La linea in basso dovrebbe essere riprodotta con un colore
uniforme senza ombreggiatura:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
Queste linee potrebbero essere riprodotte così:
