Como criar uma linha do tempo interativa em HTML

Escrito por steve sweeney-turner | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar uma linha do tempo interativa em HTML
Fazer uma linha do tempo HTML interativa leva pouco tempo (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.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Programa de edição de texto

Lista completaMinimizar

Instruções

  1. 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:

    <div style="width:400px; height:400px; overflow:auto;"> </div>

    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".

  2. 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.

  3. 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.

Dicas & Advertências

  • 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.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível