Chapter Two - Lesson One - The Basics - Page Three, "Order Form" page

Page Three - "Order Form" page

The order form page that you are going to create consists of several tables typed inside a larger table, with a lot of extra non-breaking spacing codes inside them in order to force the text and lines to be placed and aligned with other text and lines. If this were a form that was going to be electronically submitted, then it would have fields instead of lines, and would not need the non-breaking space codes, but since we are setting this page to be printed out by the viewer and mailed in, then we need to use the spacing codes. We do not want to use the spacing graphic that we used for manipulating the formatting with the "about us" page in this case, because when the form is printed out, a spacing graphic would print as a gray block instead of being transparent like it is on the screen.

Since this form is going to be printed by the viewer, we do not want to have the same hyperlink bullets on it that the other two pages have. We will also be using a different version of the background graphic for this page.

The following code sets the table for the order form with a width of 90% of the page. The body code contains the name of the new background image, and the section that sets the top row of the table contains one data cell that stretches across both columns of the table.

The second section (table row) will contain two data cells that will be 50% of the table width each. They will each have large bold headings and a list of items. Since the two lists are the same, you can copy the first list once it is typed, and paste it for the second set.

<TR>
<TD WIDTH=50%>
<CENTER>Tour Guide Booklets 
($9.95 each)</CENTER> 
_____ African Continent 
_____ Asia 
_____ Australia/New Zealand 
_____ Caribbean Islands 
_____ Europe/Greece 
_____ Polynesian Islands 
_____ South America 
</TD>
<TD WIDTH=50%>
<CENTER>Photo Journals 
($14.95 each)</CENTER> 
_____ African Continent 
_____ Asia 
_____ Australia/New Zealand 
_____ Caribbean Islands 
_____ Europe/Greece 
_____ Polynesian Islands 
_____ South America 
</TD>
</TR>

The third section (table row) of this page will contain a new table within the main table. Doing this will make it easier for the contents of the first cell to be aligned correctly, and will not create a vertical line between them. This will make it appear to be all one data cell when in fact it really two data cells. Several non-breaking space codes will be needed to help align the lines and text within this section.

<TR>
<TD COLSPAN=2>
Information Packets and Brochures
<TABLE WIDTH=100% BORDER=0>
<TR>
<TD VALIGN=TOP>
_____ African Continent 
_____ Asia 
_____ Australia/New Zealand 
_____ Caribbean Islands 
_____ Europe/Greece 
</TD>
<TD VALIGN=TOP>
    _____ Polynesian Islands 
    _____ South America 
    _____ Other: 
        
       
       
 
_________________________________________________________________ 
        
       
       
 
_________________________________________________________________ 
</TD>
</TR>
</TABLE>
</TD>
</TR>

The fourth row of the main table will be a straight-forward single data cell section contain one heading and several lines for the viewer to fill in when the form is printed out. The form lines typed below can each be typed in a continuous line without hitting your return key when yo come to the end of the line like you might want to do with other lines of code. You can let the lines automatically wrap in Simpletext down to the next line.

<TR>
<TD COLSPAN=2>
Additional information needed or comments:

_____________________________________________________________________ __________________________________ 
_____________________________________________________________________ __________________________________ 
_____________________________________________________________________ __________________________________ 
_____________________________________________________________________ __________________________________ 
</TD>
</TR>

The first data cell of the last row of the main table will contain the lines for the viewer's address and phone number. Several spacing codes are needed to align the second address line with the first one.

<TR>
<TD VALIGN=TOP WIDTH=50%>

Your Name: ____________________________________ 
Address: _______________________________________ 
        
        
_______________________________________ 
Phone Number: _________________________________ 
Fax Number: ___________________________________ 

</TD>

You are now down to the last data cell in the main table. This section will contain the totals of number of items ordered and the charges. The best way to handle the alignment of these lines is to set them inside another table with different horizontal alignments.

<TD VALIGN=TOP WIDTH=50%>
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD VALIGN=TOP>

Total Number of Booklets:
        
    ____ 
Total Number 
of Photo Journals: ____ 
</TD>
<TD VALIGN=TOP ALIGN=RIGHT>
 
(@ $9.95 each) _________ 
(@ $14.95 each) _________ 
 
Subtotal: _________
Shipping:           $3.50
TOTAL: _________
</TD>
</TR>
</TABLE>

