lec5

Download Report

Transcript lec5 

Introduction to Programming
the WWW I
CMSC 10100-1
Summer 2004
Lecture 5
Today’s Topics
• HTML Tables (cont’d)
• HTML Frames
• HTML Forms
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)
• Images of different sizes can be fit together in
irregularly-shaped tables using cell-structure
diagrams
• All tables have an underlying cell structure with a
uniform number of table cells across each table row
5
Web Page Borders
• Empty table columns can be used to create
margins for text on a Web page
 Use a fixed width attribute (e.g. width=“50”) for
the empty table data element
• Put an internal table inside
 Example: innertable.html
• Note: better to control margins with CSS
6
One vs. Many
• If you have one very large table, try to break it up into a
sequence of smaller tables that can be stacked vertically on
a Web page
• Browsers download the contents of an entire table before
any of the table can be viewed
• Multiple tables will be displayed incrementally so the user
will be able to see the first part of your page while the rest of
the page is still downloading
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
• 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
11
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
12
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 standalone(self-closing) tag
13
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“)
14
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
15
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
16
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
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
• 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
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
• 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
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
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
• 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>)
31
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
32
Multi-line Text Area
• The <textarea> tag
• Attributes
 cols
 rows
 wrap
• Values: Off,virtual(default),physical
• Example: formeg1.html
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
• Similar as checkboxes, but only one in the
group may be selected
 <input type=radio name=XXX
value=XXX>
• 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
• 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
39