Lesson 1
Adding Images to Your Webpage
Adding Images to Your Webpage

Welcome back! In our previous lessons, we've learned how to structure HTML documents and add text elements to our webpages. Now, let's take it a step further by incorporating images. Images make your webpages more engaging and visually appealing.

What You'll Learn

In this lesson, we'll explore how to add images to your webpage using the <img> tag in HTML. By the end of this lesson, you'll know how to:

  • Embed an image in your HTML document.
  • Specify the source of the image using the src attribute.
  • Control the size of the image using the width and height attributes.

Here’s a quick example to get you started:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>My Enhanced Webpage</title>
6</head>
7<body>
8    <h1>Welcome to My Enhanced Webpage</h1>
9    <p>Here is an image:</p>
10    <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1718971012550/a0506561-f951-4885-a4d4-faa6bd6ab16f.jpg" width="300">
11</body>
12</html>

In the example above, the <img> tag is used to add an image. The <img> tag is self-closing, meaning it doesn't have a closing tag. Instead, it uses attributes to specify the image source and other properties.

Let's understand the attributes used in the <img> tag:

  • src: This attribute specifies the URL of the image you want to display. The URL can be a relative path to an image file on your server or an absolute URL to an image hosted on the internet. In the example above, the src attribute points to an image hosted on the internet.
  • width and height: These attributes allow you to control the size of the image. In the example above, the width attribute is set to 300, which means the image will be displayed with a width of 300 pixels. If you specify only the width or height, the browser will automatically adjust the other dimension to maintain the aspect ratio of the image. If none of these attributes are specified, the image will be displayed in its original size.
Why It Matters

Adding images to your webpage is essential for multiple reasons. Images:

  • Enhance user experience by making your content more engaging.
  • Help convey messages more effectively when words are not enough.
  • Improve the visual appeal of your webpage, making it more attractive to visitors.

By learning how to embed images, you'll be able to create richer and more interactive webpages. Excited to get started? Let's head over to the practice section and bring your webpages to life with images!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.