HTML for Tree of Life Pages

With the introduction of the Easy Mode text editor in the ToL Web Tools, ToL authors do not need to know any HTML in order to compose their pages. This page provides instructions for the use of some basic HTML codes as well as custom ToL codes for those authors who prefer to work with the Advanced Mode text editor.

A note to HTML-proficient ToL authors: We discourage the use of deprecated tags and attributes to override ToL styles. We want to maintain a consistent look and feel across pages on the ToL site, and we are gradually cleaning up the code of ToL pages to comply with modern W3C recommendations. If there's something you don't like about the way ToL pages look, or if you would like to do something that doesn't seem to be possible within the current ToL framework, please let If you have good ideas on how to improve the look of your page and ToL pages in general, we will be happy to revise our styles to accommodate your request.

Here are the topics covered on this page:

• Separating paragraphs
• Forcing line breaks
• Adding subheaders
• Numbered and unnumbered lists
• Bold face and italics
• Images for text sections
• Creating hypertext links to other pages
• Tables
• Avoid overlapping HTML tags
• Web addresses: urls

Separating paragraphs

Typically a WWW browser ignores carriage returns and multiple spaces in an HTML file. Carriage returns are treated as no more than a space. So if you type the following text in an HTML document:

the text will appear like this in the WWW browser:

Here is a sentence. Here is a sentence that would be good to be in another paragraph.

To break your text into paragraphs, use paragraph codes: <p> at the beginning of each paragraph, and </p> at the end of each paragraph. For example,

will be displayed as

Forcing line breaks

To cause a line to be broken in two, without initiating a new paragraph, use the <br> command. For example, the following text:

Here is a sentence.<br> Here is a another sentence.

will be displayed as

Here is a sentence.
Here is a another sentence.

Without the <br> the two sentences would appear on the same line.

Adding Subheaders

ToL pages are structured with automatically generated section headers. However, sometimes you may want to further subdivide a text section into subsections. If you do this, it's best to mark your subheaders with <h4> tags; for example:

will be displayed as

Without the <br> the two sentences would appear on the same line.

Numbered and unnumbered lists

There are several styles of lists you can use. The following code:

<ul>
<li>First element in the list</li>
<li>Second element in the list</li>
</ul>

will be displayed as the following unnumbered list:

If instead of <ul> the <ol> tag is used:

<ol>
<li>First element in the list</li>
<li>Second element in the list</li>
</ol>

you will get a numbered list:

For more details about lists, see this page in Ian Graham's Introduction to HTML: http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/lists_gloss.html.

Bold face and italics

To make text bold, use the <strong> code. For example, the following text

Some <strong>bold</strong> text.

will appear as

Some bold text.

You can italicize text by using the <em> code. For example, the following text

Some <em>italic</em> text.

will appear as

Some italic text.

Images for text sections

All images used on ToL pages are imported directly from the ToL image database; therefore, we don't use regular HTML for the insertion of images but rather a modified code that instructs our system to fetch a given image. The insertion of title images on branch and leaf pages is handled through a graphical user interface (see Tutorial Lesson 9: Title Illustrations). However, in order to insert an image in a text section on your page, you currently have to use a simple custom tag. Actually, you can ask TreeGrow to insert that tag for you by clicking on the Add Image button (see Tutorial Lesson 10: Adding Images to Text Sections). For example, if you (or TreeGrow) inserted the following tag in a text section:

<p>Here's some text for a text section.</p> <ToLimg id="5558">

the image with id #5558 would be fetched from the ToL database, and inserted in your text section:

There are a number of options available for formatting the display of images:

• Setting the image size
• Centering the image on the page
• Putting a border around the image
• Centering the image and putting a border around it
• Floating the image beside text
• Displaying several images next to one another
• Formatting image captions

Setting the image size

By default, an image that's inserted in a text section will be shown at the size of its master file (i. e., the original file uploaded by the image contributor). Authors have the option to scale images down from their original size by inserting a size attribute, e. g.:

<ToLimg id="5558" size="200">

The value of the size attribute will determine the height in pixels at which the image will be displayed on the web page; i. e., if you insert a value of 200, the ToL system will create a new version of the image that's 200 pixels high, and it will use this autogenerated image file on your ToL page. The maximum size of scaled images is constrained by the size of the master image (we do not auto-enlarge images), and downscaled versions are available in discrete sizes at 50 pixel increments; e. g., if the master file for an image is 480 pixels high, you could specify the following size values: 450, 400, 350, 300, 250, 200, 150. If you insert a value that's not available for a given image, we will use the nearest available size below the specified value.

