This web page created by Kathleen M. Weber on February 4th, 1998.
At this point you can add some character to your html file and use different tags to better communicate your ideas. Now it's time to jazz up your pages a little bit. Let's add some graphics!
First, though, you should know a couple of important things about placing graphics.
When your graphics are created, cropped, resized, and saved in the appropriate formats, you're ready to add them to your Web pages. To add graphics, you use an empty tag called the <IMG> (image) tag, which you insert into the body section of your HTML document as follows:
<IMG SRC="image URL">
or
<IMG SRC="path/filename">
SRC accepts the name of the file that you want to display, and image URL (or path/filename) is the absolute (full URL) or relative path (for a local file or a file in the current directory) to the image. As the first example shows, you can display on your page any graphic file that is generally available on the Internet, even if the file resides on a remote server. For graphics files, however, it is much more likely that the file is located on the local server, so a path and filename are sufficient.
You could enter the following text in a browser:
<HR>
<P>This is a test of the Image tag. Here is the image I want to
display:</P>
<IMG SRC="image1.gif">
<HR>
In this case, <IMG SRC="image1.gif"> is a relative path URL, suggesting that the file image1.gif is located in the same directory as the HTML document. The result would be displayed by a browser as shown in Figure 10.
Figure 1: Displaying inline graphics on a Web page.
An absolute URL is essential, however, if you were accessing an image on a remote site, as in the following example:
<IMG SRC="http://www.graphcom.com/pub/graphics/image1.gif">
(This example is fictitious.) Please realize that using a URL to a distant site on the Internet causes that site to be accessed every time this <IMG> tag is encountered on your page, so you should probably have some sort of arrangement with that Web site's system administrator before you link to a graphic on their server.
You can add graphics links to HTML tags to do various things, including placing graphics next to text (within paragraphs) and even including graphics in lists. The following example displays the graphic flush with the left margin, with the bottom of the text that follows the image aligned with its bottom edge:
<P><IMG SRC="start.gif"> It's time to start our adventure in the world of
the Web. As you'll see below, there is much to learn. </P>
Words at the end of the first line wrap below the image (see Figure 2).
Figure 2: Graphics within paragraph containers.
Another popular use for graphics is including them in HTML lists. Best suited for this task is the <DL> (definition) list, which allows you to use your own graphics as bullet points. (Ordered and unordered lists display their numbers or bullets in addition to the graphic.)
A <DT> (definition term) tag can accept more than one <DD> (definition) element, so you can create a bulleted list as follows:
<DL>
<DT>
<DD><IMG SRC="bullet.gif"> This is the first point
<DD><IMG SRC="bullet.gif"> This is the second point
<DD><IMG SRC="bullet.gif"> Here's the third point
<DD><IMG SRC="bullet.gif"> And so on.
</DL>
| Tip |
If you're not up to creating your own bullet points, many archives of common bullets, graphics, and clipart images exist on the Web. Try CERN's images at http://www.w3.org/hypertext/WWW/Icons or a popular site like Randy's Bazaar at http://www.infi.net/~rdralph/icons/. |
At the same time, you could use a definition list in conjunction with thumbnail graphics in a list that uses both the <DT> and <DD> tags. An example might be the following real estate agent's pages (see Figure 3):
Figure 3: Use a <DL> tag to create custom bulleted lists and thumbnail lists.
<DL>
<DT><IMG SRC="Small_House14101.GIF">
<DD><EM>14101 Avondale</EM> This executive 3/2/2 is nestled among the live oak, with a beautiful view of the foothills. $139,900.
<DT><IMG SRC="Small_House3405.GIF">
<DD><EM>3405 Main</EM> This timeless beauty is a cottage made for a prince (and/or princess!) Spacious 2/1/1 is cozy and functional at the same time, with all-new updates to this 1880s masterpiece. $89,995.
</DL>
None of the HTML tags that you've encountered so far offer the option of a tag attribute-an option that somehow affects or enhances the way the tag is displayed on-screen.
The ALT attribute for the <IMG> tag is designed to accept text that describes the graphic, in case a particular browser can't display the graphic. Consider the plight of users who use Lynx or a similar text-based program to surf the Web (or users of graphical browsers that choose not to auto-load graphics). Because those users can't see the graphic, they'll want to know what they're missing.
The ALT attribute works this way:
<IMG SRC="image URL" ALT="Text description of graphic">
The following is an example:
<IMG SRC="image1.gif" ALT="Logo graphic">
For people whose browsers can't display the graphic, the ALT attribute tells them that the graphic exists and explains what the graphic is about.
| Tip |
Test your site with the Load Images option turned off so that you can see how your ALT text displays. |
<IMG> can accept another attribute that specifies how graphics appear relative to other elements (like text or other graphics). Using the ALIGN attribute, you can align other elements to the top, middle, or bottom of the graphic. It follows this format:
<IMG SRC="image URL" ALIGN="direction">
| Note |
The ALIGN="BOTTOM" attribute isn't necessary, because it is the default setting for the <IMG> tag. |
The ALIGN attribute is designed to align text that comes after a graphic with a certain part of the graphic itself. An image with the ALIGN attribute set to TOP, for example, has any subsequent text aligned with the top of the image, like in the following example:
<IMG SRC="image1.gif" ALIGN=TOP> Descriptive text aligned to top.
Giving the <IMG> tag an ALIGN="MIDDLE" attribute forces subsequent text to begin in the middle of the graphic (see Figure 4):
Figure 4: The ALIGN attribute for the <IMG> tag.
<IMG SRC="image1.gif" ALIGN="MIDDLE"> Descriptive text aligned to middle.
Order among the attributes that you assign to an image tag is unimportant. In fact, because SRC="URL" is technically an attribute (although a required one), you can place the ALIGN or ALT attribute before the SRC information. Anywhere you put attributes, as long as they appear between the brackets of the <IMG> tag, is acceptable.
Now that you've learned how to add images to your Web pages, you have almost doubled the things that you can do on the Web. In this example, you add graphics to a typical corporate Web page, using a couple of methods that you've learned.
To start, you need to create some graphics for your home page. If you have a corporate logo and a scanner handy, go ahead and scan in some graphics. Alternatively, you can use a graphics program to create, crop, and save your graphics as GIF or JPEG files. While you're at it, you may want to create some of your GIFs as transparent GIFs.
Create a logo, a special bullet, and a photo for use on the page. Name your GIFs LOGO.GIF, BULLET.GIF, and PHOTO.GIF, or something similar. (If you have already created a Web site, feel free to name the files according to the organizational system that you're using for the site. You can also use JPEG graphics if you so desire.) Then load your HTML template, and save it as a new HTML document. Between the body tags, type something like Listing 1.
Listing 1 images.html Using<IMG> to Create Images
<BODY>
<IMG SRC="logo.gif" ALT="RealCorp Logo">
<H1>Welcome to RealCorp's Web Site</H1>
<H2><IMG SRC="photo.gif" ALT="Photo of CEO Bob MacFay" ALIGN=MIDDLE><EM>I'm Bob MacFay, CEO of RealCorp...</EM></H2>
<P>We at RealCorp make it our business to be as productive and hard working as you are. That's why we've set up this Web site...to work a little harder, so you don't have to. Take a look at the various services our company offers, and maybe you'll see why we like to say, "We're the hardest working corporation all week, every week."</P>
<DL>
<DT>
<DD><IMG SRC="bullet.gif" ALT="-" ALIGN=MIDDLE> Full service plans for any size of customers
<DD><IMG SRC="bullet.gif" ALT="-" ALIGN=MIDDLE> On-time service calls, any time, any day of the week
<DD><IMG SRC="bullet.gif" ALT="-" ALIGN=MIDDLE> Fully-equipped mobile
troublshooting vans
<DD><IMG SRC="bullet.gif" ALT="-" ALIGN=MIDDLE> Time honored appreciate for quality over expediency
</DL>
</BODY>
Although the ALT attribute is optional and the bulleted list may survive without it, the example uses ASCII to substitute hyphens for the bullet graphics if the browser can't display images. In most cases, you'll want to describe an image that a user can't view. For an element such as a bullet, though, you can use the ALT attribute to substitute an ASCII character for the graphic.
For the photo of the CEO, the <IMG> tag is called within the <H2> tag, because the <H2> container (like a paragraph) otherwise would insert a carriage return and force the words I'm Bob MacFay... to appear below the photo. Including the <IMG> tag inside the <H2> tag allows the text to appear next to the photo (see Figure 5).
Figure 5: Sample Web page, including some different attributes for the <IMG> tag.
Play with this example a little bit to get a feel for when you should place the <IMG> tag within another HTML container and when you can leave the tag out on its own. A page sometimes looks completely different, based only on where you place your image tags.
Study Tips for tomorrow: Creating and Manipulating Graphics Files!
This web page created by Kathleen M. Weber on February 4th, 1998.
