HTML,Css and Javascript Sams

Download HTML,Css and Javascript Sams

Post on 30-Sep-2015

5 views

Category:

Documents

1 download

DESCRIPTION

a

TRANSCRIPT

800 East 96th Street, Indianapolis, Indiana, 46240 USAJulie C. MeloniSamsTeachYourselfHTML, CSSand JavaScript AllinOne00_9780672333323_fm.qxd 10/26/11 10:15 PM Page iSams Teach Yourself HTML, CSS, and JavaScript All in OneCopyright 2012 by Pearson Education, Inc.All rights reserved. No part of this book shall be reproduced, stored in a retrieval system,or transmitted by any means, electronic, mechanical, photocopying, recording, or other-wise, without written permission from the publisher. No patent liability is assumed withrespect to the use of the information contained herein. Although every precaution hasbeen taken in the preparation of this book, the publisher and author assume no responsi-bility for errors or omissions. Nor is any liability assumed for damages resulting from theuse of the information contained herein.ISBN-13: 978-0-672-33332-3ISBN-10: 0-672-33332-5Library of Congress Cataloging-in-Publication data is on file.First Printing November 2011TrademarksAll terms mentioned in this book that are known to be trademarks or service marks havebeen appropriately capitalized. Sams Publishing cannot attest to the accuracy of thisinformation. Use of a term in this book should not be regarded as affecting the validity ofany trademark or service mark.Warning and DisclaimerEvery effort has been made to make this book as complete and as accurate as possible,but no warranty or fitness is implied. The information provided is on an as is basis. Theauthor and the publisher shall have neither liability nor responsibility to any person orentity with respect to any loss or damages arising from the information contained in thisbook or programs accompanying it.Bulk SalesSams Publishing offers excellent discounts on this book when ordered in quantity for bulkpurchases or special sales. For more information, please contactU.S. Corporate and Government Sales1-800-382-3419corpsales@pearsontechgroup.comFor sales outside of the U.S., please contactInternational Salesinternational@pearson.comAcquisitions EditorMark TaberDevelopment EditorSonglin QiuManaging EditorSandra SchroederProject EditorSeth KerneyCopy EditorMike HenryIndexerKen JohnsonProofreaderJovana San Nicolas-ShirleyTechnical EditorPhil BallardPublishing CoordinatorCindy TeetersBook DesignerGary AdairCompositorTrina Wurst00_9780672333323_fm.qxd 10/26/11 10:15 PM Page iiContents at a GlancePART I: Getting Started on the Web CHAPTER 1: Publishing Web ContentCHAPTER 2: Understanding HTML and XHTMLConnectionsCHAPTER 3: Understanding Cascading StyleSheetsCHAPTER 4: Understanding JavaScriptPART II: Building Blocks of PracticalWeb DesignCHAPTER 5: Working with Fonts, Text Blocks, andListsCHAPTER 6: Using Tables to Display InformationCHAPTER 7: Using External and Internal LinksCHAPTER 8: Working with Colors, Images, andMultimediaPART III: Advanced Web Page Designwith CSSCHAPTER 9: Working with Margins, Padding,Alignment, and FloatingCHAPTER 10: Understanding the CSS Box Modeland PositioningCHAPTER 11: Using CSS to Do More with Lists,Text, and NavigationCHAPTER 12: Creating Fixed or Liquid LayoutsPART IV: Getting Started with DynamicWeb SitesCHAPTER 13: Understanding Dynamic WebsitesCHAPTER 14: Getting Started with JavaScriptProgrammingCHAPTER 15: Working with the Document ObjectModel (DOM)CHAPTER 16: Using JavaScript Variables, Strings,and ArraysCHAPTER 17: Using JavaScript Functions andObjectsCHAPTER 18: Controlling Flow with Conditionsand LoopsCHAPTER 19: Responding to EventsCHAPTER 20: Using Windows and FramesPART V: Advanced JavaScriptProgrammingCHAPTER 21: Using Unobtrusive JavaScriptCHAPTER 22: Using Third-Party LibrariesCHAPTER 23: Greasemonkey: Enhancing the Webwith JavaScriptCHAPTER 24: AJAX: Remote ScriptingPART VI: Advanced WebsiteFunctionality and ManagementCHAPTER 25: Creating Print-Friendly Web PagesCHAPTER 26: Working with Web-Based FormsCHAPTER 27: Organizing and Managing aWebsiteCHAPTER 28: Helping People Find Your WebPagesIndex00_9780672333323_fm.qxd 10/26/11 10:15 PM Page iiiTable of ContentsCHAPTER 1: Publishing Web Content 1A Brief History of HTML and the World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1Creating Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2Understanding Web Content Delivery . . . . . . . . . . . . . . . . 3Selecting a Web Hosting Provider . . . . . . . . . . . . . . . . . . . . 6Testing with Multiple Web Browsers. . . . . . . . . . . . . . . . . . 8Creating a Sample File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Using FTP to Transfer Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Distributing Content Without a Web Server . . . . . . 18Tips for Testing Web Content . . . . . . . . . . . . . . . . . . . . . . . . 19CHAPTER 2: Understanding HTML and XHTML Connections 25Getting Prepared . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Getting Started with a Simple Web Page . . . . . . . . 26HTML Tags Every XHTML Web Page Must Have . . 29Organizing a Page with Paragraphs and LineBreaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Organizing Your Content with Headings . . . . . . . . . . 34Validating Your Web Content . . . . . . . . . . . . . . . . . . . . . . . . . . 36The Scoop on HTML, XML, XHTML, and HTML5 . . 38CHAPTER 3: Understanding Cascading StyleSheets 45How CSS Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46A Basic Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47A CSS Style Primer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52Using Style Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Using Style IDs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Internal Style Sheets and Inline Styles . . . . . . . . . . . . 59CHAPTER 4: Understanding JavaScript 65Learning Web Scripting Basics . . . . . . . . . . . . . . . . . . . . . . 65How JavaScript Fits into a Web Page . . . . . . . . . . . . . . 67Exploring JavaScripts Capabilities . . . . . . . . . . . . . . . . . . 70Displaying Time with JavaScript. . . . . . . . . . . . . . . . . . . . . . 71Beginning the Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71Adding JavaScript Statements . . . . . . . . . . . . . . . . . . . . . . 72Creating Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Adding the Script to a Web Page . . . . . . . . . . . . . . . . . . . . 73Testing the Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74CHAPTER 5: Working with Fonts, Text Blocks,and Lists 81Boldface, Italics, and Special Text Formatting . . . . 82Tweaking the Font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Working with Special Characters . . . . . . . . . . . . . . . . . . . . 89Aligning Text on a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92The Three Types of HTML Lists . . . . . . . . . . . . . . . . . . . . . . 95Placing Lists Within Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97CHAPTER 6: Using Tables to DisplayInformation 107Creating a Simple Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Controlling Table Sizes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Alignment and Spanning Within Tables . . . . . . . . . . 113Page Layout with Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116CHAPTER 7: Using External and Internal Links 123Using Web Addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123Linking Within a Page Using Anchors . . . . . . . . . . . . 126Linking Between Your Own Web Content . . . . . . . . 129Linking to External Web Content . . . . . . . . . . . . . . . . . . 131Linking to an Email Address . . . . . . . . . . . . . . . . . . . . . . . . 132Opening a Link in a New Browser Window . . . . 134Using CSS to Style Hyperlinks . . . . . . . . . . . . . . . . . . . . 134CHAPTER 8: Working with Colors,Images, and Multimedia 141Best Practices for Choosing Colors . . . . . . . . . . . . . . 141Understanding Web Colors . . . . . . . . . . . . . . . . . . . . . . . . . . 143Using Hexadecimal Values for Colors . . . . . . . . . . . . 145Using CSS to Set Background, Text, and Border Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146Choosing Graphics Software . . . . . . . . . . . . . . . . . . . . . . . . 148The Least You Need to Know About Graphics . . 149Preparing Photographic Images . . . . . . . . . . . . . . . . . . . . 150Creating Banners and Buttons . . . . . . . . . . . . . . . . . . . . 155Reducing the Number of Colors in an Image. . . . 157Working with Transparent Images . . . . . . . . . . . . . . . . 158Creating Tiled Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . 159Creating Animated Web Graphics . . . . . . . . . . . . . . . . 160Placing Images on a Web Page . . . . . . . . . . . . . . . . . . . . 161Describing Images with Text . . . . . . . . . . . . . . . . . . . . . . . . 163Specifying Image Height and Width . . . . . . . . . . . . . . 165Aligning Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16500_9780672333323_fm.qxd 10/26/11 10:15 PM Page ivTurning Images into Links . . . . . . . . . . . . . . . . . . . . . . . . . . 169Using Background Images . . . . . . . . . . . . . . . . . . . . . . . . . . 171Using Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173Integrating Multimedia into Your Website . . . . . . 178CHAPTER 9: Working with Margins, Padding,Alignment, and Floating 191Using Margins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192Padding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199Keeping Everything Aligned. . . . . . . . . . . . . . . . . . . . . . . . . . 203Understanding the Float Property . . . . . . . . . . . . . . . . 204CHAPTER 10: Understanding the CSS BoxModel and Positioning 209The CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209The Whole Scoop on Positioning . . . . . . . . . . . . . . . . . . 213Controlling the Way Things Stack Up . . . . . . . . . . . . 217Managing the Flow of Text . . . . . . . . . . . . . . . . . . . . . . . . . . 220CHAPTER 11: Using CSS to Do More withLists, Text, and Navigation 225HTML List Refresher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226How the CSS Box Model Affects Lists . . . . . . . . . . 226Placing List Item Indicators . . . . . . . . . . . . . . . . . . . . . . . . 229Creating Image Maps with List Items and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231How Navigation Lists Differ from Regular Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235Creating Vertical Navigation with CSS . . . . . . . . . . 236Creating Horizontal Navigation with CSS . . . . . . . . 245CHAPTER 12: Creating Fixed or Liquid Layouts 253Understanding Fixed Layouts . . . . . . . . . . . . . . . . . . . . . . 254Understanding Liquid Layouts . . . . . . . . . . . . . . . . . . . . . . 255Creating a Fixed/Liquid Hybrid Layout . . . . . . . . . . 258CHAPTER 13: Understanding DynamicWebsites 273Understanding the Different Types of Scripting273Including JavaScript in HTML . . . . . . . . . . . . . . . . . . . . . . 274Displaying Random Content . . . . . . . . . . . . . . . . . . . . . . . . 276Understanding the Document Object Model . . 280Changing Images Based on User Interaction . . 281CHAPTER 14: Getting Started with JavaScriptProgramming 287Basic Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287JavaScript Syntax Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291Using Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293Best Practices for JavaScript . . . . . . . . . . . . . . . . . . . . . . 293CHAPTER 15: Working with the DocumentObject Model (DOM) 299Understanding the Document Object Model (DOM) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299Using window Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300Working with the document Object. . . . . . . . . . . . . . . . 300Accessing Browser History . . . . . . . . . . . . . . . . . . . . . . . . . . 303Working with the location Object . . . . . . . . . . . . . . . . . . 305More About the DOM Structure . . . . . . . . . . . . . . . . . . . . 306Working with DOM Nodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309Creating Positionable Elements (Layers) . . . . . . . . 311Hiding and Showing Objects . . . . . . . . . . . . . . . . . . . . . . . . 316Modifying Text Within a Page . . . . . . . . . . . . . . . . . . . . . . 317Adding Text to a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319CHAPTER 16: Using JavaScript Variables,Strings, and Arrays 325Using Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Understanding Expressions and Operators . . . . 328Data Types in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330Converting Between Data Types . . . . . . . . . . . . . . . . . . 331Using String Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332Working with Substrings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335Using Numeric Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337Using String Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338Sorting a Numeric Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340CHAPTER 17: Using JavaScript Functions and Objects 347Using Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347Introducing Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352Using Objects to Simplify Scripting . . . . . . . . . . . . . . 354Extending Built-in Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356Using the Math Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360Working with Math Functions . . . . . . . . . . . . . . . . . . . . . . 361Using the with Keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363Working with Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36400_9780672333323_fm.qxd 10/26/11 10:15 PM Page vCHAPTER 18: Controlling Flow with Conditions and Loops 369The if Statement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369Using Shorthand Conditional Expressions. . . . . . 372Testing Multiple Conditions with if and else . . 373Using Multiple Conditions with switch . . . . . . . . . . 375Using for Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377Using while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379Using do...while Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380Working with Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380Looping Through Object Properties . . . . . . . . . . . . . . 382CHAPTER 19: Responding to Events 389Understanding Event Handlers . . . . . . . . . . . . . . . . . . . . 389Using Mouse Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394Using Keyboard Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397Using the onLoad and onUnload Events . . . . . . . . 399Using onclick to Change Appearance. . . . 400CHAPTER 20: Using Windows and Frames 409Controlling Windows with Objects . . . . . . . . . . . . . . . . 409Moving and Resizing Windows . . . . . . . . . . . . . . . . . . . . 413Using Timeouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414Displaying Dialog Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417Working with Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418Building a Frameset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420Linking Between Frames and Windows . . . . . . . . . . 423Using Inline Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426CHAPTER 21: Using Unobtrusive JavaScript 433Scripting Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Reading Browser Information . . . . . . . . . . . . . . . . . . . . . . 440Cross-Browser Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443Supporting Non-JavaScript Browsers . . . . . . . . . . . . 445CHAPTER 22: Using Third-Party Libraries 453Using Third-Party Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . 453Other Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456CHAPTER 23: Greasemonkey: Enhancing the Web with JavaScript 463Introducing Greasemonkey . . . . . . . . . . . . . . . . . . . . . . . . . . 463Working with User Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . 466Creating Your Own User Scripts. . . . . . . . . . . . . . . . . . . . 468CHAPTER 24: AJAX: Remote Scripting 479Introducing AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479Using XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483Creating a Simple AJAX Library . . . . . . . . . . . . . . . . . . . . 485Creating an AJAX Quiz Using the Library . . . . . . . . 487Debugging AJAX Applications . . . . . . . . . . . . . . . . . . . . . . 491CHAPTER 25: Creating Print-Friendly Web Pages 499What Makes a Page Print-Friendly? . . . . . . . . . . . . . . 500Applying a Media-Specific Style Sheet . . . . . . . . . . 503Designing a Style Sheet for Print Pages . . . . . . . . 505Viewing a Web Page in Print Preview . . . . . . . . . . . . 508CHAPTER 26: Working with Web-Based Forms 513How HTML Forms Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513Creating a Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514Accepting Text Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519Naming Each Piece of Form Data . . . . . . . . . . . . . . . . 519Exploring Form Input Controls . . . . . . . . . . . . . . . . . . . . . . 521Submitting Form Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527Accessing Form Elements with JavaScript . . . . . . 528Displaying Data from a Form . . . . . . . . . . . . . . . . . . . . . . 528Sending Form Results by Email . . . . . . . . . . . . . . . . . . . . 530CHAPTER 27: Organizing and Managing a Website 537When One Page Is Enough . . . . . . . . . . . . . . . . . . . . . . . . . . 538Organizing a Simple Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540Organizing a Larger Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543Writing Maintainable Code . . . . . . . . . . . . . . . . . . . . . . . . . . 546Thinking About Version Control . . . . . . . . . . . . . . . . . . . . 548CHAPTER 28: Helping People Find Your Web Pages 553Publicizing Your Website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553Listing Your Pages with the Major Search Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555Providing Hints for Search Engines . . . . . . . . . . . . . . 556Additional Tips for Search Engine Optimization. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562INDEX 56700_9780672333323_fm.qxd 10/26/11 10:15 PM Page viAbout the AuthorJulie C. Meloni is the Lead Technologist and Architect in the Online Library Environment at theUniversity of Virginia. Before coming to the library, she worked for more than 15 years in web appli-cation development for various corporations large and small in Silicon Valley. She has written sev-eral books and articles on Web-based programming languages and database topics, including thebestselling Sams Teach Yourself PHP, MySQL, and Apache All in One.00_9780672333323_fm.qxd 10/26/11 10:15 PM Page viiWe Want to Hear from You!As the reader of this book, you are our most important critic and commentator. We value your opin-ion and want to know what were doing right, what we could do better, what areas youd like to seeus publish in, and any other words of wisdom youre willing to pass our way.You can email or write directly to let us know what you did or didnt like about this bookas wellas what we can do to make our books stronger.Please note that we cannot help you with technical problems related to the topic of this book, andthat due to the high volume of mail we receive, we might not be able to reply to every message.When you write, please be sure to include this books title and author as well as your name andemail address. We will carefully review your comments and share them with the author and editorswho worked on the book.Email: feedback@samspublishingMail: Sams Publishing800 East 96th StreetIndianapolis, IN 46240 USAReader ServicesVisit our website and register this book at informit.com/register for convenient access to anyupdates, downloads, or errata that might be available for this book. 00_9780672333323_fm.qxd 10/26/11 10:15 PM Page viiiIn the previous chapter, you learned the basics of HTML and XHTML,including how to set up a skeletal HTML template for all your web con-tent. In this chapter, you will learn how to fine-tune the display of yourweb content using Cascading Style Sheets (CSS).The concept behind style sheets is simple: You create a style sheet docu-ment that specifies the fonts, colors, spacing, and other characteristics thatestablish a unique look for a website. You then link every page that shouldhave that look to the style sheet, instead of specifying all those stylesrepeatedly in each separate document. Therefore, when you decide tochange your official corporate typeface or color scheme, you can modify allyour web pages at once just by changing one or two entries in your stylesheet rather than changing them in all of your static web files. So, a stylesheet is a grouping of formatting instructions that controls the appearanceof several HTML pages at once.Style sheets enable you to set a great number of formatting characteristics,including exacting typeface controls, letter and line spacing, and marginsand page borders, just to name a few. Style sheets also enable sizes andother measurements to be specified in familiar units, such as inches, mil-limeters, points, and picas. You can also use style sheets to precisely posi-tion graphics and text anywhere on a web page, either at specific coordi-nates or relative to other items on the page.In short, style sheets bring a sophisticated level of display to the Web. Andthey do soyoull pardon the expressionwith style.WHAT YOULL LEARN INTHIS CHAPTER:. How to create a basic stylesheet. How to use style classes. How to use style IDs. How to construct internalstyle sheets and inlinestylesCHAPTER 3Understanding Cascading StyleSheetsNOTEIf you have three or more webpages that share (or shouldshare) similar formatting andfonts, you might want to createa style sheet for them as youread this chapter. Even if youchoose not to create a com-plete style sheet, youll find ithelpful to apply styles to individ-ual HTML elements directlywithin a web page.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 4546 CHAPTER 3 Understanding Cascading Style SheetsHow CSS WorksThe technology behind style sheets is called CSS, which stands forCascading Style Sheets. CSS is a language that defines style constructs suchas fonts, colors, and positioning, which are used to describe how informa-tion on a web page is formatted and displayed. CSS styles can be storeddirectly in an HTML web page or in a separate style sheet file. Either way,style sheets contain style rules that apply styles to elements of a giventype. When used externally, style sheet rules are placed in an external stylesheet document with the file extension .css.A style rule is a formatting instruction that can be applied to an element ona web page, such as a paragraph of text or a link. Style rules consist of oneor more style properties and their associated values. An internal style sheet isplaced directly within a web page, whereas an external style sheet exists in aseparate document and is simply linked to a web page via a special tagmore on this tag in a moment.The cascading part of the name CSS refers to the manner in which stylesheet rules are applied to elements in an HTML document. More specifical-ly, styles in a CSS style sheet form a hierarchy in which more specific stylesoverride more general styles. It is the responsibility of CSS to determinethe precedence of style rules according to this hierarchy, which establishesa cascading effect. If that sounds a bit confusing, just think of the cascadingmechanism in CSS as being similar to genetic inheritance, in which generaltraits are passed from parents to a child, but more specific traits are entire-ly unique to the child. Base style rules are applied throughout a style sheetbut can be overridden by more specific style rules.A quick example should clear things up. Take a look at the following codeto see whether you can tell whats going on with the color of the text:This text is green.This text is blue.This text is still green.In the previous example, the color green is applied to the tag via thecolor style property. Therefore, the text in the tag is colored green.Because both tags are children of the tag, the green text styleNOTEYou might notice that I use theterm element a fair amount inthis chapter (and I will for therest of the book, for that mat-ter). An element is simply apiece of information (content) ina web page, such as an image,a paragraph, or a link. Tags areused to code elements, andyou can think of an element asa tag complete with descriptiveinformation (attributes, text,images, and so on) within thetag.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 46A Basic Style Sheet 47cascades down to them. However, the first tag overrides the color styleand changes it to blue. The end result is that the first line (not surroundedby a paragraph tag) is green, the first official paragraph is blue, and thesecond official paragraph retains the cascaded green color.If you made it through that description on your own, congratulations. Ifyou understood it after I explained it in the text, congratulations to you aswell. Understanding CSS isnt like understanding rocket science, althoughmany people will try to convince you that it is (so that they can chargehigh consultation fees, most likely!). Like many web technologies, CSS has evolved over the years. The originalversion of CSS, known as Cascading Style Sheets Level 1 (CSS1) was createdin 1996. The later CSS 2 standard was created in 1998, and CSS 2 is still inuse today. All modern web browsers support CSS 2, and you can safely useCSS 2 style sheets without too much concern. So when I talk about CSSthroughout the book, Im referring to CSS 2.Youll find a complete reference guide to CSS at http://www.w3.org/Style/CSS/. The rest of this chapter explains how to put CSS to good use.A Basic Style SheetDespite their intimidating power, style sheets can be simple to create.Consider the web pages shown in Figure 3.1 and Figure 3.2. These pagesshare several visual properties that could be put into a common style sheet:. They use a large, bold Verdana font for the headings and a normalsize and weight Verdana font for the body text.. They use an image named logo.gif floating within the content and onthe right side of the page.. All text is black except for subheadings, which are purple.. They have margins on the left side and at the top.. There is vertical space between lines of text.. The footnotes are centered and in small print.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 4748 CHAPTER 3 Understanding Cascading Style SheetsListing 3.1 shows the code for the style sheet specifying these properties.FIGURE 3.1This page uses a style sheet tofine-tune the appearance andspacing of the text and images.FIGURE 3.2This page uses the same stylesheet as the one shown in Figure3.1, thus maintaining a consistentlook and feel.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 48A Basic Style Sheet 49LISTING 3.1 A Single External Style Sheetbody {font-size: 10pt;font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;color: black;line-height: 14pt;padding-left: 5pt;padding-right: 5pt;padding-top: 5pt;}h1 {font: 14pt Verdana, Geneva, Arial, Helvetica, sans-serif;font-weight: bold;line-height: 20pt;}p.subheader {font-weight: bold;color: #593d87;}img {padding: 3pt; float: right;}a {text-decoration: none;}a:link, a:visited {color: #8094d6;}a:hover, a:active {color: #FF9933;}div.footer {font-size: 9pt;font-style: italic;line-height: 12pt;text-align: center;padding-top: 30pt;}This might initially appear to be a lot of code, but if you look closely, youllsee that there isnt a lot of information on each line of code. Its fairly stan-dard to place individual style rules on their own line to help make style03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 4950 CHAPTER 3 Understanding Cascading Style Sheetssheets more readable, but that is a personal preference; you could put allthe rules on one line as long as you kept using the semicolon to separateeach rule (more on that in a bit). Speaking of code readability, perhaps thefirst thing you noticed about this style sheet code is that it doesnt lookanything like normal HTML code. CSS uses a language all its own to speci-fy style sheets.Of course, the listing includes some familiar HTML tags. As you mightguess, body, h1, p, img, a, and div in the style sheet refer to the correspon-ding tags in the HTML documents to which the style sheet will be applied.The curly braces after each tag name contain the specifications for how allcontent within that tag should appear.In this case, the style sheet says that all body text should be rendered at asize of 10 points, in the Verdana font (if possible), with the color black, and14 points between lines. If the user does not have the Verdana fontinstalled, the list of fonts in the style sheet represents the order in whichthe browser should search for fonts to use: Geneva, then Arial, and thenHelvetica. If the user has none of those fonts, the browser will use whatev-er default sans serif font is available. Additionally, the page should haveleft, right, and top margins of 5 points each.Any text within an tag should be rendered in boldface Verdana at asize of 14 points. Moving on, any paragraph that uses only the tag willinherit all the styles indicated by the body element. However, if the taguses a special class named subheader, the text will appear bold and in thecolor #593d87 (a purple color). The pt after each measurement in Listing 3.1 means points (there are 72points in an inch). If you prefer, you can specify any style sheet measure-ment in inches (in), centimeters (cm), pixels (px), or widths-of-a-letter-m,which are called ems (em).You might have noticed that each style rule in the listing ends with a semi-colon (;). Semicolons are used to separate style rules from each other. It istherefore customary to end each style rule with a semicolon, so you caneasily add another style rule after it.To link this style sheet to HTML documents, include a tag in the section of each document. Listing 3.2 shows the HTML code for thepage shown in Figure 3.1. It contains the following tag:NOTEYou can specify font sizes aslarge as you like with stylesheets, although some displaydevices and printers will notcorrectly handle fonts largerthan 200 points.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 50A Basic Style Sheet 51This assumes that the style sheet is stored under the name styles.css inthe same folder as the HTML document. As long as the web browser sup-ports style sheetsand all modern browsers do support style sheetstheproperties specified in the style sheet will apply to the content in the pagewithout the need for any special HTML formatting code. This confirms theultimate goal of XHTML, which is to provide a separation between thecontent in a web page and the specific formatting required to display thatcontent.LISTING 3.2 HTML Code for the Page Shown in Figure 3.1About BAWSIAbout BAWSIThe Bay Area Womens Sports Initiative (BAWSI) is a public benefit, nonprofit corporation with a mission to create programs and partnerships through which women athletes bring health, hope and wholeness to our community. Founded in 2005 by Olympic and World Cup soccer stars Brandi Chastain and Julie Foudy and Marlene Bjornsrud, former general manager of the San Jose CyberRays womens professional soccer team, BAWSI provides a meaningful path for women athletes to become a more visible and valued part of the Bay Area sports culture.BAWSIs HistoryThe concept of BAWSI was inspired by one of the most spectacular achievements in womens sports history and born out of one its biggest disappointments... [continue reading]Copyright 2005-2009 BAWSI (www.bawsi.org). All rights reserved. Used with permission.The code in Listing 3.2 is interesting because it contains no formatting ofany kind. In other words, there is nothing in the HTML code that dictateshow the text and images are to be displayedno colors, no fonts, nothing.Yet the page is carefully formatted and rendered to the screen, thanks tothe link to the external style sheet, styles.css. The real benefit to thisTIPIn most web browsers, you canview the style rules in a stylesheet by opening the .css fileand choosing Notepad or anoth-er text editor as the helperapplication to view the file. (Todetermine the name of the .cssfile, look at the HTML source ofany web page that links to it.)To edit your own style sheets,just use a text editor.NOTEAlthough CSS is widely support-ed in all modern web browsers,it hasnt always enjoyed suchwide support. Additionally, notevery browsers support of CSSis flawless. To find out abouthow major browsers compare toeach other in terms of CSS sup-port, take a look at this website:http://www.quirksmode.org/css/contents.html.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 5152 CHAPTER 3 Understanding Cascading Style Sheetsapproach is that you can easily create a site with multiple pages that main-tains a consistent look and feel. And you have the benefit of isolating thevisual style of the page to a single document (the style sheet) so that onechange impacts all pages.TRY IT YOURSELFCreate a Style Sheetof Your OwnStarting from scratch, create a new text document called mystyles.css andadd some style rules for the following basic HTML tags: , , ,and . After your style sheet has been created, make a new HTML file thatcontains these basic tags. Play around with different style rules and see foryourself how simple it is to change entire blocks of text in paragraphs withone simple change in a style sheet file.A CSS Style PrimerYou now have a basic knowledge of CSS style sheets and how they arebased on style rules that describe the appearance of information in webpages. The next few sections of this chapter provide a quick overview ofsome of the most important style properties and allow you to get startedusing CSS in your own style sheets.CSS includes various style properties that are used to control fonts, colors,alignment, and margins, to name just a few. The style properties in CSS canbe generally grouped into two major categories:. Layout propertiesConsist of properties that affect the positioningof elements on a web page, such as margins, padding, alignment,and so on. Formatting propertiesConsist of properties that affect the visualdisplay of elements within a website, such as the font type, size,color, and so onLayout PropertiesCSS layout properties are used to determine how content is placed on aweb page. One of the most important layout properties is the displayproperty, which describes how an element is displayed with respect toother elements. There are four possible values for the display property:03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 52A CSS Style Primer 53. blockThe element is displayed on a new line, as in a new paragraph.. list-itemThe element is displayed on a new line with a list-itemmark (bullet) next to it.. inlineThe element is displayed inline with the current paragraph.. noneThe element is not displayed; it is hidden.Its easier to understand the display property if you visualize each ele-ment on a web page occupying a rectangular area when displayedthedisplay property controls the manner in which this rectangular area is dis-played. For example, the block value results in the element being placedon a new line by itself, whereas the inline value places the element nextto the content just before it. The display property is one of the few styleproperties that can be applied in most style rules. Following is an exampleof how to set the display property:display:block;You control the size of the rectangular area for an element with the width andheight properties. Like many size-related CSS properties, width and heightproperty values can be specified in several different units of measurement:. inInches. cmCentimeters. mmMillimeters. pxPixels. ptPointsYou can mix and match units however you choose within a style sheet, butits generally a good idea to be consistent across a set of similar style prop-erties. For example, you might want to stick with points for font propertiesor pixels for dimensions. Following is an example of setting the width ofan element using pixel units:width: 200px;Formatting PropertiesCSS formatting properties are used to control the appearance of content ona web page, as opposed to controlling the physical positioning of the con-tent. One of the most popular formatting properties is the border property,NOTEThe display property relies ona concept known as relativepositioning, which means thatelements are positioned rela-tive to the location of other ele-ments on a page. CSS alsosupports absolute positioning,which enables you to place anelement at an exact location ona page independent of otherelements. Youll learn moreabout both of these types ofpositioning in Part III,Advanced Web Page Designwith CSS.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 5354 CHAPTER 3 Understanding Cascading Style Sheetswhich is used to establish a visible boundary around an element with abox or partial box. The following border properties provide a means ofdescribing the borders of an element:. border-widthThe width of the border edge. border-colorThe color of the border edge. border-styleThe style of the border edge. border-leftThe left side of the border. border-rightThe right side of the border. border-topThe top of the border. border-bottomThe bottom of the border. borderAll the border sidesThe border-width property is used to establish the width of the borderedge. It is often expressed in pixels, as the following code demonstrates:border-width:5px;Not surprisingly, the border-color and border-style properties are usedto set the border color and style. Following is an example of how these twoproperties are set:border-color:blue;border-style:dotted;The border-style property can be set to any of the following values:. solidA single-line border. doubleA double-line border. dashedA dashed border. dottedA dotted border. grooveA border with a groove appearance. ridgeA border with a ridge appearance. insetA border with an inset appearance. outsetA border with an outset appearance. noneNo border03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 54A CSS Style Primer 55The default value of the border-style property is none, which is why ele-ments dont have a border unless you set the border property to a differentstyle. The most common border styles are the solid and double styles.The border-left, border-right, border-top, and border-bottom proper-ties enable you to set the border for each side of an element individually. Ifyou want a border to appear the same on all four sides, you can use thesingle border property by itself, which expects the following styles sepa-rated by a space: border-width, border-style, and border-color.Following is an example of using the border property to set a border thatconsists of two (double) red lines that are a total of 10 pixels in width:border:10px double red;Whereas the color of an elements border is set with the border-colorproperty, the color of the inner region of an element is set using the colorand background-color properties. The color property sets the color of textin an element (foreground) and the background-color property sets thecolor of the background behind the text. Following is an example of settingboth color properties to predefined colors:color:black;background-color:orange;You can also assign custom colors to these properties by specifying the col-ors in hexadecimal (covered in more detail in Chapter 8, Working withColors, Images, and Multimedia) or as RGB (Red, Green, Blue) decimalvalues, just as you do in HTML:background-color:#999999;color:rgb(0,0,255);You can also control the alignment and indentation of web page contentwithout too much trouble. This is accomplished with the text-align andtext-indent properties, as the following code demonstrates:text-align:center;text-indent:12px;After you have an element properly aligned and indented, you might beinterested in setting its font. The following font properties are used to setthe various parameters associated with fonts:. font-familyThe family of the font. font-sizeThe size of the fontNOTEThe exception to the defaultborder-style of none is whenan image is placed within an tag so that it serves as alinked image. In that case, asolid border is automatically setby default. Thats why you oftensee linked images with thestyle border-style:none,which turns off the automaticborder.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 5556 CHAPTER 3 Understanding Cascading Style Sheets. font-styleThe style of the font (normal or italic). font-weightThe weight of the font (light, medium, bold, and so on)The font-family property specifies a prioritized list of font family names.A prioritized list is used instead of a single value to provide alternatives incase a font isnt available on a given system. The font-size property spec-ifies the size of the font using a unit of measurement, usually points.Finally, the font-style property sets the style of the font and the font-weight property sets the weight of the font. Following is an example of set-ting these font properties:font-family: Arial, sans-serif;font-size: 36pt;font-style: italic;font-weight: medium;Now that you know a whole lot more about style properties and how theywork, refer back at Listing 3.1 and see whether it makes a bit more sense.Heres a recap of the style properties used in that style sheet, which youcan use as a guide for understanding how it works:. fontLets you set many font properties at once. You can specify alist of font names separated by commas; if the first is not available,the next is tried, and so on. You can also include the words boldand/or italic and a font size. Each of these font properties can bespecified separately with font-family, font-size, font-weight, andfont-style if you prefer.. line-heightAlso known in the publishing world as leading. Thissets the height of each line of text, usually in points.. colorSets the text color using the standard color names or hexa-decimal color codes (see Chapter 8 for more details).. text-decorationUseful for turning link underlining offsimplyset it to none. The values of underline, italic, and line-throughare also supported. The application of styles to links is covered inmore detail in Chapter 7, Using External and Internal Links.. text-alignAligns text to the left, right, or center, along withjustifying the text with a value of justify.. paddingAdds padding to the left, right, top, and bottom of an ele-ment; this padding can be in measurement units or a percentage of thepage width. Use padding-left and padding-right if you want to addpadding to the left and right of the element independently. Use03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 56Using Style Classes 57padding-top or padding-bottom to add padding to the top or bottom ofthe element, as appropriate. Youll learn more about these style proper-ties in Chapters 9, Working with Margins, Padding, Alignment, andFloating, and 10, Understanding the CSS Box Model and Positioning.Using Style ClassesThis is a teach yourself book, so you dont have to go to a single class tolearn how to give your pages great style, although you do need to learnwhat a style class is. Whenever you want some of the text on your pages tolook different from the other text, you can create what amounts to a custom-built HTML tag. Each type of specially formatted text you define is called astyle class. A style class is a custom set of formatting specifications that can beapplied to any element in a web page.Before showing you a style class, I need to take a quick step back and clarifysome CSS terminology. First off, a CSS style property is a specific style thatcan be assigned a value, such as color or font-size. You associate a styleproperty and its respective value with elements on a web page by using aselector. A selector is used to identify tags on a page to which you applystyles. Following is an example of a selector, a property, and a value allincluded in a basic style rule:h1 { font: 36pt Courier; }In this code, h1 is the selector, font is the style property, and 36pt Courieris the value. The selector is important because it means that the font settingwill be applied to all h1 elements in the web page. But maybe you want todifferentiate between some of the h1 elementswhat then? The answer liesin style classes.Suppose you want two different kinds of headings for use in your doc-uments. You would create a style class for each one by putting the followingCSS code in a style sheet:h1.silly { font: 36pt Comic Sans; }h1.serious { font: 36pt Arial; }Notice that these selectors include a period (.) after h1, followed by adescriptive class name. To choose between the two style classes, use theclass attribute, like this:Marvins Munchies Inc. Text about Marvins Munchies goes here. 03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 5758 CHAPTER 3 Understanding Cascading Style SheetsOr you could use this:MMI Investor InformationText for business investors goes here.When referencing a style class in HTML code, simply specify the classname in the class attribute of an element. In the previous example, thewords Marvins Munchies Inc. would appear in a 36-point Comic Sansfont, assuming that you included a to the style sheet at the top ofthe web page and assuming that the user has the Comic Sans fontinstalled. The words MMI Investor Information would appear in the 36-point Arial font instead. You can see another example of classes in action inListing 3.2; look for the subheader class and the footer class.What if you want to create a style class that could be applied to any ele-ment, rather than just headings or some other particular tag? You can asso-ciate a style class with the tag, as in Listing 3.2, which is used toenclose any text in a block that is somewhat similar to a paragraph of text;the tag is another useful container element.You can essentially create your own custom HTML tag by using the divselector followed by a period (.) followed by any style class name youmake up and any style specifications you choose. That tag can control anynumber of font, spacing, and margin settings all at once. Wherever youwant to apply your custom tag in a page, use a tag with the classattribute followed by the class name you created.For example, the style sheet in Listing 3.1 includes the following style classspecification:div.footer {font-size: 9pt;font-style: italic;line-height: 12pt;text-align: center;padding-top: 30pt;}This style class is applied in Listing 3.2 with the following tag:Everything between that tag and the closing tag in Listing 3.2appears in 9-point, centered, italic text with 12-point vertical line spacingand 30 points of padding at the top of the element.What makes style classes so valuable is how they isolate style code fromweb pages, effectively allowing you to focus your HTML code on the actualTIPYou might have noticed a changein the coding style when multipleproperties are included in a stylerule. For style rules with a singlestyle, youll commonly see theproperty placed on the same lineas the rule, like this:div.footer { font-size: 9pt; }However, when a style rule con-tains multiple style properties, itsmuch easier to read and under-stand the code if you list theproperties one-per-line, like this:div.footer {font-size:9pt;font-style: italic;line-height:12pt;text-align: center;padding-top: 30pt;}03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 58Internal Style Sheets and Inline Styles 59content in a page, not how it is going to appear on the screen. Then you canfocus on how the content is rendered to the screen by fine-tuning the stylesheet. You might be surprised by how a relatively small amount of code in astyle sheet can have significant effects across an entire website. This makesyour pages much easier to maintain and manipulate.Using Style IDsWhen you create custom style classes, you can use those classes as manytimes as you would likethey are not unique. However, there will besome instances when you want to have precise control over unique ele-ments for layout or formatting purposes (or both). In such instances, lookto IDs instead of classes.A style ID is a custom set of formatting specifications that can be appliedonly to one element in a web page. You can use IDs across a set of pagesbut only once per time within each page.For example, suppose you have a title within the body of all your pages.Each page has only one title, but all the pages themselves include oneinstance of that title. Following is an example of a selector with an ID indi-cated, plus a property and a value:p#title {font: 24pt Verdana, Geneva, Arial, sans-serif}Notice that this selector includes a hash mark, or pound sign (#), after p,followed by a descriptive ID name. When referencing a style ID in HTMLcode, simply specify the ID name in the id attribute of an element, like so:Some Title Goes HereEverything between the opening and closing tags will appear in 24-point Verdana textbut only once on any given page. You will often seestyle IDs used to define specific parts of a page for layout purposes, suchas a header area, footer area, main body area, and so on. These types ofareas in a page will appear only once per page, so using an ID rather thana class is the appropriate choice.Internal Style Sheets and Inline StylesIn some situations, you might want to specify styles that will be used inonly one web page, in which case you can enclose a style sheet between and tags and include it directly in an HTML document.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 5960 CHAPTER 3 Understanding Cascading Style SheetsStyle sheets used in this manner must appear in the of an HTMLdocument. No tag is needed, and you cannot refer to that stylesheet from any other page (unless you copy it into the beginning of thatdocument, too). This kind of style sheet is known as an internal style sheet,as you learned earlier in the chapter.Listing 3.3 shows an example of how you might specify an internal stylesheet.LISTING 3.3 A Web Page with an Internal Style SheetSome Pagediv.footer {font-size: 9pt;line-height: 12pt;text-align: center;}...Copyright 2009 Acme Products, Inc.In the listing code, the div.footer style class is specified in an internalstyle sheet that appears in the head of the page. The style class is nowavailable for use within the body of this page. And, in fact, it is used in thebody of the page to style the copyright notice.Internal style sheets are handy if you want to create a style rule that isused multiple times within a single page. However, in some instances youmight need to apply a unique style to one particular element. This calls foran inline style rule, which allows you to specify a style for only a smallpart of a page, such as an individual element. For example, you can createand apply a style rule within a , , or tag via the styleattribute. This type of style is known as an inline style because it is speci-fied right there in the middle of the HTML code.NOTE and aredummy tags that do nothing inand of themselves except speci-fy a range of content to applyany style attributes that youadd. The only differencebetween and isthat is a block elementand therefore forces a linebreak, whereas doesnt.Therefore, you should use to modify the style ofany portion of text that is toappear in the middle of a sen-tence or paragraph without anyline break.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 60Internal Style Sheets and Inline Styles 61Heres how a sample style attribute might look:This text is green, but this text is red.Back to green again, but......now the green is over, and were back to the default color for this page.This code makes use of the tag to show how to apply the colorstyle property in an inline style rule. In fact, both the tag and the tag in this example use the color property as an inline style.Whats important to understand is that the color:red style property over-rides the color:green style property for the text appearing between the and tags. Then in the second paragraph, neither of thecolor styles applies because it is a completely new paragraph that adheresto the default color of the entire page.Validate Your StyleSheetsJust as it is important to vali-date your HTML or XHTMLmarkup, it is important to vali-date your style sheet. A specificvalidation tool for CSS can befound at http://jigsaw.w3.org/css-validator/. Just like the validation tool discussed inChapter 2, UnderstandingHTML and XHTML Connections,you can point the tool to a webaddress, upload a file, or pastecontent into the form field pro-vided. The ultimate goal is aresult such as that shown inFigure 3.3: valid!FIGURE 3.3The W3C CSS Validator showsthere are no errors in the stylesheet contents of Listing 3.1.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 6162 CHAPTER 3 Understanding Cascading Style SheetsSummaryIn this chapter, you learned that a style sheet can control the appearance ofmany HTML pages at once. It can also give you extremely precise controlover the typography, spacing, and positioning of HTML elements. You alsodiscovered that by adding a style attribute to almost any HTML tag, youcan control the style of any part of an HTML page without referring to aseparate style sheet document.You learned about three main approaches to including style sheets in yourwebsite: a separate style sheet file with the extension .css that is linked toin the of your documents, a collection of style rules placed in thehead of the document within the tag, and as rules placed directlyin an HTML tag via the style attribute.Table 3.1 summarizes the tags discussed in this chapter. Refer to the CSS 2style sheet standards at http://www.w3c.org for details on what optionscan be included after the tag or the style attribute.TABLE 3.1 HTML Tags and Attributes Covered in Chapter 3Tag/Attributes Function... Allows an internal style sheet to be included within adocument. Used between and .Attributetype=contenttype The Internet content type. (Always text/css for aCSS style sheet.) Links to an external style sheet (or other documenttype). Used in the section of the document.Attributehref=url The address of the style sheet.type=contenttype The Internet content type. (Always text/css for aCSS style sheet.)rel=stylesheet The link type. (Always stylesheet for stylesheets.) Does nothing but provide a place to put style orother attributes. (Similar to ... butdoes not cause a line break.)Attributestyle=style Includes inline style specifications. (Can be used in, , , and most other HTML tags.)03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 62Workshop 63Q&AQ. Say I link a style sheet to my page that says all text should be blue,but theres a tag in the page some-where. Will that text display as blue or will it display as red?A. Red. Local inline styles always take precedence over external stylesheets. Any style specifications you put between and tags at the top of a page will also take precedence overexternal style sheets (but not over inline styles later in the same page).This is the cascading effect of style sheets that I mentioned earlier inthe chapter. You can think of cascading style effects as starting with anexternal style sheet, which is overridden by an internal style sheet,which is overridden by inline styles.Q. Can I link more than one style sheet to a single page?A. Sure. For example, you might have a sheet for formatting (text, fonts,colors, and so on) and another one for layout (margins, padding, align-ment, and so on)just include a for both. Technically speak-ing, the CSS standard requires web browsers to give the user theoption to choose between style sheets when multiple sheets are pre-sented via multiple tags. However, in practice, all major webbrowsers simply include every style sheet. The preferred technique forlinking in multiple style sheets involves using the special @import com-mand. Following is an example of importing multiple style sheets with@import:@import url(styles1.css);@import url(styles2.css);Similar to the tag, the @import command must be placed inthe head of a web page. You learn more about this handy little com-mand in Chapter 25, Creating Print-Friendly Web Pages, when youlearn how to create a style sheet specifically for printing web pages.WorkshopThe workshop contains quiz questions and exercises to help you solidify yourunderstanding of the material covered. Try to answer all questions beforelooking at the Answers section that follows.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 6364 CHAPTER 3 Understanding Cascading Style SheetsQuiz1. What code would you use to create a style sheet to specify 30-pointblue Arial headings and all other text in double-spaced, 10-point blueTimes Roman (or the default browser font)?2. If you saved the style sheet you made for Question 1 as corporate.css,how would you apply it to a web page named intro.html?3. How many different ways are there to ensure style rules can be appliedto your content?Answers1. Your style sheet would include the following:h1 { font: 30pt blue Arial; }body { font: 10pt blue; }2. Put the following tag between the and tags of theintro.html document:3. Three: externally, internally, and inline.Exercises. Using the style sheet you created earlier in this chapter, add some styleclasses to your style sheet. To see the fruits of your labor, apply thoseclasses to the HTML page you created as well. Use classes with your and tags to get the feel for things.. Develop a standard style sheet for your website and link it into all yourpages. (Use internal style sheets and/or inline styles for pages thatneed to deviate from it.) If you work for a corporation, chances are ithas already developed font and style specifications for printed materi-als. Get a copy of those specifications and follow them for companyweb pages, too.. Be sure to explore the official style sheet specs at http://www.w3.org/Style/CSS/ and try some of the more esoteric style properties not cov-ered in this chapter.03_9780672333323_ch03.qxd 10/26/11 10:34 PM Page 64INDEXabsolute positioning, 213display property (CSS), 53positioning property, 214-217accessibility, JavaScript best practices, 439Adaptive Path, AJAX, 480addEventListener function, 392Adjust Hue/Lightness/Saturation tool(GIMP), 154Adobe Photoshop, 148AJAX, 71, 479. See also JavaScriptAJAX Frameworks JavaScriptlibrary, 456debugging applications, 491-496examples of, 481frameworks, 482libraries, 482ajaxRequest function, 486ajaxResponse function, 486creating, 485-486quiz building example, 487-491using, 486limitations of, 482live search forms, creating, 496front end, 495HTML file example, 493HTML forms, 492JavaScript front end, 494-495PHP back end, 493-494Symbols/ (forward slashes), HTML and, 124+ (plus signs) in JavaScript state-ments, 73+= operator, 327(;) semicolons, JavaScript statements,72, 287Numbers140 cross-browser color names,143-144AA Small Orange web hosting provider, 7 tags (HTML), 170anchor locations, linking to,126-129naming, 127web pages, identifying locationswithin, 126absolute addresses, web pages and,124-125absolute links, web pages and, 124quiz building exampleHTML files, 487-488JavaScript files, 489-490testing, 490-491XML files, 488-489requestsawaiting responses, 484back end, 480, 493-494creating, 483front end, 480, 494-495interpreting response data, 484JavaScript client, 480sending, 484server-side scripts, 480,493-495XML and, 481XMLHttpRequestawaiting responses torequests, 484creating requests, 483interpretting request responsedata, 484opening URLs, 483sending requests, 484alert() function, event handlers and, 295alerts (dialog boxes), 417-41829_9780672333323_index.qxd 10/26/11 10:32 PM Page 567aligning568numeric arrays, 337, 340-342string arrays, 338sorting, 340-342splitting, 339ASCII text, 26, 34, 82, 397.asp file extensions, 27ASP scripting language, 274attributes, 92-93, 123auto image loading, web browsers, 20B tags (HTML), 81-83back end (AJAX requests), 480,493-494Back/Forward buttons, adding to documents, 304-305backgroundsbackground-position style property, 172background-repeat style property, 172colors,background-color property(CSS), 55background-color style property, 171CSS and 146-148images, 171-172tiled backgrounds, 159-160bad website examples, 144bandwidth, web hosting providers, 6banners, creating, 156Barrys Clipart Server website, 149BAWSI.org, website organization, 545behavior, Javascripting scripting bestpractices, 434Berners-Lee, Sir Tim, 1 tags (HTML), 83big text, 83aligningalign property (CSS), 191, 203-204imageshorizontal alignment, 165-166vertical alignment, 167-168textattributes, 92-93block-level elements, 93-95paragraphs, 93-95tables, 113-115text-align property (CSS), 56text-align style rule (CSS),93-95text-decoration property (CSS), 56AllTheWeb, listing websites with, 556AltaVista, listing websites with, 556alternate text, 163-164Amazon.com, 481, 543analogous color schemes, 143anchor objects (DOM), 303anchor tagsnaming, 127web pages, identifying locationswithin, 126web pages,linking to anchor loca-tions, 126-129anchors, documents, 303animated graphics, 160-161API functions (Greasemonkey), 471Apple computersHTML file creation, 27Safari, 9, 465arguments (JavaScript functions), 348Arial font (text), 86arithmetic mean, 363arrays (JavaScript)declaring, 337elements of, accessing, 338frames arrays, 426length of, 338Bing, listing websites with, 556block value (CSS display property), 53blogs, publishing to web content, 19 tags, 27, 31-33boilerplate code, web page creation,28-30boldface text, 82-83Boodman, Aaron, 464Boolean operators. See logical opera-tors (JavaScript)Boolean values (JavaScript), 330bordersCSS box model, 210border property, 54-55border-bottom property, 54-55border-color property, 54-55border-left property, 54-55border-right property, 54-55border-style property, 54-55border-top property, 54-55border-width property, 54frame borders, modifying,424-425lists, styling, 227-228tablesCSS and color, 146-148sizing, 107spacing, 116box model (CSS), 209, 212borders, 210content, 210lists and, 226-229margins, 210padding, 210sizing elements, 210-212 tags, 32-33, 85break statements (JavaScript), 381browsers (web)140 cross-browser color names,143-144cross-browser scripting29_9780672333323_index.qxd 10/26/11 10:32 PM Page 568color 569non-viewable window areas, 254Opera, 9, 465padding and, 226-228pop-up windows, 134popularity of, 26Safari, 9search engines, 445sensing. See feature sensingservers, basic browser server inter-action, 3-5text, adjusting font size settings, 20websitescomparing, 26testing, 8-9, 26windowscreating, 410-411linking frames to windows,423-424moving, 413-414opening/closing, 411-412resizing, 413-414timeouts, 414-416built-in objects (JavaScript), 289, 352,356-359date objectconverting date formats, 366creating, 364local time values, 365-366reading date values, 365setting date values, 364-365time zones, 365definitions, extending, 359math object, 361generating random numbers,360-363rounding decimal numbers, 360truncating decimal numbers, 360buttons, creating, 156buying domain names, 6debugging browsers, 444feature sensing, 437, 443-444CSS, support for, 51debugging, 444development of, 2dialog boxes, displaying, 417-418distributing, 18Firefox, 9, 464frames, 418-420adding individual frames, 423creating frameset documents,421-423frames array, 426inline frames, 426-429JavaScript objects and, 425linking windows to frames,423-424modifying borders, 424-425nested framesets, 425Google Chrome, 9, 465history, accessing, 2, 303-305HTML development, 2images, auto image loading, 20information, reading via JavaScriptdishonest browsers, 442-443displaying information,440-441Internet Explorer, 9event properties, 393Trixie, 465-468links, opening in new browser windows, 134lists, displaying in, 97margins and, 226-229non-Internet Explorer event proper-ties, 393-394non-JavaScript browsersavoiding errors, 446-449detecting, 445-446JavaScript optionality, 446 tag, 445-446 tag, 457Ccase statements (JavaScript), 376case-sensitivity, JavaScript syntax, 292CD-ROM, transferring photos to, 150cells (tables)creating, 107sizing, 111-113Champeon, Steve, 435check boxes (forms), 521-523child objects (JavaScript), 353child tags. See nested tags (HTML)children (DOM), 308Chrome (Google), 9error messages, displaying, 77Greasemonkey and, 465clarity, coding for, 548Classic FTP FTP clientserver connections, 13website connections, 11-12clear property (CSS), text flow and, 220client-side scripting, 274clip art, 149closing tags (HTML), 30closing/opening browser windows,411-412cm value (CSS height/width properties), 53color140 cross-browser color names,143-144analogous color schemes, 143background colorbackground-color style property, 171CSS and, 146-148best practices, 141-143border color (tables), CSS and,146-148color property (CSS), 5629_9780672333323_index.qxd 10/26/11 10:32 PM Page 569color570conditional statements (JavaScript), 289conditions (for loops), 377confirmations (dialog boxes), 417-418constructor functions (JavaScript), 354containers, 307content (web)creating, 2-3CSS box model, 210delivering, 3-5Javascripting scripting best prac-tices, 434publishinglocally, 18-19to blogs, 19viewing locally, 5web hosting providers, selecting,6-8, 26continue statements (JavaScript), 382continuing loops (JavaScript), 382control panels, selecting web hostingproviders, 7-8convertingdata formats (JavaScript dateobjects), 366data types (JavaScript), 331string case (JavaScript), 334copyrights, graphics and, 149counters (JavaScript), for loops, 377Creammonkey add-on, Greasemonkeysupport in Safari, 465Creative Commons licenses, 149cropping images, 151-152cross-browser scriptingdebugging browsers, 444event handlers, JavaScript and, 437feature sensing, 437, 443-444CSSalign property, 191, 203-204box model, 209borders, 210content, 210Color Scheme Generator website, 143color style rule (CSS), fonts and,86-87color theory, 142color wheel, 142Colorblind Web Page Filter tool, 148complementary color schemes, 143graphics, adjusting color in, 154hexadecimal color codes,144-146links and, 144lists, styling, 227-228monitors and, 144tables and, 115textCSS and, 146-148formatting in style sheets, 46triadic color schemes, 143using, 141-143W3C color standards, 143columns, fixed/liquid hybrid layoutsdefining, 260-262height, setting, 264-268combiningstring object values, 332-334tasks. See functions (JavaScript)commentsHTML, JavaScript and, 276JavaScript, 293websites, maintaining code via,546-547complementary color schemes, 143compressiongraphics, 150JPEG, 155conditional expressions, 317,370-373conditional operators (JavaScript), 370lists and, 226-229margins, 210padding, 210sizing elements, 210-212cascading component of, 46clear property, text flow and, 220color, specifying via CSS, 146-148CSS 2, 47CSS Zen Garden, 191-192, 253CSS1, 47definition of, 45-46 tags, 46DOCTYPE declarations, 212float property, 191, 204-207, 220formatting properties, 53background-color property, 55border property, 54-55border-bottom property, 54-55border-color property, 54-55border-left property, 54-55border-right property, 54-55border-style property, 54-55border-top property, 54-55border-width property, 54color property, 56font property, 56font-family property, 55font-size property, 55font-style property, 56font-weight property, 56line-height property, 56padding property, 56text-align property, 55-56text-decoration property, 56text-indent property, 55image maps, creating, 231-235inline styles, 60-61layoutsdisplay property, 52-53fixed layouts, 25429_9780672333323_index.qxd 10/26/11 10:32 PM Page 570displaying 571list-style-type style rule,99-101multiple style properties in, 58text-align style rule, 93-95viewing, 51style sheetscreating, 47-52definition of, 45external style sheets, 46-51formatting properties, 53-56formatting text color, 46inline styles and, 61internal style sheets, 46,59-60italic text, 56layout properties, 52-53line-through text, 56linking to HTML documents, 50sizing text, 50strikethrough text, 56underline text, 56tags, 50elements and, 46selectors, 57validating, 61web browsers, CSS support, 51z-index property, 217-219current line, text flow and, 220custom HTML tags, creating, 58custom objects (JavaScript), 289customer service, web hostingproviders, 6Cyberduck FTP client, 11DDailyRazor web hosting provider, 7dashed value (CSS border-style prop-erties), 54fixed/liquid hybrid layouts,258-268height property, 53liquid layouts, 253- 257width property, 53 tag, 50links, styling, 134-138listshorizontal navigation, 245-248list-style-image property, 226list-style-position property,226, 229-231list-style-type property, 226navigation lists, 236-248vertical navigation, 236-244margin property, 191-199media-specific style sheets,503-504overflow property, text flow and, 220padding property, 191, 199-202positioningabsolute positioning, 213-217overlapping elements, 213,217-219positioning property, 213relative positioning, 213-215z-index property, 217-219print pages, desiging style sheetsfor, 505-508properties, hyphenating, 312reference guide online resource, 47selectors, 57style classes, 57-58style IDs, 59style properties, 57style rules, 46, 50color style rule, 86-87font weight style rule, 83font-family style rule, 86font-size style rule, 86-87data types (JavaScript), 330-331date object (JavaScript)creating, 364date formats, converting, 366date values, reading, 365date values, setting, 364-365local time values, 365-366time zones, 365Date objects (JavaScript), time displayexample, 72debuggingAJAX applications, 491-496browsers, 444user scripts, 474-476decimal numbersrounding, 360truncating, 360declaring variables (JavaScript), 326decrementing/incrementing variables(JavaScript), 327definition lists, 96, 226design patterns, JavaScript best prac-tices, 439dialog boxes, displaying, 417-418Digg, 481directories (web content), 123-124display property (CSS), 52-53displayingdocument information, 301-302error messages, 77time (JavaScript example)adding scripts to web pages,73-74creating output, 73Date objects, 72error handling, 76-78modifying scripts, 74-76 tags, 71-72statements, 72testing scripts, 74variables, 7229_9780672333323_index.qxd 10/26/11 10:32 PM Page 571DisplayKey function, keyboard events572link objects, 303, 306location objects, 305-306methods, 299naming, 299parents, 308properties, 299referencing, 299showing/hiding, 316-317siblings, 308window objects, 300, 409-418parents, 308siblings, 308structure of, 306-307text, web pagesadding to, 319-321modifying in, 317-318DOM objects (JavaScript), 289domain names, purchasing, 6dotted value (CSS border-style properties), 54double value (CSS border-style proper-ties), 54-55downloading JavaScript libraries, 457dynamic websitesclient-side scripting, 274DOM, 280-281images, changing via user interac-tion, 281-283server-side scripting, 274text, printing via JavaScript, 275web content, displaying randomcontent via JavaScript, 276-280Eeditors, blogs, 19effects (JavaScript), 70elements, definition of, 46DisplayKey function, keyboard events,398-399distributing web browsers, 18dithering, 158 tags (CSS), 46, 170do, while loops (JavaScript), 380DOCTYPE declarations, 212document objects (DOM), 300anchor objects, 303document information, displaying,301-302link objects, 303, 306methods of, 302, 310properties of, 301text, writing within documents, 302document roots, 13-16document.write statements(JavaScript), 68, 73documenting code, 546-547documentsanchors, 303Back/Forward buttons, adding,304-305information, displaying in,301-302links, 303, 306text, writing within documents, 302Dojo JavaScript library, 456DOM, 280-281children, 308layerscontrolling positioning viaJavaScript, 311-315creating, 311moveable layers, 311-315nodes, 307, 309-310objects, 352anchor objects, 303document objects,300-303, 306hiding/showing, 316-317history objects, 303-305else keyword (JavaScript), testing mul-tiple conditions, 372-373HTML files, 374JavaScript files, 374-375 tags (HTML), 83emailaddressesemail address encoders, 133linking to, 132-133form data, sending via, 530-531 tags (XHTML), 183embedded multimedia files, 180-183emphasized text. See italic textempty tags (HTML), 30, 33error handling, 448JavaScript scripts, 76-78non-JavaScript browsers, 446-449error messages, displaying, 77escaping loops (JavaScript), 381ESPN.com, 254, 540-542European languages, formatting textfor, 89-91event handlers, 389creating, 390-391defining, 390-391event objects, 392functions and, 484JavaScript and, 68-70,290-291, 435alert() function, 295best practices, 294-295cross-browser scripting, 437W3C event model, 436-437keyboard events, 397-399mouse eventsmousestatus function, 396onClick, 394-397, 400-404onDblClick, 395onMouseDown, 395-397onMouseOut, 394onMouseOver, 39429_9780672333323_index.qxd 10/26/11 10:32 PM Page 572formatting 573minimum width, setting, 262-263structure of, 258-259Flickr, 161-163float property (CSS), 191, 204-207, 220float style property, 166flow control (JavaScript), 369break statements, 381case statements, 376continue statements, 382do, while loops, 380for loops, 377-378for, in loops, 382-384if statements, 369conditional expressions,370-373conditional operators, 370else keyword, 372-375logical operators, 371testing multiple conditions,373-375infinite loops, 380-381loopsbreak statements, 381continue statements, 382escaping, 381switch statements, using multipleconditions, 375-376while loops, 379-380flowing text, 220fluid layouts. See liquid layoutsfolders (web content), 123-125 tags (HTML), 81, 86fonts (text)Arial font, 86CSScolor style rule, 86-87font property, 56font-family property, 55font-family style rule, 86font-size property, 55font-size style rule, 86-87onMouseUp, 395-397rollover images, 394multiple event handlers, 391-392naming, 390onLoad events, 399onUnload events, 400parentheses and, 484quotation marks and, 390syntax of, 390Yahoo! UI Library, 437event objectsevent handlers and, 392Internet Explorer event properties, 393non-Internet Explorer event properties, 393-394events (JavaScript), 69expressions (JavaScript), 328extending built-in object definitions, 359external scripts (JavaScript), 69external style sheets (CSS), 46-51Ffeature sensing, 437, 443-444Fetch FTP client, 11findingsubstrings (JavaScript), 336-337user scripts, 466Firebug, validating web content, 37Firefox, 9error messages, displaying, 77Greasemonkey, installing, 464FireFTP FTP client, 10-11FireZilla FTP client, 11fixed layouts, 254fixed/liquid hybrid layoutscolumnsdefining in, 260-262setting height, 264-268font-style property, 56font-weight property, 56font weight style rule, 83foreign languages, 89-91HTML, customizing in, 85-89resumes, creating, 87-89sans-serif font, 86sizing, style sheets, 50special characters, 89-91Times Roman font, 86typerwriter font. See monospacedtextweb browsers, adjusting font sizesettings, 20for loops (JavaScript), 377-378for statements (JavaScript), 290for, in loops (JavaScript), 382-384foreign languages, formatting text for,89-91formattingCSS, 53background-color property, 55border property, 54-55border-bottom property, 54-55border-color property, 54-55border-left property, 54-55border-right property, 54-55border-style property, 54-55border-top property, 54-55border-width property, 54color property, 56font property, 56font-family property, 55font-size property, 55font-style property, 56font-weight property, 56line-height property, 56padding property, 56text-align property, 55-56text-decoration property, 56text-indent property, 5529_9780672333323_index.qxd 10/26/11 10:32 PM Page 573formatting574selection lists, 524-525text areas, 526text fields, 526text input, accepting, 519user input, accepting, 519validating, 70, 531-532forward slashes (/), HTML and, 124Forward/Back buttons, adding to doc-uments, 304-305frames, 418-420animated graphics, 161borders, modifying, 424-425frames array, 426frameset documents, creating,421-423individual frames, adding, 423inline frames, 426-429JavaScript objects and, 425nested framesets, 425windows, linking to frames,423-424front end (AJAX requests), 480,494-495FTP (File Transfer Protocol), 10, 29Classic FTP clientserver connections, 13website connections, 11-12Cyberduck, 11Fetch, 11FireFTP, 10-11FireZilla, 11FTP clientsselecting, 10-11using, 11-13Fuchs, Thomas, 455functionsAPI functions (Greasemonkey), 471JavaScript functions, 68, 288, 347alert() function, 265arguments, 348calling, 349-350style sheets, 46, 50text, 82aligning text, 92-95big text, 83boldface text, 82-83color, style sheets, 46customizing fonts in HTML,85-89definition lists, 96, 226foreign languages, 89-91italic text, 82-83monospaced text, 84-85multitiered lists, 100-101nested lists, 97-100, 226older HTML tags, 81ordered lists, 95-96, 226outlines, 98-100resumes, creating, 87-89sizing, style sheets, 50small text, 83special characters, 89-91subscript text, 83superscript text, 83unordered lists, 95-96, 226web page creation, 33-35forms, 513check boxes, 521-523creating, 514-519datadisplaying in pop-up windows,528-530naming, 519-520sending via email, 530-531submitting, 527elements, accessing viaJavaScript, 528hidden data, 520JavaScript events, 527-528pull-down pick lists, 524-525radio buttons, 523-524scrolling lists, 524-525constructor functions, 354defining, 347-349function call statements, 288math functions, 361-363naming, 292parameters, 288, 348returning values, 351-352GGarrett, Jesse James, 480get methods (JavaScript objects), 365Gickr, animated graphics, 161GIFs, 157-158animated graphics, 160-161tiled backgrounds, 159-160transparent images, 159GIMP, 149Adjust Hue/Lightness/Saturationtool, 154banners, creating, 156buttons, creating, 156imagesadjusting color, 154cropping, 151-152JPEG compression, 155resizing, 153Red Eye Removal, 154Git website version control, 550global variables (JavaScript), 326GMT (Greenwich Mean Time),JavaScript time displaying example, 71GoogleChrome, 9displaying error messages, 77Greasemonkey, 465Gmail, 446, 481Images, 161listing websites with, 55529_9780672333323_index.qxd 10/26/11 10:32 PM Page 574HTML 575height/width, specifying, 165image maps, 173-178JPEGscompression, 155tiled backgrounds, 159-160links, turning graphics into,169-171Picnik, 149PNGs, 158-159Red Eye Removal, 154republishing, 163resizing, 153resolution, 150rollover images, 394software, choosing, 149text descriptions, 163-164transparent graphics, 158uses of, 150web pagesgrabbing graphics from, 149placing graphics on webpages, 161-163Greasemonkey, 463API functions, 471browser support, 465installing, 464metadata, 470turning on/off, 468user scriptscreating, 468, 475debugging user scripts,474-476describing, 469-470finding, 466installing, 466managing, 466-467metadata and, 469-470site-specific user scripts,472-473testing, 468-471text area macro user scripts,475-476Picasa, 149searches, 4graceful degradation, web design and, 434graphicsAdobe Photoshop, 148aligninghorizontal alignment, 165-166vertical alignment, 167-168animated graphics, 160-161backgroundsbackground-image style property, 172graphics, 171-172tiled backgrounds, 159-160banners, creating, 156buttons, creating, 156CD-ROM, transferring graphics to, 150clip art, 149color, adjusting, 154compression, 150copyrights and, 149Creative Commons licenses, 149cropping, 151-152dithering, 158file sizes, 150Flickr, 161-163GIFs, 157-158animated graphics, 160-161tiled backgrounds, 159-160transparent images, 159GIMP, 149adjusting image color, 154banners, 156buttons, 156cropping images, 151-152JPEG compression, 155resizing images, 153Google Images, 161Google Picasa, 149groove value (CSS border-style properties), 54grouping statements (JavaScript). SeeloopsH tags, 27, 31-33, 68heading tags (HTML), 34-36headings (tables), creating, 108heightCSS box model, adjusting heightin, 210-212fixed/liquid hybrid layouts, settingcolumn height in, 264-268height property (CSS), 53images, specifying height in, 165Hello World HTML file, creating, 9-10helpCSS, reference guide onlineresource, 47web hosting providers, selecting, 6helper applications, 180hexadecimal color codes, 144-146hidden form data, 520hiding/showing DOM objects,316-317history objects (DOM), 303-305horizontal image alignment, 165-166horizontal navigation, 245-248horizontal rule tags (HTML), 33 tags, 33HTMLAJAXlive search forms, 492quiz building example, 487-488attributes, 92-93, 123comments, JavaScript and, 276containers, 30729_9780672333323_index.qxd 10/26/11 10:32 PM Page 575HTML576check boxes, 521-523creating, 514-519displaying data in pop-up windows, 528-530hidden data, 520JavaScript events, 527-528naming form data, 519-520pull-down pick lists, 524-525radio buttons, 523-524scrolling lists, 524-525selection lists, 524-525sending data via email,530-531submitting form data, 527text areas, 526text fields, 526text input, 519user input, 519validating, 531-532forward slashes (/), 124frames, 418-420adding individual frames, 423creating frameset documents,421-423frames array, 426JavaScript objects and, 425linking windows to frames,423-424modifying borders, 424-425nested framesets, 425FTPselecting FTP clients, 10-11using FTP clients, 11-13future of, 28graphics, image maps, 176-178 tags, functions and, 68Hello World sample file, creating,9-10history of, 1-2html file extensions, 27HTML-compatible word proces-sors, creating HTML files, 27CSSCSS box model, 209-212external style sheets, 51linking style sheets to HTMLdocuments, 50development of, 1-2, 38event handlersJavaScript, 435-437Yahoo! UI Library, 437file creationboilerplate code, 28-30comparing web page HTMLcodes, 37formatting text, 33-35html file extensions, 27HTML tags, 27-33HTML-compatible word processors, 27indenting text, 35line breaks, 32-33naming files with HTML tags, 27Notepad, 26organizing content via headings, 34-36overview of, 29paragraphs, 32-33saving files with HTML tags, 27templates, 31TextEdit, 27Word, 27WYSIWYG editors, 27filescreating, 9-10index pages, 16-18managing, 14-16organizing, 14-16transfering, 10-13, 29viewing, 29forms, 513accessing elements viaJavaScript, 528HTML4, empty tags, 33HTML5, 28, 40images, placing on web pages,162-163JavaScript and, 274adding libraries to HTML documents, 457adding scripts to HTML documents, 73-74changing images via user interaction, 281-283displaying random web contentvia, 276-280DOM, 280-281HTML comments, 276printing text via, 275JavaScripts advantages over, 299.js files, linking to, 69layoutsfixed layouts, 254fixed/liquid hybrid layouts,258-268liquid layouts, 253- 257linksabsolute links, 124anchor tags, 126-129images as, 134linking between web content,129-131linking to email addresses,132-133linking to external web con-tent, 131-132opening links in new browserwindows, 134relative-root links, 124styling via CSS, 134-138listsdefinition lists, 96, 226multitiered lists, 100-101nested lists, 97-100, 226ordered lists, 95-96, 22629_9780672333323_index.qxd 10/26/11 10:32 PM Page 576HTML 577 tag, 27, 31-33heading tags, 34-36horizontal rule tag, 33 tag, 33 tag, 27, 31-33 tags, 81-83 tags, 162-163line breaks, 32-33naming files with, 27nested tags, 97opening tags, 30 tag, 31-33paragraphs, 32-33 tags, 84-85pseudoclasses, 134-138saving files with, 27 tags, 83 tags, 84 tags, 83 tags, 83 tags, 83 tags, 107 tags, 107 tags, 108 tags, 27, 31-33, 36 tags, 107 tags, 84-85 tags, 84xml : lang attribute, 31xmlns attribute, 31text, formattingaligning text, 92-95big text, 83boldface text, 82-83customizing fonts, 85-89definition lists, 96, 226foreign languages, 89-91italic text, 82-83monospaced text, 84-85multitiered lists, 100-101nested lists, 97-100, 226outlines, creating via lists,98-100unordered lists, 95-96, 226marked up text, 2multiple conditions, testing, 374Notepad, creating HTML files, 26outlines, creating, 98-100pseudoclasses, 134-138tablesaligning within, 113-115cells, creating, 107cells, sizing, 111-113color in, 115creating, 107-110headings, creating, 108images in, 116page layout via, 116-117rows, creating, 107sizing, 110-113sizing borders, 107spacing borders, 116spanning within, 115uses for, 107tags, 5, 28 tags, 126-129, 170attributes, 92-93, 123 tags, 81-83 tags, 83 tag, 27, 31-33 tag, 32-33, 85 tags, 81-83closing tags, 30creating custom tags, 58 tags, 170 tags, 83empty tags, 30, 33 tags, 83event handlers, 68, 291 tags, 81, 86formatting and older HTMLtags, 81older HTML tags, 81ordered lists, 95-96, 226outlines, 98-100resumes, creating, 87-89small text, 83special characters, 89-91subscript text, 83superscript text, 83unordered lists, 95-96, 226whitespace, 32TextEdit, creating HTML files, 27validating, 36-37web contentabsolute addresses, 124-125absolute links, 124anchor tags, 126-129creating, 2-3delivering, 3-5directories, 123-124folders, 123-125images as links, 134linking between, 129-131linking to email addresses,132-133linking to external web con-tent, 131-132opening links in new browserwindows, 134organizing, 123-124publishing locally, 18-19publishing to blogs, 19relative addresses, 124-125relative-root addresses, 124relative-root links, 124selecting web hostingproviders, 6-8, 26styling links via CSS, 134-138website architectures,creating, 125whitespace, 32Word, creating HTML files, 2729_9780672333323_index.qxd 10/26/11 10:32 PM Page 577HTML578clip art, 149color, adjusting, 154compression, 150copyrights and, 149Creative Commons licenses, 149cropping, 151-152dithering, 158dynamic websites, changingimages via user interaction,281-283file sizes, 150Flickr, 161-163GIFs, 157-158animated images, 160-161tiled backgrounds, 159-160transparent images, 159Google Images, 161Google Picasa, 149height/width, specifying, 165image maps, 173-178JPEGscompression, 155tiled backgrounds, 159-160links, images as, 134, 169-171Picnik, 149PNGs, 158-159Red Eye Removal, 154republishing, 163resizing, 153resolution, 150rollover images, 394tables and, 116text descriptions, 163-164transparent images, 158uses of, 150web pagesgrabbing images from, 149placing images on web pages,161-163Images (Google), 161WYSIWYG editors, creating HTMLfiles, 27XHTML, development of, 40XML, development of, 39-40HTML Validator, 37hyperlinks. See linkshyphenating CSS properties, 312I tags (HTML), 81-83if statements (JavaScript), 369conditional expressions, 317,370-373conditional operators, 370else keyword, 372-375logical operators, 371multiple conditions, testing, 373HTML files, 374JavaScript files, 374-375. See inline framesimage maps, creatingcreating, web resources, 231CSS, 231-235tutorials, 231imagesaligninghorizontal alignment, 165-166vertical alignment, 167-168animated images, 160-161auto image loading, webbrowsers, 20background images, 171-172backgroundsbackground images, 171-172tiled backgrounds, 159-160banners, creating, 156buttons, creating, 156CD-ROM, transferring images to, 150 tags (HTML), 162-163in value (CSS height/width properties), 53increment expressions (for loops), 377incrementing/decrementing variables(JavaScript), 327indentingcode, 548text, web page creation, 35index pages, HTML file management,16-18indexes (JavaScript), for loops, 377infinite loops (JavaScript), 380-381initial expressions (for loops), 377inline frames, 426-429inline styles (CSS), 60-61inline value (CSS display property), 53inset value (CSS border-style properties), 54installingGreasemonkey, 464user scripts, 466internal style sheets (CSS), 46, 59-61Internet, ISP selection, 25-26Internet Explorer, 9DOCTYPE declarations, 212error messages, displaying, 77event properties, 393Internet Explorer 6.0, JavaScripttesting, 74Trixie, 465installing user scripts, 466managing user scripts, 467turning on/off, 468interpreted languages, 66ISP (Internet service providers),selecting, 25-26italic text, 56, 82-8329_9780672333323_index.qxd 10/26/11 10:32 PM Page 578JavaScript 579data types, 330-331Date objects, time display exam-ple, 72design patterns, 439development of, 66do, while loops, 380document.write statements, 68, 73documenting code, 438DOM, 280-281adding text to web pages,319-321anchor objects, 303children, 308document objects, 300-303, 306hiding/showing objects, 316-317history objects, 303-305layers, 311-315link objects, 303, 306location objects, 305-306modifying text in web pages,317-318naming objects, 299nodes, 307-310object methods, 299object properties, 299objects, 352parents, 308referencing objects, 299showing/hiding objects,316-317siblings, 308structure of, 306-307window objects, 300, 409-418else keyword, 372-375error handling, 76-78, 446-449event handlers, 68-70, 290-291,389, 435alert() function, 295best practices, 294-295creating, 390-391cross-browser scripting, 437defining, 390-391JJavaScript, 274. See also AJAXaccessibility, 439AJAX, 71live search forms, creating,494-496quiz building example, 489-490requests, 480, 494-495arraysaccessing elements of, 338declaring, 337length of, 338numeric arrays, 337, 340-342string arrays, 338-340best practices, 293-295, 433accessibility, 439behavior, 434comments, 438content, 434design patterns, 439documenting code, 438event handlers, 435-437presentation, 434progressive enhancement, 435usability, 438-439web standards and browserspecificity, 437-438break statements, 381browser specificity, web standards,437-438browsers, reading information on,440-443capabilities of, 66, 70case statements, 376comments, 293, 438conditional expressions, 370-373conditional operators, 370continue statements, 382cross-browser scriptingdebugging browsers, 444feature sensing, 437, 443-444event objects, 392keyboard events, 397-399mouse events, 394-397,400-404multiple event handlers,391-392naming, 390onLoad events, 399onUnload events, 400quotation marks and, 390syntax of, 390W3C event model, 436-437events, 69expressions, 328external scripts, 69flow controlbreak statements, 381case statements, 376continue statements, 382continuing loops, 382do, while loops, 380escaping loops, 381for loops, 377-378for, in loops, 382-384if statements, 369-375infinite loops, 380-381switch statements, 375-376while loops, 379-380for loops, 377-378for, in loops, 382-384form elements, accessing, 528form events, 527-528forms, validating, 70function call statements, 288functions, 68, 288alert() function, 295arguments, 348calling, 349-350constructor functions, 354defining, 347-349math functions, 361-36329_9780672333323_index.qxd 10/26/11 10:32 PM Page 579JavaScript580librariesadding effects via, 457adding to HTML documents,457AJAX Frameworks, 456building scripts, 458-459Dojo, 456downloading, 457jQuery, 454-455Mochikit, 456MooTools, 456Prototype, 453-454Script.aculo.us, 455-459using effects via, 457Yahoo! UI Library, 456logical operators, 371loopsbreak statements, 381continue statements, 382escaping, 381modifying scripts, 74-76modulo operators, 362multiple conditions, testing,374-375non-JavaScript browsersavoiding errors, 446-449detecting, 445-446JavaScript optionality, 446 tag, 445-446 tag, 457objects, 288built-in objects, 289, 352, 356-361, 364-366child objects, 353creating, 353creating instances of, 356custom objects, 289date object, 364-366defining, 354-355defining methods, 355-356naming, 292parameters, 288, 348returning values, 351-352Gmail and, 446Greasemonkey, 463API functions, 471browser support, 465creating user scripts, 468, 475debugging user scripts,474-476describing user scripts,469-470finding user scripts, 466installing, 464installing user scripts, 466managing user scripts, 466-467metadata and user scripts,469-470site-specific user scripts,472-473testing user scripts, 468-471text area macro user scripts,475-476turning on/off, 468history of, 66HTML, 274comments, 276JavaScripts advantages over, 299if statements, 369conditional expressions,370-373conditional operators, 370-371else keyword, 372-375testing multiple conditions,373-375images, changing via user interac-tion, 281-283infinite loops, 380-381.js files, 69JSON, 481layers, controlling positioning of,311-315DOM objects, 289, 352frames and, 425math object, 360-363methods, 289, 353, 365naming, 292properties, 288, 353prototypes, 357-358simplifying scripting via,354-356operators, 328-330order of script operation, deter-mining, 291output, creating, 73parseFloat() function, 331parseInt() function, 331programming language versusscripting language, 66progressive enhancementstrategies, 294random web content, displayingvia, 276-280remote scripting, 71 tags, 67-72, 457scripting language versus pro-gramming language, 66special effects, 70statementsconditional statements, 289for statements, 290function calls, 288loops, 290objects, 288-289, 292plus signs (+) in, 73semicolons, 72time display example, 72variables, 288, 292stringscalculating length of, 334converting case, 334string arrays, 338-340string objects, 332-334, 357substrings, 335-33729_9780672333323_index.qxd 10/26/11 10:32 PM Page 580link objects (DOM) 581declaring, 326global variables, 326incrementing/decrementing, 327local variables, 326localtime variable, 72naming, 292, 325-326scope of, 326time display example, 72UTC variable, 72web pages, adding JavaScript to,67-68, 73-74websites, navigating, 70while loops, 379-380with keyword, 363-364join() method, 342JPEGcompression, 155tiled backgrounds, 159-160jQuery JavaScript library, 454-455.js files, 69JSON, 481.jsp file extension, 27JSP scripting language, 274K - Lkeyboard events, 397-399Koch, Peter-Paul, 444languages (foreign), formatting textfor, 89-91layers (DOM)creating, 311moveable layers, 311-315positioning, controlling viaJavaScript, 311-315layoutsCSS layout properties, 52-53fixed layouts, 254switch statementssyntax of, 376using multiple conditions,375-376syntax, 332case-sensitivity, 292functions, 292objects, 292reserved words, 292spacing (whitespace), 292variables, 292testing scripts, Internet Explorer6.0, 74textprinting via, 275text editors, 74time display exampleadding scripts to web pages,73-74creating output, 73Date objects, 72error handling, 76-78modifying scripts, 74-76 tags, 71-72statements, 72testing scripts, 74variables, 72toLowerCase() method, 334toUpperCase() method, 334Trixie, 465installing user scripts, 466managing user scripts, 467turning on/off, 468.txt file extension, 74unobtrusive scripting, 433,447-449usability and, 438-439using, 68variables, 288assigning values to variables,327-328fixed/liquid hybrid layouts, 258defining columns in, 260-262setting column height,264-268setting minimum width,262-263structure of, 258-259liquid layouts, 255-257web resources, 253leading (text), line-height property(CSS), 56libraries (AJAX), 482ajaxRequest function, 486ajaxResponse function, 486creating, 485-486quiz building exampleHTML files, 487-488JavaScript files, 489-490testing, 490-491XML files, 488-489using, 486libraries (JavaScript)AJAX Frameworks, 456Dojo, 456downloading, 457effects, using via, 457HTML documents, adding librariesto, 457jQuery, 454-455Mochikit, 456MooTools, 456Prototype, 453-454Script.aculo.us, 455-459scripts, building, 458-459Yahoo! UI Library, 456line breaks, web page creation, 32-33line-height property (CSS), 56line-through text, style sheets, 56 tags (CSS), 50link objects (DOM), 303, 30629_9780672333323_index.qxd 10/26/11 10:32 PM Page 581links582regular lists versus, 235secondary navigation, 236vertical navigation, 236-244nested lists, 97-100, 226ordered lists, 95-96, 226outlines, creating via lists, 98-100unordered lists, 95-96, 226live search formsAJAX, creating via, 496HTML forms, 492JavaScript front end, 494-495PHP back end, 493-494example, requirements for, 496LiveScript, JavaScript development, 66loading web content, timing, 20local time values, date object(JavaScript) and, 365-366local variables (JavaScript), 326localtime variable (JavaScript), 72location objects (DOM), 305-306logical operators (JavaScript), 371loops (JavaScript), 290break statements, 381continue statements, 382continuing, 382do, while loops, 380escaping, 381for loops, 377-378for, in loops, 382-384infinite loops, 380-381while loops, 379-380LunarPages web hosting provider, 7MMacintosh computers, HTML file creation, 27managingdomain names, 6HTML files, 14linksabsolute links, 124anchor tagsidentifying locations within webpages via, 126linking to anchor locations,126-129naming, 127color and, 144documents, 303, 306email addresses, 132-133images, 134, 169-171.js files, 69multimedia/website integration,179-180opening in new browser windows, 134relative-root links, 124styling via CSS, 134-138web contentlinking between, 129-131linking to external web content, 131-132liquid layouts, 253-257list-item value (CSS display property), 53listsborders, styling, 227-228color, styling, 227-228CSS box model and, 226-229definition lists, 96, 226list item indicators, placing,229-231list-style-image property (CSS), 226list-style-position property (CSS),226, 229-231list-style-type property (CSS), 226list-style-type style rule (CSS),99-101multitiered lists, 100-101navigation listshorizontal navigation, 245-248primary navigation, 236document roots, 15-16index pages, 16-18user scripts, 466-467web pages, headings, 34-36websitescoding clarity, 548comments, 546-547documenting code, 546-547indenting code, 548maintainable code, 546-548version control, 548-550margin property (CSS), 191-199marginsbrowsers and, 226-229CSS box model, 210marked up text in HTML, 2Mashable.com, publicizing websitesvia, 554math object (JavaScript)decimal numbersrounding, 360truncating, 360math functions, 361-363random numbers, generating,360-363media-specific style sheets, 503-504metadata, user scripts, 469-470methodsDOM objects, 299document objects, 302, 310history objects, 303location objects, 306JavaScript objects, 289, 353adding to string objects, 357defining, 355-356get methods, 365prototypes, 357-358MIME types, 182mm value (CSS height/width properties), 53Mochikit JavaScript library, 45629_9780672333323_index.qxd 10/26/11 10:32 PM Page 582objects (DOM) 583event handlers, 390files with HTML tags, 27form data, 519-520JavaScript functions, 292JavaScript objects, 292JavaScript variables, 292, 325-326NaN (not a number), 331navigating websites, JavaScript, 70navigation listshorizontal navigation, 245-248primary navigation, 236regular lists versus, 235secondary navigation, 236vertical navigation, 236-238multilevel vertical navigation,240-244single-level vertical navigation,239-241nested framesets, 425nested lists, 97-100, 226nested tags (HTML), 97nodes (DOM), 307methods of, 310properties, 309non-viewable window areas(browsers), 254none value (CSS)border-style properties, 54display property, 53 tag (JavaScript), detectingnon-JavaScript browsers, 445-446Notepad, creating HTML files, 26null values (JavaScript), 330numbersarithmetic mean, 363decimal numbersrounding, 360truncating, 360random numbers, generating,360-363numeric arrays (JavaScript), 337,340-342numeric data types (JavaScript), 330modifyingframe borders, 424-425JavaScript scripts, 74-76text in web pages, 317-318modulo operators (JavaScript), 362monitors and color, 144monospaced text, 84-85MooTools JavaScript library, 456mouse eventsmousestatus function, 396onClick event handler, 394-397,400-404onDblClick event handler, 395onMouseDown event handler,395-397onMouseOut event handler, 394onMouseOver event handler, 394onMouseUp event handler,395-397rollover images, 394mousestatus function, mouse eventsand, 396moveable layers (DOM), 311-315moving browser windows, 413-414Mozilla Firefox web browser, 9multimediaQuickTime, 180website integration with, 178-179embedded multimedia files,180-183links, 179-180streaming multimedia, 181tips for using, 184-185multiple event handlers, 391-392multitiered lists, 100-101Nnaminganchor tags, 127DOM objects, 299O tags (XHTML), 180-183objects (built-in), extending definitions, 359objects (DOM), 352anchor objects, 303document objects, 300anchor objects, 303displaying document informa-tion, 301-302link objects, 303, 306methods of, 302properties of, 301writing text within documents, 302hiding/showing, 316-317history objects, 303-305link objects, 303, 306location objects, 305-306methods, 299document objects, 302history objects, 303location objects, 306naming, 299parents, 308properties, 299document objects, 301history objects, 303location objects, 305-306referencing, 299showing/hiding, 316-317siblings, 308window objects, 300creating browser windows,410-411displaying dialog boxes,417-418moving browser windows,413-414opening/closing browser windows, 411-41229_9780672333323_index.qxd 10/26/11 10:32 PM Page 583objects (DOM)584string objectsadding methods to, 357assigning values, 332-334combining values, 332-334creating, 332Office Online Clip Art and Media web-site (Microsoft), 149onClick event handler, 394-397,400-404onDblClick event handler, 395online resources, CSS referenceguide, 47onLoad events, 399onMouseDown event handler, 395-397onMouseOut event handler, 394onMouseOver event handler, 394onMouseUp event handler, 395-397onUnload events, 400opening tags (HTML), 30opening/closing, browser windows,411-412Opera, 9, 465operators (JavaScript), 328-330ordered lists, 95-96, 226organizingHTML files, 14document roots, 15-16index pages, 16-18web content, 123-124web pages, headings, 34-36websites, 538Amazon.com, 543BAWSI.org, 545ESPN.com, 540-542larger websites, 543-546simple websites, 540-542single-page websites, 538-539Starbucks.com, 544outlines, creating via lists, 98-100outset value (CSS border-style properties), 54properties of, 409-410resizing browser windows,413-414timeouts, 414-416objects (JavaScript), 288built-in objects, 289, 352, 356-359date object, 364-366math object, 360-361child objects, 353creating, 353custom objects, 289date objectconverting date formats, 366creating, 364local time values, 365-366reading date values, 365setting date values, 364-365time zones, 365defining, 354-355DOM objects, 289, 352instances, creating, 356math objectgenerating random numbers,360-363math functions, 361-363rounding decimal numbers, 360truncating decimal numbers, 360methods, 289, 353adding to string objects, 357get methods, 365prototypes, 357-358methods, defining, 355-356naming, 292properties, 288prototypes, 357-358values, 353prototypes, 357-358scripting, simplifyingcreating object instances, 356defining object methods,355-356defining objects, 354-355overflow property (CSS), text flow and, 220overlapping elements, 213, 217-219P tags, 31-33paddingbrowsers and, 226-228CSS box model, 210padding property (CSS), 56, 191,199-202paragraphsaligning, 93-95web page creation, 32-33parameters (JavaScript functions),288, 348parent folders, 125parents (DOM), 308parseFloat() function (JavaScript), 331parseInt() function (JavaScript), 331periods (.), JavaScript objects, 289Perl scripting language, 274photosaligninghorizontal alignment, 165-166vertical alignment, 167-168background photos, 171-172background-image style property, 172CD-ROM, transferring photos to, 150cropping, 151-152Flickr, 161-163Google Images, 161height/width, specifying, 165image maps, 173-178links, turning images into, 169-171Red Eye Removal, 154republishing, 163resizing, 15329_9780672333323_index.qxd 10/26/11 10:32 PM Page 584 tag (JavaScript) 585programming languages, strings, 72progressive enhancementstrategies for, 294web design and, 435prompts (dialog boxes), 417-418propertiesDOM objects, 299document objects, 301history objects, 303location objects, 305-306relationship properties, 309JavaScript objects, 288prototypes, 357-358values, 353Prototype JavaScript library, 453-454prototypes (JavaScript objects),357-358pseudoclasses, 134-138pt value (CSS height/width proper-ties), 53publicizing websites, 553-555publishing web contentblog publication, 19local publication, 18-19pull-down pick lists (forms), 524-525purchasing domain names, 6px value (CSS height/width properties), 53Python scripting language, 274Q - RQuickTime, 180QuirksMode, debugging code, 444quiz building example (AJAX)HTML files, 487-488JavaScript files, 489-490testing, 490-491XML files, 488-489text descriptions, 163-164web pages, placing photos on,161-163Photoshop (Adobe), 148PHP, 274, 514AJAX live search forms, creating,493-494.php file extensions, 27Picasa (Google), 149Picnik, 149plain text, 26, 34, 82plug-ins, 180plus signs (+), JavaScript statements, 73PNGs, 158-159pop-up windows, 134, 528-530positionable elements. See layerspositioningabsolute positioning, 213-217overlapping elements, 213,217-219positioning property, 213relative positioning, 213-215presentation, JavaScript scripting bestpractices, 434 tags (HTML), 84-85pricing, web hosting providers, 6primary navigation, 236printingPrint Preview, viewing web pagesin, 508-509print-friendly web pages, 499criteria for print-friendliness,500-503designing style sheets for printpages, 505-508media-specific style sheets,503-504reviewing content for print-friendliness, 500viewing web pages in PrintPreview, 508-509text via JavaScript, 275radio buttons (forms), 523-524random numbers, generating, 360-363Red Eye Removal, 154relationship properties (DOM nodes), 309relative addresses and web pages,124-125relative positioning, 213-215display property (CSS), 53positioning property, 214relative-root addresses and webpages, 124relative-root links and web pages, 124reliability, web hosting providers, 6remote scripting, 71. See also AJAXrepublishing images, 163reserved words, JavaScript syntax, 292resizingbrowser windows, 413-414images, 153resolution (graphics), 150ridge value (CSS border-style properties), 54rollover images, 394rounding decimal numbers, 360rows (tables), creating, 107Ruby scripting language, 274SSafari, 9, 465sans-serif font (text), 86saving filesfiles with HTML tags, 27.js files, 69scaling images, 153 tag (JavaScript), 67-69detecting non-JavaScriptbrowsers, 457time display example, 71-7229_9780672333323_index.qxd 10/26/11 10:32 PM Page 585Script.aculo.us JavaScript library586site-specific user scripts,472-473testing user scripts, 468-471text area macro user scripts,475-476turning on/off, 468interpreted languages, 66JavaScript, 274accessibility, 439adding scripts to web pages,73-74adding to web pages, 67-68advantages over HTML, 299AJAX, 71AJAX live search forms, 494-496AJAX quiz building example,489-490AJAX requests, 480, 494-495arrays, 337-342best practices, 293-295,433-439break statements, 381capabilities of, 66, 70case statements, 376changing images via user interaction, 281-283comments, 293, 438conditional expressions,370-373conditional operators, 370continue statements, 382continuing loops, 382creating .js files, 69creating output, 73cross-browser scripting, 437,443-444data types, 330-331Date objects, 72design patterns, 439determining order of scriptoperation, 291development of, 66Script.aculo.us JavaScript library,455-459scriptingAJAX, 479ajaxRequest function, 486ajaxResponse function, 486back end, 480, 493-494debugging applications, 491-496examples of, 481frameworks, 482front end, 480, 494-495JavaScript client, 480libraries, 482, 485-491limitations of, 482live search forms, 492-496quiz building example, 487-491requests, 480, 483-484,493-495server-side scripts, 480,493-495XML and, 481XMLHttpRequest, 483-484ASP, 274client-side scripting, 274comments, adding, 293cross-browser scripting, 443debugging browsers, 444event handlers and JavaScript, 437feature sensing, 437, 443-444Greasemonkey, 463-464API functions, 471browser support, 465creating user scripts, 468, 475debugging user scripts, 474-476describing user scripts, 469-470finding user scripts, 466installing, 464installing user scripts, 466managing user scripts, 466-467metadata and user scripts,469-470displaying random web contentvia, 276-280do, while loops, 380document.write statements,68, 73documenting code, 438DOM, 280-281, 299-321,409-418else keyword, 372-375error handling, 76-78escaping loops, 381event handlers, 68-70, 290-291, 294-295, 389-392, 394-404, 435-437window objects (DOM), 409events, 69expressions, 328external scripts, 69flow control, 369-384for loops, 377-378for, in loops, 382-384form events, 527-528frames and JavaScript objects, 425functions, 68, 288, 292,347, 352-354, 361-363Gmail and, 446Greasemonkey, 463-476history of, 66HTML and, 274-276if statements, 369-375infinite loops, 380-381.js file extension, 69JSON, 481libraries (third-party), 453-459linking to .js files, 69logical operators, 371modifying scripts, 74-76navigating websites, 70non-JavaScript browsers,445-449objects, 288-289, 292,352-361, 364-36629_9780672333323_index.qxd 10/26/11 10:32 PM Page 586sizing 587usability, 438-439using, 68validating forms, 70variables, 72, 288, 292,325-328web standards and browserspecificity, 437-438while loops, 379-380with keyword, 363-364JSON, 481JSP, 274languages, 65Perl, 274PHP, 274, 514Python, 274remote scripting. See AJAXRuby, 274server-side scripts, 274, 480,493-495text editors, 74Trixie, 465installing user scripts, 466managing user scripts, 467turning on/off, 468.txt file extension, 74unobtrusive scripting, 433,447-449user scriptscreating, 468, 475debugging, 474-476describing, 469-470finding, 466Greasemonkey, 463-476installing, 466managing, 466-467metadata and, 469-470scripting, 465site-specific scripts, 472-473testing, 468-471text area macro user scripts,475-476Trixie, 465-467VBScript, 274operators, 328-330parseFloat() function, 331parseInt() function, 331plus signs (+) in statements, 73printing text via, 275programming language versusscripting language, 66progressive enhancementstrategies, 294reading browser information,440-443remote scripting, 71saving .js files, 69 tags, 67-72scripting language versus programming language, 66simplifying, 354-356special effects, 70statements, 72, 287statements, conditional state-ments, 289statements, for statements, 290statements, function calls, 288statements, loops, 290statements, objects,288-289, 292statements, variables, 288, 292strings, 332-340, 357switch statements, 375-376syntax, case-sensitivity, 292syntax, functions, 292syntax, objects, 292syntax, reserved words, 292syntax, spacing (whitespace), 292syntax, variables, 292testing scripts, 74time display example, 71-78toLowerCase() method, 334toUpperCase() method, 334Trixie, 465-468unobtrusive scripting, 433,447-449scrolling lists (forms), 524-525search engines, 445heading tags (HTML), 36SEO, 553, 562-563spamming, 557websites, listing with searchengines, 555-562searchesGoogle searches, 4live search forms, creating viaAJAX, 496HTML forms, 492JavaScript front end, 494-495PHP back end, 493-494secondary navigation, 236security, user scripts, 465selection lists (forms), 524-525selectors (CSS), 57semicolons (;), JavaScript statements,72, 287server-side scripting, 274, 480, 493-495serversbrowsers, basic server interaction, 3-5document roots, 13-16FTP client connections, 13space, 6uptime, 6web hosting providers, selecting, 6shorthand conditional expressions(JavaScript), 372-373siblings (DOM), 308single-page websites, 538-539site-specific user scripts, 472-473sizingborders (tables), 107browser windows, 413-414cells (tables), 111-113elements (CSS box model),210-212images, 153tables, 110-11329_9780672333323_index.qxd 10/26/11 10:32 PM Page 587sizing588strings (JavaScript), 330case, converting, 334length of, calculating, 334string arrays, 338sorting, 340splitting, 339string objectsadding methods to, 357assigning values, 332-334combining values, 332-334creating, 332substringsfinding, 336-337getting single characters, 336using parts of strings, 335-336 tags (HTML), 83strong text. See boldface textstyle classes (CSS), 57-58style IDs (CSS), 59style properties (CSS), 57style rules (CSS), 46, 50color style rule, fonts and, 86-87font weight style rule, 83font-family style rule, 86font-size style rule, 86-87list-style-type style rule, 99-101multiple style properties in, 58text-align style rule, 93-95viewing, 51style sheetsalign property, 191, 203-204box model, 209, 212borders, 210content, 210lists and, 226-229lists and, 226margins, 210padding, 210sizing elements, 210-212clear property, text flow and, 220textfont-size style rule (CSS), 86-87style sheets, 50skeleton pages. See templates tags (HTML), 83small text, 83solid value (CSS border-style proper-ties), 54-55sorting arrays (JavaScript)numeric arrays, 340-342string arrays, 340source editors, blogs and, 19spacing (whitespace), JavaScript syntax, 292spamming search engines, 557spanning with tables, 115special effects (JavaScript), 70splitting string arrays (JavaScript), 339Starbucks.com, website organization, 544statements (JavaScript), 287conditional statements, 289for statements, 290function calls, 288loops, 290objects, 288built-in objects, 289custom objects, 289DOM objects, 289naming, 292plus signs (+) in, 73semicolons, 72time display example, 72variables, 288, 292Stephenson, Sam, 453streaming multimedia, 181 tags (HTML), 84strikethrough text, style sheets, 56string arrays, sorting, 340strings, 72color, specifying via style sheets,146-148creating, 47, 49-52CSS tags, 50CSS Zen Garden, 191-192definition of, 45DOCTYPE declarations, 212external style sheets, 46-51float property, 191, 204-207, 220formatting properties, 53background-color property, 55border property, 54-55border-bottom property, 54-55border-color property, 54-55border-left property, 54-55border-right property, 54-55border-style property, 54-55border-top property, 54-55border-width property, 54color property, 56font property, 56font-family property, 55font-size property, 55font-style property, 56font-weight property, 56line-height property, 56padding property, 56text-align property, 55-56text-decoration property, 56text-indent property, 55HTML documents, linking to, 50image maps, creating, 231-235inline styles, 60-61internal style sheets, 46, 59-61italic text, 56layoutsdisplay property, 52-53fixed layouts, 254fixed/liquid hybrid layouts,258-268height property, 5329_9780672333323_index.qxd 10/26/11 10:32 PM Page 588tags (HTML) 589textformatting color, 46sizing, 50underline text, 56validating, 61web browsers, CSS support, 51z-index property, 217-219 tags (HTML), 83subscript text, 83substringsfinding, 336-337parts of strings, using, 335-336single characters, getting, 336Subversion website version control, 550 tags (HTML), 83superscript text, 83supportCSS, web browser support for, 51web hosting providers, selecting, 6switch statements (JavaScript)multiple conditions, using,375-376syntax of, 376syntax, JavaScript, 332T tags (HTML), 107tablesaligning within, 113-115borderssizing, 107spacing, 116specifying color via CSS,146-148cellscreating, 107sizing, 111-113color in, 115liquid layouts, 253- 257width property, 53line-through text, 56links, styling, 134-138list-style-image property, 226list-style-position property, 226,229-231list-style-type property, 226listshorizontal navigation, 245-248navigation lists, 236-248vertical navigation, 236-244margin property, 191-199media-specific style sheets, 503-504overflow property, text flow and, 220padding property, 191, 199-202positioningabsolute positioning, 213-217overlapping elements, 213,217-219positioning property, 213relative positioning, 213-215z-index property, 217-219print pages, designing style sheetsfor, 505-508properties, hyphenating, 312selectors, 57strikethrough text, 56style classes, 57-58style IDs, 59style properties, 57style rules, 46, 50color style rule, 86-87font weight style rule, 83font-family style rule, 86font-size style rule, 86-87list-style-type style rule, 99-101multiple style properties in, 58text-align style rule, 93-95viewing, 51creating, 107-110headings, creating, 108images in, 116page layout via, 116-117rows, creating, 107sizing, 110-113spanning within, 115uses for, 107tags (CSS), 50elements and, 46 tag, 50selectors, 57tags (HTML), 5, 28 tags, 170identifying locations within webpages, 126linking to anchor locations,126-129naming, 127attributes, 92-93, 123 tags, 81-83 tags, 83 tag, 27, 31-33 tags, 32-33, 85closing tags, 30containers, 307custom tags, creating, 58 tags, 170 tags, 83empty tags, 30, 33event handlers, 68 tags, 81, 86 tags, 27, 31-33, 68heading tags, 34-36horizontal rule tag, 33 tag, 33 tag, 27, 31-33 tags, 81-83 tags, 162-163line breaks, 32-33naming files with, 2729_9780672333323_index.qxd 10/26/11 10:32 PM Page 589tags (HTML)590paragraphs, 93-95tables, 113-115text-align style rule (CSS),93-95alternate text, 163-164ASCII text, 26, 34, 82color, CSS and, 56, 146-148documents, writing text within, 302flowing text, 220fontsArial font, 86color style rule (CSS), 86-87font property (CSS), 56font weight style rule (CSS), 83font-family property (CSS), 55font-family style rule (CSS), 86font-size property (CSS), 55font-size style rule (CSS), 86-87font-style property (CSS), 56font-weight property (CSS), 56sans-serif font, 86Times Roman font, 86typewriter font. See mono-spaced textformattingaligning text, 92-95big text, 83boldface text, 82-83customizing fonts in HTML,85-89definition lists, 96, 226foreign languages, 89-91italic text, 82-83monospaced text, 84-85multitiered lists, 100-101nested lists, 97-100, 226ordered lists, 95-96, 226outlines, 98-100resumes, creating, 87-89small text, 83special characters, 89-91nested tags, 97older HTML tags, formatting and, 81opening tags, 30 tag, 31-33paragraphs, 32-33 tags, 84-85pseudoclasses, 134-138saving files with, 27 tags, 67-72 tags, 83 tags, 84 tags, 83 tags, 83 tags, 83 tags, 107 tags, 107 tags, 108 tags, 27, 31-33, 36 tags, 107 tags, 84-85 tags, 84xml : lang attribute, 31xmlns attribute, 31tags (XHTML) tags, 183 tags, 180-183tasks, combining. See functions(JavaScript) tags (HTML), 107templates, web page creation, 31testingAJAX quiz building example, 490-491JavaScript scripts, Internet Explorer6.0, 74user scripts, 468, 470-471web content, 19-20websites, multiple web browsers,8-9, 26textaligningattributes, 92-93block-level elements, 93-95subscript text, 83superscript text, 83unordered lists, 95-96, 226web page creation, 33-35forms, accepting text input in, 519graphics and, 163-164HTML, whitespace, 32indenting, web page creation, 35italic text, style sheets, 56leading, line height property(CSS), 56line breaks, web page creation,32-33line-through text, style sheets, 56paragraphs, web page creation,32-33plain text, 26, 34, 82printing, JavaScript and, 275sizing, font-size style rule (CSS),86-87strikethrough text, style sheets, 56style sheets, 56formatting color, 46sizing, 50text-align property (CSS), 55-56text-align style rule (CSS), 93-95text area macro user scripts,475-476text areas (forms), 526text-decoration property (CSS), 56text editors, 74text fields (forms), 526text-indent property (CSS), 55underline text, style sheets, 56web browsers, adjusting font sizesettings, 20web pagesadding to web pages, 319-321modifying text in, 317-318TextEdit, creating HTML files, 27 tags (HTML), 10829_9780672333323_index.qxd 10/26/11 10:32 PM Page 590variables (JavaScript) 591Trixie, 465turning on/off, 468user scriptsinstalling, 466managing, 467truncating decimal numbers, 360 tags (HTML), 84-85turning on/offGreasemonkey, 468Trixie, 468.txt file extension, 74typewriter font. See monospaced textU tags (HTML), 84underline text, style sheets, 56unobtrusive scripting, 433, 447-449unordered lists, 95-96, 226uptime, servers and, 6URLs, opening, 483usability, JavaScript best practices,438-439USB drivers, 18user input, accepting in forms, 519user scriptscreating, 468, 475debugging, 474-476describing, 469-470finding, 466Greasemonkey, 463API functions, 471browser support, 465creating user scripts, 468, 475debugging user scripts, 474-476describing user scripts, 469-470finding user scripts, 466installing, 464installing user scripts, 466third-party JavaScript librariesAJAX Frameworks, 456Dojo, 456downloading, 457effects, adding via, 457-459effects, using, 457HTML documents, adding librariesto, 457jQuery, 454-455Mochikit, 456MooTools, 456Prototype, 453-454Script.aculo.us, 455-459scripts, building, 458-459Yahoo! UI Library, 456tiled backgrounds, 159-160time, displaying (JavaScript example), 71Date objects, 72error handling, 76-78output, creating, 73scriptsadding to web pages, 73-74modifying, 74-76 tags, 71-72testing, 74statements, 72variables, 72time zones, date object (JavaScript)and, 365timeouts (browser windows), 414-416Times Roman font (text), 86timing loading of web content, 20 tags, 27, 31-33, 36toLowerCase() method (JavaScript), 334tool tips, 164toUpperCase() method (JavaScript), 334 tags (HTML), 107transferring HTML files, FTP clients,10-13, 29transparent images, 158triadic color schemes, 143managing user scripts, 466-467metadata and user scripts,469-470site-specific user scripts,472-473testing user scripts, 468-471text area macro user scripts,475-476installing, 466managing, 466-467metadata and, 469-470security, 465site-specific scripts, 472-473testing, 468-471text area macro user scripts,475-476Trixie, 465installing user scripts, 466managing user scripts, 467UTC (Universal Time [Coordinated]), 71UTC variable (JavaScript), 72Vvalidatingforms, 70, 531-532style sheets, 61web content, 36-37variables (JavaScript), 288declaring, 326global variables, 326incrementing/decrementing, 327local variables, 326localtime variable, 72naming, 292, 325-326scope of, 326time display example, 72UTC variable, 72values, assigning to variables,327-32829_9780672333323_index.qxd 10/26/11 10:32 PM Page 591VBScript scripting language592JavaScript objects and, 425linking windows to frames,423-424modifying borders, 424-425nested framesets, 425Google Chrome, 9, 465history, accessing, 2, 303-305HTML development, 2images, auto image loading, 20information, reading via JavaScriptdishonest browsers, 442-443displaying information, 440-441Internet Explorer, 9event properties, 393Trixie, 465-468links, opening in new browser win-dows, 134lists, displaying in, 97margins and, 226-229non-Internet Explorer event proper-ties, 393-394non-JavaScript browsersavoiding errors, 446-449detecting, 445-446JavaScript optionality, 446 tag, 445-446 tag, 457non-viewable window areas, 254Opera, 9, 465padding and, 226-228pop-up windows, 134popularity of, 26Safari, 9search engines, 445sensing. See feature sensingservers, basic browser serverinteraction, 3-5text, adjusting font size settings, 20websitescomparing, 26testing, 8-9, 26VBScript scripting language, 274version control, websites and, 548-550vertical image alignment, 167-168vertical navigation, 236-238multilevel vertical navigation,240-244single-level vertical navigation,239-241vertical-align style property, 167video, embedding, 182viewingCSS style rules, 51HTML files, 29web pages, 29visual editors, blogs, 19WW3C color standards, 143W3C CSS Validator, 61W3C event model, 436-437W3C Validation Service, 37-38web browsers140 cross-browser color names,143-144cross-browser scriptingdebugging browsers, 444feature sensing, 437, 443-444CSS, support for, 51debugging, 444development of, 2dialog boxes, displaying, 417-418distributing, 18Firefox, 9, 464frames, 418-420adding individual frames, 423creating frameset documents,421-423frames array, 426inline frames, 426-429windowscreating, 410-411linking frames to windows,423-424moving, 413-414opening/closing, 411-412resizing, 413-414timeouts, 414-416web contentabsolute addresses, 124-125aligning via align property (CSS),191, 203-204clear property (CSS), text flowand, 220color140 cross-browser colornames, 143-144best practices, 141-143Colorblind Web Page Filter tool, 148hexadecimal color codes,144-146using, 141-143W3C color standards, 143comparing, 26creating, 2-3ASCII text, 26, 34boilerplate code, 28-30comparing web content HTMLcodes, 37formatting text, 33-35HTML tags, 27-33indenting text, 35line breaks, 32-33organizing content via head-ings, 34-36overview of, 29paragraphs, 32-33plain text, 26, 34templates, 31CSS box model, 209borders, 210content, 21029_9780672333323_index.qxd 10/26/11 10:32 PM Page 592web content 593compression, 150copyrights and, 149Creative Commons licenses, 149cropping, 151-152dithering, 158file sizes, 150Flickr, 161, 163GIFs, 157-161GIMP, 149GIMP, adjusting image color, 154GIMP, banners, 156GIMP, buttons, 156GIMP, cropping images, 151-152GIMP, JPEG compression, 155GIMP, resizing images, 153Google Images, 161Google Picasa, 149grabbing from web pages, 149image maps, 173-178JPEGs, 155, 159-160Picnik, 149placing graphics on web pages,161-163PNGs, 158-159Red Eye Removal, 154republishing, 163resizing, 153resolution, 150specifying height/width, 165text descriptions, 163-164tiled backgrounds, 159-160transparent graphics, 158turning graphics into links,169-171uses of, 150images, changing images via userinteraction, 281-283linksabsolute links, 124anchor tags, 126-129email addresses, 132-133lists and, 226-229margins, 210padding, 210sizing elements, 210-212delivering, 3-5directories, 123-124float property (CSS), 191,204-207, 220folders, 123-125forms, 513accessing elements viaJavaScript, 528check boxes, 521-523creating, 514-519displaying data in pop-up windows, 528-530hidden data, 520JavaScript events, 527-528naming form data, 519-520pull-down pick lists, 524-525radio buttons, 523-524scrolling lists, 524-525selection lists, 524-525sending data via email, 530-531submitting form data, 527text areas, 526text fields, 526text input, 519user input, 519validating, 531-532graceful degradation, 434graphicsadjusting color, 154Adobe Photoshop, 148aligning graphics, 165-168animated graphics, 160-161background graphics, 171-172banners, 156buttons, 156choosing software, 149clip art, 149images as, 134linking between, 129-131linking to external web content, 131-132opening in new browser windows, 134relative-root links, 124styling via CSS, 134-138listsborders, 227-228color, 227-228CSS box model and, 226-229horizontal navigation, 245-248navigation lists, 235-248placing list item indicators,229-231vertical navigation, 236-244loading, timing, 20managingcoding clarity, 548comments, 546-547documenting code, 546-547indenting code, 548maintainable code, 546-548version control, 548-550marginsbrowsers and, 226-229margin property (CSS), 191-199multimedia, integrating with, 178embedded multimedia files,180-183links, 179-180tips for using, 184-185organizing, 123-124, 538larger websites, 543-546simple websites, 540-542single-page websites, 538-539overflow property (CSS), text flowand, 220paddingbrowsers and, 226-228padding property (CSS), 191,199-20229_9780672333323_index.qxd 10/26/11 10:32 PM Page 593web content594cells, sizing, 111-113color in, 115creating, 107-110headings, creating, 108images in, 116page layout via, 116-117rows, creating, 107sizing, 110-113sizing borders, 107spacing borders, 116spanning within, 115uses for, 107testing, 19-20text, formatting, 82adding to web pages, 319-321aligning text, 92-95big text, 83boldface text, 82-83customizing fonts in HTML,85-89definition lists, 96, 226flowing text, 220foreign languages, 89-91italic text, 82-83modifying, 317-318monospaced text, 84-85multitiered lists, 100-101nested lists, 97-100, 226older HTML tags, 81ordered lists, 95-96, 226outlines, 98-100resumes, creating, 87-89small text, 83special characters, 89-91subscript text, 83superscript text, 83unordered lists, 95-96, 226transferring, FPT, 29validating, 36-37viewing, 5, 29Print Preview, viewing web contentin, 508-509print-friendly web pages, 499criteria for print-friendliness,500-503designing style sheets for printpages, 505-508media-specific style sheets,503-504reviewing content for print-friendliness, 500viewing web pages in PrintPreview, 508-509progressive enhancement, 435publishinglocally, 18-19to blogs, 19random web content, displayingvia JavaScript, 276-280relative addresses, 124-125relative-root addresses, 124search engines, listing web content with, 555-562style sheetscreating, 47-52definition of, 45external style sheets, 46-51formatting properties, 53-56formatting text color, 46inline styles, 60-61internal style sheets, 46, 59-61layout properties, 52-53linking to HTML documents, 50selectors, 57sizing text, 50style classes, 57-58style IDs, 59style properties, 57style rules, 46, 50-51, 58validating, 61web browser support, 51tablesaligning within, 113-115cells, creating, 107web hosting providers, selecting,6-8, 26website architectures, creating, 125YouTube and, 184web designgraceful degradation, 434progressive enhancement, 435web hosting provider DailyRazor, 7web hosting providersA Small Orange, 7bandwidth, 6control panels, 7-8customer service, 6domain names, purchasing, 6LunarPages, 7pricing, 6reliability, 6selecting, 6-8, 26server space, 6web pagesabsolute addresses, 124-125aligning via align property (CSS),191, 203-204clear property (CSS), text flow and, 220color140 cross-browser color names,143-144best practices, 141-143Colorblind Web Page Filter tool, 148hexadecimal color codes,144-146using, 141-143W3C color standards, 143creatingASCII text, 26, 34boilerplate code, 28-30comparing web page HTMLcodes, 37formatting text, 33-35HTML tags, 27-3329_9780672333323_index.qxd 10/26/11 10:32 PM Page 594web pages 595graphicsadjusting color, 154Adobe Photoshop, 148aligning graphics, 165-168animated graphics, 160-161background graphics, 171-172banners, 156buttons, 156choosing software, 149clip art, 149compression, 150copyrights and, 149Creative Commons licenses, 149cropping, 151-152dithering, 158file sizes, 150Flickr, 161-163GIFs, 157-161GIMP, 149GIMP, adjusting image color, 154GIMP, banners, 156GIMP, buttons, 156GIMP, cropping images, 151-152GIMP, JPEG compression, 155GIMP, resizing images, 153Google Images, 161Google Picasa, 149grabbing from web pages, 149image maps, 173-178JPEG compression, 155JPEGs, 159-160Picnik, 149placing graphics on web pages,161-163PNGs, 158-159Red Eye Removal, 154republishing, 163resizing, 153resolution, 150specifying height/width, 165text descriptions, 163-164indenting text, 35line breaks, 32-33organizing content via head-ings, 34-36overview of, 29paragraphs, 32-33plain text, 26, 34templates, 31CSS box model, 209borders, 210content, 210lists and, 226-229margins, 210padding, 210sizing elements, 210-212directories, 123-124float property (CSS), 191,204-207, 220folders, 123-125forms, 513accessing elements viaJavaScript, 528check boxes, 521-523creating, 514-519displaying data in pop-up windows, 528-530hidden data, 520JavaScript events, 527-528naming form data, 519-520pull-down pick lists, 524-525radio buttons, 523-524scrolling lists, 524-525selection lists, 524-525sending data via email, 530-531submitting form data, 527text areas, 526text fields, 526text input, 519user input, 519validating, 531-532graceful degradation, 434tiled backgrounds, 159-160transparent graphics, 158turning graphics into links,169-171uses of, 150images, changing images via userinteraction, 281-283JavaScript, adding to web pages,67-68linksabsolute links, 124anchor tags, 126-129email addresses, 132-133images as, 134linking between web pages,129-131linking to external web pages,131-132opening in new browser windows, 134relative-root links, 124styling via CSS, 134-138listsborders, 227-228color, 227-228CSS box model and, 226-229horizontal navigation, 245-248navigation lists, 235-248placing list item indicators,229-231vertical navigation, 236-244loading, timing, 20managingcoding clarity, 548comments, 546-547documenting code, 546-547indenting code, 548maintainable code, 546-548version control, 548-550marginsbrowsers and, 226-229margin property (CSS), 191-19929_9780672333323_index.qxd 10/26/11 10:32 PM Page 595web pages596selectors, 57sizing text, 50style classes, 57-58style IDs, 59style properties, 57style rules, 46, 50-51, 58validating, 61web browser support, 51tablesaligning within, 113-115cells, creating, 107cells, sizing, 111-113color in, 115creating, 107-110headings, creating, 108images in, 116page layout via, 116-117rows, creating, 107sizing, 110-113sizing borders, 107spacing borders, 116spanning within, 115uses for, 107text, formattingadding to web pages, 319-321aligning text, 92-95big text, 83boldface text, 82-83customizing fonts in HTML,85-89definition lists, 96, 226flowing text, 220foreign languages, 89-91italic text, 82-83modifying, 317-318monospaced text, 84-85multitiered lists, 100-101nested lists, 97-100, 226older HTML tags, 81ordered lists, 95-96, 226outlines, 98-100resumes, creating, 87-89small text, 83multimedia, integrating with, 178embedded multimedia files,180-183links, 179-180tips for using, 184-185organizing, 123-124, 538larger websites, 543-546simple websites, 540, 542single-page websites, 538-539overflow property (CSS), text flowand, 220paddingbrowsers and, 226-228padding property (CSS), 191,199-202Print Preview, viewing web pagesin, 508-509print-friendly web pages, 499criteria for print-friendliness,500-503designing style sheets for printpages, 505-508media-specific style sheets,503-504reviewing content for print-friendliness, 500viewing web pages in PrintPreview, 508-509progressive enhancement, 435relative addresses, 124-125relative-root addresses, 124scripts, adding to web pages(JavaScript), 73-74search engines, listing web pageswith, 555-562style sheetscreating, 47-52definition of, 45external style sheets, 46-51formatting properties, 53-56formatting text color, 46inline styles, 60-61internal style sheets, 46, 59-61layout properties, 52-53linking to HTML documents, 50special characters, 89-91subscript text, 83superscript text, 83unordered lists, 95-96, 226transferring FTP, 29validating, 36-37viewing, 29web content, displaying randomcontent via JavaScript, 276-280website architectures, creating, 125YouTube and, 184websitesaligning via align property (CSS),191, 203-204architectures, creating, 125bad website examples, 144clear property (CSS), text flow and, 220color140 cross-browser color names,143-144best practices, 141-143Colorblind Web Page Filter tool, 148hexadecimal color codes,144-146using, 141-143W3C color standards, 143comparing, 26connecting to, Classic FTP client, 12CSS box model, 209borders, 210content, 210lists and, 226-229margins, 210padding, 210sizing elements, 210-212dynamic websiteschanging images via user inter-action, 281-283client-side scripting, 274displaying random web contentvia JavaScript, 276-280DOM, 280-28129_9780672333323_index.qxd 10/26/11 10:32 PM Page 596websites 597GIFs, 157-161GIMP, 149GIMP, adjusting image color, 154GIMP, banners, 156GIMP, buttons, 156GIMP, cropping images, 151-152GIMP, JPEG compression, 155GIMP, resizing images, 153Google Images, 161Google Picasa, 149grabbing from web pages, 149image maps, 173-178JPEGs, 155, 159-160Picnik, 149placing graphics on web pages,161-163PNGs, 158-159Red Eye Removal, 154republishing, 163resizing, 153resolution, 150specifying height/width, 165text descriptions, 163-164tiled backgrounds, 159-160transparent graphics, 158turning graphics into links,169-171uses of, 150linksabsolute links, 124anchor tags, 126-129email addresses, 132-133images as, 134linking between web pages,129-131linking to external web pages,131-132opening in new browser windows, 134relative-root links, 124styling via CSS, 134-138listsborders, 227-228color, 227-228printing text via JavaScript, 275server-side scripting, 274float property (CSS), 191,204-207, 220forms, 513accessing elements viaJavaScript, 528check boxes, 521-523creating, 514-519displaying data in pop-up windows, 528-530hidden data, 520JavaScript events, 527-528naming form data, 519-520pull-down pick lists, 524-525radio buttons, 523-524scrolling lists, 524-525selection lists, 524-525sending data via email, 530-531submitting form data, 527text areas, 526text fields, 526text input, 519user input, 519validating, 531-532graceful degradation, 434graphicsadjusting color, 154Adobe Photoshop, 148aligning graphics, 165-168animated graphics, 160-161background graphics, 171-172banners, 156buttons, 156choosing software, 149clip art, 149compression, 150copyrights and, 149Creative Commons licenses, 149cropping, 151-152dithering, 158file sizes, 150Flickr, 161-163CSS box model and, 226-229horizontal navigation, 245-248navigation lists, 235-248placing list item indicators,229-231vertical navigation, 236-244managingcoding clarity, 548comments, 546-547documenting code, 546-547indenting code, 548maintainable code, 546-548version control, 548-550marginsbrowsers and, 226-229margin property (CSS), 191-199multimedia, integrating with,178-179embedded multimedia files,180-183links, 179-180tips for using, 184-185navigating JavaScript, 70organizingAmazon.com, 543BAWSI.org, 545ESPN.com, 540-542larger websites, 543-546simple websites, 540-542single-page websites, 538-539Starbucks.com, 544overflow property (CSS), text flowand, 220paddingbrowsers and, 226-228padding property (CSS), 191,199-202progressive enhancement, 435publicizing, 553-555search engines, listing websiteswith, 555-562SEO, 553, 562-563single-page websites, 538-53929_9780672333323_index.qxd 10/26/11 10:32 PM Page 597websites598fixed/liquid hybrid layouts, settingminimum width in, 262-263images, specifying width in, 165width property (CSS), 53window objects (DOM), 300browser windowscreating, 410-411moving, 413-414opening/closing, 411-412resizing, 413-414timeouts, 414-416dialog boxes, displaying, 417-418properties of, 409-410windows (browser)closing, 412creating, 410-411frames, linking to windows, 423-424moving, 413-414non-viewable window areas, 254opening/closing, 411-412pop-up windows, displaying formdata in, 528-530resizing, 413-414timeouts, 414-416with keyword (JavaScript), 363-364.WMV video clips, embedding, 182Word, creating HTML files, 27WordPress Theme Gallery, layouts and, 253writing text within documents, 302WWW (World Wide Web), HTML devel-opment, 2WYSIWYG (what-you-see-is-what-you-get) editors, 27XXHTMLboilerplate code, 30check boxes (forms), 522defining, 3style sheetscreating, 47-52definition of, 45external style sheets, 46-51formatting properties, 53-56formatting text color, 46inline styles, 60-61internal style sheets, 46, 59-61layout properties, 52-53linking to HTML documents, 50selectors, 57sizing text, 50style classes, 57-58style IDs, 59style properties, 57style rules, 46, 50-51, 58validating, 61web browser support, 51testing, 8-9, 26textadding to web pages, 319-321flowing text, 220modifying, 317-318web contentabsolute addresses, 124-125directories, 123-124folders, 123-125organizing, 123-124relative addresses, 124-125relative-root addresses, 124web pagesprint-friendly web pages,499-509viewing in Print Preview,508-509YouTube and, 184while loops (JavaScript), 379-380whitespace (spacing)HTML, 32JavaScript syntax, 292widthCSS box model, adjusting in,210-212development of, 40function of, 51goal of, 51image maps, 231inline frames, 426-429tags tags, 183 tags, 180-183xml : lang attribute (HTML tags), 31xmlns attribute (HTML tags), 31XMLAJAX and, 481, 488-489boilerplate code, 30development of, 39-40xml : lang attribute (HTML tags), 31XMLHttpRequest, 483requestsawaiting responses, 484creating, 483interpreting response data, 484sending, 484URLs, opening, 483xmlns attribute (HTML tags), 31Y - ZYahoo! Developer Network, JavaScriptdesign patterns, 439Yahoo! Search, listing websites with, 556Yahoo! UI Library, 437, 456YouTube, website integration, 184z-index property (CSS), 217-219Zen Garden (CSS), 191-192, 25329_9780672333323_index.qxd 10/26/11 10:32 PM Page 598Table of ContentsCHAPTER 3: Understanding Cascading Style SheetsHow CSS WorksA Basic Style SheetA CSS Style PrimerUsing Style ClassesUsing Style IDsInternal Style Sheets and Inline StylesINDEXABCDEFGHIJK - LMNOPQ - RSTUVWXY - Z