Web Foundations/Multimedia
Jump to navigation
Jump to search
This lesson introduces multimedia (images, audio, and video).
Objectives and Skills[edit | edit source]
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 | edit source]
- Wikipedia: HTML element#Images and objects
- Wikipedia: HTML5 Audio
- Wikipedia: HTML5 video
- Wikibooks: HyperText Markup Language/Images
Multimedia[edit | edit source]
Examples[edit | edit source]
Image[edit | edit source]
<img src="url" alt="description">
<img src="url" alt="description" width="x" height="y">
Image Map[edit | edit source]
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 | edit source]
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 | edit source]
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 | edit source]
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 | edit source]
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 | edit source]
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 | edit source]
- Complete the tutorial TutorialsPoint: HTML Images
- Complete the tutorial TutorialsPoint: HTML Embed Multimedia
Key Terms[edit | edit source]
- GIF
- image map
- inline images
- interlacing
- JPEG
- PNG
- podcast
- raster graphics
- transparency
- vector graphics
See Also[edit | edit source]
References[edit | edit source]