Skip to Content

HET113/HET121

Lab 4 - Frames & Forms

Introduction

In this lab, we will be looking at how we can:

  1. Organise web pages into framesets and alter the properties of frames.
  2. Create forms. Using the form you create in this lab, you will send data to yourself via email and to a script that can process said data.

Instructions

Make sure you bring your textbook in the lab. YOU WILL NEED IT.

You are allotted two hours to complete this exercise in the lab. However, you can also complete the work prior to your scheduled session. You should then bring your finished work at the beginning of your appointed lab session for assessment. Your lab instructor may ask you some questions and/or make some corrections regarding your HTML code. If you have attempted the lab prior to your scheduled session but still have not completed the tasks, you may still work on them during the allotted two hours.

It is recommended that you attempt the tasks set in the labs prior to the appointed lab sessions.

Before you start the exercise, you will need to download Lab4.zip. This contains HTML files you will be using for your lab 4 exercises. Unzip this file into your C:\Temp directory. This action will create a folder called "Lab4" into your Temp directory. The unzipped folder should contain the following files: blue.htm, red.htm, green.htm, yellow.htm and readme.htm.To help simplify your tasks, it would be best if you create your exercise files within this same folder ("Lab4").

Create your exercise files using Notepad. If you create any part of your file using another program, your lab demonstrator will deduct marks from your assessed lab.

 

Frames Exercises

A. Creating Frameset Rows (Ch 10, p 168)

  1. Create a file named "frames1.htm".
  2. Create a simple frameset with two rows of equal height (use percentages instead of pixels). The top frame should be named "top" and refer to "blue.htm" while the bottom frame should be named "bottom" and refer to "red.htm".
  3. Viewed in a browser, the frameset should look like this.

B. Creating Frameset Columns (Ch 10, p 170)

  1. Create a file named "frames2.htm".
  2. Create a simple frameset with two columns (use percentages instead of pixels). The left frame should be named "left", be specified as 200 pixels wide and refer to "green.htm" while the right frame should be named "right", refer to "yellow.htm" and take up leftover space in the browser.
  3. Viewed in a browser, the frameset should look like this.

C. Creating Frames in Rows and Columns (Ch 10, p 171)

  1. Create a file named "frames3.htm".
  2. Create a frameset using "blue.htm", "red.htm" and "yellow.htm".
  3. Viewed in a browser, the frameset should look like this.
  4. The left frame should be named "left", the top right frame, "topRight", and the bottom right frame, "btmRight". The left frame should be 200 pixels wide. The top right and bottom right frames are of equal height.
  5. Make the border width of the frameset zero (0) to get rid of the borders.

D. More on Frames and Links (Ch 10 pp 175 - 185)

  1. Create a file named "frames4.htm".
  2. Create a file named "nav.htm". "nav.htm" should look like this.
  3. "Home" should link to "frames4.htm" and the HREF target should be "_top".
  4. "Blue", "Green", "Red" and "Yellow" should link to "blue.htm", "green.htm", "red.htm" and "yellow.htm", respectively.
  5. Each of the color links should have a target of "right".
  6. Create a simple frameset with two columns (use percentages instead of pixels). The left frame should be named "left", be specified as 100 pixels wide and refer to "nav.htm" while the right frame should be named "right", refer to "readme.htm" and take up leftover space in the browser.
  7. Viewed in a browser, the frameset should look like this.
  8. The frameset's border should be 20 pixels wide and the border color should be set to "blue".
  9. If a user clicks on the Blue link, for example, the page should change to this.

 

Forms Exercises

E. Creating a Form (Ch 11 pp 187 - 208)

  1. Create a form that looks like this.
  2. Make sure you have input fields for the following: Given Name, Surname, Sex, Favourite Movie, Hobbies and Comments.
  3. Given Name and Surname both use text fields.
  4. User selects Sex by choosing among three radio buttons.
  5. Favourite Movie is a drop menu (a select input field).
  6. Use check boxes for Hobbies.
  7. Use a text area for comments (set character width as "50", wrap as "virtual" and line depth as "4").
  8. Include a Submit and a Reset button.

F. Sending Form Data Via E-mail

  1. Configure Netscape for sending email using your student account. If you do not know how to do this, you can ask your lab demonstrator.
  2. Send the form data to yourself via e-mail (Ch 11, p 194).

G. Sending Form Data to a Script

  1. Follow the instructions in readme.htm on how to code your form.
  2. Try filling out your form, submit it and observe the output HTML.
  3. For more on Forms, read Chapter 11 of your textbook.

 

Optional Exercises (Ch 10 and 11)

  1. Make the right frame in "frames4.htm" unscrollable.
  2. Create an inline frame in the right frame of "frames2.htm" that contains "readme.htm".
  3. Change the Given Name input field from a text field to a password field. Be sure to still name it "givenname".
  4. When you send your data via e-mail, try changing the subject field to "Forms Exercises" by changing the form's ACTION property.

 

Author: Francis Ramirez