To finish off this data cell, add another line break and a bold italic line stating who the consumer's checks are to be made out to. Then end the cell, row, and table codes.

<CENTER>
*Please make your check payable to Adventure Travel Service.
</CENTER>
</TD>
</TR>
</TABLE>

Since this page does not have the same navigation buttons that the other two pages do, we are going to add a button at the bottom of the page that will have a hyperlink attached to it to send the viewer back to the main homepage.

You are now finished with this page and your entire file should read as follows:

<HTML>
<HEAD>
<TITLE>Order Form</TITLE>
<BODY BACKGROUND="backgrnd2.gif">

<CENTER>
<TABLE WIDTH=90% CELLPADDING=10 BORDER=2>
<TR>
<TD COLSPAN=2>
<CENTER><H1>Adventure Travel Service</H1>

33025 18th Pl. South, Suite E-201 
Federal Way, Washington 98003 
Phone: (206) 555-1212; Fax: (206) 555-2121

 
Please print and complete this form and mail or fax it to our office to place your order. 
Or, if you wish, you may e-mail us your request for additional information about our services.
</CENTER>
</TD>
</TR>
<TR>
<TD WIDTH=50%>
<CENTER>Tour Guide Booklets 
($9.95 each)</CENTER> 
_____ African Continent 
_____ Asia 
_____ Australia/New Zealand 
_____ Caribbean Islands 
_____ Europe/Greece 
_____ Polynesian Islands 
_____ South America 
</TD>
<TD WIDTH=50%>
<CENTER>Photo Journals 
($14.95 each)</CENTER> 
_____ African Continent 
_____ Asia 
_____ Australia/New Zealand 
_____ Caribbean Islands 
_____ Europe/Greece 
_____ Polynesian Islands 
_____ South America 
</TD>
</TR>
<TR>
<TD COLSPAN=2>
Information Packets and Brochures
<TABLE WIDTH=100% BORDER=0>
<TR>
<TD VALIGN=TOP>
_____ African Continent 
_____ Asia 
_____ Australia/New Zealand 
_____ Caribbean Islands 
_____ Europe/Greece<BR 
</TD>
<TD VALIGN=TOP>
    _____ Polynesian Islands 
    _____ South America 
    _____ Other: 
             
            
_________________________________________________________________ 
             
            
_________________________________________________________________ 
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
Additional information needed or comments:

______________________________________________________________________ _________________________________ 
______________________________________________________________________ _________________________________ 
______________________________________________________________________ _________________________________ 
______________________________________________________________________ _________________________________ 
</TD>
</TR>
<TR>
<TD VALIGN=TOP WIDTH=50%>

Your Name: ____________________________________ 
Address: _______________________________________ 
             
    _______________________________________ 
Phone Number: _________________________________ 
Fax Number: ___________________________________ 

</TD>
<TD VALIGN=TOP WIDTH=50%>
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD VALIGN=TOP>

Total Number of Booklets:
             ____ 
Total Number of Photo Journals: ____ 
</TD>
<TD VALIGN=TOP ALIGN=RIGHT>
 
(@ $9.95 each) _________ 
(@ $14.95 each) _________ 
 
Subtotal: _________
Shipping:
          $3.50
TOTAL: _________
</TD>
</TR>
</TABLE>
 
<CENTER>
*Please make your check payable to Adventure Travel Service.
</CENTER>
</TD>
</TR>
</TABLE>

 
<A HREF="index.html"><IMG SRC="backbutton.gif" BORDER=0></A>
 
</CENTER>
</BODY>
</HTML>

View this page to see it in final form.

When viewing the order form page, if your code has the horizontal form lines set too long or too short, go back to your HTML file and adjust their length accordingly.

You are now finished with your pages and have completed a basic website. Although this site appears to be very simple, it contains the most commonly used code elements. In the next two lessons, you will learn how to embellish this site and convert it to one that uses frames and has some java script elements on it.

In order to see the differences between how this first practice website navigates and the new version of it you are going to create in the next two lessons, create new folders for each lesson and save complete copies of all of the artwork needed for each within them. By doing this, your code for each lesson will be able to find all of the graphics for your pages and you will not accidentally overwrite your old page files with your revised ones.

After you have completed all three lessons, you will be able to refer back to your HTML files and cut and paste the code you need into your own new files and alter them to suit your needs.

Hosted by www.Geocities.ws