How to Create an Interactive HTML Timeline

Written by steve sweeney-turner
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Create an Interactive HTML Timeline
Making an HTML time line interactive takes little time. (Paddington clock face image by Karen Hadley from Fotolia.com)

A time line is a useful way to display a list of events on a web page, and an interactive time line gives users some control over viewing content. While many ways exist to create an interactive time line, most require more than just hypertext markup language (HTML). However, there is one very simple HTML solution. You can easily create interactive scrollbars for your time line by using HTML's "style" attribute. By doing this, your time line's users will be able to scroll through its contents as they like.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Text editor software program

Show MoreHide

Instructions

  1. 1

    Create your HTML file. Open a new document in a text editor software program and create a basic HTML page. Add this code within the HTML "body" section:

    <div style="width:400px; height:400px; overflow:auto;">

    </div>

    The division element ("div") is a container for your time line's list of events. The "overflow" value of "auto" adds an interactive scrollbar when your time line gets wider or higher than this container. Save the page as "timeline.html".

  2. 2

    Create your own time line content. In the space between the opening and closing "div" tags, add your time line's events in ascending or descending order. Add each event within its own section of well-formed HTML. Keep saving the page as you work.

  3. 3

    Test your HTML code. Open your computer's web browser and load "timeline.html." If its content is bigger than the "div" container, you will see an interactive scrollbar. Adjust the "width" and "height" values of the container to suit your vertical or horizontal layout.

Tips and warnings

  • Vertical layouts are the easiest to code. Simply wrap each of your event sections within its own "div" element. For a horizontal layout, you could use a table with a single row and a column cell for each event. If you do this, make your table's height the same as your "div" container's height. Take care with your table's vertical "margin" and "padding" values.
  • This article creates an interactive scrollbar by using an "inline" cascading style sheet (CSS). "Inline" style sheets go inside the "style" attribute of a HTML element's opening tag. You could use an "internal" or "external" style sheet instead, however. "Internal" style sheets go inside the HTML "head" section. "External" style sheets are separate ".css" files. Using either of these types gives you more control over the formatting of any HTML content.
  • You could extend the interactivity of the example by using JavaScript. You could start by adding HTML buttons, and then write a JavaScript to move your time line content when users click the buttons.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.