Adding Images

• Using Images
• Alternate Text
• Aligning Images

Using Images

Another useful tag that you can use is the image tag. You can use this to put pictures in your pages (but lynx users won't be able to see them), and you can also use it inside a link instead of the screen text, or in addition to the text. By doing this you have created a picture that can be used as a link.

The image tag works similarly to the anchor tag. It looks like this:

<img src="filename">

Where filename is the name of the picture. Note that the filename must include the pathname of the file. So if you had a file called picture.gif in your graphics directory your image tag would be:

<img src="graphics/picture.gif">

If you wanted to though you could use a picture as a hypertext link. In this case you would include the image tag in the screen text area like this:

<a href="http://www.chebucto.ns.ca/"><img src="graphics/picture.gif"></a>

This would then display picture.gif and a user would then be able to select that picture and it would take them to the CCN Homepage.

Back to Contents

Alternate Text

Bear in mind that lynx users cannot view pictures, only text. So if a lynx user was to view the page then they would not see this link. In order to make the link visible you must add the alternate attribute to the image tag. The alternate attribute tells the computer to display text that you specify instead of the picture, if the browser cannot view graphics.

So if you used the last link then you would want to modify it to:

<a href="http://www.chebucto.ns.ca/"><img src="graphics/picture.gif alt=CCN's Homepage"></a>

This way graphical users would see the picture.gif but text viewers would just see a link that says "CCN's Homepage". The important thing to remember is to provide text that gives the user some clue as to what the link does. If the link just said "image" or "link" then the user wouldn't know where it goes, but as it is now the user can still use your page effectively.

Another useful way to use the alt attribute is to include the size of the file so that text users can determine if they want to download the image. This can be useful if you have a number of small images linked to their full-size counterparts. The graphical users would then see a small graphic and the text users would see a text description and how big the file is.

So if you had a big vacation photo (bigvacation.gif) of the Eiffel Tower and a small preview version (smallvacation.gif) then you could make the following link:

<a href="http://qraphics/bigvacation.gif"><img src="smallvacation.gif" alt="Picture of the Eiffel Tower, gif 156k"></a>

So then in a graphical browser the person would see a small picture of the Eiffel tower and could click on it to see a big version, and the text browser user would see a link that tells them that the link leads to a picture of the Eiffel tower that is a gif file and is 156k, so that if they want to download it they can.

You can then how it is important to use the alt tag well. In the last example the text could have said anything, but then it's not really useful to the text user.

Back to Contents

Aligning Images

Another thing that you can do with images is to use the align tag. This way you can control where the image is displayed, and how text relates to it. When you just put an image in then the text goes until it comes to the image, then continues at the bottom of the image like this:

text text text text[-----------------]
                   I                 I
                   I                 I
                   I      Image      I
                   I                 I
                   I                 I
                   [_________________]text text text text text

To make this display better then you can do a number of things.

1. Start a new paragraph or line before the image, that will put the text before the image on the line above.
2. You can then start a new paragraph or line after the image to move the text after the image to the line below.

But to get the best control you can use the align tag. The align tag controls how the text after the image is displayed so you may still have to use a new paragraph or line before the image to get just the right look.

To align the text that follows the image with the center of image you use the align center tag:

<img src="graphic.gif" align=center>

And then it would look like this:

[-------------]
I             I
I    Image    I text text text text text text text text text text text text
I             I
[_____________]
text text text text text text text text text text text text text text text

To align the text that follows the image with the top of the image then you use the align top tag:

<img src="graphic.gif" align=top>

So it would look like this:

[------------] text text text text text text text text text text text text
I            I
I    Image   I
I            I
[____________]
text text text text text text text text text text text text text text text

If you wanted the text to wrap around the image then you can use the align left or right tag:

<img src="graphic.gif" align=left>

So then it would look like this:

[-------------] text text text text text text text text text text text 
[             ] text text text text text text text text text text text
[    Image    ] text text text text text text text text text text text
[             ] text text text text text text text text text text text
[_____________] text text text text text text text text text text text
text text text text text text text text text text text text text text

(note that this diagram is for align left. If you aligned right then the image would be on the right with the text to the left)

Of course if your images are not integrated with your text then you could just use normal formatting tags like <center> or <right>:

<p> <center><img src="graphic.gif"></center>

This would then have the graphic separate from the text and centered on the page.

If you want to make your images load faster then you can include the height and width of the image (in pixels) in the image tag:

<img src="graphic.gif" height=480 width=200>

What this does is it tells the browser what the size of the image is before it starts to load the image, so that it doesn't have to ask the server what the size is. This way the browser will load the images faster.

So in the end you can create a very long image tag that does a lot of things:

<img src="graphic.gif" alt="graphic, gif 156k" height=480 width=200 align=left>

This would display the picture graphic.gif, which is 480x200 pixels, along the left side of the screen, with text on the right. And if the person had a text browser then instead they would see the text, "graphic, gif 156k".

Back to Contents

The Chebucto
Neighbourhood
Websites of Dozens of Groups, Organizations and Businesses hosted by Chebucto

By Alphabet      By Subject

Chebucto Photo Gallery