Hvordan lage en interaktiv HTML-tidslinje

En tidslinje er en nyttig måte å vise en liste over hendelser på en webside, og en interaktiv tidslinje gir brukerne litt kontroll over visning av innhold. Mens det finnes mange måter å lage en interaktiv tidslinje på, krever de fleste mer enn bare HTML (HTML). Imidlertid er det en veldig enkel HTML-løsning. Du kan enkelt lage interaktive rullefelt for tidslinjen din ved å bruke HTMLs "stil" -attributt. Ved å gjøre dette, vil tidslinjens brukere kunne bla gjennom innholdet som de vil.

Trinn 1

Lag HTML-filen. Åpne et nytt dokument i et tekstredigeringsprogram og opprett en grunnleggende HTML-side. Legg til denne koden i HTML-delen "body":

Inndelingselementet ("div") er en beholder for tidslinjens liste over hendelser. "Overflyt" -verdien til "auto" legger til en interaktiv rullefelt når tidslinjen blir bredere eller høyere enn denne beholderen. Lagre siden som "tidslinje.html".

Steg 2

Lag ditt eget tidslinjeinnhold. Legg inn tidslinjens begivenheter i stigende eller synkende rekkefølge i mellomrommet mellom de åpne og lukkende "div" -kodene. Legg til hver hendelse innenfor sin egen seksjon av velformet HTML. Fortsett å lagre siden mens du jobber.

Test HTML-koden din. Åpne datamaskinens nettleser og last inn "timeline.html." Hvis innholdet er større enn "div" -beholderen, vil du se en interaktiv rullefelt. Juster "bredde" og "høyde" verdiene til beholderen slik at de passer til vertikal eller horisontal layout.