CSCI 220: HTML Authoring & WWW Programming

Graphics, Sound & Video

Types of Images

Because the Internet (or any network) is only capable of transmitting information in digital (e.g. 1's & 0's) format, any picture which you want to use must be "translated" into a digital format. That is, we must find a way to convert our picture (or even our videotape) into a bunch of 0s & 1s.

  1. There are several different varieties & formats of digital images (Examples: .bmp, .wmf, .gif, .tiff, .jpg)

  2. What's the difference between these formats?

Image Acquisition & Manipulation

  1. Step 1: Obtain The Image

    1. Scanning

      Advantages:

      • Allows you to digitize practically anything
      • Gives you a lot of control over image resolution

      Disadvantages:

      • Requires a fairly hefty hardware investment;
      • Usually wind up with a .tiff file so you need to convert it to a more "web-friendly" format such as .gif or .jpg
    2. Digital Cameras

      Advantages:

      • Eliminates the need for scanning

      Disadvantages:

      • Expensive, poor resolution
    3. Screen Shots

      Advantages:

      • Good way to get images into a format not supported by your graphics program.

      Disadvantages:

      • Very limited utility.

    4. "Grab" Them from Another Site
      • Well, maybe "borrow" is a better term. Be very careful about copyright infringement.
      • This is probably the most popular way of obtaining images for your pages.
      • Two ways to do this:
        1. Direct download
        2. "Right-Click" over image (with Netscape)

      Advantages:

      • Obviously very inexpensive.
      • There's a lot of good artwork at your fingertips.
      • There are many large repositories of image collections free for the taking.

      Disadvantages:

      • You need to be careful about copyright infringement of commercial logos and personal artwork where permission has not been granted.
      • Doesn't help you if you want to create "custom" artwork for your particular site.

  2. Step 2: If desired, manipulate the image

    1. Graphics Editors = allow you to create/edit images and transfer images into different formats

      1. Simple & Inexpensive
        • Lview (Win)
        • Clip-To-Gif (Mac)
        • Jpegviewer (Mac)
        • XV(UNIX)
      2. Expensive & Complex
        • Adobe Photoshop (Mac/Win)
        • Corel Photopaint (Win/Mac)
  3. Step 3: If necessary, select an image format and save it

  4. Step 4: Embed the image into your Web page

    <img src = imagefilename>

    Options:
    • align = "left", "right", "top", "middle", "bottom", "textop", "absmiddle", "absbottom"
    • border = #
    • width = #, height = #
    • hspace = #, vspace = #
    • alt = descriptive_text

Buttons, Bars & Bullets

This is probably the context in which graphics are most frequently used in web pages. Because the images are so small in size, buttons, bars & bullets allow you to add some pizzazz to your page with a minimal amount of bandwidth overhead. The syntax for inserting buttons, bars and bullets is the same as with "standard" images: simply reference the images with the <img src = filename> tag. The primary issue is when and how to use these images.

Buttons direct the reader to another location such as the previous, home or next page. Arrows (left, right, up, down) are the more standard type of buttons used. Bars demarcate sections of a page in a more colorful manner than the plain-old <hr>. One of the more popular uses of bars is the yellow and black "construction" bar to indicate that a page is "Under Construction", however, there are many styles to choose from to suit your particular taste. Finally, bullets allow one to create "bulleted" lists of items in a more interesting manner than with unordered lists. You can use multicolored "balls" which provide the same effect as the <ul> black dot but are more appealing to the eye. Note however, you will have to "fudge" the list (just use <br>'s), because <ul> does not support the use of images in the <li> tag.

There are several good repositories of buttons, bars and bullets which are free to download and use. A list is provided at the end of this page.

Sound & Video

As with buttons bars and bullets, sound and video can be added to your pages. These are far less common because the enormous size of these files inhibits effective use in page presentation. The most common use of sound and video is to provide short messages (usually a welcome message from a company CEO) through a clickable href (which we will discuss later). For the time being, suffice it to say that with the limited exception of Microsoft's background sound and video support, the use of active sound and video in Web page design is something that is currently hampered by the limited bandwidth available to most end users.

If you really want to add sound and video to your pages, the following are supported by (only) the MS Internet Explorer browser:

"controls"

Web Resources

A Word On Bandwidth & Document Aesthetics

Probably one of the most important yet frequently ignored issues in Web publishing. For the time being, most people do their internetworking over a phone line. This means that they are getting at best 28.8 kbs throughput. In comparison, most LANs get somewhere in the vicinity of 100 Mbs throughput. Bandwidth is kind of the electronic equivalent of like comparing the output of a squirt gun to a fire hydrant. Unfortunately, at the present time, most people are wielding squirt guns, so we need to design our pages with that in mind.

What does this mean for the web author? Don't waste bandwidth. Don't load down you pages with huge images and sounds which will take forever to download. You'll lose a potential visitor/customer before they've even had a chance look at all the wonderful things your site has to offer. This doesn't mean eliminate all images, after all, that's the appeal of the Web, just use them judiciously. Use JPEGs for backgrounds and images which don't have to be transparent. Don't use a monstrous imagemap just because you feel the need to have one. In fact, unnecessarily large imagemaps are probably the primary culprits in wasting bandwidth. A great way to test whether your page is "too big" is to find a computer with a 14.4 kbs modem and go to the page. If it takes more than a minute or so to download, you probably have too much. If have a really neat-o graphics/sound/applet extravaganza that you just have to show everyone, give your visitors a choice by making your main page an "option" page which allows people to go to either your whiz-bang page or a scaled-down version which gets them to the information they are looking for quickly and efficiently.

Your objective shouldn't so much be to dazzle as to provide a maximum amount of information in a manner which is pleasing to the eye. It's OK to be creative and let your artistic juices flow. A lot of times that's what keeps people coming back, the use of just the right amount of artistry that makes people say: "Wow! That was a really neat page!". But remember, we are talking about the "information superhighway" here, and your objective should be, above all else, the transmission of information about yourself, your company, your interests, great links, whatever, to the person who visits your page. If your page is so bogged down in graphics and sound that people cannot reach the essential information, then you have defeated the purpose of having a Web page in the first place.

End of sermon. ;^)

levels of connectivity

There are multiple ways to connect a computer to the internet. It is easy to be confused. As a web author, you ought to know the differences.

  1. Direct Connection

  2. Dial - In Connection

  3. Slip / PPP

  4. Commercial Service Providers

Lab Assignmnet

Create a page that has examples of the following:
Some other guidelines to consider:

Other Places to Explore

Extra Credit: Make an interlaced GIF with a transparent background.

© 1996, Ted D. Biggs, Andrew J. Harris
Dept. of Computer and Information Science,
Indiana University, Purdue University, Indianapolis
email: tbiggs@klingon.iupucs.iupui.edu