Lab 8: Forms and Frames

What You Will Do Today

1. Create a simple web-based form.
2. Create a simple frame-based web site.

Setup

1. Create a folder named weblab8 in your folder.
2. Open Mozilla Composer.

Create a Web Form

1. View the source of Lecture 7b or the example survey (e.g. open with Kedit) to make it easier to see and copy the HTML of the form.
2. Click Format, Page Title and Properties. The page title should be Web Form by your name.
3. Type Web Form by your name into the document and format it as Heading 1.
4. Save your page into your weblab8 folder with file name form.html.
5. Edit the source of the file.
6. After the heading tag, add a form tag with method post and an action which sends a message to your e-mail account.
7. Add a closing form tag before the closing body tag.
8. Put all the following fields between the opening and closing form tags.
   • Begin each field with a new paragraph.

Create Menus

1. Type Menus and format it as Heading 2.
2. Add a pull-down menu named degree with options BSc, MSc, PhD and Other.
3. Add a scrolling menu named nationality with size 3.
   1. Use options Kenya, Tanzania, Uganda, Rwanda, Burundi, and Other.
   2. Select as default your own nationality.
4. Add a multiple-select menu named subjects.
   1. Display all these options without scrolling: Computer Science, Economics, Mathematics, Statistics.
   2. Select as default the subjects you are studying.

Create Text Fields

1. Type Text Fields and format it as Heading 2.
2. Add a text field with size 20 named email and labeled Email Address with value username@hostname.
3. Add a password field with size 8 and maxlength 8 named password and labeled Password.
4. Add a file text field named attachment and labeled Upload File.
5. Add a text area named message 60 characters wide by 4 lines high with word wrap.

Create Buttons

1. Type Buttons and format it as Heading 2.
2. Add three radio buttons labeled Serif, Sans Serif and Monospaced and all named font.
3. Add three checkboxes named and labeled Bold, Italics, Underline.
4. Add a Submit button labeled Submit Form.
5. Add a Reset button labeled Reset Form.

Save and Test

1. Save your changes by pressing Ctrl-S.
2. Open in a browser, fill in the form and click Submit.
   • An email client should compose a message with your form information in the body.
3. If it doesn't work, make sure the closing form tag is just before the closing body tag.

Create a Frameset Document

1. For an example of a frameset, view the source of index.html for this site.
2. Click Format, Page Title and Properties. The page title should be Personal Website by your name.
3. Type Personal Website by your name into the document and format it as Heading 1.
4. Edit the source of the file using a text editor. (Mozilla removes framesets and insists on a body tag.)
5. In the head section add a frameset with two rows, the first 50 pixels tall.
6. In the frameset add two frames:
   1. a frame named nav with source nav.html, no scrolling, no resize.
   2. a frame named content with source home.html.
7. After the frameset tag add a noframes tag which indicates
   • This site is best viewed using frames. You can also use the <a href="nav.html">navigation bar</a>.
8. Save your page into your weblab8 folder with file name default.html.

Create a Horizontal Navigation Bar

1. Create a web page named nav.html with title Navigation Bar by your name.
2. Add the following text which will become a navigation bar with links.
   • Home | Education | Hobbies | Links | Form
3. Add a tag <base target="content"> to the head section of the document so the target of these links will be the content frame.

Create Content Documents

1. Create the following very brief web pages. Each should have the title both in the title bar and at the top as a Heading 1.

   File Name	Page Title	Contents
   home.html	Home Page by your name	contact information (e.g. name, address, phone, email)
   educ.html	Education by your name	briefly list your educational history
   hobbies.html	Hobbies by your name	briefly list your spare time hobbies and interests
   links.html	Links by your name	link to the UMU home page and a few of your favourite sites

2. Link the navigation bar to each of the documents above.
3. Save your changes and test in a browser.
4. Test that a scrollbar appears only in the content frame when you make the window small enough.

Add Your Photo

1. Use the Gimp or Image Magick to open your photo.
2. Reduce the width and height of your photo so the file size is less than 10 KB.
3. Save the smaller photo into your weblab8 folder.
4. Add your photo to your home page and test.

Submit the Assignment

1. Check that your weblab8 folder contains 7 HTML files and a photo.
2. Use Ark to compress your weblab8 folder to weblab8.zip.
3. Send the weblab8.zip file as an e-mail attachment to gvogl@umu.ac.ug with subject line web lab 8.