Unit08 Media

Overview

In this unit you will be adding video, audio, map, and PDF as additional media to your site. We will also practice using a table appropiatly. When the table element was introduced it was used for page structure because it allowed designers to design. Now that there were other ways to structure a page, the table tag can be use for it's true purpose.

Vocabulary

iFrame

An iFrame is an inline frame used inside a webpage to load another HTML document inside it.

mp3

An MP3 file is an audio file saved in a compressed audio format developed by the Moving Picture Experts Group (MPEG) that uses "Layer 3" audio compression thus the name mp3.

ogg

An OGG file is a compressed audio file that uses free, unpatented Ogg Vorbis audio compression. It sounds better than an MP3 file of equal size, and may include song metadata, such as artist information and track data.

Tools

• Microsoft Word

Objectives

At the end of this module, you should be able to...

• Add two pages to your site with proper Wayfinding.
• Properly use the table to display tabular data.
• Add a responsive YouTube video to a page.
• Add a responsive Google Map to a page.
• Record and insert an audio file to a page.
• Implement nth-child().
• Demonstrate design principles (Proximity, Alignment, Repetition, Contrast, Wayfinding, Visual Tangent).
• Validate your page with three different tools.
• Upload your pages to a server using FTP.

Tasks

• Read Color Theory for Designers
• Read tables for layout NOT
• Read iframe by w3c schools
• Read HTML5 Audio by w3schools
• Read about ogg by wikipedia
• Use Audacity to record and save an ogg file

Download

Watch

• Canvas Videos
• Watch unit08a-Unit Overview
• Watch unit08b-Follow Along Intro
• Watch unit08c-New Pages
• Watch unit08d-Build a Table
• Watch unit08e-Youtube Video
• Watch unit08f-Audio Recording
• Watch unit08g-Create and Link a PDF
• Watch unit08h-Add a Google Map

Assignment Example

View an example of this assignment

Assignment Checklists

Follow Along Activity(5 pts)

• Follow along with videos in this unit to create you own version of the "Airborne Team Building" Website.
• Rename the completed assignment folder as "08follow-along".
• Upload this folder to your GitHub account and make sure the link works.
• Submit a link to your site in Canvas.

Unit08 Media (10 pts)

For this assignment you will be adding two additional pages to your site. In one page you will have a table and video. In the other page you will have a map with the full physical address of your company.

Add two additional pages

Add two new pages to your site and update the navigation.

• Two new pages added
• Navigation updated on all the pages in the site
• Active page is updated - think wayfinding
• Page name must match the navigation item name

Map

Create a new page with a Google map.

• Insert a map that identifies the location of your business
• Make it respond to the width of the browser
• Add your company contact information on the page

Video

You will insert a YouTube or Vimeo video into your site.

• Locate a video that relates to your website topic
• Add that video to a page on your site
• Adjust the width to 100%

Audio

HTML5 has created new open standards for audio. Please add an ogg and mp3 file on your site.

• Create an original audio recording and convert it to an ogg file
• Add that audio using the new "audio" tag
• Create a backup option using mp3

Downloadable Brochure

Please create a brochure promoting your web business and link it.

• Use Word or some other program to build a brochure
• Brochure saved as a PDF and linked to a page
• Linked with a target as _blank
• DON”T use the words "click here" in your link text

Table

Please add a table to omne of the new pages that has 5 rows and three columns.

• Create a table with a table header row
• Add at least 5 rows of data
• Use at least 3 columns
• Style every other row to stand out from the other rows
• Use the hover state to change on mouse over
• Remove the default table borders and set the width to 100 percent
• Apply font colors to the text
• Apply background and font colors to the table head
• Add padding as necessary

Valid CSS markup

Please check your CSS to see if you have any errors (warning ar OK). You should use the CSS code validator to check your work.

• Valid CSS for your CSS file

Upload to GitHub

Upload your assignment to a GitHub repository

• Create a folder called "08media" and put the two html files inside it.
• Upload this folder to your "dwdd1600" repository.

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail