Cómo hacer una marquesina móvil en HTML

PDF download Descargar el PDF
Coescrito por Personal de wikiHow

PDF download Descargar el PDF

Una marquesina móvil es un texto en movimiento que se agrega a un sitio web. Esto ya casi no se hace con HTML, de hecho, no es recomendable. La etiqueta de HTML para marquesinas móviles se ha eliminado de la biblioteca estándar de este lenguaje. Para poder hacerlo, la mejor opción que hay actualmente es usar CSS ya que estos dos lenguajes se integran a la perfección en el diseño de sitios web modernos.

Método 1
Método 1 de 2:

Usar CSS

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/66\/Make-a-Scrolling-Marquee-in-HTML-Step-1.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/66\/Make-a-Scrolling-Marquee-in-HTML-Step-1.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si vas a usar una Mac, descarga la versión más reciente de WebKit . Como el módulo CSS que se utiliza para crear marquesinas es parte de la especificación WebKit, es necesario que esta plataforma esté instalada en tu equipo.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c5\/Make-a-Scrolling-Marquee-in-HTML-Step-2.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c5\/Make-a-Scrolling-Marquee-in-HTML-Step-2.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    A diferencia de lo que ocurre con Mac, no hay un instalador autoextraíble para Windows. Si vas a usar Windows necesitarás instalar una serie de herramientas para usar WebKit. Todas estas herramientas se pueden descargar desde aquí .
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1f\/Make-a-Scrolling-Marquee-in-HTML-Step-3.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1f\/Make-a-Scrolling-Marquee-in-HTML-Step-3.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Abre tu archivo HTML y agrégale una referencia a la hoja de estilos CSS utilizando el siguiente código:
    . <head>
    <link rel="stylesheet" type="text/css" href="miestilo.css">
    </head>
    • Puedes escribir la referencia CSS antes de crear el archivo CSS, pero debes asegurarte de que el nombre del archivo coincida exactamente con el de tu código (en este caso, "miestilo.css").
    • El código HTML permanecerá separado del código CSS, pero ambos se ejecutarán juntos al cargar tu archivo HTML. [1]
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Make-a-Scrolling-Marquee-in-HTML-Step-4.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Make-a-Scrolling-Marquee-in-HTML-Step-4.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Tu código deberá verse similar al siguiente:
    . <div class="marquee">Aquí va el texto que se desplazará</div>
    • La etiqueta "div" es el elemento de HTML que define el área de la página que contendrá los componentes del código, en este caso, la marquesina móvil.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/71\/Make-a-Scrolling-Marquee-in-HTML-Step-5.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/71\/Make-a-Scrolling-Marquee-in-HTML-Step-5.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ve a "Archivo > Guardar como…". No olvides agregar la extensión .html al final del nombre del archivo.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ab\/Make-a-Scrolling-Marquee-in-HTML-Step-6.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ab\/Make-a-Scrolling-Marquee-in-HTML-Step-6.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    La sintaxis breve para crear una marquesina móvil con CSS es: "-webkit-marquee: [dirección] [incremento] [repetición] [estilo] [velocidad]". La etiqueta "webkit" es necesaria porque el módulo CSS que contiene la clase de la marquesina es parte de la especificación CSS de WebKit. [2]
    • [dirección] define en qué dirección se desplaza la marquesina
    • [incremento] determina la distancia en píxeles que hay entre cada paso del desplazamiento
    • [repetición] es la cantidad de veces que se reproducirá la marquesina
    • [estilo] determina si el desplazamiento de texto es simple o con rebote
    • [velocidad] determina qué tan rápido se desplazará el texto
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/Make-a-Scrolling-Marquee-in-HTML-Step-7.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/Make-a-Scrolling-Marquee-in-HTML-Step-7.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Establece estos valores entre corchetes (pero sin poner los corchetes, ya que aquí solo se usan para indicar la posición). De esta forma le indicarás a la marquesina cómo actuar en la página. Tu código deberá verse similar al siguiente:
    . -webkit-marquee: auto medium infinite scroll normal;
    • La dirección "auto" (de automático) es la predeterminada: de derecha a izquierda; "medium" (medio) establece un intervalo predeterminado de 6 píxeles; "infinite" (infinito) se usa para reproducir la marquesina en forma ilimitada; "scroll" (desplazamiento) hace que el estilo de movimiento sea lineal y "normal" es la configuración predeterminada de desplazamiento.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/Make-a-Scrolling-Marquee-in-HTML-Step-8.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/Make-a-Scrolling-Marquee-in-HTML-Step-8.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Escribe <span style="font-size:0px"> en una línea nueva de código. Así el texto seguirá desplazándose en forma continua sin detenerse al llegar al borde de la división (etiqueta "div"). [3]
    • "overflow-x" especifica qué hacer con el texto que excede el límite de espacio sobre el eje "x"
    • "-webkit-marquee" dirige el comando "overflow" hacia el módulo de la marquesina en WebKit
    • El código completo deberá verse similar al siguiente:
      . -webkit-marquee: auto medium infinite scroll normal;
      overflow-x: -webkit-marquee;
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/21\/Make-a-Scrolling-Marquee-in-HTML-Step-9.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/21\/Make-a-Scrolling-Marquee-in-HTML-Step-9.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ve a "Archivo > Guardar como…". No olvides agregar la extensión .css al final del nombre del archivo.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Make-a-Scrolling-Marquee-in-HTML-Step-10.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Make-a-Scrolling-Marquee-in-HTML-Step-10.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Arrastra el archivo hacia el navegador y suéltalo allí para abrirlo. La marquesina móvil ahora se mostrará en la página.
    • Utiliza un navegador compatible con WebKit, como Chrome o Safari para asegurarte de que la marquesina se muestre según lo esperado.
    Anuncio
