Part Two: Writing Your Web Page Header

Now that you have built your spreadsheet and know how to enter the data within it, you are ready to write the web page on which the timeline will be hosted. You'll do this by writing a document in HTML, the standard markup language for web pages. Don't worry if you have never written anything in HTML before as this tutorial is specifically designed for you. If you do want to know more about a specific tag or section of HTML, a Google search will be your best friend. Let me also suggest that you consult the HTML Code Tutorial.

The following eighteen steps will walk you through the creation of your timeline's web page from scratch. After selecting the appropriate tool for writing your web page, we will write the "header" and the "body" of the web page. This page covers the header (6 steps) and the next page covers the body (12 steps). At the end of the second page, I have included the complete code for a timeline's HTML document. My experience learning to build timelines, however, suggests that walking through the individual steps will best teach you how to customize your timeline to meet your own particular needs.

1. Selecting A Text or HTML Editor

To write your web page, you will need a text or HTML editor. I have typically used Dreamweaver when building my timelines as it gives me a lot of options for manipulating the HTML as well as a WYSIWYG interface. While Dreamweaver is a good tool, it is not free. Don't despair, however. For building your timeline's web page, you can use any text editor, even Notepad on Windows or TextEdit on Mac. If you want something a little more robust, consider SIMILE's list of free, recommend tools. (From this list, I opt for NotePad++ when I'm using a Windows computer without Dreamweaver.)

2. Starting Your HTML File

Once you have chosen your text or HTML editor, open a new file within it. Save and name that file something like "GibsonTimeline.html". The ".html" is especially important if you are working in a text editor as it may default to marking files created in it as ".txt".

Copy and paste the following text into your file.

<html>
<head>
   <title>XXX</title>
</head>

<body>
</body>
</html>

These are the bare bones of an HTML document. There are two sections within the document that we will edit to create the timeline: the header and the body. The header begins at the line <head> and ends at the line </head>. The body likewise begins and ends at <body> and </body>, respectively. We will first cover editing the header and then the body.

3. Title Your Web Page

The first thing that you will want to do is to title your web page. Replace the "XXX" within the <title> and </title> tags with your chosen title. Doing this will set the title that displays on the title bar of browser windows. Choose something that describes your page; for example, "The William Gibson Timeline".

<html>
<head>
   <title>The William Gibson Timeline</title>
</head>  

4. Fetching Scripts

Next, you need to instruct your web page to fetch the two scripts from the SIMILE Project that will power (1) Exhibit and its (2) timeline view. Copy and paste the following two lines into your header:

<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script>
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"></script>

The first line of code turns your web page into "an Exhibit." The second script is allows you to include the timeline view in the exhibit. We'll build the view below in the body of the web page.

The result should look something like this.

<html>
<head>
   <title>The William Gibson Timeline</title>
	
   <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script>
   <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"></script>
</head>

It's important to note that your spacings and indentations do not need to match mine. Web browsers ignore such things. It is, however, generally easier for humans to read HTML if you have done such things. Indenting and spacing your HTML will likely help you when building the page and when checking for inconsistencies.

5. Fetching Spreadsheet's Feed

The final thing you need to do in your header is add some lines of code that will fetch your spreadsheet's feed (which we talked about here) and then covert the data from that feed into a format that the Exhibit script can read. Paste the following into your header.

<link 	
   rel="exhibit/data" 
   type="application/jsonp"
   href="XXX?alt=json-in-script"
   ex:converter="googleSpreadsheets" /> 

Now, replace the "XXX" in the line that begins with "href " with the spreadsheet feed you copied earlier. Be sure you don't erase the "?alt=json-in-script".

6. Check Your Work on the Header

You're now done with editing the header of your timeline's web page. Your header should look very much like this.

<head>
   <title>The William Gibson Timeline</title>

   <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script>
   <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"></script> 
	
   <link 
      rel="exhibit/data" 
      type="application/jsonp"
      href="http://spreadsheets.google.com/feeds/list/o00811443551170090113.6982207830451557896/od6/public/basic?alt=json-in-script"
      ex:converter="googleSpreadsheets" />
</head>

If you want to add multiple bands to the timeline or if you want to control the page's style, then you can add extra code to this section. I'll cover these options in Advanced Timeline Customization.

But before you go there, you should write the body of your web page.

Creative Commons License
Timeline Tutorial by Brian Croxall
Exhibit and Timeline Scripts by MIT's Simile Project