This chapter introduces the concept of putting pictures, called images, in your web documents. The objectives important to this chapter are:
Web documents would be pretty boring if they couldn't use pictures.
Pictures on a web page are called images. They are stored as separate
files and referenced in the HTML code. Ms. Lemay begins by telling us
that we can take two approaches to putting images in our pages:
It should not be a surprise (at least if you read the book) that the
tag for images is <img>. This tag originally did not require
a closing tag, but XHTML requires a closure, so it will use the self-closing
approach we have seen before: <img />. The image tag requires
some option values, else it does nothing. The basic syntax for the tag
<img SRC="filename.gif" />
This notation would be used for a file in your current directory (same as the web page) that is stored in the gif format. GIF files (pronounced "Jif", like the peanut butter) are one of several type of files that browsers can read and display. The browser recognizes the file type by its extension:
Placing an image tag in your document is easy. Controlling where the image goes is a little harder. For instance, putting it in a paragraph by itself has the obvious effect. Putting it in a line of text, however, can be unpredictable unless you use more optional attributes to control the appearance.
Putting the image in a Heading format is the easiest way to control
alignment. This code:
<H1 ALIGN=CENTER><IMG SRC="filename.gif" /></H1>
presents the referenced image in the center of the current line. The fact that I used Heading 1 format is not relevant: using any of the other five would result in the same appearance.
You can align the image, to a degree, with a line of text that it appears
in. This is done with the four options shown on page 180. This is not
as interesting as the next idea, placing the image in text that wraps
around it. Observe the example on pages 182 and 183. The code
<P><img ALIGN="LEFT" SRC="tulipsmall.gif" />
causes the image to align with the left margin. The text that follows forms around the image's right side. At the end of the first paragraph (on page 185), the code
<br CLEAR="LEFT" />
causes the next line of text to continue on the first clear line after the image. Combining these tags, you can wrap or not, as desired.
When a browser does not support these tag options, the results are a bit different. Luckily, most people are using a browser that supports them.
An image can also be a link, if you simply build an anchor point
around it containing an HREF value. This is how you put buttons and other
images on a page that can be clicked to jump somewhere. The format is
<a HREF="jumppage.htm"><IMG SRC="whatever.gif" /></A>An image that is a link will have a blue border around it by default. You can suppress the border with the option border="0". I usually do this, while Laura does not like it. Personal choice.
For those images that are too good to be missed, yet too large to put
in the page (without having your readers punch "Stop" in despair) you
can set up an external image. Set up a link as above, but use the
image file in place of the .htm file. Also, put some text about what a
wonderful HUGE file the user will see in place of the IMG tag. (Or, use
a smaller version of it, called a thumbnail.)
<a HREF="BigHugeHorribleFile.gif">Click for a very large file</a>
The browser will then load the file specified, showing it all by itself.
For those browsers still incapable of displaying any image files, you can place a note to be displayed instead of the image in the IMG tag, using the ALT option. The syntax is simply: <img src="file.gif" ALT="some silly picture here" / >. A serious reason to provide alternate text is that some readers cannot see pictures. I have done some work recently with software meant for visually impaired users. It is an awakening experience to realize that not everyone can do everything the web assumes they can do.
It is also possible to specify in the IMG tag what the height and width of the image are supposed to be, as measured in pixels. This is good, since it speeds up loading images in browsers that support HTML 3.2 or later, and can help control the space an image uses. You can actually cause an image to be displayed in more or less space than normal this way. Don't be fooled into thinking that this will shrink the size of the image file transmitted. I have a friend who put up photos of his son on his web site. He finds the size of the images in pixels, then tells the image tag to display the file using a quarter of the height and of the width. He thinks he is doing his reader a favor. His home page takes FOREVER to load! If you want to change the size of an image, use a real art program. Adobe Photoshop and JASC Paint Shop Pro are good choices. (Update for late 2005: Paint Shop Pro is now owned and published by Corel.)
Color! Setting a background color is easy. Most of you are doing
it already. To make a solid background for your page, modify the BODY
tag like this:
The hard part is the color value. Color monitors make color by using different combinations of Red, Green and Blue. Each of the double-digits in the example above (11, 22, 33) represent a value for the Red, Green, or Blue element. Okay so far? Well, the range of numbers for each value is from 00 (double zero) to FF (double fox). Double what? It's in hexadecimal notation, base sixteen. No, you don't really have understand it, just know what a hex triplet is (a very unlucky set and a half of twins?) and look at the long list of them starting on page 1129. (What a book: you actually use the appendix.) The list gives the hex values for lots of colors that also have defined names. Often, you can use the name instead of the hex triplet, but be aware that some browsers will not understand the name, while they will understand the hex code. There are many more colors that do not have names. In fact, using the hex numbering system, there are over 16 million possible colors.
Page 197 shows four other color entities that can be set in the BODY tag:
Another way to use color is called spot color. It means to take
effect for a small area, like a section of text. For instance, if your
browser supports it, this text is red. The
code looks like this:
<FONT COLOR="#FF0000">this text is red.</FONT>Setting a file to be used as the background of a page is easier than setting a solid color. For instance, this page uses a file to display the purple/blue border on the left and solid white elsewhere. The code is:
You need to know that the actual JPG image is tiled, repeated for the length and breadth of the document. This means you should plan your backgrounds, and make sure readers can SEE the text you put on top of them.