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@conclase.net. Gracias por su colaboración.

Véase el Aviso de copyright de la traducción.

Contenidos

  1. Formato
    1. Color de fondo
    2. Alineación
    3. Objetos flotantes
  2. Fuentes
    1. Elementos de estilo de fuente: los elementos TT, I, B, BIG, SMALL, STRIKE, S y U
    2. Elementos de modificación de fuentes: FONT y BASEFONT
  3. Separadores: el elemento HR

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.

15.1 Formato

15.1.1 Color de fondo

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.

15.1.2 Alineación

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.

15.1.3 Objetos flotantes

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.

Hacer flotar a un 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:

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.

Texto flotante alrededor de un objeto 

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>

15.2 Fuentes

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.

15.2.1 Elementos de estilo de fuente: los elementos TT, I, B, BIG, SMALL, STRIKE, S y U

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

Etiqueta inicial: obligatoria, Etiqueta final: obligatoria

Atributos definidos en otros lugares

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:

Un ejemplo de la representación de varios estilos de fuente

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.

15.2.2 Elementos de modificación de fuentes: FONT y BASEFONT

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í:

Ejemplo de representación de varios tamaños de fuente

A continuación mostramos un ejemplo del efecto de los tamaños de fuente relativos usando un tamaño base de fuente 3:

Ejemplo de la representación de varios tamaños de fuente con un basefont

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

<!ELEMENT HR - O EMPTY -- separador horizontal -->
<!ATTLIST HR
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

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

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:

Ejemplo de representación de varios separadores horizontales