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.
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:
src
attribute.width
and height
attributes.Here’s a quick example to get you started:
HTML, XML1<!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.Adding images to your webpage is essential for multiple reasons. Images:
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!