39
Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 5

HTML=Tables , Frames , Forms

Embed Size (px)

DESCRIPTION

HTML=Tables , Frames , Forms

Citation preview

Page 1: HTML=Tables , Frames , Forms

Introduction to Programming the WWW I

Introduction to Programming the WWW I

CMSC 10100-1

Summer 2004

Lecture 5

Page 2: HTML=Tables , Frames , Forms

2

Today’s TopicsToday’s Topics

• HTML Tables (cont’d)

• HTML Frames

• HTML Forms

Page 3: HTML=Tables , Frames , Forms

3

Review: Typical Table Sketch Code

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

Page 4: HTML=Tables , Frames , Forms

4

Tables and TextTables 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

Page 5: HTML=Tables , Frames , Forms

5

Tables and GraphicsTables 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

Page 6: HTML=Tables , Frames , Forms

6

Web Page BordersWeb 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

Page 7: HTML=Tables , Frames , Forms

7

One vs. ManyOne 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

Page 8: HTML=Tables , Frames , Forms

8

Disadvantages of tables for layout

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

Page 9: HTML=Tables , Frames , Forms

9

HTML FramesHTML 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

Page 10: HTML=Tables , Frames , Forms

10

Frame Code StructureFrame 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>

Page 11: HTML=Tables , Frames , Forms

11

The Frameset ElementThe 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

Page 12: HTML=Tables , Frames , Forms

12

Setting up rows and columnsSetting 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

Page 13: HTML=Tables , Frames , Forms

13

The Frame ElementThe 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

Page 14: HTML=Tables , Frames , Forms

14

Some more attributesSome 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“)

Page 15: HTML=Tables , Frames , Forms

15

Tabular layoutTabular 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

Page 16: HTML=Tables , Frames , Forms

16

Nested framesetsNested 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

Page 17: HTML=Tables , Frames , Forms

17

Linking in framesLinking 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

Page 18: HTML=Tables , Frames , Forms

18

The target attributeThe 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

Page 19: HTML=Tables , Frames , Forms

19

The base tagThe 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

Page 20: HTML=Tables , Frames , Forms

20

Avoid Deep LinkingAvoid 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

Page 21: HTML=Tables , Frames , Forms

21

Frames for Site NavigationFrames 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

Page 22: HTML=Tables , Frames , Forms

22

Art Galleries with FramesArt 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

Page 23: HTML=Tables , Frames , Forms

23

Advantages of FramesAdvantages 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

Page 24: HTML=Tables , Frames , Forms

24

Problems with FramesProblems 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

Page 25: HTML=Tables , Frames , Forms

25

Frames vs. tablesFrames 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

Page 26: HTML=Tables , Frames , Forms

26

HTML FormsHTML 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

Page 27: HTML=Tables , Frames , Forms

27

<form> Attributes<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

Page 28: HTML=Tables , Frames , Forms

28

How Browsers and Web Applications Work with CGI

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 Browser

Phone QueryResults:

That isJohn Doe'sPhone Number

Web Browser

Your PC(Internet connected)

WebServer(Internet connected)

Page 29: HTML=Tables , Frames , Forms

29

<form> Tag Attributes (cont’d)

<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

Page 30: HTML=Tables , Frames , Forms

30

<form> Tag Attributes (cont’d)

<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

Page 31: HTML=Tables , Frames , Forms

31

<input> Tag<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>)

Page 32: HTML=Tables , Frames , Forms

32

Text FieldsText 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

Page 33: HTML=Tables , Frames , Forms

33

Multi-line Text AreaMulti-line Text Area

• The <textarea> tag

• Attributes cols rows wrap• Values: Off,virtual(default),physical

• Example: formeg1.html

Page 34: HTML=Tables , Frames , Forms

34

Check BoxesCheck 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

Page 35: HTML=Tables , Frames , Forms

35

Radio ButtonsRadio Buttons

• Similar as checkboxes, but only one in the group may be selected <input type=radio name=XXX value=XXX>

• Example: formeg1.html

Page 36: HTML=Tables , Frames , Forms

36

Multiple Choice ElementsMultiple 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

Page 37: HTML=Tables , Frames , Forms

37

Action ButtonsAction Buttons

• Some special types of form controls Act immediately Effect can not be reversed Affect the entire content of the form

Page 38: HTML=Tables , Frames , Forms

38

Action Buttons (cont’d)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

Page 39: HTML=Tables , Frames , Forms

39

HTML Forms ResourcesHTML 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