Hur man skapar en interaktiv HTML-tidslinje

En tidslinje är ett användbart sätt att visa en lista över händelser på en webbsida, och en interaktiv tidslinje ger användarna viss kontroll över att visa innehåll. Medan det finns många sätt att skapa en interaktiv tidslinje, kräver de flesta mer än bara HTML (Hypertext Markup Language). Det finns dock en mycket enkel HTML-lösning. Du kan enkelt skapa interaktiva rullningslister för din tidslinje genom att använda HTML: s "stil" -attribut. Genom att göra detta kommer användarna av din tidslinje att kunna bläddra igenom innehållet som de vill.

Steg 1

Skapa din HTML-fil. Öppna ett nytt dokument i ett textredigeringsprogram och skapa en grundläggande HTML-sida. Lägg till den här koden i avsnittet "body" i HTML:

Delningselementet ("div") är en behållare för din tidslinjes händelselista. "Överflöd" -värdet för "auto" lägger till ett interaktivt rullningsfält när din tidslinje blir bredare eller högre än den här behållaren. Spara sidan som "tidslinje.html".

Steg 2

Skapa ditt eget tidslinjeinnehåll. Lägg till din tidslinjes händelser i stigande eller fallande ordning i utrymmet mellan de inledande och avslutande "div" -taggarna. Lägg till varje händelse inom sitt eget avsnitt med välformad HTML. Fortsätt spara sidan medan du arbetar.

Testa din HTML-kod. Öppna datorns webbläsare och ladda in "timeline.html." Om innehållet är större än "div" -behållaren ser du en interaktiv rullningslist. Justera värdena "bredd" och "höjd" på behållaren så att de passar din vertikala eller horisontella layout.