Video, Audio and Image Techniques

Lesson purpose

Lesson 7 shows students how to add rich media to a page without plug-ins and how to handle images well. They embed video and audio with the HTML5 <video> and <audio> elements, embed externally hosted media with <iframe>, and practice the full video workflow: record, convert, embed. They then build a client-side image map, compare transparent GIF and PNG images, and learn about interlacing and animation. The lesson ends with the practical side of images — creating, scanning, licensing, sharing, managing, and optimizing them for search engines — and the copyright responsibilities that come with each source.

Big idea for the day: HTML5 made media native. What once required Flash, QuickTime, or Silverlight is now a few lines of standard markup that works on phones, tablets, and desktops.

Learning objectives

By the end of the lesson, students should be able to:

CIW 2.2.2: Distinguish among and identify the uses and benefits of GIF, GIF89a, JPEG, PNG, TIFF, and BMP.
CIW 2.2.4: Create and link client-side image maps.
CIW 2.2.5: Perform advanced image formatting techniques (transparency, interlacing, animation).
CIW 2.2.7: Distinguish between raster and vector graphics.
CIW 2.2.8: Scan and edit hard-copy sources and images.
CIW 2.2.9: Identify steps for creating images, including resolution, format, and layers.
CIW 2.2.10: Identify benefits and drawbacks of stock photography.
CIW 2.2.11: Create a photo and portfolio management strategy, including online and offline storage, software, and services.
CIW 2.10.3: Evaluate the benefits and drawbacks of proprietary technologies such as Adobe Flash.
CIW 2.10.5: Create a basic video file using video capture and editing software.
CIW 2.10.6: Insert a video file with the HTML5 <video> element and attributes.
CIW 2.10.7: Insert an audio file with the HTML5 <audio> element and attributes.

1. Media on the modern Web

Well-placed video, audio, and images are a primary ingredient of a successful page. This lesson covers the <video> element, video format conversion, the <audio> element, image maps, image transparency, interlacing, animation, and ways to create and edit video and images.

The Video, Audio, and Image Techniques video is a good opener. Its main points:

Before HTML5, playing media required separate plug-ins or applications. HTML5’s built-in media elements are a major step, especially as more people browse on mobile devices.
<video> attributes set the window size, a poster image, the format (MIME type), and fallback text. The three widely used video formats are MP4, WebM, and Ogg; the audio formats are MP3, WAV, and Ogg.
Plug-ins consume CPU and battery power — the video cites up to 40% shorter battery life on mobile devices — and some devices cannot run them at all, which could force a separate site for those users.
Images can illustrate content or act as navigation (image maps and buttons). Sources include original artwork, scans, stock photos, and photo-sharing sites, where the photographer owns the image and permission is required.

Proprietary plug-ins (objective 2.10.3)

Instructor note from the book: entire courses once taught developers to build content for proprietary plug-ins such as Adobe Flash and Microsoft Silverlight. Weigh them this way:

Benefits (historically): rich animation and interactivity before browsers could do it natively.
Drawbacks: users had to download and update the plug-in; many mobile devices never supported it; plug-ins drained battery and CPU; content was locked to one vendor; and plug-ins were a frequent source of security problems.

Currency note: Adobe ended support for Flash Player at the end of 2020, and major browsers removed it. Silverlight support has also ended. HTML5 media, CSS3, and JavaScript replaced them — students should never build new content that depends on a plug-in.

2. The `<video>` element

HTML5’s <video> element is the standard way to embed video; plug-ins such as QuickTime are no longer needed.

<video width="50%" height="50%" controls="controls" poster="image.png">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the HTML5 video element.
</video>

Walk through each part (Table 7-1):

Part	What it does
`<video>`	Defines a video to embed in the page.
`width`, `height`	Size of the video window in pixels or percent. Without them, the video’s own size is used when it loads, which can shift the page layout considerably.
`controls`	Adds the browser’s native play, pause, seek, and volume controls.
`poster`	Image shown until the user presses play or while the video downloads. Without it, the first frame shows.
`<source>`	One media file. List several formats so each browser or device can pick one it supports.
`src`	Location and file name of the media file.
`type`	Format (MIME type) of the file, such as `video/mp4`.
Text inside `<video>`	Fallback shown only if the browser cannot play any listed source.

