Here's an opportunity to practice all of the skills you've learned
in the previous three chapters. LawnBirds, Inc. has asked you
once again to create an HTML document for their World Wide Web
site. This time, they want to create a simple online catalog of
their products. They also want to include a form for people to
fill out if they'd like to receive a printed version of the catalog
in the mail.
You'll get a chance to perform a few advanced graphics tricks
as well as put your knowledge of forms and tables to the test.
If you get a little stuck along the way, don't worry. You can
always refer back to the previous chapters for help.
Here's where we'll include a background image, which you learned
about in Chapter 9 Since you probably don't have this exact graphic
on your system, you can substitute your own image. Remember to
use a light-colored, low-contrast image for the background. Make
a copy of your image file and name it backlogo.gif.
Now we'll insert the LawnBirds logo. We'll use the version
that we created in Chapter 9with transparency. This will allow
the background image to show through. Type <IMG SRC="logo.gif"
ALT="LawnBirds logo" ALIGN=LEFT>.
Inside the <IMG> tag, type the height and width of the
image using the HEIGHT and WIDTH attributes. In our example, the
height and width are 153 pixels and 203 pixels, respectively.
If you're using a different image, substitute the correct size
for each. You can determine the size by opening the image in Paint
Shop Pro or another image editing program.
Type in the entire text of the first paragraphs, followed
by a </P> tag. Press Enter, and then type in the
text of the second paragraph, enclosing it with <P>
and </P> tags. Finally, press Enter again.
The best way to present the product catalog in HTML is with
a table. The columns of the table will be the product code, the
product name, a brief description, and the price. To start the
table, type <TABLE BORDER> and press Enter.
Type <TH>Code</TH> to specify the contents
of the first table heading cell. Then type in the remaining table
headings, surrounding each one with a <TH> and </TH>
tag pair. To keep things understandable, you may want to type
each one on a separate line. When you're finished, press Enter.
Now we'll start entering the data for each product in the
LawnBirds line. Each item needs to be entered in order using the
<TD> and </TD> tag pairs. You can keep all of the
<TD> elements on one line, or type each of them on separate
lines for readability. To make things easier to follow in this
example, we'll put each one on a separate line.
Type <TD>A001</TD> to mark the product
code of the first item in the catalog. Then press Enter.
Type <TD>, followed by the full product description.
If you skipped step 1 and didn't turn on Word Wrap, you'll probably
want to turn it on now. When you're finished typing in the description,
type </TD> to close the cell. Then press Enter.
Repeat the above steps for each row of data. Remember that
each row must begin with a <TR> tag and end with a </TR>
tag. Each cell begins with a <TD> and ends with a </TD>.
Now we'll create a simple online form for readers to fill
out if they'd like to receive a printed version of the catalog
in the mail. First, we'll separate the form from the rest of the
document by placing a horizontal rule. Type <HR>
and then press Enter.
Before you create the form, place an introductory paragraph
in the document explaining what the form is for. Type <P>,
followed by the text of the paragraph. Then type </P>
and press Enter.
Because this is a very simple request form, we'll just have
the results sent to an e-mail address at LawnBirds. Inside the
<FORM> tag, type ACTION="mailto:catalog@ lawnbirds.com".
Type <INPUT NAME="lastname" TYPE=text WIDTH=20>
to place the actual input field. This creates a single-line text
field with a maximum length of 20 characters. Now type <BR>
to place a line break and press Enter.
Type First Name: followed by <INPUT NAME="firstname"
TYPE=text WIDTH=12> to place the second input field. Again,
type <BR> on the next line and press Enter.
To create the final line of input, which contains the city,
state, and zip code information, type City: followed by
<INPUT NAME="city" TYPE=text WIDTH=20>
to create an input field for the city. Then type State:
followed by <INPUT NAME="state" TYPE=text WIDTH=2>.
Finally, type Zip: followed by <INPUT NAME="zip"
TYPE=text WIDTH=5>.
Type <INPUT NAME="reset" TYPE=reset>
to create the Reset button, which will clear all of the input
fields. Then type </P> to close the paragraph, and
press Enter.
