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

Hacer una línea de tiempo interactiva con HTML requiere de muy poco tiempo.
Por steve sweeney-turner

Paso 1

Crea tu archivo HTML. Abre un nuevo documento en un programa editor de texto y crea una página HTML básica. Añade este código dentro de la sección "body" (cuerpo) de la página:

<div style="width:400px; height:400px; overflow:auto;"> </div>

El elemento de división ("div") es un contenedor para la lista de eventos de tu línea de tiempo. El valor "overflow" (sobre flujo) de "auto" (automatización) agrega una barra de desplazamiento interactiva cuando tu línea del tiempo se torna más ancha o más alta que su contenedor. Guarda esta página como "timeline.html".


Paso 2

Crea el contenido de tu línea de tiempo. En el espacio entre las etiquetas "div" de apertura y cierre, agrega los eventos en orden descendente o ascendente. Añade cada evento con su propia sección HTML bien formada. Guarda constantemente la página mientras trabajes en ella.


Paso 3

Prueba tu código HTML. Abre el navegador web de tu computadora y carga el archivo "timeline.html". Si el contenido es mayor que contenedor "div", verás una barra de desplazamiento interactiva. Ajusta los valores "width" (ancho) y "height" (altura) para que encajen con el diseño vertical u horizontal de tu página.