controls is a Boolean attribute, so controls alone works the same as controls="controls".

Check for understanding: “Why list three <source> elements instead of one?” (So every browser can find a format it supports; it uses the first one it can play.)

Video formats and codecs

A format (container) such as MP4 holds video encoded with a codec, the method used to compress it.

MP4 (MPEG-4) — the most widely used format; sites such as YouTube provide MP4 versions. It usually uses the H.264 codec, which browsers decode natively, using far less processor and battery power than a plug-in.
H.265 — a successor to H.264 that can deliver about double the compression at the same quality and supports resolutions up to 8K (8192×4320). Support is limited, so always offer a conventional version too.
WebM — an open format that often uses Google’s VP8 codec (VP9 in newer files).
Ogg — uses the Theora codec, a free format that can be distributed without licensing fees.

Best practice from the book: provide all three formats in <source> elements. If that is not possible, use MP4 as the default.

Currency note: Table 7-2’s browser chart is dated (it lists Internet Explorer 11 and says Edge lacks MP4). Today MP4/H.264 plays in every current browser, which is why it is the safe default; WebM is also widely supported, while Ogg is the least supported. Point students to a current compatibility reference such as caniuse.com rather than memorizing a table.

3. The `<iframe>` element

Sometimes the video lives on another site — for example, a company’s YouTube channel. Instead of copying and re-hosting the file, embed it with an inline frame:

<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
  Your browser does not support the HTML5 iframe element.
</iframe>

width and height set the frame’s size in pixels.
src is the address of the document to embed.
Fallback text between the tags is a best practice, although every major browser supports <iframe>.

Tech note: the embed link is often not the page’s URL. YouTube’s embed address comes from the video’s Share → Embed option and points at the video itself. Always test that the frame displays correctly.

Modern practice: add a title attribute (for example, title="uCorp product overview video") so screen-reader users know what the frame contains.

4. The `<audio>` element

<audio> works like <video> and replaced plug-ins such as Windows Media Center, iTunes, and QuickTime for playing sound.

<audio controls="controls">
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.wav" type="audio/wav">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the HTML5 audio element.
</audio>

controls adds play, pause, and volume controls.
Multiple <source> elements cover the three HTML5 audio formats: MP3, WAV, and Ogg. Note the MIME type for MP3 is audio/mpeg.
Text inside the element is the fallback.

Per the book’s chart, MP3 and WAV play in all major browsers, while Ogg is not supported by Safari.

Two attributes shared by <audio> and <video> (Table 7-4):

Attribute	Effect
`loop`	Plays the file over and over without stopping.
`autoplay`	Starts playing as soon as the page loads.

Caution for students: current browsers generally block autoplay with sound until the user interacts with the page (muted autoplay is usually allowed). Unexpected sound is also an accessibility and usability problem, so let users start media themselves.

Accessibility connection: the audio lab adds a voice-over so any visitor can hear the page read aloud — not only screen-reader users. For video, captions (the <track> element) serve deaf and hard-of-hearing users; that is a useful preview.

5. Graphic types: vector vs. raster

Vector graphics use mathematical coordinates with lines, curves, and shapes. Files are generally small and can be scaled up or down without losing quality. Tools include Adobe Illustrator (and the older Adobe FreeHand). The book lists .cgm, .odg, .eps, and .xml formats; on the Web today, SVG is the standard vector format. Vectors can be converted to bitmaps.
Bitmap (raster) graphics build an image from many small dots (pixels), each mapped to bits in memory. JPEG, GIF, and PNG are raster formats, and digital photos are the most common example. More detail means bigger files (a detailed bitmap can reach 20 MB); removing pixels or compressing shrinks the file but lowers quality. Tools include Paint Shop Pro and GIMP. The book says bitmaps cannot be converted to vectors; tracing tools can approximate it, but the result is a redrawing rather than a true conversion.

