So erstellen Sie eine interaktive HTML-Timeline

Eine Zeitleiste ist eine nützliche Methode, um eine Liste von Ereignissen auf einer Webseite anzuzeigen, und eine interaktive Zeitleiste gibt Benutzern eine gewisse Kontrolle über die Anzeige von Inhalten. Es gibt zwar viele Möglichkeiten, eine interaktive Zeitleiste zu erstellen, aber die meisten erfordern mehr als nur Hypertext Markup Language (HTML). Es gibt jedoch eine sehr einfache HTML-Lösung. Sie können ganz einfach interaktive Bildlaufleisten für Ihre Zeitleiste erstellen, indem Sie das "style"-Attribut von HTML verwenden. Auf diese Weise können die Benutzer Ihrer Timeline nach Belieben durch den Inhalt scrollen.

Schritt 1

Erstellen Sie Ihre HTML-Datei. Öffnen Sie ein neues Dokument in einem Texteditor-Softwareprogramm und erstellen Sie eine einfache HTML-Seite. Fügen Sie diesen Code in den HTML-Abschnitt "body" ein:

Das division-Element ("div") ist ein Container für die Ereignisliste Ihrer Timeline. Der "overflow"-Wert von "auto" fügt eine interaktive Bildlaufleiste hinzu, wenn Ihre Zeitleiste breiter oder höher als dieser Container wird. Speichern Sie die Seite als "timeline.html".

Schritt 2

Erstellen Sie Ihre eigenen Timeline-Inhalte. Fügen Sie im Raum zwischen dem öffnenden und dem schließenden "div"-Tag die Ereignisse Ihrer Zeitleiste in aufsteigender oder absteigender Reihenfolge hinzu. Fügen Sie jedes Ereignis in einen eigenen Abschnitt mit wohlgeformtem HTML ein. Speichern Sie die Seite während der Arbeit.

Testen Sie Ihren HTML-Code. Öffnen Sie den Webbrowser Ihres Computers und laden Sie "timeline.html". Wenn sein Inhalt größer als der Container "div" ist, sehen Sie eine interaktive Bildlaufleiste. Passen Sie die Werte für "Breite" und "Höhe" des Containers an Ihr vertikales oder horizontales Layout an.