GRAPHICS
A note about copyright
You should never use any graphics, images, text or photos without permission.
There are several sites available on the Web where you can receive free images.
But under no circumstances should you ever copy material unless the site says
you can or you personally have received permission. It's just better to create
your own stuff or ask (and get an okay) before you use someone else's stuff. Don't
be a cheater!
Two file formats have been developed to help keep files
small, while maintain a high level of quality:
.gif files: graphic interchange format – 256 colors
.jpg files: joint photographic experts group – millions of
colors
The Image tag
To place an image onto a Web page you will need to use the image tag. There are
two very important things to remember about the image tag:
1. It’s an empty tag (remember, that means there’s no closing
tag, only a beginning).
2. It requires attributes to be effective.
The image tag The image tag <img> has several
attributes:
src--identifies the image
and tells the browser where to get the image
alt—gives alternative
text for those who are not viewing their pages as images.
height & width—tells the
browser the size of the graphic (speeds up the downloading process
Let’s go through each one of the attributes in more detail.
SRC attribute
To help the browser identify and find an image, you use the following command:
<img src="../foldername/filename.gif">
The alt attribute lets the user know what’s in the
picture by providing descriptive text. It also has an added feature with the
latest versions of Internet Explorer and Netscape Navigator. When the cursor
arrow passes over artwork or a photo, a little rectangular box pops up that
contains the alt copy. It’s a great way to add interest to your page or even
give instructions to the user.
When things go wrong with your code,
you need to do some detective work!
The image tag for this graphic looks like this:
<img src="mystery.jpg" alt="Detective at work!">
Height & Width attribute
When placing your images onto the screen, the browser looks for the height and
width of your images. This is an excellent feature because it allows the
browsers to set the space size aside while laying out the balance of the page.
If you do not specify the size, the browser will stretch it or reduce it to
fit.
Height and width are
listed in pixels--those little dots that make up an image on a computer screen.
The code for this image is like this:
<img src="masks.jpg" width="149"
height="140" alt="You can determine how large your images are by
opening them in Navigator.">
Align Attribute
When you place a graphic on a page it will always appear to the left (that's
the default or the standard for the browser).
However, you can place it to the
right just by adding the align attribute to the image tag. And the code looks like this:
<img src="masks.jpg" align="right"
width="149" height="140" alt="This is an example of a
right-aligned image.">
And here's the code:
<p align="center"><img src="masks.jpg"
align="center" width="149" height="140"
alt="This is an example of a centered image."></p>