Quick check: “A logo must look sharp on a phone and a billboard. Vector or raster?” (Vector.)

Format review (objective 2.2.2)

Students met the Web image formats earlier; this lesson applies them. Use this recap when discussing transparency, interlacing, and animation:

Format	Best for	Key traits
GIF (87a / 89a)	Simple graphics, icons, simple animation	256 colors; GIF89a adds transparency and animation; both support interlacing
JPEG	Photographs	Millions of colors; lossy compression; standard JPEG has no transparency
PNG	Graphics and images needing quality or transparency	Lossless; supports transparency and interlacing
TIFF	Print and archival images	High quality, large files; not used for Web display
BMP	Windows bitmap images	Usually uncompressed and large; not suited to the Web

6. Image maps

An image map is an image with clickable regions called hot spots; each hot spot is a hyperlink. You define each hot spot with coordinates (its position on the image) and a URL. When users point at a hot spot, the cursor changes to the pointing hand, though the hot spot itself is invisible.

Client-side image maps keep all map code in the HTML page and are the common choice.
Server-side image maps need a server-side script and are rarely used.
Any browser-supported image format can be mapped; PNG, GIF, and JPG are typical.
The hardest part is finding the coordinates. Image editors show the cursor’s position as you move over an image; or, knowing the image’s pixel dimensions, you can calculate them. WYSIWYG tools (the book names Dreamweaver and Expression Web) can draw hot spots for you.

Instructor note: do not spend time on detailed coordinate math. Show the three main shapes — rectangle, circle, polygon.

The Creating a Basic Image Map video walks through the syntax, the three shapes, and the button-bar example; use it before the syntax discussion.

Syntax

<map name="mapname">
  <area shape="shape" coords="coordinates" href="url" alt="description">
  <area shape="shape" coords="coordinates" href="url" alt="description">
</map>
<img src="imagemap.gif" alt="Site navigation" usemap="#mapname">

Part	What it does
`<img>`	Places the image; `src` names the file.
`usemap`	Connects the image to a map. The value is `#` plus the map’s `name`.
`#` in `usemap`	Means the map is in the same HTML file.
`<map>`	Container (needs `</map>`) holding the `<area>` tags. It may come before or after the `<img>`.
`name`	The map’s reference name.
`<area>`	Stand-alone tag defining one hot spot; use as many as needed.
`shape`	`rect`, `circle`, `poly`, or `default` (the whole image).
`coords`	Numbers that depend on the shape (below).
`href`	The page that loads when the hot spot is clicked.
`alt`	Required whenever `href` is used; describes the link for screen readers and text-only browsers.

Coordinates by shape

All coordinates are pixels measured from the image’s top-left corner, and they depend on the image’s size: resize the image and the coordinates must change.

Rectangle — coords="x1,y1,x2,y2": upper-left corner, then lower-right corner.
Circle — coords="x,y,radius": the center point, then the radius (half-width).
Polygon — coords="x1,y1,x2,y2,...,xn,yn": each corner in order around the shape, up to 100 pairs. Swapping pairs changes the shape.

Worked example: in the 130×97-pixel sample image, the hand section is a rectangle from (1,52) to (33,96):

<area shape="rect" coords="1,52,33,96" href="hand.htm" alt="hand">

Button-bar example: a 312×75 image with four 78-pixel-wide buttons:

<img src="buttons.gif" alt="Home, Search, Help, Order" usemap="#ButtonMap">

<map name="ButtonMap">
  <area shape="rect" coords="0,0,78,75" href="home.htm" alt="home">
  <area shape="rect" coords="78,0,156,75" href="search.htm" alt="search">
  <area shape="rect" coords="156,0,234,75" href="help.htm" alt="help">
  <area shape="rect" coords="234,0,312,75" href="order.htm" alt="order">
</map>

Have students predict the coordinates for the third button before revealing them: each button starts where the previous one ends.

