Web Foundations/Multimedia

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

Internet word cloud
Internet word cloud

Objectives and Skills

edit

Objectives and skills for this lesson include:[1][2]

  • 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

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

Multimedia

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

Examples

edit

Image

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

Image Map

edit

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

<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

edit

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

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

Video

edit

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

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

Autoplay

edit

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

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

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

Loop

edit

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

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

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

Poster

edit

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

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

Activities

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

Key Terms

edit
GIF
image map
inline images
interlacing
JPEG
PNG
podcast
raster graphics
transparency
vector graphics

See Also

edit

References

edit