Current Assignment(s)

A4: Multimedia
Due 11:55PM Monday, 10.29

The Building Blocks of Pages

Page Structure and Extra Markup Identifying with ids Styling with Classes Grouping with Divs Sectioning with Spans Building a Page (Step-by-Step) TODO

Iframes

The 3-Part Iframe Element 1. The <iframe> Tags 2. Source 3. Width and Height Review: The Iframe Element Websites in the Iframe Element Maps in the Iframe Element Media in the Iframe Element TODO

The Meta Element

The Meta Element Character Set Attribute Description Attribute Author Attribute Keywords Attribute Viewport Element Review: Meta Elements TODO

Escape Characters

Solving Conflicts with Escape Characters Escape Character Names Escape Character Codes Common Escape Characters TODO

Media Management

Media on the Web Sourcing Images Sourcing Video Sourcing Audio Optimizing for the Web Media Hosting and Storage TODO

Images

Adding Images in HTML The 5-Part Image Element 1. The <img> Tag 2. Source 3. Alternative Text 4. Title 5. Width and Height Review: The Image Element Formats and Browser Support TODO

Video

Adding Video in HTML The 5-Part Video Element 1. The <video> Tags 2. Source 3. Poster 4. Width and Height 5. Other Attributes Review: The Video Element Formats and Browser Support TODO

Audio

Adding Audio in HTML The 3-Part Audio Element 1. The <audio> Tags 2. Source 3. Other Attributes Review: The Audio Element Formats and Browser Support TODO

Topic Overview

05: Managing Media

It’s time to get into the juicier HTML elements. This topic, you’ll begin exploring the basic building blocks of page design, and be introduced to some multi-part elements, including images, audio/video, and iframes.

When thinking about the sites you often visit, images are probably the first memorable element that comes to mind, but there are also other media types used in web development. As designers, we need to consider how and when to add media, what filetypes to use, their file sizes, and what code element works best for each specific situation.

This is the last Topic where we will look at HTML elements in depth. At the point you should be comfortable with:

The basics of HTML, including:
- Elements and tags
- Empty elements
- Attributes
The basic structure of an HTML Document:
- The 4 main document elements
- The purpose of the <head> and <body> elements.
Structural vs. semantic elements
Linking to other files (i.e. pages and images)
Keeping proper and organized code

This week we will be wrapping up our unit on HTML by looking at three groups: additional structural elements, metadata, and media.

By the end of this Topic, we hope you:

Have experimented with using <div>s to structure the contents of your pages.
Understand how media is placed and accessed on the internet (hosted vs. streaming).
Source and reference outside materials directly within your site pages.