Here again is the nested tables HTML which is entered in the Insert HTML element in SiteBuilder. Remember, the red is the bottom or outside table and the blue is the top or inside table.

<table background="files/tile.jpg" cellpadding="xx" cellspacing="0" width="xxx%" border="x" bordercolor="#xxxxxx">
<tr>
<td width="100%"><div align="center"><center>
<table background="files/tile.jpg" cellpadding="xx" cellspacing="0" width="100%" bgcolor="#xxxxxx" border="x" bordercolor="#xxxxxx">
<tr>
<td width="100%">
<p>Body of text, images, links, and possibly another table.</p>
</td>
</tr>
</table>
</center></div></td>
</tr>
</table>

The content of your page will go in between the second set of <td width="100%"></td>tags.

Quickie HTML Lesson for Table Content

We're going to have a short lesson in HTML. For further instructions in Beginning HTML, go to my Resources page for links to some good tutorials. A very detailed explanation of HTML tags can be found at the Willcam Group's site.

Most HTML tags, those words or abbreviations inside of <>, come in pairs of opening and closing tags. Some, like <img> and <br>, are single. We'll be using these tags most often:

<p></p> Paragraph - more attributes will be discussed below
<br> Break
<img src="graphic"> Image Source; displays picture or graphic and also the filepath where the graphics can be found on your server
<a href="url"></a> Link
<font></font> Specify font, format, size, and color - more attributes will be discussed below
&nbsp; Non-breaking space (Special character)

The Paragraph Tag

You want to begin each paragraph with a <p> tag and end with a </p> tag. What the </p> tag does is create spacing for the next paragraph or item on the page or in the table cell, like pressing the Enter or Return key twice when you're entering text in SiteBuilder's text element.

Furthermore, if you want to center, align left, or align right, you add the following inside the <p> tag:

<p align="center"> centers the paragraph.
<p align="left"> lines up the paragraph to the left.
<p align="right"> lines up the paragraph to the right.

You must always end paragraphs with the </p> tag when you include alignment. The </p> tag is optional if you're just using it to create spacing. The paragraph pair tags is used to enclose objects, such as graphics, too, in order to align them within the table.

The Break Tag

The <br> tag creates a line of spacing. It's like pressing the Enter or Return key once on your keyboard when entering text in the text element. It does not have a closing tag.

The Image Source Tag

The <img src="graphic.ext"> tag tells the browser that a picture or other graphic needs to be inserted. In our case, we will input our tag as <img src="files/graphic.ext"> because our files are all placed in the Imported Files directory. This also does not have a closing tag.

The Link Tag

The <a href="url"></a> says here's a link coming up. This tag comes as a pair. Wrapping these tags around a word or phrase makes that word or phrase a link. For example, if I wanted to make "Click Here" a link, this is how I would input it:

<a href="http://somesite.homestead.com/">Click Here</a>

The url is always input as a full address beginning with "http://". You cannot use any shortcuts. If you are creating a link to an email address, it would begin with "mailto:" followed by the email address.

The Font Tag

The <font></font> tags assign font characteristics to the text content. You can put this before and after the <p></p> pair or inside the <p></p> pair, but you must always use the pair.

The individual font attributes are "face", which defines the name of the font you want to use; "size", which is the size of the font expressed in numerical values from 1 to 7; and "color", which is the color of the text expressed in hexidecimal code. All of these individual attributes can be placed inside the one <font> tag like this:

<font face="Arial, Helvetica, sans serif" size=1 color="#000000">

What I've told the browser above is I want the text to be in Arial, Helvetica, or whatever sans serif font is available in my *visitor's* computer, in 10 points, and in black. We could go into a whole tutorial about fonts here, but I'd rather not because there are a lot of good ones out there already.

Size 1 is about 10 points. Size 2 is about 12 points. Size 3 is about 14 points, and so on. You wouldn't want to use the larger sizes unless you're doing headers. There's another way to designate that, too, with another pair of tags <h1></h1>, <h2></h2>, <h3></h3>, etc.

Color is expressed in hexadecimal code and is always preceded by the "#" symbol. A hexadecimal code is a set of six characters; in this case, a combination of letters and numbers. Two very nice, visual color charts are at Project Cool and at Webmonkey. If you have a color printer with fresh ink cartridges, it may be helpful as a webmaster to print out one of those pages.

An important note to remember with HTML tags: Always use them in order. If you start out with a <p>, then <font>, then text, you must close with </font>, then </p>. The tag you start with is the last tag you end with. Get it out of order and your page won't work.

The Non-Breaking Space Tag

The non-breaking space tag, &nbsp;, is used to put space between text and object or two or more objects in the same line. When you view the page source of the demo pages, you'll see it between the two animated graphics.

Nested Table Examples

So, now let's take a look at two examples of the same page. One is created entirely with FrontPage and the other created in part using SiteBuilder. You may be able to tell the difference, but see how close we got. View the source or page source, too. The body of the examples explain the content. The links will open new windows. Just click the page close to return to this page.

Then go on to Page 3 for some closing comments.

Page 1 || Page 3