Contenidos
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
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
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
<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
<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 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
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:
- 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 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
Texto flotante alrededor de un objeto
Otro atributo, definido para el elemento
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
********** ------- | | ------- | imagen | --<BR> | | **********
Si el atributo
********** ------- | | ------- | imagen | --<BR> | | ------ **********
EJEMPLO DESAPROBADO:
Si el atributo
********** ------- | | ------- | 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
<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 -- >
<!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
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.
15.2.2 Elementos de modificación de fuentes: FONT y BASEFONT
Véase el
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
<!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
- 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:
