Lesson 2 -- Printer Friendly Version

INSTRUCTIONS:

To print this lesson exactly as it appears on your screen, wait a minute or two for the entire page to load. The download should not be considered complete until you see the copyright notice at the bottom of the page. Once the document is ready to print, simply click your browser's File menu and choose Print.
To save a text-only version of this lesson, click your browser's File menu and choose Save As. Select a disk drive and folder to receive the file, and change the name of the file to less2.htm To view the file while you are offline, just go to the drive and folder you selected when you saved the file and double-click the file named less2.htm. Your browser will start and you will have access to the file.
If you use the Microsoft Internet Explorer browser and the Microsoft Outlook mail program, you can e-mail a text-only version of this file to yourself. To do so, click the File menu, choose Send, and then select Page by e-mail.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties.

Chapter 1

In this lesson, you'll learn how to place a table into another table. This process is known as nesting tables. In order for you to see the benefits of nesting tables, I'd like you to point your web browser to:

http://www.cnn.com/

As you'll notice, CNN's opening page is quite complex. The page starts off with a banner advertisement that extends across the top of the page. Running down the left side of the page, starting just below the banner ad, you will see a list of links. To the right of the link list is a photograph relating to CNN's top story. The top story starts just below this picture. To the right of the picture is yet another list of links. These links take you directly to popular news articles. There's only one way that CNN can create this site in HTML: By nesting tables!

Throughout this lesson, we'll be creating a web page that uses nested tables. Here's a quick preview of the web page we'll be creating:

In creating this web page, I first sketched out a crude drawing of what I wanted the page to look like. I then created an image that will form the top and side bars of our web page using a fabulous web graphics program called 'Paint Shop Pro.' A trial version of this program can be downloaded for free from http://www.jasc.com/. You could also create a similar image with Adobe Photoshop, Corel Photo-Paint, or any other paint program that can create GIF images.
After I created an image to frame the top and side of my page, I needed to slice it into smaller pieces so that I could more easily arrange the image around the other elements on my page. Although most paint programs come with tools that will allow you to select and crop regions of an image, I used a very popular and easy-to-use utility called 'The ShoeString Dicer' to chop the large image into several smaller images.
If you're a Windows user (a Mac version is not yet available), you'll definitely want to include a copy of Dicer in your Webmaster's toolbox. The program can be download and used at absolutely no cost. It's available at the following web address:

http://www.ziplink.net/~shoestring/dicer01.htm

Although you don't need a copy of Dicer to carry out the activities in this lesson, those of you who are interested in this powerful tool will find a Dicer tutorial on the Supplementary Material page for this lesson. Here's an example of the Dicer's work:

Since I already went through the trouble of chopping a large image into several smaller images for you, you won't need to use the Dicer for this lesson. Instead, you'll find a link to all the sliced-up images you'll need for this lesson on the Supplementary Materials page.

Chapter 2

The image below shows how the web page we'll be creating is made up of three interconnected tables:

I have highlighted the uppermost table with a yellow tint. I highlighted the second table with a green tint. And finally, I have highlighted a third small table with a blue tint. To make the tables easier for you to see, I've given each table a one-pixel wide border.

As I indicated earlier, the Dicer program can be used to break a large image into multiple smaller images. It will also automatically create an HTML table with cells that are sized to contain each image perfectly. But let's assume you don't have the Dicer and you want to create such a table by hand.

