TEMA 6 Dando formato al texto sin hojas de estilo (deprecated)

INTRODUCCIÓN

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 BODY

Los 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.

<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&eacute;n hemos cambiado el color
del texto y lo de los <a href=”#”>enlaces</a> Pulsa sobre el enlace para ver c&oacute;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.

Ver resultado

MARGENES

Con 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

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

Ver resultado

ALINEACIÓN

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

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

Ver resultado

COLOR E IMÁGENES DE FONDO

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.

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

<table  background="nubes.jpg">
<tr>
<td   background="sol.jpg"></td>
<td></td>
<tr>
<tr>
<td   bgcolor="#ffffff"></td>
<td></td>
<tr>
</table>

CONTROLANDO LAS FUENTES

Nunca he entendido porqué le llaman “fuentes” al tipo de letra, pero en fin eso es lo que es Smile

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.

<font face="Verdana, helvetica, sans serif"></font>
<font size="12"></font>
<font color="blue"></font>

Ahora todo junto

<font face="Verdana, helvetica, sans serif" size="12" color="blue"></font>

Tema 5 –  Indice –  Tema 7

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s