Interacting With Users

Chapter 7

Learn how to…

• Create a Web form.

• Create a PayPal button.

• Create an image map.

• Create a frameset.

• FTP files to the Web and set file permissions.

Creating HTML Forms

Creating HTML Forms

• A form prompts the user to fill in one or more blanks and/or select items from a menu of possible choices.

• The <form> start and </form> stop tags mark the beginning and ending of an HTML form.

• Between these tags go the controls that prompt the user for specific information, along with any onscreen instructions you want to provide.

Prompts

• A prompt is an onscreen instruction that asks the user to provide some information, either by typing a response into a text field or by choosing something from a selection of possible choices.

Beginning the Form

Form Tags

• Every <form> start tag has two attributes, namely, a method and an action.

Text Input Controls

• Use the <input> tag to create the form controls that receive input from users.– The <input> tag has several attributes:

• The type attribute specifies the kind of control you want.

• The name attribute specifies the name of the control.

• The size attribute specifies how many characters wide on the screen.

• The maxlength attribute specifies the maximum number of characters users can type.

Text Input Controls

Radio Button Control

• A radio button displays a small round button that allows users to select one, but not more than one, item from a list of possible choices.

checked causes this item to be initially checked by default.

Radio Button Control

• This adds additional options for the Frequency radio button control.

Submit and Reset Buttons

• The Submit button is the onscreen control that users click to submit the form.– Use <input type=“Submit” value=“xxxx”>

• Xxxx is the text displayed (the default text is Submit).

• Click a Reset button to return the controls to their default settings.– Use <input type=“reset”>

Submit and Reset Buttons

Completed Form

Processing the Response

• We used the mailto option in the form tag to have the response e-mailed.

• A more advanced method is to read the information, save the form’s data in a database, decide how to act on it, and respond appropriately to the user.– To make a form post its data to an Active

Server Page (ASP) script, type:• <form method="post"

action="http://toys.northpole.com/WishList.asp">

CGI Scripting

• The art of server-side programming is known as common gateway interface (CGI) scripting.

• The POST method sends the form’s data to a CGI script.

GET Method

• An HTTP GET method appends the form’s data to the URL as a query string.– Used especially at search engine sites.

Form Submission

• For more info, see www.w3.org/TR/html4

Check Box

• A check box presents the user with a small box that the user can click to turn an option on or off.

Check Box Example

Selection Menu

• Create a selection menu with the <select> start and </select> stop tags.

• Use the <option> tag to specify the menu options.

Text Areas

• Text areas allow large amounts of text to be typed.– Use the <textarea> start and </textarea>

stop tags.

Multiple Selection Menu

• To allow users to make multiple selections from a selection menu, include the multiple attribute with a size that indicates the number of menu options to be displayed at a time.– Users need to use Ctrl+click to select items.

<select name=" ControlName" size="10" multiple>

Password Fields

• A password field is a text box that works like a text field except that when the user types the entry, the browser displays asterisks.

Summary

Summary

Making a PayPal Buy Now Button

PayPal

• PayPal is a person-to-person payment system that individuals can use to sell products.

• A PayPal button, when clicked, posts data to the PayPal server indicating what product the user wants to buy from you.

• The PayPal system handles all the rest.

Hidden Fields

• A hidden field creates a variable name and a corresponding value that are not displayed onscreen but are posted along with the rest of the form’s data when the user clicks the button to submit the form.

Hidden Fields

Image Buttons

• An image button displays an image instead of the Submit button.

PayPal Buy Now Button

• When clicked, the PayPal Buy Now button posts HTML form data to the PayPal e-commerce server.– Information about the product being

purchased.– The business that is making the sale.

• There are many options that can be present, apart from those that are always required.

Creating a PayPal Button

Begin the form and identify your business:

Insert hidden fields to describe the product you are selling:

Creating a PayPal Button

Give the customer an option to get an autographed copy of the book:

Display the button and finish the form tag:

PayPal Variables

To view the PayPal button manual, visit https://www.paypal.com/en_US/pdf/single_item.pdf

PayPal Button Factory

• PayPal has a button factory that generates automatically the HTML to paste on to your page to sell items at your Web site.– Log on to your PayPal account at

www.paypal.com and click the Merchant Tools tab. Under the Website Payments heading, follow the link to Buy Now Buttons to make the Button Factory appear.

Designing HTML Image Maps

Image Maps

• An image map is an invisible layer of triggers placed over an image onscreen.– The triggers can be rectangular, circular, or

polygonal.– When the user clicks inside one of the

invisible triggers, the Web browser triggers the object of the link.

Map and Area Tags

• Use the <map> and </map> tags to mark the beginning and ending of the image map.

• Use the <area> tag to create the triggers.– The shape attribute defines the shape.– The coord attribute specifies the x,y coordinates of

the links relative to the top-left corner of the image at 0,0.

