ptg
}
}
</script>
In this case, when the page loads, I retrieve the link by its ID and then bind a new anony-
mous function to it that calls the original popup() function. Instead of hard coding the
URL, I pass this.href to the popup() function so that it opens the URL in the link.
Using a library like jQuery can make things even easier. Suppose you want any link tag
with the class popup to open a new window with the URL associated with the link.
Here’s the code:
<script type=“text/javascript”>
$(document).ready(function () {
$(“a.popup”).click(function (event) {
var mywindow = window.open(this.href, ‘newwindow’,
‘height=200,width=400’);
event.preventDefault();
});
});
</script>
When the page is ready, I apply the same onclick handler to all the links on the page
with the class popup. The anonymous event handler opens a new window with the URL
stored in this.href, which returns the URL in the link that the user clicked on. It then
calls the preventDefault() method on the link, which is a sort of fancy way to return
false provided by jQuery. It’s used instead of just returning false because it doesn’t dis-
rupt other event handlers that may be fired in addition to this one.
Summary
If your head is hurting after this lesson, you’re probably not alone. Although the basic
concepts behind the use of frames are relatively straightforward, their implementation is
somewhat harder to come to grips with. As a result, the best way to learn about frames is
by experimenting with them.
In this lesson, you learned how to link a document to a new or existing window. In addi-

tion, you learned how to create framesets and link them together by using the tags listed
in Table 17.5.
526
LESSON 17: Working with Frames and Linked Windows
Download from www.wowebook.com
ptg
Summary
527
17
The Downside of Frames
In this lesson, I mentioned a few drawbacks of frames here and there. I want to talk
about them one more time now that the discussion of frames is coming to a close.
The problem with frames is that they change the concept of a web page.
Unfortunately, many mechanisms that users are familiar with rely on the original
concept. So when it comes to navigation, bookmarking pages, or using the browser’s
Back button, frames can cause confusion. There are also issues when it comes to
printing, and frames can cause problems on devices with small screens, like mobile
phones.
The point here isn’t to say that frames should never be used, but rather that you
should think about what you’re trying to accomplish and decide whether another
approach wouldn’t work better. Frames can combine content from multiple sites into
one, but in many cases, JavaScript can achieve similar effects. My advice is to use
frames sparingly.
TABLE 17.5 New Tags Discussed in Lesson 17
Tag Attribute Description
<base target=“window”> Sets the global link window for a
document.
<frameset> Defines the basic structure of a
frameset.
cols Defines the number of frame

columns and their width in a frame-
set.
rows Defines the number of frame rows
and their height in a frameset.
<frame> Defines the contents of a frame
within a frameset.
src Indicates the URL of the document
to be displayed inside the frame.
marginwidth Indicates the size in pixels of the
margin on each side of a frame.
marginheight Indicates the size in pixels of the
margin above and below the con-
tents of a frame.
scrolling Enables or disables the display of
scrollbars for a frame. Values are
yes, no, and auto.
noresize Prevents the users from resizing
frames.
Download from www.wowebook.com
ptg
TABLE 17.5 Continued
Tag Attribute Description
frameborder Indicates whether the frameset dis-
plays borders between frames.
longdesc Specifies a URL that provides a
longer description of the contents of
the frameset. Used with nonvisual
browsers.
name Assigns a name to the frame for tar-
geting purposes.

<iframe> Defines an inline or floating frame.
src Indicates the URL of the document
to be displayed in the frame.
name Indicates the name of the frame for
the purpose of linking and targeting.
width Indicates the width of the frame in
pixels.
height Indicates the height of the frame in
pixels.
marginwidth Indicates the width of the margin in
pixels.
marginheight Indicates the height of the margin in
pixels.
scrolling Enables or disables the display of
scrollbars in the frame. Values are
yes, no, and auto.
frameborder Enables or disables the display of a
border around the frame. Values are
1 and 0.
align Specifies the alignment of the frame
relative to the current line of text.
Values are
left, right, middle,
top, and bottom (also absbottom,
absmiddle, texttop, and baseline
in Internet Explorer).
<noframes> Defines text to be displayed by web
browsers that don’t support the use
of frames.
528

