Beyond The Bare Bones of HTML
CSSCSS
Alt & Meta TagsAlt & Meta Tags
MultimediaMultimedia
Agenda
CSSCSS ALTALT METAMETA Intro to MultimediaIntro to Multimedia Event HandlersEvent Handlers Assignment 7 and final projectAssignment 7 and final project
CSS for Multiple Pages
Remember you can use CSSRemember you can use CSS InlineInline EmbeddedEmbedded As an external documentAs an external document
This is a time saving thing and what This is a time saving thing and what you will do for your final project.you will do for your final project.
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 Create your html page with the appropriate
<p>, <H1>, <I> tags but do not use <p>, <H1>, <I> tags but do not use formatting.formatting.
In the head of your document instead of In the head of your document instead of embedded CSS, create a link to your external embedded CSS, create a link to your external CSS page.CSS page.
<LINK REL=stylesheet <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">HREF="mystyles.css" TYPE="text/css">
External CSS Create a separate page with a .CSS Create a separate page with a .CSS
extension with the formatting for your links, extension with the formatting for your links, headers, paragraphs etc.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 pagesThen upload your html and CSS pages
The ALT Tag
As the name implies this tag is useful for As the name implies this tag is useful for giving an alternate (usually text based) giving an alternate (usually text based) version of something.version of something.
This is specially useful for adaptive This is specially useful for adaptive technologytechnology Adaptive tech allows disabled users to use Adaptive tech allows disabled users to use
the web. the web. Often they use something called a “screen Often they use something called a “screen
reader” which turns the visual content of reader” which turns the visual content of the web into auditory content.the web into auditory content.
The ALT Tag
Images and ALT- the browser will use what Images and ALT- the browser will use what the alt tag designates instead of an image the alt tag designates instead of an image when the image is disabledwhen the image is disabledThis way if the image is disabled the This way if the image is disabled the
user is given an alternate description user is given an alternate description when the mouse passes over the imagewhen the mouse passes over the image
The contents of the alt tag is a text string The contents of the alt tag is a text string up to 1024 characters including spaces up to 1024 characters including spaces and other punctuationand other punctuation
The ALT Tag
Area and ALT- use this to give text Area and ALT- use this to give text alternatives to portions of an imagealternatives to portions of an imageSuch as in an image map to give a Such as in an image map to give a
text based version of the link. text based version of the link.
The META Tag Provides additional data for the head sectionProvides additional data for the head section
Has no end tagHas no end tag Has no “content” per seHas no “content” per se
<meta name=“keywords” content=“Cars, car <meta name=“keywords” content=“Cars, car models, buying information, car ratings”>models, buying information, car ratings”>
OROR
<meta name=“authors” content=“Bjork & <meta name=“authors” content=“Bjork & Tricky”>Tricky”>
Instead has name/value pairsInstead has name/value pairs
The META Tag
Name attribute typically “keywords”Name attribute typically “keywords” Content attribute- this provides the value of Content attribute- this provides the value of
the content and can be any string. Use the content and can be any string. Use quotes if there are spaces.quotes if there are spaces.<meta name=“keywords” content=“Cars, car <meta name=“keywords” content=“Cars, car
models, buying information, car ratings”>models, buying information, car ratings”>OROR<meta name=“authors” content=“Bjork & <meta name=“authors” content=“Bjork &
Tricky”>Tricky”>
The META Tag
The http-equiv attribute- supplies name The http-equiv attribute- supplies name for the name/value pair and gives for the name/value pair and gives instructions to the server that it will be instructions to the server that it will be receiving an HTML document.receiving an HTML document.
The charset attribute – defines the set The charset attribute – defines the set of characters- similar to defining the of characters- similar to defining the type of document but not as powerful or type of document but not as powerful or effective as http-equiveffective as http-equiv
The META Tag A cool thing you can do with meta- A cool thing you can do with meta-
make a slide show with the “refresh” make a slide show with the “refresh” field. field.
<meta http-equiv.=“Refresh” content=field <meta http-equiv.=“Refresh” content=field value”>value”>
Where field value defines how quick the Where field value defines how quick the refresh rate is.refresh rate is.
The META Tag
Refresh allows you to refresh the same Refresh allows you to refresh the same page at a given interval of time OR you page at a given interval of time OR you can refresh to a different page with a can refresh to a different page with a given interval of time.given interval of time.
<meta http-equiv=“Refresh” content=20; <meta http-equiv=“Refresh” content=20; URL=nextpage.html>URL=nextpage.html>
Multimedia From Webopedia:From Webopedia:The use of computers to present text, graphics, video, The use of computers to present text, graphics, video,
animation, and sound in an integrated way. Long animation, and sound in an integrated way. Long touted as the future revolution in computing, touted as the future revolution in computing, multimedia applications were, until the mid-90s, multimedia applications were, until the mid-90s, uncommon due to the expensive hardware required. uncommon due to the expensive hardware required. With increases in performance and decreases in With increases in performance and decreases in price, however, multimedia is now commonplace. price, however, multimedia is now commonplace. Nearly all PCs are capable of displaying video, Nearly all PCs are capable of displaying video, though the resolution available depends on the power though the resolution available depends on the power of the computer's video adapter and CPU. of the computer's video adapter and CPU.
Because of the storage demands of multimedia Because of the storage demands of multimedia applications, the most effective media are CD-ROMs. applications, the most effective media are CD-ROMs.
Multimedia
Is often thought of as just video. Is often thought of as just video. ActuallyActually AnimationAnimation SoundSound Video (this is a huge digital video file!)Video (this is a huge digital video file!)
Can help you add “excitement” to your Can help you add “excitement” to your site or can be something that annoys site or can be something that annoys usersusers
Multimedia
Does the multimedia add something to your Does the multimedia add something to your site?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”
Multimedia
Remember the importance of bandwidth Remember the importance of bandwidth
and “Net Real estate”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?
Streaming Media Technology (Video& Audio)
Real PlayerSailor Moon song demo RP soundCayman Islands Video demo RP 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
Streaming Media Technology (Video& Audio)
Windows Media PlayerVariable Bit RateNative player built into Internet
Explorer 5.0 +Speed/Quality settings
Streaming Media Technology (Video& Audio)
QuickTimeVariable 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
Streaming Media Technology (Video& Audio)
MPEGVery High QualityPlug-ins available for all browsers and
media players availableWith proper hardware, can be played
onto a TV or VCRNative format for DVD, VCD, and
SVCD technologies
Using Video Create/locate your videoCreate/locate your video Edit your video Edit your video
Adobe PremierAdobe Premier Final Cut ProFinal Cut Pro
Compression Pixel Size Image Quality Frame Rate Compatibility
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
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
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
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.
Embedding Videos IE has extensions (dynsource attribute to
<img> tag, but not available in Netscape, see book) The actual tag for this is <embed> with the
src= attribute (along w/others) Coding
You can make it stream right awayYou can add controls or notbasically, anything you want to do, you
can with attributes like href, pluginspage, width, and height
Animation
Animated GifsAnimated Gifs FlashFlash ShockwaveShockwave
Other Multimedia
Sonic Foundry Acid ExpressSonic Foundry Acid Express Beatnik, Mixman StudioBeatnik, Mixman Studio
Sonic Foundry Sound ForgeSonic Foundry Sound Forge Cool Edit ProCool Edit Pro
Adobe PhotoshopAdobe Photoshop Corel Draw, Microsoft Draw, PhotoImpactCorel Draw, Microsoft Draw, PhotoImpact
Adobe ImageReadyAdobe ImageReady Fireworks, Sonic Foundry ViscosityFireworks, Sonic Foundry Viscosity
Top Related