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
• What is HTML and do I need to use it?!
  • The Treehouse Editor provides an HTML editor. However, in some web browsers this editor will not work. If the editor is not working or you would like to write the HTML yourself, use this page to find out how.
• What about other Web Editors?

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:

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

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

• <strong>To make text bold</strong> put strong tags around the words.
• <em>To italicize text</em> put em tags around the words.
• To center text write:
  • <p class="center">This text inside this paragraph will be centered </p>
• To format text for a caption for an image/media file write:
  • <p class="caption">This text inside this paragraph will be small, brown and center aligned </p>
  • <p class="captionleft">This text inside this paragraph will be small, brown and left aligned </p>
• To make text larger write: <p class="large">This text is larger</p>
• To make text smaller write: <p class="tiny">This text is smaller </p>
• To add colors write:
  • <p class="red">red</p>
  • <p class="green">green</p>
  • <p class="organge">orange</p>
  • <p class="purple">purple</p>
  • <p class="lightblue">light blue </p>
  • <p class="darkblue">dark blue </p>
  • <p class="brown">brown</p>
  • <p class="grey">grey</p>

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:

• <table></table> Which means begin table and end table
• <tr> </tr> Which means begin row and end row
• <td></td> Which means begin table cell and end table cell (this also create additional columns)

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>

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.