ESTILOS EN HTML

Las hojas de estilo representan un avance con respecto a las convencionales y los diseñadores de páginas Web pueden así aumentar su capacidad de mejorar la apariencia de sus páginas.

Varios ejemplos de estas técnicas son:

Estilos a considerar

Basicamente vamos a ver tres maneras de añadir estilos a nuestras páginas Web.

  1. Añadiendo instrucciones de estilo sólo a comandos concretos, o a un grupo de ellos.
  2. Incluyendo las instrucciones de estilo en el documento HTML de una página concreta, de una manera análoga a cómo se incluye un script de Javascript. Esto permite cambiar la apariencia de una hoja entera, cambiando unas pocas líneas.
  3. Y lo que se viene a llamar HTML Dinámico. Con este sistema un enlace por ejemplo, pasando el puntero por encima de él muestra/oculta una nueva información de dicho enlace.

1-Comandos concretos

Este método es el apropiado si sólo se desea cambiar el estilo en unas secciones determinadas de una página. Con él podemos manipular las propiedades de algun comando o de algún grupo de ellos.
Se hace añadiendo el atributo STYLE, que contiene una serie de propiedades, dentro del comando correspondiente. Veamos un ejemplo.

*Comando P STYLE*

Si escribimos en cualquier lugar del texto:

<P STYLE="margin-left: 0.75in; margin-right: 0.75in; color:blue">
"Este párrafo tendrá un margen izquierdo de 0'75 pulgadas, igual que el margen derecho y el texto será de color azul".

Obtendremos lo siguiente:

"Este párrafo tendrá un margen izquierdo de 0'75 pulgadas, igual que el margen derecho el texto será de color azul".

Curioso no..?
Para cambiar la apariencia de una sección entera (y que agrupe un conjunto de comandos), se puede utilizar el comando <DIV>, que definirá el estilo para esa sección. Por ejemplo si escribimos...

<DIV STYLE="font-size: 16pt; color: red">
<P>La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.
<P>Este texto también es rojo y tiene 16 puntos de altura.
<P>Al igual que esta línea.
</DIV>

Resultaria...

La definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas.

Este texto también es rojo y tiene 16 puntos de altura.

Al igual que esta línea.

Pero podemos hacer esto y cambiar una linea....

<DIV STYLE="font-size: 16pt; color: red"%gt;
<P>
Ahora veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas, hasta la de cierre de DIV.
<P STYLE="color: blue">Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo.
<P>Esta otra cumple con el estilo de DIV, pero sin estilo propio.
</DIV>

Que se vería así...


Ahora veamos si la definición del estilo (rojo y 16 puntos), afecta a todo el bloque de etiquetas, hasta la de cierre de DIV.

Esta línea es azul, a pesar de estar englobada dentro de DIV, porque tiene su propio estilo.

Esta otra cumple con el estilo de DIV, pero sin estilo propio.

Atributos de los Comandos

Ya hemos utilizado algun atributo en los ejemplos anteriores. Estos son los mas usados.

AtributoDescripcionValoresEjemplo
font-sizeTamaño textopuntos(pt)
pulgadas(in)
centimetros(cm)
pixels
font-size: 1'5in
font-familyTipo de FuenteNombre de la Fuentefont-family: curier
colorColor de la letra-----color: red
O usando:
#CCFFEE
margin-left/rightMárgen izq/derechoComo tamaño textomargin-lef: 12pt
backgroundColor fondoEn Hexag.background:
#CCFFEE

Nombre de los Colores

B L A C KG R E YW H I T ER E D
G R E E NY E L L O WB L U EF U C H S I A

HTML Dinámico

Supone convertir un comando que nos proporciona un Enlace de HTML, en objetos programables lo que nos permite poder luego manipularlos.
Si nosotros escribimos...

<A HREF="serv.html">Servicios</a>

Sabemos que al pulsar en "Servicios" iremos a la Web alli indicada por A HREF. Pero podemos hacer que al poner el puntero encima de ese enlace, nos aparezca un cuadro indicandonos que es lo que veremos en esa Web, por ejemplo. Como..?, pues usando los comandos OnMouseOver y OnMouseOut

Escribimos lo siguiente...:

<IMG ID="foto" SRC="cuadro0.bmp" onMouseOver="foto.src='cuadro1.bmp';" onMouseOut="foto.src='cuadro0.bmp';"><a href="serv.html"><img src="blueball.gif" width=20 height=20></a>

al pulsar en la bola azul iremos al Enlace "Servicios" (cuadro0.bmp) y al pasar el puntero por el titulo (esperar unos segundos que lo cargue), se nos abrirá una ventana (estilo1.bmp) explicativa. Veamoslo...

Inclusión de Programas JAVA. Poner la fecha.

El sistema de programación JAVA se sale de lo que se pretende en esta Web, pero voy a poner una instrucción que al abrir el navegador nos mostrará el dia de hoy en pantalla. Evidentemente, lo que hace este programita es buscar esa fecha en el Pc que entre a la Web. Por tanto, si el Reloj de su Pc esta mal, la fecha será erronea.
Basta copiar lo siguiente en el lugar del documento HTML que se desee se vea la fecha. Por supuesto que ésta se podrá poner dentro de una tabla, de colores, etc.

<script language="javascript">
<!--

var nmeses = new Array(13);
nmeses[1] = "Enero";
nmeses[2] = "Febrero";
nmeses[3] = "Marzo";
nmeses[4] = "Abril";
nmeses[5] = "Mayo";
nmeses[6] = "Junio";
nmeses[7] = "Julio";
nmeses[8] = "Agosto";
nmeses[9] = "Septiembre";
nmeses[10] = "Octubre";
nmeses[11] = "Noviembre";
nmeses[12] = "Diciembre";

var dateObj = new Date();
var syear = dateObj.getYear();
var smes = nmeses[dateObj.getMonth() + 1];
var fecha = dateObj.getDate();
var tem = "";
if (syear < 1900)
syear = 1900+ syear;
tem = "<font face='Arial, Helvetica, sans-serif' size='3'>"
tem = tem + fecha + " " + smes + " " + syear + "</font>"
document.write(tem)
// --> </script>

Y con "center" y "/center" al principio y final, se verá lo que sigue incluso desconectado al estar trabajando del reloj interno del Pc.

Y con esto termina esta página.

Un poquito de JAVA

Volver al Inicio de HTML

Volver a la página del BAZAR