Tecnología Electrónica

Crear marquee (ticker) en web con HTML/CSS: Etiqueta y estilos personalizados

Añadir un teletipo (ticker) deslizante a tu página web

También llamados marquees, los tickers recorren horizontalmente la pantalla mostrando mensajes para lectura rápida. Comunes en TV (noticias, bolsa), también aparecen en web. Con unas líneas de HTML y CSS los añades fácilmente.

Paso 1: Abrir código HTML de tu página

Si usas editor visual (Adobe Dreamweaver), abre la página, clic en la zona donde quieres el ticker > cambia a "Vista Código" (Code View). Verás el HTML que controla la apariencia. Si usas editor de texto, abre el archivo y ve a la zona deseada.

Paso 2: Insertar línea en blanco

Pulsa Entrar para crear una línea vacía.

Paso 3: Pegar código base

Copia y pega este código en la línea en blanco:

<marquee style="background-color:#eee;border:1px solid #ccc">
  <p>Texto de ejemplo para el ticker</p>
</marquee>

La etiqueta <marquee> desliza su contenido de derecha a izquierda por defecto. El párrafo entre las etiquetas es el contenido.

Paso 4: Personalizar estilos y contenido

La etiqueta de apertura usa reglas CSS style para color de fondo gris claro (#eee) y borde 1px gris más oscuro (#ccc). Todos estos valores son ajustables. Sustituye el texto de marcador entre <p></p> por tu propio texto o imágenes.

Paso 5: Probar en navegador

Guarda la página y ábrela en un navegador web. El ticker aparecerá en la posición elegida en el Paso 1.

>

<

Vida inteligente