Transcript Creating a PayPal Button

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#edu
cation
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.