Cómo crear una línea de tiempo interactiva con HTML (En 3 Pasos)

Por steve sweeney-turner
Cómo crear una línea de tiempo interactiva con HTML (En 3 Pasos)
paddington clock face image by Karen Hadley from Fotolia.com

Una línea de tiempo es una forma útil de desplegar una lista de eventos en una página web, además de proporcionar a los usuarios algo de control sobre el contenido que visualizan. Aunque hay muchas formas de crear una línea de tiempo interactiva, la mayoría requiere más que sólo el lenguaje de marcas de hipertexto (HTML, siglas en inglés). Sin embargo, hay una solución HTML muy simple. Puedes crear barras de desplazamiento interactivas para tu línea del tiempo, usando el atributo "style" (estilo) de HTML. Al hacer esto, los usuarios de tu línea de tiempo podrán navegar por sus contenidos de la forma en que deseen.

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:

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.