Документация
HTML CSS PHP PERL другое
Placing an Image on a Web Page
 
Previous Page
Table of Contents
Next Page

Placing an Image on a Web Page

of your image file instead of myimage.gif:

<img src="myimage.gif" alt="My Image" />

Both the src and the alt attributes of the <img /> tag are required in XHTML web pages. The src attribute identifies the image file, and the alt more on the alt attribute later, in the section "Describing an Image with Text."

By the Way

The <img /> tag also supports a title attribute that is used to describe an image. Unlike the alt attribute, the title attribute is truly intended to provide an image description with the assumption that the image is visible. The alt attribute serves a more important purpose, and enters the picture primarily when an image cannot be displayed, such as when a blind user is "viewing" a page. The alt attribute is required but it's a good idea to provide both alt and title attributes if you want to ensure that your images are all well-described.


As an example of how to use the <img /> tag, Listing 8.1 inserts several images at the top and bottom of a page. Whenever a web browser displays the HTML file in Listing 8.1, it automatically retrieves and displays the image files as shown in Figure 8.1. Notice that these are some of the same images you saw created and edited in Paint Shop Pro in the preceding lesson.

Listing 8.1. The <img /> Tag Is Used to Place Images on a Web Page
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Michael's Pond</title>
  </head>

  <body>
    <p>
      <img src="pondtitle.gif" alt="Michael's Pond" />
    </p>
    <p>
      My backyard pond is not only a fun hobby but also an ongoing home
      improvement project that is both creative and relaxing. I have numerous
      fish in the pond, all Koi from various places as far as Japan, Israel,
      and Australia. Although they don't bark, purr, or fetch anything other
      than food, these fish are my pets, and good ones at that. The pond was
      built in a matter of weeks but has evolved over several years through
      a few different improvements and redesigns. I still consider it a work in
      progress, as there are always things to improve upon as I continue to
      learn more about how the pond ecosystem works, how to minimize
      maintenance, and how to get a more aesthetically pleasing look.
    </p>
    <p>
      <img src="pond1.jpg" alt="The Lotus, Floating Hyacinth, Japanese Lantern,
      and Waterfall All Add to the Drama of the Pond" /> <br />
      <img src="pond2.jpg" alt="Feeding Time is Always Full of
      Excitement" /> <br />
      <img src="pond3.jpg" alt="One of the Larger Fish Cruises for
      Dinner" /> <br />
      <img src="pond4.jpg" alt="A Dragonfly Hovers Over the Lotus for a Quick
      Drink" />
    </p>
  </body>
</html>

Figure 8.1. When a web browser displays the HTML page from Listing 8.1, it adds the images named pondtitle.gif, pond1.jpg, pond2.jpg, pond3.jpg, and pond4.jpg.


If you guessed that img stands for image, you're right; src stands for source, which is a reference to the location of the image file. (As discussed in Hour 1"Understanding HTML and XHTML," a web page image is always stored in a file separate from the text, even though it appears to be part of the same page when viewed in a browser.)

Just as with the <a href> tag (covered in Hour 3, "Linking to Other Web Pages"), you can specify any complete Internet address in the src attribute of the <img /> tag. Alternatively, you can specify just the filename if an image is located in the same folder as the HTML file. You can also use relative addresses such as /images/004/birdy.jpg or ../smiley.gif.

By the Way

Theoretically, you can include an image from any Internet web page within your own pages. For example, you could include a picture of my steely glare by putting the following on your web page:

<img src="http://www.michaelmorrison.com/mmintro1.jpg" />

from their server computer), but it also can make your pages display more slowly. You also have no way of controlling whether the image has been changed or deleted.

If someone gives you permission to republish an image from one of his pages, always transfer a copy of that image to your computer and use a local file reference such as <img src="mmintro1.jpg" />. In other words, you should host all images used on your pages.



Previous Page
Table of Contents
Next Page

 Приглашаем посетить сайты 
Мода Чехов Крылов Автомобили Сологуб Успенский Жуковский Футбол Кулинария CSS