Presentation is loading. Please wait.

Presentation is loading. Please wait.

Beyond The Bare Bones of HTML CSS Alt & Meta Tags Multimedia.

Similar presentations


Presentation on theme: "Beyond The Bare Bones of HTML CSS Alt & Meta Tags Multimedia."— Presentation transcript:

1 Beyond The Bare Bones of HTML CSS Alt & Meta Tags Multimedia

2 Agenda CSS CSS ALT ALT META META Intro to Multimedia Intro to Multimedia Event Handlers Event Handlers Assignment 7 and final project Assignment 7 and final project

3 CSS for Multiple Pages Remember you can use CSS Remember you can use CSS  Inline  Embedded  As an external document  This is a time saving thing and what you will do for your final project.

4 External CSS Determine what CSS stuff you want to use. Determine what CSS stuff you want to use. Create your html page with the appropriate,, tags but do not use formatting. Create your html page with the appropriate,, tags but do not use formatting. In the head of your document instead of embedded CSS, create a link to your external CSS page. In the head of your document instead of embedded CSS, create a link to your external CSS page.

5 External CSS Create a separate page with a.CSS extension with the formatting for your links, headers, paragraphs etc. Create a separate page with a.CSS extension with the formatting for your links, headers, paragraphs etc. H1 { color: green; font-family: impact } P I { color: white; background-color: black; font-family: courier } P.first { text-indent: 3 cm; color: blue; font-family: arial; background-color: pink; font-size: 20pt } Then upload your html and CSS pages Then upload your html and CSS pages

6 The ALT Tag As the name implies this tag is useful for giving an alternate (usually text based) version of something. As the name implies this tag is useful for giving an alternate (usually text based) version of something. This is specially useful for adaptive technology This is specially useful for adaptive technology  Adaptive tech allows disabled users to use the web.  Often they use something called a “screen reader” which turns the visual content of the web into auditory content.

7 The ALT Tag  Images and ALT- the browser will use what the alt tag designates instead of an image when the image is disabled  This way if the image is disabled the user is given an alternate description when the mouse passes over the image  The contents of the alt tag is a text string up to 1024 characters including spaces and other punctuation

8 The ALT Tag  Area and ALT- use this to give text alternatives to portions of an image  Such as in an image map to give a text based version of the link.

9 The META Tag Provides additional data for the head section Provides additional data for the head section  Has no end tag  Has no “content” per se OR Instead has name/value pairs Instead has name/value pairs

10 The META Tag Name attribute typically “keywords” Name attribute typically “keywords” Content attribute- this provides the value of the content and can be any string. Use quotes if there are spaces. Content attribute- this provides the value of the content and can be any string. Use quotes if there are spaces. OR

11 The META Tag The http-equiv attribute- supplies name for the name/value pair and gives instructions to the server that it will be receiving an HTML document. The http-equiv attribute- supplies name for the name/value pair and gives instructions to the server that it will be receiving an HTML document. The charset attribute – defines the set of characters- similar to defining the type of document but not as powerful or effective as http-equiv The charset attribute – defines the set of characters- similar to defining the type of document but not as powerful or effective as http-equiv

12 The META Tag A cool thing you can do with meta- make a slide show with the “refresh” field. A cool thing you can do with meta- make a slide show with the “refresh” field. Where field value defines how quick the refresh rate is. Where field value defines how quick the refresh rate is.

13 The META Tag Refresh allows you to refresh the same page at a given interval of time OR you can refresh to a different page with a given interval of time. Refresh allows you to refresh the same page at a given interval of time OR you can refresh to a different page with a given interval of time.

14 Multimedia From Webopedia: From Webopedia: The use of computers to present text, graphics, video, animation, and sound in an integrated way. Long touted as the future revolution in computing, multimedia applications were, until the mid-90s, uncommon due to the expensive hardware required. With increases in performance and decreases in price, however, multimedia is now commonplace. Nearly all PCs are capable of displaying video, though the resolution available depends on the power of the computer's video adapter and CPU. Because of the storage demands of multimedia applications, the most effective media are CD-ROMs.

