15 Alineación, estilos de fuente y separadores horizontales
Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo[arroba]conclase.net. Gracias por su colaboración.
Véase el Aviso de copyright de la traducción.
Esta sección de la especificación trata sobre algunos elementos y
atributos HTML que pueden utilizarse para el formato visual de elementos.
Muchos de ellos están desaprobados.
Definiciones de atributos
- bgcolor = color [CI]
- Desaprobado. Este
atributo establece el color de fondo del cuerpo del documento o de las celdas
de una tabla.
Este atributo establece el color de fondo del lienzo del cuerpo del documento
(el elemento BODY) o de las tablas (los elementos
TABLE, TR, TH y
TD). Con el elemento BODY pueden utilizarse atributos adicionales
para especificar el color del texto.
Este atributo ha sido desaprobado
en favor de las hojas de estilo para la especificación de información sobre
el color de fondo.
Es posible alinear elementos en bloque (tablas, imágenes, objetos, párrafos,
etc.) en el lienzo con el atributo align. Aunque este atributo
se puede establecer en muchos elementos HTML, su rango de valores posibles
difiere en ocasiones de unos elementos a otros. Aquí sólo se considera el
significado del atributo align para texto.
Definiciones de atributos
- align =
left|center|right|justify
[CI]
- Desaprobado. Este
atributo especifica la alineación horizontal de su elemento con respecto al
contexto circundante. Valores posibles:
- left: las líneas de texto se representan con los bordes izquierdos alineados.
- center: las líneas de texto son centradas.
- right: las líneas de texto se representan con los bordes derechos alineados.
- justify: las líneas de texto se justifican en ambos márgenes.
El valor por defecto depende de la dirección base del texto. Para un texto de
izquierda a derecha el valor por defecto es align=left, mientras que
para un texto de derecha a izquierda el valor por defecto es align=right.
EJEMPLO DESAPROBADO:
Este ejemplo centra un encabezado en el lienzo.
<H1 align="center"> Cómo Tallar la Madera </H1>
Usando CSS, por ejemplo, podríamos conseguir el mismo efecto de la
manera siguiente:
<HEAD>
<TITLE>Cómo Tallar la Madera</TITLE>
<STYLE type="text/css">
H1 { text-align: center}
</STYLE>
<BODY>
<H1> Cómo Tallar la Madera </H1>
Obsérvese que esto centrará todas las declaraciones H1. Podríamos reducir
el alcance del estilo estableciendo el atributo
class del elemento:
<HEAD>
<TITLE>Cómo Tallar la Madera</TITLE>
<STYLE type="text/css">
H1.madera {text-align: center}
</STYLE>
<BODY>
<H1 class="madera"> Cómo Tallar la Madera </H1>
EJEMPLO DESAPROBADO:
Análogamente, para alinear a la derecha un párrafo en el lienzo con
el atributo de HTML align podríamos tener:
<P align="right">...Montones de párrafos de texto...
lo cual, con CSS, se convertiría en:
<HEAD>
<TITLE>Cómo Tallar la Madera</TITLE>
<STYLE type="text/css">
P.mipar {text-align: right}
</STYLE>
<BODY>
<P class="mipar">...Montones de párrafos de texto...
EJEMPLO DESAPROBADO:
Para alinear a la derecha una serie de párrafos, los agrupamos con
el elemento
DIV:
<DIV align="right">
<P>...texto del primer párrafo...
<P>...texto del segundo párrafo...
<P>...texto del tercer párrafo...
</DIV>
Con CSS, la propiedad text-align se hereda del elemento padre a los
hijos, y por tanto podemos decir:
<HEAD>
<TITLE>Cómo Tallar la Madera</TITLE>
<STYLE type="text/css">
DIV.parrafos {text-align: right}
</STYLE>
<BODY>
<DIV class="parrafos">
<P>...texto del primer párrafo...
<P>...texto del segundo párrafo...
<P>...texto del tercer párrafo...
</DIV>
Para centrar el documento completo con CSS:
<HEAD>
<TITLE>Como Tallar la Madera</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE>
<BODY>
...el cuerpo está centrado...
</BODY>
El elemento CENTER
es exactamente equivalente a especificar el elemento DIV con el atributo align
igual a "center". El elemento CENTER está desaprobado.
Las imágenes y los objetos pueden aparecer directamente "en línea" o pueden
hacerse "flotar" a un lado de la página, alterando temporalmente los márgenes
del texto, que puede fluir por los lados del objeto.
El atributo
align aplicado a objetos, imágenes, tablas, marcos, etc., hace que
el objeto flote hasta el margen izquierdo o derecho. Los objetos flotantes
en general comienzan una nueva línea. Este atributo acepta los siguiente
valores:
- left: Hace flotar al objeto hasta el margen izquierdo actual. El
texto subsiguiente fluye alrededor del borde derecho del objeto.
- right: Hace flotar al objeto hasta el margen derecho actual. El
texto subsiguiente fluye alrededor del borde izquierdo del objeto.
EJEMPLO DESAPROBADO:
El siguiente ejemplo muestra cómo hacer flotar un elemento
IMG hasta el margen izquierdo actual del lienzo.
<IMG align="left" src="http://blabla.com/unaimagen.gif" alt="mi barca">
Algunos atributos de alineación también permiten el valor "center",
que no hace que el objeto flote, sino que lo centra con respecto a los
márgenes actuales. Sin embargo, para
P y DIV, el valor "center" hace que los contenidos del
elemento estén centrados.
Otro atributo, definido para el elemento BR, controla el
flujo del texto alrededor de objetos flotantes.
Definiciones de atributos
- clear =
none|left|right|all
[CI]
- Desaprobado.
Especifica dónde debería aparecer la línea siguiente en un navegador visual
después del salto de línea provocado por este elemento. Este atributo tiene
en cuenta los objetos flotantes (imágenes, tablas, etc.). Valores posibles:
- none: La siguiente línea empezará normalmente. Este es
el valor por defecto.
- left: La siguiente línea comenzará en la primera línea
que quede por debajo de los objetos que estén flotando en el margen izquierdo.
- right: La siguiente línea comenzará en la primera línea
que quede por debajo de los objetos que estén flotando en el margen derecho.
- all: La siguiente línea comenzará en la primera línea que quede
por debajo de los objetos que estén flotando en cualquiera de los dos márgenes.
Consideremos el siguiente escenario visual, en el cual el texto fluye por
la derecha de una imagen hasta que la línea se rompe con un
BR:
********** -------
| | -------
| imagen | --<BR>
| |
**********
Si el atributo clear se hace igual a none, la línea
que siga al BR comenzará inmediatamente debajo de él en el margen derecho
de la tabla:
********** -------
| | -------
| imagen | --<BR>
| | ------
**********
EJEMPLO DESAPROBADO:
Si el atributo clear se hace igual a left o
all, la siguiente línea aparecerá como se muestra a continuación:
********** -------
| | -------
| imagen | --<BR clear="left">
| |
**********
-----------------
Usando hojas de estilo, podríamos especificar que todos los saltos
de línea deberían comportarse de esta manera para los objetos (imágenes,
tablas, etc.) que estuvieran flotando en el margen izquierdo. Con CSS
podríamos conseguirlo de esta manera:
<STYLE type="text/css">
BR { clear: left }
</STYLE>
Para especificar este comportamiento para un elemento BR
específico, podríamos combinar la información de estilo y el atributo
id:
<HEAD>
...
<STYLE type="text/css">
BR#mibr { clear: left }
</STYLE>
</HEAD>
<BODY>
<P>...
********* -------
| | -------
| tabla | --<BR id="mibr">
| |
*********
-----------------
...
</BODY>
Los siguientes elementos HTML especifican información de fuentes.
Aunque no todos están desaprobados,
se desaconseja su uso en favor de las hojas de estilo.
Etiqueta inicial: obligatoria, Etiqueta final:
obligatoria
Atributos definidos en otros lugares
-
id, class (identificadores a nivel de documento)
- lang (información sobre el lenguaje),
dir (dirección
del texto)
- title (título
del elemento)
-
style (información
de estilo en línea)
- onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown onkeyup (eventos intrínsecos)
La representación de elementos de estilo de fuente depende del agente
de usuario. Lo que sigue es solamente una descripción informativa.
- TT: Representa como texto de teletipo o ancho fijo.
- I: Representa como estilo de texto itálica.
- B: Representa como estilo de texto negrita.
- BIG: Representa el texto con una fuente "grande".
- SMALL: Representa el texto con una fuente "pequeña".
- STRIKE y S:
Desaprobados. Representan texto de estilo tachado.
- U:
Desaprobado. Representa texto subrayado.
La siguiente frase muestra varios tipos de texto:
<P><b>negrita</b>,
<i>itálica</i>, <b><i>negrita itálica</i></b>, <tt>texto de teletipo</tt>, y texto
<big>grande</big> y <small>pequeño</small>.
Estas palabras podrían ser representadas como se muestra a continuación:
Es posible lograr una variedad mucho mayor de efectos de fuentes usando
hojas de estilo. Para especificar texto azul en itálica en un párrafo con CSS:
<HEAD>
<STYLE type="text/css">
P#mipar {font-style: italic; color: blue}
</STYLE>
</HEAD>
<P id="mipar">...Montones de texto azul en itálica...
Los elementos de estilo de fuente deben ser anidados correctamente. La
representación de elementos de estilo de fuente anidados depende del agente
de usuario.
FONT y BASEFONT están desaprobados.
Véase el DTD Transicional para
la definición formal.
Definiciones de atributos
- size =
cdata [CN]
- Desaprobado. Este
atributo especifica el tamaño de la fuente. Valores posibles:
- Un entero entre 1 y 7. Esto establece la fuente en algún tamaño fijo,
cuya representación depende del agente de usuario. No todos los agentes
de usuario pueden representar los siete tamaños.
- Un incremento relativo del tamaño de la fuente. El valor "+1" significa
un tamaño más grande. El valor "-3" significa tres tamaños menor. Todos los
tamaños pertenecen a la escala de 1 a 7.
- color = color [CI]
- Desaprobado. Este
atributo especifica el color del texto.
- face = cdata [CI]
- Desaprobado. Este
atributo define una lista de nombres de fuentes separados por comas que el
agente de usuario debería buscar en orden de preferencia.
Atributos definidos en otros lugares
El elemento
FONT cambia el tamaño y color de la fuente para el texto de sus contenidos.
El elemento BASEFONT establece el tamaño base de fuente (usando el atributo size). Los cambios del tamaño de la fuente producidos con FONT
son relativos al tamaño base de fuente establecido por BASEFONT. Si no se usa
BASEFONT, el tamaño base de fuente es 3.
EJEMPLO DESAPROBADO:
El siguiente ejemplo mostrará la diferencia entre los siete tamaños de fuente
disponibles 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>
Esto podría representarse así:
A continuación mostramos un ejemplo del efecto de los tamaños
de fuente relativos usando un tamaño base de fuente 3:
El tamaño base de fuente no se aplica a los encabezados, excepto cuando
éstos sean modificados por medio del elemento FONT con cambios de tamaño de fuente relativos.
15.3 Separadores: el elemento
HR
Etiqueta inicial: obligatoria, Etiqueta final:
prohibida
Definiciones de atributos
- align =
left|center|right [CI]
- Desaprobado. Este
atributo especifica la alineación horizontal del separador con respecto al
contexto circundante. Valores posibles:
- left: el separador se representa alineado a la izquierda.
- center: el separador se representa centrado.
- right: el separador se representa alineado a la derecha.
El valor por defecto es align=center.
- noshade [CI]
- Desaprobado. Si
se establece, este atributo booleano pide al agente de usuario que represente
el separador con un color sólido en lugar del "relieve" tradicional de dos colores.
- size = píxeles [CI]
- Desaprobado. Este
atributo especifica la altura del separador. El valor por defecto de este
atributo depende del agente de usuario.
- width = longitud [CI]
- Desaprobado. Este
atributo especifica la anchura del separador. El valor por defecto es del 100%,
es decir, el separador se extiende por todo el ancho del lienzo.
Atributos definidos en otros lugares
-
id, class (identificadores a nivel de documento)
- lang (información sobre el idioma),
dir (dirección
del texto)
- title (título
del elemento)
-
style (información
de estilo en línea)
- onclick, ondblclick,
onmousedown, onmouseup,
onmouseover, onmousemove,
onmouseout, onkeypress,
onkeydown, onkeyup (eventos intrínsecos)
El elemento
HR hace que el agente de usuario represente una línea separadora
horizontal.
La cantidad de espacio vertical insertado entre el separador y el contenido
que le rodea depende del agente de usario.
EJEMPLO DESAPROBADO:
Este ejemplo centra los separadores, dándoles un tamaño igual a la mitad de la
anchura disponible entre márgenes. El separador superior tiene el tamaño por
defecto, mientras que los dos inferiores son de 5 píxeles. El separador inferior
debería representarse con un color sólido sin efecto de relieve:
<HR width="50%" align="center">
<HR size="5" width="50%" align="center">
<HR noshade size="5" width="50%" align="center">
Estos separadores podrían representarse como sigue:
