Skip to content

Week 5 Learn & Practice - Images

Textbook

  • Chapter 7: Adding Images (pages 131-138)
    • Adding SVG Images is optional

Images

The <img> Element

Images can be placed into a website by using the <img> element.

Images include the following formats:

  • .gif file: best for animated images
  • .jpg (or .jpeg) file: best for photographs
  • .png file: best for vector images or if transparency is needed

Although an image visually appears as a rectangle, the <img> element is considered inline, not a block element. This is because it's a self-closing element that can't contain other HTML elements or content.

The <img> Element Attributes

Note the syntax for the image element and its attributes:

<img src="images/logo.jpg" alt="Logo" title="Company Logo">

The Source Attribute

Every image must contain a source src attribute. The source attribute’s value is the URL (the location) of the image file. In this class, our images are always stored in the images folder.

The Alternative Text Attribute

Every image element must also contain an alt attribute. The alt attribute provides a brief description of the image. If the image fails to load, the value of this attribute will appear on the page. Also, users that are visually impaired may use a screen reader to read websites; the value of the alt attribute provides the necessary text for the screen reader to speak.

The Title Attribute

The title attribute is a global attribute (meaning it can be used on any element). When used with an image, the title attribute’s value will display the text as a description of the image when a mouse hovers over the image on the webpage. The text that displays is called a tool tip and can sometimes be referred to as help text or hover text.

Adding an Image

  1. Download the week05Demo_images.zip, then open the webpage in both VS Code and your browser.

  2. Open the goldenRetriever.html document.

  3. Place an <img> element after the <main> element

  4. Add the src attribute.

    <img src="">

  5. We need to provide a relative path to the goldenRetriever.jpg file. Since we are currently in the breeds directory, we need to back out of the breeds directory with the ../ syntax, then go to the images directory and access the goldenRetriever.jpg file.

    <img src="../images/goldenRetriever.jpg">

  6. Add the alt attribute to the image tag. The alt attribute is required on all images!

    <img src="../images/goldenRetriever.jpg" alt="Golden Retriever">

  7. Add a tool tip. This is accomplished with the title attribute. Test this in your browser by hovering your mouse over the image. After a few seconds, a text box will appear with the title attribute value. The title attribute is a global attribute, meaning it can be applied to any element.

    <img src="../images/goldenRetriever.jpg"
alt="Golden Retriever"
title="Golden Retriever">

  8. Add the Saint Bernard image to saintBernard.html page. Then, find an image of an Airedale Terrier to add to the airedaleTerrier.html page.

  1. On the goldenRetriever.html document,
  2. Delete the homepage link underneath the <h1> element. Instead of the text, "Homepage", let's use an image.
  3. Insert the homeButton.png image under the <h1> element. Don't forget to include the alt attribute.

  4. Surround the <img> element in anchor tags.

    <a>
<img src="../images/homeButton.png" alt="Home Link">
</a>

  5. Add the href attribute with the location to index.html

    <a href="../index.html">
<img src="../images/homeButton.png" alt="Home Link">
</a>

  6. On the saintBernard.html and airedaleTerrier.html pages, change the homepage link to the home button image.