Importing Media – Introduction

It is almost impossible to imagine web content without images, audio, and video. The current HTML version offers powerful tag elements to deal with these types of media. In this module you will further explore HTML tag elements and how they are used to enable accessibility to end users. You will also examine how media elements are structured to accommodate individuals who may use accessibility software and tools.

Images are the most common media included in web pages. This module will introduce you to the HTML tag <img> and its basic usage. The <img> tag is used when embedding images into a web page.

Some brief considerations about image coding formats and display formats are introduced and practical use of the <img> tag is illustrated by an instructional video. You will also apply what you have learned by completing a Coding Connection activity.

The addition of both audio and graphics to web pages provides more engagement for the end user. While used less frequently than images, audio can be easily incorporated into HTML content. The <audio> tag is a flexible and powerful HTML element that can enhance the user experience through the proper addition of audio to the web page. In this module you will learn the basics of <audio> tag usage as well as the common audio formats handled by browsers. Instructional videos on the technical aspects of the <audio> tag will help you master the inclusion of audio media into HTML.

This module will introduce the methods for using <video> tags in HTML documents to source and incorporate video content into your web pages. You will learn how to define the basic properties of the <video> tag, and how to set page dimensions appropriately. Setting page dimensions ensures that end users can fully access visual elements of video content. The most common video encoding options will be presented, and two instructional videos describing technical use of the <video> tag will allow you to master the inclusion of video media into HTML code.

This module will cover the following topics:

• importing media into HTML
• media accessibility
• importing images 
• creating images with HTML
• importing Audio
• importing video

By the end of this module you should be able to answer the following questions:

• Why import media into a web page?
• What tools and methods are available to verify and improve a website’s accessibility?
• What tags are necessary for importing media, including audio, images, and video?

---

Importing Media into HTML

Learning Objectives

• Apply graphics and audio to HTML files.
• Create images and audio for HTML files.

Media in a web page are visual elements that may add information, context, appeal, and support for communication on the page. Media consists of audio and visual communication and may include video (.mp4, .avi, .mov, .wmv). Images may be static (.jpg, .png, .svg, .bmp) or dynamic (.gif). Audio files most frequently handled by web browsers include .mp3, .ogg, .aac, .wav, and .wma.

Media can appear in many forms on a web page. To import media into a web page you need to use the correct HTML5 tag. For example, if you want to import a video you use the <video> </video> tag and then size the video.

Additional tags to insert media into a web page are:

• Audio:<audio> </audio>
• YouTube Videos: <iframe></iframe>

Read “Adding Media” (opens new tab) from S. Howe.

Once you have read the article, scroll down the page to view demo content to further your understanding of how HTML code is used to add media to web pages.

 As you read, consider the following questions:

• How does positioning impact the addition of images?
  • it changes where they show up on the page
• What is the difference between an image element and a background image, and the distinction between how each is used?
  • image element is used to go along with a text and bg image is used for the feel of the whole page

Read “Video and Audio Content” (opens new tab) from W3.org.

This article provides an understanding and background information about using audio and video on a web page.

As you read, consider the following questions:

• How does the use of audio add or take away from the user experience on a web page?
• How can the use of audio change the look and feel of a web page?
• What challenges does having audio on a web page create for users?
  • utilizing the codec since there are licensing things with mp3 and h.263

Watch “Video” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.

This video teaches you how to embed a video into your web page with the end-user in mind.

 As you watch, consider the following questions:

• If I was to insert video into a web page, what would the user requirements be and why?
  • resolution – because of their connection
• How do I know if the video is beneficial to the end-user?

---

Media Accessibility on Web Pages

Learning Objectives

• Ensure web page and website accessibility.

“Accessibility icons” © WGU 2020

While accessibility considerations are generally addressed by web browsers, it is important that web designers be aware of how content on a web page may impact an individual with an auditory or visual challenge. Web designers should consider how media elements (images, sounds, and video) may impact a wide audience in terms of accessibility.   

The Americans with Disabilities Act (ADA) was enacted in 1990 to protect the civil rights of those with a disability. The ADA is a broad application of accessibility standards to influence commercial and social practices related to persons with disabilities. Those standards are strongly inspired by the W3C Web Accessibility Initiative (WAI).  

ADA law has many sections and includes mandates for equal employment opportunities and public accommodations for people with a disability. The ADA law also includes mandates that electronic information be accessible to all. Significant compliance failures are subject to financial penalties.

Critical ADA compliance factors to consider when creating reasonable accommodations in your websites include:

• ensuring that all images have text-based descriptions so that sight-impaired visitors can access sites through screen reader technology;
• providing text-based alternatives to all non-text content (e.g., JavaScript code);
• providing forms that are easily processed by screen-reading technology.

