Como criar uma linha do tempo interativa com HTML

Uma linha do tempo é uma maneira útil de exibir uma lista de eventos em uma página da Web, além de fornecer aos usuários algum controle sobre o conteúdo que eles visualizam. Embora existam muitas maneiras de criar uma linha do tempo interativa, a maioria exige mais do que apenas HTML (hypertext markup language). No entanto, existe uma solução HTML muito simples. Você pode criar barras de rolagem interativas para sua linha do tempo, usando o atributo “estilo” do HTML. Ao fazer isso, os usuários da sua linha do tempo poderão navegar pelo conteúdo da maneira que quiserem.

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 do tempo se torna maior ou mais alta que seu contêiner. Salve esta página como “timeline.html”.

Etapa 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 crescente ou decrescente. Adicione cada evento com sua própria seção HTML bem formada. Mantenha a página constantemente enquanto trabalha nela.

Etapa 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 ajustar o layout vertical ou horizontal da sua página.

Referências

 

Você pode estar interessado:

Deixe um comentário