|
If you've been struggling to keep up with all the HTML tags I've been flinging at you over the last couple of days, you can breathe easier: things will be easier today. In fact, today you're going to learn very few new HTML tags. The focus for today is on adding images and color to your Web pages. In this chapter you'll learn about the HTML codes for adding images, color, and backgrounds, in particular:
After this chapter you'll know all there is to adding images to your Web pages. Chapter 8, "Creating Images for the Web," will teach you about the tricks you can do with the images themselves to create different effects on your Web pages.
Images for Web pages fall into two general classes: inline images
and external images. Inline images appear directly on a Web page
among the text and links and are loaded automatically when you
load the page itself-assuming, of course, that you have a graphical
browser and that you have automatic image-loading turned on. External
images are images that are not directly displayed when you load
a page. They are downloaded only at the request of your reader,
usually on the other side of a link. External images don't need
a graphical browser to be viewed-you can download an image file
just fine using a text-only browser and then use an image editor
or viewer to see that image later on. You'll learn about how to
use both inline and external images in this chapter.
| New Term |
Inline images appear on a Web page along with text and links, and are automatically loaded when the page itself is retrieved. |
| New Term |
External images are stored separate from the Web page and are loaded only on demand, for example, as the result of a link. |
Regardless of whether you're using inline or external images, those images must be in a specific format. For inline images, that image has to be in one of two formats: GIF or JPEG. GIF is actually the more popular standard, and more browsers can view inline GIF files than JPEG files. Support for JPEG is becoming more widespread but is still not as popular as GIF, and so sticking with GIF is the safest method of making sure your images can be viewed by the widest possible audience. You'll learn more about the difference between GIF and JPEG and how to create images in these formats in Chapter 8. You'll learn more about external images and the formats you can use for them later in this chapter.
For this chapter, let's assume you already have an image you want to put on your Web page. How do you get it into GIF or JPEG format so that your page can view it? Most image-editing programs such as Adobe Photoshop, Paint Shop Pro, Corel Draw, or XV provide ways to convert between image formats. You may have to look under an option for Save As or Export in order to find it. There are also freeware and shareware programs out there for most platforms that do nothing but convert between image formats.
To save files in GIF format, you're looking for an option called CompuServe GIF, GIF87, GIF89, or just plain GIF. Any of these will work. If you're saving your files as JPEG, usually the option will be simply JPEG.
Remember how your HTML files had to have a .html or .htm extension for them to work properly? Image files have extensions, too. For GIF files, the extension is .gif. For JPEG files, the extension is either .jpg or .jpeg; either will work fine.
| Note |
Some image editors will try to save files with extensions in all caps (.GIF, .JPEG). Although these are the correct extensions, image names, like HTML file names, are case sensitive, and so GIF is not the same extension as gif. The case of the extension isn't important when you're testing on your local system, but it will be when you move your files to the server, so use lowercase if you possibly can. |
After you have an image in GIF or JPEG format ready to go, you can include it in your Web page. Inline images are indicated in HTML using the <IMG> tag. The <IMG> tag, like the <HR> and <BR> tags, has no closing tag. It does, however, have many different attributes that allow different ways of presenting and handling inline images. Many of these attributes are newer extensions to HTML and may not be available in some browsers. I'll make note of those extensions as you learn about them.
The most important attribute to the <IMG>
tag is SRC. The SRC
attribute indicates the filename or URL of the image you want
to include, in quotes. The pathname to the file uses the same
pathname rules as the HREF
attribute in links. So, for a GIF file named image.gif
in the
same directory as this file, you can use the following tag:
<IMG SRC="image.gif">
For an image file one directory up from the current directory, use
<IMG SRC="../image.gif">
And so on, using the same rules as for page names in the HREF part of the <A> tag.
Let's try a simple example. Here's the Web page for a local haunted house that happens every year at Halloween. Using all the excellent advice I've given you in the last six chapters, you should be able to create a page like this one pretty easily. Here's the HTML code for this HTML file, and Figure 7.1 shows how it looks so far.
Figure 7.1 : The Halloween House home page.
<HTML>
<HEAD>
<TITLE>Welcome to the Halloween House of Terror</TITLE>
</HEAD><BODY>
<H1>Welcome to The Halloween House of Terror!!</H1>
<HR>
<P>Voted the most frightening haunted house three years in a row, the
<STRONG>Halloween House of Terror</STRONG> provides the ultimate in
Halloween thrills. Over <STRONG>20 rooms of thrills and excitement</STRONG> to
make your blood run cold and your hair stand on end!</P>
<P>The Halloween House of Terror is open from <EM>October 20 to November
1st</EM>, with a gala celebration on Halloween night. Our hours are:</P>
<UL>
<LI>Mon-Fri 5PM-midnight
<LI>Sat & Sun 5PM-3AM
<LI><STRONG>Halloween Night (31-oct)</STRONG>: 3PM-???
</UL>
<P>The Halloween House of Terror is located at:<BR>
The Old Waterfall Shopping Center<BR>
1020 Mirabella Ave<BR>
Springfield, CA 94532</P>
</BODY>
</HTML>
So far, so good. Now, let's add an image to the page. I happen to have an image of a spider web kicking around in a clip art library (Figure 7.2) that would look excellent at the top of that Web page. (Keep in mind that this image, like all the images in this book, are available on the CD-ROM.)
Figure 7.2 : The spider web image.
The image is called web.gif, is in GIF format, and is in the same directory as the halloween.html page, so it's ready to go into the Web page. Let's say we want to add it to this page on its own line so that the heading appears just below it. We'll add an <IMG> tag to the file inside its own paragraph, just before the heading. (Images, like links, don't define their own text elements, so the <IMG> tag has to go inside a paragraph or heading element.)
<P><IMG SRC="web.gif"></P>
<H1>Welcome to The Halloween House of Terror!!</H1>
And now, when you reload the halloween.html page, your browser should include the spider web image in the page, as shown in Figure 7.3.
Figure 7.3 : The Halloween House home page, with spider.
If the image doesn't load (if your browser displays a funny-looking icon in its place), first make sure you've specified the name of the file properly in the HTML file. Image filenames are case-sensitive, so all the uppercase and lowercase letters have to be the same.
If that doesn't work, double-check the image file to make sure that it is indeed a GIF or JPEG image, and that it has the proper file extension.
Finally, make sure that you have image loading turned on in your browser. (The option is called Auto Load Images in both Netscape and Mosaic.)
If one spider is good, two would be really good, right? Try adding another <IMG> tag next to the first one and see what happens:
<P><IMG SRC="web.gif"><IMG SRC="web.gif"></P>
<H1>Welcome to The Halloween House of Terror!!</H1>
Figure 7.4 shows how it looks in Netscape, with both images adjacent to each other, as you would expect.
And that's all there is to it! No matter what the image or how large or small it is, that's how you include it on a Web page.
In the previous exercise we put an inline image on a page in its own separate paragraph, with text below the image. You can also include an image inside a line of text. (In fact, this is what the phrase "inline image" actually means-in a line of text.)
To include images inside a line of text, just add the <IMG> tag at the appropriate point, inside an element tag (<H1>, <P>, <ADDRESS>, and so on):
<H1><IMG SRC="web.gif">The Halloween House of Terror!!</H1>
So, for example, Figure 7.5 shows the difference that putting the image inline with the heading makes. (I've also shortened the title itself.)
Figure 7.5 : The Halloween House page with image inside the heading.
The image doesn't have to be large, and it doesn't have to be at the beginning of the text. You can include an image anywhere in a block of text:
<BLOCKQUOTE>
Love, from whom the world <IMG SRC="world.gif"> begun,<BR>
Hath the secret of the sun. <IMG SRC="sun.gif"> <BR>
Love can tell, and love alone,
Whence the million stars <IMG SRC="star.gif"> were strewn <BR>
Why each atom <IMG SRC="atom.gif"> knows its own. <BR>
--Robert Bridges
</BLOCKQUOTE>
Figure 7.6 shows how this looks.
Figure 7.6 : Images can go anywhere in text.
Notice that with these examples of including images in text the image was displayed so that the bottom of the image and the bottom of the text matched up. The <IMG> tag also includes an ALIGN attribute which allows you to align the image upwards or downwards with the surrounding text or other images in the line.
Standard HTML 2.0 defines three basic values for ALIGN:
| ALIGN=TOP | Aligns the top of the image with the topmost part of the line (which may be the top of the text or the top of another image). |
| ALIGN=MIDDLE | Aligns the center of the image with the middle of the line (usually the baseline of the line of text, not the actual middle of the line). |
| ALIGN=BOTTOM | Aligns the bottom of the image with the bottom of the line of text. |
In addition to these values, there are several new values for ALIGN that provide greater control over precisely where the image will be aligned within the line. These values are Netscape extensions to HTML but are supported in many other popular browsers.
| ALIGN=TEXTTTOP | Aligns the top of the image with the top of the tallest text in the line (whereas ALIGN=TOP aligns the image with the topmost item in the line). |
| ALIGN=ABSMIDDLE | Aligns the middle of the image with the middle of the largest item in the line. (ALIGN=MIDDLE usually aligns the middle of the image with the baseline of the text, not its actual middle.) |
| ALIGN=BASELINE | Aligns the bottom of the image with the baseline of the text. ALIGN=BASELINE is the same as ALIGN=BOTTOM, but ALIGN=BASELINE is a more descriptive name. |
| ALIGN=ABSBOTTOM | Aligns the bottom of the image with the lowest item in the line (which may be below the baseline of the text). |
Figure 7.7 shows examples of all these alignment options. In each case, the line on the left side and the text are aligned to each other, and the arrow varies.
Figure 7.7 : New alignment options.
Including an image inside a line works fine if you have only one line of text. One aspect of inline images I have sneakily avoided mentioning up to this point is that in HTML 2.0 all this works only with a single line of text. If you have multiple lines of text and you include an image in the middle of it, all the text around the image (except for the one line) will appear above and below that image-see Figure 7.8 for an example.
Figure 7.8 : Text does not wrap around images.
What if you want to wrap multiple lines of text next to an image so you have text surrounding all sides? Using HTML 2.0, you can't. You're restricted to just a single line of text on either side of the image, which limits the kinds of designs you can do.
To get around this limitation in HTML 2.0, Netscape defined two new values for the ALIGN attribute of the <IMG> tag-LEFT and RIGHT. These new values have been incorporated into HTML 3.2 and are supported now by many browsers other than Netscape.
The ALIGN=LEFT aligns an image to the left margin, and ALIGN=RIGHT aligns an image to the right margin. But using these attributes also causes any text following the image to be displayed in the space to the right or left of that image, depending on the margin alignment. Figure 7.9 shows an image with some text aligned next to it.
Figure 7.9 : Text and images aligned.
You can put any HTML text (paragraphs, lists, headings, other images) after an aligned image, and the text will be wrapped into the space between the image and the margin (or you can also have images on both margins and put the text between them). The browser fills in the space with text until the bottom of the image, and then continues filling in the text beneath the image.
What if you want to stop filling in the space and start the next line underneath the image? A normal line break won't do it-it'll just break the line to the current margin alongside the image. A new paragraph will also continue wrapping the text alongside the image. To stop wrapping text next to an image, use a line break tag (<BR>) with the new attribute CLEAR. With the CLEAR attribute you can break the line so that the next line of text begins after the end of the image (all the way to the margin). See Figure 7.10 for an example (I've used a smaller image here than the one in the previous example so that the line break is more visible).
Figure 7.10 : Line break to a clear margin.
The CLEAR attribute can have one of three values:
| LEFT | Break to an empty left margin, for left-aligned images |
| RIGHT | Break to an empty right margin, for right-aligned images |
| ALL | Break to a line clear to both margins |
So, for example, this code snippet shows a picture of a tulip with some text wrapped next to it. A line break with CLEAR=LEFT breaks the text wrapping and restarts the text after the image.
<P><IMG ALIGN=LEFT SRC="tulipsmall.gif">
<H2>Mystery Tulip Murderer Strikes</H2>
<P>Someone, or something, is killing the tulips of New South Haverford,
Virginia. Residents of this small town are shocked and dismayed by the
senseless vandalism that has struck their tiny town.</P>
<BR CLEAR=LEFT>
<P>New South Haverford is known for its extravagant displays of tulips
in the springtime, and a good portion of its tourist trade relies on the
people who come from as far as new Hampshire to see what has been estimated
as up to two hundred thousand tulips that bloom in April and may.</P>
Given that ALIGN=LEFT and ALIGN=RIGHT are newer features to HTML, it's interesting to take note about what happens if a page that includes these features is viewed in a browser that doesn't support left and right alignment.
Usually you'll just lose the formatting; the text will appear below the image rather than next to it. However, because the first line of text will still appear next to the image, the text may break in odd places. Something as simple as putting a <BR> after the image (which does little in Netscape or other browsers that support text wrapping, but pushes all the text after the image on other browsers) can create an effect that works well both in the browsers that support image and text wrapping and those that don't. Be sure to test your pages in multiple browsers so you know what the effect will be.
For example, the following input and output example shows the HTML code for a page for Papillon Enterprises, a fictional company that designs Web pages. Figure 7.11 shows the result in Netscape, and Figure 7.12 shows the result in browser called MacWeb (which does not have image and text wrapping capabilities).
<H1><IMG SRC="butterfly.gif" ALIGN=RIGHT ALIGN=MIDDLE>
Papillon Enterprises</H1>
<P>Design, Writing, Illustration, and Programming for the
<B>World Wide Web</B></P>
<P>Specializing in:</P>
<UL>
<LI>HTML and Web Page Design
<LI>Illustration
<LI>Forms Design and Programming
<LI>Complete Web Server Installation
</UL>
<HR>
Figure 7.11: The output in Netscape.
Figure 7.12: The output in MacWeb (no image alignment).
With the ability to wrap text around an image, you may also want to adjust the amount of space around that image. The VSPACE and HSPACE attributes (also a Netscape and HTML 3.2 feature) allow you to do this. Both take a value in pixels; VSPACE controls the space above and below the image, and HSPACE controls the space to the left and the right.
For example, the following HTML code produces the effect shown in Figure 7.13:
<P><IMG SRC="eggplant.gif" VSPACE=30 HSPACE=30 ALIGN=LEFT>
This is an eggplant. We intend to stay a good ways away from it,
because we really don't like eggplant very much.</P>
Can an image serve as a link? Sure it can! If you include an <IMG> tag inside the opening and closing parts of a link tag (<A>), that image serves as a clickable hot spot for the link itself:
<A HREF="index.html"><IMG SRC="uparrow.gif"></A>
If you include both an image and text in the anchor, the image and the text become hot spots pointing to the same page:
<A HREF="index.html"><IMG SRC="uparrow.gif">Up to Index</A>
By default in HTML 2.0, images that are also hot spots for links appear with a border around them to distinguish them from ordinary nonclickable images, as Figure 7.14 shows.
Figure 7.14 : Images that are also links.
You can change the width of the border around that image using the BORDER attribute to <IMG>. The BORDER attribute, a Netscape extension now part of HTML 3.2, takes a number, which is the width of the border in pixels. BORDER=0 hides the border entirely.
Be very careful when setting BORDER to 0 (zero) for images with links. The border provides a visual indication that the image is also a link. By removing that border, you make it difficult for the reader to know which are plain images and which are hot spots without them having to move the mouse around to find them. Make sure, if you must use borderless image links, that your design provides some indication that the image is selectable and isn't just a plain image. For example, you might design your images so they actually look like buttons (see Figure 7.15).
Figure 7.15 : Images that look like buttons.
Let's create a simple example of using images as links. When you have a set of related Web pages among which the navigation takes place in a consistent way (for example, moving forward, or back, up, home, and so on), it makes sense to provide a menu of navigation options at the top or bottom of each page so that your readers know exactly how to find their way through your pages.
This example shows you how to create a set of icons that are used to navigate through a linear set of pages. You have three icons in GIF format: one for forward, one for back, and a third to enable the reader to jump to a global index of the entire page structure.
First, we'll write the HTML structure to support the icons. Here, the page itself isn't all that important, so I'll just include a shell page. Figure 7.16 shows how the page looks to begin with.
Figure 7.16 : The basic page, no icons.
<HTML>
<HEAD>
<TITLE>Motorcycle Maintenance: Removing Spark Plugs</TITLE>
<BODY>
<H1>Removing Spark Plugs</H1>
<P>(include some info about spark plugs here)</P>
<HR>
</BODY>
</HTML>
Now, at the bottom of the page, add your images using IMG tags (Figure 7.17 shows the result).
Figure 7.17 : The basic page with icons.
<IMG SRC="arrowright.gif">
<IMG SRC="arrowleft.gif">
<IMG SRC="arrowup.gif">
Now, add the anchors to the images to activate them. Figure 7.18 shows the result.
Figure 7.18 : The basic page with iconic links.
<A HREF="replacing.html"><IMG SRC="arrowright.gif"></A>
<A HREF="ready.html"><IMG SRC="arrowleft.gif"></A>
<A HREF="index.html"><IMG SRC="arrowup.gif""></A>
When you click on the icons now, the browser jumps to the page in the link just as it would have if you had used text links.
Speaking of text, are the icons usable enough as they are? How about adding some text describing exactly what is on the other side of the link? You can add the text inside or outside the anchor, depending on whether you want the text to be a hot spot for the link as well. Here, we'll include it outside the link so that only the icon serves as the hot spot. We'll also align the bottoms of the text and the icons using the ALIGN attribute of the <IMG> tag. Finally, because the extra text causes the icons to move onto two lines, we'll arrange each one on its own line instead. See Figure 7.19 for the final menu.
Figure 7.19 : The basic page with iconic links and text.
<P>
<A HREF="replacing.html"><IMG SRC="arrowright.gif" ALIGN=BOTTOM></A>
On to "Gapping the New Plugs"<BR>
<A HREF="ready.html"><IMG SRC="arrowleft.gif" ALIGN=BOTTOM></A>
Back to "When You Should Replace your Spark Plugs"<BR>
<A HREF="index.html"><IMG SRC="arrowup.gif" ALIGN=BOTTOM></A>
Up To Index
</P>
Unlike inline images, external images don't actually appear on your Web page; instead, they're stored separate from the page and linked from that page in much the same way that other HTML pages are.
The reason external images are worth mentioning in this chapter is that external images often can serve a complementary role to inline images. For example:
To use external images, you create the image as you would an inline
image and then save it with an appropriate filename. As with other
files on the Web, the file extension is important. Depending on
the image format, use one of the extensions listed in Table 7.1.
| Extension | |
| .gif | |
| .jpg, .jpeg | |
| .xbm | |
| .tiff, .tif | |
| .bmp | |
| .pict |
Once you have an external image, all you have to do is create a link to it, the same way you would a link to another HTML page, like this:
<P>I grew some really huge <A HREF="bigtomatos.jpeg">tomatos</A> in
my garden last year</P>
For this next exercise, you'll use inline and external images together.
A common practice in Web pages is to provide a very small GIF image (a "thumbnail") inline on the page itself. You can then link that image to its larger external counterpart. This has two major advantages over including the entire image inline:
In this simple example, you'll set up a link between a small image and an external, larger version of that same image. The large image is a photograph of some penguins in GIF format, called penguinsbig.gif (shown in Figure 7.20).
First, create a thumbnail version of the penguins photograph in your favorite image editor. The thumbnail can be a scaled version of the original file, a clip of that file (say, one penguin out of the group), or anything else you want to indicate the larger image.
Here, I've created a picture of one penguin in the group to serve as the inline image. (I've called it penguinslittle.gif.) Unlike the large version of the file, which is 100K, the small picture is only 3K. Using the <IMG> tag, I'll put that image directly on a nearly content-free Web page:
<HTML>
<HEAD>
<TITLE>Penguins</TITLE>
</HEAD><BODY>
<H1>Penguins</H1>
<IMG SRC="penguinslittle.gif">
</BODY></HTML>
Now, using a link tag, you can link the small icon to the bigger picture by enclosing the <IMG> tag inside an <A> tag:
<A HREF="penguinsbig.gif"><IMG SRC="penguinslittle.gif"></A>
The final result of the page is shown in Figure 7.21. Now, if you click on the small penguin image, the big image will be downloaded and viewed either by the browser itself or by the helper application defined for GIF files for that browser.
Figure 7.21 : The Penguins home page with link.
An alternative to linking the small image directly to the larger image is to provide the external image in several different formats and then create plain text links to the various different external versions (you might want to do this for readers who have software for one format but not another). Next, I'll link to a JPEG version of that same penguins file.
To create the JPEG version of the penguin photograph, you need to use your image editor or converter again to convert the original photograph. Here, I've called it penguinsbig.jpg.
To provide both GIF and JPEG forms of the penguin photo we'll convert the link on the image into a simple link menu to the GIF and JPEG files, providing some information about file size (the result is shown in Figure 7.22).
Figure 7.22 : The Penguins link menu.
<P><IMG SRC="penguinslittle.gif"></P>
<UL>
<LI>Penguins (<A HREF="pengiunsbig.gif">100K GIF file</A>)
<LI>Penguins (<A HREF="pengiunsbig.jpg">25K JPEG file</A>)
</UL>
| Note |
Images are not the only types of files you can store externally to your Web page. Sound files, video, zip archives-just about anything can be linked as an external file. You'll learn more about this in Chapter 9, "External Files, Multimedia, and Animation." |
Images can turn a simple text-only Web page into a glorious visual feast. But what happens if someone is reading your Web page from a text-only browser, or what if he or she has image-loading turned off so that all your careful graphics appear as plain generic icons? All of a sudden that glorious visual feast isn't looking as nice. And, worse, if you haven't taken these possibilities into consideration while designing your Web page, your work could be unreadable and unusable by that portion of your audience.
There is a simple solution to one of these problems. The ALT attribute of the <IMG> tag provides a way for you to substitute something meaningful in place of the image on browsers that cannot display that image.
Usually, in text-only browsers such as Lynx, graphics that are specified using the <IMG> tag in the original file are "displayed" as the word IMAGE with square brackets around it like this: [IMAGE]. (An example is shown in Figure 7.23.) If the image itself was a link to something else, that link is preserved.
Figure 7.23 : "Images" in Lynx.
The ALT attribute in the <IMG> tag provides a more meaningful text alternative to the blank [IMAGE] for your readers who are using text-only Web browsers. The ALT attribute contains a string with the text you want to substitute for the graphic:
<IMG SRC="myimage.gif" ALT="[a picture of a cat]">
Note that most browsers will interpret the string you include in the ALT attribute as a literal string; that is, if you include any HTML tags in that string, they will be printed as typed instead of being parsed and displayed as HTML code. This means you can't use whole blocks of HTML code as a replacement for an image-just a few words or phrases.
For example, remember in Exercise 7.2, where you used arrow icons for navigation between pages? Here are two ideas for providing text-only alternatives for those icons:
Figure 7.24 : Text markers to replace images.
Figure 7.25 : Hide the images.
| Tip |
A sneaky trick I've seen used for the ALT attribute is to include an ASCII art picture (a picture made up of characters, like the cow in Day 3, "Doing More with HTML") in the ALT tag, which then serves as the "picture" in text-only browsers such as lynx (unfortunately, it doesn't seem to work in graphical browsers with images turned off). To accomplish this trick, you'll need the ASCII art prepared ahead of time. Then, in your HTML code, include the entire <IMG> tag inside <PRE>...</PRE> tags, and put the ASCII art inside the ALT attribute, like this: |
Now that you've learned about inline and external images, images as links, and how to wrap text around images, you know the majority of what most people do with images in Web pages-and you know everything that HTML 2.0 can do with images. But there are a few newer tricks to play with, and that's what this section is all about.
All the attributes in this section were originally Netscape extensions that have since been incorporated into HTML 3.2.
Two Netscape extensions to the <IMG> tag, HEIGHT and WIDTH, specify the height and width of the image, in pixels. Both are now part of the HTML 3.2 specification.
If you use the actual height and width of the image in these values (which you can find out in most image editing programs), your Web pages will appear to load and display much faster in some browsers than if you did not include these values.
Why? Normally when a browser is parsing the HTML code in your file, it has to load and test each image to get its width and height before proceeding so that it can format the text appropriately. This usually means that it loads and formats some of your text, waits for the image to load, formats around the image when it gets the dimensions, and then moves on for the rest of the page. If the width and height are already specified in the HTML code itself, the browser can just make a space for the image of the appropriate size and keep formatting all the text around it. This way, your readers can continue reading the text while the images are loading rather than having to wait. And, because WIDTH and HEIGHT are just ignored in other browsers, there's no reason not to use them for all your images. They neither harm nor affect the image in browsers that don't support them.
| Tip |
If you test your page with images in it in Netscape 2.0, try choosing Document Info from the View menu. You'll get a window listing all the images in your page. By selecting each image in turn, you'll get information about that image-including its size, which you can then copy into your HTML file. |
If the values for WIDTH and HEIGHT are different from the actual width and height of the image, your browser will automatically scale 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, this is a sneaky way to get away with large images on your pages without the additional increase in load time-just create a smaller version, and then scale it to the dimensions you want on your Web page. Note, however, that the pixels will also be scaled, so the bigger version may end up looking grainy or blocky. Experiment with different sizes and scaling factors to get the right effect.
| Note |
Don't do reverse scaling-create a large image and then use WIDTH and HEIGHT to scale it down. Smaller file sizes are better because they take less time to load. If you're just going to display a small image, make it smaller to begin with. |
You learned about the BORDER attribute to the <IMG> tag as part of the section on links, where setting BORDER to a number or to zero determined the width of the image border (or hid it entirely).
Normally, plain images don't have borders; only images that hold links do. But you can use the BORDER attribute with plain images to draw a border around the image, like this:
<P>Frame the image <IMG SRC="monalisa.gif" BORDER=5></P>
Figure 7.26 shows an example of an image with a border around it.
Figure 7.26 : An images border.
One completely optional Netscape extension to images is the use of the LOWSRC attribute to <IMG>, which provides a sort of preview for the actual image on the page. LOWSRC is used just like SRC is, with a pathname to another image file:
<IMG SRC="wall.gif" LOWSRC="wallsmall.gif">
When a browser that support LOWSRC encounters a LOWSRC tag, it loads in the LOWSRC image first, in the first pass for the overall page layout. Then, after all the layout and LOWSRC images are done loading and displaying, the image specified in SRC is loaded and fades in to replace the LOWSRC image.
Why would you want this? The image in LOWSRC is usually a smaller or lower resolution preview of the actual image, one that can load very quickly and give the reader an idea of the overall effect of the page (make sure your LOWSRC image is indeed a smaller image, otherwise there's no point to including it. Then, after all the layout is done, the reader can scroll around and read the text while the better images are quietly loaded in the background.
Using LOWSRC is entirely optional; it's simply ignored in older browsers.
One way to add color to your Web pages is to add images; images can provide a splash of color amongst the black and gray and white. Several Netscape extensions to HTML, however, enable you also to change the colors of the page itself, including changing the background color of the page, changing the color of the text and links on that page, and to add "spot color" to individual characters on that page. In this section you'll learn how to do all these things.
| Note |
You'll learn a whole lot about color and color theory tomorrow. Today you'll just learn how to change colors in HTML. |
Before you can change the color of any part of an HTML page, you have to know what color you're going to change it to. There are two ways to specify colors using the color extensions to HTML:
The most flexible and most widely supported method of indicating color involves finding out the numeric value of the color you want to use. Most image-editing programs have what's called a color picker-some way of choosing a single color from a range of available colors. Most color pickers, in turn, will tell you the value of that color in RGB form, as three numbers (one for red, one for green, and one for blue-that's what RGB stands for). Each number is usually 0 to 255, with 0 0 0 being black and 255 255 255 being white.
Once you have your colors as three numbers from 0 to 255, you have to convert those numbers into hexadecimal. You can use any scientific calculator that converts between ASCII and hex to get these numbers. A slew of freeware and shareware color pickers for HTML are available as well, including HTML Color Reference and ColorFinder for Windows, and ColorMeister and ColorSelect for the Macintosh. Alternately, you can use rgb.html, a form that will do the conversion for you, which you'll learn how to implement later in this book. For now, you can try out the rgb.html form at http://www.lne.com/rgb.html, which will give you the hex for any three numbers. So, for example, the RGB values 0 0 0 convert to 00 00 00, and the RGB values for 255 255 255 convert to FF FF FF.
The final hex number you need is all three numbers put together with a pound sign (#) at the beginning, like this:
#000000
#DE04E4
#FFFF00
The second way of indicating colors in HTML is much easier to deal with. Instead of using arcane numbering schemes, you just pick a color name: Black, White, Green, Maroon, Olive, Navy, Purple, Gray, Red, Yellow, Blue, Teal, Lime, Aqua, Fuchsia, or Silver (these colors come from the Windows color palette, which allows only 16 colors).
Although color names are easier to remember and to figure out than the numbers, they do offer less flexibility in the kinds of colors you can use (you have only 16 colors to choose from, as opposed to millions), and names are not as widely supported in browsers as the color numbers (although both Netscape and Internet Explorer do support color names). Keep that in mind if you do choose to use color names because you may lose the colors in other browsers.
Once you have a color name or number in hand, you can go on and apply that color to various parts of your HTML page.
To change the color of the background on a page, decide what color you want and then add an attribute to the <BODY> tag called BGCOLOR. The <BODY> tag, in case you've forgotten, is the tag that surrounds all the content of your HTML file. <HEAD> contains the title, and <BODY> contains almost everything else. BGCOLOR is an HTML 3.2 extension.
To use color numbers for backgrounds the value of the BGCOLOR attribute to <BODY> is the hexadecimal number you found out in the previous section in quotes. It looks like this:
<BODY BGCOLOR="#FFFFFF">
<BODY BGCOLOR="#934CE8">
To use color names, simply use the name of the color as the value to BGCOLOR:
<BODY BGCOLOR=white>
<BODY BGCOLOR=green>
| Note |
Internet Explorer also allows you to indicate color numbers without the leading pound sign (#). Although this may seem more convenient, given that it is incompatible with many other browsers, the inclusion of the one other character does not seem like that much of a hardship. |
When you can change the background colors, it makes sense also to change the color of the text itself. More HTML extensions supported by Netscape, Internet Explorer, and HTML 3.2 allow you to globally change the color of the text in your pages.
To change the text and link colors, you'll need your color names or numbers just as you did for changing the backgrounds. With a color in hand, you can then add any of the following attributes to the <BODY> tag with either a color number or color name as their values:
| TEXT | Controls the color of all the page's body text that isn't a link, including headings, body text, text inside tables, and so on. |
| LINK | Controls the color of normal, unfollowed links in the page (the ones that are usually blue by default). |
| VLINK | Controls the color of links you have visited (the ones that are usually purple or red by default). |
| ALINK | Controls the color of a link that has had the mouse button pressed on it but not released (an activated link). These are often red by default. |
For example, to create a page with a black background, white text, and bright purple unfollowed links, you might use the following <BODY> tag:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9805FF">
For Internet Explorer, using the following color names would produce the same effect:
<BODY BGCOLOR=black TEXT=white LINK=purple>
Both of these links would produce a page that looks something
like the one shown in
Figure 7.27.
Figure 7.27 : Background and text clors.
When you change the text colors in a page 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 inside your page, which you can use instead of or in addition to a global text color.
Yesterday you learned about using the HTML 3.2 extension <FONT> for setting the font size and font name. A third, and even newer attribute to <FONT>, COLOR, lets you change the color of individual words or phrases. The value of COLOR is either a color name or number:
<P>When we go out tonight, we're going to paint the town
<FONT COLOR="#FF0000">RED</FONT>.
You can, of course, use font spot colors in addition to font names and sizes.
One last topic for this chapter is the ability to use 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, the image is repeated in rows to fill the browser window.
To create a tiled background, you'll need an image to serve as the tile. Usually when you create an image for tiling, you'll need to make sure that the pattern flows smoothly from one tile to the next. You can usually do some careful editing of the image in your favorite image-editing program to make sure the edges line up. The goal is to have the edges meet cleanly so there isn't a "seam" between the tiles after you've laid them end to end. (See Figure 7.28 for an example of tiles that don't line up very well.) You can also try clip-art packages for wallpaper or tile patterns that are often designed specifically to be tiled in this fashion.
Figure 7.28 : Tiled images with "seams."
When you have an image that can be cleanly tiled, all you need to create a tiled image background is the BACKGROUND attribute, part of the <BODY> tag. The value of BACKGROUND is a filename or URL that points to your image file, as in the following example:
<BODY BACKGROUND="tiles.gif">
<BODY BACKGROUND="backgrounds/rosemarble.gif">
Figure 7.29 shows the result of a simple tiled background.
Figure 7.29 : A tiled background in Netscape.
Internet Explorer offers a twist on the tiled background design: a fixed tile pattern they call a watermark. The idea here is that when you scroll a page, instead of everything on the page including the background scrolling by, only the page foreground (text and images) scrolls. The tiles in the background stay rooted in one place. To create this effect, use the BGPROPERTIES=FIXED attribute to the body tag:
<BODY BACKGROUND="backgrounds/rosemarble.gif" BGPROPERTIES=FIXED>
The use of images in Web pages is one of the bigger arguments among users and providers of Web pages today. For everyone who wants to design Web pages with more, bigger, and brighter images to take full advantage of the graphical capabilities of the Web, there is someone on a slow network connection who is begging for fewer images so that his or her browser doesn't take three hours to load a page.
As a designer of Web pages, you should consider both of these points of view. Balance the fun of creating a highly visual, colorful Web page with the need to get your information to everyone you want to have it-and that includes people who may not have access to your images at all.
This section offers some hints and compromises you can make in the design of your Web pages so that you can make everyone happy (or everyone unhappy, depending on how you look at it).
For each image you put inline on your Web page, consider why you are putting it there. What does that image add to the design? Does it provide information that could be presented in the text instead? Is it just there because you like how it looks?
Try not to clutter your Web page with pretty but otherwise unnecessary images. A simple Web page with only a few iconic images is often more effective than a page that opens with an enormous graphic and continues the trend with flashy 3D buttons, drop-shadow bullets, and psychedelic line separators.
A smaller image takes less time to transfer over the Net; therefore, using smaller images makes your Web page load faster and causes less frustration for people trying to read it over a slow link. What could be easier?
To create small images, you can reduce their actual physical dimensions on the screen. You can also create smaller file sizes for your images by reducing the number of colors in an image. Your goal is to reduce the file size of the image so that it transfers faster, but a four-inch by four-inch black-and-white image (two colors) may be smaller in file size than a 1/2 inch by 1/2 inch full-color photographic image. With most image-processing programs, you can reduce the number of colors and touch up the result so it looks good even with fewer colors.
A good rule to follow is that you should try to keep your inline images somewhere under 20K. That may seem small, but a single 20K file takes nearly that many seconds to download over a 14.4K baud SLIP connection. Multiply that by the number of images on your Web page, and it may take a substantial amount of time for that page to load (even if you're using a browser that can load multiple images at once. The pipe is only so wide). Will someone care about what you have in your Web page if they have had to go off and have lunch while it's loading?
| Note |
The small icons that I used for the arrows in the navigation examples are 300 bytes apiece-less than a third of a K. The spider web image in the Halloween example is slightly larger than 1K. Small does not mean the image isn't useful. |
In addition to keeping individual images small, try to reuse the same images as often as you can, on single pages and across multiple pages; for example, if you have images as bullets, use the same image for all the bullets rather than different ones. Reusing images has two significant advantages over using different images:
To reuse an image, you don't have to do anything special; just make sure you refer to each image by the same URL each time you use it. The browser will take care of the rest.
If you're not using the ALT attribute in your images, you should be. The ALT attribute is extremely useful for making your Web page readable by text-only browsers. But what about people who turn off images in their browser because they have a slow link to the Internet? Most browsers do not use the value of ALT in this case. And sometimes ALT isn't enough; because you can specify text only inside an ALT string, you can't substitute HTML code for the image.
To get around all these problems while still keeping your nifty graphical Web page, consider creating alternative text-only versions of your Web pages and putting links to them on the full-graphics versions of that same Web page, like this:
<P>A <A HREF="TextVersion.html">text-only</A>
version of this page is available.</P>
The link to the text-only page takes up only one small paragraph on the "real" Web page, but it makes the information much more accessible. It's a courtesy that readers with slow connections will thank you for, and it still allows you to load up your "main" Web page with as many images as you like for those with fast connections.
One of the major features that makes the World Wide Web stand out from other forms of Internet information is that pages on the Web can contain full-color images. It was arguably the existence of those images that allowed the Web to catch on so quickly and to become so popular in so short a time.
To place images on your Web pages, those images must be in GIF or JPEG format (GIF is more widely supported) and small enough that they can be quickly downloaded over a potentially slow link. The HTML tag <IMG> allows you to put an image on the Web page, either inline with text or on a line by itself. The <IMG> tag has three primary attributes supported in standard HTML:
| SRC | The location and filename of the image to include. |
| ALIGN | How to position the image vertically with its surrounding text. ALIGN can have one of three values: TOP, MIDDLE, or BOTTOM. |
| ALT | A text string to substitute for the image in text-only browsers. |
You can include images inside a link tag (<A>) and have those images serve as hot spots for the links, same as text.
In addition to the standard attributes, several new attributes to the <IMG> tag provide greater control over images and layout of Web pages. Those new attributes, most of which are now part of the HTML 3.2 specification, include the following:
| ALIGN=LEFT ALIGN=RIGHT | Place the image against the appropriate margin, allowing all following text to flow into the space alongside the image. In addition, an HTML 3.2 extension to <BR>, CLEAR, allows you to stop wrapping text alongside an image. CLEAR can have three values: LEFT, RIGHT, and ALL. |
| ALIGN=TEXTTOP
ALIGN=ABSMIDDLE ALIGN=BASELINE ALIGN=ABSBOTTOM | (Netscape) Allow greater control over the alignment of an inline image and the text surrounding it. |
| VSPACE HSPACE | Define the amount of space between an image and the text surrounding it. |
| BORDER | Defines the width of the border around an image (with orwithout a link). BORDER=0 hides the border altogether. |
| LOWSRC | (Netscape only) Defines an alternate, lower-resolution image that is loaded before the image indicated by SRC. |
In addition to images, you can also add color to the background and to the text of a page using attributes to the <BODY> tag, or add color to individual characters using the COLOR attribute to <FONT>. Finally, you can also add patterned or tiled backgrounds to images using the BACKGROUND attribute to <BODY> with an image for the tile.
| Q | How can I create thumbnails of my images so that I can link them to larger external images? |
| A | You'll have to do that with some kind of image-editing program; the Web won't do it for you. Just open up the image and scale it down to the right size. |
| Q | Can I put HTML tags in the string for the ALT attribute? |
| A | That would be nice, wouldn't it? Unfortunately, you can't. All you can do is put an ordinary string in there. Keep it simple, and you should be fine. |
| Q | You discussed a technique for including LOWSRC images on a page that are loaded in before regular images are. I've seen an effect on Web pages where an image seems to load in as a really blurry image and then become clearer as time goes on. Is that a LOWSRC effect? |
| A | No, actually, that's something called an interlaced GIF. There's only one image there, it just displays as it's loading differently from regular GIFs. You'll learn more about interlaced GIFs in the next chapter.
LOWSRC images load in just like regular images (with no special visual effect). |
| Q | I've seen some Web pages where you can click on different places in an image and get different link results, such as a map of the United States where each state has a different page. How do you do this in HTML? |
| A | That's called an image map, and it's an advanced form of Web page development. It involves writing code on the server side to interpret the mouse clicks and send back the right result. I describe image maps in Chapter 17, "Image Maps." |
