HTML Image

HTML Images

In this lesson of the HTML tutorial, you will learn… 

  1. To add images to a website.
  2. To create image links.
  3. To make images accesible.

Modern browsers generally support three types of images: GIFs, JPEGs, and PNGs. The PNG and GIF are generally used for simple images such as drawing; whereas the JPEG format is used for more complicated images such as photographs.

Inserting Images

Inserting images in web pages is done by placing an img tag in the HTML code. The img tag’s src attribute is used to reference an image file using a relative or absolute path. The syntax is as follows.

Syntax
<img src="path_to_image_file" alt="alternative text"/>

The <img /> tag is an empty tag and should be closed with a shortcut close. The following page shows how to use the <img /> tag:

Code Sample: Images/Demos/Images.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p><img src="http://www.google.com/images/logo.gif" alt="Logo" /></p>
<hr />
<p><img src="Images/Pooh.jpg" alt="Pooh Bear" /></p>
<hr />
<p><img src="Images/RunnersHome.gif" alt="Runners Home" /></p>
</body>
</html>
Code Explanation

The page will render as follows:

Note that img elements may not be direct children of the body element.

Making Images Accessible

Alternative Text

To add alternate text for an image, use the alt attribute.

<img src="logo.gif" alt="Logo" />

Alternate text is displayed…

  • When the user’s browser does not support images.
  • As the image is downloading.
  • When the user hovers over the image with the mouse.

Alternate text can also be used by screenreaders to describe an image for the visually impaired.

Long Descriptions

If an image depicts something complicated, such as a graph or chart, a long description of the image can be provided on a separate page. The longdesc attribute of the <img /> tag is used to point to that description. For example:

Code Sample: Images/Demos/LongDesc.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Long Description</title>
</head>
<body>
<h1>Long Description</h1>
<p><img src="Images/BigMac.jpg" alt="Big Mac Nutrition Information" longdesc="BigMac.html" /></p>
</body>
</html>
Code Explanation

The browsers don’t do anything with the longdesc value, but modern screenreaders make use of it. Freedom Scientific, the makers of Jaws, one of the most popular screenreaders, say this about their support for longdesc:

JAWS now supports the “Longdesc” attribute in HTML within Internet Explorer 5.x and 6. The “Longdesc” attribute allows a long description of graphics to be provided on a separate page. The “Longdesc” attribute contains the address of the descriptive page. After reading any Alt text for the graphic, JAWS announces there is a long description and the address of the page. Just press ENTER to open the page containing the long description in a new window.

Image Links

Creating image links is easy. Simply put an <a> tag around your image, like so…

<a href="index.html" title="Link to Home Page"><img src="images/logo.gif" /></a>

By default, most browsers will place a one-pixel border around a linked image.

For examples of linked images, see Images/Demos/ImageLinks.html.

Exercise: Adding Images to the Page

Duration: 5 to 10 minutes.

In this exercise, you will add an image to index.html. The resulting page is shown below.

  1. Open Images/Exercises/index.html for editing.
  2. Add the image called RunnersHome.gif in the Images/Exercises/Images directory, so that the page appears as shown in the screenshot above.
    • The alternative text should be “Runners Home Logo”.
    • There is no need for a long description.

HTML Images Conclusion

In this lesson of the HTML tutorial you have learned to add images to a web page, to make those images accessible, and to create image links .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s