TRY IT!

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.

Figure 1 :

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.

Start Notepad and turn Word Wrap on.
Figure 2 :
Type in the first few lines of your HTML document, pressing Enter after each one.
Figure 3 :
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.
Figure 4 :
Type <BODY BACKGROUND="backlogo.gif"> and press Enter.
Figure 5 :
Insert a headline by typing <H1>LawnBirds Online Catalog</H1>, then press Enter.
Figure 6 :
Type <P> to start the first paragraph, then press Enter.
Figure 7 :
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>.
Figure 8 :
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.
Figure 9 :
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.
Figure 10 :
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.
Figure 11 :
The first row of cells in the table will contain the column headings. Type <TR> to start the first row, and then press Enter.
Figure 12 :
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.
Figure 13 :
Type </TR> to mark the end of the table row and press Enter.
Figure 14 :
Type <TR> to start a new row of cells and press Enter.
Figure 15 :
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.
Figure 16 :
Type <TD>Flamingo</TD> to enter in the data for the second cell in this row, the product name. Then press Enter.
Figure 17 :
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.
Figure 18 :
Type <TD>$29.95</TD> to enter the contents of the final cell in this row, the price. Then press Enter.
Figure 19 :
Type </TR> to mark the end of this table row, then press Enter. Type <TR> to mark the beginning of the next row, and press Enter again.
Figure 20 :
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>.
Figure 21 :
When you're finished entering the data for all the cells, type </TABLE> and press Enter.
Figure 22 :
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.
Figure 23 :
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.
Figure 24 :
Now type <FORM METHOD=POST> to start creating the form.
Figure 25 :
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".
Figure 26 :
Move the cursor to the end of the <FORM> tag and press Enter.
Type <P> to start a paragraph, and then type Last Name:. This is the label for your first input field.
Figure 27 :
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.
Figure 28 :
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.
Figure 29 :
Type Address: followed by <INPUT NAME="address1" TYPE=text WIDTH=40> to create the first line of the address field. Then type <BR> and press Enter.
Figure 30 :
Type <INPUT NAME="address2" TYPE=text WIDTH=40> to create the second line of the address field. Then type <BR> on the next line and press Enter.
Figure 31 :
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>.
Figure 32 :
Type <BR> to force a line break. Press Enter and then type <INPUT NAME="submit" TYPE=submit> to create the Submit button.
Figure 33 :
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.
Figure 34 :
Type </FORM> to close the form and then press Enter.
Figure 35 :
Type </BODY> to close the body section and then press Enter.
Figure 36 :
Type </HTML> to mark the end of the HTML document.
Figure 37:
Select Save As from the File menu and save your document. In this example, we'll name the file catalog.html.
Figure 38 :