Como criar uma linha do tempo interativa em HTML

••• paddington clock face image by Karen Hadley from Fotolia.com

Uma linha do tempo é uma forma útil de mostrar uma lista de eventos em uma página da web, e uma linha do tempo interativa dá aos usuários o controle da visualização de conteúdo. Embora existam muitas formas de criar uma linha do tempo interativa, muitas precisam de mais do que HTML. No entanto, há uma solução HTML muito simples: você pode criar barras de rolagem interativas na sua linha de tempo por meio do atributo "style" de HTML. Ao fazer isso, os usuários poderão se mover pelo conteúdo livremente.

Passo 1

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

O elemento de divisão ("div") é um recipiente para a lista de eventos da sua linha de tempo. O valor "auto" em "overflow" adiciona barras de rolagem interativas quando a linha de tempo fica mais comprida ou larga do que o recipiente. Salve a página como "timeline.html".

Passo 2

Crie o conteúdo. No espaço entre as etiquetas "div", adicione os eventos da linha de tempo em ordem ascendente ou descendente. Adicione cada evento em sua própria seção de HTML bem formado. Salve continuamente a página enquanto trabalha.

Passo 3

Teste seu código HTML. Abra o arquivo "timeline.html" no navegador web do seu computador. Se o conteúdo for maior do que o recipiente "div", você verá uma barra de rolagem interativa. Ajuste os valores "width" (largura) e "height" (altura) do recipiente para ajustá-lo ao seu traçado vertical ou horizontal.

Mais recentes

×