Sams Teach Yourself HTML, CSS, and JavaScript

As the title shows, a great all-in-one book.


Julie C. Meloni


608 Pages

49552 Reads

74 Downloads

English

PDF Format

17.7 MB

HTML Learning

Download PDF format


  • Julie C. Meloni   
  • 608 Pages   
  • 26 Feb 2015
  • Page - 1

    read more..

  • Page - 2

    800 East 96th Street, Indianapolis, Indiana, 46240 USA Julie C. Meloni Sams Teach Yourself HTML, CSS and JavaScript All in One read more..

  • Page - 3

    Sams Teach Yourself HTML, CSS, and JavaScript All in One Copyright © 2012 b y 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 with respect to read more..

  • Page - 4

    Contents at a Glance PART I: Getting Started on the Web CHAPTER 1: Publishing Web Content CHAPTER 2: Understanding HTML and XHTML Connections CHAPTER 3: Understanding Cascading Style Sheets CHAPTER 4: Understanding JavaScript PART II: Building Blocks of Practical Web Design CHAPTER 5: Working with Fonts, Text Blocks, and Lists CHAPTER 6: Using Tables to Display Information CHAPTER 7: read more..

  • Page - 5

    Table of Contents CHAPTER 1: Publishing Web Content 1 A Brief History of HTML and the World Wide Web .................................................... 1 Creating Web Content .................................... 2 Understanding Web Content Delivery ................ 3 Selecting a Web Hosting Provider .................... 6 Testing with Multiple Web Browsers.................. 8 Creating a Sample File read more..

  • Page - 6

    Turning Images into Links .......................... 169 Using Background Images .......................... 171 Using Imagemaps ...................................... 173 Integrating Multimedia into Your Website ...... 178 CHAPTER 9: Working with Margins, Padding, Alignment, and Floating 191 Using Margins .......................................... 192 Padding Elements ...................................... 199 Keeping read more..

  • Page - 7

    CHAPTER 18: Controlling Flow with Conditions and Loops 369 The if Statement........................................ 369 Using Shorthand Conditional Expressions...... 372 Testing Multiple Conditions with if and else .. 373 Using Multiple Conditions with switch .......... 375 Using for Loops ........................................ 377 Using while Loops...................................... 379 Using do...while read more..

  • Page - 8

    About the Author Julie C. Meloni is the Lead Technologist and Architect in the Online Library Environment at the University 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 read more..

  • Page - 9

    We 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 we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way. You can email or write directly to let us know what read more..

  • Page - 10

    Before learning the intricacies of HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript, it is important that you gain a solid understanding of the technologies that help transform these plain- text files to the rich multimedia displays you see on your computer or handheld device when browsing the World Wide Web. For example, a file containing markup and read more..

  • Page - 11

    2 CHAPTER 1 Publishing Web Content This wasn’t a new idea, but his simple HTML managed to thrive while more ambitious hypertext projects floundered. Hypertext originally meant text stored in electronic form with cross-reference links between pages. It is now a broader term that refers to just about any object (text, images, files, and so on) that can be linked to other objects. read more..

  • Page - 12

    Understanding Web Content Delivery 3 an image or video file rather than plain text, which brings me back to the point: Different types of content are sent to your web browser, so simply saying web page doesn’t begin to cover it. Here we use the term web content instead, to cover the full range of text, image, audio, video, and other media found online. In later read more..

  • Page - 13

    4 CHAPTER 1 Publishing Web Content However, there are several steps in the process—and potentially several trips between the browser and server—before you see the entire content of the site you requested. Suppose you want to do a Google search, so you dutifully type http://www.google.com in the address bar or select the Google bookmark from your bookmarks list. Almost read more..

  • Page - 14

    Understanding Web Content Delivery 5 2. After receiving the request for a specific file, the web server process looks in its directory contents for the specific file, opens it, and sends the content of that file back to your web browser. 3. The web browser receives the content of the index.html file, which is text marked up with HTML codes, and renders the content based on read more..

  • Page - 15

    6 CHAPTER 1 Publishing Web Content Selecting a Web Hosting Provider Despite just telling you that you can work through all the chapters in this book without having a web server, having a web server is the recommend- ed method for continuing on. Don’t worry—obtaining a hosting provider is usually a quick, painless, and relatively inexpensive process. In fact, you can get your read more..

  • Page - 16

    Selecting a Web Hosting Provider 7 Here are three reliable web hosting providers whose basic packages con- tain plenty of server space and bandwidth (as well as domain names and extra benefits) at a relatively low cost. If you don’t go with any of these web hosting providers, you can at least use their basic package descrip- tions as a guideline as you shop around. . A read more..

  • Page - 17

    8 CHAPTER 1 Publishing Web Content You might never need to use your control panel, but having it available to you simplifies the installation of databases and other software, the viewing of web statistics, and the addition of email addresses (among many other features). If you can follow instructions, you can manage your own web server—no special training required. Testing with read more..

  • Page - 18

    Creating a Sample File 9 . Apple Safari (http://www.apple.com/safari/) for Mac and Windows . Google Chrome (http://www.google.com/chrome) for Windows . Mozilla Firefox (http://www.mozilla.com/firefox/) for Mac, Windows, and Linux . Microsoft Internet Explorer (http://www.microsoft.com/ie) for Windows . Opera (http://www.opera.com/) for Mac, Windows, and Linux/UNIX Now that you have a development environment read more..

  • Page - 19

    10 CHAPTER 1 Publishing Web Content Now that you have a sample HTML file to use—and hopefully somewhere to put it, such as a web hosting account—let’s get to publishing your web content. Using FTP to Transfer Files As you’ve learned so far, you have to put your web content on a web serv- er to make it accessible to others. This process typically occurs by using File read more..

  • Page - 20

    Using FTP to Transfer Files 11 Here are some popular free FTP clients: . Classic FTP (http://www.nchsoftware.com/classic/) for Mac and Windows . Cyberduck (http://cyberduck.ch/) for Mac . Fetch (http://fetchsoftworks.com/) for Mac . FileZilla (http://filezilla-project.org/) for all platforms . FireFTP (http://fireftp.mozdev.org/) Firefox extension for all plat- forms When you have selected an FTP read more..

  • Page - 21

    12 CHAPTER 1 Publishing Web Content 2. Fill in each of the items shown in Figure 1.5 as follows: . The site Label is the name you’ll use to refer to your own site. Nobody else will see this name, so enter whatever you want. . The FTP Server is the FTP address of the web server to which you need to send your web pages. This address will have been given to read more..

  • Page - 22

    Using FTP to Transfer Files 13 4. You are now almost ready to transfer files to your web server. All that remains is to change directories to what is called the document root of your web server. The document root of your web server is the directo- ry that is designated as the top-level directory for your web content— the starting point of the directory structure, read more..

  • Page - 23

    14 CHAPTER 1 Publishing Web Content 6. Click the right-arrow button in the middle of the client interface to send the file to the web server. After the file transfer is completed, the right side of the client interface should refresh to show you that the file has made it to its destination. 7. Click the Disconnect button to close the connection, and then exit out of the read more..

  • Page - 24

    Understanding Where to Place Files on the Web Server 15 In the previous section, I used the term document root without really explaining what that is all about. The document root of a web server is essentially the trailing slash in the full URL. For instance, if your domain is yourdomain.com and your URL is http://www.yourdomain.com/, the docu- ment root is the directory read more..

  • Page - 25

    16 CHAPTER 1 Publishing Web Content The bottom line? Always navigate to the document root of your web server before you start transferring files. This is especially true with graphics and other multimedia files. A common directory on web servers is called images, where, as you can imagine, all the image assets are placed for retrieval. Other popular directories include css for read more..

  • Page - 26

    Understanding Where to Place Files on the Web Server 17 The content of the page itself—called index.html and located within the solutions directory—also has links to those two additional pages in the solutions section. When users arrive at the index page of the “solutions” section in this particular website (at least at the time of the snapshot), they can reach any other read more..

  • Page - 27

    18 CHAPTER 1 Publishing Web Content These server configuration options will have already been determined for you by your hosting provider. If your hosting provider enables you to modify server settings via a control panel, you can change these settings so that your server responds to requests based on your own requirements. Not only is the index file used in subdirectories, it’s read more..

  • Page - 28

    Tips for Testing Web Content 19 Simply think of the directory structure of your USB drive just as you would the directory structure of your web server. The top-level of the USB drive directory structure can be your document root. Or if you are distributing a web browser along with the content, you might have two directories—for example, one named browser and one named read more..

  • Page - 29

    20 CHAPTER 1 Publishing Web Content . Before you transfer your files, test them locally on your machine to ensure that the links work and the content reflects the visual design you intended. After you transfer the pages to a web server or remov- able device, test them all again. . Perform these tests with as many browsers that you can—Chrome, Firefox, Internet Explorer, read more..

  • Page - 30

    Summary 21 you can begin to transfer files to your web server using an FTP client. You also learned a little bit about web server directory structures and file man- agement, as well as the very important purpose of the index.html file in a given web server directory. You discovered that you can distribute web content on removable media, and how to go about structuring read more..

  • Page - 31

    22 CHAPTER 1 Publishing Web Content Q&A Q. I’ve looked at the HTML source of some web pages on the Internet and it looks frighteningly difficult to learn. Do I have to think like a computer programmer to learn this stuff? A. Although complex HTML pages can indeed look daunting, learning HTML is much easier than learning actual software programming languages (such as C++ read more..

  • Page - 32

    Workshop 23 Workshop The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows. Quiz 1. How many files would you need to store on a web server to produce a single web page with some text and two images on it? 2. What are some of the read more..

  • Page - 33

    24 CHAPTER 1 Publishing Web Content Exercises . Get your web hosting in order—are you going to go through the chap- ters in this book by viewing files locally on your own computer, or are you going to use a web hosting provider? Note that most web hosting providers will have you up and running the same day you purchase your hosting plan. . If you are using an read more..

  • Page - 34

    The first chapter gave you a basic idea of the process behind creating web content and viewing it online (or locally, if you do not yet have a web host- ing provider). In this chapter, we’ll get down to the business of explaining the various elements that must appear in an HTML file so that it is dis- played appropriately in your web browser. By the end of the read more..

  • Page - 35

    26 CHAPTER 2 Understanding HTML and XHTML Connections 3. Get web browser software. This is the software your computer needs to retrieve and display web content. As you learned in the first chap- ter, the most popular browser software (in alphabetical order) is Apple Safari, Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, and Opera. It’s a good idea to install several read more..

  • Page - 36

    Getting Started with a Simple Web Page 27 When you save files containing HTML tags, always give them a name end- ing in .html. This is important: If you forget to type the .html at the end of the filename when you save the file, most text editors will give it some other extension (such as .txt). If that happens, you might not be able to find the file when you read more..

  • Page - 37

    28 CHAPTER 2 Understanding HTML and XHTML Connections Anchors, and the text He called Other Stuff. And the whole thing together was the first Web Page. </p> </body> </html> LISTING 2.1 Continued FIGURE 2.1 When you save the text in Listing 2.1 as an HTML file and view it with a web browser, only the actual title and body text are displayed. In Listing 2.1, as in read more..

  • Page - 38

    HTML Tags Every XHTML Web Page Must Have 29 If you have obtained a web hosting account, you could use FTP at this point to transfer the firstpage.html file to the web server. In fact, from this chapter forward, the instructions will assume you have a hosting provider and are comfortable sending files back and forth via FTP; if that is not the case, please review the read more..

  • Page - 39

    30 CHAPTER 2 Understanding HTML and XHTML Connections Before you get into the HTML tags, let’s first address the messy-looking code at the top of Listing 2.1. The first line indicates that the HTML docu- ment is, in fact, an XML document: <?xml version=”1.0” encoding=”UTF-8”?> The version of XML is set to 1.0, which is fairly standard, as is the type of character read more..

  • Page - 40

    Organizing a Page with Paragraphs and Line Breaks 31 For example, the <body> tag in Listing 2.1 tells the web browser where the actual body text of the page begins, and </body> indicates where it ends. Everything between the <body> and </body> tags will appear in the main display area of the web browser window, as shown in Figure 2.1. The very top of read more..

  • Page - 41

    32 CHAPTER 2 Understanding HTML and XHTML Connections all words, even though that’s not how it’s entered in Listing 2.2. This is because extra whitespace in HTML code is automatically reduced to a sin- gle space. Additionally, when the text reaches the edge of the browser win- dow, it automatically wraps to the next line, no matter where the line breaks were in the read more..

  • Page - 42

    Organizing a Page with Paragraphs and Line Breaks 33 </p> <p> If he still should prove refractory,<br /> add a picture of his factory. </p> </body> </html> You must use HTML tags if you want to control where line and paragraph breaks actually appear. When text is enclosed within the <p></p> container tags, a line break will be assumed after read more..

  • Page - 43

    34 CHAPTER 2 Understanding HTML and XHTML Connections Organizing Your Content with Headings When you browse through web pages on the Internet, you’ll notice that many of them have a heading at the top that appears larger and bolder than the rest of the text. Listing 2.3 is sample code and text for a simple web page containing an example of a heading as compared to normal read more..

  • Page - 44

    Organizing Your Content with Headings 35 <h3>Comparisons</h3> <p>Here, I would talk about how my widgets compare to my competitor’s widgets.</p> </body> </html> As you can see in Figure 2.3, the HTML that creates headings couldn’t be simpler. In this example, the phrase “My Widgets” is prominently dis- played using the <h1> tag. To create the read more..

  • Page - 45

    36 CHAPTER 2 Understanding HTML and XHTML Connections Theoretically, you can also use <h4> , <h5> , and <h6> tags to make progres- sively less important headings, but these aren’t used very often. Web browsers seldom show a noticeable difference between these headings and the <h3> headings anyway, and content usually isn’t displayed in such a manner as to need read more..

  • Page - 46

    Validating Your Web Content 37 FIGURE 2.4 The W3C Markup Validation Service enables you to validate an HTML (XHTML) docu- ment to ensure it has been coded accurately. If you’ve already published a page online, you can use the Validate by URI tab. Use the Validate by File Upload tab to validate files stored on your local computer file system. The Validate by Direct Input read more..

  • Page - 47

    38 CHAPTER 2 Understanding HTML and XHTML Connections The Scoop on HTML, XML, XHTML, and HTML5 In its early days, HTML was great because it allowed scientists to share information over the Internet in an efficient and relatively structured man- ner. It wasn’t until later that graphical web browsers were created and HTML started being used to code more than scientific papers. read more..

  • Page - 48

    The Scoop on HTML, XML, XHTML, and HTML5 39 effort has been made to reel in the inconsistencies of HTML and restore some order to the language. The problem with disorder in HTML is that it results in web browsers having to guess at how a page is to be displayed, which is not a good thing. Ideally, a web page designer should be able to define exactly how a page read more..

  • Page - 49

    40 CHAPTER 2 Understanding HTML and XHTML Connections formulated that follows the stricter rules of XML. The new XML-compliant version of HTML is known as XHTML. Fortunately for you, you’ll actually be learning XHTML throughout this book because it is really just a cleaner ver- sion of HTML. You might have heard about HTML5, which is touted as the next web stan- dard. It read more..

  • Page - 50

    Summary 41 TABLE 2.1 HTML Tags Covered in Chapter 2 Tag Function <html>...</html> Encloses the entire HTML document. <head>...</head> Encloses the head of the HTML document. Used with- in the <html> tag pair. <title>...</title> Indicates the title of the document. Used within the <head> tag pair. <body>...</body> Encloses the body of the HTML read more..

  • Page - 51

    42 CHAPTER 2 Understanding HTML and XHTML Connections Q&A Q. I’ve created a web page, but when I open the file in my web browser, I see all the text including the HTML tags. Sometimes I even see weird gobbledygook characters at the top of the page! What did I do wrong? A. You didn’t save the file as plain text. Try saving the file again, being careful to read more..

  • Page - 52

    Workshop 43 3. What code would you use to create a complete HTML web page with the title Foo Bar, a heading at the top that reads Happy Hour at the Foo Bar, followed by the words Come on down! in regular type? Answers 1. <html> , <head> , <title> , and <body> (along with their closing tags, </html> , </head> , </title> , and read more..

  • Page - 53

    This page intentionally left blank read more..

  • Page - 54

    In 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 your web content using Cascading Style Sheets (CSS). The concept behind style sheets is simple: You create a style sheet docu- ment that specifies the fonts, read more..

  • Page - 55

    46 CHAPTER 3 Understanding Cascading Style Sheets How CSS Works The technology behind style sheets is called CSS, which stands for Cascading Style Sheets. CSS is a language that defines style constructs such as fonts, colors, and positioning, which are used to describe how informa- tion on a web page is formatted and displayed. CSS styles can be stored directly in an HTML web read more..

  • Page - 56

    A Basic Style Sheet 47 cascades down to them. However, the first <p> tag overrides the color style and changes it to blue. The end result is that the first line (not surrounded by a paragraph tag) is green, the first official paragraph is blue, and the second official paragraph retains the cascaded green color. If you made it through that description on your own, read more..

  • Page - 57

    48 CHAPTER 3 Understanding Cascading Style Sheets Listing 3.1 shows the code for the style sheet specifying these properties. FIGURE 3.1 This page uses a style sheet to fine-tune the appearance and spacing of the text and images. FIGURE 3.2 This page uses the same style sheet as the one shown in Figure 3.1, thus maintaining a consistent look and feel. read more..

  • Page - 58

    A Basic Style Sheet 49 LISTING 3.1 A Single External Style Sheet body { 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: read more..

  • Page - 59

    50 CHAPTER 3 Understanding Cascading Style Sheets sheets more readable, but that is a personal preference; you could put all the rules on one line as long as you kept using the semicolon to separate each rule (more on that in a bit). Speaking of code readability, perhaps the first thing you noticed about this style sheet code is that it doesn’t look anything like read more..

  • Page - 60

    A Basic Style Sheet 51 This assumes that the style sheet is stored under the name styles.css in the same folder as the HTML document. As long as the web browser sup- ports style sheets—and all modern browsers do support style sheets—the properties specified in the style sheet will apply to the content in the page without the need for any special HTML formatting code. read more..

  • Page - 61

    52 CHAPTER 3 Understanding Cascading Style Sheets approach 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 the visual style of the page to a single document (the style sheet) so that one change impacts all pages. TRY IT YOURSELF ▼ Create a Style Sheet of Your Own Starting from read more..

  • Page - 62

    A CSS Style Primer 53 . block —The element is displayed on a new line, as in a new paragraph. . list-item —The element is displayed on a new line with a list-item mark (bullet) next to it. . inline —The element is displayed inline with the current paragraph. . none —The element is not displayed; it is hidden. It’s easier to understand the display property if you read more..

  • Page - 63

    54 CHAPTER 3 Understanding Cascading Style Sheets which is used to establish a visible boundary around an element with a box or partial box. The following border properties provide a means of describing the borders of an element: . border-width —The width of the border edge . border-color —The color of the border edge . border-style —The style of the border edge . border-left read more..

  • Page - 64

    A CSS Style Primer 55 The default value of the border-style property is none , which is why ele- ments don’t have a border unless you set the border property to a different style. 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 read more..

  • Page - 65

    56 CHAPTER 3 Understanding Cascading Style Sheets . font-style —The style of the font (normal or italic ) . font-weight —The 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 in case a font isn’t available on a given read more..

  • Page - 66

    Using Style Classes 57 padding-top or padding-bottom to add padding to the top or bottom of the element, as appropriate. You’ll learn more about these style proper- ties in Chapters 9, “Working with Margins, Padding, Alignment, and Floating,” and 10, “Understanding the CSS Box Model and Positioning.” Using Style Classes This is a “teach yourself” book, so you don’t have read more..

  • Page - 67

    58 CHAPTER 3 Understanding Cascading Style Sheets Or you could use this: <h1 class=”serious”>MMI Investor Information</h1> <p>Text for business investors goes here.</p> When referencing a style class in HTML code, simply specify the class name in the class attribute of an element. In the previous example, the words Marvin’s Munchies Inc. would appear in a 36-point Comic read more..

  • Page - 68

    Internal Style Sheets and Inline Styles 59 content in a page, not how it is going to appear on the screen. Then you can focus on how the content is rendered to the screen by fine-tuning the style sheet. You might be surprised by how a relatively small amount of code in a style sheet can have significant effects across an entire website. This makes your pages much read more..

  • Page - 69

    60 CHAPTER 3 Understanding Cascading Style Sheets Style sheets used in this manner must appear in the <head> of an HTML document. No <link /> tag is needed, and you cannot refer to that style sheet from any other page (unless you copy it into the beginning of that document, too). This kind of style sheet is known as an internal style sheet, as you learned earlier read more..

  • Page - 70

    Internal Style Sheets and Inline Styles 61 Here’s how a sample style attribute might look: <p style=”color:green”> This text is green, but <span style=”color:red”>this text is red.</span> Back to green again, but... </p> <p> ...now the green is over, and we’re back to the default color for this page. </p> This code makes use of the <span> tag to read more..

  • Page - 71

    62 CHAPTER 3 Understanding Cascading Style Sheets Summary In this chapter, you learned that a style sheet can control the appearance of many HTML pages at once. It can also give you extremely precise control over the typography, spacing, and positioning of HTML elements. You also discovered that by adding a style attribute to almost any HTML tag, you can control the style of read more..

  • Page - 72

    Workshop 63 Q&A Q. Say I link a style sheet to my page that says all text should be blue, but there’s a <span style=”font-color:red”> 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 style sheets. Any style specifications you put between <style> and read more..

  • Page - 73

    64 CHAPTER 3 Understanding Cascading Style Sheets Quiz 1. What code would you use to create a style sheet to specify 30-point blue Arial headings and all other text in double-spaced, 10-point blue Times 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 read more..

  • Page - 74

    The World Wide Web (WWW) began as a text-only medium—the first browsers didn’t even support images within web pages. The Web has come a long way since those early days, as today’s websites include a wealth of visual and interactive features in addition to useful content: graphics, sounds, animation, and video. Web scripting languages, such as JavaScript, are one of the read more..

  • Page - 75

    66 CHAPTER 4 Understanding JavaScript Although many programming languages are complex, scripting languages are generally simple. They have a simple syntax, can perform tasks with a minimum of commands, and are easy to learn. Web scripting languages enable you to combine scripting with HTML to create interactive web pages. Scripts and Programs A movie or a play follows a script—a read more..

  • Page - 76

    How JavaScript Fits into a Web Page 67 . Detect the browser in use or its features and perform advanced func- tions only on browsers that support them . Detect installed plug-ins and notify the user if a plug-in is required . Modify all or part of a web page without requiring the user to reload it . Display or interact with data retrieved from a remote server You read more..

  • Page - 77

    68 CHAPTER 4 Understanding JavaScript JavaScript’s document.write statement, which you’ll learn more about later, sends output as part of the web document. In this case, it displays the modification date of the document, as shown in Figure 4.1. FIGURE 4.1 Using document.write to display a last-modified date. In this example, we placed the script within the body of the HTML docu- read more..

  • Page - 78

    How JavaScript Fits into a Web Page 69 Using Separate JavaScript Files When you create more complicated scripts, you’ll quickly find your HTML documents become large and confusing. To avoid this, you can use one or more external JavaScript files. These are files with the .js extension that contain JavaScript statements. External scripts are supported by all modern browsers. To read more..

  • Page - 79

    70 CHAPTER 4 Understanding JavaScript In various places throughout this book, you’ll learn more about JavaScript’s event model and how to create simple and complex event handlers. Exploring JavaScript’s Capabilities If you’ve spent any time browsing the Web, you’ve undoubtedly seen lots of examples of JavaScript in action. Here are some brief descriptions of typical applications read more..

  • Page - 80

    Beginning the Script 71 Remote Scripting (AJAX) For a long time, the biggest limitation of JavaScript was that there was no way for it to communicate with a web server. For example, you could use it to verify that a phone number had the right number of digits, but not to look up the user’s location in a database based on the number. Now that some of JavaScript’s read more..

  • Page - 81

    72 CHAPTER 4 Understanding JavaScript Adding JavaScript Statements Your script now needs to determine the local and UTC times, and then dis- play them to the browser. Fortunately, all the hard parts, such as convert- ing between date formats, are built in to the JavaScript interpreter. Storing Data in Variables To begin the script, you will use a variable to store the read more..

  • Page - 82

    Adding the Script to a Web Page 73 Creating Output You now have two variables—localtime and utctime —which contain the results we want from our script. Of course, these variables don’t do us much good unless we can see them. JavaScript includes a number of ways to display information, and one of the simplest is the document.write statement. The document.write statement displays read more..

  • Page - 83

    74 CHAPTER 4 Understanding JavaScript LISTING 4.4 The Date and Time Script in an HTML Document <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Displaying Times and Dates</title> </head> <body> <h1>Current Date and read more..

  • Page - 84

    Testing the Script 75 To display a large clock, we need the hours, minutes, and seconds in separate variables. Once again, JavaScript has built-in functions to do most of the work: hours = now.getHours(); mins = now.getMinutes(); secs = now.getSeconds(); These statements load the hours , mins , and secs variables with the compo- nents of the time using JavaScript’s built-in date read more..

  • Page - 85

    76 CHAPTER 4 Understanding JavaScript LISTING 4.5 The Date and Time Script with Large Clock Display <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Displaying Times and Dates</title> </head> <body> <h1>Current Date and read more..

  • Page - 86

    Testing the Script 77 Save your HTML document again and load the document into the browser. Depending on the browser version you’re using, one of two things will happen: Either an error message will be displayed, or the script will simply fail to execute. If an error message is displayed, you’re halfway to fixing the problem by adding the missing parenthesis. If no read more..

  • Page - 87

    78 CHAPTER 4 Understanding JavaScript FIGURE 4.4 Firefox’s JavaScript Console displays an error message. Although Internet Explorer displays error dialog boxes for each error, Firefox’s JavaScript Console displays a single list of errors and enables you to test commands. For this reason, you might find it useful to install Firefox for debugging and testing JavaScript, even if Internet read more..

  • Page - 88

    Workshop 79 Q&A Q. Do I need to test my JavaScript on more than one browser? A. In an ideal world, any script you write that follows the standards for JavaScript will work in all browsers, and 93% of the time (give or take) that’s true in the real world. But browsers do have their quirks, and you should test your scripts on Internet Explorer and Firefox at a read more..

  • Page - 89

    80 CHAPTER 4 Understanding JavaScript Quiz 1. When a user views a page containing a JavaScript program, which machine actually executes the script? a. The user’s machine running a web browser b. The web server c. A central machine deep within Netscape’s corporate offices 2. What software do you use to create and edit JavaScript programs? a. A browser b. A text editor c. A read more..

  • Page - 90

    In the early days of the Web, text was displayed in only one font and in one size. However, a combination of HTML and CSS now makes it possi- ble to control the appearance of text (font type, size, or color) and how it is aligned and displayed on a web page. In this chapter, you’ll learn how to change the visual display of the font—its font family, size, read more..

  • Page - 91

    82 CHAPTER 5 Working with Fonts, Text Blocks, and Lists Boldface, Italics, and Special Text Formatting Way back in the age of the typewriter, we were content with a plain-text display and with using an occasional underline to show emphasis. Today, boldface and italic text have become de rigueur in all paper communica- tion. Naturally, you can add bold and italic text to your read more..

  • Page - 92

    Boldface, Italics, and Special Text Formatting 83 Although you’ll learn much more about CSS style rules in Part III, “Advanced Web Page Design with CSS,” it’s worth a little foreshadowing just so that you understand the text formatting options. The font-weight style rule enables you to set the weight, or boldness, of a font using a style rule. Standard settings for read more..

  • Page - 93

    84 CHAPTER 5 Working with Fonts, Text Blocks, and Lists . <tt></tt> —Monospaced text (typewriter font) not present in HTML5 because font appearance is better controlled by CSS . <pre></pre> —Monospaced text, preserving spaces and line breaks CAUTION There used to be a <u> tag for creating underlined text, but there are a couple of reasons not to use it read more..

  • Page - 94

    Tweaking the Font 85 Organic 2 3 99% Sugar Free 0 1 110% </pre> </body> </html> The <tt> tag usually changes the typeface to Courier New, a monospaced font. (Monospaced means that all the letters and spaces are the same width.) However, web read more..

  • Page - 95

    86 CHAPTER 5 Working with Fonts, Text Blocks, and Lists prior to CSS because you might still find examples of this method when you look at the source code for other websites. Remember, just because these older methods are in use doesn’t mean you should follow suit. Before style sheets entered the picture, the now phased-out <font> tag was used to control the fonts read more..

  • Page - 96

    Tweaking the Font 87 The font-size and color style rules are also commonly used to control the size and color of fonts. The font-size style can be set to a predefined size (such as small , medium , or large ) or you can set it to a specific point size (such as 12pt or 14pt ). The color style can be set to a predefined color (such as white , black , blue , red , read more..

  • Page - 97

    88 CHAPTER 5 Working with Fonts, Text Blocks, and Lists </head> <body> <h1>Jane Doe</h1> <p class=”contactinfo”>1234 Main Street, Sometown, CA 93829<br/> tel: 555-555-1212, e-mail: jane@doe.com</p> <p class=”categorylabel”>Summary of Qualifications</p> <ul> <li>Highly skilled and dedicated professional offering a solid background in whatever it is you read more..

  • Page - 98

    Working with Special Characters 89 Using CSS, which organizes sets of styles into classes—as you learned in Chapter 3, “Understanding Cascading Style Sheets”—you can see how text formatting is applied to different areas of this content. If you look closely at the definition of the div.indented class, you will see the use of the margin-left style. This style, which you will read more..

  • Page - 99

    90 CHAPTER 5 Working with Fonts, Text Blocks, and Lists TABLE 5.1 Commonly Used English Language Special Characters Character Numeric Code Code Name Description “ &#34; &quot; Quotation mark & &#38; &amp; Ampersand < &#60; &lt; Less than > &#62; &gt; Greater than ¢ &#162; &cent; Cent sign £ &#163; &pound; Pound sterling | &#166; &brvbar; or read more..

  • Page - 100

    Working with Special Characters 91 Table 5.1 includes codes for the angle brackets, quotation, and ampersand. You must use those codes if you want these symbols to appear on your pages; otherwise, the web browser interprets them as HTML commands. In Listing 5.3 and Figure 5.3, several of the symbols from Table 5.1 are shown in use. LISTING 5.3 Special Character Codes <?xml read more..

  • Page - 101

    92 CHAPTER 5 Working with Fonts, Text Blocks, and Lists Aligning Text on a Page Now that you’ve seen how to change the appearance of your content at the text level, it’s time to take it a step further and modify the blocks of text that appear on the page. It’s easy to take for granted the fact that most paragraphs are automatically aligned to the left when read more..

  • Page - 102

    Aligning Text on a Page 93 according to the associated style definitions. Similarly, you can use the style attribute to include style information for a particular element with- out connecting the element to an actual style sheet. For example, when you begin a paragraph with the <p> tag, you can specify whether the text in that particular paragraph should be aligned to the read more..

  • Page - 103

    94 CHAPTER 5 Working with Fonts, Text Blocks, and Lists The text-align part of the style attribute is referred to as a style rule, which means that it is setting a particular style aspect of an HTML ele- ment. There are many style rules you can use to carefully control the for- matting of web content. The text-align style rule is not reserved for just the <p> tag. read more..

  • Page - 104

    The Three Types of HTML Lists 95 The use of <div style=”text-align:center”> ensures that the content area, including the two headings, are centered. However, the text align- ment of the individual paragraphs within the <div> override the setting and ensure that the text of the first paragraph is left-aligned, the second paragraph is centered, and the third paragraph is read more..

  • Page - 105

    96 CHAPTER 5 Working with Fonts, Text Blocks, and Lists . Definition list —A list of terms and their meanings. This type of list, which has no special number, letter, or symbol before each item, begins with <dl> and ends with </dl> . The <dt></dt> tag pair encloses each term and the <dd></dd> tag pair encloses each definition. Line breaks and read more..

  • Page - 106

    Placing Lists Within Lists 97 Placing Lists Within Lists Although definition lists are officially supposed to be used for defining terms, many web page authors use them anywhere they’d like to see some indentation. In practice, you can indent any text simply by putting <dl><dd> at the beginning of it and </dd></dl> at the end and skipping over the read more..

  • Page - 107

    98 CHAPTER 5 Working with Fonts, Text Blocks, and Lists LISTING 5.6 Using Lists to Build Outlines <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Vertebrates</title> </head> <body> <h1>Vertebrates</h1> <ul> read more..

  • Page - 108

    Placing Lists Within Lists 99 You can even change the bullet for any single point within an unordered list by using the list-style-type style rule in the <li> tag. For example, the following codes displays a hollow circle in front of the words extra and super and a solid square in front of the word special : <ul style=”list-style-type:circle”> <li>extra</li> read more..

  • Page - 109

    100 CHAPTER 5 Working with Fonts, Text Blocks, and Lists Although Listing 5.7 uses the list-style-type style rule only with the <ol> tag, you can also use it for specific <li> tags within a list (although it’s hard to imagine a situation in which you would want to do this). You can also explicitly specify ordinary numbering with list-style- type:decimal , and you read more..

  • Page - 110

    Placing Lists Within Lists 101 </li> <li>Pre-game <ol> <li>Dress <ol style=”list-style-type:upper-alpha”> <li>Put on shorts, even if it’s freezing</li> <li>Buy a new hat if you lost last time</li> </ol> </li> <li>Location and Scheduling <ol style=”list-style-type:upper-alpha”> <li>Select a course where your spouse or boss won’t find you</li> read more..

  • Page - 111

    102 CHAPTER 5 Working with Fonts, Text Blocks, and Lists Summary In this chapter, you learned how to make text appear as boldface or italic and how to code superscripts, subscripts, special symbols, and accented let- ters. You saw how to make the text line up properly in preformatted pas- sages of monospaced text and how to control the size, color, and typeface of any read more..

  • Page - 112

    Summary 103 <i>...</i> Italic text. <tt>...</tt> Typewriter (monospaced) font. <pre>...</pre> Preformatted text (exact line endings and spacing will be preserved—usually rendered in a monospaced font). <big>...</big> Text is slightly larger than normal. <small>...</small> Text is slightly smaller than normal. <sub>...</sub> Subscript. read more..

  • Page - 113

    104 CHAPTER 5 Working with Fonts, Text Blocks, and Lists Q&A Q. How do I find out the exact name for a font I have on my computer? A. On a Windows or Macintosh computer, open the Control Panel and click the Fonts folder—the fonts on your system are listed. (Vista users might have to switch to “Classic View” in your Control Panel.) When specifying fonts in the read more..

  • Page - 114

    105 Workshop The workshop contains quiz questions and activities to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows. Quiz 1. How would you create a paragraph in which the first three words are bold, using styles rather than the <b> or <strong> tags? 2. How would you represent read more..

  • Page - 115

    106 CHAPTER 5 Working with Fonts, Text Blocks, and Lists Exercises . Apply the font-level style attributes you learned about in this chapter to various block-level elements such as <p>, <div>, <ul>, and <li> items. Try nesting your elements to get a feel for how styles do or do not cas- cade through the content hierarchy. . Use the text alignment style read more..

  • Page - 116

    In this chapter, you learn how to build HTML tables you can use to control the spacing, layout, and appearance of tabular data in your web content. Although you can achieve similar results using CSS, there are definitely times when a table is the best way to present information, and you’ll find that tables are useful for arranging information into rows and columns. I read more..

  • Page - 117

    108 CHAPTER 6 Using Tables to Display Information There is one more basic tag involved in building tables. The <th> tag works exactly like a <td> tag except <th> indicates that the cell is part of the heading of the table. Most web browsers render the text in <th> cells as centered and boldface. You can create as many cells as you want, but each row read more..

  • Page - 118

    Creating a Simple Table 109 <tr> <td>Arizona Diamondbacks</td> <td>43</td> <td>58</td> <td>19.5</td> </tr> <tr> <td>San Diego Padres</td> <td>39</td> <td>62</td> <td>23.5</td> </tr> </table> </body> </html> LISTING 6.1 Continued TIP HTML ignores extra spaces between words and tags. However, you might find read more..

  • Page - 119

    110 CHAPTER 6 Using Tables to Display Information <p style=”font-weight:bold”> <table> <tr> <td style=”font-style:italic”>hello</td> <td>there</td> </tr> </table> </p> In this example, the <p> tag is used around a table to demonstrate how tables are immune to outside tags. The word there would be neither bold- face nor italic because neither read more..

  • Page - 120

    Controlling Table Sizes 111 <table style=”width:100%”> <tr> <td style=”width:20%”>skinny cell</td> <td style=”width:80%”>fat cell</td> </tr> </table> Notice that the table is sized to 100%, which ensures the table fills the entire width of the browser window. When you use percentages instead of fixed pixel sizes, the table will resize automatically to read more..

  • Page - 121

    112 CHAPTER 6 Using Tables to Display Information <td>46</td> <td>8.0</td> </tr> <tr> <td><img src=”colorado.gif” alt=”Colorado Rockies” /></td> <td>Colorado Rockies</td> <td>54</td> <td>46</td> <td>8.0</td> </tr> <tr> <td><img src=”arizona.gif” alt=”Arizona Diamondbacks” /></td> <td>Arizona read more..

  • Page - 122

    Alignment and Spanning Within Tables 113 There are two differences between the code from Listing 6.1 and the code used in Listing 6.2. First, an additional column has been added in Listing 6.2; this column does not have a heading, but the <th></th> tag pair is still present in the first table row. In rows two through six, this additional col- umn contains an read more..

  • Page - 123

    114 CHAPTER 6 Using Tables to Display Information LISTING 6.3 Alignment, Cell Spacing, Borders, and Background Colors in Tables <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Things to Fear</title> </head> <body> read more..

  • Page - 124

    Alignment and Spanning Within Tables 115 At the top of Figure 6.3, a single cell (Description) spans two columns. This is accomplished with the colspan attribute in the <th> tag for that cell. As you might guess, you can also use the rowspan attribute to create a cell that spans more than one row. Spanning is the process of forcing a cell to stretch across more than read more..

  • Page - 125

    116 CHAPTER 6 Using Tables to Display Information Similar to the background-color style property is the background-image property (not shown in this example), which is used to set an image for a table background. If you wanted to set the image leaves.gif as the back- ground for a table, you would use <table style=”background- image:url(leaves.gif)”> . Notice that the image file read more..

  • Page - 126

    Summary 117 . Creating unnecessarily difficult redesigns —To change a table-based layout, you would have to change the table-based layout on every single page of your site (unless it is part of a complicated, dynamical- ly driven site, in which case you would have to undo all the dynamic pieces and remake them). . Accessibility issues —Screen reading software looks to tables read more..

  • Page - 127

    118 CHAPTER 6 Using Tables to Display Information style= The height of the table on the page, either in exact ➥”height:height” pixel values or as a percentage of the page height. style=”background- Background color of the table and individual table ➥color:color” cells that don’t already have a background color. style= A background image to display within the table read more..

  • Page - 128

    Summary 119 Attributes style= The height of this row of cells, in exact pixel ”height:height” values or as a percentage of the table height. style=”background- Background color of the cell. color:color” style= Background image to display within the cell. ”backgroundimage: url(imageurl)” TABLE 6.1 Continued read more..

  • Page - 129

    120 CHAPTER 6 Using Tables to Display Information Q&A Q. I made a big table and when I load the page, nothing appears on the page for a long time. Why the wait? A. Complex tables can take a while to appear on the screen. The web browser has to figure out the size of everything in the table before it can display any part of it. You can speed things up a bit read more..

  • Page - 130

    Workshop 121 Answers 1. Use the following HTML: <table border=”1”> <tr> <td>Top left...</td> <td>Top right...</td> </tr> <tr> <td>Bottom left...</td> <td>Bottom right...</td> </tr> </table> 2. Add cellspacing=”30” to the <table> tag. 3. Add style=”background-color:green” to the top left <td> tag, add style=”background-color:red” read more..

  • Page - 131

    This page intentionally left blank read more..

  • Page - 132

    So far, you have learned how to use HTML tags to create some basic web pages. However, at this point, those pieces of content are islands unto themselves, with no connection to anything else (although it is true that in Chapter 3, “Understanding Cascading Style Sheets,” I sneaked a few page links into the examples). To turn your work into real web content, you need read more..

  • Page - 133

    124 CHAPTER 7 Using External and Internal Links Regardless of how you organize your documents within your own web server, you can use relative addresses, which include only enough informa- tion to find one page from another. A relative address describes the path from one web page to another, instead of a full (or absolute) Internet address. If you recall from Chapter 1, the read more..

  • Page - 134

    Using Web Addresses 125 example, http://) and the domain name (for example, www.yourdomain. com), but the initial forward slash is provided to show that the address begins at the document root. In the third link, the double dot (..) is a special command that indicates the folder that contains the current folder—in other words, the parent folder. Anytime you see the double dot, read more..

  • Page - 135

    126 CHAPTER 7 Using External and Internal Links Linking Within a Page Using Anchors The <a> tag—the tag responsible for hyperlinks on the Web—got its name from the word “anchor,”and means a link serves as a designation for a spot in a web page. In examples shown throughout this book so far, you’ve learned how to use the <a> tag to link to somewhere else, read more..

  • Page - 136

    Linking Within a Page Using Anchors 127 LISTING 7.1 Setting Anchor Points by Using the <a> Tag with an id Attribute <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Alphabetical Shakespeare</title> </head> <body> read more..

  • Page - 137

    128 CHAPTER 7 Using External and Internal Links Each of the <a href> links in Listing 7.1 makes an underlined link leading to a corresponding <a id> anchor—or it would if I had filled in all the text. Only A and Z will work in this example because only the A and Z links have corresponding text to link to, but feel free to fill in the rest on your own! read more..

  • Page - 138

    Linking Between Your Own Web Content 129 Having mastered the concept of linking to sections of text within a single page, you can now learn to link together other pieces of web content. Linking Between Your Own Web Content As you learned earlier in this chapter, you do not need to include http:// before each address specified in the href attribute when linking to content read more..

  • Page - 139

    130 CHAPTER 7 Using External and Internal Links LISTING 7.3 The historyanswers.html File That historyquiz.html Links To <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>History Quiz Answers</title> </head> <body> <h1>History read more..

  • Page - 140

    Linking to External Web Content 131 Using filenames instead of complete Internet addresses saves you a lot of typing. More important, the links between your pages will work properly no matter where the group of pages is stored. You can test the links while the files are still on your computer’s hard drive. You can then move them to a web server, a CD-ROM, a DVD, or read more..

  • Page - 141

    132 CHAPTER 7 Using External and Internal Links following link would take you to an anchor named photos within the african.html page inside the elephants directory on the domain www.takeme2thezoo.com. <a href=”http://www.takemetothezoo.com/elephants/african.html#photos”> Check out the African Elephant Photos!</a> If you are linking from another page already on the www.takemetothezoo. com read more..

  • Page - 142

    Linking to an Email Address 133 be used. You can provide some additional information in the link so that the subject and body of the message also have default values. You do this by adding subject and body variables to the mailto link. You separate the vari- ables from the email address with a question mark (?), the value from the variable with an equal sign (=), and read more..

  • Page - 143

    134 CHAPTER 7 Using External and Internal Links Opening a Link in a New Browser Window Now that you have a handle on how to create addresses for links—both internal (within your site) and external (to other sites)—there is one addi- tional method of linking: forcing the user to open links in new windows. You’ve no doubt heard of pop-up windows, which are browser read more..

  • Page - 144

    Using CSS to Style Hyperlinks 135 For example, the common pseudoclasses for the <a> tag are link, visited, hover, and active. You can remember them with the mnemonic “Love- Hate”—LV (love) HA (hate), if you choose. . a:link describes the style of a hyperlink that has not been visited previously. . a:visited describes the style of a hyperlink that has been visited previously read more..

  • Page - 145

    136 CHAPTER 7 Using External and Internal Links specific color associated with it, we use a rule for each pseudoclass as shown in the code example. The pseudoclass inherits the style of the parent rule, unless the rule for the pseudoclass specifically overrides that rule. In other words, all the pseudoclasses in the previous example will be Verdana bold (and not underlined). If, read more..

  • Page - 146

    Using CSS to Style Hyperlinks 137 <body> <h1>Sample Link Style</h1> <p><a href=”simplelinkstyle.html”>The first time you see me, I should be a light blue, bold, non-underlined link in the Verdana font</a>.</p> </body> </html> LISTING 7.4 Continued FIGURE 7.5 A link can use particular styles to control the visual display. If you view the example in your web read more..

  • Page - 147

    138 CHAPTER 7 Using External and Internal Links } a.footerlink:link, a.footerlink:visited { color: #6479A0; } a.footerlink:hover, a.footerlink:active { color: #E03A3E; } As you can see in the example that follows, the class name (footerlink) appears after the selector name (a), separated by a dot, and before the pseudoclass name (hover), separated by a colon: selector.class:pseudoclass read more..

  • Page - 148

    139 Q&A Q&A Q. What happens if I link to a page on the Internet, and then the person who owns that page deletes or moves it? A. That depends on how the maintainer of that external page has set up his web server. Usually, you will see a page not found message or something to that effect when you click a link that has been moved or deleted. You can still read more..

  • Page - 149

    140 CHAPTER 7 Using External and Internal Links Workshop The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows. Quiz 1. Your best friend from elementary school finds you on the Internet and says he wants to trade home page links. How do you read more..

  • Page - 150

    This list might look long, but each of these tasks is short and sweet, and will help you move your web development experience from the white background/black text examples so far in this book to more interesting (or at least colorful) examples. But that’s not to say that dark text on a light background is bad—in fact, it’s the most common color combination you’ll read more..

  • Page - 151

    142 CHAPTER 8 Working with Colors, Images, and Multimedia entice your users to view your catalog and eventually purchase something. To that end, you want to make sure colors are used judiciously and with respect. You might wonder how respect enters into the mix when talking about colors, but remember the World Wide Web is an international com- munity and interpretations differ; read more..

  • Page - 152

    Understanding Web Colors 143 relationships will hopefully enable you to avoid using orange text on a light blue background, or bright blue text on a brown background. Some common color schemes in web design are as follows: . Analogous —Colors that are adjacent to each other on the color wheel, such as yellow and green. One color is the dominant color and its analogous friend read more..

  • Page - 153

    144 CHAPTER 8 Working with Colors, Images, and Multimedia But names are subjective—for instance, if you look at the color chart of 140 cross-browser color names, you will not be able to distinguish between fuchsia and magenta. You will then realize that the associated hexadecimal color values for those two terms, fuchsia and magenta, are exactly the same: #FF00FF. You’ll learn read more..

  • Page - 154

    Using Hexadecimal Values for Colors 145 Using Hexadecimal Values for Colors To remain standards-compliant, as well as to retain precise control over the colors in your website, you can reference colors by their hexadecimal value. The hexadecimal value of a color is an indication of how much red, green, and blue light should be mixed into each color. It works a little bit like read more..

  • Page - 155

    146 CHAPTER 8 Working with Colors, Images, and Multimedia For example, bright red is #FF0000 , dark green is #003300 , bluish-purple is #660099 , and medium-gray is #999999 . To make a page with a red back- ground and dark green text, the HTML code would look like the following: <body style=”background-color:#FF0000; color:#003300”> Although only six examples of two-digit read more..

  • Page - 156

    Using CSS to Set Background, Text, and Border Colors 147 Figure 8.2 shows an example of color usage that could easily go into a web design Hall of Shame. I can’t imagine ever using these combinations of col- ors and styles in a serious website, but it serves here as an example of how color style could be applied to various elements. FIGURE 8.2 Background, text, and read more..

  • Page - 157

    148 CHAPTER 8 Working with Colors, Images, and Multimedia color: #FFFFFF”> Black div, red border, white text. </div> <table border=”1”> <tr> <td style=”background-color: #00FF00”>Green Table Cell</td> <td style=”background-color: #FF0000”>Red Table Cell</td> </tr> <tr> <td style=”background-color: #FFFF00”>Blue Table Cell</td> <td style=”background-color: read more..

  • Page - 158

    The Least You Need to Know About Graphics 149 sections that follow, you’ll learn a few of the basic actions that anyone maintaining a website should quickly master. You can use almost any graphics program to create and edit images for your website, from the simple paint program that typically comes free with your computer’s operating system to an expensive professional read more..

  • Page - 159

    150 CHAPTER 8 Working with Colors, Images, and Multimedia The resolution of an image is the number of individual dots, or pixels, that make up an image. Large, high-resolution images generally take longer to transfer and display than small, low-resolution images. Resolution is usu- ally specified as the width times the height of the image, expressed in pix- els; a 300 ×200 image, read more..

  • Page - 160

    Preparing Photographic Images 151 After you transfer the digital image files to your computer, you can use your graphics program to crop, resize, color-correct, and compress to get them ready for use in your website. Cropping an Image Because you want web page graphics to be as compact as possible, you’ll usually need to crop your digital photos. When you crop a photo, you read more..

  • Page - 161

    152 CHAPTER 8 Working with Colors, Images, and Multimedia 3. Click one of the corners of the selection to apply the cropping. Your graphics program will likely have a different method than the one shown, but the concept is the same: select the area to keep, and then crop out the rest. TRY IT YOURSELF ▼ Cropping in GIMP continued 2. In the image you want to crop, draw read more..

  • Page - 162

    Preparing Photographic Images 153 Resizing an Image The exact tool necessary to change an image’s size will depend on the pro- gram you are using. In GIMP, go to the Image menu and click Scale Image to open the Scale Image dialog box (see Figure 8.5). FIGURE 8.5 Use the Scale Image dialog box to change the size of an image. You’ll almost always want to resize using read more..

  • Page - 163

    154 CHAPTER 8 Working with Colors, Images, and Multimedia photo just right. Like many image editing programs, GIMP offers several options for adjusting an image’s brightness, contrast, and color balance, as well as a filter to reduce the dreaded red-eye. To remove red-eye using GIMP, go to Filters, click Enhance, and then click Red Eye Removal. Most of these options are pretty read more..

  • Page - 164

    Creating Banners and Buttons 155 Controlling JPEG Compression Photographic images on the Web work best when saved in the JPEG file format rather than GIF; JPEG enables you to retain the number of colors in the file while still keeping the overall file size to a manageable level. When you’re finished adjusting the size and appearance of your photo, select File, Save As and read more..

  • Page - 165

    156 CHAPTER 8 Working with Colors, Images, and Multimedia The first decision you need to make when you produce a banner or button is how big it should be. Most people accessing the web now have a com- puter with a screen that is at least 1024 ×768 pixels in r esolution, if not con- siderably larger. For example, my screen is currently set at 1440 ×900 pixels. You should read more..

  • Page - 166

    Reducing the Number of Colors in an Image 157 When you enter the width and height of the image in pixels and click OK, you are faced with a blank canvas—an intimidating sight if you’re as art- phobic as most of us! However, because there are so many image creation tutorials (not to mention entire books) available to lead you through the process, I am comfortable read more..

  • Page - 167

    158 CHAPTER 8 Working with Colors, Images, and Multimedia as those are requirements for GIFs, as shown in Figure 8.9. The dialog box will simply ask you to confirm these changes that the save process will do for you—do not concern yourself with understanding these options at this time, but read your software’s help file regarding layers and indexed col- ors for a full read more..

  • Page - 168

    Creating Tiled Backgrounds 159 To make part of an image transparent, the image must be saved in the GIF or PNG file format. As mentioned previously in this chapter, most graphics programs that support the GIF format enable you to specify one color to be transparent, whereas PNG images allow for a range of transparency. Largely because of this transparency range, the PNG read more..

  • Page - 169

    160 CHAPTER 8 Working with Colors, Images, and Multimedia Further on in this chapter, you’ll learn how to place background images within your container elements. Despite my warnings in this section, there are actually times when background images can be powerful weapons in your design arsenal—just not when used as entire page backgrounds. Creating Animated Web Graphics The GIF read more..

  • Page - 170

    Placing Images on a Web Page 161 images also transfer much faster than most of the video or multimedia files that are often used for similar effect. With GIMP, you can create animated GIFs by creating multiple layers within an image, and then modifying the Animated GIF options when saving the file. Additionally, if you have a series of images you want to animate, you can read more..

  • Page - 171

    162 CHAPTER 8 Working with Colors, Images, and Multimedia Insert the following HTML tag at the point in the text where you want the image to appear. Use the name of your image file instead of myimage.gif: <img src=”myimage.gif” alt=”My Image” /> If your image file were in the images directory below the document root, you would use the following: <img read more..

  • Page - 172

    Describing Images with Text 163 If you guessed that img stands for image, you’re right. And src stands for source, which is a reference to the location of the image file. As discussed at the beginning of this book, an image is always stored in a file separate from the text, even though it appears to be part of the same page when viewed in a browser. Just as with read more..

  • Page - 173

    164 CHAPTER 8 Working with Colors, Images, and Multimedia Even when graphics have fully loaded and are visible in the web browser, the alt message typically appears in a little box (known as a tool tip) when- ever the mouse pointer passes over an image. The alt message also helps any user who is visually impaired (or is using a voice-based interface to read the web page). read more..

  • Page - 174

    Aligning Images 165 Specifying Image Height and Width Because text moves over the Internet much faster than graphics, most web browsers display the text on a page before they display images. This gives users something to read while they’re waiting to see the pictures, which makes the whole page seem to load faster. You can make sure that everything on your page appears as read more..

  • Page - 175

    166 CHAPTER 8 Working with Colors, Images, and Multimedia You can also wrap text around images by using the float style property directly within the <img /> tag. In Listing 8.3, <img style=”float:left” /> aligns the first image to the left and wraps text around the right side of it, as you might expect. Similarly, <img style=”float:right” /> aligns the second image to read more..

  • Page - 176

    Aligning Images 167 Vertical Image Alignment Sometimes, you might want to insert a small image in the middle of a line of text; or you might like to put a single line of text next to an image as a caption. In either case, it would be handy to have some control over how the text and images line up vertically. Should the bottom of the image line up with the bottom read more..

  • Page - 177

    168 CHAPTER 8 Working with Colors, Images, and Multimedia LISTING 8.4 Using vertical-align Styles to Align Text with Images <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Small But Mighty Spectacular Yosemite Views</title> read more..

  • Page - 178

    Turning Images into Links 169 Turning Images into Links You probably noticed in Figure 8.12 that the image on the page is quite large, which is fine in this particular example but isn’t ideal when you’re trying to present multiple images. It makes more sense in this case to cre- ate smaller image thumbnails that link to larger versions of each image. Then, you can read more..

  • Page - 179

    170 CHAPTER 8 Working with Colors, Images, and Multimedia <h1>More Spectacular Yosemite Views</h1> <p><div class=”imageleft”> <a href=”http://www.flickr.com/photos/nofancyname/614253439/”><img src=”elcap_sm.jpg” alt=”El Capitan” width=”100” height=”75”/></a> <br/>click image to enlarge</div><strong>El Capitan</strong> is a 3,000-foot (910 m) vertical rock formation read more..

  • Page - 180

    Using Background Images 171 Unless instructed otherwise, web browsers display a colored rectangle around the edge of each image link. Like text links, the rectangle usually appears blue for links that haven’t been visited recently or purple for links that have been visited recently—unless you specify different colored links in your style sheet. Because you seldom, if ever, want read more..

  • Page - 181

    172 CHAPTER 8 Working with Colors, Images, and Multimedia . background-image —Specifies the image to use as the background of the element using the following syntax: url(‘imagename.gif’) . . background-repeat —Specifies how the image should repeat, both horizontally and vertically. By default (without specifying anything), background images will repeat both horizontally and vertically. Other read more..

  • Page - 182

    Using Imagemaps 173 Using Imagemaps Sometimes you might want to use an image as navigation, but beyond the simple button-based or link-based navigation that you often see in websites. For example, perhaps you have a website with medical information, and you want to show an image of the human body that links to pages that pro- vide information about various body parts. Or, you read more..

  • Page - 183

    174 CHAPTER 8 Working with Colors, Images, and Multimedia Using an imagemapping tool is often as simple as using your mouse to draw a rectangle (or a custom shape) around the area you want to be a link. Figure 8.20 shows the result of one of these rectangular selections as FIGURE 8.18 Web page with 12 different logos; this could be presented as a sin- gle imagemap or read more..

  • Page - 184

    Using Imagemaps 175 well as the interface for adding the URL and the title or alternate text for this link. Several pieces of information are necessary to creating the HTML for your imagemap: coordinates, target URL, title of link, and alternative text for the link. FIGURE 8.20 Using an imagemapping tool to create linked areas of a single graphic. Creating Your Own Imagemap You’re read more..

  • Page - 185

    176 CHAPTER 8 Working with Colors, Images, and Multimedia Creating the HTML for an Imagemap If you use an imagemap generator, you will already have the HTML neces- sary for creating the imagemap. However, it is a good idea to understand the parts of the code so that you can check it for accuracy. The following HTML code is required to start any imagemap: <map read more..

  • Page - 186

    Using Imagemaps 177 The last step in creating an imagemap is wiring it to the actual map image. The map image is placed on the page using an ordinary <img /> tag. However, there is an extra usemap attribute that is coded like this: <img src=”map.png” usemap=”#countymap” style=”border:none; width:650px; height:509px” alt=”Native Peoples Census Map” /> When specifying the read more..

  • Page - 187

    178 CHAPTER 8 Working with Colors, Images, and Multimedia Figure 8.21 shows the imagemap in action. Notice in the bottom of your browser window that your browser (in this example, Firefox) displays the link address for whatever area the mouse is hovering over. Additionally, when you hover the mouse over an area, the alt or title text for that area—in this example, Whitman read more..

  • Page - 188

    Integrating Multimedia into Your Website 179 Creating multimedia of any kind can be a challenging and complicated task. If you’re planning to create your own content from scratch, you’ll need far more than this book to become the next crackerjack multimedia developer. After you have some content, however, this section will show you how to place your new creations into your read more..

  • Page - 189

    180 CHAPTER 8 Working with Colors, Images, and Multimedia When the user clicks the words View the hockey video clip. , the hockey.mov QuickTime video file is transferred to her computer from your web server. Whichever helper application or plug-in she has installed auto- matically starts as soon as the file has finished downloading. If no compat- ible helper or plug-in can be read more..

  • Page - 190

    Integrating Multimedia into Your Website 181 a long alphanumeric code. This code is the global ID for Windows Media Player, which means that you’re telling the <object> tag to embed Windows Media Player on the page to play the video clip. You can just copy and paste this code into your own web pages. NOTE It’s important to note that Windows Media Player is a read more..

  • Page - 191

    182 CHAPTER 8 Working with Colors, Images, and Multimedia The type parameter is perhaps the trickiest. It identifies the type of media being displayed, which in this case is a Windows Media Video (WMV) file. This media type must be specified as one of the standard Internet MIME types. A MIME type is an identifier for uniquely identifying different types of media objects on read more..

  • Page - 192

    Integrating Multimedia into Your Website 183 <h1>Fun in the Pond</h1> <div style=”float:left; padding:3px”> <object classid=”CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6” width=”320” height=”305”> <param name=”type” value=”video/x-ms-wmv” /> <param name=”URL” value=”pond.wmv” /> <param name=”uiMode” value=”full” /> <param name=”autoStart” value=”false” /> <embed width=”320” read more..

  • Page - 193

    184 CHAPTER 8 Working with Colors, Images, and Multimedia download some songs,” then multimedia absolutely must play a role in your website. Here are a few additional tips to keep in mind: . Don’t include multimedia in a page and set it to automatically play when the page loads. Always give users the option to start (and stop) your sound or video. . When possible, give read more..

  • Page - 194

    Summary 185 Summary In this chapter, you learned a few best practices for thinking about color use, and how to use the color wheel to help you find colors that will com- plement your text. Additionally, you learned about hexadecimal notion for colors—that all colors are expressed in notations related to the amount of red, green, and blue in them—and how hexadecimal notation read more..

  • Page - 195

    186 CHAPTER 8 Working with Colors, Images, and Multimedia learned how to include a short text message that appears in place of the image as it loads and also appears whenever users move the mouse pointer over the image. You also discovered how to control the horizontal and vertical align- ment of each image and how to wrap text around the left or right of an image. You read more..

  • Page - 196

    Summary 187 src=”address” The address or filename of the image. alt= An alternative description of the image that is ”altdescription” displayed in place of the image, primarily for users who can’t view the image itself. title=”title” A text message that is displayed as an image title, typi- cally in a small pop-up box (tool tip) over the image. width=”width” The width read more..

  • Page - 197

    188 CHAPTER 8 Working with Colors, Images, and Multimedia Q&A Q. Instead of learning all this stuff myself, shouldn’t I just hire a graphic artist to design my pages? A. This is a difficult question to answer, and it’s not because I have a con- flict of interest here—I work for a web development and design agency, so it’s in my best interest to recommend read more..

  • Page - 198

    Workshop 189 the other area. Precedence is assigned according to which areas are list- ed first in the imagemap. For example, the first area in the map has precedence over the second area, which means that a click in the over- lapping portion of the areas will link to the first area. If you have an area within an imagemap that doesn’t link to anything (known as a read more..

  • Page - 199

    190 CHAPTER 8 Working with Colors, Images, and Multimedia Answers 1. Put the following at the beginning of the web page or use a style rule for the body element: <body style=”background-color:#000000; color:#00FF00”> 2. Depending on how important the image is to your page, you should make it as small as 100 ×40 pixels or as large as 300×120 pixels. The JPEG format, with about 85% read more..

  • Page - 200

    Now that you’ve learned some of the basics of creating web content, in this chapter you’ll learn the nitty-gritty of using CSS to enhance that content. Throughout the previous chapter, you have learned how to use basic CSS for display purposes (such as font sizes and colors). In the chapters that follow, you’ll dive in to using CSS to control aspects of your entire read more..

  • Page - 201

    192 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating Using Margins Style sheet margins enable you to add empty space around the outside of the rectangular area for an element on a web page. It is important to remember that the margin property works with space outside of the element. Following are the style properties for setting margins: . margin-top —Sets the read more..

  • Page - 202

    Using Margins 193 page, not the size of the element. So, if you set the margin-left property to 25%, the left margin of the element will end up being 25% of the width of the entire page. The code in Listing 9.1 produces four rectangles on the page, each 250 pix- els wide, 100 pixels high, and with a 5-pixel solid black border (see Figure 9.2). Each rectangle—or read more..

  • Page - 203

    194 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating <style type=”text/css”> div { width:250px; height:100px; border:5px solid #000000; color:black; font-weight:bold; text-align:center; } div#d1 { background-color:red; margin:15px; } div#d2 { background-color:green; margin:15px; } div#d3 { background-color:blue; } div#d4 { background-color:yellow; margin:15px; } </style> </head> <body> <div read more..

  • Page - 204

    Using Margins 195 . No margin around the first color block. . A left-side margin of 15 pixels, a top margin of 5 pixels, and no bot- tom margin around the second color block. . A left-side margin of 75 pixels and no top margin or bottom margins around the third color block. . A left-side margin of 250 pixels and a top margin of 25 pixels around the fourth color read more..

  • Page - 205

    196 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating background-color:green; margin:5px 0px 0px 15px; } div#d3 { background-color:blue; margin:0px 0px 0px 75px; } div#d4 { background-color:yellow; margin:25px 0px 0px 250px; } The result of the previous code changes (see Figure 9.3) seems random but is actually quite useful for pointing out a few other important points. For read more..

  • Page - 206

    Using Margins 197 If we were working on element placement—which we will get to in the next chapter—this would cause a problem in your layout. To ensure that your placements and margins are counted from a position flush with the browser, you will need to address the margin of the <body> element itself. In this case, you would add the following to your style read more..

  • Page - 207

    198 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating } div#d3 { border-width:3px 6px 6px 6px; border-style:solid; border-color:#000000; background-color:blue; margin:0px 0px 0px 15px; } div#d4 { border:5px solid #000000; background-color:yellow; margin:0px 0px 0px 265px; } These changes give the <body> element a zero margin, thus ensuring that a margin-left value of 25 pixels truly read more..

  • Page - 208

    Padding Elements 199 has a margin-left value of 15 pixels, and the fourth color block is sup- posed to have a 265 pixel margin to its left? Well, it does have that 265 pixel margin, but that margin size is not enough because we also have to factor in the 6 pixels of border. If we change the margin property for the fourth color block to reflect the following code, read more..

  • Page - 209

    200 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating You specify the padding of a style rule using one of the padding properties, which work very much like the margin properties. The following padding properties are available for use in setting the padding of style rules: . padding-top —Sets the top padding . padding-right —Sets the right padding . padding-bottom read more..

  • Page - 210

    Padding Elements 201 LISTING 9.2 Simple Code to Produce Four Colored <div>s with Border s, Margins, and Padding <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Color Blocks</title> <style type=”text/css”> body { margin:0px; } read more..

  • Page - 211

    202 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating <div id=”d3”>DIV #3</div> <div id=”d4”>DIV #4</div> </body> </html> LISTING 9.2 Continued You should immediately recognize that something is amiss in this example. The color blocks are all supposed to be 250 pixels wide and 100 pixels high. The color blocks in Figure 9.6 are not uniform read more..

  • Page - 212

    Keeping Everything Aligned 203 Keeping Everything Aligned Knowing that content on a web page doesn’t always fill the entire width of the rectangular area in which it is displayed, it is often helpful to control the alignment of the content. Even if text within a rectangular area extends to multiple lines, alignment still enters the picture because you might want the text read more..

  • Page - 213

    204 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating inline elements. If several inline elements appear on the same line, you can set their vertical alignments the same to align them vertically. A good example would be a row of images that appear one after the next—the vertical-align property enables you to align them vertically. Following are common values for use read more..

  • Page - 214

    Understanding the Float Property 205 LISTING 9.3 Using float to Place <div>s <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Color Blocks</title> <style type=”text/css”> body { margin:0px; } div { width:250px; height:100px; read more..

  • Page - 215

    206 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating You can imagine this could be a problem in a specifically designed visual lay- out, so pay attention to your margins, padding, alignment, and floating while also testing within a target browser window size. Granted, the browser win- dow shown in Figure 9.8 is a small one—to make this point about floating read more..

  • Page - 216

    Summary 207 Floating takes a lot of practice to get used to, especially when there are additional elements in your page and not just a few colored blocks. For example, what happens when you add a basic paragraph into the mix? All elements placed after the floating element will float around that element. To avoid that, use the clear property. The clear property has five read more..

  • Page - 217

    208 CHAPTER 9 Working with Margins, Padding, Alignment, and Floating Q&A Q. The examples of margins and padding all had to do with boxes and text. Can I apply margins and padding to images as well? A. Yes, you can apply margins and padding to any block-level element, such as a <p>,a <div>, an <img/>, lists such as <ul> and <ol>, and list items read more..

  • Page - 218

    In the previous chapter, I mentioned the CSS Box Model a few times—this chapter begins with a discussion of the box model and explains how the information you learned in the previous chapter helps you understand this model. By learning the box model, you won’t tear your hair out when you create a design, and then realize the elements don’t line up or that they read more..

  • Page - 219

    210 CHAPTER 10 Understanding the CSS Box Model and Positioning Here’s yet another explanation of the box model, going from the outside inward: . The margin is the area outside of the element. It never has color; it is always transparent. . The border extends around the element, on the outer edge of any padding. The border can be of several types, widths, and colors. . The read more..

  • Page - 220

    The CSS Box Model 211 background-color: #ff0000; border: 1px solid #000000; } This simple <div> is shown in Figure 10.2. FIGURE 10.2 This is a simple <div>. If we define a second element with these same properties, but also add margin and padding properties of a certain size, we begin to see how the size of the element changes. This is because of the box model. The read more..

  • Page - 221

    212 CHAPTER 10 Understanding the CSS Box Model and Positioning The total width of an element is the sum of the following: width + padding-left + padding-right + border-left + border-right + margin-left + margin-right The total height of an element is the sum of the following: height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom Therefore, read more..

  • Page - 222

    The Whole Scoop on Positioning 213 design. Among other things, it will affect element positioning and content flow, which are the two topics we will tackle next. The Whole Scoop on Positioning Relative positioning is the default type of positioning used by HTML. You can think of relative positioning as being akin to laying out checkers on a checkerboard: The checkers are arranged read more..

  • Page - 223

    214 CHAPTER 10 Understanding the CSS Box Model and Positioning You might think that these position properties make sense only for absolute positioning, but they actually apply to both types of positioning. Under relative positioning, the position of an element is specified as an off- set relative to the original position of the element. So, if you set the left property of an read more..

  • Page - 224

    The Whole Scoop on Positioning 215 <style type=”text/css”> div { position:relative; width:250px; height:100px; border:5px solid #000; color:black; font-weight:bold; text-align:center; } div#d1 { background-color:red; } div#d2 { background-color:green; } div#d3 { background-color:blue; } div#d4 { background-color:yellow; } </style> </head> <body> <div id=”d1”>DIV #1</div> <div id=”d2”>DIV read more..

  • Page - 225

    216 CHAPTER 10 Understanding the CSS Box Model and Positioning LISTING 10.2 Using Absolute Positioning of the Color Blocks <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Positioning the Color Blocks</title> <style read more..

  • Page - 226

    Controlling the Way Things Stack Up 217 the position of each of these rules is set so that the elements are displayed overlapping each other, as shown in Figure 10.5. FIGURE 10.5 The color blocks are displayed using absolute positioning. Now we’re talking layout! Figure 10.5 shows how absolute positioning enables you to place elements exactly where you want them. It also read more..

  • Page - 227

    218 CHAPTER 10 Understanding the CSS Box Model and Positioning The z-index property is used to set a numeric value that indicates the rela- tive z-index of a style rule. The number assigned to z-index has meaning only with respect to other style rules in a style sheet, which means that set- ting the z-index property for a single rule doesn’t mean much. On the other hand, read more..

  • Page - 228

    Controlling the Way Things Stack Up 219 background-color:yellow; left:225px; top:75px; z-index:1; } </style> </head> <body> <div id=”d1”>DIV #1</div> <div id=”d2”>DIV #2</div> <div id=”d3”>DIV #3</div> <div id=”d4”>DIV #4</div> </body> </html> The only change in this code from what you saw in Listing 10.2 is the addi- tion of the z-index read more..

  • Page - 229

    220 CHAPTER 10 Understanding the CSS Box Model and Positioning Managing the Flow of Text Now that you’ve seen some examples of placing elements relative to other elements or placing them absolutely, it’s time to revisit the flow of content around elements. The conceptual current line is an invisible line used to place elements on a page. This line has to do with the flow read more..

  • Page - 230

    Summary 221 for the property. The hidden value leaves the element the same size, allow- ing the overflow text to remain hidden from view. Perhaps the most inter- esting value is scroll , which adds scrollbars to the element so that you can move around and see the text. Summary This chapter began with an important discussion about the CSS box model and how to calculate the read more..

  • Page - 231

    222 CHAPTER 10 Understanding the CSS Box Model and Positioning Q&A Q. How would I determine when to use relative positioning and when to use absolute positioning? A. Although there are no set guidelines regarding the use of relative ver- sus absolute positioning, the general idea is that absolute positioning is required only when you want to exert a finer degree of control read more..

  • Page - 232

    Workshop 223 Answers 1. In relative positioning, content is displayed according to the flow of a page, with each element physically appearing after the element preced- ing it in the HTML code. Absolute positioning, on the other hand, allows you to set the exact position of content on a page. 2. The z-index style property is used to control the manner in which ele- ments read more..

  • Page - 233

    This page intentionally left blank read more..

  • Page - 234

    In Chapter 5, “Working with Fonts, Text Blocks, and Lists,” you were intro- duced to three types of HTML lists, and in Chapter 9, “Working with Margins, Padding, Alignment, and Floating,” you learned about margins, padding, and alignment of elements. In this chapter, you will learn how margins, padding, and alignment styles can be applied to different types of HTML lists, read more..

  • Page - 235

    226 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation HTML List Refresher As you learned in Chapter 5, there are three basic types of HTML lists. Each presents content in a slightly different way based on its type and the context: . The ordered list is an indented list that displays numbers or letters before each list item. The ordered list is surrounded read more..

  • Page - 236

    How the CSS Box Model Affects Lists 227 for lists, and when you are styling lists, you must remember that a “list” is actually made up of two elements: the parent list element type (<ul> or <ol> ) and the individual list items themselves. Each of these elements has margins and padding that can be affected by a style sheet. The examples in this chapter show read more..

  • Page - 237

    228 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation As shown in Figure 11.1, the <ul> creates a box in which the individual list items are placed. In this example, the entirety of the box has a blue back- ground. But also note that the individual list items—in this example, they use a gray background and a yellow border—do not extend to the read more..

  • Page - 238

    Placing List Item Indicators 229 When you are creating a page layout that includes lists of any type, play around with padding to place the items “just so” on the page. Similarly, just because there is no default margin associated with lists doesn’t mean you can’t assign some to the display; adding margin values to the declara- tion for the ul selector will provide read more..

  • Page - 239

    230 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation When text wraps within the list item, it wraps within that box and remains flush left with the left border of element. But when the value of list-style-position is “inside,” the indicators are inside the box created by the <li></li> tag pair. Not only are the list item indicators then indented read more..

  • Page - 240

    Creating Image Maps with List Items and CSS 231 In Figure 11.5, both the second and third list items have a list-style- position value of inside . However, the second list item has a margin- left value of 12 pixels, and the third list item has a padding-left value of 12 pixels. Although both content blocks (list indicator plus the text) show text wrapped around the bullet, read more..

  • Page - 241

    232 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation The code in Listing 11.2 produces an image map similar to the one shown in Figure 11.6. (The code in Listing 11.2 does not produce the red borders shown in the figure. The borders were added to the figure to highlight the defined areas.) When the code is rendered in a web browser, it simply looks read more..

  • Page - 242

    Creating Image Maps with List Items and CSS 233 width:60px; height:90px; } #iTEA1 a { top:100px; left:320px; width:178px; height:125px; } #iTEA2 a { top:225px; left:375px; width:123px; height:115px; } </style> </head> <body> <div id=”theImg”> <ul> <li id=”ss”><a href=”[some URL]” title=”Sugarshots”>Sugarshots</a></li> <li id=”gn”><a href=”[some URL]” read more..

  • Page - 243

    234 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation The list of links is enclosed in a <div> named “theImg” . In the style sheet, this <div> is defined as block element that is 500 pixels wide, 375 pixels high, and with a 1-pixel solid black border. The background of this element is an image named tea_shipment.jpg that is placed in one read more..

  • Page - 244

    How Navigation Lists Differ from Regular Lists 235 #theImg a:hover { border: 1px solid #ffffff; } The list items themselves are then defined and placed in specific positions based on the areas of the image that are supposed to be the clickable areas. For example, the list item with the “ss” id for “Sugarshots” —the name of the item shown in the figure—has its read more..

  • Page - 245

    236 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation secondary. Primary navigation takes users to the introductory pages of main sections of your site; secondary navigation reflects those pages within a cer- tain section. Creating Vertical Navigation with CSS Depending on your site architecture—both the display template you have created and the manner in which you read more..

  • Page - 246

    Creating Vertical Navigation with CSS 237 </style> </head> <body> <div id=”nav”> <ul> <li><a href=”#”>Mission</a></li> <li><a href=”#”>History</a></li> <li><a href=”#”>Executive Team</a></li> <li><a href=”#”>Contact Us</a></li> </ul> </div> <div id=”content”> <h1>About Us</h1> <p>On the read more..

  • Page - 247

    238 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation The contents of this page are set up in two <div> elements that sit next to each other: one is given an id value of nav and the other is given an id value of content . The only styles assigned to anything in this basic page are the width, margin, and float values associated with each read more..

  • Page - 248

    Creating Vertical Navigation with CSS 239 Styling the Single-Level Vertical Navigation The goal with this particular set of navigation elements is simply to pres- ent them as a block of links without bullets and with background and text colors that change depending on their link state (regular link, visited link, hovering over the link, or activated link). The first step in the read more..

  • Page - 249

    240 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation When the user’s mouse hovers over a navigational list element, the idea is that some visual change takes place so the user knows the element is click- able. This is akin to how most software menus change color when a user’s cursor hovers over the menu items. In this case, we’ll change the back- read more..

  • Page - 250

    Creating Vertical Navigation with CSS 241 <ul> <li><a href=”#”>Mission</a></li> <li><a href=”#”>History</a></li> <li><a href=”#”>Executive Team</a> <ul> <li><a href=”#”>&raquo; CEO</a> <li><a href=”#”>&raquo; CFO</a> <li><a href=”#”>&raquo; COO</a> <li><a href=”#”>&raquo; Other read more..

  • Page - 251

    242 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation To ensure both sets of list items are styled appropriately, make sure that the style sheet selectors clearly indicate the hierarchy of the lists. To do that, use entries such as #nav ul and #nav ul li for the first level of lists and #nav ul ul and #nav ul ul li for the second level of read more..

  • Page - 252

    Creating Vertical Navigation with CSS 243 text-decoration: none; } #content a { text-decoration: none; font-weight: bold; } #nav ul { list-style: none; margin: 12px 0px 0px 0px; padding: 0px; } #nav ul li { border-bottom: 1px solid #ffffff; } #nav ul li a:link, #nav ul li a:visited { font-size: 10pt; font-weight: bold; display: block; padding: 3px 0px 3px 3px; background-color: #628794; color: read more..

  • Page - 253

    244 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation color: #000000; } </style> </head> <body> <div id=”nav”> <ul> <li><a href=”#”>Mission</a></li> <li><a href=”#”>History</a></li> <li><a href=”#”>Executive Team</a> <ul> <li><a href=”#”>&raquo; CEO</a></li> <li><a read more..

  • Page - 254

    Creating Horizontal Navigation with CSS 245 Creating Horizontal Navigation with CSS The lessons on navigation began with vertical navigation because the con- cept of converting a list into navigation is easier to grasp when the naviga- tion still looks like a list of items that you might write vertically on a piece of paper, like a grocery list. When creating horizontal read more..

  • Page - 255

    246 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation <style type=”text/css”> body { font: 12pt Verdana, Arial, Georgia, sans-serif; } #header { width: auto; } #logo { float:left; } #nav { float:left; } #nav ul { list-style: none; display: inline; } #nav li { display: inline; } #content { width: auto; float: left; clear: left; } #content a { text-decoration: none; read more..

  • Page - 256

    Creating Horizontal Navigation with CSS 247 <li><a href=”#”>Products</a>: Our products are the best.</li> <li><a href=”#”>Support</a>: It is unlikely you will need support, but we provide it anyway.</li> <li><a href=”#”>Press</a>: Read what others are saying (about how great we are).</li> </ul> </div> </body> </html> LISTING 11.5 Continued FIGURE 11.13 read more..

  • Page - 257

    248 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation padding: 0px; list-style: none; display: inline; } The definition for the <li> remains the same as in Listing 11.5, except it has been given a line-height value of 1.8em : #nav li { display: inline; line-height: 1.8em; } The link styles are similar to those used in the vertical navigation; these entries have read more..

  • Page - 258

    Summary 249 Summary This chapter began with examples of how lists and list elements are affect- ed by padding and margin styles. You first learned about the default padding associated with lists and how to control that padding. Next, you learned how to modify padding and margin values and how to place the list item indicator either inside or outside the list item so you read more..

  • Page - 259

    250 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation Q&A Q. There are an awful lot of web pages that talk about the “box model hack” regarding margins and padding, especially around lists and list elements. Are you sure I don’t have to use a hack? A. At the beginning of this chapter, you learned that the HTML and CSS in this chapter (and read more..

  • Page - 260

    Workshop 251 Q. Where can I find more examples of what I can do with lists? A. The last time I checked, typing CSS navigation in a search engine returned approximately 44 million results. Here are a few starting places: . A List Apart’s CSS articles at http://www.alistapart.com/topics/ code/ . Maxdesign’s CSS Listamatic at http://css.maxdesign.com.au/ listamatic/ . Vitaly Friedman’s read more..

  • Page - 261

    252 CHAPTER 11 Using CSS to Do More with Lists, Text, and Navigation 3. Technically, you can nest your lists as deep as you want to. But from a usability standpoint, there is a limit to the number of levels that you would want to use to nest your lists. Three levels is typically the limit— more than that and you run the risk of creating a poorly organized site read more..

  • Page - 262

    So far you’ve learned a lot about styling web content, from font sizes and colors to images, block elements, lists, and more. But what has yet to be discussed is a high-level overview of page layout. In general, there are two types of layouts—fixed and liquid—but also a layout that is a combination of the two, wherein some elements are fixed while others are liquid. read more..

  • Page - 263

    254 CHAPTER 12 Creating Fixed or Liquid Layouts Understanding Fixed Layouts A fixed layout, or fixed-width layout, is just that: a layout in which the body of the page is set to a specific width. That width is typically controlled by a master “wrapper” <div> in which all content is contained. The width prop- erty of that <div> would be set in the style attribute read more..

  • Page - 264

    Understanding Liquid Layouts 255 FIGURE 12.2 A fixed-width example with a larger screen size. FIGURE 12.1 A fixed-width example with a small- er screen size. Understanding Liquid Layouts A liquid layout—also called a fluid layout—is one in which the body of the page does not use a specified width in pixels, although it might be enclosed read more..

  • Page - 265

    256 CHAPTER 12 Creating Fixed or Liquid Layouts in a master “wrapper” <div> that uses a percentage width. The idea behind the liquid layout is that it can be perfectly usable and still retain the overall design aesthetic even if the user has a very small or very wide screen. Three examples of a liquid layout in action are shown in Figures 12.3, 12.4, and 12.5. read more..

  • Page - 266

    Understanding Liquid Layouts 257 In Figure 12.3, the browser window is approximately 770 pixels wide. This example shows a reasonable minimum screen width before a horizontal scrollbar appears. In fact, the scrollbar does not appear until the browser is 735 pixels wide. On the other hand, Figure 12.4 shows a very small brows- er window (545 pixels wide). In Figure 12.4, you read more..

  • Page - 267

    258 CHAPTER 12 Creating Fixed or Liquid Layouts varying screen resolutions. You might not have the time and effort to pro- duce such a design; in that case, a reasonable compromise is the fixed/ liquid hybrid layout. Creating a Fixed/Liquid Hybrid Layout A fixed/liquid hybrid layout is one that contains elements of both types of layouts. For example, you could have a fluid read more..

  • Page - 268

    Creating a Fixed/Liquid Hybrid Layout 259 First, note that the style sheet for this layout is linked to with the <link> tag rather than included in the template. Because a template is used for more than one page, you want to be able to control the display elements of the template in the most organized way possible. This means you need only to change the definitions read more..

  • Page - 269

    260 CHAPTER 12 Creating Fixed or Liquid Layouts Defining Two Columns in a Fixed/Liquid Hybrid Layout We can start with the easy things first. Because this layout is supposed to be liquid, we know that whatever we put in the header and footer areas will extend the width of the browser window regardless of how narrow or wide the window might be. Adding the following code to read more..

  • Page - 270

    Creating a Fixed/Liquid Hybrid Layout 261 place (as you will soon see). The right_side <div> does not include a value for right but it does include a negative margin on the right side: #left_side { position: relative; float: left; width: 200px; background-color: #52f471; right: 200px; margin-left: -100%; } #right_side { position: relative; float: left; width: 125px; background-color: #f452d5; read more..

  • Page - 271

    262 CHAPTER 12 Creating Fixed or Liquid Layouts However, there’s a problem with this template if the window is resized below a certain width. Because the left column is 200 pixels wide, the right column is 125 pixels wide, and you want at least some text in the content area, you can imagine this page will break if the window is only 350 to 400 pixels wide. Figure read more..

  • Page - 272

    Creating a Fixed/Liquid Hybrid Layout 263 The horizontal scrollbar appears in this example because the browser window itself is less than 500 pixels wide. The scrollbar disappears when the window is slightly larger than 525 pixels wide, and it’s definitely out of the picture entire- ly when the browser is approximately 875 pixels wide (see Figure 12.10). FIGURE 12.9 A basic read more..

  • Page - 273

    264 CHAPTER 12 Creating Fixed or Liquid Layouts Handling Column Height in a Fixed/Liquid Hybrid Layout This example is all well and good except for one problem: It has no con- tent. When content is added to the various elements, more problems arise. As shown in Figure 12.11, the columns become as tall as necessary for the content they contain. FIGURE 12.11 Columns are only read more..

  • Page - 274

    Creating a Fixed/Liquid Hybrid Layout 265 These declarations add a ridiculous amount of padding and assign a ridiculously large margin to the bottom of all three elements. You must also add position:relative to the footer ID in the style sheet so that it is visible despite this padding. At this point, the page looks like Figure 12.12—still not what we want, but closer. FIGURE read more..

  • Page - 275

    266 CHAPTER 12 Creating Fixed or Liquid Layouts LISTING 12.2 Basic Fixed/Liquid Hybrid Layout Structure (with Content) <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Sample Layout</title> <link href=”layout.css” rel=”stylesheet” read more..

  • Page - 276

    Creating a Fixed/Liquid Hybrid Layout 267 ullamcorper congue ipsum, eget vulputate sem scelerisque in. Donec ornare vestibulum congue. Etiam sapien nulla, rutrum mattis mattis ut, pellentesque eget augue. Proin nisl mauris, suscipit quis elementum ac, vestibulum quis lacus. Ut eget justo vitae urna varius sodales. </p> </div> <div id=”left_side”> <ul> <li><a read more..

  • Page - 277

    268 CHAPTER 12 Creating Fixed or Liquid Layouts #left_side { position: relative; float: left; width: 200px; background-color: #52f471; right: 200px; margin-left: -100%; padding-bottom: 2000px; margin-bottom: -2000px; } #right_side { position: relative; float: left; width: 125px; background-color: #f452d5; margin-right: -125px; padding-bottom: 2000px; margin-bottom: -2000px; } #content_area { position: relative; float: read more..

  • Page - 278

    Summary 269 Summary In this chapter, you saw some practical examples of the three main types of layouts: fixed, liquid, and a fixed/liquid hybrid. In the third section of the chapter, you saw an extended example that took you through the process bit-by-bit for creating a fixed/liquid hybrid layout in which the HTML and CSS all validate properly. Remember, the most important read more..

  • Page - 279

    270 CHAPTER 12 Creating Fixed or Liquid Layouts Q&A Q. I’ve heard about something called an elastic layout. How is that differ- ent from the liquid layout? A. An elastic layout is a layout whose content areas resize when the user resizes the text. Elastic layouts use ems, which are inherently propor- tional to text and font size. An em is a typographical unit of read more..

  • Page - 280

    Workshop 271 Answers 1. This was a trick question; there is no “best” la yout. It depends on your content and the needs of your audience. 2. Sure. Although most fixed layouts are flush-left or centered, you could assign a fixed position on an XY axis where you could place a <div> that contains all the other layout <div>s. 3. The min-width property sets the read more..

  • Page - 281

    This page intentionally left blank read more..

  • Page - 282

    The term dynamic means something active or something that motivates another to become active. When talking about websites, a dynamic website is one that incorporates interactivity into its functionality and design, but also motivates a user to take an action—read more, purchase a product, and so on. In this chapter, you’ll learn a little bit about the different types of read more..

  • Page - 283

    274 CHAPTER 13 Understanding Dynamic Websites Server-side scripting refers to scripts that run on the web server, which then sends results to your web browser. If you have ever submitted a form at a website, which includes using a search engine, you have experienced the results of a server-side script. Popular server-side scripting languages include the following (to learn more, read more..

  • Page - 284

    Including JavaScript in HTML 275 When you store your JavaScript in external files, it is referenced in this manner: <script type=”text/javascript” src=”/path/to/script.js”> These <script></script> tags are typically placed between the <head></head> tag because it is not, strictly speaking, content that belongs in the <body> of the page. Instead, the <script> read more..

  • Page - 285

    276 CHAPTER 13 Understanding Dynamic Websites Displaying Random Content You can use JavaScript to display something different each time a page is loaded. Maybe you have a collection of text or images that you find inter- esting enough to include in your pages? I’m a sucker for a good quote. If you’re like me, you might find it fun to incorporate an ever-changing quote read more..

  • Page - 286

    Displaying Random Content 277 <script type=”text/javascript”> <!-- Hide the script from old browsers function getQuote() { // Create the arrays quotes = new Array(4); sources = new Array(4); // Initialize the arrays with quotes quotes[0] = “When I was a boy of 14, my father was so “ + “ignorant...but when I got to be 21, I was astonished “ + “at how much he had read more..

  • Page - 287

    278 CHAPTER 13 Understanding Dynamic Websites The large number of lines between the first set of <script></script> tags is creating a function called getQuote() . After a function is defined, it can be called in other places in the same page. Note that if the function existed in an external file, the function could be called from all your pages. If you look closely read more..

  • Page - 288

    Displaying Random Content 279 Therefore, you see that the string is built as a series of strings enclosed in quotation marks, with a plus sign (+) connecting the strings. The next chunk of code definitely looks the most like programming; this line gets a random number: i = Math.floor(Math.random() * quotes.length); But you can’t just pick any random number because the purpose read more..

  • Page - 289

    280 CHAPTER 13 Understanding Dynamic Websites FIGURE 13.2 The Quotable Quotes page dis- plays a random quote each time it is loaded. Keep in mind that you can easily modify this page to include your own quotes or other text that you want to display randomly. You can also increase the number of quotes available for display by adding more entries in the quotes and sources read more..

  • Page - 290

    Changing Images Based on User Interaction 281 The overall container object is called the document . Any container within the document that has an ID is referenced by that ID. For example, if you have a <div> with an ID called wrapper , then in the DOM that element is referenced by the following: document.wrapper In Chapter 11, you changed the visibility of a specific read more..

  • Page - 291

    282 CHAPTER 13 Understanding Dynamic Websites The large image on the page is called using this <img/> tag: <img name=”product_img” src=”/path/to/image.jpg” alt=”photo” /> As you can see, this image is given a name of product_img . Therefore, this image exists in the DOM as document.product_img . This is important because a little bit of JavaScript functionality enables us to read more..

  • Page - 292

    Summary 283 Summary In this brief chapter, you were reminded of the differences between server- side scripting and client-side scripting, and you got a refresher for includ- ing JavaScript in your HTML files to add a little interactivity to your web- sites. You also learned how to use the JavaScript document.write() method to display random quotes upon page load. Lastly, you read more..

  • Page - 293

    284 CHAPTER 13 Understanding Dynamic Websites Q&A Q. If I want to use the random quote script from this chapter, but I want to have a library of a lot of quotes, do I have to put all the quotes in each page? A. Yes. Each item in the array has to be there. This is where you can begin to see a bit of a tipping point between something that can be client-side read more..

  • Page - 294

    Workshop 285 2. How would you modify the code you wrote for question 1 so that the button flashes when a user moves his mouse over it and continues flashing even if he moves the mouse away from it? 3. What does the plus sign (+) mean in the following context? document.write(‘This is a text string ‘ + ‘that I have created.’); Answers 1. Your code might look read more..

  • Page - 295

    This page intentionally left blank read more..

  • Page - 296

    The previous chapter reminded you of what JavaScript is, what JavaScript can do, and had you create a simple script. In this chapter, you’ll learn a few more basic concepts and script compo- nents that you’ll use in just about every script you write. This will prepare you for the remaining chapters of this book, in which you’ll explore specif- ic JavaScript functions read more..

  • Page - 297

    288 CHAPTER 14 Getting Started with JavaScript Programming Combining Tasks with Functions In the basic scripts you’ve examined so far, you’ve seen some JavaScript statements that have a section in parentheses, like this: document.write(“Testing.”); This is an example of a function. Functions provide a simple way to handle a task, such as adding output to a web page. JavaScript read more..

  • Page - 298

    Basic Concepts 289 JavaScript uses periods to separate object names and property names. For example, for a person object called Bob, the properties might include Bob.address and Bob.phone . Objects can also include methods. These are functions that work with the object’s data. For example, our person object for the address book might include a display() method to display the read more..

  • Page - 299

    290 CHAPTER 14 Getting Started with JavaScript Programming Loops Another useful feature of JavaScript—and most other programming lan- guages—is the capability to create loops, or groups of statements that repeat a certain number of times. For example, these statements display the same alert 10 times, greatly annoying the user: for (i=1; i<=10; i++) { alert(“Yes, it’s yet another read more..

  • Page - 300

    JavaScript Syntax Rules 291 Each event handler is associated with a particular browser object, and you can specify the event handler in the tag that defines the object. For exam- ple, images and text links have an event, onMouseOver , which happens when the mouse pointer moves over the object. Here is a typical HTML image tag with an event handler: <img src=”button.gif” read more..

  • Page - 301

    292 CHAPTER 14 Getting Started with JavaScript Programming Case Sensitivity Almost everything in JavaScript is case sensitive, which means you cannot use lowercase and capital letters interchangeably. Here are a few general rules: . JavaScript keywords, such as for and if , are always lowercase. . Built-in objects, such as Math and Date , are capitalized. . DOM object names are usually read more..

  • Page - 302

    Best Practices for JavaScript 293 Using Comments JavaScript comments enable you to include documentation within your script. This will be useful if someone else tries to understand the script or even if you try to understand it after a long break. To include comments in a JavaScript program, begin a line with two slashes, as in this example: //this is a comment. You can also read more..

  • Page - 303

    294 CHAPTER 14 Getting Started with JavaScript Programming . Avoid being browser-specific —As you learn more about JavaScript, you’ll learn some features that only work in one browser. Avoid them unless absolutely necessary and always test your code in more than one browser. . Keep JavaScript optional —Don’t use JavaScript to perform an essen- tial function on your site—for read more..

  • Page - 304

    Summary 295 This event handler uses the built-in alert() function to display a message when you click on the link. In more complex scripts, you will usually define your own function to act as an event handler. Figure 14.1 shows this example in action. FIGURE 14.1 The browser displays an alert when you click the link. You’ll use other event handlers similar to this in the read more..

  • Page - 305

    296 CHAPTER 14 Getting Started with JavaScript Programming Q&A Q. I’ve heard the term object-oriented applied to languages such as C++ and Java. If JavaScript supports objects, is it an object-oriented lan- guage? A. Yes, although it might not fit some people’s strict definitions. JavaScript objects do not support all the features that languages such as C++ and Java support, read more..

  • Page - 306

    Workshop 297 3. Which of the following is executed first by a browser? a. A script in the <head> section b. A script in the <body> section c. An event handler for a button Answers 1. b. A script that executes when the user clicks the mouse button is an event handler. 2. c. Functions can accept both parameters and return values. 3. a. Scripts defined in the read more..

  • Page - 307

    This page intentionally left blank read more..

  • Page - 308

    The previous chapter introduced you to the basic concepts of programming in JavaScript; this chapter will help you better understand the Document Object Model (DOM), which is the framework that properties and method of JavaScript explicitly control so that you may develop rich user experiences. Understanding the Document Object Model (DOM) One advantage that JavaScript has over plain read more..

  • Page - 309

    300 CHAPTER 15 Working with the Document Object Model (DOM) Using window Objects At the top of the browser object hierarchy is the window object, which repre- sents a browser window. You’ve already used at least one method of the window object: method , or simply alert() , displays a message in an alert box. There can be several window objects at a time, each representing an read more..

  • Page - 310

    Working with the document Object 301 In the following sections, you will look at some of the properties and meth- ods of the document object that will be useful in your scripting. Getting Information About the Document Several properties of the document object include information about the current document in general: . document.URL specifies the document’s URL. This is a simple read more..

  • Page - 311

    302 CHAPTER 15 Working with the Document Object Model (DOM) Figure 15.2 shows the output of Listing 15.1. FIGURE 15.2 Viewing the last modified date of a document. If you use JavaScript to display the value of this document property, you don’t have to remember to update the date each time you modify the page, should you choose to expose this information to the user. (You read more..

  • Page - 312

    Accessing Browser History 303 Using Links and Anchors Another child of the document object is the link object. Actually, there can be multiple link objects in a document. Each one includes information about a link to another location or an anchor. You can access link objects with the links array. Each member of the array is one of the link objects in the current page. A read more..

  • Page - 313

    304 CHAPTER 15 Working with the Document Object Model (DOM) . history.go() opens a URL from the history list. To use this method, specify a positive or negative number in parentheses. For example, history.go(-2) is equivalent to pressing the Back button twice. . history.back() loads the previous URL in the history list—equiva- lent to pressing the Back button. . history.forward() read more..

  • Page - 314

    Working with the location Object 305 and forward arrow buttons in the browser’s toolbar.</p> <p> <input type=”button” onclick=”history.back();” value=”Go Back” /> <input type=”button” onclick=”history.forward();” value=”Go Forward” /> </p> </body> </html> LISTING 15.2 Continued FIGURE 15.3 Showing custom Back and Forward buttons. Working with the location read more..

  • Page - 315

    306 CHAPTER 15 Working with the Document Object Model (DOM) The following properties represent parts of the URL: . location.protocol is the protocol part of the URL (http: in the example). . location.hostname is the host name of the URL (www.google.com in the example). . location.port is the port number of the URL (80 in the example). . location.pathname is the filename part of the read more..

  • Page - 316

    More About the DOM Structure 307 object, and so on. Although these objects were the only ones available orig- inally, the modern DOM adds objects under the document object for every element of a page. To better understand this concept, let’s look at the simple HTML document in Listing 15.3. This document has the usual <head> and <body> sections, a heading and a read more..

  • Page - 317

    308 CHAPTER 15 Working with the Document Object Model (DOM) Parents and Children As you have already learned, each JavaScript object can have a parent—an object that contains it—and can also have children—objects that it contains. The DOM uses the same terminology. In Figure 15.4, the document object is the parent object for the remaining objects and does not have a parent read more..

  • Page - 318

    Working with DOM Nodes 309 Working with DOM Nodes As you’ve seen, the DOM organizes objects within a web page into a tree- like structure. Each node (object) in this tree can be accessed in JavaScript. In the next sections, you will learn how you can use the properties and methods of nodes to manage them. Basic Node Properties You have already used the style property of read more..

  • Page - 319

    310 CHAPTER 15 Working with the Document Object Model (DOM) Document Methods The document node itself has several methods you might find useful. You have already used one of these, getElementById , to refer to DOM objects by their ID properties. The document node’s methods include the following: . getElementById(id) returns the element with the specified id attribute. . read more..

  • Page - 320

    Creating Positionable Elements (Layers) 311 Creating Positionable Elements (Layers) Now that you understand a little more about how the DOM is structured, you should be able to start thinking about how you can control any ele- ment in a web page, such as a paragraph or an image. For example, you can use the DOM to change the position, visibility, and other attributes of an read more..

  • Page - 321

    312 CHAPTER 15 Working with the Document Object Model (DOM) Here is our sample layer (a <div> ): <div id=”layer1” style=”position:absolute; left:100px; top:100px”> <p>This is the content of the layer.</p> </div> To move this layer up or down within the page using JavaScript, you can change its style.top attribute. For example, the following statements move the layer read more..

  • Page - 322

    Creating Positionable Elements (Layers) 313 </style> </head> <body> <h1>Positioning Elements</h1> <form action=”” name=”form1”> <div id=”buttons”> <input type=”button” name=”left” value=”Left” onclick=”pos(-1,0);” /> <input type=”button” name=”right” value=”Right” onclick=”pos(1,0);” /> <input type=”button” name=”up” value=”Up” onclick=”pos(0,-1);” /> read more..

  • Page - 323

    314 CHAPTER 15 Working with the Document Object Model (DOM) the ability to use the actions. When you load the code in Listing 15.4 into your browser, it should look like Figure 15.5. FIGURE 15.5 The moveable layer is ready to be moved. Listing 15.5 shows the JavaScript variables and functions that are called in the HTML in Listing 15.4. This code is expected (by the read more..

  • Page - 324

    Creating Positionable Elements (Layers) 315 The var statement at the beginning of the script defines two variables, x and y , that will store the current position of the layer. The pos function is called by the event handlers for all four of the movement buttons. The parameters of the pos() function, dx and dy , tell the script how the layer should move: If dx is negative, read more..

  • Page - 325

    316 CHAPTER 15 Working with the Document Object Model (DOM) Hiding and Showing Objects In the previous example, you saw some functions that could be used to hide or show the “square.” In this section, we’ll take a closer look at hiding and showing objects within a page. As a refresher, objects have a visibility style property that specifies whether they are currently visible within the read more..

  • Page - 326

    Modifying Text Within a Page 317 The <h1> tags in this document define headings with the identifiers head1 and head2 . The <form> section defines a form with two check boxes, one for each of the headings. When a check box is modified, the onClick method is used to call the ShowHide() function. This function is defined within the <script> statements in the header. read more..

  • Page - 327

    318 CHAPTER 15 Working with the Document Object Model (DOM) This assigns the variable head1 to the heading’s object. The firstChild property returns the text node that is the only child of the heading, and its nodeValue property contains the heading text. Using this technique, it’s easy to create a page that allows the heading to be changed dynamically. Listing 15.7 shows the read more..

  • Page - 328

    Adding Text to a Page 319 Adding Text to a Page Next, you can create a script that actually adds text to a page. To do this, you must first create a new text node. This statement creates a new text node with the text “this is a test”: var node=document.createTextNode(“this is a test”); Next, you can add this node to the document. To do this, you use the read more..

  • Page - 329

    320 CHAPTER 15 Working with the Document Object Model (DOM) <script type=”text/javascript”> function AddText() { if (!document.getElementById) return; var sentence=document.form1.sentence.value; var node=document.createTextNode(“ “ + sentence); document.getElementById(“p1”).appendChild(node); document.form1.sentence.value=””; } </script> </head> <body> <h1 id=”head1”>Create Your Own read more..

  • Page - 330

    Summary 321 Summary In this chapter, you’ve learned about the DOM, JavaScript’s hierarchy of web page objects. You’ve learned how you can use the document object to work with documents and used the history and location objects to con- trol the current URL displayed in the browser. Additionally, you learned the functions and properties you can use to man- age DOM objects and read more..

  • Page - 331

    322 CHAPTER 15 Working with the Document Object Model (DOM) Q&A Q. Can I avoid assigning an id attribute to every DOM object I want to handle with a script? A. Yes. Although the scripts in this chapter typically use the id attribute for convenience, you can actually locate any object in the page by using combinations of node properties such as firstChild and nextSibling. read more..

  • Page - 332

    Workshop 323 Workshop The workshop contains quiz questions and exercises to help you solidify your understanding of the material covered. Try to answer all questions before looking at the “Answers” section that follows. Quiz 1. Which of the following DOM objects never has a parent node? a. body b. div c. document 2. Which of the following is the correct syntax to get the DOM read more..

  • Page - 333

    324 CHAPTER 15 Working with the Document Object Model (DOM) Answers 1. c. The document object is the root of the DOM object tree and has no parent object. 2. a. getElementById has a lowercase g at the beginning and a lower- case d at the end, contrary to standard English grammar. 3. b. The <div> tag can be used to create positionable layers. 4. a. The left read more..

  • Page - 334

    Now that you have learned some of the fundamentals of JavaScript and the DOM, it’s time to dig into more details of the JavaScript language. In this chapter, you’ll learn three tools for storing data in JavaScript: vari- ables, which store numbers or text; strings, which are special variables for working with text; and arrays, which are multiple variables you can refer read more..

  • Page - 335

    326 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays . The first character of the variable name must be either a letter or an underscore. . Variable names are case sensitive—totalnum, Totalnum , and TotalNum are separate variable names. . There is no official limit on the length of variable names, but they must fit within one line. Using these rules, the following are read more..

  • Page - 336

    Using Variables 327 Before you get in the habit of omitting the var keyword, be sure you understand exactly when it’s required. It’s actually a good idea to always use the var keyword—you’ll avoid errors and make your script easier to read, and it won’t usually cause any trouble. A local variable belongs to a particular function. Any variable you declare with the var read more..

  • Page - 337

    328 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays Similarly, this statement subtracts one from the value of lines : lines--; You can alternately use the ++ or -- operators before a variable name, as in ++lines . However, these are not identical. The difference is when the increment or decrement happens: . If the operator is after the variable name, the increment or read more..

  • Page - 338

    Understanding Expressions and Operators 329 TABLE 16.1 Common JavaScript Operators Operator Description Example + Concatenate (combine) message=”this is” + “ strings a test”; + Add result = 5 + 7; - Subtract score = score - 1; * Multiply total = quantity * price; / Divide average = sum / 4; % Modulo (remainder) remainder = sum % 4; ++ Increment tries++; -- Decrement total--; Along with read more..

  • Page - 339

    330 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays You can control precedence by using parentheses. Here’s the working statement to calculate an average: result = (a + b + c + d) / 4; The parentheses ensure that the four variables are added first, and then the sum is divided by four. Data Types in JavaScript In some computer languages, you have to specify the read more..

  • Page - 340

    Converting Between Data Types 331 This assigns a string value to total , replacing the numeric value. JavaScript will not display an error when this statement executes; it’s per- fectly valid, although it’s probably not a very useful total. Converting Between Data Types JavaScript handles conversions between data types for you whenever it can. For example, you’ve already used read more..

  • Page - 341

    332 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays Using String Objects You’ve already used several strings in previous chapters. Strings store a group of text characters and are named similarly to other variables. As a simple example, this statement assigns the string This is a test to a string variable called test : test = “This is a test”; Creating a String read more..

  • Page - 342

    Using String Objects 333 LISTING 16.1 Assigning Values to Strings and Combining Them <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>String Text</title> </head> <body> <h1>String Test</h1> <script read more..

  • Page - 343

    334 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays In addition to using the + operator to concatenate two strings, you can use the += operator to add text to a string. For example, this statement adds a period to the current contents of the string sentence : sentence += “.”; Calculating the String’s Length From time to time, you might find it useful to know read more..

  • Page - 344

    Working with Substrings 335 they don’t change the string itself. If you want to change the string’s value, you can use a statement like this: test = test.toLowerCase(); Working with Substrings So far, you’ve worked with entire strings. JavaScript also enables you to work with substrings, or portions of a string. You can use the substring method to retrieve a portion of a read more..

  • Page - 345

    336 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays . alpha.substring(12,10) also returns KL . Because it’s smaller, 10 is used as the first index. . alpha.substring(6,7) returns G . . alpha.substring(24,26) returns YZ . . alpha.substring(0,26) returns the entire alphabet. . alpha.substring(6,6) returns the null value, an empty string. This is true whenever the two index values read more..

  • Page - 346

    Using Numeric Arrays 337 A second method, lastIndexOf() , works the same way, but finds the last occurrence of the string. It searches the string backwards, starting with the last character. For example, this statement finds the last occurrence of Fred in the names string: location = names.lastIndexOf(“Fred”); As with indexOf() , you can specify a location to search from as the read more..

  • Page - 347

    338 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays Understanding Array Length Like strings, arrays have a length property. This tells you the number of elements in the array. If you specified the length when creating the array, this value becomes the length property’s value. For example, these state- ments would print the number 30 : scores = new Array(30); read more..

  • Page - 348

    Using String Arrays 339 You can then assign string values to the array elements: names[0] = “Henry J. Tillman”; names[1] = “Sherlock Holmes”; As with numeric arrays, you can also specify a string array’s contents when you create it. Either of the following statements would create the same string array as the preceding example: names = new Array(“Henry J. Tillman”, read more..

  • Page - 349

    340 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays Sorting a String Array JavaScript also includes a sort method for arrays, which returns an alpha- betically sorted version of the array. For example, the following statements initialize an array of four names and sort them: names[0] = “Public, John Q.”; names[1] = “Doe, Jane”; names[2] = “Duck, Daisy”; names[3] = read more..

  • Page - 350

    Sorting a Numeric Array 341 Sorting and Displaying Names continued LISTING 16.2 The HTML Document for the Sorting Example <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Array Sorting Example</title> <script type=”text/javascript” read more..

  • Page - 351

    342 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays TRY IT YOURSELF ▼ Sorting and Displaying Names continued thename=document.theform.newname.value; // Add the name to the array names[numnames]=thename; // Increment the counter numnames++; // Sort the array names.sort(); document.theform.sorted.value=names.join(“\n”); } The script begins by defining two variables with the var keyword: numnames read more..

  • Page - 352

    Summary 343 Summary During this chapter, you’ve focused on variables and how JavaScript han- dles them. You’ve learned how to name variables, how to declare them, and the differences between local and global variables. You also explored the data types supported by JavaScript and how to convert between them. You also learned about JavaScript’s more complex variables, strings, read more..

  • Page - 353

    344 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays Q&A Q. What is the importance of the var keyword? Should I always use it to declare variables? A. You only need to use var to define a local variable in a function. However, if you’re unsure at all, it’s always safe to use var. Using it con- sistently will help you keep your scripts organized and error read more..

  • Page - 354

    Workshop 345 Quiz 1. Which of the following is not a valid JavaScript variable name? a. 2names b. first_and_last_names c. FirstAndLast 2. If the statement var fig=2 appears in a function, which type of vari- able does it declare? a. A global variable b. A local variable c. A constant variable 3. If the string test contains the value The eagle has landed., what would be the read more..

  • Page - 355

    346 CHAPTER 16 Using JavaScript Variables, Strings, and Arrays Answers 1. a. 2names is an invalid JavaScript variable name because it begins with a number. The others are valid, although they’re probably not ideal choices for names. 2. b. Because the variable is declared in a function, it is a local variable. The var keyword ensures that a local variable is created. 3. b. The read more..

  • Page - 356

    In this chapter, you’ll learn about two more key JavaScript concepts that you’ll use throughout the rest of this book. First, you’ll learn the details of using functions, which enable you to group any number of statements into a block. This is useful for repeating sections of code, and you can also cre- ate functions that accept parameters and return values for later read more..

  • Page - 357

    348 CHAPTER 17 Using JavaScript Functions and Objects function Greet() { alert(“Greetings.”); } This snippet defines a function that displays an alert message to the user. This begins with the function keyword. The function’s name is Greet . Notice the parentheses after the function’s name. As you’ll learn next, the space between them is not always empty. The first and last read more..

  • Page - 358

    Using Functions 349 <title>Functions</title> <script type=”text/javascript”> function Greet(who) { alert(“Greetings, “ + who); } </script> </head> <body> <p>This is the body of the page.</p> </body> </html> Calling the Function You have now defined a function and placed it in an HTML document. However, if you load Listing 17.1 into a browser, read more..

  • Page - 359

    350 CHAPTER 17 Using JavaScript Functions and Objects alert(“Greetings, “ + who); } </script> </head> <body> <h1>Function Example</h1> <p>Prepare to be greeted twice.</p> <script type=”text/javascript”> Greet(“Fred”); Greet(“Ethel”); </script> </body> </html> This listing includes a second set of <script> tags in the body of the page. The read more..

  • Page - 360

    Using Functions 351 Returning a Value The function you just created displays a message to the user, but functions can also return a value to the script that called them. This enables you to use functions to calculate values. As an example, you can create a function that averages four numbers. Your function should begin with the function keyword, the function’s name, and the read more..

  • Page - 361

    352 CHAPTER 17 Using JavaScript Functions and Objects <body> <h1>Function Example: Average</h1> <p>The following is the result of the function call.</p> <script type=”text/javascript”> score = Average(3,4,5,6); document.write(“The average is: “ + score); </script> </body> </html> You can use a variable with the function call, as shown in this listing. This read more..

  • Page - 362

    Introducing Objects 353 Creating Objects When you created an array in the previous chapter, you used the following JavaScript statement: scores = new Array(4); The new keyword tells the JavaScript interpreter to use a function—in this case, the built-in Array function—to create an object. You’ll create a func- tion for a custom object later in this chapter. Object Properties and read more..

  • Page - 363

    354 CHAPTER 17 Using JavaScript Functions and Objects Using Objects to Simplify Scripting Although JavaScript’s variables and arrays are versatile ways to store data, sometimes you need a more complicated structure. For example, suppose you are creating a script to work with a business card database that con- tains names, addresses, and phone numbers for a variety of people. If read more..

  • Page - 364

    Using Objects to Simplify Scripting 355 this.address = address; this.workphone = work; this.homephone = home; } The constructor is a simple function that accepts parameters to initialize a new object and assigns them to the corresponding properties. This function accepts several parameters from the statement that calls the function, and then assigns them as properties of an object. Because read more..

  • Page - 365

    356 CHAPTER 17 Using JavaScript Functions and Objects The added statement looks just like another property definition, but it refers to the PrintCard function. This will work so long as the PrintCard function is defined with its own function definition. Methods are essential- ly properties that define a function rather than a simple value. Creating an Object Instance Now let’s use read more..

  • Page - 366

    Extending Built-in Objects 357 fit your needs, you can extend it, adding a new property or method. This might be very useful if you were creating a large script that used many strings. You can add both properties and methods to an existing object by using the prototype keyword. (A prototype is another name for an object’s defini- tion, or constructor function.) The prototype read more..

  • Page - 367

    358 CHAPTER 17 Using JavaScript Functions and Objects First, you define the addhead() function, which will serve as the new string method. It accepts a number to specify the heading level. The start and stop variables are used to store the HTML “begin header” and “end header” tags, such as <h1> and </h1> . After the function is defined, use the prototype keyword read more..

  • Page - 368

    Extending Built-in Objects 359 Storing Data in Objects continued Notice that the PrintCard() function has been modified slightly to make things look good with the captions in boldface. To use this script, save it as cardtest.js. Next, you’ll need to include the script in a simple HTML docu- ment. Listing 17.6 shows the HTML document for this example. LISTING 17.6 The HTML File read more..

  • Page - 369

    360 CHAPTER 17 Using JavaScript Functions and Objects Using the Math Object The Math object is a built-in JavaScript object that includes math constants and functions. You don’t need to create a Math object; it exists automatical- ly in any JavaScript program. The Math object’s properties represent mathe- matical constants, and its methods are mathematical functions. Rounding and read more..

  • Page - 370

    Working with Math Functions 361 This function multiplies a random number by the value specified in the num parameter, and then converts it to an integer between one and the number by using the Math.floor() method. Other Math Functions The Math object includes many functions beyond those you’ve looked at here. For example, Math.sin() and Math.cos() calculate sines and cosines. The Math read more..

  • Page - 371

    362 CHAPTER 17 Using JavaScript Functions and Objects num = Math.random(); total += num; } Depending on the speed of your computer, it might take a few seconds to generate those 5,000 random numbers. Just to be sure something is hap- pening, the script will display a status message after each 1,000 numbers: if (i % 1000 == 0) document.write(“Generated “ + i + “ read more..

  • Page - 372

    Using the with Keyword 363 To test the script, load the HTML document into a browser. After a short delay, you should see a result. If it’s close to .5 , the numbers are reason- ably random. My result was .503 , as shown in Figure 17.3. NOTE The average you’ve used here is called an arithmetic mean. This type of average isn’t a per- fect way to test read more..

  • Page - 373

    364 CHAPTER 17 Using JavaScript Functions and Objects Obviously, the with keyword only saves a bit of typing in situations like this. However, you might find it more useful when you’re dealing with a DOM object throughout a large procedure, or when you are repeatedly using a built-in object, such as the Math object. Working with Dates The Date object is a built-in JavaScript read more..

  • Page - 374

    Working with Dates 365 As an example, the following statement sets the year of a Date object called holiday to 2010: holiday.setFullYear(2010); Reading Date Values You can use the get methods to get values from a Date object. This is the only way to obtain these values because they are not available as proper- ties. Here are the available get methods for dates: . getDate() read more..

  • Page - 375

    366 CHAPTER 17 Using JavaScript Functions and Objects . getUTCFullYear() function gets the four-digit year in UTC time. . getUTCMonth() function returns the month of the year in UTC time. . getUTCHours() , getUTCMinutes() , getUTCSeconds() , and getUTCMilliseconds() return the components of the time in UTC. . setUTCDate() , setUTCFullYear() , setUTCMonth() , setUTCHours() , setUTCMinutes() , read more..

  • Page - 376

    367 Workshop Q&A Q. Many objects in JavaScript, such as DOM objects, include parent and child objects. Can I include child objects in my custom object defini- tions? A. Yes. Just create a constructor function for the child object, and then add a property to the parent object that corresponds to it. For example, if you created a Nicknames object to store several nicknames read more..

  • Page - 377

    368 CHAPTER 17 Using JavaScript Functions and Objects 2. What is the meaning of the this keyword in JavaScript? a. The current object. b. The current script. c. It has no meaning. 3. Which of the following objects cannot be used with the new keyword? a. Date b. Math c. String 4. How does JavaScript store dates in a Date object? a. The number of milliseconds since January read more..

  • Page - 378

    Statements in a JavaScript program generally execute in the order in which they appear, one after the other. Because this isn’t always practical, most programming languages provide flow control statements that let you con- trol the order in which code is executed. Functions, which you learned about in the previous chapter, are one type of flow control—although a function read more..

  • Page - 379

    370 CHAPTER 18 Controlling Flow with Conditions and Loops This statement includes a condition (if a equals 1 ) and an action (display a message). This statement checks the variable a and, if it has a value of 1 , displays an alert message. Otherwise, it does nothing. If you use an if statement like the preceding example, you can use a single statement as the action. You read more..

  • Page - 380

    The if Statement 371 Combining Conditions with Logical Operators Often, you’ll want to check a variable for more than one possible value or check more than one variable at once. JavaScript includes logical operators, also known as Boolean operators, for this purpose. For example, the fol- lowing two statements check different conditions and use the same action: if (phone == “”) read more..

  • Page - 381

    372 CHAPTER 18 Controlling Flow with Conditions and Loops The else Keyword An additional feature of the if statement is the else keyword. Much like its English equivalent, else tells the JavaScript interpreter what to do if the condition isn’t true. The following is a simple example of the else key- word in action: if (a == 1) { alert(“Found a 1!”); a = 0; } else { read more..

  • Page - 382

    Testing Multiple Conditions with if and else 373 These shorthand expressions can be used anywhere JavaScript expects a value. They provide an easy way to make simple decisions about values. As an example, here’s an easy way to display a grammatically correct mes- sage about a variable: document.write(“Found “ + counter + ((counter == 1) ? “ word.” : “ words.”)); read more..

  • Page - 383

    374 CHAPTER 18 Controlling Flow with Conditions and Loops The HTML File To try this example in a browser, you’ll need an HTML file. We will keep the JavaScript code separate, so Listing 18.1 is the complete HTML file. Save it as timegreet.html , but don’t load it into the browser until you’ve prepared the JavaScript file in the next section. LISTING 18.1 The HTML read more..

  • Page - 384

    Using Multiple Conditions with switch 375 document.write(“Good afternoon.”); } else if (hours >= 17) { document.write(“Good evening.”); } else { document.write(“Good day.”); } document.write(“</p>”); To try this example, save this file as timegreet.js , and then load the timegreet.html file into your browser. Figure 18.1 shows the results of this script. LISTING read more..

  • Page - 385

    376 CHAPTER 18 Controlling Flow with Conditions and Loops Although this is a compact way of doing things, this method can get messy if each if statement has its own block of code with several statements. As an alternative, JavaScript includes the switch statement, which enables you to combine several tests of the same variable or expression into a sin- gle block of statements. read more..

  • Page - 386

    Using for Loops 377 Using for Loops The for keyword is the first tool to consider for creating loops, much like you saw in the previous chapter during the random number example. A for loop typically uses a variable (called a counter or an index) to keep track of how many times the loop has executed, and it stops when the counter reaches a certain number. A basic for read more..

  • Page - 387

    378 CHAPTER 18 Controlling Flow with Conditions and Loops When a loop includes only a single statement between the braces, as in this example, you can omit the braces if you want. The following statement defines the same loop without braces: for (i=0; i<10; i++) document.write(“This is line “ + i + “<br />”); The loop in this example contains a document.write statement read more..

  • Page - 388

    Using while Loops 379 Using while Loops Another keyword for loops in JavaScript is while . Unlike for loops, while loops don’t necessarily use a variable to count. Instead, they execute as long as a condition is true. In fact, if the condition starts out as false, the statements won’t execute at all. The while statement includes the condition in parentheses, and it is fol- read more..

  • Page - 389

    380 CHAPTER 18 Controlling Flow with Conditions and Loops generally use while for any loop. However, it’s best to choose whichever type of loop makes the most sense for the job, or that takes the least amount of typing. Using do...while Loops JavaScript, like many other programming languages, includes a third type of loop: the do...while loop. This type of loop is similar to read more..

  • Page - 390

    Working with Loops 381 This creates an infinite loop. The loop will continue executing until the user stops it or until it generates an error of some kind. Infinite loops can’t always be stopped by the user, except by quitting the browser—and some loops can even prevent the browser from quitting or cause a crash. Obviously, infinite loops are something to avoid. They can read more..

  • Page - 391

    382 CHAPTER 18 Controlling Flow with Conditions and Loops Continuing a Loop One more statement is available to help you control the execution of state- ments in a loop. The continue statement skips the rest of the loop, but, unlike break , it continues with the next iteration of the loop. Here is a sim- ple example: for (i=1; i<21; i++) { if (score[i]==0) continue; read more..

  • Page - 392

    Looping Through Object Properties 383 Working with Arrays and Loops continued This simple script will prompt the user for a series of names. After all of the names have been entered, it will display the list of names in a numbered list. To begin the script, initialize some variables: names = new Array(); i = 0; The names array will store the names the user enters. You read more..

  • Page - 393

    384 CHAPTER 18 Controlling Flow with Conditions and Loops TRY IT YOURSELF ▼ Working with Arrays and Loops continued You now have everything you need for a working script. Listing 18.4 shows the HTML file for this example, and Listing 18.5 shows the JavaScript file. LISTING 18.4 A Script to Prompt for Names and Display Them (HTML) <?xml version=”1.0” encoding=”UTF-8”?> read more..

  • Page - 394

    Summary 385 Summary In this chapter, you learned two ways to control the flow of your scripts. First, you learned how to use the if statement to evaluate conditional expressions and react to them. You also learned a shorthand form of condi- tional expression using the ? operator and the switch statement for work- ing with multiple conditions. You also learned about JavaScript’s read more..

  • Page - 395

    386 CHAPTER 18 Controlling Flow with Conditions and Loops Q&A Q. What happens if I compare two items of different data types (for example, a number and a string) in a conditional expression? A. The JavaScript interpreter does its best to make the values a common format and compare them. In this case, it would convert them both to strings before comparing. In JavaScript 1.3 read more..

  • Page - 396

    Workshop 387 Quiz 1. Which of the following operators means “is not equal to” in JavaScript? a. ! b. != c. <> 2. What does the switch statement do? a. Tests a variable for a number of different values b. Turns a variable on or off c. Makes ordinary if statements longer and more confusing 3. Which type of JavaScript loop checks the condition at the end of the loop? read more..

  • Page - 397

    388 CHAPTER 18 Controlling Flow with Conditions and Loops Answers 1. b. The != operator means is not equal to. 2. a. The switch statement can test the same variable or expression for a number of different values. 3. c. The do...while loop uses a condition at the end of the loop. 4. c. The break statement escapes the loop. 5. b. Because the condition (3==3) will always read more..

  • Page - 398

    In your experience with JavaScript so far, most of the scripts you’ve writ- ten have executed in a calm, orderly fashion, moving from the first state- ment to the last. You’ve seen a few event handlers used in sample scripts to focus your attention on other aspects of programming, and it is likely that you used your common sense to follow along with the actions. That read more..

  • Page - 399

    390 CHAPTER 19 Responding to Events Objects and Events As you learned in Chapter 15, “Working with the Document Object Model (DOM),” JavaScript uses a set of objects to store information about the var- ious parts of a web page—buttons, links, images, windows, and so on. An event can often happen in more than one place (for example, the user could click any one of the read more..

  • Page - 400

    Understanding Event Handlers 391 Defining Event Handlers with JavaScript Rather than specifying an event handler in an HTML document, you can use JavaScript to assign a function as an event handler. This enables you to set event handlers conditionally, turn them on and off, and change the function that handles an event dynamically. To define an event handler in this way, you read more..

  • Page - 401

    392 CHAPTER 19 Responding to Events This isn’t always the ideal way to do things. For example, if you’re using two third-party scripts and both of them want to add an onLoad event to the page, there should be a way to add both. The W3C DOM standard defines a function, addEventListener , for this purpose. This function defines a listener for a particular event and read more..

  • Page - 402

    Understanding Event Handlers 393 Unfortunately, although both Internet Explorer and non-Internet Explorer browsers support event objects, they support different properties. One property that is the same in both browsers is event.type , the type of event. This is simply the name of the event, such as mouseover for an onMouseOver event and keypress for an onKeyPress event. The following read more..

  • Page - 403

    394 CHAPTER 19 Responding to Events . event.button —The mouse button that was pressed. This works just like Internet Explorer except that the left button’s value is 0 and the right button’s value is 2 . . event.target —The object where the element occurred. Using Mouse Events The DOM includes a number of event handlers for detecting mouse actions. Your script can detect the read more..

  • Page - 404

    Using Mouse Events 395 If your onClick event handler returns the false value, the link will not be followed. For example, the following is a link that displays a confirmation dialog. If you click Cancel, the link is not followed; if you click OK, the new page is loaded: <a href=”http://www.google.com/” onclick=”return(window.confirm(‘Are you sure?’));”> Go Away</a> This read more..

  • Page - 405

    396 CHAPTER 19 Responding to Events obj=document.getElementById(“testlink”); obj.onmousedown = mousestatus; obj.onmouseup = mousestatus; obj.onclick = mousestatus; obj.ondblclick = mousestatus; This script includes a function, mousestatus , that detects mouse events. This function uses the button property of the event object to determine which button was pressed. It also uses the type property to read more..

  • Page - 406

    Using Keyboard Events 397 Using Keyboard Events JavaScript can also detect keyboard actions. The main event handler for this purpose is onKeyPress , which occurs when a key is pressed and released or held down. As with mouse buttons, you can detect the down and up parts of the keypress with the onKeyDown and onKeyUp event handlers. Of course, you might find it useful to know read more..

  • Page - 407

    398 CHAPTER 19 Responding to Events function DisplayKey(e) { // which key was pressed? if (e.keyCode) keycode=e.keyCode; else keycode=e.which; character=String.fromCharCode(keycode); // find the object for the destination paragraph k = document.getElementById(“keys”); // add the character to the paragraph k.innerHTML += character; } The DisplayKey function receives the event object from the event read more..

  • Page - 408

    Using the onLoad and onUnload Events 399 When you load this example, watch the characters you’ve typed appear in a paragraph of the document. Figure 19.2 shows this example in action. FIGURE 19.2 Displaying the keys that were pressed. Using the onLoad and onUnload Events Another event you might use often is onLoad . This event occurs when the current page (including all of read more..

  • Page - 409

    400 CHAPTER 19 Responding to Events You can also specify an onUnload event for the <body> tag. This event will be triggered whenever the browser unloads the current document—this occurs when another page is loaded or when the browser window is closed. In the next section you’ll see an event handler in action, within the context of functionality you’re likely to read more..

  • Page - 410

    Using onclick to Change <div> Appearance 401 } #photos { display: none; } #show_e { display: block; } #show_p { display: block; } .fakelink { cursor:pointer; text-decoration: none; font-weight: bold; color: #E03A3E; } </style> </head> <body> <h1>Steptoe Butte</h1> <p><img src=”steptoebutte.jpg” alt=”View from Steptoe Butte” read more..

  • Page - 411

    402 CHAPTER 19 Responding to Events document.getElementById(‘show_e’).style.display=’block’; document.getElementById(‘elevation’).style.display=’none’; “>&raquo; Hide Elevation</div> <div id=”elevation”>3,612 feet (1,101 m), approximately 1,000 feet (300 m) above the surrounding countryside.</div> <div class=”fakelink” id=”show_p” onclick=”this.style.display=’none’; read more..

  • Page - 412

    Using onclick to Change <div> Appearance 403 The goal in this example is to change the display value of two IDs when another ID is clicked. But first you have to make sure users realize a piece of text is clickable, and that typically happens when users see their mouse pointers change to reflect a link is present. Although not shown in Figure 19.3, when you look read more..

  • Page - 413

    404 CHAPTER 19 Responding to Events Let’s look at them separately: this.style.display=’none’; document.getElementById(‘hide_e’).style.display=’block’; document.getElementById(‘elevation’).style.display=’inline’; What you are looking at are different JavaScript methods meant to change particular elements. In the first line, the this keyword refers to the element itself. In other words, this refers read more..

  • Page - 414

    Using onclick to Change <div> Appearance 405 FIGURE 19.4 After clicking “Show Elevation,” the visibility of it and other <div> ele- ments change based on the com- mands in the onclick attribute. FIGURE 19.5 The page after clicking both Show Elevation and Show Photos from the Top of Steptoe Butte. read more..

  • Page - 415

    406 CHAPTER 19 Responding to Events Summary In this chapter, you’ve learned to use events to detect mouse actions, key- board actions, and other events, such as the loading of the page. You can use event handlers to perform a simple JavaScript statement when an event occurs or to call a more complicated function. JavaScript includes a variety of other events. Many of these read more..

  • Page - 416

    Workshop 407 Q&A Q. Can you capture mouse or keyboard events on elements other than text, such as images? A. Yes, these types of events can be applied to actions related to clicking on or rolling over images and text. However, other multimedia objects, such as embedded YouTube videos or Flash files, are not interacted with in the same way, as those objects are played via read more..

  • Page - 417

    408 CHAPTER 19 Responding to Events 2. When does the onLoad event handler for the <body> tag execute? a. When an image is finished loading b. When the entire page is finished loading c. When the user attempts to load another page 3. Which of the following event object properties indicates which key was pressed for an onKeyPress event in Internet Explorer? a. event.which b. read more..

  • Page - 418

    Now that you’ve gotten your feet wet with basic JavaScript functionality, let’s return to some specific aspects of the Document Object Model (DOM). In this chapter, you’ll learn more about some of the most useful objects in the DOM—browser windows and frames—and how JavaScript can inter- act with them. Controlling Windows with Objects In Chapter 15, “Working with the read more..

  • Page - 419

    410 CHAPTER 20 Using Windows and Frames . window.closed —Indicates whether the window has been closed. This only makes sense when working with multiple windows because the current window contains the script and cannot be closed without ending the script. . window.defaultstatus and window.status —The default message for the status line and a temporary message to display on the status read more..

  • Page - 420

    Controlling Windows with Objects 411 . The first parameter of the window.open() method is a URL, which will be loaded into the new window. If it’s left blank, no web page will be loaded. In this case, you could use JavaScript to fill the win- dow with content. . The second parameter specifies a window name (here, WindowName ). This is assigned to the window object’s name read more..

  • Page - 421

    412 CHAPTER 20 Using Windows and Frames LISTING 20.1 An HTML Document That Uses JavaScript to Enable You to Create and Close Windows <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Create a New Window</title> </head> read more..

  • Page - 422

    Moving and Resizing Windows 413 Moving and Resizing Windows The DOM also enables you to move or resize windows. You can do this using the following methods for any window object: . window.moveTo() moves the window to a new position. The parame- ters specify the x (column) and y (row) position. . window.moveBy() moves the window relative to its current position. The x and y read more..

  • Page - 423

    414 CHAPTER 20 Using Windows and Frames X-position: <input size=”5” type=”text” name=”x” /> Y-position: <input size=”5” type=”text” name=”y” /> </p> <div><input type=”button” value=”Change Window” onclick=”doIt();” /></div> </form> </body> </html> In this example, the doIt function is called as an event handler when you click the Change Window read more..

  • Page - 424

    Using Timeouts 415 Normally, a timeout only happens once because the statement you specify in the setTimeout statement is only executed once. But often, you’ll want your statement to execute over and over. For example, your script might be updating a clock or a countdown and need to execute once per second. You can make a timeout repeat by issuing the setTimeout() method call read more..

  • Page - 425

    416 CHAPTER 20 Using Windows and Frames This program displays a message inside a specially named <p> tag every two seconds, including a counter that increments each time. The <p> tag is given an id value of “showText” and the Update() function includes two lines that tells the script that the text should be placed between these two tags: textField = read more..

  • Page - 426

    Displaying Dialog Boxes 417 Displaying Dialog Boxes The window object includes three methods that are useful for displaying messages and interacting with the user. You’ve already used these in some of your scripts. Here’s a summary: . window.alert(message) displays an alert dialog box. This dialog box simply gives the user a message. . window.confirm(message) displays a confirmation dialog read more..

  • Page - 427

    418 CHAPTER 20 Using Windows and Frames ‘This is the default.’);” /> </div> </form> </body> </html> This document displays three buttons, and each one uses an event handler to display one of the dialog boxes. Figure 20.3 shows the script in Listing 20.4 in action. The prompt dialog box is currently displayed and shows the default value. LISTING 20.4 Continued read more..

  • Page - 428

    Working with Frames 419 A frame is a rectangular region within the browser window that displays a web page alongside other pages in other frames. At first glance, Figure 20.4 might look like an ordinary web page, but it is actually two separate HTML pages, both displayed in the same web browser window. Each page is displayed in its own frame, arranged horizontally and read more..

  • Page - 429

    420 CHAPTER 20 Using Windows and Frames You should be aware that frames have long been a vexed issue in web design. The advantages have never really outweighed the disadvantages, yet due to differences in browser support for HTML and CSS standards, frames were seen as a way to achieve certain goals despite their shortcom- ings. As a web developer, I do not recommend the read more..

  • Page - 430

    Building a Frameset 421 as a frameset document was used to put the pages together; in this case, that document is index.html. Creating a Frameset Document A frameset document is an HTML page that instructs the web browser to split its window into multiple frames and specifies which web page should be displayed in each frame. A frameset document actually has no content. It only read more..

  • Page - 431

    422 CHAPTER 20 Using Windows and Frames use an asterisk (*) to indicate that a frame should fill whatever space is available in the window. If more than one frame has an * value, the remaining space will be divided equally between them. In Listing 20.5, <frameset rows=”50,*”> splits the window vertically into two frames. The top frame will be exactly 50 pixels tall, read more..

  • Page - 432

    Linking Between Frames and Windows 423 <style type=”text/css”> body { background-color:#5F9F9F; } </style> </head> <body> <h1 style=”text-align:center”>Sample Framed Site: Home</h1> <p style=”text-align:center”>This is an example of the “home” page.</p> </body> </html> In this example, the top navigation frame has a fixed height of 50 pixels. But because you read more..

  • Page - 433

    424 CHAPTER 20 Using Windows and Frames This code displays the home.html page in that frame when the page loads and names the frame “main” . In the code for the top frame, which is shown in Listing 20.7, you will see the following link: <a href=”services.html” target=”main”>SERVICES</a> When the user clicks this link, services.html is displayed in the frame named read more..

  • Page - 434

    Linking Between Frames and Windows 425 Using JavaScript Objects for Frames When a window contains multiple frames, each frame is represented in JavaScript by a frame object. This object is equivalent to a window object, but it is used for dealing specifically with that frame. The frame object’s name is the same as the NAME attribute you give it in the <frame> tag. Remember read more..

  • Page - 435

    426 CHAPTER 20 Using Windows and Frames The frames Array Rather than referring to frames in a document by name, you can use the frames array. This array stores information about each of the frames in the document. The frames are indexed starting with zero and beginning with the first <frame> tag in the frameset document. For example, you could refer to the frames defined read more..

  • Page - 436

    Using Inline Frames 427 iframe { width:500px; height:100px; border:1px solid black; background-color:#FFFFFF; } </style> </head> <body style=”background:#CCCCCC”> <h1 style=”text-align:center”>Inline Frame Example</h1> <div style=”text-align:center”> <iframe src=”iframe_src.html”> <p>Uh oh...your browser does not support iframes.</p> </iframe> </div> </body> read more..

  • Page - 437

    428 CHAPTER 20 Using Windows and Frames Inline frames are often used to bring in content from other websites. Common uses include serving ads to users from third-party advertising services and using Google’s Site Search to display search results to your users (leveraging Google’s search technology). Figure 20.8 shows an instance of an <iframe> used to pull search results read more..

  • Page - 438

    Summary 429 In Figure 20.8, everything in the white area is actually content in an <iframe>, with the source being a script on Google’s website that runs and then displays content within the template at the Digital Inspiration website. If you look closely at Figure 20.8—and I do not believe you can see it in the figure—you can see a faint gray border around read more..

  • Page - 439

    430 CHAPTER 20 Using Windows and Frames TABLE 20.1 HTML Tags and Attributes Covered in Chapter 20 Tag/Attribute Function <frame /> Defines a single frame within a <frameset>. Attributes src=”url” The URL of the document to be displayed in this frame. id=”name” A name to be used for targeting this frame with the target attribute in <a href> links; compli- ant with read more..

  • Page - 440

    Workshop 431 Q&A Q. When a script is running in a window created by another script, how can it refer back to the original window? A. JavaScript includes the window.opener property, which lets you refer to the window that opened the current window. Q. How can I update two frames at once when the user clicks on a single link? A. You can do this by using an event read more..

  • Page - 441

    432 CHAPTER 20 Using Windows and Frames 2. What does the window.setTimeout method do? a. Executes a JavaScript statement after a delay b. Locks up the browser for the specified amount of time c. Sets the amount of time before the browser exits automatically 3. You’re working with a document that contains three frames with the names first, second, and third. If a script in read more..

  • Page - 442

    In this chapter, you’ll learn some guidelines for creating scripts and pages that are easy to maintain, easy to use, and follow web standards. This is known as unobtrusive scripting: Scripts add features without getting in the way of the user, the developer maintaining the code, or the designer build- ing the layout of the site. You’ll also learn how to make sure read more..

  • Page - 443

    434 CHAPTER 21 Using Unobtrusive JavaScript Whether you’re writing an entire AJAX web application or simply enhanc- ing a page with a three-line script, it’s useful to know some of the concepts that are regularly considered by those who write complex scripts for a liv- ing. The following sections introduce some of these best practices. Content, Presentation, and Behavior When read more..

  • Page - 444

    Scripting Best Practices 435 latest browsers, as long as it would “gracefully degrade” to work on older browsers. This mostly meant testing on a few older browsers and hoping it worked, and there was always the possibility of problems in browsers that didn’t support the latest features. Ironically, you might expect browsers that lack the latest features to be older, less read more..

  • Page - 445

    436 CHAPTER 21 Using Unobtrusive JavaScript behavior. To keep things entirely separate, you can set up the event han- dler in the JavaScript file instead, using syntax like this: window.onload=Startup; Right now, this is usually the best way to set up events: It keeps JavaScript out of the HTML file, and it works in all modern browsers. However, it does have one problem: read more..

  • Page - 446

    Scripting Best Practices 437 The attachEvent() method has two parameters. The first is the event, with the on prefix—onload, onclick , onmouseover , and so on. The second is the function that will handle the event. Internet Explorer also supports a detachEvent() method with the same parameters for removing an event handler. Attaching Events the Cross-Browser Way As you can see, read more..

  • Page - 447

    438 CHAPTER 21 Using Unobtrusive JavaScript Although it’s perfectly fine to test your code in multiple browsers and do whatever it takes to get it working, it’s a good idea to follow the standards rather than browser-specific techniques when you can. This ensures that your code will work on future browsers that improve their standards sup- port, whereas browser-specific features read more..

  • Page - 448

    Scripting Best Practices 439 least not harder to use. Also, make sure the site is easy to use even without JavaScript; although this might only apply to a small percentage of your users, that percentage is likely to include users of screen readers or other software packages necessary for people with visual impairments. Design Patterns If you learn more about usability, you’ll read more..

  • Page - 449

    440 CHAPTER 21 Using Unobtrusive JavaScript Reading Browser Information In Chapter 15, “Working with the Document Object Model (DOM),” you learned about the various objects (such as window and document ) that rep- resent portions of the browser window and the current web document. JavaScript also includes an object called navigator that you can use to read information about the read more..

  • Page - 450

    Reading Browser Information 441 <title>Browser Information</title> </head> <body> <h1>Browser Information</h1> <p>The <strong>navigator</strong> object contains the following information about the browser you are using:</p> <script type=”text/javascript”> document.write(“<ul>”); document.write(“<li><strong>Code Name:</strong> “ + navigator.appCodeName); read more..

  • Page - 451

    442 CHAPTER 21 Using Unobtrusive JavaScript Dealing with Dishonest Browsers If you tried the browser information script in Listing 21.1 using certain ver- sions of Internet Explorer, you probably got a surprise. Figure 21.2 shows how Internet Explorer 6.0 displays the script. There are several unexpected things about this display. First, the navigator. language property is listed as read more..

  • Page - 452

    Cross-Browser Scripting 443 Microsoft solved this problem in IE 4.0 by making IE’s user agent read Mozilla , with the word compatible in parentheses. This allows IE users to view those pages, but still includes enough details to tell web servers which browser is in use. You’ve probably already noticed the other problem with Internet Explorer 6.0’s user agent string: the read more..

  • Page - 453

    444 CHAPTER 21 Using Unobtrusive JavaScript If the getElementById function exists, the block of code between the brack- ets will be executed. Another common way to use feature sensing is at the beginning of a function that will make use of a feature: function changeText() { if (!document.getElementById) return; // the rest of the function executes if the feature is supported } You read more..

  • Page - 454

    Supporting Non-JavaScript Browsers 445 Supporting Non-JavaScript Browsers Some visitors to your site will be using browsers that don’t support JavaScript at all. These aren’t just a few holdouts using ancient browsers— actually, there are more non-JavaScript browsers than you might think: . Most modern browsers, such as Internet Explorer, Firefox, and Chrome, include an option to read more..

  • Page - 455

    446 CHAPTER 21 Using Unobtrusive JavaScript <script type=”text/javascript”> window.location=”JavaScript.html”; </script> This script redirects the user to a different page. If the browser doesn’t sup- port JavaScript, of course, the script won’t be executed, and the rest of the page can display a warning message to explain the situation. Keeping JavaScript Optional Although you read more..

  • Page - 456

    Supporting Non-JavaScript Browsers 447 . Use a separate JavaScript file for all scripts. This is the best way to guarantee that the browser will ignore your script completely if it does not have JavaScript support. . Use feature sensing whenever your script tries to use the newer DOM features, such as document.getElementById() . . Test your pages with your browser’s JavaScript read more..

  • Page - 457

    448 CHAPTER 21 Using Unobtrusive JavaScript TRY IT YOURSELF ▼ Creating an Unobtrusive Script continued LISTING 21.2 The HTML File for the Graphic Check Box Example <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Graphic read more..

  • Page - 458

    Supporting Non-JavaScript Browsers 449 Creating an Unobtrusive Script continued img = (e.target) ? e.target : e.srcElement; // find the checkbox by removing “img” from the image ID checkid = img.id.substring(3); checkbox = document.getElementById(checkid); // “click” the checkbox checkbox.click(); // display the right image for the clicked or unclicked state if (checkbox.checked) file = read more..

  • Page - 459

    450 CHAPTER 21 Using Unobtrusive JavaScript Summary In this chapter, you’ve learned many guidelines for creating scripts that work in as many browsers as possible and how to avoid errors and headaches when working with different browsers. Most importantly, you learned how you can use JavaScript while keeping your pages small, effi- cient, and valid with web standards. read more..

  • Page - 460

    Workshop 451 Q&A Q. Is it possible to create 100% unobtrusive JavaScript that can enhance a page without causing any trouble for anyone? A. Not quite. For example, the unobtrusive script in the Try It Yourself sec- tion of this chapter is close—it will work in the latest browsers, and the regular check box will display and work fine in even ancient browsers. However, it read more..

  • Page - 461

    452 CHAPTER 21 Using Unobtrusive JavaScript 3. Which of the following is the best way to define an event handler that works in all modern browsers? a. <body onLoad=”MyFunction()”> b. window.onload=MyFunction; c. window.attachEvent(‘load’,MyFunction,false); Answers 1. b. The best place for JavaScript is in a separate JavaScript file. 2. c. You can’t use JavaScript to send users of read more..

  • Page - 462

    Third-party JavaScript libraries, or code libraries written and maintained by another party for easy implementation in your own code, offer many advantages. First and foremost, using these libraries enables you to avoid reinventing the wheel for common tasks. Additionally, these libraries enable you to implement cross-browser scripting and sophisticated user interface elements without first read more..

  • Page - 463

    454 CHAPTER 22 Using Third-Party Libraries improved version of this in the $() function. Not only is it easier to type, but it is also more sophisticated than the built-in function and supports multiple objects. Adding Prototype to your pages requires only one file, prototype.js, and one <script> tag: <script type=”text/javascript” src=”prototype.js”></script> jQuery The first read more..

  • Page - 464

    Using Third-Party Libraries 455 Manipulating HTML and CSS properties is just as straightforward. To append the phrase “powered by jQuery” to all paragraph elements, for example, we would simply write the following: $(“p”).append(“ powered by jQuery”); To then change the background color of those same elements, we can manipulate their CSS properties directly: read more..

  • Page - 465

    456 CHAPTER 22 Using Third-Party Libraries AJAX Frameworks AJAX (Asynchronous JavaScript and XML), also known as remote scripting, enables JavaScript to communicate with a program running on the web server. This enables JavaScript to do things that were traditionally not possi- ble, such as dynamically loading information from a database or storing data on a server without refreshing a read more..

  • Page - 466

    Other Libraries 457 Adding Effects with a Library To see how simple it is to use an external library, you will now create an example script that includes the Script.aculo.us library and use event han- dlers to demonstrate several of the available effects. Downloading the Library To use the library, you will need to download it and copy the files you need to the same read more..

  • Page - 467

    458 CHAPTER 22 Using Third-Party Libraries TRY IT YOURSELF ▼ Adding Effects with a Library continued Building the Script After you have included the libraries, you can combine them with event han- dlers and some example text to create a complete demonstration of Script.aculo.us effects. The complete HTML document for this example is shown in Listing 22.1. LISTING 22.1 The Complete read more..

  • Page - 468

    Summary 459 Summary In this chapter, you learned about some of the many third-party libraries available for JavaScript. These can offer many advantages including easy cross-browser scripting, selection and editing of HTML and CSS values, animation, and more sophisticated user-interface tools such as drag-and- drop. Adding Effects with a Library continued This document starts with two read more..

  • Page - 469

    460 CHAPTER 22 Using Third-Party Libraries Q&A Q. How do I include a third-party JavaScript library into my pages? A. The process varies slightly from library to library. Usually it’s simply a matter of including one or more external .js files into the <head> part of your web page. See the documentation supplied with your chosen library for specific details. Q. Can I read more..

  • Page - 470

    Workshop 461 3. What other JavaScript third-party library does Script.aculo.us employ? a. Prototype b. Dojo c. jQuery Answers 1. c. AJAX is a programming technique enabling your scripts to use resources hosted on your server. There are many libraries to help you employ AJAX functionality, but AJAX itself is not a library. 2. c. jQuery has a well documented way to write and use read more..

  • Page - 471

    This page intentionally left blank read more..

  • Page - 472

    One of the recent trends is that JavaScript is being used in new ways, both inside and outside web browsers. In this chapter, you’ll look at Greasemonkey, a Firefox extension that enables you to write scripts to modify the appearance and behavior of sites you visit. User scripts can also work in Internet Explorer, Opera, and Safari with the right add-ons, and Chrome has read more..

  • Page - 473

    464 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript As a simple example, a user script called Linkify is provided with Greasemonkey. It affects all pages you visit and turns unlinked URLs into hyperlinks. In other words, the script looks for any string that resembles a URL in the page, and if it finds a URL that is not enclosed in an <a> tag, it modifies read more..

  • Page - 474

    Introducing Greasemonkey 465 Trixie for Internet Explorer The Greasemonkey extension was written as a Firefox extension and does not work on other browsers (although user scripts do with the right helpers). Fortunately, there’s an alternative for those that prefer Internet Explorer: Trixie is an add-on for Internet Explorer that supports user scripts. Trixie is available free from its read more..

  • Page - 475

    466 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript To minimize security risks, be sure you’re running the latest version of Greasemonkey or Trixie. Only enable scripts you are actively using and limit scripts you don’t trust to specific pages so that they don’t run on every page you visit. Working with User Scripts User scripts are a whole new way of read more..

  • Page - 476

    Working with User Scripts 467 The user scripts you have available are listed in the right column. Click on a script name to manage it: . Use the Enable/Disable button to enable or disable each script. . Click the Remove button to remove a script. . Right-click and choose Edit to open a script in a text editor. When it is saved, it will immediately take effect on pages read more..

  • Page - 477

    468 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript Testing User Scripts If you have a script enabled, it will be activated as soon as you load a page that matches one of the Included Pages specified for the script. (The script is run after the page is loaded, but before the onload event.) If you want to make sure Greasemonkey is running, either try one of read more..

  • Page - 478

    Creating Your Own User Scripts 469 LISTING 23.1 A Simple User Script to Change Paragraph Colors // Change the color of each paragraph var zParagraphs = document.getElementsByTagName(“p”); for (var i=0; i<zParagraphs.length; i++) { zParagraphs[i].style.backgroundColor=”#000000”; zParagraphs[i].style.color=”#ffffff”; } This script uses the getElementsByTagName() DOM method to find all the paragraph tags read more..

  • Page - 479

    470 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript LISTING 23.2 The Color-Changing Script with Metadata Comments // ==UserScript== // @name WhiteOnBlack // @namespace http://www.thickbook.com/ // @description Display paragraphs in white text on black // @include * // ==/UserScript== // // Change the color of each paragraph var zParagraphs read more..

  • Page - 480

    Creating Your Own User Scripts 471 Greasemonkey API Functions You can use all the DOM methods covered in this book to work with pages in user scripts, along with JavaScript’s built-in functions. In addition to these, Greasemonkey defines an API (application programming interface) with a few functions that can be used exclusively in user scripts: . GM_log(message, level) —Inserts a read more..

  • Page - 481

    472 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript Creating a Site-Specific Script You might want to use a user script to fix a problem or add a feature to a specific site. For example, you might want to remove all of the advertise- ments that display on your Facebook profile page—there are numerous Greasemonkey scripts at http://userscripts.org/ to address such an read more..

  • Page - 482

    Creating Your Own User Scripts 473 This script uses getElementsByTagName() to find all the <input> elements in a document, including text fields. It uses a for loop to examine each one. If it finds a field with the name or id value “yourname” or “phone” , it inserts the appropriate value. To test this script, save it as autoform.user.js and install the user script read more..

  • Page - 483

    474 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript Debugging User Scripts Debugging a user script is much like debugging a regular JavaScript program—errors are displayed in the JavaScript Console in Firefox or in an error message in Internet Explorer. Here are a few debugging tips: . As with regular scripts, you can also use the alert() method to dis- play read more..

  • Page - 484

    Creating Your Own User Scripts 475 Creating a User Script Now that you’ve learned the basics of Greasemonkey, you can try a more complex—and more useful—example of a user script. If you spend much time on the Web, you’ll find yourself needing to fill out web forms often, and you probably type certain things—such as your name or URL—into forms over and over. The read more..

  • Page - 485

    476 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript TRY IT YOURSELF ▼ Creating a User Script continued How It Works This user script begins with the usual comment metadata. The @include com- mand specifies a wildcard, *, so the script will work on all sites. The actual work is done in the textmacro function. This function begins by defining the macros that will be read more..

  • Page - 486

    Workshop 477 Q&A Q. Is there any way to prevent users from using Greasemonkey while viewing my site? A. Because Greasemonkey affects only the user who installed it, it’s usually harmless to allow it. If you still want to prevent its use, this is difficult, but not impossible, and varies with different versions of Greasemonkey. Search the Web to find current solutions. Q. read more..

  • Page - 487

    478 CHAPTER 23 Greasemonkey: Enhancing the Web with JavaScript 2. Which of the following is not a valid Greasemonkey API function? a. GM_log() b. GM_alert() c. GM_setValue() 3. Which is the correct @include directive to run a script on both www.google.com and google.com? a. @include *.google.com b. @include www.google.com.* c. @include google.com Answers 1. c. Trixie is a user script read more..

  • Page - 488

    Remote scripting, also known as AJAX (Asynchronous JavaScript and XML), is a browser feature that enables JavaScript to escape its client-side boundaries and work with files on a web server or with server-side programs. In this chapter, you’ll learn how AJAX works and create two working examples. Introducing AJAX Traditionally, one of the major limitations of JavaScript is that read more..

  • Page - 489

    480 CHAPTER 24 AJAX: Remote Scripting popular way of developing applications because browsers that support it have become more common. Another name for this technique is remote scripting. The JavaScript Client (Front End) JavaScript traditionally only has one way of communicating with a server—submitting a form. Remote scripting allows for much more versa- tile communication with the read more..

  • Page - 490

    Introducing AJAX 481 XML The X in AJAX stands for XML (Extensible Markup Language), the univer- sal markup language upon which the latest versions of HTML are built. A server-side file or program can send data in XML format, and JavaScript can act on the data using its methods for working with XML. These are similar to the DOM methods you’ve already used—for example, you read more..

  • Page - 491

    482 CHAPTER 24 AJAX: Remote Scripting AJAX Frameworks and Libraries Because remote scripting can be complicated, especially considering the browser differences you’ll learn about later this chapter, several frame- works and libraries have been developed to simplify AJAX programming. For starters, three of the libraries described earlier in this book, JQuery, Prototype, and Script.aculo.us, read more..

  • Page - 492

    Using XMLHttpRequest 483 Using XMLHttpRequest You will now look at how to use XMLHttpRequest to communicate with a server. This might seem a bit complex, but the process is the same for any request. Later, you will create a reusable code library to simplify this process. Creating a Request The first step is to create an XMLHttpRequest object. To do this, you use the new read more..

  • Page - 493

    484 CHAPTER 24 AJAX: Remote Scripting For the GET method, the data you send is included in the URL. For exam- ple, this command opens the search.php program and sends the value “John” for the query parameter: ajaxreq.open(“GET”,”search.php?query=John”); Sending the Request You use the send() method of the XMLHttpRequest object to send the request to the server. If you are using read more..

  • Page - 494

    Creating a Simple AJAX Library 485 JavaScript’s DOM methods are meant to work on XML, so you can use them with the responseXML property. Later this chapter, you’ll use the getElementsByTagName() method to extract data from XML. Creating a Simple AJAX Library You should be aware by now that AJAX requests can be a bit complex. To make things easier, you can create an read more..

  • Page - 495

    486 CHAPTER 24 AJAX: Remote Scripting The ajaxRequest Function The ajaxRequest function handles all the steps necessary to create and send an XMLHttpRequest . First, it creates the XMLHttpRequest object. As noted before, this requires a different command for older browsers and will cause an error if the wrong one executes, so try and catch are used to create the request. First the read more..

  • Page - 496

    Creating an AJAX Quiz Using the Library 487 Creating an AJAX Quiz Using the Library Now that you have a reusable AJAX library, you can use it to create JavaScript applications that take advantage of remote scripting. This first example displays quiz questions on a page and prompts you for the answers. Rather than including the questions in the script, this example reads the read more..

  • Page - 497

    488 CHAPTER 24 AJAX: Remote Scripting . The <script> tag in the <body> section includes the quiz.js file, which will contain the quiz script. . The <span id=”question”> tag sets up a place for the question to be inserted by the script. . The text field with the id value “answer” is where the user will answer the question. . The button with the id value read more..

  • Page - 498

    Creating an AJAX Quiz Using the Library 489 To use this file, save it as questions.xml in the same folder as the HTML document. It will be loaded by the script you create in the next section. Of course, with a quiz this small, you could have made things easier by storing the questions and answers in a JavaScript array. But imagine a much larger quiz, with thousands read more..

  • Page - 499

    490 CHAPTER 24 AJAX: Remote Scripting } qn = qn + 1; answerfield.value=””; nextQuestion(); } // Set up the event handlers for the buttons obj=document.getElementById(“startq”); obj.onclick=getQuestions; ans=document.getElementById(“submit”); ans.onclick=checkAnswer; This script consists of the following: . The first var statement defines a global variable, qn , which will keep track of which read more..

  • Page - 500

    Debugging AJAX Applications 491 Figure 24.1 shows the quiz in action. The second question has just been answered. FIGURE 24.1 The quiz example loaded in a web browser. Debugging AJAX Applications Dealing with remote scripting means working with several languages at once—JavaScript, server-side languages such as PHP, XML, and of course HTML. Thus, when you find an error, it can be read more..

  • Page - 501

    492 CHAPTER 24 AJAX: Remote Scripting TRY IT YOURSELF ▼ Making a Live Search Form One of the most impressive demonstrations of AJAX is live search: Whereas a normal search form requires that you click a button and wait for a page to load to see the results, a live search displays results within the page immedi- ately as you type in the search field. As you type letters read more..

  • Page - 502

    Debugging AJAX Applications 493 Making a Live Search Form continued . The <input> element with the id value “searchlive” is where you’ll type your search query. . The <div> element with the id value “results” will act as a container for the dynamically fetched results. A bulleted list is created with a <ul> tag; this will be replaced with a list of results read more..

  • Page - 503

    494 CHAPTER 24 AJAX: Remote Scripting TRY IT YOURSELF ▼ Making a Live Search Form continued This chapter is too small to teach you PHP, but here’s a summary of how this program works: . The header statement sends a header indicating that the output is in XML format. This is required for XMLHttpRequest to correctly use the responseXML property. . The $names array stores the read more..

  • Page - 504

    Debugging AJAX Applications 495 Making a Live Search Form continued // make a new list ul = document.createElement(“ul”); ul.id=”list”; names = ajaxreq.responseXML.getElementsByTagName(“name”); for (i = 0; i < names.length; i++) { li = document.createElement(“li”); name = names[i].firstChild.nodeValue; text = document.createTextNode(name); li.appendChild(text); ul.appendChild(li); } if (names.length==0) { li read more..

  • Page - 505

    496 CHAPTER 24 AJAX: Remote Scripting Summary In this chapter, you’ve learned how AJAX, or remote scripting, allows JavaScript to communicate with a web server. You created a reusable AJAX library that can be used to create any number of AJAX applications, and you created an example using an XML file. Finally, you created a live search form using AJAX and PHP. TRY IT read more..

  • Page - 506

    497 Q&A Q. What happens if the server is slow, or never responds to the request? A. This is another reason you should use AJAX as an optional feature— whether caused by the server or by the user’s connection, there will be times when a request is slow to respond or never responds. In this case, the callback function will be called late or not at all. This read more..

  • Page - 507

    498 CHAPTER 24 AJAX: Remote Scripting 2. Which property of an XMLHttpRequest object indicates whether the request was successful? a. status b. readyState c. success 3. True or False: To support old versions of Internet Explorer, you must cre- ate an ActiveX object rather than an XMLHttpRequest object when using AJAX. Answers 1. b. AJAX stands for Asynchronous JavaScript and XML. 2. a. read more..

  • Page - 508

    If you’ve ever used an online mapping tool such as MapQuest or Google Maps, you’ve no doubt experienced the need to print a web page. Similarly, the proliferation of coupons offered only online, purchase receipts for items from online resellers, and web-based flight check-in and the ability to print boarding passes from your home computer have increased the need for read more..

  • Page - 509

    500 CHAPTER 25 Creating Print-Friendly Web Pages What Makes a Page Print-Friendly? It’s important to point out that some web pages are print-friendly already. If your pages use white backgrounds with dark contrasting text and few images, you might not even need to concern yourself with a special print- friendly version. On the other hand, pages with dark backgrounds, dynamic links, read more..

  • Page - 510

    What Makes a Page Print-Friendly? 501 Most users also aren’t interested in printing more than the text that serves as the focus on the page. For example, Figure 25.1 shows a travel route mapped out from Independence, Missouri to Oregon City, Oregon (an approximation of the historic Oregon Trail). FIGURE 25.1 This page isn’t very print-friendly due to the form inputs and read more..

  • Page - 511

    502 CHAPTER 25 Creating Print-Friendly Web Pages In the spirit of giving you a better grasp on what, specifically, to consider as you move toward creating print-friendly pages, following is a list of changes you should at least consider: . Remove the background of the page, which effectively gives the printed page a white background. . Change text colors to black; it’s okay to read more..

  • Page - 512

    Applying a Media-Specific Style Sheet 503 You probably don’t need to make these changes to your pages just yet. The idea is to plant the seed of what constitutes a print-friendly page so that you can do a better job of creating a printer-specific style sheet. That’s right: It’s possible to create a style sheet that is applied to pages only when they are printed. You read more..

  • Page - 513

    504 CHAPTER 25 Creating Print-Friendly Web Pages Perhaps the most interesting of these media is the aural type, which allows for web pages that can be read aloud or otherwise listened to. Clearly, the architects of CSS envision a Web with a much broader reach than we cur- rently think of as we design pages primarily for computer screens. Although you probably don’t need to read more..

  • Page - 514

    Designing a Style Sheet for Print Pages 505 Designing a Style Sheet for Print Pages Using the recommended list of modifications required for a print-friendly web page, it’s time to take a stab at creating a print-friendly style sheet. Let’s first look at a page that is displayed using a normal (screen) style sheet (see Figure 25.3). FIGURE 25.3 A CSS-styled page as viewed read more..

  • Page - 515

    506 CHAPTER 25 Creating Print-Friendly Web Pages however, requires a bit of thought. Because you know that printed pages are a fixed size, you should use absolute positioning for all the elements on the printed page. This makes it much easier to place the content sections exactly where you want them. Finally, the last item on the list is very easy to accommodate by simply read more..

  • Page - 516

    Designing a Style Sheet for Print Pages 507 div.footer { position:absolute; text-align:left; left:0in; top:9in; } table.stats { width:100%; text-align:right; font-size:11pt; position:absolute; left:0in; top:3.75in; } div.contact { display:none; } .label { font-weight:bold; font-variant:small-caps; } tr.heading { font-variant:small-caps; background-color:black; color:white; } tr.light { background-color:white; } tr.dark { read more..

  • Page - 517

    508 CHAPTER 25 Creating Print-Friendly Web Pages Probably the neatest thing about this code is how it uses inches (in) as the unit of measure for all the absolute positioning code. This makes sense when you consider that we think of printed pages in terms of inches, not pixels. If you study the code carefully, you’ll notice that the text is all black, all special style read more..

  • Page - 518

    Summary 509 Just to show you how print-friendly pages can be used in a practical situa- tion, check out Figure 25.5. This figure shows the same hockey player page as a PDF document that can be viewed in Adobe Acrobat Reader. Adobe’s virtual printer can be used to “print” the hockey player web page to a PDF document. You might also find PDF converters such as DoPDF read more..

  • Page - 519

    510 CHAPTER 25 Creating Print-Friendly Web Pages Q&A Q. Can I use the media attribute of the <link /> tag to create a style sheet specifically for viewing a web page on a handheld device? A. Yes. By setting the media attribute of the <link /> tag to handheld, you specifically target handheld devices with a style sheet. You will likely see all mobile websites read more..

  • Page - 520

    Workshop 511 Answers 1. No—you still have to link to a page with a specific style sheet applied to the content so that it appears print-friendly. 2. The media attribute assumes its default value of all, which causes the style sheet to target all media types. 3. Use the following in the <head> section of your HTML: <link rel=”stylesheet” type=”text/css” read more..

  • Page - 521

    This page intentionally left blank read more..

  • Page - 522

    To this point, pretty much everything in this book has focused on getting information out to others. But you can also use your web pages to gather information from the people who read them. Web forms enable you to receive feedback, orders, or other information from the users who visit your web pages. If you’ve ever used a search engine such as Google, Yahoo!, or Bing, read more..

  • Page - 523

    514 CHAPTER 26 Working with Web-Based Forms or back-end) process requires knowledge of at least one programming lan- guage or at least the ability to follow specific instructions when using some- one else’s server-side script to handle the form input. At that point in the process, you should either work with someone who has the technical knowl- edge, or you should learn the read more..

  • Page - 524

    Creating a Form 515 sometimes used when submitting queries to search engines from a web form. Because you’re not yet an expert on forms, just use post unless your web-hosting provider’s documentation tells you to do otherwise. The action attribute specifies the address to which to send the form data. You have two options here: . You can type the location of a read more..

  • Page - 525

    516 CHAPTER 26 Working with Web-Based Forms . target specifies the window in which the result of the form (from the CGI script) will be displayed. Normally, this is done in the main window, replacing the form itself, but you can use this attribute to work with pop-up windows or frames. The form created in Listing 26.1 and shown in Figure 26.1 includes just about every read more..

  • Page - 526

    Creating a Form 517 size=”50” /></div> <div class=”formlabel”>Please check all that apply:</div> <div class=”formfield”> <input type=”checkbox” name=”website_response[]” value=”I really like your Web site.” />I really like your Web site.<br /> <input type=”checkbox” name=”website_response[]” value=”One of the best sites I’ve seen.” />One of the best sites I’ve read more..

  • Page - 527

    518 CHAPTER 26 Working with Web-Based Forms be better.</option> <option value=”More about the cats.”>More about the cats.</option> <option value=”More about the family.”>More about the family.</option> <option value=”More about Elvis.”>More about Elvis.</option> </select> </div> <div class=”formlabel”>Feel free to type more praise, gift offers, etc. below:</div> <div read more..

  • Page - 528

    Naming Each Piece of Form Data 519 The code in Listing 26.1 uses a <form> tag that contains quite a few <input /> tags. Each <input /> tag corresponds to a specific user input compo- nent, such as a check box or radio button. The input, select, and text area elements contain borders in the style sheet, so it is easy to see the outline of the elements read more..

  • Page - 529

    520 CHAPTER 26 Working with Web-Based Forms check boxes, which are discussed later in this chapter). When the form is processed by a back-end script, each data item is identified by name. This name becomes a variable, which is filled with a value. The value is either what the user typed in the form or the value associated with the element the user selected. For example, if read more..

  • Page - 530

    Exploring Form Input Controls 521 Exploring Form Input Controls Various input controls are available for retrieving information from the user. You’ve already seen one text-entry option, and the next few sections introduce you to most of the remaining form-input options you can use to design forms. Check Boxes The simplest input type is a check box, which appears as a small read more..

  • Page - 531

    522 CHAPTER 26 Working with Web-Based Forms <input type=”checkbox” name=”liked_site” value=”yes” /> I really like your Web site.<br /> <input type=”checkbox” name=”best_site” value=”yes” /> One of the best Sites I’ve seen.<br /> <input type=”checkbox” name=”my_site_sucks” value=”yes” />I sure wish my site looked as good as yours.<br /> <input type=”checkbox” name=”am_dense” read more..

  • Page - 532

    Exploring Form Input Controls 523 The check box has a single method: click() . This method simulates a click on the box. It also has a single event, onClick , which occurs whenever the check box is clicked. This happens whether the box was turned on or off, so you’ll need to examine the checked property via JavaScript to see what action really happened. Radio Buttons read more..

  • Page - 533

    524 CHAPTER 26 Working with Web-Based Forms For example, you can check the first radio button in the radio1 group on the form1 form with this statement: document.form1.radio1[0].checked = true; However, if you do this, be sure you set the other values to false as needed. This is not done automatically. You can use the click() method to do both of these in one step. Like a read more..

  • Page - 534

    Exploring Form Input Controls 525 The object for selection lists is the select object. The object itself has the following properties: . name is the name of the selection list. . length is the number of options in the list. . options is the array of options. Each selectable option has an entry in this array. . selectedIndex returns the index value of the currently selected read more..

  • Page - 535

    526 CHAPTER 26 Working with Web-Based Forms Text Fields and Text Areas The <input type=”text”> attribute mentioned earlier this chapter allows the user to enter only a single line of text. When you want to allow multiple lines of text in a single input item, use the <textarea> and </textarea> tags to create a text area instead of just a text field. Any text read more..

  • Page - 536

    Submitting Form Data 527 Submitting Form Data Forms typically include a button that submits the form data to a script on the server or invokes a JavaScript action. You can put any label you like on the submit button with the value attribute: <input type=”submit” value=”Place My Order Now!” /> A gray button will be sized to fit the label you put in the value read more..

  • Page - 537

    528 CHAPTER 26 Working with Web-Based Forms If you specify a statement or a function for the onSubmit event, the state- ment is called before the data is submitted to the server-side script. You can prevent the submission from happening by returning a value of false from the onSubmit event handler. If the statement returns true , the data will be submitted. In the same read more..

  • Page - 538

    Displaying Data from a Form 529 LISTING 26.2 A Form That Displays Data in a Pop-up Window <?xml version=”1.0” encoding=”UTF-8”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”> <head> <title>Form Display Example</title> <script type=”text/javascript”> function display() { read more..

  • Page - 539

    530 CHAPTER 26 Working with Web-Based Forms pressed, and the pop-up window shows the results. FIGURE 26.2 Displaying data from a form in a pop-up window. Sending Form Results by Email One easy way to use a form is to send the results by email. You can do this without using any JavaScript, although you could use JavaScript to vali- date the information entered (as you’ll read more..

  • Page - 540

    Sending Form Results by Email 531 <p>NAME: <input type=”text” name=”name” size=”50” /></p> <p>ADDRESS: <input type=”text” name=”address” size=”50” /></p> <p>PHONE: <input type=”text” name=”phone” size=”50” /></p> <p><input type=”submit” value=”Submit Form” /></p> </form> </body> </html> To use this form, change user@domain.com read more..

  • Page - 541

    532 CHAPTER 26 Working with Web-Based Forms TRY IT YOURSELF ▼ Validating a Form continued if (document.form1.phone.value.length < 3) { alert(“Please enter your phone number.”); return false; } return true; } </script> </head> <body> <h1>Form Submit Example</h1> <p>Enter the following information. When you press the Send button, the data you entered will be send via read more..

  • Page - 542

    Summary 533 Summary This chapter demonstrated how to create HTML forms, which allow your visitors to provide information to you. You learned about all the major form elements and how form-processing scripts interpret the names and value attributes of those elements. When you are ready to try a back-end form processing script, you’re now well- versed in the front-end details. You read more..

  • Page - 543

    534 CHAPTER 26 Working with Web-Based Forms TABLE 26.1 HTML Tags and Attributes Covered in Chapter 26 Tag/Attribute Function <form>...</form> Indicates an input form. Attributes action =”scripturl” The address of the script to process this form input. method =”post/get” How the form input will be sent to the server. Normally set to post, rather than get. <input /> An input read more..

  • Page - 544

    Workshop 535 Q&A Q. If I use JavaScript to add validation and other features to my form, can users with non-JavaScript browsers still use the form? A. Yes, if you’re careful. Be sure to use a Submit button rather than the submit action. Also, the server-side script might receive nonvalidated data, so be sure to include the same validation in the CGI script. Non- read more..

  • Page - 545

    536 CHAPTER 26 Working with Web-Based Forms 4. Where do you place the onsubmit event handler to validate a form? a. In the <body> tag b. In the <form> tag c. In the <input /> tag for the Submit button Answers 1. You would use HTML code similar to the following (with the appropriate DOCTYPE and other structural markup, of course): <form name=”form1” read more..

  • Page - 546

    The bulk of this book has led you through the design and creation of your own web content, from text to graphics and multimedia, as well as the implementation of basic JavaScript functionality for enhanced user interac- tion. Along the way I’ve noted some of the ways you can think about the lifecycle of that content, but in this chapter you’ll learn how to look at read more..

  • Page - 547

    538 CHAPTER 27 Organizing and Managing a Website When One Page Is Enough Building and organizing an attractive and effective website doesn’t always need to be a complex task. If you are creating a web presence for a single entity (such as a local event) that requires only a brief amount of very spe- cific information, you can effectively present that information on a single read more..

  • Page - 548

    When One Page Is Enough 539 As Figure 27.2 shows, each short section of the page is followed by a link leading back to the table of contents, so navigating around the page feels much the same as navigating around a multipage site. Because the con- tents of the page are intended as a handy reference, visitors will definitely prefer the convenience of bookmarking or saving read more..

  • Page - 549

    540 CHAPTER 27 Organizing and Managing a Website Having seen all the fancy graphics and layouts in this book, you might be tempted to forget that a good, old-fashioned outline is often the clearest and most efficient way to organize long web pages within a site. Organizing a Simple Site Although single-page sites have their place, most companies and individu- als serve their read more..

  • Page - 550

    Organizing a Simple Site 541 FIGURE 27.4 The MLB section at ESPN.com. FIGURE 27.3 This university main page uses a basic design, minimal but useful graphics, and clear structure to entice users to explore for more information. read more..

  • Page - 551

    542 CHAPTER 27 Organizing and Managing a Website In both examples, you see navigation elements at the top of the page (including some sub-navigation elements), a large area in the middle of the page for the featured item graphic, a rectangle on the right side containing links to top stories at the moment, and a second rectangle under the top sto- ries links for the display read more..

  • Page - 552

    Organizing a Larger Site 543 Organizing a Larger Site For complex sites, sophisticated layout and graphics can help organize and improve the look of your site when used consistently throughout all of your pages. To see how you can make aesthetics and organization work hand-in-hand, let’s look at examples of navigation (and thus underlying organization) for a few sites that read more..

  • Page - 553

    544 CHAPTER 27 Organizing and Managing a Website remember to provide users with basic information—especially if that infor- mation will enhance your image and make the user feel as if you value what they have to say. The next example is of a secondary page within the Starbucks.com website. All of the pages in the Starbucks.com website follow one of the common types of read more..

  • Page - 554

    Organizing a Larger Site 545 Figure 27.8 shows another example of a navigation style, this time with a twist on the standard top navigation/left-side navigation scheme. In this example, the left-side navigation (secondary navigation in this case) also appears in a drop-down menu under the main navigation (refer to Chapter 11, “Using CSS to Do More with Lists, Text, and read more..

  • Page - 555

    546 CHAPTER 27 Organizing and Managing a Website (either in a list or as graphical icons) next to one another if at all possible and definitely avoid presenting more than seven at once. Amazon.com gets a pass here because it is an Internet superstore and users expect a lot of “departments” in which to shop when they get there. But when you need to present more than seven read more..

  • Page - 556

    Writing Maintainable Code 547 it might be due to the fact that its human maintainer has not paid attention to structure, ease of reading, code commenting, and other methods for making the code readable by humans. For the sake of maintaining your own pages, I encourage you to impose a little more order on your HTML markup. The same goes for your JavaScript: Proper indentation read more..

  • Page - 557

    548 CHAPTER 27 Organizing and Managing a Website Indenting Code for Clarity I have a confession. Throughout the book I’ve been carefully indoctrinating you into an HTML code development style without really letting on. It’s time to spill the beans. You’ve no doubt noticed a consistent pattern with respect to the indentation of all the HTML code in the book. More read more..

  • Page - 558

    Thinking About Version Control 549 as you are typing. This is different than simply automatically saving your work (although it does that, too) because you can revert to any revision along the way. You might have encountered this concept when using pop- ular blog-authoring software such as Blogger or WordPress, or even when editing wikis—both of these also enable users to revise read more..

  • Page - 559

    550 CHAPTER 27 Organizing and Managing a Website popular systems are Subversion (http://subversion.apache.org) and Git (http://git-scm.com). If you have a web hosting service that enables you to install Subversion, you can create your own repository and use a Subversion client to connect to it. But an increasingly popular tool is Git, which is a decentralized approach to version control read more..

  • Page - 560

    551 Workshop Q&A Q. I’ve seen pages that ask viewers to change the width of their browser window or adjust other settings before proceeding beyond the home page. Why do they do this? A. The snarky response is that the site creators do not care about their users. Never force your users to do something differently than they are doing with their browsers, and especially read more..

  • Page - 561

    552 CHAPTER 27 Organizing and Managing a Website 3. You want to say, “Don’t change this image of me. It’s my only chance at immortality,” to future editors of a web page, but you don’t want users who view the page to see that message. How would you do it? Answers 1. Use consistent background, colors, fonts, and styles. Repeat the same link words or graphics on the read more..

  • Page - 562

    Your web pages are ultimately only as useful as they are accessible—if no one can find your pages, your hard work in creating a useful architecture, providing interesting content, and coding them correctly will be for naught. The additional HTML tags you’ll discover in this chapter won’t make any visible difference in your web pages, but they are extremely important in read more..

  • Page - 563

    554 CHAPTER 28 Helping People Find Your Web Pages To tackle this problem, you need a basic understanding of how most peo- ple decide which pages they will look at. There are basically three ways people become aware of your website: . Somebody tells them about it and gives them the address; they enter that address directly into their web browser. . They follow a link to read more..

  • Page - 564

    Listing Your Pages with the Major Search Sites 555 Search engines are basically huge databases that index as much content on the Internet as possible—including videos and other rich media. They use automated processing to search sites, using programs called robots or spi- ders to search pages for content and build the databases. After the content is indexed, the search read more..

  • Page - 565

    556 CHAPTER 28 Helping People Find Your Web Pages . Yahoo! Search —Visit http://siteexplorer.search.yahoo.com/submit, click on Submit a Website or Webpage, enter the address of your site, and then click the Submit URL button. . Bing —Visit http://www.bing.com/docs/submit.aspx, enter the veri- fication text, enter the address of your site, and then click the Submit URL button. . AllTheWeb read more..

  • Page - 566

    Providing Hints for Search Engines 557 . How many other pages in other websites link to the page? How many other pages link to those pages? . How many times have users chosen this page from a previous search list result? Clearly, the most important thing you can do to improve your position is to consider the keywords your intended audience are most likely to enter. I’d read more..

  • Page - 567

    558 CHAPTER 28 Helping People Find Your Web Pages You should always include <meta /> tags with name=”description” and name=”keywords” attributes in any page that you want to be indexed by a search engine. Doing so might not have a dramatic effect on your position in search lists, and not all search engines look for <meta /> tags, but it can only help. To give read more..

  • Page - 568

    Providing Hints for Search Engines 559 of each step as the starting point of the next. This is how Nature creates a magnificently detailed 300-foot redwood tree from a seed the size of your fingernail.</li> <li>Most “iterated systems” are easily simulated on computers, but only a few are predictable and controllable. Why? Because a tiny influence, like a “butterfly flapping read more..

  • Page - 569

    560 CHAPTER 28 Helping People Find Your Web Pages . A very descriptive alt attribute was added to the first <img /> tag. Not all search engines read and index alt text, but some do. . The quotation marks around technical terms (such as “fractal” and “iterated” ) were removed because some search engines consider “fractal” to be a different word than fractal. The read more..

  • Page - 570

    Providing Hints for Search Engines 561 <a href=”orderform.html”><img src=”orderform.gif” alt=”Order Form” style=”border-style:none” /></a> </div> <div style=”float:left; padding:6px”> <h2>A Comprehensive Guide to the<br /> Art and Science of Chaos and Complexity</h2> <p>What’s that? You say you’re hearing about &quot;fractals&quot; and read more..

  • Page - 571

    562 CHAPTER 28 Helping People Find Your Web Pages These changes will go a long way toward making the content of this site more likely to be appropriately indexed. In addition to good, indexed con- tent, remember that the quality of content—as well as the number of other sites linking to yours—is important as well. Additional Tips for Search Engine Optimization The most read more..

  • Page - 572

    Summary 563 . When possible, use text—not graphical elements—for navigation. . If you have content several levels deep, use a breadcrumb trail so that users can find their way back home. A breadcrumb trail also provides search engines with more words to index. For example, if you are look- ing at a recipe for biscuits in the Southern Cooking category of a food- related read more..

  • Page - 573

    564 CHAPTER 28 Helping People Find Your Web Pages Q&A Q. I have lots of pages in my site. Do I need to fill out a separate form for each page at each search site? A. No. If you submit just your home page (which is presumably linked to all the other pages), the search spiders will crawl through all the links on the page (and all the links on the linked read more..

  • Page - 574

    Workshop 565 Quiz 1. If you publish a page about puppy adoption, how could you help make sure that the page can be found by users who enter puppy, dog, and/or adoption at all the major Internet search sites? 2. Suppose you decide to paste your keywords hundreds of times in your HTML code, using a white font on a white background, so that your readers cannot see them. read more..

  • Page - 575

    This page intentionally left blank read more..

  • Page - 576

    INDEX absolute positioning, 213 display property (CSS), 53 positioning property, 214-217 accessibility, JavaScript best practices, 439 Adaptive Path, AJAX, 480 addEventListener function, 392 Adjust Hue/Lightness/Saturation tool (GIMP), 154 Adobe Photoshop, 148 AJAX, 71, 479. See also JavaScript AJAX Frameworks JavaScript library, 456 debugging applications, 491-496 examples of, 481 frameworks, 482 libraries, read more..

  • Page - 577

    aligning 568 numeric arrays, 337, 340-342 string arrays, 338 sorting, 340-342 splitting, 339 ASCII text, 26, 34, 82, 397 .asp file extensions, 27 ASP scripting language, 274 attributes, 92-93, 123 auto image loading, web browsers, 20 B <b> tags (HTML), 81-83 back end (AJAX requests), 480, 493-494 Back/Forward buttons, adding to documents, 304-305 backgrounds background-position style property, 172 read more..

  • Page - 578

    color 569 non-viewable window areas, 254 Opera, 9, 465 padding and, 226-228 pop-up windows, 134 popularity of, 26 Safari, 9 search engines, 445 sensing. See feature sensing servers, basic browser server inter- action, 3-5 text, adjusting font size settings, 20 websites comparing, 26 testing, 8-9, 26 windows creating, 410-411 linking frames to windows, 423-424 moving, 413-414 opening/closing, 411-412 read more..

  • Page - 579

    color 570 conditional statements (JavaScript), 289 conditions (for loops), 377 confirmations (dialog boxes), 417-418 constructor functions (JavaScript), 354 containers, 307 content (web) creating, 2-3 CSS box model, 210 delivering, 3-5 Javascripting scripting best prac- tices, 434 publishing locally, 18-19 to blogs, 19 viewing locally, 5 web hosting providers, selecting, 6-8, 26 continue statements read more..

  • Page - 580

    displaying 571 list-style-type style rule, 99-101 multiple style properties in, 58 text-align style rule, 93-95 viewing, 51 style sheets creating, 47-52 definition of, 45 external style sheets, 46-51 formatting properties, 53-56 formatting text color, 46 inline styles and, 61 internal style sheets, 46, 59-60 italic text, 56 layout properties, 52-53 line-through text, 56 linking to HTML documents, 50 read more..

  • Page - 581

    DisplayKey function, keyboard events 572 link objects, 303, 306 location objects, 305-306 methods, 299 naming, 299 parents, 308 properties, 299 referencing, 299 showing/hiding, 316-317 siblings, 308 window objects, 300, 409-418 parents, 308 siblings, 308 structure of, 306-307 text, web pages adding to, 319-321 modifying in, 317-318 DOM objects (JavaScript), 289 domain names, purchasing, 6 dotted value read more..

  • Page - 582

    formatting 573 minimum width, setting, 262-263 structure of, 258-259 Flickr, 161-163 float property (CSS), 191, 204-207, 220 float style property, 166 flow control (JavaScript), 369 break statements, 381 case statements, 376 continue statements, 382 do, while loops, 380 for loops, 377-378 for, in loops, 382-384 if statements, 369 conditional expressions, 370-373 conditional operators, 370 else keyword, read more..

  • Page - 583

    formatting 574 selection lists, 524-525 text areas, 526 text fields, 526 text input, accepting, 519 user input, accepting, 519 validating, 70, 531-532 forward slashes (/), HTML and, 124 Forward/Back buttons, adding to doc- uments, 304-305 frames, 418-420 animated graphics, 161 borders, modifying, 424-425 frames array, 426 frameset documents, creating, 421-423 individual frames, adding, 423 inline frames, read more..

  • Page - 584

    HTML 575 height/width, specifying, 165 image maps, 173-178 JPEGs compression, 155 tiled backgrounds, 159-160 links, turning graphics into, 169-171 Picnik, 149 PNGs, 158-159 Red Eye Removal, 154 republishing, 163 resizing, 153 resolution, 150 rollover images, 394 software, choosing, 149 text descriptions, 163-164 transparent graphics, 158 uses of, 150 web pages grabbing graphics from, 149 placing graphics read more..

  • Page - 585

    HTML 576 check boxes, 521-523 creating, 514-519 displaying data in pop-up windows, 528-530 hidden data, 520 JavaScript events, 527-528 naming form data, 519-520 pull-down pick lists, 524-525 radio buttons, 523-524 scrolling lists, 524-525 selection lists, 524-525 sending data via email, 530-531 submitting form data, 527 text areas, 526 text fields, 526 text input, 519 user input, 519 validating, read more..

  • Page - 586

    HTML 577 <head> tag, 27, 31-33 heading tags, 34-36 horizontal rule tag, 33 <hr /> tag, 33 <html> tag, 27, 31-33 <i> tags, 81-83 <img> tags, 162-163 line breaks, 32-33 naming files with, 27 nested tags, 97 opening tags, 30 <p> tag, 31-33 paragraphs, 32-33 <pre> tags, 84-85 pseudoclasses, 134-138 saving files with, 27 <small> tags, 83 <strike> tags, 84 read more..

  • Page - 587

    HTML 578 clip art, 149 color, adjusting, 154 compression, 150 copyrights and, 149 Creative Commons licenses, 149 cropping, 151-152 dithering, 158 dynamic websites, changing images via user interaction, 281-283 file sizes, 150 Flickr, 161-163 GIFs, 157-158 animated images, 160-161 tiled backgrounds, 159-160 transparent images, 159 Google Images, 161 Google Picasa, 149 height/width, specifying, 165 image read more..

  • Page - 588

    JavaScript 579 data types, 330-331 Date objects, time display exam- ple, 72 design patterns, 439 development of, 66 do, while loops, 380 document.write statements, 68, 73 documenting code, 438 DOM, 280-281 adding text to web pages, 319-321 anchor objects, 303 children, 308 document objects, 300-303, 306 hiding/showing objects, 316-317 history objects, 303-305 layers, 311-315 link objects, 303, 306 read more..

  • Page - 589

    JavaScript 580 libraries adding effects via, 457 adding to HTML documents, 457 AJAX Frameworks, 456 building scripts, 458-459 Dojo, 456 downloading, 457 jQuery, 454-455 Mochikit, 456 MooTools, 456 Prototype, 453-454 Script.aculo.us, 455-459 using effects via, 457 Yahoo! UI Library, 456 logical operators, 371 loops break statements, 381 continue statements, 382 escaping, 381 modifying scripts, 74-76 modulo read more..

  • Page - 590

    link objects (DOM) 581 declaring, 326 global variables, 326 incrementing/decrementing, 327 local variables, 326 localtime variable, 72 naming, 292, 325-326 scope of, 326 time display example, 72 UTC variable, 72 web pages, adding JavaScript to, 67-68, 73-74 websites, navigating, 70 while loops, 379-380 with keyword, 363-364 join() method, 342 JPEG compression, 155 tiled backgrounds, 159-160 jQuery read more..

  • Page - 591

    links 582 regular lists versus, 235 secondary navigation, 236 vertical navigation, 236-244 nested lists, 97-100, 226 ordered lists, 95-96, 226 outlines, creating via lists, 98-100 unordered lists, 95-96, 226 live search forms AJAX, creating via, 496 HTML forms, 492 JavaScript front end, 494-495 PHP back end, 493-494 example, requirements for, 496 LiveScript, JavaScript development, 66 loading web read more..

  • Page - 592

    objects (DOM) 583 event handlers, 390 files with HTML tags, 27 form data, 519-520 JavaScript functions, 292 JavaScript objects, 292 JavaScript variables, 292, 325-326 NaN (not a number), 331 navigating websites, JavaScript, 70 navigation lists horizontal navigation, 245-248 primary navigation, 236 regular lists versus, 235 secondary navigation, 236 vertical navigation, 236-238 multilevel vertical read more..

  • Page - 593

    objects (DOM) 584 string objects adding methods to, 357 assigning values, 332-334 combining values, 332-334 creating, 332 Office Online Clip Art and Media web- site (Microsoft), 149 onClick event handler, 394-397, 400-404 onDblClick event handler, 395 online resources, CSS reference guide, 47 onLoad events, 399 onMouseDown event handler, 395-397 onMouseOut event handler, 394 onMouseOver event handler, read more..

  • Page - 594

    <script> tag (JavaScript) 585 programming languages, strings, 72 “progressive enhancement” strategies for, 294 web design and, 435 prompts (dialog boxes), 417-418 properties DOM objects, 299 document objects, 301 history objects, 303 location objects, 305-306 relationship properties, 309 JavaScript objects, 288 prototypes, 357-358 values, 353 Prototype JavaScript library, 453-454 prototypes (JavaScript read more..

  • Page - 595

    Script.aculo.us JavaScript library 586 site-specific user scripts, 472-473 testing user scripts, 468-471 text area macro user scripts, 475-476 turning on/off, 468 interpreted languages, 66 JavaScript, 274 accessibility, 439 adding scripts to web pages, 73-74 adding to web pages, 67-68 advantages over HTML, 299 AJAX, 71 AJAX live search forms, 494-496 AJAX quiz building example, 489-490 AJAX requests, read more..

  • Page - 596

    sizing 587 usability, 438-439 using, 68 validating forms, 70 variables, 72, 288, 292, 325-328 web standards and browser specificity, 437-438 while loops, 379-380 with keyword, 363-364 JSON, 481 JSP, 274 languages, 65 Perl, 274 PHP, 274, 514 Python, 274 remote scripting. See AJAX Ruby, 274 server-side scripts, 274, 480, 493-495 text editors, 74 Trixie, 465 installing user scripts, 466 managing user read more..

  • Page - 597

    sizing 588 strings (JavaScript), 330 case, converting, 334 length of, calculating, 334 string arrays, 338 sorting, 340 splitting, 339 string objects adding methods to, 357 assigning values, 332-334 combining values, 332-334 creating, 332 substrings finding, 336-337 getting single characters, 336 using parts of strings, 335-336 <strong> tags (HTML), 83 strong text. See boldface text style classes read more..

  • Page - 598

    tags (HTML) 589 text formatting color, 46 sizing, 50 underline text, 56 validating, 61 web browsers, CSS support, 51 z-index property, 217-219 <sub> tags (HTML), 83 subscript text, 83 substrings finding, 336-337 parts of strings, using, 335-336 single characters, getting, 336 Subversion website version control, 550 <sup> tags (HTML), 83 superscript text, 83 support CSS, web browser support for, read more..

  • Page - 599

    tags (HTML) 590 paragraphs, 93-95 tables, 113-115 text-align style rule (CSS), 93-95 alternate text, 163-164 ASCII text, 26, 34, 82 color, CSS and, 56, 146-148 documents, writing text within, 302 flowing text, 220 fonts Arial font, 86 color style rule (CSS), 86-87 font property (CSS), 56 font weight style rule (CSS), 83 font-family property (CSS), 55 font-family style rule (CSS), 86 font-size read more..

  • Page - 600

    variables (JavaScript) 591 Trixie, 465 turning on/off, 468 user scripts installing, 466 managing, 467 truncating decimal numbers, 360 <tt> tags (HTML), 84-85 turning on/off Greasemonkey, 468 Trixie, 468 .txt file extension, 74 typewriter font. See monospaced text U <u> tags (HTML), 84 underline text, style sheets, 56 “unobtrusive scripting”, 433, 447-449 unordered lists, 95-96, 226 “uptime,” read more..

  • Page - 601

    VBScript scripting language 592 JavaScript objects and, 425 linking windows to frames, 423-424 modifying borders, 424-425 nested framesets, 425 Google Chrome, 9, 465 history, accessing, 2, 303-305 HTML development, 2 images, auto image loading, 20 information, reading via JavaScript dishonest browsers, 442-443 displaying information, 440-441 Internet Explorer, 9 event properties, 393 Trixie, 465-468 links, read more..

  • Page - 602

    web content 593 compression, 150 copyrights and, 149 Creative Commons licenses, 149 cropping, 151-152 dithering, 158 file sizes, 150 Flickr, 161, 163 GIFs, 157-161 GIMP, 149 GIMP, adjusting image color, 154 GIMP, banners, 156 GIMP, buttons, 156 GIMP, cropping images, 151-152 GIMP, JPEG compression, 155 GIMP, resizing images, 153 Google Images, 161 Google Picasa, 149 grabbing from web pages, 149 read more..

  • Page - 603

    web content 594 cells, sizing, 111-113 color in, 115 creating, 107-110 headings, creating, 108 images in, 116 page layout via, 116-117 rows, creating, 107 sizing, 110-113 sizing borders, 107 spacing borders, 116 spanning within, 115 uses for, 107 testing, 19-20 text, formatting, 82 adding to web pages, 319-321 aligning text, 92-95 big text, 83 boldface text, 82-83 customizing fonts in HTML, read more..

  • Page - 604

    web pages 595 graphics adjusting color, 154 Adobe Photoshop, 148 aligning graphics, 165-168 animated graphics, 160-161 background graphics, 171-172 banners, 156 buttons, 156 choosing software, 149 clip art, 149 compression, 150 copyrights and, 149 Creative Commons licenses, 149 cropping, 151-152 dithering, 158 file sizes, 150 Flickr, 161-163 GIFs, 157-161 GIMP, 149 GIMP, adjusting image color, 154 GIMP, read more..

  • Page - 605

    web pages 596 selectors, 57 sizing text, 50 style classes, 57-58 style IDs, 59 style properties, 57 style rules, 46, 50-51, 58 validating, 61 web browser support, 51 tables aligning within, 113-115 cells, creating, 107 cells, sizing, 111-113 color in, 115 creating, 107-110 headings, creating, 108 images in, 116 page layout via, 116-117 rows, creating, 107 sizing, 110-113 sizing borders, 107 read more..

  • Page - 606

    websites 597 GIFs, 157-161 GIMP, 149 GIMP, adjusting image color, 154 GIMP, banners, 156 GIMP, buttons, 156 GIMP, cropping images, 151-152 GIMP, JPEG compression, 155 GIMP, resizing images, 153 Google Images, 161 Google Picasa, 149 grabbing from web pages, 149 image maps, 173-178 JPEGs, 155, 159-160 Picnik, 149 placing graphics on web pages, 161-163 PNGs, 158-159 Red Eye Removal, 154 read more..

  • Page - 607

    websites 598 fixed/liquid hybrid layouts, setting minimum width in, 262-263 images, specifying width in, 165 width property (CSS), 53 window objects (DOM), 300 browser windows creating, 410-411 moving, 413-414 opening/closing, 411-412 resizing, 413-414 timeouts, 414-416 dialog boxes, displaying, 417-418 properties of, 409-410 windows (browser) closing, 412 creating, 410-411 frames, linking to windows, 423-424 read more..

  • Page - 608

    read more..

Write Your Review