Como criar uma linha do tempo interativa com HTML

Fazer uma linha do tempo interativa com HTML requer muito pouco tempo.

Passo 1

Crie seu arquivo HTML. Abra um novo documento em um programa de edição de texto e crie uma página HTML básica. Adicione este código na seção "corpo" da página:

O elemento de divisão ("div") é um contêiner para a lista de eventos em sua linha do tempo. O valor "overflow" de "auto" (automação) adiciona uma barra de rolagem interativa quando sua linha de tempo se torna mais larga ou mais alta que seu contêiner. Guarde esta página como "timeline.html".

Passo 2

Crie o conteúdo da sua linha do tempo. No espaço entre as tags "div" de abertura e fechamento, adicione os eventos em ordem decrescente ou crescente. Adicione cada evento com sua própria seção HTML bem formada. Mantenha a página constantemente enquanto você trabalha nela.

Passo 3

Teste seu código HTML Abra o navegador da Web do seu computador e carregue o arquivo "timeline.html". Se o conteúdo for maior que o contêiner "div", você verá uma barra de rolagem interativa. Ajuste os valores de "largura" e "altura" para corresponder ao layout vertical ou horizontal de sua página.