introduction to programming the www i cmsc 10100-1 winter 2004 lecture 5
DESCRIPTION
3 Frames Use Frame to display multiple HTML documents in a same browser window Each document is a frame Each frame is independent of the others Advantages Facilitate Web site navigation Good for organizing large Web sites Easy to construct Disadvantages The web developer must keep track of more HTML documents It is difficult to print the entire pageTRANSCRIPT
Introduction to Programming the WWW ICMSC 10100-1
Winter 2004Lecture 5
2
Today’s Topics
• HTML Frames• HTML Forms• Perl Introduction
First Perl Program
3
Frames
• Use Frame to display multiple HTML documents in a same browser window Each document is a frame Each frame is independent of the others
• Advantages Facilitate Web site navigation Good for organizing large Web sites Easy to construct
• Disadvantages The web developer must keep track of more HTML documents It is difficult to print the entire page
4
Frame Code Structure
<home><head>…</head><frameset rols=“” cols=“”>
<frame name=“frame_1” src=“1.html”>…<frame name=“frame_n” src=“n.html”><noframes><body>use <a href=“no.html”>no-frame version</a> </body>
</noframes> </frameset></html>
5
The Frameset Element
• The frameset tag pair should follow the head element, replacing the body element• The cols and rows attributes are used to
divide the Web page into frames• Each frame is represented by a separate frame element
6
Setting up rows and columns
• Specify a certain number of rows or columns of certain sizes by<frameset cols=“100,300,*”>
• This makes a three columns of 100 pixels, 300 pixels, and the rest of the screen• Example: frameseta.html• Can also use percentages (n%)• Note: use no more than one * in the list
7
The Frame Element
• Each frame tag should contain a name attribute The name attribute is used for targeting links
(discuss later)• Each frame tag should contain a src
attribute that specifies a Web page• Can shutdown resizing by adding noresize• Can turn off scroll bars with scrolling=“no”• frame is a self-closing tag
Other self-closing tags?
8
Some more attributes
• You may specify frameborder, framespacing, and border attributes• Only border seems to have a big effect• See HTML p. 136, and W3C online for
more information• Examples:
frameseta1.html (border="5" framespacing="5“) frameseta2.html (frameborder="0" border="0"
framespacing="0“)
9
Tabular layout
• By setting both the cols and rows attributes, you create a table of frames <frameset rows=“20%,*” cols=“*,50%”>
• Frames are listed row by row• Example: framesetb.html
10
Nested framesets
• Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout)• You can specify a <frameset> instead of
a <frame> to create nested framesets• Or, you can set the src for a frame to
point to a frameset file• Example: framesetc.html
11
Linking in frames
• Each frame may contain hyperlinks
• Each hyperlink can be targeted to different frame or a new window
• It is achieved by the target attribute of <a> tag
12
The target attribute• Target link to a named frame
Example: <a href=“foo.html” target=“myframe”> loads the source into a frame named myframe useful when using frames for site navigation
• HTML defined target values _blank opens a new, unnamed window _self opens the link in the current frame (default) _top opens the link in the full, unframed browser window (throws
you out of the frameset) _parent opens the link in the immediate frameset parent (calling
frame)
• Example: framesetd1.html
13
The base tag
• Rather than specifying the target for each link, you can add a line in head element Example: <base target=“right”> Sets default links to the frame named right Can also set default link targets to be “_top”
to leave the site
• Example: framesetd2.html
14
Avoid Deep Linking
• A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system
• Deep linking should be avoided, why? Copyright issues, might be illegal
• You can avoid deep links by sending them to a new browser window
Any link can be routed to a new browser window with the target attribute
15
Frames for Site Navigation
• A typical frame layout uses two nested frameset elements to divide a Web page into three frames:
1. The title frame runs across the top of the Web page
2. A navigational frame occupies a left-hand border under the title frame
3. A content frame occupies the remainder of the Web page
• Example: framesetd.html
16
Art Galleries with Frames
• A three-frame layout works well for an online art gallery
• Fill the navigation frame with clickable thumbnail previews
• When a user clicks on a thumbnail preview, send the original image to the content frame
• Example: framesete.html
17
Hw2 Discussion
• Hw2 requirement• Hw2 table example• Hw2 frame example• My implementation of Hw2 frame
18
Advantages of Frames
• Frames support intuitive site layouts that are easy to navigate
• Site development efforts can focus on content and navigation as independent problems
• Scalability: write one navigation tool bar and stick it in a frame - only change one file to change navigation system
19
Problems with Frames
• Not all browsers support frames (try it on a palm!)
• It is difficult for others to link to content inside a frame
• It’s easy to create deep links by accident• Tougher to save sub-pages, messy with
browser cache• Complex layout awkward• Doesn’t control layout inside each frame
20
Frames vs. tables
• Tables are tougher to code (but this is fixable through scripting)• Tables have wider (but not universal)
support on browsers• Frames are really quick to get going
21
Today’s Topics
• HTML Frames• HTML Forms• Perl Introduction
First Perl Program
22
Forms
• HTML Forms are used to select different kinds of user input, defined with <form> tag
• Form contains form elements to allow the user to enter information text fields textarea fields drop-down menus radio buttons checkboxes, etc
• A Web page can contain one or multiple forms Identified by id or name attribute
23
<form> Tag Attributes
• action attribute Gives the URL of the program(CGI) to receive and process
the form’s data• CGI is Common Gateway Interface, a protocol to handle web
data transmissions• How does CGI work? (next slide)• CGI programs usually kept in a cgi-bin/ directory• Usually triggered by clicking the submit button• action can also be a mailto: link
Syntax: action=mailto:XXX Example: formeg.html
• Example: add.html using CGI programs in action
24
How Browsers and Web Applications Work with CGI
Web Server receives therequest and starts up te
CGI program.
Send results back
Please Enter APhone Number
Submit Erase
Web Browser
CGI-basedcomputerprogram
Web BrowserPhone QueryResults:
That isJohn Doe'sPhone Number
Web Browser
Your PC(Internet connected)
WebServer(Internet connected)
25
<form> Tag Attributes (cont’d)
• method attribute Sets the HTTP method by which the browser sends the form data to the
program, value can be GET or POST• HTTP protocol specification• Simple HTTP request and reply
GET method:• The form data gets appended to the request URL
POST method:• The form data is sent as part of the message body
Avoid GET method in favor of POST for security reasons• A long form content line attached to URL may crash the web server• The GET request line is plain ASCII text sent without encryption and will be
saved in server logs
• Example: add.html using CGI programs in action
26
<form> Tag Attributes (cont’d)
• enctype attribute Specify the content type used to submit the form to the
server when the action method is POST Default value application/x-www-form-urlencoded
(need not specify) Special cases:
• Use “text/plain” if action=mailto:XXX• Use "multipart/form-data“ if the data sent is a file
• the id, name attributes Give the identification or name to a form Useful for multiple forms in a same page id is preferable
27
<input> Tag
• To define any one of a number of common form “controls” Text fields (including password, hidden fields) multiple-choice lists Clickable images Submission buttons
• Only type and name attribute required• No ending tag (no </input>)
28
Text Fields
• single line of text <input type=text name=XXX>• Set type to password to mask text like a
password• Set type to hidden to create a hidden field
size and maxlength attributes value attributes to give default text
• Example: formeg1.html
29
Multi-line Text Area
• The <textarea> tag• Attributes
cols rows wrap• Values: Off,virtual(default),physical
• Example: formeg1.html
30
Check Boxes
• Check boxes for “check all that apply” questions <input type=checkbox name=XXX value=XXX>
Make sure name identical among a group of checkboxes
checked attribute
• When form is submitted, names and values of those checked boxes are sent
• Example: formeg1.html
31
Radio Buttons
• Similar as checkboxes, but only one in the group may be selected <input type=radio name=XXX value=XXX>
• Example: formeg1.html
32
Multiple Choice Elements
• The <select> tag creates either pull-down menus or scrolling lists
• The <option> tag defines each item within a <select> tag
• <select> tag attributes size attribute
• Number of rows visible at the same time multiple attribute
• If set, allow multiple selections name attribute
• Example: formeg1.html
33
Action Buttons
• Some special types of form controls Act immediately Effect can not be reversed Affect the entire content of the form
34
Action Buttons (cont’d)• What are they?
Submit buttons• <input type=submit name=XXX value=XXX>
Reset buttons• <input type=reset name=XXX value=XXX>
Regular buttons• <input type=button name=XXX value=XXX>
image buttons (will send form content as submit button)• <input type=image name=XXX src=XXX>
*File buttons (need to deal with enctyple attribute)• <input type=file name=XXX accept=“text/*”>
• Example: formeg1-bak.html
35
HTML Forms Resources
• HTML Forms tutorials http://www.webcom.com/html/tutor/forms/
start.shtml http://info.netmar.com/creating/forms.html
• HTML Forms and Input http://www.w3schools.com/html/html_forms.asp
36
Today’s Topics
• HTML Frames• HTML Forms• Perl Introduction
First Perl Program
37
The Perl Programming Language
• Practical Extension & Reporting Language Invented in 1987 by Larry Wall at NASA’s Jet
Propulsion Laboratory Developed as a utility programming language for the
UNIX operating system Perl is a scripting language
• Scripting language vs. System language Gained popularity because of its ease of use, free
availability via the Internet, and its powerful combination of features
38
Why Perl is Popular
• Perl is a free language with lots of free applications• Perl is easier to work with than many other
languages Scripting language vs. System language
• Perl provides a CGI interface module• Perl applications are portable
39
Perl Interpreter• A program that translates Perl program commands into
commands that are understandable to a computer
• Runs your Perl programs and generates any output
• Its command name is simply perl• It can be installed in any of several places on a Web server
• Download Perl for different platform http://www.perl.com/pub/a/language/info/
software.html#binary Perl Builder for windows
40
Finding Location Of Perl
• SSH onto the CS dept Server • Enter either of the following commands:
which perl where is perl
• Access Unix manpage: man <command>
Perl InterpreterLocation
41
Program Development Process
• Each time you develop and run a program: Create a program file and copy (or save) it into the
correct directory Change your program’s access permissions• chmod 755 <perl file> -rwxr-xr-x
Check your program’s syntax Run your program
Starting Your First Program• Start some editor and enter the following:
#!/usr/local/bin/perl print “can u believe this is my 1st perl script?\n”;
• The first line (“pound-bang” line) A convention on Unix system that makes the script to be run as if it is an
executable program Format: “#!” + full path to the location of perl in the system
• The second line (single statement line) Each statement line ends with “;” print is a built-in function of perl \n is a special backslash interpretation denoting a new line
• Backslash interpretation only effective in double-quoted string
Program Entered in Pico
Run The Program
• Save the program file on the web server • Enter the full path to the program file to run• For example:
/home/hai/html/hw2/first_script.pl
Program FileHome Directory
Directories On Web Server
45
To Check Your Program Syntax(on a UNIX Web Server)
• establish an SSH session• navigate to the directory that contains the file• enter perl –c filename, where filename
is the program file whose syntax you want to. For example,
cd html/hw2perl –c first_script.pl
• If no syntax errors then you will see:• first_script.pl syntax OK
46
Program with Syntax errors
Missingquote mark
47
Running Your Program
• At least two different ways to run your Perl programs: Directly on a Web server or PC without a
browser Using your browser over the Internet
48
Getting Ready to Run Your Program Over the Internet
• To run a Perl script in a browser over the Internet, add a MIME content-type line Multipart Internet Mail Extensions (MIME) is used by HTTP to
Suggest to browser how to render the data Other MIME types MIME line exampleprint “Content-type: text/plain\n\n”;
• New first_script.pl file #!/usr/local/bin/perl
print “Content-type: text/plain\n\n”;print “can u believe this is my 1st perl script?\n”;
49
Running Your Program Over the Internet
1. Connect to the Internet. 2. Start your browser. 3. Enter the URL or Web address to your file4. Check the program’s syntax. 5. Run the program.
For example, assume the first_script.pl script is savedin the /home/hai/html/hw2/ directory on the Web server.Can execute by the following:
http://people.cs.uchicago.edu/~hai/hw2/first_script.pl