Special Edition Using Linux, Fourth Edition:Creating Web Documents with HTML

-->

Using Graphics

One feature that has made the Web so popular is its capability to incorporate graphics and text in a simple format. HTML makes it easy to insert graphics into your documents. Before you start putting all sorts of graphic images into documents, though, remember that many people access the Web via low-speed telephone lines and that graphics can take a long time to transfer at these rates. Also, some people use text-based browsers, such as Lynx, which can’t display graphics at all. You should make sure that someone can navigate your Web documents easily, even if they have graphics turned off or if their browser doesn’t support graphics. In a moment, you’ll learn a technique for checking for graphics support.

You can use graphics in your HTML documents in two ways: by using hypertext links or by using inline images.

• You can make hypertext links to the graphics files themselves. This method requires the user to have a helper program that can display the graphics file properly. The exact type of graphic that can be displayed depends on the helper application used. Links for this method are hypertext links that name the graphics image as the destination document.

• You can insert the graphics directly into your HTML document. Graphics inserted this way are known as inline images. Many browsers support graphics in the JPG, GIF, or X Bitmap formats as inline images.
HTML uses the <IMG> tag to indicate an inline image. This tag is combined with the SRC=“filename” attribute to define which image file is displayed. HTML also provides the ALIGN= attribute to tell Web browsers how they should line up the graphic image with any text that’s near it. The valid values for ALIGN are TOP, MIDDLE, and BOTTOM.

As mentioned earlier, you need to make your Web pages usable by browsers that don’t support graphics. To do this, you should provide some text reference any time you use a graphic image. HTML provides a way for you to define some text to be displayed if a browser can’t display a graphic image. The ALT=“text about the graphic” attribute defines some alternate text that will be displayed when the graphic can’t be displayed.

An example might help pull this all together. Listing 32.8 is a section of HTML that displays an inline GIF image. If a browser can’t display the image, a description of the image is shown instead.

Listing 32.8 Inserting a Graphic into Your Script


<HTML>



<HEAD>

   <TITLE>Image example</TITLE>

</HEAD>

<BODY>



<H2>Images</H2>



<P>

<P>

<IMG src=“venus.jpg”

     align=“right”

     height=“160” width=“82”

     alt=“Statue of Aphrodite”>



<UL>

<LI>Statue of Aphrodite, known as the “Venus de Milo”.

<LI>Carved out of marble in Greece, circa 100 B.C.

<LI>Currently in the Louvre in Paris

<LI>Part of the Louvre’s Greek, Etruscan and Roman

Antiquities Collection

</UL>

<HR>

To go to the Louvre’s web site click

<A HREF=“http://mistral.culture.fr/louvre/louvrea.htm”>HERE</A>



</BODY>



</HTML>

Figure 32.9 shows how this page is displayed in Netscape. You can see how different elements (heading, a list, horizontal line, graphic, and a link) combine to make up a page.

FIG. 32.9 An inline graphic displayed in Netscape.

You can combine graphic images and anchors to create graphic hypertext links as well. Simply surround the <IMG> tag with anchor tags that define which document to load. A picture serves as a hypertext link to another HTML document in the following example:


Click the picture to find out more about this statue.

<A HREF=“statue.html”><IMG SRC=“statue.gif”

ALIGN=BOTTOM ALT=“[Photo of statue]”>

</A>

From Here…

This chapter introduces you to basic HTML and how to create a Web page. You learned how to use tags, which provide commands to a Web browser, and how to use attributes and URLs, which provide details for the commands. Many HTML guides are available on the Internet that cover everything from syntax to design. Use one of the many search engines to look up HTML topics that interest you.

ON THE WEB:
A good starting point for ideas is Yahoo’s listings for HTML:

http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/
Data_Formats/HTML/

You can find out more about the World Wide Web and the Internet in Chapter 31, “Surfing the Internet with the World Wide Web,” which introduces you to the Web and how to search it.

Table of Contents