Transcript Chapter 10

Chapter 10:
Advanced Web Page Construction
Web 101
Third Edition
by Wendy G. Lehnert &
Richard L. Kopec
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Learning Objectives
• Learn how basic HTML elements are used to create
Web pages.
• Learn how to make simple changes to HTML source
code to add new feature or fix minor problems.
• Understand how to use cascading style sheets (CSS) to
control a Web page’s appearance.
• Explore how to use image maps to create livelier Web
pages.
• Learn how to create simple rollover effects.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-2
Learning Objectives
• Learn how to create Javascript powered interactive
HTML elements.
• Learn how to find JavaScript programs on the Web and
install them on your Web pages.
• Learn how to find JavaScript programs on the Web and
install them on your Web pages.
• Find out what Web site maintenance tools and site
construction kits can do for you.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-3
Taking Charge
• Web page editor tools like Mozilla’s Composer
are typically used to create Web pages.
• But it’s helpful to delve deeper and see the
underlying structure of a Web page.
• Although it’s free, Composer has limitations - a
thorough knowledge of Web page structure and
its implementation allows the user to add many
new features and perform simple fixes.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-4
Taking Charge
• Composer lacks tools to insert many sexy Web
page features.
• But it’s not that hard to insert them directly in
the code if you know HTML - hypertext
markup language.
• The Web page description language now used
will eventually be supplanted by eXtensible
markup language (XML) and cascading style
sheets (CSS).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-5
Taking Charge
• XML and HTML are very similar, but CSS is quite
different, so will study this too.
• CSS works in concert with HTML similarly to the way
it works with XML.
• Finally, many of the interactive features that bring Web
pages alive are powered by Javascript, a Web page
programming langauge.
• While we won’t learn Javascript directly, we will learn
how to add some Javascript-powered features to our
pages.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-6
What Is HTML?
• HyperText Markup Language is a type of page
description language.
• An HTML file is a simple ASCII text file with
“markup language” inserted into it.
• The “markups” provide information to the
browser regarding how the associated content
should be displayed.
• The “markups” are formally known as
elements.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-7
What Is HTML?
• There are four basic elements that should be
included in every displayable Web page:
–
–
–
–
HTML
HEAD
TITLE
BODY
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-8
What Is HTML?
• There are 2 general types of HTML elements:
– container
– empty
• Elements are formed using two types of tags:
– start
– end
• All tags are formed using a pair of left and right angle brackets
and the forward slash:
<this is a start tag> </this is an end tag>
• Container elements use both start and end tags.
• Empty elements use only the start tag.
• The 4 elements define basic Web page layout:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-9
What Is HTML?
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-10
What Is HTML?
• All viewable Web pages have this basic structure.
• Note that relationship between start and end tags - they’re
identical except for the forward slash character in the end
tag.
• The indention shown is not required, but it helps to
distinguish one element from another.
• Text placed between the start and tags of an element are the
contents, hence the name container element.
• Start tags may include attributes, to provide further details
regarding the display of the element.
• End tags never have attributes.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-11
What Is HTML?
• General form of a START tag:
<TAG-NAME ATTRIBUTE1=“value1”
ATTRIBUTE2=“value2” …
ATTRIBUTEn=“valuen”>
• General form of an END tag:
</TAG-NAME>
• Put no characters (like a space or return character) between an attribute, the
equal sign, and its value.
• A start tag can be spread across more than one line if desired, but don’t
split an attribute from its value.
• Each attribute/value pair must be separated by at least one space or return
character.
• Attribute values should be quoted unless it’s a single numerical value.
(Some attributes are assigned several numbers as their value).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-12
What Is HTML?
• Attributes always have values.
For example:
<BODY STYLE=“color: rgb(0,0,0);” ALINK=“#000099”
LINK=“#000099” VLINK=”#990099”>
• This BODY element has 4 attributes that describe the text color
(STYLE element), active link text color (ALINK), link text color
(LINK), and visited link text color (VLINK).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-13
What Is HTML?
• HTML is case insensitive.
• But - attribute values, are not.
• Chapter 10 capitalizes all tag and attribute names to make them
easier to see, BUT most Web page editors (including Composer)
use lower case.
• This is because HTML’s successor, XML, is case sensitive - and
it uses lower case.
• Use the browser “View - Page Source” selection to see the
HTML (text) view of a Web page.
• In Composer, select the “<HTML> Source” at the bottom of the
page to see it.
• You can edit to code directly in Composer when viewing the
source.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-14
What Is HTML?
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-15
What Is HTML?
• Mozilla displays tag names in purple, attribute names
in bold black, and attribute values in blue.
• Regrettably, some HTML elements have the same
name as an HTML attribute.
• For example, the TITLE element contains text to be
displayed in the Web page window title bar.
• The TITLE attribute displays a textual tooltip when
the cursor is placed on the element using it.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-16
What Is HTML?
• A TITLE element (the title is
at the top of the window)
HTML:
<TITLE>A tooltip
demo</TITLE>
• A TITLE attribute - aka a
tooltip
HTML:
TITLE=“A red delicious
apple”
inserted inside the image
(IMG) start tag
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-17
What Is HTML?
• The HEAD element contains the TITLE
element and other elements that provide
information about the page but do not affect
the display of the page.
• The BODY element contains all the
viewable content.
• Be careful to distinguish between elements
and attributes!
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-18
What Is HTML?
• Common HTML elements:
– Horizontal lines - an empty element:
<HR style =“width: 100%; height: 2px”>
– Text formatting
• Bold Text:
<STRONG>bold text</STRONG>
• Italicized Text:
<EM>italicized text</EM>
• Oversized Text:
<BIG>oversized text</BIG>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-19
What Is HTML?
• Some Text elements:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-20
What Is HTML?
• Unordered Lists
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-21
What Is HTML?
• Ordered Lists - the list items are links
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-22
What Is HTML?
• Links - all are really anchor elements,
including the Named Anchor.
• The hypertext reference (HREF) attribute
makes the anchor into a link.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-23
What Is HTML?
• Tables
contain several
elements:
TBODY = table body
CAPTION = table caption
TR = table row
which contains
TD = table data
(aka a cell)
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-24
What Is HTML?
• Special HTML character codes that do not appear on
the keyboard or in Composer’s “Insert -Characters and
Symbols…” can be inserted directly into the HTML
code.
• All special characters are of the form:
&#decimal character code;
or
&character designator;
• For example, ¥ (Yen symbol):
&#165;
or
&yen;
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-25
What Is HTML?
• Inserting characters & symbols
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-26
What Is HTML?
• Some special HTML character codes:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-27
What Is HTML?
• Not all characters can be inserted using the
Insert menu selection - some must be inserted
directly into the code.
• Some special characters may not display
properly in your editor, but will display
properly in the browser - check.
• For more exotic characters, check out
http://www.tntluoma.com/sidebars/code
s/
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-28
What Is HTML?
• Be careful when editing HTML code!
• Most editors attempt to fix coding errors - but usually the error gets
compounded!
• For example:
<BODY STYLE=“color: rgb(0,0,0);”
ALINK=“orange” LINK=“green”
VLINK=“brown”>
If we accidentally omit the closing quote (in red) for the value of ALINK,
Composer will “fix” it like so:
<BODY STYLE=“color: rgb(0,0,0);”
green=“”
ALINK=“#000e00”
VLINK=“brown”>
• Most editors can’t fix coding errors, so double check your insertions before
you preview/save.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-29
Style Sheets
• Cascading Style Sheets (CSS) are used to
specify details about the appearance of Web
page elements.
• Display information can be provided in three
different ways:
– Inline STYLE attributes
– STYLE elements (usually in the HEAD)
– External CSS files referenced via a LINK element
(usually in the HEAD).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-30
Style Sheets
• All style information is provided by listing a style
property and its associated value:
property1: value1; property2: value2;
…propertyn: valuen;
• For example, these are inline STYLE attributes:
– <H1 STYLE=”text-align: center;”>All About Apples</H1>
– <SPAN STYLE=”text-decoration:
underline;”>calcium</SPAN>
– <IMG ALT=”apples nested in basket” SRC=”apple2r.png”
STYLE=”width: 504px; height: 328px;”>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-31
Style Sheets
• CSS is case sensitive, unlike HTML.
• Some style properties can take more than value:
<SPAN
STYLE=“font-family: ‘Times New Roman’, Times, serif; ”>
This text will appear in Times New Roman if
available</SPAN>
• The font-family property specifies a choice of fonts
separated by commas, listed in priority order, depending
on what’s available.
• The first value has 3 words, so this value must be
delimited by single quotes - double quotes are already
being used for the attribute value.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-32
Style Sheets
• Some CSS font properties:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-33
Style Sheets
• Some CSS text properties:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-34
Style Sheets
• Some CSS color/background properties:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-35
Style Sheets
• Some CSS list properties:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-36
Style Sheets
• The inside/outside list-style-position property:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-37
Style Sheets
• The float property can be used to have text
“flow” around an image.
• If an image used the “float: left;” property, then
text and other elements will flow around it on
the right.
• The float property moves the effected element
out of the normal flow of Web page elements.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-38
Style Sheets
• Inline STYLE attributes affect only a single element.
• A STYLE element can be used to affect all elements
using a single style specification, or rule.
• The STYLE element is usually placed into the HEAD.
• Only one is needed - can specify rules for all Web page
elements here.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-39
Style Sheets
• General form of a STYLE element:
<STYLE TYPE=“text/css”>
<!-- this is the start of an HTML comment
Style Rules Go Here
--> this ends the HTML comment - it hides CSS
from browsers that don’t recognize it
</STYLE>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-40
Style Sheets
• General form of a STYLE rule:
selector {property1: value1;
property2: value2; …
propertyn: valuen;
}
• Selector: name of HTML element, pseudoelement, class, pseudo-class
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-41
Style Sheets
• STYLE rule examples:
body { font-family: arial, helvetica, serif;
background-color: white;}
em, i { color: red; }
table { background-color: silver;
border-color: red;
border-style: dotted;
color: black;
text-align: center;
}
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-42
Style Sheets
• These rules are inheritable - if no rule is specified for a
particular HTML element, then rules in successive
containing elements will be examined until one fits.
• The search for an applicable rule is the cascading part
of CSS.
• The rule closest to the element takes precedence
over any other potentially applicable rules defined
by enclosing elements.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-43
Style Sheets
• Contextual selectors - rules applied only in certain
specific situations.
• For example:
p strong, p b { color: navy; size: larger; }
• Applies only to bold (aka strong) HTML elements that
appear inside a paragraph element (the context).
• Bold elements NOT in a paragraph and other
paragraph elements are unaffected by this rule.
• Use spaces to separate contextual element names,
commas to separate different contexts.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-44
Style Sheets
• Pseudo-elements - not HTML.
• CSS1 defines two:
first-line and first-letter
• Usage:
p:first-letter { color: purple; font-size: xx-large; }
• With this rule, the first letter of every paragraph looks like
so:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-45
Style Sheets
• CSS pseudo-classes - most often applied to links.
• Refers to the current state of the link.
link
visited
hover
active
• Usage:
a:link {color: blue; }
a:visited {color: green }
a:hover { color: red; font-size: 150% }
a:active {color: orange }
• Must be listed in this order.
• Hover rule applied to link only when cursor placed over it:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-46
Style Sheets
• CSS classes - used to create a generic set of rules that can be selectively
applied to any element.
• Selector used is a user-defined name.
• HTML element using these rules requires a CLASS attribute.
• CLASS attribute value is the selector name defined by the user,
preceded by a period.
• For example
. hilite {background-color: green; }
• To use this rule:
<TD CLASS=“hilite”>This text will appear against a green
background</TD>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-47
Style Sheets
• Can also associate a specific class with a specific
element:
p.myalign { text-align: justify; margin-left: 25px;
margin-right: 25px }
h1.myalign { text-align: center; }
• The class name is myalign, and the paragraph or h1
heading wishing to use this class must still include a
CLASS attribute set to “myalign”.
• Note that the same class name has two different sets of
rules.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-48
Style Sheets
• CSS is most powerful when rules are collected
together in a separate text file.
• One CSS file can be used by multiple Web pages.
• Cosmetic changes to all dependent Web pages can be
accomplished by editing only the CSS file.
• Use a LINK element to make a CSS rule file
(mystylesheet.css here) available to a Web page:
<LINK HREF=“mystylesheet.css” REL=“stylesheet”
TYPE=“text/css”>
• Value of HREF element is name of CSS file.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-49
Client-Side Image Maps
• An image map is an easy way to create
hyperlinks inside graphical elements.
• A hotzone is an arbitrary region on a Web page
that contains a hyperlink.
• Server-side image maps run on the Web server.
• Client-side image maps are run from the user’s
browser.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-50
Client-Side Image Maps
• Image maps can be created manually or with an
image-mapping tool.
• Tools allow you to create image maps that have
shapes other than rectangles.
• Image-mapping tools can be found on the Web
• Some Web page construction tools support the
creation of image maps too
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-51
Client-Side Image Maps
• Client-side image maps can also be made to respond to
JavaScript events such as
– mouseovers
– mouseclicks
• These image maps are used to create things like:
– Graphical buttons
– Menus containing a set of these buttons
– Links to a large image from a thumbnail version of the
image
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-52
Client-Side Image Maps
• One way to make your own image maps
– Find the image that you want to map
– View the image with your Web browser using the
ISMAP trick by adding this HTML to/around the
IMG element:
<A HREF=“#”>
<IMG SRC=“text.jpg” ISMAP> </A>
– This will cause the cursor coordinates to appear in
the browser status bar when moved on the image.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-53
Client-Side Image Maps
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-54
Client-Side Image Maps
– Record the coordinate pairs for each rectangular
hotzone you want to define.
– Then remove the elements you added (the LINK
element and the ISMAP attribute in the IMG
element), and insert a MAP element.
– Add an AREA element for each hotzone to the MAP
element.
– Add a USEMAP attribute to the IMG element for
the image just mapped.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-55
Client-Side Image Maps
<MAP NAME=“menumap”>
<AREA SHAPE=“rect” COORDS=“3,3,167,48” HREF=“glacier.html”
ALT=“link to glacier national park”>
<AREA SHAPE=“rect” COORDS=“3,53,167,98”
HREF=“grandcanyon.html” ALT=“link to grand canyon national park”>
<AREA SHAPE=“rect” COORDS=“3,103,167,148”
HREF=“sequoia.html” ALT=“link to sequoia national park”>
<AREA SHAPE=“rect” COORDS=“3,153,167,198”
HREF=“yellowstone.html” ALT=“link to yellowstone national park”>
<AREA SHAPE=“rect” COORDS=“3,203,167,248” HREF=“zion.html”
ALT=“link to zion national park”> </map>
<IMG SRC=“parkmenu.png” USEMAP=“#menumap” STYLE=“width:
170px; height: 250px;”>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-56
Client-Side Image Maps
• Can add mousover event attributes to image
maps create rollover effects.
• Mouseover: The action of sweeping the mouse
over a region on a Web page that has been
programmed to respond to the mouse’s
presence.
• Often a mouseover causes a graphic on the
Web page to be swapped for another giving the
illusion that the graphic is highlighted.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-57
Client-Side Image Maps
• A rollover can be added to image maps,
highlighting hot spots as the cursor moves over
them:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-58
Client-Side Image Maps
• In this case, the normal image is “swapped
out” for the version with highlighting.
• To make this work, add a NAME attribute to
your IMG element - here, NAME=“mypic”
• Add these attributes to your AREA elements:
onmouseover=“mypic.src=‘parkmenusequoia.pn
g’ ”
onmouseout=“mypic.src=‘parkmenu.png’ ”
• Then create a version of the original image
for each selection, showing it highlighted.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-59
Client-Side Image Maps
• To avoid a delay as the browser asks for the
new image, you can preload your images by
adding the element only the next slide to the
HEAD of your Web page.
• This is a piece of Javascript code that simply
fetches the desired images and make then
available in the browser cache for use when
needed.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-60
Client-Side Image Maps
<script>
var pic1 = new Image;
pic1.src=’parkmenuglacier.png’;
var pic2 = new Image;
pic2.src=’parkmenucanyon.png’;
var pic3 = new Image;
pic3.src=’parkmenusequoia.png’;
var pic4 = new Image;
pic4.src=’parkmenuyellowstone.png’;
var pic5 = new Image;
pic5.src=’parkmenuzion.png’;
</script>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-61
Client-Side Image Maps
• Simply change the names of the image files to those
you are using.
• Add or delete statement pairs as needed for the number
of selections in your menu:
var picx = new Image;
picx.src=‘your image file name here’;
• Change the value of x for each new picture file.
• The images are usually swapped so fast that you would
not know there are separate files.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-62
Introduction to Interactive Web Pages
• The mouseovers we saw in previously are examples
of interactivity - the Web pages actively responds in
some fashion to user-initiated actions.
• The actions can include:
–
–
–
–
–
changing the value of a text box
clicking the mouse button
loading a new Web page
moving the cursor onto an element
selecting an option from a list
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-63
Introduction to Interactive Web Pages
• These events are used to trigger Javascript code - a
scripting language designed specifically to work with
Web pages.
• Some common Javascript events associated with user
actions:
–
–
–
–
–
–
onClick ( mousedown immediately followed by mouseup)
onDbClick (a fast double-click)
onMouseMove (the mouse moves in the hotzone)
onKeyDown (a key is pressed on the keyboard)
onKeyUp (a key is released)
onKeyPress (a key is hit and immediately released)
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-64
Introduction to Interactive Web Pages
• For example, a Javascript alert box can be created
like so:
<IMG SRC=“apple2r.png” HEIGHT=504 WIDTH=328
ONMOUSEOVER=“alert(‘See the Red and Golden
Delicious, and Gala Apples.’)”>
• When the cursor moves over this image, a Javascript
alert box will appear, displaying the message in
single quotes above:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-65
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-66
Introduction to Interactive Web Pages
• In order to use Javascript effects, Web pages often
include FORMs and form control elements.
• FORM elements are not visible in browser view, but
they are required to make form control elements work
properly.
• Form control elements do display - some common
ones:
–
–
–
–
Buttons
Radio buttons
Text boxes
Checkboxes
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-67
Introduction to Interactive Web Pages
• In order for these form control elements to respond to
user actions, at least one these elements must include
an event attribute.
• An event attribute is used to link a user action to
some Web page element (often a form control
element, but not restricted to them) and some desired
code-mediated response when the action occurs.
• The code can be Javascript, or some other
programming language.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-68
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-69
Introduction to Interactive Web Pages
• A SELECT element
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-70
Introduction to Interactive Web Pages
• A TEXTAREA element
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-71
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-72
Introduction to Interactive Web Pages
• These form control elements, with an
appropriate EVENT attribute inserted, can
provide some degree of interactivity to your
Web pages.
• Example - writing to a TEXTAREA element.
• Uses a Javascript assignment statement - a
command that can be used to change the value
displayed by some HTML element.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-73
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-74
Introduction to Interactive Web Pages
• This set of code insert a string (a sequence of characters) into a
TEXTAREA element.
• The first button INPUT element writes a simple string,
delimited by single quotes, into the TEXTAREA:
myarea.value=’Pressing the button below caused this
message to appear here’
• This string has no breaks (return characters) in it, even though it
appears to, only because it doesn’t fit on one line.
• myarea.value refers to the value attribute of the TEXTAREA
named myarea.
• The string on right side of the equal sign (the assignment
statement operator) is assigned to the element on the left side.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-75
Introduction to Interactive Web Pages
• This action is triggered when the user clicks on the
button because this assignment statement is the value of
button’s ONCLICK event attribute:
ONCLICK=“myarea.value=‘Pressing the button
below caused this message to appear here’ ”
• The net result is that the TEXTAREA contents are
replaced with the string in single quotes when the
button is clicked.
• Note the placement of the single (delimits the string)
and double quotes (delimits the attribute value).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-76
Introduction to Interactive Web Pages
• The code for the second button also inserts a string
into a TEXTAREA element, but it retains previously
entered text by adding myarea.value (the current
contents) to the text string.
• The string is built using string concatenation
(represented by +) to combine smaller strings together
to form a larger string.
• It also includes a string equivalent to the “Enter” or
“Return” key - “\n”
myarea.value=’This button preserves the textarea
contents’ + ’\n\n’ + myarea.value
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-77
Introduction to Interactive Web Pages
• Text appearing between the single quotes is a formally known
as a literal string.
• myarea.value (without the quotes) refers to the value attribute of
myarea, in this case, the current contents of the TEXTAREA
element.
• So myarea.value is a symbolic representation of the value
contained in the TEXTAREA.
• myarea.value is actually a type of variable, meaning something
with a value that is changeable.
• This also works for text INPUT elements, and any other object
that has a VALUE attribute.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-78
Introduction to Interactive Web Pages
• Example - an interactive quiz
• Uses radio buttons for each possible response to a
question.
• All the radio buttons have the same name.
• Radio buttons with the same name are mutually
exclusive - only one button in the group can be selected
at a time.
• Radio buttons are the only exception to the requirement
that all Web page elements have a different name.
• When clicked, a message is written into a TEXTAREA
about the correctness of the response.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-79
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-80
Introduction to Interactive Web Pages
• Can use events to write to the window status bar at the
bottom of the Web page.
• The status bar may be hidden - use the View menu to
make it visible.
• Referred to as window.status in the code.
• Messages written to the status bar can be “erased” by
assigning it the empty string - two single quotes with
no characters in between.
• This example uses mouseover events to trigger status
bar updates.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-81
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-82
Introduction to Interactive Web Pages
• The HTML of interest:
ONMOUSEOVER=“window.status=‘The South Wing’ ”
ONMOUSEOUT=“window.status=‘ ’ ” ONCLICK=“alert(‘The
second floor of the south wing holds the Chambers of the
House of Representatives.’)”
• Note that window.status is assigned the empty string, represented by two single
quotes, to erase its contents when the ONMOUSEOUT event occurs.
• Notice the message “The South Wing” in the status bar of the Web page (Next
slide).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-83
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-84
Introduction to Interactive Web Pages
• Clicking on one of the hot spots also displays a
Javascript alert box.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-85
Introduction to Interactive Web Pages
• The ONLOAD event attribute, when placed in the
BODY start tag, can be used to perform Javascript too.
• One way it’s often used is to open a simple window
encouraging the user to wait while the main (and
longer loading) Web page loads.
• Add this event attribute to the BODY:
ONLOAD=“window.open(‘wait_page.html’, ‘_blank’,
‘height=300, width=300’)”
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-86
Introduction to Interactive Web Pages
– There are three parameters, delimited by single quotes, for
the window.open action:
window.open(‘wait_page.html’, ‘_blank’,
‘height=300, width=300’)
– wait_page.html - the file to display
– _blank - where to put it; _blank indicates a new window (the
underscore is important)
– height=300, width=300 - how large to make this new
window
– Only the first parameter is required (it would work without
the second two parameters).
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-87
Introduction to Interactive Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-88
Introduction to Interactive Web Pages
– Using ONBLUR & ONFOCUS - when an element loses focus, by clicking
elsewhere on the Web page for example or gains focus my clicking on it.
– This program computes a dog’s age in “dog years” by multiplying the
value in a text box and writing the computed value in it’s place.
– These event attributes are added to the text INPUT element start tag.
ONFOCUS=“age.value=‘Replace this text with your dog\’s age’ ”
ONBLUR=“age.value=‘Your dog is ’ + age.value*7 + ‘ years old in dog
years.’ ”
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-89
Introduction to Interactive Web Pages
– The value is computed by the section in red.
– The value typed by the user into the text box is captured,
multiplied by 7, then inserted into a string and placed back
into the same text box when it loses focus.
– Note the use of the escape character (the \) to add a single
quote to the message triggered by ONFOCUS - otherwise
the apostrophe would be interpreted as the end of the string.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-90
Introduction to Interactive Web Pages
– Before ONFOCUS is triggered
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-91
Introduction to Interactive Web Pages
– After ONFOCUS is triggered
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-92
Introduction to Interactive Web Pages
– After ONLBLUR is triggered (and 4 is entered)
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
10-93