Sådan oprettes en interaktiv HTML-tidslinje

En tidslinje er en nyttig måde at vise en liste over begivenheder på en webside, og en interaktiv tidslinje giver brugerne en vis kontrol over at se indhold. Mens der findes mange måder at oprette en interaktiv tidslinje på, kræver de fleste mere end bare hypertekstmarkup-sprog (HTML). Der er dog en meget enkel HTML-løsning. Du kan nemt oprette interaktive rullepaneler til din tidslinje ved hjælp af HTML's "stil" -attribut. Ved at gøre dette vil brugerne af din tidslinje være i stand til at rulle gennem dens indhold, som de vil.

Trin 1

Opret din HTML-fil. Åbn et nyt dokument i et teksteditor-softwareprogram, og opret en grundlæggende HTML-side. Tilføj denne kode inden for HTML "body" sektionen:

Opdelingselementet ("div") er en container til din tidslinjes liste over begivenheder. Værdien "overløb" af "auto" tilføjer en interaktiv rullepanel, når din tidslinje bliver bredere eller højere end denne container. Gem siden som "tidslinje.html".

Trin 2

Opret dit eget tidslinjeindhold. I mellemrummet mellem de åbne og lukende "div" tags tilføj din tidslinjes begivenheder i stigende eller faldende rækkefølge. Tilføj hver begivenhed inden for sin egen sektion af velformet HTML. Bliv ved med at gemme siden, mens du arbejder.

Test din HTML-kode. Åbn din computers webbrowser og indlæs "timeline.html." Hvis dens indhold er større end "div" -beholderen, vil du se en interaktiv rullepanel. Juster værdierne "bredde" og "højde" for containeren, så de passer til dit lodrette eller vandrette layout.