La W3C recomienda (y nosotros también) utilizar hojas de estilo para todo lo relacionado con la apariencia visual de los documentos html. En las nuevas especificaciones la mayoría de recursos de presentación visual han sido desaprobados.
Sin embargo, es conveniente conocerlos por lo que los vamos a agrupar en este capítulo
ATRIBUTOS DE LA ETIQUETA BODYLos atributos de la etiqueta bodoy nos permiten controlar la apariencia del documento:
bgcolor, background, text, link, vlink y alink. Todos están desaprobados.
Bgcolor: Controla el color de fondo del documento.
Background: Permite utilizar una imagen como fondo del documento. Se suele utilizar con imágenes que se repiten a lo largo y ancho del documento formando un mosaico, por ello se suelen utilizar imágenes muy anchas para que sólo se repitan hacia abajo.
Text: controla el color del texto del documento.
link: establece el color de los enlaces cuando todavía no han sido pulsados.
vlink: determina el color de los enlaces cuando ya han sido visitados.
alink: controla el color de los enlaces en el momento en que pulsan.
Veamos un ejemplo:
NOTA: En este ejemplo hemos quitado el enlace a la DTD de la W3C pues estamos utillizando elementos desaprobados por la W3C.
||
Código: ||
|| <html>
<head>
<title>colores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600">
Este documento utiliza un color de fondo. También hemos cambiado el color
del texto y lo de los <a href="#">enlaces</a> Pulsa sobre el enlace para ver cómo
cambia de <a href="#">color.</a>
</body>
</html> ||
Aquí hemos establecido los colores con sus valores hexadecimales, pero también se pueden poner con el nombre: bgcolor="red".
Aquí tenéis una lista de los valores hexadecimales que corresponden a cada color.
Aquí tenéis una lista de los nombres de los colores.
MARGENESCon lo fácil que resulta definir los márgenes con hojas de estilo, en cambio con HTML es un poco más complicado pues cada marca de navegador tiene sus propias etiquetas, así que para que se vea bien, hay que incluir información sobre los márgenes para cada navegador:
Para explorer: leftmargin: Margen a los lados de la página.
topmargin: Margen superior.
Para Netscape: marginwidth: Margen a los lados de la página.
marginheight: Margen superior
||
Código: ||
|| <body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600" topmargin="50" leftmargin="50" marginheight="50" marginwidth="50" >
<h1>Nuestro formulario</h1>
<p>EN UN LUGAR de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. </P>
<p>Miguel de Cervantes</p> ||
Con el atributo ALIGN, controlamos la alineación de los elementos en que lo utilicemos. Puede utilizarse en: CAPTION, IFRAME, APPLET, IMG, INPUT, OBJECT, LEGEND, TABLE, HR, DIV, H1...H6, P, COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD y TR.
Se puede alinear:
- A la Izquierda: "left". Ejemplo
- A la Derecha: "right". Ejemplo
- Al Centro: "center". Ejemplo
- Justificado en ambos márgenes: "justify". Ejemplo
||
Código: ||
|| <h1 align="center">Nuestro formulario</h1>
<p align="justify">EN UN LUGAR de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, ....</P>
<p align="right">Miguel de Cervantes</p> ||
En realidad ya lo hemos visto en los atributos de la etiqueta body, pero también se lo podemos poner a las tablas. Las tablas las veremos mucho más adelante, así que simplemente quedaros con la copla de que se pueden hacer cosas tan horrorosas como esta.
||
Código: ||
|| <table bgcolor="#FF0000">
<tr>
<td bgcolor="#000000"></td>
<td></td>
</tr>
</table> ||
También podemos poner imágenes de fondo, tal y como vimos para la etiqueta body, también podemos ponerselas a las tablas:
||
Código: ||
|| <table background="nubes.jpg">
<tr>
<td background="sol.jpg"></td>
<td></td>
<tr>
<tr>
<td bgcolor="#ffffff"></td>
<td></td>
<tr>
</table> ||
Nunca he entendido porqué le llaman "fuentes" al tipo de letra, pero en fin eso es lo que es.
Las fuentes se controlan con la etiqueta <FONT> y podría citar cientos artículos hablando sobre los problemas que acarrea esta etiqueta. Si no me hacéis caso en nada más, por favor controlad las fuentes con CSS (cuando aprendáis claro). La etiqueta <FONT> tiene 3 atributos
face: Controlas el tipo de fuente: arial, verdana, times new roman.
size: Controlas el tamaño de la fuente.
color: Controlas el color de la fuente.
Bueno esto de "controlas" es un decir, para que el usuario vea el tipo de fuente que has definido, tiene que tenerla instalada en su sistema. Si no la tiene, verá la que tenga el navegador definida por defecto, normalmente Times New Roman. Por eso se suelen definir tipos alternativos por si las moscas.
|| Código: ||
|| <font face="Verdana, helvetica, sans serif"></font>
<font size="12"></font>
<font color="blue"></font> ||
Ahora todo junto
|| Código: ||
|| <font face="Verdana, helvetica, sans serif" size="12" color="blue"></font> ||
