html and css advanced

HTML AND CSS ADVANCED

Neal Stublennstublen@jccc.edu

Course Road Map Create web page layouts using CSS Manage CSS Test website validity Create navigation menus using CSS Incorporate meta content and

multimedia

CHAPTER 5:INCORPORATING

META-CONTENT AND MULTIMEDIA

Refresh and redirect pages Link media to a web page Embed media in a web page

What’s Ahead?

Refresh to Update Content If your site’s content may change…

Stock prices, sports scores, traffic information

You can try to reload the page every 30 seconds…

<meta http-equiv=“refresh” content=“30” />

Redirect to New Content If your site’s content has moved…

Site redesign, newer information

You can redirect to another page…

<meta http-equiv=“refresh” content=“5;url=http://site.com/page.html” />

Any Gotchas? What should you consider when

refreshing and redirecting pages?

Some Gotchas! Browsers may allow the user to disable

refreshes and redirects that are specified in meta tagsRedirects should include a message to

indicate what’s happening along with a link to the new page

You may refresh the page and interrupt the user (this could be annoying)

Practice Activity Refresh a page, Activity 1

Specify a page refresh (p.118) Redirect a page, Activity 2

Specify a page redirect (p.120)

Refresh Alternative Use JavaScript and AJAX to update only

portions of the page that may have changedFaster, less obtrusiveConsider Gmail when you delete a message(Evening class scheduled for October)

Refresh and redirect pages Link media to a web page Embed media in a web page

What’s Ahead?

Practice Activity Refresh a page, Activity 3

Specify a page refresh (p.124)

Refresh and redirect pages Link media to a web page Embed media in a web page

What’s Ahead?

Alternative to Linking Embedding media in a web page allows

the user to play the media without leaving the pageYouTubeAdobe Flash

Object Elements <object> elements can be used to

embed media files on a page Media playback occurs within the

browser The attributes of the <object> element

help the browser locate the media content

<param> elements also help control media playback

<object> Example<object standby=“Loading audio…” type=“application/x-mplayer2” data=“media/coffee.mp3” width=“320” height=“45”><param name=“src” value=“media/coffee.mp3” /><param name=“autostart” value=“true” /></object>

MIME Types The type attribute identifies the media

type for the embedded content It helps the browser locate the

appropriate plug-in for playback Not always necessary; it will depend on

the media and the browser

Sample MIME Typesaudio/x-ms-wma (Windows Media)audio/x-wav (WAV audio files)audio/mpeg (MP3 audio files)video/x-ms-wmv (Windows Media)video/quicktime (Quicktime Media)application/x-shockwave-flash (Flash)application/x-mplayer2 (Windows Media)

Practice Activity Activity 5-4 (p.131)

Embedding a WMV file Activity 5-5 (p.134)

Embedding an MP3 file Activity 5-6 (p.137)

Embedding an MOV file Activity 5-67 (p.144)

Embedding an SWF file

Practice Activity Most importantly…YouTube

We’ll go back and modify Activity 5-4 to embed a YouTube video instead of a WMV file.

HTML5 Media Additions The newest version of the HTML

specification includes <audio> and <video> elements for embedding media

These would be preferable to using <object> elements

(Evening classes scheduled for June and September)

Refresh and redirect pages Link media to a web page Embed media in a web page

What’s Behind?

BONUS CONTENT:TRACKING SITE CHANGES

Oops! That’s Bad… Your site is published online You want to make changes What if you mess up and need to start

over? What if you can’t get back to where you

started?

A Simple Solution Archive the folder for the current version

of your sitesite_folder site_folder.v01

Begin making changes to a copy of that original version

Compare Versions Tools allow you to compare one folder’s

content with another folder’s contentMicrosoft Code Compare (free)Beyond Compare (not free)Araxis Merge (even less free, but supports

OSX) I’m certain there are others; these are

just the ones I’ve used.