At A Glance: Instructor's Notes

Teacher Notes for
HTML Tutorial 1
Developing a Basic Web Page
At a Glance

Instructor's Notes
 Tutorial Approach
 Lecture Notes
Introducing the World Wide Web
HTML: the language of the Web
Creating an HTML Document
Creating headings, paragraphs, and lists
Creating character tags
Inserting a graphic
Adding special characters
Inserting horizontal lines
 Tutorial Discussion Questions
Instructor's Notes
Tutorial Approach
This tutorial explores the basics of World Wide Web and Hypertext Markup Language. The students will
learn how to create a basic Web page. They will learn how to create and apply HTML tags, format page
headings, paragraph, lists, and individual characters. Finally, they will be able to insert a picture, a special
character, and a line in an HTML document.
In the first session, students will learn about different networks, World Wide Web history, Web browsers
and Web servers. They will start to explore the language of the Web – HTML. They will also learn how to
create HTML documents using different tools.
The second session explores the syntax of HTML language. Students will learn how to create HTML tags
and apply them to an HTML document. They will learn how to create and format text in an HTML
document. Students will study how to format individual characters and how to create combining tags.
Finally, they will create basic a HTML document with headings, paragraphs, and lists.
In the third session, students will learn about inline and external images that can be displayed on the Web.
They will study how to insert an image into an HTML document and how to create special characters not
found on the keyboard. Finally, they will create and add a horizontal line to the basic HTML document.
Lecture Notes
Introducing the World Wide Web
To share resources effectively computers can be linked together in a structure called a network. If the
computers are close together, the network is called a local area network (LAN). A network that covers a
wider area, perhaps several cities, is called a wide area network (WAN). The Internet is a “network of
networks”. The physical structure of the Internet uses fiber-optic cables, satellites, phone lines, and other
telecommunications media to send data back and forth.
In 1989, Timothy Bernes-Lee and other researches at the CERN nuclear research facility near Geneva,
Switzerland, laid the foundation of the World Wide Web (Web), which allows a quick access to any
resource on the Internet. They developed a system of hypertext documents; electronic files that contain
elements that you can select. The key to hypertext is the use of links, which you activate by clicking, to
move from one topic to another. The hypertext approach has become the dominant method of sharing and
retrieving information on the Internet, known as World Wide Web.
Documents on the Web are known as Web pages. Web pages can contain images, video, sound clips, and
programs that run directly from a Web page. A Web page is stored on a Web server, which makes the page
available to users of the Web. To view the page, the users run a Web browser installed on their computer. A
Web browser is a software program that retrieves a Web page and displays it. Browsers can either be text-
based (e.g., Lynx) or graphical browsers (e.g., Internet Explorer, Netscape). With a text-based browser, you
navigate the Web by typing commands; with a graphical browser, you use the mouse to move from page to
page.
Quick Quiz:
1. If computers are close together, they can be networked using a(n) _____________.
a. WAN
b. LAN
c. Internet
d. Web
2. Electronic files that contain links, which allow you to move from one topic to another, are known
as ________documents.
3. True/False: The World Wide Web was developed in 1998.
Answers: b, hypertext, False.
Classroom Activity:
Ask your students what their experience with the World Wide Web has been so far. Do they find it easy to
navigate? Do they know what makes a Web page what it is?
HTML: the language of the Web

Web pages are text files, written in a language called Hypertext Markup Language (HTML). A markup
language describes the content and format of documents. HTML was derived from the Standard
Generalized Markup Language (SGML) used for large-scale documents. HTML allows Web authors to
create documents that can be displayed across different operating systems. HTML code is easy to
understand for nonprogrammers. HTML describes the format of Web pages through the use of tags.
There are a few reasons for putting the formatting in the control of the Web browser rather than Web server,
including portability and speed. Web pages must be able to work with different operating systems and
browsers. Specifying the exact appearance of a page can dramatically increase both size of the document
file and the time required to retrieve it. HTML uses style sheets, with which a Web designer can explicitly
define the fonts and formatting the Web browser applies to the document.
HTML has a set of rules, called syntax, that specify how document code is written. These rules appear as a
set of standards or specifications developed by a consortium of Web developers, programmers, and authors
called the World Wide Web Consortium (W3C). Figure 1-5 describes the versions of HTML.
Over the years each browser has added extensions to HTML that support new features. Future Web
development is focusing more on XML and XHTML languages. XML (Extensible Markup Language) is
used for developing document content using customized tags and attributes. XHTML (Extensible
HyperText Markup Language) is a stricter version of HTML, designed to better integrate HTML with
XML. To create HTML documents, you can use any text editor, an HTML converter, or an HTML editor.
Classroom Activity:
If you have a computer and an Internet hookup in the classroom show go to a Web page and use
View/Source to show your students what HTML code looks like.
Creating an HTML Document

Plan the appearance of your Web page before writing the code. An HTML file contains both formatting tags
and content. Document content is what the user sees on the page. Tags are the HTML codes that control the
appearance of the document content. There are two types of tags: one-sided tags, which require only a
single tag, and two-sided tags.
A one-sided tag allows you to insert non-character data into the Web page, such as a graphic or a video clip.
A two-sided tag contains an opening tag that tells the browser to turn on a feature to be applied to the
content, and a closing tag that turns off the feature. The HTML code also includes the align property, or
attribute, which instructs the browser how to align the text. Tags are not case sensitive, but the current
standard is to display all tags in lowercase letters.
To create a Web page, you can use any text editors, such as Notepad or WordPad. You need to identify the
markup language for the document, the document's key sections, and assign a title to the page. Use <html>
tags to enclose the document's code indicating that the page is written in the HTML language. The <head>
tag identifies the area where you enter information about the Web page itself. The title of the page is
entered using the <title> tags. The portion of the document that Web users will see should be enclosed
between the <body> tags. View the formatted page with your Web browser to verify that there are no
syntax errors or other problems.
Quick Quiz:
1. Which of the following HTML tags is used to identify the information about the Web page itself?
a. <head>
b. <title>
c. <body>
d. <html>
2. The HTML code also includes the align ______________, which instructs the browser how to
align the text.
3. True/False: the <body> and <head> tags are strictly required.
Answers: a, attribute, False.
Creating headings, paragraphs, and lists

HTML supports 6 levels of headings, numbered <h1> through <h6>. The <h1> heading tag is the largest
and most prominent. Headings are always displayed in a bold font. The heading tag can contain additional
attributes, one of which is the alignment attribute.
You can enter text information for each section using paragraph tags or without tags. Each new paragraph
needs to be set off by a blank line. A paragraph tag <p> adds a blank paragraph (the extra line) to separate a
block of text from text that precedes it.
HTML supports three kinds of lists: ordered, unordered, and definition. An ordered list is used to display
information in a numeric order. To create an ordered list using numbers, lowercase, or uppercase letters,
you should specify the type attribute for the option tag <ol> with the following values: “1”, “a”, “A”, “i”,
or “I”. If you omit the type attribute, browsers create an ordered list using numbers. You can also create an
unordered list using <ul> tags, where the type attribute can have one of the following values: “disc” (a
bullet before each item), “circle”, or “square”. A definition list is a list of terms, each followed by a
definition line that is typically indented slightly to the right. The definition list uses <dl> (for list), <dt> (for
the term in the list), and <dd> (for the term definition).
Creating character tags

HTML allows you to format not just the entire document or individual lines of text, but also individual
characters. A tag that you apply to an individual character is called a character tag. There are two types of
character tags: logical and physical.
Logical character tags specify how you want to use text. For example, the <em> tag creates italic text. You
can also combine tags, creating bold and italic text, for example. When you combine tags, it is a good idea
for one tag to completely contain the other. Some browsers cannot interpret combined tags. Combining tags
also make the code more difficult to read.
Web designers can also use physical character tags to format text, as shown in Figure 1-22. Some older
versions of browsers are text-based and ignore some physical tags. If you suspect that many of your users
are using older browsers, you should use a logical tag. Otherwise, use physical tags, which are more
common and easier to interpret.
Quick Quiz:
1. Which of the following tags allows you to create bold text?
a. <strong>
b. <em>
c. <i>
d. <u>
2. A tag that you apply to an individual character is called a(n) __________ tag.
3. True/False: Some older versions of browsers ignore the <em> tag.
Answers: a, character, False.
Inserting a graphic
Images can be displayed in two ways: as inline images or as external images. An inline image is displayed
directly on the Web page when the page is accessed by a user. An inline image can be placed on a separate
line or directly within a line of text. There are two formats for inline images: GIF (Graphic Interchange
Format) and JPEG (Joint Photographic Experts Group). To create an inline image, you should use <img>
tags. If the image file is located in another folder, you need to specify the “src” attribute, which indicates
the full location path.
An external image is not displayed with the Web page. Instead, the browser must have a file viewer. The
browser launches the viewer program to display an external image file. Images are represented by an icon
that a user clicks to view the image. External images may have different formats.
Adding special characters

