Part III -- Images
When you get to the point where you want to put graphic images in your web page, your site becomes more than just HTML documents. HTML is text, and combining text and graphics means that you have to have access to the graphics the same way you have to access the text. Unlike page layout and word processing programs which will embed graphic files in the finished document, the graphics displayed in an HTML document must be accessible separately from the HTML document, otherwise they will not display. You cannot embed a graphic in an HTML document, but you can use HTML to request and display a graphic from a separate file in such a way that the text contained within the HTML document will be formatted around the graphic. The way this is done is very similar to the way documents are linked together using the anchor tag, except that with graphics, the image tag (<IMG>) is used. For an image tag to display a graphic correctly, the tag must have a SRC attribute, which indicates the URL of the graphic file, and, if the document is to be complient with HTML 4.0, it must also have a alt attribute, which will allow non-graphical browsers to display alternate text in place of the graphic. Most commercial web browsers have the capability to display a variety of graphic file formats, however the most common by far are .jpg and .gif files. The following graphic is an example of a .gif file called lcuke.gif which is located in the images directory on the server on which this tutorial is located.
The tag used to call this graphic looks like this:
<IMG SRC="image/lcuke.gif" alt="a cucumber">Note that the URI of the graphic in the example is a relative address. Graphics, like anything else, can be displayed using either relative or absolute addresses. As long as you know the location of a graphic, you can display it in your HTML document. Using graphics which are located on servers other than the one on which your HTML documents are located, however, is not a very good idea, since, quite apart from copyright issues, and theft-of-bandwidth isses, which are enough of a reason on their own not to hotlink graphics from another site, the reality is, someone else has control over those graphic files. If that other (potentially unknown) person decides to move their graphics from their current location, or to change their names, or to keep the names the same but replace them with pornography, or to delete them, it can totally screw up your layout. Another difficulty is that calling a graphic file from a remote server makes it so that it takes a longer time for your document to load completely, and if the remote server is down, or inaccessible for some reason, the graphic might not show up at all.
Attributes which define the actual size of the graphic may be included in an image tag. These are included because browsers are able to format text more quickly if the size of the graphic around which the text is to be formatted is known before the graphic begins to load. The tag for the cucumber image above including the dimensions would look like this:
<img src="image/lcuke.gif" width=34 height=32 alt="a cucumber">however the way the graphic displays would be no different than you see above. It is possible, by modifying the dimensions of the graphic, to change the way the graphic displays, to change the appearance of the graphic, but it is not possible to change the actual graphic file by modifying its dimensions in a HTML document. You can double the size of the graphic by doubling its dimensions, but if you do, in general, you can expect the graphic to look considerably different. The following illustrates what happens to the graphic lcuke.gif when the dimensions are modified:
|
|
|
| 1 | 2 | 3 |
The image tags that call the graphics shown above look like this:
1: <img src="image/lcuke.gif" width=68 height=32 alt="a squished cucumber">2: <img src="image/lcuke.gif" width=16 height=32 alt="a squished cucumber">
3: <img src="image/lcuke.gif" width=34 height=64 alt="a squished cucumber">
Images can also be linked using an anchor tag, once again, in exactly the same way that text is used in an anchor tag. The entire image tag must be contained within the anchor for the link to function properly. Most browsers will put a border around a linked graphic unless the graphic tag contains a border attribute whose value is set to zero to suppress the border as shown in the examples below:
|
| |
| 4 | 5 |
5: <a href="007.html"><img src="image/lcuke.gif" width=34 height=32 border=0 alt="a cucumber"></a>
You will notice that, as with text links, when you move your mouse-pointer over the images above, the pointer will turn into the "pointing finger" which indicates that the image is a clickable link. The images are linked to this page, so clicking on them won't do anything except to reload this page.
A very common use for tables is for "wrapping" text around a graphic. This is achieved by placing the graphic in a borderless table whose dimensions are slightly bigger than the graphic. The table is then aligned the way the author desires and the text is placed to be wrapped below the table in the page. When the page is displayed, the table will isolate the graphic and allow the text to flow around it as in the following example:
This is an example of how to wrap text around a graphic in a table cell using basic HTML. This is an example of how to wrap text around a graphic in a table cell using basic HTML. This is an example of how to wrap text around a graphic in a table cell using basic HTML.
|
This is an example of how to wrap text around a graphic in a table cell using basic HTML. This is an example of how to wrap text around a graphic in a table cell using basic HTML. This is an example of how to wrap text around a graphic in a table cell using basic HTML. <table border=0 align="LEFT" width=35> <tr> <td><img src="image/lcuke.gif" width=34 height=32 border=0 alt="cucumber"></td> </tr> </table> This is an example of how to wrap text around a graphic in a table cell using basic HTML. This is an example of how to wrap text around a graphic in a table cell using basic HTML. This is an example of how to wrap text around a graphic in a table cell using basic HTML. |
As you can see, using a combination of tables and images, it's possible to format a HTML document so it displays on the screen almost exactly the same way that the document might appear in print. Unfortunately, most browsers aren't sophisticated enough to be able to print exactly the same format on paper as you see on the screen. In the next chapter, we will begin to look more closely at Cascading Style Sheets, which have the capability of being able to specify what a document will look like not only on the screen, but when it is printed out, or when it is displayed from a variety of different kinds of browsers.