15 Multimedia Is often thought of as just video. Actually Is often thought of as just video. Actually  Animation  Sound  Video (this is a huge digital video file!) Can help you add “excitement” to your site or can be something that annoys users Can help you add “excitement” to your site or can be something that annoys users

16 Multimedia Does the multimedia add something to your site? Is the element (i.e. a video or song or some other thing) the product you’re selling? Does the element maintain the user’s interest in a manner related to what your site is about? OR Are you just being “flashy”

17 Multimedia Remember the importance of bandwidth and “Net Real estate” Is there something else that spot could be more effectively used for? Does it take up space that could be more effectively used for searchable text? What technology do you want to use?

18 Streaming Media Technology (Video& Audio) Real Player   Sailor Moon song demo RP sound Sailor Moon song   Cayman Islands Video demo RP video Cayman Islands Video   Very popular. It allows many settings including speed of connection settings as well as variable bit rate settings.   Variable bit rate means that the video doesn’t care what speed your connection is, it will send out the information as fast as your connection will accept it.   You can tailor you’re videos to consider quality or speed

19 Streaming Media Technology (Video& Audio) Windows Media Player   Variable Bit Rate   Native player built into Internet Explorer 5.0 +   Speed/Quality settings

20 Streaming Media Technology (Video& Audio) QuickTime   Variable Bit Rate is actually native.   Doesn’t work quite as well on the PC side of computing (but works very well on the Mac side)   Mac native format

21 Streaming Media Technology (Video& Audio) MPEG   Very High Quality   Plug-ins available for all browsers and media players available   With proper hardware, can be played onto a TV or VCR   Native format for DVD, VCD, and SVCD technologies

22 Using Video Create/locate your video Create/locate your video Edit your video Edit your video  Adobe Premier  Final Cut Pro Compression   Pixel Size   Image Quality   Frame Rate   Compatibility

23 Compression Pixel Size   Different sizes:   160x120, 172x144, 246x243 (most web browsers)   320x240, 640x480, 720x480 (TV, HDTV,SHDTV)   Optimize to your screen real estate and keep in mind what is probably on your target audience’s desktops

24 Compression Frame Rate (frames per second)   Different rates:   15, 16, 24, (8mm, 16mm, 35mm film)   24.97, 29.97 (PAL, NTSC)   Optimize for compression   Optimize for Effect   Optimize for output device

25 Compression Image Quality   Different levels:   Low, Good, Better, Best, Highest   Optimize for compression   Optimize for content   This is almost like for images; you always want to make sure that what is in the video is recognizable, so shoot and edit for that

26 Compression Compatibility   Different Browsers:   Netscape, IE   Different Media Players:   Real Player, Windows Media, QuickTime   Optimize for target audience   Your target audience will usually determine what is used.

27 Embedding Videos IE has extensions (dynsource attribute to tag, but not available in Netscape, see book)   The actual tag for this is with the src= attribute (along w/others)   Coding   You can make it stream right away   You can add controls or not   basically, anything you want to do, you can with attributes like href, pluginspage, width, and height

28 Animation Animated Gifs Animated Gifs Animated Gifs Animated Gifs Flash Flash Flash Shockwave Shockwave

29 Other Multimedia Sonic Foundry Acid Express Sonic Foundry Acid Express  Beatnik, Mixman Studio Sonic Foundry Sound Forge Sonic Foundry Sound Forge  Cool Edit Pro Adobe Photoshop Adobe Photoshop  Corel Draw, Microsoft Draw, PhotoImpact Adobe ImageReady Adobe ImageReady  Fireworks, Sonic Foundry Viscosity


Download ppt "Beyond The Bare Bones of HTML CSS Alt & Meta Tags Multimedia."

Similar presentations


Ads by Google