Useractive Tutorial

Images - HTML Lab 4

Adding Images to your Page

The <IMG> tag is used to display an image on your web page. Let's take a closer look at how it is used.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Images
</TITLE>
</HEAD>

<BODY>

<IMG SRC="http://www.useractive.com/image.gif">

</BODY>
Click PREVIEW. You should see the UserActive logo.

The blue section of this tag is the SRC attribute. It is used to define the URL of the image to be displayed. In the last lesson you used URL's of html files. Just like html files, any image file that is stored on a server has an address that you can use to access it.

You probably don't want the UserActive logo on your page, so try adding an image to your page that you like. Surf around the web until you find one you like.

If you are using Netscape, move your mouse over the image and click the right mouse button. You should see a list that looks something like this:

Select Copy Image Location from the list. When you are finished, come back to the CodeRunner® Editor and replace http://www.useractive.com/image.gif with the image address you just copied. You should paste it in using CTRL-V (PC) or Apple-V (Mac).

If you are using Internet Explorer, move your mouse over the image and click the right mouse button. You should see a list that looks something like this:

Select Properties from the list. Another window will open which gives information about the image. Find the URL of the image, highlight it with your mouse button, and select CTRL-C (PC) or Apple-C (Mac). When you are finished, come back to the CodeRunner® Editor and replace http://www.useractive.com/image.gif with the image address you just copied. You should paste it in using CTRL-V (PC) or Apple-V (Mac).

You can practice using this image:

Keep in mind that the only images that can be displayed on all browsers are of type .gif or .jpg. If you want to display an image of another type (like .bmp, for instance) you should first convert the image to a valid type using software such as Adobe Photoshop or Paint Shop Pro.
Positioning Your Image
One of the attributes you can use within the IMG tag is align. This attribute is used to align an image relative to its neighboring text. Possible values of the align attribute include top, bottom, middle, right, and left. Let's experiment one of these values!
In HTML mode, type the following into the CodeRunner® Editor below
<HEAD>
<TITLE>
Images
</TITLE>
</HEAD>

<BODY>

<IMG SRC="http://www.useractive.com/image.gif" align="right">This is right.

</BODY>
Click PREVIEW.

It should look something like this:

This is right.

Try replacing the word right with top. Then try left, bottom, and middle.
Controlling Image Size
There are two other attributes of the IMG tag that you can use to control image width and height. Let's take a look at an example.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Images
</TITLE>
</HEAD>

<BODY>

<IMG SRC=http://www.useractive.com/image.gif ALIGN=right width=150 height=50>

</BODY>
Click PREVIEW.

If you change only one of the attributes (like width, for example), then the height will automatically change so that the proportions remain the same. Experiment a bit to see for yourself!
Using Images as links
What if you want visitors to be able to click on an image and go to another URL. We can do that!
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Images
</TITLE>
</HEAD>

<BODY>

<A HREF=http://www.useractive.com/>
<IMG SRC=http://www.useractive.com/image.gif>
</A>

</BODY>
Click PREVIEW. When the window opens, move your mouse over the image and click the mouse button. You should be taken to the UserActive home page.

In red you see an anchor tag. This should be familiar to you from the previous lesson. Instead of creating a hyperlink using text between <A> and </A> we create the hyperlink using <IMG>.

Did you notice that the image had a colored border around it? This border indicates that the image is a hyperlink. There is a way to get rid of it though! Take a look at this.
In HTML mode, type the following into the Editor below
<HEAD>
<TITLE>
Images
</TITLE>
</HEAD>
<BODY>

<A HREF=http://www.useractive.com/>
<IMG SRC=http://www.useractive.com/image.gif border=0>
</A>

</BODY>
Click PREVIEW. Try using a number other than 0 and see what happens!
Putting Images In Your Background
Let's try using an image for the background of our web page. You learned about several attributes of the body tag in HTML Learning Lab 2. BACKGROUND is another attribute of the body tag which is used to create background images.
In HTML mode, type the following into the CodeRunner® Editor below:
<HEAD>
<TITLE>
Images
</TITLE>
</HEAD>

<BODY BACKGROUND=http://www.useractive.com/background.GIF>

<A HREF=http://www.useractive.com/>
<IMG SRC=http://www.useractive.com/image.gif border=0>
</A>

</BODY>
Click PREVIEW. You should see a really ugly burlap background on your page.

You can use any image you want as your background. Take my advice: you should definitely not use this background. Yuck.
Uploading Images To Your UserActive Account

As you learned above, you can display images from other locations on your own page by linking to them. However, this can result in a broken image on your page if the link changes. To avoid this, you can upload images (or any other file that is saved on your computer) to your UserActive account.

Surf around the web until you find an image you like. Move your mouse over the image and click the right mouse button. You should see the same list we discussed earlier. Select Save Image As from this list and save this image to your computer.

Next, click on in the CodeRunner® toolbar or go to TOOLS -> UPLOAD. A new window will open. Click on the Browse button to view the files on your computer. Find the image you just saved and double click on it. The name of this file will be displayed in the text field. Click on the Upload button. You will be asked to name the file. You can change the name of the file to anything your want but do not change the file extension. When you are finished, select OK.

Did it work? If so, you will see the message that the file has been successfully uploaded. You can now reference this file from your UserActive account. If not, be sure to email your mentor.