Jump to content

Web Foundations/Multimedia

Add links
From Wikiversity
Web Foundations
  1. Introduction
  2. Editors and Hosting
  3. HTML Documents
  4. Block Elements
  5. Inline Elements
  6. CSS Formatting
  7. CSS Layout
  8. Hyperlinks
  9. Lists
  10. Tables
  11. Forms
  12. Multimedia
  13. JavaScript
  14. Servers and Data
  15. Additional Topics
Internet word cloud
Internet word cloud

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]
  1. Wikipedia: HTML element#Images and objects
  2. Wikipedia: HTML5 Audio
  3. Wikipedia: HTML5 video
  4. Wikibooks: HyperText Markup Language/Images

Multimedia

[edit | edit source]
  1. YouTube: HTML5 Tutorial for Beginners
  2. YouTube: HTML5 Tutorial

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]
  1. Complete the tutorial TutorialsPoint: HTML Images
  2. 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]
  1. ↑ CIW: Site Development Associate Exam Objectives
  2. ↑ CIW: Site Development Associate Course Description
  3. ↑ Wikipedia: Image map
  4. ↑ Wikipedia: HTML5 Audio
  5. ↑ Wikipedia: HTML5 video
  6. ↑ Wikipedia: HTML5 Audio
  7. ↑ Wikipedia: HTML5 Audio
  8. ↑ Wikipedia: HTML5 video


Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Foundations/Multimedia&oldid=2334579"