go to the Tree of Life home page

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

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:

Here is a sentence.

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

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,

<p> Here is a sentence.</p>

<p> Here is a sentence that would be good to be in another paragraph.</p>

will be displayed as

Here is a sentence.

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

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:

<h4>Here is a Subheading</h4>

<p>Here is some text after the subheading.</p>

will be displayed as

Here is a Subheading

Here is some text after the subheading.

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:

  1. First element in the list
  2. Second element in the 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:

Here's some text for a text section.

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

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">

Here's some text for a text section, and then there's a centered image.

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">

Here's some text for a text section, and then there's an image with a 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">

Here's some text for a text section, and then there's a centered image with a border.

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.:

<p><ToLimg id="5558" class="floatright"> Here's some text with an image floated on the right.....</p>

<p><ToLimg id="5548" class="bfl"> Here's some text with an image that has a border and is floated on the left.</p>

<p>Use floating images parsimoniously.....</p>

Here's some text with an image floated on the right. The code for a floated image should always be placed immediately before the text it is supposed to accompany. The floated image is then displayed side by side with the text.When the text reaches past the bottom of the floated image, it will wrap around it. You can play with the width of your browser window to see how the text stays clear of the floated image and then wraps around once the window gets narrow enough.

Here's some text with an image that has a border and is floated on the left.

Use floating images parsimoniously. Floating elements can cause problems in some browsers, particularly Microsoft Explorer, which is still used by almost 80% of ToL visitors. When using floating images, keep in mind that not all people have extra-wide monitors. If your image is very wide, people with small monitors may end up seeing a very narrow column of text next to your image. When using floating images, be sure to carefully check your layout by playing around with your window width when previewing the page.

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.:

<p>Here's some text for a text section, and then there are three images with borders and spaces between them.</p>
<ToLimg id="5548" class="border"> <ToLimg id="5558" class="border"> <ToLimg id="5568" class="border">

<p>Here's some more text, and then three images without borders or spaces between them.</p>
<ToLimg id="5548"><ToLimg id="5558"><ToLimg id="5568">

Here's some text for a text section, and then there are three images with borders and spaces between them.

Here's some more text, and then three images without borders or spaces between them.

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.:

<p>Here's some text for a text section, and there is a centered image array.</p>

<div class="center"><ToLimg id="5548"><ToLimg id="5558"><ToLimg id="5568"></div>

Here's some text for a text section, and there is a centered image array.

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.:

<p>Here's some general text for a text section, followed by a centered image</p>

<ToLimg id="5558" class="center">

<p class="caption">The caption paragraph for the image uses a special class that causes the text to be smaller and lighter. Also, the caption paragraph is centered on the page.</p>

Here's some general text for a text section, followed by a centered image

The caption paragraph for the image uses a special class that causes the text to be smaller and lighter. Also, the caption paragraph is centered on the page.

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:

<p>Here's some general text for a text section, followed by a left-aligned image.</p>

<ToLimg id="5558">

<p class="captionleft">This caption will align on the left.</p>

Here's some general text for a text section, followed by a left-aligned image.

This caption will align on the left.

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:

<table>

<tr>
<td> First Row, First Cell</td>
<td> First Row, Second Cell</td>
</tr>

<tr>
<td> Second Row, First Cell</td>
<td> Second Row, Second Cell</td>
</tr>

</table>

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

First Row, First Cell First Row, Second Cell
Second Row, First Cell Second Row, Second Cell

 

Here is the code for a table with borders:

<table class="border">

<tr>
<td> First Row, First Cell</td>
<td> First Row, Second Cell</td>
</tr>

<tr>
<td> Second Row, First Cell</td>
<td> Second Row, Second Cell</td>
</tr>

</table>

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

First Row, First Cell First Row, Second Cell
Second Row, First Cell Second Row, Second Cell

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:

<em><strong>Some italic, bold text</strong></em>
or
<strong><em>Some italic, bold text</em></strong>

But you should not do it like this:

<em><strong>Some italic, bold text</em></strong>
or
<strong><em>Some italic, bold text</strong></em>

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:

 

Contribute to the ToL

ToL Contributions

Ways to Contribute

Use of Contributions

Scientific Content

Core Contributions

Articles & Notes

Tips & Guidelines

Images/Media

Contributors TWiki

Registration

Contributors List

top