• coord=x1,y1,x2,y2 where x1,y1 is the top-left corner of the area and x2,y2 is the bottom-right corner of the image.

Example: Web Page

Example: HTML Code

Visualizing the Coordinates

• Too low – 0,0,112,32

• Middle C (correct)– 112,0,116,22– 112,22,120,32

• Too high– 116,0,238,22– 120,22,238,32

Usemap Attribute

• Use the usemap attribute to apply an image map to any image on the page.

• There are many tools available to make image maps.

Non-Rectangular Areas

• Circular areas:

• Polygonal areas:

– Draw the polygon starting with x1,y1 to x2,y2 to x3,y3 and so on until you get back to x1,y1 as the last value.

Creating HTML Frames

Frames

• You can divide the browser’s display surface into multiple windows called frames.

• Each frame can display a different part of the same page or a totally different page.

• Frame targeting can make clicks in one frame determine what gets displayed in another.

Framesets

• A frameset splits the browser window into two or more subdocuments called frames. – Create a frameset with the <frameset> start

and </frameset> stop tags.• The start tag has row and column attributes that

determine the layout.

– Specify the dimensions by pixels or percentages.

Framesets

Vertical Frames

Horizontal Frames

Frameset Grids

Nested Framesets

• A frameset that you create inside of another frame is called a nested frameset.

Border, Scrollbar, Sizing

• To remove the border around a frameset, add the following attributes to the frameset tag:– frameborder="no" border="0" framespacing="0"

• To remove the scrollbar from a frame, add the following attribute to its frame tag:– scrolling="no"

• To prevent users from being able to resize a frame, add the noresize attribute to the frame tag.

Border, Scrollbar, Sizing

Fixed-Size Frames

Wildcard Sized Frames

Frame Targeting

• Frame targeting is when a mouse click in one frame can alter the display of a document in another frame.– Suppose you have a menu of items in the

left frame.– When you click on an item in the left frame,

you can make the targeted frame appear on the right side in the main content frame.

– See the next slide for the coding.

Frame Targeting

• Name the frame (Main content) that the hyperlinks will target:

• Use the target tag to make the hyperlinks aim at the targeted frame (Sidebar).

– If the main content frame does not exist, a new window will be displayed.

Base Tag

• You can avoid typing the target attribute in each hyperlink if you use the <base> tag to specify the default target of the sidebar links.

– The <base> tag goes into the <head> section of the document containing the hyperlinks.

– You can override this by hard-coding a different target on any hyperlink that you want pointing somewhere else.

Base Tag

• The <base> tag also has a URL attribute in which you can specify the HTTP address of the targeted document.

• In an anchor tag in that same document, this would make href="#education" point to http://www.northpole.com/santa/resume.html#education

Using Framesets

• Use judgment when using framesets.

– Multiple windows can be confusing, especially for users with disabilities.

Publishing a Web Site via FTP

Publishing a Web Site

• To publish a file on the World Wide Web means to transfer the file to a folder on a Web server so people around the world can access the file with a Web browser. – The default filename on most Web servers is

index.html• Sometimes, default.html is used.• Check with your Web server administrator for more

information.

Getting Web Space

• Your ISP account mostly includes some space on your ISP’s Web server for a personal Web site.

• Your school or workplace may have space available for your usage.

• There are sites on the Web that provide free space.– Search Google for “free FTP Web space.”

Web Space Address

• Find the name of your Web space address from your provider.

Getting an FTP Client

• To find a free FTP client to use, search Google or Yahoo for the keywords “free ftp client.”– One such program is Core FTP Lite at http://

www.coreftp.com/

Configuring Core FTP Lite

• Create a new FTP connection.– Host/IP/URL is your

FTP server.– User ID is the part of

your e-mail before the @ sign.

FTP Files to Web Server

• The left pane in Core FTP Lite is your file structure; the right pane is the file structure of the Web server.

• The arrows let you move files from one pane to the other.

Working With Files

• In addition, Core FTP Lite has buttons that allow you to delete or rename files on the Web server or your computer.

• Some file servers are case-sensitive, so you may name all of your files and folders using lowercase letters.

Updating Your Web Page

• If you need to update your Web page, just republish the revised file to your Web site.

• Check the new page in your Web browser by having it reload or refresh the page.– You can press Shift as you press the Reload

button to make sure graphics are refreshed as well.

Relative & Absolute Links

• Absolute links – Contain the full URL to

the file.

• Relative links – Contain only the part

of the URL not contained in your current Web page’s folder.

Example

• For example, the full URL may be www.northpole.com/~santa/wishlist/danny.html

• But if your Web page home is located in www.northpole.com/~santa, the relative link would be wishlist/danny.html

Good Directory Structure

• Be careful how you create folders and subfolders when you make a local Web that you plan to mount on the World Wide Web.

File Permissions

• File permission attributes are settings that determine who is allowed to read and execute your files.– Right-click the

folder and choose Properties.