El color html

El color, tamaño y tipo de letra se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes a cada uno de estos parámetros que deseamos definir.

ATRIBUTO FACE EN HTML: este atributo define el tipo de letra para una palabra o párrafos.

De forma general Tendría la forma de: <font face="Tipo letra"></font> :

Código HTML :

Resultado Ejecutado en Un Navegador: Tipo de Letra Arial Tipo de Letra Verdana Tipo de Letra Georgia

ATRIBUTO SIZE EN HTML: Define el Tamaño de texto, títulos o párrafos.

De forma general la sintaxis es la siguiente: <font Size="Tamaño de la

de

Letra"></font> :

Código HTML:

Resultado Ejecutado en Un Navegador: Tamaño de Letra 8

Tamaño de Letra 15 Tamaño de Letra 11

Y sucesivamente se pueden poner mas Tamaños de letras.

ATRIBUTO COLOR EN HTML: El color de texto puede ser definido por el atributo "color". Cada color es a su ves definido por un numero haxadecimal que esta compuesto a su ves de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión. También se puede colocar un color con su nombre en ingles.

De forma general la sintaxis seria: <font color=" valor en hexadecimal o nombre en ingles"></font> :

Código HTML:

Resultado Ejecutado En Un Navegador: color de Letra en hexadecimal color de Letra con nombre en Ingles Color de Letra en Hexadecimal color de Letra con nombre en Ingles Y sucesivamente se pueden poner mas colores a las letras.

<FONT> formatear el texto Antes de entrar de lleno en los temas relacionados con la formatación del texto, es conveniente precisar algunos de los conceptos que rigen su uso.

Marcas de texto lógicas y tipográficas HTML es un sistema de marcado cuya función es definir la estructura y aspecto de un documento. Debemos profundizar esta definición, que sin más aclaraciones no diría mucho, a fin de comprender mejor los conceptos de marcas lógicas y tipográficas. Una marca tipográfica tiene como función formatear visualmente un documento, es decir aplicarle negritas, cursivas, subrayarlo, etc.

Una marca lógica, por el contrario, tiene como función definir una estructura independientemente del aspecto. Es decir, independientemente del modo en que el navegador interpretará visualmente el marcado.

Para comprender mejor esta diferencia, tomemos dos elementos que sirven para formatear texto: <ADDRESS></ADDRESS> Se trata de una marca lógica que representa la información "dirección" en el documento. Dicho de otro modo, cuando estamos ante una dirección, una dirección de correo electrónido o un número de teléfono, según las reglas del HTML, hay que insertar esta marca lógica. <I></I> Se trata de una marca tipográfica que indica que el texto comprendido en el elemento va en cursiva. Es, por tanto, una marca cuya función es dar un determinado aspecto al documento y no marcar una estructura.

Veamos ahora juntos cuál es el resultado visual de su utilización en el interno

de un documento web: webmaster@html.it webmaster@html.it Sin mirar la fuente del documento, ¿podrías averiguar qué texto ha sido formateado con ADDRESS y cuál con I?. Visualmente ambas marcas (la primera es ADDRESS y la segunda I) producen el mismo resultado (el texto en cursiva). Sin embargo, desde el punto de vista de la estructura del documento, sólo el primero (ADDRESS) indica que dentro hay una dirección, mientras que el segundo no proporciona ninguna información de este tipo.

La marca FONT y el nuevo estándar HTML 4 HTML 4 es el estándar que, desde hace casi dos años, rige las suertes del lenguaje de marcado más popular del mundo. Sin hacer juicios de valor sobre las novedades del nuevo estándar, queremos subrayar que el W3C ha desaconsejado el uso de la marca FONT en la formatación del texto en HTML. Así, los navegadores leen todavía esta marca, pero su uso está rigurosamente prohibido por el nuevo estándar. Según HTML 4, la formatación del texto corresponde exclusivamente a las hojas de estilo.

En esta lección no tendremos en cuenta las indicaciones del W3C y explicaremos el uso de las marcas clásicas del HTML 4. Para profundizar en el tema CSS, puedes consultar la sección Hojas de estilo de este sitio.

Formatear títulos de <H1> ad <H6> La marca <Hn> (donde n puede ser cualquier número comprendido entre 1 y 6) se emplea para definir el estilo de los encabezados de la página, dándoles más o menos relieve según el número correspondiente. Como hemos señalado, los números van del 1 al 6, siendo más importantes los números más bajos que los altos. Visualmente, esta diversa importancia se plasma en la diferente dimensión del texto, como en el siguiente ejemplo: Para un ejemplo práctico, haz clic aquí Además de definir el estilo de los encabezados, la marca <Hn> introduce separaciones de párrafo.

