Traduce el Blog

Html 9


Content pest

09 enero 2013

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 BloggerWordpress,  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 1Celda 2
Celda 3Celda 4





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


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:


Tutorial Marquee

= Width: Ancho del área de la marquesina.
= Height: Altura del área de la marquesina.

Ejemplo:



Tutorial Marquee

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

Ejemplo:


Tutorial Marquee Izquierda


Tutorial Marquee Derecha

Tutorial Marquee Arriba

Tutorial Marquee Abajo

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

Ejemplo:


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.


Tutorial Marquee Slide: el texto se detiene al llegar al final de la marquesina


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:


Tutorial Marquee Scrollamount

= Scrolldelay: Velocidad del movimiento de la marquesina.

Ejemplo:


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:


Tutorial Marquee Loop Infinite


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="..."> </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...

No hay comentarios:

Publicar un comentario en la entrada