Instructor tip from the book: open Microsoft Paint (or any editor), move the cursor over an image, and read the coordinates in the status bar.

7. Image transparency

A transparent image lets the page background show through part of the image, so the image seems to float on the page. Most often the image’s blank background is made transparent, but any part can be.

Formats that support transparency: GIF (GIF89a), PNG, JPEG 2000, BMP, and TIFF. Standard JPEG does not. (WebP, a newer Web format, also supports it.)
Tools: Adobe Photoshop, GIMP, and Corel Paint Shop Pro can create transparency.
Figures 7-13 and 7-14 show the same PNG with and without a transparent background: the white box disappears and the page background shows through, even if the page background later changes.

Discussion: PNG transparency usually looks cleaner than GIF on curved edges because PNG supports partial (alpha) transparency, while GIF pixels are either fully transparent or fully opaque.

8. Image interlacing

Interlacing (also called interleaving) lets a user who has received only part of an image see a rough version of the whole thing, which then fills in to full resolution.

Alternate lines are drawn on each pass, so a blocky preview appears after only about one-eighth of the data arrives; large text or buttons are often recognizable and clickable early.
A non-interlaced image draws from the top down; the top half may appear only after half the file has arrived, and the bottom later.
Formats that support interlacing: PNG, GIF (87a and 89a), JPEG, JPEG 2000, and JPEG XR. Choose it when saving in an image editor.
Instructor note: interlacing can increase file size, so weigh it against download time.

Interlacing mattered most on slow connections; with fast broadband it is less critical, but it is still an exam topic and still useful on poor mobile connections.

9. Animation

An animated image combines several images in a sequence shown quickly to simulate motion. Some formats support animation; scripts and languages can also create it.

Animated GIF (GIF89a) — the widely used Web-ready animated format. MNG and APNG (both based on PNG) also support animation.
Tools such as Alchemy Mindworks GIF Construction Set combine frames into one file and control the interval between frames.

WebM

WebM is a free, open-source alternative to MP4, with the .webm extension, developed with Google’s sponsorship and associated with the Alliance for Open Media.

It uses separate codecs: VP9 for video and Opus for audio, which compete with and sometimes outperform proprietary codecs.
YouTube encodes its videos to WebM for efficiency and quality.
Most modern browsers play WebM natively. Windows Media Player needs add-on components from the WebM Project to play it.

10. Creating and managing images

Users expect visually appealing sites, images can serve as navigation, and a company’s logo and trademarks are central to branding. Ways to obtain and manage images:

Create original images with image-creation software.
Scan hard-copy images.
Use stock photographs.
Obtain photos from photo-sharing sites.
Organize, edit, and share them with photo-management software.

Creating and scanning images

Image-creation software (Adobe Photoshop, Adobe Illustrator, GIMP, Inkscape) can create graphics, edit pictures, modify photos, create animations, and draw or paint.

Layers — each component of an image can sit on its own layer and be edited independently; an image can have as many layers as needed. Photoshop’s proprietary PSD format preserves layers. Export a flattened copy (JPEG, PNG, GIF) for the Web.
Scanning — a scanner creates a digital image (not a paper copy) from photos, documents, books, magazines, maps, or shallow 3-D objects such as a coin, which you can then edit.

Image attributes that affect quality and file size:

Pixel — short for “picture element,” the smallest unit a monitor displays. Pixels in a grid build every screen image.
Color depth — the bits of color information per pixel. 4 bits give 16 shades; 8 bits give 256 colors (the book’s wording says “256 bits,” which is a slip). More bits mean more realistic color and larger files.
Resolution — screen resolution is the number of pixels across and down a monitor; higher settings show more pixels per inch (ppi). Print detail is measured in dots per inch (dpi). The book’s guideline is to scan or import Web images at 72 dpi so they display at about their original size.

Instructor note: make sure students separate resolution (clarity and pixel count) from color depth (how many colors each pixel can show).

