facebook twitter
Webucator's Free HTML Training Tutorial

Lesson: HTML Images

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

Modern browsers generally support three types of images: PNGs, GIFs, and JPEGs. PNGs and GIFs are generally used for simple images such as drawings; whereas JPEGs is used for more complicated images such as photographs.

Lesson Goals

  • Learn to add images to a website.
  • Learn to create image links.
  • Learn to make images accessible.

Inserting Images

Modern browsers generally support three types of images: PNGs, GIFs, and JPEGs:

  • PNGs and GIFs are used for simple images such as drawings. PNGs are generally preferred to GIFs as the format does a better job compressing images without losing quality and because PNG is an open format.
  • JPEGs is used for more complicated images such as photographs.

Inserting images in web pages is done by placing an <img> tag in the HTML code. The <img> tag is an empty tag. Its src attribute is used to reference an image file using a relative or absolute path. The syntax is shown below:

Syntax

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

The following demo shows how to use the <img> tag:

Images/Demos/images.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Images</title>
</head>
<body>
<h1>Images</h1>
<p><img src="https://www.google.com/images/logo.png"
  alt="Google Logo"></p>
<hr>
<p><img src="images/pooh.jpg" alt="Pooh Bear"></p>
<hr>
<p><img src="images/runners-home.png" alt="Runners Home"></p>
</body>
</html>

Code Explanation

The page will render as follows:Google Image Page Example

Making Images Accessible

Alternative Text

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

<img src="logo.png" alt="Logo">

Alternative 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 (in some browsers).

Alternative text can also be used by screen readers to describe an image for the visually impaired. Screen readers make it possible for visually impaired people to read web pages and other computer-based content. A widely used screen reader is JAWS from Freedom Scientific.

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:

Images/Demos/long-desc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Long Description</title>
</head>
<body>
<h1>Long Description</h1>
<p><img src="images/sunny-d-nutrition.jpg" alt="SunnyD Nutrition Information"
  longdesc="sunny-d.html"></p>
</body>
</html>

Code Explanation

The browsers don't do anything with the longdesc value, but modern screen readers make use of it.

Height and Width Attributes

The img element also takes height and width attributes that set the dimensions (in pixels) to use to display the image on the page. It is not good practice to "resize" the image using these attributes. If you use these attributes, you should set the values to the actual height and width of the image. Using the height and width attributes lets the browser know how much space to allocate for the image without having to wait for the image itself to download. Use of these attributes may promote faster rendering of the web page.

<img src="logo.png" alt="Logo" height="100" width="300">

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.png">
</a>

The demo below shows some image links:

Images/Demos/image-links.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Links</title>
</head>
<body>
<h1>Image Links</h1>
<a href="https://www.google.com" title="Visit Google">
	<img src="https://www.google.com/images/logo.png" alt="Google Logo">
</a>
<hr>
<a href="https://en.wikipedia.org/wiki/Hundred_Acre_Wood" title="Visit site about Winnie the Pooh">
	<img src="images/pooh.jpg" alt="Pooh Bear">
</a>
<hr>
<a href="../Solutions/index.html" title="Link to Home Page">
	<img src="images/runners-home.png" alt="Runners Home Logo">
</a>
</body>
</html>

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:Welcome to Runners Home Page with Image

  1. Open Images/Exercises/index.html for editing.
  2. Add the image called runners-home.png 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.

Solution:

Images/Solutions/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Runners Home&trade;</title>
</head>
<body>
<div>
  <a href="index.html">Home</a> |
  <a href="races.html">Races</a> |
  <a href="resources.html">Resources</a> |
  <a href="calculator.html">Calculator</a> |
  <a href="running-log.html">Running Log</a> |
  <a href="my-account.html">My Account</a> |
  <a href="logout.html">Log out</a>
</div>
<p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p>
  <img src="images/runners-home.png" alt="Runners Home Logo"><br>
  Runners Home&trade; is dedicated to providing you with:<br>
  &#8226; <a href="races.html">the most up-to-date information on running races</a>.<br>
  &#8226; <a href="resources.html">the best resources for runners</a>.
</p>
<hr>
<p>&copy; 2020 Runners Home. All rights reserved.
For questions, send email to
<a href="mailto:info@runners-home.com">info@runners-home.com</a>.</p>
</body>
</html>