Tutorial: Etiqueta Marquee [Uso y propiedades]

Hola aquí Konanciel regresando al Blog con un nuevo diseño y con otro tipo de tutoriales que espero les sean útiles, en esta ocasión es un tutorial de HTML a los que me gusta decir básicos. Porque básicos? pues porque creo que es algo que todos debemos saber si es que queremos tener un Blog o página Web con mucha personalidad.

Es cierto que hay plataformas en Internet como Blogger, Wordpress,  Blogfree (hablando de Blogs) y otros sitios que nos ofrecen tener un espacio sin conocimientos Html e incluso hay miles de Plantillas o Templates. Pero acaso no te gustaría que en tus post haya coloridos textos, imágenes, videos y otros elementos? o te gustaría agregarle por ejemplo un gadget de un menú con imágenes o una sección de Afiliados?

Existen diversos tutoriales Html que podría haber publicado aunque me decidí comenzar por este ya que es uno de los más buscados con un lindo resultado y fácil. También porque no me gustaría solo hacer aburridos tutoriales sobre como crear un documento HTML que hay muchos, que debo decir que en alguna ocasión los subiré por si alguien los necesita o me los pide.

Explicación .......       .......Ejemplos

Una marquesina es lo que muchos llamamos texto en movimiento aunque no necesariamente tiene que ser un texto también se pueden poner objetos como imágenes, tablas y más.

Ejemplos:

Ejemplo con texto 

   

Celda 1	Celda 2
Celda 3	Celda 4

<marquee>Textarea</marquee>

Etiqueta........y
.........propiedades?

Bien pues este efecto se puede lograr con una etiqueta de la que seguro haz escuchado que se llama marquee <marquee></marquee> a la cual le podrás agregar diversos atributos como un fondo, fuente, tamaño.etc.

Marquesina sin atributos

<marquee>Marquesina sin atributos</marquee>
Si te fijas en la marquesina que tengo arriba (en los ejemplos) el contenido se mueve en diferentes direcciones y velocidades, además tienen color de fondo diferente. El texto entre las etiquetas se moverá horizontalmente y su fondo será transparente, abarcará todo lo ancho de la pantalla o el lugar donde este por defecto.

Estos son los atributos que puedes usar para personalizar tu marquesina.

✰= Background: Color de fondo la marquesina.

Ejemplo:

<marquee style="background-color: thistle;">Tutorial Marquee</marquee>
Tutorial Marquee

✰= Width: Ancho del área de la marquesina.

= Height: Altura del área de la marquesina.

Ejemplo:


<marquee style="background-color: peachpuff; height: 20px; width: 400px;">Tutorial Marquee</marquee>

Tutorial Marquee

✰= Direction: Ruta de la marquesina.
Valores izquierda . derecha . arriba . abajo

Ejemplo:

<marquee direction="left" style="background-color: lightskyblue; width: 400px;">Tutorial Marquee Izquierda</marquee>
Tutorial Marquee Izquierda
<marquee direction="right" style="background-color: lightskyblue; width: 400px;">Tutorial Marquee Derecha</marquee>
Tutorial Marquee Derecha
<marquee direction="up" style="background-color: lightskyblue; width: 400px;">Tutorial Marquee Arriba</marquee>Tutorial Marquee Arriba
<marquee direction="down" style="background-color: lightskyblue; width: 400px;">Tutorial Marquee Abajo</marquee>Tutorial Marquee Abajo

✰= Behavior: Comportamiento de la marquesina.
Valores Scroll . Slide . Alternate

Ejemplo:

<marquee behavior="scroll" direction="right" style="background-color: lightcoral; width: 400px;">Tutorial Marquee Scroll: Si notas al usar scroll no se ve efecto ya que nos da lo mismo como si no agregáramos algún comportamiento.</marquee>
Tutorial Marquee Scroll: Si notas al usar scroll no se ve efecto ya que nos da lo mismo como si no agregáramos algún comportamiento.
<marquee behavior="slide" direction="left" style="background-color: lightcoral; width: 400px;">Tutorial Marquee Slide: el texto se detiene al llegar al final de la marquesina</marquee>
Tutorial Marquee Slide: el texto se detiene al llegar al final de la marquesina
<marquee behavior="alternate" direction="right" style="background-color: lightcoral; width: 400px;">Tutorial Marquee Alternate: el texto irá y volverá de un lado a otro de la marquesina</marquee>
Tutorial Marquee Alternate: el texto irá y volverá de un lado a otro de la marquesina


✰= Scrollamount: Cantidad de pixeles en el movimiento de la marquesina.

Ejemplo:

<marquee scrollamount="20" style="background-color: palegreen; height: 20px; width: 400px;">Tutorial Marquee Scrollamount</marquee>
Tutorial Marquee Scrollamount
✰= Scrolldelay: Velocidad del movimiento de la marquesina.

Ejemplo:

<marquee scrolldelay="5" style="background-color: palegreen; width: 400px;">Tutorial Marquee Scrolldelay</marquee>
Tutorial Marquee Scrolldelay


✰= Loop: Determina si repite el movimiento de la marquesina o no, así como las veces que deseamos que se repita determinando dicho número.

Ejemplo:

<marquee loop="infinite" style="background-color: gainsboro; width: 400px;">Tutorial Marquee Loop Infinite</marquee>
Tutorial Marquee Loop Infinite
<marquee loop="10" style="background-color: gainsboro; width: 400px;">Tutorial Marquee Loop repetir 2 veces</marquee>
Tutorial Marquee Loop repetir 2 veces

Marquee ................
.................. Div

Otra manera de darle un formato a la etiqueta Marquee es con la etiqueta DIV con la que le podemos cambiar fondo, ponerle borde, color de texto, etc.

Ejemplo:

Un ejemplo es la marquesina del titulo de esta entrada.

Este es el código, podrás notar que la etiqueta Marquee solo lleva el comportamiento Slide el cual hace que se detenga y todo el formato lo lleva entre las etiquetas <div style="..."> y </div>.

<div style="border-bottom-color: Khaki; border-bottom-style: solid; border-bottom-width: 5px; color: peru; font-family: Dosis; font-size: 12pt;"><div style="background-color: palegoldenrod; border-bottom-color: cornsilk; border-bottom-style: solid; border-bottom-width: 18px; border-top-color: gray; border-top-style: solid; border-top-width: 5px; height: 2px; padding-left: 10px;">
<marquee behavior="slide">Tutorial: Etiqueta Marquee [Uso y propiedades]</marquee></div></div>

Ahora ya puedes crear tus propias marquesinas solo debes experimentar, al principio cuesta un poco pero verás que los resultados poco a poco irán mejorando... En la próxima entrada (que publicaré en un rato más) te dejare algunas marquesinas hechas que podrás utilizar en tu página.

No te olvides comentar si te gusto y mostrarnos tus resultados...