Key point for Web work: pixel dimensions matter more than dpi or ppi. A 128×128-pixel image fills one-eighth of the width and one-sixth of the height of a 1024×768 screen, but less space at 1280×960 — the image did not change; the screen shows more pixels per inch. That is why Web images are sized in pixels, not inches, and resized to the exact dimensions the page needs.

Stock photography

Stock photography is a collection of images whose usage rights you can purchase for print or Web use. Photographers file images with an agency that negotiates licensing fees for them. Many agencies also sell video and illustrations, and embedded metadata makes images searchable by keyword.

Two license types:

Royalty-free — pay once and use the image multiple times without per-use royalties. It is not free and not public domain; you cannot resell or transfer it, and there is usually a limit on reproductions (a print run). Price usually depends on file size.
Rights-managed — you “rent” the image for a negotiated, specific use, sometimes with exclusivity. Usually more expensive but allows much larger print runs; price depends on the project’s scope.

Advantages: saves time and money compared with a photo shoot, fast online searching and licensing, immediate download, and you see exactly what you get. Disadvantages: licensing costs and less creative control — you can only choose what exists.

Examples: Getty Images and Shutterstock, many with subscription plans. Microstock providers such as iStockphoto sell online, accept amateur and professional work, and charge very low, credit-based prices; critics say this devalues stock photography and pays photographers below-industry commissions. (Prices in the book are dated; the concepts are what matter.)

Free image sites exist, but read the restrictions: you may have to keep the site’s name on the photo, you may not resell it, and the photographer keeps the copyright.

Photo-sharing sites let people upload, organize, view, share, and download photos. Photos there are copyrighted by the photographer — you must get permission to use them.

The best sites offer private and public albums, password protection, protection against unauthorized downloading, online editing tools, print and gift sales, and keyword or date searching; many accept phone photos and video. When choosing a service, compare ease of use, album and editing tools, fees, storage and upload limits, ads and spam, print sales, and password protection. Examples in the book include Flickr, SmugMug, Snapfish, and Shutterfly.

Photo management and a portfolio strategy

Photo-management software (for example, Adobe Lightroom, Photoshop Elements, Apple Photos, ACDSee, Google Photos) is designed to organize and edit a collection. It can scan a drive to build one library, import from cameras and scanners, sort photos into albums, tag and search, build slide shows, and burn discs.

For objective 2.2.11, have students outline a personal strategy that combines offline storage (local drive plus an external backup), online storage or a sharing service, management software for tagging and organizing, and a clear file-naming habit.

SEO and images

Give image files descriptive names — scubapro_mk-17_regulator.gif, not product.gif — without making them absurdly long.
Use a meaningful alt attribute on every <img>; it improves accessibility and helps search engines score the page.
Learn what the search engines you care about actually look for.

Classroom application

Lab 7-1: Creating a video

Scenario: make a page more accessible to visual and auditory learners by recording yourself describing it.

Create a Lab_7-1 folder on the Desktop.
Download and install OBS (a free, open-source, cross-platform recording and streaming program) and open it.
Let OBS detect the camera and microphone, or add them: + → Audio Input Capture (choose the microphone) and + → Video Capture Device (choose the webcam).
In File → Settings → Output, set the recording format to mov.
Click Start Recording, read the uCorp paragraph provided in the book, then Stop Recording.
Find the file in the Videos folder, play it to confirm, and save it to uCorp\aboutus as ucorp.mov.

Instructor note: set a time limit. Students may explore effects, but the video does not need to be perfect; it is reused in the next labs.

Lab 7-2: Converting a video to an HTML5 format

Copy Lab_7-2 from Lesson07 to the Desktop; it contains the HandBrake installer (or download HandBrake; other free converters exist).
Install and open HandBrake, then delete the installer files.
Choose ucorp.mov as the source, set Format to MP4, set the destination to the Lab_7-2 folder, and click Start Encode.
Play ucorp.mp4 to confirm it works. MP4 plays in HTML5 browsers without a plug-in.

Lab 7-3: Adding video to a page