Visit the ADA Home Page (opens new tab) and the Federal Usability Site – Accessibility Basics (opens new tab) to access additional learning resources.

In fact, from a webpage building perspective, the World Wide Web Consortium (W3C) has released a set of guidelines, the Authoring Tools Accessibility Guidelines (ATAG) (opens new tab), which are designed to both help ensure that the various authoring tools used to build web content are themselves accessible to content creators with disabilities, and to help ensure that these tools enable, support, and promote the creation of accessible web content.

Finally, the Lynx browser is a particularly useful tool for testing web site accessibility. Lynx is entirely text based and supports braille displays and screen readers, which means that it uses the alt, name and title attributes associated with images and other non-text-based content instead of displaying the elements themselves. As such, it is a good way for testers to experience a web site in the same way that a visually impaired person would.

---

Importing Images

Learning Objectives

• Apply graphics and audio to HTML files.
• Create images and audio for HTML files.

Images on a web page can contribute to a web user’s experience by adding visual appeal and enhancing their browsing experience. The <img> tag is used when embedding images into a web page.

The usual properties for the <img> tag are:

• widthand height, two properties that define the horizontal and vertical sizes of the image. If both properties are provided the image may lose the original horizontal/vertical ratio and be deformed. However, if only one of the properties is provided, the horizontal/vertical rate is preserved. Note: Excessive use of these properties affects the efficiency with which the web page loads in the browser. Also note that it is good practice to use percentages for image width and height, rather than specific sizes for each. Using percentages allows the code to “adapt” for all screen sizes without the need to rewrite any code. 
• alt, a property that defines the textual information associated with the image. This information is particularly important to comply with accessibility requirements, since most browsers use this information to offer read-aloud features for visually impaired end users.

As a web page developer, you should maintain visual awareness when adding images, and be cautious not to overwhelm the user. Too many images on a web page can also delay the web page load speed, adding additional negative impact on the user experience. Read more about various image types.

Note:

When working with image files, it is important to note that not all image file formats offer support for independently editable layers. Adobe Photoshop’s PSD files, Portable Network Graphics (PNG) files, and Tagged Image File Format (TIFF) files support the storage of image data across multiple, independent layers while GIF and JPEG files do not.

Read section “Images” (opens new tab) of Chapter 2 in Practical Web Development. 

This section explains incorporating images into HTML web pages.

As you read, consider the following questions:

• What is the purpose of the src attribute?
  • contains the filepath
• What is the purpose of the alt attribute?
  • text that is displayed with the image for visually impaired

Watch “Images” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.

This video teaches you about designing with the end-user in mind, specifically focusing on adding images.

 As you watch, consider the following questions:

• Why are images important to the end user’s web page experience?
  • obvious
• Why does the image need to be readily accessible?
  • so the page doesn’t skip around when reading
• Why do design standards need to be followed?
  • so a solid experience happens on all pages

---

Creating images using HTML

Learning Objectives

• Create images and audio for HTML files.

Besides importing images into your web page, HTML5 also allows you to create your own images with <svg> tags. Imported images are based on their pixel representation and are called rasterized images. Created images are often based on their component description, i.e., a composition of predefined shapes such as circles and polygons. Those images are called vector-based images.

The <svg> tag allows you to create images using the Scalable Vector Graphics (SVG), i.e., an image where you define points, lines, and shapes using a coordinate system. The greatest advantage of vector-based images over rasterized images is their capability to maintain a perfect resolution while being scaled up, even to exceptionally large sizes. The basic utilization of an SVG image is through the creation of area using properties width and height. Such area is indexed in a coordinate system considering the origin point (0,0) in the left upper corner of the area. Inside a <svg> tag several shapes can be drawn using this coordinate system. The more popular ones being the tags:

• <circle> tag that draws a circle;
• <rect> tag that draws a rectangle;
• <polygon> tag that draws a three- or more-sided polygon.

For example, the HTML5 snippet shows an SVG image with 200×200 pixels with a grey rectangle encompassing the whole image, a green rectangle near the upper corner, a blue circle in the middle, and a yellow diamond near the lower right corner. This snippet inside a HTML page renders as indicated in the image provided.

<svg width="200" height="200">

   <rect x="0" y="0" width="200" height="200" fill="grey" />

   <rect x="5" y="10" width="100" height="60" fill=rgb(0,153,51) />

   <circle cx="100" cy="100" r="20" fill="#0000ff" />

   <polygon points="105,160 150,135 195,160 150,185" style="fill:yellow;stroke:rgb(179,179,0);stroke-width:2" />

</svg>

“Rendered version of <svg> code” © WGU 2020

