Web Foundations/Multimedia
This lesson introduces multimedia (images, audio, and video).
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
Multimedia edit
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
- Complete the tutorial TutorialsPoint: HTML Images
- 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