Quest 1 • Lesson 3
🖼️ Images & Multimedia
Images, videos, and audio make web pages engaging. The < img > tag is the simplest way to add an image.
"A picture is worth a thousand words – but the alt attribute tells screen readers what the picture shows."
image.html
<img src="photo.jpg" alt="A description of the photo" />
🧠 Understanding the Image Tag
<img>– self‑closing tag that embeds an image.src– the source (URL or file path) of the image.alt– alternative text (shown if image fails to load, read by screen readers). Always include alt for accessibility.width/height– optional attributes to set image dimensions.
🌐 Image Sources: Local vs External
Local file – image stored in your project folder.
<img src="images/logo.png" alt="Logo">
External URL – image from another website.
<img src="https://placehold.co/300" alt="Placeholder">
🎥 Video & Audio (Bonus)
Video
<video controls width="400">
<source src="movie.mp4" type="video/mp4">
</video>
<source src="movie.mp4" type="video/mp4">
</video>
Audio
<audio controls>
<source src="song.mp3" type="audio/mpeg">
</audio>
<source src="song.mp3" type="audio/mpeg">
</audio>
✨ Challenge: Add an Image to Your Page
Use an online placeholder image (e.g., https://placehold.co/300;) and add an appropriate alt attribute. Then try adding a local image (create a simple "myphoto.jpg" in the same folder).
<img src="https://placehold.co/300" alt="Placeholder image" width="300">
<img src="myphoto.jpg" alt="My own photo" width="300">🔍 Live Preview (Try It!)
Below is a real placeholder image rendered from the code above:
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee➡️ Ready for more?
Next lesson: Lists & Tables – organise data effectively.
Continue to Lesson 1.4 →(Coming soon – check back or buy Pro Pack for instant access)