Lesson 10(cont'd)

Framing Images

If you know how tables work, one neat thing you can do is frame an image. A frame around one image is nothing more than a one-celled table. Here is what a framed image would look like:

And here is the code:

You’ll notice that even though there is only one cell in the entire table, you still have to use the TR and TD tags, just like you would in a multi-cell table. It's a neat effect that doesn't take that much effort to create.

Using Tables as Layouts for Web Pages

We’ve learned a lot about tables so far, but here are a few key facts to review:

You can make tables as large or as small as you want to.

You can place just about anything (text, links, images, etc.) inside a table. You can even place a table inside of another table. (we haven’t done that yet, but it’s coming later in this lesson).

We can change the size of the border to just about anything we want to. We can even remove the border completely by inserting the attribute BORDER=”0” into the body tag.

These facts make it possible for us to use tables as a way to help us lay out a Web page. Let me show you an example.

This page is actually a table containing three rows. The first row only contains one cell. That is where you see OWAC Outdoor Writers Association of California. The second row contains two cells. The first cell contains the Table of Contents for the site, and the second cell contains the slide show and the text underneath it. Then finally, the third row contains the rest of the page. Let me show you an example of how this table is set up:

OWAC: Outdoor Writers Association of California
Table of Contents	Slide Show and Text
Rest of the page

Then, we can just change the border to BORDER=”0”, and we have a fantastic layout in which we can create the page.

An Example of a Web Layout

http://www.ironspider.ca/webdesign102/tables4layout2.htm

Using a table to lay out your Web page is a great thing to do, since it allows you to use all the space available to you on your Web page. Using a table to lay out your Web page is a strategy you should plan on using often.

I have one word of advice, though. As you may already know, people set their computer monitors on different widths, ranging from 640 pixels to 1600 pixels in width. The “standard” at this time is considered to be 800 pixels in width. Because of this, here is how I would recommend that you set up your tables for layouts:

Option 1: Create a table tag that says <TABLE WIDTH=”640” ALIGN=”center”> This will allow your layout to fit within all monitors. If there is extra space left over, the page will be centered, so it will still look OK. This is how I set up the ILP Web Design Web site.

Option 2: The same thing as Option 1, but use a width of 800: <TABLE WIDTH=”800” ALIGN=”center”>.

Option 3: Create a table tag that says <TABLE WIDTH=”100%”>. This is neat because this will fill up the width of the page, no matter what the computer monitor is set to.

Your first assignment this week is to create this page. The code for it is below. But before you do anything, right-click on this image of a computer below and save it as “computer.gif” in your images folder.

OK, here is the code.

<HTML>
<HEAD>
<TITLE>A page with a table layout</TITLE>
</HEAD>
<BODY>

<TABLE WIDTH="640" ALIGN="center" CELLSPACING="30" BORDER="0">
<TR>
<TD>
<FONT FACE="arial, helvetica" SIZE="-1">
<P><B><FONT COLOR="#0000CC">HTML Tags</FONT></B></P>
<P>All tag formats are the same. They begin with a less-than sign and end with a greater-than sign. What goes inside the two signs is the called the <B>tag</B>. Learning HTML is really learning to use tags to get them to do whatever you would like to do to your Web page. In this table you will see some examples of HTML tags.
</FONT></TD>

<TD>
<FONT FACE="arial, helvetica" SIZE="-1">
<P><TABLE BORDER="1" CELLPADDING="2">
<TR>
<TD><B>Effect</B></TD>
<TD><B>Code</B></TD>
<TD><B>Code Used</B></TD>
<TD><B>What It Does</B></TD>
</TR>

<TR>
<TD>Bold</TD>
<TD>B</TD>
<TD><B>Bold</B></TD>
<TD><B>Bold</B></TD>
</TR>

<TR>
<TD>Italic</TD>
<TD>I</TD>
<TD><I>Italic</I></TD>
<TD><I>Italic</I></TD>
</TR>

<TR>
<TD>Underline</TD>
<TD>U</TD>
<TD><U>Underline</U></TD>
<TD><U>Underline</U></TD>
</TR>
</TABLE>
</FONT></TD>
</TR>

<TR>
<TD ALIGN="center">
<IMG SRC="images/computer.gif">
</TD>

<TD>
<FONT FACE="arial, helvetica" SIZE="-1">
<P><B>Here are some helpful Web sites you can use to learn more about tags:</B>

<UL>
<LI><A HREF="http://www.htmlgoodies.com">HTML Goodies</A>
<LI><A HREF="http://www.w3schools.com">W3 Schools</A>
<LI><A HREF="http://www.natomascharter.com/ilp/webdesign">ILP Web Design</A>
</UL>

</FONT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

One important note: You’ll notice that if you use a table to lay out your page, you will need to reset the font style within each individual cell (see the code above and look for the FONT tags). It’s a little extra work, but it’s definitely worth it to be able to use a table to create an awesome page layout.

You have now completed the Week 10 Lesson. Please re-read this information until you feel that you really understand it. If you feel like you already understand the information on this page, you are ready to complete your Week 9 Assignments.

Lessons

Assignment 10