CLASE 56 Y 57 SEPARADORES Y MARQUESINAS

Fin en mente: Aplicar en una página web la etiqueta <hr> para separar  bloques y la etiqueta <marquee> para darle movimiento a un texto
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.

La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de una serie de caracteres o parámetros que podemos predefinir. Por ejemplo, podemos definir su grosor mediante el parámetro size.

Para escribir este parámetro en la etiqueta escribiremos “size=x”, siendo “x” el número del grosor de la franja. A continuación te vamos a ofrecer dos ejemplos de franjas con diferentes grosores, siendo la primera 10 y la segunda dos. La diferencia es abismal

<hr size="20" />
<hr size="2"  />

A continuación vamos a escribir una franja de 75% de ancho:   <hr width=75%"/>

Muchos navegadores hacen esta franja con una sombra exterior que transforma la franja en tres dimensiones. Si quieres que la franja sea simple, sin sombrita deberás escribir el parámetro “noshade”.

También podemos predefinir el color que le queremos dar a la franja con el parametro "color". Es muy sencillo. Por ejemplo, si queremos que nuestra franja sea de color rojo sólo debemos ponerle la etiqueta: <hr color="#FF0000"/>.

Por último, puedes hacer que la franja quede alineada a un lado, a otro, o al centro del párrafo mediante el parámetro que ya vimos con anterioridad: “align”. “align = center” para el centro, “align = right” para la derecha y “align = left” para la izquierda.

Como ejemplos finales vamos a hacer dos franjas. La primera va a ser una franja de grosor 3, de un ancho del 50% y alineada al centro.

<hr size=3 width= 50% align=center/>

La siguiente va a ser una franja de grosor  2, de ancho 80%, sin sombra y alineada a la derecha.

<hr size=2 width=80% noshade=“noshade” align= right />

La etiqueta html <marquee> se utiliza para insertar un área de texto en movimiento. También se la conoce como marquesina.

Atributos

El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.
Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.

bgcolor

Establece el color de fondo, puede utilizarse el nombre, o el valor hexadecimal del color.

direction

Establece la dirección en la que el texto contenido se desplazará. Los valores posibles son left (para moverse hacia la izquierda), right (para moverse a la derecha), up (hacia arriba) y down (hacia abajo). Si no se especifica este atributo, por defecto será left.

height

Establece la altura de la etiqueta en pixeles, o en un valor porcentual.

hspace

Establece el margen horizontal.

loop

Establece el número de veces que la marquesina realizará el desplazamiento. Si no se especifica esta propiedad, por defecto es -1, lo que quiere decir que la marquesina se desplazará continuamente.

scrollamount

Establece el valor de movimiento para cada intervalo en pixeles. Por defecto su valor es 6.

scrolldelay

Establece el intervalo entre cada desplazamiento, en milisegundos. El valor por defecto es 85. Nota: Cualquier valor inferior a 60 será ignorado, (puesto que el valor minimo es 60) y se establecerá 60 en su lugar. Salvo que se especifique truespeed.

truespeed

Por defecto, si los valores de scrolldelay son inferiores a 60 serán ignorados. Pero si truespeed está presente, esos valores inferiores a 60 serán aceptados.

vspace

Establece el margen vertical en pixeles o en un valor porcentual.

width

Establece el ancho de la etiqueta en pixeles o un valor porcentual.

Eventos

onbounce

Este evento se lanza cuando la marquesina llegó al final del desplazamiento. Ésto solo se activa cuando el atributo behavior está establecido en alternate.

onfinish

Este evento se lanza cuando la marquesina repitió el desplazamiento la cantidad de veces establecidas en el atributo loop. El evento se lanza solo si el atributo loop tiene un valor mayor a 0.

onstart

Este evento se lanza cuando la marquesina comienza su desplazamiento.

Metodos

start

Comienza el desplazamiento de la marquesina.

stop

Para el desplazamiento de la marquesina

Ejemplos

<html>

<head>

<title> separadores y marquesinas </title>

</head>

<body background="file:///C|/Users/prepa1/Desktop/images (1).jpg">

<marquee bgcolor="red" scrollamount="100 direction="right">

<p align="center"> <font face="verdana" size="10"> Mi nombre es: </p> </font> </marquee>

<p align="center"> <font face="verdana" size="10"> Guiomar </p> </font> 

<hr size="20" color="yellow">

<marquee bgcolor="red" scrolldelay="100 direction="left">

<p align="center"> <font face="verdana" size="10"> Mi deporte favorito es: </p> </font> </marquee>

<p align="center"> <font face="verdana" size="10"> Squash </p> </font> 

<hr size="8" color="green">

<marquee width="50%" bgcolor="red" scrolldelay="100 direction="left">

<p align="center"> <font face="verdana" size="10"> Mi snack favorito es: </p> </font> </marquee>

<p align="center"> <font face="verdana" size="10"> Papas a la francesa </p> </font> 

<hr width="80%"  color="black">

<marquee><font face="verdana" size="10"> Este texto se mueve de derecha a izquierda </font></marquee>

<marquee direction="up"><font face="verdana" size="10"> Este texto se mueve de abajo hacia arriba </font></marquee>

<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">

  <marquee behavior="alternate"> <font face="verdana" size="10">

    Este texto rebotará dentro de la marquesina.

   </font> </marquee>

</marquee>

</body>

</html>