ADDING GRAPHICS

We are going to have some FUN NOW!!!
One of the great things about the web is that
if you are designing for non-commercial use
EVERYTHING is savable to your drive
by holding down on the right button of your mouse...

If you see it and like it COPY it....
The graphic tag or element is like all the other elements
in that it has ATTRIBUTES
that allow you to modify it for your own use.....
THE BASIC TAG LOOKS LIKE THIS......

That tag would place the firework gif
displayed above in your document..

Note that it does NOT have an ending tag...
making it different than many HTML tags... Like any tag or element in HTML it has ATTRIBUTES
which allow us some control
as to placement and size....Here is a list of attributes in the table below...
and I will provide you with some samples....

ALIGN="TOP"	By choosing this you specify the browser display the top of your image so that it aligns with the top line of text.... (This will push down the next line of text)
ALIGN="BOTTOM"	By choosing this you specify the browser will align the image with the bottom line of text
ALIGN="MIDDLE"	By choosing this you specify the browser will align the middle of the image with the middle line of the text
WIDTH="#"	Used to set the image's..you guessed it WIDTH Usually set in pixels but can be inches or percentages (It is important to keep images in proportion when you change the width and height)
HEIGHT="#"	Specifies the image's HEIGHT Don't be afraid to fool around with Height and Width for some neat affects (The color bar above was very thin and I changed the height for a chunkier look)
BORDER="#"	You don't need a border around your images but it is fun for affect Quite often when an image is a link a border is put around the image... Let's play around below

An Image With a Border

Note that the image is enclosed in a center tag
to line it in the middle of the page....

Just as an aside you can make the image a link by
wrapping an anchor tag around the image as follows...
<A HREF="famalbum.html"><CENTER><IMG SRC="group.jpg" BORDER="16" WIDTH="300" HEIGHT="390" ALIGN="BOTTOM"></A></CENTER>
In this case by hitting on the graphic you would be led to another page named famalbum.html

Let us now discuss the different image formats...
just so you know....

JPEG IMAGES	These have a file extension of .jpg or .jpeg.... They are designed for photographs. They allow up to 16 million differnt colors in an image....
GIF IMAGES	GIF images with an extention of .gif are the most common type of images on the web....good for line drawings, icons, computer generated images, simple cartoons...Limitations - only 256 colors. They can be animated transparent or interlaced...

At the bottom of my page is a link to a page of graphic links
that will take you to some interesting spots on the web...
As you get more involved with web design
you will want to create your own graphics. There are sites on the
web that can show you how...
or programs to download for trial...
These are listed on a separate table on the graphics links table
..which you can go to now just to have a peak...or move on..

GRAPHIC LINKS ON THE WEB

There is always the basics of design
and then there is getting a little fancier....
Quite often you will find that you want to place one
object on top of the other
OI have a lot of fun with this one...
Go here to find out how to absolute position your graphics.....

ABSOLUTE POSITIONING OF GRAPHICS