Lesson 1 -- Printer Friendly Version
INSTRUCTIONS:
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
First, let's review some table-building fundamentals:The TABLE tag is one of HTML's most powerful features. It is used to set up columns of text and graphics on a web page. If you've ever seen a web site with an orderly arrangement of side-by-side graphics or two or more columns of text, you can rest assured that tables were used.
To construct a table, you will need to surround all of the text and pictures that will be included in the table with <table> and </table> tags, like this:
<TABLE>...your table text goes here...</TABLE>As you learned in 'Creating Web Pages,' HTML tags are not not case-sensitive. You can use upper case, lower case, or both when typing your TABLE tags.The table you construct will be made up of one or more horizontal rows and two or more vertical columns. Everywhere a column and a row intersect in your table, you will have a rectangular area known as a "cell."
row--> cell cell cell cell
row--> cell cell cell cell
row--> cell cell cell cellThe <table> tag can have four attributes:
-width, which specifies the width of the table. Because most people use monitors capable of only displaying a few more than 600 pixels across the screen, you should try to keep your table widths at or below 600 pixels.
-border, which specifies the thickness (in pixels) of the lines around the outside of your table.
-cellpadding, which specifies how much space should appear between the text in each cell and its borders.
-cellspacing, which specifies how much space (in pixels) should appear between cells in your table.
For example, if you wanted a 600 pixel wide table with a 1 pixel wide border, 2 pixels of space between the text in each cell and the cell's borders, and 3 pixels of space between cells, you would set up the table like this:
<TABLE BORDER="1" CELLPADDING="2" CELLSPACING="3" WIDTH="600"> ...your table goes here... </TABLE> The order of the BORDER, CELLPADDING, CELLSPACING, and WIDTH parameters does not matter. You could just as easily have typed the following to achieve the same effect:
<TABLE WIDTH="600" CELLPADDING="2" BORDER="1" CELLSPACING="3"> ...your table goes here... </TABLE> In HTML, each row of your table must begin and end with the <TR> ... </TR> tags, and each cell on the row must begin and end with <TD> ... </TD> (table data) tags.
Suppose you wanted to create a table with four columns and three rows looking something like this:
Expense 1997 1998
Ads $1,450 $1,875
Auto $2,150 $1,953Here is the HTML code you would need to type to generate this table. Notice:
-the <TD> and </TD> tags which come before and after each piece of table data;
-the <TR> and </TR> tags which come before and after each row; and
-the <TABLE> and </TABLE> tags at the beginning and end of the entire table.
Also, notice the use of the ALIGN=CENTER and ALIGN=RIGHT tags within the <TD> tag.
<TABLE> <TR> <TD>Expense</TD> <TD ALIGN="CENTER">1997</TD> <TD ALIGN="CENTER">1998</TD> </TR> <TR> <TD>Ads</TD> <TD ALIGN="RIGHT">$1,450</TD> <TD ALIGN="RIGHT">$1,875</TD> </TR> <TR> <TD>Auto</TD> <TD ALIGN="RIGHT">$2,150</TD> <TD ALIGN="RIGHT">$1,953</TD> </TR> </TABLE>You can create an unlimited number of rows in your table. Just make sure that each row is preceded by a <TR> tag and ends with a </TR> tag.You can also create as many cells on the first row as you wish. Just make sure that each cell is preceded by a <TD> tag and ends with a </TD> tag.
Also, make sure that the number of cells on each subsequent row is equal to the number of cells on the first row. That way, every row in your table will have an identical number of columns.
For more info on table basics, try the following URL:
Chapter 2
The Microsoft Internet Explorer and Netscape Navigator version 3 (or greater) will both allow you to specify a different background color for each cell in a table. All you have to do is add a space and a statement like the one below to the end of the <TD> tag:BGCOLOR="ColorCode"Now, don't actually type the word "ColorCode" between those quote marks. Instead, just substitute the name of the color you want. You have sixteen colors to choose from:<TD BGCOLOR="aqua"> ... </TD> <TD BGCOLOR="black"> ... </TD> <TD BGCOLOR="blue"> ... </TD> <TD BGCOLOR="fuchsia"> ... </TD> <TD BGCOLOR="gray"> ... </TD> <TD BGCOLOR="green"> ... </TD> <TD BGCOLOR="lime"> ... </TD> <TD BGCOLOR="maroon"> ... </TD> <TD BGCOLOR="navy"> ... </TD> <TD BGCOLOR="olive"> ... </TD> <TD BGCOLOR="purple"> ... </TD> <TD BGCOLOR="red"> ... </TD> <TD BGCOLOR="silver"> ... </TD> <TD BGCOLOR="teal"> ... </TD> <TD BGCOLOR="white"> ... </TD> <TD BGCOLOR="yellow"> ... </TD>If you'd like a wider selection of colors, you can substitute a pound sign (#) and a six-digit hexadecimal code for the color you wish to use. Although you could theoretically produce over 16 million colors using this technique, most systems can only display up to 256 colors.Therefore, you need to be somewhat careful when specifying a background color. If you ask for a color that cannot be reproduced on a 256 color system, the browsers will try to simulate the color using a shading trick known as 'dithering.' Unfortunately, dithered colors usually turn out mottled or grainy.
If you want your colors to be as clear as possible, I have set up a list of hexadecimal color codes that are guaranteed not to dither. I call this list of dither-free colors the 'Browser Safe Palette,' and you'll find it on the supplementary material page at the end of this lesson.
All you have to do when you get to the supplementary material page is click the link to the 'Browser Safe Palette' page. Locate a color you find attractive, and then copy the associated hexadecimal code into your <TD> tag. For example, suppose you'd like to use the dark blue color at the end of the first row as the background color for a cell in your table. Since the hexadecimal code for that particular color is "#000066", you'd want to write:
<TD BGCOLOR="#000066"> . . . </TD>Now, if you change the color of a cell, you might also need to change the text color to keep it readable. In other words, if you choose a dark color for a cell background, you'd want to make sure that the text was light in color.For example, suppose you decide to make a cell background black. Because black text won't show up on a black background, you will need to change the color of your text. Doing so is fairly simple: just surround your text with <FONT> and </FONT> tags. Add a space and a phrase like COLOR="ColorCode" to the initial <FONT> tag. Again, don't actually type "ColorCode." Instead, substitute one of the color words listed above, or a pound sign (#) and one of the hexadecimal code from my Browser Safe Palette page.
Either of the following tags would produce a cell containing a black background and white text:
<TD BGCOLOR="black"> <FONT COLOR="white"> Text goes here </FONT> </TD> <TD BGCOLOR="#000000"> <FONT COLOR="#FFFFFF"> Text goes here </FONT> </TD>You can also change the color of all text on the page by adding a TEXT parameter to the <BODY> tag:<BODY TEXT="silver">WARNING: Please be aware that some older browsers will not display table background colors. Also, be aware that most printers will refuse to print background colors. As such, I recommend against using dark backgrounds and light text. Doing so could prevent some people from reading your text. Instead, work with light backgrounds and dark text. That way, if the background doesn't show up, the text will still be readable.
Chapter 3
In late 1996, Microsoft introduced an extension to the HTML language that permits the inclusion of images in table cell backgrounds.Although this extension offers some exciting creative possibilities, please be aware that this extension to the HTML language has only recently been accepted. Although both versions 3 and 4 of the Microsoft Internet Explorer can work with images in the background of a table, only version 4 of the Netscape Navigator has this ability.
Other browser manufacturers have been slow to adopt the extension. Although the day will come when this extension is universally acceptable to all browsers, we have not yet reached that point.
Please understand that the language of HTML is ever-evolving. I want to teach you everything that you can possibly do with a table. I also want you to be aware that some browsers are more advanced than others. If you decide to take advantage of this extension to the language, please be aware that a small, but still significant, number of your visitors won't yet be able to enjoy the results of your efforts.
However, these folks will eventually be forced to upgrade their browsers. And you'll be prepared.
If you'd like to display a GIF or JPG image behind the text in a cell, just add the phrase BACKGROUND="filename.ext" to the end of the <TD> tag. Be sure to substitute the actual name and extension of the image file between the quotes. Also, make sure the image is saved in the same drive and folder as your HTML file.
For example, if you wanted to display an image named 'brickwall.jpg' behind the text in one of your table's cells, you would type:
<TD BACKGROUND="brickwall.jpg"> text goes here </TD>Be sure and type something in between the <TD> and </TD> tags. Throw some text or some non-breaking space tags or a few <BR> tags in there, or the cell will not display at all. Whether you choose to apply a background image or not, there isn't a browser on earth that will display an empty cell.
Chapter 4
OK, enough basics. Let's give the wine country café page a table makeover! Please go to the 'Supplementary Materials' page at the end of this lesson and follow the link which reads 'Wine Country Cafe.'Click the link to lesson 1 and then click the link that says 'Wine Country Café-Before.' Save both the logo and the photograph to your computer. If you've never saved an image from a website before, it's easy:
Just point your mouse at the image, click your RIGHT mouse button (Mac users-hold the button down) and choose the "Save image" option from the menu that pops up.
Note: You need to have a recent version of the Netscape Navigator or Microsoft Internet Explorer browser to download images. Once you have the pictures firmly ensconced on your machine, start the Windows Notepad or Apple's SimpleText or MacText text editor or another text editing program.
Then, identify your web page as an HTML file by typing the following tag:
<HTML>Next, give your page a head and title:
<HEAD> <TITLE>Wine Country Café</TITLE> </HEAD>Now, we need to start the body. Let's give the web page a black background with white text:
<BODY BGCOLOR="black" TEXT="white">Let's make sure everything is centered on the page by typing:
<CENTER>Now, let's create the table. I'd like the table to have a width of 600 pixels, with 5 pixels of space between cells. Let's not have any borders or cellpadding:
<TABLE WIDTH="600" BORDER="0" CELLPADDING="0" CELLSPACING="5">Now, let's create the first (and only) row of this table. Let's give it a rich burgundy background color (I got the hexadecimal code from the Browser Safe Palette page mentioned above). Let's display an image inside this cell (but not as a background):
<TR> <TD BGCOLOR="#663333"> <IMG SRC="logo2.gif"> </TD> </TR>That's it for this table! Let's close the table tag:
</TABLE>This was a simple table with only one cell and one row. It will create a burgundy-colored rectangle containing our logo.
You might be asking yourself why we didn't just make the logo 600 pixels wide. Here's a one word answer: speed!
A background color loads instantly. Large graphic images take a long time to load. This trick allows us to keep the image small and the page quick-loading.
Now, let's make another table with the same settings as the last one. However, this table is going to have two cells on its one and only row.
<TABLE WIDTH="600" BORDER="0" CELLPADDING="0" CELLSPACING="5"> <TR>Let's put the photograph in the background of the first cell. This act will cause the picture to better align with the second cell on this row. It would also allow us to type text over the picture, if we so desired. The photograph is 240 pixels wide, but I'd like to crop about 20 pixels off of the right side of the image. Let's make the cell only 220 pixels wide:
<TD WIDTH="220" BACKGROUND="feast.jpg">Some browsers won't display the cell unless you type something in the cell. Since I have no desire to type over the stunning photograph, let's just insert the code for a non-breaking space and close the <TD> tag.
<P> </P> </TD>Now, let's set up a second cell on this row. I'm going to go with one of the funkier colors on my Browser Safe Palette as the background color. Let's give this cell a width of 380 pixels. Combine that with the 220 pixel-wide cell at the beginning of the row and we have a 600 pixel wide table.
Let's place a blank line, containing nothing more than a non-breaking space, above and below our words. Let's reduce the size of the font and use a typeface called 'Helvetica,' which virtually every system out there can faithfully reproduce:
<TD BGCOLOR="#999900" WIDTH="380"> <P> </P> <BLOCKQUOTE> <FONT SIZE="-1" FACE="Helvetica">Welcome to our web site! Once we finish this thing, you'll be able to view photos of our restaurant, download some of our chef's favorite recipes, make reservations for lunch or dinner, and even request home delivery!
</FONT> </BLOCKQUOTE> <P> </P> </TD>Now, let's close down the row and the table:
</TR> </TABLE>Let's make a third table, just like the first one, but containing the café's address in small Helvetica type. The occasional code for a non-breaking space that you see allows us to put three spaces between the different sections of the address:
<TABLE WIDTH="600" BORDER="0" CELLPADDING="0" CELLSPACING="5"> <TR> <TD BGCOLOR="#663333" ALIGN="CENTER"> <BR> <FONT SIZE="-1" FACE="helvetica,arial,sans serif"> Wine Country Cafe 1456 Shady Lane Napa, CA 12345 (123) 456-7890 </FONT> <BR> </TD> </TR> </TABLE>Now, let's shut down the centering, body, and html tags.
</CENTER> </BODY> </HTML>Save your HTML file as cafe.html and place it on the same drive and in the same folder as the two image files you downloaded earlier. Open the HTML file in your browser (use the 'File/Open command) and prepare to be dazzled! If one of your tables doesn't show up, check for a missing or mistyped <table>, <td>, or <tr> tags.
Here's the complete code:
<HTML> <HEAD> <TITLE>Wine Country Café</TITLE> </HEAD> <BODY BGCOLOR="black" TEXT="white"> <CENTER> <TABLE WIDTH="600" BORDER="0" CELLPADDING="0" CELLSPACING="5"> <TR> <TD BGCOLOR="#663333"> <IMG SRC="logo2.gif"> </TD> </TR> </TABLE><TABLE WIDTH="600" BORDER="0" CELLPADDING="0" CELLSPACING="5"> <TR> <TD WIDTH="220" BACKGROUND="feast.jpg"> <P> </P> </TD> <TD BGCOLOR="#999900" WIDTH="380"> <P> </P> <BLOCKQUOTE> <FONT SIZE="-1" FACE="Helvetica">Welcome to our web site! Once we finish this thing, you'll be able to view photos of our restaurant, download some of our chef's favorite recipes, make reservations for lunch or dinner, and even request home delivery!
</FONT> </BLOCKQUOTE> <P> </P> </TD> </TR> </TABLE><TABLE WIDTH="600" BORDER="0" CELLPADDING="0" CELLSPACING="5"> <TR> <TD BGCOLOR="#663333" ALIGN="CENTER"> <BR> <FONT SIZE="-1" FACE="Helvetica"> Wine Country Cafe 1456 Shady Lane Napa, CA 95432 (456) 555-1212</FONT> <BR> </TD> </TR> </TABLE> </CENTER> </BODY> </HTML>
Chapter 5
When you've completed the table makeover, please go to the Supplementary Materials page for this lesson and click the link labeled 'Oak Grove -Before.' Nice page, but (yawn) that colored stripe (called an 'edge') running down the left side of the page is so overused it's turning into a cliché.
Let's see how we can use tables to create a more interesting effect. Return to the 'Supplementary Materials' page and follow the link to 'Oak Grove - After.' The green border is still there, but now it swoops across the page and then down, leading the eye directly to the bold graphic in the bottom right corner.
Believe it or not, this effect was created with nothing more than a table and two small graphics. Return to the 'Creating Advanced Web Pages' site one more time and follow the link to 'Oak Grove - Exposed.' See the table?
Now, return to the 'Oak Grove - After' page and click on your browser's 'View' menu. Choose the option to view the page source code. Near the top of the page, you should see the following tag:
<TABLE BORDER="0" WIDTH="600"
CELLPADDING="0" CELLSPACING="0">
The tag above creates a table that is 600 pixels wide. Take a look at the tables located at washingtonpost.com, disney.com, espn.com, or just about any other corporate site.
Almost every professionally designed corporate site out there uses tables, and not too many of them set their table width too far beyond 600 pixels. Hardly any table designer worth his or her salt uses percentages.
Why? Well, percentages don't work with all browsers, so you must specify your table width in pixels. Since the vast majority of users out there can't see more than 640 pixels at a time across their screen, it is important that you never allow your table width to exceed 640 pixels. To be safe, set your table width to 600 pixels or less.
When you looked at the source code for my page, you probably noticed that I set borders, cellpadding, and cellspacing to zero. This will make the table itself invisible. If we want to create the illusion of a continuous unbroken line, the cells in our table must not have any space between them.
Right after the <TABLE> tag, you'll see the <TR> tag, marking the start of a new table row. Then, you'll see a tag for the first cell:
<TD WIDTH="400" BGCOLOR="#009966">
Because this column will eventually hold a lot of text, I assigned a width of 400 pixels to this cell.
All subsequent cells in this column will also be 400 pixels wide.
The BGCOLOR setting uses a hexadecimal code that came directly from our browser-safe palette page (lesson 1). The code sets the background color of this cell. You'll also find the code for a non-breaking space in this cell.
The Netscape Navigator requires you to type something in a cell before it will display the cell's background color. Because the non-breaking space character is invisible to humans but not to the Netscape Navigator, the non-breaking space provides a nice way to placate your browser! Take a look at the source code again. After we close the first cell, you'll notice the following tag:
<TD WIDTH="15" BGCOLOR="#009966">
That tag creates a 15 pixel-wide cell. It has the same background color as the preceding cell and holds another one of those invisible non-breaking spaces. This cell creates a 15-pixel wide column that will be needed on the second row.
After we close the second cell, you'll see this tag:
<TD WIDTH="170" BGCOLOR="#009966">
The tag above creates a 170-pixel wide third column similar to the first two. This column will eventually hold the image of the house and tree.
After we close the third cell, you'll see the following set of tags:
<TD WIDTH="15" VALIGN="BOTTOM">
<P><IMG SRC="green1.gif" WIDTH="15"
HEIGHT="20"></P></TD>
The tags above create a fourth column containing a little image named 'green1.gif'. This image creates the curved corner at the end of the first row.
Take a peek at the source code again. You should see a </TR> tag, marking the end of the first row, and a <TR> tag that marks the beginning of the second row.
There's nothing to say in the first cell on the second row, so we'll leave the cell blank. Since this cell has no background color, we don't even have to include the code. The tags look like this:
<TD>
</TD>
The second cell on the second row will hold an image of an inverted arch, creating another curved corner. The words align="right" appear twice due to differences in the way the Microsoft Internet Explorer and the Netscape Navigator deal with images in a table.
The align="right" statement forces the image to line up with the right side of the cell so that it abuts the left side of the third column. The valign="top" statement causes the image to line up with the top of the cell so that it abuts the bottom of the first row.
<TD ALIGN="RIGHT" VALIGN="TOP">
<P ALIGN="RIGHT"><IMG SRC="green2.gif"></P>
</TD>
Now, our third column. Because this cell has a background color, we must type a character inside the cell. When you view the source code, you'll see the non-breaking space character come to our rescue again.
<TD BGCOLOR="#009966">
Finally, the cell in the fourth column. Same background color, same contents as the previous cell.
<TD BGCOLOR="#009966">
A </TR> tag finishes off the second row. On the third row, you'll find advertising copy written in the first cell, and an image of a house and a tree in the third cell on that row. That's about all there is to it!
If you'd like to create this effect on your web page, you'll need the two little images I inserted into the table to provide the curved corners. To do so, return to the Oak Grove - Exposed page, point your mouse at the fourth column on the first row, right-click the green1.gif image, and save the image to your hard disk. Next, point your mouse at the second column on the second row, right-click the green2.gif image, and save it to your hard disk.
Later, you can open the images in Paint Shop Pro, Adobe Photoshop, Corel Photo-Paint, or a similar program. You can then use the 'fill with color' tool in to change the color of each image from green to whatever color you'd like to use. Then, open your HTML file and set the bgcolor of the table cells to match.
Chapter 6
Return to the Supplementary Materials page and follow the link labeled 'Eudora - Before.' Not bad. The table makes it easy to see that Eudora Pro has more features than Eudora Light. But could the table be improved?
You bet! Go back to the supplementary materials page once again and follow the link to 'Eudora - After.' Now that's more like it! Changing the background color of key cells makes the chart more visually satisfying and easier to read.
Scroll down a bit and study the rows containing the words 'Automation' and 'File Management.' Notice anything special?
Don't they appear to span the entire width of the table? Want to know how that was done?
With the 'Eudora - After' page still on your screen, click on your browser's 'View' menu and choose the option to view the page's source code. Scroll down until you see the row containing the word 'Automation.' The tags should look like this:
<tr>
<td COLSPAN="3" BGCOLOR="#000000">
<font color="#FFFFFF"><B>Automation</B></font>
</td>
</tr>
The <tr> and </tr> tags start and end the row. Nothing new there. But look closely at the <td> tag. The bgcolor="#000000" statement simply indicates that we want the background color to be black (a quick check of the browser-safe palette will verify this). It's colspan="3" I want you to look at. That little bit of text does something quite remarkable. It forces the cell to stretch across (span) all three columns!
Look at the cell containing the words 'File Management' and you'll see that it also spans all three columns of the table.
Notice how these two rows differ from the others. The 'Automation' and 'File Management' cells are the only cells on their respective rows. While most all of the other rows in this table consist of three cells, these two special rows contains only one cell. It is not necessary to type additional <td> and </td> tags when a cell spans the entire width of the table.
However, if you had wanted the cell to span only two of the three columns, you would have needed a second cell to bridge the last column. Your tags would look something like this (color and other formatting tags removed for clarity):
<tr>
<td colspan="2">
Text goes here
</td>
<td>
Text goes here
</td>
</tr>
Chapter 7
One last example: return once more to the Supplementary materials page. Follow the link to 'Ace Industries - Before.' I'm sure you'll agree that the table is well-constructed, easy to read, and makes interesting use of color. But it's quite long and contains a lot of redundant information. On all but the best monitors, one must scroll to take the entire table in.
Go back to the supplementary materials page and follow the link to 'Ace Industries - After.' This time, the table fits neatly on one screen. The words 'East,' 'West,' and 'South' are not repeated over and over again. The company logo is integrated into the table-a nice touch.
How was this done? How else? With a table! Return to the 'Advanced Web Pages' site once again and take the link that leads to 'Ace Industries - Exposed.' I made the borders of the tables visible in this example so that you could better see how this works. Notice that the first cell on the first row (the cell containing the company logo) spans all twelve rows of our table.
Take a look at the source code. The tall column was created with the following tags:
<td ROWSPAN="11" BGCOLOR="#FFCC00"> <IMG SRC="ace.gif"> </td>
The key phrase here is rowspan="11". It causes the cell to span the entire height of our table. I used Paint Shop Pro to rotate the company logo (the file named 'ace.gif') 90 degrees so it would fit nicely into this elongated column.The second column has four cells. Although the first cell in that column is normal, the second, third, and fourth cells in that column span three, four, and three rows, respectively. Here are the tags:
<td rowspan="3" bgcolor="#FFCC00"> <B>East</B> </td> <td rowspan="4" bgcolor="#00FFCC"> <B>West</B> </td> <td rowspan="3" bgcolor="#FFCC00"> <B>South</B> </td>
Finally, the last cell on the first row also spans all 11 rows of the table. Here is the tag:<td rowspan="11" bgcolor="#00FFCC"> <IMG SRC="sales.gif"> </td>
One more point: note the use of <th> and </th> instead of <td> and </td> for some of the cells on the first row. The <th> and </th> tags create a special type of cell known as a 'table header.' A table header is just like any other cell except that any text you type in a table header will be automatically bolded and centered.Typing the following tags:
<th> text </th>
Would accomplish the same thing as these tags (but with a lot less typing):<td ALIGN="CENTER"> <B>text</B> </td>
Chapter 8
-Quiz 1-
When you feel you have a grasp on all of the concepts discussed within lesson 1, 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 1' selected. Input your last name, e-mail address, and password, then hit the submit button.
-Assignment A-
- 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 A. 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 the tag that will begin your HTML document.
Line 2 - Type a tag that will begin the BODY portion of your HTML document.
- Line 3 - Type a tag that will insert a line break into your HTML document.
Line 4 - Again, type a tag that will insert a line break into your HTML document.
- Line 5 - Type a tag that will center a table.
Line 6 - Type a tag that will insert a table into your HTML document. The table should have a width of 450 pixels, cellpadding should be set to 2 pixels, and the table should have no border. (Please include the parameters in the order specified).
- Line 7 - Type a tag that will start a table row.
Line 8 - Type a tag that will start a table cell. The cell should have a background color of 'blue,' and should be center aligned. Thecell should also have a width of 200 pixels.
Line 9 - Type the <FONT> tag. Include parameters so that the size of the font is set to '5', and so that the color of the font is 'silver.'
Line 10 - Type a tag that will bold the following text
- Line 11 - Type the following words:
Snow Gear
Line 12 - Close the tag that made the previous text bold.
- Line 13 - Close the <FONT> tag.
Line 14 - Close the table cell.
Line 15 - Start a new table cell that has a width of 200 pixels and a background color of 'silver.' The cell should be left aligned.
Line 16 - Type the following words:
Gortex Ski Pants
Line 17 - Type a tag that will insert a line break into your HTML document.
- Line 18 - Type the following words:
Rubber Snow Boots
Line 19 - Close the table cell.
- Line 20 - Type a tag that will create a new table cell. The cell should have a background color of 'silver,' and should have a width of 50 pixels. The cell should also be left aligned.
Line 21 - Type the following:
39.00
Line 22 - Type a tag that will insert a line break into your HTML document.
- Line 23 - Type the following:
29.59
Line 24 - Close the table cell.
- Line 25 - Close the table row
Line 26 - Close the table.
- Line 27 - Close the tag that you used earlier to center the table.
Line 28 - Close the BODY portion of your HTML document.
- Line 29 - Close the HTML document.
Remember to click on the 'Validate' button once you've typed all 29 lines of the assignment.
-Bonus Assignment-Return to the Supplementary Materials page one last time, and then follow the link to the 'Nutrition Chart.' Click your browser's 'File' menu and save this file to disk. Then, open the file in a text editor and use the align and bgcolor parameters to improve the readability and appearance of this table. Try using colspan and/or rowspan to segregate the dairy products from the meats and the meats from the grains.
This assignment is to be completed on your own. It is not necessary to send us this page, but feel free to post a question in the discussion area if you have any questions.
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.
Copyright 1999 by ed2go.com. All rights reserved.
No reproduction or redistribution without written
permission.