Activity 5: Image Exercises

What was this all about?

A webpage full of just text can be boring! Activity 5 taught us how to introduce visual interest by adding images. We learned the essential <img> tag, how to control image size, add borders, and, most importantly, how to turn an image into a link that takes a user somewhere else.

Showing the Final Look (The Output)

The screenshots below show the final results of the image exercises. You can see we successfully added images, styled them, and made some of them clickable.

Key results displayed:

1. Multiple Images: Five images are displayed with titles and clear spacing.
2. Styled Image: One image has a visible border and defined size (200×200 pixels).
3. Image as a Link: The Google logo is clickable and opens a search engine in a new tab.

---

Taking a Peek at the Code

These screenshots show the HTML code for Activity 5, focusing on the <img> tag and its attributes.

Let’s break down the main concepts:

Exercise 5.1: Displaying Images

• The Goal: Display five different images, each with a title.
• The Code (See Lines 372-399):
  • The <img> Tag: This is the core tag. It’s a “self-closing” tag, meaning it doesn’t need a closing </img>.
  • The src Attribute: This is the most vital part! It stands for source and tells the browser exactly where the image file is located (e.g., images/img1.jpg).
  • The alt Attribute: This is absolutely essential! It stands for alternate text. This text is displayed if the image fails to load, and, more importantly, it is read aloud by screen readers for users who are visually impaired. It’s crucial for accessibility.
  • The <figure> and <figcaption> Tags: I wrapped each image in these tags. This is the correct way to add a picture with a descriptive title (the figcaption). This structure keeps the image and its title formally connected.

Exercise 5.2: Sizing and Styling

• The Goal: Show an image with a specific size and a border.
• The Code (See Lines 403-406):
  • width and height Attributes: I explicitly set the size using width="200" and height="200". This ensures the image loads exactly the size I want, preventing strange layout shifts.
  • style Attribute: I used inline CSS (style="border: 2px solid red;") to give the image a 2-pixel red border. This exercise showed me that images can be easily styled just like text elements.

Exercise 5.3: Image as a Clickable Link

• The Goal: Make the Google logo clickable to take the user to the Google search page.
• The Technique (See Lines 410-412): This is a simple but powerful combination: I wrapped the <img> tag inside an <a> tag.
• The Code:

HTML<a href="https://www.google.com" target="_blank" rel="noopener"> <img src="..." alt="Google logo"> </a> Since the <img> tag is the content of the link, clicking anywhere on the image performs the link's action. This is how almost every button and icon on the web works

---

What I Took Away From This Activity

Activity 5 provided the knowledge needed to add rich, meaningful visual content to any page. The main lessons were:

1. The Essential <img> Attributes: I learned that an image tag is useless without the src (source) and the professional web is incomplete without the alt (alternate text) attribute.
2. Controlling Image Size: I mastered using the width and height attributes to control the dimensions, which is vital for designing layouts that look the same across different devices.
3. Images as Navigation: I learned the simple, powerful trick of nesting an <img> tag inside an <a> tag to turn any picture into a functional piece of navigation.