Advanced CSS & HTML 5 Introduction to Web Design and Development.
HTML and CSS Advanced
description
Transcript of HTML and CSS Advanced
![Page 2: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/2.jpg)
Course Road Map Create web page layouts using CSS Manage CSS Test website validity Create navigation menus using CSS Incorporate meta content and
multimedia
![Page 3: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/3.jpg)
CHAPTER 5:INCORPORATING
META-CONTENT AND MULTIMEDIA
![Page 4: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/4.jpg)
Refresh and redirect pages Link media to a web page Embed media in a web page
What’s Ahead?
![Page 5: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/5.jpg)
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” />
![Page 6: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/6.jpg)
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” />
![Page 7: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/7.jpg)
Any Gotchas? What should you consider when
refreshing and redirecting pages?
![Page 8: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/8.jpg)
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)
![Page 9: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/9.jpg)
Practice Activity Refresh a page, Activity 1
Specify a page refresh (p.118) Redirect a page, Activity 2
Specify a page redirect (p.120)
![Page 10: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/10.jpg)
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)
![Page 11: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/11.jpg)
Refresh and redirect pages Link media to a web page Embed media in a web page
What’s Ahead?
![Page 12: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/12.jpg)
Practice Activity Refresh a page, Activity 3
Specify a page refresh (p.124)
![Page 13: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/13.jpg)
Refresh and redirect pages Link media to a web page Embed media in a web page
What’s Ahead?
![Page 14: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/14.jpg)
Alternative to Linking Embedding media in a web page allows
the user to play the media without leaving the pageYouTubeAdobe Flash
![Page 15: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/15.jpg)
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
![Page 16: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/16.jpg)
<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>
![Page 17: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/17.jpg)
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
![Page 18: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/18.jpg)
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)
![Page 19: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/19.jpg)
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
![Page 20: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/20.jpg)
Practice Activity Most importantly…YouTube
We’ll go back and modify Activity 5-4 to embed a YouTube video instead of a WMV file.
![Page 21: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/21.jpg)
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)
![Page 22: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/22.jpg)
Refresh and redirect pages Link media to a web page Embed media in a web page
What’s Behind?
![Page 23: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/23.jpg)
BONUS CONTENT:TRACKING SITE CHANGES
![Page 24: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/24.jpg)
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?
![Page 25: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/25.jpg)
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
![Page 26: HTML and CSS Advanced](https://reader035.fdocuments.net/reader035/viewer/2022062315/5681649b550346895dd6799a/html5/thumbnails/26.jpg)
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.