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
-
Download the week05Demo_images.zip, then open the webpage in both VS Code and your browser.
-
Open the goldenRetriever.html document.
-
Place an
<img>
element after the<main>
element -
Add the
src
attribute.<img src="">
-
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">
-
Add the
alt
attribute to the image tag. Thealt
attribute is required on all images!<img src="../images/goldenRetriever.jpg" alt="Golden Retriever">
-
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">
-
Add the Saint Bernard image to saintBernard.html page. Then, find an image of an Airedale Terrier to add to the airedaleTerrier.html page.
Images as Links
- On the goldenRetriever.html document,
- Delete the homepage link underneath the
<h1>
element. Instead of the text, "Homepage", let's use an image. - Insert the homeButton.png image under the
<h1>
element. Don't forget to include thealt
attribute. -
Surround the
<img>
element in anchor tags.<a> <img src="../images/homeButton.png" alt="Home Link"> </a>
-
Add the
href
attribute with the location to index.html<a href="../index.html"> <img src="../images/homeButton.png" alt="Home Link"> </a>
-
On the saintBernard.html and airedaleTerrier.html pages, change the homepage link to the home button image.