Como criar uma linha do tempo interativa html

A linha do tempo é uma maneira útil para exibir uma lista de eventos em uma página da web, e uma linha do tempo interativa oferece aos usuários algum controle sobre o conteúdo de visualização. Embora existam muitas maneiras de criar uma linha do tempo interativa, a maioria exige mais do que linguagem de marcação apenas hipertexto (HTML). No entanto, há uma solução HTML muito simples. Você pode facilmente criar barras de rolagem interativos para sua linha de tempo usando HTML do "estilo" atributo. Ao fazer isso, os usuários da sua linha do tempo será capaz de percorrer o seu conteúdo como eles gostam.

Criar seu arquivo HTML. Abra um novo documento em um programa de software editor de texto e criar uma página HTML básico. Adicione este código dentro do HTML "corpo" seção: O elemento de divisão ("div") É um recipiente para a lista de sua linha de tempo de eventos. o "transbordar" valor de "auto" adiciona uma barra de rolagem interativa quando a sua linha do tempo fica mais largo ou superior a este recipiente. Salve a página como "timeline.html".

Criar o seu próprio conteúdo linha do tempo. No espaço entre a abertura e fechamento "div" Tag, adicionar eventos da sua linha do tempo em ordem crescente ou decrescente. Adicionar cada evento âmbito da sua secção do HTML bem formado. Mantenha salvar a página como você trabalha.

Teste o seu código HTML. Abra o navegador web do seu computador e de carga "timeline.html." Se o seu conteúdo é maior do que o "div" recipiente, você verá uma barra de rolagem interativa. Ajusta a "largura" e "altura" valores do recipiente de acordo com seu layout vertical ou horizontal.

dicas

• Verifica layouts verticais são o mais fácil de código. Basta enrolar cada uma de suas seções de eventos dentro de sua própria "div" elemento. Para um layout horizontal, você poderia usar uma tabela com uma única linha e uma célula de coluna para cada evento. Se você fizer isso, verifique a altura de sua mesa o mesmo que o seu "div" altura do recipiente. Tome cuidado com o verticais sua mesa "margem" e "preenchimento" valores.
• Verifica Este artigo cria uma barra de rolagem interativa usando um "na linha" folha de estilo em cascata (CSS). "Na linha" folhas de estilo ir para dentro da "estilo" atributo da marca de abertura de um elemento HTML. Você poderia usar um "interno" ou "externo" folha de estilo em vez disso, no entanto. "interno" folhas de estilo ir para dentro do HTML "cabeça" seção. "Externo" folhas de estilo são separados "Css" arquivos. Usando qualquer um destes tipos lhe dá mais controle sobre a formatação de qualquer conteúdo HTML.
• Verifica Você poderia estender a interatividade do exemplo usando javascript. Você poderia começar por adicionar botões HTML e, em seguida, escrever um javascript para mover seu conteúdo linha do tempo quando os usuários clicam nos botões.

Referências

• ligação Estilos HTML: W3Schools.com
• ligação W3Schools.com: CSS Overflow propriedade

Sobre o autor

carreira de escritor de Steve Sweeney-Turner começou em 1989 como jornalista de música clássica para revistas como "The Musical Times," "Tempo" e "Cencrastus." Ele também tem escrito extensivamente como um acadêmico, incluindo capítulos de livros publicados pelas editoras universitárias de Oxford, Manchester e Cork. Ele possui um Ph.D. em musicologia pela Universidade de Edimburgo e um diploma de pós-graduação em tecnologia da informação da Universidade de Glasgow.