Lesson 6: Images

Overview

In this HTML lesson, we show the basic method for displaying images in an HTML document and how to adjust it. First, we use a local file to demonstrate the most common usage and explain some of the peculiarities of the image element. Next, we show how to set the alt attribute to display when the image is not available. After that, use an image on xoax.net to demonstrate the use of remote images. Lastly, we demonstrate image resizing and the fact that the image in an inline element.

A Simple Image

An image element is a new type of element that has only one tag, unlike all of the prior elements with opening and closing tags. This is because no content sits inside the image. Instead, the src attribute is set to the file name of an image that is loaded locally from the drive. The attribute name and file name make up a name-value pair for the src, or source, attribute.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="Daniel.png">
  </body>
</html>

Output

Using alt

Since the image element relies on an eternal resource, it is important to account for the fact that the resource, the image, may be lost or unreachable. To do this, we set he alt attribute to a message that the describe the missing content. That way, if the image is not available, as we show here, the user knows exactly what content is missing.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="Daniel2.png" alt="Daniel in the Lion's Den">
  </body>
</html>

Output

Remote Images

Not only can we use images on the local hard drive, we can use remote images at any URL. In this example, we use the xoax.net logo on our website as the source for the image. In this case, it is even more important to include alternative text.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="https://xoax.net/lib/images/XoaXLogoNew.png" alt="XoaX.net Logo">
  </body>
</html>

Output

Resizing Images

We can resize images by setting the width and height. Otherwise, we can resize just the height or the width and the other dimension is automatically scaled.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="https://xoax.net/lib/images/XoaXLogoNew.png" width="300" height="300">
  </body>
</html>

Output

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="https://xoax.net/lib/images/XoaXLogoNew.png" height="100">
  </body>
</html>

Output

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="https://xoax.net/lib/images/XoaXLogoNew.png" width="130">
  </body>
</html>

Output

Inline Element

The image element is an inline element, which we demonstrate by putting text around the image.

Example7.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    "Our hearts are restless
	<img src="https://xoax.net/lib/images/XoaXLogoNew.png" alt="XoaX.net Logo">
    until they find their rest in You." --Saint Augustine
  </body>
</html>