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 http://validator.w3.org/. Figure 18.1 is a screenshot of the validator in action. I’ve sent it off to validate http://www.informit.com/. Standards Compliance and Web Browsers 535 18 Download from www.wowebook.com . 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. 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. 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