Centering the image on the page

In order to center an image on a page, insert class="center" in the ToL image tag, e. g.:

<p>Here's some text for a text section, and then there's a centered image.</p> <ToLimg id="5558" class="center">

Putting a border around the image

Putting a thin border around an image often improves the look of images with light backgrounds. In order to do this, insert class="border" in the ToL image tag, e.g.:

<p>Here's some text for a text section, and then there's an image with a border.</p> <ToLimg id="5558" class="border">

Centering the image and putting a border around it

In order to center an image on a page and put a border around it, insert class="bc" in the ToL image tag; e.g.:

<p>Here's some text for a text section, and then there's a centered image with a border.</p> <ToLimg id="5558" class="bc">

Floating the image beside text

Floating images are displayed beside a column of text. You can float an image on a ToL page by giving it a class of either "floatright" or "floatleft". If you want to give a floated image a border, you can use class="bfr" for images floated on the right and class="bfl" for images floated on the left; e.g.:

Displaying several images next to one another

If you want to display several images next to one another, you can simply put plain image tags or image tags with class="border" next to one another. Leaving a space between image tags will result in a narrow space between image; taking out the spaces will display the images right next to one another; e.g.:

Note that images will be displayed next to one another only if the browser window is wide enough to accommodate them. If the window is too narrow, images will drop down from the right of the array.

Image arrays in text sections often look better when they are centered on the page. To center an array, you can wrap div tags around it and give it class="center"; e.g.:

Formatting image captions

When you use an image on a ToL page, you should give it a caption. In general, it's a good idea to set off image captions from the general text. You can do this formatting your caption paragraphs with a special "caption" style; e. g.:

If you don't want your caption to be centered, you can use class="captionleft". This will do the same thing, except for the centering:

Creating hypertext links to other pages

If you want a piece of text or a picture to be a hypertext link to another WWW page (such that clicking on the text or picture will take you to that other page), you need to surround the text or picture with an anchor command. The following text:

Let's go to <a href="http://tolweb.org/tree/sep/anotherpage.html">another page</a>

will be displayed as

Let's go to another page

and the words "another page" will be a link to another page.

In the anchor command, the entry inside the double-quotes is the URL of the page you will jump to.

Tables

Tabular data can be displayed in a table. Here is the coding for a simple table:

The previous code will be displayed as follows in the WWW browser:

 

Here is the code for a table with borders:

This code will be displayed as follows in the WWW browser:

Avoid overlapping HTML tags

When composing your HTML, avoid overlapping tags, i.e., if you open one tag and then open a second tag before closing the first, the second tag must be closed before you close the first one. For example, if you want to have some text that's both bold and italic, you can code this in one of two ways:

Web addresses: urls

URLs (uniform resource locators) describe the location of a file, which can be another World Wide Web HTML file, or a graphics file, or whatever.

URLs can be relative or absolute. A relative URL is one that specifies the position of the target document relative to the current file. A relative URL is appropriate only if the link between the current file and the target document is local, i.e., the two files are located on the same server. For example, if a file called "file.html" is in the same directory or folder on the same server as this file, its relative URL would be "file.html". However, if it were in a subdirectory of the one this file is in, and say the subdirectory was called "subdirectory", then the file could be referred to as "subdirectory/file.html". The absolute URL of the file would then be something like this: "http://some.server.edu/mydirectory/subdirectory/file.html".

Absolute URLs must be used whenever the links between the current file and the target document is remote, i.e., when the two files are located on different servers.

Here are some more details about relative URLs:

• file.html - this refers to the file "file.html" in the current directory.
• sub/file.html - this refers to the file "file.html" in the subdirectory "sub".
• sub/ - this refers to the subdirectory "sub".
• sub1/sub2/file.html - this refers to the file "file.html" in the subdirectory "sub2" which is in the subdirectory "sub1".
• ../file.html - this refers to the file "file.html" in the directory that contains the current directory
• ../ - this refers to the directory that contains the current directory
• ../../ - this refers to the directory that contains the directory that contains the current directory