LESSON 17: Working with Frames and Linked Windows
Download from www.wowebook.com
ptg
Workshop
As if you haven’t had enough already, here’s a refresher course of questions, quizzes, and
exercises that will help you remember some of the most important points you learned in
this lesson.
Q&A
Q Is there any limit to how many levels of <frameset> tags I can nest within a
single screen?
A No, there isn’t a limit. Practically speaking, however, the available window space
starts to become too small to be usable when you get below about four levels.
Q What would happen if I included a reference to a frameset document within a
<frame> tag?
A Most browsers that support frames handle such references correctly by treating the
nested frameset document as a nested <frameset>. In fact, this technique is used
regularly to reduce the complexity of nested frames.
One limitation does exist, however: You cannot include a reference to the current
frameset document in one of its own frames. This situation, called recursion,
causes an infinite loop.
Quiz
1. What are the differences between a frameset document, a frameset, a frame, and a
page?
2. When you create links to pages that are supposed to load into a frameset, what
attribute makes the pages appear in the right frame? (Hint: It applies to the <a> ele-
ment.)
3. When a web page includes the <frameset> element, what element cannot be used
at the beginning of the HTML document?
4. What two attributes of the <frameset> tag divide the browser window into multi-
ple sections?

5. What attribute of the <frame> tag defines the HTML document that first loads into
a frameset?
Workshop
529
17
Download from www.wowebook.com
ptg
Quiz Answers
1. A frameset document is the HTML document that contains the definition of the
frameset. A frameset is the portion of the frameset document that is defined by the
<frameset> tag, which instructs the browser to divide the window into multiple
sections. A frame is one of the sections, or windows, within a frameset. The page
is the web document that loads within a frame.
2. The target attribute of the <a> tag directs linked pages to load into the appropriate
frame.
3. When a web page includes the <frameset> element, it cannot include the <body>
element at the beginning of the page. They’re mutually exclusive.
4. The cols and rows attributes of the <frameset> tag divide the browser window
into multiple frames.
5. The src attribute of the <frame> tag defines the HTML document that first loads
into the frameset.
Exercises
1. Create a frameset that divides the browser window into three sections, as follows:
n
The left section of the frameset will be a column that spans the entire height
of the browser window and will take up one-third of the width of the browser
window. Name this frame contents.
n
Divide the right section of the frameset into two rows, each taking half the
height of the browser window. Name the top section top and the bottom sec-

tion bottom.
2. For the preceding frameset, create a page that you will use for a table of contents
in the left frame. Create two links on this page, one that loads a page in the top
frame and another that loads a page in the bottom frame.
530
LESSON 17: Working with Frames and Linked Windows
Download from www.wowebook.com
ptg
LESSON 18
Writing Good Web
Pages: Do’s and Don’ts
You won’t learn about any HTML tags in this lesson, or how to convert
files from one strange file format to another. You’re mostly done with the
HTML part of web page design. Next come the intangibles. These are the
things that separate your pages from those of a designer who just knows
the tags and flings text and graphics around and calls it a site.
Armed with the information from the lessons so far, you could put this
book down now and go off and merrily create web pages to your heart’s
content. However, if you stick around, you will be able to create even bet-
ter web pages. Do you need any more incentive to continue reading?
This lesson includes hints for creating well-written and well-designed web
pages, and it highlights do’s and don’ts concerning the following:
n
How to make decisions about compliance with web standards
n
How to write your web pages so that they can be easily scanned
and read
n
Issues concerning the design and layout of your web pages
n

