Sample Home Page

(5 Jul 2001: as I move files from my desktop PC to our new Web server, minor editing – just enough to get them working on the new server – was done on these pages.)

About Me

Here is a picture of me: Dumb Picture #1

Here is me looking dumb: Dumb Picture #2

This is a typical home page. Many of you are probably familiar with the HTML code needed to write such a page. Here is what it would look like in a text-only browser like Lynx:


                                                    Sample Home Page (p1 of 2)
                                   
                                   [IMAGE]                                      
   
   [IMAGE]                                                                      
     _________________________________________________________________          

About Me                                                                        
   
   Here is a picture of me: [IMAGE]                                              
   Here is me looking dumb: [IMAGE]
   [IMAGE]
     _________________________________________________________________          
-- press space for next page --

One very important technique to remember when writing Web pages is the ALT= attribute in the <IMG> tag. For example, code similar to
<IMG SRC="welcome.GIF" BORDER=1 ALT="Welcome to My Home Page">
will produce the same look when viewed in a browser like Netscape, but a much more readable page, such as the following, in a text-only browser. It is, thus, entirely possible to write one page that looks good in both types of viewers.


                                                    Sample Home Page (p1 of 2)
                           
                           WELCOME TO MY HOME PAGE                              
   
   Under Construction                                                           
     _________________________________________________________________          

About Me                                                                        
   
   Here is a picture of me: Dumb Picture #1                                      
   Here is me looking dumb: Dumb Picture #2
   Go To Next Section
     _________________________________________________________________          
-- press space for next page --

Is There More?

Suppose you would like your viewer to be able to do more than just look at a pretty picture, like

e-mail you a response
provide input to interactively generate another Web page
take a test, parts of which could be automatically graded, with both of you receiving copies of the results
or--use your imagination

To do this, you would need to write a page containing a FORM such as:

A Sample Form

In this example, each line is shown twice so you can see the code and the results produced.

<FORM METHOD="POST" ACTION="/htbin/carterjs_proposal_form1.com"> (Note that this is not displayed.)

What's your name? <INPUT TYPE="TEXT" NAME="USERNAME" SIZE="20">
What's your name?

<INPUT TYPE="HIDDEN" NAME="HIDE-ME" VALUE="This is a hidden field">

Please enter your zip code here: <INPUT TYPE="TEXT" NAME="ZIP" SIZE="5" MAXLENGTH="5">
Please enter your zip code here:

What's your favorite bird?
<INPUT TYPE="radio" NAME="BIRD" CHECKED="YES" VALUE="I care about cardinals."> Cardinal
Cardinal
<INPUT TYPE="radio" NAME="BIRD" VALUE="I rave about robins."> Robin
Robin
<INPUT TYPE="radio" NAME="BIRD" VALUE="I babble about bluebirds."> Bluebird
Bluebird

Please answer the following multiple choice questions:

Cincinnati is <INPUT TYPE="radio" NAME="cinti" VALUE="north"> north, <INPUT TYPE="radio" NAME="cinti" VALUE="south"> south, <INPUT TYPE="radio" NAME="cinti " VALUE="east"> east, <INPUT TYPE="radio" NAME="cinti" VALUE="west"> west of Kentucky.
Cincinnati is north, south, east, west of Kentucky.

Animal Picture This animal is a(n) <INPUT TYPE="radio" NAME="animal" VALUE="dog"> dog, <INPUT TYPE="radio" NAME="animal" VALUE=&butterfly"> butterfly, <INPUT TYPE="radio" NAME="animal" VALUE="alligator"> alligator, <INPUT TYPE="radio" NAME="animal" VALUE="chicken"> chicken.
This animal is a(n) dog, butterfly, alligator, chicken.

This quiz question is worth 5 points: Explain what makes bread rise.
<TEXTAREA NAME="bread" ROWS=6 COLS=40>Put any optional text here.</TEXTAREA>
Put any optional text here.

When the user is all done, there needs to be a way to tell the Web server to submit the form so that something can be done with the data collected, so you need to add:

<INPUT TYPE="SUBMIT" VALUE="Push Me"> Press here to see the results.
Press here to see the results.

Optionally, just in case your user changes his or her mind and wants to re-do the whole thing, it's a good idea to add:

<INPUT TYPE="RESET" VALUE="Forget It"> I goofed it up.
I goofed it up.

And finally, don't forget </FORM>

Now What?

Now the fun begins. It doesn't do any good to submit a form if you don't have a way of handling it! When the user presses the SUBMIT button, your HTTP server bundles up all the information you've told it to collect into one long query string, which might look something like:
USERNAME=JAN+STEIN+CARTER&HIDE-ME=THIS+IS+A+HIDDEN+FIELD&ZIP=45103&BIRD=I+CARE+ABOUT+CARDINALS.&CINTI=NORTH&ANIMAL=DOG&BREAD=PUT+ANY+OPTIONAL+TEXT+HERE.+I+CAN+PUT+MORE+TEXT+HERE.+MARY+HAD+A+LITTLE+LAMB.
and tries to send it off to be processed by the file you specified. If you haven't done so yet, fill out the form and submit it to see what happens next.

carterjs@uc.edu

10/II/96