Método 2
Método 2 de 2:

Usar HTML

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f7\/Make-a-Scrolling-Marquee-in-HTML-Step-11.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f7\/Make-a-Scrolling-Marquee-in-HTML-Step-11.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ten en cuenta que el uso de la etiqueta "marquee" en HTML es anticuado y poco recomendable en términos de diseño. Los archivos HTML se pueden abrir con un simple editor de texto. Si vas a empezar desde cero, abre el editor e ingresa el siguiente código de ejemplo:
    • . <marquee style="background-color:#000080;" direction="right" loop="20" width="75%">Esta es una marquesina móvil</marquee>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Make-a-Scrolling-Marquee-in-HTML-Step-12.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Make-a-Scrolling-Marquee-in-HTML-Step-12.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Puedes cambiar el fondo de la marquesina especificando un valor hexadecimal (hex) o RGB (por "Red Green Blue"; rojo, verde y azul en inglés) después de la parte de "background-color:" en el código. El valor predeterminado que aparece en el código de ejemplo, #000080, es azul marino.
    • Por ejemplo:
      . <marquee style="background-color:#000080;"></marquee>
    • Puedes buscar una lista de todos los colores con sus respectivos valores en Internet. [4]
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7f\/Make-a-Scrolling-Marquee-in-HTML-Step-13.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7f\/Make-a-Scrolling-Marquee-in-HTML-Step-13.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cambia el atributo "direction" (dirección) en el código cualquiera de las siguientes direcciones: "right" (derecha), "left" (izquierda), "up" (arriba) o "down" (abajo).
    • Por ejemplo:
      . <marquee direction="right"</marquee>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/01\/Make-a-Scrolling-Marquee-in-HTML-Step-14.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/01\/Make-a-Scrolling-Marquee-in-HTML-Step-14.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El atributo "loop" (bucle) controla la cantidad de veces que se repite el desplazamiento de la marquesina. Si quieres que lo haga en forma continua, deja este atributo en blanco.
    • Un ejemplo de código sin este atributo sería el siguiente:
      . <marquee style="background-color:#000080;" direction="right" width="75%">Esta es una marquesina móvil</marquee>
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e2\/Make-a-Scrolling-Marquee-in-HTML-Step-15.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e2\/Make-a-Scrolling-Marquee-in-HTML-Step-15.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El texto que esté dentro de las etiquetas <marquee> y </marquee> será el texto que se desplazará en la marquesina. Escribe ahí lo que quieras que diga tu marquesina.
    • Por ejemplo:
      . <marquee>¡Mira cómo se desplaza este texto!</marquee>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/89\/Make-a-Scrolling-Marquee-in-HTML-Step-16.jpg\/v4-460px-Make-a-Scrolling-Marquee-in-HTML-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/89\/Make-a-Scrolling-Marquee-in-HTML-Step-16.jpg\/v4-728px-Make-a-Scrolling-Marquee-in-HTML-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Arrastra el archivo hacia el navegador y suéltalo allí para abrirlo. La marquesina móvil ahora se mostrará en la página.
    Anuncio

Consejos

  • Como la función "marquee" de CSS es parte de la especificación WebKit, su uso se limita a navegadores compatibles con WebKit como Chrome, Safari u Opera. Firefox e IE no son navegadores compatibles con WebKit.
  • Ten cuidado cuando vayas a cambiar los atributos en la marquesina HTML. Si olvidas cerrar comillas o cometes algún error, por más pequeño que sea, todo el código podría dejar de funcionar.
  • Si quieres agregar alguna de las increíbles funciones de CSS a tu marquesina, simplemente añade la clase o ID correspondiente.
Anuncio

Advertencias

  • El elemento <marquee> es obsoleto , lo cual significa que no es válido en HTML y no debe utilizarse. Las páginas podrían devolver un error si se usa esta etiqueta y esto podría causar problemas en algunos navegadores.
Anuncio

wikiHows relacionados

Cómo
ejecutar un programa desde el símbolo del sistema en Linux
Cómo
convertir de decimal a hexadecimal
Cómo
formatear texto como código en Discord
Cómo cambiar un código de cerradura de Kwikset
Cómo
verificar la versión de PHP
Cómo
hacer un programa usando Bloc de notas
Cómo
establecer el ancho y la altura de una imagen en HTML
Cómo
usar el comando net send
Cómo comentar múltiples líneas en Python: formato y accesos directos
Cómo
ejecutar un archivo Python desde el Símbolo del sistema de Windows
Cómo
crear un archivo EXE
Cómo
abrir un archivo SQL
Cómo
crear un archivo ejecutable en Eclipse
Cómo
calcular porcentaje en Java
Anuncio

Referencias

  1. ↑ http://www.w3schools.com/css/css_howto.asp
  2. ↑ http://www.hongkiat.com/blog/css-marquee/
  3. ↑ http://help.dottoro.com/lcawqfhe.php
  4. ↑ http://www.w3schools.com/tags/ref_colornames.asp

Acerca de este wikiHow

Esta página ha recibido 13 426 visitas.

¿Te ayudó este artículo?

Anuncio