Cómo crear una línea de tiempo HTML interactiva

Autor: Alice Brown
Fecha De Creación: 2 Mayo 2021
Fecha De Actualización: 18 Noviembre 2024
Anonim
Cómo crear una línea de tiempo HTML interactiva - Electrónica
Cómo crear una línea de tiempo HTML interactiva - Electrónica

Contenido

Una línea de tiempo es una forma útil de mostrar una lista de eventos en una página web, y una línea de tiempo interactiva les da a los usuarios control sobre la vista del contenido. Si bien hay muchas formas de crear una línea de tiempo interactiva, muchas necesitan más que HTML. Sin embargo, existe una solución HTML muy simple: puede crear barras de desplazamiento interactivas en su línea de tiempo utilizando el atributo "estilo" HTML. Al hacer esto, los usuarios podrán moverse libremente por el contenido.

Paso 1

Crea tu archivo HTML. Abra un nuevo documento en un editor de texto y cree una página HTML básica. Agrega este código en la sección "cuerpo" del HTML:

El divisor ("div") es un contenedor para la lista de eventos en su línea de tiempo. El valor "auto" en "overflow" agrega barras de desplazamiento interactivas cuando la línea de tiempo es más larga o más ancha que el contenedor. Guarde la página como "timeline.html".


Paso 2

Crea el contenido. En el espacio entre las etiquetas "div", agregue los eventos en la línea de tiempo en orden ascendente o descendente. Agregue cada evento en su propia sección HTML bien formada. Guarde continuamente la página mientras trabaja.

Paso 3

Prueba tu código HTML. Abra el archivo "timeline.html" en el navegador web de su computadora. Si el contenido es más grande que el contenedor "div", verá una barra de desplazamiento interactiva. Ajuste los valores de "ancho" y "alto" del contenedor para que se ajusten a su trazo vertical u horizontal.