Wikiversity

Exam 98-383: Introduction to Programming using HTML and CSS/Present Multimedia Using HTML

< Exam 98-383: Introduction to Programming using HTML and CSS

This lesson covers HTML multimedia presentation.[1]

Readings

edit
  1. Mozilla: Multimedia and embedding

Construct and analyze markup that displays images

edit

Includes img and picture elements and their attributes.

img

edit

The HTML <img> element embeds an image into the document.[2]

Examples: 

<img src="example.png" alt="Alternate text">
<img src="example.svg" alt="Alternate text" width="256" height="256">
<a href="linked_page.html"><img src="example.jpg" alt="Alternate text"></a>

picture

edit

The HTML <picture> element serves as a container for zero or more <source> elements and one <img> element to provide versions of an image for different display device scenarios.[3][4]

Example: 

<picture>
  <source srcset="wide.png" media="(min-width: 600px)">
  <source srcset="normal.png" media="(min-width: 450px)">
  <img src="narrow.png" alt="Alternate text">
</picture>

Describe the appropriate use of the img, svg, and canvas elements

edit

Includes img, svg, and canvas elements.

  • img: The HTML <img> element embeds an image into the document.[5]
  • svg: The <svg> element is used to embed an SVG fragment inside the current document.[6]
  • canvas: The HTML <canvas> element is used with either the canvas scripting API or the WebGL API to draw graphics and animations.[7]

Construct and analyze markup that plays video and audio

edit

Includes video; audio; track; source; simple iframe implementations.

video

edit

The HTML <video> element is used to embed video content in a document.[8]

Examples: 

<video src="video.webm" poster="image.jpg">
  Your browser doesn't support embedded videos,
  but you may <a href="video.webm">download</a> it instead.
</video>

<video src="video.webm" poster="image.jpg" width="640" height="360" autoplay controls>
  Your browser doesn't support embedded videos,
  but you may <a href="video.webm">download</a> it instead.
</video>

audio

edit

The HTML <audio> element is used to embed sound content in documents.[9][10]

Examples: 

<audio src="audio.mp3">
  Your browser doesn't support embedded audio.
</audio>

<audio src="audio.mp3" autoplay controls loop>
  Your browser doesn't support embedded audio.
</audio>

track

edit

The HTML <track> element is used as a child of the media elements <audio> and <video> to specify timed text tracks such as subtitles or closed-captioning.[11][12]

Example: 

<video src="video.webm" poster="image.jpg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
  Your browser doesn't support embedded videos,
  but you may <a href="video.webm">download</a> it instead.
</video>

The attribute srclang is required if kind="subtitles"

source

edit

The HTML <source> element specifies multiple media resources for a <picture>, <audio>, or <video> element.[13]

Example: 

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg"> 
  <source src="video.mov" type="video/quicktime">
  Your browser doesn't support embedded videos.
</video>

iframe

edit

The HTML <iframe> element represents a nested browsing context, effectively embedding another HTML page into the current page.[14][15][16]

Examples: 

<iframe width="420" height="315"
  src="https://www.youtube.com/embed/VideoIdGoesHere">
</iframe>

<iframe name="iframe" src="some_page.htm"></iframe>
<p><a href="another_page.htm" target="iframe">insert a different page</a></p>

See Also

edit

References

edit
  1. ↑ Microsoft: Exam 98-383 Introduction to Programming using HTML and CSS
  2. ↑ Mozilla: img
  3. ↑ Mozilla: picture
  4. ↑ W3Schools: HTML picture Tag
  5. ↑ Mozilla: img
  6. ↑ Mozilla: svg
  7. ↑ Mozilla: canvas
  8. ↑ Mozilla: video
  9. ↑ Mozilla: audio
  10. ↑ W3Schools: HTML audio loop Attribute
  11. ↑ Mozilla: track
  12. ↑ W3Schools HTML track Tag
  13. ↑ Mozilla: source
  14. ↑ Mozilla: iframe
  15. ↑ W3Schools: HTML YouTube Videos
  16. ↑ [https://www.w3schools.com/html/html_iframe.asp W3Schools: HTML iframes
Retrieved from "https://en.wikiversity.org/w/index.php?title=Exam_98-383:_Introduction_to_Programming_using_HTML_and_CSS/Present_Multimedia_Using_HTML&oldid=2141863"