Como criar uma linha do tempo interativa HTML

Fazer uma linha do tempo interativa HTML leva pouco tempo.

Conteúdo

Coisas que você precisa

A linha do tempo é uma maneira útil para exibir uma lista de eventos em uma página da web, e uma linha do tempo interativa oferece aos usuários algum controle sobre o conteúdo de visualização. Embora existam muitas maneiras de criar uma linha do tempo interativa, a maioria requer mais do que linguagem de marcação apenas de hipertexto (HTML). No entanto, existe uma solução de HTML muito simples. Você pode facilmente criar barras de rolagem interativos para sua linha de tempo usando HTML, da "estilo" atributo. Ao fazer isso, os usuários da sua linha do tempo será capaz de percorrer o seu conteúdo como eles gostam.

Coisas que você precisa

programa de software editor de texto

Crie seu arquivo HTML. Abra um novo documento em um programa de software editor de texto e criar uma página HTML básico. Adicione este código dentro do HTML "corpo" seção:

O elemento de divisão ("div") É um recipiente para a lista da sua linha do tempo dos acontecimentos. o "transbordar" valor de "auto" adiciona uma barra de rolagem interativa quando a sua linha do tempo fica mais larga ou superior a este recipiente. Salve a página como "timeline.html".
Criar o seu próprio conteúdo linha do tempo. No espaço entre a abertura e o fechamento "div" Tag, adicionar eventos da sua linha de tempo em ordem crescente ou decrescente. Adicionar cada evento âmbito da sua secção de HTML bem formado. Mantenha salvar a página enquanto você trabalha.
Teste seu código HTML. Abra o navegador web do seu computador e de carga "timeline.html." Se o seu conteúdo é maior do que o "div" recipiente, você verá uma barra de rolagem interativa. Ajusta a "largura" e "altura" valores do recipiente de acordo com seu layout vertical ou horizontal.

dicas & avisos

layouts verticais são o mais fácil de código. Basta enrolar cada uma de suas seções de eventos dentro de sua própria "div" elemento. Para um layout horizontal, você pode usar uma tabela com uma única linha e uma célula de coluna para cada evento. Se você fizer isso, fazer a altura de sua mesa o mesmo que o seu "div" a altura do recipiente. Tome cuidado com o verticais sua mesa "margem" e "preenchimento" valores.
Este artigo cria uma barra de rolagem interativa usando um "na linha" folha de estilo em cascata (CSS). "Na linha" folhas de estilo ir para dentro da "estilo" atributo da marca de abertura de um elemento HTML. Você poderia usar um "interno" ou "externo" folha de estilo em vez disso, no entanto. "Interno" folhas de estilo ir para dentro do HTML "cabeça" seção. "Externo" folhas de estilo são separados "Css" arquivos. Usando qualquer um destes tipos lhe dá mais controle sobre a formatação de qualquer conteúdo HTML.
Você poderia estender a interatividade do exemplo usando javascript. Você poderia começar por adicionar botões HTML e, em seguida, escrever um javascript para mover seu conteúdo linha do tempo quando os usuários clicam nos botões.

De esta maneira? Compartilhar em redes sociais: