Let us combine all the exercises we are working on into Assignment 3. This means that the following exercises must be completed and linked to your Web site by the final day of class:
While these skills are laid out in weekly agendas, they will also be posted in BlackBoard in order to allow you to work on them as you will.
The complete Assignment 3 will be posted by Friday.
We've talked a little about tables. These are used both to format data and to layout Web pages. The following tutorials will help get you started.
I like this series of table tutorials by WebMonkey. As always, I suggest you try things first using HTML then using your Web Authoring software. But you don't have to do things that way. Do go through at least the first three tutorials - the "lean mean" table one is a bit over the top. Though these articles date back to 1996, nothing has really changed about this topic.
Practice using tables as page layout tools by creating the following versions of the I Ching. Do not look at the code unless you must. Post the Table Version to your Web Site:
Forms allow you to collect data from visitors to your page. They involve some specific tags, and are a bit complex at first. Most of us have filled out Web forms (such as my class survey), so we're at least familiar with things.
The real problem with forms is that in order to get the data, you must have a small program running on your server called a CGI script. This program takes the data and captures it in some way. We'll talk more about CGI scripts later, but for now I have provided access to a simple CGI for you to practice with.
The alternative is to use "Mailto:" in the Method attribute of the form. This sends the data to your email address. This is used a lot by those wishing to collect data but not hassle with a CGI script.
All links are to a specific section of the WDVL Form Quick Reference
- Begin with the FORM tag
- Then create a place for text input
- Finally, create Submit and Reset buttons (note: This is kind of a dumb page. You create one submit button and one reset button.)
Exercise 1: In your Web authoring software, create a simple text entry form that POSTs to http://www.xmission.com/cgi-bin/post-query. This method will allow you to quickly see the results of your form. Your result should look something like my simple form.
- Now add Text Boxes with several lines
- Popups (this is covered towards the bottom of the page)
- Check Boxes
- Radio Buttons
Exercise 2: I used to use a method called "Mailto" as a quick way to use forms, but spam has made this unadvisable. So we need to go a more complicated way using the FormMail cgi. Briefly, cgi's are little programs that servers can run. I've installed it on my personal server, and it will work for your form if you follow my instructions below.
- Download this survey form as html. Note that there is a lot of programming on it.
- Find the line in the form that reads as the following:
- <input type=hidden name="recipient" value="email@example.com">
- Change the email address from mine to yours. This tells the script to send the form to you.
- Important! You must use your ODU email address as listed in Blackboard! In order to not get spam through this cgi I have limited acceptable server use to specific email addresses from the ODU domain.
Leave the Action and Method attributes as set
- You'll note that I link to "zzyzx.pl", not formail. This is a strategy to avoid spammers harvesting email addresses. The FormMail.pl name is well known to these people.
Upload the form to the server to test it. You will know its working when you submit the form and then receive an email containing all the information from the form. This email will arrive in your regular email client almost immediately
I know there is a lot of mumbo-jumbo on this form, but it will serve to show you how a complex form is created and formatted. Note how I use a table to make the form legible. Also, there are a lot of "hidden" input fields in my form that are used to work with the cgi. I'll make a full lesson on using FormMail ASAP, as it's a useful addition to your teaching library.
Either post Exercise 2 above or make your own form.
Thursday, April 13, 2006 9:56 AM