go to the Tree of Life home page

All the HTML You Need

treehouse builders toolkit

HTML is the special code used to create web pages. Builders who write their own HTML code to create their treehouses add text and HTML in the treehouse editing text section, as seen in the image below.

HTML to use in the text section of the treehouse editing form.

To create your treehouse you need to know a very minimal amount of html. In fact, all you need to do is to put your paragraphs within the HTML tags that indicate you have written a paragraph. The HTML tags listed in the links below are presented in order of usefulness to you as a treehouse builder. Please note that we will continually add new styles that more advanced treehouse builders can incorporate into their pages. Be sure and see the Problems to Watch out For! section.

Forgetting to close your HTML tags is the most common problem you will run into. For example, if you begin a list with <ul> you need to remember to end it with </ul>

Paragraphs

<p>Put the text for your paragraphs inside p tags like those that you see around this sentence.</p>
<p>To begin a new paragraph put it inside new p tags.</p>

Make sure to note that the ending p tag has a slash in front of the p that means that the paragraph has ended.

Using ToL code to insert images and other media in your page

We use a special type of code for you to add images and media to your treehouse page. Later we turn this code into HTML when the page is previewed and published.

To add images:

  1. To add an image type TOLIMG in the place you want the image to go on your page.
  2. When you are ready to find an image to use you will select "find media " from the treehouse editor's Add Media pull down menu.
  3. Each image that will turn up in your search will have an ID number. When you have found an image you want to use you will go back to the place you typed TOLIMG and add the image ID number, for example TOLIMG5746
  4. Next you must add the copyright information for the image you have inserted into your treehouse. Type the copyright information in a paragraph directly after the place you have inserted an image in the text box.
    For example: TOLIMG1234 <p>Copyright 2005 Lisa Lopez</p>
  5. To make the text smaller and centered beneath the image try writing:
    • TOLIMG1234 <p class="caption">Copyright 2005 Lisa Lopez</p>.
    • To make the text smaller and left-aligned beneath the image try writing TOLIMG1234 <p class="captionleft">Copyright 2005 Lisa Lopez</p>.

To add media (movies, sounds and documents):

  1. To add media you must type TOLMEDIA in the place you want the media file to go on your page.
  2. When you are ready to find a media file to use you will select "find media" from the treehouse editor's "Page Content: Add Media" section.
  3. Each media file that will turn up in your search will have an ID number. When you have found a media file you want to use you will go back to the place you typed TOLMEDIA and add the ID number, for example TOLMEDIA5746
  4. Next you must add the copyright information for the media file you have inserted into your treehouse. Type the copyright information in a paragraph directly after the place you have inserted a media file in the text box.
    For example: TOLMEDIA1234 <p>Copyright 2005 Lisa Lopez</p>
    • TOLMEDIA1234 <p class="caption">Copyright 2005 Lisa Lopez</p>.
    • To make the text smaller and left-aligned beneath the image try writing TOLMEDIA1234 <p class="captionleft">Copyright 2005 Lisa Lopez</p>.

Lists

To put text in a bulleted list do the following:
<ul> <li>This is the 1st thing in my list</li>
<li>This is the 2nd thing in my list</li>
<li>This is the 3rd thing in my list</li>
<li>This is the last thing in my list</li>
</ul>

Your list will look like this:

To put text in a numbered list you can change the ul at the beginning to ol and the /ul at the end to /ol

To put text in a numbered list do the following:

<ol>
<li>This is the 1st thing in my list</li>
<li>This is the 2nd thing in my list</li>
<li>This is the 3rd thing in my list</li>
<li>This is the last thing in my list</li>
</ol>

  1. This is the 1st thing in my list
  2. This is the 2nd thing in my list
  3. This is the 3rd thing in my list
  4. This is the last thing in my list

Page headings

Page headings should ONLY be used as titles for sections of your page and not to style text that you want to look a certain way. The title of your treehouse has an h1 page heading, and the subtitle that tells what type of treehouse it is has an h2 heading. Therefore please do not use h1 or h2 headings within your page, but you may use h3, h4, h3, and h6. The headings will get smaller and look different as you go from h3 to h6.

You will need to wrap a heading tag around text that you want to use as a section title. For example <h3>My Results</h3>

Styles you may use for text and images

Adding Links