The use of the <svg> tag or imported file images can be combined with the use of the <map> tag. The <map> tag provides the definition of portions of the image that may be clicked by the end user and will forward them to another location, like the hyperlinks tag (<a>). The definition of <map> tags follows the same pattern as <svg> , and it may also contain <circle>, <rect>, and <polygon> elements.

Final note: An alternative to <svg> tags are the similar <canvas> tags. While <canvas> tags prioritize efficiency, <svg> tags prioritize end user interactivity.

Canvas element

Modern web browsers support a wide range of Web APIs (opens new tab) that allow web developers to add advanced functionality to a web page. One such API is the Canvas API (opens new tab), which can be used to draw graphics on the page using JavaScript. Drawing graphics using code enables a developer to create dynamic visual content which can react to changes in some underlying data, or in response to user interaction. Canvas can even be used to create animations (opens new tab), where the drawing code runs on a timer and changes over time.

Using the Canvas API requires a canvas element to be included on the web page, along with some JavaScript code that executes drawing commands on that canvas. A canvas element can be created from either HTML or from JavaScript, but the most common approach is to use the <canvas> HTML element. When creating a canvas using HTML, there are three attributes which are almost always used; widthand heightare used to determine the size of the canvas in pixels, while an idshould be specified so that it can be used to access the canvas element from JavaScript. The canvas element also requires that both opening and closing HTML tags are included. 

<canvas id="my-canvas" width="300" height="200"></canvas>

If the width and height attributes are not specified in the HTML, a canvas will default to an initial width of 300 pixels and height of 150 pixels. The width and height of the canvas specified in the HTML defines the aspect ratio of the image. If resized using CSS, image distortion will occur if the aspect ratio does not stay consistent (MDN WebDocs, 2020). Distortion can be prevented by ensuring that the width and height HTML attributes are always used to determine the size of the canvas.

The canvas element supports a few different rendering contexts. The most useful are the ‘2d’ context for flat two-dimensional drawing, and webgl or webgl2 for three-dimensional rendering. The canvas element provides the getContext JavaScript method, which is used to request the preferred rendering context. Drawing commands are executed on the context rather than directly on the canvas itself. For 2D rendering we use canvas.getContext('2d') which returns a CanvasRenderingContext2D (opens new tab) JavaScript object. This 2D context offers a specific set of functions which support drawing in 2D.“Canvas drawing rendering” © WGU 2020

A canvas without any drawing commands just looks like an empty white rectangle. Drawing commands in the 2D context are described using a coordinate system where [0, 0] is at the top left of the canvas. Dedicated drawing functions are available for rendering rectangles, text and bitmap graphics, but any more complex shapes must be achieved by drawing a series of lines, arcs and paths. The API allows for setting the stroke style (for outlines) and the fill style, which are both solid black by default. Drawing commands are composed line-by-line in JavaScript and they run in order, with the final combined result of all the steps applied to the canvas as a 2D graphic.

Some of the more relevant canvas methods for drawing rectangles (upper-left corner x,y size w,h) are:

