Web Pages Made Easy - Notes from Lesson 3

Lecture and Discussion

---

Lesson 3: Applying Images

Now that you have some text on your page and you've established the structure of your text, you'll
learn how to liven it up with some images.

In your reading, you learned how you can embed an image in a page by using the <img> tag and specifying the location of the image with the src attribute. You also explored how you can align images with text and specify a text alternative for your images. Now we'll discuss these topics in a bit more detail and introduce some additional concepts that will help you to use images effectively.

Exploring
Image Formats

The images you insert in
your Web pages need to be one of two image formats, either a GIF
or JPEG image. The GIF image format is for non-photographic images
that don't have many different colors. GIF images have a .gif file
extension, as in MyImage.gif.

The following is an example
of a GIF image. It's not a photograph, and does not contain many different
colors.

An example of a GIF image

The JPEG (pronounced "jay-peg")
image format is for images based on photographs--images that contain many
colors. JPEG images have a .jpg file extension, as in MyImage.jpg.

The next image is an example
of a JPEG image. Because it's a photograph, it contains many colors.

An example of a JPEG
image

You can obtain images from
a variety of sources. There are many sites on the Web that offer free GIFs
and JPEGs you can use. Or, if you have experience with image editing programs,
you know that you can create your own images from scratch. If you have
a digital camera, it will automatically save your photographs as JPEG files
which you can then embed in your Web pages. If you don't have a digital
camera, you'll need a scanner to digitize your film-based photographs.



Web Sites That
Offer Free Images

TIP! If you find any images you like, save them into the folder you created for your Web site.

If you don't have a digital
camera or scanner, you can always obtain images from a variety of sites on the
Web. For example, check out the following Web sites and you'll likely find a
few images that fit the theme of your Web page:

• 
  Free Images


• 
  iStock Photo


• 
  Free Foto

Inserting
Images

As demonstrated on page 64
of your book, you can insert images by using the <img> tag and src attribute.
The src attribute specifies the location of your image. If your image is
located in the same folder as the Web page you're inserting it into, you
can simply specify the name of the image, for example:

<img src="myimage.gif">

However, if you want to keep
all your images in a separate folder inside your Web folder, you'll need
to specify the name of your images folder, followed by a forward slash
( / ), and then the file name of your image, for example:

<img src="images/myimage.gif">

If your image is not in the
folder that you specify in your src attribute, Internet Explorer will display
the following icon, which indicates that it can't locate your image:


Providing
Alternative Text

As mentioned in
your book, you should always provide alternative text for your images.
Some people use non-visual browsers that use speech to deliver the contents
of a Website. When these browsers encounter an image, they read the contents
of your alt attribute. Also, some users disable images in their
browser preferences to make Web pages load faster. Your alternative text
will be important to them as well.

TIP! In Internet Explorer, alternative text creates a "tooltip". When you place your mouse pointer over an image that has alternative text, a small message box appears with the alternative text. To see this, place your mouse pointer over the Saturn Enterprises logo.

Depending on the image, your
alternative text should either describe the content of the image, or simply
indicate what the image is. For example, The following GIF image is the
logo for the fictional company "Saturn Enterprises". A logical choice for
a text alternative would be "Saturn Enterprises Logo".

To code this, you would write:

<img src="saturnlogo.gif" alt="Saturn Enterprises
Logo">

For a photographic image,
you might want to describe the content of the image itself. For example,
using the JPEG Image shown earlier on this page, you might create alternative
text that reads, "Scene overlooking the Cascade mountains."

Discussion

Now you know the fundamentals
of structuring text, and you can begin to add content to your page. Post
your comments to the following discussion items in the message board:

1. 
   Do you know of any other sites
   on the Web that offer free images? If so, share them with the class.


2. 
   Why is it important to keep
   your images as small as possible?