Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
the WWW I
CMSC 10100-1
Summer 2004
Lecture 5
Today’s Topics
2
Review:
Typical Table Sketch Code
<table>
<caption>Sample Table</caption>
<tr>
<th>headrow-col1</th>
…
<th>headrow-coln</th>
</tr>
<tr>
<td>row1-col1</td>
…
<td>row1-coln</td>
</tr>
…
<tr>
<td>rowm-col1</td>
…
<td>rowm-coln</td>
</tr>
</table>
sampletable.html 3
Tables and Text
• Text is hard to read against a busy background
pattern, but you can lay a table containing text on
top of a background pattern without sacrificing
readability (just give the table a solid background
color)
Examples: table_text2.html vs. table_text1.html
• Tables can also be used to separate text into two
columns (a cellpadding=“20” table attribute will
put white space between the two columns)
Example: table_2col.html
4
Tables and Graphics
• Tables can be used to control a Web page layout
for multiple images (or images mixed with text)
5
Web Page Borders
7
Disadvantages of tables for
layout
• Complex layout requires complex tables
(lots of headaches, room for error)
• Complex tables can download, be
rendered slowly
• Scalability issues
Not all browsers can read tables
8
HTML Frames
• HTML frames allow to display multiple
HTML documents in a same browser
window
The browser window is divided into multiple
regions, or frames
Each frame displays a unique web page
Each frame is independent of the others
9
Frame Code Structure
<home>
<head>…</head>
<frameset rols=“” cols=“”>
<frame name=“frame_1” src=“page1.html”>
…
<frame name=“frame_n” src=“pagen.html”>
<noframes>
<body>
use <a href=“no.html”>no-frame version</a>
</body>
</noframes>
</frameset>
</html>
10
The Frameset Element
11
Setting up rows and columns
13
Some more attributes
14
Tabular layout
15
Nested framesets
17
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
18
The base tag
19
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
20
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
21
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
22
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
23
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
• It is difficult to print the entire page
24
Frames vs. tables
25
HTML 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
26
<form> 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
27
How Browsers and Web
Applications Work with CGI
Your PC WebServer
(Internetconnected) (Internetconnected)
WebBrowser
Sen
d pho
Please Enter A ne
Phone Number n um
ber WebServer receives the
request and starts up te Call C
GI
Submit Erase CGIprogram. send progr am a
phone n
numb d
er
m
t fro Look
.S e n Sendresults back Create up number
p age puter new w .
We
b
om with a eb page CGI-based
WebBrowser n ew C GI c am. nswer computer
A the progr program
WebBrowser
Phone Query
Results:
That is
John Doe's
Phone Number
28
<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 29
<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
30
<input> Tag
33
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
34
Radio Buttons
• Example: formeg1.html
35
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
36
Action Buttons
• Some special types of form controls
Act immediately
Effect can not be reversed
Affect the entire content of the form
37
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 38
HTML Forms Resources
39