Copy the Lab_7-3 contents to uCorp and open aboutus.html.
Copy ucorp.mp4 into uCorp\aboutus.
Right after the Dedicated to Quality <h2>, add a <video> 210 pixels tall with controls; the width follows the video’s 4:3 ratio.

<video height="210" class="center" controls="controls">
  <source src="aboutus/ucorp.mp4" type="video/mp4">
  Your browser does not support the HTML5 video element.
</video>

video.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Validate both files and view the page in Chrome.
Discuss: an older browser that cannot play MP4 shows an error. The fix is to encode WebM and Ogg versions and list all three with <source>.
If time permits: capture a still frame (the book uses the Windows Movies & TV app’s Save photo from video), save it as aboutus/poster.jpg, and add poster="aboutus/poster.jpg".

Why display: block is needed: <video> is an inline element, so auto side margins only center it after it is made a block.

Lab 7-4: Adding audio to a page

Copy voiceover.mp3 (and, if needed, the Lab 7-3 page) into uCorp.
At the bottom of the <article>, add an instruction paragraph and a centered <audio> player:

<p>For audio of this Webpage, use the audio controls below.</p>
<audio controls="controls" class="center">
  <source src="aboutus/voiceover.mp3" type="audio/mpeg">
  Your browser does not support the HTML5 audio element.
</audio>

audio.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Validate, view in Chrome, and if the controls overlap text, increase the height of the <nav> and <article> sections in aboutus.css.

Instructor note: students may try other placements, but the default controls are not flexible; small or oddly shaped areas need custom controls.

Lab 7-5: Defining a client-side image map

Copy the Lab_7-5 contents (the Contact Us page from Optional Lab 6-1) into uCorp and open contactus.html.
Below the  comment, add:

<p><strong>Click on the image below to contact us on social media</strong></p>

Insert contactus/social_media_image_map.jpg (200×200 pixels) with width, height, alt, class="center", and usemap="#social_media". Knowing the exact size is essential for the coordinates.
In contactus.css, remove the image border with img { border: 0px; } and center the image with a class.
Add <map name="social_media"> with four <area shape="rect"> hot spots, each with an alt:

Coordinates	Links to
`0,0,100,100`	uCorp Facebook page
`100,0,200,100`	uCorp X (Twitter) page
`0,100,100,200`	uCorp LinkedIn page
`100,100,200,200`	uCorp Instagram page

Test every hot spot in two browsers, then validate. A finished copy is in the lab’s Finished folder.

Class discussion from the lab: How do image maps affect users with disabilities and text-only browsers? How valuable are they as navigation, and can they improve it? (Without alt text they are unusable for screen-reader users; they also do not resize with responsive layouts because coordinates are fixed pixels. Text links should back them up.)

Lab 7-6: Transparent GIF and PNG images

Copy the Lab_7-6 contents into uCorp; the transparent folder holds nontransucorp.jpg, transucorp.gif, and transucorp.png.
Open manufacturing.html in the browser and note the white box around the product image on the black page.
Change the <img> to transparent/transucorp.gif, save, and refresh — the background disappears.
Change it to transparent/transucorp.png and compare. Which looks better, and why? (Usually the PNG, because of smoother edges.)

In-book exercises and activity

Exercise 7-1: Browser support for HTML5 video and audio formats — sorts MP4, WebM, MP3, WAV, and Ogg into audio-only, video-only, or both.
Exercise 7-2: Defining a client-side image map — matches rectangle, circle, and polygon to their coords patterns.
Activity 7-1: Reviewing video, audio and image map elements and attributes — a six-part write-the-code activity, starting with the minimum HTML to embed build.mp4 with controls. Use it after the image-map section (the book suggests before Lab 7-5 for extra practice).
Exercise 7-3: Reviewing interlaced and non-interlaced images — checks the difference in how each renders.
Exercise 7-4: Creating and managing images — reviews creation, scanning, stock photography, sharing, and management.

Case study: A Website’s Image

Vivi manages images for a world-famous Los Angeles museum’s site. Her rules: images must be the best possible quality for fine art, easy to download even over dial-up, and compatible with the oldest browsers. She converts everything to JPEG and GIF and watches visitor feedback for accessibility problems.

