All the HTML You Will Likely Need

When you choose "Save Tree of Life File" in ToL-MacClade, it takes the information you have entered into the various Tree of Life windows, along with the tree on the screen, and creates a World Wide Web page. ToL-MacClade includes within the file many HTML codes for the toolbars, links to descendent pages, etc. (You will see these if you use a word processor to look at the .html file ToL-MacClade creates.) These HTML codes are transmitted to the user's WWW browser, which uses them to format the page for display.

While you can produce a complete Tree of Life page without knowing any HTML codes, there are a few you might wish to learn to improve your page. For example, you can add codes in one of ToL-MacClade's Tree of Life text editing windows that will place an illustration in the Introduction, or separate paragraphs in the Discussion of Phylogenetic Relationships section.

This page lists those codes you are most likely to use. If you wish to learn more, one good place to start is Ian Graham's HTML Documentation. Another is the Beginner's guide to HTML.

Here are some codes you may want to use on your pages:

Separating paragraphs

Forcing line breaks

Adding images

Creating hypertext links to other pages

Numbered and unnumbered lists

Bold face

Tables

Horizontal centering

In addition, here are some instructions on how to refer to files and directories on the WWW:

Web addressess: urls
Ways to refer to Tree of Life files and directories

If there are other things you would like to do, please contact us so that we may add the details to 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 into one of MacClade's Tree of Life text windows (for example, the Introduction):

then ask MacClade to save the Tree of Life page and place it on a WWW server, 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 images

To add images among some text, use the IMG command. For example, if you place a JPEG graphics file on the WWW server in the same folder or directory as the .html file, and call the file "beetle.jpeg", then include the following line in your text:

 

Here is what Bembidion inaequale looks like: <IMG SRC="beetle.jpeg">

the browser will display

Here is what Bembidion inaequale looks like:

(The entry inside double-quotes in the SRC section of the IMG command is the URL of the image. You could even have a URL that is on another computer. )

For more details about the IMG code, including positioning of the picture relative to text, see this page in Ian Graham's Introduction to HTML.

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

Numbered and unnumbered lists

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

<UL> <LI> First element in the list <LI> Second element in the list </UL>

will be displayed as the following unnumbered list:

First element in the list Second element in the list

If instead of <UL> the <OL> command is used:

<OL> <LI> First element in the list <LI> Second element in the list </OL>

you will get a numbered list

First element in the list Second element in the list

For more details about lists, see this page in Ian Graham's Introduction to HTML.

Bold face

To emphasize text, use the <B> command. For example, the following text

Some <B>bold</B> text.

will appear as

Some bold text.

Tables

Tables can be useful in controlling the layout of text and images withing ToL text sections. Here is the coding for a simple 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 and instructions for the distances between cell content and cell borders as well as distances between table cells:

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

For more details about tables, look at this page in Ian Graham's Introduction to HTML.

Centering text and pictures

You can center text and pictures in a paragraph by putting the ALIGN=CENTER command within a <P> tag.

For example, this

will appear as:

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 "http://tolweb.org/tree/sep/tech/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

Ways to refer to Tree of Life files and directories

The name of a Tree of Life file should have the following properties:

• only lower case letters should be used, as ToL-MacClade automatically converts any names it writes into lower case.
• basic Tree of Life pages should all end in the extension ".html".

The name of a directory should have the following properties:

• only lower case letters should be used, as ToL-MacClade automatically converts any names it writes into lower case.
• directory names should end in "/"
• containing directories are referred to by "../". That is, if the directory "beetle" was contained within the directory "insects", then from within the beetle directory, the insect directory would be referred to as "../". To refer to three directory levels below the current on, "../../../" could be used.

The following examples illustrate these rules:

• 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