neal stublen nstublen@jccc edu n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML and CSS Advanced PowerPoint Presentation
Download Presentation
HTML and CSS Advanced

Loading in 2 Seconds...

play fullscreen
1 / 26

HTML and CSS Advanced - PowerPoint PPT Presentation


  • 75 Views
  • Uploaded on

Neal Stublen nstublen@jccc.edu. HTML and CSS Advanced. 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. What’s Ahead?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML and CSS Advanced' - lacey


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
course road map
Course Road Map
  • Create web page layouts using CSS
  • Manage CSS
  • Test website validity
  • Create navigation menus using CSS
  • Incorporate meta content and multimedia
what s ahead
What’s Ahead?
  • Refresh and redirect pages
  • Link media to a web page
  • Embed media in a web page
refresh to update content
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
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
Any Gotchas?
  • What should you consider when refreshing and redirecting pages?
some gotchas
Some Gotchas!
  • Browsers may allow the user to disable refreshes and redirects that are specified in meta tags
    • Redirects 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
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
Refresh Alternative
  • Use JavaScript and AJAX to update only portions of the page that may have changed
    • Faster, less obtrusive
    • Consider Gmail when you delete a message
    • (Evening class scheduled for October)
what s ahead1
What’s Ahead?
  • Refresh and redirect pages
  • Link media to a web page
  • Embed media in a web page
practice activity1
Practice Activity
  • Refresh a page, Activity 3
    • Specify a page refresh (p.124)
what s ahead2
What’s Ahead?
  • Refresh and redirect pages
  • Link media to a web page
  • Embed media in a web page
alternative to linking
Alternative to Linking
  • Embedding media in a web page allows the user to play the media without leaving the page
    • YouTube
    • Adobe Flash
object elements
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> Example

<object standby=“Loading audio…”

type=“application/x-mplayer2”

data=“media/coffee.mp3”

width=“320” height=“45”>

<paramname=“src”

value=“media/coffee.mp3” />

<param name=“autostart”

value=“true” />

</object>

mime types
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 types
Sample MIME Types

audio/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 activity2
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 activity3
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
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)
what s behind
What’s Behind?
  • Refresh and redirect pages
  • Link media to a web page
  • Embed media in a web page
oops that s bad
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
A Simple Solution
  • Archive the folder for the current version of your site
    • site_folder site_folder.v01
  • Begin making changes to a copy of that original version
compare versions
Compare Versions
  • Tools allow you to compare one folder’s content with another folder’s content
    • Microsoft 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.