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 brinda a los usuarios cierto control sobre la visualización de contenido. Si bien existen muchas formas de crear una línea de tiempo interactiva, la mayoría requiere más que solo lenguaje de marcado de hipertexto (HTML). Sin embargo, hay una solución HTML muy simple. Puede crear fácilmente barras de desplazamiento interactivas para su línea de tiempo utilizando el atributo "estilo" de HTML. Al hacer esto, los usuarios de su línea de tiempo podrán desplazarse a través de su contenido como lo deseen.
Paso 1
Cree su archivo HTML. Abra un nuevo documento en un programa de software de editor de texto y cree una página HTML básica. Agregue este código dentro de la sección HTML "cuerpo": El elemento de división ("div") es un contenedor para la lista de eventos de su línea de tiempo. El valor de "desbordamiento" de "auto" agrega una barra de desplazamiento interactiva cuando su línea de tiempo se hace más ancha o más alta que este contenedor. Guarde la página como "timeline.html".
Paso 2
Cree su propio contenido de línea de tiempo. En el espacio entre las etiquetas "div" de apertura y cierre, agregue los eventos de su línea de tiempo en orden ascendente o descendente. Agregue cada evento dentro de su propia sección de HTML bien formado. Sigue guardando la página mientras trabajas. Prueba tu código HTML. Abra el navegador web de su computadora y cargue "timeline.html". Si su contenido es más grande que el contenedor "div", verá una barra de desplazamiento interactiva. Ajuste los valores de "ancho" y "altura" del contenedor para adaptarlos a su diseño vertical u horizontal.
Consejos
Los diseños verticales son los más fáciles de codificar. Simplemente envuelva cada una de sus secciones de eventos dentro de su propio elemento "div". Para un diseño horizontal, puede usar una tabla con una sola fila y una celda de columna para cada evento. Si hace esto, haga que la altura de su mesa sea igual a la altura de su contenedor "div". Tenga cuidado con los valores verticales de "margen" y "relleno" de su tabla.
Este artículo crea una barra de desplazamiento interactiva utilizando una hoja de estilo en cascada (CSS) "en línea". Las hojas de estilo "en línea" van dentro del atributo "estilo" de la etiqueta de apertura de un elemento HTML. Sin embargo, podría utilizar una hoja de estilo "interna" o "externa". Las hojas de estilo "internas" van dentro de la sección "encabezado" HTML. Las hojas de estilo "externas" son archivos separados ".css". El uso de cualquiera de estos tipos le brinda más control sobre el formato de cualquier contenido HTML.
Puede ampliar la interactividad del ejemplo utilizando JavaScript. Puede comenzar agregando botones HTML y luego escribir un JavaScript para mover el contenido de su línea de tiempo cuando los usuarios hagan clic en los botones.
Elementos que necesitará
Programa de software de edición de texto
[Cómo crear una línea de tiempo HTML interactiva] URL: http://www.ordenador.online/computadora/Internet/245978.html