• strokeRect(x,y,w,h) draws an unfilled rectangle (just the frame);
• fillRect(x,y,w,h) draws a filled rectangle (color pixels within);
• clearRect(x,y,w,h “unfills” the rectangle (clear pixels).

Some of the more relevant canvas methods for drawing paths are:

• beginPath() begins a path, or resets the current path;
• lineTo(x,y) moves the current path position to the coordinate x,y creating a line;
• moveTo(x,y) moves the current path position to the coordinate x,y without creating a line;
• arc(x,y,r,sa,ea,d) draws an arc (a segment of a circle) indicated by the center of the circle (x,y), its radius (r), and starting and ending angles (sa, ea), plus an optional direction (True for counterclockwise or False for clockwise – the default value);
• closePath() moves the current path position back to the first point creating a line to the first path coordinate;
• fill() fills the current path, i.e., it fills a polygon;
• stroke() draws the current path.

Plus the generic methods that can be used for both rectangles and paths:

• fillStyle() lets or returns the color, gradient, or pattern used to fill the current object (a path, a rectangle, etc.);
• lineWidth() sets the width of the current object (a path, a rectangle, etc.);

---

Importing Audio

Learning Objectives

• Apply graphics and audio to HTML files.
• Create images and audio for HTML files.

Audio files are files that play sound. Videos, for example, provide both visual and audio elements. A user controls the audio through the DOM. Through the DOM, a web developer has the ability to “load, play, and pause audios, as well as set duration and volume” (W3Schools, 2020).

Let’s look at .mp3 and a few other common formats:

Mp3

ogg

wav

Each <audio> tag should encompass at least one <source> tag that informs the actual audio source that will be rendered (played) within the web page. If more than one <source> tag is present, the browser will attempt to play them consecutively until one of the sources is available and correctly handled by the browser. Each <source> tag usually has the following properties:

• src, which defines the audio file to be rendered (played) in the web page.
• type, which defines the encoding format of the audio source (MP3, OGG, etc.).

Besides the <source> tag properties, the typical properties for the <audio> tag are:

• controls, which renders play/pause controls for the audio source.
• autoplay, which makes the audio start playing as soon as the web page is downloaded. This option should be used with care to avoid discomfort for the end user, who may not expect sound to be played immediately.

With audio files, it is imperative that the developer consider accessibility issues. Not all visitors will have the opportunity, or the ability to listen to audio files on the web site. In order to provide those visitors with the same opportunities, it is a good practice to include a transcript of all audio files included on the web page.

Read “HTML Audio” (opens new tab) from W3Schools.com.

This article provides an understanding and background information about the different audio file types.

As you read, consider the following questions:

• Which are the three most commonly supported audio formats for browsers?
  • mp3, ogg, and wav

Watch “Audio” (opens new tab) in the course HTML Essential Training from LinkedIn Learning.

This video teaches you about working with different audio file types and adding them to a web page.

 As you watch, consider the following questions:

• Why is audio important to the end user’s web page experience?
• Why does the audio sound need to be clear?
• Why do design standards need to be followed?

Watch two videos that are part of the Learning Web Audio and Video series: “Specify an Audio Source” (opens new tab) and “Specify Multiple Audio Sources” (opens new tab) from LinkedIn Learning to learn about HTML audio elements and how to source and add audio files for playback on your HTML content.

 As you watch, consider the following questions:

• How do source elements point to audio files?
  • by pointing to updated media via src
• What specific code elements enable proper display of audio content within a web browser?
  • type

---

Importing Video

Learning Objectives

• Apply graphics and audio to HTML files.
• Create images and audio for HTML files.

Videos on a web page can serve a variety of purposes to better engage the end user and are often the most aesthetically-pleasing tool to explain or illustrate a concept.

The <video> tag is used when embedding video into a web page. Each <video> tag should encompass at least one <source> tag that informs the actual video source that will be rendered within the web page. If more than one <source> tag is present, the browser will attempt to play from the first to the last until one of the sources is available and correctly handled by the browser. Each <source> tag usually has the following properties:

• src, which defines the video file to be rendered in the web page.
• type, which defines the encoding format of the video source (mp4, avi, etc.). 

Besides the <source> properties, the usual properties for the <video> tag are:

• controls, which renders play/pause controls for the video source.
• autoplay, which makes the video play as soon as it is loaded.
• muted, which makes the video start playing with no sound. This is usually employed to avoid discomfort for the end user, who may not be expecting sound to be played immediately. 

As a web developer, it is important to use discretion when adding videos, because too much media content may detract from the browsing experience. Overuse of video can sometimes delay the web page load speed, which also has a negative impact on the end user experience. The usual video types that can be accepted by most web browsers are:

• mp4 or mpeg4: an extension of .jpeg (motion .jpeg) intended to compress sequenced images
• avi (audio video interleave): provides different compression levels according to the individual standards used for audio and video
• mov: video compression file format following Apple standards
• wmv: video compression file format following Microsoft standards

Watch the video, “Specify Height and Width” (opens new tab) in the course Learning Web Audio and Video from LinkedIn Learning.

This video teaches you about tagging and sourcing HTML video elements, and how to select the most appropriate dimensions to properly display the visual elements of HTML video content.

 As you watch, consider the following questions:

• Why is video important to the end user’s web page experience?
• Why does the video content need to be clear?
• Why do design standards need to be followed?

---

Importing Media – Summary

Media on the web page can create a visually appealing visitor experience. While most web pages use images, web developers can also incorporate audio files, as well as video files into the web page. Developers should be cautious in the amount of media incorporated into the web page. Too much media will potentially overwhelm the visitor, and thus diminish the experience. Furthermore, when including media, whether in the form of image, audio, or video, accessibility should play a critical role. There may be situations where the visitor is unable to access the media (for whatever reason); thus it is the responsibility of the developer to create alternative methods to ensure that the meaning and impact of those non-visible media is not lost on the visitor.

During this module you learned the following:

• Including media in a web page increases the visual appeal of the page, and improves the visitor experience. 
• Web developers should always consider accessibility in the design of web pages, especially those pages that incorporate media (<video>, <audio>, and images).
• <img> tag, width, height, and altproperties is used for image embedding. 
• <svg> tag is used for creating images, especially when coupled with <canvas>.
• You should include <source> for both audio as well as video files.