When and why you should create links
n
How to use images effectively
n
Other miscellaneous tidbits and hints
Download from www.wowebook.com
ptg
Standards Compliance and Web
Browsers
In some ways, we’re through the dark ages when it comes to cross-browser issues. The
generation of browsers that includes Netscape Navigator 4 and Internet Explorer 4 proba-
bly marked the low point for web developers in terms of deciding how pages should be
written. In the heat of the browser wars, Netscape and Microsoft were adding new fea-
tures to their browsers hand over fist, with no regard for published standards. These fea-
tures tended to be at odds with each other, and for web designers to create complex
pages that worked in both popular browsers, they had to use some really awful tech-
niques to make things look okay. Worse, the differences made things like Cascading
Style Sheets (CSS) and JavaScript very difficult to use. Even if you could get things to
work properly, the work involved was immense.
Currently, browser makers are working together to a greater extent than ever before. The
current versions of Internet Explorer, Firefox, Safari, Chrome, and Opera all offer strong
standards support, and even the browsers for popular mobile phone platforms like
Android and iPhone have standards-based browsers. Given the strong standards support
in current browsers, the biggest question most developers face is how they want to deal
with Internet Explorer 6. Version 6 of Internet Explorer was released in 2001, and it still
has a number of users, although that number continues to fall. The main problem with
that browser is that it deals with CSS differently than later versions of Internet Explorer
as well as other browsers, and those differences can make life painful for web designers.
Many websites are dropping support for Internet Explorer 6 entirely because it differs so
greatly from standards-based browsers.

Despite the fact that the browser picture is relatively clear these days, there are still cases
where browsers differ in terms of capabilities. The most obvious example is mobile
browsers. They have smaller screens than regular computers, and even the most advanced
mobile browsers have fewer capabilities than desktop browsers. There are also millions
of people with mobile devices that can access the Web but that have very limited support
for CSS and JavaScript. Even their support for Hypertext Markup Language (HTML)
markup is somewhat limited.
Progressive Enhancement
Progressive enhancement is a popular approach to creating web pages. It describes an
approach that enables web designers to use the latest and greatest technology available
without leaving people using browsers with limited capabilities behind. The idea is that
532
LESSON 18: Writing Good Web Pages: Do’s and Don’ts
Download from www.wowebook.com
ptg
you start with simple but completely functional web pages and then layer on enhance-
ments that add to the experience for people with newer or more capable browsers with-
out breaking the experience for the people using their mobile device or the old browser
that their employer forces them to use.
You’ll want to start with valid, standards-compliant HTML when you’re creating web
pages. There are a number of relevant standards, including HTML5, which is not yet
complete. I talk about the differences among them shortly. Regardless, you’ll want to
choose one of them and make sure all of your pages adhere to it.
Your initial pages should consist only of HTML markup with no JavaScript or CSS, and
they should look fine and work properly. All of your navigation should be present and
should work properly. Your main page content should be visible. In other words, you
should start out with a fully functional, very plain website. This ensures that your site
will work for even the most rudimentary mobile browsers and also for vision-challenged
users with screen readers. Taking this approach also ensures that your markup reflects
the content of your site rather than how you want to present it.

When that is complete, you can start layering on the more advanced functionality.
First, implement the visual design for your website using CSS. You can organize your
content into columns, transform your navigation so that it is presented in collapsible
menus, and add visual interest by using image backgrounds for various elements. Given
the robust support for CSS in the current browsers, there should be no need to use
HTML to define the appearance of your website. You might find you need to add con-
tainer elements to your page that provide the necessary structure for your styles. For
example, if your page layout is split into columns, it will be necessary to add <div> tags
for the contents of each column. Fortunately, such tags do not create any visual differ-
ences unless they are styled, so your page’s appearance will not be altered for users who
don’t have CSS support.
Finally, add dynamic technology like JavaScript or Flash. In Lesson 15, “Using
JavaScript in Your Pages,” I discussed unobtrusive JavaScript. That approach comple-
ments progressive enhancement. When you add JavaScript to the page, make sure the
page provides some minimum level of functionality without the JavaScript, and then use
JavaScript to enhance that baseline functionality. For example, if your page includes col-
lapsed elements that can be expanded with JavaScript, make sure to start out with them
expanded on the page, and then collapse them when the page loads using JavaScript.
That way, content will not be permanently hidden from users who don’t have JavaScript.
There are also methods for adding Flash to pages in unobtrusive ways. Many websites
present all their content using Flash, but it is possible to do so while also providing
Standards Compliance and Web Browsers
533
18
Download from www.wowebook.com
ptg
HTML as an alternative, by starting with HTML content on the page and using JavaScript
to hide that content and present the Flash movie instead if the user has a browser that sup-
ports Flash. For example, many mobile devices do not support Flash. If you are building a
website for a restaurant in Flash, it makes sense to present essential information like the

