Media formats overview in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an image to the webpage.

HTML

<img src="image.jpg" alt="A beautiful scenery" [1]>

Drag options to blanks, or click blank then click option'

Ahref="image.jpg"

Bwidth="300"

Cstyle="color:red"

Donclick="alert('Hi')"

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of width for image size

Trying to style color on an image tag

The width attribute sets the image width in pixels or other units.

2fill in blank

medium

Complete the code to embed a video with controls.

HTML

<video src="movie.mp4" [1]>Your browser does not support the video tag.</video>

Drag options to blanks, or click blank then click option'

Aautoplay

Bloop

Ccontrols

Dmuted

Attempts:

3 left

💡 Hint

Common Mistakes

Using autoplay instead of controls

Forgetting to add controls and video has no buttons

The controls attribute adds play, pause, and volume controls to the video.

3fill in blank

hard

Fix the error in the audio tag to autoplay the sound.

HTML

<audio src="sound.mp3" [1]>Your browser does not support the audio element.</audio>

Drag options to blanks, or click blank then click option'

AautoPlay

Bstart

Cplay

Dautoplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase like autoPlay

Using non-existent attributes like play or start

The correct attribute to autoplay audio is autoplay all lowercase.

4fill in blank

hard

Fill both blanks to create an audio element that loops and is muted.

HTML

<audio src="music.mp3" [1] [2]>Your browser does not support the audio element.</audio>

Drag options to blanks, or click blank then click option'

Aloop

Bcontrols

Cmuted

Dautoplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using controls instead of muted

Confusing autoplay with loop

The loop attribute makes the audio repeat, and muted silences it.

5fill in blank

hard

Fill all three blanks to create a video with controls, autoplay, and muted.

HTML

<video src="clip.mp4" [1] [2] [3]>Your browser does not support the video tag.</video>

Drag options to blanks, or click blank then click option'

Acontrols

Bautoplay

Cmuted

Dloop

Attempts:

3 left

💡 Hint

Common Mistakes

Using loop instead of muted

Missing controls so no buttons appear

The controls attribute shows playback buttons, autoplay starts the video automatically, and muted silences the sound.