Web Foundations/Multimedia

This lesson introduces multimedia (images, audio, and video).

Internet word cloud

Objectives and Skills

Objectives and skills for this lesson include:

• Add images and graphical formatting to HTML files, and create and edit images and audio.
• Consider copyright and ethical issues when creating Web pages.

Readings

1. Wikipedia: HTML element#Images and objects
2. Wikipedia: HTML5 Audio
3. Wikipedia: HTML5 video
4. Wikibooks: HyperText Markup Language/Images

Multimedia

1. YouTube: HTML5 Tutorial for Beginners
2. YouTube: HTML5 Tutorial

Examples

Image

<img src="url" alt="description">
<img src="url" alt="description" width="x" height="y">

Image Map

A list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations.

<img src="url" alt="description" usemap="#map">

<map name="map">
<area shape="rect" coords="0,0,100,100" href="url2" alt="target 1">
<area shape="circle" coords="50,150,25" href="url3" alt="target 2">
</map>

Audio

Incorporates audio input, playback, and synthesis, as well as speech to text, in the browser.

<audio src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" controls>
Your browser does not support HTML5 Audio.
</audio>

Video

Intended by its creators to become the new standard way to show video on the web.

<video src="http://media.w3.org/2010/05/bunny/movie.ogv" controls >
Your browser does not support HTML5 video.
</video>

Autoplay

Instructs the User-Agent to automatically begin playback of the audio stream as soon as it can do so without stopping.

<audio controls autoplay>
...
Your browser does not support HTML5 Audio.
</audio>

<video controls autoplay>
...
Your browser does not support HTML5 video.
</video>

Loop

Instructs the User-Agent to seek back to the start of the audio stream upon reaching the end.

<audio controls loop>
...
Your browser does not support HTML5 Audio.
</audio>

<video controls loop>
...
Your browser does not support HTML5 video.
</video>

Poster

Specifies an image to show in the video's place before playback is started.

<video controls poster="image.png">
...
Your browser does not support HTML5 video.
</video>

Activities

1. Complete the tutorial TutorialsPoint: HTML Images
2. Complete the tutorial TutorialsPoint: HTML Embed Multimedia

Key Terms

GIF

image map

inline images

interlacing

JPEG

PNG

podcast

raster graphics

transparency

vector graphics

See Also

• W3Schools: HTML Images
• W3Schools: HTML5 Audio
• W3Schools: HTML5 Video

References

← Forms

Web Foundations

JavaScript →