<FONT> La marca tipográfica FONT es una de las más utilizadas y frecuentes en el actual web publishing. En la sección Impostar el fondo del documento (elemento BODY), hemos visto que el atributo TEXT da un color único a todo el texto del documento. La marca FONT tiene, en parte, una función similar, aunque es mucho más amplia y conceptualmente diversa.

La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por

otro lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color.

Aquí tienes la sintaxis correcta de la marca: <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT> El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales).

Para un ejemplo práctico, haz clic aquí

<B>, <I>, <U> <B>, <I>, <U> son tres de las marcas de formatación tipográfica más usadas del HTML. Todas ellas deben constar de apertura y cierre: <B> Texto en negrita </B> El texto comprendido entre estas marcas queda formateado en negrita (la B corresponde al inglés BOLD). <I> Texto en cursiva </I> El texto comprendido entre estas marcas queda formateado en cursiva (la I corresponde al inglés ITALIC) <U> Texto subrayado </U> El texto comprendido entre estas marcas queda subrayado aun sin ser un enlace (la U corresponde al inglés UNDERLINE).

Existe también la marca STRIKE para el texto tachado: <STRIKE> Texto tachado </STRIKE> Para un ejemplo práctico, haz clic aquí

<SUP> y <SUB> Estas dos marcas tipográficas crean respectivamente superíndices(SUP), en los que el texto está en posición ligeramente superior respecto al texto normal, y subíndices (SUB), posición ligeramente inferior respecto al texto normal. Es posible anidar diversas marcas a fin de obtener efectos de superposición sucesiva. Estos elementos se usan, sobre todo, en las notas o en las fórmulas matemáticas.

La sintaxis correcta es: HTMLpoint <SUP>©</SUP> es una marca registrada HTMLpoint <SUB>©</SUB> es una marca registrada Para un ejemplo práctico, haz clic aquí

Texto preformateado

HTML lee el texto, obviamente, de izquierda a derecha y, sin ningún tipo de formatación, cambia de renglón al final de cada línea sin interrupciones. La formatación que examinamos en esta lección indica al navegador dónde saltar de línea, qué tipo de carácter utilizar, qué palabras resaltar, etc. A menudo, sin embargo, hay que importar un documento creado con un editor de texto normal sin formatear, tal y como ha sido creado. Para ello, HTML prevé las marcas de texto preformateado, las cuales no leen ni interpretan algunas marcas de HTML ni los caracteres especiales: <XMP> Texto para formatear </XMP> <PRE> Texto para formatear </PRE> Para un ejemplo práctico, haz clic aquí Ambas marcas tienen la misma función, aunque el estándar de HTML 4 prevé el uso de XMP y no de PRE.

Breve descripción de las marcas lógicas Al inicio de la lección, hemos definido la diferencia entre marcas tipográficas y lógicas. Ahora citamos las marcas lógicas más interesantes y su correspondiente utilización en HTML: <ADDRESS> Se emplea para indicar información relacionada con cualquier tipo de dirección (e-mail, teléfono, etc.). <BLOCKQUOTE> Se usa en las citas textuales que ocupan más de dos o tres líneas. <CITE> Indica la fuente de la cita. <CODE> Se utiliza para formatear líneas de códigos de programación. <DFN> El texto comprendido dentro es una definición. <EM> Da énfasis al texto comprendido dentro. <KBD> y <SAMP> Poco utilizados. Indican cosas que el ordenador debería decir al usuario y viceversa, según un típico concepto de Unix. <STRONG> Denota énfasis fuerte. <VAR> Asociado a CODE, indica las variables de programación.

Lenguaje HTML/Propiedades de Fuentes y Texto < Lenguaje HTML

Notesé que la mayoría de las etiquetas empiezan <?> y tienen la etiqueta que marca el cierre de la misma </?>

Propiedades del Texto[editar] Las propiedades del texto pueden modificarse a través de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta: FACE: fuente. nombre de la fuente, o fuentes COLOR: color del texto. número hexadecimal o texto predefinido SIZE: tamaño del texto. valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor Por ejemplo, para insertar el texto: Bienvenidos a Wikilibros

Habría que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif"> Bienvenidos a Wikilibros</font>

También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>.

La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta .

Por ejemplo: <body> <basefont color="#006699" size="4" face="Arial"> ...

Este código haría que la fuente del documento fuera por defecto de color azul, de tamaño 4 y Arial. Si después de indicar la etiqueta <basefont> o , el navegador encuentra otra etiqueta , la que prevalece es siempre la última que se encuentra.

Resaltado del Texto[editar] <b> negrita negrita <i> cursiva cursiva <u> subrayado subrayado <s> tachado tachado <tt> máquina de escribir máquina de escribir <big> aumenta el tamaño de la fuente aumenta el tamaño de la fuente <small> disminuye el tamaño de la fuente disminuye el tamaño de la fuente Por ejemplo, para insertar el texto:

Atributos del Texto Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que según el visor que este vd. utilizando, verá el resultado correctamente o no.

