Assignment #4

RCC Fall 2009 CIS-72A XHTML

Using Forms!
Due Tue Oct 7 at start of class
6 Printouts, 100 Points

Part 1: the Hybrid VIdeo #5: Frames
1 Printout, 10 points

Although the main topic of this assignment is forms, the first part involves frames. Unlike other hybrid videos, this one you only have to watch and then answer some questions about. The site's files are provided in case you want to do what the video does or examine them further, but they are not needed to answer the questions. The questions appear below and then below the questions are additional instructions detailing what to turn in.

The links to this hybrid video and to the data files appear below. But before you attempt to access this video or its data files, you should first read the "About Hybrid Videos" document (and the section entitled "Getting The Data Files For The Video") so you are sure to be experiencing the video as it was intended.

Link to the data files: Data files for Video #5 (4K .zip file)

Link to the video (.wmv file): Hybrid Video #5 (10MB .wmv file, 49 min 42 sec video)

Link to the editor: CSE HTML Validator Lite

The 10 questions to keep in mind as you watch the video appear below.

1. Which one of the names below is a target name that browsers will automatically recognize as meaning they should open up the linked file in the same frame as the link itself is in?
   
   a) main  b) _main  c) _self  d) nav  e) _nav
2. If a base target has been defined for a page and a link within that page has a different target specified, what does the browser do when that link is clicked?
   
   a) uses the base target  b) uses the target specified in the link  c) shows an error page
3. What tag is designed to tell just recent browsers to ignore the html code within it?
   
   a) frame  b) frameset  c) noshow  d) noframes  e) nono
4. Given the final version of the frames-based site shown in the video, what is the name given to the right-hand frame?
   
   a) nav  b) nav2  c) _self  d) right  e) main
5. Given the fact that multiple pages are being displayed simultaneously in a frames-based site, and each of these pages can have a unique "title", what title does the browser display in its title bar?
   
   a) the frameset's title  b) the left-hand frame's title  c) the right-hand frame's title  d) combination of these titles
6. Which of the following can be described as a possible negative impact of designing a site using frames?
   
   a) site's structure is more complicated
   b) search engine ranking may be worse
   c) both of the above
7. Which of the following can be described as a possible positive impact of designing a site using frames?
   
   a) navigation system is more centralized
   b) search engine ranking will be better
   c) both of the above
8. What version of Internet Explorer (for Windows) was the first version that was capable of properly displaying a frames-based site?
   
   a) IE 1  b) IE 2  c) IE 3  d) IE 4  e) IE 5
9. When used within a frameset tag, what does the asterisk symbol (*) mean?
   
   a) do not display this frame initially
   b) give this frame the rest of the available space
   c) keep this frame visible at all times
   d) the information for this frame will be given in a frame tag below
10. Can the user of a frames-based web site move the location of frame border (separator) themselves?
    
    a) Sometimes they can, sometimes not, depending on the frameset code
    b) No, this frame border cannot ever be moved by the user, regardless of the frameset's code
    c) Yes, this frame border can always be moved by the user, regardless of the frameset's code

Printout #1: After watching the video and keeping these questions in mind, follow the directions below to create the proper printout and obtain full credit for this part. Copy the above list of 10 questions and answers and paste them into a text editor of your choice (Notepad, Word, WordPad, etc.) Above the first question, type your own name and then "Assignment 4, part 1". Print the resulting page of questions and answers. After it prints, use a pen to circle the 10 correct answers.

Part 2: The Hybrid Video #6: Forms
2 Printouts, 40 Points

For this part of the assignment, you are asked to watch, listen, and do the same steps as are done in the hybrid #6 video. To do so you will need to have a set of data files ready for your own use. The links to this hybrid video and to the data files appear below. But before you attempt to access this video or its data files, you should first read the "About Hybrid Videos" document (and the section entitled "Getting The Data Files For The Video") so you are sure to be experiencing the video as it was intended.

Link to the data files: Data files for Video #6 (1K .zip file)

Link to the video file: Hybrid Video #6 (18.6 MB .wmv file, 45 min 40 sec video)

Link to the Flash version of this video: Flash Hybrid Video #6

Link to the editor: CSE HTML Validator Lite

By doing what the video does, you will be building a feedback form page that will become a part of your eventual final project. Your work can be saved on any disk and folder that you like. Your form page (and feedback response page) should be exactly like the ones created in the video with the following differences.

After completing your work from the hybrid video, make the following changes to your site:

1. As usual, your full name should appear instead of Joe Student everywhere that it exists within the 2 form related pages.
2. This video is not as new as most of the others in this series. As a result, there are some problems with a few of the tags used in the video. Although the video had many notes within it indicating these problems and indicating the changes you needed to make, here these changes are summarized for you. You may have already fixed some or all of them so just read the issues below, double check your form page's code, and fix any problems as needed before turning in your work:
   • There are problems with the "br" tags within this video! Find and fix all "br" tags (as needed) so that each one looks like this: <br />
     
   • There are also problems with the "input" tags. Input tags don't have closing </input> tags so they should be closed with the usual space and slash at the end. Fix every one of the "input" tags within the page so that they have the general form <input type="whatever" />.
3. Open your form page in the browser. Next fill out the form completely, as if you are giving yourself some very positive feedback about your Web site (but do not submit the form yet). Now you are ready to create your first printscreen.

Printout #2: Turn in a printscreen of the browser displaying your own filled-out feedback form page (as described above). Your own name should be visible in the browser's title bar, on the page's heading, and in the "name" text box (scroll the page up toward the top a bit if necessary). Note that this must be a printscreen printout, not a printout from the browser's file menu. It is ok if your entire feedback form page does not display since it may be longer than can fit in one screen.

Printout #3: Turn in a printout of the HTML code for the myfeedback.htm form page. If you are using the CSE HTML Validator to print your code, be sure to click the "Wrap lines" checkbox in the Print dialog box so that all of your code shows up. Your code is expected to be valid and will be graded accordingly.

Part 3: Tutorial 6: Creating Web Page Forms
2 Printouts, 50 Points

Read and follow along the steps and instructions given within tutorial 6 (pages 345 - 393). In completing these pages, you will create "The Lighthouse" donation form page shown on page 387. To create the proper form page and create the proper printouts, keep the following items in mind.

1. At the bottom of page 350, where you are asked to enter the "form" tags, also insert your full name into the existing paragraph above the form as follows. At the end of the words "indicates required information", insert " -- form created by Firstname Lastname", where you insert your own name. For example, if your name is "Joe Smith", the paragraph would end up reading "* indicates required information -- form created by Joe Smith".

After completing this tutorial, create the following printouts to turn in.

Printout #4: Open your finished Lighthouse donation form page in the browser and fill in the First Name and Last Name fields with your name as if you were filling out the form yourself. With your first and last name showing in those 2 text box fields as well as in the paragraph above the form (as directed above), create a printout of the form page using the browser's File menu. Use your browser's "Page Setup" feature to reduce your browser's printing margins and/or to choose "landscape" orientation to better fit the page as needed (if it takes 2 pages to fit it all that is ok.) Your printout does not need to include any of the background images or colors that appear in the browser.

Printout #5: Turn in a printout of the HTML code for this same Lighthouse donation form page document, printed from within your text editor (CSE HTML Validator for example). Make sure that all of your HTML code shows up on your printout. If you use the CSE HTML Validator to print your code, be sure to click the "Wrap lines" checkbox in the Print dialog box. Note that this printout may take a few sheets of paper -- be sure to turn it all in and to order your printout sheets properly. Your code is expected to be valid and will be graded accordingly, so you should validate it (and fix any problems before printing it). To validate, you may use the CSE HTML Validator or another validator of your choice.

Part 3: Cover Sheet
1 Printout, 0 Points

For your last printout, you will make an adjustment to your assignment 3 cover sheet page and then print it for use as assignment 4's cover sheet. Begin by copying your existing assignment 3 cover sheet file and giving the new copy an appropriate name.

• Change the assignment indicator from "Assignment #3" to "Assignment #4".

Printout #6: Turn in a printout of the updated cover sheet document. Staple this cover sheet printout to the front of your other printouts. Arrange the rest of your printouts in the order in which they were numbered in this handout.