ubiquitour.com

Cómo crear un calendario HTML interactivo

Cómo crear un calendario HTML interactivo

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 ofrece a los usuarios algún control sobre la visualización de contenido. Aunque muchas maneras existen para crear una línea de tiempo interactiva, la mayoría requieren algo más que lenguaje de marcado de hipertexto (HTML). Sin embargo, hay una solución muy simple de HTML. Fácilmente puede crear barras de desplazamiento interactivo para su línea de tiempo usando el atributo de "estilo" de HTML. Haciendo esto, los usuarios de la línea de tiempo podrán desplazarse a través de sus contenidos como ellos.

Instrucciones

1 Crear el archivo HTML. Abra un nuevo documento en un programa de software de editor de texto y crear una página HTML básica. Agregue este código dentro de la sección de "cuerpo" de HTML:

< div estilo = "width: 400px; altura: 400px; overflow: auto;" >

< / div >

El elemento de división ("div") es un contenedor de lista de su línea de tiempo de los eventos. El valor de "desbordamiento" de "auto" agrega una barra de desplazamiento interactivo cuando su tiempo línea consigue más amplio o superior de este recipiente. Guarde la página como "timeline.html".

2 Crear su propio contenido de la línea de tiempo. En el espacio entre las etiquetas de apertura y cierre "div", agregar eventos de tu línea de tiempo en orden ascendente o descendente. Añadir cada evento dentro de su propia sección de HTML bien formado. Mantener ahorro la página mientras trabaja.

3 Comprobar el código HTML. Abrir el navegador de su computadora y cargar "timeline.html." Si su contenido es más grande que el contenedor de "div", verá una barra de desplazamiento interactivo. Ajuste los valores de "width" y "altura" del contenedor para su disposición vertical u horizontal.

Consejos y advertencias

  • Diseños verticales son fáciles de código. Simplemente Envuelva cada una de las secciones del evento dentro de su propio elemento "div". Para un diseño horizontal, podría utilizar una tabla con una sola fila y una columna para cada evento. Si haces esto, hacer de su mesa igual a la altura de su "div" contenedor. Tenga cuidado con vertical "margen" de la tabla y los valores de "relleno".
  • Este artículo crea una barra de desplazamiento interactivo mediante una "inline" de hoja de estilo en cascada (CSS). Hojas de estilo "En línea" a entrar en el atributo "style" de la etiqueta de apertura de un elemento HTML. Usted podría utilizar una hoja de estilos "internos" o "externo", sin embargo. Hojas de estilos "Internos" a entrar en la sección de "cabeza" de HTML. Hojas de estilos "Externos" son archivos separados ".css". Utilizando cualquiera de estos tipos le da más control sobre el formato de cualquier contenido HTML.
  • Podría ampliar la interactividad del ejemplo mediante JavaScript. Podría empezar añadiendo botones HTML y luego escribir JavaScript para mover el contenido de la línea de tiempo cuando los usuarios haga clic en los botones.