A more exciting home page

More exciting?

Well, at least this one has a picture in it!

Elements

<P>Well, at least this one has a picture in it!<BR>
<IMG SRC="world.gif"></P>

• <IMG SRC="world.gif">
  • This is the Image Source, with the name of the image file in it.

Element attributes

<IMG SRC="world.gif" ALT="World.gif" WIDTH="200" HEIGHT="80">

• ALT="World.gif"
  • Text shown on the screen if images are turned off on the browser

• WIDTH="200" HEIGHT="80"
  • Sets the size of the image. This allows the browser to leave the appropriate amount of space, and work around it.

Element attributes

<IMG SRC="world.gif" ALT="World gif" ALIGN="LEFT" WIDTH="200" HEIGHT="80"
<IMG SRC="world.gif" ALT="World gif" ALIGN="RIGHT" WIDTH="200" HEIGHT="80"

• ALIGN="LEFT"
  • Positions the image to the left or the right on the screen.

The text here is at the top of the image

And here it's in the middle

And finally its right at the bottom

Element attributes

<P><IMG SRC="world.gif" ALT="World gif" ALIGN="TOP" WIDTH="200" HEIGHT="80">
The text here is at the top of the image</P>
<P><IMG SRC="world.gif" ALT="World gif" ALIGN="MIDDLE" WIDTH="200" HEIGHT="80">
And here it's in the middle</P>
<P><IMG SRC="world.gif" ALT="World gif" ALIGN="BOTTOM" WIDTH="200" HEIGHT="80">
And finally its right at the bottom</P>

• ALIGN="BOTTOM"
  • Aligns the text to the top, middle bottom of the image.

Other imagey things you should know.

Transparent backgrounds
You'll have noticed that in the image above, it sits quite nicely on the page. This is because it has a transparent background, which is to say that all the 'white space' around the image has been rendered transparent by the browser and graphics software combined. If you don't use a transparent background, you'll end up with something like this:

Interlaced gifs
All of the images that I've put in these pages are Interlaced Gifs, which is to say that they start out on the page in a blurred form, and slowly sharpen up. The other option is non-interlaced, which means that they appear on the screen slowly line by line in a finished form.

OK, thats images for you. Now lets move onto links.