ptg Another is Adobe Kuler at http://kuler.adobe.com/. It makes it easy to create your own color schemes and to browse and rate color schemes created by others. It’s a great place to find inspiration if you’re thinking about adding color to a site. Changing Colors Using CSS There are two key properties when it comes to assigning colors to elements using CSS— color and background-color. For elements with borders, you can also set the border color using the border-color property. To indicate that a paragraph should have white text on a black background, you could use the following code: <p style=“color: #fff, background-color: #000”>This paragraph has white text on a black background.</p> You can also use these properties to adjust the colors on the whole page by applying them to the body tag. Here’s an example: <body style=“color: #fff; background-color: #00f”> This page will have white text on a blue background. You can also specify colors as part of the background and border properties, which allow you to set the values for a whole family of properties at once. The background property will be discussed later in this lesson. Changing Page Colors in HTML Before CSS was introduced, page colors were changed using attributes for the <body> tag. Many web developers still use these attributes, but they have been deprecated since HTML 4 and were left out of HTML5 entirely. The values of all the color-related HTML attributes can be specified using hexadecimal notation or with color names. To set the background color for a page, use the bgcolor attribute. Here’s how it is used with hexadecimal color specifications: <body bgcolor=“#ffffff”> <body bgcolor=“#934ce8”> To use color names, just use the name of the color as the value to bgcolor: <body bgcolor=“white”> <body bgcolor=“green”> There are also attributes of the <body> tag that can be used to set the text colors for the page. The attributes and their use are as follows: text Controls the color of all the page’s body text except for link text, including headings, body text, text inside tables, and so on. 236 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg link Controls the color of link text for links that the user has not already clicked on. vlink Controls the color of links that the user has already visited. alink Controls the color of a link while the user is clicking on it. When the user clicks on a link, it changes to this color. When he releases the mouse button, it switches back. Like the bgcolor attribute, these attributes have been dropped from HTML5. You may still see them in older pages, but you should use CSS when you’re creating your own pages. Remember the haunted house image that you inserted on a page earlier? The page would be decidedly spookier with a black background, and orange text would be so much more appropriate for the holiday. To create a page with a black background, orange text, and deep red unvisited links, you might use the following <body> tag: <body bgcolor=“#000000” text=“#ff9933” link=“#800000”> Using the following color names for the background and unfollowed links would pro- duce the same effect: <body bgcolor=“orange” text=“black” link=“#800000”> Both these links would produce a page that looks something like the one shown in Figure 9.18. Using Color 237 9 FIGURE 9.18 Background and text colors. The same effect can be achieved using the background-color and color properties in CSS. Here’s the <body> tag that specifies the color using CSS: <body style=”background-color: #000000; color: #ff9933”> Download from www.wowebook.com ptg That style attribute does not specify a color for links as the original body tag does. To set the link color for all the links on a page, you need to use a style sheet for the page and specify the style for the <a> tag, like this: <style type=”text/css”> a { color: #ff9933; } </style> What about active links and visited links? CSS provides pseudo-selectors that apply to links in particular states, as follows: a:link Applies to unvisited links. a:visited Applies to links which the user has visited. a:hover Applies to links when the user has her mouse pointer over the link. a:active Like the alink attribute, this selector is used when the user is clicking on the link. As you can see, these selectors provide access to an additional state that the old attributes did not, the hover state. Here’s an example that specifies the colors for links in each of their states: <style type=”text/css”> a { color: #ff9933; } a:visited { color: #bbbbbb; } a:hover { color: #E58A2E; } a:active { color: #FFA64D; } </style> Image Backgrounds The last topic in this lesson is using an image as a background for your pages, rather than simply a solid-colored background. When you use an image for a background, that image is tiled; that is, it’s repeated in rows to fill the browser window. To create a tiled background, you need an image to serve as the tile. Usually, when you create an image for tiling, you must make sure that the pattern flows smoothly from one tile to the next. You can do some careful adjusting of the image in your favorite image- editing program to make sure that the edges line up. The goal is for the edges to meet cleanly so that you don’t have a seam between the tiles after you’ve laid them end to end. (See 9.19 for an example of tiles that don’t line up very well.) You also can try clip art packages for wallpaper or tile patterns that are designed as tiles. Some graphics pack- ages, such as Photoshop, can also modify your images so that they work as tiles. This feature works better with some kinds of images than others. 238 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg You can include background images on your pages using CSS. To include a background image on a page (or under any block element), the background-image property is used. Here’s an example, the results of which are shown in Figure 9.19: <body style=“background-image: url(backgrounds/rosemarble.gif)”> Image Backgrounds 239 9 FIGURE 9.19 Tiled images with seams. You can also use the background attribute of the <body> tag to specify an image to use as the page background, however, this attribute is not valid in HTML5: <body background=”backgrounds/rosemarble.gif” /> You may still see the background attribute used in older web pages, but you should use CSS for specifying backgrounds. By default, background images are tiled both horizontally and vertically. However, CSS provides a number of options for controlling how backgrounds are applied. The back- ground-repeat property is used to specify how background images are tiled. Options include repeat (which tiles the image horizontally and vertically), repeat-x (tile hori- zontally only), repeat-y (tile vertically only), and no-repeat. You can also specify whether the background image scrolls along with the content of the page or remains in a fixed position using the background-attachment property. The two values there are scroll and fixed. So, if you want to put one background image in the upper-left corner of the browser window and have it stay there as the user scrolls down the page, you would use the following: <body style=“background-image: url(backgrounds/rosemarble.gif); background-repeat: no-repeat; background-attachment: fixed”> What if you want the background image to appear somewhere on the page other than the upper-left corner? The background-position property enables you to position a back- ground image anywhere you like within a page (or element). The background-position property is a bit more complex than most you’ll see. You can either pass in two percent- Download from www.wowebook.com ptg ages, or the horizontal position (left, right, center), or the vertical position (top, bottom, center) or both the horizontal and vertical position. Here are some valid settings for this property: Upper right 0% 100% top right right top right Center 50% 50% center center Bottom center 50% 100% bottom center center bottom Here’s a <body> tag that places the background in the center right of the window and does not scroll it with the page: <body style=“background-image: url(backgrounds/rosemarble.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: center right”> Instead of using all these different properties to specify the background, you can use the background property by itself to specify all the background properties. With the back- ground property, you can specify the background color, image, repeat setting, attach- ment, and position. All the properties are optional, but they must appear in a specific order. Here’s the structure of the property: background: background-color background-image background-repeat background- attachment background-position; To condense the preceding specification into one property, the following tag is used: <body style=“background: url(backgrounds/rosemarble.gif) no-repeat fixed center right”> If you like, you can also include a background color. Here’s what the new tag looks like: <body style=“background: #000 url(backgrounds/rosemarble.gif) no-repeat fixed center right”> 240 LESSON 9: Adding Images, Color, and Backgrounds Download from www.wowebook.com ptg Specifying Backgrounds for Elements The CSS background properties can be used to apply a background to any block-level element—a <div>, a <form>, a <p>, a <table>, or a table cell. Specifying the back- grounds for these elements is the same as setting the background for an entire page, and is an easy way to add decorative elements to a page. For example, I want to add an arrow to the left of all the major headings on my web page to really emphasize them. I could stick an <img> tag inside each of the <h1> elements on my page, but that would be repet- itive, and the images don’t make sense as part of the contents of the page. So instead, I can apply the images using CSS. The results are in Figure 9.20. Here’s the style sheet: <style type=”text/css”> h1 { background: url(arrow_right.png) no-repeat center left; line-height: 60px; padding-left: 60px; } </style> The heading tag is completely normal: <h1>This Heading Has a Background</h1> Image Backgrounds 241 9 FIGURE 9.20 A heading with an image background. In the style sheet, I use the background property to specify the background image and its position for the <h1> tag. One extra benefit is that this style will be applied to all the <h1> tags on the page. I use the background property to specify the image and to posi- tion it. I use no-repeat because I want only one copy of the image and center left to position it at the left end of the header, in the middle. I use the line-height property to make sure there’s plenty of space for my background image, which is 50 pixels tall, regardless of the font size of the heading. Then I add 60 pixels of padding to the left of the heading so that the text will not appear over the background image. Download from www.wowebook.com ptg 242 LESSON 9: Adding Images, Color, and Backgrounds CSS Backgrounds and the <img> Tag Applying backgrounds to elements using CSS is an alternative to using the <img> tag to place images on a page. There are many situations in which both options will work. (For example, if you want to layer text over an image, you can place the text in a <div> and use the image as the background for that <div>, or you can use the <img> tag and then use CSS positioning to place the text over the image.) However, there is a rule of thumb that many web designers use when choosing between the two alternatives. If an image is purely decorative, it should be included on the page as a background. If an image is part of the content of the page, you should use an <img> tag. So if the page is a news article, and you’re including an image to illustrate the article, the <img> tag is appropriate. If you have a photo of a landscape that you want to use to make the heading of your page more attractive, it makes more sense to use CSS to include the image as a background in the heading. The reason for this rule is that it makes things easier for visually challenged users who may be visiting a page using a screen reader. If you include your pretty header image using the <img> tag, their screen reader will tell them about the image on every page they visit. On the other hand, they probably would want to know about the photo accompanying a news article. Another simple rule is to think about what you would put in the alt attribute for an image. If the alternate text is interesting or useful, you should use the <img> tag. If you can’t think of anything interesting to put in the alternate text for an image, it probably should be a background for an element instead. Using Images As Bullets In Lesson 5, “Organizing Information with Lists,” I discussed the list-style-image property, which enables you to use images as bullets for lists. Specifying the image URL for bullets is the same as specifying the URL for background images in CSS. The browser will substitute the default bullets with the image you specify. Here’s an example, the results of which are shown in Figure 9.21. Input ▼ <!DOCTYPE html> <html> <head> <title>Southern Summer Constellations</title> <style type=”text/css” media=”screen”> ul { Download from www.wowebook.com ptg list-style-image: url(“Bullet.png”); } </style> </head> <body> <h1>Southern Summer Constellations</h1> <ul> <li>Canis Major</li> <li>Cetus</li> <li>Eridanus</li> <li>Gemini</li> <li>Orion</li> <li>Perseus</li> <li>Taurus</li> </ul> </body> </html> What Is an Imagemap? 243 9 Output . FIGURE 9.21 A list that uses images for bullets. You can also supply both the list-style-image and list-style-type properties so that if the image is not found, the list will use the bullet style of your choosing. What Is an Imagemap? Earlier in this lesson, you learned how to create an image that doubles as a link simply by including the <img> tag inside a link tag (<a>). In this way, the entire image becomes a link. In an imagemap, you can define regions of an image as links. You can specify that cer- tain areas of a map link to various pages, as in Figure 9.22. Or you can create visual metaphors for the information you’re presenting, such as a set of books on a shelf or a photograph with a link from each person in the picture to a page with his or her biogra- phy on it. Download from www.wowebook.com ptg FIGURE 9.22 Imagemaps: different places, different links. 244 LESSON 9: Adding Images, Color, and Backgrounds washington.html minnesota.html ohio.html florida.html alaska.html california.html texas.html HTML5 supports the <map> element for creating image maps. If you don’t want to use the <map> tag, you can also use CSS to position links over an image and hide the con- tents of those links, making it appear as though regions of an image are clickable. I dis- cuss both techniques in this lesson. ImageMaps and Text-Only Browsers Because of the inherently graphical nature of image maps, they work well only in graphi- cal browsers. Lynx, the most popular text-based browser, provides limited support for client-side imagemaps. If you load a page in Lynx that contains a client-side imagemap, you can get a list of the links contained in the imagemap. Getting an Image To create an imagemap, you need an image (of course). This image will be the most use- ful if it has several discrete visual areas that can be selected individually. For example, use an image that contains several symbolic elements or that can be easily broken down into polygons. Photographs generally don’t make good imagemaps because their various elements tend to blend together or are of unusual shapes. Figures 9.23 and 9.24 show examples of good and poor images for imagemaps. Download from www.wowebook.com ptg FIGURE 9.24 A not-so-good image for an imagemap. What Is an Imagemap? 245 9 FIGURE 9.23 A good image for an imagemap. Determining Your Coordinates Client-side imagemaps consist of two parts; the first is the image used for the imagemap. The second is the set of HTML tags used to define the regions of the imagemap that serve as links. To define these tags, you must determine the exact coordinates on your image that define the regions you’ll use as links. You can determine these coordinates either by sketching regions and manually noting the coordinates or by using an imagemap creation program. The latter method is easier because the program automatically generates a map file based on the regions you draw with the mouse. Download from www.wowebook.com . Backgrounds washington .html minnesota .html ohio .html florida .html alaska .html california .html texas .html HTML5 supports the <map> element for creating image maps. If you don’t want to use the <map> tag, you can also use CSS. Major</li> <li>Cetus</li> <li>Eridanus</li> <li>Gemini</li> <li>Orion</li> <li>Perseus</li> <li>Taurus</li> </ul> </body> < /html& gt; What Is an Imagemap? 243 9 Output . FIGURE 9. 21 A list that uses images for bullets. You can also supply both the list-style-image and list-style-type properties so. type=”text /css > h1 { background: url(arrow_right.png) no-repeat center left; line-height: 60px; padding-left: 60px; } </style> The heading tag is completely normal: <h1>This Heading