Adding Images

As we are using this web page purely for displaying images, I will not be showing you how to add blocks of text.     Images take a lot longer than text to download on a web page, therefore you have to be aware of the dimensions as well as the file size of each image. There is nothing more frustrating, if you have a slow connection, than waiting for several minutes for an image to appear.  This is particularly important if you have several images on a page.  To help speed up the image download we use the WIDTH and HEIGHT attributes of the image.   These can be found by either opening your image in your graphics program or if you have Windows XP they will show under the file name in pixels which is what we need for HTML.  I would suggest that a file size of 80kb is a reasonable size.  We will also be using the ALT attribute, which displays an image description or a message when a mouse pointer is hovered over it.  The tag for inserting an image is <IMG SRC> and there is no need for a closing tag in this instance.

Before we can insert an image we need to either move it or copy it into your folder with all the other files relating to your web page.   We will be using this image called rose.jpg, which is 400x400 pixels.

This is the image we will be using. Right click on it and save into your folder.


Rose

My rose image.

Insert the following coding into your html document as shown below:

<IMG SRC="rose.jpg" WIDTH="400" HEIGHT="400" ALT="Rose">  Remember to leave a single space between each attribute.

<HTML>
<HEAD>
<TITLE>Topsy's Web Graphics</TITLE>
</HEAD >
<BODY BACKGROUND="tpslilac.jpg" TEXT="#000000" LINK="#800080" VLINK="FF40FF" ALINK="FF40FF">
<CENTER>
<H1>My Graphics</H1>
<IMG SRC="rose.jpg" WIDTH="400" HEIGHT="400" ALT="Rose">
</CENTER>
</BODY>
</HTML>

If you would like to add a description or comment under the image as I did with mine, add the following tag at the end of the coding for the image <BR> as this makes a break in the line and takes you to the line below.  This does not have a closing tag.  If you want more space under the image before the text add another <BR>

Type in your description and add it under the line you just added your image measurement and name to.

To add more images just repeat this again, changing the name and sizes to match your new image.

<HTML>
<HEAD>
<TITLE>Topsy's Web Graphics</TITLE>
</HEAD >
<BODY BACKGROUND="tpslilac.jpg" TEXT="#000000" LINK="#800080" VLINK="FF40FF" ALINK="FF40FF">
<CENTER>
<H1>My Graphics</H1>
<IMG SRC="rose.jpg" WIDTH="400" HEIGHT="400" ALT="Rose">
<BR>
My rose image
<BR>
<BR>
Add in next image remembering all the attributes for it
</CENTER>
</BODY>
</HTML>

Adding Links.  If you would like to add a link to your page this is the coding you would use.   Say you wanted a to link to PlusPSP this is how you would create the link <A HREF="http://www.pluspsp.com"> PlusPSP.com</A>

The A HREF is the ref and you always start with that.   The next part is the full URL of the page you want to connect to (including http://), then the name of the site you are connecting to eg. Pluspsp and </A> is the closing tag.

Save your file and then go to your folder and click on index.html to check your progress.




Back     Page 5