HTML Images
- To add images to a website.
- To create image links.
- 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.
<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>
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>
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.
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 .