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

Una línea de tiempo es una manera útil de mostrar una lista de eventos en una página web, y una línea de tiempo interactiva ofrece a los usuarios un cierto control sobre el contenido de visualización. Si bien existen muchas maneras de crear una línea de tiempo interactiva, la mayoría requieren más de lenguaje de marcado acaba de hipertexto (HTML). Sin embargo, hay una solución muy simple de HTML. Usted puede crear fácilmente barras de desplazamiento interactivas para su línea de tiempo mediante el uso de HTML "estilo" atributo. De esta manera, los usuarios de su línea de tiempo serán capaces de desplazarse a través de su contenido, como les gusta.

Crear el archivo HTML. Abrir un nuevo documento en un programa de software de edición de texto y crear una página HTML básica. Añadir este código en el HTML "cuerpo" sección: El elemento de división ("div") Es un contenedor para la lista de su línea de tiempo de los acontecimientos. los "rebosar" valor de "auto" agrega una barra de desplazamiento interactiva, cuando la línea de tiempo se hace más ancha o más alta que este contenedor. Guarde la página como "timeline.html".

Crear su propio contenido línea de tiempo. En el espacio entre la apertura y cierre "div" etiquetas, añadir eventos de su línea de tiempo en orden ascendente o descendente. Añadir cada evento dentro de su sección de HTML bien formado. Mantenga guardar la página a medida que trabaja.

Probar el código HTML. Abra el navegador web de su equipo y de la carga "timeline.html." Si su contenido es más grande que el "div" contenedor, verá una barra de desplazamiento interactiva. Ajustar el "anchura" y "altura" los valores del contenedor para adaptarse a su disposición vertical u horizontal.

Consejos

• comprobar los formatos verticales son los más fáciles de código. Simplemente envuelva cada una de las secciones de eventos dentro de su propio "div" elemento. Para una disposición horizontal, se puede utilizar una tabla con una sola fila y columna de una celda para cada evento. Si hace esto, hacer que la altura de su mesa de la misma que su "div" la altura del contenedor. Tenga cuidado con la vertical de la mesa "margen" y "relleno" valores.
• comprobar En este artículo se crea una barra de desplazamiento interactiva mediante el uso de una "en línea" de hojas de estilo en cascada (CSS). "En línea" hojas de estilo van dentro de la "estilo" atributo de la etiqueta de apertura de un elemento HTML. Se podría utilizar un "interno" o "externo" de hojas de estilo en su lugar, sin embargo. "Interno" hojas de estilo van dentro del HTML "cabeza" sección. "Externo" hojas de estilo están separados "css" archivos. El uso de cualquiera de estos tipos le da más control sobre el formato de cualquier contenido HTML.
• comprobar Se podría ampliar la interactividad del ejemplo mediante el uso de javascript. Se podría empezar por la adición de botones HTML y, a continuación, escribir un javascript para mover el contenido de su línea de tiempo cuando los usuarios hacen clic los botones.

referencias

• enlazar Estilos HTML: W3Schools.com
• enlazar W3Schools.com: CSS desbordamiento de la propiedad

Sobre el Autor

carrera de la escritura de Steve Sweeney-Turner comenzó en 1989 como un periodista de la música clásica para revistas como "El Musical Times," "Tempo" y "Cencrastus." También ha escrito extensivamente como académico, incluyendo capítulos de libros publicados por las editoriales universitarias de Oxford, Manchester y Cork. Tiene un doctorado en musicología por la Universidad de Edimburgo y un diploma de postgrado en la tecnología de información de la Universidad de Glasgow.