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

Escrito por steve sweeney-turner | Traducido por eduardo moguel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
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. (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.

Otras personas están leyendo

Necesitarás

  • Un programa de edición de texto

Lista completaMinimizar

Instrucciones

  1. 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".

  2. 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.

  3. 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.

Consejos y advertencias

  • Los diseños verticales son los más fáciles de codificar. Simplemente envuelve cada evento en secciones con su propio elemento "div". Para un diseño horizontal puedes usar una tabla con una sola fila y una celda de columna para cada evento. Si lo haces así, configura la altura de la tabla para que sea igual que la de tu contenedor "div". Ten cuidado con los valores verticales de "margin" (margen) y "padding" (relleno) de tu tabla.
  • Este artículo crea una barra de desplazamiento interactiva usando un estilo "inline"(en línea) de las hojas tipo cascada (CSS, siglas en inglés). El estilo de hojas "inline" va dentro del atributo "style" (estilo) de la etiqueta de elementos de apertura HTML. Sin embargo, puedes usar, en su lugar, una hoja de estilo "internal" (interna) or "external" (externa). Las hojas de estilo "internal" van dentro de las sección "head" (encabezado) del código HTML. Las hojas de estilo "external" son archivos ".css" separados. Usar cualquiera de estos tipos te otorga más control sobre el formato de cualquier contenido HTML.
  • Puedes extender la interacción de este ejemplo utilizando JavaScript. Puedes comenzar añadiendo botones HTML; luego, escribe un código JavaScript para mover tu línea de tiempo cuando los usuarios hagan clic sobre dichos botones.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles