Lesson Plan

Objectives (Morning)

• Create frames for a Web presentation

• Control the appearance and placement of frames

• Control the behavior of hypertext links on a page with frames

• Use magic target names to specify the target for a hypertext link

• Create a page that is viewable both by browsers that support frames and by those that do not

• Work with Netscape Navigator extensions that change the appearance of frames

Objectives (Afternoon)

• See how CGI scripts play a role with forms

• Review various parts of an online form

• Create form elements using HTML tags

• Create a hidden field on a form

• Work with form properties

• Learn how to send data from a form to a CGI script

• Learn how to send form information without using CGI scripts

Coursework / Lab Work (Morning)

• Quiz

• CTM practice test for chapter 5

• Demo

• Sample problems for frames

• Continue to work on checkpoint.

• From the New Perspectives HTML manual (tutorial #5):  

• Work your way through the New Perspectives manual for Tutorial #5.

• Work your way through chapter 6 of the supplementary notes.

• Work your way through Netskills AUTH6 on frames

• Quick checks on page 5.17, 5.33

• Case problems 1 & 2 on pp 5.34 - 5.36.

Coursework / Lab Work (Afternoon)

• CTM practice test for chapter 6

• Sample problems

• Continue working on checkpoint #2. 

• From the New Perspectives HTML manual (tutorial #6):  

  • Work your way through the New Perspectives manual for Tutorial #6

  • Work your way through chapter 5 of the supplementary notes.

  • Sample problem (in this lesson plan)

  • Quick checks on pages 6.16, 6.29, and 6.40

  • Case problems #1 & #2 from pg 6.42 - 6.44

Home Work

• Work on checkpoint.

• Case problems from chapters.

Demo (Morning)

• What are frames? (Intro) – page 5.2 – 5.5

• Frame Documents (Layout) – page 5.6 – 5.9

• Frame Source – page 5.9 – 5.10

• Nesting Frames – page 5.11 – 5.13

• Frame appearance – (Scrolling, Margins, Resizing) - page 5.14 – 5.16

• Naming your frames, using targets – page 5.19 – 5.20

• BASE targets – page 5.21

• Magic targets – page 5.22 – 5.26

• NOFRAMES – page 5.26 – 5.29

• Tips – page 5.30

• Netscape Ext (Bordercolor, border width) – page 5.31 – 5.32

• I/E Extensions – (borders, spacing)

• Image maps in frames

• Floating frames (IFRAME)

Demo (Afternoon)

• Steps for form submission - page 86, HTML II

• <FORM>, <FORM NAME=""> - Multiple Forms - pg 6.8, NP

• No nesting

• <FORM ACTION="url" METHOD=POST>…</FORM>

• POST (stream) vs. GET (parameters)

• Submit & Reset Buttons - <INPUT TYPE=SUBMIT|RESET VALUE="label">

• Test Servers

                http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query

• Text Entry Fields

                <INPUT NAME=""> - naming control
                <INPUT SIZE=#> - field size
                <INPUT MAXLENGTH=#> - entry restriction
                <INPUT VALUE="default"> - default value

• File Attachments

                <INPUT TYPE=FILE>

• Checkbox

                <INPUT TYPE=CHECKBOX NAME="">
                Labels
                CHECKED
                VALUE="checked"  (on)
                Multiple checkboxes

• Radio

                <INPUT NAME="groupname" TYPE=RADIO VALUE="item#">
                CHECKED

• Password

                <INPUT TYPE=PASSWORD NAME="pass">

• Combo Box

                <SELECT>…</SELECT>
                <OPTION>
                <OPTION SELECTED>
                States of control

• List Box

                <SELECT SIZE=#>  #>1
                <SELECT MULTIPLE>
                <OPTION SELECTED>

• Free form

                <TEXTAREA NAME="" ROWS=# COLS=#>…</TEXTAREA>
                Default text between tags, all CRLFs count
                Feedback form example.. J

• Hidden Elements

                <INPUT TYPE=HIDDEN NAME="" VALUE="">
                Not really hidden

• Image

                <INPUT TYPE=IMAGE NAME=BC VALUE="BC">

• Layout with tables

• Using FRAMES

• Using Mail

                <FORM ACTION="mailto: address" METHOD=POST>

• Translation programs - 6.39

• Tab order - TABINDEX=# & NOTAB (IE4/5)

Sample Problems

Problem 1:

Reproduce the form including in this case problem.

Notes:

• Each field should be individually named.

• Each field should be sized in a similar fashion.

• Posting should be to test server.

• Use a table to align the controls.

• Submission buttons at bottom are in their own row spanning 2 columns.

 The answer is included at the end of this lesson plan - don't cheat!

Problem 2:

Create the same feedback form in exercise #1, however, have the results go to the results frame.

Frames should constructed and  named as follows:

Sample Problem (Solution)

<HTML>
<HEAD>
</HEAD>

<BODY>

<FORM METHOD=POST ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query">                           

 <TABLE>
 <TR>
   <TD WIDTH=100 ALIGN=RIGHT>Name</TD>
   <TD><INPUT NAME="firstname" SIZE=25 MAXLENGTH=25>
       <INPUT NAME="middleinitial" SIZE=2 MAXLENGTH=2>
       <INPUT NAME="lastname" SIZE=25 MAXLENGTH=25></TD>
 </TR>

 <TR>
   <TD WIDTH=100 ALIGN=RIGHT>Address 1</TD>
   <TD><INPUT NAME="address1" SIZE=50 MAXLENGTH=50></TD>
 </TR>

 <TR>
   <TD WIDTH=100 ALIGN=RIGHT>Address 2</TD>
   <TD><INPUT NAME="address2" SIZE=50 MAXLENGTH=50></TD>
 </TR>

 <TR>
   <TD WIDTH=100 ALIGN=RIGHT>City</TD>
   <TD><INPUT NAME="city" MAXLENGTH=30 SIZE=30>
       Prov <INPUT NAME="prov" SIZE=2 MAXLENGTH=2>
   </TD>
 </TR>

 <TR>
   <TD WIDTH=100 ALIGN=RIGHT>Country</TD>
   <TD><INPUT NAME="country"> PC <INPUT NAME="pc" SIZE=8 MAXLENGTH=8></TD>
 </TR>

 <TR>
   <TD WIDTH=100 ALIGN=RIGHT>email</TD>
   <TD><INPUT NAME="email" MAXLENGTH=30 SIZE=30></TD>
 </TR>

 <TR>
   <TD COLSPAN=2 ALIGN=CENTER>
    <BR>
    <INPUT TYPE=SUBMIT VALUE="Post it man!">
    <INPUT TYPE=RESET VALUE="Clear Form">
   </TD>
 </TR>
 </TABLE>

</FORM>

</BODY>
</HTML>