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
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.
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.