Skip to Content
Learn
Site Structure
Adding Images

To add images to a webpage, use the HTML image element:

<img src="https://content.codecademy.com/projects/make-a-website/lesson-1/bikes1.jpg"/>

Just like websites have URLs, images on the web also have URLs. Image URLs typically end with the .jpg or .png file extension. The src attribute sets the source for an image element.

Image elements are self-closing, which means they do not need a closing tag.

Let’s use an image element to add a photograph to our webpage.

Instructions

1.

In index.html, on the line below the paragraph element, add an image element. Use the following as the image URL:

https://content.codecademy.com/projects/make-a-website/lesson-1/bikes1.jpg

Remember, the URL must be enclosed in quotes!

Run your code to view the image in the web browser.

2.

Want to change the photo that the image element displays? Simply set the value of src to a different photo’s URL.

Here’s another photo:

https://content.codecademy.com/projects/make-a-website/lesson-1/bikes2.jpg

Replace the current photo with this one and then run your code.

Folder Icon

Take this course for free

Already have an account?