Lesson V

Backgrounds

You can have a solid color background on your page or a textured one that you import from another site. A solid background will load faster. The tag will look like this:

To use a textured background you transload one to your file manager. Your tag will look like this:

Here is a very good source for backgrounds and animated gifs.

Draacs gifs 123
http://gifs123.tripod.com

Adding Images

In this lesson we will show how to add and align images on your page. The tag for images is: <img src="URL of image">. Img stands for image and src equals, you guessed it, source. You want all of the images on your page on your own file manager. You get them there by transloading. If the browser has to search for an image from another server your loading time increases. This practice of remote loading is no longer allowed by most site hosts ! You get them there by transloading them. Lets get to it.

<img src="name of image.gif">)We would like our image to load as quickly as possible so there are a few more attributes we should add. Width, height and border. Width and height are the dimensions of our image measured in pixels. You can use a border to surround or frame an image again this is expressed in the number of pixels. To find out the dimensions of your image take it to Image Magic. Here you can also reduce or enlarge the image but be careful, enlarging too much can result in distortion.

Our new tag would look like this: <mg src="name of image.gif" width="72"height="62"border="0"> Our image has aligned itself to the left because as you may recall left is the default. We should however tell the browser where we want the image to align. In this way you can have two images on the same line.

Our tags would now look like this:<img src="imagename" align="left"width="72"height="62"border="0"><)img src="imagename.gif" align="right"width="72"height="62"border="0">

We can also place an image in the center.

We can also have images aligned left, center and right.

The tags for the line above would be written like this:<center> <img src="imagename.gif" align="left"width="72"height="62"border="5"> <img src="imagename" align="right"width="72"height="62"border="0"> <img src="imagename" width="72"height="62"border="0"> </center>

Notice that I have added a border of 5 to the center image.

Practice...Practice...Practice

·•HTML And Javascript Test-Bed•·

Info