Occasionally you will want to include special characters in your Web page that do not appear on your
keyboard. For example, you can insert mathematical symbols or the copyright symbol into your HTML
document. HTML supports the use of special character symbols that are identified by a code number or
name.
To create a special character, type an ampersand (&) followed by the code name or the code number, and
then a semicolon. Code numbers are preceded by a pound sign (#). Figure 1-29 shows some HTML
symbols and the corresponding code numbers or names.
Inserting horizontal lines

You can create a horizontal line using <hr> tag. An “align” attribute specifies the horizontal alignment of
the line on the page (center, left, right). A “size” attribute specifies the height of the line. A “width” attribute
indicates the width of the line. A “color” attribute indicates the color of the line, and “noshade” specifies
that the browser displays a solid line.
Note that the “color” attribute is supported by Internet Explorer but not Netscape. The “size” and “width”
attributes are measured either in pixels or as a percentage of the screen width. A pixel is a square dot on
your computer screen about 1/72 inch wide.
HTML Tutorial 2
Adding Hypertext Links to a Web Page
At a Glance

Instructor's Notes
 Lecture Notes
Creating a hypertext document
Web page structures
Creating links among documents
Linking to documents in other folders
Linking to documents on the Internet
Linking to other Internet objects
Instructor's Notes
Tutorial Approach
This tutorial explores the basics of hypertext documents. The students will learn how to create hypertext
links between elements within a Web page and between different Web pages. They will learn how to create
anchors for text elements and inline images. They will learn about relative and absolute pathnames for files.
Students will review basic Web structures and become familiar with storyboarding technique. Finally, they
will be able to create hypertext links to various Internet resources, including Web pages, FTP servers, and
newsgroups.
In the first session, students will learn about the destinations of the links within Web document, known as
anchors. They will also learn about link tags and Hypertext Reference. Finally, they will be able to create
anchors for text elements and inline images within the page and the links themselves.
The second session explores the basics of storyboarding technique and design principles of creating a
system of Web pages. Students will review different Web page structures, such as linear and hierarchical.
They will learn how to create hypertext links between different Web pages and navigate to a specific
location elsewhere in a document. Finally, students will create hypertext links to different sections of
another document
In the third session, students will learn about absolute and relative pathnames for documents located in
different folders. They will explore the fundamentals of the Uniform Resource Locator. In this session
they will learn how to create hypertext links to documents located in other folders as well as to other
locations on the Internet. They will also see how to display linked documents in separate browser windows.
Finally, they will become familiar with how to create hypertext links to FTP servers, newsgroups, and e-
mail addresses on the Web pages.
Lecture Notes
Creating a hypertext document
A hypertext document contains hypertext links, items that you can select to view another topic or document
(the destination of the link). You can usually select hypertext links by clicking a mouse. These links can
point to another section in the same document, to a different Web page, or to a variety of other Web objects.
To create the destination text for the link, or the anchor, you need to specially mark the text using the <a>
tag. You assign each anchor its own anchor name, using the “name” attribute. When you create a link to the
anchor, the link will point to the place in the document, identified by the anchor name. The anchor works as
a reference point to a link. An anchor doesn't have to be text; it can be an inline image. Adding an anchor
does not change your document's view, it only creates locations in your Web page that become destinations
of links.
After you create the anchors, you need to create the links themselves. To create a link to an anchor, use the
same <a> tag, but with another attribute “href”. The href attribute, or Hypertext Reference, indicates the
location to jump for (an anchor). The href attribute is case sensitive. You can refer to an anchor or to a
different Web page or a resource anywhere on the Internet. You link to an anchor using the anchor name
preceded by a pound symbol (#). The <a> tags used to create links are sometimes called link tags.
Classroom Activity:
If you have a computer and an Internet connection set up in your classroom, show your students exactly
what a hyperlink looks like and how it works.
Web page structures

Before you set up links for navigating a group of Web pages, you should know how to use different web
structures. You can use a technique known a storyboarding, to map out the pages that you want to relate.
You should determine which structure works best for the type of information you are presenting. It should
be easy for users to navigate from page to page. To design your own system of Web pages, you can use
different Web page structures.
You can use the linear Web page structure, in which each page is linked to the next and to previous pages,
in an ordered chain of pages. If you want to make it easier for users to return to the first page, use an
augmented linear structure, as shown in Figure 2-11. To apply this structure to several pages, include a link
in each page that jumps directly back to the first page, while keeping the links to the next and previous
pages within your structure.
Another popular structure is the hierarchical structure of Web pages, shown in Figure 2-12. A hierarchical
structure starts with a general topic that includes links to more specific topics. Each specific topic includes
links to more specialized topics, and so on. Including a link to the top of the structure on each page gives
users an easy path back to the beginning. You can combine linear and hierarchical structures. The best time
to organize a structure is when you start creating pages.
Quick Quiz:
1. Which of the following is not a basic Web page structure?
a. Storyboarding
b. Linear
c. Hierarchical
d. Augmented linear
2. A(n) ____________ structure starts with a general topic that includes links to more specific topics.
3. True/False: You can combine linear and hierarchical structures.
Answers: a, hierarchical, True.
Classroom Activity:
Discuss with your students the different design approaches and basic Web structures.
Creating links among documents

To create a link between two Web pages, use the same <a> tag with the href attribute. Unlike creating
hypertext links between elements on the same page, this process does not require you set an anchor in a file
to link to it. The filename of the file serves as the anchor or destination point. In order for the browser to be
able to locate and open linked document, it must be in the same folder as the document, containing the link.
When you create a link to a Web page, it navigates to the top of the destination page. If you want to
navigate to a specific location in a document, you can set an anchor and a link to an anchor within the
document. Use the pound symbol (#) in the <a> tag to distinguish the filename from the anchor name.
Linking to documents in other folders

In some situations you want to place different files in different folders. When referencing a file located in a
different folder than the link tag, you must include the location, or path, for the file. HTML supports two
kinds of paths: absolute paths and relative paths.
An absolute path provides a precise location for a file. With HTML, absolute pathnames begin with a slash
(/) and are followed by a sequence of folders beginning with the highest-level folder and proceeding to the
folder that contains the file, and then the filename itself. Each folder is separated by the slash. The absolute
pathnames for files located on different computers begin with slash followed by the drive letter and a
vertical bar ( | ).
When there are many folders and subfolders involved, absolute pathnames are confusing. For that reason,
most Web designers use relative pathnames in their hypertext links. A second reason to use relative
pathnames is that they make hyperlinks portable. A relative path specifies the location for a file in relation
to the folder containing the current Web document. Folder names are separated by slashes. To reference a
file in a folder directly above the current folder in the folder hierarchy, relative pathnames use two periods
(..).
Linking to documents on the Internet

To create a hypertext link to a document on the Internet, you need to know the URL. A URL, or Uniform
Resource Locator, specifies a precise location on the Web for a file. You can find the URL of a Web page in
the Location or Address box of your browser's document window. Once you know a document's URL, you
can create a link to it by adding the URL to the <a> tag along with the href attribute in your text file.
By default, each Web page you open is displayed in the main browser window, replacing the one you were
viewing last. To force a document to appear in a new window, use the target attribute in the links tag. A
target attribute may have a “window” name or “_blank” keyword.
Linking to other Internet objects

The World Wide Web allows users to access several types of Internet resources, such as FTP servers or
Usenet newsgroups. You can create a link to each object, if you know the URL for it. Each URL follows the
same format. The first part of the URL identifies the communication protocol, which is a set of rules that
governs how information is exchanged. Web pages use Hypertext Transfer Protocol (HTTP). Following the
communication protocol, there is a separator, such as colon and two slashes. The rest of the URL identifies
the location of the document or resource on the Internet. By convention, if the path and filename are left off
the URL, the browser searches for a file named “index.html” in the root folder of the Web server.
FTP Servers use the communication protocol FTP, or File Transfer Protocol. FTP servers can store files that
Internet users can download, or transfer, to their computers. URLs for FTP servers follow the same format
as for Web pages, except that they use the FTP protocol rather than the HTTP protocol.
Usenet is a collection of discussion forums called newsgroups. They allow users to exchange messages
with other users on a wide variety of topics. The URL for a newsgroup is “news:newsgroup”. When you
click a link to a newsgroup, your computer starts your newsgroup software and accesses the newsgroup.
Many Web designers include their e-mail addresses on their Web pages. You can identify e-mail addresses
as hypertext links. When a user clicks the e-mail address, the browser starts a mail program and
automatically inserts the e-mail address. The URL for an e-mail address is “mailto:e-mail_address”.
Quick Quiz:
1. _____________ servers can store files that Internet users can download, or transfer, to their
computers.
a. FTP
b. Web
c. HTTP
d. HTML
2. There should always be a(n) ________________following the communication protocol in a URL
3. True/False: By convention, if the path and filename are left out of the URL, the browser searches
for a file named “index.html” in the current folder.
Answers: a, separator, False.
Tutorial Discussion Questions
1. Discuss the concept of “hypertext link”.
2. Discuss how to create a hypertext link between elements within a Web page.
3. Discuss the differences between an absolute and relative pathname.
4. Discuss how to create hypertext links to various Internet resources.
HTML Tutorial 3
Designing a Web Page
At a Glance

Instructor's Notes
 Lecture Notes
Working with color in HTML
Specifying a color scheme for your page
Modifying text with the <font> tag
Inserting a background image
Working with GIF files
Working with JPEG files
Controlling image placement and size
Understanding image maps
Defining image map hotspots
Instructor's Notes
Tutorial Approach
This tutorial explores the basics of design of the Web pages. The students will learn how to add a colorful
background or background image to the HTML page for visual interest, modify the appearance of the text
and links. They will learn how to work with color scheme for the page. They will also learn about different
types of images and image maps. Finally, they will be able to create an image map and test it with different
Web browsers.
In the first session, students will explore how HTML handles and defines color. They will also learn how to
add color to the text and to the background of a Web page. Students will work with different fonts. Finally,
they will be able to add a background image to a Web page.
The second session explores features, advantages and disadvantages of GIF and JPEG image file formats.
Students will learn how to use them to add special effects to the Web page. Finally, they will learn how to
control the size, placement, and appearance of inline images on the Web page.
In the third session, students will learn about server-side and client-side image maps. Students will create
an image map. They will also learn about the different hotspots: rectangular, circular, and irregularly
shaped polygon hotspots. Finally, they will use the border attribute.
Lecture Notes
Working with color in HTML
HTML identifies a color either by the color's name or by color values. There are 16 basic color names as
shown in Figure 3-2. These colors can be accurately displayed across different browsers and operating
systems. This list was extended by Netscape and Internet Explorer.
When you want to have more control and more choices regarding the colors in your Web page, use color
values. A color value is numerical expression that precisely describes a color. Any color can be expressed as
a combination of three primary colors: red, green, and blue. By varying the intensity of each primary color,
you can create any color and any shade.
The computer monitor displays the array of colors, while software programs, including Web browsers,
define color mathematically. Each color is represented by a triplet numbers, called an RGB triplet. The
intensity of the red, green, and blue components can vary from 0 to 255. You need to convert the RGB
triplet to hexadecimal format and express it in a single string of six characters.
Quick Quiz:
1. The intensity of the red, green, and blue components of a color can vary from 0 to ___________.
a. 8
b. 16
c. 250
d. 255
2. There are ________ basic color names.
3. True/False: To define a custom color, you need to express the color name in a single string of six
decimal characters.
Answers, d, sixteen, False.
Specifying a color scheme for your page

Web browsers have a default color scheme that they apply to the background and text of the pages they
retrieve. Usually this scheme involves black text on a white background, with hypertext links highlighted in
purple and blue. To use different colors, you need to modify the attributes of the page, defined within the
<body> tag.
You can add several attributes to the <body> tag to identify the color scheme. The bgcolor attribute sets the
background color, the text attribute controls text color, the link attribute defines the color of hypertext links,
the vlink attribute defines the color of links that have been visited by the user, and the alink attribute
determines the color of an active hyperlink.
The value of color can be either one of the accepted color names or the color's hexadecimal value. You
must preface the hexadecimal string with the pound symbol (#) and enclose the string in double or single
quotation marks. By adding the color scheme to the <body> tag of the HTML file, you supersede the
browser's default color scheme with your own.
Modifying text with the <font> tag
Specifying the text colors in the <body> tag of the Web page changes the color of all the text on the Web
page. To change the color of individual words or characters, you need to use the <font> tag with specific
sections of text. You can add three attributes: size, color, and face.
The size attribute of the <font> tag allows you to specify the font size of the text. You can express the size
value in either absolute or relative terms. You can increase or decrease the font size by a specific value
relative to the surrounding text. Figure 3-11 presents a complete comparison of header tags and font sizes.
The color attribute of the <font> tag allows you to change the color of individual characters or words. You
specify the color in the <font> tag by using either accepted color name or the hexadecimal color value. If
there is no color specified in the <body> tag, the default colors of the Web browser are used. Use the face
attribute to specify a particular font for a section of text. To override the browser's font choice, you must
specify a font that installed on the user's computer or use generic font names: serif, sans-serif, monospace,
cursive, and fantasy.
Inserting a background image

With the background attribute of the <body> tag you can use an image file for the background of your Web
page. To insert a background image, you need to specify the URL for your graphic file. The browser
retrieves your image file and repeatedly inserts the image into the background, in a process called tiling.
When you choose a background image, do not use a large file (more than 20 kilobytes) or images that will
detract from the text on the Web page, as shown in Figure 3-18. There are many collections of background
images available on the Web.
Quick Quiz:
1. To insert a background image, you need to specify the ____________ for your graphic file.
a. Filename
b. URL
c. File extension
d. File size.
2. The browser retrieves your image file and repeatedly inserts the image into the background, in a
process called _________.
3. True/False: When you choose a background image, do not use a large file (more than 20 kilobytes)
or images that will detract from the text on the Web page.
Answers: b, tiling, True.
Working with GIF files

GIF (Graphic Interchange Format) is the mostly used image format on the Web. GIF files are limited to
display 256 colors. There are two GIF file formats: GIF87 and GIF89a. The GIF89a format includes
interlacing, transparent colors, and animation.
Interlacing refers to the way the GIF file is saved by the graphics software. With a noninterlaced GIF the
image is saved one line at a time, starting from the top of the graphic. With interlaced GIFs, the image is
saved and retrieved “stepwise”.
A transparent color is a color from the image that is not displayed when the image is viewed in an
application. Many applications include the option to designate a transparent color when saving the image.
One of the most popular uses of GIFs is to create animated images. An animated GIF is composed of
several images that are displayed one after the other in rapid succession. Most animated GIF software
allows you to control the rate at which the animation plays and to determine the number of times the
animation is repeated before stopping.
Working with JPEG files

JPEG stands for Joint Photographic Experts Group. In the JPEG format you can create graphics that use the
full 16.7 million colors available in the color palette. JPEG files are most often used for photographs. You
can control the size of a JPEG by controlling the degree of image compression applied to the file.
Increasing the compression reduces the file size, but you can lose image quality. By testing different
compression levels, you can reduce the size of your JPEG files while maintaining an attractive image. A
progressive JPEG format allows JPEG files to be interlaced. However, not all Web browsers support
progressive JPEGs.
Classroom Activity:
Have your students break into groups and discuss advantages and disadvantages of GIF and JPEG image
file formats.
Controlling image placement and size

The align attribute can be used with the <img> tag. The align attribute indicates how you want the graphic
aligned in relation to the surrounding text. There are seven align values: absbottom, absmiddle, baseline,
bottom, middle, texttop, and top.
You can increase the horizontal and vertical space around the image with the hspace and vspace attributes.
The hspace attribute indicates the amount of space to the left and right of the image. The vspace attribute
controls the amount of space above and below the image.
Height and width attributes for the <img> tag instruct the browser to display an image at a specific size.
These attributes can be used to increase or decrease the size of the image on your page. When a browser
encounters an inline image, it calculates the image size and then uses this information to format the page.
You can also include the dimensions of the image, then the browser displays it faster.
Understanding image maps

To use a single image to access multiple targets, you must set up hotspots within the image. A hotspot is a
denied area of the image that acts as a hypertext link. Hotspots are defined through the use of image maps,
which list the positions of all hotspots within a particular image. There are server-side image maps and
client-side image maps.
In a server-side image map, the image map is stored on the Web server. The program uses the coordinates
to determine which hotspot was clicked and then activates the corresponding hyperlink. Server-side image
maps are supported by most graphical browsers.
With a client-side image map, you insert the image map into the HTML file, and the Web browser locally
processes the image map. You can easily test your Web pages using the HTML files stored on your
computer. Client-side image maps tend to be more responsive than server-side image maps. When a user
moves the pointer over the inline image, the browser's status bar displays the target of each hotspot. You
can use the <br> tag, which creates a line break and forces the following image or text to appear on its own
line.
Defining image map hotspots

A Web designer typically uses a special program that determines the image map coordinates. Most image
map programs generate the coordinates for hotspots and HTML code. The <map> tag gives the name of the
image map. Within the <map> tag, you use the <area> tag to specify the areas of the image that act as
hotspots. You can include as many <area> tags within the <map> tag as you need for the image map.
The shape attribute has three possible values: “rect” for a rectangular hotspot, “circle” for a circular
hotspot, and “poly” for irregularly shaped polygon hotspots. In the coords attribute, you enter coordinates
to specify the location of the hotspot. In the href attribute you enter the location of the page opened by the
hotspot. In the target attribute, you can specify the name of a secondary browser window in which to open
the linked page.
The final step in adding an image map to a Web page is to add the usemap attribute to the <img> tag for the
image map graphic. The usemap attribute tells the browser the name of the image map to associate with the
inline image. You should place a pound sign (#) before the image name.
Quick Quiz:
1. Which of the following is not a valid align value?
a. Baseline
b. Bottom
c. Middle
d. Abstop
2. The ______________attribute indicates the amount of space to the left and right of the image.
3. True/False: When a browser encounters an inline image, it cannot calculate the image size.
Answers: d, hspace, False.
5. Discuss how to use different colors and backgrounds when you create a Web page.
6. Discuss how to create a color schema for a Web page.
7. Discuss the features of image maps.
8. Discuss the concept of hotspot.

HTML Tutorial 4
Developing a Basic Web Page
At a Glance

Instructor's Notes
 Lecture Notes
Creating a text table
Defining a table structure
Modifying the appearance of a table
Working with table and cell size
Spanning rows and columns
Applying a color scheme to a table
Designing a page layout with tables
Instructor's Notes
Tutorial Approach
This tutorial explores the basics of HTML tables and their use on the Web. The students will learn how to
create a basic Web page. They will learn how to create text and graphical tables and compare the
advantages of each approach. Students will learn about HTML tags used to create a table, a row, and a cell.
They will also learn how to span cells and format tables. Finally, they will be able to create a color scheme,
newspaper-style layout and complex Web page with nested tables.
In the first session, students will learn about text and graphical tables on the Web. They will start to
explore how to create a simple text table and progress to graphical tables. They will also learn how to
define table rows, columns, cells, and headings with HTML tags. Finally, they will be able to add a caption
to the table.
The second session explores the appearance of graphical tables on the Web. Students will learn how to
specify the size of the table and the space between and within the cells. They will learn how to place the
table on the Web page, how to align the text within the table, and how to merge several cells into a single
spanning cell. Finally, they will create a color scheme for the table by modifying the background and
border colors.
In the third session, students will work with tables to create a newspaper-style layout for a Web page. They
will study how to create comments for the HTML document to assist in the design process. They will learn
how to create nested tables, and how to format the text within table cells using the <font> tag.
Lecture Notes
Creating a text table
A text table contains only text spaced on the Web page in rows and columns. Text tables use only standard
word processing characters for cell borders and lines such as hyphens or equal signs. A graphical table uses
graphical elements to distinguish the table components.
A text table uses spaces and the characters that fill those spaces to create its column boundaries. There are
two font types: a fixed-width, or mono-space, and proportional fonts. Fixed-width fonts use the same
amount of space for each character. Proportional fonts assign different amounts of space for each character
depending on the width of that character. Proportional fonts are more visually attractive but less suitable for
text tables. You should always use a fixed-width font to ensure that the columns in your text tables remain
in alignment.
HTML ignores blank spaces, blank lines, and tabs. To control the appearance of a text table you can use the
<pre> tag. Any text formatted with the <pre> tag retains any spaces or lines you want to display on your
Web page. The <pre> tag displays text using a fixed-width font.
Quick Quiz:
1. ______________ fonts assign different amounts of space for each character depending on the
width of that character.
a. Fixed-width
b. Proportional
c. Mono-space
d. Flexible
2. Any text formatted with the <____________> tag retains any spaces or lines you want to display
on your Web page.
3. True/False: the <pre> tag displays text using a proportional font.
Answers: b, pre, False.
Defining a table structure

To create a graphical table with HTML, you should define the layout and appearance of a table. First, you
need to specify the table structure: the number of rows and columns, the location of column headings, and
the placement of a table caption. When the table structure is created, you can enter data into the table.
Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table
structure. Each row of the table is surrounded by two-sided <tr> tags. A two-sided <td> tag indicates the
presence of individual table cells.
HTML provides the <th> tag for the table headings. Text formatted with the <th> tag is centered within the
cell and displayed in a boldface font. To identify the table's heading, body, and footer, you can use the
<thead>, <tbody>, and <tfoot> tags, respectively. These tags contain row groups. You can specify a caption
for your table using the <caption> tags and indicating the capture placement.
Modifying the appearance of a table

You can create a table border by adding the border attribute to the <table> tag. The size attribute is optional.
If you do not specify a size, the browser creates a table border 1 pixel wide.
The cellspacing attribute controls the amount of space inserted between table cells. The default cell spacing
is 2 pixels. If you have a border around the entire table, there will be gridlines separating individual table
cells.
To control the space between the table text and the cell borders, add the cellpadding attribute to the <table>
tag. The default cellpadding value is 1 pixel. The cellpadding value is the distance from the table text to the
cell border measured in pixels. With the frame and rule attributes you can control how borders and gridlines
are applied to the table. The frame attribute allows you to determine which slides of the table will have
borders. Figure 4-27 shows the effect of type values on the table grid. The rules attribute lets your control
how the table gridlines are drawn.
Quick Quiz:
1. The ______________ value is the distance from the table text to the cell border measured in
pixels.
a. Cellpadding
b. Cellspacing
c. Size
d. Frame
2. The ___________ attribute allows you to determine which sides of the table will have borders.
3. True/False: The default cell spacing is 1 pixe.
Answers: a, frame, False.
Working with table and cell size

The size of a table is determined by the text it contains in its cells. By default, HTML places text on a
single line. To define the size of the table cells and the table as a whole you can use width and height
attributes measured in pixels or as a percentage of the display area.
To set the width of an individual cell, add the width attribute to either the <td> or <th> tags. The width can
be expressed either in pixels or as a percentage of the table width. The height attribute can also be used in
the <td> or <th> tags. The width and height can be expressed either in pixels or as a percentage of the table
width or height.
By default, a browser places a table on the left margin of a Web page. To align a table with the surrounding
text, you can use the align attribute with “left”, “right”, or “center” values. By using the valign attribute,
you can specify the text's horizontal and vertical placement.
Spanning rows and columns

To merge several cells into one, you need to create a spanning cell. A spanning cell is a cell that occupies
more than one row or column in a table.
Spanning cells are created by inserting the rowspan and colspan attributes in a <td> or <th> tag. The
colspan and rowspan can be expressed as the number of columns or rows in the spanning cell of the table.
The direction of the spanning is downward and to the right of the cell containing the rowspan and colspan
attributes. When a cell spans several rows or columns, you must adjust the number of cell tags used in the
table row. When a cell spans several rows, the rows below the spanning cell must be adjusted.
Classroom Activity:
Have the students break into small groups and discuss the features of spanning cells. When would they
want to use this feature?
Applying a color scheme to a table

Table elements support the same bgcolor attribute that can be applied to an entire Web page. You can
specify a background color for the whole table, all of the cells in the row, or for individual cells, by adding
the bgcolor attribute to either the <table>, <tr>,<td> or <th> tags. You cannot set a background color for a
column with a single attribute.
The color attribute value is defined as a color name or hexadecimal color value. The color defined for a cell
overrides the color defined for a row, and the color defined for a row overrides the color defined for a table.
You can add a background image to your tables using the background attribute. A background can be
applied to the entire table, to a single row (Netscape 6.2), or to an individual cell.
You can use the bordercolordark and bordercolorlight attributes to create a three-dimensional effect for the
border in Internet Explorer. Note that Netscape does not support these attributes. Internet Explorer 4.0 or
above supports HTML tags that allow you to manipulate the features of entire columns and groups of
columns. To define a column, you can add the <col> tag to the top of the table structure and specify the
span attribute of the <col> tag as the number of columns in the group. Another way of grouping columns is
by using the <colgroup> tag. In the case of a conflict between the attributes in the <col> and <colgroup>
tags, the <col> tag attributes take precedence.
Designing a page layout with tables

HTML tables are often used to define the layout of an entire Web page. You can display text in newspaper
style columns or separate the page into distinct sections by using HTML tables. You can use any of the
HTML layout tags for individual table cells. You can nest one table inside another.
Comment tags allow you to view your HTML file by describing the different sections of the code. Any text
appearing within the comment tag is ignored by the browser and not displayed in the page. You can create
two tables, one nested inside the other. You can combine the outer and inner tables by using the copy and
paste techniques.
9. Discuss how to use different fonts when you create a text table.
10. Discuss the differences between a text table and a graphical table.
11. Discuss the new extensions of Internet Explorer for use with tables.
12. Discuss the features of HTML tags for creating nested tables.
HTML Tutorial 7
Working with CSS – skipping Tutorials 5 & 6
At a Glance

Instructor's Notes
 Lecture Notes
Introduction to cascading style sheets (CSS)
Using inline styles
Creating an embedded style
Using an external style sheet
Resolving style precedence and working with style inheritance
Setting font and text attributes
Working with color and background
Working with list styles
Formatting hypertext links
Working with ids and classes
Working with container elements
Formatting block-level element boxes
Instructor's Notes
Tutorial Approach
This tutorial explores the history and theory of cascading style sheets. The students will learn how to create
inline styles, embedded styles, and linked style sheets. They will learn the concepts of style precedence and
style inheritance. Cascading style sheets are used to format different elements of HTML documents.
Students will be able to create their own style for hypertext links. They will study how to use the class and
id attributes to create styles for the documents. They will also learn how to work with container elements
using the <div> and <span> tags. Finally, they will be able to use cascading style sheets to design Web
page layout.
In the first session, students will learn about the history and theory of style sheets. They will learn how to
create inline styles, embedded styles, and external style sheets. Finally, they will be able to apply styles to
a wide variety of HTML tags in their Web sites by using cascading through the structure of nested tags on
Web pages.
In the second session, students will learn the basics of the CSS language and its syntax. They will also
learn about specific attributes that can be used with styles to modify the appearance of fonts, including font
size and alignment. Students will learn how to use styles to work with colors and background images.
Finally, they will use style attributes to create and format ordered, unordered, and definition lists.
In the third session, students will learn how to format hypertext links on their Web page and how to create a
“rollover” effect for them. They will work with CSS classes and pseudo-classes. They will learn how to
use the <div> and <span> tags to create containers for blocks of text. Finally, they will learn how to format
the layout of the Web page by formatting block-level elements.
Lecture Notes
Introduction to cascading style sheets
The simplicity of HTML tags made creating Web pages easier and faster. As HTML evolved, different ways
to control a pages' appearance developed: using HTML extensions created by different browsers,
converting text to images, and using tables to control page layout. There are drawbacks to each of these
approaches.
One principle of design theory is to separate, as much as possible, the content of a document from its
design. You can create a style defining the appearance of a document element. The collection of styles for a
Web page or Web site is known as a style sheet. Style sheets use a common language and syntax. The main
style sheet standard is Cascading Style Sheets (CSS) developed by the World Wide Web Consortium in
1996. The second standard CSS2 was released in 1998.
There are three ways of employing CSS in your Web pages: inline styles, embedded or global styles, and
linked or external style sheets. Inline styles are added to each tag within an HTML file. Embedded styles
are applied to an entire HTML file. Linked style sheets are placed in an external file and linked with pages
in the Web site.
Quick Quiz:
1. Which of the following styles is placed in an external file?
a. Inline style
b. Embedded style
c. Global style
d. Linked style
2. ___________ styles are added to each tag within an HTML file
3. True/False: The second standard CSS2 was released in 1996.
Answers: d, inline, False.
Using inline styles

To create an inline style, you add the style attribute to the HTML tag. The style declaration must be
enclosed within double quotation marks. A style declaration consists of attribute names that specify such
features as the font size, color, and font type, followed by a colon and then the value of the attribute.
You can use multiple attributes separated by semicolons. If the semicolon that separates the attributes is
missing, your browser may not display any of your style changes.
Creating an embedded style

You can insert a <style> tag within the head section of your HTML file. Within the <style> tag, enclose the
style declarations you need to the entire Web page. The style sheet language identifies the type of style used
in the document. The default and the most common language is “text/css” for use with CSS.
A style declaration consists of selector, which identifies an element in the document, and the attributes and
values within the curly braces, which indicate the styles applied to all occurrences of that element. You do
not need to enter the type attribute, unless you specify a different style language. You can apply the same
declaration to a group of selectors by including all of the selector names separated by commas.
Using an external style sheet

To create styles that apply to an entire Web site, you need to create a text file containing your style
declarations, and then create a link to that file in each page of the Web site using a <link> tag. You should
specify the link attributes, such as href, rel, and type. In order to link a style sheet, the value of the href
attribute should be the “URL” of the linked document, the value of the rel attribute should be “stylesheet”
and the value of the type attribute should be “text/css”.
Another way to link a style sheet is to use the @import command, which accesses the style sheet
definitions from another file. To use @import with your styles, you enclose the @import command within
the embedded <style> tags.
If you want to access a style sheet from within another style sheet, add the @import command to your style
sheet file. The @import command provides greater flexibility than the <link> tag when working with
multiple style sheets, but it has limited browser support.
Resolving style precedence and working with style inheritance

If you use different methods to create and apply styles to your Web site, precedence is determined in the
following order: 1) an inline style overrides any embedded style or external style sheet; 2) an embedded
style overrides an external style sheet; 3) an external style overrides the internal style rules set by the Web
browser; 4) any style attributes left undefined by any of three styles are left to the Web browser. The
precedence is only an issue when styles conflict.
Web pages have elements placed within other elements. You can display the relationship between elements
using a tree diagram as shown in Figure 7-10. An element that lies within another element is called a
descendant or descendant element. An element that contains another element is called the parent or parent
element. Using the principle of inheritance, styles defined for each parent tag are transferred to its
descendants. You can override this inheritance by specifying a different style for the element's descendants.
You can use the tree structure concept to better control how your styles are applied to your Web page.
Cascading Style Sheets provide ways of fine-tuning the context in which the selector is applied. If you want
to apply a style only to the direct descendant of a parent element, use the syntax: e1 >e2, where e1 and e2
are the names of HTML elements and e2 is directly below the e1.
Setting font and text attributes

The font-family attribute allows you to choose a font face for use in your Web page. CSS works with two
types of font faces: specific and generic. A specific font is a font that is actually installed on a user's
computer. CSS supports five generic font types: serif, sans-serif, monospace, cursive, and fantasy, as shown
in Figure 7-14.
A common way for specifying font sizes with HTML is to use the size attribute of the <font> tag. In CSS,
font sizes can be expressed as a unit of length, with a keyword description, as a percentage of the parent
element, or with a keyword expressing the size relative to the font size of the parent element. Absolute units
define the size based on one of the standard units of measurement. Relative units express the font size
relative to a size of a standard character. There are two standard typesetting characters: “em” and “ex”. A
pixel is the smallest element recognized by the monitor.
You can also use CSS font attributes to control spacing between letters, words, and lines of text. To align
text horizontally and vertically you can use the text-align attribute and vertical-align attribute. CSS allows
you to indent the first line of a paragraph using the text-indent attribute. CSS provides three attributes for
special text effects: text-decoration, text-transform, and font-variant. You can place individual text and font
attributes into the font attribute.
Working with color and background

There are many ways of defining color with CSS. You can use color names supported by HTML or use
RGB color values. By default, elements take on the background color of the Web page. To change the
background color of almost any element in your Web page, use the background-color style.
The background image has four attributes: the source of the image file, how the image is repeated in the
background, where the image is placed on the background, and whether the image scrolls with the display
window. By default, background images are tiled both horizontally and vertically behind the element until
the entire element is filled.
You can control the way the tiling occurs using the background-repeat style attribute. Background images
are placed in the upper-left corner of their element, and then repeated from there. You can move the
background image to a different location using the background-position style attribute. You can combine
the various attributes for backgrounds into the background attribute.
Working with list styles

CSS allows you to specify the types of labels attached to list items and how to position the labels with
respect to the label text. The list-style-type attribute allows you to choose the type of label to display
alongside text formatted with the <ul>, <ol>, or <li> tags. You can use contextual selector to create an
outline style for several levels of nested lists.
To use a label not included in the list-style-type values, you can create your own label with an image file
and the list-style-image attribute. If a browser does not support this attribute, or if the image file is not
available, the browser displays whatever label is indicated by the list-style-type attribute.
Lists items are treated by CSS as if they have an invisible box around them. The labels for the list items can
be placed either outside or inside this box. You can combine all of these attributes into the list-style
attribute.
Formatting hypertext links

You can use all of the style CSS attributes on hypertext. Hypertext also has an additional attribute that
normal text does not have: the condition of the hypertext link itself. A hypertext link can be in one of the
four states: the link's target has already been visited by the user; the link's target has never been visited by
the user; the link is currently being clicked by the user; the user's mouse pointer is hovering over the link.
CSS provides a different selector for each condition. There are four selectors: a:visited, a:link, a:active, and
a:hover. You can use a variety of CSS attributes to create different styles for each condition. Internet
Explorer supports all four of the conditions for hypertext; Netscape through version 4.7 does not support
the hover condition.
Working with ids and classes

A pseudo-class is a classification of an element based on its status or its use. The element itself, a hypertext
link, is called a pseudo-element. CSS2 introduces additional pseudo-classes, including the first-line pseudo-
class and the first-letter pseudo-class, which are used for formatting the first line and first letter of a block
of text, respectively.
The only pseudo-classes widely supported by browsers are the four hypertext link conditions. You can
create your own customized classes by adding the class attributes to your HTML tags. Class names cannot
contain blank spaces, and they are case-sensitive.
The id attribute applies an id to a specific element in the document. Unlike the class attribute, the id
attribute must be unique. The class and id attributes can be used with CSS to define styles for specific
content in your Web page without having to use inline styles.
Quick Quiz:
1. Which of the following classes was introduced by CSS2?
a. First-number pseudo-class
b. First-block-line pseudo-class
c. First-line pseudo-class
d. First-paragraph pseudo-class
2. Class names used with CSS are case- ______________.
3. True/False: The only pseudo-classes widely supported by browsers are the four hypertext link
conditions.
Answers: c, sensitive, True.
Working with container elements

A container identifies the start and ending points of the single entity. HTML supports two types of container
tags: <span> and <div>. The <div> tag is used to group blocks of text such as paragraphs, block quotes,
headings, or lists. These text blocks are known as block-level elements.
A style can be assigned to the container. The <span> tag is used to contain inline elements such as
individual letters, words, phrases, or inline images. You almost always include an id or class attribute with
the <span> tag.
Formatting block-level element boxes

With CSS, you can control the layout of a Web page by manipulating the size and location of block-level
elements. CSS can treat some HTML tags as block-level elements, such as <h1>-<h6> tags, <p> tag,
<blockquote> and <address> tags, list tags, individual list items, <div> tag, <body> tag, <hr> tag, and
<img> tag.
There are three elements of a block-level element: margin between the box and the parent element, border
of the box, and padding. Padding is the space between the box around the block-level element and the
border. CSS provides attributes you can use to control the appearance and behavior of each of these
elements.
There are four attributes that control the margin size: margin-top, margin-right, margin-bottom, margin-left.
Margin sizes can be expressed in units of length or as a percentage of the width of the parent element box.
Four attributes are used to control the size of the element's padding: padding-top, padding-right, padding-
bottom, and padding-left. CSS provides a variety of attributes for managing the box's border width, border
color, and border style. CSS allows you to place each block-element in a specific location on the Web page.
The float attribute places the block-level element on the left or right margin of the parent element.
13. Discuss the evolution of cascading style sheets.
14. Discuss the differences between the different style types.
15. Discuss the concept of style inheritance.
16. Discuss how you can use the CSS to format hypertext links.
17. Discuss the interaction between the layout of your pages and CSS.
HTML Tutorial 8
Programming with JavaScript
At a Glance

Instructor's Notes
 Lecture Notes
Introduction to JavaScript
Running JavaScript
Sending output to a Web page
Working with variables and data
Working with expressions and operators
Creating JavaScript functions
Working with conditional statements
Using Arrays
Working with loops

Instructor's Notes
Tutorial Approach
This tutorial explores the history, development and features of JavaScript language. The students will learn
about client-side programming using JavaScript. They will learn how to create a JavaScript program with
variables, data, expressions, and operators--and how insert it into an HTML file. They will know how to
hide the program code from older browsers that do not support JavaScript. Students will learn how to create
a JavaScript function and how to work with arrays, conditional statements, and program loops. Finally, they
will be able to create a Programmable Web page.
In the first session, students will learn about the development and features of JavaScript. They will also
learn how to create and insert a JavaScript program using the <script> tags. They will learn how to hide
JavaScript code from older browsers that do not support JavaScript. Finally, they will be able to create a
simple JavaScript program to send customized output to a Web page.
In the second session, students will learn some of the fundamentals of the JavaScript language. They will
learn how to declare variables and how to work with different data types supported by JavaScript. They
will also learn about expressions and operators and how to use them to change variable values. Finally,
they will create their own JavaScript function and use it in a program.
In the third session, students will learn how to create conditional statements using comparison, logical, and
conditional operators. They will learn how to create and use arrays in the JavaScript programs. They will
also learn how about program loops in order to run a command block repeatedly. Finally, they will create
programmable Web pages with dynamic content.
Lecture Notes
Introduction to JavaScript
Client-side programs solve many of the problems associated with server-side scripts. Computing is
distributed over the Web. A client-side program can be tested locally without first uploading it to a Web
server. Client-side programs are also likely to be more responsive to the user. However, client-side
programs can never replace server-side programs.
In 1995 programmers at Sun Microsystems developed the Java language. To simplify Java programming, a
team of developers from Netscape and Sun Microsystems created a subset of Java called JavaScript.
Internet Explorer actually supports a slightly different version of JavaScript called JScript. You should
always test your JavaScript programs with different Web browsers. The European Computer Manufacturers
Association (ECMA) developed the ECMAScript standard also called JavaScript.
Quick Quiz:
1. Which of the following is the script standard?
a. Java
b. ECMAScript
c. Jscript
d. VBScript
2. When you place JavaScript code directly into an HTML file, use the <________> tag.
3. True/False: You cannot hide the script from the browsers that do not support JavaScript.
Answers: b, script, False.
Running JavaScript
The Web browser runs a JavaScript program when the Web page is first loaded, or in response to an event
such as the user clicking a button on a Web page form or positioning the pointer over a hypertext link.
JavaScript programs can either be placed directly into the HTML file or they can be saved in external files.
Placing the program in an external file allows you to hide the program code from the user.
When you place JavaScript code directly into an HTML file, use the <script> tag. The <script> tag is a two-
sided tag that identifies the beginning and end of a client-side program. The src attribute is required only if
a program is placed in a separate file. The language attribute is needed to inform the browser which
interpreter to use with the client-side program code. The default language value is “JavaScript”.
Using comment tags you can hide the script from browsers that do not support JavaScript. JavaScript
supports similar comment tags, using a set of double slashes (//) at the beginning of a line that instructs the
browser to ignore the line. By combining the HTML comment tag and JavaScript comment symbols, you
can hide your JavaScript program from browsers that don't support the <script> tag.
Sending output to a Web page

JavaScript provides two methods to display text on a Web page: the document.write() and
document.writeln() method. These methods reflect the object-oriented nature of the JavaScript language.
The document.writeln() method differs from document.write() in that it attaches a carriage return to the end
of each text string sent to a Web page. It will affect the text appearance only when the text string is
formatted with the <pre> tag for which the browser recognizes the existence of carriage returns.
You can also include HTML tags in the text string to format the text and to insert images. The text string
specified by the document.write() method can be enclosed within either double or single quotation marks.
Most JavaScript commands and names are case-sensitive. Note that each JavaScript command line ends
with a semicolon to separate it from the next command line in the program.
Working with variables and data

A variable is a named element in a program that stores information. Variables can store information created
in one part of your program and use that information in another. There are restrictions to your variable
names: the first character must be either a letter or an underscore character (_); the remaining characters
can be letters, numbers, or underscore characters; variable names cannot contain spaces, and can be
reserved JavaScript words. Variable names are case-sensitive.
JavaScript supports four different types of variables: numeric variables, string variables, Boolean variables,
and null variables. A numeric variable can be any number. A string variable is any group of characters.
Boolean variables are variables that accept one of two values, either true or false. A null variable is a
variable that has no value at all.
To use a variable in your program, you need to create or declare it. In JavaScript, to declare a variable, you
use the var command or assign the variable a value. JavaScript does not provide a date data type, but allows
you to create a date object, which contains date information. JavaScript stores dates and times as the
number of milliseconds since 6 p.m. on December 31, 1969. All of the JavaScript date and time functions
are numerical calculations of these hidden numbers.
Working with expressions and operators

Expressions are JavaScript commands that assign values to your variables. Operators are the elements that
perform actions within the expression. Expressions are created using variables, values, and operators.
Arithmetic operators perform simple mathematical calculations. Some of the arithmetic operators in Figure
8-13 are also known as binary operators because they work on two elements in an expression.
There are also unary operators which work on only one variable. Unary operators include: the increment (+
+), decrement (--), and negation (-) operators. The increment operator can be used to increase the value of
variable by 1. The decrement operator decreases the value of variable by 1. Expressions assign values using
assignment operators. The most common assignment operator is the equals (=) sign. JavaScript provides
additional assignment operators that manipulate elements in an expression and assign values within a single
operation.
Another way of performing a calculation is to use one of the built-in Math methods. These methods are
applied to an object called the Math object. JavaScript command names are case-sensitive.
Creating JavaScript functions

You can use all of the JavaScript expressions and operators to create your own customized functions. A
function is a series of commands that performs an action or calculates a value. A function consists of the
function name, which identifies it; parameters, which are values used by the function; and a set of
commands that are run when the function is used.
Function names are case-sensitive. The function name must begin with a letter or underscore (_) and cannot
contain any spaces. A command block is a group of commands within a function that is delimited by curly
braces. There is no limit to the number of function parameters that a function may contain. The parameters
must be placed within parentheses, following the function name and the parameters must be separated by
commas.
To run a function, you insert a JavaScript command, or call a function. To use a function in the calculation,
place a return command at the end of the function command block. The function definition must be placed
before the command that calls the function in the HTML file.
Quick Quiz:
1. The group of commands set off by curly braces is called a ____________.
a. Function block
b. Method
c. Command block
d. Function
2. A(n) _____________ is a series of commands that performs an action or calculates a value.
3. True/False: The function definition must be placed before the command that calls the function in
the HTML file.
Answers: c, function, True.
Classroom Activity:
Have the class break into small groups and discuss how to create a JavaScript function. Do they remember
exactly how to do it?
Working with conditional statements

A conditional statement is one that runs only when specific conditions are met. To create a condition in
JavaScript, you need one of three types of operators: comparison operators, logical operators, or conditional
operators. A comparison operator compares the value of one element with that of another. This creates a
Boolean expression that is either true or false.
A logical operator connects two or more Boolean expressions. A conditional operator tests whether a
specific condition is true, and returns one value if the condition is true and a different value if the condition
is false. The IF statement runs a set of commands if the condition is true, but does nothing if the condition
is false. An If...Else statement runs one set of commands if the condition is true and another set of
commands if the condition is false.
Using Arrays
An array is an ordered collection of values referenced by a single variable name. To create an array you
should assign the name of the array variable using the keyword new. Specifying a size for an array is
optional. Once an array is created, you create values for each individual element in the array.
Each element in the array is identified by its index, which is an integer displayed between brackets. You can
use a variable in place of an index number. The most efficient way of populating an array is to specify the
array contents in the new Array() statement by enclosing the array elements in quotes and separating them
by commas.
Working with loops

A program loop is a set of instructions executed repeatedly. There are two types of loops: loops that repeat a
set number of times before quitting and loops that repeat as long as a certain condition is met. You can
create the first type of loop using a For statement.
The For loop allows you to create a group of commands to be executed a set number of times through the
use of a counter that tracks the number of times the command block has been run. You set an initial value
for the counter, and each time the command block is executed, the counter changes in value. When the
counter reaches a certain stopping value, the loop ends. For loops can be nested inside one another.
The While loop runs a command group as long as a specific condition is met, but it does not employ any
counters. As long as the condition is true, the commands in the command block are executed. The loop ends
when the condition became false. While loops can be also nested inside one another.
18. Compare server-side and client-side programming.
19. Discuss the differences between Java and JavaScript.
20. Discuss the features of binary and unary operators in JavaScript.
21. Review the various types of program loops.
HTML Tutorial 9
Working with JavaScript Objects and Events
At a Glance

Instructor's Notes
 Lecture Notes
Understanding form validation
Working with JavaScript objects
Working with object properties and methods
Managing events
Creating a calculated field
Working with a selection list and radio buttons
Working with check boxes
Controlling form submission
Instructor's Notes
Tutorial Approach
This tutorial explores the principles of form validation and the basic features of the object-based language,
JavaScript. The students will learn how to apply validation to the objects found on a Web page, how to use
objects, properties and methods in the Web form. They will learn about the JavaScript document object
model, and how to include the hierarchy when referring to an object. They will also learn how JavaScript
can be used to respond to user-initiated events, and how to work with event handlers in response to specific
events. Students will be able to create a calculated field that is updated as values in the form change, and
extract values from selection lists and radio buttons. They will study how to create dialog boxes to display
messages to the user. Finally, they will learn how to create a Web form with JavaScript objects and events
and validate this form before it is submitted to the Web server for processing.
In the first session, students will learn about the principle of form validation and compare client-side
validation with server-side validation. They will also explore object-based language features of objects,
properties and methods. They will learn the basics of the document object model (DOM) and about object
collections. Finally, they will be able to work with object properties and methods and use them in a
JavaScript program.
In the second session, students will learn how to manage events and how to use event handlers to run
JavaScript programs in response to specific events. They will also learn how to insert values into input
fields and how to navigate from one field to another. This session also shows how to create a calculated
field that is updated as values in the form change. Finally, they will learn how to extract values from
selection lists and radio buttons.
In the third session, students will learn how to work with check boxes and how to copy values from one
field to another. They will also learn how to use JavaScript to submit or reset a Web page form. They will
learn how to create dialog boxes to display messages to the user or to prompt the user for specific
information. Finally, they will learn how to reload a Web page using the location object.
Lecture Notes
Understanding form validation
Form validation is a process by which the server or the browser checks form entries and, where possible,
eliminates errors. On the Web, validation can occur on the client side or the server side. With server side
validation, the form is sent to the Web server for checking, as shown in Figure 9-2. If an error is found, the
user is notified and asked to resubmit the form.
In client-side validation, the form is checked as the user enters the information. If the user makes a mistake,
an immediate feedback is provided. A properly designed form reduces the possibility of faulty data entry.
The JavaScript language is widely used to provide client side-validation and reduce traffic between users
and the Web server.
Quick Quiz:
1. Which of the following languages is used to provide client-side validation?
a. HTML
b. CSS
c. CGI
d. JavaScript
2. Form ____________ is a process by which the server or the browser checks form entries and,
where possible, eliminates errors.
3. True/False: With a script built into a Web page, you can provide immediate feedback for users as
they enter data.
Answers: d, validation, True.

Working with JavaScript objects
JavaScript is an object-based language. Object-based languages manipulate objects by modifying properties
or by applying methods to an object. Objects are items that have a defined existence. Each object has
properties and methods. Properties describe its appearance, purpose, or behavior. Methods are actions that
can be performed with the object or to it.
In JavaScript, each object is identified by an object name. JavaScript arranges objects in a document object
model (DOM). The DOM defines the logical structure of objects and the way an object is accessed and
manipulated, as shown in Figure 9-4. To include this hierarchy when referring to an object, you include all
objects into the object name starting at the top of the document object and dividing each object name with
periods.
An object collection is an array of all objects of a particular type. An item from an object collection can be
referenced using the JavaScript name of the collection, and either an index number of the item in the
collection or the object's name. To assign the name to the object, you can use the name attribute.
Working with object properties and methods

Each object in JavaScript has properties associated with it. There are certain keywords for an object's
properties identification. You can change the value of a property, store the property's value in a variable, or
test whether the property equals a specified value.
You can use a JavaScript expression to assign a value to an object's property. You can use objects and
properties to modify your Web page and Web browser. Some properties are read-only, which means that
you can read the property value, but you cannot modify it. You can assign a property value to a variable in
your JavaScript program. You can use an object's properties in a conditional statement that changes how the
Web page behaves, based on the value of an object's property. Using objects, properties, and conditional
statements you can control the appearance of your Web page.
Methods are either actions that objects perform or actions you can apply to objects. To apply a method to an
object you need to specify the name of the object, the method and parameters. Parameters are values used
in applying the method to the object. Multiple parameters are separated with commas.
Managing events
Events are controlled in JavaScript using event handlers that indicate what actions the browser takes in
response to an event. Event handlers are created by adding an attribute to the HTML tag in which the event
is triggered. You need to assign the name of the event that occurs within the tag with JavaScript commands
that the browser runs in response to the event
.
When the input field becomes the active field in the form, a focus event is generated. The keypress, keyup,
and keydown events continuously occur as the user tabs into fields, types a new value, and then tabs out.
Each event can be captured using an event handler applied to the correct object in the Web page. The event
handlers do not apply to all JavaScript objects.
To run a command in response to a click event, you can create a hyperlink around the object to receive the
mouse click. When you use JavaScript to initiate an event, you are instructing the Web page to perform an
action that a user would normally do, such as moving the cursor to a specific field in the form.
Creating a calculated field

JavaScript treats the values of input fields as text strings. You cannot simply add the values of the input
fields because JavaScript will append the text strings rather than adding their numeric values. To convert a
text string to a numeric value, you must use the eval() function.
JavaScript does not round off values to nice digits. Calculated values are displayed as several digits. To
create a calculated field, you can use formulas within your function, including the Math.round() method
and the conditional operator.
Working with a selection list and radio buttons

There is no value property for a selection list itself, only for the options within the list. An array of selection
options starts with an index value of 0. SelectedIndex is the index number of the selected option. Figure 9-
25 shows some properties and methods associated with selection lists and selection options.
You can create a JavaScript reference for a radio button by identifying the name of the Web form, the name
assigned to the radio buttons, and the index of specific radio button. The first radio button has an index
value of 0; the second button has an index value of 1. There is no JavaScript object that refers to an entire
collection of radio buttons. There are only value properties for the individual radio buttons.
The “this” keyword is a JavaScript object name that refers to the currently selected object. If several
different objects on the Web page have access to the same function, the “this” keyword can pass along
information about the object that initiated the function.
Working with check boxes

You can use check boxes in your program and copy values from one field to another. To test whether a
check box has been selected, you should use the reference to the checked property of the check box object.
You can create a function to copy the value of one field to the corresponding field and run this function
whenever the user clicks the check box. You can also use check boxes for the form navigation. Figure 9-31
lists some of the properties, methods, and event handlers of check box objects.
Controlling form submission

When a user completes a form and then clicks the submit button, a submit event is initiated. JavaScript
provides the onsubmit event handler that allows you to run a program in response to this action. The
Submit event is associated with the form object. The onsubmit event handler must be able to override the
act of submitting the form if the form fails a validation test.
You need to specify the return function value for the onsubmit property of the <form> tag. The function
validates your form and returns a value of true or false. If the value is true, the form is submitted. If the
value is false, the submission is cancelled. If you do not include the return keyword, the browser submits
the form, whether or not it passes the validation test.
JavaScript supports three types of dialog boxes: alert, prompt, and confirm. An alert dialog box displays a
message, alerting the user to a problem. The prompt dialog box displays both a message and a text box. The
confirm dialog box displays a message along with OK and Cancel buttons. All dialog boxes have these
common features: a title bar, default value, OK button, and Cancel button. You can store the response of the
user for both the prompt and the confirm dialog boxes. If a user wants to reset the form, you can reload the
current page using the location object. The location object is the JavaScript object that references the
current page in the browser. To control the reset event use the onreset event handler and apply it to the
<form> tag.
Quick Quiz:
1. Which of the following dialog boxes displays both a message and a text box?
a. None of the below
b. Alert dialog box
c. Confirm dialog box
d. Prompt dialog box
2. When a user completes a form and then clicks the submit button, a(n) ______________ event is
initiated.
3. True/False: If you do not include the return keyword, when you specify the onsubmit even
handler, the browser submits the form whether or not is passes the validation test.
Answers: d, submit, True.
22. Discuss the features of object-based languages.
23. Discuss the differences between client-side and server-side validation.
24. Discuss the concept of a document object model.
25. Discuss how to manage events with event handlers.
26. Discuss how to control form submission.
DHTML Tutorial 1
Working with Dynamic Page Layout
At a Glance

Instructor's Notes
 Lecture Notes
Introduction to DHTML
Positioning Objects with CSS
Exploring the Document Object Model
Referencing Objects
Creating a Cross-Browser Web Site
Positioning Objects with JavaScript
Linking to an API File
Animating an Object
Controlling Layout for Different Monitor Resolutions
Using Path Animation
Instructor's Notes
Tutorial Approach
This tutorial explores the history and theory of DHTML. The students will learn how to arrange objects
using CSS positional attributes. They will learn how work with DHTML on different browsers. The
tutorial introduces an API. Students will use ActionScript to arrange objects and create an animation.
Finally, they will be able to create the opening Web page for the company's Web site using DHTML.
In the first session, students will explore the theory and history of DHTML. They will also learn how to
use CSS to control the placement of objects on a Web page. Students will become familiar with style sheet
attributes that control the appearance of objects. Finally, they will apply their knowledge to design the
layout of an opening page for a Web site.
The second session explores how DHTML is implemented in two popular browsers: Netscape and Internet
Explorer. Students will see how to detect which browser your user is running and how to create DHTML
code that works for both of the major browsers. They will also learn how to create an API — an external
file of customized commands and functions. Finally, students will see how to modify the style attributes of
your objects using JavaScript.
In the third session, students will link a Web page to the API file. They will then be able to learn how to
use the API to control the placement and movement of objects in the Web page. Students will also learn
how to create and control an animated sequence. Finally, they will learn how to adapt a Web page for
different monitor resolutions.
Lecture Notes
Introduction to DHTML
Web pages do not need to be static anymore. Back in the early days of HTML development, Web page
authors had no choice but to create completely static Web pages. What this meant was that once the page
had loaded into the browser, its content, navigation, and design were fixed in place. Early dynamic
presentations used applets, small programs that the Web browser would retrieve and install along with the
Web page. The problem with applets is that additional software is required to create and run them. Starting
with the 4.0 versions of Netscape and Internet Explorer, a new approach was offered, in which dynamic
elements were supported by the HTML code itself. This collection of enhancements are known as dynamic
HTML, or DHTML.
DHTML involves the interaction of three elements: the HTML code, Cascading Style Sheets, and a
scripting language, usually JavaScript or VBScript. The combination of these three elements allows a great
deal of user interaction and page control.
Positioning Objects with CSS

CSS1, the very first Cascading Style Sheet specification, helped format the content on a Web page in terms
of its appearance, for instance, text size, color or font. An extension to CSS1, called CSS-Positioning, or
CSS-P, added the ability to control the layout of the page and align your object where you want it. CSS-P
later was absorbed into the second Cascading Style Sheet specification, CSS2.
To control the position, the position style is used with the absolute, relative, fixed, or static position type. The position
attributes indicate the positions of the object’s left, top, right, and bottom edges. You can define coordinates
using absolute or relative units or as a percentage of the height of the parent element. Since we are working
with Web pages, the default unit of measure is pixels. If you have done any work with placing Web images
on HTML pages, you’ll know that it doesn’t take long to get a fairly good grasp of what pixel measurement
is like. Keep in mind that the right and bottom attributes are not supported by all browsers and are
redundant if the position of the other edges of your object are already specified.
An absolute position will place the object at a defined coordinate in the document, regardless of where it is
“supposed” to be in the document. Instead, the absolute position of any element is always determined in
relation to the parent object in which the element is contained. A table cell may be that parent object, but it
is likely to just be the entire browser window itself. A relative position will place the object at a point
relative to where it would naturally be displayed. Be careful with this attribute. It will display differently
depending on the browser or resolution, since it will always calculate the new position based on the old
one. It is best used when positioning a few objects in relation to each other. The fixed position value places
and keeps the object at a fixed location in the display window, to the extent that the object won’t even scroll
with the rest of the page. However, fixed positioning is not yet supported by the major browsers. The static
position value simply lets the browser place the object in its natural position in the flow of the document.
In HTML, no object can be placed on top of any other object. Text cannot overlap an image or other text.
However, with DHTML, not only do objects overlap, but you have control over which should overlap what
and where the overlapping should occur. You can hide and bring back an object with CSS by using the
visibility style with the visible, inherit, or hidden type. Setting the value to visible will make the object
visible on the page. Setting it to inherit will ensure the object takes on the visibility property of its parent
element. This is the default type. The hidden value causes the browser to hide the object, but though
invisible, the object’s hidden presence is still felt in terms of the layout of the other page elements. If you
want to hide the object and have it take up no space on the page, use the display attribute with the value
“none.” Below Netscape 6.0 and Explorer 4.0, once a browser has loaded a page, it will not change the
display attribute—even if you have a script to change it.
Sometimes the text in an object takes up more space than the object allows. To specify how the browser
should handle extra content, use the style overflow element with the following types: visible, hidden, scroll,
or auto. To clip out a rectangular window of displayed content from a larger object, the clip style element is
used and its edges are set with absolute positioning.
Quick Quiz:
1. Which of the following positions places the object at a defined coordinate in the document,
regardless of the object’s natural location in the flow of the document?
a. Static
b. Fixed
c. Relative
d. Absolute
2. The ______________ position value places the object in its natural position in the flow of the
document, as determined by the Web browser.
3. True/False: All browsers support the fixed attribute value.
Answers: d, static, False.
Exploring the Document Object Model

If you are going to modify the elements of either a document or the browser itself, you need to be able to
reference those elements. The document object model or DOM allows you to systematically access the
contents and properties of the Web document and the Web browser. Unfortunately, there is no
standardization in the DOMs that must be used. Different browsers and browser versions support different
document object models. This can make your life as a DHTML programmer a little bit tricky.
The first document object model for Web pages was the basic model, or the DOM Level 0, and was
introduced back in Netscape Navigator 2.0. The basic model contained the window, document, and
navigator objects, basic objects used in many JavaScript programs; however, once the page was loaded into
the browser, the objects could not be changed. The development of a more comprehensive DOM was split
between Netscape and Internet Explorer’s independent paths. Netscape 3.0 introduced rollovers, a hugely
popular Web innovation in which an image source is switched in response to the user hovering the mouse
pointer over it. Netscape 4 also introduced the concept of layers, in which page content could be placed in
separate “containers” whose properties could be manipulated almost as if they were separate documents.
Explorer 4.0 added CSS attributes to the DOM, making all elements of a Web page finally modifiable
before and after a page was loaded. All of these advancements were great, but if you wanted your code to
be truly accessible to users, you could give no thought to using them because the different DOMs of the
two browsers remained incompatible.
The first attempt to set the specifications for a document object model and thereby reconcile the two
approaches, DOM Level 1, came out while Netscape and Internet Explorer were running version 4.0 of
their browsers. Event capture was included in the specifications for DOM Level 2. At the time of this
writing, DOM Level 3 was being drafted, and should further help to bring the two browsers together so
that dynamic Web page design can be (finally) fully taken advantage of. In the meantime, programmers
generally try to satisfy requirements of Netscape 4, Explorer 5 and DOM Levels 1 and 2. Something you
should know is that, unlike later versions of Explorer, Netscape 6 does not simply extend the DOM of
Netscape 4. They support completely different DOMs and should be treated like two different browsers,
adding to the messiness of the current situation. And remember that different operating systems will
change the way dynamic Web pages display, even in the same browser version. So be ready to do a lot of
testing!
All DOMs organize objects into a hierarchy or document tree. In this model, the topmost object is the
window object representing the browser window itself and then down into objects within each level. This
ordered hierarchy of objects allows programs to easily reference elements within the Web page and Web
browser. The W3C DOM consists of a hierarchy of nodes instead of objects, referred to as a node tree. A
node is more inclusive in definition, namely referring to anything associated with the Web page, from tags
to comments to text.
Referencing Objects
You can use an array of objects called an object collection to access particular elements in the DOM. To
reference an object collection use the syntax, document.collection, where collection is replaced with the
name of the collection.
To reference a specific element within a collection, you can use either an index number that represents the
position of that element in the object array or the value of the attribute assigned to that element. Just keep in
mind that the index number of the first object in a collection is “0” not “1.” You can reference any object
including nested objects. You can also create object collections based on the type of HTML tag. Whether
creating object collections of a particular type or locating elements that have a specific id attribute, each of
the techniques relies on the processor to search through the node tree, a practice that can sometimes be
inefficient.
A familial reference utilizes the parent/child/sibling relationships inherent in the W3C DOM’s node tree
and allows more flexibility. In this approach, all nodes are referenced based on their relationship with one
node designated as the context node.
If you want to store information about a node in the node tree, create a reference to a specific object and the
node’s name, type, or value will be returned. Element nodes, such as <title> or <p>, do not have values. If
you want to extract the text contained within an element node, you have to either reference the nodeValue
property of that element’s text node or use the innerText property.
Creating a Cross-Browser Web Site

When developing a Web site, you’ll want to run code that can be interpreted by that browser without
generating an error message in the process. Therefore you’ll have to determine what DOM the user’s
browser will support. There are two approaches you can take: browser detection or object detection.
Browser detection can allow you to check what browser and OS a user is running and then send them the
appropriate code snippets supported by that environment. Information about the browser is stored in the
navigator object. To retrieve the browser’s name, you use the expression: navigator.appName. For
Netscape, this expression returns the value “Netscape” while Internet Explorer will return “Microsoft
Internet Explorer.” The browser version does not get rendered in an easy-to-read text string like that. The
expression navigator.appVersion returns the version number with additional text that describes features of
the version and also happens to be fairly unreliable. There are other ways to try and get the valid browser
version, but they happen to be fairly complicated.
Most Web page developers give up on browser detection and instead rely on object detection. With object
detection, you test which reference names the browser recognizes to determine which document object
model it is running. Once you know which DOM is being employed, you can use deductive reasoning to
figure out the browser.
Once the capabilities of the browser have been determined, your next task is to figure out a strategy for
cross-browser accessibility. One strategy, called page branching, creates separate pages for each browser
and version along with an initial page that gets sent to everyone. When the user opens the initial page, a
script determines the capability of the user’s browser and automatically loads the appropriate page. Of
course, any changes to your site must then be relayed across each version of each page, a time-consuming
process. A second cross-browser strategy is to use internal branching, in which each piece of DHTML
code is enclosed in an if...else statement that handles each browser and version condition. This is fine if the
amount of DHTML coding on your page is minimal, but if there’s a lot of code, this can get complicated
and messy.
Many Web developers apply a third cross-browser strategy: they create an application programming
interface. An application programming interface or API is an external text file that contains custom
commands and functions. These customized functions are written to resolve any cross-browser differences.
When you create a Web page, you link it to the API and use commands from the API file in your Web page
rather than placing the code within the HTML file on your page. Then the page is assembled on its way to
the client with the browser-correct code replacing the general call in the HTML document. This is a very
neat approach in that all the conditions of browser compatibility are collected separate from the content and
so are uninvolved in general Web site changes. Also, changing a function in the API will have sweeping
changes across the Web site wherever that function is called.
Classroom Activity
After you have finished discussing “Creating a Cross-Browser Web Site,” break your students into three
groups to discuss three DOM models (one model per each group) and then have one person from each
group present to the rest of the class what they learned about these models.
Positioning Objects with JavaScript

JavaScript’s positioning properties work much the same way as the CSS positioning attributes, though of
course the document object models express the attributes each in their own way. The main difference is that
in the Netscape 4 DOM, style attributes are defined using the form object.attribute, where object is an
object on the Web page, and attribute is the name of the style attribute. In the Internet Explorer and W3C
DOM, this same reference is object.style.attribute. Also, the data type can differ, some returning a text
string and others a numerical value.
JavaScript can control the way objects overlap on the page. JavaScript uses the zIndex property, which
works the same way as the z-index attribute in CSS. Netscape 4 also lets you reference objects stacked on
top or underneath the current object, but the other DOMs don’t allow that. All three DOMs use the
visibility property to show or hide objects. Unfortunately, while the browsers use the same property name,
they use different property values to set the attributes.
The CSS attributes that set the dimensions of an object on the page can also be controlled using JavaScript.
The Netscape 4 DOM differs from the Internet Explorer and W3C DOMs in how it manages a clipping
rectangle. The Netscape 4 DOM places information on the dimensions of the clipping rectangle in six
properties (clip.top, clip.right, clip.bottom, clip.left, clip.width, and clip.height) while the Internet Explorer
and W3C DOMs combine top, right, bottom, and left into a single property: style.clip. When a clipping
rectangle is applied to an object, you can manage the content overflow using the object.style.overflow
property (as long as you’re not in the Netscape 4 DOM which simply does not manage overflow).
Linking to an API File

The purpose of the API file is to remove much of the complexity involved in creating a dynamic page that
is compatible across a range of browsers. Once the API is written, you can use the placeIt(), shiftIt(), and
the other functions you created without worrying about the cross-browser problems. You have to create a
link to the file before you can use the commands from the API file in your HTML file. To create this link,
add <script src=”URL”></script> to the head section of the HTML file, where URL is the URL of the
document containing the external JavaScript code. If you have other <script> tags in your document’s
head, remember that Netscape 4 will want your API link last.
Animating an Object
You can move objects with JavaScript by tracking the X and Y coordinates of the object and shifting them
accordingly. However, if you do not specify, the movement will be less an animation than a jump,
executing the code faster than the eye can see. So somehow each step of the movement will have to be
delayed. JavaScript does not provide a pause command to temporarily halt the execution of program code.
Instead, you can have JavaScript execute a command after a specified time delay. The method for doing
this uses the setTimeout command. There is no limit to the number of time-delayed commands the browser
can process but you will need some way of separating one time-delayed command from another. The
browser does this by assigning each command a unique id. You can store the value of this id, if you want to
interact with the command at a later point in the program.
Another way of timing your commands is to have the browser repeatedly run the same command at
specified intervals. The id variable is not necessary unless you need to cancel the command at some point
in time. If you don’t need the id, or you only have one time interval command running, you can use the
setInterval(“command”,interval) command. An important point to remember about the setTimeout() and
setInterval() methods is that the browser will not wait for the time-delayed command to be run before
moving on and processing the next piece of code.
When creating an animation, you will probably want each function to wait until it is finished before moving
on to call the next one in sequence. This is a common technique when doing animation in DHTML. It
ensures that your effects are presented in the proper order.
Controlling Layout for Different Monitor Resolutions

With the Netscape 4 and W3C DOMs, it is easy to determine the size of the display window. For both
models, the width and height of the display window are stored in the following properties:
window.outerWidth
window.outerHeight
These values include the display window and the browser’s toolbars, menus, and status bars. To leave out
the other browser features and determine only the size of the display window, we use the properties:
window.innerWidth
window.innerHeight
The problem with Internet Explorer is that is that no version of it supports these properties. For Internet
Explorer 4.0 or Internet Explorer 5.0, the closest approximation is:
document.body.clientWidth
document.body.clientHeight
These properties actually return the width and height of the Web page body. This is a fine way to get at
what you are looking for, but unfortunately, Internet Explorer 6.0 does not support the clientWidth and
clientHeight properties for this object. With the Internet Explorer 6 DOM, the most reliable approximation
of the document window without causing rampant error messages in other browsers are the properties:
document.documentElement.offsetWidth
document.documentElement.offsetHeight
You can add functions winWidth() and winHeight() that calculate the size of the document window to your
API. In general though, be prepared to spend a lot of time and energy if you want to work with very
specific dimensions and positioning in the document window. You might just find it better to work with
approximations.
Using Path Animation

Linear animation is the animation which takes place over a straight line, going from one point to the next.
Another type of animation is path animation, in which each set of x- and y-coordinates in the path is
entered into an array and the animation moves from point to point in a path that can be any shape. This does
mean you calculate all of the coordinate positions in your path. Once you have the values entered into two
arrays, you retrieve the coordinates, one coordinate at a time, until the entire arrays have been read. For
more interesting path animations, you can add a third array containing the delay times between each
movement, rather than always using the same delay time. Path animation may be more complicated than
linear animations, but it expands your animation possibilities.
Quick Quiz:
1. Which of the following JavaScript commands is used to specify time delay?
a. setTimeout
b. Delay
c. setDelay
d. setTime
2. ____________ animation takes place over a straight line, going from one point to the next.
3. True/False: In creating an animation, each function calls the next one in sequence after it is
finished.
Answers: a, Linear, True.
Classroom Activity
After you have finished discussing “Using Path Animation,” break your students into four groups. One
group should ask another group about positioning objects with JavaScript (2-3 questions). The third group
should ask the fourth group about animating objects (2-3 questions). Give 3 minutes to discuss these
questions in groups. One person from each group that asked the questions should correct the answers, if
something is wrong, or present their own answers.
27. Discuss the concept of COM.
28. Discuss how to reference objects.
29. Discuss advantages of API.
30. Compare linear animation and path animation.
31. Discuss how to create Web pages with DHTML.

At A Glance: Instructor's Notes

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

At A Glance: Instructor's Notes

Hochgeladen von

Copyright:

Verfügbare Formate

Teacher Notes for

 Tutorial Discussion Questions

HTML: the language of the Web

Creating an HTML Document

Answers: a, attribute, False.

Creating headings, paragraphs, and lists

Creating character tags

Adding special characters

Inserting horizontal lines

 Tutorial Discussion Questions

Web page structures

Creating links among documents

Linking to documents in other folders

Linking to documents on the Internet

Linking to other Internet objects

Answers: a, separator, False.

3. Discuss the differences between an absolute and relative pathname.

4. Discuss how to create hypertext links to various Internet resources.

 Tutorial Discussion Questions

Answers, d, sixteen, False.

Specifying a color scheme for your page

Inserting a background image

Answers: b, tiling, True.

Working with GIF files

Working with JPEG files

Controlling image placement and size

Understanding image maps

Defining image map hotspots

6. Discuss how to create a color schema for a Web page.

7. Discuss the features of image maps.

8. Discuss the concept of hotspot.

 Tutorial Discussion Questions

Defining a table structure

Modifying the appearance of a table

Working with table and cell size

Spanning rows and columns

Applying a color scheme to a table

Designing a page layout with tables

Using inline styles

Creating an embedded style

Using an external style sheet

Resolving style precedence and working with style inheritance

Setting font and text attributes

Working with color and background

Working with list styles

Formatting hypertext links

Working with ids and classes

Answers: c, sensitive, True.

Working with container elements

Formatting block-level element boxes

14. Discuss the differences between the different style types.

15. Discuss the concept of style inheritance.

 Tutorial Discussion Questions

Sending output to a Web page

Working with variables and data

Working with expressions and operators

Creating JavaScript functions

Answers: c, function, True.

Working with conditional statements

Working with loops

20. Discuss the features of binary and unary operators in JavaScript.

21. Review the various types of program loops.

 Tutorial Discussion Questions