Unit 6 Website Development - Tutorial 1
1.9 Insert images using correct file paths
Continue the School Coding Club website by adding an image from the images folder.
How Images Work
Images are added with the <img> element. The src attribute tells the browser where the image file is stored.
If the file path is wrong, the browser cannot find the image and it will not display correctly.
Image Example
<img src="images/coding-club.jpg" alt="Students learning to code at a computer">This looks for a file called coding-club.jpg inside an images folder.
Path Examples
| Folder structure | Correct image path |
|---|---|
| Image is in the same folder as the HTML file. | src="coding-club.jpg" |
| Image is inside an images folder. | src="images/coding-club.jpg" |
| Image is inside images/products. | src="images/products/item.jpg" |
Build It Yourself
- Open the same
unit-6-websitefolder. - Place a suitable club-related image inside the
imagesfolder. - Rename the image to a clear file name, such as
coding-club.jpg. - Add an
<img>element toindex.html. - Set the
srcto the correct file path. - Open the homepage and check that the image appears.
Common Mistakes
- Typing the folder name incorrectly.
- Using the wrong file extension, such as
.jpginstead of.png. - Moving the image after writing the path.
- Forgetting to include useful alt text.
Success Checklist
- Your image is stored in a sensible folder.
- Your
<img>element has asrcattribute. - The file path matches the image location exactly.
- The image displays correctly in the browser.