0
0
HTMLmarkup~30 mins

Media formats overview in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Media formats overview
šŸ“– Scenario: You are creating a simple webpage to show different types of media formats used on the web. This page will help users understand how images, audio, and video files are embedded in HTML.
šŸŽÆ Goal: Build a basic HTML page that includes an image, an audio player, and a video player with proper semantic tags and accessibility features.
šŸ“‹ What You'll Learn
Use semantic HTML5 elements like <main> and <section>.
Include an image with an alt attribute describing the image.
Add an audio player with controls and a descriptive label.
Add a video player with controls and a descriptive label.
Ensure the page has a <header> with a title and a <footer> with copyright info.
Make the page responsive and accessible.
šŸ’” Why This Matters
šŸŒ Real World
Websites often need to display images, audio, and video content clearly and accessibly for all users.
šŸ’¼ Career
Knowing how to embed media with proper HTML and accessibility is essential for front-end web developers and content creators.
Progress0 / 4 steps
1
Create the basic HTML structure
Create a basic HTML5 skeleton with lang="en" in the <html> tag. Inside the <body>, add a <header> containing an <h1> with the text Media Formats Overview. Then add a <main> element where media content will go.
HTML
Need a hint?

Start with the basic HTML5 page structure. Use <header> for the page title and <main> for the main content area.

2
Add an image with alt text
Inside the <main> element, add a <section> with a heading <h2> that says Image Example. Then add an <img> tag with the source "https://via.placeholder.com/300" and an alt attribute with the text Placeholder image showing a gray box.
HTML
Need a hint?

Use a <section> to group the image and its heading. Always add meaningful alt text for images.

3
Add an audio player with controls and label
Below the image section, add another <section> with a heading <h2> that says Audio Example. Inside it, add an <audio> element with the controls attribute. Use the source "https://www.w3schools.com/html/horse.mp3" and add a aria-label attribute with the text Sample audio of a horse sound.
HTML
Need a hint?

Use the <audio> tag with controls and an aria-label for accessibility. Include a <source> inside the audio tag.

4
Add a video player and footer
Below the audio section, add a new <section> with a heading <h2> that says Video Example. Inside it, add a <video> element with the controls attribute and an aria-label of Sample video of a running horse. Use the source "https://www.w3schools.com/html/mov_bbb.mp4" with type video/mp4. Finally, add a <footer> below <main> with the text Ā© 2024 Media Formats Tutorial.
HTML
Need a hint?

Use the <video> tag with controls and an aria-label. Add a <footer> outside the <main> for page footer content.