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.
Step 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".
Step 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.
Step 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.
Referências
Recursos
Dica
- Os traçados verticais são os mais fáceis de codificar. Coloque cada seção de eventos em um elemento "div" separado. Para um traçado horizontal, você pode usar uma tabela com uma fila única e, para cada evento, uma célula de coluna. Ao fazer isso, dê à tabela a mesma altura do que o recipiente "div". Tome cuidado com os valores de "margin" (margem) e "padding" da tabela.
- Este artigo cria uma barra de rolagem interativa usando uma folha de estilo CSS "inline". As folhas desse tipo são inclusas dentro do atributo "style" nas etiquetas de abertura dos elementos HTML. Você pode usar uma folha de estilos "interna" ou "externa" em vez disso; no entanto, as folhas "internas" são usadas na seção "head" do HTML. Os arquivos "externos" são arquivos ".css" separados. Usar um desses tipos lhe dá um maior controle sobre o formato de qualquer conteúdo HTML.
- É possível dar mais interatividade ao exemplo usando JavaScript. Você pode começar adicionando botões HTML e, em seguida, escrevendo o código JavaScript que move o conteúdo da linha do tempo quando os usuários clicam nos botões.
Sobre o Autor
Steve Sweeney-Turner's writing career began in 1989 as a classical music journalist for magazines such as "The Musical Times," "Tempo" and "Cencrastus." He has also written extensively as an academic, including book chapters published by the university presses of Oxford, Manchester and Cork. He holds a Ph.D. in musicology from Edinburgh University and a postgraduate diploma in information technology from Glasgow University.
Créditos Fotográficos
paddington clock face image by Karen Hadley from Fotolia.com