Sådan oprettes en interaktiv HTML-tidslinje

Forfatter: Robert White
Oprettelsesdato: 26 August 2021
Opdateringsdato: 9 Kan 2024
Anonim
Sådan oprettes en interaktiv HTML-tidslinje - Elektronik
Sådan oprettes en interaktiv HTML-tidslinje - Elektronik

Indhold

En tidslinje er en nyttig måde at vise en liste over begivenheder på en webside, og en interaktiv tidslinje giver brugerne kontrol over indholdsvisningen. Mens der er mange måder at oprette en interaktiv tidslinje på, har mange brug for mere end HTML. Der er dog en meget enkel HTML-løsning: Du kan oprette interaktive rullepaneler på din tidslinje ved hjælp af HTML-"attribut" -attributten. Ved at gøre dette kan brugerne bevæge sig frit omkring indholdet.

Trin 1

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

Opdeleren ("div") er en container til listen over begivenheder i din tidslinje. Værdien "auto" i "overløb" tilføjer interaktive rullebjælker, når tidslinjen er længere eller bredere end containeren. Gem siden som "tidslinje.html".


Trin 2

Opret indholdet. I mellemrummet mellem "div" -tags skal du tilføje begivenhederne på tidslinjen i stigende eller faldende rækkefølge. Tilføj hver begivenhed i sin egen velformede HTML-sektion. Gem siden kontinuerligt, mens du arbejder.

Trin 3

Test din HTML-kode. Åbn filen "timeline.html" i din computers webbrowser. Hvis indholdet er større end "div" -beholderen, vil du se en interaktiv rullebjælke. Juster beholderne "bredde" og "højde" for at passe til dens lodrette eller vandrette streg.