restaurant’s hours, location, and phone number in HTML, and then optionally hide that
information and replace it with your Flash movie if the Flash player is available. If it isn’t,
users can still access the important information on the site.
This is what progressive enhancement is all about. It ensures that everyone with a
browser of any kind can view your site, while the site still provides an enhanced experi-
ence for those who can benefit from it.
Choosing a Document Type
In light of these different approaches to writing HTML, let’s look at the current HTML
standards. The HTML 4.01 and XHTML 1.0 definitions include three flavors of HTML,
and the main differences between HTML 4.01 and XHTML 1.0 have been noted
throughout this book. The most important of them is that XHTML documents must be
valid Extensible Markup Language (XML), whereas that is not required for HTML 4.01.
The three flavors are as follows:
n
HTML 4.01 or XHTML 1.0 Transitional is geared toward the web developer
who still uses deprecated tags rather than migrating to CSS. For example, if you
want to write valid pages that include <font> tags, and attributes of the <body> tag
like bgcolor or text, this is your best bet.
n
HTML 4.01 or XHTML 1.0 Frameset is a strict specification that includes the
frame-related tags. You should use this standard when you’re writing framed pages.
n
HTML 4.01 or XHTML 1.0 Strict is for people who don’t have deprecated tags
in their documents. This specification basically mandates that tags are used strictly
for page structure, and that all your look-and-feel modifications are accomplished
using CSS.
Most web developers stick with the XHTML standard that is most applicable to them,
with a strong preference toward XHTML 1.0 Strict. At one time, significant differences
existed between browsers in terms of the tags they supported. These days, all the
browsers support an almost identical set of tags. Instead, the differences lie mainly in

how they deal with CSS. Regardless of the strategy you use for creating content, the key
to making sure everything works is to test it as widely as possible. If you’re concerned
about how your page looks in Internet Explorer 6, test it in Internet Explorer 6. After a
534
LESSON 18: Writing Good Web Pages: Do’s and Don’ts
Download from www.wowebook.com
ptg
while, you’ll get the feel for how things are going to look, but at first you’ll need to test
exhaustively. Even after you’ve been at it for a while, more testing never hurts. You
might have a favorite browser, but as a web designer, you can’t afford to ignore the oth-
ers that aren’t your favorites.
HTML5
The HTML5 standard is not finished, but it’s close enough to being finished that browser
makers are already starting to support some HTML5 features. The question when you’re
creating web pages is whether you should stick with XHTML 1.0 or move on to
HTML5. In this book, I have used the new HTML5 document type for all the pages that
don’t include elements that aren’t supported in HTML5. It works fine with all the current
browsers and makes sure your pages are ready for HTML5 when it arrives. I’ve also
avoided elements and attributes that have been dropped from HTML5.
One thing that’s different about HTML5 from XHTML 1.0 is that HTML5 documents
are not required to be valid XML. Valid XML is supported if you choose to use it, but
you can also use the older, HTML 4.01 style if you prefer.
In the next lesson, I take a deeper look at what HTML5 offers and the differences
between it and XHTML 1.0.
Validating Your Pages
It’s all well and good to attempt to write valid pages, but how do you know whether
you’ve succeeded? It’s easy enough to determine whether your pages look okay in your
browser, but verifying that they’re valid is another matter. Fortunately, the W3C, which is
responsible for managing the HTML recommendations, also provides a service to vali-
date your pages. It’s a web application that enables you to upload an HTML file or to

validate a specific URL to any W3C recommendation. The URL is
/>Figure 18.1 is a screenshot of the validator in action. I’ve sent it off to validate

Standards Compliance and Web Browsers
535
18
Download from www.wowebook.com