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