Html=tables , Frames , Forms

  • November 2019
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Html=tables , Frames , Forms as PDF for free.

More details

  • Words: 1,995
  • Pages: 39
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 … … … …
Sample Table
headrow-col1headrow-coln
row1-col1row1-coln
rowm-col1rowm-coln
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 … … <noframes> use no-frame version 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 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

• 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 instead of a 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 tag

17

The target attribute • Target link to a named frame

 Example:  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:  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
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

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 Please Enter A Phone Number

Sen d

pho ne n

um ber

Submit Erase

WebBrowser WebBrowser

m t fro n e .S age puter p b om We ew C GI c am. n A the progr

WebServer receives the request and starts up te CGIprogram.

Sendresults back

Call C GI send progr am a phone n numb d er

Look Create up number . new w with a eb page nswer

CGI-based computer program

Phone Query Results: That is John Doe's Phone Number

28

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

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

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 ) 31

Text Fields • single line of text  • 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