Atributo

Directiva

Ejemplo

Resultado

Negrita

<B></B>

<B>Texto de prueba</B>

Texto de prueba

Cursiva

<I></I>

<I>Texto de prueba</I>

Texto de prueba

Teletype

<TT></TT>

<TT>Texto de prueba</TT>

Texto de prueba

Subrayado

<U></U>

<U>Texto de prueba</U>

Texto de prueba

Tachado

<S></S>

<S>Texto de prueba</S>

Texto de prueba

Parpadeo

<BLINK></BLINK>

<BLINK>Texto de prueba</BLINK>

Texto de prueba

Superindice <SUP></SUP>

<SUP>Texto de prueba</SUP>

Texto de prueba

Subindice

<SUB></SUB>

<SUB>Texto de prueba</SUB>

Texto de prueba

Centrado

<CENTER></CENTER>

<CENTER>Texto de prueba</CENTER>

Texto de prueba

Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face.

size = valor Da al texto un tamaño en puntos determinado. size = +/- valor Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor. color = "código de color" Escribe el texto en el color cuyo código se especifica. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la página se usara el font predeterminado del navegador.

Ejemplo

Se vería como

<FONT size = +2 color = "#FF0000 face = "Arial"> Texto de prueba </FONT>

Texto de prueba

Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto.

Directiva

Hace lo mismo que

<STRONG></STRONG>

<B></B>

<CITE></CITE>

<I></I>

<STRIKE></STRIKE>

<S></S>

Para incluir comentarios en la página Web se utiliza la directiva <!-- -->.

Ejemplo : <!-- Esto es un comentario sobre mi página Web --> Los comentarios no seran mostrados por el visor y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Asimismo veremos más adelante que la directiva de comentario nos será de utilidad para incluir código JavaScript en nuestra página Web.

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

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 Py 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  

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, onmouseov er, onmousemove, onmouseout, onkeypress, onkeydown onk eyup (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 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



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)



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, onmouseov er, onmousemove, onmouseout, onkeypress, onkeydown, onk eyup (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">

COLORES HTML Los que estรกn en negrita se pueden escribir en lugar de los cรณdigos.

Nombre del color Cรณdigo del color Apariencia White Red Green Blue Magenta Cyan Yellow Black Aqua Baker's Chocolate Blue Violet Brass Bright Gold Brown Bronze Bronze II Cadet Blue Cool Copper Copper Coral Corn Flower Blue Dark Brown Dark Green Dark Green Copper Dark Olive Green Dark Orchid Dark Purple Dark Slate Blue Dark Slate Grey Dark Tan

#FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #00FFFF #FFFF00 #000000 #70DB93 #5C3317 #9F5F9F #B5A642 #D9D919 #A62A2A #8C7853 #A67D3D #5F9F9F #D98719 #B87333 #FF7F00 #42426F #5C4033 #2F4F2F #4A766E #4F4F2F #9932CD #871F78 #6B238E #2F4F4F #97694F

#7093DB Dark Wood #855E42 Dim Grey #545454 Dusty Rose #856363 Feldspar #D19275 Firebrick #8E2323 Forest Green #238E23 Gold #CD7F32 Goldenrod #DBDB70 Gray #C0C0C0 Green Copper #527F76 Green Yellow #93DB70 Hunter Green #215E21 Indian Red #4E2F2F Khaki #9F9F5F Light Blue #C0D9D9 Light Grey #A8A8A8 Light Steel Blue #8F8FBD Light Wood #E9C2A6 Lime #32CD32 Mandarian Orange #E47833 Maroon #8E236B Medium Aquamarine #32CD99 Medium Blue #3232CD Medium Forest Green #6B8E23 Medium Goldenrod #EAEAAE Medium Orchid #9370DB Medium Sea Green #426F42 Medium Slate Blue #7F00FF Medium Spring Green #7FFF00 Medium Turquoise #70DBDB Medium Violet Red #DB7093 Medium Wood #A68064 Midnight Blue #2F2F4F Navy #23238E Neon Blue #4D4DFF Neon Pink #FF6EC7 New Midnight Blue #00009C Dark Turquoise

New Tan Old Gold Orange Orange Red Orchid Pale Green Pink Plum Quartz Rich Blue Salmon Scarlet Sea Green Semi-Sweet Chocolate Sienna Silver Sky Blue Slate Blue Spicy Pink Spring Green Steel Blue Summer Sky Tan Thistle Turquoise Very Dark Brown Very Light Grey Violet Violet Red Wheat Yellow Green

#EBC79E #CFB53B #FF7F00 #FF2400 #DB70DB #8FBC8F #BC8F8F #EAADEA #D9D9F3 #5959AB #6F4242 #8C1717 #238E68 #6B4226 #8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE #00FF7F #236B8E #38B0DE #DB9370 #D8BFD8 #ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299 #D8D8BF #99CC32