STEP BY STEP GUIDE
TO HTML - PART 3
ADDING IMAGES

Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan

To images used for navigation and site functionality

By now you've mastered text editing. Much of what you've done applies to images

We're going to begin by looking at the different image types used on the web. We'll discuss some of the sources for these images and how you can add 'em to your webpages. You'll need to know how to align your images with text and alter image size. Finally we'll look at putting space & borders around your pics

IMAGE TYPES

You are best to use 2 main image types to begin with (as almost all browsers can use them)

.gif

These files are commonly used for simple graphics, icons or drawings. It is based on 8 bit files that can handle only 256 colours. The compression used on .gif files is most suited for images with large areas of colour and clear borders. Therefore a .gif would be ideal for things like street maps. They are poor with complex colour images and gradiated textures

.gifs other big advantages is that they can be animated like the one on the left.

Many .gif such as buttons come with transparent backgrounds (this can be set on tag in image props) but many esp. animated ones, may not so leave usually a black or white background (explains why many sites on the net are in these shades). You can often alter this with a graphic packages

.jpeg (or .jpg)

Best for photos. Can reproduce 24 bit files that can handle in excess of 15 million colours. The compression used is good with gradiated areas of mixed colour (not so good with hard areas and block colour)

Sunset Dominican Republic Aug 1997. Image ©2002 A. Duncan

GETTING YOUR IMAGE

There are tons of ways of getting web based images

You can create your own by using a scanner for photos or graphic packages. This can be great fun and allow you complete control over the image. However if your not artistically inclined there are plenty of other sources of images, many for free.

A good place to start is on-line. There are several sites on the net offer free .gif and .jpegs. We've a list of some in our links area. Make sure you check out any copyright details and never take a image without clear permission or you could find yourself being sued.

To get image from a web site using Internet explorer, right click image and select "save picture as". You can rename it but remember to send it to the folder your web page is on. Always check the copyright notices before taking an image off the web

Off line you have some choices. Several companies sell discs of prepared images for you to use and many computer magazines cover disc have free clipart or other images. As always check copyright instructions.

However you get your image ensure or alter the image file name so it is all one case e.g. mypic.jpeg not MyPic.jpeg and put it in your website folder.

INSERTING YOUR IMAGE

Before you start make sure your image file is in the same folder as your web page will be or is.

The <img> tag defines your image. You don't need to close it (i.e. you don't need </img>). You do need a couple of other items.

Lets say you have an image called myimage.gif. Put it in the same folder as your webpage. To add the image to your page simply add.

<img src="myimage.gif" alt="my picture">

Within the <img> tag you must include a src attribute. This defines the location of where your image is in relation to the webpage (here it's in the same folder)

You should also use the alt attribute for ever image. Although not essential, this dictates an alternative text description for you item. It is useful for several reasons. Not all browsers are graphic enabled and some people turn off graphic downloading to speed up surfing. Your alt message will appear in place of the image making your page make sense. The same applies for visually impaired people surfing the net.

The other advantage is that on graphic enabled browsers a message pops up when you move your cursor over making your page appear more dynamic

ALIGNING IMAGES AND TEXT

The relationship between text and image and alignment is easy to follow. The image usually becomes part of the text on the line. The align attribute is used to set how high or low it sits

For example

<img src ="myimage.gif" align=middle>

here the text sits in the middle.

With align = top text is at the top

& with align = bottom at the bottom

There are 2 other align values - left & right

Here align = right you can see how the text wraps round it on its left hand side. This is useful to have magazine type documents with text embedded into paragraphs.
align = left would have the image on the left with text wrapping around it on its right hand side

There are other align attributes but not all browsers support them

If you want you can use the text style alignment to position images and text as well

e.g.

<p align = center>
<img src = "myimage.gif"><br>
now we are in the middle</p>

now we are in the middle

RESIZING IMAGES

The more astute of you will have noticed that the same sunset picture has been used in different sizes throughout this tutorial. We haven't used different pics (they're all the from the same domsunset1.jpg file which is 300x204 pixels in size)

We've alter the size by adding by defining the height and/or width attributes of the picture

e.g. here it is full sized and coded as shown below
<img src="domsunset1.jpg" alt="sunset">

Lets halve it by setting the width attribute to 150 pixels
<img src="domsunset1.jpg" alt="sunset" width=150>

Of course you could do the same by setting the height attribute

If you set both be careful you don't warp the image
e.g.
<img src="domsunset1.jpg" alt="sunset"
height=100 width=300>

The other handy thing is you can help maintain your page layout by pre-setting these values (right-click your image in it's webfolder and select properties. You may then need to select summary depending on your operating system but you'll find a width and height value in there.

Here's an example using a non existent image.
<img src="nonexistent.gif" height=200 width=300>
see how the box defines the space (300 x 200 pixels)

SPACE & BORDERS AROUND YOUR IMAGES

Finally you can add a buffer zone around your images using vspace and hspace attributes (vertical and horizontal space) in the <img> tag . You can also add a physical border using the border attribute

This image has
hspace=20
vspace=20
border=6
meaning it has a buffer of 20 pixels on either side and 20 pixels top and bottom. It also has a 6 pixel wide border round the image

This allows you to give some space for images when you're including them in documents like this one and can be helpful with page layout. Borders are handy and an important factor when using hyperlinks (see next tutorial)

We'll come back to images later when discussing backgrounds

BACKNEXT
BASIC HTMLMENU