Web Foundations/Multimedia

< Web Foundations
Internet word cloud
Internet word cloud

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

Objectives and Skills

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

  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.[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

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

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

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

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

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

  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

References

This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.