Other Neat Tricks with Images
Now that you've learned about inline images, images as links, and how to wrap text around images, you know what
people do with images on web pages. But you can play with a few
All the attributes in this section were originally Netscape extensions. They were later incorporated into HTML 3.2, but most have been deprecated in its successor, HTML 4.01.
Image Dimensions and Scaling
Two attributes of the <img> tag, height and width , specify the height and width of the image in pixels. Both became part of the HTML 3.2 specification, but they're deprecated in HTML 4.01 in favor of style sheets.
If you use the actual height and width of the image in these attributes (which you find by opening the image file directly in your browser), some older browsers will load and display your web pages much faster than if you don't include the values.
Why? Old browsers (Netscape 4 and Internet Explorer 3) couldn't alter the layout of pages as they were being loaded, so the
Not only will browsers usually tell you the size of any image you
If the values for
are different from the actual width and height of the image, your browser will resize the image to fit those dimensions. Because smaller images take up less disk space than larger images and therefore take less time to transfer over the network, you can just create a smaller version and then scale it to the dimensions you want on your web page. The downside of this technique is that the imagescaling algorithms built into browsers are not always the best. If you use the
attributes to change the size of an image, be prepared for it to look pretty bad,
Don't perform reverse scaling creating a large image and then using width and height to scale it down. Smaller file sizes are better because they take less time to load. If you're going to display a small image, make it smaller to begin with.
More About Image Borders
You learned about the border attribute of the <img> tag as part of the section on links, where setting border to a number or to determined the width of the image border (or hid it entirely).
By default, images that aren't inside links don't have borders. However, you can use the
attribute to include a border around any image, as
<p><img src="eggplant.gif" alt="Eggplant" align="left" border="5" width="102" height="178" /> This is an eggplant. We intend to stay a good ways away from it, because we really don't like eggplant very much. </p>
Figure 7.28 shows an image with a border around it.
Figure 7.28. An image border.
Controls the color of all the page's body text except for link text, including headings, body text, text inside tables, and so on.
Controls the color of link text for links that the
Controls the color of links that the user has already visited.
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 or she releases the mouse button, it switches back.
< body bgcolor = "#000000" text = "#ff9933" link = "#800000" >
Using the following color names for the background and unfollowed links would produce 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 7.30.
When you change a page's text colors by using attributes to the <body> tag, that change affects all the text on the page. Spot color is the ability to change the color of individual characters on your page, which you can use instead of or in addition to a global text color.
<p> When we go out tonight, we're going to paint the town <font color="#ff0000"> RED </font> .
Of course, you can use font spot colors in addition to font names and sizes.
Needless to say, there are ways to specify color on a page using Cascading Style Sheets. First, let's look at how colors are specified using CSS. The two
You can also specify colors using decimal values or percentages. For example, #66CCFF can be specified as (102, 204, 255) using decimal notation. Or, if you prefer, using percentages, like this: (40%, 80%, 100%) . If you don't want to worry about these alternative methods, that's fine. You can just use the same ones that you use when specifying colors in HTML.
There are two key properties when it comes to assigning colors to elements using CSS
< 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. That's all there is to using colors with CSS. There are other ways that color can be used, and more important, in Lesson 9, you'll see how you can apply color to elements on a page without using the style attribute, which can be cumbersome.