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 visning av innehåll. Även om det finns många sätt att skapa en interaktiv tidslinje, de flesta kräver mer än bara hypertextmarkup -språk (HTML). Dock, det finns en mycket enkel HTML -lösning. Du kan enkelt skapa interaktiva rullningslister för din tidslinje med HTML -attributet "style". Genom att göra det här, din tidslinjes användare kommer 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 HTML -avsnittet "kropp":Delningselementet ("div") är en behållare för din tidslinjes händelselista. "Överflödet" -värdet för "auto" lägger till en interaktiv rullningslist när din tidslinje blir bredare eller högre än den här behållaren. Spara sidan som "timeline.html".

Steg 2

Skapa ditt eget tidslinjeinnehåll. Mellanrummet mellan "div" -taggarna som öppnar och stänger, lägg till din tidslinjes händelser i stigande eller fallande ordning. Lägg till varje händelse inom sitt eget avsnitt av välformad HTML. Spara sidan medan du arbetar.

Testa din HTML -kod. Öppna datorns webbläsare och ladda "timeline.html." Om innehållet är större än "div" -behållaren, du kommer att se en interaktiv rullningslist. Justera behållarens "bredd" och "höjd" för att passa din vertikala eller horisontella layout.

Tips

• Vertikala layouter är de enklaste att koda. Slå in var och en av dina eventavsnitt inom sitt eget "div" -element. För en horisontell layout, du kan använda en tabell med en enda rad och en kolumncell för varje händelse. Om du gör detta, gör bordets höjd samma som din "div" behållares höjd. Var försiktig med ditt bords vertikala "marginal" och "stoppning" värden.
• Denna artikel skapar en interaktiv rullningslist med hjälp av ett "inline" kaskadformatark (CSS). "Inline" stilark går in i "style" -attributet för ett HTML -elements öppningstagg. Du kan använda ett "internt" eller "externt" formatmall istället, dock. "Interna" formatmallar går in i HTML -huvudet. "Externa" formatmallar är separata ".css" -filer. Genom att använda någon av dessa typer får du mer kontroll över formateringen av HTML -innehåll.
• Du kan utöka exempelets interaktivitet med JavaScript. Du kan börja med att lägga till HTML -knappar, och skriv sedan ett JavaScript för att flytta ditt tidslinjeinnehåll när användare klickar på knapparna.

Artiklar du behöver

• Programvara för textredigerare