Beyond%20The%20Bare%20Bones%20of%20HTML

1
Beyond The Bare Bones of HTML

• CSS
• Alt Meta Tags
• Multimedia

2
Agenda

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

3
CSS for Multiple Pages

• 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.
• Create your html page with the appropriate ltpgt,
  ltH1gt, ltIgt tags but do not use formatting.
• In the head of your document instead of embedded
  CSS, create a link to your external CSS page.
• ltLINK RELstylesheet HREF"mystyles.css"
  TYPE"text/css"gt

5
External CSS

• 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

6
The ALT Tag

• 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
• 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
• Has no end tag
• Has no content per se
• ltmeta namekeywords contentCars, car models,
  buying information, car ratingsgt
• OR
• ltmeta nameauthors contentBjork Trickygt
• Instead has name/value pairs

10
The META Tag

• Name attribute typically keywords
• Content attribute- this provides the value of the
  content and can be any string. Use quotes if
  there are spaces.
• ltmeta namekeywords contentCars, car models,
  buying information, car ratingsgt
• OR
• ltmeta nameauthors contentBjork Trickygt

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 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.
• ltmeta http-equiv.Refresh contentfield valuegt
• 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.
• ltmeta http-equivRefresh content20
  URLnextpage.htmlgt

14
Multimedia

• 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
• 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

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 youre selling?
• Does the element maintain the users 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
• Cayman 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 doesnt
  care what speed your connection is, it will send
  out the information as fast as your connection
  will accept it.
• You can tailor youre 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.
• Doesnt 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
• 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 audiences
  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 ltimggt
  tag, but not available in Netscape, see book)
• The actual tag for this is ltembedgt 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
• Flash
• Shockwave

29
Other Multimedia

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