Discussion prompts and target answers:

Why JPEG and GIF but not PNG? For the smallest downloads. PNG is lossless, so high-resolution PNGs can be much larger than JPEGs over a slow connection.
Should she use animated GIFs? In moderation. Animation helps show preservation processes, but too much hurts download time and storage; she could host video on a media service and embed it.
Accessibility challenges? An image-heavy site needs thorough alt descriptions so screen readers can convey the art.
Other effective uses? A series of still images for timelines, and thumbnails that link to full-size images so pages load quickly.

Update for today: WebP and AVIF now offer smaller files than JPEG or PNG in current browsers, and the <picture> element can serve a modern format with a JPEG fallback — a useful extension of Vivi’s reasoning.

Application project

Research each technique from the lesson. Experiment with Google Image and Video search: how does Google decide which files match your keywords, and are all the results relevant? Remember that images on the Web are copyrighted by their owners; copying one to your own site can be infringement. Find sites that offer images you are allowed to use free, and note their conditions.

Common misconceptions

“Video on the Web needs a plug-in.” HTML5 <video> and <audio> play natively; Flash is gone.
“One <source> is enough.” Offering multiple formats makes playback reliable; MP4 is the safe default.
“autoplay will start my music.” Browsers usually block autoplay with sound, and it frustrates users.
“Fallback text in <video> shows while the video loads.” It appears only when the browser cannot play the media; poster controls what shows before playback.
“Image-map coordinates are measured from the center.” They start at the top-left corner, in pixels.
“The polygon points can be in any order.” They must follow the shape’s outline in sequence.
“Resizing an image map is harmless.” Coordinates are tied to pixel size; resize the image and they break.
“JPEG supports transparency.” Standard JPEG does not; use PNG or GIF (JPEG 2000 does support it).
“Royalty-free means free.” It means no per-use royalty after you buy the license.
“Photos on sharing sites are free to use.” The photographer owns them; get permission.
“Resolution and color depth are the same thing.” Resolution is about pixel count and clarity; color depth is colors per pixel.

Key terms

Codec — the method used to compress and decompress audio or video (for example, H.264, VP9, Opus).
Image map — an image with clickable hot spots that link to other pages or sections.
Hot spot — one clickable region of an image map, defined by shape and coords.
Image transparency — an image feature that lets the page background show through.
Interlacing — displaying a rough full image first and filling in detail as data arrives.
Animation — several images shown in rapid sequence to simulate motion.
Vector graphic — an image built from mathematical shapes that scales without losing quality.
Raster (bitmap) graphic — an image built from pixels.
Stock photography — images whose usage rights are licensed for print or Web use.
Royalty-free / rights-managed — the two stock license types: one-time fee for repeated use versus a negotiated fee for a specific use.

Lesson summary

HTML5 <video> and <audio> embed media without plug-ins. Use controls, list several <source> formats with correct type values, and include fallback text; poster, loop, and autoplay add behavior.
MP4 (H.264) is the most widely supported video format; WebM and Ogg are open alternatives. MP3, WAV, and Ogg are the audio formats.
Proprietary plug-ins such as Flash drained batteries, failed on mobile devices, and are now retired.
Record, convert, and embed: capture video (OBS), convert it (HandBrake), then place it with <video>. Use <iframe> to embed media hosted elsewhere.
Vector graphics scale cleanly; raster graphics are pixels whose quality and size depend on resolution and color depth.
Client-side image maps use usemap, <map name>, and <area> with rect, circle, or poly coordinates measured from the top-left, each with alt text.
Transparency (GIF89a, PNG), interlacing, and animation (GIF89a, APNG, WebM video) are the advanced image techniques.
Obtain images by creating, scanning, licensing stock photos, or getting permission from photographers; manage them with software and a backed-up storage plan; name files descriptively and always write alt text.

Next lesson: Extending HTML — server-side and client-side languages, JavaScript, the DOM, and HTML5 APIs.