Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
Rendering Images
00:00
The <img> element contains a src attribute, which allows you to attach images. The src references the image source, just like href is used with a link. You can head over to the code to begin adding images.
00:14 Before you start, make sure you have three images inside your images folder. You’ll find the sky images inside of the images folder after downloading the materials, or you can find three images of your own to use.
00:27 Your file directory should look similar to mine with an images folder that contains a `gallery .html` file and three images.
00:37
Open your gallery.html file if it is not already open. Add a heading element for your page. Since this is the first heading element on your gallery page, you can add an h1 tag, Image Gallery for the text in between, and then h1 to close the tag off.
00:55
Underneath your heading, you can begin adding your images. Type an opening image tag, and within the opening tag type src equal quotes sky
01:06
underscore 1.png. Now add a space and type alt equal "Cloudy sky."with period.
01:16 If you recall from earlier, void elements do not have a closing tag and are self-closing so you do not need to add a closing image tag. The source is a relative link to your existing “sky 1.png” image.
01:30
You added an alt attribute that stands for alternative text. It is used to provide a text alternative for an image in case the image cannot be displayed or if the user is using assistive technologies like screen readers.
01:44 Go ahead and add the remaining two images.
02:02 Now that you have all three images added check this out in your browser. When you open your `gallery .html` file in your browser, your page looks similar to this.
02:13 Images are a great way to make your website more visually appealing. However, the image gallery is a bit all over the place and without any additional styling, the website looks rather old school.
02:24 It’s time to change that. In the next section, you’ll add styling rules to your HML and gain better control over how the elements on your website look. Before moving on to styling, you can recap what you just did.
02:37
The alt attribute is used to add alternative text that describes the image. It’s similar to docstrings in Python. A docstring may describe the purpose of an object, the alt text describes the content of an image.
02:50
Alt text should end with a dot to help convey a complete thought, which may improve comprehension for some users.
Carlos BedoyaBeCloud on Feb. 19, 2026
Hi, I also was looking where to get the images for the exercise and did not find it.
Tappan Moore RP Team on Feb. 19, 2026
Sorry about that! @Carlos BedoyaBeCloud and @toigopaul it’s fixed now, the downloadable resources (including images) are available on the dropdown menu. Thanks for notifying us, I’m not sure how I missed this on the first comment.
Justin Archinihu on Feb. 28, 2026
The images do not display when i run it in my browser.
Martin Breuss RP Team on March 4, 2026
@Justin Archinihu this usually happens when the image files aren’t in the right location relative to your HTML file.
First, make sure you’ve downloaded the course materials from the Supporting Material dropdown on the lesson page. The download includes an images folder with the sky images used in this lesson.
Then check that your folder structure looks like this:
images/
gallery.html
sky_1.png
sky_2.png
sky_3.png
The src="sky_1.png" in your <img> tag is a relative path, so the image files need to be in the same folder as your gallery.html file. If the images are in a subfolder or somewhere else, the browser won’t find them and you’ll see broken image icons instead.
If you’re still having trouble after checking the file structure, let us know what you see in the browser (broken image icons, blank space, etc.) and we can help narrow it down.
Become a Member to join the conversation.
toigopaul on Dec. 10, 2024
There are no images to download for this tutorial.