Graphics

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!

File Formats

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

Alt attribute

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>