Movatterモバイル変換
[0]ホーム
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 laversión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozoarroba conclase punto net. Gracias por su colaboración.
Véase elAviso de copyright de la traducción.
Esta sección de la especificación trata sobre algunos elementos yatributos HTML que pueden utilizarse para el formato visual de elementos.Muchos de ellos estándesaprobados.
Definiciones de atributos
- bgcolor =color[CI]
- Desaprobado. Esteatributo establece el color de fondo del cuerpo del documento o de las celdasde una tabla.
Este atributo establece el color de fondo del lienzo del cuerpo del documento(el elementoBODY) o de las tablas (los elementosTABLE,TR,TH yTD). Con el elementoBODY pueden utilizarse atributos adicionalespara especificar el color del texto.
Este atributo ha sidodesaprobadoen favor de las hojas de estilo para la especificación de información sobreel color de fondo.
Es posible alinear elementos en bloque (tablas, imágenes, objetos, párrafos,etc.) en el lienzo con el atributoalign. Aunque este atributose puede establecer en muchos elementos HTML, su rango de valores posiblesdifiere en ocasiones de unos elementos a otros. Aquí sólo se considera elsignificado del atributoalign para texto.
Definiciones de atributos
- align =left|center|right|justify[CI]
- Desaprobado. Esteatributo especifica la alineación horizontal de su elemento con respecto alcontexto 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 deizquierda a derecha el valor por defecto esalign=left, mientras quepara un texto de derecha a izquierda el valor por defecto esalign=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 lamanera 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 declaracionesH1. Podríamos reducirel alcance del estilo estableciendo el atributoclass del elemento:
<HEAD> <TITLE>Cómo Tallar la Madera</TITLE> <STYLE type="text/css"> H1.madera {text-align: center} </STYLE><BODY> <H1> Cómo Tallar la Madera </H1>EJEMPLO DESAPROBADO:
Análogamente, para alinear a la derecha un párrafo en el lienzo conel atributo de HTMLalign 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>...Montones de párrafos de texto...EJEMPLO DESAPROBADO:
Para alinear a la derecha una serie de párrafos, los agrupamos conel elementoDIV:
<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 loshijos, 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> <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 elementoCENTER es exactamente equivalente a especificar el elementoDIV con el atributoalignigual a "center".El elementoCENTER estádesaprobado.
Las imágenes y los objetos pueden aparecer directamente "en línea" o puedenhacerse "flotar" a un lado de la página, alterando temporalmente los márgenesdel texto, que puede fluir por los lados del objeto.
El atributoalign aplicado a objetos, imágenes, tablas, marcos, etc., hace queel objeto flote hasta el margen izquierdo o derecho. Los objetos flotantesen general comienzan una nueva línea. Este atributo acepta los siguientevalores:
- left: Hace flotar al objeto hasta el margen izquierdo actual. Eltexto subsiguiente fluye alrededor del borde derecho del objeto.
- right: Hace flotar al objeto hasta el margen derecho actual. Eltexto subsiguiente fluye alrededor del borde izquierdo del objeto.
EJEMPLO DESAPROBADO:
El siguiente ejemplo muestra cómo hacer flotar un elementoIMG 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 losmárgenes actuales. Sin embargo, paraP yDIV, el valor "center" hace que los contenidos delelemento estén centrados.
Otro atributo, definido para el elementoBR, controla elflujo 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 visualdespués del salto de línea provocado por este elemento. Este atributo tieneen cuenta los objetos flotantes (imágenes, tablas, etc.). Valores posibles:
- none: La siguiente línea empezará normalmente. Este esel valor por defecto.
- left: La siguiente línea comenzará en la primera líneaque quede por debajo de los objetos que estén flotando en el margen izquierdo.
- right: La siguiente línea comenzará en la primera líneaque 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 quedepor 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 porla derecha de una imagen hasta que la línea se rompe con unBR:
********** -------| | -------| imagen | --<BR>| |**********
Si el atributoclear se hace igual anone, la líneaque siga alBR comenzará inmediatamente debajo de él en el margen derechode la tabla:
********** -------| | -------| imagen | --<BR>| | ------**********
EJEMPLO DESAPROBADO:
Si el atributoclear se hace igual aleft oall, 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 saltosde línea deberían comportarse de esta manera para los objetos (imágenes,tablas, etc.) que estuvieran flotando en el margen izquierdo. Con CSSpodríamos conseguirlo de esta manera:
<STYLE type="text/css">BR { clear: left }</STYLE>Para especificar este comportamiento para un elementoBRespecífico, podríamos combinar la información de estilo y el atributoid:
<HEAD>...<STYLE type="text/css">BR#mibr { clear: left }</STYLE></HEAD><BODY><P>...********* -------| | -------| tabla | --<BR>| | *********-----------------...</BODY>Los siguientes elementos HTML especifican información de fuentes.Aunque no todos estándesaprobados,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óndel texto)
- title (títulodel elemento)
- style (informaciónde estilo en línea)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydownonkeyup (eventos intrínsecos)
La representación de elementos de estilo de fuente depende del agentede 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 yS: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 usandohojas 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>...Montones de texto azul en itálica...Los elementos de estilo de fuente deben ser anidados correctamente. Larepresentación de elementos de estilo de fuente anidados depende del agentede usuario.
FONT yBASEFONT estándesaprobados.
Véase elDTD Transicional parala definición formal.
Definiciones de atributos
- size =cdata[CN]
- Desaprobado. Esteatributo 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 agentesde usuario pueden representar los siete tamaños.
- Un incremento relativo del tamaño de la fuente. El valor "+1" significaun tamaño más grande. El valor "-3" significa tres tamaños menor. Todos lostamaños pertenecen a la escala de 1 a 7.
- color =color[CI]
- Desaprobado. Esteatributo especifica el color del texto.
- face =cdata[CI]
- Desaprobado. Esteatributo define una lista de nombres de fuentes separados por comas que elagente de usuario debería buscar en orden de preferencia.
Atributos definidos en otros lugares
El elementoFONT cambia el tamaño y color de la fuente para el texto de sus contenidos.
El elementoBASEFONT establece el tamaño base de fuente (usando el atributosize). Los cambios del tamaño de la fuente producidos conFONTson relativos al tamaño base de fuente establecido porBASEFONT. Si no se usaBASEFONT, el tamaño base de fuente es 3.
EJEMPLO DESAPROBADO:
El siguiente ejemplo mostrará la diferencia entre los siete tamaños de fuentedisponibles conFONT:
<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ñosde 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 elementoFONT con cambios de tamaño de fuente relativos.
15.3Separadores: el elementoHR
Etiqueta inicial:obligatoria, Etiqueta final:prohibida
Definiciones de atributos
- align =left|center|right[CI]
- Desaprobado. Esteatributo especifica la alineación horizontal del separador con respecto alcontexto 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 esalign=center.
- noshade[CI]
- Desaprobado. Sise establece, este atributo booleano pide al agente de usuario que representeel separador con un color sólido en lugar del "relieve" tradicional de dos colores.
- size =píxeles[CI]
- Desaprobado. Esteatributo especifica la altura del separador. El valor por defecto de esteatributo depende del agente de usuario.
- width =longitud[CI]
- Desaprobado. Esteatributo 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óndel texto)
- title (títulodel elemento)
- style (informaciónde estilo en línea)
- onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup (eventos intrínsecos)
El elementoHR hace que el agente de usuario represente una línea separadorahorizontal.
La cantidad de espacio vertical insertado entre el separador y el contenidoque le rodea depende del agente de usario.
EJEMPLO DESAPROBADO:
Este ejemplo centra los separadores, dándoles un tamaño igual a la mitad de laanchura disponible entre márgenes. El separador superior tiene el tamaño pordefecto, mientras que los dos inferiores son de 5 píxeles. El separador inferiordeberí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:
[8]ページ先頭