Home >> FAQs/Tutorials >> XHTML Tutorials and Tips >> Index

XHTML 1.0 Tutorials - Understanding Inline Images and Image Maps

By: FYICenter.com

Part:   1   2  3  4  5  6  7  8 

A collection of 8 FAQs/tutorials tips on XHTML image and image map elements. Clear answers are provided with tutorial exercises on inline images and image maps: image elements and image sizes; floating images and animated images, server-side and client-side image maps. Topics included in this collection are:

  1. What Is an IMG Tag/Element?
  2. What Are the Attributes of an IMG Element?
  3. How To Reduce the Display Size of an Image?
  4. How To Float an Image to the Right Side?
  5. What Is an Animated Image?
  6. What Is a Server-Side Image Map?
  7. What Is a Client-Side Image Map?
  8. What Is a MAP Tag/Element?

Please note that all notes and tutorials are based on XHTML 1.0 specification.

What Is an IMG Tag/Element?

A "img" element is an inline element that you can use to define an inline image to be included in a XHTML document. Here are basic rules about an "img" element:

  • "img" elements are inline elements.
  • A "img" element must have empty content.
  • A "img" element requires an attribute called "src" to specify the URL of the image file.
  • A "img" element requires an attribute called "alt" to specify the name of the image.
  • A "img" element will cause browsers to fetch the image, and displayed it inline in a paragraph block. The image name will be displayed when users mouse over the image.

Here is a simple example of an "img" element:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Inline Images</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   What's the image title? 
   <img src="moonrise.jpg" alt="Moonrise"/>
   Mouse over the image to find out.</p>
 </body>
</html>

If you save the above document as inline_image.html, download this image file and view it with Internet Explorer, you will see an image embedded inline in a text paragraph as shown below:
            Inline Images

(Continued on next part...)

Part:   1   2  3  4  5  6  7  8 


Selected Developer Jobs:

More...