**Course Title:** HTML & Web Development Fundamentals: Building Modern Websites **Section Title:** HTML Images and Media **Topic:** Embed images, audio, and video on a webpage with proper formatting and captions.(Lab topic) **Introduction:** In this lab topic, we'll apply our knowledge of HTML images, audio, and video by embedding them on a webpage with proper formatting and captions. We'll explore different scenarios, including responsive design, accessibility, and semantic structure. **Objective:** By the end of this topic, you'll be able to: * Embed images, audio, and video on a webpage using HTML tags * Understand how to use the `<figure>` and `<figcaption>` tags for image captions * Apply responsive design techniques to ensure media adapts to different screen sizes * Ensure accessibility by using alternative text for images and providing transcripts for audio and video **Embedding Images:** We've already learned about the `<img>` tag and its attributes in HTML Images and Media. Let's review the syntax and key attributes: ```html <img src="image.jpg" alt="Image description" width="500" height="300"> ``` Now, let's add captions to our images using the `<figure>` and `<figcaption>` tags: ```html <figure> <img src="image.jpg" alt="Image description" width="500" height="300"> <figcaption>This is the image caption</figcaption> </figure> ``` **Embedding Audio:** To embed audio on our webpage, we can use the `<audio>` tag: ```html <audio controls src="audio.mp3"> Your browser does not support the audio element. </audio> ``` Make sure to provide alternative content for browsers that don't support the audio element. **Embedding Video:** To embed video on our webpage, we can use the `<video>` tag: ```html <video controls width="500" height="300"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video element. </video> ``` Make sure to provide alternative content for browsers that don't support the video element. **Responsive Design:** To ensure our media adapts to different screen sizes, we can use CSS media queries or the `max-width` attribute on the `<img>` tag: ```html <img src="image.jpg" alt="Image description" width="100%" height="auto" max-width="500px"> ``` **Accessibility:** Remember to provide alternative text for images and transcripts for audio and video: ```html <figure> <img src="image.jpg" alt="Image description" width="500" height="300"> <figcaption>This is the image caption</figcaption> </figure> <audio controls src="audio.mp3"> <div> <h2>Audio Transcript</h2> <p>[Insert transcript here]</p> </div> </audio> <video controls width="500" height="300"> <source src="video.mp4" type="video/mp4"> <div> <h2>Video Transcript</h2> <p>[Insert transcript here]</p> </div> </video> ``` **Conclusion:** In this lab topic, we've applied our knowledge of HTML images, audio, and video by embedding them on a webpage with proper formatting and captions. We've also explored responsive design techniques and accessibility considerations. **Practice Exercise:** Create a new HTML page and embed an image, audio, and video using the techniques learned in this topic. Ensure responsive design and accessibility are taken into consideration. **Additional Resources:** * [MDN Web Docs - HTML Images](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) * [MDN Web Docs - HTML Audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) * [MDN Web Docs - HTML Video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) **Leave a comment/ask for help:** If you have any questions or need help with the exercise, leave a comment below.