In order to do so, you'll want to start Notepad or a similar text editor. Next, type the following tag to begin your HTML document:
<HTML>
<HEAD><
TITLE>Nested Tables</TITLE>
</HEAD>
<BODY>
Now, type the following to create a table with no cell spacing, no cell padding, and no border:
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
Next, type the following to start a new row and create a table cell that will contain the image named 'area000.gif' (all of the images you need are available on the Supplementary Material page). This particular image has a width of 115 pixels and a height of 61 pixels (any paint program can provide you with your image dimensions. If you're using Paint Shop Pro, just open the image, point your mouse at the image, and glance at the left side of the status bar running along the bottom of your screen. The width and height of the image will be displayed in this location.):
<TR>
<TD><IMG SRC="area000.gif" WIDTH="115"HEIGHT="61"></TD>
Now, type the following to create similar table cells that will house the images named 'area001.gif' (323 pixels wide by 61 pixels tall) and the image named 'area002.gif' (155 pixels wide by 61 pixels high), and then close the table row. Please type all of the tags that make up one cell on the same line. Many browsers will insert breaks between your cells if you press ENTER anywhere between the <TD> tag that starts the cell and the </TD> tag that closes the cell.
<TD><IMG SRC="area001.gif" WIDTH="323" HEIGHT="61"></TD> 
<TD><IMG SRC="area002.gif" WIDTH="155" HEIGHT="61" border="0"></TD> 
</TR>
If you view the individual images you'll notice that 'area002.gif' is the image that contains the text 'Click here for free software.' If you wanted the image to function as a link, you would need to surround the IMG tag with anchor tags. To prevent the formation of a blue border around the image, you'll want to be sure and set the image border to 0 before surrounding it with <A> and </A> tags. However, we're trying to focus on the art of creating tables, so let's just leave the anchor tags out for now.

Now, let's add another row to our table and create cells to hold images named 'area003.gif' (115 x 24), 'area004.gif' (323 x 24), and 'area005.gif' (155 x 24). To do so, please add the code below to your HTML document. Again, try to type everything below on the same line. This will prevent older browsers from inserting spaces in between your cells.
<TR>
<TD><IMG SRC="area003.gif" WIDTH="115" HEIGHT="24"></TD>
<TD><IMG SRC="area004.gif" WIDTH="323" HEIGHT="24"></TD>
<TD><IMG SRC="area005.gif" WIDTH="155" HEIGHT="24"></TD>
</TR>
Now, finish up the table by closing the table tag:
</TABLE>
Finally, please close the BODY and HTML tags:
</BODY>
</HTML>
Here's the complete code so far:
<HTML>
<HEAD>
<TITLE>Nested Tables</TITLE>
</HEAD>
<BODY>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD><IMG SRC="area000.gif" WIDTH="115" HEIGHT="61"></TD>
<TD><IMG SRC="area001.gif" WIDTH="323" HEIGHT="61"></TD>
<TD><IMG SRC="area002.gif" WIDTH="155" HEIGHT="61"border="0"></TD>
</TR>
<TR>
<TD><IMG SRC="area003.gif" WIDTH="115" HEIGHT="24"></TD>
<TD><IMG SRC="area004.gif" WIDTH="323" HEIGHT="24"></TD>
<TD><IMG SRC="area005.gif" WIDTH="155" HEIGHT="24"></TD>
</TR>
</TABLE>
</BODY>
</HTML> 
This is what we've created so far:

Now that we're finished with the first of our three tables, go ahead and save your file as 'nest.htm.' Remember which drive and folder you select when you save the file. When you download the necessary images from the Supplementary Material page, you will want to make sure that you save them in the same folder. You will also be creating a couple of other HTML files today. Each of these files should be saved in the same folder as this file.

When you finish saving your file, start your browser and open the file to view the table you just created.

Chapter 3

Now, let's create the small table pictured below.

This table will list reasons why visitors should consider working with Joe's Web Design. The table will consist of three columns. The first column will list desirable services offered by Web designers. The second column will indicate whether or not Joe offers the service, and the third column will indicate whether or not Joe's competitors offer the same service.

Please start a new file in Notepad (or other text editor). Next, type the following tag to create a table with no border, no cell padding, cell spacing of "2", and a width of 450 pixels. I chose the cell spacing and width dimensions after a little trial and error. These dimensions seemed to produce the best-looking table.
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="2" WIDTH="450">
The first row in this table will contain column headings that identify the contents of each column. Remember, the first column will list services. The second column will be used to indicate which of these services Joe offers. The third column will list services offered by an unnamed 'other' Web designer.
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#000000">

Website Features

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000">

JOE

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000">

OTHER

</TD>
</TR>
The '#000000' in the code represents black, and the '#FFFF00' represents yellow. Now that the first row is complete, let's create the subsequent rows:
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">

Unlimited Hyperlinks

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 

Free Custom Graphics

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 

Free Flash Pages

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD></TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 

Guaranteed Top 10 Position

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
The background color code '#D8D7BA' represents beige, the code '#C6C49B' represents dark beige, and '#FFFFFF' represents white.

Now that all the rows that will make up this table have been created, we'll need to close the table:
</TABLE>
Here's the complete code for the table:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="2" WIDTH="450">
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#000000">

Website Features

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000">

JOE

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000">

OTHER

</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">

Unlimited Hyperlinks

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">

Free Custom Graphics

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">

Free Flash Pages

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
<TR><TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">

Guaranteed Top 10 Position

</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
YES
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
NO
</TD>
</TR>
</TABLE>
Now, finish up your document by closing the BODY and HTML tags:
</BODY>
</HTML>
When you finish typing the code for the table, save it as 'small.html.' Make sure that the file is saved in the same folder as the 'nest.htm' file. We'll be nesting this table into a larger table, which we'll create in the next chapter. When you finish saving the file, start your browser and open the file to admire our handiwork.

Chapter 4

OK, two down, one to go! The last table will be the most complex, as it will actually be used to contain the small table that we created in the previous chapter. Here's what it will look like:

Start your text editor and begin a new document. Then type the following tags to begin a new HTML document and create a table that is 600 pixels wide with no cell spacing or cell padding:
<HTML>
<BODY>
<TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="600">
Now type the following to start your first row:
<TR>
After typing the <TR> tag, you'll want to start the first cell in your table. Let's make this cell 117 pixels wide. Also, let's use the VALIGN parameter to be sure that any objects placed in this cell are vertically aligned with the top of the cell:
<TD VALIGN="top" WIDTH="117">
Now, let's place the images pictured below in the cell we just created:

Each image is 115 pixels wide, so we'll only be able to fit one picture at a time across this 117 pixel wide column. Let's place a line break after each picture. To do so, type the following:
<IMG SRC="area006.gif" WIDTH="115" HEIGHT="25" BORDER="0">
 
<IMG SRC="area009.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area012.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area015.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area018.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area021.gif" WIDTH="115" HEIGHT="149">
Images such as these can be used as links to other pages. In order to convert these images to links, you would need to suround each <IMG> tag with <A> and </A> tags. Because we don't really have any other pages that we can link to right now, let's just leave out the anchor tags.

Now, you'll want to close the cell that holds all of these images by typing the following tag:
</TD>
Let us now create a large cell that will include some rather large text. Let's make the cell 483 pixels wide, and let's center the text within the cell. To do so, please type the following:
<TD WIDTH="483" ALIGN="center">

<H2>
Why should you go with Joe?
</H2>
 
The '#000080' font color code will create navy blue text.
Now that the table cell includes the necessary text, you'll want to create a space below the text. To do so, type the following:
 
 
Believe it or not, it is entirely possible to place an entire table into any cell of an even bigger table. Let's prove this by inserting the small table that we created in the previous chapter into our present location. To so do, first save this file as 'large.htm.' Then, open the file named 'small.htm' that you saved earlier in this lesson. Place your mouse in front of the first <TABLE> tag in that file, hold down your left mouse button, and drag your mouse through the tags until you have your entire table selected (all the way up to and including the final </TABLE> tag). Next, click on your text editor's 'Edit' menu and choose 'Copy.' Finally, open the 'large.html' file in your text editor, position your cursor just after the two tags we just typed, click on the 'Edit' menu, and choose 'Paste'.

After you finish pasting the small table into this cell, you'll want to close the cell and the large outer table itself. Let's also close the BODY and HTML tags. To do so, please type the following:
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Your code should now look like this:
<HTML>
<BODY>
<TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="600">
<TR>
<TD VALIGN="top" WIDTH="117">
<IMG SRC="area006.gif" WIDTH="115" HEIGHT="25" BORDER="0">
 
<IMG SRC="area009.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area012.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 <IMG SRC="area015.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area018.gif" WIDTH="115" HEIGHT="26" BORDER="0">
 
<IMG SRC="area021.gif" WIDTH="115" HEIGHT="149">
</TD>
<TD WIDTH="483" ALIGN="center">

<H2>
Why should you go with Joe?
</H2>
 
 
 
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="2" WIDTH="450"> 
<TR> 
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#000000"> 
 
Website Features 
 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000"> 
 
JOE 
 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000"> 
 
OTHER 
 
</TD> 
</TR> 
<TR> 
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 
 
Unlimited Hyperlinks 
 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA"> 
YES/B> 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B"> 
NO 
</TD> 
</TR> 
<TR> 
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 
 
Free Custom Graphics
 
 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA"> 
YES 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B"> 
NO 
</TD> 
</TR> 
<TR> 
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 

 
Free Flash Pages 
 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA"> 
YES 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B"> 
NO 
</TD> 
</TR> 
<TR> 
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF"> 
 
Guaranteed Top 10 Position 
 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA"> 
YES 
</TD> 
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B"> 
NO 
</TD> 
</TR> 
</TABLE></TD>
</TR>
</TABLaE>
</BODY>
</HTML>
When you're done with the file, save it again as 'large.htm.' Then, open the file in your browser to view the nested tables. Believe it or not, we're almost done!

Chapter 5

Well, all of our tables are complete. All we have to do to finish up is to copy and paste the two nested tables from our 'large.htm' file into our 'nest.htm' file. This is what our 'nest.htm' code looks like right now:

<HTML>
<HEAD>
<TITLE>Nested Tables</TITLE>
</HEAD>
<BODY>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD>
<IMG SRC="area000.gif" WIDTH="115" HEIGHT="61">
</TD>
<TD><IMG SRC="area001.gif" WIDTH="323" HEIGHT="61"></TD> 
<TD><IMG SRC="area002.gif" WIDTH="155" HEIGHT="61" border="0"></TD> 
</TR>
<TR>
<TD><IMG SRC="area003.gif" WIDTH="115" HEIGHT="24"></TD>
<TD><IMG SRC="area004.gif" WIDTH="323" HEIGHT="24"></TD>
<TD><IMG SRC="area005.gif" WIDTH="155" HEIGHT="24"></TD>
</TR>
</TABLE>
</BODY>
</HTML>

What we need to do is paste the two nested tables from the 'large.htm' file right under the table in the 'nest.htm' file. To do so, open the 'large.htm' file. Select and copy the two nested tables contained within that file. Then, open the 'nest.htm' file and position your cursor below the </TABLE> tag that closes the first table. Finish up by pasting in the two nested tables you just copied. The complete code will look like this:

<HTML>
<HEAD>
<TITLE>Nested Tables</TITLE>
</HEAD>
<BODY>
<TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR>
<TD><IMG SRC="area000.gif" WIDTH="115" HEIGHT="61"></TD>
<TD><IMG SRC="area001.gif" WIDTH="323" HEIGHT="61"></TD> 
<TD><IMG SRC="area002.gif" WIDTH="155" HEIGHT="61" border="0"></TD>
</TR>
<TR>
<TD><IMG SRC="area003.gif" WIDTH="115" HEIGHT="24"></TD>
<TD><IMG SRC="area004.gif" WIDTH="323" HEIGHT="24"></TD>
<TD><IMG SRC="area005.gif" WIDTH="155" HEIGHT="24"></TD>
</TR>
</TABLE>
<TABLE CELLSPACING="0" CELLPADDING="0" WIDTH="600">
<TR>
<TD VALIGN="top" WIDTH="117">
<IMG SRC="area006.gif" WIDTH="115" HEIGHT="25" BORDER="0"><BR>
<IMG SRC="area009.gif" WIDTH="115" HEIGHT="26" BORDER="0"><BR>
<IMG SRC="area012.gif" WIDTH="115" HEIGHT="26" BORDER="0"><BR>
<IMG SRC="area015.gif" WIDTH="115" HEIGHT="26" BORDER="0"><BR>
<IMG SRC="area018.gif" WIDTH="115" HEIGHT="26" BORDER="0"><BR>
<IMG SRC="area021.gif" WIDTH="115" HEIGHT="149">
</TD>
<TD WIDTH="483" ALIGN="center">
<FONT COLOR="#000080">
<H2>
<I>Why should you go with Joe?</I>
</H2>
</FONT> 
<BR>
<BR>
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="2" WIDTH="450">
<TR>
<TD WIDTH="262" ALIGN="CENTER"BGCOLOR="#000000">
<FONT COLOR="#FFFF00">
<B>Website Features</B>
</FONT>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000">
<FONT COLOR="FFFF00">
<B>JOE</B>
</FONT>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#000000">
<FONT COLOR="FFFF00">
<B>OTHER</B>
</FONT>
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">
<FONT COLOR="#FFFFFF">
<B>Unlimited Hyperlinks</B>
</FONT>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
<B>YES</B>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
<B>NO</B>
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">
<FONT COLOR="#FFFFFF">
<B>Free Custom Graphics</B>
</FONT>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
<B>YES</B>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
<B>NO</B>
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">
<FONT COLOR="#FFFFFF">
<B>Free Flash Pages</B>
</FONT>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
<B>YES</B>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
<B>NO</B>
</TD>
</TR>
<TR>
<TD WIDTH="262" ALIGN="CENTER" BGCOLOR="#0000FF">
<FONT COLOR="#FFFFFF">
<B>Guaranteed Top 10 Position</B>
</FONT>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#D8D7BA">
<B>YES</B>
</TD>
<TD WIDTH="94" ALIGN="CENTER" BGCOLOR="#C6C49B">
<B>NO</B>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

When your code looks like mine above, resave the file as 'nest.htm.' Make sure that you've downloaded all of the necessary images into the same folder that contains this file. (A link to the supplementary images can be found on the Supplementary Materials page. Now, start your browser, view your 'nest.htm' file, and give yourself a big pat on the back!

Chapter 6

When you feel you have a grasp on all of the concepts discussed within lesson 2, I have a short, multiple choice quiz for you. To take the quiz simply click on 'Quizzes' on the menu bar. Make sure that you have 'Quiz 2' selected. Input your last name, e-mail address, and password, then hit the submit button.

-Assignment B-

Click here to preview the page that we'll be creating in this assignment. Click on the 'Assignments' link at the top of this page. When the 'Assignments' page appears, click fill out the form with your name, e-mail address, and password, and click on Assignment B. Then, click on the 'Submit' button. A form will appear with numbered text boxes. Fill in each line of code exactly as specified below. When you're typing a tag that contains multiple parameters, please include the parameters in the order specified in the directions below. When you're done, click on the 'Validate' button and your assignment will be validated for accuracy.

Line 1 - Type a tag that will start your HTML document.

Line 2 - Type a tag that will start the BODY portion of your page.

Line 3 - Type a tag that will start a paragraph that is center aligned.

Line 4 - Type a tag that will insert the image 'joespecial.gif' into your HTML document. Specify that the width of the image is 447 pixels, and that the height of the image is 46 pixels. The ALT text should reads 'Our Special' (without the quotes).

Line 5 - Type a tag that will close your paragraph

Line 6 - Type a tag that will center an upcoming table.

Line 7 - Type a tag that will create a table. Specify that there is no border for the table, and that the width of the table is 300 pixels.

Line 8 - Type a tag that will create a table row.

Line 9 - Type a tag that will create a table cell. The cell should have a background color of "#808080" and should be center aligned.

Line 10 - Type a tag that will create a table. Specify that the table has no border, cellpadding of 5 pixels, and a width of 290 pixels.

Line 11 - Type a tag that will create a table row.

Line 12 - Type a tag that will create a table cell with a background color of "#C0C0C0."

Line 13 - Type a tag that will create a center aligned paragraph.

Line 14 - Type a tag that will insert a line break into your HTML document.

Line 15 - Type a tag that will underline upcoming text.

Line 16 - Type a tag that will bold upcoming text.

Line 17 - Type the tag. Include a parameter so that the color of the text is "#400000."

Line 18 - Type the following text:

Monthly Special

Line 19 - Close the tag.

Line 20 - Close the tag that was previously used to bold the text.

Line 21 - Close the tag that was previously used to underline the text.

Line 22 - Close the paragraph.

Line 23 - Type a tag that will create a center aligned paragraph.

Line 24 - Type a tag that will bold upcoming text.

Line 25 - Type the tag. Include a parameter so that the color of the text is "#400000."

Line 26 - Type the following text:

Two tables for the price of one!

Line 27 - Close the tag.

Line 28 - Close the tag that was used to bold the text.

Line 29 - Close the tag that created the paragraph in line 23.

Line 30 - Type a tag that will insert a line break in your HTML document.

Line 31 - Type another tag that will insert a line break into your HTML document.

Line 32 - Close the table cell of the smaller table.

Line 33 - Close the table row of the smaller table.

Line 34 - Close the smaller table.

Line 35 - Close the table cell of the larger table.

Line 36 - Close the table row of the larger table.

Line 37 - Close the larger table.

Line 38 - Close the tag that was previously used to center the table.

Line 39 - Close the BODY portion of your HTML document.

Line 40 - Close the HTML document.

Remember to click on the 'Validate' button once you've typed all 40 lines of the assignment.

IMPORTANT: This version of your lesson is for saving or printing only. All links and images have been disabled to decrease download time and help you avoid printer difficulties. Do NOT attempt to click any of the links on this page.