1 / 26

Advanced HTML & CSS Course: Web Page Layouts, Media Embedding, and Dynamic Content Management

This comprehensive course covers advanced HTML and CSS techniques, focusing on creating dynamic web page layouts and effectively managing CSS. Learn to test website validity, create navigation menus, and incorporate multimedia elements. Topics include embedding media, refreshing pages for real-time updates, and implementing redirects. Gain practical experience through hands-on activities such as embedding videos from platforms like YouTube. Stay current with the latest HTML5 additions for audio and video elements, ensuring your web projects are both functional and engaging.

lacey
Télécharger la présentation

Advanced HTML & CSS Course: Web Page Layouts, Media Embedding, and Dynamic Content Management

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Neal Stublen nstublen@jccc.edu HTML and CSS Advanced

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

  3. Chapter 5:IncorporatingMeta-Content and Multimedia

  4. What’s Ahead? • Refresh and redirect pages • Link media to a web page • Embed media in a web page

  5. 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” />

  6. 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” />

  7. Any Gotchas? • What should you consider when refreshing and redirecting pages?

  8. 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)

  9. Practice Activity • Refresh a page, Activity 1 • Specify a page refresh (p.118) • Redirect a page, Activity 2 • Specify a page redirect (p.120)

  10. 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)

  11. What’s Ahead? • Refresh and redirect pages • Link media to a web page • Embed media in a web page

  12. Practice Activity • Refresh a page, Activity 3 • Specify a page refresh (p.124)

  13. What’s Ahead? • Refresh and redirect pages • Link media to a web page • Embed media in a web page

  14. Alternative to Linking • Embedding media in a web page allows the user to play the media without leaving the page • YouTube • Adobe Flash

  15. 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

  16. <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>

  17. 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

  18. 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)

  19. 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

  20. Practice Activity • Most importantly…YouTube • We’ll go back and modify Activity 5-4 to embed a YouTube video instead of a WMV file.

  21. 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)

  22. What’s Behind? • Refresh and redirect pages • Link media to a web page • Embed media in a web page

  23. Bonus Content:Tracking Site Changes

  24. 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?

  25. 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

  26. 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.

More Related