Hvordan lage en interaktiv HTML tidslinje

Hvordan lage en interaktiv HTML tidslinje


En tidslinjen er en nyttig måte å vise en liste over hendelser på en nettside, og en interaktiv tidslinje gir brukerne en viss kontroll over visning innhold. Mens mange måter eksisterer for å skape en interaktiv tidslinje, de fleste krever mer enn bare Hypertext Markup Language (HTML). Men det er en meget enkel HTML-løsning. Du kan enkelt lage interaktive rullefelt for din tidslinje ved hjelp av HTML er "stil" attributtet. Ved å gjøre dette, vil din tid linjens brukerne kunne bla gjennom innholdet som de vil.

Bruksanvisning

1 Lag din HTML-fil. Åpne et nytt dokument i en tekst editor program og lage en enkel HTML-side. Legg denne koden i HTML "body" -delen:

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

</ Div>

Divisjonen element ( "div") er en beholder for din tidslinje liste over hendelser. Den "overflow" verdien av "auto" legger en interaktiv scrollbar når tiden linjen blir bredere eller høyere enn denne beholderen. Lagre siden som "timeline.html".

2 Lag din egen tidslinje innhold. I rommet mellom åpningen og avsluttende "div" koder, legge til tid linjer hendelser i stigende eller synkende rekkefølge. Legg hver hendelse i sin egen del av velformet HTML. Fortsett å ta vare på siden mens du arbeider.

3 Test din HTML-kode. Åpne datamaskinens nettleser og last "timeline.html." Hvis innholdet er større enn "div" container, vil du se en interaktiv scrollbar. Juster "width" og "høyde" verdier i beholderen som passer din vertikal eller horisontal layout.

Hint

  • Vertikale oppsett er lettest å kode. Bare pakk hver av hendelses seksjonene innenfor sin egen "div" element. For en horisontal layout, kan du bruke en tabell med en enkelt rad og en kolonne celle for hver hendelse. Hvis du gjør dette, må bordet høyde det samme som "div" container høyde. Vær forsiktig med bordet ditt vertikale "margin" og "padding" verdier.
  • Denne artikkelen gir en interaktiv scrollbar ved hjelp av en "inline" ark Cascading Style (CSS). "Inline" stilark gå inn i "stil" attributt for en HTML-element åpnings tag. Du kan bruke en "intern" eller "ytre" style sheet stedet, men. "Interne" stilark gå inn i HTML "head" -seksjonen. "Eksterne" stilark er separate "CSS" filer. Ved hjelp av en av disse typene gir deg mer kontroll over formateringen av HTML-innhold.
  • Du kan utvide interaktivitet på eksempel ved hjelp av Javascript. Du kan begynne med å legge til HTML-knapper, og deretter skrive et Javascript for å flytte tidslinje innhold når brukere klikker på knappene.