Download Chapter 2

The Web Wizard's Guide to DHTML and CSS
by Steven Estrella
Answers to Even-Numbered Questions
Chapter 1
2. What is “containment” and why is it important to web authors?
Answer: The practice of not closing tags began with HTML 2 and continued through
HTML 3.2. HTML version 4, however, requires that tags be closed so that HTML
content may be “contained.” Containment makes it possible for the web browser to know
precisely where content contained by an element begins and ends. Without containment,
style sheets do not work properly because the web browser is unable to determine exactly
which content is to be styled.
4. Explain the structure and give examples of a typical CSS rule.
Answer: A style rule consists of a selector and a set of one or more declarations
surrounded by curly braces. A declaration is the combination of a property and its
values. Use a colon between the property and its values. Use a semi-colon at the end of
each declaration.
p { font-family: arial, sans-serif; font-size: 90%; }
b { color: maroon; }
a: hover {color: blue; background: yellow; }
6. What are the most common applications of pseudo-classes and pseudo-elements?
Answer: Pseudo-class selectors can identify link content based on the state of the link.
You may use pseudo-class selectors to produce text rollover effects with nothing more
than CSS. Pseudo-element selectors can identify content such as first-letter or first-line
based on its position within an element. Pseudo-element selectors are often used to
produce the drop-cap effect.
8. Why are inline style sheets discouraged by the W3C?
Answer: The W3C discourages this approach, however, because it mixes style with
structure in a fashion reminiscent of the old <font> tag. Inline style sheets, however, are
useful when you wish to override a style rule found in an external or internal style sheet.
10. To apply style rules consistently to a large site with hundreds or thousands of pages,
which type of style sheet would you use?
`Answer: External style sheet
Chapter 2
2. What is the z-index stacking order?
Answer: The z-index property allows elements to stack on top of one another. The higher
the z-index value, the closer the object appears to the viewer.
4. Define Dynamic HTML and explain why it is important in web development.
Answer: Dynamic HTML is a term that describes the use of HTML 4, CSS, and
JavaScript. HTML 4 with CSS does a nice job of precisely describing the content of a
web page to the web browser. By adding a scripting language like JavaScript, it becomes
possible to dynamically alter that content.
6. What is the DOM?
Answer: The Document Object Model (DOM) is a hierarchical model to represent the
objects created by a web browser. In October 2000 the World Wide Web Consortium
(W3C) published its second edition of a standard DOM called DOM1. The latest Web
browsers, including Netscape Navigator 6 (NN6), Internet Explorer 5 for Macintosh
(IE5Mac), and Internet Explorer 5.5 and later (IE5.5, IE6), use DOM1. The older
browsers, such as Netscape 4 and Internet Explorer 4, use their own proprietary DOMs.
These browsers are quickly falling into disuse because they don't support the current
W3C standard DOM and their support for CSS is inconsistent.
8. Which HTML attribute is essential in uniquely identifying objects on a Web page?
Answer: The id attribute.
10. What’s the difference between z-index and zIndex?
Answer: Use “z-index” in style sheets when you are adding stacking order information to
the style attributes of elements. Use “zIndex” when making changes to the stacking order
using JavaScript. The different spellings can be confusing so be aware of the difference.
Almost all style properties that contain hyphens, such as z-index and font-size, are
expressed in JavaScript in interCap form (zIndex and fontSize).
Chapter 3
2. What attribute must be added to tags to make it easier to access them in DOM1?
Answer: The id attribute must be added to HTML elements.
4. What is a node?
Answer: When a Web browser renders a document, it creates objects in memory to
represent the many parts of the document. DOM1 provides a model for how the objects
of a web page relate to one another. The term for an object in DOM1 is “node.”
6. What is a sibling node?
Answer: Two nodes at the same hierarchical level. In the following example, the nodes
c1 and c2 are sibling children of "mom" the parent node.
<p id="mom">This is <b id="c1">child 1</b>. This is <b id="c2">child 2</b>. Get the
idea?</p>
8. What method is used to add a new child node to an existing node?
Answer: appendChild()
10. Describe the procedure for adding a new element node to an existing node.
Answer: Use the emptyNode() function to the existing node of any child nodes. Then
store the desired node in a variable (e.g. theNode). Create a variable to hold the new
element node (e.g. newElem). Use the document.createElement() method to create a new
element node and store it in a variable (e.g. newNode). Then use the appendChild()
method to add the new node to the existing one (e.g. theNode.appendChild(newNode) ).
Chapter 4
2. Are code libraries structured like HTML documents?
Answer: No. A code library is a simple text file with no HTML tags. Each function or
variable is typed into the file and the file should be saved with the extension .js to
indicate a JavaScript library file.
4. If your page requires code that is not in the code library, where do you put it?
Answer: Additional functions and variables may be loaded with the main document by
including them within a <script> tag as seen in the simple example below. In this
example, a code library is loaded first, then additional code is loaded using a second
<script> tag (one without an src attribute). In this example, a value is stored in a global
variable and then retrieved when the visitor clicks a link.
<html><head><title>Using a library</title>
<script src="codelibrary.js" type="text/javascript"
language="Javascript"></script>
<script type="text/javascript" language="Javascript">
var stuffToSay("This text is in a variable.");
</script>
</head><body>
<a href="javascript:alert(stuffToSay);">
Click here</a>.</body></html>
6. How can you simulate a button using nothing more than text?
Answer: Use a style sheet to add background and border attributes to a <div> containing
text. Use onmouseover and onmouseout event handlers to change border and background
attributes as desired to simulate the rollover effect one might see on a button. Later in this
book you will also learn how to change the cursor as needed.
8. What method does Netscape use to calculate available window width?
Answer: Netscape browsers use window.innerWidth.
10. Does the W3C provide a standard way to measure available window width and
height?
Answer: No. The W3C leaves such environment management matters to the
manufacturer of each user agent (Web browser, handheld device, PDA, etc.)
Chapter 5
2. Which visibility technique is most often used in dropdown menus?
Answer: Changing the value of the CSS visibility property.
4. Which visibility technique is most often used in sliding menus?
Answer: Changing the values of the CSS left and top properties for a positioned element.
6. List four common cursor types.
Answer: auto, crosshair, default, help, move, pointer, text, wait
IE5.x on Windows doesn't yet support the W3C standard pointer cursor but the
proprietary IE hand cursor may be used instead.
8. What are the three most common values for the display property?
Answer: none, block, inline
10. What method of the window object is used to repeatedly call a function after a given
delay?
Answer: The setTimeout() method of the window object may be used with a loop to
repeatedly call a function after a given delay. An alternative is to use the setInterval()
function which does not require a loop.
Chapter 6
2. How long does an event live?
Answer: The event object begins its existence the moment the event occurs. The event
object continues to exist as long as any script is processing a reference to the event. For
example, an onclick event handler may call a function that calls another function that in
turn calls another function. The click event in this case would die only after the last
function has executed all its statements. Only one event can exist at a time, so if the
visitor clicks one button then clicks another, the response to the second button must wait
until the first button finishes its work.
4. In which direction did Netscape 4 events propagate?
Answer: Netscape 4 pioneered the concept of event propagation. Each event begins life at
the window object level. The event then continues down the object hierarchy until it
reaches its target.
6. Do events propagate/bubble in one or two directions in the W3C event model?
Answer: Two.
8. In the W3C event model, what object reference must be passed to a function to allow it
to respond to events? When it receives that reference, what is the parameter variable
name most commonly used to contain it?
Answer: event and evt
10. A web page to assess the visitor’s ability to assemble a product would likely use what
technique?
Answer: Drag and drop.
Chapter 7
2. What is the highest decimal number possible for a color value?
Answer: 255.
4. What are the possible border styles?
Answer: none, dotted, dashed, solid, double, groove, ridge, inset, and outset
6. What CSS syntax is used to replace a list item bullet with an image file?
Answer: You may assign the url of an image file to the list-style-image property as seen
below.
#theList {list-style-image:url(images/bluetriangle.gif);}
8. In contemporary browsers, is it still necessary to wrap an <img> tag in an <a> tag in
order to produce a rollover effect?
Answer: No.
10. What syntax is needed to determine how many <button> tags there are on a page?
Answer: The syntax below will obtain the number of button elements and store that
number in a variable.
var btns = document.getElementsByTagName("button").length
Chapter 8
2. When is a collapsible menu a better choice than a dropdown menu?
Answer: With many links, a collapsible menu preserves screen real estate. Those with
larger monitors may wish to expand all the menus and see all choices available. Those
with smaller monitors may close and open menus as desired to fit the available space on
the screen.
4. How can you create side-by-side columns on a web page without using the <table>
tag?
Answer: Use two positioned <div> tags.
6. What is the standard pixel grid for SVGA?
Answer: 800 pixels wide by 600 pixels tall
8. Explain the acronyms for XML, XHTML, SMIL, and SVG.
Answer: XML = Extensible Markup Language
XHTML = Extensible HyperText Markup Language
SMIL = Synchronized Multimedia Integration Language
SVG = Scalable Vector Graphics
10. What are the potential benefits of CSS3?
Answer: CSS3 is currently in development but the early proposals promise to assist Web
developers with columns and fonts. The current technique for downloadable fonts
available in CSS2 is difficult to use so a pressing need exists for CSS3 to create a better
downloadable font technology. Support for color profiles is also planned to help improve
the consistency with which photographs appear on various browsers and platforms.