Web - Links and Images - Images in HTML - Lesson

Web · Links and Images

Images in HTML

The full text of this chapter, to read or revisit. To practise, do the exercises.

Exercise 1 — Introduction to Images in HTML

Images are an essential part of web pages. To add an image to your HTML document, you use the

<img>

tag. Unlike many other HTML elements, the image tag is self-closing, which means it doesn't have a separate closing tag.

The basic syntax of an image tag looks like this:

The

<img>

tag requires at least two attributes: 1.

src

(source): Specifies the path to the image 2.

alt

(alternative text): Provides a text description of the image

<!DOCTYPE html> <html> <body> <h1>My First Image</h1> <img src="https://via.placeholder.com/300x200" alt="A placeholder image, 300x200 pixels"> </body> </html>

Self-closing Tags

The

<img>

tag is one of several self-closing tags in HTML, which means they don't need a closing tag. Other examples include

<br>

<hr>

, and

<input>

. You may also see them written with a forward slash at the end like

<img />

which is valid in HTML5.

Exercise 2 — The src Attribute: Image Sources

The

src

attribute in the

<img>

tag specifies the location (URL) of the image. Just like with links, you can use both absolute and relative URLs for images.

Absolute URLs include the full web address of the image:

Relative URLs point to an image file relative to the current HTML document:

Just like with links, the path rules are the same: -

images/codemon.jpg

refers to an image in the 'images' subfolder -

../images/logo.png

refers to an image in the 'images' folder one level up from the current location

Image File Formats

Common web image formats include: - JPEG/JPG: Best for photographs - PNG: Best for images with transparency - GIF: Supports animation - SVG: Vector format that scales without losing quality - WebP: Modern format with good compression

Exercise 3 — Correct Image Path

Given the following folder structure, which

src

attribute would correctly reference the image 'aquachu.png' from a file located in the 'guides' folder?

website/ ├── index.html ├── guides/ │ └── beginners.html └── images/ └── aquachu.png

Options

• ```src="../images/aquachu.png"```

• ```src="images/aquachu.png"```

• ```src="./aquachu.png"```

• ```src="website/images/aquachu.png"```

Hint : Think about the relative path from beginners.html to aquachu.png. You need to go up one directory level and then into the images directory.

Exercise 4 — The alt Attribute: Making Images Accessible

The

alt

attribute provides alternative text for an image. It's one of the most important attributes for accessibility. The alt text serves several key purposes:

1. It's read by screen readers for people with visual impairments 2. It's displayed if the image fails to load 3. It helps search engines understand the content of the image 4. It provides context when images are disabled or in text-only browsers

<!DOCTYPE html> <html> <body>  <img src="https://via.placeholder.com/150" alt="A blue Aquachu Codémon with water bubbles">  <img src="https://via.placeholder.com/150">  <img src="https://via.placeholder.com/150" alt="">  <img src="non-existent-image.jpg" alt="This text appears when the image can't load"> </body> </html>

Guidelines for writing good alt text: - Be specific and descriptive - Keep it concise (generally under 125 characters) - Include relevant details about the image content - Don't start with "Image of..." or "Picture of..." (screen readers already announce it's an image) - Use empty alt text (

alt=""

) for purely decorative images

Never Omit the alt Attribute

Even if an image is decorative and doesn't need a description, you should still include the alt attribute with an empty value (alt="") rather than omitting it completely. This explicitly tells screen readers to skip the image.

Exercise 5 — Matching Images with Good Alt Text

Match each image scenario with an appropriate alt text description:

Items to match

• A logo for the Codémon game

• A decorative divider between sections

• A diagram showing Codémon evolution stages

• A profile photo of a character

Definitions

• alt="Codémon game logo"

• alt=""

• alt="Diagram showing the three evolution stages of Aquachu"

• alt="Trainer Maya with red hat and blue jacket"

Exercise 6 — Complete the Image Tag

Complete the HTML code to add an image of Pyrochu from the images folder, with appropriate alt text.

<!DOCTYPE html> <html> <body> <h1>Fire-type Codémon</h1> <____ ____="images/pyrochu.jpg" ____="Pyrochu, a fire-type Codémon with flames"> </body> </html>

Options: img src alt image href title

Hint : Remember that an image tag requires both src and alt attributes. The src specifies where to find the image, and alt provides a text description.

Exercise 7 — Image Dimensions: Width and Height

You can control the size of images on your webpage using the

width

and

height

attributes. These attributes specify the dimensions in pixels.

Benefits of specifying width and height: 1. Page layout stability: The browser reserves space for the image even before it loads, preventing layout shifts 2. Performance: Helps the browser calculate the page layout more efficiently 3. Resizing: Allows you to display images at a different size than their actual dimensions

<!DOCTYPE html> <html> <body> <h2>Original Size</h2> <img src="https://via.placeholder.com/300x200" alt="Placeholder image at original size"> <h2>Resized with width and height</h2> <img src="https://via.placeholder.com/300x200" alt="Resized placeholder image" width="150" height="100"> <h2>Width only (maintains aspect ratio)</h2> <img src="https://via.placeholder.com/300x200" alt="Width-only resized image" width="150"> </body> </html>

Aspect Ratio

If you specify only one dimension (either width or height), the browser will automatically calculate the other dimension to maintain the image's original aspect ratio. This helps prevent distortion.

Actual File Size

Changing width and height attributes only affects how the image is displayed, not the actual file size. Large images scaled down still require the full download. For optimal performance, it's better to use appropriately sized image files.

Exercise 8 — Correct Image Tag Syntax

Which of the following is the correct syntax for an image tag with proper attributes?

Options

• ```<img src="florachu.jpg" alt="Florachu plant Codémon">```

• ```<image source="florachu.jpg" alternate="Florachu plant Codémon">```

• ```<img href="florachu.jpg" alt="Florachu plant Codémon"></img>```

• ```<img>florachu.jpg</img>```

Hint : The correct image tag uses src for the source file and alt for alternative text. It's also a self-closing tag without a separate closing tag.

Exercise 9 — Add Width and Height to an Image

Complete the image tag to display an image of Aquachu that is 200 pixels wide and 150 pixels tall.

Options: width height size w h dimension

Hint : To specify dimensions for an image, use the width and height attributes with values in pixels (without the 'px' unit).

Exercise 10 — Best Alt Text

Which of the following is the most appropriate alt text for a logo image that appears at the top of a Codémon training website?

Options

• ```alt="Codémon Training Academy logo"```

• ```alt="Image"```

• ```alt="This is a logo that contains the text 'Codémon Training Academy' with a codeball icon and is located at the top of the page, it's blue and yellow with a modern font"```

• ```alt=""```

Hint : Good alt text should be concise but descriptive, identifying what the image is without unnecessary detail. For logos, the name of the organization and the word 'logo' is typically sufficient.

Exercise 11 — Image Attributes and Their Purpose

Match each image attribute with its correct purpose:

Items to match

• src

• alt

• width

• height

Definitions

• Specifies the path to the image file

• Provides alternative text for accessibility

• Specifies the horizontal size of the image

• Specifies the vertical size of the image

← Previous lesson : Email and Telephone Links Next lesson : Quizz →

Back to the course