If you would like to add links to other pages, right now you have a couple of options, both of which require you to know the URL or address of the page that you want to send people to visit. A URL (uniform resource locators) or address, describes the location of a file, which can be another World Wide Web HTML file, or a graphics file, or whatever. If you look in the Address bar at the top of your web browser window you will see the URL of the page you are looking at. The URL for this page is:
http://www.tolweb.org/tree/learn/TreebuilderTools/AlltheHTML.html
The URL for the ToL home page is http://www.tolweb.org

The easiest thing to do if you want to list some links to pages is to put them in the treehouse data entry section entitled "Information on the Internet." All you need to do is go to that section and copy the URL of the page you want to send people to in the Page URL field. When you type in text for the Name of Site/Page field, this is the text that viewers will see for your link. For example, if you do this:
Page URL field: http://www.tolweb.org
Name of Site/Page: Check out the ToL home page
Then visitors to your page would see this: Check out the ToL home page

It's a bit more difficult to write the HTML anchor tag around the URL for the page you would like to link to, but we think you can do it without too much trouble. If you would like to add a link to a page within the body of your text you will need to write the URL (web address) in the "compose your treehouse text" section inside of what are called "anchor tags". Your link will then need look like this:
<a href="http://www.tolweb.org">Check out the The ToL home page </a>
and it will appear as Check out the ToL home page

Soon we will have a simplified way for you to link to other ToL pages in a format much like the way that you add images to your page.

Adding tables for tabular data

If you need to you may use simple tables to format tabular data, in other words you can use table HTML code to add a table of data into your page. For example, if you are doing an investigation and want to show the results of your work or records of your data collection, you will probably want to use a table.

To write the HTML code to make a table you will use a combination of these three tags:

Here is the coding for a simple table with two rows and two columns:

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

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

To make a table with one row, omit the second line of td tags (delete <td> Second Row, Second Cell</td>):

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

First Row, First Cell First Row, Second Cell

To add more rows and columns simply add another set of tr and td tags:

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

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

To make a table with additional columns add more td tags to the row:

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

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

 

Why and how not to overlap your 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:
<i><b>Some italic, bold text</b></i> or <b><i>Some italic, bold text</i></b>

But you should not do it like this:

<i><b>Some italic, bold text</i></b> or <b><i>Some italic, bold text</b></i>

Problems to watch out for!

If your page looks very strange when you preview it, you have probably:

What is HTML and Why Do I Need to Use It!?

What is HTML?

HTML is short for Hyper Text Markup Language. HTML is the language used to write web pages. When writing HTML code you need to use what are called "HTML tags" to tell the web browser how to display text, images, other media and links in the way that you want them to be viewed on the WWW.

How do I write HTML?

The page All the HTML You Need explains a few simple HTML tags that you can use to create your treehouse. If you want to write your own HTML you don't need to learn a lot of the code because we do the majority of the HTML work for you ourselves. However, there are a few tags you will need to use to create your page. The most important tags to use are the HTML paragraph tag which begins like this <p> and ends like this </p> and the ToL code for inserting images.

The ToL Easy Editor provides a web editor so that you do not need to write the HTML code for your treehouse yourself. However, it is very helpful to understand what HTML is and to know a few HTML tags if you are going to create your own web pages.

Some people have become accustomed to using what are called HTML, Web or WYSIWYG editors which allow you to create web pages without actually seeing or writing the HTML code that is written to display the page properly. We don't think it's necessary or even advisable to use an editor to create your ToL page, especially because sometimes editors create HTML code that doesn't work well on every browser. However, if you want to use an editor to write your HTML please see "What About Web Editors?" below.

What About Web Editors?

Web editors (or WYSIWYG and HTML editors) allow you to create web pages without seeing or knowing how to write the HTML code that is written to display a page properly in a web browser. The ToL provides the Easy Editor to write the HTML for treehouse builders. As for using your own web editor, we don't think it is necessary or even advisable for you to use an outside editor to create your ToL page, especially because sometimes editors create HTML code that doesn't work well on every web browser. However, we can work with you and your Web editor. Please see Transfer Text to the Easy Editor for instructions on how to transfer text you have created in another web editor (or word processing program) into the treehouse editor's text fields. As more people use our data entry tools we will be able to provide you with a better idea of the types of things that your particular Web editor might do that will cause problems when your page is displayed in a variety of web browsers.

 

Building Treehouses

ToL Learning

treehouses

building treehouses

building for teachers

Builders Toolkit

planning guide

treehouse tools

adding images/media

tips & guidelines

top